@semiont/react-ui 0.4.20 → 0.4.21

package/src/components/resource/__tests__/ResourceViewer.mode-switch.test.tsx

@@ -12,14 +12,11 @@
 
 import { describe, it, expect, vi, beforeEach } from 'vitest';
 import { render, screen, fireEvent, waitFor } from '@testing-library/react';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { BehaviorSubject } from 'rxjs';
 import { ResourceViewer } from '../ResourceViewer';
-import { EventBusProvider } from '../../../contexts/EventBusContext';
-import { CacheProvider } from '../../../contexts/CacheContext';
+import { createTestSemiontWrapper } from '../../../test-utils';
 import { TranslationProvider } from '../../../contexts/TranslationContext';
 import { ResourceAnnotationsProvider } from '../../../contexts/ResourceAnnotationsContext';
-import { ApiClientProvider } from '../../../contexts/ApiClientContext';
-import { AuthTokenProvider } from '../../../contexts/AuthTokenContext';
 import type { components } from '@semiont/core';
 
 type SemiontResource = components['schemas']['ResourceDescriptor'];
@@ -29,6 +26,38 @@ vi.mock('../../../hooks/useObservableBrowse', () => ({
   useObservableExternalNavigation: () => vi.fn(),
 }));
 
+// ResourceViewer (and ResourceAnnotationsContext) now resolve the client via
+// useSemiont(). Mock useSemiont to emit a minimal session carrying a stub
+// client with the methods the subject component touches. The session also
+// exposes `on` and `emit` stubs so useEventSubscription(s) don't explode.
+const stubClient = {
+  browse: { invalidateAnnotationList: vi.fn() },
+  markAnnotation: vi.fn(),
+  on: vi.fn(() => () => {}),
+  emit: vi.fn(),
+  stream: vi.fn(() => ({ subscribe: () => ({ unsubscribe: () => {} }) })),
+};
+const stubSession = {
+  client: stubClient,
+};
+const stubActiveSession$ = new BehaviorSubject<any>(stubSession);
+const stubBrowser = {
+  activeSession$: stubActiveSession$,
+  emit: vi.fn(),
+  on: vi.fn(() => () => {}),
+  stream: vi.fn(() => ({ subscribe: () => ({ unsubscribe: () => {} }) })),
+};
+
+vi.mock('../../../session/SemiontProvider', async () => {
+  const actual = await vi.importActual<typeof import('../../../session/SemiontProvider')>(
+    '../../../session/SemiontProvider'
+  );
+  return {
+    ...actual,
+    useSemiont: () => stubBrowser,
+  };
+});
+
 const mockResource: SemiontResource & { content: string } = {
   '@context': 'https://www.w3.org/ns/activitystreams',
   '@id': 'test-123',
@@ -53,19 +82,6 @@ const mockAnnotations = {
   tags: [],
 };
 
-const mockCacheManager = {
-  invalidateAnnotations: vi.fn(),
-  invalidate: vi.fn(),
-  invalidateEvents: vi.fn(),
-};
-
-const queryClient = new QueryClient({
-  defaultOptions: {
-    queries: { retry: false },
-    mutations: { retry: false },
-  },
-});
-
 const mockTranslationManager = {
   t: (namespace: string, key: string, params?: Record<string, any>) => {
     return `${namespace}.${key}`;
@@ -73,21 +89,14 @@ const mockTranslationManager = {
 };
 
 function TestWrapper({ children }: { children: React.ReactNode }) {
+  const { SemiontWrapper } = createTestSemiontWrapper();
   return (
     <TranslationProvider translationManager={mockTranslationManager}>
-      <EventBusProvider>
-        <AuthTokenProvider token="test-token">
-          <ApiClientProvider baseUrl="http://localhost:4000">
-            <QueryClientProvider client={queryClient}>
-              <ResourceAnnotationsProvider>
-                <CacheProvider cacheManager={mockCacheManager}>
-                  {children}
-                </CacheProvider>
-              </ResourceAnnotationsProvider>
-            </QueryClientProvider>
-          </ApiClientProvider>
-        </AuthTokenProvider>
-      </EventBusProvider>
+      <SemiontWrapper>
+        <ResourceAnnotationsProvider>
+          {children}
+        </ResourceAnnotationsProvider>
+      </SemiontWrapper>
     </TranslationProvider>
   );
 }

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

@@ -3,8 +3,9 @@
 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';
+import { useSemiont } from '../../../session/SemiontProvider';
+import { useObservable } from '../../../hooks/useObservable';
+import { useHoverEmitter } from '../../../hooks/useHoverEmitter';
 
 type Annotation = components['schemas']['Annotation'];
 
@@ -74,7 +75,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 +88,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.emit('browse:click', { annotationId: assessment.id, motivation: assessment.motivation });
       }}
       {...hoverProps}
     >

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

@@ -2,7 +2,8 @@
 
 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';
@@ -13,6 +14,7 @@ import './AssessmentPanel.css';
 
 type Annotation = components['schemas']['Annotation'];
 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.emit('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.emit('mark:cancel-pending', undefined);
         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.emit('mark:cancel-pending', undefined);
                   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>('');
@@ -73,7 +71,7 @@ export function AssistSection({
       'commenting';
 
     // Emit mark:assist-request event with options
-    eventBus.get('mark:assist-request').next({
+    session?.client.emit('mark:assist-request', {
       motivation,
       options: {
         instructions: instructions.trim() || undefined,
@@ -86,11 +84,11 @@ export function AssistSection({
     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.emit('mark:progress-dismiss', undefined);
+  }, [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/api-client';
 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

@@ -4,8 +4,9 @@ import { useState, useEffect, useRef, useImperativeHandle, type Ref } from 'reac
 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';
+import { useSemiont } from '../../../session/SemiontProvider';
+import { useObservable } from '../../../hooks/useObservable';
+import { useHoverEmitter } from '../../../hooks/useHoverEmitter';
 
 type Annotation = components['schemas']['Annotation'];
 
@@ -42,7 +43,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 +87,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.emit('browse:click', { annotationId: comment.id, motivation: comment.motivation });
       }}
       {...hoverProps}
     >

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

@@ -2,7 +2,8 @@
 
 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';
@@ -13,6 +14,7 @@ import './CommentsPanel.css';
 
 type Annotation = components['schemas']['Annotation'];
 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.emit('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.emit('mark:cancel-pending', undefined);
         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.emit('mark:cancel-pending', undefined);
                   setNewCommentText('');
                 }}
                 className="semiont-button semiont-button--secondary"

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

@@ -3,8 +3,9 @@
 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';
+import { useSemiont } from '../../../session/SemiontProvider';
+import { useObservable } from '../../../hooks/useObservable';
+import { useHoverEmitter } from '../../../hooks/useHoverEmitter';
 
 type Annotation = components['schemas']['Annotation'];
 
@@ -38,7 +39,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 +51,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.emit('browse:click', { annotationId: highlight.id, motivation: highlight.motivation });
       }}
       {...hoverProps}
     >

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

@@ -2,7 +2,8 @@
 
 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';
@@ -13,6 +14,7 @@ import './HighlightPanel.css';
 
 type Annotation = components['schemas']['Annotation'];
 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.emit('mark:submit', {
         motivation: 'highlighting',
         selector: pendingAnnotation.selector,
-        body: [],
       });
     }
-  }, [pendingAnnotation]);
+  }, [pendingAnnotation, session]);
 
   return (
     <div className="semiont-panel">

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

@@ -8,10 +8,10 @@ import { annotationId, resourceId } from '@semiont/core';
 import { getAnnotationExactText, isBodyResolved, getBodySource, getFragmentSelector, getSvgSelector, getTargetSelector } from '@semiont/api-client';
 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';
+import { useHoverEmitter } from '../../../hooks/useHoverEmitter';
 
 type Annotation = components['schemas']['Annotation'];
 
@@ -41,8 +41,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,7 +75,7 @@ export function ReferenceEntry({
     : '';
 
   const handleUnlink = () => {
-    if (source && resolvedResourceUri) {
+    if (source && resolvedResourceUri && semiont) {
       semiont.bind.body(
         resourceId(source),
         annotationId(reference.id),
@@ -85,7 +85,7 @@ export function ReferenceEntry({
   };
 
   const handleInitiateWizard = () => {
-    eventBus.get('bind:initiate').next({
+    session?.client.emit('bind:initiate', {
       annotationId: annotationId(reference.id),
       resourceId: resourceId(source),
       defaultTitle: selectedText,
@@ -112,7 +112,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.emit('browse:click', { annotationId: reference.id, motivation: reference.motivation });
       }}
       {...hoverProps}
     >