@semiont/react-ui 0.4.20 → 0.4.22

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');

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

@@ -8,7 +8,7 @@ import { CommentEntry } from '../CommentEntry';
 import type { components } from '@semiont/core';
 import type { EventBus } from "@semiont/core"
 
-type Annotation = components['schemas']['Annotation'];
+import type { Annotation } from '@semiont/core';
 
 // Mock TranslationContext
 vi.mock('../../../../contexts/TranslationContext', () => ({
@@ -24,8 +24,8 @@ vi.mock('../../../../contexts/TranslationContext', () => ({
 }));
 
 // Mock @semiont/api-client utilities
-vi.mock('@semiont/api-client', async () => {
-  const actual = await vi.importActual('@semiont/api-client');
+vi.mock('@semiont/core', async () => {
+  const actual = await vi.importActual('@semiont/core');
   return {
     ...actual,
     getCommentText: vi.fn(),
@@ -33,7 +33,7 @@ vi.mock('@semiont/api-client', async () => {
   };
 });
 
-import { getCommentText, getAnnotationExactText } from '@semiont/api-client';
+import { getCommentText, getAnnotationExactText } from '@semiont/core';
 import type { MockedFunction } from 'vitest';
 
 const mockGetCommentText = getCommentText as MockedFunction<typeof getCommentText>;

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

@@ -5,10 +5,10 @@ import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import '@testing-library/jest-dom';
 import { CommentsPanel } from '../CommentsPanel';
-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'];
+import type { Annotation } from '@semiont/core';
 
 // Composition-based event tracker
 interface TrackedEvent {
@@ -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
@@ -89,8 +57,8 @@ vi.mock('../../../../contexts/TranslationContext', () => ({
 }));
 
 // Mock @semiont/api-client utilities
-vi.mock('@semiont/api-client', async () => {
-  const actual = await vi.importActual('@semiont/api-client');
+vi.mock('@semiont/core', async () => {
+  const actual = await vi.importActual('@semiont/core');
   return {
     ...actual,
     getTextPositionSelector: vi.fn(),
@@ -116,8 +84,7 @@ vi.mock('../CommentEntry', () => ({
   ),
 }));
 
-import { getTextPositionSelector, getTargetSelector } from '@semiont/api-client';
-
+import { getTextPositionSelector, getTargetSelector } from '@semiont/core';
 const mockGetTextPositionSelector = getTextPositionSelector as MockedFunction<typeof getTextPositionSelector>;
 const mockGetTargetSelector = getTargetSelector as MockedFunction<typeof getTargetSelector>;
 
@@ -270,9 +237,7 @@ describe('CommentsPanel Component', () => {
       ];
 
       rerender(
-        <EventBusProvider>
-          <CommentsPanel {...defaultProps} annotations={updatedComments} />
-        </EventBusProvider>
+        <CommentsPanel {...defaultProps} annotations={updatedComments} />
       );
 
       const comments = screen.getAllByTestId(/comment-/);
@@ -600,9 +565,7 @@ describe('CommentsPanel Component', () => {
           createMockComment(`${j + 1}`, j * 10, (j + 1) * 10)
         );
         rerender(
-          <EventBusProvider>
-            <CommentsPanel {...defaultProps} annotations={comments} />
-          </EventBusProvider>
+          <CommentsPanel {...defaultProps} annotations={comments} />
         );
       }
 
@@ -617,9 +580,7 @@ describe('CommentsPanel Component', () => {
       expect(screen.getAllByTestId(/comment-/)).toHaveLength(3);
 
       rerender(
-        <EventBusProvider>
-          <CommentsPanel {...defaultProps} annotations={mockComments.single} />
-        </EventBusProvider>
+        <CommentsPanel {...defaultProps} annotations={mockComments.single} />
       );
 
       expect(screen.getAllByTestId(/comment-/)).toHaveLength(1);

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

@@ -6,18 +6,18 @@ import { renderWithProviders } from '../../../../test-utils';
 import userEvent from '@testing-library/user-event';
 import type { components } from '@semiont/core';
 
-type Annotation = components['schemas']['Annotation'];
+import type { Annotation } from '@semiont/core';
 
 // Mock @semiont/api-client
-vi.mock('@semiont/api-client', async () => {
-  const actual = await vi.importActual('@semiont/api-client');
+vi.mock('@semiont/core', async () => {
+  const actual = await vi.importActual('@semiont/core');
   return {
     ...actual,
     getAnnotationExactText: vi.fn(),
   };
 });
 
-import { getAnnotationExactText } from '@semiont/api-client';
+import { getAnnotationExactText } from '@semiont/core';
 import type { MockedFunction } from 'vitest';
 import { HighlightEntry } from '../HighlightEntry';
 

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

@@ -18,7 +18,7 @@ import { renderWithProviders } from '../../../../test-utils';
 import { HighlightPanel } from '../HighlightPanel';
 import type { components } from '@semiont/core';
 
-type Annotation = components['schemas']['Annotation'];
+import type { Annotation } from '@semiont/core';
 
 // Mock translations - simulates useTranslations('HighlightPanel')
 // The mock receives keys like 'title', 'noHighlights', etc. and returns translated strings
@@ -57,7 +57,6 @@ describe('HighlightPanel + AssistSection Integration', () => {
       {
         id: 'highlight-1',
         motivation: 'highlighting',
-        body: [],
         target: {
           source: 'resource-1',
           selector: {

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

@@ -5,10 +5,10 @@ import '@testing-library/jest-dom';
 import { renderWithProviders } from '../../../../test-utils';
 import userEvent from '@testing-library/user-event';
 import type { components } from '@semiont/core';
-import { SemiontApiClient } from '@semiont/api-client';
+import { BindNamespace } from '@semiont/sdk';
 import type { RouteBuilder } from '../../../../contexts/RoutingContext';
 
-type Annotation = components['schemas']['Annotation'];
+import type { Annotation } from '@semiont/core';
 
 // Stable mock functions defined outside vi.mock to avoid re-render loops
 const mockGetAnnotationExactText = vi.fn();
@@ -21,8 +21,8 @@ const mockGetEntityTypes = vi.fn();
 const mockNavigate = vi.fn();
 const mockHoverProps = { onMouseEnter: vi.fn(), onMouseLeave: vi.fn() };
 
-vi.mock('@semiont/api-client', async () => {
-  const actual = await vi.importActual('@semiont/api-client');
+vi.mock('@semiont/core', async () => {
+  const actual = await vi.importActual('@semiont/core');
   return {
     ...actual,
     getAnnotationExactText: (...args: unknown[]) => mockGetAnnotationExactText(...args),
@@ -46,7 +46,7 @@ vi.mock('../../../../hooks/useObservableBrowse', () => ({
   useObservableExternalNavigation: () => mockNavigate,
 }));
 
-vi.mock('../../../../hooks/useBeckonFlow', () => ({
+vi.mock('../../../../hooks/useHoverEmitter', () => ({
   useHoverEmitter: () => mockHoverProps,
 }));
 
@@ -308,7 +308,7 @@ describe('ReferenceEntry', () => {
       mockIsBodyResolved.mockReturnValue(true);
       mockGetBodySource.mockReturnValue('linked-doc');
 
-      const bindSpy = vi.spyOn(SemiontApiClient.prototype, 'bindAnnotation').mockResolvedValue({ correlationId: 'c1' });
+      const bindSpy = vi.spyOn(BindNamespace.prototype, 'body').mockResolvedValue(undefined);
 
       const { container } = renderWithProviders(
         <ReferenceEntry {...defaultProps} annotateMode={true} />,
@@ -320,8 +320,7 @@ describe('ReferenceEntry', () => {
       expect(bindSpy).toHaveBeenCalledWith(
         'resource-1',
         'ref-1',
-        { operations: [{ op: 'remove', item: { type: 'SpecificResource', source: 'linked-doc', purpose: 'linking' } }] },
-        expect.anything(),
+        [{ op: 'remove', item: { type: 'SpecificResource', source: 'linked-doc', purpose: 'linking' } }],
       );
 
       bindSpy.mockRestore();

package/src/components/resource/panels/__tests__/ReferencesPanel.observable-flow.test.tsx

@@ -0,0 +1,153 @@
+/**
+ * Triangulation test for the VM → useObservable → prop → chip render chain.
+ *
+ * Written after an e2e failure (test 05) where `ReferencesPanel` rendered
+ * "No entity types available" even though the client provably received a
+ * 9-string entity-types array from the backend.
+ *
+ * This test closes the Layer 5-6 gap: the existing `ResourceViewerPage.test.tsx`
+ * stubs `UnifiedAnnotationsPanel`/`ReferencesPanel` as `<div data-testid>`s,
+ * so it never verifies that an observable emitting [9 strings] actually
+ * produces 9 chips in the DOM. This test does.
+ *
+ * If this test passes and the e2e still fails, the bug is further upstream
+ * (BrowseNamespace wiring, multiple ApiClient instances, SSE delivery).
+ * If it fails, the bug is here in component-land.
+ */
+
+import { describe, it, expect, vi } from 'vitest';
+import React from 'react';
+import { render, screen, act } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { BehaviorSubject } from 'rxjs';
+import { ReferencesPanel } from '../ReferencesPanel';
+import { createTestSemiontWrapper } from '../../../../test-utils';
+import { useObservable } from '../../../../hooks/useObservable';
+
+// Match ReferencesPanel.test.tsx's i18n mocking so the test doesn't
+// depend on a real translation setup.
+vi.mock('../../../../contexts/TranslationContext', () => ({
+  useTranslations: () => (key: string) => {
+    const map: Record<string, string> = {
+      title: 'References',
+      annotateReferences: 'Annotate References',
+      entityTypesOptional: 'Entity types',
+      noEntityTypes: 'No entity types available',
+      selectEntityTypes: 'Select entity types',
+      includeDescriptiveReferences: 'Include descriptive references',
+      cancel: 'Cancel',
+      createReference: 'Create Reference',
+      outgoingReferences: 'Outgoing References',
+      incomingReferences: 'Incoming References',
+      noIncomingReferences: 'No incoming references',
+      fragmentSelected: 'Fragment selected',
+      annotate: 'Annotate',
+      start: 'Start',
+    };
+    return map[key] ?? key;
+  },
+}));
+
+vi.mock('../AssistSection', () => ({
+  AssistSection: () => null,
+  AnnotateReferencesProgressWidget: () => null,
+}));
+
+const NINE_TYPES = [
+  'Author', 'Concept', 'Date', 'Event', 'Location',
+  'Organization', 'Person', 'Product', 'Technology',
+];
+
+const MockLink: React.FC<{ href?: string; children?: React.ReactNode }> = ({ children }) => <>{children}</>;
+const mockRoutes = { resourceDetail: (id: string) => `/resource/${id}` } as any;
+
+/**
+ * Thin harness: subscribes to a BehaviorSubject via useObservable (the
+ * same hook ResourceViewerPage uses for vm.entityTypes$) and forwards
+ * its value into ReferencesPanel as `allEntityTypes`.
+ */
+function ObservableHarness({ source$ }: { source$: BehaviorSubject<string[]> }) {
+  const entityTypes = useObservable(source$) ?? [];
+  return (
+    <ReferencesPanel
+      annotations={[]}
+      isAssisting={false}
+      progress={null}
+      annotateMode={true}
+      Link={MockLink}
+      routes={mockRoutes}
+      allEntityTypes={entityTypes}
+      pendingAnnotation={{
+        motivation: 'linking',
+        selector: { type: 'TextQuoteSelector', exact: 'te' },
+      } as any}
+    />
+  );
+}
+
+const renderWithBus = (ui: React.ReactElement) => {
+  const { SemiontWrapper } = createTestSemiontWrapper();
+  return render(<SemiontWrapper>{ui}</SemiontWrapper>);
+};
+
+describe('Layer 5-6 — VM observable → useObservable → ReferencesPanel chips', () => {
+  it('an observable seeded with [9 strings] renders 9 pending-reference chips', async () => {
+    const source$ = new BehaviorSubject<string[]>(NINE_TYPES);
+    renderWithBus(<ObservableHarness source$={source$} />);
+
+    // Wait for useEffect in useObservable to run and commit the value.
+    const chips = await screen.findAllByRole('button', { name: (_, el) =>
+      el.classList.contains('semiont-tag-selector__item') ?? false,
+    });
+    expect(chips).toHaveLength(NINE_TYPES.length);
+  });
+
+  it('transition [] → [9 strings] re-renders with 9 chips', async () => {
+    // This is the production timeline: the Cache emits undefined (mapped
+    // to []) first, then the 9-string array once fetch resolves. The
+    // prop chain must survive this transition.
+    const source$ = new BehaviorSubject<string[]>([]);
+    renderWithBus(<ObservableHarness source$={source$} />);
+
+    // Initially: no chips (the gate is allEntityTypes.length > 0).
+    expect(document.querySelectorAll('.semiont-tag-selector__item').length).toBe(0);
+
+    await act(async () => {
+      source$.next(NINE_TYPES);
+      // Let useObservable's setState flush.
+      await new Promise((r) => setTimeout(r, 0));
+    });
+
+    expect(document.querySelectorAll('.semiont-tag-selector__item').length).toBe(NINE_TYPES.length);
+  });
+
+  it('[9 strings] with duplicate emissions (simulating SSE-duplicate deliveries) renders 9 chips', async () => {
+    // The failing e2e run showed the same correlationId delivered 3x due
+    // to concurrent SSE streams. Same data, but multiple BehaviorSubject
+    // writes. Must not clobber the render.
+    const source$ = new BehaviorSubject<string[]>([]);
+    renderWithBus(<ObservableHarness source$={source$} />);
+
+    await act(async () => {
+      source$.next(NINE_TYPES);
+      source$.next([...NINE_TYPES]); // same content, new reference
+      source$.next([...NINE_TYPES]);
+      await new Promise((r) => setTimeout(r, 0));
+    });
+
+    expect(document.querySelectorAll('.semiont-tag-selector__item').length).toBe(NINE_TYPES.length);
+  });
+
+  it('no regression: [] still renders "No entity types available"', () => {
+    // Confirms the control case: an empty observable does render the
+    // message the failing e2e saw. Guards against the test passing
+    // trivially because of a selector bug.
+    const source$ = new BehaviorSubject<string[]>([]);
+    renderWithBus(<ObservableHarness source$={source$} />);
+
+    // There are two such text nodes in the panel (pending prompt + assist
+    // section), but both correspond to the same allEntityTypes=[] state.
+    const msg = screen.queryAllByText(/no entity types available/i);
+    expect(msg.length).toBeGreaterThan(0);
+  });
+});