@semiont/react-ui 0.5.5 → 0.5.7

package/src/features/admin-exchange/components/ImportProgress.tsx

@@ -6,16 +6,12 @@
 
 export interface ImportProgressTranslations {
   phaseStarted: string;
-  phaseEntityTypes: string;
-  phaseResources: string;
-  phaseAnnotations: string;
   phaseComplete: string;
   phaseError: string;
-  hashChainValid: string;
-  hashChainInvalid: string;
-  streams: string;
-  events: string;
-  blobs: string;
+  statsEventsReplayed: string;
+  statsResourcesCreated: string;
+  statsAnnotationsCreated: string;
+  statsEntityTypesAdded: string;
 }
 
 export interface ImportProgressProps {
@@ -27,13 +23,17 @@ export interface ImportProgressProps {
 
 const PHASE_LABELS: Record<string, keyof ImportProgressTranslations> = {
   started: 'phaseStarted',
-  'entity-types': 'phaseEntityTypes',
-  resources: 'phaseResources',
-  annotations: 'phaseAnnotations',
   complete: 'phaseComplete',
   error: 'phaseError',
 };
 
+const STAT_LABELS: Record<string, keyof ImportProgressTranslations> = {
+  eventsReplayed: 'statsEventsReplayed',
+  resourcesCreated: 'statsResourcesCreated',
+  annotationsCreated: 'statsAnnotationsCreated',
+  entityTypesAdded: 'statsEntityTypesAdded',
+};
+
 export function ImportProgress({ phase, message, result, translations: t }: ImportProgressProps) {
   const labelKey = PHASE_LABELS[phase];
   const phaseLabel = labelKey ? t[labelKey] : phase;
@@ -41,6 +41,13 @@ export function ImportProgress({ phase, message, result, translations: t }: Impo
   const isComplete = phase === 'complete';
   const isError = phase === 'error';
 
+  const stats = result?.stats != null && typeof result.stats === 'object'
+    ? (result.stats as Record<string, unknown>)
+    : undefined;
+  const statEntries = stats
+    ? Object.entries(stats).filter((entry): entry is [string, number] => typeof entry[1] === 'number')
+    : [];
+
   return (
     <div className="semiont-exchange__progress">
       <div className={`semiont-exchange__phase-label${isError ? ' semiont-exchange__phase-label--error' : isComplete ? ' semiont-exchange__phase-label--complete' : ''}`}>
@@ -51,30 +58,17 @@ export function ImportProgress({ phase, message, result, translations: t }: Impo
         <p className="semiont-exchange__progress-message">{message}</p>
       )}
 
-      {isComplete && result && (
+      {isComplete && statEntries.length > 0 && (
         <div className="semiont-exchange__result">
-          {result.stats != null && typeof result.stats === 'object' && (
-            <>
-              {Object.entries(result.stats as Record<string, number>).map(([key, value]) => {
-                const label = key === 'streams' ? t.streams
-                  : key === 'events' ? t.events
-                  : key === 'blobs' ? t.blobs
-                  : key;
-                return (
-                  <div key={key} className="semiont-exchange__result-stat">
-                    <span className="semiont-exchange__result-value">{value}</span>
-                    <span className="semiont-exchange__result-label">{label}</span>
-                  </div>
-                );
-              })}
-            </>
-          )}
-
-          {result.hashChainValid !== undefined && (
-            <div className={`semiont-exchange__hash-badge${result.hashChainValid ? ' semiont-exchange__hash-badge--valid' : ' semiont-exchange__hash-badge--invalid'}`}>
-              {result.hashChainValid ? t.hashChainValid : t.hashChainInvalid}
-            </div>
-          )}
+          {statEntries.map(([key, value]) => {
+            const statKey = STAT_LABELS[key];
+            return (
+              <div key={key} className="semiont-exchange__result-stat">
+                <span className="semiont-exchange__result-value">{value}</span>
+                <span className="semiont-exchange__result-label">{statKey ? t[statKey] : key}</span>
+              </div>
+            );
+          })}
         </div>
       )}
 

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/moderation-linked-data/__tests__/LinkedDataPage.test.tsx

@@ -45,16 +45,12 @@ const createProps = (overrides?: Partial<LinkedDataPageProps>): LinkedDataPagePr
     },
     progress: {
       phaseStarted: 'Starting…',
-      phaseEntityTypes: 'Entity types…',
-      phaseResources: 'Resources…',
-      phaseAnnotations: 'Annotations…',
       phaseComplete: 'Complete',
       phaseError: 'Failed',
-      hashChainValid: 'Verified',
-      hashChainInvalid: 'Verification failed',
-      streams: 'Resources',
-      events: 'Annotations',
-      blobs: 'Entity types',
+      statsEventsReplayed: 'Events replayed',
+      statsResourcesCreated: 'Resources created',
+      statsAnnotationsCreated: 'Annotations created',
+      statsEntityTypesAdded: 'Entity types added',
     },
   },
   ToolbarPanels: () => <div data-testid="toolbar-panels" />,
@@ -100,9 +96,15 @@ describe('LinkedDataPage', () => {
   it('renders ImportProgress with result on completion', () => {
     render(<LinkedDataPage {...createProps({
       importPhase: 'complete',
-      importResult: { resourcesCreated: 5, annotationsCreated: 12, entityTypesAdded: 3 },
+      importResult: { stats: { resourcesCreated: 5, annotationsCreated: 12, entityTypesAdded: 3 } },
     })} />);
     expect(screen.getByText('Complete')).toBeInTheDocument();
+    expect(screen.getByText('5')).toBeInTheDocument();
+    expect(screen.getByText('Resources created')).toBeInTheDocument();
+    expect(screen.getByText('12')).toBeInTheDocument();
+    expect(screen.getByText('Annotations created')).toBeInTheDocument();
+    expect(screen.getByText('3')).toBeInTheDocument();
+    expect(screen.getByText('Entity types added')).toBeInTheDocument();
   });
 
   it('applies panel-open class when common panel is active', () => {

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-compose/components/ResourceComposePage.tsx

@@ -8,7 +8,7 @@
 
 import React, { useState, useEffect } from 'react';
 import type { GatheredContext } from '@semiont/core';
-import { isImageMimeType, isPdfMimeType, LOCALES } from '@semiont/core';
+import { capabilitiesOf, AUTHORABLE_MEDIA_TYPES, MEDIA_TYPES, mediaTypeForExtension, isSupportedMediaType, LOCALES } from '@semiont/core';
 import type { UploadProgress } from '@semiont/sdk';
 import { type CloneData, type ReferenceData } from '../state/compose-page-state-unit';
 import { COMMON_PANELS, type ToolbarPanelType } from '../../../state/shell-state-unit';
@@ -17,6 +17,29 @@ import { CodeMirrorRenderer } from '../../../components/CodeMirrorRenderer';
 import { useFormAnnouncements } from '../../../components/LiveRegion';
 import { UploadProgressBar } from './UploadProgressBar';
 
+/**
+ * Big tent: every registry type is uploadable. The `accept` hint lists all
+ * known extensions — it's only a hint; `handleFileUpload` never rejects.
+ */
+const UPLOAD_ACCEPT = Object.values(MEDIA_TYPES).map((c) => c.extension).join(',');
+
+/**
+ * Detection chain for uploaded files (same spirit as the CLI):
+ * 1. the browser's `file.type`, if it names a registry member;
+ * 2. otherwise the filename extension (`file.type` is routinely empty for
+ *    `.md` and friends);
+ * 3. otherwise `application/octet-stream` — itself a registry member, so
+ *    under the big tent every file is uploadable.
+ */
+function detectUploadMediaType(file: File): string {
+  if (file.type && isSupportedMediaType(file.type)) return file.type;
+  if (file.name.includes('.')) {
+    const byExt = mediaTypeForExtension(file.name.slice(file.name.lastIndexOf('.')));
+    if (byExt) return byExt;
+  }
+  return 'application/octet-stream';
+}
+
 export interface ResourceComposePageProps {
   mode: 'new' | 'clone' | 'reference';
   cloneData?: CloneData | null;
@@ -170,8 +193,9 @@ export function ResourceComposePage({
     const file = e.target.files?.[0];
     if (!file) return;
 
+    const detectedMediaType = detectUploadMediaType(file);
     setUploadedFile(file);
-    setFileMimeType(file.type);
+    setFileMimeType(detectedMediaType);
     setInputMethod('upload');
 
     // Set file name as default resource name if empty
@@ -180,8 +204,9 @@ export function ResourceComposePage({
       setNewResourceName(nameWithoutExt);
     }
 
-    // For images and PDFs, create preview URL
-    if (isImageMimeType(file.type) || isPdfMimeType(file.type)) {
+    // Images and PDFs get an object-URL preview; everything else reads as text.
+    const detectedRender = capabilitiesOf(detectedMediaType)?.render;
+    if (detectedRender === 'image' || detectedRender === 'pdf') {
       const previewUrl = URL.createObjectURL(file);
       setFilePreviewUrl(previewUrl);
     } else {
@@ -521,7 +546,7 @@ export function ResourceComposePage({
                     <div className="semiont-form__upload-area">
                       <input
                         type="file"
-                        accept="text/plain,text/markdown,image/png,image/jpeg,application/pdf"
+                        accept={UPLOAD_ACCEPT}
                         onChange={handleFileUpload}
                         className="semiont-form__upload-input"
                         disabled={isCreating}
@@ -563,7 +588,7 @@ export function ResourceComposePage({
               )}
 
               {/* Image Preview */}
-              {uploadedFile && filePreviewUrl && isImageMimeType(fileMimeType) && (
+              {uploadedFile && filePreviewUrl && capabilitiesOf(fileMimeType)?.render === 'image' && (
                 <div className="semiont-form__image-preview">
                   <p className="semiont-form__image-preview-label">Preview:</p>
                   <div className="semiont-form__image-preview-container">
@@ -594,9 +619,11 @@ export function ResourceComposePage({
                     disabled={isCreating}
                     className="semiont-select"
                   >
-                    <option value="text/markdown">Markdown (text/markdown)</option>
-                    <option value="text/plain">Plain Text (text/plain)</option>
-                    <option value="text/html">HTML (text/html)</option>
+                    {AUTHORABLE_MEDIA_TYPES.map((mt) => (
+                      <option key={mt} value={mt}>
+                        {capabilitiesOf(mt)?.label ?? mt} ({mt})
+                      </option>
+                    ))}
                   </select>
                 </div>
               )}

package/src/features/resource-compose/state/compose-page-state-unit.ts

@@ -1,11 +1,11 @@
 import { BehaviorSubject, type Observable, map } from 'rxjs';
-import type { GatheredContext, AnnotationId, ContentFormat, AccessToken, ResourceDescriptor, ResourceId } from '@semiont/core';
+import type { GatheredContext, AnnotationId, AccessToken, ResourceDescriptor, ResourceId } from '@semiont/core';
 import { resourceId as makeResourceId, annotationId as makeAnnotationId } from '@semiont/core';
 import { createDisposer } from '@semiont/sdk';
 import type { StateUnit } from '@semiont/sdk';
 import type { ShellStateUnit } from '../../../state/shell-state-unit';
 import type { SemiontClient } from '@semiont/sdk';
-import { getPrimaryMediaType, decodeWithCharset } from '@semiont/core';
+import { decodeWithCharset, extensionForMediaType } from '@semiont/core';
 import type { UploadProgress } from '@semiont/sdk';
 
 export type ComposeMode = 'new' | 'clone' | 'reference';
@@ -108,11 +108,8 @@ export function createComposePageStateUnit(
         const tokenResult = await client.yield.fromToken(params.token!);
         if (tokenResult && auth) {
           const rId = makeResourceId(tokenResult['@id']);
-          const mediaType = getPrimaryMediaType(tokenResult) || 'text/plain';
-          const { data } = await client.browse.resourceRepresentation(rId, {
-            accept: mediaType as ContentFormat,
-          });
-          const content = decodeWithCharset(data, mediaType);
+          const { data, contentType } = await client.browse.resourceRepresentation(rId);
+          const content = decodeWithCharset(data, contentType);
           cloneData$.next({ sourceResource: tokenResult, sourceContent: content });
         }
       } catch {
@@ -143,7 +140,7 @@ export function createComposePageStateUnit(
       mimeType = saveParams.format ?? 'application/octet-stream';
     } else {
       const blob = new Blob([saveParams.content || ''], { type: saveParams.format ?? 'application/octet-stream' });
-      const extension = saveParams.format === 'text/plain' ? '.txt' : saveParams.format === 'text/html' ? '.html' : '.md';
+      const extension = extensionForMediaType(saveParams.format ?? 'application/octet-stream');
       fileToUpload = new File([blob], saveParams.name + extension, { type: saveParams.format ?? 'application/octet-stream' });
       mimeType = saveParams.format ?? 'application/octet-stream';
     }

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