@semiont/react-ui 0.4.20 → 0.4.21

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

@@ -2,21 +2,22 @@
 
 import React, { useState, useRef, useEffect, useCallback, useMemo } from 'react';
 import { useTranslations } from '../../../contexts/TranslationContext';
-import { useEventBus } from '../../../contexts/EventBusContext';
+import { useSemiont } from '../../../session/SemiontProvider';
+import { useObservable } from '../../../hooks/useObservable';
 import { useEventSubscriptions } from '../../../contexts/useEventSubscription';
 import type { RouteBuilder, LinkComponentProps } from '../../../contexts/RoutingContext';
 import { AnnotateReferencesProgressWidget } from '../../AnnotateReferencesProgressWidget';
 import { ReferenceEntry } from './ReferenceEntry';
-import type { components, paths, Selector } from '@semiont/core';
+import type { components, Selector } from '@semiont/core';
 import { getTextPositionSelector, getTargetSelector } from '@semiont/api-client';
 import { PanelHeader } from './PanelHeader';
 import './ReferencesPanel.css';
-import type { MarkProgress } from '@semiont/core';
+
+type JobProgress = components['schemas']['JobProgress'];
 
 type Annotation = components['schemas']['Annotation'];
 type Motivation = components['schemas']['Motivation'];
-type ResponseContent<T> = T extends { responses: { 200: { content: { 'application/json': infer R } } } } ? R : never;
-type ReferencedBy = ResponseContent<paths['/resources/{id}/referenced-by']['get']>['referencedBy'][number];
+type ReferencedBy = components['schemas']['GetReferencedByResponse']['referencedBy'][number];
 
 // Unified pending annotation type
 interface PendingAnnotation {
@@ -45,7 +46,7 @@ interface Props {
   // Generic panel props
   annotations?: Annotation[];
   isAssisting: boolean;
-  progress: MarkProgress | null;
+  progress: JobProgress | null;
   annotateMode?: boolean;
   Link: React.ComponentType<LinkComponentProps>;
   routes: RouteBuilder;
@@ -86,7 +87,7 @@ export function ReferencesPanel({
   hoveredAnnotationId,
 }: Props) {
   const t = useTranslations('ReferencesPanel');
-  const eventBus = useEventBus();
+  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[]>([]);
@@ -202,7 +203,7 @@ export function ReferencesPanel({
   // Clear log when starting new annotation
   const handleAssist = () => {
     setLastDetectionLog(null);
-    eventBus.get('mark:assist-request').next({
+    session?.client.emit('mark:assist-request', {
       motivation: 'linking',
       options: {
         entityTypes: selectedEntityTypes,
@@ -245,7 +246,7 @@ export function ReferencesPanel({
   const handleCreateReference = () => {
     if (pendingAnnotation) {
       const entityType = pendingEntityTypes.join(',') || undefined;
-      eventBus.get('mark:submit').next({
+      session?.client.emit('mark:submit', {
         motivation: 'linking',
         selector: pendingAnnotation.selector,
         body: entityType ? [{ type: 'TextualBody', value: entityType, purpose: 'tagging' }] : [],
@@ -260,14 +261,14 @@ export function ReferencesPanel({
 
     const handleEscape = (e: KeyboardEvent) => {
       if (e.key === 'Escape') {
-        eventBus.get('mark:cancel-pending').next(undefined);
+        session?.client.emit('mark:cancel-pending', undefined);
         setPendingEntityTypes([]);
       }
     };
 
     document.addEventListener('keydown', handleEscape);
     return () => document.removeEventListener('keydown', handleEscape);
-  }, [pendingAnnotation]);
+  }, [pendingAnnotation, session]);
 
   return (
     <div className="semiont-panel">
@@ -312,7 +313,7 @@ export function ReferencesPanel({
             <div className="semiont-annotation-prompt__actions">
               <button
                 onClick={() => {
-                  eventBus.get('mark:cancel-pending').next(undefined);
+                  session?.client.emit('mark:cancel-pending', undefined);
                   setPendingEntityTypes([]);
                 }}
                 className="semiont-button semiont-button--secondary"

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

@@ -1,7 +1,8 @@
 'use client';
 
 import { useTranslations } from '../../../contexts/TranslationContext';
-import { useEventBus } from '../../../contexts/EventBusContext';
+import { useSemiont } from '../../../session/SemiontProvider';
+import { useObservable } from '../../../hooks/useObservable';
 import { formatLocaleDisplay } from '@semiont/api-client';
 import { resourceId as makeResourceId, type components } from '@semiont/core';
 import './ResourceInfoPanel.css';
@@ -47,7 +48,7 @@ export function ResourceInfoPanel({
   generator,
 }: Props) {
   const t = useTranslations('ResourceInfoPanel');
-  const eventBus = useEventBus();
+  const session = useObservable(useSemiont().activeSession$);
 
   return (
     <div className="semiont-resource-info-panel">
@@ -148,7 +149,7 @@ export function ResourceInfoPanel({
                     <button
                       key={id}
                       className="semiont-resource-info-panel__link"
-                      onClick={() => eventBus.get('browse:reference-navigate').next({ resourceId: id })}
+                      onClick={() => session?.client.emit('browse:reference-navigate', { resourceId: id })}
                     >
                       {i > 0 && ', '}{id}
                     </button>
@@ -191,7 +192,7 @@ export function ResourceInfoPanel({
       {/* Clone Action */}
       <div className="semiont-resource-info-panel__action-section">
         <button
-          onClick={() => eventBus.get('yield:clone').next(undefined)}
+          onClick={() => session?.client.emit('yield:clone', undefined)}
           className="semiont-resource-button semiont-resource-button--secondary"
         >
           🔗 {t('clone')}
@@ -206,7 +207,7 @@ export function ResourceInfoPanel({
         {isArchived ? (
           <>
             <button
-              onClick={() => eventBus.get('mark:unarchive').next({ resourceId: makeResourceId(resourceId) })}
+              onClick={() => session?.client.emit('mark:unarchive', { resourceId: makeResourceId(resourceId) })}
               className="semiont-resource-button semiont-resource-button--secondary"
             >
               📤 {t('unarchive')}
@@ -218,7 +219,7 @@ export function ResourceInfoPanel({
         ) : (
           <>
             <button
-              onClick={() => eventBus.get('mark:archive').next({ resourceId: makeResourceId(resourceId) })}
+              onClick={() => session?.client.emit('mark:archive', { resourceId: makeResourceId(resourceId) })}
               className="semiont-resource-button semiont-resource-button--archive"
             >
               📦 {t('archive')}

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

@@ -5,8 +5,9 @@ import type { components } from '@semiont/core';
 import { getAnnotationExactText } from '@semiont/api-client';
 import { getTagCategory, getTagSchemaId } from '@semiont/ontology';
 import { getTagSchema } from '../../../lib/tag-schemas';
-import { useEventBus } from '../../../contexts/EventBusContext';
-import { useHoverEmitter } from '../../../hooks/useBeckonFlow';
+import { useSemiont } from '../../../session/SemiontProvider';
+import { useObservable } from '../../../hooks/useObservable';
+import { useHoverEmitter } from '../../../hooks/useHoverEmitter';
 
 type Annotation = components['schemas']['Annotation'];
 
@@ -23,7 +24,7 @@ export function TagEntry({
   isHovered = false,
   ref,
 }: TagEntryProps) {
-  const eventBus = useEventBus();
+  const session = useObservable(useSemiont().activeSession$);
   const hoverProps = useHoverEmitter(tag.id);
 
   const selectedText = getAnnotationExactText(tag);
@@ -35,7 +36,7 @@ export function TagEntry({
     <div
       ref={ref}
       onClick={() => {
-        eventBus.get('browse:click').next({ annotationId: tag.id, motivation: tag.motivation });
+        session?.client.emit('browse:click', { annotationId: tag.id, motivation: tag.motivation });
       }}
       {...hoverProps}
       className={`semiont-annotation-entry${isHovered ? ' semiont-annotation-pulse' : ''}`}

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

@@ -2,7 +2,8 @@
 
 import { useState, useEffect, useRef, useCallback, useMemo } from 'react';
 import { useTranslations } from '../../../contexts/TranslationContext';
-import { useEventBus } from '../../../contexts/EventBusContext';
+import { useSemiont } from '../../../session/SemiontProvider';
+import { useObservable } from '../../../hooks/useObservable';
 import { useEventSubscriptions } from '../../../contexts/useEventSubscription';
 import type { components, Selector } from '@semiont/core';
 import { getTextPositionSelector, getTargetSelector } from '@semiont/api-client';
@@ -13,6 +14,7 @@ import './TaggingPanel.css';
 
 type Annotation = components['schemas']['Annotation'];
 type Motivation = components['schemas']['Motivation'];
+type JobProgress = components['schemas']['JobProgress'];
 
 // Unified pending annotation type
 interface PendingAnnotation {
@@ -41,15 +43,7 @@ interface TaggingPanelProps {
   annotations: Annotation[];
   annotateMode?: boolean;
   isAssisting?: boolean;
-  progress?: {
-    status: string;
-    percentage?: number;
-    currentCategory?: string;
-    processedCategories?: number;
-    totalCategories?: number;
-    message?: string;
-    requestParams?: Array<{ label: string; value: string }>;
-  } | null;
+  progress?: JobProgress | null;
   pendingAnnotation: PendingAnnotation | null;
   scrollToAnnotationId?: string | null;
   onScrollCompleted?: () => void;
@@ -75,7 +69,7 @@ export function TaggingPanel({
   hoveredAnnotationId,
 }: TaggingPanelProps) {
   const t = useTranslations('TaggingPanel');
-  const eventBus = useEventBus();
+  const session = useObservable(useSemiont().activeSession$);
   const [selectedSchemaId, setSelectedSchemaId] = useState<string>('legal-irac');
   const [selectedCategories, setSelectedCategories] = useState<Set<string>>(new Set());
   const [focusedAnnotationId, setFocusedAnnotationId] = useState<string | null>(null);
@@ -195,7 +189,7 @@ export function TaggingPanel({
 
   const handleAssist = () => {
     if (selectedCategories.size > 0) {
-      eventBus.get('mark:assist-request').next({
+      session?.client.emit('mark:assist-request', {
         motivation: 'tagging',
         options: {
           schemaId: selectedSchemaId,
@@ -212,13 +206,13 @@ export function TaggingPanel({
 
     const handleEscape = (e: KeyboardEvent) => {
       if (e.key === 'Escape') {
-        eventBus.get('mark:cancel-pending').next(undefined);
+        session?.client.emit('mark:cancel-pending', undefined);
       }
     };
 
     document.addEventListener('keydown', handleEscape);
     return () => document.removeEventListener('keydown', handleEscape);
-  }, [pendingAnnotation]);
+  }, [pendingAnnotation, session]);
 
   // Color schemes are now handled via CSS data attributes
 
@@ -274,7 +268,7 @@ export function TaggingPanel({
                   className="semiont-select"
                   onChange={(e) => {
                     if (e.target.value && pendingAnnotation) {
-                      eventBus.get('mark:submit').next({
+                      session?.client.emit('mark:submit', {
                         motivation: 'tagging',
                         selector: pendingAnnotation.selector,
                         body: [
@@ -305,7 +299,7 @@ export function TaggingPanel({
             {/* Cancel button */}
             <div className="semiont-annotation-prompt__footer">
               <button
-                onClick={() => eventBus.get('mark:cancel-pending').next(undefined)}
+                onClick={() => session?.client.emit('mark:cancel-pending', undefined)}
                 className="semiont-button semiont-button--secondary"
                 data-type="tag"
               >

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

@@ -2,7 +2,8 @@
 
 import React, { useState, useEffect } from 'react';
 import { useTranslations } from '../../../contexts/TranslationContext';
-import type { components, Selector, MarkProgress } from '@semiont/core';
+import type { components, Selector } from '@semiont/core';
+type JobProgress = components['schemas']['JobProgress'];
 import type { RouteBuilder, LinkComponentProps } from '../../../contexts/RoutingContext';
 import type { Annotator } from '../../../lib/annotation-registry';
 import { StatisticsPanel } from './StatisticsPanel';
@@ -47,7 +48,7 @@ interface UnifiedAnnotationsPanelProps {
 
   // Annotation assistance state (per motivation)
   assistingMotivation?: Motivation | null;
-  progress?: MarkProgress | null;
+  progress?: JobProgress | null;
 
   // Unified pending annotation (for creating new annotations)
   pendingAnnotation: PendingAnnotation | null;

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

@@ -5,8 +5,8 @@ import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import '@testing-library/jest-dom';
 import { AssessmentPanel } from '../AssessmentPanel';
-import { EventBusProvider, useEventBus } from '../../../../contexts/EventBusContext';
-import type { components } from '@semiont/core';
+import type { components, EventBus } from '@semiont/core';
+import { createTestSemiontWrapper } from '../../../../test-utils';
 
 type Annotation = components['schemas']['Annotation'];
 
@@ -18,59 +18,27 @@ interface TrackedEvent {
 
 function createEventTracker() {
   const events: TrackedEvent[] = [];
-
-  function EventTrackingWrapper({ children }: { children: React.ReactNode }) {
-    const eventBus = useEventBus();
-
-    React.useEffect(() => {
-      const handlers: Array<() => void> = [];
-
-      const trackEvent = (eventName: string) => (payload: any) => {
-        events.push({ event: eventName, payload });
-      };
-
-      const panelEvents = ['mark:submit'] as const;
-
-      panelEvents.forEach(eventName => {
-        const handler = trackEvent(eventName);
-        const subscription = eventBus.get(eventName).subscribe(handler);
-        handlers.push(subscription);
-      });
-
-      return () => {
-        handlers.forEach(sub => sub.unsubscribe());
-      };
-    }, [eventBus]);
-
-    return <>{children}</>;
-  }
-
   return {
-    EventTrackingWrapper,
     events,
-    clear: () => {
-      events.length = 0;
+    clear: () => { events.length = 0; },
+    _attach(eventBus: EventBus) {
+      const panelEvents = ['mark:submit'] as const;
+      panelEvents.forEach((eventName) => {
+        eventBus.get(eventName).subscribe((payload: any) => {
+          events.push({ event: eventName, payload });
+        });
+      });
     },
   };
 }
 
-// Helper to render with EventBusProvider
 const renderWithEventBus = (component: React.ReactElement, tracker?: ReturnType<typeof createEventTracker>) => {
-  if (tracker) {
-    return render(
-      <EventBusProvider>
-        <tracker.EventTrackingWrapper>
-          {component}
-        </tracker.EventTrackingWrapper>
-      </EventBusProvider>
-    );
-  }
-
-  return render(
-    <EventBusProvider>
-      {component}
-    </EventBusProvider>
+  const { SemiontWrapper, eventBus } = createTestSemiontWrapper();
+  if (tracker) tracker._attach(eventBus);
+  const Wrapper = ({ children }: { children: React.ReactNode }) => (
+    <SemiontWrapper>{children}</SemiontWrapper>
   );
+  return render(component, { wrapper: Wrapper });
 };
 
 // Mock TranslationContext
@@ -108,8 +76,7 @@ vi.mock('../AssessmentEntry', () => ({
   ),
 }));
 
-// Mock AssistSection component - it will internally use the mocked useEventBus
-// Just render a simplified version
+// Mock AssistSection component — just render a simplified version.
 vi.mock('../AssistSection', () => ({
   AssistSection: ({ annotationType, isAssisting }: any) => (
     <div data-testid="detect-section">
@@ -380,7 +347,7 @@ describe('AssessmentPanel Component', () => {
         expect(tracker.events.some(e =>
           e.event === 'mark:submit' &&
           e.payload?.motivation === 'assessing' &&
-          e.payload?.body?.[0]?.value === 'My assessment'
+          e.payload?.body?.value === 'My assessment'
         )).toBe(true);
       });
     });
@@ -421,8 +388,7 @@ describe('AssessmentPanel Component', () => {
         expect(tracker.events.some(e =>
           e.event === 'mark:submit' &&
           e.payload?.motivation === 'assessing' &&
-          Array.isArray(e.payload?.body) &&
-          e.payload.body.length === 0
+          e.payload?.body === undefined
         )).toBe(true);
       });
     });

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

@@ -36,7 +36,10 @@ vi.mock('../../../../contexts/TranslationContext', () => ({
 
 describe('CollaborationPanel Component', () => {
   const defaultProps = {
-    isConnected: false,
+    // `degraded` is the "sustained disconnect" state — matches the
+    // pre-state-machine `isConnected: false` default, which was always
+    // used in tests to mean "the UI should show Disconnected."
+    state: 'degraded' as const,
     eventCount: 0,
   };
 
@@ -72,19 +75,19 @@ describe('CollaborationPanel Component', () => {
 
   describe('Connection Status', () => {
     it('should show disconnected status when not connected', () => {
-      render(<CollaborationPanel {...defaultProps} isConnected={false} />);
+      render(<CollaborationPanel {...defaultProps} state="degraded" />);
 
       expect(screen.getByText('Disconnected')).toBeInTheDocument();
     });
 
     it('should show live status when connected', () => {
-      render(<CollaborationPanel {...defaultProps} isConnected={true} />);
+      render(<CollaborationPanel {...defaultProps} state="open" />);
 
       expect(screen.getByText('Live')).toBeInTheDocument();
     });
 
     it('should show indicator when disconnected', () => {
-      const { container } = render(<CollaborationPanel {...defaultProps} isConnected={false} />);
+      const { container } = render(<CollaborationPanel {...defaultProps} state="degraded" />);
 
       const indicator = container.querySelector('.semiont-collaboration-panel__dot');
       expect(indicator).toBeInTheDocument();
@@ -92,7 +95,7 @@ describe('CollaborationPanel Component', () => {
     });
 
     it('should show indicator when connected', () => {
-      const { container } = render(<CollaborationPanel {...defaultProps} isConnected={true} />);
+      const { container } = render(<CollaborationPanel {...defaultProps} state="open" />);
 
       const indicator = container.querySelector('.semiont-collaboration-panel__dot');
       expect(indicator).toBeInTheDocument();
@@ -100,7 +103,7 @@ describe('CollaborationPanel Component', () => {
     });
 
     it('should use appropriate status text for disconnected state', () => {
-      render(<CollaborationPanel {...defaultProps} isConnected={false} />);
+      render(<CollaborationPanel {...defaultProps} state="degraded" />);
 
       const statusText = screen.getByText('Disconnected');
       expect(statusText).toHaveClass('semiont-collaboration-panel__status-text');
@@ -108,35 +111,63 @@ describe('CollaborationPanel Component', () => {
     });
 
     it('should use appropriate status text for connected state', () => {
-      render(<CollaborationPanel {...defaultProps} isConnected={true} />);
+      render(<CollaborationPanel {...defaultProps} state="open" />);
 
       const statusText = screen.getByText('Live');
       expect(statusText).toHaveClass('semiont-collaboration-panel__status-text');
       expect(statusText).toHaveAttribute('data-connected', 'true');
     });
+
+    // ── State-machine aware cases (post-CONNECTION-STATE) ─────────────
+    // These exercise the core reason CONNECTION-STATE exists: brief
+    // reconnect/connect cycles must NOT flash "Disconnected", or
+    // Strict-Mode mount churn makes the UI lie.
+
+    it('shows Live during brief `reconnecting` (does not alarm on churn)', () => {
+      render(<CollaborationPanel {...defaultProps} state="reconnecting" />);
+      expect(screen.getByText('Live')).toBeInTheDocument();
+      expect(screen.queryByText('Disconnected')).not.toBeInTheDocument();
+    });
+
+    it('shows Live during `connecting` and `initial`', () => {
+      const { rerender } = render(<CollaborationPanel {...defaultProps} state="connecting" />);
+      expect(screen.getByText('Live')).toBeInTheDocument();
+      rerender(<CollaborationPanel {...defaultProps} state="initial" />);
+      expect(screen.getByText('Live')).toBeInTheDocument();
+    });
+
+    it('shows Disconnected on `degraded` (sustained disconnect)', () => {
+      render(<CollaborationPanel {...defaultProps} state="degraded" />);
+      expect(screen.getByText('Disconnected')).toBeInTheDocument();
+    });
+
+    it('shows Disconnected on `closed` (terminal)', () => {
+      render(<CollaborationPanel {...defaultProps} state="closed" />);
+      expect(screen.getByText('Disconnected')).toBeInTheDocument();
+    });
   });
 
   describe('Event Count', () => {
     it('should not show event count when zero', () => {
-      render(<CollaborationPanel {...defaultProps} isConnected={true} eventCount={0} />);
+      render(<CollaborationPanel {...defaultProps} state="open" eventCount={0} />);
 
       expect(screen.queryByText(/event/i)).not.toBeInTheDocument();
     });
 
     it('should show event count when connected and greater than zero', () => {
-      render(<CollaborationPanel {...defaultProps} isConnected={true} eventCount={5} />);
+      render(<CollaborationPanel {...defaultProps} state="open" eventCount={5} />);
 
       expect(screen.getByText(/event/i)).toBeInTheDocument();
     });
 
     it('should not show event count when disconnected', () => {
-      render(<CollaborationPanel {...defaultProps} isConnected={false} eventCount={5} />);
+      render(<CollaborationPanel {...defaultProps} state="degraded" eventCount={5} />);
 
       expect(screen.queryByText(/event/i)).not.toBeInTheDocument();
     });
 
     it('should display correct event count', () => {
-      render(<CollaborationPanel {...defaultProps} isConnected={true} eventCount={42} />);
+      render(<CollaborationPanel {...defaultProps} state="open" eventCount={42} />);
 
       // The translation will have ${count} in it
       expect(screen.getByText(/event/i)).toBeInTheDocument();
@@ -267,13 +298,13 @@ describe('CollaborationPanel Component', () => {
 
   describe('Real-time Status Messages', () => {
     it('should show "real-time active" when connected', () => {
-      render(<CollaborationPanel {...defaultProps} isConnected={true} />);
+      render(<CollaborationPanel {...defaultProps} state="open" />);
 
       expect(screen.getByText('Real-time synchronization active')).toBeInTheDocument();
     });
 
     it('should show "reconnecting" when disconnected', () => {
-      render(<CollaborationPanel {...defaultProps} isConnected={false} />);
+      render(<CollaborationPanel {...defaultProps} state="degraded" />);
 
       expect(screen.getByText('Reconnecting...')).toBeInTheDocument();
     });
@@ -281,11 +312,11 @@ describe('CollaborationPanel Component', () => {
 
   describe('Dynamic Updates', () => {
     it('should update when connection status changes', () => {
-      const { rerender } = render(<CollaborationPanel {...defaultProps} isConnected={false} />);
+      const { rerender } = render(<CollaborationPanel {...defaultProps} state="degraded" />);
 
       expect(screen.getByText('Disconnected')).toBeInTheDocument();
 
-      rerender(<CollaborationPanel {...defaultProps} isConnected={true} />);
+      rerender(<CollaborationPanel {...defaultProps} state="open" />);
 
       expect(screen.getByText('Live')).toBeInTheDocument();
       expect(screen.queryByText('Disconnected')).not.toBeInTheDocument();
@@ -293,12 +324,12 @@ describe('CollaborationPanel Component', () => {
 
     it('should update when event count changes', () => {
       const { rerender } = render(
-        <CollaborationPanel {...defaultProps} isConnected={true} eventCount={5} />
+        <CollaborationPanel {...defaultProps} state="open" eventCount={5} />
       );
 
       expect(screen.getByText(/event/i)).toBeInTheDocument();
 
-      rerender(<CollaborationPanel {...defaultProps} isConnected={true} eventCount={10} />);
+      rerender(<CollaborationPanel {...defaultProps} state="open" eventCount={10} />);
 
       expect(screen.getByText(/event/i)).toBeInTheDocument();
     });
@@ -371,7 +402,7 @@ describe('CollaborationPanel Component', () => {
     it('should handle very large event counts', () => {
       expect(() => {
         render(
-          <CollaborationPanel {...defaultProps} isConnected={true} eventCount={999999} />
+          <CollaborationPanel {...defaultProps} state="open" eventCount={999999} />
         );
       }).not.toThrow();
     });
@@ -379,7 +410,7 @@ describe('CollaborationPanel Component', () => {
     it('should handle negative event counts', () => {
       expect(() => {
         render(
-          <CollaborationPanel {...defaultProps} isConnected={true} eventCount={-5} />
+          <CollaborationPanel {...defaultProps} state="open" eventCount={-5} />
         );
       }).not.toThrow();
     });
@@ -432,7 +463,7 @@ describe('CollaborationPanel Component', () => {
     });
 
     it('should have visible status indicators', () => {
-      const { container } = render(<CollaborationPanel {...defaultProps} isConnected={true} />);
+      const { container } = render(<CollaborationPanel {...defaultProps} state="open" />);
 
       // Should have a visible status dot
       const indicator = container.querySelector('.semiont-collaboration-panel__dot');