@semiont/react-ui 0.2.34-build.91 → 0.2.34-build.92

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

@@ -5,12 +5,13 @@ import { useTranslations } from '../../../contexts/TranslationContext';
 import { useEventBus } from '../../../contexts/EventBusContext';
 import { useEventSubscriptions } from '../../../contexts/useEventSubscription';
 import type { RouteBuilder, LinkComponentProps } from '../../../contexts/RoutingContext';
-import { DetectionProgressWidget } from '../../DetectionProgressWidget';
+import { AnnotateReferencesProgressWidget } from '../../AnnotateReferencesProgressWidget';
 import { ReferenceEntry } from './ReferenceEntry';
 import type { components, paths, Selector } from '@semiont/core';
 import { getTextPositionSelector, getTargetSelector } from '@semiont/api-client';
 import { PanelHeader } from './PanelHeader';
 import './ReferencesPanel.css';
+import type { AnnotationProgress } from '@semiont/core';
 
 type Annotation = components['schemas']['Annotation'];
 type Motivation = components['schemas']['Motivation'];
@@ -40,16 +41,11 @@ function getSelectorDisplayText(selector: Selector | Selector[]): string | null
   return null;
 }
 
-interface DetectionLog {
-  entityType: string;
-  foundCount: number;
-}
-
 interface Props {
   // Generic panel props
   annotations?: Annotation[];
-  isDetecting: boolean;
-  detectionProgress: any; // TODO: type this properly
+  isAssisting: boolean;
+  progress: AnnotationProgress | null;
   annotateMode?: boolean;
   Link: React.ComponentType<LinkComponentProps>;
   routes: RouteBuilder;
@@ -66,17 +62,17 @@ interface Props {
 }
 
 /**
- * Panel for managing reference annotations with entity type detection
+ * Panel for managing reference annotations with entity type annotation
  *
- * @emits detection:start - Start reference detection. Payload: { motivation: 'linking', options: { entityTypes: string[], includeDescriptiveReferences: boolean } }
- * @emits annotation:create - Create new reference annotation. Payload: { motivation: 'linking', selector: Selector | Selector[], body: Body[] }
- * @emits annotation:cancel-pending - Cancel pending reference annotation. Payload: undefined
- * @subscribes annotation:click - Annotation clicked. Payload: { annotationId: string }
+ * @emits annotate:detect-request - Start reference annotation. Payload: { motivation: 'linking', options: { entityTypes: string[], includeDescriptiveReferences: boolean } }
+ * @emits annotate:create - Create new reference annotation. Payload: { motivation: 'linking', selector: Selector | Selector[], body: Body[] }
+ * @emits annotate:cancel-pending - Cancel pending reference annotation. Payload: undefined
+ * @subscribes attend:click - Annotation clicked. Payload: { annotationId: string }
  */
 export function ReferencesPanel({
   annotations = [],
-  isDetecting,
-  detectionProgress,
+  isAssisting,
+  progress,
   annotateMode = true,
   Link,
   routes,
@@ -89,28 +85,27 @@ export function ReferencesPanel({
   onScrollCompleted,
   hoveredAnnotationId,
 }: Props) {
-  const t = useTranslations('DetectPanel');
-  const tRef = useTranslations('ReferencesPanel');
+  const t = useTranslations('ReferencesPanel');
   const eventBus = useEventBus();
   const [selectedEntityTypes, setSelectedEntityTypes] = useState<string[]>([]);
-  const [lastDetectionLog, setLastDetectionLog] = useState<DetectionLog[] | null>(null);
+  const [lastAnnotationLog, setLastDetectionLog] = useState<Array<{ entityType: string; foundCount: number }> | null>(null);
   const [pendingEntityTypes, setPendingEntityTypes] = useState<string[]>([]);
   const [includeDescriptiveReferences, setIncludeDescriptiveReferences] = useState(false);
   const [focusedAnnotationId, setFocusedAnnotationId] = useState<string | null>(null);
   const containerRef = useRef<HTMLDivElement>(null);
 
   // Collapsible detection section state - load from localStorage, default expanded
-  const [isDetectExpanded, setIsDetectExpanded] = useState(() => {
+  const [isAssistExpanded, setIsDetectExpanded] = useState(() => {
     if (typeof window === 'undefined') return true;
-    const stored = localStorage.getItem('detect-section-expanded-reference');
+    const stored = localStorage.getItem('assist-section-expanded-reference');
     return stored ? stored === 'true' : true;
   });
 
   // Persist detection section expanded state to localStorage
   useEffect(() => {
     if (typeof window === 'undefined') return;
-    localStorage.setItem('detect-section-expanded-reference', String(isDetectExpanded));
-  }, [isDetectExpanded]);
+    localStorage.setItem('assist-section-expanded-reference', String(isAssistExpanded));
+  }, [isAssistExpanded]);
 
   // Direct ref management - replace useAnnotationPanel hook
   const entryRefs = useRef<Map<string, HTMLDivElement>>(new Map());
@@ -201,13 +196,13 @@ export function ReferencesPanel({
   }, []);
 
   useEventSubscriptions({
-    'annotation:click': handleAnnotationClick,
+    'attend:click': handleAnnotationClick,
   });
 
-  // Clear log when starting new detection
-  const handleDetect = () => {
+  // Clear log when starting new annotation
+  const handleAssist = () => {
     setLastDetectionLog(null);
-    eventBus.get('detection:start').next({
+    eventBus.get('annotate:assist-request').next({
       motivation: 'linking',
       options: {
         entityTypes: selectedEntityTypes,
@@ -221,23 +216,23 @@ export function ReferencesPanel({
   const hasSavedLogRef = useRef(false);
 
   // Save detection log when detection completes
-  // Only depends on isDetecting boolean to avoid infinite loops from array reference changes
-  // Trade-off: If completedEntityTypes changes while isDetecting stays false, we won't update
-  // This is acceptable because in practice, completedEntityTypes only changes when detection finishes
+  // Only depends on isAssisting boolean to avoid infinite loops from array reference changes
+  // Trade-off: If completedEntityTypes changes while isAssisting stays false, we won't update
+  // This is acceptable because in practice, completedEntityTypes only changes when annotation finishes
   useEffect(() => {
-    // When detection starts, reset the flag
-    if (isDetecting) {
+    // When annotation starts, reset the flag
+    if (isAssisting) {
       hasSavedLogRef.current = false;
       return;
     }
 
-    // When detection is complete and we haven't saved yet, save the log
-    if (!isDetecting && !hasSavedLogRef.current && detectionProgress?.completedEntityTypes) {
+    // When annotation is complete and we haven't saved yet, save the log
+    if (!isAssisting && !hasSavedLogRef.current && progress?.completedEntityTypes) {
       hasSavedLogRef.current = true;
-      setLastDetectionLog(detectionProgress.completedEntityTypes);
+      setLastDetectionLog(progress.completedEntityTypes);
       setSelectedEntityTypes([]);
     }
-  }, [isDetecting, detectionProgress?.completedEntityTypes]); // Both dependencies needed to detect completion
+  }, [isAssisting, progress?.completedEntityTypes]); // Both dependencies needed to annotation completion
 
   const togglePendingEntityType = (type: string) => {
     setPendingEntityTypes(prev =>
@@ -250,7 +245,7 @@ export function ReferencesPanel({
   const handleCreateReference = () => {
     if (pendingAnnotation) {
       const entityType = pendingEntityTypes.join(',') || undefined;
-      eventBus.get('annotation:create').next({
+      eventBus.get('annotate:create').next({
         motivation: 'linking',
         selector: pendingAnnotation.selector,
         body: entityType ? [{ type: 'TextualBody', value: entityType, purpose: 'tagging' }] : [],
@@ -265,7 +260,7 @@ export function ReferencesPanel({
 
     const handleEscape = (e: KeyboardEvent) => {
       if (e.key === 'Escape') {
-        eventBus.get('annotation:cancel-pending').next(undefined);
+        eventBus.get('annotate:cancel-pending').next(undefined);
         setPendingEntityTypes([]);
       }
     };
@@ -276,7 +271,7 @@ export function ReferencesPanel({
 
   return (
     <div className="semiont-panel">
-      <PanelHeader annotationType="reference" count={annotations.length} title={tRef('referencesTitle')} />
+      <PanelHeader annotationType="reference" count={annotations.length} title={t('title')} />
 
       {/* New reference creation - shown when there's a pending annotation with linking motivation */}
       {pendingAnnotation && pendingAnnotation.motivation === 'linking' && (
@@ -288,7 +283,7 @@ export function ReferencesPanel({
                 return `"${displayText.substring(0, 100)}${displayText.length > 100 ? '...' : ''}"`;
               }
               // Generic labels for PDF/image annotations without text
-              return tRef('fragmentSelected');
+              return t('fragmentSelected');
             })()}
           </div>
 
@@ -296,7 +291,7 @@ export function ReferencesPanel({
           {allEntityTypes.length > 0 && (
             <div className="semiont-form-field">
               <p className="semiont-form-field__label">
-                {tRef('entityTypesOptional')}
+                {t('entityTypesOptional')}
               </p>
               <div className="semiont-tag-selector">
                 {allEntityTypes.map((type: string) => (
@@ -317,20 +312,20 @@ export function ReferencesPanel({
             <div className="semiont-annotation-prompt__actions">
               <button
                 onClick={() => {
-                  eventBus.get('annotation:cancel-pending').next(undefined);
+                  eventBus.get('annotate:cancel-pending').next(undefined);
                   setPendingEntityTypes([]);
                 }}
                 className="semiont-button semiont-button--secondary"
                 data-type="reference"
               >
-                {tRef('cancel')}
+                {t('cancel')}
               </button>
               <button
                 onClick={handleCreateReference}
                 className="semiont-button semiont-button--primary"
                 data-type="reference"
               >
-                🔗 {tRef('createReference')}
+                🔗 {t('createReference')}
               </button>
             </div>
           </div>
@@ -339,32 +334,47 @@ export function ReferencesPanel({
 
       {/* Scrollable content area */}
       <div ref={containerRef} className="semiont-panel__content">
-        {/* Detection Section - only in Annotate mode and for text resources */}
+        {/* Assist Section - only in Annotate mode and for text resources */}
         {annotateMode && (
           <div className="semiont-panel__section">
             <button
-              onClick={() => setIsDetectExpanded(!isDetectExpanded)}
+              onClick={() => setIsDetectExpanded(!isAssistExpanded)}
               className="semiont-panel__section-title semiont-panel__section-title--collapsible"
-              aria-expanded={isDetectExpanded}
+              aria-expanded={isAssistExpanded}
               type="button"
             >
-              <span>{t('title')}</span>
-              <span className="semiont-panel__section-chevron" data-expanded={isDetectExpanded}>
+              <span>{t('annotateReferences')}</span>
+              <span className="semiont-panel__section-chevron" data-expanded={isAssistExpanded}>
                 ›
               </span>
             </button>
-            {isDetectExpanded && (
+            {isAssistExpanded && (
               <>
-                {/* Show annotation UI only when not detecting and no completed log */}
-                {!detectionProgress && !lastDetectionLog && (
-                <div className="semiont-detect-widget" data-type="reference">
+                {/* Show annotation UI when not actively assisting */}
+                {!isAssisting && (
+                <div className="semiont-assist-widget" data-type="reference">
             <>
+              {/* Completed annotation log - shown after completion */}
+              {lastAnnotationLog && lastAnnotationLog.length > 0 && (
+                <div className="semiont-assist-widget__log">
+                  <div className="semiont-assist-widget__log-items">
+                    {lastAnnotationLog.map((item, index) => (
+                      <div key={index} className="semiont-assist-widget__log-item">
+                        <span className="semiont-assist-widget__log-check">✓</span>
+                        <span className="semiont-assist-widget__log-type">{item.entityType}:</span>
+                        <span>{t('found', { count: item.foundCount })}</span>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              )}
+
               {/* Entity Types Selection */}
-              <div className="semiont-detect-widget__entity-types">
-                <p className="semiont-detect-widget__label">
+              <div className="semiont-assist-widget__entity-types">
+                <p className="semiont-assist-widget__label">
                   {t('selectEntityTypes')}
                 </p>
-                <div className="semiont-detect-widget__chips">
+                <div className="semiont-assist-widget__chips">
                   {allEntityTypes.length > 0 ? (
                     allEntityTypes.map((type: string) => (
                       <button
@@ -385,7 +395,7 @@ export function ReferencesPanel({
                       </button>
                     ))
                   ) : (
-                    <p className="semiont-detect-widget__no-types">
+                    <p className="semiont-assist-widget__no-types">
                       {t('noEntityTypes')}
                     </p>
                   )}
@@ -394,73 +404,50 @@ export function ReferencesPanel({
 
               {/* Selected Count */}
               {selectedEntityTypes.length > 0 && (
-                <p className="semiont-detect-widget__count">
+                <p className="semiont-assist-widget__count">
                   {t('typesSelected', { count: selectedEntityTypes.length })}
                 </p>
               )}
 
               {/* Include Descriptive References Checkbox */}
-              <div className="semiont-detect-widget__checkbox-group">
-                <label className="semiont-detect-widget__checkbox-label">
+              <div className="semiont-assist-widget__checkbox-group">
+                <label className="semiont-assist-widget__checkbox-label">
                   <input
                     type="checkbox"
                     checked={includeDescriptiveReferences}
                     onChange={(e) => setIncludeDescriptiveReferences(e.target.checked)}
-                    className="semiont-detect-widget__checkbox"
+                    className="semiont-assist-widget__checkbox"
                   />
-                  <span>{tRef('includeDescriptiveReferences')}</span>
+                  <span>{t('includeDescriptiveReferences')}</span>
                 </label>
-                <p className="semiont-detect-widget__checkbox-hint">
-                  {tRef('descriptiveReferencesTooltip')}
+                <p className="semiont-assist-widget__checkbox-hint">
+                  {t('descriptiveReferencesTooltip')}
                 </p>
               </div>
 
-              {/* Start Detection Button */}
+              {/* Start Assist Button */}
               <button
-                onClick={handleDetect}
+                onClick={handleAssist}
                 disabled={selectedEntityTypes.length === 0}
-                title={t('startDetection')}
+                title={t('annotate')}
                 className="semiont-button"
-                data-variant="detect"
+                data-variant="assist"
                 data-type="reference"
               >
                 <span className="semiont-button-icon">✨</span>
-                <span>{t('startDetection')}</span>
+                <span>{t('annotate')}</span>
               </button>
             </>
             </div>
           )}
 
-          {/* Detection Progress - shown when active */}
-          {detectionProgress && (
-            <DetectionProgressWidget
-              progress={detectionProgress}
+          {/* Annotation Progress - shown when active */}
+          {isAssisting && progress && (
+            <AnnotateReferencesProgressWidget
+              progress={progress}
               annotationType="reference"
             />
           )}
-
-          {/* Completed detection log - shown after completion */}
-          {!detectionProgress && lastDetectionLog && lastDetectionLog.length > 0 && (
-            <div className="semiont-detect-widget__log">
-              <div className="semiont-detect-widget__log-items">
-                {lastDetectionLog.map((item, index) => (
-                  <div key={index} className="semiont-detect-widget__log-item">
-                    <span className="semiont-detect-widget__log-check">✓</span>
-                    <span className="semiont-detect-widget__log-type">{item.entityType}:</span>
-                    <span>{t('found', { count: item.foundCount })}</span>
-                  </div>
-                ))}
-              </div>
-              <button
-                onClick={() => setLastDetectionLog(null)}
-                className="semiont-button"
-                data-variant="detect"
-                data-type="reference"
-              >
-                {t('more')}
-              </button>
-            </div>
-          )}
               </>
             )}
           </div>
@@ -470,14 +457,14 @@ export function ReferencesPanel({
         <div>
           <div className="semiont-panel__divider">
             <h3 className="semiont-panel__subtitle">
-              {tRef('outgoingReferences')} ({sortedAnnotations.length})
+              {t('outgoingReferences')} ({sortedAnnotations.length})
             </h3>
           </div>
 
           <div className="semiont-panel__list">
             {sortedAnnotations.length === 0 ? (
               <p className="semiont-panel__empty-message">
-                {tRef('noReferences')}
+                {t('noReferences')}
               </p>
             ) : (
               sortedAnnotations.map((reference) => (
@@ -500,9 +487,9 @@ export function ReferencesPanel({
         <div>
           <div className="semiont-panel__divider">
             <h3 className="semiont-panel__subtitle">
-              {tRef('incomingReferences')} ({referencedBy.length})
+              {t('incomingReferences')} ({referencedBy.length})
               {referencedByLoading && (
-                <span className="semiont-panel__loading-indicator">({tRef('loading')})</span>
+                <span className="semiont-panel__loading-indicator">({t('loading')})</span>
               )}
             </h3>
           </div>
@@ -517,18 +504,18 @@ export function ReferencesPanel({
                   <div key={ref.id} className="semiont-reference-item semiont-reference-item--incoming">
                     <div className="semiont-reference-item__header">
                       <span className="semiont-reference-item__title">
-                        {ref.resourceName || tRef('untitledResource')}
+                        {ref.resourceName || t('untitledResource')}
                       </span>
                       <Link
                         href={routes.resourceDetail(resourceId)}
                         className="semiont-reference-item__link"
-                        title={tRef('open')}
+                        title={t('open')}
                       >
                         🔗
                       </Link>
                     </div>
                     <span className="semiont-reference-item__excerpt">
-                      "{ref.target.selector?.exact || tRef('noText')}"
+                      "{ref.target.selector?.exact || t('noText')}"
                     </span>
                   </div>
                 );
@@ -536,7 +523,7 @@ export function ReferencesPanel({
             </div>
           ) : (
             <p className="semiont-panel__empty-message semiont-panel__empty-message--small">
-              {referencedByLoading ? tRef('loadingEllipsis') : tRef('noIncomingReferences')}
+              {referencedByLoading ? t('loadingEllipsis') : t('noIncomingReferences')}
             </p>
           )}
         </div>

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

@@ -16,7 +16,7 @@ interface Props {
 /**
  * Panel for displaying resource metadata and management actions
  *
- * @emits resource:clone - Clone this resource. Payload: undefined
+ * @emits generate:clone - Clone this resource. Payload: undefined
  * @emits resource:unarchive - Unarchive this resource. Payload: undefined
  * @emits resource:archive - Archive this resource. Payload: undefined
  */
@@ -97,7 +97,7 @@ export function ResourceInfoPanel({
       {/* Clone Action */}
       <div className="semiont-resource-info-panel__action-section">
         <button
-          onClick={() => eventBus.get('resource:clone').next(undefined)}
+          onClick={() => eventBus.get('generate:clone').next(undefined)}
           className="semiont-resource-button semiont-resource-button--secondary"
         >
           🔗 {t('clone')}

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

@@ -37,7 +37,7 @@ export const TagEntry = forwardRef<HTMLDivElement, TagEntryProps>(
     <div
       ref={ref}
       onClick={() => {
-        eventBus.get('annotation:click').next({ annotationId: tag.id, motivation: tag.motivation });
+        eventBus.get('attend:click').next({ annotationId: tag.id, motivation: tag.motivation });
       }}
       {...hoverProps}
       className={`semiont-annotation-entry${isHovered ? ' semiont-annotation-pulse' : ''}`}