@semiont/react-ui 0.5.5 → 0.5.6

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

@@ -1,16 +1,16 @@
 import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
 import type { MockedFunction } from 'vitest';
 import React from 'react';
-import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import '@testing-library/jest-dom';
 import { of } from 'rxjs';
 import { CacheObservable } from '@semiont/sdk';
 import { TaggingPanel } from '../TaggingPanel';
-import type { components, EventBus, TagSchema } from '@semiont/core';
+import type { EventBus, TagSchema } from '@semiont/core';
 import { createTestSemiontWrapper } from '../../../../test-utils';
 
-import type { Annotation } from '@semiont/core';
+import type { Annotation, AnnotationId } from '@semiont/core';
 
 // Composition-based event tracker
 interface TrackedEvent {
@@ -124,7 +124,7 @@ vi.mock('@semiont/core', async () => {
 
 // Mock TagEntry component to simplify testing
 vi.mock('../TagEntry', () => ({
-  TagEntry: ({ tag, onTagRef }: any) => (
+  TagEntry: ({ tag }: any) => (
     <div data-testid={`tag-${tag.id}`}>
       <div>{tag.id}</div>
     </div>
@@ -138,10 +138,11 @@ const mockGetTargetSelector = getTargetSelector as MockedFunction<typeof getTarg
 // Test data fixtures
 const createMockTag = (id: string, start: number, end: number, tagName: string = 'Issue'): Annotation => ({
   '@context': 'http://www.w3.org/ns/anno.jsonld',
-  id,
+  id: id as AnnotationId,
   type: 'Annotation',
   motivation: 'tagging',
   creator: {
+    '@type': 'Person',
     name: `user${id}@example.com`,
   },
   created: `2024-01-0${id.slice(-1)}T10:00:00Z`,

package/src/components/settings/__tests__/SettingsPanel.test.tsx

@@ -1,5 +1,4 @@
 import { describe, it, expect, beforeEach, vi } from 'vitest';
-import React from 'react';
 import { screen, fireEvent } from '@testing-library/react';
 import { renderWithProviders } from '../../../test-utils';
 import '@testing-library/jest-dom';

package/src/components/viewers/__tests__/ImageViewer.test.tsx

@@ -1,5 +1,4 @@
 import { describe, it, expect } from 'vitest';
-import React from 'react';
 import { screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { renderWithProviders } from '../../../test-utils';

package/src/features/auth/__tests__/SignInForm.a11y.test.tsx

@@ -45,6 +45,8 @@ const mockTranslations = {
   errorEmailRequired: 'Email is required',
   errorPasswordRequired: 'Password is required',
   errorBackendUrlRequired: 'Backend URL is required',
+  errorBackendUrlInvalid: 'Backend URL is not valid',
+  errorBackendUrlUnreachable: 'Backend URL is unreachable',
   tagline: 'make meaning',
 };
 

package/src/features/auth/__tests__/SignUpForm.a11y.test.tsx

@@ -54,7 +54,7 @@ describe('SignUpForm - Accessibility', () => {
     });
 
     it('should have no accessibility violations during loading state', async () => {
-      const onSignUp = vi.fn(() => new Promise(() => {})); // Never resolves
+      const onSignUp = vi.fn<() => Promise<void>>(() => new Promise<void>(() => {})); // Never resolves
 
       const { container } = render(
         <SignUpForm
@@ -138,7 +138,7 @@ describe('SignUpForm - Accessibility', () => {
     });
 
     it('should disable button during loading state', async () => {
-      const onSignUp = vi.fn(() => new Promise(() => {}));
+      const onSignUp = vi.fn<() => Promise<void>>(() => new Promise<void>(() => {}));
 
       render(
         <SignUpForm
@@ -197,13 +197,12 @@ describe('SignUpForm - Accessibility', () => {
     it('should have Google icon inside button', () => {
       const onSignUp = vi.fn();
 
-      const { container } = render(
-        <SignUpForm
-          onSignUp={onSignUp}
-          Link={MockLink}
-          translations={mockTranslations}
-        />
-      );
+      render(
+<SignUpForm
+onSignUp={onSignUp}
+Link={MockLink}
+translations={mockTranslations} />
+);
 
       const button = screen.getByRole('button');
       const svg = button.querySelector('svg');
@@ -214,7 +213,7 @@ describe('SignUpForm - Accessibility', () => {
     });
 
     it('should show loading spinner during sign-up', async () => {
-      const onSignUp = vi.fn(() => new Promise(() => {}));
+      const onSignUp = vi.fn<() => Promise<void>>(() => new Promise<void>(() => {}));
 
       const { container } = render(
         <SignUpForm
@@ -349,7 +348,7 @@ describe('SignUpForm - Accessibility', () => {
 
   describe('Loading State Accessibility', () => {
     it('should announce loading state to screen readers', async () => {
-      const onSignUp = vi.fn(() => new Promise(() => {}));
+      const onSignUp = vi.fn<() => Promise<void>>(() => new Promise<void>(() => {}));
 
       render(
         <SignUpForm
@@ -368,7 +367,7 @@ describe('SignUpForm - Accessibility', () => {
     });
 
     it('should maintain button focus during loading', async () => {
-      const onSignUp = vi.fn(() => new Promise(() => {}));
+      const onSignUp = vi.fn<() => Promise<void>>(() => new Promise<void>(() => {}));
 
       render(
         <SignUpForm

package/src/features/auth/__tests__/SignUpForm.test.tsx

@@ -53,7 +53,7 @@ describe('SignUpForm', () => {
 
   describe('Sign-Up Interaction', () => {
     it('calls onSignUp when button is clicked', async () => {
-      const onSignUp = vi.fn<[], Promise<void>>().mockResolvedValue(undefined);
+      const onSignUp = vi.fn<() => Promise<void>>().mockResolvedValue(undefined);
       render(<SignUpForm onSignUp={onSignUp} Link={MockLink} translations={mockTranslations} />);
 
       const button = screen.getByRole('button', { name: /Continue with Google/i });
@@ -63,7 +63,7 @@ describe('SignUpForm', () => {
     });
 
     it('shows loading state while signing up', async () => {
-      const onSignUp = vi.fn<[], Promise<void>>(() => new Promise<void>((resolve) => setTimeout(resolve, 100)));
+      const onSignUp = vi.fn<() => Promise<void>>(() => new Promise<void>((resolve) => setTimeout(resolve, 100)));
       render(<SignUpForm onSignUp={onSignUp} Link={MockLink} translations={mockTranslations} />);
 
       const button = screen.getByRole('button');
@@ -83,7 +83,7 @@ describe('SignUpForm', () => {
     });
 
     it('disables button during loading', async () => {
-      const onSignUp = vi.fn<[], Promise<void>>(() => new Promise<void>((resolve) => setTimeout(resolve, 100)));
+      const onSignUp = vi.fn<() => Promise<void>>(() => new Promise<void>((resolve) => setTimeout(resolve, 100)));
       render(<SignUpForm onSignUp={onSignUp} Link={MockLink} translations={mockTranslations} />);
 
       const button = screen.getByRole('button');

package/src/features/moderate-tag-schemas/components/TagSchemasPage.tsx

@@ -13,6 +13,7 @@ import {
 } from '@heroicons/react/24/outline';
 import { COMMON_PANELS, type ToolbarPanelType } from '../../../state/shell-state-unit';
 import type { TagSchema } from '@semiont/sdk';
+export type { TagSchema };
 
 export interface TagSchemasPageProps {
   // Data props

package/src/features/resource-compose/__tests__/ResourceComposePage.test.tsx

@@ -8,7 +8,7 @@
 import { describe, it, expect, vi } from 'vitest';
 import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 import { ResourceComposePage } from '../components/ResourceComposePage';
-import type { ResourceComposePageProps, SaveResourceParams } from '../components/ResourceComposePage';
+import type { ResourceComposePageProps } from '../components/ResourceComposePage';
 import { createTestSemiontWrapper } from '../../../test-utils';
 
 // Mock CodeMirrorRenderer to avoid CodeMirror dependencies
@@ -63,6 +63,7 @@ const createMockProps = (overrides?: Partial<ResourceComposePageProps>): Resourc
   initialLocale: 'en',
   theme: 'light',
   showLineNumbers: false,
+  hoverDelayMs: 0,
   activePanel: null,
   onSaveResource: vi.fn().mockResolvedValue(undefined),
   onCancel: vi.fn(),

package/src/features/resource-discovery/__tests__/ResourceCard.test.tsx

@@ -7,7 +7,6 @@
 import { describe, it, expect, vi } from 'vitest';
 import { render, screen, fireEvent } from '@testing-library/react';
 import { ResourceCard } from '../components/ResourceCard';
-import type { ResourceCardProps } from '../components/ResourceCard';
 
 const createMockResource = (overrides?: any) => ({
   '@context': 'https://www.w3.org/ns/anno.jsonld',

package/src/features/resource-discovery/__tests__/ResourceDiscoveryPage.test.tsx

@@ -10,10 +10,12 @@ import { render, screen, fireEvent } from '@testing-library/react';
 import { ResourceDiscoveryPage } from '../components/ResourceDiscoveryPage';
 import type { ResourceDiscoveryPageProps } from '../components/ResourceDiscoveryPage';
 import { createTestSemiontWrapper } from '../../../test-utils';
+import { resourceId } from '@semiont/core';
+import type { ResourceDescriptor } from '@semiont/core';
 
-const createMockResource = (id: string, name: string, entityTypes: string[] = []) => ({
+const createMockResource = (id: string, name: string, entityTypes: string[] = []): ResourceDescriptor => ({
   '@context': 'https://www.w3.org/ns/anno.jsonld',
-  '@id': id,
+  '@id': resourceId(id),
   '@type': 'schema:DigitalDocument',
   name,
   description: `Description for ${name}`,
@@ -31,6 +33,8 @@ const createMockProps = (overrides?: Partial<ResourceDiscoveryPageProps>): Resou
   isSearching: false,
   searchQuery: '',
   onSearchQueryChange: vi.fn(),
+  selectedEntityType: '',
+  onSelectedEntityTypeChange: vi.fn(),
   theme: 'light',
   showLineNumbers: false,
   activePanel: null,
@@ -254,65 +258,59 @@ describe('ResourceDiscoveryPage', () => {
       expect(screen.getByRole('button', { name: 'Report' })).toBeInTheDocument();
     });
 
-    it('filters documents by entity type', () => {
+    it('calls onSelectedEntityTypeChange when a filter chip is clicked', () => {
+      const onSelectedEntityTypeChange = vi.fn();
       const props = createMockProps({
-        recentDocuments: [
-          createMockResource('1', 'Doc 1', ['Document']),
-          createMockResource('2', 'Doc 2', ['Article']),
-          createMockResource('3', 'Doc 3', ['Document']),
-        ],
         entityTypes: ['Document', 'Article'],
+        onSelectedEntityTypeChange,
       });
       renderWithProviders(<ResourceDiscoveryPage {...props} />);
 
-      // Initially all documents shown
-      expect(screen.getByText('Doc 1')).toBeInTheDocument();
-      expect(screen.getByText('Doc 2')).toBeInTheDocument();
-      expect(screen.getByText('Doc 3')).toBeInTheDocument();
-
-      // Filter by Document
-      const documentButton = screen.getByRole('button', { name: 'Document' });
-      fireEvent.click(documentButton);
+      fireEvent.click(screen.getByRole('button', { name: 'Document' }));
+      expect(onSelectedEntityTypeChange).toHaveBeenCalledWith('Document');
 
-      expect(screen.getByText('Doc 1')).toBeInTheDocument();
-      expect(screen.queryByText('Doc 2')).not.toBeInTheDocument();
-      expect(screen.getByText('Doc 3')).toBeInTheDocument();
+      fireEvent.click(screen.getByRole('button', { name: 'Article' }));
+      expect(onSelectedEntityTypeChange).toHaveBeenCalledWith('Article');
     });
 
-    it('shows filtered heading when entity type selected', () => {
+    it('shows filtered heading when selectedEntityType prop is set', () => {
       const props = createMockProps({
         recentDocuments: [createMockResource('1', 'Doc 1', ['Document'])],
         entityTypes: ['Document'],
+        selectedEntityType: 'Document',
       });
       renderWithProviders(<ResourceDiscoveryPage {...props} />);
 
-      const documentButton = screen.getByRole('button', { name: 'Document' });
-      fireEvent.click(documentButton);
-
       expect(screen.getByText('Documents tagged with Document')).toBeInTheDocument();
     });
 
-    it('resets filter when "All" button clicked', () => {
+    it('calls onSelectedEntityTypeChange with empty string when "All" is clicked', () => {
+      const onSelectedEntityTypeChange = vi.fn();
+      const props = createMockProps({
+        entityTypes: ['Document', 'Article'],
+        selectedEntityType: 'Document',
+        onSelectedEntityTypeChange,
+      });
+      renderWithProviders(<ResourceDiscoveryPage {...props} />);
+
+      fireEvent.click(screen.getByRole('button', { name: 'All' }));
+      expect(onSelectedEntityTypeChange).toHaveBeenCalledWith('');
+    });
+
+    it('renders the recentDocuments prop as-is without applying any post-filter', () => {
+      // The component is now controlled — backend filtering means
+      // `recentDocuments` already contains only the resources matching the
+      // active `selectedEntityType`. The component must not re-filter.
       const props = createMockProps({
         recentDocuments: [
           createMockResource('1', 'Doc 1', ['Document']),
           createMockResource('2', 'Doc 2', ['Article']),
         ],
         entityTypes: ['Document', 'Article'],
+        selectedEntityType: 'Document',
       });
       renderWithProviders(<ResourceDiscoveryPage {...props} />);
 
-      // Filter by Document
-      const documentButton = screen.getByRole('button', { name: 'Document' });
-      fireEvent.click(documentButton);
-
-      expect(screen.getByText('Doc 1')).toBeInTheDocument();
-      expect(screen.queryByText('Doc 2')).not.toBeInTheDocument();
-
-      // Click All
-      const allButton = screen.getByRole('button', { name: 'All' });
-      fireEvent.click(allButton);
-
       expect(screen.getByText('Doc 1')).toBeInTheDocument();
       expect(screen.getByText('Doc 2')).toBeInTheDocument();
     });

package/src/features/resource-discovery/components/ResourceDiscoveryPage.tsx

@@ -5,7 +5,7 @@
  * All dependencies passed as props - no Next.js hooks!
  */
 
-import React, { useState, useCallback, useRef } from 'react';
+import React, { useCallback, useRef } from 'react';
 import { getResourceId } from '@semiont/core';
 import { COMMON_PANELS, type ToolbarPanelType } from '../../../state/shell-state-unit';
 import { useRovingTabIndex } from '../../../hooks/useRovingTabIndex';
@@ -26,6 +26,11 @@ export interface ResourceDiscoveryPageProps {
   searchQuery: string;
   onSearchQueryChange: (query: string) => void;
 
+  // Controlled entity-type filter — owned by the state unit so filtering
+  // pushes to the backend rather than running as a post-fetch array filter.
+  selectedEntityType: string;
+  onSelectedEntityTypeChange: (entityType: string) => void;
+
   // UI state props
   theme: 'light' | 'dark';
   showLineNumbers: boolean;
@@ -67,6 +72,8 @@ export function ResourceDiscoveryPage({
   isSearching,
   searchQuery,
   onSearchQueryChange,
+  selectedEntityType,
+  onSelectedEntityTypeChange,
   theme,
   showLineNumbers,
   activePanel,
@@ -75,17 +82,11 @@ export function ResourceDiscoveryPage({
   translations: t,
   ToolbarPanels,
 }: ResourceDiscoveryPageProps) {
-  const [selectedEntityType, setSelectedEntityType] = useState<string>('');
-
   const hasSearchQuery = searchQuery.trim() !== '';
 
   // When searching, render search results; otherwise render recent.
-  const baseDocuments = hasSearchQuery ? searchDocuments : recentDocuments;
-  const filteredResources = !selectedEntityType
-    ? baseDocuments
-    : baseDocuments.filter((resource: ResourceDescriptor) =>
-        resource.entityTypes && resource.entityTypes.includes(selectedEntityType)
-      );
+  // Both already arrive entity-type-filtered from the backend — no post-filter here.
+  const filteredResources = hasSearchQuery ? searchDocuments : recentDocuments;
 
   // Roving tabindex for entity type filters
   const entityFilterRoving = useRovingTabIndex<HTMLDivElement>(
@@ -105,8 +106,8 @@ export function ResourceDiscoveryPage({
 
   // Memoized callbacks
   const handleEntityTypeFilter = useCallback((entityType: string) => {
-    setSelectedEntityType(entityType);
-  }, []);
+    onSelectedEntityTypeChange(entityType);
+  }, [onSelectedEntityTypeChange]);
 
   const openResource = useCallback((resource: ResourceDescriptor) => {
     const resourceId = getResourceId(resource);

package/src/features/resource-discovery/state/__tests__/discover-state-unit.test.ts

@@ -1,6 +1,6 @@
 import { describe, it, expect, vi } from 'vitest';
 import { BehaviorSubject, firstValueFrom } from 'rxjs';
-import { filter } from 'rxjs/operators';
+import { filter, skip, take, toArray } from 'rxjs/operators';
 import type { SemiontClient } from '@semiont/sdk';
 import type { ShellStateUnit } from '../../../../state/shell-state-unit';
 import { createDiscoverStateUnit } from '../discover-state-unit';
@@ -9,23 +9,43 @@ function mockBrowse(): ShellStateUnit {
   return { dispose: vi.fn() } as unknown as ShellStateUnit;
 }
 
+interface BrowseFilters {
+  limit?: number;
+  archived?: boolean;
+  search?: string;
+  entityType?: string;
+}
+
 function mockClient(overrides: {
   resources$?: BehaviorSubject<unknown[] | undefined>;
   entityTypes$?: BehaviorSubject<string[] | undefined>;
-} = {}): SemiontClient {
-  const resources$ = overrides.resources$ ?? new BehaviorSubject<unknown[] | undefined>([{ '@id': 'r1' }]);
-  const entityTypes$ = overrides.entityTypes$ ?? new BehaviorSubject<string[] | undefined>(['Person']);
-  return {
+  resourcesFn?: (filters: BrowseFilters) => BehaviorSubject<unknown[] | undefined>;
+} = {}): { client: SemiontClient; resourceCalls: BrowseFilters[] } {
+  const resourceCalls: BrowseFilters[] = [];
+  const defaultResources$ =
+    overrides.resources$ ?? new BehaviorSubject<unknown[] | undefined>([{ '@id': 'r1' }]);
+  const entityTypes$ =
+    overrides.entityTypes$ ?? new BehaviorSubject<string[] | undefined>(['Person']);
+
+  const resourcesFn = overrides.resourcesFn ?? (() => defaultResources$);
+
+  const client = {
     browse: {
-      resources: () => resources$.asObservable(),
+      resources: (filters: BrowseFilters = {}) => {
+        resourceCalls.push(filters);
+        return resourcesFn(filters).asObservable();
+      },
       entityTypes: () => entityTypes$.asObservable(),
     },
   } as unknown as SemiontClient;
+
+  return { client, resourceCalls };
 }
 
 describe('createDiscoverStateUnit', () => {
   it('exposes recent resources from browse namespace', async () => {
-    const stateUnit = createDiscoverStateUnit(mockClient(), mockBrowse());
+    const { client } = mockClient();
+    const stateUnit = createDiscoverStateUnit(client, mockBrowse());
 
     const recent = await firstValueFrom(stateUnit.recentResources$);
     expect(recent).toEqual([{ '@id': 'r1' }]);
@@ -34,7 +54,8 @@ describe('createDiscoverStateUnit', () => {
   });
 
   it('exposes entity types from browse namespace', async () => {
-    const stateUnit = createDiscoverStateUnit(mockClient(), mockBrowse());
+    const { client } = mockClient();
+    const stateUnit = createDiscoverStateUnit(client, mockBrowse());
 
     const types = await firstValueFrom(stateUnit.entityTypes$);
     expect(types).toEqual(['Person']);
@@ -42,9 +63,21 @@ describe('createDiscoverStateUnit', () => {
     stateUnit.dispose();
   });
 
+  it('falls back to [] when entityTypes() emits undefined', async () => {
+    const entityTypes$ = new BehaviorSubject<string[] | undefined>(undefined);
+    const { client } = mockClient({ entityTypes$ });
+    const stateUnit = createDiscoverStateUnit(client, mockBrowse());
+
+    const types = await firstValueFrom(stateUnit.entityTypes$);
+    expect(types).toEqual([]);
+
+    stateUnit.dispose();
+  });
+
   it('reports loading when resources are undefined', async () => {
     const resources$ = new BehaviorSubject<unknown[] | undefined>(undefined);
-    const stateUnit = createDiscoverStateUnit(mockClient({ resources$ }), mockBrowse());
+    const { client } = mockClient({ resources$ });
+    const stateUnit = createDiscoverStateUnit(client, mockBrowse());
 
     const loading = await firstValueFrom(stateUnit.isLoadingRecent$);
     expect(loading).toBe(true);
@@ -57,7 +90,8 @@ describe('createDiscoverStateUnit', () => {
   });
 
   it('exposes a search pipeline', () => {
-    const stateUnit = createDiscoverStateUnit(mockClient(), mockBrowse());
+    const { client } = mockClient();
+    const stateUnit = createDiscoverStateUnit(client, mockBrowse());
 
     expect(stateUnit.search).toBeDefined();
     expect(typeof stateUnit.search.setQuery).toBe('function');
@@ -68,9 +102,168 @@ describe('createDiscoverStateUnit', () => {
 
   it('disposes browse and search on dispose', () => {
     const browse = mockBrowse();
-    const stateUnit = createDiscoverStateUnit(mockClient(), browse);
+    const { client } = mockClient();
+    const stateUnit = createDiscoverStateUnit(client, browse);
     stateUnit.dispose();
 
     expect(browse.dispose).toHaveBeenCalled();
   });
+
+  it('initial selectedEntityType$ is empty and recent fetch carries no entityType', async () => {
+    const { client, resourceCalls } = mockClient();
+    const stateUnit = createDiscoverStateUnit(client, mockBrowse());
+
+    await firstValueFrom(stateUnit.recentResources$);
+
+    expect(resourceCalls).toHaveLength(1);
+    expect(resourceCalls[0]).toEqual({ limit: 10, archived: false });
+    expect(await firstValueFrom(stateUnit.selectedEntityType$)).toBe('');
+
+    stateUnit.dispose();
+  });
+
+  it('setSelectedEntityType drives a refetch with the entityType filter', async () => {
+    const { client, resourceCalls } = mockClient();
+    const stateUnit = createDiscoverStateUnit(client, mockBrowse());
+
+    // Prime the first subscription so the switchMap is live.
+    const sub = stateUnit.recentResources$.subscribe();
+
+    stateUnit.setSelectedEntityType('Person');
+
+    expect(await firstValueFrom(stateUnit.selectedEntityType$)).toBe('Person');
+    // Two calls expected: initial '' then 'Person'.
+    expect(resourceCalls.length).toBeGreaterThanOrEqual(2);
+    expect(resourceCalls.at(-1)).toEqual({ limit: 10, archived: false, entityType: 'Person' });
+
+    sub.unsubscribe();
+    stateUnit.dispose();
+  });
+
+  it('search with an empty query yields no results without hitting the wire', async () => {
+    vi.useFakeTimers();
+    try {
+      const { client, resourceCalls } = mockClient();
+      const stateUnit = createDiscoverStateUnit(client, mockBrowse());
+
+      const collected: Array<{ results: unknown[]; isSearching: boolean }> = [];
+      const sub = stateUnit.search.state$.subscribe((s) => collected.push(s));
+
+      await vi.advanceTimersByTimeAsync(300);
+
+      expect(collected.at(-1)).toEqual({ results: [], isSearching: false });
+      const searchCalls = resourceCalls.filter((c) => c.search !== undefined);
+      expect(searchCalls).toHaveLength(0);
+
+      sub.unsubscribe();
+      stateUnit.dispose();
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+
+  it('search with a non-empty query and selected entityType pushes both into the filter', async () => {
+    vi.useFakeTimers();
+    try {
+      const results$ = new BehaviorSubject<unknown[] | undefined>([{ '@id': 'hit' }]);
+      const { client, resourceCalls } = mockClient({
+        resourcesFn: (filters) => (filters.search ? results$ : new BehaviorSubject<unknown[] | undefined>([])),
+      });
+      const stateUnit = createDiscoverStateUnit(client, mockBrowse());
+
+      const sub = stateUnit.search.state$.subscribe();
+      stateUnit.setSelectedEntityType('Person');
+      stateUnit.search.setQuery('lincoln');
+
+      await vi.advanceTimersByTimeAsync(300);
+
+      const searchCalls = resourceCalls.filter((c) => c.search !== undefined);
+      expect(searchCalls.length).toBeGreaterThanOrEqual(1);
+      expect(searchCalls.at(-1)).toEqual({
+        search: 'lincoln',
+        limit: 20,
+        entityType: 'Person',
+      });
+
+      sub.unsubscribe();
+      stateUnit.dispose();
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+
+  it('search results flow through state$ once the debounced query fetches', async () => {
+    vi.useFakeTimers();
+    try {
+      const results$ = new BehaviorSubject<unknown[] | undefined>([{ '@id': 'hit' }]);
+      const { client } = mockClient({
+        resourcesFn: () => results$,
+      });
+      const stateUnit = createDiscoverStateUnit(client, mockBrowse());
+
+      const collected: Array<{ results: unknown[]; isSearching: boolean }> = [];
+      const sub = stateUnit.search.state$.subscribe((s) => collected.push(s));
+
+      stateUnit.search.setQuery('lincoln');
+      await vi.advanceTimersByTimeAsync(300);
+
+      expect(collected.at(-1)).toEqual({ results: [{ '@id': 'hit' }], isSearching: false });
+
+      sub.unsubscribe();
+      stateUnit.dispose();
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+
+  it('search reports isSearching while the fetch is in flight', async () => {
+    vi.useFakeTimers();
+    try {
+      const inflight$ = new BehaviorSubject<unknown[] | undefined>(undefined);
+      const { client } = mockClient({
+        resourcesFn: () => inflight$,
+      });
+      const stateUnit = createDiscoverStateUnit(client, mockBrowse());
+
+      const collected: Array<{ results: unknown[]; isSearching: boolean }> = [];
+      const sub = stateUnit.search.state$.subscribe((s) => collected.push(s));
+
+      stateUnit.search.setQuery('lincoln');
+      await vi.advanceTimersByTimeAsync(300);
+
+      expect(collected.at(-1)).toEqual({ results: [], isSearching: true });
+
+      sub.unsubscribe();
+      stateUnit.dispose();
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+
+  it('search query observable echoes the latest setQuery value', async () => {
+    const { client } = mockClient();
+    const stateUnit = createDiscoverStateUnit(client, mockBrowse());
+
+    const queries = stateUnit.search.query$.pipe(skip(1), take(1), toArray()).toPromise();
+    stateUnit.search.setQuery('alpha');
+
+    expect(await queries).toEqual(['alpha']);
+
+    stateUnit.dispose();
+  });
+
+  it('omits entityType from the filter when the empty sentinel is selected', async () => {
+    const { client, resourceCalls } = mockClient();
+    const stateUnit = createDiscoverStateUnit(client, mockBrowse());
+
+    const sub = stateUnit.recentResources$.subscribe();
+    stateUnit.setSelectedEntityType('Person');
+    stateUnit.setSelectedEntityType('');
+
+    const last = resourceCalls.at(-1)!;
+    expect(last.entityType).toBeUndefined();
+
+    sub.unsubscribe();
+    stateUnit.dispose();
+  });
 });