@semiont/react-ui 0.4.20 → 0.4.22

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

@@ -1,12 +1,11 @@
 'use client';
 
 import type { Ref } from 'react';
-import type { components } from '@semiont/core';
-import { getAnnotationExactText } from '@semiont/api-client';
-import { useEventBus } from '../../../contexts/EventBusContext';
-import { useHoverEmitter } from '../../../hooks/useBeckonFlow';
-
-type Annotation = components['schemas']['Annotation'];
+import type { Annotation } from '@semiont/core';
+import { getAnnotationExactText } from '@semiont/core';
+import { useSemiont } from '../../../session/SemiontProvider';
+import { useObservable } from '../../../hooks/useObservable';
+import { useHoverEmitter } from '../../../hooks/useHoverEmitter';
 
 // W3C Annotation TextualBody type
 interface TextualBody {
@@ -74,7 +73,7 @@ export function AssessmentEntry({
   isHovered = false,
   ref,
 }: AssessmentEntryProps) {
-  const eventBus = useEventBus();
+  const session = useObservable(useSemiont().activeSession$);
   const hoverProps = useHoverEmitter(assessment.id);
 
   const selectedText = getAnnotationExactText(assessment);
@@ -87,7 +86,7 @@ export function AssessmentEntry({
       data-type="assessment"
       data-focused={isFocused ? 'true' : 'false'}
       onClick={() => {
-        eventBus.get('browse:click').next({ annotationId: assessment.id, motivation: assessment.motivation });
+        session?.client.browse.click(assessment.id, assessment.motivation);
       }}
       {...hoverProps}
     >

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

@@ -2,17 +2,19 @@
 
 import { useState, useEffect, useRef, useCallback, useMemo } from 'react';
 import { useTranslations } from '../../../contexts/TranslationContext';
-import { useEventBus } from '../../../contexts/EventBusContext';
+import { useSemiont } from '../../../session/SemiontProvider';
+import { useObservable } from '../../../hooks/useObservable';
 import { useEventSubscriptions } from '../../../contexts/useEventSubscription';
 import type { components, Selector } from '@semiont/core';
-import { getTextPositionSelector, getTargetSelector } from '@semiont/api-client';
+import { getTextPositionSelector, getTargetSelector } from '@semiont/core';
 import { AssessmentEntry } from './AssessmentEntry';
 import { AssistSection } from './AssistSection';
 import { PanelHeader } from './PanelHeader';
 import './AssessmentPanel.css';
 
-type Annotation = components['schemas']['Annotation'];
+import type { Annotation } from '@semiont/core';
 type Motivation = components['schemas']['Motivation'];
+type JobProgress = components['schemas']['JobProgress'];
 
 // Unified pending annotation type
 interface PendingAnnotation {
@@ -41,11 +43,7 @@ interface AssessmentPanelProps {
   annotations: Annotation[];
   pendingAnnotation: PendingAnnotation | null;
   isAssisting?: boolean;
-  progress?: {
-    status: string;
-    percentage?: number;
-    message?: string;
-  } | null;
+  progress?: JobProgress | null;
   locale?: string;
   annotateMode?: boolean;
   scrollToAnnotationId?: string | null;
@@ -72,7 +70,7 @@ export function AssessmentPanel({
   hoveredAnnotationId,
 }: AssessmentPanelProps) {
   const t = useTranslations('AssessmentPanel');
-  const eventBus = useEventBus();
+  const session = useObservable(useSemiont().activeSession$);
   const [newAssessmentText, setNewAssessmentText] = useState('');
   const [focusedAnnotationId, setFocusedAnnotationId] = useState<string | null>(null);
   const containerRef = useRef<HTMLDivElement>(null);
@@ -139,14 +137,20 @@ export function AssessmentPanel({
 
   const handleSaveNewAssessment = () => {
     if (pendingAnnotation) {
-      const body: components['schemas']['AnnotationBody'][] = newAssessmentText.trim()
-        ? [{ type: 'TextualBody' as const, value: newAssessmentText, purpose: 'assessing' as const }]
-        : [];
+      // Body is optional for assessments. When the user typed text,
+      // emit a single TextualBody (matching the worker's output and
+      // the majority of historical persisted assessments). When they
+      // didn't, omit body entirely — motivation:'assessing' on a
+      // target is a valid empty-content assessment.
+      const trimmed = newAssessmentText.trim();
+      const body: components['schemas']['AnnotationBody'] | undefined = trimmed
+        ? { type: 'TextualBody', value: trimmed, purpose: 'assessing' }
+        : undefined;
 
-      eventBus.get('mark:submit').next({
+      session?.client.mark.submit({
         motivation: 'assessing',
         selector: pendingAnnotation.selector,
-        body,
+        ...(body !== undefined ? { body } : {}),
       });
       setNewAssessmentText('');
     }
@@ -158,14 +162,14 @@ export function AssessmentPanel({
 
     const handleEscape = (e: KeyboardEvent) => {
       if (e.key === 'Escape') {
-        eventBus.get('mark:cancel-pending').next(undefined);
+        session?.client.mark.cancelPending();
         setNewAssessmentText('');
       }
     };
 
     document.addEventListener('keydown', handleEscape);
     return () => document.removeEventListener('keydown', handleEscape);
-  }, [pendingAnnotation]);
+  }, [pendingAnnotation, session]);
 
   // Event handler for annotation clicks (extracted to avoid inline arrow function)
   const handleAnnotationClick = useCallback(({ annotationId }: { annotationId: string }) => {
@@ -211,7 +215,7 @@ export function AssessmentPanel({
             <div className="semiont-annotation-prompt__actions">
               <button
                 onClick={() => {
-                  eventBus.get('mark:cancel-pending').next(undefined);
+                  session?.client.mark.cancelPending();
                   setNewAssessmentText('');
                 }}
                 className="semiont-button semiont-button--secondary"

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

@@ -2,20 +2,18 @@
 
 import { useState, useEffect, useCallback } from 'react';
 import { useTranslations } from '../../../contexts/TranslationContext';
-import { useEventBus } from '../../../contexts/EventBusContext';
-import type { Motivation } from '@semiont/core';
+import { useSemiont } from '../../../session/SemiontProvider';
+import { useObservable } from '../../../hooks/useObservable';
+import type { Motivation, components } from '@semiont/core';
 import './AssistSection.css';
 
+type JobProgress = components['schemas']['JobProgress'];
+
 interface AssistSectionProps {
   annotationType: 'highlight' | 'assessment' | 'comment';
   isAssisting: boolean;
   locale?: string;
-  progress?: {
-    status: string;
-    percentage?: number;
-    message?: string;
-    requestParams?: Array<{ label: string; value: string }>;
-  } | null | undefined;
+  progress?: JobProgress | null | undefined;
 }
 
 // Color schemes are now handled via CSS data attributes
@@ -43,7 +41,7 @@ export function AssistSection({
                      annotationType === 'assessment' ? 'AssessmentPanel' :
                      'CommentsPanel';
   const t = useTranslations(panelName);
-  const eventBus = useEventBus();
+  const session = useObservable(useSemiont().activeSession$);
   const [instructions, setInstructions] = useState('');
   type ToneValue = 'scholarly' | 'explanatory' | 'conversational' | 'technical' | 'analytical' | 'critical' | 'balanced' | 'constructive' | '';
   const [tone, setTone] = useState<ToneValue>('');
@@ -72,25 +70,21 @@ export function AssistSection({
       annotationType === 'assessment' ? 'assessing' :
       'commenting';
 
-    // Emit mark:assist-request event with options
-    eventBus.get('mark:assist-request').next({
-      motivation,
-      options: {
-        instructions: instructions.trim() || undefined,
-        tone: (annotationType === 'comment' || annotationType === 'assessment') && tone ? tone : undefined,
-        density: (annotationType === 'comment' || annotationType === 'assessment' || annotationType === 'highlight') && useDensity ? density : undefined,
-        language: (annotationType === 'comment' || annotationType === 'assessment') ? locale : undefined,
-      },
+    session?.client.mark.requestAssist(motivation, {
+      instructions: instructions.trim() || undefined,
+      tone: (annotationType === 'comment' || annotationType === 'assessment') && tone ? tone : undefined,
+      density: (annotationType === 'comment' || annotationType === 'assessment' || annotationType === 'highlight') && useDensity ? density : undefined,
+      language: (annotationType === 'comment' || annotationType === 'assessment') ? locale : undefined,
     });
 
     setInstructions('');
     setTone('');
     // Don't reset density/useDensity - persist across assists
-  }, [annotationType, instructions, tone, useDensity, density, locale]); // eventBus is stable singleton - never in deps
+  }, [annotationType, instructions, tone, useDensity, density, locale, session]);
 
   const handleDismissProgress = useCallback(() => {
-    eventBus.get('mark:progress-dismiss').next(undefined);
-  }, []); // eventBus is stable singleton - never in deps
+    session?.client.mark.dismissProgress();
+  }, [session]);
 
   return (
     <div className="semiont-panel__section">

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

@@ -1,23 +1,45 @@
 'use client';
 
+import type { ConnectionState } from '@semiont/core';
 import { useTranslations } from '../../../contexts/TranslationContext';
 import './CollaborationPanel.css';
 
 interface Props {
-  isConnected: boolean;
+  /**
+   * Connection state from `client.actor.state$`. See
+   * `packages/api-client/src/view-models/domain/actor-vm.ts`.
+   *
+   * UI mapping:
+   *   `open` | `reconnecting` | `initial` | `connecting`
+   *     → treated as "healthy" (green dot, "Live" label, event count visible).
+   *     `reconnecting` is specifically INCLUDED in healthy because a
+   *     brief reconnect (mount churn, channel-set change, quick blip)
+   *     shouldn't alarm the user. The 100 ms reconnect debounce and
+   *     sub-second fetch retry make `reconnecting` a transient state.
+   *   `degraded` | `closed`
+   *     → treated as "disconnected" (red dot, "Disconnected" label).
+   *     `degraded` is the 3 s threshold at which the state machine
+   *     decides the disconnect is sustained; this is the UI-banner
+   *     trigger the plan was designed around.
+   */
+  state: ConnectionState;
   eventCount: number;
   lastEventTimestamp?: string;
   knowledgeBaseName?: string;
 }
 
 export function CollaborationPanel({
-  isConnected,
+  state,
   eventCount,
   lastEventTimestamp,
   knowledgeBaseName
 }: Props) {
   const t = useTranslations('CollaborationPanel');
 
+  // Healthy = live, or briefly flapping. Only genuinely sustained
+  // disconnects surface as "Disconnected" in the UI.
+  const isHealthy = state === 'open' || state === 'reconnecting' || state === 'initial' || state === 'connecting';
+
   // Format last sync time
   let lastSyncText: string;
   if (!lastEventTimestamp) {
@@ -71,16 +93,16 @@ export function CollaborationPanel({
           <span className="semiont-collaboration-panel__indicator">
             <span
               className="semiont-collaboration-panel__dot"
-              data-connected={isConnected ? 'true' : 'false'}
+              data-connected={isHealthy ? 'true' : 'false'}
             ></span>
             <span
               className="semiont-collaboration-panel__status-text"
-              data-connected={isConnected ? 'true' : 'false'}
+              data-connected={isHealthy ? 'true' : 'false'}
             >
-              {isConnected ? t('live') : t('disconnected')}
+              {isHealthy ? t('live') : t('disconnected')}
             </span>
           </span>
-          {isConnected && eventCount > 0 && (
+          {isHealthy && eventCount > 0 && (
             <span className="semiont-collaboration-panel__event-count">
               ({t('events', { count: eventCount })})
             </span>
@@ -93,7 +115,7 @@ export function CollaborationPanel({
             <span className="semiont-collaboration-panel__label">{t('lastSync')}</span> {lastSyncText}
           </div>
           <div>
-            {isConnected
+            {isHealthy
               ? t('realtimeActive')
               : t('reconnecting')}
           </div>

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

@@ -2,12 +2,11 @@
 
 import { useState, useEffect, useRef, useImperativeHandle, type Ref } from 'react';
 import { useTranslations } from '../../../contexts/TranslationContext';
-import type { components } from '@semiont/core';
-import { getAnnotationExactText, getCommentText } from '@semiont/api-client';
-import { useEventBus } from '../../../contexts/EventBusContext';
-import { useHoverEmitter } from '../../../hooks/useBeckonFlow';
-
-type Annotation = components['schemas']['Annotation'];
+import type { Annotation } from '@semiont/core';
+import { getAnnotationExactText, getCommentText } from '@semiont/core';
+import { useSemiont } from '../../../session/SemiontProvider';
+import { useObservable } from '../../../hooks/useObservable';
+import { useHoverEmitter } from '../../../hooks/useHoverEmitter';
 
 interface CommentEntryProps {
   comment: Annotation;
@@ -42,7 +41,7 @@ export function CommentEntry({
   ref,
 }: CommentEntryProps) {
   const t = useTranslations('CommentsPanel');
-  const eventBus = useEventBus();
+  const session = useObservable(useSemiont().activeSession$);
   const hoverProps = useHoverEmitter(comment.id);
   const [isEditing, setIsEditing] = useState(false);
   const [editText, setEditText] = useState('');
@@ -86,7 +85,7 @@ export function CommentEntry({
       data-type="comment"
       data-focused={isFocused ? 'true' : 'false'}
       onClick={() => {
-        eventBus.get('browse:click').next({ annotationId: comment.id, motivation: comment.motivation });
+        session?.client.browse.click(comment.id, comment.motivation);
       }}
       {...hoverProps}
     >

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

@@ -2,17 +2,19 @@
 
 import { useState, useEffect, useRef, useCallback, useMemo } from 'react';
 import { useTranslations } from '../../../contexts/TranslationContext';
-import { useEventBus } from '../../../contexts/EventBusContext';
+import { useSemiont } from '../../../session/SemiontProvider';
+import { useObservable } from '../../../hooks/useObservable';
 import { useEventSubscriptions } from '../../../contexts/useEventSubscription';
 import type { components, Selector } from '@semiont/core';
-import { getTextPositionSelector, getTargetSelector } from '@semiont/api-client';
+import { getTextPositionSelector, getTargetSelector } from '@semiont/core';
 import { CommentEntry } from './CommentEntry';
 import { AssistSection } from './AssistSection';
 import { PanelHeader } from './PanelHeader';
 import './CommentsPanel.css';
 
-type Annotation = components['schemas']['Annotation'];
+import type { Annotation } from '@semiont/core';
 type Motivation = components['schemas']['Motivation'];
+type JobProgress = components['schemas']['JobProgress'];
 
 // Unified pending annotation type
 interface PendingAnnotation {
@@ -42,11 +44,7 @@ interface CommentsPanelProps {
   pendingAnnotation: PendingAnnotation | null;
   annotateMode?: boolean;
   isAssisting?: boolean;
-  progress?: {
-    status: string;
-    percentage?: number;
-    message?: string;
-  } | null;
+  progress?: JobProgress | null;
   locale?: string;
   scrollToAnnotationId?: string | null;
   onScrollCompleted?: () => void;
@@ -72,7 +70,7 @@ export function CommentsPanel({
   hoveredAnnotationId,
 }: CommentsPanelProps) {
   const t = useTranslations('CommentsPanel');
-  const eventBus = useEventBus();
+  const session = useObservable(useSemiont().activeSession$);
   const [newCommentText, setNewCommentText] = useState('');
   const [focusedAnnotationId, setFocusedAnnotationId] = useState<string | null>(null);
   const containerRef = useRef<HTMLDivElement>(null);
@@ -169,7 +167,7 @@ export function CommentsPanel({
 
   const handleSaveNewComment = () => {
     if (newCommentText.trim() && pendingAnnotation) {
-      eventBus.get('mark:submit').next({
+      session?.client.mark.submit({
         motivation: 'commenting',
         selector: pendingAnnotation.selector,
         body: [{ type: 'TextualBody', value: newCommentText, purpose: 'commenting' }],
@@ -184,14 +182,14 @@ export function CommentsPanel({
 
     const handleEscape = (e: KeyboardEvent) => {
       if (e.key === 'Escape') {
-        eventBus.get('mark:cancel-pending').next(undefined);
+        session?.client.mark.cancelPending();
         setNewCommentText('');
       }
     };
 
     document.addEventListener('keydown', handleEscape);
     return () => document.removeEventListener('keydown', handleEscape);
-  }, [pendingAnnotation]);
+  }, [pendingAnnotation, session]);
 
   return (
     <div className="semiont-panel">
@@ -226,7 +224,7 @@ export function CommentsPanel({
             <div className="semiont-annotation-prompt__actions">
               <button
                 onClick={() => {
-                  eventBus.get('mark:cancel-pending').next(undefined);
+                  session?.client.mark.cancelPending();
                   setNewCommentText('');
                 }}
                 className="semiont-button semiont-button--secondary"

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

@@ -1,12 +1,11 @@
 'use client';
 
 import type { Ref } from 'react';
-import type { components } from '@semiont/core';
-import { getAnnotationExactText } from '@semiont/api-client';
-import { useEventBus } from '../../../contexts/EventBusContext';
-import { useHoverEmitter } from '../../../hooks/useBeckonFlow';
-
-type Annotation = components['schemas']['Annotation'];
+import type { Annotation } from '@semiont/core';
+import { getAnnotationExactText } from '@semiont/core';
+import { useSemiont } from '../../../session/SemiontProvider';
+import { useObservable } from '../../../hooks/useObservable';
+import { useHoverEmitter } from '../../../hooks/useHoverEmitter';
 
 interface HighlightEntryProps {
   highlight: Annotation;
@@ -38,7 +37,7 @@ export function HighlightEntry({
   isHovered = false,
   ref,
 }: HighlightEntryProps) {
-  const eventBus = useEventBus();
+  const session = useObservable(useSemiont().activeSession$);
   const hoverProps = useHoverEmitter(highlight.id);
 
   const selectedText = getAnnotationExactText(highlight);
@@ -50,7 +49,7 @@ export function HighlightEntry({
       data-type="highlight"
       data-focused={isFocused ? 'true' : 'false'}
       onClick={() => {
-        eventBus.get('browse:click').next({ annotationId: highlight.id, motivation: highlight.motivation });
+        session?.client.browse.click(highlight.id, highlight.motivation);
       }}
       {...hoverProps}
     >

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

@@ -2,17 +2,19 @@
 
 import { useEffect, useState, useRef, useCallback, useMemo } from 'react';
 import { useTranslations } from '../../../contexts/TranslationContext';
-import { useEventBus } from '../../../contexts/EventBusContext';
+import { useSemiont } from '../../../session/SemiontProvider';
+import { useObservable } from '../../../hooks/useObservable';
 import { useEventSubscriptions } from '../../../contexts/useEventSubscription';
 import type { components, Selector } from '@semiont/core';
-import { getTextPositionSelector, getTargetSelector } from '@semiont/api-client';
+import { getTextPositionSelector, getTargetSelector } from '@semiont/core';
 import { HighlightEntry } from './HighlightEntry';
 import { AssistSection } from './AssistSection';
 import { PanelHeader } from './PanelHeader';
 import './HighlightPanel.css';
 
-type Annotation = components['schemas']['Annotation'];
+import type { Annotation } from '@semiont/core';
 type Motivation = components['schemas']['Motivation'];
+type JobProgress = components['schemas']['JobProgress'];
 
 // Unified pending annotation type
 interface PendingAnnotation {
@@ -24,11 +26,7 @@ interface HighlightPanelProps {
   annotations: Annotation[];
   pendingAnnotation: PendingAnnotation | null;
   isAssisting?: boolean;
-  progress?: {
-    status: string;
-    percentage?: number;
-    message?: string;
-  } | null;
+  progress?: JobProgress | null;
   annotateMode?: boolean;
   scrollToAnnotationId?: string | null;
   onScrollCompleted?: () => void;
@@ -53,7 +51,7 @@ export function HighlightPanel({
 }: HighlightPanelProps) {
 
   const t = useTranslations('HighlightPanel');
-  const eventBus = useEventBus();
+  const session = useObservable(useSemiont().activeSession$);
   const [focusedAnnotationId, setFocusedAnnotationId] = useState<string | null>(null);
   const containerRef = useRef<HTMLDivElement>(null);
 
@@ -129,16 +127,17 @@ export function HighlightPanel({
   });
 
   // Highlights auto-create: when pendingAnnotation arrives with highlighting motivation,
-  // immediately emit mark:submit event
+  // immediately emit mark:submit event. Highlights carry no body —
+  // motivation:'highlighting' on a target is a complete annotation
+  // per the W3C Web Annotation Model.
   useEffect(() => {
     if (pendingAnnotation && pendingAnnotation.motivation === 'highlighting') {
-      eventBus.get('mark:submit').next({
+      session?.client.mark.submit({
         motivation: 'highlighting',
         selector: pendingAnnotation.selector,
-        body: [],
       });
     }
-  }, [pendingAnnotation]);
+  }, [pendingAnnotation, session]);
 
   return (
     <div className="semiont-panel">

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

@@ -3,17 +3,15 @@
 import type { Ref } from 'react';
 import type { RouteBuilder } from '../../../contexts/RoutingContext';
 import { useTranslations } from '../../../contexts/TranslationContext';
-import type { components } from '@semiont/core';
-import { annotationId, resourceId } from '@semiont/core';
-import { getAnnotationExactText, isBodyResolved, getBodySource, getFragmentSelector, getSvgSelector, getTargetSelector } from '@semiont/api-client';
+import type { Annotation } from '@semiont/core';
+import { resourceId } from '@semiont/core';
+import { getAnnotationExactText, isBodyResolved, getBodySource, getFragmentSelector, getSvgSelector, getTargetSelector } from '@semiont/core';
 import { getEntityTypes } from '@semiont/ontology';
 import { getResourceIcon } from '../../../lib/resource-utils';
-import { useEventBus } from '../../../contexts/EventBusContext';
-import { useApiClient } from '../../../contexts/ApiClientContext';
+import { useSemiont } from '../../../session/SemiontProvider';
+import { useObservable } from '../../../hooks/useObservable';
 import { useObservableExternalNavigation } from '../../../hooks/useObservableBrowse';
-import { useHoverEmitter } from '../../../hooks/useBeckonFlow';
-
-type Annotation = components['schemas']['Annotation'];
+import { useHoverEmitter } from '../../../hooks/useHoverEmitter';
 
 // Extended annotation type with runtime properties added by backend enrichment
 interface EnrichedAnnotation extends Annotation {
@@ -41,8 +39,8 @@ export function ReferenceEntry({
   ref,
 }: ReferenceEntryProps) {
   const t = useTranslations('ReferencesPanel');
-  const eventBus = useEventBus();
-  const semiont = useApiClient();
+  const session = useObservable(useSemiont().activeSession$);
+  const semiont = session?.client;
   const navigate = useObservableExternalNavigation();
   const hoverProps = useHoverEmitter(reference.id);
 
@@ -75,18 +73,18 @@ export function ReferenceEntry({
     : '';
 
   const handleUnlink = () => {
-    if (source && resolvedResourceUri) {
+    if (source && resolvedResourceUri && semiont) {
       semiont.bind.body(
         resourceId(source),
-        annotationId(reference.id),
+        reference.id,
         [{ op: 'remove', item: { type: 'SpecificResource', source: resolvedResourceUri, purpose: 'linking' } }],
       ).catch(() => { /* error handled by events-stream */ });
     }
   };
 
   const handleInitiateWizard = () => {
-    eventBus.get('bind:initiate').next({
-      annotationId: annotationId(reference.id),
+    session?.client.bind.initiate({
+      annotationId: reference.id,
       resourceId: resourceId(source),
       defaultTitle: selectedText,
       entityTypes,
@@ -112,7 +110,7 @@ export function ReferenceEntry({
       data-type="reference"
       data-focused={isFocused ? 'true' : 'false'}
       onClick={() => {
-        eventBus.get('browse:click').next({ annotationId: reference.id, motivation: reference.motivation });
+        session?.client.browse.click(reference.id, reference.motivation);
       }}
       {...hoverProps}
     >