@semiont/react-ui 0.2.33-build.77 → 0.2.33-build.79

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

@@ -0,0 +1,316 @@
+/**
+ * Event Formatting Utilities
+ *
+ * Display and formatting utilities for resource events.
+ * No React dependencies - safe to use in any JavaScript environment.
+ */
+
+import type { StoredEvent, ResourceEventType } from '@semiont/core';
+import type { components } from '@semiont/api-client';
+import { getExactText, getTargetSelector } from '@semiont/api-client';
+import { ANNOTATORS } from '../../lib/annotation-registry';
+
+type Annotation = components['schemas']['Annotation'];
+type TranslateFn = (key: string, params?: Record<string, string | number>) => string;
+
+// =============================================================================
+// EVENT FORMATTING AND DISPLAY
+// =============================================================================
+
+/**
+ * Format event type for display with i18n support
+ */
+export function formatEventType(type: ResourceEventType, t: TranslateFn, payload?: any): string {
+  switch (type) {
+    case 'resource.created':
+      return t('resourceCreated');
+    case 'resource.cloned':
+      return t('resourceCloned');
+    case 'resource.archived':
+      return t('resourceArchived');
+    case 'resource.unarchived':
+      return t('resourceUnarchived');
+
+    case 'annotation.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': {
+      return t('annotationRemoved');
+    }
+    case 'annotation.body.updated': {
+      return t('annotationBodyUpdated');
+    }
+
+    case 'entitytag.added':
+      return t('entitytagAdded');
+    case 'entitytag.removed':
+      return t('entitytagRemoved');
+
+    case 'job.completed':
+    case 'job.started':
+    case 'job.progress':
+    case 'job.failed':
+      return t('jobEvent');
+
+    case 'representation.added':
+    case 'representation.removed':
+      return t('representationEvent');
+
+    default:
+      return type;
+  }
+}
+
+/**
+ * Get emoji for event type
+ * For unified annotation events, pass the payload to determine motivation
+ */
+export function getEventEmoji(type: ResourceEventType, payload?: any): string {
+  switch (type) {
+    case 'resource.created':
+    case 'resource.cloned':
+    case 'resource.archived':
+    case 'resource.unarchived':
+      return '📄';
+
+    case 'annotation.added': {
+      const motivation = payload?.annotation?.motivation;
+      // Use annotation registry as single source of truth for emojis
+      if (motivation === 'highlighting') return ANNOTATORS.highlight.iconEmoji || '📝';
+      if (motivation === 'linking') return ANNOTATORS.reference.iconEmoji || '📝';
+      if (motivation === 'assessing') return ANNOTATORS.assessment.iconEmoji || '📝';
+      return '📝';
+    }
+    case 'annotation.removed': {
+      return '🗑️';
+    }
+    case 'annotation.body.updated': {
+      return '✏️';
+    }
+
+    case 'entitytag.added':
+    case 'entitytag.removed':
+      return '🏷️';
+
+    case 'job.completed':
+      return '🔗';  // Link emoji for linked document creation
+    case 'job.started':
+    case 'job.progress':
+      return '⚙️';  // Gear for job processing
+    case 'job.failed':
+      return '❌';  // X mark for failed jobs
+
+    case 'representation.added':
+    case 'representation.removed':
+      return '📄';
+
+    default:
+      return '📝';
+  }
+}
+
+/**
+ * Format timestamp as relative time with i18n support
+ */
+export function formatRelativeTime(timestamp: string, t: TranslateFn): string {
+  const date = new Date(timestamp);
+  const now = new Date();
+  const diffMs = now.getTime() - date.getTime();
+  const diffMins = Math.floor(diffMs / 60000);
+  const diffHours = Math.floor(diffMs / 3600000);
+  const diffDays = Math.floor(diffMs / 86400000);
+
+  if (diffMins < 1) return t('justNow');
+  if (diffMins < 60) return t('minutesAgo', { count: diffMins });
+  if (diffHours < 24) return t('hoursAgo', { count: diffHours });
+  if (diffDays < 7) return t('daysAgo', { count: diffDays });
+
+  return date.toLocaleDateString();
+}
+
+/**
+ * Helper to truncate text for display
+ */
+function truncateText(text: string, maxLength = 50): string {
+  const trimmed = text.trim();
+  return trimmed.length > maxLength ? trimmed.substring(0, maxLength) + '...' : trimmed;
+}
+
+/**
+ * Get display content from event payload - complete implementation
+ */
+export function getEventDisplayContent(
+  event: StoredEvent,
+  annotations: Annotation[], // Unified annotations array (all types)
+  allEvents: StoredEvent[]
+): { exact: string; isQuoted: boolean; isTag: boolean } | null {
+  const eventData = event.event;
+
+  // Use type discriminators for proper narrowing
+  switch (eventData.type) {
+    case 'resource.created':
+    case 'resource.cloned': {
+      return { exact: eventData.payload.name, isQuoted: false, isTag: false };
+    }
+
+    // Unified annotation events
+    case 'annotation.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 =>
+        a.id.endsWith(`/annotations/${eventData.payload.annotationId}`)
+      );
+
+      if (annotation?.target) {
+        try {
+          const targetSelector = getTargetSelector(annotation.target);
+          const exact = getExactText(targetSelector);
+          if (exact) {
+            return { exact: truncateText(exact), isQuoted: true, isTag: false };
+          }
+        } catch {
+          // If selector parsing fails, continue to return null
+        }
+      }
+      return null;
+    }
+
+    case 'annotation.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.annotation.id.endsWith(`/annotations/${eventData.payload.annotationId}`)
+      );
+      if (addedEvent && addedEvent.event.type === 'annotation.added') {
+        try {
+          const target = addedEvent.event.payload.annotation.target;
+          if (typeof target !== 'string' && target.selector) {
+            const exact = getExactText(target.selector);
+            if (exact) {
+              return { exact: truncateText(exact), isQuoted: true, isTag: false };
+            }
+          }
+        } catch {
+          // If selector parsing fails, return null
+        }
+      }
+      return null;
+    }
+
+    case 'annotation.added': {
+      // New unified event structure - annotation is in payload
+      try {
+        const target = eventData.payload.annotation.target;
+        if (typeof target !== 'string' && target.selector) {
+          const exact = getExactText(target.selector);
+          if (exact) {
+            return { exact: truncateText(exact), isQuoted: true, isTag: false };
+          }
+        }
+      } catch {
+        // If selector parsing fails, return null
+      }
+      return null;
+    }
+
+    case 'entitytag.added':
+    case 'entitytag.removed': {
+      return { exact: eventData.payload.entityType, isQuoted: false, isTag: true };
+    }
+
+    case 'job.completed': {
+      // Find the annotation that was used to generate the resource
+      if (eventData.payload.annotationUri) {
+        const annotation = annotations.find(a =>
+          a.id === eventData.payload.annotationUri
+        );
+
+        if (annotation?.target) {
+          try {
+            const targetSelector = getTargetSelector(annotation.target);
+            const exact = getExactText(targetSelector);
+            if (exact) {
+              return { exact: truncateText(exact), isQuoted: true, isTag: false };
+            }
+          } catch {
+            // If selector parsing fails, continue to return null
+          }
+        }
+      }
+      return null;
+    }
+
+    case 'job.started':
+    case 'job.progress':
+    case 'job.failed':
+    case 'representation.added':
+    case 'representation.removed':
+      return null;
+
+    default:
+      return null;
+  }
+}
+
+/**
+ * Get entity types from event payload
+ */
+export function getEventEntityTypes(event: StoredEvent): string[] {
+  const eventData = event.event;
+
+  if (eventData.type === 'annotation.added') {
+    const motivation = eventData.payload.annotation.motivation;
+    const body = eventData.payload.annotation.body;
+    if (motivation === 'linking' && body && 'entityTypes' in body) {
+      return (body as any).entityTypes ?? [];
+    }
+  }
+
+  return [];
+}
+
+/**
+ * Resource creation details
+ */
+export interface ResourceCreationDetails {
+  type: 'created' | 'cloned';
+  method: string;
+  userId?: string;
+  sourceDocId?: string; // For cloned resources
+  parentResourceId?: string;
+  metadata?: Record<string, any>;
+}
+
+/**
+ * Get resource creation details from event
+ */
+export function getResourceCreationDetails(event: StoredEvent): ResourceCreationDetails | null {
+  const eventData = event.event;
+
+  if (eventData.type === 'resource.created') {
+    return {
+      type: 'created',
+      method: eventData.payload.creationMethod || 'unknown',
+      userId: eventData.userId,
+      metadata: undefined,
+    };
+  }
+
+  if (eventData.type === 'resource.cloned') {
+    return {
+      type: 'cloned',
+      method: eventData.payload.creationMethod || 'clone',
+      userId: eventData.userId,
+      sourceDocId: eventData.payload.parentResourceId,
+      parentResourceId: eventData.payload.parentResourceId,
+      metadata: undefined,
+    };
+  }
+
+  return null;
+}

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

