@semiont/react-ui 0.4.20 → 0.4.22

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.match.requestSearch({
       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,16 +1,15 @@
 '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 } from '@semiont/core';
+import { createSearchPipeline } from '@semiont/sdk';
+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'];
+import type { ResourceDescriptor } from '@semiont/core';
 
 type SearchResult = {
   id: string;
@@ -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,13 @@
 '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 } from '@semiont/core';
+import { createSearchPipeline } from '@semiont/sdk';
 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 +45,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 +71,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/SearchResultsStep.tsx

@@ -1,11 +1,9 @@
 'use client';
 
-import type { components, GatheredContext } from '@semiont/core';
+import type { GatheredContext, ResourceDescriptor } from '@semiont/core';
 import { ContextSummary } from './ContextSummary';
 import type { ContextSummaryTranslations } from './ContextSummary';
 
-type ResourceDescriptor = components['schemas']['ResourceDescriptor'];
-
 export type ScoredResult = ResourceDescriptor & {
   score?: number;
   matchReason?: string;

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 = () => {

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.accessibility.test.tsx

@@ -15,9 +15,13 @@ vi.mock('../../../hooks/useSearchAnnouncements', () => ({
 }));
 
 // Mock getResourceId
-vi.mock('@semiont/api-client', () => ({
+vi.mock('@semiont/core', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@semiont/core')>();
+  return {
+    ...actual,
   getResourceId: vi.fn((resource: any) => resource?.id)
-}));
+  };
+});
 
 describe.skip('SearchModal Component - Accessibility', () => {
   // TODO: All SearchModal tests skipped due to HeadlessUI Dialog + jsdom memory issues

package/src/components/modals/__tests__/SearchModal.basic.test.tsx

@@ -16,9 +16,13 @@ vi.mock('../../../hooks/useSearchAnnouncements', () => ({
 }));
 
 // Mock getResourceId
-vi.mock('@semiont/api-client', () => ({
+vi.mock('@semiont/core', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@semiont/core')>();
+  return {
+    ...actual,
   getResourceId: vi.fn((resource: any) => resource?.id)
-}));
+  };
+});
 
 describe('SearchModal Component - Basic Rendering', () => {
   const defaultProps = {

package/src/components/modals/__tests__/SearchModal.keyboard.test.tsx

@@ -15,9 +15,13 @@ vi.mock('../../../hooks/useSearchAnnouncements', () => ({
 }));
 
 // Mock getResourceId
-vi.mock('@semiont/api-client', () => ({
+vi.mock('@semiont/core', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@semiont/core')>();
+  return {
+    ...actual,
   getResourceId: vi.fn((resource: any) => resource?.id)
-}));
+  };
+});
 
 describe.skip('SearchModal Component - Keyboard Navigation', () => {
   // TODO: All SearchModal tests skipped due to HeadlessUI Dialog + jsdom memory issues

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__/SearchModal.visual.test.tsx

@@ -15,9 +15,13 @@ vi.mock('../../../hooks/useSearchAnnouncements', () => ({
 }));
 
 // Mock getResourceId
-vi.mock('@semiont/api-client', () => ({
+vi.mock('@semiont/core', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@semiont/core')>();
+  return {
+    ...actual,
   getResourceId: vi.fn((resource: any) => resource?.id)
-}));
+  };
+});
 
 describe.skip('SearchModal Component - Visual States', () => {
   // TODO: All SearchModal tests skipped due to HeadlessUI Dialog + jsdom memory issues

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