@semiont/react-ui 0.5.10 → 0.5.12

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

@@ -6,6 +6,7 @@ import userEvent from '@testing-library/user-event';
 import '@testing-library/jest-dom';
 import { CommentsPanel } from '../CommentsPanel';
 import type { EventBus } from '@semiont/core';
+import type { SemiontSession } from '@semiont/sdk';
 import { createTestSemiontWrapper } from '../../../../test-utils';
 
 import type { Annotation, AnnotationId } from '@semiont/core';
@@ -32,8 +33,18 @@ function createEventTracker() {
   };
 }
 
+// Per-test session/bus/wrapper — created in beforeEach because test-utils
+// disposes every created client after each test (a module-scope wrapper
+// would hand later tests a disposed client).
+let session: SemiontSession;
+let eventBus: EventBus;
+let SemiontWrapper: React.ComponentType<{ children: React.ReactNode }>;
+
+beforeEach(() => {
+  ({ session, eventBus, SemiontWrapper } = createTestSemiontWrapper());
+});
+
 const renderWithEventBus = (component: React.ReactElement, tracker?: ReturnType<typeof createEventTracker>) => {
-  const { SemiontWrapper, eventBus } = createTestSemiontWrapper();
   if (tracker) tracker._attach(eventBus);
   const Wrapper = ({ children }: { children: React.ReactNode }) => (
     <SemiontWrapper>{children}</SemiontWrapper>
@@ -141,6 +152,7 @@ const createPendingAnnotation = (exact: string) => ({
 
 describe('CommentsPanel Component', () => {
   const defaultProps = {
+    resourceId: 'res-1',
     annotations: mockComments.empty,
     pendingAnnotation: null,
   };
@@ -167,7 +179,7 @@ describe('CommentsPanel Component', () => {
 
   describe('Rendering', () => {
     it('should render panel header with title and count', () => {
-      renderWithEventBus(<CommentsPanel {...defaultProps} annotations={mockComments.multiple} />);
+      renderWithEventBus(<CommentsPanel session={session} {...defaultProps} annotations={mockComments.multiple} />);
 
       const headings = screen.getAllByText(/Comments/);
       expect(headings.length).toBeGreaterThan(0);
@@ -175,13 +187,13 @@ describe('CommentsPanel Component', () => {
     });
 
     it('should show empty state when no comments', () => {
-      renderWithEventBus(<CommentsPanel {...defaultProps} />);
+      renderWithEventBus(<CommentsPanel session={session} {...defaultProps} />);
 
       expect(screen.getByText(/No comments yet/)).toBeInTheDocument();
     });
 
     it('should render all comments', () => {
-      renderWithEventBus(<CommentsPanel {...defaultProps} annotations={mockComments.multiple} />);
+      renderWithEventBus(<CommentsPanel session={session} {...defaultProps} annotations={mockComments.multiple} />);
 
       expect(screen.getByTestId('comment-1')).toBeInTheDocument();
       expect(screen.getByTestId('comment-2')).toBeInTheDocument();
@@ -189,7 +201,7 @@ describe('CommentsPanel Component', () => {
     });
 
     it('should have proper panel structure', () => {
-      const { container } = renderWithEventBus(<CommentsPanel {...defaultProps} />);
+      const { container } = renderWithEventBus(<CommentsPanel session={session} {...defaultProps} />);
 
       // Find the root panel div (first child of the container)
       const panel = container.firstChild as HTMLElement;
@@ -198,7 +210,7 @@ describe('CommentsPanel Component', () => {
 
     it('should have scrollable comments list', () => {
       const { container } = renderWithEventBus(
-        <CommentsPanel {...defaultProps} annotations={mockComments.many} />
+        <CommentsPanel session={session} {...defaultProps} annotations={mockComments.many} />
       );
 
       const commentsList = container.querySelector('.semiont-panel__list');
@@ -208,7 +220,7 @@ describe('CommentsPanel Component', () => {
 
   describe('Comment Sorting', () => {
     it('should sort comments by position in resource', () => {
-      renderWithEventBus(<CommentsPanel {...defaultProps} annotations={mockComments.multiple} />);
+      renderWithEventBus(<CommentsPanel session={session} {...defaultProps} annotations={mockComments.multiple} />);
 
       const comments = screen.getAllByTestId(/comment-/);
 
@@ -222,13 +234,13 @@ describe('CommentsPanel Component', () => {
       mockGetTextPositionSelector.mockReturnValue(null);
 
       expect(() => {
-        renderWithEventBus(<CommentsPanel {...defaultProps} annotations={mockComments.multiple} />);
+        renderWithEventBus(<CommentsPanel session={session} {...defaultProps} annotations={mockComments.multiple} />);
       }).not.toThrow();
     });
 
     it('should maintain sort order when comments update', () => {
       const { rerender } = renderWithEventBus(
-        <CommentsPanel {...defaultProps} annotations={mockComments.multiple} />
+        <CommentsPanel session={session} {...defaultProps} annotations={mockComments.multiple} />
       );
 
       // Add a new comment at position 25
@@ -238,7 +250,7 @@ describe('CommentsPanel Component', () => {
       ];
 
       rerender(
-        <CommentsPanel {...defaultProps} annotations={updatedComments} />
+        <CommentsPanel session={session} {...defaultProps} annotations={updatedComments} />
       );
 
       const comments = screen.getAllByTestId(/comment-/);
@@ -253,7 +265,7 @@ describe('CommentsPanel Component', () => {
 
   describe('New Comment Creation', () => {
     it('should not show new comment input by default', () => {
-      renderWithEventBus(<CommentsPanel {...defaultProps} />);
+      renderWithEventBus(<CommentsPanel session={session} {...defaultProps} />);
 
       expect(screen.queryByPlaceholderText(/Add your comment/)).not.toBeInTheDocument();
     });
@@ -263,6 +275,7 @@ describe('CommentsPanel Component', () => {
 
       renderWithEventBus(
         <CommentsPanel
+          session={session}
           {...defaultProps}
           pendingAnnotation={pendingAnnotation}
         />
@@ -276,6 +289,7 @@ describe('CommentsPanel Component', () => {
 
       renderWithEventBus(
         <CommentsPanel
+          session={session}
           {...defaultProps}
           pendingAnnotation={pendingAnnotation}
         />
@@ -290,6 +304,7 @@ describe('CommentsPanel Component', () => {
 
       renderWithEventBus(
         <CommentsPanel
+          session={session}
           {...defaultProps}
           pendingAnnotation={pendingAnnotation}
         />
@@ -304,6 +319,7 @@ describe('CommentsPanel Component', () => {
 
       renderWithEventBus(
         <CommentsPanel
+          session={session}
           {...defaultProps}
           pendingAnnotation={pendingAnnotation}
         />
@@ -320,6 +336,7 @@ describe('CommentsPanel Component', () => {
 
       renderWithEventBus(
         <CommentsPanel
+          session={session}
           {...defaultProps}
           pendingAnnotation={pendingAnnotation}
         />
@@ -338,6 +355,7 @@ describe('CommentsPanel Component', () => {
 
       renderWithEventBus(
         <CommentsPanel
+          session={session}
           {...defaultProps}
           pendingAnnotation={pendingAnnotation}
         />
@@ -352,6 +370,7 @@ describe('CommentsPanel Component', () => {
 
       renderWithEventBus(
         <CommentsPanel
+          session={session}
           {...defaultProps}
           pendingAnnotation={pendingAnnotation}
         />
@@ -367,6 +386,7 @@ describe('CommentsPanel Component', () => {
 
       renderWithEventBus(
         <CommentsPanel
+          session={session}
           {...defaultProps}
           pendingAnnotation={pendingAnnotation}
         />,
@@ -393,6 +413,7 @@ describe('CommentsPanel Component', () => {
 
       renderWithEventBus(
         <CommentsPanel
+          session={session}
           {...defaultProps}
           pendingAnnotation={pendingAnnotation}
         />
@@ -410,6 +431,7 @@ describe('CommentsPanel Component', () => {
 
       renderWithEventBus(
         <CommentsPanel
+          session={session}
           {...defaultProps}
           pendingAnnotation={pendingAnnotation}
         />
@@ -424,6 +446,7 @@ describe('CommentsPanel Component', () => {
 
       renderWithEventBus(
         <CommentsPanel
+          session={session}
           {...defaultProps}
           pendingAnnotation={pendingAnnotation}
         />
@@ -441,6 +464,7 @@ describe('CommentsPanel Component', () => {
 
       renderWithEventBus(
         <CommentsPanel
+          session={session}
           {...defaultProps}
           pendingAnnotation={pendingAnnotation}
         />
@@ -458,6 +482,7 @@ describe('CommentsPanel Component', () => {
 
       const { container } = renderWithEventBus(
         <CommentsPanel
+          session={session}
           {...defaultProps}
           pendingAnnotation={pendingAnnotation}
         />
@@ -473,6 +498,7 @@ describe('CommentsPanel Component', () => {
     it('should render comment entries', () => {
       renderWithEventBus(
         <CommentsPanel
+          session={session}
           {...defaultProps}
           annotations={mockComments.single}
         />
@@ -489,6 +515,7 @@ describe('CommentsPanel Component', () => {
       expect(() => {
         renderWithEventBus(
           <CommentsPanel
+            session={session}
             {...defaultProps}
             annotations={mockComments.single}
           />
@@ -501,6 +528,7 @@ describe('CommentsPanel Component', () => {
     it('should render comments', () => {
       renderWithEventBus(
         <CommentsPanel
+          session={session}
           {...defaultProps}
           annotations={mockComments.multiple}
         />
@@ -514,7 +542,7 @@ describe('CommentsPanel Component', () => {
   describe('Panel Structure and Styling', () => {
     it('should have fixed header that does not scroll', () => {
       renderWithEventBus(
-        <CommentsPanel {...defaultProps} annotations={mockComments.many} />
+        <CommentsPanel session={session} {...defaultProps} annotations={mockComments.many} />
       );
 
       const headers = screen.getAllByText(/Comments/);
@@ -523,7 +551,7 @@ describe('CommentsPanel Component', () => {
     });
 
     it('should support dark mode', () => {
-      const { container } = renderWithEventBus(<CommentsPanel {...defaultProps} />);
+      const { container } = renderWithEventBus(<CommentsPanel session={session} {...defaultProps} />);
 
       const panel = container.firstChild as HTMLElement;
       expect(panel).toHaveClass('semiont-panel');
@@ -531,7 +559,7 @@ describe('CommentsPanel Component', () => {
 
     it('should have proper spacing between comments', () => {
       const { container } = renderWithEventBus(
-        <CommentsPanel {...defaultProps} annotations={mockComments.multiple} />
+        <CommentsPanel session={session} {...defaultProps} annotations={mockComments.multiple} />
       );
 
       const commentsList = container.querySelector('.semiont-panel__list');
@@ -539,7 +567,7 @@ describe('CommentsPanel Component', () => {
     });
 
     it('should have proper border styling', () => {
-      renderWithEventBus(<CommentsPanel {...defaultProps} />);
+      renderWithEventBus(<CommentsPanel session={session} {...defaultProps} />);
 
       const headers = screen.getAllByText(/Comments/);
       const header = headers[0].closest('div');
@@ -550,7 +578,7 @@ describe('CommentsPanel Component', () => {
   describe('Edge Cases', () => {
     it('should handle empty comments array', () => {
       expect(() => {
-        renderWithEventBus(<CommentsPanel {...defaultProps} annotations={[]} />);
+        renderWithEventBus(<CommentsPanel session={session} {...defaultProps} annotations={[]} />);
       }).not.toThrow();
 
       expect(screen.getByText(/No comments yet/)).toBeInTheDocument();
@@ -558,7 +586,7 @@ describe('CommentsPanel Component', () => {
 
     it('should handle rapid comment additions', () => {
       const { rerender } = renderWithEventBus(
-        <CommentsPanel {...defaultProps} annotations={mockComments.empty} />
+        <CommentsPanel session={session} {...defaultProps} annotations={mockComments.empty} />
       );
 
       for (let i = 1; i <= 5; i++) {
@@ -566,7 +594,7 @@ describe('CommentsPanel Component', () => {
           createMockComment(`${j + 1}`, j * 10, (j + 1) * 10)
         );
         rerender(
-          <CommentsPanel {...defaultProps} annotations={comments} />
+          <CommentsPanel session={session} {...defaultProps} annotations={comments} />
         );
       }
 
@@ -575,13 +603,13 @@ describe('CommentsPanel Component', () => {
 
     it('should handle comment removal', () => {
       const { rerender } = renderWithEventBus(
-        <CommentsPanel {...defaultProps} annotations={mockComments.multiple} />
+        <CommentsPanel session={session} {...defaultProps} annotations={mockComments.multiple} />
       );
 
       expect(screen.getAllByTestId(/comment-/)).toHaveLength(3);
 
       rerender(
-        <CommentsPanel {...defaultProps} annotations={mockComments.single} />
+        <CommentsPanel session={session} {...defaultProps} annotations={mockComments.single} />
       );
 
       expect(screen.getAllByTestId(/comment-/)).toHaveLength(1);
@@ -592,6 +620,7 @@ describe('CommentsPanel Component', () => {
 
       renderWithEventBus(
         <CommentsPanel
+          session={session}
           {...defaultProps}
           pendingAnnotation={pendingAnnotation}
         />
@@ -607,7 +636,7 @@ describe('CommentsPanel Component', () => {
       );
 
       expect(() => {
-        renderWithEventBus(<CommentsPanel {...defaultProps} annotations={manyComments} />);
+        renderWithEventBus(<CommentsPanel session={session} {...defaultProps} annotations={manyComments} />);
       }).not.toThrow();
 
       expect(screen.getAllByTestId(/comment-/)).toHaveLength(100);
@@ -621,7 +650,7 @@ describe('CommentsPanel Component', () => {
       ];
 
       expect(() => {
-        renderWithEventBus(<CommentsPanel {...defaultProps} annotations={commentsAtSamePosition} />);
+        renderWithEventBus(<CommentsPanel session={session} {...defaultProps} annotations={commentsAtSamePosition} />);
       }).not.toThrow();
 
       expect(screen.getAllByTestId(/comment-/)).toHaveLength(3);
@@ -630,7 +659,7 @@ describe('CommentsPanel Component', () => {
 
   describe('Accessibility', () => {
     it('should have proper heading structure', () => {
-      renderWithEventBus(<CommentsPanel {...defaultProps} />);
+      renderWithEventBus(<CommentsPanel session={session} {...defaultProps} />);
 
       const headings = screen.getAllByText(/Comments/);
       expect(headings[0]).toHaveClass('semiont-panel-header__text');
@@ -647,6 +676,7 @@ describe('CommentsPanel Component', () => {
 
       renderWithEventBus(
         <CommentsPanel
+          session={session}
           {...defaultProps}
           pendingAnnotation={pendingAnnotation}
         />
@@ -658,7 +688,7 @@ describe('CommentsPanel Component', () => {
 
     it('should have semantic HTML structure', () => {
       const { container } = renderWithEventBus(
-        <CommentsPanel {...defaultProps} annotations={mockComments.multiple} />
+        <CommentsPanel session={session} {...defaultProps} annotations={mockComments.multiple} />
       );
 
       // Panel should be a properly structured div hierarchy

package/src/components/resource/panels/__tests__/HighlightEntry.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 { SemiontSession } from '@semiont/sdk';
 
-import type { Annotation, AnnotationId } from '@semiont/core';
+import type { Annotation, AnnotationId, EventBus } from '@semiont/core';
 
 // Mock @semiont/http-transport
 vi.mock('@semiont/core', async () => {
@@ -49,14 +50,21 @@ describe('HighlightEntry', () => {
     isFocused: false,
   };
 
+  // Created per-test: test-utils disposes every created client in a
+  // module-scope afterEach, so a module-scope session would be dead
+  // after the first test.
+  let session: SemiontSession;
+  let eventBus: EventBus;
+
   beforeEach(() => {
     vi.clearAllMocks();
     mockGetAnnotationExactText.mockReturnValue('This is the highlighted text');
+    ({ session, eventBus } = createTestSemiontWrapper());
   });
 
   describe('Rendering', () => {
     it('should render the selected text in quotes', () => {
-      renderWithProviders(<HighlightEntry {...defaultProps} />);
+      renderWithProviders(<HighlightEntry {...defaultProps} session={session} />);
 
       expect(screen.getByText(/This is the highlighted text/)).toBeInTheDocument();
     });
@@ -65,7 +73,7 @@ describe('HighlightEntry', () => {
       const longText = 'A'.repeat(250);
       mockGetAnnotationExactText.mockReturnValue(longText);
 
-      renderWithProviders(<HighlightEntry {...defaultProps} />);
+      renderWithProviders(<HighlightEntry {...defaultProps} session={session} />);
 
       // Should show first 200 chars followed by ellipsis
       expect(screen.getByText(new RegExp(`"${'A'.repeat(200)}`))).toBeInTheDocument();
@@ -76,7 +84,7 @@ describe('HighlightEntry', () => {
       const exactText = 'B'.repeat(200);
       mockGetAnnotationExactText.mockReturnValue(exactText);
 
-      const { container } = renderWithProviders(<HighlightEntry {...defaultProps} />);
+      const { container } = renderWithProviders(<HighlightEntry {...defaultProps} session={session} />);
 
       const quote = container.querySelector('.semiont-annotation-entry__quote');
       expect(quote).toBeInTheDocument();
@@ -84,7 +92,7 @@ describe('HighlightEntry', () => {
     });
 
     it('should show creator name', () => {
-      renderWithProviders(<HighlightEntry {...defaultProps} />);
+      renderWithProviders(<HighlightEntry {...defaultProps} session={session} />);
 
       expect(screen.getByText(/alice@example.com/)).toBeInTheDocument();
     });
@@ -94,7 +102,7 @@ describe('HighlightEntry', () => {
       delete (highlight as Record<string, unknown>).creator;
 
       renderWithProviders(
-        <HighlightEntry highlight={highlight} isFocused={false} />
+        <HighlightEntry highlight={highlight} isFocused={false} session={session} />
       );
 
       expect(screen.getByText(/Unknown/)).toBeInTheDocument();
@@ -106,7 +114,7 @@ describe('HighlightEntry', () => {
       });
 
       renderWithProviders(
-        <HighlightEntry highlight={recentHighlight} isFocused={false} />
+        <HighlightEntry highlight={recentHighlight} isFocused={false} session={session} />
       );
 
       expect(screen.getByText(/just now/)).toBeInTheDocument();
@@ -115,7 +123,7 @@ describe('HighlightEntry', () => {
     it('should not render quote section when selectedText is empty', () => {
       mockGetAnnotationExactText.mockReturnValue('');
 
-      const { container } = renderWithProviders(<HighlightEntry {...defaultProps} />);
+      const { container } = renderWithProviders(<HighlightEntry {...defaultProps} session={session} />);
 
       expect(container.querySelector('.semiont-annotation-entry__quote')).not.toBeInTheDocument();
     });
@@ -125,12 +133,14 @@ describe('HighlightEntry', () => {
     it('should emit browse:click on click', async () => {
       const clickHandler = vi.fn();
 
-      const { container, eventBus } = renderWithProviders(
-        <HighlightEntry {...defaultProps} />,
-        { returnEventBus: true }
+      // The component only sees the `session` prop now, so the assertion
+      // must subscribe on that same session's bus — not the bus of the
+      // wrapper renderWithProviders creates internally.
+      const { container } = renderWithProviders(
+        <HighlightEntry {...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);
@@ -147,7 +157,7 @@ describe('HighlightEntry', () => {
   describe('Hover state', () => {
     it('should apply pulse class when isHovered is true', () => {
       const { container } = renderWithProviders(
-        <HighlightEntry {...defaultProps} isHovered={true} />
+        <HighlightEntry {...defaultProps} isHovered={true} session={session} />
       );
 
       const entry = container.firstChild as HTMLElement;
@@ -156,7 +166,7 @@ describe('HighlightEntry', () => {
 
     it('should not apply pulse class when isHovered is false', () => {
       const { container } = renderWithProviders(
-        <HighlightEntry {...defaultProps} isHovered={false} />
+        <HighlightEntry {...defaultProps} isHovered={false} session={session} />
       );
 
       const entry = container.firstChild as HTMLElement;
@@ -167,7 +177,7 @@ describe('HighlightEntry', () => {
   describe('Focus state', () => {
     it('should set data-focused to true when focused', () => {
       const { container } = renderWithProviders(
-        <HighlightEntry {...defaultProps} isFocused={true} />
+        <HighlightEntry {...defaultProps} isFocused={true} session={session} />
       );
 
       const entry = container.firstChild as HTMLElement;
@@ -176,7 +186,7 @@ describe('HighlightEntry', () => {
 
     it('should set data-focused to false when not focused', () => {
       const { container } = renderWithProviders(
-        <HighlightEntry {...defaultProps} isFocused={false} />
+        <HighlightEntry {...defaultProps} isFocused={false} session={session} />
       );
 
       const entry = container.firstChild as HTMLElement;

package/src/components/resource/panels/__tests__/HighlightPanel.annotationProgress.test.tsx

@@ -14,8 +14,9 @@
 import { describe, it, expect, vi, beforeEach } from 'vitest';
 import React from 'react';
 import { screen } from '@testing-library/react';
-import { renderWithProviders } from '../../../../test-utils';
+import { renderWithProviders, createTestSemiontWrapper } from '../../../../test-utils';
 import { HighlightPanel } from '../HighlightPanel';
+import type { SemiontSession } from '@semiont/sdk';
 
 import type { Annotation, AnnotationId } from '@semiont/core';
 
@@ -48,9 +49,14 @@ vi.mock('../../../../contexts/useEventSubscription', () => ({
 
 describe('HighlightPanel + AssistSection Integration', () => {
   let mockAnnotations: Annotation[];
+  // Created per-test: test-utils disposes every created client in a
+  // module-scope afterEach, so a module-scope session would be dead
+  // after the first test.
+  let session: SemiontSession;
 
   beforeEach(() => {
     vi.clearAllMocks();
+    ({ session } = createTestSemiontWrapper());
 
     mockAnnotations = [
       {
@@ -74,7 +80,7 @@ describe('HighlightPanel + AssistSection Integration', () => {
   describe('Detection Progress Prop Passing', () => {
     it('should pass progress to AssistSection when provided', () => {
       renderWithProviders(
-        <HighlightPanel
+        <HighlightPanel session={session} resourceId="res-1"
           annotations={mockAnnotations}
           pendingAnnotation={null}
           isAssisting={true}
@@ -93,7 +99,7 @@ describe('HighlightPanel + AssistSection Integration', () => {
 
     it('should pass null progress to AssistSection', () => {
       renderWithProviders(
-        <HighlightPanel
+        <HighlightPanel session={session} resourceId="res-1"
           annotations={mockAnnotations}
           pendingAnnotation={null}
           isAssisting={false}
@@ -109,7 +115,7 @@ describe('HighlightPanel + AssistSection Integration', () => {
 
     it('should pass undefined progress to AssistSection', () => {
       renderWithProviders(
-        <HighlightPanel
+        <HighlightPanel session={session} resourceId="res-1"
           annotations={mockAnnotations}
           pendingAnnotation={null}
           isAssisting={false}
@@ -125,7 +131,7 @@ describe('HighlightPanel + AssistSection Integration', () => {
 
     it('should keep progress visible after detection completes (isAssisting=false)', () => {
       renderWithProviders(
-        <HighlightPanel
+        <HighlightPanel session={session} resourceId="res-1"
           annotations={mockAnnotations}
           pendingAnnotation={null}
           isAssisting={false}
@@ -146,7 +152,7 @@ describe('HighlightPanel + AssistSection Integration', () => {
 
     it('should pass progress with request parameters to AssistSection', () => {
       renderWithProviders(
-        <HighlightPanel
+        <HighlightPanel session={session} resourceId="res-1"
           annotations={mockAnnotations}
           pendingAnnotation={null}
           isAssisting={true}
@@ -172,7 +178,7 @@ describe('HighlightPanel + AssistSection Integration', () => {
   describe('Annotate Mode Toggling', () => {
     it('should render AssistSection when annotateMode is true', () => {
       renderWithProviders(
-        <HighlightPanel
+        <HighlightPanel session={session} resourceId="res-1"
           annotations={mockAnnotations}
           pendingAnnotation={null}
           isAssisting={false}
@@ -186,7 +192,7 @@ describe('HighlightPanel + AssistSection Integration', () => {
 
     it('should NOT render AssistSection when annotateMode is false', () => {
       renderWithProviders(
-        <HighlightPanel
+        <HighlightPanel session={session} resourceId="res-1"
           annotations={mockAnnotations}
           pendingAnnotation={null}
           isAssisting={false}
@@ -200,7 +206,7 @@ describe('HighlightPanel + AssistSection Integration', () => {
 
     it('should hide progress when switching to browse mode (annotateMode=false)', () => {
       const { rerender } = renderWithProviders(
-        <HighlightPanel
+        <HighlightPanel session={session} resourceId="res-1"
           annotations={mockAnnotations}
           pendingAnnotation={null}
           isAssisting={true}
@@ -217,7 +223,7 @@ describe('HighlightPanel + AssistSection Integration', () => {
 
       // Switch to browse mode
       rerender(
-        <HighlightPanel
+        <HighlightPanel session={session} resourceId="res-1"
           annotations={mockAnnotations}
           pendingAnnotation={null}
           isAssisting={true}
@@ -238,7 +244,7 @@ describe('HighlightPanel + AssistSection Integration', () => {
   describe('State Combinations', () => {
     it('should handle isAssisting=true with no progress (starting state)', () => {
       renderWithProviders(
-        <HighlightPanel
+        <HighlightPanel session={session} resourceId="res-1"
           annotations={mockAnnotations}
           pendingAnnotation={null}
           isAssisting={true}
@@ -253,7 +259,7 @@ describe('HighlightPanel + AssistSection Integration', () => {
 
     it('should handle isAssisting=false with progress (final state)', () => {
       renderWithProviders(
-        <HighlightPanel
+        <HighlightPanel session={session} resourceId="res-1"
           annotations={mockAnnotations}
           pendingAnnotation={null}
           isAssisting={false}
@@ -274,7 +280,7 @@ describe('HighlightPanel + AssistSection Integration', () => {
 
     it('should handle multiple progress updates', () => {
       const { rerender } = renderWithProviders(
-        <HighlightPanel
+        <HighlightPanel session={session} resourceId="res-1"
           annotations={mockAnnotations}
           pendingAnnotation={null}
           isAssisting={true}
@@ -291,7 +297,7 @@ describe('HighlightPanel + AssistSection Integration', () => {
 
       // Update to analyzing
       rerender(
-        <HighlightPanel
+        <HighlightPanel session={session} resourceId="res-1"
           annotations={mockAnnotations}
           pendingAnnotation={null}
           isAssisting={true}
@@ -309,7 +315,7 @@ describe('HighlightPanel + AssistSection Integration', () => {
 
       // Update to complete
       rerender(
-        <HighlightPanel
+        <HighlightPanel session={session} resourceId="res-1"
           annotations={mockAnnotations}
           pendingAnnotation={null}
           isAssisting={false}
@@ -330,7 +336,7 @@ describe('HighlightPanel + AssistSection Integration', () => {
   describe('Highlights List Rendering', () => {
     it('should render highlights list alongside detection progress', () => {
       renderWithProviders(
-        <HighlightPanel
+        <HighlightPanel session={session} resourceId="res-1"
           annotations={mockAnnotations}
           pendingAnnotation={null}
           isAssisting={true}
@@ -350,7 +356,7 @@ describe('HighlightPanel + AssistSection Integration', () => {
 
     it('should show empty state when no highlights', () => {
       renderWithProviders(
-        <HighlightPanel
+        <HighlightPanel session={session} resourceId="res-1"
           annotations={[]}
           pendingAnnotation={null}
           isAssisting={false}