@semiont/react-ui 0.4.14 → 0.4.16

package/src/components/modals/__tests__/PermissionDeniedModal.test.tsx

@@ -0,0 +1,150 @@
+/**
+ * PermissionDeniedModal Tests
+ *
+ * The modal renders content when `permissionDeniedAt` is non-null on the
+ * KnowledgeBaseSession context, and is hidden otherwise. Button clicks call
+ * `acknowledgePermissionDenied()` and navigate the window or history.
+ */
+
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import React from 'react';
+import { screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import {
+  renderWithProviders,
+  createMockKnowledgeBaseSession,
+} from '../../../test-utils';
+import { PermissionDeniedModal } from '../PermissionDeniedModal';
+
+vi.mock('@headlessui/react', () => ({
+  Dialog: ({ children, ...props }: any) => <div role="dialog" {...props}>{typeof children === 'function' ? children({ open: true }) : children}</div>,
+  DialogPanel: ({ children, ...props }: any) => <div {...props}>{children}</div>,
+  DialogTitle: ({ children, ...props }: any) => <h2 {...props}>{children}</h2>,
+  Transition: ({ show, children }: any) => show ? <>{children}</> : null,
+  TransitionChild: ({ children }: any) => <>{children}</>,
+}));
+
+const originalLocation = window.location;
+const originalHistoryBack = window.history.back;
+let mockLocation: { href: string; pathname: string };
+let mockHistoryBack: ReturnType<typeof vi.fn>;
+
+beforeEach(() => {
+  mockLocation = { href: '', pathname: '/admin/users' };
+  Object.defineProperty(window, 'location', {
+    value: mockLocation,
+    writable: true,
+    configurable: true,
+  });
+  mockHistoryBack = vi.fn();
+  window.history.back = mockHistoryBack;
+});
+
+afterEach(() => {
+  Object.defineProperty(window, 'location', {
+    value: originalLocation,
+    writable: true,
+    configurable: true,
+  });
+  window.history.back = originalHistoryBack;
+});
+
+describe('PermissionDeniedModal', () => {
+  describe('initial render', () => {
+    it('does not render modal content when permissionDeniedAt is null', () => {
+      renderWithProviders(<PermissionDeniedModal />, {
+        knowledgeBaseSession: createMockKnowledgeBaseSession({
+          permissionDeniedAt: null,
+        }),
+      });
+      expect(screen.queryByText('Access Denied')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('when permissionDeniedAt is set', () => {
+    it('shows modal with default message when no message provided', () => {
+      renderWithProviders(<PermissionDeniedModal />, {
+        knowledgeBaseSession: createMockKnowledgeBaseSession({
+          permissionDeniedAt: Date.now(),
+        }),
+      });
+
+      expect(screen.getByText('Access Denied')).toBeInTheDocument();
+      expect(screen.getByText('You do not have permission to perform this action.')).toBeInTheDocument();
+    });
+
+    it('shows custom message from permissionDeniedMessage', () => {
+      renderWithProviders(<PermissionDeniedModal />, {
+        knowledgeBaseSession: createMockKnowledgeBaseSession({
+          permissionDeniedAt: Date.now(),
+          permissionDeniedMessage: 'Admin access required for this resource',
+        }),
+      });
+
+      expect(screen.getByText('Admin access required for this resource')).toBeInTheDocument();
+    });
+
+    it('renders all three action buttons', () => {
+      renderWithProviders(<PermissionDeniedModal />, {
+        knowledgeBaseSession: createMockKnowledgeBaseSession({
+          permissionDeniedAt: Date.now(),
+        }),
+      });
+
+      expect(screen.getByRole('button', { name: /go back/i })).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: /go to home/i })).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: /switch account/i })).toBeInTheDocument();
+    });
+  });
+
+  describe('button actions', () => {
+    it('acknowledges and calls window.history.back on Go Back', () => {
+      const ack = vi.fn();
+      renderWithProviders(<PermissionDeniedModal />, {
+        knowledgeBaseSession: createMockKnowledgeBaseSession({
+          permissionDeniedAt: Date.now(),
+          permissionDeniedMessage: 'denied',
+          acknowledgePermissionDenied: ack,
+        }),
+      });
+
+      fireEvent.click(screen.getByRole('button', { name: /go back/i }));
+
+      expect(ack).toHaveBeenCalled();
+      expect(mockHistoryBack).toHaveBeenCalled();
+    });
+
+    it('acknowledges and navigates to / on Go to Home', () => {
+      const ack = vi.fn();
+      renderWithProviders(<PermissionDeniedModal />, {
+        knowledgeBaseSession: createMockKnowledgeBaseSession({
+          permissionDeniedAt: Date.now(),
+          permissionDeniedMessage: 'denied',
+          acknowledgePermissionDenied: ack,
+        }),
+      });
+
+      fireEvent.click(screen.getByRole('button', { name: /go to home/i }));
+
+      expect(ack).toHaveBeenCalled();
+      expect(mockLocation.href).toBe('/');
+    });
+
+    it('acknowledges and navigates to /auth/connect with current path on Switch Account', () => {
+      const ack = vi.fn();
+      mockLocation.pathname = '/admin/users';
+      renderWithProviders(<PermissionDeniedModal />, {
+        knowledgeBaseSession: createMockKnowledgeBaseSession({
+          permissionDeniedAt: Date.now(),
+          permissionDeniedMessage: 'denied',
+          acknowledgePermissionDenied: ack,
+        }),
+      });
+
+      fireEvent.click(screen.getByRole('button', { name: /switch account/i }));
+
+      expect(ack).toHaveBeenCalled();
+      expect(mockLocation.href).toBe('/auth/connect?callbackUrl=%2Fadmin%2Fusers');
+    });
+  });
+});

