@semiont/react-ui 0.4.20 → 0.4.21

package/src/components/__tests__/Toolbar.test.tsx

@@ -66,15 +66,15 @@ describe('Toolbar', () => {
   });
 
   describe('event emission', () => {
-    it('emits browse:panel-toggle with panel name on click', () => {
+    it('emits panel:toggle with panel name on click', () => {
       const handler = vi.fn();
 
-      const { eventBus } = renderWithProviders(
+      const { shellBus } = renderWithProviders(
         <Toolbar context="document" activePanel={null} />,
-        { returnEventBus: true }
+        { returnShellBus: true }
       );
 
-      const subscription = eventBus!.get('browse:panel-toggle').subscribe(handler);
+      const subscription = shellBus!.get('panel:toggle').subscribe(handler);
 
       fireEvent.click(screen.getByLabelText('Toolbar.resourceInfo'));
       expect(handler).toHaveBeenCalledWith({ panel: 'info' });

package/src/components/annotation/AnnotateToolbar.tsx

@@ -2,7 +2,8 @@
 
 import React, { useState, useRef, useEffect } from 'react';
 import { useTranslations } from '../../contexts/TranslationContext';
-import { useEventBus } from '../../contexts/EventBusContext';
+import { useSemiont } from '../../session/SemiontProvider';
+import { useObservable } from '../../hooks/useObservable';
 import { getSupportedShapes } from '../../lib/media-shapes';
 import type { Annotator } from '../../lib/annotation-registry';
 import './annotations.css';
@@ -119,7 +120,7 @@ export function AnnotateToolbar({
   annotators
 }: AnnotateToolbarProps) {
   const t = useTranslations('AnnotateToolbar');
-  const eventBus = useEventBus();
+  const session = useObservable(useSemiont().activeSession$);
 
   // Helper to get emoji from annotators by motivation (with fallback for safety)
   const getMotivationEmoji = (motivation: SelectionMotivation): string => {
@@ -188,9 +189,9 @@ export function AnnotateToolbar({
   const handleSelectionClick = (motivation: SelectionMotivation | null) => {
     // If null is clicked, always deselect. Otherwise toggle.
     if (motivation === null) {
-      eventBus.get('mark:selection-changed').next({ motivation: null });
+      session?.client.emit('mark:selection-changed', { motivation: null });
     } else {
-      eventBus.get('mark:selection-changed').next({
+      session?.client.emit('mark:selection-changed', {
         motivation: selectedMotivation === motivation ? null : motivation
       });
     }
@@ -200,21 +201,21 @@ export function AnnotateToolbar({
   };
 
   const handleClickClick = (action: ClickAction) => {
-    eventBus.get('mark:click-changed').next({ action });
+    session?.client.emit('mark:click-changed', { action });
     // Close dropdown after selection
     setClickPinned(false);
     setClickHovered(false);
   };
 
   const handleShapeClick = (shape: ShapeType) => {
-    eventBus.get('mark:shape-changed').next({ shape });
+    session?.client.emit('mark:shape-changed', { shape });
     // Close dropdown after selection
     setShapePinned(false);
     setShapeHovered(false);
   };
 
   const handleModeToggle = () => {
-    eventBus.get('mark:mode-toggled').next(undefined);
+    session?.client.emit('mark:mode-toggled', undefined);
     setModePinned(false);
     setModeHovered(false);
   };

package/src/components/annotation/__tests__/AnnotateToolbar.test.tsx

@@ -3,9 +3,10 @@ import { render, screen, fireEvent, waitFor, within } from '@testing-library/rea
 import { vi, beforeEach, describe, it, expect } from 'vitest';
 import { AnnotateToolbar, type SelectionMotivation, type ClickAction } from '../AnnotateToolbar';
 import { ANNOTATORS } from '../../../lib/annotation-registry';
-import { EventBusProvider, useEventBus } from '../../../contexts/EventBusContext';
 import { TranslationProvider } from '../../../contexts/TranslationContext';
+import { createTestSemiontWrapper } from '../../../test-utils';
 import type { TranslationManager } from '../../../types/TranslationManager';
+import type { EventBus } from '@semiont/core';
 
 // Mock translations
 const messages: Record<string, Record<string, string>> = {
@@ -43,68 +44,37 @@ interface TrackedEvent {
 
 function createEventTracker() {
   const events: TrackedEvent[] = [];
-
-  function EventTrackingWrapper({ children }: { children: React.ReactNode }) {
-    const eventBus = useEventBus();
-
-    React.useEffect(() => {
-      const handlers: Array<() => void> = [];
-
-      // Track toolbar-related events
-      const trackEvent = (eventName: string) => (payload: any) => {
-        events.push({ event: eventName, payload });
-      };
-
-      const toolbarEvents = [
+  return {
+    events,
+    clear: () => { events.length = 0; },
+    _attach(eventBus: EventBus) {
+      const trackedEvents = [
         'mark:mode-toggled',
         'mark:click-changed',
         'mark:selection-changed',
         'mark:shape-changed',
       ] as const;
-
-      toolbarEvents.forEach(eventName => {
-        const handler = trackEvent(eventName);
-        const subscription = eventBus.get(eventName).subscribe(handler);
-        handlers.push(subscription);
+      trackedEvents.forEach((eventName) => {
+        eventBus.get(eventName).subscribe((payload: any) => {
+          events.push({ event: eventName, payload });
+        });
       });
-
-      return () => {
-        handlers.forEach(sub => sub.unsubscribe());
-      };
-    }, [eventBus]);
-
-    return <>{children}</>;
-  }
-
-  return {
-    EventTrackingWrapper,
-    events,
-    clear: () => {
-      events.length = 0;
     },
   };
 }
 
 const renderWithIntl = (component: React.ReactElement, tracker?: ReturnType<typeof createEventTracker>) => {
-  if (tracker) {
-    return render(
-      <EventBusProvider>
-        <TranslationProvider translationManager={translationManager}>
-          <tracker.EventTrackingWrapper>
-            {component}
-          </tracker.EventTrackingWrapper>
-        </TranslationProvider>
-      </EventBusProvider>
-    );
-  }
-
-  return render(
-    <EventBusProvider>
+  const { SemiontWrapper, eventBus } = createTestSemiontWrapper();
+  if (tracker) tracker._attach(eventBus);
+  const Wrapper = ({ children }: { children: React.ReactNode }) => (
+    <SemiontWrapper>
       <TranslationProvider translationManager={translationManager}>
-        {component}
+        {children}
       </TranslationProvider>
-    </EventBusProvider>
+    </SemiontWrapper>
   );
+  const result = render(component, { wrapper: Wrapper });
+  return { ...result, eventBus };
 };
 
 describe('AnnotateToolbar', () => {
@@ -187,14 +157,10 @@ describe('AnnotateToolbar', () => {
       expect(screen.getByText('Browse')).toBeInTheDocument();
 
       rerender(
-        <EventBusProvider>
-          <TranslationProvider translationManager={translationManager}>
-            <AnnotateToolbar
-              {...defaultProps}
-              annotateMode={true}
-            />
-          </TranslationProvider>
-        </EventBusProvider>
+        <AnnotateToolbar
+          {...defaultProps}
+          annotateMode={true}
+        />
       );
       expect(screen.getByText('Annotate')).toBeInTheDocument();
     });
@@ -292,16 +258,10 @@ describe('AnnotateToolbar', () => {
 
       // Simulate mode change by rerendering with new mode
       rerender(
-        <EventBusProvider>
-          <TranslationProvider translationManager={translationManager}>
-            <tracker.EventTrackingWrapper>
-              <AnnotateToolbar
-                {...defaultProps}
-                annotateMode={true}
-              />
-            </tracker.EventTrackingWrapper>
-          </TranslationProvider>
-        </EventBusProvider>
+        <AnnotateToolbar
+          {...defaultProps}
+          annotateMode={true}
+        />
       );
 
       // After mode change, the collapsed content should show "Annotate"
@@ -399,16 +359,10 @@ describe('AnnotateToolbar', () => {
 
       // Simulate selection
       rerender(
-        <EventBusProvider>
-          <TranslationProvider translationManager={translationManager}>
-            <tracker.EventTrackingWrapper>
-              <AnnotateToolbar
-                {...defaultProps}
-                selectedMotivation="highlighting"
-              />
-            </tracker.EventTrackingWrapper>
-          </TranslationProvider>
-        </EventBusProvider>
+        <AnnotateToolbar
+          {...defaultProps}
+          selectedMotivation="highlighting"
+        />
       );
 
       // Click again to deselect

package/src/components/annotation-popups/__tests__/JsonLdView.test.tsx

@@ -70,7 +70,6 @@ const createMockAnnotation = (overrides?: Partial<Annotation>): Annotation => ({
       end: 10,
     },
   },
-  body: [],
   ...overrides,
 });
 

package/src/components/image-annotation/AnnotationOverlay.tsx

@@ -2,10 +2,9 @@
 
 import { useMemo } from 'react';
 import type { components } from '@semiont/core';
-import { createHoverHandlers } from '../../hooks/useBeckonFlow';
-import { getSvgSelector, isHighlight, isReference, isAssessment, isComment, isTag, isBodyResolved, isResolvedReference } from '@semiont/api-client';
+import { createHoverHandlers, getSvgSelector, isHighlight, isReference, isAssessment, isComment, isTag, isBodyResolved, isResolvedReference } from '@semiont/api-client';
 import { parseSvgSelector } from '@semiont/api-client';
-import type { EventBus } from "@semiont/core"
+import type { SemiontSession } from '@semiont/api-client';
 
 type Annotation = components['schemas']['Annotation'];
 
@@ -15,7 +14,7 @@ interface AnnotationOverlayProps {
   imageHeight: number;
   displayWidth: number;
   displayHeight: number;
-  eventBus?: EventBus;
+  session?: SemiontSession | null | undefined;
   hoveredAnnotationId?: string | null;
   selectedAnnotationId?: string | null;
   hoverDelayMs: number;
@@ -72,7 +71,7 @@ export function AnnotationOverlay({
   imageHeight,
   displayWidth,
   displayHeight,
-  eventBus,
+  session,
   hoveredAnnotationId,
   selectedAnnotationId,
   hoverDelayMs
@@ -81,8 +80,8 @@ export function AnnotationOverlay({
   const scaleY = displayHeight / imageHeight;
 
   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]
   );
 
   return (
@@ -131,7 +130,7 @@ export function AnnotationOverlay({
                   className="semiont-annotation-overlay__shape"
                   data-hovered={isHovered ? 'true' : 'false'}
                   data-selected={isSelected ? 'true' : 'false'}
-                  onClick={() => eventBus?.get('browse:click').next({ annotationId: annotation.id, motivation: annotation.motivation })}
+                  onClick={() => session?.client.emit('browse:click', { annotationId: annotation.id, motivation: annotation.motivation })}
                   onMouseEnter={() => handleMouseEnter(annotation.id)}
                   onMouseLeave={handleMouseLeave}
                 />
@@ -144,7 +143,7 @@ export function AnnotationOverlay({
                     style={{ userSelect: 'none' }}
                     onClick={(e) => {
                       e.stopPropagation();
-                      eventBus?.get('browse:click').next({ annotationId: annotation.id, motivation: annotation.motivation });
+                      session?.client.emit('browse:click', { annotationId: annotation.id, motivation: annotation.motivation });
                     }}
                     onMouseEnter={() => handleMouseEnter(annotation.id)}
                     onMouseLeave={handleMouseLeave}
@@ -178,7 +177,7 @@ export function AnnotationOverlay({
                   className="semiont-annotation-overlay__shape"
                   data-hovered={isHovered ? 'true' : 'false'}
                   data-selected={isSelected ? 'true' : 'false'}
-                  onClick={() => eventBus?.get('browse:click').next({ annotationId: annotation.id, motivation: annotation.motivation })}
+                  onClick={() => session?.client.emit('browse:click', { annotationId: annotation.id, motivation: annotation.motivation })}
                   onMouseEnter={() => handleMouseEnter(annotation.id)}
                   onMouseLeave={handleMouseLeave}
                 />
@@ -191,7 +190,7 @@ export function AnnotationOverlay({
                     style={{ userSelect: 'none' }}
                     onClick={(e) => {
                       e.stopPropagation();
-                      eventBus?.get('browse:click').next({ annotationId: annotation.id, motivation: annotation.motivation });
+                      session?.client.emit('browse:click', { annotationId: annotation.id, motivation: annotation.motivation });
                     }}
                     onMouseEnter={() => handleMouseEnter(annotation.id)}
                     onMouseLeave={handleMouseLeave}
@@ -238,7 +237,7 @@ export function AnnotationOverlay({
                   className="semiont-annotation-overlay__shape"
                   data-hovered={isHovered ? 'true' : 'false'}
                   data-selected={isSelected ? 'true' : 'false'}
-                  onClick={() => eventBus?.get('browse:click').next({ annotationId: annotation.id, motivation: annotation.motivation })}
+                  onClick={() => session?.client.emit('browse:click', { annotationId: annotation.id, motivation: annotation.motivation })}
                   onMouseEnter={() => handleMouseEnter(annotation.id)}
                   onMouseLeave={handleMouseLeave}
                 />
@@ -251,7 +250,7 @@ export function AnnotationOverlay({
                     style={{ userSelect: 'none' }}
                     onClick={(e) => {
                       e.stopPropagation();
-                      eventBus?.get('browse:click').next({ annotationId: annotation.id, motivation: annotation.motivation });
+                      session?.client.emit('browse:click', { annotationId: annotation.id, motivation: annotation.motivation });
                     }}
                     onMouseEnter={() => handleMouseEnter(annotation.id)}
                     onMouseLeave={handleMouseLeave}

package/src/components/image-annotation/SvgDrawingCanvas.tsx

@@ -5,7 +5,7 @@ import type { components } from '@semiont/core';
 import { createRectangleSvg, createCircleSvg, createPolygonSvg, scaleSvgToNative, parseSvgSelector, Point } from '@semiont/api-client';
 import { AnnotationOverlay } from './AnnotationOverlay';
 import type { SelectionMotivation } from '../annotation/AnnotateToolbar';
-import type { EventBus } from "@semiont/core"
+import type { SemiontSession } from '@semiont/api-client';
 import { useHoverDelay } from '../../hooks/useHoverDelay';
 
 type Annotation = components['schemas']['Annotation'];
@@ -40,7 +40,7 @@ interface SvgDrawingCanvasProps {
   existingAnnotations?: Annotation[];
   drawingMode: DrawingMode;
   selectedMotivation?: SelectionMotivation | null;
-  eventBus?: EventBus;
+  session?: SemiontSession | null | undefined;
   hoveredAnnotationId?: string | null;
   selectedAnnotationId?: string | null;
   hoverDelayMs?: number;
@@ -57,7 +57,7 @@ export function SvgDrawingCanvas({
   existingAnnotations = [],
   drawingMode,
   selectedMotivation,
-  eventBus,
+  session,
   hoveredAnnotationId,
   selectedAnnotationId
 }: SvgDrawingCanvasProps) {
@@ -212,7 +212,7 @@ export function SvgDrawingCanvas({
         });
 
         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);
           setStartPoint(null);
           setCurrentPoint(null);
@@ -274,8 +274,8 @@ export function SvgDrawingCanvas({
     );
 
     // Emit annotation:requested event with SvgSelector
-    if (eventBus && selectedMotivation) {
-      eventBus.get('mark:requested').next({
+    if (session && selectedMotivation) {
+      session.client.emit('mark:requested', {
         selector: {
           type: 'SvgSelector',
           value: nativeSvg
@@ -338,7 +338,7 @@ export function SvgDrawingCanvas({
               displayWidth={displayDimensions.width}
               displayHeight={displayDimensions.height}
               hoverDelayMs={hoverDelayMs}
-              {...(eventBus && { eventBus })}
+              {...(session && { session })}
               {...(hoveredAnnotationId !== undefined && { hoveredAnnotationId })}
               {...(selectedAnnotationId !== undefined && { selectedAnnotationId })}
             />

package/src/components/modals/PermissionDeniedModal.tsx

@@ -1,24 +1,24 @@
 'use client';
 
 import { Dialog, DialogPanel, DialogTitle, Transition, TransitionChild } from '@headlessui/react';
-import { useKnowledgeBaseSession } from '../../contexts/KnowledgeBaseSessionContext';
+import { useSemiont } from '../../session/SemiontProvider';
+import { useObservable } from '../../hooks/useObservable';
 
 /**
  * Modal that surfaces when a 403 forbidden error is reported via
  * `notifyPermissionDenied` (called from QueryCache.onError).
  *
- * Reads `permissionDeniedAt` and `permissionDeniedMessage` from
- * KnowledgeBaseSessionContext. The provider clears the flag when the user
- * dismisses the modal.
- *
- * Must be mounted inside KnowledgeBaseSessionProvider.
+ * Reads `permissionDeniedAt$` and `permissionDeniedMessage$` from the
+ * active `FrontendSessionSignals`. The signals instance clears the
+ * flag when the user dismisses the modal. Modal state lives on
+ * signals (not the session itself) so headless sessions
+ * (workers/CLIs) don't carry dead observables.
  */
 export function PermissionDeniedModal() {
-  const {
-    permissionDeniedAt,
-    permissionDeniedMessage,
-    acknowledgePermissionDenied,
-  } = useKnowledgeBaseSession();
+  const signals = useObservable(useSemiont().activeSignals$);
+  const permissionDeniedAt = useObservable(signals?.permissionDeniedAt$) ?? null;
+  const permissionDeniedMessage = useObservable(signals?.permissionDeniedMessage$) ?? null;
+  const acknowledgePermissionDenied = () => signals?.acknowledgePermissionDenied();
   const showModal = permissionDeniedAt !== null;
   const message = permissionDeniedMessage ?? 'You do not have permission to perform this action.';
 

package/src/components/modals/ReferenceWizardModal.tsx

@@ -2,7 +2,10 @@
 
 import { useState, useEffect, useCallback } from 'react';
 import { Dialog, DialogPanel, DialogTitle, Transition, TransitionChild } from '@headlessui/react';
-import type { GatheredContext, EventBus } from '@semiont/core';
+import type { GatheredContext } from '@semiont/core';
+import { useSemiont } from '../../session/SemiontProvider';
+import { useObservable } from '../../hooks/useObservable';
+import { useEventSubscription } from '../../contexts/useEventSubscription';
 import { GatherContextStep } from './GatherContextStep';
 import { ConfigureGenerationStep } from './ConfigureGenerationStep';
 import type { GenerationConfig } from './ConfigureGenerationStep';
@@ -34,8 +37,6 @@ export interface ReferenceWizardModalProps {
   context: GatheredContext | null;
   contextLoading: boolean;
   contextError: Error | null;
-  /** Event bus for emitting downstream events */
-  eventBus: EventBus;
   /** Callbacks */
   onGenerateSubmit: (referenceId: string, config: GenerationConfig) => void;
   onLinkResource: (referenceId: string, targetResourceId: string) => void;
@@ -91,12 +92,12 @@ export function ReferenceWizardModal({
   context,
   contextLoading,
   contextError,
-  eventBus,
   onGenerateSubmit,
   onLinkResource,
   onComposeNavigate,
   translations: t,
 }: ReferenceWizardModalProps) {
+  const session = useObservable(useSemiont().activeSession$);
   const [wizardStep, setWizardStep] = useState<WizardStep>({ step: 'gather' });
   const [isSearching, setIsSearching] = useState(false);
   const [userHint, setUserHint] = useState('');
@@ -110,19 +111,14 @@ export function ReferenceWizardModal({
     }
   }, [isOpen]);
 
-  // Subscribe to search results
-  useEffect(() => {
+  // Subscribe to search results (only react while open and for the current annotation)
+  useEventSubscription('match:search-results', (event) => {
     if (!isOpen) return;
-
-    const subscription = eventBus.get('match:search-results').subscribe((event) => {
-      if (annotationId && event.referenceId === annotationId) {
-        setIsSearching(false);
-        setWizardStep({ step: 'search-results', results: event.response as ScoredResult[] });
-      }
-    });
-
-    return () => subscription.unsubscribe();
-  }, [isOpen, eventBus, annotationId]);
+    if (annotationId && event.referenceId === annotationId) {
+      setIsSearching(false);
+      setWizardStep({ step: 'search-results', results: event.response as ScoredResult[] });
+    }
+  });
 
   const handleBind = useCallback(() => {
     setWizardStep({ step: 'configure-search' });
@@ -147,7 +143,7 @@ export function ReferenceWizardModal({
     if (!annotationId || !context || !resourceId) return;
     setIsSearching(true);
     const contextWithHint = userHint ? { ...context, userHint } : context;
-    eventBus.get('match:search-requested').next({
+    session?.client.emit('match:search-requested', {
       correlationId: crypto.randomUUID(),
       resourceId,
       referenceId: annotationId,
@@ -156,7 +152,7 @@ export function ReferenceWizardModal({
       useSemanticScoring: config.useSemanticScoring,
     });
     // Stay on configure-search until results arrive (subscription above handles transition)
-  }, [annotationId, resourceId, context, eventBus, userHint]);
+  }, [annotationId, resourceId, context, session, userHint]);
 
   const handleGenerateSubmit = useCallback((config: GenerationConfig) => {
     if (!annotationId) return;

package/src/components/modals/ResourceSearchModal.tsx

@@ -1,14 +1,13 @@
 'use client';
 
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import { Dialog, DialogPanel, DialogTitle, Transition, TransitionChild } from '@headlessui/react';
 import { map } from 'rxjs/operators';
 import type { components } from '@semiont/core';
-import { getResourceId, getPrimaryRepresentation } from '@semiont/api-client';
-import { useApiClient } from '../../contexts/ApiClientContext';
+import { getResourceId, getPrimaryRepresentation, createSearchPipeline } from '@semiont/api-client';
+import { useSemiont } from '../../session/SemiontProvider';
 import { useObservable } from '../../hooks/useObservable';
 import { useSearchAnnouncements } from '../../hooks/useSearchAnnouncements';
-import { createSearchPipeline } from '../../lib/search-pipeline';
 
 type ResourceDescriptor = components['schemas']['ResourceDescriptor'];
 
@@ -56,7 +55,12 @@ export function ResourceSearchModal({
   translations = {}
 }: ResourceSearchModalProps) {
   const { announceSearchResults, announceSearching, announceNavigation } = useSearchAnnouncements();
-  const semiont = useApiClient();
+  const semiont = useObservable(useSemiont().activeSession$)?.client;
+  // Pipeline factory captures `semiont` once via useState; if semiont is
+  // still loading at first render the captured value would be undefined.
+  // Route through a ref so the fetch closure reads the latest client.
+  const semiontRef = useRef(semiont);
+  semiontRef.current = semiont;
 
   const t = {
     title: translations.title || 'Search Resources',
@@ -70,7 +74,7 @@ export function ResourceSearchModal({
   const [pipeline] = useState(() =>
     createSearchPipeline<SearchResult>(
       (q) =>
-        semiont.browse.resources({ search: q, limit: SEARCH_LIMIT }).pipe(
+        semiontRef.current!.browse.resources({ search: q, limit: SEARCH_LIMIT }).pipe(
           map((resources) => {
             if (resources === undefined) return undefined;
             return resources

package/src/components/modals/SearchModal.tsx

@@ -1,13 +1,12 @@
 'use client';
 
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import { Dialog, DialogPanel, Transition, TransitionChild } from '@headlessui/react';
 import { map } from 'rxjs/operators';
-import { getResourceId } from '@semiont/api-client';
+import { getResourceId, createSearchPipeline } from '@semiont/api-client';
 import { useSearchAnnouncements } from '../../hooks/useSearchAnnouncements';
-import { useApiClient } from '../../contexts/ApiClientContext';
+import { useSemiont } from '../../session/SemiontProvider';
 import { useObservable } from '../../hooks/useObservable';
-import { createSearchPipeline } from '../../lib/search-pipeline';
 import './SearchModal.css';
 
 const SEARCH_DEBOUNCE_MS = 300;
@@ -45,7 +44,12 @@ export function SearchModal({
   translations = {}
 }: SearchModalProps) {
   const { announceSearchResults, announceSearching } = useSearchAnnouncements();
-  const semiont = useApiClient();
+  const semiont = useObservable(useSemiont().activeSession$)?.client;
+  // Pipeline factory captures `semiont` once via useState; if semiont is
+  // still loading at first render the captured value would be undefined.
+  // Route through a ref so the fetch closure reads the latest client.
+  const semiontRef = useRef(semiont);
+  semiontRef.current = semiont;
   const [selectedIndex, setSelectedIndex] = useState(0);
 
   const t = {
@@ -66,7 +70,7 @@ export function SearchModal({
   const [pipeline] = useState(() =>
     createSearchPipeline<SearchResult>(
       (q) =>
-        semiont.browse.resources({ search: q, limit: SEARCH_LIMIT }).pipe(
+        semiontRef.current!.browse.resources({ search: q, limit: SEARCH_LIMIT }).pipe(
           map((resources) => {
             if (resources === undefined) return undefined;
             return resources

package/src/components/modals/SessionExpiredModal.tsx

@@ -1,24 +1,24 @@
 'use client';
 
 import { Dialog, DialogPanel, DialogTitle, Transition, TransitionChild } from '@headlessui/react';
-import { useKnowledgeBaseSession } from '../../contexts/KnowledgeBaseSessionContext';
+import { useSemiont } from '../../session/SemiontProvider';
+import { useObservable } from '../../hooks/useObservable';
 
 /**
  * Modal that surfaces when the active KB's session expires (a 401 from
- * either the provider's own JWT validation or from any React Query call
+ * either the session's own JWT validation or from any React Query call
  * via the QueryCache.onError handler).
  *
- * Reads `sessionExpiredAt` from KnowledgeBaseSessionContext. When the user
- * dismisses the modal, the provider clears the flag.
- *
- * Must be mounted inside KnowledgeBaseSessionProvider.
+ * Reads `sessionExpiredAt$` from the active `FrontendSessionSignals`.
+ * When the user dismisses the modal, the signals instance clears the
+ * flag. Modal state lives on signals (not the session itself) so
+ * headless sessions (workers/CLIs) don't carry dead observables.
  */
 export function SessionExpiredModal() {
-  const {
-    sessionExpiredAt,
-    sessionExpiredMessage,
-    acknowledgeSessionExpired,
-  } = useKnowledgeBaseSession();
+  const signals = useObservable(useSemiont().activeSignals$);
+  const sessionExpiredAt = useObservable(signals?.sessionExpiredAt$) ?? null;
+  const sessionExpiredMessage = useObservable(signals?.sessionExpiredMessage$) ?? null;
+  const acknowledgeSessionExpired = () => signals?.acknowledgeSessionExpired();
   const showModal = sessionExpiredAt !== null;
 
   const handleSignIn = () => {