@semiont/react-ui 0.4.14 → 0.4.16

package/src/components/resource/__tests__/event-formatting.test.ts

@@ -26,41 +26,41 @@ describe('event-formatting', () => {
 
   describe('formatEventType', () => {
     it('returns translation key for resource events', () => {
-      expect(formatEventType('resource.created', t)).toBe('resourceCreated');
-      expect(formatEventType('resource.cloned', t)).toBe('resourceCloned');
-      expect(formatEventType('resource.archived', t)).toBe('resourceArchived');
-      expect(formatEventType('resource.unarchived', t)).toBe('resourceUnarchived');
+      expect(formatEventType('yield:created', t)).toBe('resourceCreated');
+      expect(formatEventType('yield:cloned', t)).toBe('resourceCloned');
+      expect(formatEventType('mark:archived', t)).toBe('resourceArchived');
+      expect(formatEventType('mark:unarchived', t)).toBe('resourceUnarchived');
     });
 
-    it('returns motivation-specific key for annotation.added', () => {
-      expect(formatEventType('annotation.added', t, { annotation: { motivation: 'highlighting' } })).toBe('highlightAdded');
-      expect(formatEventType('annotation.added', t, { annotation: { motivation: 'linking' } })).toBe('referenceCreated');
-      expect(formatEventType('annotation.added', t, { annotation: { motivation: 'assessing' } })).toBe('assessmentAdded');
-      expect(formatEventType('annotation.added', t, { annotation: { motivation: 'commenting' } })).toBe('annotationAdded');
+    it('returns motivation-specific key for mark:added', () => {
+      expect(formatEventType('mark:added', t, { annotation: { motivation: 'highlighting' } })).toBe('highlightAdded');
+      expect(formatEventType('mark:added', t, { annotation: { motivation: 'linking' } })).toBe('referenceCreated');
+      expect(formatEventType('mark:added', t, { annotation: { motivation: 'assessing' } })).toBe('assessmentAdded');
+      expect(formatEventType('mark:added', t, { annotation: { motivation: 'commenting' } })).toBe('annotationAdded');
     });
 
-    it('returns annotationRemoved for annotation.removed', () => {
-      expect(formatEventType('annotation.removed', t)).toBe('annotationRemoved');
+    it('returns annotationRemoved for mark:removed', () => {
+      expect(formatEventType('mark:removed', t)).toBe('annotationRemoved');
     });
 
-    it('returns annotationBodyUpdated for annotation.body.updated', () => {
-      expect(formatEventType('annotation.body.updated', t)).toBe('annotationBodyUpdated');
+    it('returns annotationBodyUpdated for mark:body-updated', () => {
+      expect(formatEventType('mark:body-updated', t)).toBe('annotationBodyUpdated');
     });
 
     it('returns entitytag keys', () => {
-      expect(formatEventType('entitytag.added', t)).toBe('entitytagAdded');
-      expect(formatEventType('entitytag.removed', t)).toBe('entitytagRemoved');
+      expect(formatEventType('mark:entity-tag-added', t)).toBe('entitytagAdded');
+      expect(formatEventType('mark:entity-tag-removed', t)).toBe('entitytagRemoved');
     });
 
     it('returns jobEvent for job types', () => {
-      expect(formatEventType('job.completed', t)).toBe('jobEvent');
-      expect(formatEventType('job.started', t)).toBe('jobEvent');
-      expect(formatEventType('job.failed', t)).toBe('jobEvent');
+      expect(formatEventType('job:completed', t)).toBe('jobEvent');
+      expect(formatEventType('job:started', t)).toBe('jobEvent');
+      expect(formatEventType('job:failed', t)).toBe('jobEvent');
     });
 
-    it('returns representationEvent for representation types', () => {
-      expect(formatEventType('representation.added', t)).toBe('representationEvent');
-      expect(formatEventType('representation.removed', t)).toBe('representationEvent');
+    it('returns representationEvent for yield:representation types', () => {
+      expect(formatEventType('yield:representation-added', t)).toBe('representationEvent');
+      expect(formatEventType('yield:representation-removed', t)).toBe('representationEvent');
     });
 
     it('returns raw type for unknown event types', () => {
@@ -70,33 +70,33 @@ describe('event-formatting', () => {
 
   describe('getEventEmoji', () => {
     it('returns document emoji for resource events', () => {
-      expect(getEventEmoji('resource.created')).toBe('📄');
-      expect(getEventEmoji('resource.cloned')).toBe('📄');
+      expect(getEventEmoji('yield:created')).toBe('📄');
+      expect(getEventEmoji('yield:cloned')).toBe('📄');
     });
 
-    it('returns motivation-specific emoji for annotation.added', () => {
-      expect(getEventEmoji('annotation.added', { annotation: { motivation: 'highlighting' } })).toBe('🟡');
-      expect(getEventEmoji('annotation.added', { annotation: { motivation: 'linking' } })).toBeTruthy();
-      expect(getEventEmoji('annotation.added', { annotation: { motivation: 'assessing' } })).toBe('🔴');
+    it('returns motivation-specific emoji for mark:added', () => {
+      expect(getEventEmoji('mark:added', { annotation: { motivation: 'highlighting' } })).toBe('🟡');
+      expect(getEventEmoji('mark:added', { annotation: { motivation: 'linking' } })).toBeTruthy();
+      expect(getEventEmoji('mark:added', { annotation: { motivation: 'assessing' } })).toBe('🔴');
     });
 
-    it('returns trash emoji for annotation.removed', () => {
-      expect(getEventEmoji('annotation.removed')).toBe('🗑️');
+    it('returns trash emoji for mark:removed', () => {
+      expect(getEventEmoji('mark:removed')).toBe('🗑️');
     });
 
-    it('returns pencil emoji for annotation.body.updated', () => {
-      expect(getEventEmoji('annotation.body.updated')).toBe('✏️');
+    it('returns pencil emoji for mark:body-updated', () => {
+      expect(getEventEmoji('mark:body-updated')).toBe('✏️');
     });
 
     it('returns tag emoji for entitytag events', () => {
-      expect(getEventEmoji('entitytag.added')).toBe('🏷️');
-      expect(getEventEmoji('entitytag.removed')).toBe('🏷️');
+      expect(getEventEmoji('mark:entity-tag-added')).toBe('🏷️');
+      expect(getEventEmoji('mark:entity-tag-removed')).toBe('🏷️');
     });
 
     it('returns appropriate emoji for job events', () => {
-      expect(getEventEmoji('job.completed')).toBe('🔗');
-      expect(getEventEmoji('job.started')).toBe('⚙️');
-      expect(getEventEmoji('job.failed')).toBe('❌');
+      expect(getEventEmoji('job:completed')).toBe('🔗');
+      expect(getEventEmoji('job:started')).toBe('⚙️');
+      expect(getEventEmoji('job:failed')).toBe('❌');
     });
 
     it('returns default emoji for unknown', () => {
@@ -137,55 +137,43 @@ describe('event-formatting', () => {
   });
 
   describe('getEventDisplayContent', () => {
-    it('returns resource name for resource.created', () => {
-      const event = {
-        event: { type: 'resource.created' as const, payload: { name: 'My Document' }, userId: 'u1', timestamp: '' },
-      } as any;
+    it('returns resource name for yield:created', () => {
+      const event = { type: 'yield:created' as const, payload: { name: 'My Document' }, userId: 'u1', timestamp: '' } as any;
       const result = getEventDisplayContent(event, [], []);
       expect(result).toEqual({ exact: 'My Document', isQuoted: false, isTag: false });
     });
 
-    it('returns resource name for resource.cloned', () => {
-      const event = {
-        event: { type: 'resource.cloned' as const, payload: { name: 'Cloned Doc' }, userId: 'u1', timestamp: '' },
-      } as any;
+    it('returns resource name for yield:cloned', () => {
+      const event = { type: 'yield:cloned' as const, payload: { name: 'Cloned Doc' }, userId: 'u1', timestamp: '' } as any;
       const result = getEventDisplayContent(event, [], []);
       expect(result).toEqual({ exact: 'Cloned Doc', isQuoted: false, isTag: false });
     });
 
     it('returns entity type for entitytag events', () => {
-      const event = {
-        event: { type: 'entitytag.added' as const, payload: { entityType: 'Person' }, userId: 'u1', timestamp: '' },
-      } as any;
+      const event = { type: 'mark:entity-tag-added' as const, payload: { entityType: 'Person' }, userId: 'u1', timestamp: '' } as any;
       const result = getEventDisplayContent(event, [], []);
       expect(result).toEqual({ exact: 'Person', isQuoted: false, isTag: true });
     });
 
-    it('returns null for job.started', () => {
-      const event = {
-        event: { type: 'job.started' as const, payload: {}, userId: 'u1', timestamp: '' },
-      } as any;
+    it('returns null for job:started', () => {
+      const event = { type: 'job:started' as const, payload: {}, userId: 'u1', timestamp: '' } as any;
       expect(getEventDisplayContent(event, [], [])).toBeNull();
     });
 
-    it('returns null for representation events', () => {
-      const event = {
-        event: { type: 'representation.added' as const, payload: {}, userId: 'u1', timestamp: '' },
-      } as any;
+    it('returns null for yield:representation events', () => {
+      const event = { type: 'yield:representation-added' as const, payload: {}, userId: 'u1', timestamp: '' } as any;
       expect(getEventDisplayContent(event, [], [])).toBeNull();
     });
   });
 
   describe('getEventEntityTypes', () => {
-    it('returns entity types from annotation.added with linking motivation', () => {
+    it('returns entity types from mark:added with linking motivation', () => {
       const event = {
-        event: {
-          type: 'annotation.added' as const,
-          payload: {
-            annotation: {
-              motivation: 'linking',
-              body: { entityTypes: ['Person', 'Place'] },
-            },
+        type: 'mark:added' as const,
+        payload: {
+          annotation: {
+            motivation: 'linking',
+            body: { entityTypes: ['Person', 'Place'] },
           },
         },
       } as any;
@@ -194,33 +182,27 @@ describe('event-formatting', () => {
 
     it('returns empty array for non-linking annotations', () => {
       const event = {
-        event: {
-          type: 'annotation.added' as const,
-          payload: {
-            annotation: { motivation: 'highlighting', body: null },
-          },
+        type: 'mark:added' as const,
+        payload: {
+          annotation: { motivation: 'highlighting', body: null },
         },
       } as any;
       expect(getEventEntityTypes(event)).toEqual([]);
     });
 
     it('returns empty array for non-annotation events', () => {
-      const event = {
-        event: { type: 'resource.created' as const, payload: { name: 'test' } },
-      } as any;
+      const event = { type: 'yield:created' as const, payload: { name: 'test' } } as any;
       expect(getEventEntityTypes(event)).toEqual([]);
     });
   });
 
   describe('getResourceCreationDetails', () => {
-    it('returns created details for resource.created', () => {
+    it('returns created details for yield:created', () => {
       const event = {
-        event: {
-          type: 'resource.created' as const,
-          payload: { name: 'Doc', creationMethod: 'upload' },
-          userId: 'user-1',
-          timestamp: '',
-        },
+        type: 'yield:created' as const,
+        payload: { name: 'Doc', creationMethod: 'upload' },
+        userId: 'user-1',
+        timestamp: '',
       } as any;
       const result = getResourceCreationDetails(event);
       expect(result).toEqual({
@@ -231,14 +213,12 @@ describe('event-formatting', () => {
       });
     });
 
-    it('returns cloned details for resource.cloned', () => {
+    it('returns cloned details for yield:cloned', () => {
       const event = {
-        event: {
-          type: 'resource.cloned' as const,
-          payload: { name: 'Clone', creationMethod: 'clone', parentResourceId: 'parent-1' },
-          userId: 'user-2',
-          timestamp: '',
-        },
+        type: 'yield:cloned' as const,
+        payload: { name: 'Clone', creationMethod: 'clone', parentResourceId: 'parent-1' },
+        userId: 'user-2',
+        timestamp: '',
       } as any;
       const result = getResourceCreationDetails(event);
       expect(result).toEqual({
@@ -253,20 +233,16 @@ describe('event-formatting', () => {
 
     it('uses fallback method when creationMethod missing', () => {
       const event = {
-        event: {
-          type: 'resource.created' as const,
-          payload: { name: 'Doc' },
-          userId: 'u1',
-          timestamp: '',
-        },
+        type: 'yield:created' as const,
+        payload: { name: 'Doc' },
+        userId: 'u1',
+        timestamp: '',
       } as any;
       expect(getResourceCreationDetails(event)?.method).toBe('unknown');
     });
 
     it('returns null for non-creation events', () => {
-      const event = {
-        event: { type: 'annotation.added' as const, payload: {} },
-      } as any;
+      const event = { type: 'mark:added' as const, payload: {} } as any;
       expect(getResourceCreationDetails(event)).toBeNull();
     });
   });

package/src/components/resource/event-formatting.ts

@@ -5,7 +5,7 @@
  * No React dependencies - safe to use in any JavaScript environment.
  */
 
-import type { StoredEventLike, ResourceEventType } from '@semiont/core';
+import type { StoredEventLike, PersistedEventType } from '@semiont/core';
 import type { components } from '@semiont/core';
 import { getExactText, getTargetSelector } from '@semiont/api-client';
 import { ANNOTATORS } from '../../lib/annotation-registry';
@@ -13,6 +13,36 @@ import { ANNOTATORS } from '../../lib/annotation-registry';
 type Annotation = components['schemas']['Annotation'];
 type TranslateFn = (key: string, params?: Record<string, string | number>) => string;
 
+// =============================================================================
+// USER ID DISPLAY
+// =============================================================================
+
+/**
+ * Format a DID or user ID for display.
+ *
+ * did:web:example.com:users:admin%40example.com → admin@example.com
+ * did:web:system:smelter → Smelter
+ * plain-string → plain-string
+ */
+export function formatUserId(userId: string): string {
+  if (!userId.startsWith('did:')) return userId;
+
+  // System actors: did:web:system:smelter → Smelter
+  const systemMatch = userId.match(/^did:web:system:(.+)$/);
+  if (systemMatch) {
+    const name = systemMatch[1];
+    return name.charAt(0).toUpperCase() + name.slice(1);
+  }
+
+  // User DIDs: did:web:example.com:users:admin%40example.com → admin@example.com
+  const userMatch = userId.match(/^did:web:[^:]+:users:(.+)$/);
+  if (userMatch) {
+    return decodeURIComponent(userMatch[1]);
+  }
+
+  return userId;
+}
+
 // =============================================================================
 // EVENT FORMATTING AND DISPLAY
 // =============================================================================
@@ -20,46 +50,49 @@ type TranslateFn = (key: string, params?: Record<string, string | number>) => st
 /**
  * Format event type for display with i18n support
  */
-export function formatEventType(type: ResourceEventType, t: TranslateFn, payload?: any): string {
+export function formatEventType(type: PersistedEventType, t: TranslateFn, payload?: any): string {
   switch (type) {
-    case 'resource.created':
+    case 'yield:created':
       return t('resourceCreated');
-    case 'resource.cloned':
+    case 'yield:cloned':
       return t('resourceCloned');
-    case 'resource.archived':
+    case 'mark:archived':
       return t('resourceArchived');
-    case 'resource.unarchived':
+    case 'mark:unarchived':
       return t('resourceUnarchived');
 
-    case 'annotation.added': {
+    case 'mark:added': {
       const motivation = payload?.annotation?.motivation;
       if (motivation === 'highlighting') return t('highlightAdded');
       if (motivation === 'linking') return t('referenceCreated');
       if (motivation === 'assessing') return t('assessmentAdded');
       return t('annotationAdded');
     }
-    case 'annotation.removed': {
+    case 'mark:removed': {
       return t('annotationRemoved');
     }
-    case 'annotation.body.updated': {
+    case 'mark:body-updated': {
       return t('annotationBodyUpdated');
     }
 
-    case 'entitytag.added':
+    case 'mark:entity-tag-added':
       return t('entitytagAdded');
-    case 'entitytag.removed':
+    case 'mark:entity-tag-removed':
       return t('entitytagRemoved');
 
-    case 'job.completed':
-    case 'job.started':
-    case 'job.progress':
-    case 'job.failed':
+    case 'job:completed':
+    case 'job:started':
+    case 'job:progress':
+    case 'job:failed':
       return t('jobEvent');
 
-    case 'representation.added':
-    case 'representation.removed':
+    case 'yield:representation-added':
+    case 'yield:representation-removed':
       return t('representationEvent');
 
+    case 'embedding:computed':
+      return t('embeddingComputed');
+
     default:
       return type;
   }
@@ -69,15 +102,15 @@ export function formatEventType(type: ResourceEventType, t: TranslateFn, payload
  * Get emoji for event type
  * For unified annotation events, pass the payload to determine motivation
  */
-export function getEventEmoji(type: ResourceEventType, payload?: any): string {
+export function getEventEmoji(type: PersistedEventType, payload?: any): string {
   switch (type) {
-    case 'resource.created':
-    case 'resource.cloned':
-    case 'resource.archived':
-    case 'resource.unarchived':
+    case 'yield:created':
+    case 'yield:cloned':
+    case 'mark:archived':
+    case 'mark:unarchived':
       return '📄';
 
-    case 'annotation.added': {
+    case 'mark:added': {
       const motivation = payload?.annotation?.motivation;
       // Use annotation registry as single source of truth for emojis
       if (motivation === 'highlighting') return ANNOTATORS.highlight.iconEmoji || '📝';
@@ -85,29 +118,32 @@ export function getEventEmoji(type: ResourceEventType, payload?: any): string {
       if (motivation === 'assessing') return ANNOTATORS.assessment.iconEmoji || '📝';
       return '📝';
     }
-    case 'annotation.removed': {
+    case 'mark:removed': {
       return '🗑️';
     }
-    case 'annotation.body.updated': {
+    case 'mark:body-updated': {
       return '✏️';
     }
 
-    case 'entitytag.added':
-    case 'entitytag.removed':
+    case 'mark:entity-tag-added':
+    case 'mark:entity-tag-removed':
       return '🏷️';
 
-    case 'job.completed':
+    case 'job:completed':
       return '🔗';  // Link emoji for linked document creation
-    case 'job.started':
-    case 'job.progress':
+    case 'job:started':
+    case 'job:progress':
       return '⚙️';  // Gear for job processing
-    case 'job.failed':
+    case 'job:failed':
       return '❌';  // X mark for failed jobs
 
-    case 'representation.added':
-    case 'representation.removed':
+    case 'yield:representation-added':
+    case 'yield:representation-removed':
       return '📄';
 
+    case 'embedding:computed':
+      return '🧮';
+
     default:
       return '📝';
   }
@@ -148,18 +184,18 @@ export function getEventDisplayContent(
   annotations: Annotation[], // Unified annotations array (all types)
   allEvents: StoredEventLike[]
 ): { exact: string; isQuoted: boolean; isTag: boolean } | null {
-  const eventData = event.event;
+  const eventData = event;
   const payload = eventData.payload as any;
 
   // Use type discriminators for proper narrowing
   switch (eventData.type) {
-    case 'resource.created':
-    case 'resource.cloned': {
+    case 'yield:created':
+    case 'yield:cloned': {
       return { exact: payload.name, isQuoted: false, isTag: false };
     }
 
     // Unified annotation events
-    case 'annotation.body.updated': {
+    case 'mark:body-updated': {
       // Find current annotation to get its text
       // payload.annotationId is just the UUID, but annotation.id is the full URI
       const annotation = annotations.find(a =>
@@ -180,16 +216,16 @@ export function getEventDisplayContent(
       return null;
     }
 
-    case 'annotation.removed': {
+    case 'mark:removed': {
       // Find the original annotation.added event to get the text
       // payload.annotationId is just the UUID, but annotation.id in the added event is the full URI
       const addedEvent = allEvents.find(e =>
-        e.event.type === 'annotation.added' &&
-        (e.event.payload as any).annotation.id.endsWith(`/annotations/${payload.annotationId}`)
+        e.type === 'mark:added' &&
+        (e.payload as any).annotation.id.endsWith(`/annotations/${payload.annotationId}`)
       );
-      if (addedEvent && addedEvent.event.type === 'annotation.added') {
+      if (addedEvent && addedEvent.type === 'mark:added') {
         try {
-          const target = (addedEvent.event.payload as any).annotation.target;
+          const target = (addedEvent.payload as any).annotation.target;
           if (typeof target !== 'string' && target.selector) {
             const exact = getExactText(target.selector);
             if (exact) {
@@ -203,7 +239,7 @@ export function getEventDisplayContent(
       return null;
     }
 
-    case 'annotation.added': {
+    case 'mark:added': {
       // New unified event structure - annotation is in payload
       try {
         const target = payload.annotation.target;
@@ -219,12 +255,12 @@ export function getEventDisplayContent(
       return null;
     }
 
-    case 'entitytag.added':
-    case 'entitytag.removed': {
+    case 'mark:entity-tag-added':
+    case 'mark:entity-tag-removed': {
       return { exact: payload.entityType, isQuoted: false, isTag: true };
     }
 
-    case 'job.completed': {
+    case 'job:completed': {
       // Find the annotation that was used to generate the resource
       if (payload.annotationUri) {
         const annotation = annotations.find(a =>
@@ -246,11 +282,11 @@ export function getEventDisplayContent(
       return null;
     }
 
-    case 'job.started':
-    case 'job.progress':
-    case 'job.failed':
-    case 'representation.added':
-    case 'representation.removed':
+    case 'job:started':
+    case 'job:progress':
+    case 'job:failed':
+    case 'yield:representation-added':
+    case 'yield:representation-removed':
       return null;
 
     default:
@@ -262,10 +298,10 @@ export function getEventDisplayContent(
  * Get entity types from event payload
  */
 export function getEventEntityTypes(event: StoredEventLike): string[] {
-  const eventData = event.event;
+  const eventData = event;
   const payload = eventData.payload as any;
 
-  if (eventData.type === 'annotation.added') {
+  if (eventData.type === 'mark:added') {
     const motivation = payload.annotation.motivation;
     const body = payload.annotation.body;
     if (motivation === 'linking' && body && 'entityTypes' in body) {
@@ -292,10 +328,10 @@ export interface ResourceCreationDetails {
  * Get resource creation details from event
  */
 export function getResourceCreationDetails(event: StoredEventLike): ResourceCreationDetails | null {
-  const eventData = event.event;
+  const eventData = event;
   const payload = eventData.payload as any;
 
-  if (eventData.type === 'resource.created') {
+  if (eventData.type === 'yield:created') {
     return {
       type: 'created',
       method: payload.creationMethod || 'unknown',
@@ -304,7 +340,7 @@ export function getResourceCreationDetails(event: StoredEventLike): ResourceCrea
     };
   }
 
-  if (eventData.type === 'resource.cloned') {
+  if (eventData.type === 'yield:cloned') {
     return {
       type: 'cloned',
       method: payload.creationMethod || 'clone',

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

@@ -9,6 +9,7 @@ import { getAnnotationExactText, isBodyResolved, getBodySource, getFragmentSelec
 import { getEntityTypes } from '@semiont/ontology';
 import { getResourceIcon } from '../../../lib/resource-utils';
 import { useEventBus } from '../../../contexts/EventBusContext';
+import { useApiClient } from '../../../contexts/ApiClientContext';
 import { useObservableExternalNavigation } from '../../../hooks/useObservableBrowse';
 import { useHoverEmitter } from '../../../hooks/useBeckonFlow';
 
@@ -41,6 +42,7 @@ export function ReferenceEntry({
 }: ReferenceEntryProps) {
   const t = useTranslations('ReferencesPanel');
   const eventBus = useEventBus();
+  const semiont = useApiClient();
   const navigate = useObservableExternalNavigation();
   const hoverProps = useHoverEmitter(reference.id);
 
@@ -74,11 +76,11 @@ export function ReferenceEntry({
 
   const handleUnlink = () => {
     if (source && resolvedResourceUri) {
-      eventBus.get('bind:update-body').next({
-        annotationId: annotationId(reference.id),
-        resourceId: resourceId(source),
-        operations: [{ op: 'remove', item: { type: 'SpecificResource', source: resolvedResourceUri } }],
-      });
+      semiont.bind.body(
+        resourceId(source),
+        annotationId(reference.id),
+        [{ op: 'remove', item: { type: 'SpecificResource', source: resolvedResourceUri } }],
+      ).catch(() => { /* error handled by events-stream */ });
     }
   };