@semiont/react-ui 0.2.45 → 0.3.0

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

@@ -41,11 +41,11 @@ vi.mock('../../../components/Toast', () => ({
 import { ApiClientProvider } from '../../../contexts/ApiClientContext';
 import { AuthTokenProvider } from '../../../contexts/AuthTokenContext';
 import { SemiontApiClient } from '@semiont/api-client';
-import { resourceUri, accessToken } from '@semiont/core';
+import { resourceId, accessToken, annotationId as toAnnotationId } from '@semiont/core';
 
 describe('Annotation Deletion - Feature Integration', () => {
   let deleteAnnotationSpy: ReturnType<typeof vi.fn>;
-  const testUri = resourceUri('http://localhost:4000/resources/test-resource');
+  const testId = resourceId('test-resource');
   const testToken = 'test-token-123';
   const testBaseUrl = 'http://localhost:4000';
 
@@ -72,7 +72,7 @@ describe('Annotation Deletion - Feature Integration', () => {
       eventBusInstance = useEventBus();
       // useMarkFlow is the single registration point for useBindFlow
       // (handles mark:delete mark:create annotate:detect-request, etc.)
-      useMarkFlow(testUri);
+      useMarkFlow(testId);
       return null;
     }
 
@@ -89,7 +89,7 @@ describe('Annotation Deletion - Feature Integration', () => {
     return {
       emitDelete: (annotationId: string) => {
         act(() => {
-          eventBusInstance!.get('mark:delete').next({ annotationId });
+          eventBusInstance!.get('mark:delete').next({ annotationId: toAnnotationId(annotationId) });
         });
       },
       eventBus: eventBusInstance!,
@@ -109,8 +109,9 @@ describe('Annotation Deletion - Feature Integration', () => {
       expect(deleteAnnotationSpy).toHaveBeenCalledTimes(1);
     });
 
-    // Verify correct parameters (annotationUri constructed from ID)
+    // Verify correct parameters (resourceId, annotationId, opts)
     expect(deleteAnnotationSpy).toHaveBeenCalledWith(
+      'test-resource',
       expect.stringContaining(annotationId),
       expect.objectContaining({
         auth: accessToken(testToken),
@@ -127,10 +128,10 @@ describe('Annotation Deletion - Feature Integration', () => {
       expect(deleteAnnotationSpy).toHaveBeenCalled();
     });
 
-    // CRITICAL: Auth token must be present
+    // CRITICAL: Auth token must be present (3rd arg is opts)
     const callArgs = deleteAnnotationSpy.mock.calls[0];
-    expect(callArgs[1]).toHaveProperty('auth');
-    expect(callArgs[1].auth).toBe(accessToken(testToken));
+    expect(callArgs[2]).toHaveProperty('auth');
+    expect(callArgs[2].auth).toBe(accessToken(testToken));
   });
 
   it('should emit mark:deleted event on successful deletion', async () => {
@@ -197,9 +198,9 @@ describe('Annotation Deletion - Feature Integration', () => {
       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');
+    // Verify each call had correct annotation ID (2nd arg)
+    expect(deleteAnnotationSpy.mock.calls[0][1]).toContain('annotation-1');
+    expect(deleteAnnotationSpy.mock.calls[1][1]).toContain('annotation-2');
   });
 
   it('ARCHITECTURE: useBindFlow is called in useMarkFlow (single registration point)', async () => {

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

@@ -26,7 +26,7 @@ import { EventBusProvider, resetEventBusForTesting, useEventBus } from '../../..
 import { ApiClientProvider } from '../../../contexts/ApiClientContext';
 import { AuthTokenProvider } from '../../../contexts/AuthTokenContext';
 import { SSEClient } from '@semiont/api-client';
-import { resourceUri } from '@semiont/core';
+import { resourceId } from '@semiont/core';
 
 // Mock Toast module to prevent "useToast must be used within a ToastProvider" errors
 vi.mock('../../../components/Toast', () => ({
@@ -40,7 +40,7 @@ vi.mock('../../../components/Toast', () => ({
 
 describe('Detection Progress Dismissal Bug', () => {
   let mockStream: any;
-  const rUri = resourceUri('https://example.com/resources/test');
+  const rUri = resourceId('test');
 
   beforeEach(() => {
     resetEventBusForTesting();

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

@@ -1,16 +1,15 @@
 /**
- * Layer 3: Feature Integration Test - Resolution Flow (search modal & body update)
+ * Layer 3: Feature Integration Test - Bind Flow (body update)
  *
- * Tests the UNCOVERED half of useBindFlow:
- * - bind:link → emits bind:search-requested
- * - bind:search-requested → opens search modal with pendingReferenceId
- * - onCloseSearchModal → closes modal
+ * Tests the write side of useBindFlow:
  * - bind:update-body → calls updateAnnotationBody API
  * - bind:update-body → emits bind:body-updated on success
  * - bind:update-body → emits bind:body-update-failed on error
  * - auth token passed to updateAnnotationBody
  *
- * The deletion half of useBindFlow is covered by AnnotationDeletionIntegration.test.tsx.
+ * The wizard modal (ReferenceWizardModal) handles modal state, context
+ * gathering, search configuration, and result display. This test covers
+ * only the downstream API calls after the wizard emits bind:update-body.
  *
  * Uses real providers (EventBus, ApiClient, AuthToken) with mocked API boundary.
  */
@@ -23,7 +22,7 @@ import { EventBusProvider, useEventBus, resetEventBusForTesting } from '../../..
 import { ApiClientProvider } from '../../../contexts/ApiClientContext';
 import { AuthTokenProvider } from '../../../contexts/AuthTokenContext';
 import { SemiontApiClient } from '@semiont/api-client';
-import { resourceUri, accessToken } from '@semiont/core';
+import { resourceId, accessToken, annotationId } from '@semiont/core';
 
 // Mock Toast module to prevent "useToast must be used within a ToastProvider" errors
 vi.mock('../../../components/Toast', () => ({
@@ -35,9 +34,9 @@ vi.mock('../../../components/Toast', () => ({
   }),
 }));
 
-describe('Resolution Flow - Search Modal & Body Update Integration', () => {
+describe('Bind Flow - Body Update Integration', () => {
   let updateAnnotationBodySpy: ReturnType<typeof vi.fn>;
-  const testUri = resourceUri('http://localhost:4000/resources/test-resource');
+  const testId = resourceId('test-resource');
   const testToken = 'test-resolution-token';
   const testBaseUrl = 'http://localhost:4000';
 
@@ -57,11 +56,10 @@ describe('Resolution Flow - Search Modal & Body Update Integration', () => {
 
   function renderBindFlow() {
     let eventBusInstance: ReturnType<typeof useEventBus> | null = null;
-    let lastState: ReturnType<typeof useBindFlow> | null = null;
 
     function TestComponent() {
       eventBusInstance = useEventBus();
-      lastState = useBindFlow(testUri);
+      useBindFlow(testId);
       return null;
     }
 
@@ -76,109 +74,18 @@ describe('Resolution Flow - Search Modal & Body Update Integration', () => {
     );
 
     return {
-      getState: () => lastState!,
       getEventBus: () => eventBusInstance!,
     };
   }
 
-  // ─── Initial state ──────────────────────────────────────────────────────────
-
-  it('starts with search modal closed and no pending reference', () => {
-    const { getState } = renderBindFlow();
-    expect(getState().searchModalOpen).toBe(false);
-    expect(getState().pendingReferenceId).toBeNull();
-  });
-
-  // ─── bind:link ─────────────────────────────────────────────────────────
-
-  it('bind:link emits bind:search-requested with referenceId and searchTerm', () => {
-    const { getEventBus } = renderBindFlow();
-    const searchRequestedSpy = vi.fn();
-
-    const subscription = getEventBus().get('bind:search-requested').subscribe(searchRequestedSpy);
-    act(() => { getEventBus().get('bind:link').next({ annotationUri: 'ann-uri-123', searchTerm: 'climate change' }); });
-    subscription.unsubscribe();
-
-    expect(searchRequestedSpy).toHaveBeenCalledTimes(1);
-    expect(searchRequestedSpy).toHaveBeenCalledWith({
-      referenceId: 'ann-uri-123',
-      searchTerm: 'climate change',
-    });
-  });
-
-  // ─── bind:search-requested ────────────────────────────────────────────
-
-  it('bind:search-requested opens the search modal', async () => {
-    const { getState, getEventBus } = renderBindFlow();
-
-    expect(getState().searchModalOpen).toBe(false);
-
-    act(() => { getEventBus().get('bind:search-requested').next({ referenceId: 'ref-abc', searchTerm: 'oceans' }); });
-
-    await waitFor(() => {
-      expect(getState().searchModalOpen).toBe(true);
-    });
-  });
-
-  it('bind:search-requested sets pendingReferenceId', async () => {
-    const { getState, getEventBus } = renderBindFlow();
-
-    act(() => { getEventBus().get('bind:search-requested').next({ referenceId: 'ref-xyz', searchTerm: 'forests' }); });
-
-    await waitFor(() => {
-      expect(getState().pendingReferenceId).toBe('ref-xyz');
-    });
-  });
-
-  it('bind:link → bind:search-requested chain opens modal end-to-end', async () => {
-    const { getState, getEventBus } = renderBindFlow();
-
-    // Simulate the full user journey: user clicks "Link Document" on a reference entry
-    act(() => { getEventBus().get('bind:link').next({ annotationUri: 'ann-full-chain', searchTerm: 'biodiversity' }); });
-
-    await waitFor(() => {
-      expect(getState().searchModalOpen).toBe(true);
-      expect(getState().pendingReferenceId).toBe('ann-full-chain');
-    });
-  });
-
-  // ─── onCloseSearchModal ──────────────────────────────────────────────────────
-
-  it('onCloseSearchModal closes the search modal', async () => {
-    const { getState, getEventBus } = renderBindFlow();
-
-    act(() => { getEventBus().get('bind:search-requested').next({ referenceId: 'ref-close', searchTerm: 'test' }); });
-
-    await waitFor(() => expect(getState().searchModalOpen).toBe(true));
-
-    act(() => { getState().onCloseSearchModal(); });
-
-    await waitFor(() => {
-      expect(getState().searchModalOpen).toBe(false);
-    });
-  });
-
-  it('onCloseSearchModal does not clear pendingReferenceId (preserves for re-open)', async () => {
-    const { getState, getEventBus } = renderBindFlow();
-
-    act(() => { getEventBus().get('bind:search-requested').next({ referenceId: 'ref-persist', searchTerm: 'test' }); });
-    await waitFor(() => expect(getState().searchModalOpen).toBe(true));
-
-    act(() => { getState().onCloseSearchModal(); });
-    await waitFor(() => expect(getState().searchModalOpen).toBe(false));
-
-    // pendingReferenceId remains — modal may reopen
-    expect(getState().pendingReferenceId).toBe('ref-persist');
-  });
-
   // ─── bind:update-body ──────────────────────────────────────────────────
 
   it('bind:update-body calls updateAnnotationBody API', async () => {
     const { getEventBus } = renderBindFlow();
 
     act(() => { getEventBus().get('bind:update-body').next({
-      annotationUri: 'http://localhost:4000/resources/test-resource/annotations/ann-body-1',
-      resourceId: 'linked-resource-id',
+      annotationId: annotationId('ann-body-1'),
+      resourceId: resourceId('linked-resource-id'),
       operations: [{ op: 'add', item: { id: 'linked-resource-id' } }],
     }); });
 
@@ -191,8 +98,8 @@ describe('Resolution Flow - Search Modal & Body Update Integration', () => {
     const { getEventBus } = renderBindFlow();
 
     act(() => { getEventBus().get('bind:update-body').next({
-      annotationUri: 'http://localhost:4000/resources/test-resource/annotations/ann-auth',
-      resourceId: 'resource-id',
+      annotationId: annotationId('ann-auth'),
+      resourceId: resourceId('resource-id'),
       operations: [{ op: 'replace', newItem: { id: 'resource-id' } }],
     }); });
 
@@ -201,8 +108,8 @@ describe('Resolution Flow - Search Modal & Body Update Integration', () => {
     });
 
     const callArgs = updateAnnotationBodySpy.mock.calls[0];
-    expect(callArgs[2]).toHaveProperty('auth');
-    expect(callArgs[2].auth).toBe(accessToken(testToken));
+    expect(callArgs[3]).toHaveProperty('auth');
+    expect(callArgs[3].auth).toBe(accessToken(testToken));
   });
 
   it('bind:update-body emits bind:body-updated on success', async () => {
@@ -212,8 +119,8 @@ describe('Resolution Flow - Search Modal & Body Update Integration', () => {
     const subscription = getEventBus().get('bind:body-updated').subscribe(bodyUpdatedSpy);
 
     act(() => { getEventBus().get('bind:update-body').next({
-      annotationUri: 'http://localhost:4000/resources/test-resource/annotations/ann-success',
-      resourceId: 'resource-id',
+      annotationId: annotationId('ann-success'),
+      resourceId: resourceId('resource-id'),
       operations: [{ op: 'add', item: { id: 'resource-id' } }],
     }); });
 
@@ -224,7 +131,7 @@ describe('Resolution Flow - Search Modal & Body Update Integration', () => {
     subscription.unsubscribe();
 
     expect(bodyUpdatedSpy).toHaveBeenCalledWith({
-      annotationUri: 'http://localhost:4000/resources/test-resource/annotations/ann-success',
+      annotationId: annotationId('ann-success'),
     });
   });
 
@@ -237,8 +144,8 @@ describe('Resolution Flow - Search Modal & Body Update Integration', () => {
     const subscription = getEventBus().get('bind:body-update-failed').subscribe(bodyUpdateFailedSpy);
 
     act(() => { getEventBus().get('bind:update-body').next({
-      annotationUri: 'http://localhost:4000/resources/test-resource/annotations/ann-fail',
-      resourceId: 'resource-id',
+      annotationId: annotationId('ann-fail'),
+      resourceId: resourceId('resource-id'),
       operations: [{ op: 'remove', item: { id: 'old-id' } }],
     }); });
 
@@ -257,8 +164,8 @@ describe('Resolution Flow - Search Modal & Body Update Integration', () => {
     const { getEventBus } = renderBindFlow();
 
     act(() => { getEventBus().get('bind:update-body').next({
-      annotationUri: 'http://localhost:4000/resources/test-resource/annotations/ann-dedup',
-      resourceId: 'resource-id',
+      annotationId: annotationId('ann-dedup'),
+      resourceId: resourceId('resource-id'),
       operations: [{ op: 'add', item: { id: 'resource-id' } }],
     }); });
 

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

@@ -52,7 +52,7 @@ describe('REPRODUCING BUG: Detection state not updating', () => {
     // Component to capture EventBus and hook state
     function TestComponent() {
       eventBusInstance = useEventBus();
-      const state = useMarkFlow('http://localhost:8080/resources/test' as any);
+      const state = useMarkFlow('test' as any);
       currentState = state;
 
       console.log('[TEST] useMarkFlow state:', {
@@ -109,7 +109,7 @@ describe('REPRODUCING BUG: Detection state not updating', () => {
 
     function TestComponent() {
       eventBusInstance = useEventBus();
-      const state = useMarkFlow('http://localhost:8080/resources/test' as any);
+      const state = useMarkFlow('test' as any);
       currentState = state;
 
       return (
@@ -162,7 +162,7 @@ describe('REPRODUCING BUG: Detection state not updating', () => {
 
     function TestComponent() {
       eventBusInstance = useEventBus();
-      const state = useMarkFlow('http://localhost:8080/resources/f45fd44f9cb0b0fe1b7980d3d034bc61' as any);
+      const state = useMarkFlow('f45fd44f9cb0b0fe1b7980d3d034bc61' as any);
 
       stateSnapshots.push({
         assistingMotivation: state.assistingMotivation,

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

@@ -31,7 +31,7 @@ import { ApiClientProvider } from '../../../contexts/ApiClientContext';
 import { AuthTokenProvider } from '../../../contexts/AuthTokenContext';
 import { SSEClient } from '@semiont/api-client';
 import type { Motivation } from '@semiont/core';
-import { resourceUri } from '@semiont/core';
+import { resourceId } from '@semiont/core';
 import type { Emitter } from 'mitt';
 
 // Mock Toast module to prevent "useToast must be used within a ToastProvider" errors
@@ -77,10 +77,10 @@ describe('Detection Flow - Feature Integration', () => {
   });
 
   it('should call annotateReferences exactly ONCE when detection starts (not twice)', async () => {
-    const testUri = resourceUri('http://localhost:4000/resources/test-resource');
+    const testId = resourceId('test-resource');
 
     // Render with real component composition
-    const { emitDetectionStart } = renderDetectionFlow(testUri);
+    const { emitDetectionStart } = renderDetectionFlow(testId);
 
     // Trigger detection for linking (uses annotateReferences)
     act(() => {
@@ -98,7 +98,7 @@ describe('Detection Flow - Feature Integration', () => {
 
     // Verify correct parameters (eventBus is passed but we don't need to verify its exact value)
     expect(annotateReferencesSpy).toHaveBeenCalledWith(
-      testUri,
+      testId,
       {
         entityTypes: ['Person', 'Organization'],
         includeDescriptiveReferences: false,
@@ -108,10 +108,10 @@ describe('Detection Flow - Feature Integration', () => {
   });
 
   it('should propagate SSE progress events to useMarkFlow state', async () => {
-    const testUri = resourceUri('http://localhost:4000/resources/test-resource');
+    const testId = resourceId('test-resource');
 
     // Render with state observer
-    const { emitDetectionStart, getEventBus } = renderDetectionFlow(testUri);
+    const { emitDetectionStart, getEventBus } = renderDetectionFlow(testId);
 
     // Start detection
     act(() => {
@@ -145,8 +145,8 @@ describe('Detection Flow - Feature Integration', () => {
   });
 
   it('should handle multiple progress updates correctly', async () => {
-    const testUri = resourceUri('http://localhost:4000/resources/test-resource');
-    const { emitDetectionStart, getEventBus } = renderDetectionFlow(testUri);
+    const testId = resourceId('test-resource');
+    const { emitDetectionStart, getEventBus } = renderDetectionFlow(testId);
 
     // Start detection
     act(() => {
@@ -200,8 +200,8 @@ describe('Detection Flow - Feature Integration', () => {
   });
 
   it('should keep progress visible after detection completes', async () => {
-    const testUri = resourceUri('http://localhost:4000/resources/test-resource');
-    const { emitDetectionStart, getEventBus } = renderDetectionFlow(testUri);
+    const testId = resourceId('test-resource');
+    const { emitDetectionStart, getEventBus } = renderDetectionFlow(testId);
 
     // Start detection
     act(() => {
@@ -237,8 +237,8 @@ describe('Detection Flow - Feature Integration', () => {
   });
 
   it('should clear progress on detection failure', async () => {
-    const testUri = resourceUri('http://localhost:4000/resources/test-resource');
-    const { emitDetectionStart, getEventBus } = renderDetectionFlow(testUri);
+    const testId = resourceId('test-resource');
+    const { emitDetectionStart, getEventBus } = renderDetectionFlow(testId);
 
     // Start detection
     act(() => {
@@ -282,8 +282,8 @@ describe('Detection Flow - Feature Integration', () => {
   });
 
   it('should handle different detection motivations with correct API calls', async () => {
-    const testUri = resourceUri('http://localhost:4000/resources/test-resource');
-    const { emitDetectionStart } = renderDetectionFlow(testUri);
+    const testId = resourceId('test-resource');
+    const { emitDetectionStart } = renderDetectionFlow(testId);
 
     // Test highlighting
     act(() => {
@@ -292,7 +292,7 @@ describe('Detection Flow - Feature Integration', () => {
 
     await waitFor(() => {
       expect(annotateHighlightsSpy).toHaveBeenCalledTimes(1);
-      expect(annotateHighlightsSpy).toHaveBeenCalledWith(testUri, {
+      expect(annotateHighlightsSpy).toHaveBeenCalledWith(testId, {
         instructions: 'Find important text',
       }, expect.objectContaining({ auth: undefined }));
     });
@@ -312,7 +312,7 @@ describe('Detection Flow - Feature Integration', () => {
 
     await waitFor(() => {
       expect(detectCommentsSpy).toHaveBeenCalledTimes(1);
-      expect(detectCommentsSpy).toHaveBeenCalledWith(testUri, {
+      expect(detectCommentsSpy).toHaveBeenCalledWith(testId, {
         instructions: 'Add helpful comments',
         tone: 'educational',
       }, expect.objectContaining({ auth: undefined }));
@@ -320,11 +320,11 @@ describe('Detection Flow - Feature Integration', () => {
   });
 
   it('should only call API once even with multiple event listeners', async () => {
-    const testUri = resourceUri('http://localhost:4000/resources/test-resource');
+    const testId = resourceId('test-resource');
 
     // This test specifically catches the duplicate useBindFlow bug
     // If multiple components call useBindFlow, we'll see multiple API calls
-    const { emitDetectionStart, getEventBus } = renderDetectionFlow(testUri);
+    const { emitDetectionStart, getEventBus } = renderDetectionFlow(testId);
 
     // Add an additional event listener (simulating multiple subscribers)
     const additionalListener = vi.fn();
@@ -354,7 +354,7 @@ describe('Detection Flow - Feature Integration', () => {
  * Helper: Render useMarkFlow hook with real component composition
  * Returns methods to interact with the rendered component
  */
-function renderDetectionFlow(testUri: string) {
+function renderDetectionFlow(testId: string) {
   let eventBusInstance: Emitter<EventMap>;
 
   // Component to capture EventBus instance
@@ -365,7 +365,7 @@ function renderDetectionFlow(testUri: string) {
 
   // Test harness component that uses the hook
   function DetectionFlowTestHarness() {
-    const { progress, assistingMotivation } = useMarkFlow(testUri as any);
+    const { progress, assistingMotivation } = useMarkFlow(testId as any);
     return (
       <div>
         <div data-testid="detecting">{assistingMotivation || 'none'}</div>

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

@@ -26,7 +26,7 @@ import { render, waitFor } from '@testing-library/react';
 import { act } from 'react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { SemiontApiClient } from '@semiont/api-client';
-import { resourceUri, accessToken } from '@semiont/core';
+import { resourceId, accessToken } from '@semiont/core';
 import { EventBusProvider, useEventBus, resetEventBusForTesting } from '../../../contexts/EventBusContext';
 import { useEventSubscriptions } from '../../../contexts/useEventSubscription';
 import { ApiClientProvider } from '../../../contexts/ApiClientContext';
@@ -36,7 +36,7 @@ import type { EventMap, EventBus } from '@semiont/core';
 
 // ─── Constants ────────────────────────────────────────────────────────────────
 
-const TEST_URI = resourceUri('http://localhost:4000/resources/test-resource');
+const TEST_URI = resourceId('test-resource');
 const TEST_TOKEN = 'test-auth-token-123';
 const BASE_URL = 'http://localhost:4000';
 const CLONE_TOKEN = 'generated-clone-token-xyz';
@@ -66,11 +66,11 @@ function ResourceMutationHarness({ onEventBus }: { onEventBus: (eventBus: EventB
   const generateCloneTokenMutation = resources.generateCloneToken.useMutation();
 
   const handleResourceArchive = useCallback(async () => {
-    await updateMutation.mutateAsync({ rUri: TEST_URI, data: { archived: true } });
+    await updateMutation.mutateAsync({ id: TEST_URI, data: { archived: true } });
   }, [updateMutation]);
 
   const handleResourceUnarchive = useCallback(async () => {
-    await updateMutation.mutateAsync({ rUri: TEST_URI, data: { archived: false } });
+    await updateMutation.mutateAsync({ id: TEST_URI, data: { archived: false } });
   }, [updateMutation]);
 
   const handleResourceClone = useCallback(async () => {
@@ -175,7 +175,7 @@ describe('Resource mutations — hooks hoisted to top level', () => {
     await waitFor(() => {
       expect(generateCloneTokenSpy).toHaveBeenCalledWith(
         TEST_URI,
-        expect.anything()
+        expect.anything(),
       );
     });
   });
@@ -241,7 +241,7 @@ describe('Resource mutations — hooks hoisted to top level', () => {
     expect(updateResourceSpy).toHaveBeenCalledWith(
       TEST_URI,
       expect.objectContaining({ archived: true }),
-      expect.anything()
+      expect.anything(),
     );
   });
 
@@ -275,7 +275,7 @@ describe('Resource mutations — hooks hoisted to top level', () => {
     expect(updateResourceSpy).toHaveBeenCalledWith(
       TEST_URI,
       expect.objectContaining({ archived: false }),
-      expect.anything()
+      expect.anything(),
     );
   });
 

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

@@ -6,7 +6,7 @@
  */
 
 import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { render, screen } from '@testing-library/react';
+import { render, screen, act } from '@testing-library/react';
 import React from 'react';
 import { ResourceViewerPage } from '../components/ResourceViewerPage';
 import type { ResourceViewerPageProps } from '../components/ResourceViewerPage';
@@ -118,23 +118,22 @@ vi.mock('../../../contexts/ResourceAnnotationsContext', () => ({
   ResourceAnnotationsProvider: ({ children }: any) => children,
 }));
 
-vi.mock('@/components/toolbar/ToolbarPanels', () => ({
-  ToolbarPanels: ({ children }: any) => <div data-testid="toolbar-panels">{children}</div>,
-}));
-
-vi.mock('@/components/modals/SearchResourcesModal', () => ({
-  SearchResourcesModal: () => <div data-testid="search-modal">Search Modal</div>,
+// Mock useEventSubscription at the direct path used by ResourceViewerPage
+// (the barrel export mock doesn't intercept direct context imports)
+const mockUseEventSubscriptions = vi.fn();
+vi.mock('../../../contexts/useEventSubscription', () => ({
+  useEventSubscriptions: (...args: unknown[]) => mockUseEventSubscriptions(...args),
 }));
 
-vi.mock('@/components/modals/GenerationConfigModal', () => ({
-  GenerationConfigModal: () => <div data-testid="generation-modal">Generation Modal</div>,
+vi.mock('@/components/toolbar/ToolbarPanels', () => ({
+  ToolbarPanels: ({ children }: any) => <div data-testid="toolbar-panels">{children}</div>,
 }));
 
 // Create mock props matching the current ResourceViewerPageProps
 const createMockProps = (overrides?: Partial<ResourceViewerPageProps>): ResourceViewerPageProps => ({
   resource: {
     '@context': 'https://www.w3.org/ns/anno.jsonld',
-    '@id': 'http://localhost/resources/test-123',
+    '@id': 'test-123',
     '@type': 'schema:DigitalDocument',
     name: 'Test Resource',
     description: 'A test resource for unit testing',
@@ -148,7 +147,7 @@ const createMockProps = (overrides?: Partial<ResourceViewerPageProps>): Resource
       },
     ],
   },
-  rUri: 'http://localhost/resources/test-123' as any,
+  rUri: 'test-123' as any,
   locale: 'en',
   cacheManager: {},
   Link: ({ children }: any) => <a>{children}</a>,
@@ -156,8 +155,6 @@ const createMockProps = (overrides?: Partial<ResourceViewerPageProps>): Resource
   refetchDocument: vi.fn().mockResolvedValue(undefined),
   ToolbarPanels: ({ children, activePanel }: any) =>
     !activePanel ? null : <div data-testid="toolbar-panels">{children}</div>,
-  SearchResourcesModal: () => <div data-testid="search-modal">Search Modal</div>,
-  GenerationConfigModal: () => <div data-testid="generation-modal">Generation Modal</div>,
   ...overrides,
 });
 
@@ -281,21 +278,47 @@ describe('ResourceViewerPage', () => {
       // Archived badge only shows in annotate mode, which defaults to false
       expect(screen.queryByText('📦 Archived')).not.toBeInTheDocument();
     });
-  });
 
-  describe('Modals', () => {
-    it('renders search resources modal', () => {
-      const props = createMockProps();
+    it('shows archived badge after mark:mode-toggled event fires', () => {
+      localStorage.setItem('annotateMode', 'false');
+      localStorage.setItem('activeToolbarPanel', 'annotations');
+
+      const props = createMockProps({
+        resource: {
+          ...createMockProps().resource,
+          archived: true,
+        },
+      });
+
       renderWithProviders(<ResourceViewerPage {...props} />);
 
-      expect(screen.getByTestId('search-modal')).toBeInTheDocument();
+      // Before toggle: annotateMode is false, so archived badge is hidden
+      expect(screen.queryByText('📦 Archived')).not.toBeInTheDocument();
+
+      // Get the handler map that ResourceViewerPage passed to useEventSubscriptions
+      const handlerMap = mockUseEventSubscriptions.mock.calls[mockUseEventSubscriptions.mock.calls.length - 1]?.[0] as Record<string, () => void>;
+      expect(handlerMap).toBeDefined();
+      expect(handlerMap['mark:mode-toggled']).toBeDefined();
+
+      // Fire the mode toggle — this is what the toolbar emits
+      act(() => {
+        handlerMap['mark:mode-toggled']();
+      });
+
+      // After toggle: annotateMode is true, so archived badge should appear
+      expect(screen.getByText('📦 Archived')).toBeInTheDocument();
+
+      localStorage.clear();
     });
+  });
 
-    it('renders generation config modal', () => {
+  describe('Modals', () => {
+    it('renders reference wizard modal', () => {
       const props = createMockProps();
       renderWithProviders(<ResourceViewerPage {...props} />);
 
-      expect(screen.getByTestId('generation-modal')).toBeInTheDocument();
+      // Wizard modal is rendered but closed by default
+      // It opens when bind:initiate is emitted from ReferenceEntry
     });
   });