package/src/components/modals/__tests__/SessionExpiredModal.test.tsx

@@ -0,0 +1,115 @@
+/**
+ * SessionExpiredModal Tests
+ *
+ * The modal renders content when `sessionExpiredAt` is non-null on the
+ * KnowledgeBaseSession context, and is hidden otherwise. Button clicks
+ * call `acknowledgeSessionExpired()` and navigate the window.
+ */
+
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import React from 'react';
+import { screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import {
+  renderWithProviders,
+  createMockKnowledgeBaseSession,
+} from '../../../test-utils';
+import { SessionExpiredModal } from '../SessionExpiredModal';
+
+vi.mock('@headlessui/react', () => ({
+  Dialog: ({ children, ...props }: any) => <div role="dialog" {...props}>{typeof children === 'function' ? children({ open: true }) : children}</div>,
+  DialogPanel: ({ children, ...props }: any) => <div {...props}>{children}</div>,
+  DialogTitle: ({ children, ...props }: any) => <h2 {...props}>{children}</h2>,
+  Transition: ({ show, children }: any) => show ? <>{children}</> : null,
+  TransitionChild: ({ children }: any) => <>{children}</>,
+}));
+
+const originalLocation = window.location;
+let mockLocation: { href: string; pathname: string };
+
+beforeEach(() => {
+  mockLocation = { href: '', pathname: '/know/discover' };
+  Object.defineProperty(window, 'location', {
+    value: mockLocation,
+    writable: true,
+    configurable: true,
+  });
+});
+
+afterEach(() => {
+  Object.defineProperty(window, 'location', {
+    value: originalLocation,
+    writable: true,
+    configurable: true,
+  });
+});
+
+describe('SessionExpiredModal', () => {
+  describe('initial render', () => {
+    it('does not render modal content when sessionExpiredAt is null', () => {
+      renderWithProviders(<SessionExpiredModal />, {
+        knowledgeBaseSession: createMockKnowledgeBaseSession({
+          sessionExpiredAt: null,
+        }),
+      });
+      expect(screen.queryByText('Session Expired')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('when sessionExpiredAt is set', () => {
+    it('renders the modal with default message', () => {
+      renderWithProviders(<SessionExpiredModal />, {
+        knowledgeBaseSession: createMockKnowledgeBaseSession({
+          sessionExpiredAt: Date.now(),
+        }),
+      });
+
+      expect(screen.getByText('Session Expired')).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: /sign in again/i })).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: /go to home/i })).toBeInTheDocument();
+    });
+
+    it('renders the custom message from sessionExpiredMessage', () => {
+      renderWithProviders(<SessionExpiredModal />, {
+        knowledgeBaseSession: createMockKnowledgeBaseSession({
+          sessionExpiredAt: Date.now(),
+          sessionExpiredMessage: 'Your token expired at 5pm',
+        }),
+      });
+      expect(screen.getByText(/your token expired at 5pm/i)).toBeInTheDocument();
+    });
+  });
+
+  describe('button actions', () => {
+    it('calls acknowledgeSessionExpired and navigates to /auth/connect on Sign In Again', () => {
+      const ack = vi.fn();
+      mockLocation.pathname = '/know/discover';
+      renderWithProviders(<SessionExpiredModal />, {
+        knowledgeBaseSession: createMockKnowledgeBaseSession({
+          sessionExpiredAt: Date.now(),
+          acknowledgeSessionExpired: ack,
+        }),
+      });
+
+      fireEvent.click(screen.getByRole('button', { name: /sign in again/i }));
+
+      expect(ack).toHaveBeenCalled();
+      expect(mockLocation.href).toBe('/auth/connect?callbackUrl=%2Fknow%2Fdiscover');
+    });
+
+    it('calls acknowledgeSessionExpired and navigates to / on Go to Home', () => {
+      const ack = vi.fn();
+      renderWithProviders(<SessionExpiredModal />, {
+        knowledgeBaseSession: createMockKnowledgeBaseSession({
+          sessionExpiredAt: Date.now(),
+          acknowledgeSessionExpired: ack,
+        }),
+      });
+
+      fireEvent.click(screen.getByRole('button', { name: /go to home/i }));
+
+      expect(ack).toHaveBeenCalled();
+      expect(mockLocation.href).toBe('/');
+    });
+  });
+});

