@semiont/react-ui 0.4.20 → 0.4.21

package/src/components/modals/__tests__/PermissionDeniedModal.test.tsx

@@ -53,7 +53,7 @@ describe('PermissionDeniedModal', () => {
   describe('initial render', () => {
     it('does not render modal content when permissionDeniedAt is null', () => {
       renderWithProviders(<PermissionDeniedModal />, {
-        knowledgeBaseSession: createMockKnowledgeBaseSession({
+        browser: createMockKnowledgeBaseSession({
           permissionDeniedAt: null,
         }),
       });
@@ -64,7 +64,7 @@ describe('PermissionDeniedModal', () => {
   describe('when permissionDeniedAt is set', () => {
     it('shows modal with default message when no message provided', () => {
       renderWithProviders(<PermissionDeniedModal />, {
-        knowledgeBaseSession: createMockKnowledgeBaseSession({
+        browser: createMockKnowledgeBaseSession({
           permissionDeniedAt: Date.now(),
         }),
       });
@@ -75,7 +75,7 @@ describe('PermissionDeniedModal', () => {
 
     it('shows custom message from permissionDeniedMessage', () => {
       renderWithProviders(<PermissionDeniedModal />, {
-        knowledgeBaseSession: createMockKnowledgeBaseSession({
+        browser: createMockKnowledgeBaseSession({
           permissionDeniedAt: Date.now(),
           permissionDeniedMessage: 'Admin access required for this resource',
         }),
@@ -86,7 +86,7 @@ describe('PermissionDeniedModal', () => {
 
     it('renders all three action buttons', () => {
       renderWithProviders(<PermissionDeniedModal />, {
-        knowledgeBaseSession: createMockKnowledgeBaseSession({
+        browser: createMockKnowledgeBaseSession({
           permissionDeniedAt: Date.now(),
         }),
       });
@@ -101,7 +101,7 @@ describe('PermissionDeniedModal', () => {
     it('acknowledges and calls window.history.back on Go Back', () => {
       const ack = vi.fn();
       renderWithProviders(<PermissionDeniedModal />, {
-        knowledgeBaseSession: createMockKnowledgeBaseSession({
+        browser: createMockKnowledgeBaseSession({
           permissionDeniedAt: Date.now(),
           permissionDeniedMessage: 'denied',
           acknowledgePermissionDenied: ack,
@@ -117,7 +117,7 @@ describe('PermissionDeniedModal', () => {
     it('acknowledges and navigates to / on Go to Home', () => {
       const ack = vi.fn();
       renderWithProviders(<PermissionDeniedModal />, {
-        knowledgeBaseSession: createMockKnowledgeBaseSession({
+        browser: createMockKnowledgeBaseSession({
           permissionDeniedAt: Date.now(),
           permissionDeniedMessage: 'denied',
           acknowledgePermissionDenied: ack,
@@ -134,7 +134,7 @@ describe('PermissionDeniedModal', () => {
       const ack = vi.fn();
       mockLocation.pathname = '/admin/users';
       renderWithProviders(<PermissionDeniedModal />, {
-        knowledgeBaseSession: createMockKnowledgeBaseSession({
+        browser: createMockKnowledgeBaseSession({
           permissionDeniedAt: Date.now(),
           permissionDeniedMessage: 'denied',
           acknowledgePermissionDenied: ack,

package/src/components/modals/__tests__/ResourceSearchModal.test.tsx

@@ -16,21 +16,23 @@ vi.mock('@headlessui/react', () => ({
 }));
 
 // Mock the api-client Observable surface.
-// Note: useApiClient is called on every render. The real ApiClientProvider
-// holds a single instance — the mock must do the same, otherwise useMemo deps
-// invalidate on every render and RxJS pipelines restart from their initial
-// value on each keystroke.
+// The session-based useSemiont path: useObservable(useSemiont().activeSession$)?.client
+// We mock useSemiont to return a stable browser whose activeSession$ emits a
+// session-shaped object that carries the mock client.
 const browseResourcesSubject = new BehaviorSubject<any[] | undefined>(undefined);
 const browseResourcesMock = vi.fn(() => browseResourcesSubject.asObservable());
 const stableMockClient = { browse: { resources: browseResourcesMock } };
+const stableMockSession = { client: stableMockClient };
+const stableActiveSession$ = new BehaviorSubject<any>(stableMockSession);
+const stableMockBrowser = { activeSession$: stableActiveSession$ };
 
-vi.mock('../../../contexts/ApiClientContext', async () => {
-  const actual = await vi.importActual<typeof import('../../../contexts/ApiClientContext')>(
-    '../../../contexts/ApiClientContext'
+vi.mock('../../../session/SemiontProvider', async () => {
+  const actual = await vi.importActual<typeof import('../../../session/SemiontProvider')>(
+    '../../../session/SemiontProvider'
   );
   return {
     ...actual,
-    useApiClient: () => stableMockClient,
+    useSemiont: () => stableMockBrowser,
   };
 });
 

package/src/components/modals/__tests__/SearchModal.search-wiring.test.tsx

@@ -36,19 +36,22 @@ vi.mock('@headlessui/react', () => ({
 const browseResourcesSubject = new BehaviorSubject<any[] | undefined>(undefined);
 const browseResourcesMock = vi.fn(() => browseResourcesSubject.asObservable());
 
-// Stable client reference — useApiClient is called on every render, so a
+// Stable client reference — useSemiont is called on every render, so a
 // fresh object literal would invalidate useMemo deps and restart the RxJS
-// pipeline on every keystroke. The real ApiClientProvider holds a single
-// instance; the mock must do the same.
+// pipeline on every keystroke. The real SemiontBrowser holds a single
+// activeSession$ BehaviorSubject; the mock must do the same.
 const stableMockClient = { browse: { resources: browseResourcesMock } };
+const stableMockSession = { client: stableMockClient };
+const stableActiveSession$ = new BehaviorSubject<any>(stableMockSession);
+const stableMockBrowser = { activeSession$: stableActiveSession$ };
 
-vi.mock('../../../contexts/ApiClientContext', async () => {
-  const actual = await vi.importActual<typeof import('../../../contexts/ApiClientContext')>(
-    '../../../contexts/ApiClientContext'
+vi.mock('../../../session/SemiontProvider', async () => {
+  const actual = await vi.importActual<typeof import('../../../session/SemiontProvider')>(
+    '../../../session/SemiontProvider'
   );
   return {
     ...actual,
-    useApiClient: () => stableMockClient,
+    useSemiont: () => stableMockBrowser,
   };
 });
 

package/src/components/modals/__tests__/SessionExpiredModal.test.tsx

@@ -48,7 +48,7 @@ describe('SessionExpiredModal', () => {
   describe('initial render', () => {
     it('does not render modal content when sessionExpiredAt is null', () => {
       renderWithProviders(<SessionExpiredModal />, {
-        knowledgeBaseSession: createMockKnowledgeBaseSession({
+        browser: createMockKnowledgeBaseSession({
           sessionExpiredAt: null,
         }),
       });
@@ -59,7 +59,7 @@ describe('SessionExpiredModal', () => {
   describe('when sessionExpiredAt is set', () => {
     it('renders the modal with default message', () => {
       renderWithProviders(<SessionExpiredModal />, {
-        knowledgeBaseSession: createMockKnowledgeBaseSession({
+        browser: createMockKnowledgeBaseSession({
           sessionExpiredAt: Date.now(),
         }),
       });
@@ -71,7 +71,7 @@ describe('SessionExpiredModal', () => {
 
     it('renders the custom message from sessionExpiredMessage', () => {
       renderWithProviders(<SessionExpiredModal />, {
-        knowledgeBaseSession: createMockKnowledgeBaseSession({
+        browser: createMockKnowledgeBaseSession({
           sessionExpiredAt: Date.now(),
           sessionExpiredMessage: 'Your token expired at 5pm',
         }),
@@ -85,7 +85,7 @@ describe('SessionExpiredModal', () => {
       const ack = vi.fn();
       mockLocation.pathname = '/know/discover';
       renderWithProviders(<SessionExpiredModal />, {
-        knowledgeBaseSession: createMockKnowledgeBaseSession({
+        browser: createMockKnowledgeBaseSession({
           sessionExpiredAt: Date.now(),
           acknowledgeSessionExpired: ack,
         }),
@@ -100,7 +100,7 @@ describe('SessionExpiredModal', () => {
     it('calls acknowledgeSessionExpired and navigates to / on Go to Home', () => {
       const ack = vi.fn();
       renderWithProviders(<SessionExpiredModal />, {
-        knowledgeBaseSession: createMockKnowledgeBaseSession({
+        browser: createMockKnowledgeBaseSession({
           sessionExpiredAt: Date.now(),
           acknowledgeSessionExpired: ack,
         }),

package/src/components/navigation/CollapsibleResourceNavigation.tsx

@@ -19,7 +19,7 @@ import {
 import { SortableResourceTab } from './SortableResourceTab';
 import { useDragAnnouncements } from '../../hooks/useDragAnnouncements';
 import { useTranslations } from '../../contexts/TranslationContext';
-import { useEventBus } from '../../contexts/EventBusContext';
+import { useSemiont } from '../../session/SemiontProvider';
 import type { CollapsibleResourceNavigationProps } from '../../types/collapsible-navigation';
 import './CollapsibleResourceNavigation.css';
 
@@ -28,9 +28,9 @@ import './CollapsibleResourceNavigation.css';
  * Supports drag and drop for resource reordering when expanded.
  * Platform-agnostic design for use across different React environments.
  *
- * @emits browse:resource-reorder - Resource tab reordered. Payload: { oldIndex: number, newIndex: number }
- * @emits browse:resource-close - Resource tab closed. Payload: { resourceId: string }
- * @emits browse:sidebar-toggle - Toggle sidebar collapsed/expanded state. Payload: undefined
+ * @emits tabs:reorder - Resource tab reordered. Payload: { oldIndex: number, newIndex: number }
+ * @emits tabs:close - Resource tab closed. Payload: { resourceId: string }
+ * @emits shell:sidebar-toggle - Toggle sidebar collapsed/expanded state. Payload: undefined
  */
 export function CollapsibleResourceNavigation({
   fixedItems,
@@ -53,7 +53,7 @@ export function CollapsibleResourceNavigation({
 
   const { announcePickup, announceDrop, announceKeyboardReorder, announceCannotMove } = useDragAnnouncements();
   const t = useTranslations('CollapsibleResourceNavigation');
-  const eventBus = useEventBus();
+  const semiont = useSemiont();
 
   // Use translations from context, with fallback to props for backward compatibility
   const mergedTranslations = {
@@ -110,12 +110,12 @@ export function CollapsibleResourceNavigation({
     }
 
     // Emit event
-    eventBus.get('browse:resource-reorder').next({ oldIndex: currentIndex, newIndex });
+    semiont.emit('tabs:reorder', { oldIndex: currentIndex, newIndex });
 
     // Announce the change
     const resource = resources[currentIndex];
     announceKeyboardReorder(resource.name, direction, newIndex + 1, resources.length);
-  }, [resources]);
+  }, [resources, semiont]);
 
   // Handle resource close
   const handleResourceClose = (resourceId: string, e: React.MouseEvent) => {
@@ -123,7 +123,7 @@ export function CollapsibleResourceNavigation({
     e.stopPropagation();
 
     // Emit event
-    eventBus.get('browse:resource-close').next({ resourceId });
+    semiont.emit('tabs:close', { resourceId });
 
     // If we're closing the currently viewed resource, navigate to first fixed item or trigger callback
     const resourceHref = getResourceHref(resourceId);
@@ -151,7 +151,7 @@ export function CollapsibleResourceNavigation({
       const newIndex = resources.findIndex((resource) => resource.id === over.id);
       if (oldIndex !== -1 && newIndex !== -1) {
         // Emit event
-        eventBus.get('browse:resource-reorder').next({ oldIndex, newIndex });
+        semiont.emit('tabs:reorder', { oldIndex, newIndex });
         const resource = resources[oldIndex];
         announceDrop(resource.name, newIndex + 1, resources.length);
       }
@@ -189,7 +189,7 @@ export function CollapsibleResourceNavigation({
               <span className="semiont-nav-section__header-text">{mergedTranslations.title}</span>
             )}
             <button
-              onClick={() => eventBus.get('browse:sidebar-toggle').next(undefined)}
+              onClick={() => semiont.emit('shell:sidebar-toggle', undefined)}
               className="semiont-nav-section__header-icon"
               title={isCollapsed ? mergedTranslations.expandSidebar : mergedTranslations.collapseSidebar}
               aria-label={isCollapsed ? mergedTranslations.expandSidebar : mergedTranslations.collapseSidebar}

package/src/components/navigation/ObservableLink.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import React, { useCallback, useRef, useEffect } from 'react';
-import { useEventBus } from '../../contexts/EventBusContext';
+import { useSemiont } from '../../session/SemiontProvider';
 
 /**
  * Props for ObservableLink component
@@ -27,7 +27,7 @@ export interface ObservableLinkProps extends React.AnchorHTMLAttributes<HTMLAnch
  * - State coordination before navigation
  * - Logging navigation flows
  *
- * The component emits 'browse:link-clicked' event before allowing
+ * The component emits 'nav:link-clicked' event before allowing
  * the browser to follow the link.
  *
  * @example
@@ -51,7 +51,7 @@ export interface ObservableLinkProps extends React.AnchorHTMLAttributes<HTMLAnch
  * </Link>
  * ```
  *
- * @emits browse:link-clicked - Link clicked by user. Payload: { href: string, label?: string }
+ * @emits nav:link-clicked - Link clicked by user. Payload: { href: string, label?: string }
  */
 export function ObservableLink({
   href,
@@ -60,7 +60,7 @@ export function ObservableLink({
   children,
   ...anchorProps
 }: ObservableLinkProps) {
-  const eventBus = useEventBus();
+  const semiont = useSemiont();
 
   // Store callback in ref to avoid including in dependency arrays
   const onClickRef = useRef(onClick);
@@ -70,14 +70,14 @@ export function ObservableLink({
 
   const handleClick = useCallback((e: React.MouseEvent<HTMLAnchorElement>) => {
     // Emit event for observability
-    eventBus.get('browse:link-clicked').next({
+    semiont.emit('nav:link-clicked', {
       href,
       label
     });
 
     // Call original onClick if provided
     onClickRef.current?.(e);
-  }, [href, label]); // eventBus is global singleton - never in deps
+  }, [href, label, semiont]);
 
   return (
     <a

package/src/components/navigation/SimpleNavigation.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import React, { useState, useRef, useEffect } from 'react';
-import { useEventBus } from '../../contexts/EventBusContext';
+import { useSemiont } from '../../session/SemiontProvider';
 
 export interface SimpleNavigationItem {
   name: string;
@@ -29,7 +29,7 @@ export interface SimpleNavigationProps {
  * Simple navigation component for Admin and Moderation modes.
  * Renders a section header with optional dropdown and static navigation tabs.
  *
- * @emits browse:sidebar-toggle - Toggle sidebar collapsed/expanded state. Payload: undefined
+ * @emits shell:sidebar-toggle - Toggle sidebar collapsed/expanded state. Payload: undefined
  */
 export function SimpleNavigation({
   title,
@@ -47,7 +47,7 @@ export function SimpleNavigation({
 
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
   const dropdownRef = useRef<HTMLDivElement>(null);
-  const eventBus = useEventBus();
+  const semiont = useSemiont();
 
   const toggleDropdown = () => setIsDropdownOpen(!isDropdownOpen);
   const closeDropdown = () => setIsDropdownOpen(false);
@@ -86,7 +86,7 @@ export function SimpleNavigation({
             !isCollapsed && <span className="semiont-nav-section__header-text">{title}</span>
           )}
           <button
-            onClick={() => eventBus.get('browse:sidebar-toggle').next(undefined)}
+            onClick={() => semiont.emit('shell:sidebar-toggle', undefined)}
             className="semiont-nav-section__header-icon"
             title={isCollapsed ? expandSidebarLabel : collapseSidebarLabel}
             aria-label={isCollapsed ? expandSidebarLabel : collapseSidebarLabel}

package/src/components/navigation/__tests__/ObservableLink.test.tsx

@@ -26,17 +26,17 @@ describe('ObservableLink', () => {
     expect(screen.getByText('Click me')).toBeInTheDocument();
   });
 
-  it('emits browse:link-clicked with href and label on click', () => {
+  it('emits nav:link-clicked with href and label on click', () => {
     const handler = vi.fn();
 
-    const { eventBus } = renderWithProviders(
+    const { shellBus } = renderWithProviders(
       <ObservableLink href="/discover" label="Discover">
         Discover Resources
       </ObservableLink>,
-      { returnEventBus: true }
+      { returnShellBus: true }
     );
 
-    const subscription = eventBus!.get('browse:link-clicked').subscribe(handler);
+    const subscription = shellBus!.get('nav:link-clicked').subscribe(handler);
 
     const link = screen.getByRole('link');
     fireEvent.click(link);

package/src/components/navigation/__tests__/SimpleNavigation.test.tsx

@@ -93,15 +93,15 @@ describe('SimpleNavigation', () => {
   });
 
   describe('sidebar toggle', () => {
-    it('emits browse:sidebar-toggle on collapse button click', () => {
+    it('emits shell:sidebar-toggle on collapse button click', () => {
       const handler = vi.fn();
 
-      const { eventBus } = renderWithProviders(
+      const { shellBus } = renderWithProviders(
         <SimpleNavigation {...defaultProps} />,
-        { returnEventBus: true }
+        { returnShellBus: true }
       );
 
-      const subscription = eventBus!.get('browse:sidebar-toggle').subscribe(handler);
+      const subscription = shellBus!.get('shell:sidebar-toggle').subscribe(handler);
 
       const collapseButton = screen.getByLabelText('Collapse sidebar');
       fireEvent.click(collapseButton);

package/src/components/pdf-annotation/PdfAnnotationCanvas.tsx

@@ -1,11 +1,9 @@
 'use client';
 
 import React, { useRef, useState, useCallback, useEffect, useMemo } from 'react';
-import { createHoverHandlers } from '../../hooks/useBeckonFlow';
 import type { components } from '@semiont/core';
-import { getTargetSelector } from '@semiont/api-client';
+import { createHoverHandlers, getTargetSelector, type SemiontSession } from '@semiont/api-client';
 import type { SelectionMotivation } from '../annotation/AnnotateToolbar';
-import type { EventBus } from "@semiont/core"
 import {
   canvasToPdfCoordinates,
   pdfToCanvasCoordinates,
@@ -52,7 +50,7 @@ interface PdfAnnotationCanvasProps {
   existingAnnotations?: Annotation[];
   drawingMode: DrawingMode;
   selectedMotivation?: SelectionMotivation | null;
-  eventBus?: EventBus;
+  session?: SemiontSession | null | undefined;
   hoveredAnnotationId?: string | null;
   selectedAnnotationId?: string | null;
   hoverDelayMs?: number;
@@ -70,7 +68,7 @@ export function PdfAnnotationCanvas({
   existingAnnotations = [],
   drawingMode,
   selectedMotivation,
-  eventBus,
+  session,
   hoveredAnnotationId,
   selectedAnnotationId,
   hoverDelayMs = 150
@@ -235,7 +233,7 @@ export function PdfAnnotationCanvas({
   }, [isDrawing, selection]);
 
   const handleMouseUp = useCallback(() => {
-    if (!isDrawing || !selection || !pageDimensions || !displayDimensions || !eventBus) {
+    if (!isDrawing || !selection || !pageDimensions || !displayDimensions || !session) {
       setIsDrawing(false);
       setSelection(null);
       return;
@@ -280,7 +278,7 @@ export function PdfAnnotationCanvas({
         });
 
         if (clickedAnnotation) {
-          eventBus?.get('browse:click').next({ annotationId: clickedAnnotation.id, motivation: clickedAnnotation.motivation });
+          session?.client.emit('browse:click', { annotationId: clickedAnnotation.id, motivation: clickedAnnotation.motivation });
           setIsDrawing(false);
           setSelection(null);
           return;
@@ -319,7 +317,7 @@ export function PdfAnnotationCanvas({
 
     // Emit annotation:requested event with FragmentSelector
     if (selectedMotivation) {
-      eventBus.get('mark:requested').next({
+      session.client.emit('mark:requested', {
         selector: {
           type: 'FragmentSelector',
           conformsTo: 'http://tools.ietf.org/rfc/rfc3778',
@@ -357,8 +355,8 @@ export function PdfAnnotationCanvas({
 
   // Hover handlers with currentHover guard and dwell delay
   const { handleMouseEnter, handleMouseLeave } = useMemo(
-    () => createHoverHandlers((annotationId) => eventBus?.get('beckon:hover').next({ annotationId }), hoverDelayMs),
-    [eventBus, hoverDelayMs]
+    () => createHoverHandlers((annotationId) => session?.client.emit('beckon:hover', { annotationId }), hoverDelayMs),
+    [session, hoverDelayMs]
   );
 
   // Calculate motivation color
@@ -457,7 +455,7 @@ export function PdfAnnotationCanvas({
                         cursor: 'pointer',
                         opacity: isSelected ? 1 : isHovered ? 0.9 : 0.7
                       }}
-                      onClick={() => eventBus?.get('browse:click').next({ annotationId: ann.id, motivation: ann.motivation })}
+                      onClick={() => session?.client.emit('browse:click', { annotationId: ann.id, motivation: ann.motivation })}
                       onMouseEnter={() => handleMouseEnter(ann.id)}
                       onMouseLeave={handleMouseLeave}
                     />

package/src/components/pdf-annotation/__tests__/PdfAnnotationCanvas.test.tsx

@@ -130,7 +130,6 @@ describe('PdfAnnotationCanvas', () => {
         '@context': 'http://www.w3.org/ns/anno.jsonld',
         type: 'Annotation',
         id: 'ann-1',
-        body: [],
         target: {
           source: mockResourceId,
           selector: {

package/src/components/resource/AnnotateView.tsx

@@ -14,7 +14,8 @@ const PdfAnnotationCanvas = lazy(() => import('../pdf-annotation/PdfAnnotationCa
 
 import { CodeMirrorRenderer } from '../CodeMirrorRenderer';
 import type { EditorView } from '@codemirror/view';
-import { useEventBus } from '../../contexts/EventBusContext';
+import { useSemiont } from '../../session/SemiontProvider';
+import { useObservable } from '../../hooks/useObservable';
 import { useEventSubscriptions } from '../../contexts/useEventSubscription';
 
 // Type augmentation for custom DOM properties
@@ -68,7 +69,7 @@ export function AnnotateView({
 }: Props) {
   const { newAnnotationIds } = useResourceAnnotations();
   const containerRef = useRef<HTMLDivElement>(null);
-  const eventBus = useEventBus();
+  const session = useObservable(useSemiont().activeSession$);
 
   const category = getMimeCategory(mimeType);
 
@@ -175,7 +176,7 @@ export function AnnotateView({
         const selectors = buildTextSelectors(content, text, start, end);
         if (!selectors) return;
 
-        eventBus.get('mark:requested').next({
+        session?.client.emit('mark:requested', {
           selector: selectors,
           motivation: selectedMotivation
         });
@@ -218,7 +219,7 @@ export function AnnotateView({
             showLineNumbers={showLineNumbers}
             hoverDelayMs={hoverDelayMs}
             enableWidgets={enableWidgets}
-            eventBus={eventBus}
+            session={session}
             {...(getTargetResourceName && { getTargetResourceName })}
             {...(generatingReferenceId !== undefined && { generatingReferenceId })}
           />
@@ -250,7 +251,7 @@ export function AnnotateView({
                     existingAnnotations={allAnnotations}
                     drawingMode={selectedMotivation ? selectedShape : null}
                     selectedMotivation={selectedMotivation}
-                    eventBus={eventBus}
+                    session={session}
                     hoveredAnnotationId={hoveredAnnotationId || null}
                     hoverDelayMs={hoverDelayMs}
                   />
@@ -280,7 +281,7 @@ export function AnnotateView({
                 existingAnnotations={allAnnotations}
                 drawingMode={selectedMotivation ? selectedShape : null}
                 selectedMotivation={selectedMotivation}
-                eventBus={eventBus}
+                session={session}
                 hoveredAnnotationId={hoveredAnnotationId || null}
                 hoverDelayMs={hoverDelayMs}
               />

package/src/components/resource/AnnotationHistory.tsx

@@ -3,7 +3,8 @@
 import React, { useEffect, useRef } from 'react';
 import { useTranslations } from '../../contexts/TranslationContext';
 import type { RouteBuilder, LinkComponentProps } from '../../contexts/RoutingContext';
-import { useResources } from '../../lib/api-hooks';
+import { useSemiont } from '../../session/SemiontProvider';
+import { useObservable } from '../../hooks/useObservable';
 import type { ResourceId } from '@semiont/core';
 import { getAnnotationUriFromEvent, type StoredEventLike } from '@semiont/core';
 import { HistoryEvent } from './HistoryEvent';
@@ -19,17 +20,13 @@ interface Props {
 
 export function AnnotationHistory({ rUri, hoveredAnnotationId, onEventHover, onEventClick, Link, routes }: Props) {
   const t = useTranslations('AnnotationHistory');
+  const semiont = useObservable(useSemiont().activeSession$)?.client;
 
-  // API hooks
-  const resources = useResources();
-
-  // Load events using React Query
-  // React Query will automatically refetch when the query is invalidated by the parent
-  const { data: eventsData, isLoading: loading, isError: error } = resources.events.useQuery(rUri);
-
-  // Load annotations to look up text for removed/resolved events (single request)
-  const { data: annotationsData } = resources.annotations.useQuery(rUri);
-  const annotations = annotationsData?.annotations || [];
+  const eventsData = useObservable(semiont?.browse.events(rUri));
+  const annotationsData = useObservable(semiont?.browse.annotations(rUri));
+  const loading = eventsData === undefined;
+  const error = false;
+  const annotations = annotationsData ?? [];
 
   // Refs to track event elements for scrolling
   const eventRefs = useRef<Map<string, HTMLElement>>(new Map());
@@ -37,7 +34,7 @@ export function AnnotationHistory({ rUri, hoveredAnnotationId, onEventHover, onE
 
   // Sort events by oldest first (most recent at bottom)
   // Filter out job events - they're represented by mark:body-updated events instead
-  const events: StoredEventLike[] = !eventsData?.events ? [] : (eventsData.events as StoredEventLike[])
+  const events: StoredEventLike[] = !eventsData ? [] : (eventsData as StoredEventLike[])
     .filter((e) => {
       return e.type !== 'job:started' && e.type !== 'job:progress' && e.type !== 'job:completed';
     })

package/src/components/resource/BrowseView.tsx

@@ -3,9 +3,8 @@
 import { useEffect, useRef, useCallback, useMemo, memo, lazy, Suspense } from 'react';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
-import { getMimeCategory, isPdfMimeType } from '@semiont/api-client';
+import { getMimeCategory, isPdfMimeType, createHoverHandlers } from '@semiont/api-client';
 import { ANNOTATORS } from '../../lib/annotation-registry';
-import { createHoverHandlers } from '../../hooks/useBeckonFlow';
 import { scrollAnnotationIntoView } from '../../lib/scroll-utils';
 import { ImageViewer } from '../viewers';
 import { AnnotateToolbar, type ClickAction } from '../annotation/AnnotateToolbar';
@@ -23,7 +22,8 @@ import {
 const PdfAnnotationCanvas = lazy(() => import('../pdf-annotation/PdfAnnotationCanvas.client').then(mod => ({ default: mod.PdfAnnotationCanvas })));
 
 import { useResourceAnnotations } from '../../contexts/ResourceAnnotationsContext';
-import { useEventBus } from '../../contexts/EventBusContext';
+import { useSemiont } from '../../session/SemiontProvider';
+import { useObservable } from '../../hooks/useObservable';
 import { useEventSubscriptions } from '../../contexts/useEventSubscription';
 
 interface Props {
@@ -78,7 +78,7 @@ export const BrowseView = memo(function BrowseView({
   hoverDelayMs = 150
 }: Props) {
   const { newAnnotationIds } = useResourceAnnotations();
-  const eventBus = useEventBus();
+  const session = useObservable(useSemiont().activeSession$);
   const containerRef = useRef<HTMLDivElement>(null);
 
   const category = getMimeCategory(mimeType);
@@ -119,6 +119,7 @@ export const BrowseView = memo(function BrowseView({
   // Attach click handler, hover handler, and animations after render
   useEffect(() => {
     if (!containerRef.current) return;
+    if (!session) return;
 
     const container = containerRef.current;
 
@@ -134,13 +135,13 @@ export const BrowseView = memo(function BrowseView({
       if (annotationId && annotationType === 'reference') {
         const annotation = allAnnotations.find(a => a.id === annotationId);
         if (annotation) {
-          eventBus.get('browse:click').next({ annotationId, motivation: annotation.motivation });
+          session.client.emit('browse:click', { annotationId, motivation: annotation.motivation });
         }
       }
     };
 
     const { handleMouseEnter, handleMouseLeave, cleanup: cleanupHover } = createHoverHandlers(
-      (annotationId) => eventBus.get('beckon:hover').next({ annotationId }),
+      (annotationId) => session.client.emit('beckon:hover', { annotationId }),
       hoverDelayMs
     );
 
@@ -180,7 +181,7 @@ export const BrowseView = memo(function BrowseView({
       container.removeEventListener('mouseout', handleMouseOut);
       cleanupHover();
     };
-  }, [content, allAnnotations, newAnnotationIds, hoverDelayMs]);
+  }, [content, allAnnotations, newAnnotationIds, hoverDelayMs, session]);
 
   // Helper to scroll annotation into view with pulse effect
   const scrollToAnnotation = useCallback((annotationId: string | null, removePulse = false) => {