@semiont/react-ui 0.5.4 → 0.5.6

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

@@ -1,11 +1,9 @@
 import { describe, it, expect, beforeEach, vi } from 'vitest';
-import React from 'react';
 import { screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { renderWithProviders } from '../../../../test-utils';
-import type { components } from '@semiont/core';
 
-import type { Annotation } from '@semiont/core';
+import type { Annotation, AnnotationId } from '@semiont/core';
 
 // Stable mock functions defined outside vi.mock to avoid re-render loops
 const mockIsBodyResolved = vi.fn();
@@ -27,7 +25,7 @@ import { StatisticsPanel } from '../StatisticsPanel';
 
 const createMockAnnotation = (overrides?: Partial<Annotation>): Annotation => ({
   '@context': 'http://www.w3.org/ns/anno.jsonld',
-  id: 'http://example.com/annotations/1',
+  id: 'http://example.com/annotations/1' as AnnotationId,
   type: 'Annotation',
   motivation: 'linking',
   created: '2024-06-15T12:00:00Z',
@@ -73,7 +71,7 @@ describe('StatisticsPanel', () => {
     it('should render correct highlight count', () => {
       const props = {
         ...emptyProps,
-        highlights: [createMockAnnotation({ id: 'h1' }), createMockAnnotation({ id: 'h2' }), createMockAnnotation({ id: 'h3' })],
+        highlights: [createMockAnnotation({ id: 'h1' as AnnotationId }), createMockAnnotation({ id: 'h2' as AnnotationId }), createMockAnnotation({ id: 'h3' as AnnotationId })],
       };
 
       renderWithProviders(<StatisticsPanel {...props} />);
@@ -85,7 +83,7 @@ describe('StatisticsPanel', () => {
     it('should render correct comment count', () => {
       const props = {
         ...emptyProps,
-        comments: [createMockAnnotation({ id: 'c1' }), createMockAnnotation({ id: 'c2' })],
+        comments: [createMockAnnotation({ id: 'c1' as AnnotationId }), createMockAnnotation({ id: 'c2' as AnnotationId })],
       };
 
       renderWithProviders(<StatisticsPanel {...props} />);
@@ -97,7 +95,7 @@ describe('StatisticsPanel', () => {
     it('should render correct assessment count', () => {
       const props = {
         ...emptyProps,
-        assessments: [createMockAnnotation({ id: 'a1' })],
+        assessments: [createMockAnnotation({ id: 'a1' as AnnotationId })],
       };
 
       renderWithProviders(<StatisticsPanel {...props} />);
@@ -110,10 +108,10 @@ describe('StatisticsPanel', () => {
       const props = {
         ...emptyProps,
         tags: [
-          createMockAnnotation({ id: 't1' }),
-          createMockAnnotation({ id: 't2' }),
-          createMockAnnotation({ id: 't3' }),
-          createMockAnnotation({ id: 't4' }),
+          createMockAnnotation({ id: 't1' as AnnotationId }),
+          createMockAnnotation({ id: 't2' as AnnotationId }),
+          createMockAnnotation({ id: 't3' as AnnotationId }),
+          createMockAnnotation({ id: 't4' as AnnotationId }),
         ],
       };
 
@@ -124,9 +122,9 @@ describe('StatisticsPanel', () => {
     });
 
     it('should render correct total reference count', () => {
-      const refs = [createMockAnnotation({ id: 'r1' }), createMockAnnotation({ id: 'r2' })];
+      const refs = [createMockAnnotation({ id: 'r1' as AnnotationId }), createMockAnnotation({ id: 'r2' as AnnotationId })];
 
-      const { container } = renderWithProviders(<StatisticsPanel {...emptyProps} references={refs} />);
+      renderWithProviders(<StatisticsPanel {...emptyProps} references={refs} />);
 
       expect(screen.getByText('StatisticsPanel.references')).toBeInTheDocument();
       // The references item has the total count as its direct .semiont-statistics-panel__value child
@@ -139,13 +137,13 @@ describe('StatisticsPanel', () => {
   describe('Reference sub-categories', () => {
     it('should show stub and resolved counts', () => {
       const refs = [
-        createMockAnnotation({ id: 'r1' }),
-        createMockAnnotation({ id: 'r2' }),
-        createMockAnnotation({ id: 'r3' }),
+        createMockAnnotation({ id: 'r1' as AnnotationId }),
+        createMockAnnotation({ id: 'r2' as AnnotationId }),
+        createMockAnnotation({ id: 'r3' as AnnotationId }),
       ];
 
       // r1 resolved, r2 and r3 are stubs
-      mockIsBodyResolved.mockImplementation((body: unknown) => {
+      mockIsBodyResolved.mockImplementation(() => {
         // We can distinguish by the call order
         return false;
       });
@@ -167,8 +165,8 @@ describe('StatisticsPanel', () => {
 
     it('should count all as resolved when isBodyResolved returns true', () => {
       const refs = [
-        createMockAnnotation({ id: 'r1' }),
-        createMockAnnotation({ id: 'r2' }),
+        createMockAnnotation({ id: 'r1' as AnnotationId }),
+        createMockAnnotation({ id: 'r2' as AnnotationId }),
       ];
 
       mockIsBodyResolved.mockReturnValue(true);
@@ -182,8 +180,8 @@ describe('StatisticsPanel', () => {
 
     it('should count all as stubs when isBodyResolved returns false', () => {
       const refs = [
-        createMockAnnotation({ id: 'r1' }),
-        createMockAnnotation({ id: 'r2' }),
+        createMockAnnotation({ id: 'r1' as AnnotationId }),
+        createMockAnnotation({ id: 'r2' as AnnotationId }),
       ];
 
       mockIsBodyResolved.mockReturnValue(false);
@@ -206,9 +204,9 @@ describe('StatisticsPanel', () => {
 
     it('should render entity types with counts', () => {
       const refs = [
-        createMockAnnotation({ id: 'r1' }),
-        createMockAnnotation({ id: 'r2' }),
-        createMockAnnotation({ id: 'r3' }),
+        createMockAnnotation({ id: 'r1' as AnnotationId }),
+        createMockAnnotation({ id: 'r2' as AnnotationId }),
+        createMockAnnotation({ id: 'r3' as AnnotationId }),
       ];
 
       mockGetEntityTypes
@@ -226,9 +224,9 @@ describe('StatisticsPanel', () => {
 
     it('should sort entity types by count descending', () => {
       const refs = [
-        createMockAnnotation({ id: 'r1' }),
-        createMockAnnotation({ id: 'r2' }),
-        createMockAnnotation({ id: 'r3' }),
+        createMockAnnotation({ id: 'r1' as AnnotationId }),
+        createMockAnnotation({ id: 'r2' as AnnotationId }),
+        createMockAnnotation({ id: 'r3' as AnnotationId }),
       ];
 
       // Person appears 3 times, Location 1 time
@@ -251,11 +249,11 @@ describe('StatisticsPanel', () => {
   describe('Mixed annotation counts', () => {
     it('should render all categories with their respective counts simultaneously', () => {
       const props = {
-        highlights: [createMockAnnotation({ id: 'h1' })],
-        comments: [createMockAnnotation({ id: 'c1' }), createMockAnnotation({ id: 'c2' })],
-        assessments: [createMockAnnotation({ id: 'a1' }), createMockAnnotation({ id: 'a2' }), createMockAnnotation({ id: 'a3' })],
-        references: [createMockAnnotation({ id: 'r1' })],
-        tags: [createMockAnnotation({ id: 't1' }), createMockAnnotation({ id: 't2' })],
+        highlights: [createMockAnnotation({ id: 'h1' as AnnotationId })],
+        comments: [createMockAnnotation({ id: 'c1' as AnnotationId }), createMockAnnotation({ id: 'c2' as AnnotationId })],
+        assessments: [createMockAnnotation({ id: 'a1' as AnnotationId }), createMockAnnotation({ id: 'a2' as AnnotationId }), createMockAnnotation({ id: 'a3' as AnnotationId })],
+        references: [createMockAnnotation({ id: 'r1' as AnnotationId })],
+        tags: [createMockAnnotation({ id: 't1' as AnnotationId }), createMockAnnotation({ id: 't2' as AnnotationId })],
       };
 
       renderWithProviders(<StatisticsPanel {...props} />);

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

@@ -1,14 +1,13 @@
 import { describe, it, expect, beforeEach, vi } from 'vitest';
-import React from 'react';
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { of } from 'rxjs';
 import { CacheObservable } from '@semiont/sdk';
 import { renderWithProviders, createTestSemiontWrapper } from '../../../../test-utils';
 import userEvent from '@testing-library/user-event';
-import type { components, TagSchema } from '@semiont/core';
+import type { TagSchema } from '@semiont/core';
 
-import type { Annotation } from '@semiont/core';
+import type { Annotation, AnnotationId } from '@semiont/core';
 
 // Mock @semiont/api-client
 vi.mock('@semiont/core', async () => {
@@ -37,10 +36,11 @@ const mockGetTagSchemaId = getTagSchemaId as MockedFunction<typeof getTagSchemaI
 
 const createMockTag = (overrides?: Partial<Annotation>): Annotation => ({
   '@context': 'http://www.w3.org/ns/anno.jsonld',
-  id: 'tag-1',
+  id: 'tag-1' as AnnotationId,
   type: 'Annotation',
   motivation: 'tagging',
   creator: {
+    '@type': 'Person',
     name: 'tagger@example.com',
   },
   created: '2024-06-15T12:00:00Z',
@@ -71,7 +71,7 @@ describe('TagEntry', () => {
     vi.clearAllMocks();
     mockGetAnnotationExactText.mockReturnValue('Tagged text content');
     mockGetTagCategory.mockReturnValue('Entity');
-    mockGetTagSchemaId.mockReturnValue(null);
+    mockGetTagSchemaId.mockReturnValue(undefined);
   });
 
   describe('Rendering', () => {

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