package/src/components/resource/AnnotationHistory.tsx

@@ -5,7 +5,7 @@ import { useTranslations } from '../../contexts/TranslationContext';
 import type { RouteBuilder, LinkComponentProps } from '../../contexts/RoutingContext';
 import { useResources } from '../../lib/api-hooks';
 import type { ResourceId } from '@semiont/core';
-import { getAnnotationUriFromEvent } from '@semiont/core';
+import { getAnnotationUriFromEvent, type StoredEventLike } from '@semiont/core';
 import { HistoryEvent } from './HistoryEvent';
 
 interface Props {
@@ -36,11 +36,10 @@ export function AnnotationHistory({ rUri, hoveredAnnotationId, onEventHover, onE
   const containerRef = useRef<HTMLDivElement>(null);
 
   // Sort events by oldest first (most recent at bottom)
-  // Filter out all job events - they're represented by annotation.body.updated events instead
-  const events = !eventsData?.events ? [] : [...eventsData.events]
+  // Filter out job events - they're represented by mark:body-updated events instead
+  const events: StoredEventLike[] = !eventsData?.events ? [] : (eventsData.events as StoredEventLike[])
     .filter((e) => {
-      const eventType = e.event.type;
-      return eventType !== 'job.started' && eventType !== 'job.progress' && eventType !== 'job.completed';
+      return e.type !== 'job:started' && e.type !== 'job:progress' && e.type !== 'job:completed';
     })
     .sort((a, b) => a.metadata.sequenceNumber - b.metadata.sequenceNumber);
 
@@ -110,7 +109,7 @@ export function AnnotationHistory({ rUri, hoveredAnnotationId, onEventHover, onE
 
           return (
             <HistoryEvent
-              key={stored.event.id}
+              key={stored.id}
               event={stored}
               annotations={annotations}
               allEvents={events}

package/src/components/resource/HistoryEvent.tsx

@@ -2,12 +2,13 @@
 
 import React, { useRef, useCallback, useEffect } from 'react';
 import type { RouteBuilder, LinkComponentProps } from '../../contexts/RoutingContext';
-import type { StoredEventLike, ResourceEventType } from '@semiont/core';
+import type { StoredEventLike, PersistedEventType } from '@semiont/core';
 import { getAnnotationUriFromEvent } from '@semiont/core';
 import {
   formatEventType,
   getEventEmoji,
   formatRelativeTime,
+  formatUserId,
   getEventDisplayContent,
   getEventEntityTypes,
   getResourceCreationDetails,
@@ -85,7 +86,7 @@ export function HistoryEvent({
   const eventWrapperProps = annotationUri ? {
     type: 'button' as const,
     onClick: () => onEventClick?.(annotationUri),
-    'aria-label': t('viewAnnotation', { content: displayContent?.exact || formatEventType(event.event.type as ResourceEventType, t) }),
+    'aria-label': t('viewAnnotation', { content: displayContent?.exact || formatEventType(event.type as PersistedEventType, t) }),
     className: 'semiont-history-event',
     'data-related': isRelated ? 'true' : 'false',
     'data-interactive': 'true'
@@ -109,7 +110,7 @@ export function HistoryEvent({
           onMouseEnter={handleEmojiMouseEnter}
           onMouseLeave={handleEmojiMouseLeave}
         >
-          {getEventEmoji(event.event.type as ResourceEventType, event.event.payload)}
+          {getEventEmoji(event.type as PersistedEventType, event.payload)}
         </span>
         {displayContent ? (
           displayContent.isTag ? (
@@ -127,16 +128,16 @@ export function HistoryEvent({
           )
         ) : (
           <span className="semiont-history-event__text">
-            {formatEventType(event.event.type as ResourceEventType, t, event.event.payload)}
+            {formatEventType(event.type as PersistedEventType, t, event.payload)}
           </span>
         )}
-        {event.event.userId && (
+        {event.userId && (
           <span className="semiont-history-event__user">
-            {event.event.userId}
+            {formatUserId(event.userId)}
           </span>
         )}
         <span className="semiont-history-event__timestamp">
-          {formatRelativeTime(event.event.timestamp, t)}
+          {formatRelativeTime(event.timestamp, t)}
         </span>
       </div>
       {entityTypes.length > 0 && (
@@ -155,7 +156,7 @@ export function HistoryEvent({
       {creationDetails && (
         <div className="semiont-history-event__details">
           <span className="semiont-history-event__detail">
-            {t('user')}: <span className="semiont-history-event__detail-value">{creationDetails.userId}</span>
+            {t('user')}: <span className="semiont-history-event__detail-value">{creationDetails.userId ? formatUserId(creationDetails.userId) : ''}</span>
           </span>
           <span className="semiont-history-event__detail">
             {t('method')}: <span className="semiont-history-event__detail-value semiont-history-event__detail-value--uppercase">{creationDetails.method}</span>

package/src/components/resource/__tests__/AnnotationHistory.test.tsx

@@ -40,8 +40,8 @@ vi.mock('../../../lib/api-hooks', () => ({
 
 // Mock HistoryEvent to avoid deep rendering and mocking all its dependencies
 const MockHistoryEvent = vi.fn(({ event }: any) => (
-  <div data-testid={`history-event-${event.event.id}`}>
-    {event.event.type}
+  <div data-testid={`history-event-${event.id}`}>
+    {event.type}
   </div>
 ));
 
@@ -54,23 +54,22 @@ const mockGetAnnotationUri = getAnnotationUriFromEvent as ReturnType<typeof vi.f
 
 const testRId = 'res-1' as ResourceId;
 
-function makeStoredEvent(id: string, type: string, seq: number, overrides: Record<string, any> = {}): StoredEvent {
+/** Returns flat StoredEventResponse shape (matches API response) */
+function makeStoredEvent(id: string, type: string, seq: number, overrides: Record<string, any> = {}): any {
   return {
-    event: {
-      id,
-      type,
-      timestamp: '2026-03-06T12:00:00Z',
-      resourceId: 'res-1',
-      userId: 'user-1',
-      version: 1,
-      payload: {},
-      ...overrides,
-    },
+    id,
+    type,
+    timestamp: '2026-03-06T12:00:00Z',
+    resourceId: 'res-1',
+    userId: 'user-1',
+    version: 1,
+    payload: {},
+    ...overrides,
     metadata: {
       sequenceNumber: seq,
-      storedAt: '2026-03-06T12:00:00Z',
+      streamPosition: 0,
     },
-  } as StoredEvent;
+  };
 }
 
 const MockLink = ({ href, children, ...props }: any) => <a href={href} {...props}>{children}</a>;
@@ -130,9 +129,9 @@ describe('AnnotationHistory', () => {
 
   it('renders events sorted by sequence number', () => {
     const events = [
-      makeStoredEvent('evt-3', 'annotation.added', 3),
-      makeStoredEvent('evt-1', 'resource.created', 1),
-      makeStoredEvent('evt-2', 'annotation.added', 2),
+      makeStoredEvent('evt-3', 'mark:added', 3),
+      makeStoredEvent('evt-1', 'yield:created', 1),
+      makeStoredEvent('evt-2', 'mark:added', 2),
     ];
     mockEventsUseQuery.mockReturnValue({ data: { events }, isLoading: false, isError: false });
 
@@ -152,18 +151,18 @@ describe('AnnotationHistory', () => {
 
     // Verify HistoryEvent was called with events in sequence order
     const calls = MockHistoryEvent.mock.calls;
-    expect(calls[0][0].event.event.id).toBe('evt-1');
-    expect(calls[1][0].event.event.id).toBe('evt-2');
-    expect(calls[2][0].event.event.id).toBe('evt-3');
+    expect(calls[0][0].event.id).toBe('evt-1');  // .event is the React prop name
+    expect(calls[1][0].event.id).toBe('evt-2');
+    expect(calls[2][0].event.id).toBe('evt-3');
   });
 
   it('filters out job events', () => {
     const events = [
-      makeStoredEvent('evt-1', 'resource.created', 1),
-      makeStoredEvent('evt-2', 'job.started', 2),
-      makeStoredEvent('evt-3', 'job.progress', 3),
-      makeStoredEvent('evt-4', 'job.completed', 4),
-      makeStoredEvent('evt-5', 'annotation.added', 5),
+      makeStoredEvent('evt-1', 'yield:created', 1),
+      makeStoredEvent('evt-2', 'job:started', 2),
+      makeStoredEvent('evt-3', 'job:progress', 3),
+      makeStoredEvent('evt-4', 'job:completed', 4),
+      makeStoredEvent('evt-5', 'mark:added', 5),
     ];
     mockEventsUseQuery.mockReturnValue({ data: { events }, isLoading: false, isError: false });
 
@@ -188,7 +187,7 @@ describe('AnnotationHistory', () => {
     mockGetAnnotationUri.mockReturnValue(annotationUri);
 
     const events = [
-      makeStoredEvent('evt-1', 'annotation.added', 1),
+      makeStoredEvent('evt-1', 'mark:added', 1),
     ];
     mockEventsUseQuery.mockReturnValue({ data: { events }, isLoading: false, isError: false });
 
@@ -209,7 +208,7 @@ describe('AnnotationHistory', () => {
     mockGetAnnotationUri.mockReturnValue('http://localhost/annotations/ann-other');
 
     const events = [
-      makeStoredEvent('evt-1', 'annotation.added', 1),
+      makeStoredEvent('evt-1', 'mark:added', 1),
     ];
     mockEventsUseQuery.mockReturnValue({ data: { events }, isLoading: false, isError: false });
 
@@ -228,7 +227,7 @@ describe('AnnotationHistory', () => {
 
   it('passes isRelated=false when no hoveredAnnotationId', () => {
     const events = [
-      makeStoredEvent('evt-1', 'annotation.added', 1),
+      makeStoredEvent('evt-1', 'mark:added', 1),
     ];
     mockEventsUseQuery.mockReturnValue({ data: { events }, isLoading: false, isError: false });
 
@@ -249,7 +248,7 @@ describe('AnnotationHistory', () => {
     const onEventHover = vi.fn();
 
     const events = [
-      makeStoredEvent('evt-1', 'resource.created', 1),
+      makeStoredEvent('evt-1', 'yield:created', 1),
     ];
     mockEventsUseQuery.mockReturnValue({ data: { events }, isLoading: false, isError: false });
 
@@ -270,7 +269,7 @@ describe('AnnotationHistory', () => {
 
   it('does not pass onEventClick/onEventHover when not provided', () => {
     const events = [
-      makeStoredEvent('evt-1', 'resource.created', 1),
+      makeStoredEvent('evt-1', 'yield:created', 1),
     ];
     mockEventsUseQuery.mockReturnValue({ data: { events }, isLoading: false, isError: false });
 
@@ -292,7 +291,7 @@ describe('AnnotationHistory', () => {
     mockAnnotationsUseQuery.mockReturnValue({ data: { annotations: mockAnnotations } });
 
     const events = [
-      makeStoredEvent('evt-1', 'resource.created', 1),
+      makeStoredEvent('evt-1', 'yield:created', 1),
     ];
     mockEventsUseQuery.mockReturnValue({ data: { events }, isLoading: false, isError: false });
 
@@ -312,7 +311,7 @@ describe('AnnotationHistory', () => {
     mockAnnotationsUseQuery.mockReturnValue({ data: undefined });
 
     const events = [
-      makeStoredEvent('evt-1', 'resource.created', 1),
+      makeStoredEvent('evt-1', 'yield:created', 1),
     ];
     mockEventsUseQuery.mockReturnValue({ data: { events }, isLoading: false, isError: false });
 
@@ -330,7 +329,7 @@ describe('AnnotationHistory', () => {
 
   it('renders history panel structure with title and list', () => {
     const events = [
-      makeStoredEvent('evt-1', 'resource.created', 1),
+      makeStoredEvent('evt-1', 'yield:created', 1),
     ];
     mockEventsUseQuery.mockReturnValue({ data: { events }, isLoading: false, isError: false });
 

package/src/components/resource/__tests__/HistoryEvent.test.tsx

@@ -28,6 +28,7 @@ vi.mock('../event-formatting', () => ({
   formatEventType: vi.fn((_type: string, t: (key: string) => string) => t('resourceCreated')),
   getEventEmoji: vi.fn(() => '\u{1F4C4}'),
   formatRelativeTime: vi.fn(() => '2 minutes ago'),
+  formatUserId: vi.fn((id: string) => id),
   getEventDisplayContent: vi.fn(() => mockDisplayContent),
   getEventEntityTypes: vi.fn(() => mockEntityTypes),
   getResourceCreationDetails: vi.fn(() => mockCreationDetails),
@@ -49,23 +50,21 @@ const mockGetEventEntityTypes = getEventEntityTypes as ReturnType<typeof vi.fn>;
 const mockGetResourceCreationDetails = getResourceCreationDetails as ReturnType<typeof vi.fn>;
 const mockFormatEventType = formatEventType as ReturnType<typeof vi.fn>;
 
-function makeStoredEvent(overrides: Partial<StoredEvent['event']> = {}): StoredEvent {
+function makeStoredEvent(overrides: Record<string, any> = {}): any {
   return {
-    event: {
-      id: 'evt-1',
-      type: 'resource.created',
-      timestamp: '2026-03-06T12:00:00Z',
-      resourceId: 'res-1',
-      userId: 'user-1',
-      version: 1,
-      payload: { name: 'Test', format: 'text/plain', contentChecksum: 'abc', creationMethod: 'upload' },
-      ...overrides,
-    },
+    id: 'evt-1',
+    type: 'yield:created',
+    timestamp: '2026-03-06T12:00:00Z',
+    resourceId: 'res-1',
+    userId: 'user-1',
+    version: 1,
+    payload: { name: 'Test', format: 'text/plain', contentChecksum: 'abc', creationMethod: 'upload' },
+    ...overrides,
     metadata: {
       sequenceNumber: 1,
-      storedAt: '2026-03-06T12:00:00Z',
+      streamPosition: 0,
     },
-  } as StoredEvent;
+  };
 }
 
 const mockT = (key: string) => key;
@@ -139,7 +138,7 @@ describe('HistoryEvent', () => {
 
   it('renders as button when annotationUri exists', () => {
     mockGetAnnotationUri.mockReturnValue('http://localhost/annotations/ann-1');
-    const event = makeStoredEvent({ type: 'annotation.added' } as any);
+    const event = makeStoredEvent({ type: 'mark:added' } as any);
     const { container } = renderWithProviders(
       <HistoryEvent
         event={event}
@@ -160,7 +159,7 @@ describe('HistoryEvent', () => {
     const annotationUri = 'http://localhost/annotations/ann-1';
     mockGetAnnotationUri.mockReturnValue(annotationUri);
     const onEventClick = vi.fn();
-    const event = makeStoredEvent({ type: 'annotation.added' } as any);
+    const event = makeStoredEvent({ type: 'mark:added' } as any);
 
     renderWithProviders(
       <HistoryEvent
@@ -364,7 +363,7 @@ describe('HistoryEvent', () => {
     const annotationUri = 'http://localhost/annotations/ann-1';
     mockGetAnnotationUri.mockReturnValue(annotationUri);
     const onEventRef = vi.fn();
-    const event = makeStoredEvent({ type: 'annotation.added' } as any);
+    const event = makeStoredEvent({ type: 'mark:added' } as any);
 
     renderWithProviders(
       <HistoryEvent
@@ -387,7 +386,7 @@ describe('HistoryEvent', () => {
     const annotationUri = 'http://localhost/annotations/ann-1';
     mockGetAnnotationUri.mockReturnValue(annotationUri);
     const onEventHover = vi.fn();
-    const event = makeStoredEvent({ type: 'annotation.added' } as any);
+    const event = makeStoredEvent({ type: 'mark:added' } as any);
 
     const { container } = renderWithProviders(
       <HistoryEvent
@@ -420,7 +419,7 @@ describe('HistoryEvent', () => {
     const annotationUri = 'http://localhost/annotations/ann-1';
     mockGetAnnotationUri.mockReturnValue(annotationUri);
     const onEventHover = vi.fn();
-    const event = makeStoredEvent({ type: 'annotation.added' } as any);
+    const event = makeStoredEvent({ type: 'mark:added' } as any);
 
     const { container } = renderWithProviders(
       <HistoryEvent
@@ -454,7 +453,7 @@ describe('HistoryEvent', () => {
 
   it('sets data-interactive on button wrapper', () => {
     mockGetAnnotationUri.mockReturnValue('http://localhost/annotations/ann-1');
-    const event = makeStoredEvent({ type: 'annotation.added' } as any);
+    const event = makeStoredEvent({ type: 'mark:added' } as any);
     const { container } = renderWithProviders(
       <HistoryEvent
         event={event}