@semiont/react-ui 0.5.11 → 0.5.13

package/src/components/resource/__tests__/BrowseView.test.tsx

@@ -70,12 +70,8 @@ vi.mock('../../../lib/annotation-registry', () => ({
   },
 }));
 
-// Mock ImageViewer
-vi.mock('../../viewers', () => ({
-  ImageViewer: ({ resourceUri }: { resourceUri: string }) => (
-    <img data-testid="image-viewer" src={resourceUri} alt="Resource content" />
-  ),
-}));
+// Image browse renders the read-only SvgDrawingCanvas (real component — jsdom
+// renders its container fine; shape painting is covered by the dispatch spec).
 
 // Mock AnnotateToolbar
 vi.mock('../../annotation/AnnotateToolbar', () => ({
@@ -224,10 +220,12 @@ describe('BrowseView Component', () => {
       expect(screen.getByTestId('annotate-toolbar')).toBeInTheDocument();
     });
 
-    it('should render image viewer for image mime types', () => {
-      renderWithProviders(<BrowseView {...defaultProps} mimeType="image/png" />);
+    it('should render the read-only annotation canvas for image mime types', () => {
+      // Was a bare ImageViewer, which silently dropped the annotations prop
+      // (bugs/image-browse-renderer-drops-annotations.md).
+      const { container } = renderWithProviders(<BrowseView {...defaultProps} mimeType="image/png" />);
 
-      expect(screen.getByTestId('image-viewer')).toBeInTheDocument();
+      expect(container.querySelector('.semiont-svg-drawing-canvas')).toBeInTheDocument();
     });
 
     it('should render unsupported message for unsupported mime types', () => {
@@ -404,12 +402,16 @@ describe('BrowseView Component', () => {
       });
     });
 
-    it('should emit browse:click only for reference annotations', async () => {
+    it('should emit browse:click for every motivation', async () => {
+      // browse:click is the platform's one "user clicked an annotation" signal;
+      // text browse mode must emit it for whatever the click resolves, matching
+      // the image/PDF/annotate emitters (BROWSE-CLICK-ALL-MOTIVATIONS.md).
       const tracker = createEventTracker();
       const annotations = {
         ...defaultProps.annotations,
         references: [createMockAnnotation('linking', 'ref-1')],
         highlights: [createMockAnnotation('highlighting', 'highlight-1')],
+        comments: [createMockAnnotation('commenting', 'comment-1')],
       };
 
       const { container } = renderWithEventTracking(
@@ -417,36 +419,101 @@ describe('BrowseView Component', () => {
         tracker
       );
 
-      const mockReferenceElement = document.createElement('span');
-      mockReferenceElement.setAttribute('data-annotation-id', 'ref-1');
-      mockReferenceElement.setAttribute('data-annotation-type', 'reference');
+      const browseContainer = container.querySelector('.semiont-browse-view__content');
 
-      const mockHighlightElement = document.createElement('span');
-      mockHighlightElement.setAttribute('data-annotation-id', 'highlight-1');
-      mockHighlightElement.setAttribute('data-annotation-type', 'highlight');
+      const clickCases = [
+        { id: 'ref-1', type: 'reference', motivation: 'linking' },
+        { id: 'highlight-1', type: 'highlight', motivation: 'highlighting' },
+        { id: 'comment-1', type: 'comment', motivation: 'commenting' },
+      ] as const;
 
-      const mockRefTarget = { closest: vi.fn(() => mockReferenceElement) } as any;
-      const mockHighlightTarget = { closest: vi.fn(() => mockHighlightElement) } as any;
+      for (const { id, type, motivation } of clickCases) {
+        const el = document.createElement('span');
+        el.setAttribute('data-annotation-id', id);
+        el.setAttribute('data-annotation-type', type);
+        const mockTarget = { closest: vi.fn(() => el) } as unknown as EventTarget;
+
+        tracker.clear();
+        fireEvent.click(browseContainer!, { target: mockTarget });
+
+        await waitFor(() => {
+          expect(tracker.events.some(e =>
+            e.event === 'browse:click' &&
+            e.payload?.annotationId === id &&
+            e.payload?.motivation === motivation
+          )).toBe(true);
+        });
+      }
+    });
 
-      const browseContainer = container.querySelector('.semiont-browse-view__content');
+    it('should include the clicked span rect as anchorRect', async () => {
+      // A1 anchor thread (HEADLESS-ANNOTATION-PANELS Phase 3): the emission
+      // site owns the geometry — the clicked span's viewport rect rides the
+      // event so hosts can anchor popovers. Runtime-only; no schema pin.
+      const tracker = createEventTracker();
+      const annotations = {
+        ...defaultProps.annotations,
+        highlights: [createMockAnnotation('highlighting', 'highlight-1')],
+      };
 
-      tracker.clear();
+      const { container } = renderWithEventTracking(
+        <BrowseView {...defaultProps} annotations={annotations} />,
+        tracker
+      );
 
-      // Click reference - should emit
-      fireEvent.click(browseContainer!, { target: mockRefTarget });
+      const el = document.createElement('span');
+      el.setAttribute('data-annotation-id', 'highlight-1');
+      el.setAttribute('data-annotation-type', 'highlight');
+      const RECT: DOMRect = {
+        x: 10, y: 20, width: 30, height: 40,
+        top: 20, right: 40, bottom: 60, left: 10,
+        toJSON: () => ({}),
+      };
+      el.getBoundingClientRect = () => RECT;
+      const mockTarget = { closest: vi.fn(() => el) } as unknown as EventTarget;
+
+      const browseContainer = container.querySelector('.semiont-browse-view__content');
+      tracker.clear();
+      fireEvent.click(browseContainer!, { target: mockTarget });
 
       await waitFor(() => {
         expect(tracker.events.some(e =>
           e.event === 'browse:click' &&
-          e.payload?.annotationId === 'ref-1' &&
-          e.payload?.motivation === 'linking'
+          e.payload?.annotationId === 'highlight-1' &&
+          e.payload?.anchorRect?.left === 10 &&
+          e.payload?.anchorRect?.width === 30
         )).toBe(true);
       });
+    });
 
-      tracker.clear();
+    it('should not emit browse:click when the click completes a text selection', async () => {
+      // Browse mode is the reading surface: a drag-select that starts and ends
+      // inside one annotated span fires click on it. The guard applies to
+      // references too — a copy-drag inside a reference span must not emit
+      // (deliberate behavior change; previously it navigated under `follow`).
+      const tracker = createEventTracker();
+      const annotations = {
+        ...defaultProps.annotations,
+        references: [createMockAnnotation('linking', 'ref-1')],
+      };
 
-      // Click highlight - should not emit
-      fireEvent.click(browseContainer!, { target: mockHighlightTarget });
+      const { container } = renderWithEventTracking(
+        <BrowseView {...defaultProps} annotations={annotations} />,
+        tracker
+      );
+
+      const el = document.createElement('span');
+      el.setAttribute('data-annotation-id', 'ref-1');
+      el.setAttribute('data-annotation-type', 'reference');
+      const mockTarget = { closest: vi.fn(() => el) } as unknown as EventTarget;
+
+      vi.spyOn(window, 'getSelection').mockReturnValue({
+        isCollapsed: false,
+      } as Selection);
+
+      const browseContainer = container.querySelector('.semiont-browse-view__content');
+      tracker.clear();
+      fireEvent.click(browseContainer!, { target: mockTarget });
 
       await new Promise(resolve => setTimeout(resolve, 50));
       expect(tracker.events.filter(e => e.event === 'browse:click').length).toBe(0);
@@ -552,13 +619,13 @@ describe('BrowseView Component', () => {
         expect(eventTracker.some(e => e.event === 'browse:click' && e.annotationId === 'ref-1')).toBe(true);
       });
 
-      // Verify highlight doesn't trigger click events
+      // Highlights emit through the same delegated handler (all motivations)
       eventTracker.length = 0; // Clear tracker
       fireEvent.click(browseContainer!, { target: mockHighlightTarget });
 
-      // Should not have any click events for highlights
-      await new Promise(resolve => setTimeout(resolve, 50));
-      expect(eventTracker.some(e => e.event === 'browse:click')).toBe(false);
+      await waitFor(() => {
+        expect(eventTracker.some(e => e.event === 'browse:click' && e.annotationId === 'highlight-1')).toBe(true);
+      });
 
       // The key insight: With event delegation, we can handle 100 annotations
       // with only container-level listeners, not 100+ individual listeners

package/src/components/resource/__tests__/ResourceViewer.embeddable.test.tsx

@@ -12,10 +12,11 @@
  * subtree is covered by AnnotateView.embeddable.test.tsx.
  */
 import { describe, it, expect, vi } from 'vitest';
-import { render, screen } from '@testing-library/react';
+import { render, screen, act, waitFor } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import type { SemiontSession } from '@semiont/sdk';
 import type { ResourceDescriptor as SemiontResource, ResourceId } from '@semiont/core';
+import { createTestSemiontWrapper } from '../../../test-utils';
 import { ResourceViewer } from '../ResourceViewer';
 
 // Minimal bring-your-own-session double: just the surface ResourceViewer + its
@@ -60,4 +61,42 @@ describe('ResourceViewer — embeddable (bring-your-own-session, no providers)',
     );
     expect(screen.getByText('Embeddable content.')).toBeInTheDocument();
   });
+
+  // A1 anchor thread: the viewer is a pass-through for view geometry — an
+  // anchorRect arriving on browse:click reaches the host's onOpenPanel
+  // untouched (detail routing, the default click action).
+  it('forwards the browse:click anchorRect into onOpenPanel', async () => {
+    const { session, eventBus } = createTestSemiontWrapper();
+    const onOpenPanel = vi.fn();
+
+    render(
+      <ResourceViewer
+        session={session}
+        resource={resource}
+        annotations={annotations}
+        onOpenResource={vi.fn()}
+        onOpenPanel={onOpenPanel}
+      />,
+    );
+
+    const anchorRect = {
+      x: 5, y: 6, width: 7, height: 8,
+      top: 6, right: 12, bottom: 14, left: 5,
+    };
+    act(() => {
+      eventBus.get('browse:click').next({
+        annotationId: 'ann-1',
+        motivation: 'highlighting',
+        anchorRect,
+      });
+    });
+
+    await waitFor(() => {
+      expect(onOpenPanel).toHaveBeenCalledWith(expect.objectContaining({
+        panel: 'annotations',
+        scrollToAnnotationId: 'ann-1',
+        anchorRect: expect.objectContaining({ left: 5, width: 7 }),
+      }));
+    });
+  });
 });

package/src/components/resource/__tests__/browse-renderers.dispatch.test.tsx

@@ -0,0 +1,113 @@
+/**
+ * BUG: image-browse-renderer-drops-annotations — the default renderers must
+ * forward what BrowseView hands them.
+ *
+ * ImageBrowseRenderer destructured only content/mimeType and mounted a bare
+ * ImageViewer: shape annotations invisible in browse mode (annotate mode
+ * proves the data). Fix: the read-only annotation canvas (drawingMode=null),
+ * WITH the session extension on MediaRendererProps — clicks/hover route in
+ * browse mode too, and the PDF renderer's pre-existing session-less click gap
+ * heals in the same motion (per the fork note in the bug doc).
+ *
+ * Prop-capturing canvas mocks pin the contract: mounted, given the
+ * annotations, read-only, session threaded. Started RED (image: no canvas at
+ * all; pdf: no session) → GREEN.
+ */
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, within } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import type { SemiontSession } from '@semiont/sdk';
+import type { Annotation, AnnotationId } from '@semiont/core';
+import { BrowseView } from '../BrowseView';
+
+const captured = vi.hoisted(() => ({
+  svg: [] as Record<string, unknown>[],
+  pdf: [] as Record<string, unknown>[],
+}));
+
+vi.mock('../../image-annotation/SvgDrawingCanvas', () => ({
+  SvgDrawingCanvas: (props: Record<string, unknown>) => {
+    captured.svg.push(props);
+    return <div className="semiont-svg-drawing-canvas">svg-canvas-mock</div>;
+  },
+}));
+vi.mock('../../pdf-annotation/PdfAnnotationCanvas.client', () => ({
+  PdfAnnotationCanvas: (props: Record<string, unknown>) => {
+    captured.pdf.push(props);
+    return <div>pdf-canvas-mock</div>;
+  },
+}));
+vi.mock('../../annotation/AnnotateToolbar', () => ({ AnnotateToolbar: () => null }));
+vi.mock('react-markdown', () => ({ default: ({ children }: { children: string }) => <div>{children}</div> }));
+vi.mock('remark-gfm', () => ({ default: () => ({}) }));
+
+function fakeSession(): SemiontSession {
+  return {
+    client: { browse: { click: vi.fn() }, beckon: { hover: vi.fn() } },
+    subscribe: () => () => {},
+  } as unknown as SemiontSession;
+}
+
+/** A shape annotation (SvgSelector region) — the image-annotation shape. */
+function shapeAnnotation(): Annotation {
+  return {
+    '@context': 'http://www.w3.org/ns/anno.jsonld',
+    id: 'shape-1' as AnnotationId,
+    type: 'Annotation',
+    motivation: 'highlighting',
+    creator: { '@type': 'Person', name: 'user@example.com' },
+    created: '2026-07-14T00:00:00Z',
+    target: {
+      source: 'res-1',
+      selector: { type: 'SvgSelector', value: '<svg><rect x="1" y="1" width="5" height="5"/></svg>' },
+    },
+  } as unknown as Annotation;
+}
+
+const emptyAnnotations = { highlights: [], references: [], assessments: [], comments: [], tags: [] };
+
+const baseProps = {
+  resourceUri: 'res-1',
+  annotateMode: false,
+};
+
+describe('browse-renderers — annotation + session forwarding (dispatch contract)', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    captured.svg.length = 0;
+    captured.pdf.length = 0;
+  });
+
+  it('image browse mounts the read-only annotation canvas with the annotations and session', () => {
+    const session = fakeSession();
+    const annotations = { ...emptyAnnotations, highlights: [shapeAnnotation()] };
+    const { container } = render(
+      <BrowseView {...baseProps} content="blob:image-url" mimeType="image/png"
+        annotations={annotations} session={session} />,
+    );
+
+    expect(within(container).getByText('svg-canvas-mock')).toBeInTheDocument();
+    expect(captured.svg).toHaveLength(1);
+    const props = captured.svg[0]!;
+    expect(props.imageUrl).toBe('blob:image-url');
+    expect(props.existingAnnotations).toEqual([shapeAnnotation()]); // the dropped prop
+    expect(props.drawingMode).toBeNull();                           // read-only in browse
+    expect(props.session).toBe(session);                            // interaction parity
+  });
+
+  it('pdf browse keeps its annotations (pinned) and gains the session (the healed click gap)', async () => {
+    const session = fakeSession();
+    const annotations = { ...emptyAnnotations, highlights: [shapeAnnotation()] };
+    const { container } = render(
+      <BrowseView {...baseProps} content="blob:pdf-url" mimeType="application/pdf"
+        annotations={annotations} session={session} />,
+    );
+
+    await within(container).findByText('pdf-canvas-mock'); // flush the lazy canvas
+    expect(captured.pdf).toHaveLength(1);
+    const props = captured.pdf[0]!;
+    expect(props.existingAnnotations).toEqual([shapeAnnotation()]); // pinned — worked before
+    expect(props.drawingMode).toBeNull();
+    expect(props.session).toBe(session);                            // NEW — was a session-less no-op
+  });
+});

package/src/components/resource/browse-renderers.tsx

@@ -4,7 +4,8 @@ import { lazy, Suspense, memo, type ComponentType } from 'react';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 import type { Annotation } from '@semiont/core';
-import { ImageViewer } from '../viewers';
+import type { SemiontSession } from '@semiont/sdk';
+import { SvgDrawingCanvas } from '../image-annotation/SvgDrawingCanvas';
 
 // Lazy-load the PDF component to avoid SSR issues with browser PDF.js loading.
 const PdfAnnotationCanvas = lazy(() => import('../pdf-annotation/PdfAnnotationCanvas.client').then(mod => ({ default: mod.PdfAnnotationCanvas })));
@@ -19,6 +20,13 @@ export interface MediaRendererProps {
   mimeType: string;
   resourceUri: string;
   annotations: Annotation[];
+  /**
+   * Session for interaction routing inside annotation-bearing renderers — the
+   * canvases emit clicks/hover via `session.client.browse/beckon`. Absent/null
+   * → the annotations still PAINT, but are inert (paint-only). Threaded by
+   * BrowseView's dispatch; custom renderers may ignore it.
+   */
+  session?: SemiontSession | null;
 }
 
 /** Read-only media dispatch, keyed by the registry render mode. */
@@ -33,11 +41,24 @@ export function TextBrowseRenderer({ content }: MediaRendererProps) {
   return <MemoizedMarkdown content={content} />;
 }
 
-export function ImageBrowseRenderer({ content, mimeType }: MediaRendererProps) {
-  return <ImageViewer imageUrl={content} mimeType={mimeType} alt="Resource content" />;
+export function ImageBrowseRenderer({ content, resourceUri, annotations, session }: MediaRendererProps) {
+  // The annotate-mode canvas, read-only (drawingMode=null): paints SvgSelector
+  // shapes over the image and routes click/hover via the session — the same
+  // shapes browse mode silently dropped when this was a bare ImageViewer
+  // (bugs/image-browse-renderer-drops-annotations.md).
+  return (
+    <SvgDrawingCanvas
+      imageUrl={content}
+      resourceUri={resourceUri}
+      existingAnnotations={annotations}
+      drawingMode={null}
+      selectedMotivation={null}
+      session={session}
+    />
+  );
 }
 
-export function PdfBrowseRenderer({ content, resourceUri, annotations }: MediaRendererProps) {
+export function PdfBrowseRenderer({ content, resourceUri, annotations, session }: MediaRendererProps) {
   return (
     <Suspense fallback={<div className="semiont-browse-view__loading">Loading PDF viewer...</div>}>
       <PdfAnnotationCanvas
@@ -46,6 +67,7 @@ export function PdfBrowseRenderer({ content, resourceUri, annotations }: MediaRe
         existingAnnotations={annotations}
         drawingMode={null}
         selectedMotivation={null}
+        session={session}
       />
     </Suspense>
   );

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

@@ -3,8 +3,7 @@
 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';
 
@@ -17,6 +16,8 @@ interface TextualBody {
 }
 
 interface AssessmentEntryProps {
+  /** Session for interaction routing (browse.click etc.); the panel threads it. */
+  session: SemiontSession | null;
   assessment: Annotation;
   isFocused: boolean;
   isHovered?: boolean;
@@ -69,13 +70,13 @@ function getAssessmentText(annotation: Annotation): string | null {
 }
 
 export function AssessmentEntry({
+  session,
   assessment,
   isFocused,
   isHovered = false,
   ref,
 }: AssessmentEntryProps) {
-  const session = useObservable(useSemiont().activeSession$);
-  const hoverProps = useHoverEmitter(assessment.id);
+  const hoverProps = useHoverEmitter(session, assessment.id);
 
   const selectedText = getAnnotationExactText(assessment);
   const assessmentText = getAssessmentText(assessment);

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

@@ -2,9 +2,8 @@
 
 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 { AssessmentEntry } from './AssessmentEntry';
@@ -40,6 +39,8 @@ function getSelectorDisplayText(selector: Selector | Selector[]): string | null
 }
 
 interface AssessmentPanelProps {
+  /** 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[];
@@ -63,6 +64,7 @@ interface AssessmentPanelProps {
  * @subscribes browse:click - Annotation clicked. Payload: { annotationId: string }
  */
 export function AssessmentPanel({
+  session,
   resourceId,
   annotations,
   pendingAnnotation,
@@ -76,7 +78,6 @@ export function AssessmentPanel({
   hoveredAnnotationId,
 }: AssessmentPanelProps) {
   const t = useTranslations('AssessmentPanel');
-  const session = useObservable(useSemiont().activeSession$);
   const [newAssessmentText, setNewAssessmentText] = useState('');
   const [focusedAnnotationId, setFocusedAnnotationId] = useState<string | null>(null);
   const containerRef = useRef<HTMLDivElement>(null);
@@ -185,7 +186,7 @@ export function AssessmentPanel({
   }, []);
 
   // Subscribe to click events - update focused state
-  useEventSubscriptions({
+  useSessionEventSubscriptions(session, {
     'browse:click': handleAnnotationClick,
   });
 
@@ -247,6 +248,7 @@ export function AssessmentPanel({
         {/* Assist Section - only in Annotate mode and for text resources */}
         {annotateMode && (
           <AssistSection
+            session={session}
             annotationType="assessment"
             isAssisting={isAssisting}
             locale={locale}
@@ -264,6 +266,7 @@ export function AssessmentPanel({
           ) : (
             sortedAnnotations.map((assessment) => (
               <AssessmentEntry
+                session={session}
                 key={assessment.id}
                 assessment={assessment}
                 isFocused={assessment.id === focusedAnnotationId}

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

@@ -2,14 +2,15 @@
 
 import { useState, useEffect, useCallback } from 'react';
 import { useTranslations } from '../../../contexts/TranslationContext';
-import { useSemiont } from '../../../session/SemiontProvider';
-import { useObservable } from '../../../hooks/useObservable';
+import type { SemiontSession } from '@semiont/sdk';
 import type { Motivation, components } from '@semiont/core';
 import './AssistSection.css';
 
 type JobProgress = components['schemas']['JobProgress'];
 
 interface AssistSectionProps {
+  /** Session carrying the client and event bus; null renders inert. */
+  session: SemiontSession | null;
   annotationType: 'highlight' | 'assessment' | 'comment';
   isAssisting: boolean;
   /** User UI locale — written into the annotation body's `language` field for comment/assessment. */
@@ -34,6 +35,7 @@ interface AssistSectionProps {
  * @emits mark:progress-dismiss - Dismiss the annotation progress display
  */
 export function AssistSection({
+  session,
   annotationType,
   isAssisting,
   locale,
@@ -45,7 +47,6 @@ export function AssistSection({
                      annotationType === 'assessment' ? 'AssessmentPanel' :
                      'CommentsPanel';
   const t = useTranslations(panelName);
-  const session = useObservable(useSemiont().activeSession$);
   const [instructions, setInstructions] = useState('');
   type ToneValue = 'scholarly' | 'explanatory' | 'conversational' | 'technical' | 'analytical' | 'critical' | 'balanced' | 'constructive' | '';
   const [tone, setTone] = useState<ToneValue>('');

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

@@ -4,12 +4,13 @@ import { useState, useEffect, useRef, useImperativeHandle, type Ref } from 'reac
 import { useTranslations } from '../../../contexts/TranslationContext';
 import type { Annotation } from '@semiont/core';
 import { getAnnotationExactText, getCommentText } 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 CommentEntryProps {
+  /** Session for interaction routing (browse.click etc.); the panel threads it. */
+  session: SemiontSession | null;
   comment: Annotation;
   isFocused: boolean;
   isHovered?: boolean;
@@ -35,6 +36,7 @@ function formatRelativeTime(isoString: string): string {
 }
 
 export function CommentEntry({
+  session,
   comment,
   isFocused,
   isHovered = false,
@@ -42,8 +44,7 @@ export function CommentEntry({
   ref,
 }: CommentEntryProps) {
   const t = useTranslations('CommentsPanel');
-  const session = useObservable(useSemiont().activeSession$);
-  const hoverProps = useHoverEmitter(comment.id);
+  const hoverProps = useHoverEmitter(session, comment.id);
   const [isEditing, setIsEditing] = useState(false);
   const [editText, setEditText] = useState('');
   const internalRef = useRef<HTMLDivElement>(null);

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

@@ -2,9 +2,8 @@
 
 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 { CommentEntry } from './CommentEntry';
@@ -40,6 +39,8 @@ function getSelectorDisplayText(selector: Selector | Selector[]): string | null
 }
 
 interface CommentsPanelProps {
+  /** 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[];
@@ -63,6 +64,7 @@ interface CommentsPanelProps {
  * @subscribes browse:click - Annotation clicked. Payload: { annotationId: string }
  */
 export function CommentsPanel({
+  session,
   resourceId,
   annotations,
   pendingAnnotation,
@@ -76,7 +78,6 @@ export function CommentsPanel({
   hoveredAnnotationId,
 }: CommentsPanelProps) {
   const t = useTranslations('CommentsPanel');
-  const session = useObservable(useSemiont().activeSession$);
   const [newCommentText, setNewCommentText] = useState('');
   const [focusedAnnotationId, setFocusedAnnotationId] = useState<string | null>(null);
   const containerRef = useRef<HTMLDivElement>(null);
@@ -167,7 +168,7 @@ export function CommentsPanel({
     setTimeout(() => setFocusedAnnotationId(null), 3000);
   }, []);
 
-  useEventSubscriptions({
+  useSessionEventSubscriptions(session, {
     'browse:click': handleAnnotationClick,
   });
 
@@ -257,6 +258,7 @@ export function CommentsPanel({
         {/* Assist Section - only in Annotate mode and for text resources */}
         {annotateMode && (
           <AssistSection
+            session={session}
             annotationType="comment"
             isAssisting={isAssisting}
             locale={locale}
@@ -274,6 +276,7 @@ export function CommentsPanel({
           ) : (
             sortedAnnotations.map((comment) => (
               <CommentEntry
+                session={session}
                 key={comment.id}
                 comment={comment}
                 isFocused={comment.id === focusedAnnotationId}