@semiont/react-ui 0.5.11 → 0.5.13

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

@@ -3,12 +3,13 @@
 import type { Ref } from 'react';
 import type { Annotation } from '@semiont/core';
 import { getAnnotationExactText } from '@semiont/core';
-import { useSemiont } from '../../../session/SemiontProvider';
-import { useObservable } from '../../../hooks/useObservable';
+import type { SemiontSession } from '@semiont/sdk';
 import { useHoverEmitter } from '../../../hooks/useHoverEmitter';
 import { renderAgentLabel } from './agent-label';
 
 interface HighlightEntryProps {
+  /** Session for interaction routing (browse.click etc.); the panel threads it. */
+  session: SemiontSession | null;
   highlight: Annotation;
   isFocused: boolean;
   isHovered?: boolean;
@@ -33,13 +34,13 @@ function formatRelativeTime(isoString: string): string {
 }
 
 export function HighlightEntry({
+  session,
   highlight,
   isFocused,
   isHovered = false,
   ref,
 }: HighlightEntryProps) {
-  const session = useObservable(useSemiont().activeSession$);
-  const hoverProps = useHoverEmitter(highlight.id);
+  const hoverProps = useHoverEmitter(session, highlight.id);
 
   const selectedText = getAnnotationExactText(highlight);
 

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

@@ -2,9 +2,8 @@
 
 import { useEffect, useState, useRef, useCallback, useMemo } from 'react';
 import { useTranslations } from '../../../contexts/TranslationContext';
-import { useSemiont } from '../../../session/SemiontProvider';
-import { useObservable } from '../../../hooks/useObservable';
-import { useEventSubscriptions } from '../../../contexts/useEventSubscription';
+import type { SemiontSession } from '@semiont/sdk';
+import { useSessionEventSubscriptions } from '../../../hooks/useSessionEventSubscriptions';
 import type { components, Selector } from '@semiont/core';
 import { getTextPositionSelector, getTargetSelector } from '@semiont/core';
 import { HighlightEntry } from './HighlightEntry';
@@ -23,6 +22,8 @@ interface PendingAnnotation {
 }
 
 interface HighlightPanelProps {
+  /** Session carrying the client and event bus; null renders inert. */
+  session: SemiontSession | null;
   /** The '@id' of the panel's resource — stamped as `source` on mark:submit (multi-viewer routing). */
   resourceId: string;
   annotations: Annotation[];
@@ -44,6 +45,7 @@ interface HighlightPanelProps {
  * @subscribes browse:click - Annotation clicked. Payload: { annotationId: string }
  */
 export function HighlightPanel({
+  session,
   resourceId,
   annotations,
   pendingAnnotation,
@@ -57,7 +59,6 @@ export function HighlightPanel({
 }: HighlightPanelProps) {
 
   const t = useTranslations('HighlightPanel');
-  const session = useObservable(useSemiont().activeSession$);
   const [focusedAnnotationId, setFocusedAnnotationId] = useState<string | null>(null);
   const containerRef = useRef<HTMLDivElement>(null);
 
@@ -128,7 +129,7 @@ export function HighlightPanel({
     setTimeout(() => setFocusedAnnotationId(null), 3000);
   }, []);
 
-  useEventSubscriptions({
+  useSessionEventSubscriptions(session, {
     'browse:click': handleAnnotationClick,
   });
 
@@ -155,6 +156,7 @@ export function HighlightPanel({
         {/* Assist Section - only in Annotate mode and for text resources */}
         {annotateMode && (
           <AssistSection
+            session={session}
             annotationType="highlight"
             isAssisting={isAssisting}
             progress={progress}
@@ -171,6 +173,7 @@ export function HighlightPanel({
           ) : (
             sortedAnnotations.map((highlight) => (
               <HighlightEntry
+                session={session}
                 key={highlight.id}
                 highlight={highlight}
                 isFocused={highlight.id === focusedAnnotationId}

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

@@ -1,17 +1,14 @@
 'use client';
 
 import type { Ref } from 'react';
-import type { RouteBuilder } from '../../../contexts/RoutingContext';
 import { useTranslations } from '../../../contexts/TranslationContext';
 import type { Annotation } from '@semiont/core';
 import { resourceId } from '@semiont/core';
 import { getAnnotationExactText, isBodyResolved, getBodySource, getFragmentSelector, getSvgSelector, getTargetSelector } from '@semiont/core';
 import { getEntityTypes } from '@semiont/ontology';
 import { getResourceIcon } from '../../../lib/resource-utils';
-import { useSemiont } from '../../../session/SemiontProvider';
-import { useObservable } from '../../../hooks/useObservable';
+import type { SemiontSession } from '@semiont/sdk';
 import { renderAgentLabel } from './agent-label';
-import { useObservableExternalNavigation } from '../../../hooks/useObservableBrowse';
 import { useHoverEmitter } from '../../../hooks/useHoverEmitter';
 
 // Extended annotation type with runtime properties added by backend enrichment
@@ -21,29 +18,31 @@ interface EnrichedAnnotation extends Annotation {
 }
 
 interface ReferenceEntryProps {
+  /** Session for interaction routing (browse.click etc.); the panel threads it. */
+  session: SemiontSession | null;
   reference: Annotation;
   isFocused: boolean;
   isHovered?: boolean;
-  routes: RouteBuilder;
+  /** Host-owned navigation: called with the resolved resource id when the entry's link opens. */
+  onOpenResource?: (resourceId: string) => void;
   annotateMode?: boolean;
   isGenerating?: boolean;
   ref?: Ref<HTMLDivElement>;
 }
 
 export function ReferenceEntry({
+  session,
   reference,
   isFocused,
   isHovered = false,
-  routes,
+  onOpenResource,
   annotateMode = true,
   isGenerating = false,
   ref,
 }: ReferenceEntryProps) {
   const t = useTranslations('ReferencesPanel');
-  const session = useObservable(useSemiont().activeSession$);
   const semiont = session?.client;
-  const navigate = useObservableExternalNavigation();
-  const hoverProps = useHoverEmitter(reference.id);
+  const hoverProps = useHoverEmitter(session, reference.id);
 
   const selectedText = getAnnotationExactText(reference) || '';
   const isResolved = isBodyResolved(reference.body);
@@ -65,7 +64,7 @@ export function ReferenceEntry({
   const handleOpen = () => {
     if (resolvedResourceUri) {
       // resolvedResourceUri is already a bare resource ID
-      navigate(routes.resourceDetail(resolvedResourceUri), { resourceId: resolvedResourceUri });
+      onOpenResource?.(resolvedResourceUri);
     }
   };
 

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

@@ -2,9 +2,8 @@
 
 import React, { useState, useRef, useEffect, useCallback, useMemo } from 'react';
 import { useTranslations } from '../../../contexts/TranslationContext';
-import { useSemiont } from '../../../session/SemiontProvider';
-import { useObservable } from '../../../hooks/useObservable';
-import { useEventSubscriptions } from '../../../contexts/useEventSubscription';
+import type { SemiontSession } from '@semiont/sdk';
+import { useSessionEventSubscriptions } from '../../../hooks/useSessionEventSubscriptions';
 import type { RouteBuilder, LinkComponentProps } from '../../../contexts/RoutingContext';
 import { AnnotateReferencesProgressWidget } from '../../AnnotateReferencesProgressWidget';
 import { ReferenceEntry } from './ReferenceEntry';
@@ -43,6 +42,10 @@ function getSelectorDisplayText(selector: Selector | Selector[]): string | null
 }
 
 interface Props {
+  /** Session carrying the client and event bus; null renders inert. */
+  session: SemiontSession | null;
+  /** Host-owned navigation: called with the resolved resource id when a reference entry opens. */
+  onOpenResource?: (resourceId: string) => void;
   /** The '@id' of the panel's resource — stamped as `source` on mark:submit (multi-viewer routing). */
   resourceId: string;
   // Generic panel props
@@ -78,6 +81,8 @@ interface Props {
  * @subscribes browse:click - Annotation clicked. Payload: { annotationId: string }
  */
 export function ReferencesPanel({
+  session,
+  onOpenResource,
   resourceId,
   annotations = [],
   isAssisting,
@@ -97,7 +102,6 @@ export function ReferencesPanel({
   sourceLanguage,
 }: Props) {
   const t = useTranslations('ReferencesPanel');
-  const session = useObservable(useSemiont().activeSession$);
   const [selectedEntityTypes, setSelectedEntityTypes] = useState<string[]>([]);
   const [lastAnnotationLog, setLastDetectionLog] = useState<Array<{ entityType: string; foundCount: number }> | null>(null);
   const [pendingEntityTypes, setPendingEntityTypes] = useState<string[]>([]);
@@ -206,7 +210,7 @@ export function ReferencesPanel({
     setTimeout(() => setFocusedAnnotationId(null), 3000);
   }, []);
 
-  useEventSubscriptions({
+  useSessionEventSubscriptions(session, {
     'browse:click': handleAnnotationClick,
   });
 
@@ -492,11 +496,12 @@ export function ReferencesPanel({
             ) : (
               sortedAnnotations.map((reference) => (
                 <ReferenceEntry
+                  session={session}
                   key={reference.id}
                   reference={reference}
                   isFocused={reference.id === focusedAnnotationId}
                   isHovered={reference.id === hoveredAnnotationId}
-                  routes={routes}
+                  onOpenResource={onOpenResource}
                   annotateMode={annotateMode}
                   isGenerating={reference.id === generatingReferenceId}
                   ref={(el) => setEntryRef(reference.id, el)}

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

@@ -1,8 +1,7 @@
 'use client';
 
 import { useTranslations } from '../../../contexts/TranslationContext';
-import { useSemiont } from '../../../session/SemiontProvider';
-import { useObservable } from '../../../hooks/useObservable';
+import type { SemiontSession } from '@semiont/sdk';
 import { formatLocaleDisplay } from '@semiont/core';
 import { resourceId as makeResourceId, type components } from '@semiont/core';
 import { renderAgentLabel } from './agent-label';
@@ -11,6 +10,8 @@ import './ResourceInfoPanel.css';
 type Agent = components['schemas']['Agent'];
 
 interface Props {
+  /** Session carrying the client and event bus; null renders inert. */
+  session: SemiontSession | null;
   resourceId: string;
   documentEntityTypes: string[];
   documentLocale?: string | undefined;
@@ -39,6 +40,7 @@ interface Props {
  * @emits mark:archive - Archive this resource
  */
 export function ResourceInfoPanel({
+  session,
   resourceId,
   documentEntityTypes,
   documentLocale,
@@ -54,7 +56,6 @@ export function ResourceInfoPanel({
   onGenerate,
 }: Props) {
   const t = useTranslations('ResourceInfoPanel');
-  const session = useObservable(useSemiont().activeSession$);
 
   // Single attribution surface. `wasAttributedTo` is the canonical list
   // of responsible parties; if a producer set only `generator` we

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

@@ -5,12 +5,14 @@ import type { Ref } from 'react';
 import type { Annotation } from '@semiont/core';
 import { getAnnotationExactText } from '@semiont/core';
 import { getTagCategory, getTagSchemaId } from '@semiont/ontology';
-import { useSemiont } from '../../../session/SemiontProvider';
 import { useObservable } from '../../../hooks/useObservable';
+import type { SemiontSession } from '@semiont/sdk';
 import { useHoverEmitter } from '../../../hooks/useHoverEmitter';
 import { renderAgentLabel } from './agent-label';
 
 interface TagEntryProps {
+  /** Session for interaction routing (browse.click, tag schemas); the panel threads it. */
+  session: SemiontSession | null;
   tag: Annotation;
   isFocused: boolean;
   isHovered?: boolean;
@@ -18,13 +20,13 @@ interface TagEntryProps {
 }
 
 export function TagEntry({
+  session,
   tag,
   isFocused,
   isHovered = false,
   ref,
 }: TagEntryProps) {
-  const session = useObservable(useSemiont().activeSession$);
-  const hoverProps = useHoverEmitter(tag.id);
+  const hoverProps = useHoverEmitter(session, tag.id);
 
   const selectedText = getAnnotationExactText(tag);
   const category = getTagCategory(tag);

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

@@ -2,9 +2,9 @@
 
 import { useState, useEffect, useRef, useCallback, useMemo } from 'react';
 import { useTranslations } from '../../../contexts/TranslationContext';
-import { useSemiont } from '../../../session/SemiontProvider';
 import { useObservable } from '../../../hooks/useObservable';
-import { useEventSubscriptions } from '../../../contexts/useEventSubscription';
+import type { SemiontSession } from '@semiont/sdk';
+import { useSessionEventSubscriptions } from '../../../hooks/useSessionEventSubscriptions';
 import type { components, Selector } from '@semiont/core';
 import { getTextPositionSelector, getTargetSelector } from '@semiont/core';
 import { TagEntry } from './TagEntry';
@@ -39,6 +39,8 @@ function getSelectorDisplayText(selector: Selector | Selector[]): string | null
 }
 
 interface TaggingPanelProps {
+  /** Session carrying the client and event bus; null renders inert. */
+  session: SemiontSession | null;
   /** The '@id' of the panel's resource — stamped as `source` on mark:submit (multi-viewer routing). */
   resourceId: string;
   annotations: Annotation[];
@@ -64,6 +66,7 @@ interface TaggingPanelProps {
  * @subscribes browse:click - Annotation clicked. Payload: { annotationId: string }
  */
 export function TaggingPanel({
+  session,
   resourceId,
   annotations,
   annotateMode = true,
@@ -77,7 +80,6 @@ export function TaggingPanel({
   sourceLanguage,
 }: TaggingPanelProps) {
   const t = useTranslations('TaggingPanel');
-  const session = useObservable(useSemiont().activeSession$);
 
   // Subscribe to the per-KB tag-schema registry. Schemas are runtime-
   // registered by the KB at session start (see frame.addTagSchema).
@@ -129,7 +131,7 @@ export function TaggingPanel({
     setTimeout(() => setFocusedAnnotationId(null), 3000);
   }, []);
 
-  useEventSubscriptions({
+  useSessionEventSubscriptions(session, {
     'browse:click': handleAnnotationClick,
   });
 
@@ -528,6 +530,7 @@ export function TaggingPanel({
           ) : (
             sortedAnnotations.map((tag) => (
               <TagEntry
+                session={session}
                 key={tag.id}
                 tag={tag}
                 isFocused={tag.id === focusedAnnotationId}

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

@@ -5,6 +5,7 @@ import { useTranslations } from '../../../contexts/TranslationContext';
 import type { components, Selector } from '@semiont/core';
 type JobProgress = components['schemas']['JobProgress'];
 import type { RouteBuilder, LinkComponentProps } from '../../../contexts/RoutingContext';
+import type { SemiontSession } from '@semiont/sdk';
 import type { Annotator } from '../../../lib/annotation-registry';
 import { StatisticsPanel } from './StatisticsPanel';
 import { HighlightPanel } from './HighlightPanel';
@@ -37,6 +38,12 @@ const TAB_ORDER: TabKey[] = ['statistics', 'reference', 'highlight', 'assessment
  * - All operations managed via event bus (no callback props)
  */
 interface UnifiedAnnotationsPanelProps {
+  /** Session carrying the client and event bus; null renders inert. */
+  session: SemiontSession | null;
+
+  /** Host-owned navigation: called with the resolved resource id when a reference entry opens. */
+  onOpenResource?: (resourceId: string) => void;
+
   // All annotations (grouped internally by motivation)
   annotations: Annotation[];
 
@@ -245,6 +252,7 @@ export function UnifiedAnnotationsPanel(props: UnifiedAnnotationsPanelProps) {
 
           // Common props for all annotation panels
           const commonProps = {
+            session: props.session,
             resourceId: props.resourceId,
             annotations,
             pendingAnnotation: props.pendingAnnotation,
@@ -270,6 +278,8 @@ export function UnifiedAnnotationsPanel(props: UnifiedAnnotationsPanelProps) {
           if (activeTab === 'reference') {
             return (
               <ReferencesPanel
+                session={commonProps.session}
+                onOpenResource={props.onOpenResource}
                 resourceId={commonProps.resourceId}
                 annotations={commonProps.annotations}
                 pendingAnnotation={commonProps.pendingAnnotation}

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

@@ -1,10 +1,11 @@
 import { describe, it, expect, beforeEach, vi } from 'vitest';
 import { screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
-import { renderWithProviders } from '../../../../test-utils';
+import { renderWithProviders, createTestSemiontWrapper } from '../../../../test-utils';
 import userEvent from '@testing-library/user-event';
 
-import type { Annotation, AnnotationId } from '@semiont/core';
+import type { Annotation, AnnotationId, EventBus } from '@semiont/core';
+import type { SemiontSession } from '@semiont/sdk';
 
 // Mock @semiont/http-transport
 vi.mock('@semiont/core', async () => {
@@ -53,20 +54,28 @@ describe('AssessmentEntry', () => {
     isFocused: false,
   };
 
+  // Per-test session/bus — created in beforeEach (a module-scope factory
+  // call would hand tests a client that test-utils disposes after the
+  // first test). The `session` prop and the `eventBus` the interaction
+  // test subscribes come from the SAME factory call.
+  let session: SemiontSession;
+  let eventBus: EventBus;
+
   beforeEach(() => {
     vi.clearAllMocks();
+    ({ session, eventBus } = createTestSemiontWrapper());
     mockGetAnnotationExactText.mockReturnValue('Selected passage text');
   });
 
   describe('Rendering', () => {
     it('should render the selected text in quotes', () => {
-      renderWithProviders(<AssessmentEntry {...defaultProps} />);
+      renderWithProviders(<AssessmentEntry {...defaultProps} session={session} />);
 
       expect(screen.getByText(/Selected passage text/)).toBeInTheDocument();
     });
 
     it('should render the assessment body text', () => {
-      renderWithProviders(<AssessmentEntry {...defaultProps} />);
+      renderWithProviders(<AssessmentEntry {...defaultProps} session={session} />);
 
       expect(screen.getByText('This passage needs clarification')).toBeInTheDocument();
     });
@@ -80,7 +89,7 @@ describe('AssessmentEntry', () => {
       });
 
       renderWithProviders(
-        <AssessmentEntry assessment={assessment} isFocused={false} />
+        <AssessmentEntry assessment={assessment} isFocused={false} session={session} />
       );
 
       expect(screen.getByText('Direct body assessment')).toBeInTheDocument();
@@ -95,7 +104,7 @@ describe('AssessmentEntry', () => {
       });
 
       renderWithProviders(
-        <AssessmentEntry assessment={assessment} isFocused={false} />
+        <AssessmentEntry assessment={assessment} isFocused={false} session={session} />
       );
 
       expect(screen.getByText('Array body assessment')).toBeInTheDocument();
@@ -105,14 +114,14 @@ describe('AssessmentEntry', () => {
       const longText = 'X'.repeat(150);
       mockGetAnnotationExactText.mockReturnValue(longText);
 
-      renderWithProviders(<AssessmentEntry {...defaultProps} />);
+      renderWithProviders(<AssessmentEntry {...defaultProps} session={session} />);
 
       expect(screen.getByText(new RegExp(`"${'X'.repeat(100)}`))).toBeInTheDocument();
       expect(screen.getByText(/\.\.\./)).toBeInTheDocument();
     });
 
     it('should show creator name', () => {
-      renderWithProviders(<AssessmentEntry {...defaultProps} />);
+      renderWithProviders(<AssessmentEntry {...defaultProps} session={session} />);
 
       expect(screen.getByText(/reviewer@example.com/)).toBeInTheDocument();
     });
@@ -122,7 +131,7 @@ describe('AssessmentEntry', () => {
       delete (assessment as Record<string, unknown>).creator;
 
       renderWithProviders(
-        <AssessmentEntry assessment={assessment} isFocused={false} />
+        <AssessmentEntry assessment={assessment} isFocused={false} session={session} />
       );
 
       expect(screen.getByText(/Unknown/)).toBeInTheDocument();
@@ -133,7 +142,7 @@ describe('AssessmentEntry', () => {
       delete (assessment as Record<string, unknown>).body;
 
       const { container } = renderWithProviders(
-        <AssessmentEntry assessment={assessment} isFocused={false} />
+        <AssessmentEntry assessment={assessment} isFocused={false} session={session} />
       );
 
       // Body section should not render
@@ -143,7 +152,7 @@ describe('AssessmentEntry', () => {
     it('should not render quote section when selectedText is empty', () => {
       mockGetAnnotationExactText.mockReturnValue('');
 
-      const { container } = renderWithProviders(<AssessmentEntry {...defaultProps} />);
+      const { container } = renderWithProviders(<AssessmentEntry {...defaultProps} session={session} />);
 
       expect(container.querySelector('.semiont-annotation-entry__quote')).not.toBeInTheDocument();
     });
@@ -154,7 +163,7 @@ describe('AssessmentEntry', () => {
       });
 
       renderWithProviders(
-        <AssessmentEntry assessment={recentAssessment} isFocused={false} />
+        <AssessmentEntry assessment={recentAssessment} isFocused={false} session={session} />
       );
 
       expect(screen.getByText(/just now/)).toBeInTheDocument();
@@ -165,12 +174,11 @@ describe('AssessmentEntry', () => {
     it('should emit browse:click on click', async () => {
       const clickHandler = vi.fn();
 
-      const { container, eventBus } = renderWithProviders(
-        <AssessmentEntry {...defaultProps} />,
-        { returnEventBus: true }
+      const { container } = renderWithProviders(
+        <AssessmentEntry {...defaultProps} session={session} />
       );
 
-      const subscription = eventBus!.get('browse:click').subscribe(clickHandler);
+      const subscription = eventBus.get('browse:click').subscribe(clickHandler);
 
       const entry = container.firstChild as HTMLElement;
       await userEvent.click(entry);
@@ -187,7 +195,7 @@ describe('AssessmentEntry', () => {
   describe('Hover state', () => {
     it('should apply pulse class when isHovered is true', () => {
       const { container } = renderWithProviders(
-        <AssessmentEntry {...defaultProps} isHovered={true} />
+        <AssessmentEntry {...defaultProps} session={session} isHovered={true} />
       );
 
       const entry = container.firstChild as HTMLElement;
@@ -196,7 +204,7 @@ describe('AssessmentEntry', () => {
 
     it('should not apply pulse class when isHovered is false', () => {
       const { container } = renderWithProviders(
-        <AssessmentEntry {...defaultProps} isHovered={false} />
+        <AssessmentEntry {...defaultProps} session={session} isHovered={false} />
       );
 
       const entry = container.firstChild as HTMLElement;
@@ -207,7 +215,7 @@ describe('AssessmentEntry', () => {
   describe('Focus state', () => {
     it('should set data-focused to true when focused', () => {
       const { container } = renderWithProviders(
-        <AssessmentEntry {...defaultProps} isFocused={true} />
+        <AssessmentEntry {...defaultProps} session={session} isFocused={true} />
       );
 
       const entry = container.firstChild as HTMLElement;
@@ -215,7 +223,7 @@ describe('AssessmentEntry', () => {
     });
 
     it('should set data-type to assessment', () => {
-      const { container } = renderWithProviders(<AssessmentEntry {...defaultProps} />);
+      const { container } = renderWithProviders(<AssessmentEntry {...defaultProps} session={session} />);
 
       const entry = container.firstChild as HTMLElement;
       expect(entry).toHaveAttribute('data-type', 'assessment');