@semiont/react-ui 0.4.2 → 0.4.4

package/src/components/resource/panels/CommentsPanel.tsx

@@ -47,6 +47,7 @@ interface CommentsPanelProps {
     percentage?: number;
     message?: string;
   } | null;
+  locale?: string;
   scrollToAnnotationId?: string | null;
   onScrollCompleted?: () => void;
   hoveredAnnotationId?: string | null;
@@ -65,6 +66,7 @@ export function CommentsPanel({
   annotateMode = true,
   isAssisting = false,
   progress,
+  locale,
   scrollToAnnotationId,
   onScrollCompleted,
   hoveredAnnotationId,
@@ -252,6 +254,7 @@ export function CommentsPanel({
           <AssistSection
             annotationType="comment"
             isAssisting={isAssisting}
+            locale={locale}
             progress={progress}
           />
         )}

package/src/components/resource/panels/ResourceInfoPanel.tsx

@@ -3,14 +3,23 @@
 import { useTranslations } from '../../../contexts/TranslationContext';
 import { useEventBus } from '../../../contexts/EventBusContext';
 import { formatLocaleDisplay } from '@semiont/api-client';
+import type { components } from '@semiont/core';
 import './ResourceInfoPanel.css';
 
+type Agent = components['schemas']['Agent'];
+
 interface Props {
   documentEntityTypes: string[];
   documentLocale?: string | undefined;
   primaryMediaType?: string | undefined;
   primaryByteSize?: number | undefined;
   isArchived?: boolean;
+  dateCreated?: string | undefined;
+  dateModified?: string | undefined;
+  creationMethod?: string | undefined;
+  wasAttributedTo?: Agent | Agent[] | undefined;
+  wasDerivedFrom?: string | string[] | undefined;
+  generator?: Agent | Agent[] | undefined;
 }
 
 /**
@@ -26,6 +35,12 @@ export function ResourceInfoPanel({
   primaryMediaType,
   primaryByteSize,
   isArchived = false,
+  dateCreated,
+  dateModified,
+  creationMethod,
+  wasAttributedTo,
+  wasDerivedFrom,
+  generator,
 }: Props) {
   const t = useTranslations('ResourceInfoPanel');
   const eventBus = useEventBus();
@@ -76,6 +91,73 @@ export function ResourceInfoPanel({
         </div>
       )}
 
+      {/* Provenance Section */}
+      {(dateCreated || dateModified || creationMethod || wasAttributedTo || wasDerivedFrom || generator) && (
+        <div className="semiont-resource-info-panel__section">
+          <h3 className="semiont-resource-info-panel__heading">{t('provenance')}</h3>
+          <div className="semiont-resource-info-panel__field-group">
+            {dateCreated && (
+              <div>
+                <span className="semiont-resource-info-panel__label">{t('createdAt')}</span>
+                <span className="semiont-resource-info-panel__value">
+                  {new Date(dateCreated).toLocaleString()}
+                </span>
+              </div>
+            )}
+            {dateModified && (
+              <div>
+                <span className="semiont-resource-info-panel__label">{t('modifiedAt')}</span>
+                <span className="semiont-resource-info-panel__value">
+                  {new Date(dateModified).toLocaleString()}
+                </span>
+              </div>
+            )}
+            {creationMethod && (
+              <div>
+                <span className="semiont-resource-info-panel__label">{t('creationMethod')}</span>
+                <span className="semiont-resource-info-panel__value">{creationMethod}</span>
+              </div>
+            )}
+            {wasAttributedTo && (
+              <div>
+                <span className="semiont-resource-info-panel__label">{t('attributedTo')}</span>
+                <span className="semiont-resource-info-panel__value">
+                  {(Array.isArray(wasAttributedTo) ? wasAttributedTo : [wasAttributedTo])
+                    .map(a => a.name)
+                    .join(', ')}
+                </span>
+              </div>
+            )}
+            {wasDerivedFrom && (
+              <div>
+                <span className="semiont-resource-info-panel__label">{t('derivedFrom')}</span>
+                <span className="semiont-resource-info-panel__value">
+                  {(Array.isArray(wasDerivedFrom) ? wasDerivedFrom : [wasDerivedFrom]).map((id, i) => (
+                    <button
+                      key={id}
+                      className="semiont-resource-info-panel__link"
+                      onClick={() => eventBus.get('browse:reference-navigate').next({ resourceId: id })}
+                    >
+                      {i > 0 && ', '}{id}
+                    </button>
+                  ))}
+                </span>
+              </div>
+            )}
+            {generator && (
+              <div>
+                <span className="semiont-resource-info-panel__label">{t('generatedBy')}</span>
+                <span className="semiont-resource-info-panel__value">
+                  {(Array.isArray(generator) ? generator : [generator])
+                    .map(a => a.name)
+                    .join(', ')}
+                </span>
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+
       {/* Entity Type Tags Section */}
       {documentEntityTypes.length > 0 && (
         <div className="semiont-resource-info-panel__section">

package/src/components/resource/panels/UnifiedAnnotationsPanel.tsx

@@ -70,6 +70,9 @@ interface UnifiedAnnotationsPanelProps {
   // Hover coordination (for bidirectional hover highlighting)
   hoveredAnnotationId?: string | null;
 
+  // Locale for AI-generated text language
+  locale?: string;
+
   // Routing
   Link: React.ComponentType<LinkComponentProps>;
   routes: RouteBuilder;
@@ -238,6 +241,7 @@ export function UnifiedAnnotationsPanel(props: UnifiedAnnotationsPanelProps) {
             isAssisting,
             progress,
             annotateMode: props.annotateMode,
+            locale: props.locale,
             scrollToAnnotationId: props.scrollToAnnotationId,
             onScrollCompleted: props.onScrollCompleted,
             hoveredAnnotationId: props.hoveredAnnotationId

package/src/components/resource/panels/__tests__/ResourceInfoPanel.test.tsx

@@ -21,6 +21,13 @@ vi.mock('../../../../contexts/TranslationContext', () => ({
       archiveDescription: 'Move this resource to archived status',
       unarchive: 'Unarchive',
       unarchiveDescription: 'Restore this resource to active status',
+      provenance: 'Provenance',
+      createdAt: 'Created',
+      modifiedAt: 'Modified',
+      creationMethod: 'How created',
+      attributedTo: 'Attributed to',
+      derivedFrom: 'Derived from',
+      generatedBy: 'Generated by',
     };
     return translations[key] || key;
   }),
@@ -266,6 +273,93 @@ describe('ResourceInfoPanel Component', () => {
     });
   });
 
+  describe('Provenance Section', () => {
+    it('should not render provenance section when no provenance data', () => {
+      renderWithEventBus(<ResourceInfoPanel {...defaultProps} />);
+      expect(screen.queryByText('Provenance')).not.toBeInTheDocument();
+    });
+
+    it('should render dateCreated when provided', () => {
+      renderWithEventBus(
+        <ResourceInfoPanel {...defaultProps} dateCreated="2024-01-15T10:30:00Z" />
+      );
+      expect(screen.getByText('Provenance')).toBeInTheDocument();
+      expect(screen.getByText('Created')).toBeInTheDocument();
+    });
+
+    it('should render dateModified when provided', () => {
+      renderWithEventBus(
+        <ResourceInfoPanel {...defaultProps} dateModified="2024-06-01T12:00:00Z" />
+      );
+      expect(screen.getByText('Provenance')).toBeInTheDocument();
+      expect(screen.getByText('Modified')).toBeInTheDocument();
+    });
+
+    it('should render creationMethod when provided', () => {
+      renderWithEventBus(
+        <ResourceInfoPanel {...defaultProps} creationMethod="generated" />
+      );
+      expect(screen.getByText('How created')).toBeInTheDocument();
+      expect(screen.getByText('generated')).toBeInTheDocument();
+    });
+
+    it('should render a single agent attribution', () => {
+      renderWithEventBus(
+        <ResourceInfoPanel
+          {...defaultProps}
+          wasAttributedTo={{ name: 'Alice', '@id': 'https://example.org/alice' }}
+        />
+      );
+      expect(screen.getByText('Attributed to')).toBeInTheDocument();
+      expect(screen.getByText('Alice')).toBeInTheDocument();
+    });
+
+    it('should render multiple agent attributions', () => {
+      renderWithEventBus(
+        <ResourceInfoPanel
+          {...defaultProps}
+          wasAttributedTo={[
+            { name: 'Alice' },
+            { name: 'Bob' },
+          ]}
+        />
+      );
+      expect(screen.getByText('Alice, Bob')).toBeInTheDocument();
+    });
+
+    it('should render wasDerivedFrom when provided', () => {
+      renderWithEventBus(
+        <ResourceInfoPanel
+          {...defaultProps}
+          wasDerivedFrom="urn:semiont:resource:abc123"
+        />
+      );
+      expect(screen.getByText('Derived from')).toBeInTheDocument();
+      expect(screen.getByText('urn:semiont:resource:abc123')).toBeInTheDocument();
+    });
+
+    it('should render generator when provided', () => {
+      renderWithEventBus(
+        <ResourceInfoPanel
+          {...defaultProps}
+          generator={{ name: 'Semiont AI' }}
+        />
+      );
+      expect(screen.getByText('Generated by')).toBeInTheDocument();
+      expect(screen.getByText('Semiont AI')).toBeInTheDocument();
+    });
+
+    it('should render multiple generators', () => {
+      renderWithEventBus(
+        <ResourceInfoPanel
+          {...defaultProps}
+          generator={[{ name: 'Model A' }, { name: 'Model B' }]}
+        />
+      );
+      expect(screen.getByText('Model A, Model B')).toBeInTheDocument();
+    });
+  });
+
   describe('Archive Actions', () => {
     it('should render archive button when not archived', () => {
       renderWithEventBus(

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

@@ -103,13 +103,13 @@ function renderDetectionFlow(testUri: string) {
 // ─── Tests ────────────────────────────────────────────────────────────────────
 
 describe('Annotation creation clears pendingAnnotation', () => {
-  let createAnnotationSpy: ReturnType<typeof vi.spyOn>;
+  let markAnnotationSpy: ReturnType<typeof vi.spyOn>;
 
   beforeEach(() => {
     vi.clearAllMocks();
     resetEventBusForTesting();
-    createAnnotationSpy = vi
-      .spyOn(SemiontApiClient.prototype, 'createAnnotation')
+    markAnnotationSpy = vi
+      .spyOn(SemiontApiClient.prototype, 'markAnnotation')
       .mockResolvedValue({ annotationId: MOCK_ANNOTATION.id } as any);
   });
 
@@ -143,7 +143,7 @@ describe('Annotation creation clears pendingAnnotation', () => {
       expect(screen.getByTestId('pending-motivation')).toHaveTextContent('none');
     });
 
-    expect(createAnnotationSpy).toHaveBeenCalledTimes(1);
+    expect(markAnnotationSpy).toHaveBeenCalledTimes(1);
   });
 
   it('clears pendingAnnotation after creating an assessment (assessing)', async () => {
@@ -272,7 +272,7 @@ describe('Annotation creation clears pendingAnnotation', () => {
   });
 
   it('does NOT clear pendingAnnotation if API call fails', async () => {
-    createAnnotationSpy.mockRejectedValueOnce(new Error('Network error'));
+    markAnnotationSpy.mockRejectedValueOnce(new Error('Network error'));
 
     const { emit } = renderDetectionFlow(TEST_URI);
 
@@ -319,6 +319,6 @@ describe('Annotation creation clears pendingAnnotation', () => {
     });
 
     // API should NOT have been called on cancel
-    expect(createAnnotationSpy).not.toHaveBeenCalled();
+    expect(markAnnotationSpy).not.toHaveBeenCalled();
   });
 });

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

@@ -50,10 +50,10 @@ describe('Detection Progress Dismissal Bug', () => {
       close: vi.fn(),
     };
 
-    vi.spyOn(SSEClient.prototype, 'annotateReferences').mockReturnValue(mockStream);
-    vi.spyOn(SSEClient.prototype, 'annotateHighlights').mockReturnValue(mockStream);
-    vi.spyOn(SSEClient.prototype, 'annotateComments').mockReturnValue(mockStream);
-    vi.spyOn(SSEClient.prototype, 'annotateAssessments').mockReturnValue(mockStream);
+    vi.spyOn(SSEClient.prototype, 'markReferences').mockReturnValue(mockStream);
+    vi.spyOn(SSEClient.prototype, 'markHighlights').mockReturnValue(mockStream);
+    vi.spyOn(SSEClient.prototype, 'markComments').mockReturnValue(mockStream);
+    vi.spyOn(SSEClient.prototype, 'markAssessments').mockReturnValue(mockStream);
   });
 
   afterEach(() => {

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

@@ -2,10 +2,10 @@
  * Layer 3: Feature Integration Test - Bind Flow (body update)
  *
  * Tests the write side of useBindFlow:
- * - bind:update-body → calls updateAnnotationBody API
+ * - bind:update-body → calls bindAnnotation 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
+ * - auth token passed to bindAnnotation
  *
  * The wizard modal (ReferenceWizardModal) handles modal state, context
  * gathering, search configuration, and result display. This test covers
@@ -21,7 +21,7 @@ import { useBindFlow } from '../../../hooks/useBindFlow';
 import { EventBusProvider, useEventBus, resetEventBusForTesting } from '../../../contexts/EventBusContext';
 import { ApiClientProvider } from '../../../contexts/ApiClientContext';
 import { AuthTokenProvider } from '../../../contexts/AuthTokenContext';
-import { SemiontApiClient } from '@semiont/api-client';
+import { SSEClient } from '@semiont/api-client';
 import { resourceId, accessToken, annotationId } from '@semiont/core';
 
 // Mock Toast module to prevent "useToast must be used within a ToastProvider" errors
@@ -35,7 +35,7 @@ vi.mock('../../../components/Toast', () => ({
 }));
 
 describe('Bind Flow - Body Update Integration', () => {
-  let updateAnnotationBodySpy: ReturnType<typeof vi.fn>;
+  let bindAnnotationSpy: ReturnType<typeof vi.fn>;
   const testId = resourceId('test-resource');
   const testToken = 'test-resolution-token';
   const testBaseUrl = 'http://localhost:4000';
@@ -44,8 +44,11 @@ describe('Bind Flow - Body Update Integration', () => {
     vi.clearAllMocks();
     resetEventBusForTesting();
 
-    updateAnnotationBodySpy = vi.fn().mockResolvedValue({ success: true });
-    vi.spyOn(SemiontApiClient.prototype, 'updateAnnotationBody').mockImplementation(updateAnnotationBodySpy);
+    bindAnnotationSpy = vi.fn().mockImplementation((_rId: any, annId: any, _req: any, opts: any) => {
+      queueMicrotask(() => opts.eventBus.get('bind:finished').next({ annotationId: annId }));
+      return { close: vi.fn() };
+    });
+    vi.spyOn(SSEClient.prototype, 'bindAnnotation').mockImplementation(bindAnnotationSpy as any);
   });
 
   afterEach(() => {
@@ -80,17 +83,17 @@ describe('Bind Flow - Body Update Integration', () => {
 
   // ─── bind:update-body ──────────────────────────────────────────────────
 
-  it('bind:update-body calls updateAnnotationBody API', async () => {
+  it('bind:update-body calls bindAnnotation API', async () => {
     const { getEventBus } = renderBindFlow();
 
     act(() => { getEventBus().get('bind:update-body').next({
       annotationId: annotationId('ann-body-1'),
       resourceId: resourceId('linked-resource-id'),
-      operations: [{ op: 'add', item: { id: 'linked-resource-id' } }],
+      operations: [{ op: 'add', item: { type: 'SpecificResource' as const, source: 'linked-resource-id' } }],
     }); });
 
     await waitFor(() => {
-      expect(updateAnnotationBodySpy).toHaveBeenCalledTimes(1);
+      expect(bindAnnotationSpy).toHaveBeenCalledTimes(1);
     });
   });
 
@@ -100,14 +103,14 @@ describe('Bind Flow - Body Update Integration', () => {
     act(() => { getEventBus().get('bind:update-body').next({
       annotationId: annotationId('ann-auth'),
       resourceId: resourceId('resource-id'),
-      operations: [{ op: 'replace', newItem: { id: 'resource-id' } }],
+      operations: [{ op: 'replace', newItem: { type: 'SpecificResource' as const, source: 'resource-id' } }],
     }); });
 
     await waitFor(() => {
-      expect(updateAnnotationBodySpy).toHaveBeenCalled();
+      expect(bindAnnotationSpy).toHaveBeenCalled();
     });
 
-    const callArgs = updateAnnotationBodySpy.mock.calls[0];
+    const callArgs = bindAnnotationSpy.mock.calls[0];
     expect(callArgs[3]).toHaveProperty('auth');
     expect(callArgs[3].auth).toBe(accessToken(testToken));
   });
@@ -121,7 +124,7 @@ describe('Bind Flow - Body Update Integration', () => {
     act(() => { getEventBus().get('bind:update-body').next({
       annotationId: annotationId('ann-success'),
       resourceId: resourceId('resource-id'),
-      operations: [{ op: 'add', item: { id: 'resource-id' } }],
+      operations: [{ op: 'add', item: { type: 'SpecificResource' as const, source: 'resource-id' } }],
     }); });
 
     await waitFor(() => {
@@ -136,7 +139,10 @@ describe('Bind Flow - Body Update Integration', () => {
   });
 
   it('bind:update-body emits bind:body-update-failed on API error', async () => {
-    updateAnnotationBodySpy.mockRejectedValue(new Error('Update failed'));
+    bindAnnotationSpy.mockImplementation((_rId: any, _annId: any, _req: any, opts: any) => {
+      queueMicrotask(() => opts.eventBus.get('bind:failed').next({ error: new Error('Update failed') }));
+      return { close: vi.fn() };
+    });
 
     const { getEventBus } = renderBindFlow();
     const bodyUpdateFailedSpy = vi.fn();
@@ -146,7 +152,7 @@ describe('Bind Flow - Body Update Integration', () => {
     act(() => { getEventBus().get('bind:update-body').next({
       annotationId: annotationId('ann-fail'),
       resourceId: resourceId('resource-id'),
-      operations: [{ op: 'remove', item: { id: 'old-id' } }],
+      operations: [{ op: 'remove', item: { type: 'SpecificResource' as const, source: 'old-id' } }],
     }); });
 
     await waitFor(() => {
@@ -166,11 +172,11 @@ describe('Bind Flow - Body Update Integration', () => {
     act(() => { getEventBus().get('bind:update-body').next({
       annotationId: annotationId('ann-dedup'),
       resourceId: resourceId('resource-id'),
-      operations: [{ op: 'add', item: { id: 'resource-id' } }],
+      operations: [{ op: 'add', item: { type: 'SpecificResource' as const, source: 'resource-id' } }],
     }); });
 
     await waitFor(() => {
-      expect(updateAnnotationBodySpy).toHaveBeenCalledTimes(1);
+      expect(bindAnnotationSpy).toHaveBeenCalledTimes(1);
     });
   });
 });

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

@@ -35,10 +35,10 @@ describe('REPRODUCING BUG: Detection state not updating', () => {
     vi.clearAllMocks();
 
     // Minimal mock - SSE streams not needed for this test
-    vi.spyOn(SSEClient.prototype, 'annotateReferences').mockReturnValue({ onProgress: vi.fn().mockReturnThis(), onComplete: vi.fn().mockReturnThis(), onError: vi.fn().mockReturnThis(), close: vi.fn() } as any);
-    vi.spyOn(SSEClient.prototype, 'annotateHighlights').mockReturnValue({ onProgress: vi.fn().mockReturnThis(), onComplete: vi.fn().mockReturnThis(), onError: vi.fn().mockReturnThis(), close: vi.fn() } as any);
-    vi.spyOn(SSEClient.prototype, 'annotateComments').mockReturnValue({ onProgress: vi.fn().mockReturnThis(), onComplete: vi.fn().mockReturnThis(), onError: vi.fn().mockReturnThis(), close: vi.fn() } as any);
-    vi.spyOn(SSEClient.prototype, 'annotateAssessments').mockReturnValue({ onProgress: vi.fn().mockReturnThis(), onComplete: vi.fn().mockReturnThis(), onError: vi.fn().mockReturnThis(), close: vi.fn() } as any);
+    vi.spyOn(SSEClient.prototype, 'markReferences').mockReturnValue({ onProgress: vi.fn().mockReturnThis(), onComplete: vi.fn().mockReturnThis(), onError: vi.fn().mockReturnThis(), close: vi.fn() } as any);
+    vi.spyOn(SSEClient.prototype, 'markHighlights').mockReturnValue({ onProgress: vi.fn().mockReturnThis(), onComplete: vi.fn().mockReturnThis(), onError: vi.fn().mockReturnThis(), close: vi.fn() } as any);
+    vi.spyOn(SSEClient.prototype, 'markComments').mockReturnValue({ onProgress: vi.fn().mockReturnThis(), onComplete: vi.fn().mockReturnThis(), onError: vi.fn().mockReturnThis(), close: vi.fn() } as any);
+    vi.spyOn(SSEClient.prototype, 'markAssessments').mockReturnValue({ onProgress: vi.fn().mockReturnThis(), onComplete: vi.fn().mockReturnThis(), onError: vi.fn().mockReturnThis(), close: vi.fn() } as any);
   });
 
   afterEach(() => {

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

@@ -54,8 +54,8 @@ const createMockSSEStream = () => {
 
 describe('Detection Flow - Feature Integration', () => {
   let mockStream: ReturnType<typeof createMockSSEStream>;
-  let annotateReferencesSpy: any;
-  let annotateHighlightsSpy: any;
+  let markReferencesSpy: any;
+  let markHighlightsSpy: any;
   let detectCommentsSpy: any;
 
   beforeEach(() => {
@@ -66,10 +66,10 @@ describe('Detection Flow - Feature Integration', () => {
     mockStream = createMockSSEStream();
 
     // Spy on SSEClient prototype methods
-    annotateReferencesSpy = vi.spyOn(SSEClient.prototype, 'annotateReferences').mockReturnValue(mockStream as any);
-    annotateHighlightsSpy = vi.spyOn(SSEClient.prototype, 'annotateHighlights').mockReturnValue(mockStream as any);
-    detectCommentsSpy = vi.spyOn(SSEClient.prototype, 'annotateComments').mockReturnValue(mockStream as any);
-    vi.spyOn(SSEClient.prototype, 'annotateAssessments').mockReturnValue(mockStream as any);
+    markReferencesSpy = vi.spyOn(SSEClient.prototype, 'markReferences').mockReturnValue(mockStream as any);
+    markHighlightsSpy = vi.spyOn(SSEClient.prototype, 'markHighlights').mockReturnValue(mockStream as any);
+    detectCommentsSpy = vi.spyOn(SSEClient.prototype, 'markComments').mockReturnValue(mockStream as any);
+    vi.spyOn(SSEClient.prototype, 'markAssessments').mockReturnValue(mockStream as any);
   });
 
   afterEach(() => {
@@ -93,11 +93,11 @@ describe('Detection Flow - Feature Integration', () => {
     // CRITICAL ASSERTION: API called exactly once (not twice!)
     // This would FAIL if useBindFlow was called in multiple places
     await waitFor(() => {
-      expect(annotateReferencesSpy).toHaveBeenCalledTimes(1);
+      expect(markReferencesSpy).toHaveBeenCalledTimes(1);
     });
 
     // Verify correct parameters (eventBus is passed but we don't need to verify its exact value)
-    expect(annotateReferencesSpy).toHaveBeenCalledWith(
+    expect(markReferencesSpy).toHaveBeenCalledWith(
       testId,
       {
         entityTypes: ['Person', 'Organization'],
@@ -122,7 +122,7 @@ describe('Detection Flow - Feature Integration', () => {
 
     // Wait for stream to be created
     await waitFor(() => {
-      expect(annotateReferencesSpy).toHaveBeenCalled();
+      expect(markReferencesSpy).toHaveBeenCalled();
     });
 
     // Simulate SSE progress event being emitted to EventBus (how SSE actually works now)
@@ -156,7 +156,7 @@ describe('Detection Flow - Feature Integration', () => {
     });
 
     await waitFor(() => {
-      expect(annotateHighlightsSpy).toHaveBeenCalledTimes(1);
+      expect(markHighlightsSpy).toHaveBeenCalledTimes(1);
     });
 
     // First progress update via EventBus
@@ -291,8 +291,8 @@ describe('Detection Flow - Feature Integration', () => {
     });
 
     await waitFor(() => {
-      expect(annotateHighlightsSpy).toHaveBeenCalledTimes(1);
-      expect(annotateHighlightsSpy).toHaveBeenCalledWith(testId, {
+      expect(markHighlightsSpy).toHaveBeenCalledTimes(1);
+      expect(markHighlightsSpy).toHaveBeenCalledWith(testId, {
         instructions: 'Find important text',
       }, expect.objectContaining({ auth: undefined }));
     });
@@ -337,11 +337,11 @@ describe('Detection Flow - Feature Integration', () => {
 
     // Wait for operation to complete
     await waitFor(() => {
-      expect(annotateReferencesSpy).toHaveBeenCalled();
+      expect(markReferencesSpy).toHaveBeenCalled();
     });
 
     // VERIFY: API called exactly once, even though multiple listeners exist
-    expect(annotateReferencesSpy).toHaveBeenCalledTimes(1);
+    expect(markReferencesSpy).toHaveBeenCalledTimes(1);
 
     // VERIFY: Our additional listener was called (events work)
     expect(additionalListener).toHaveBeenCalledTimes(1);

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

@@ -91,7 +91,7 @@ useDebouncedCallback: (fn: any) => fn,
     useResourceAnnotations: () => ({
       clearNewAnnotationId: vi.fn(),
       newAnnotationIds: new Set(),
-      createAnnotation: vi.fn(),
+      markAnnotation: vi.fn(),
       deleteAnnotation: vi.fn(),
       triggerSparkleAnimation: vi.fn(),
     }),
@@ -111,7 +111,7 @@ vi.mock('../../../contexts/ResourceAnnotationsContext', () => ({
   useResourceAnnotations: () => ({
     clearNewAnnotationId: vi.fn(),
     newAnnotationIds: new Set(),
-    createAnnotation: vi.fn(),
+    markAnnotation: vi.fn(),
     deleteAnnotation: vi.fn(),
     triggerSparkleAnimation: vi.fn(),
   }),

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

@@ -64,7 +64,7 @@ describe('Generation Flow - Feature Integration', () => {
     mockStream = createMockGenerationStream();
 
     // Spy on SSEClient prototype method
-    generateResourceSpy = vi.spyOn(SSEClient.prototype, 'yieldResourceFromAnnotation').mockReturnValue(mockStream as any);
+    generateResourceSpy = vi.spyOn(SSEClient.prototype, 'yieldResource').mockReturnValue(mockStream as any);
 
     // Mock callbacks
     mockShowSuccess = vi.fn();
@@ -76,7 +76,7 @@ describe('Generation Flow - Feature Integration', () => {
     vi.restoreAllMocks();
   });
 
-  it('should call yieldResourceFromAnnotation exactly ONCE when generation starts', async () => {
+  it('should call yieldResource exactly ONCE when generation starts', async () => {
     const testResourceId = resourceId('test-resource');
     const testAnnotationId = annotationId('test-annotation');
 

package/src/features/resource-viewer/__tests__/annotation-progress-flow.test.tsx

@@ -158,10 +158,10 @@ describe('Detection Progress Flow Integration (Layer 3)', () => {
     mockStream = new MockSSEStream(eventBus);
 
     // Spy on SSEClient prototype methods to inject mock stream
-    vi.spyOn(SSEClient.prototype, 'annotateHighlights').mockReturnValue(mockStream as any);
-    vi.spyOn(SSEClient.prototype, 'annotateAssessments').mockReturnValue(mockStream as any);
-    vi.spyOn(SSEClient.prototype, 'annotateComments').mockReturnValue(mockStream as any);
-    vi.spyOn(SSEClient.prototype, 'annotateReferences').mockReturnValue(mockStream as any);
+    vi.spyOn(SSEClient.prototype, 'markHighlights').mockReturnValue(mockStream as any);
+    vi.spyOn(SSEClient.prototype, 'markAssessments').mockReturnValue(mockStream as any);
+    vi.spyOn(SSEClient.prototype, 'markComments').mockReturnValue(mockStream as any);
+    vi.spyOn(SSEClient.prototype, 'markReferences').mockReturnValue(mockStream as any);
 
     mockAnnotations = [];
   });

package/src/features/resource-viewer/components/ResourceViewerPage.tsx

@@ -415,12 +415,12 @@ export function ResourceViewerPage({
     // Error notification is handled by useYieldFlow
   }, []);
 
-  const handleReferenceNavigate = useCallback(({ documentId }: { documentId: string }) => {
-    if (routes.resource) {
-      const path = routes.resource.replace('[resourceId]', encodeURIComponent(documentId));
+  const handleReferenceNavigate = useCallback(({ resourceId }: { resourceId: string }) => {
+    if (routes.resourceDetail) {
+      const path = routes.resourceDetail(resourceId);
       eventBus.get('browse:router-push').next({ path, reason: 'reference-link' });
     }
-  }, [routes.resource]); // eventBus is stable singleton - never in deps
+  }, [routes.resourceDetail]); // eventBus is stable singleton - never in deps
 
   const handleEntityTypeClicked = useCallback(({ entityType }: { entityType: string }) => {
     if (routes.know) {
@@ -613,6 +613,7 @@ export function ResourceViewerPage({
                 referencedBy={referencedBy}
                 referencedByLoading={referencedByLoading}
                 resourceId={rUri}
+                locale={locale}
                 scrollToAnnotationId={scrollToAnnotationId}
                 hoveredAnnotationId={hoveredAnnotationId}
                 onScrollCompleted={onScrollCompleted}
@@ -643,6 +644,12 @@ export function ResourceViewerPage({
                 primaryMediaType={primaryMediaType}
                 primaryByteSize={primaryByteSize}
                 isArchived={resource.archived ?? false}
+                dateCreated={resource.dateCreated}
+                dateModified={resource.dateModified}
+                creationMethod={resource.creationMethod}
+                wasAttributedTo={resource.wasAttributedTo}
+                wasDerivedFrom={resource.wasDerivedFrom}
+                generator={resource.generator as components['schemas']['Agent'] | components['schemas']['Agent'][] | undefined}
               />
             )}
 
@@ -690,15 +697,9 @@ export function ResourceViewerPage({
           configureGenerationTitle: tw('configureGenerationTitle'),
           configureSearchTitle: tw('configureSearchTitle'),
           searchResultsTitle: tw('searchResultsTitle'),
-          annotationLabel: tw('annotationLabel'),
-          sourceResourceLabel: tw('sourceResourceLabel'),
-          motivationLabel: tw('motivationLabel'),
           sourceContextLabel: tw('sourceContextLabel'),
-          entityTypesLabel: tw('entityTypesLabel'),
-          graphContextLabel: tw('graphContextLabel'),
           connectionsLabel: tw('connectionsLabel'),
           citedByLabel: tw('citedByLabel'),
-          siblingTypesLabel: tw('siblingTypesLabel'),
           userHintLabel: tw('userHintLabel'),
           userHintPlaceholder: tw('userHintPlaceholder'),
           loadingContext: tw('loadingContext'),
@@ -708,6 +709,7 @@ export function ResourceViewerPage({
           searching: tw('searching'),
           generate: tw('generate'),
           compose: tw('compose'),
+          resolutionStrategyLabel: tw('resolutionStrategyLabel'),
           back: tw('back'),
           link: tw('link'),
           score: tw('score'),