@@ -1,7 +1,8 @@
 'use client';
 
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { useTranslations } from '../../../contexts/TranslationContext';
+import { useMakeMeaningEvents } from '../../../contexts/MakeMeaningEventBusContext';
 import type { components, Selector } from '@semiont/api-client';
 import { AssessmentEntry } from './AssessmentEntry';
 import { useAnnotationPanel } from '../../../hooks/useAnnotationPanel';
@@ -67,6 +68,7 @@ export function AssessmentPanel({
   annotateMode = true,
 }: AssessmentPanelProps) {
   const t = useTranslations('AssessmentPanel');
+  const eventBus = useMakeMeaningEvents();
   const [newAssessmentText, setNewAssessmentText] = useState('');
 
   const { sortedAnnotations, containerRef, handleAnnotationRef } =
@@ -79,6 +81,21 @@ export function AssessmentPanel({
     }
   };
 
+  // Escape key handler for cancelling pending annotation
+  useEffect(() => {
+    if (!pendingAnnotation) return;
+
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        eventBus.emit('ui:annotation:cancel-pending');
+        setNewAssessmentText('');
+      }
+    };
+
+    document.addEventListener('keydown', handleEscape);
+    return () => document.removeEventListener('keydown', handleEscape);
+  }, [pendingAnnotation, eventBus]);
+
   return (
     <div className="semiont-panel">
       <PanelHeader annotationType="assessment" count={annotations.length} title={t('title')} />
@@ -109,14 +126,25 @@ export function AssessmentPanel({
             <span className="semiont-annotation-prompt__char-count">
               {newAssessmentText.length}/2000
             </span>
-            <button
-              onClick={handleSaveNewAssessment}
-              disabled={!newAssessmentText.trim()}
-              className="semiont-button semiont-button--primary"
-              data-type="assessment"
-            >
-              {t('save')}
-            </button>
+            <div className="semiont-annotation-prompt__actions">
+              <button
+                onClick={() => {
+                  eventBus.emit('ui:annotation:cancel-pending');
+                  setNewAssessmentText('');
+                }}
+                className="semiont-button semiont-button--secondary"
+                data-type="assessment"
+              >
+                {t('cancel')}
+              </button>
+              <button
+                onClick={handleSaveNewAssessment}
+                className="semiont-button semiont-button--primary"
+                data-type="assessment"
+              >
+                {t('save')}
+              </button>
+            </div>
           </div>
         </div>
       )}

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

@@ -1,6 +1,5 @@
 'use client';
 
-import { useMemo } from 'react';
 import { useTranslations } from '../../../contexts/TranslationContext';
 import './CollaborationPanel.css';
 
@@ -18,9 +17,10 @@ export function CollaborationPanel({
   const t = useTranslations('CollaborationPanel');
 
   // Format last sync time
-  const lastSyncText = useMemo(() => {
-    if (!lastEventTimestamp) return t('noActivity');
-
+  let lastSyncText: string;
+  if (!lastEventTimestamp) {
+    lastSyncText = t('noActivity');
+  } else {
     const now = new Date();
     const eventTime = new Date(lastEventTimestamp);
     const diffMs = now.getTime() - eventTime.getTime();
@@ -28,15 +28,22 @@ export function CollaborationPanel({
     const diffMins = Math.floor(diffSecs / 60);
     const diffHours = Math.floor(diffMins / 60);
 
-    if (diffSecs < 10) return t('justNow');
-    if (diffSecs < 60) return t('secondsAgo', { count: diffSecs });
-    if (diffMins === 1) return t('minuteAgo');
-    if (diffMins < 60) return t('minutesAgo', { count: diffMins });
-    if (diffHours === 1) return t('hourAgo');
-    if (diffHours < 24) return t('hoursAgo', { count: diffHours });
-
-    return eventTime.toLocaleDateString();
-  }, [lastEventTimestamp, t]);
+    if (diffSecs < 10) {
+      lastSyncText = t('justNow');
+    } else if (diffSecs < 60) {
+      lastSyncText = t('secondsAgo', { count: diffSecs });
+    } else if (diffMins === 1) {
+      lastSyncText = t('minuteAgo');
+    } else if (diffMins < 60) {
+      lastSyncText = t('minutesAgo', { count: diffMins });
+    } else if (diffHours === 1) {
+      lastSyncText = t('hourAgo');
+    } else if (diffHours < 24) {
+      lastSyncText = t('hoursAgo', { count: diffHours });
+    } else {
+      lastSyncText = eventTime.toLocaleDateString();
+    }
+  }
 
   return (
     <div className="semiont-collaboration-panel">

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

@@ -1,7 +1,8 @@
 'use client';
 
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { useTranslations } from '../../../contexts/TranslationContext';
+import { useMakeMeaningEvents } from '../../../contexts/MakeMeaningEventBusContext';
 import type { components, Selector } from '@semiont/api-client';
 import { CommentEntry } from './CommentEntry';
 import { useAnnotationPanel } from '../../../hooks/useAnnotationPanel';
@@ -67,6 +68,7 @@ export function CommentsPanel({
   detectionProgress,
 }: CommentsPanelProps) {
   const t = useTranslations('CommentsPanel');
+  const eventBus = useMakeMeaningEvents();
   const [newCommentText, setNewCommentText] = useState('');
 
   const { sortedAnnotations, containerRef, handleAnnotationRef } =
@@ -79,6 +81,21 @@ export function CommentsPanel({
     }
   };
 
+  // Escape key handler for cancelling pending annotation
+  useEffect(() => {
+    if (!pendingAnnotation) return;
+
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        eventBus.emit('ui:annotation:cancel-pending');
+        setNewCommentText('');
+      }
+    };
+
+    document.addEventListener('keydown', handleEscape);
+    return () => document.removeEventListener('keydown', handleEscape);
+  }, [pendingAnnotation, eventBus]);
+
   return (
     <div className="semiont-panel">
       <PanelHeader annotationType="comment" count={annotations.length} title={t('title')} />
@@ -109,14 +126,26 @@ export function CommentsPanel({
             <span className="semiont-annotation-prompt__char-count">
               {newCommentText.length}/2000
             </span>
-            <button
-              onClick={handleSaveNewComment}
-              disabled={!newCommentText.trim()}
-              className="semiont-button semiont-button--primary"
-              data-type="comment"
-            >
-              {t('save')}
-            </button>
+            <div className="semiont-annotation-prompt__actions">
+              <button
+                onClick={() => {
+                  eventBus.emit('ui:annotation:cancel-pending');
+                  setNewCommentText('');
+                }}
+                className="semiont-button semiont-button--secondary"
+                data-type="comment"
+              >
+                {t('cancel')}
+              </button>
+              <button
+                onClick={handleSaveNewComment}
+                disabled={!newCommentText.trim()}
+                className="semiont-button semiont-button--primary"
+                data-type="comment"
+              >
+                {t('save')}
+              </button>
+            </div>
           </div>
         </div>
       )}

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

@@ -2,13 +2,13 @@
 
 import React, { useState, useRef, useEffect } from 'react';
 import { useTranslations } from '../../../contexts/TranslationContext';
+import { useMakeMeaningEvents } from '../../../contexts/MakeMeaningEventBusContext';
 import type { RouteBuilder, LinkComponentProps } from '../../../contexts/RoutingContext';
 import { DetectionProgressWidget } from '../../DetectionProgressWidget';
 import { ReferenceEntry } from './ReferenceEntry';
 import type { components, paths, Selector } from '@semiont/api-client';
 import { useAnnotationPanel } from '../../../hooks/useAnnotationPanel';
 import { PanelHeader } from './PanelHeader';
-import { supportsDetection } from '../../../lib/resource-utils';
 import './ReferencesPanel.css';
 
 type Annotation = components['schemas']['Annotation'];
@@ -66,7 +66,6 @@ interface Props {
   onGenerateDocument?: (referenceId: string, options: { title: string; prompt?: string }) => void;
   onCreateDocument?: (annotationUri: string, title: string, entityTypes: string[]) => void;
   generatingReferenceId?: string | null;
-  mediaType?: string | undefined;
   referencedBy?: ReferencedBy[];
   referencedByLoading?: boolean;
   pendingAnnotation: PendingAnnotation | null;
@@ -91,13 +90,13 @@ export function ReferencesPanel({
   onGenerateDocument,
   onCreateDocument,
   generatingReferenceId,
-  mediaType,
   referencedBy = [],
   referencedByLoading = false,
   pendingAnnotation,
 }: Props) {
   const t = useTranslations('DetectPanel');
   const tRef = useTranslations('ReferencesPanel');
+  const eventBus = useMakeMeaningEvents();
   const [selectedEntityTypes, setSelectedEntityTypes] = useState<string[]>([]);
   const [lastDetectionLog, setLastDetectionLog] = useState<DetectionLog[] | null>(null);
   const [pendingEntityTypes, setPendingEntityTypes] = useState<string[]>([]);
@@ -119,9 +118,6 @@ export function ReferencesPanel({
   const { sortedAnnotations, containerRef, handleAnnotationRef } =
     useAnnotationPanel(annotations, hoveredAnnotationId);
 
-  // Check if detection is supported for this media type
-  const isTextResource = supportsDetection(mediaType);
-
   // Clear log when starting new detection
   const handleDetect = () => {
     if (!onDetect) return;
@@ -166,6 +162,21 @@ export function ReferencesPanel({
     setPendingEntityTypes([]);
   };
 
+  // Escape key handler for cancelling pending annotation
+  useEffect(() => {
+    if (!pendingAnnotation) return;
+
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        eventBus.emit('ui:annotation:cancel-pending');
+        setPendingEntityTypes([]);
+      }
+    };
+
+    document.addEventListener('keydown', handleEscape);
+    return () => document.removeEventListener('keydown', handleEscape);
+  }, [pendingAnnotation, eventBus]);
+
   return (
     <div className="semiont-panel">
       <PanelHeader annotationType="reference" count={annotations.length} title={tRef('referencesTitle')} />
@@ -205,20 +216,34 @@ export function ReferencesPanel({
             </div>
           )}
 
-          <button
-            onClick={handleCreateReference}
-            className="semiont-button semiont-button--primary"
-            data-type="reference"
-          >
-            🔗 {tRef('createReference')}
-          </button>
+          <div className="semiont-annotation-prompt__footer">
+            <div className="semiont-annotation-prompt__actions">
+              <button
+                onClick={() => {
+                  eventBus.emit('ui:annotation:cancel-pending');
+                  setPendingEntityTypes([]);
+                }}
+                className="semiont-button semiont-button--secondary"
+                data-type="reference"
+              >
+                {tRef('cancel')}
+              </button>
+              <button
+                onClick={handleCreateReference}
+                className="semiont-button semiont-button--primary"
+                data-type="reference"
+              >
+                🔗 {tRef('createReference')}
+              </button>
+            </div>
+          </div>
         </div>
       )}
 
       {/* Scrollable content area */}
       <div ref={containerRef} className="semiont-panel__content">
         {/* Detection Section - only in Annotate mode and for text resources */}
-        {annotateMode && isTextResource && (
+        {annotateMode && onDetect && (
           <div className="semiont-panel__section">
             <button
               onClick={() => setIsDetectExpanded(!isDetectExpanded)}

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

@@ -1,6 +1,5 @@
 'use client';
 
-import { useMemo } from 'react';
 import { useTranslations } from '../../../contexts/TranslationContext';
 import type { components } from '@semiont/api-client';
 import { isBodyResolved } from '@semiont/api-client';
@@ -27,28 +26,19 @@ export function StatisticsPanel({
   const t = useTranslations('StatisticsPanel');
 
   // Count stub vs resolved references
-  const stubCount = useMemo(
-    () => references.filter((r) => !isBodyResolved(r.body)).length,
-    [references]
-  );
-
-  const resolvedCount = useMemo(
-    () => references.filter((r) => isBodyResolved(r.body)).length,
-    [references]
-  );
+  const stubCount = references.filter((r) => !isBodyResolved(r.body)).length;
+  const resolvedCount = references.filter((r) => isBodyResolved(r.body)).length;
 
   // Count entity types from references (at annotation level)
-  const entityTypesList = useMemo(() => {
-    const entityTypeCounts = new Map<string, number>();
-    references.forEach((ref) => {
-      const entityTypes = getEntityTypes(ref);
-      entityTypes.forEach((type: string) => {
-        entityTypeCounts.set(type, (entityTypeCounts.get(type) || 0) + 1);
-      });
+  const entityTypeCounts = new Map<string, number>();
+  references.forEach((ref) => {
+    const entityTypes = getEntityTypes(ref);
+    entityTypes.forEach((type: string) => {
+      entityTypeCounts.set(type, (entityTypeCounts.get(type) || 0) + 1);
     });
+  });
 
-    return Array.from(entityTypeCounts.entries()).sort((a, b) => b[1] - a[1]); // Sort by count descending
-  }, [references]);
+  const entityTypesList = Array.from(entityTypeCounts.entries()).sort((a, b) => b[1] - a[1]); // Sort by count descending
 
   return (
     <div className="semiont-statistics-panel">