@semiont/react-ui 0.5.22 → 0.5.24

package/src/features/moderate-entity-tags/state/__tests__/entity-tags-state-unit.test.ts

@@ -1,10 +1,12 @@
 import { describe, it, expect, vi } from 'vitest';
+import { asStates } from '../../../../__tests__/test-client';
+import { sessionOf } from '../../../../__tests__/test-client';
 import { BehaviorSubject, firstValueFrom } from 'rxjs';
 import { filter } from 'rxjs/operators';
 import type { SemiontClient } from '@semiont/sdk';
 import type { ShellStateUnit } from '../../../../state/shell-state-unit';
 import { createEntityTagsStateUnit } from '../entity-tags-state-unit';
-import { assertStateUnitAxioms, disposeProbe } from '@semiont/core/testing';
+import { assertStateUnitAxioms, disposeProbe } from '@semiont/core/testing/axioms';
 
 function mockBrowse(): ShellStateUnit {
   return { dispose: vi.fn() } as unknown as ShellStateUnit;
@@ -17,7 +19,7 @@ function mockClient(overrides: {
   const entityTypes$ = overrides.entityTypes$ ?? new BehaviorSubject<string[] | undefined>(['Person', 'Place']);
   return {
     browse: {
-      entityTypes: () => entityTypes$.asObservable(),
+      entityTypes: () => asStates(entityTypes$.asObservable()),
     },
     frame: {
       addEntityType: overrides.addEntityType ?? vi.fn().mockResolvedValue(undefined),
@@ -27,9 +29,9 @@ function mockClient(overrides: {
 
 describe('createEntityTagsStateUnit', () => {
   it('exposes entity types from browse namespace', async () => {
-    const stateUnit = createEntityTagsStateUnit(mockClient(), mockBrowse());
+    const stateUnit = createEntityTagsStateUnit(sessionOf(mockClient()), mockBrowse());
 
-    const types = await firstValueFrom(stateUnit.entityTypes$);
+    const types = await firstValueFrom(stateUnit.entityTypes.value$);
     expect(types).toEqual(['Person', 'Place']);
 
     stateUnit.dispose();
@@ -37,20 +39,20 @@ describe('createEntityTagsStateUnit', () => {
 
   it('reports loading when entity types are undefined', async () => {
     const entityTypes$ = new BehaviorSubject<string[] | undefined>(undefined);
-    const stateUnit = createEntityTagsStateUnit(mockClient({ entityTypes$ }), mockBrowse());
+    const stateUnit = createEntityTagsStateUnit(sessionOf(mockClient({ entityTypes$ })), mockBrowse());
 
-    const loading = await firstValueFrom(stateUnit.isLoading$);
+    const loading = await firstValueFrom(stateUnit.entityTypes.loading$);
     expect(loading).toBe(true);
 
     entityTypes$.next(['Tag']);
-    const loaded = await firstValueFrom(stateUnit.isLoading$.pipe(filter((l) => !l)));
+    const loaded = await firstValueFrom(stateUnit.entityTypes.loading$.pipe(filter((l) => !l)));
     expect(loaded).toBe(false);
 
     stateUnit.dispose();
   });
 
   it('setNewTag updates newTag$', async () => {
-    const stateUnit = createEntityTagsStateUnit(mockClient(), mockBrowse());
+    const stateUnit = createEntityTagsStateUnit(sessionOf(mockClient()), mockBrowse());
 
     stateUnit.setNewTag('Organization');
     const tag = await firstValueFrom(stateUnit.newTag$);
@@ -61,7 +63,7 @@ describe('createEntityTagsStateUnit', () => {
 
   it('addTag calls client and clears newTag$', async () => {
     const addEntityType = vi.fn().mockResolvedValue(undefined);
-    const stateUnit = createEntityTagsStateUnit(mockClient({ addEntityType }), mockBrowse());
+    const stateUnit = createEntityTagsStateUnit(sessionOf(mockClient({ addEntityType })), mockBrowse());
 
     stateUnit.setNewTag('Event');
     await stateUnit.addTag();
@@ -75,7 +77,7 @@ describe('createEntityTagsStateUnit', () => {
 
   it('addTag ignores empty/whitespace input', async () => {
     const addEntityType = vi.fn();
-    const stateUnit = createEntityTagsStateUnit(mockClient({ addEntityType }), mockBrowse());
+    const stateUnit = createEntityTagsStateUnit(sessionOf(mockClient({ addEntityType })), mockBrowse());
 
     stateUnit.setNewTag('   ');
     await stateUnit.addTag();
@@ -87,7 +89,7 @@ describe('createEntityTagsStateUnit', () => {
 
   it('addTag sets error on failure', async () => {
     const addEntityType = vi.fn().mockRejectedValue(new Error('duplicate'));
-    const stateUnit = createEntityTagsStateUnit(mockClient({ addEntityType }), mockBrowse());
+    const stateUnit = createEntityTagsStateUnit(sessionOf(mockClient({ addEntityType })), mockBrowse());
 
     stateUnit.setNewTag('Person');
     await stateUnit.addTag();
@@ -107,10 +109,33 @@ describe('EntityTagsStateUnit — StateUnit axioms', () => {
     assertStateUnitAxioms({
       setup: () => {
         const browse = disposeProbe();
-        return { unit: createEntityTagsStateUnit(mockClient(), browse as unknown as ShellStateUnit), passedIn: [browse] };
+        return { unit: createEntityTagsStateUnit(sessionOf(mockClient()), browse as unknown as ShellStateUnit), passedIn: [browse] };
       },
       surfaces: (u) => [u.newTag$, u.error$, u.isAdding$],
       invocations: (u) => [() => u.setNewTag(''), () => u.addTag()],
     });
   });
 });
+
+describe('createEntityTagsStateUnit — terminal load failure', () => {
+  // `isLoading$` was `raw$.pipe(map(e => e === undefined))` and
+  // moderate/entity-tags/page.tsx returns a full-page loading screen off it,
+  // so a failed load froze the route. The existing `error$` is the ADD-tag
+  // error and is deliberately left alone.
+  // See .plans/PANEL-FAILURE-STATES.md
+
+  it('stops loading and surfaces the load failure, distinct from the add-tag error', async () => {
+    const entityTypes$ = new BehaviorSubject<string[] | undefined>(undefined);
+    const unit = createEntityTagsStateUnit(sessionOf(mockClient({ entityTypes$ })), mockBrowse());
+
+    expect(await firstValueFrom(unit.entityTypes.loading$)).toBe(true);
+    entityTypes$.next({ status: 'failed', error: new Error('Resource not found') } as never);
+
+    expect(await firstValueFrom(unit.entityTypes.loading$)).toBe(false);
+    expect(await firstValueFrom(unit.entityTypes.error$)).not.toBeNull();
+    // The add-tag error channel is untouched by a load failure.
+    expect(await firstValueFrom(unit.error$)).toBe('');
+
+    unit.dispose();
+  });
+});

package/src/features/moderate-entity-tags/state/entity-tags-state-unit.ts

@@ -1,13 +1,13 @@
-import { BehaviorSubject, type Observable, map } from 'rxjs';
+import { BehaviorSubject, type Observable } from 'rxjs';
 import { createDisposer } from '@semiont/sdk';
 import type { StateUnit } from '@semiont/core';
 import type { ShellStateUnit } from '../../../state/shell-state-unit';
-import type { SemiontClient } from '@semiont/sdk';
+import { trackList, type ListState } from '../../../state/list-state';
+import type { SemiontSession } from '@semiont/sdk';
 
 export interface EntityTagsStateUnit extends StateUnit {
   browse: ShellStateUnit;
-  entityTypes$: Observable<string[]>;
-  isLoading$: Observable<boolean>;
+  entityTypes: ListState<string[]>;
   newTag$: Observable<string>;
   error$: Observable<string>;
   isAdding$: Observable<boolean>;
@@ -16,9 +16,10 @@ export interface EntityTagsStateUnit extends StateUnit {
 }
 
 export function createEntityTagsStateUnit(
-  client: SemiontClient,
+  session: SemiontSession,
   browse: ShellStateUnit,
 ): EntityTagsStateUnit {
+  const { client } = session;
   const disposer = createDisposer();
   // `browse` (ShellStateUnit) is a *passed-in* dependency owned by the caller
   // (`useShellStateUnit`), not this unit — do NOT add it to the disposer (it's the
@@ -28,9 +29,8 @@ export function createEntityTagsStateUnit(
   const error$ = new BehaviorSubject<string>('');
   const isAdding$ = new BehaviorSubject<boolean>(false);
 
-  const raw$ = client.browse.entityTypes();
-  const entityTypes$: Observable<string[]> = raw$.pipe(map((e) => e ?? []));
-  const isLoading$: Observable<boolean> = raw$.pipe(map((e) => e === undefined));
+  const entityTypes = trackList<string[]>(() => client.browse.entityTypes(), []);
+  disposer.add(entityTypes.dispose);
 
   const addTag = async (): Promise<void> => {
     const tag = newTag$.getValue().trim();
@@ -49,8 +49,7 @@ export function createEntityTagsStateUnit(
 
   return {
     browse,
-    entityTypes$,
-    isLoading$,
+    entityTypes: entityTypes.state,
     newTag$: newTag$.asObservable(),
     error$: error$.asObservable(),
     isAdding$: isAdding$.asObservable(),

package/src/features/moderate-recent/__tests__/RecentDocumentsPage.test.tsx

@@ -14,7 +14,6 @@ const createMockProps = (overrides?: Partial<RecentDocumentsPageProps>): RecentD
   hasDocuments: false,
   isLoading: false,
   theme: 'light',
-  showLineNumbers: false,
   activePanel: null,
   translations: {
     pageTitle: 'Recent Documents',
@@ -205,13 +204,13 @@ describe('RecentDocumentsPage', () => {
       );
     });
 
-    it('passes showLineNumbers to toolbar panels', () => {
+    it('does not thread showLineNumbers to toolbar panels — the setting is context-backed', () => {
       const ToolbarPanels = vi.fn(() => <div data-testid="toolbar-panels" />);
-      const props = createMockProps({ showLineNumbers: true, ToolbarPanels });
+      const props = createMockProps({ToolbarPanels });
       render(<RecentDocumentsPage {...props} />);
 
       expect(ToolbarPanels).toHaveBeenCalledWith(
-        expect.objectContaining({ showLineNumbers: true }),
+        expect.not.objectContaining({ showLineNumbers: expect.anything() }),
         undefined,
       );
     });
@@ -342,7 +341,6 @@ describe('RecentDocumentsPage', () => {
       const props = createMockProps({
         hasDocuments: true,
         theme: 'dark',
-        showLineNumbers: true,
         activePanel: 'settings',
       });
       render(<RecentDocumentsPage {...props} />);

package/src/features/moderate-recent/components/RecentDocumentsPage.tsx

@@ -15,7 +15,6 @@ export interface RecentDocumentsPageProps {
 
   // UI state
   theme: 'light' | 'dark' | 'system';
-  showLineNumbers: boolean;
   activePanel: string | null;
 
   // Translations
@@ -37,7 +36,6 @@ export interface RecentDocumentsPageProps {
 export function RecentDocumentsPage({
   isLoading,
   theme,
-  showLineNumbers,
   activePanel,
   translations: t,
   ToolbarPanels,
@@ -95,7 +93,6 @@ export function RecentDocumentsPage({
         <ToolbarPanels
           activePanel={activePanel}
           theme={theme}
-          showLineNumbers={showLineNumbers}
         />
 
         <Toolbar

package/src/features/moderate-tag-schemas/__tests__/TagSchemasPage.test.tsx

@@ -61,7 +61,6 @@ const createMockProps = (overrides?: Partial<TagSchemasPageProps>): TagSchemasPa
   schemas: mockSchemas,
   isLoading: false,
   theme: 'light',
-  showLineNumbers: false,
   activePanel: null,
   translations: {
     pageTitle: 'Tag Schemas',
@@ -276,13 +275,13 @@ describe('TagSchemasPage', () => {
       );
     });
 
-    it('passes showLineNumbers to toolbar panels', () => {
+    it('does not thread showLineNumbers to toolbar panels — the setting is context-backed', () => {
       const ToolbarPanels = vi.fn(() => <div data-testid="toolbar-panels" />);
-      const props = createMockProps({ showLineNumbers: true, ToolbarPanels });
+      const props = createMockProps({ToolbarPanels });
       render(<TagSchemasPage {...props} />);
 
       expect(ToolbarPanels).toHaveBeenCalledWith(
-        expect.objectContaining({ showLineNumbers: true }),
+        expect.not.objectContaining({ showLineNumbers: expect.anything() }),
         undefined,
       );
     });
@@ -420,7 +419,6 @@ describe('TagSchemasPage', () => {
     it('handles all props being defined', () => {
       const props = createMockProps({
         theme: 'dark',
-        showLineNumbers: true,
         activePanel: 'settings',
       });
       render(<TagSchemasPage {...props} />);

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

@@ -22,7 +22,6 @@ export interface TagSchemasPageProps {
 
   // UI state
   theme: 'light' | 'dark' | 'system';
-  showLineNumbers: boolean;
   activePanel: string | null;
 
   // Translations
@@ -54,7 +53,6 @@ export function TagSchemasPage({
   schemas,
   isLoading,
   theme,
-  showLineNumbers,
   activePanel,
   translations: t,
   ToolbarPanels,
@@ -153,7 +151,6 @@ export function TagSchemasPage({
         <ToolbarPanels
           activePanel={activePanel}
           theme={theme}
-          showLineNumbers={showLineNumbers}
         />
 
         <Toolbar

package/src/features/moderation-linked-data/__tests__/LinkedDataPage.test.tsx

@@ -18,7 +18,6 @@ const createProps = (overrides?: Partial<LinkedDataPageProps>): LinkedDataPagePr
   isImporting: false,
   importPhase: null,
   theme: 'light',
-  showLineNumbers: false,
   activePanel: null,
   translations: {
     title: 'Export & Import',

package/src/features/moderation-linked-data/components/LinkedDataPage.tsx

@@ -39,7 +39,6 @@ export interface LinkedDataPageProps {
 
   // UI state
   theme: 'light' | 'dark' | 'system';
-  showLineNumbers: boolean;
   activePanel: string | null;
 
   // Translations
@@ -63,7 +62,6 @@ export function LinkedDataPage({
   importMessage,
   importResult,
   theme,
-  showLineNumbers,
   activePanel,
   translations: t,
   ToolbarPanels,
@@ -109,7 +107,6 @@ export function LinkedDataPage({
         <ToolbarPanels
           activePanel={activePanel}
           theme={theme}
-          showLineNumbers={showLineNumbers}
         />
         <Toolbar
           context="simple"

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

@@ -10,12 +10,14 @@ import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 import { ResourceComposePage } from '../components/ResourceComposePage';
 import type { ResourceComposePageProps } from '../components/ResourceComposePage';
 import { createTestSemiontWrapper } from '../../../test-utils';
+import { LineNumbersProvider } from '../../../contexts/LineNumbersContext';
 
 // Mock CodeMirrorRenderer to avoid CodeMirror dependencies
 vi.mock('../../../components/CodeMirrorRenderer', () => ({
-  CodeMirrorRenderer: ({ content, onChange, editable }: any) => (
+  CodeMirrorRenderer: ({ content, onChange, editable, showLineNumbers }: any) => (
     <textarea
       data-testid="code-editor"
+      data-line-numbers={String(showLineNumbers)}
       value={content}
       onChange={(e) => editable && onChange?.(e.target.value)}
       disabled={!editable}
@@ -62,7 +64,6 @@ const createMockProps = (overrides?: Partial<ResourceComposePageProps>): Resourc
   availableEntityTypes: ['Document', 'Article', 'Report'],
   initialLocale: 'en',
   theme: 'light',
-  showLineNumbers: false,
   hoverDelayMs: 0,
   activePanel: null,
   onSaveResource: vi.fn().mockResolvedValue(undefined),
@@ -77,7 +78,11 @@ const createMockProps = (overrides?: Partial<ResourceComposePageProps>): Resourc
 // component reaches for via useSemiont/useObservable).
 const renderWithProviders = (ui: React.ReactElement) => {
   const { SemiontWrapper } = createTestSemiontWrapper();
-  return render(<SemiontWrapper>{ui}</SemiontWrapper>);
+  return render(
+    <LineNumbersProvider>
+      <SemiontWrapper>{ui}</SemiontWrapper>
+    </LineNumbersProvider>,
+  );
 };
 
 describe('ResourceComposePage', () => {
@@ -500,11 +505,16 @@ describe('ResourceComposePage', () => {
       expect(editor.value).toBe('New content');
     });
 
-    it('respects showLineNumbers prop', () => {
-      const props = createMockProps({ showLineNumbers: true });
-      renderWithProviders(<ResourceComposePage {...props} />);
+    it('feeds the editor the shared line-numbers setting from context', () => {
+      localStorage.setItem('showLineNumbers', 'true');
+      try {
+        const props = createMockProps({});
+        renderWithProviders(<ResourceComposePage {...props} />);
 
-      expect(screen.getByTestId('code-editor')).toBeInTheDocument();
+        expect(screen.getByTestId('code-editor')).toHaveAttribute('data-line-numbers', 'true');
+      } finally {
+        localStorage.removeItem('showLineNumbers');
+      }
     });
   });
 });

package/src/features/resource-compose/components/ResourceComposePage.tsx

@@ -15,6 +15,7 @@ import { COMMON_PANELS, type ToolbarPanelType } from '../../../state/shell-state
 import { buttonStyles } from '../../../lib/button-styles';
 import { CodeMirrorRenderer } from '../../../components/CodeMirrorRenderer';
 import { useFormAnnouncements } from '../../../components/LiveRegion';
+import { useLineNumbers } from '../../../contexts/LineNumbersContext';
 import { UploadProgressBar } from './UploadProgressBar';
 
 /**
@@ -54,7 +55,6 @@ export interface ResourceComposePageProps {
 
   // UI state
   theme: 'light' | 'dark';
-  showLineNumbers: boolean;
   hoverDelayMs: number;
   activePanel: string | null;
 
@@ -133,7 +133,6 @@ export function ResourceComposePage({
   availableEntityTypes,
   initialLocale,
   theme,
-  showLineNumbers,
   hoverDelayMs,
   activePanel,
   onSaveResource,
@@ -146,6 +145,10 @@ export function ResourceComposePage({
   // Form announcements
   const { announceFormSubmitting, announceFormSuccess, announceFormError } = useFormAnnouncements();
 
+  // Shared display setting (LineNumbersContext) — was a prop threaded from
+  // the route, which desynced it from the Settings toggle.
+  const { showLineNumbers } = useLineNumbers();
+
   // Form state
   const [newResourceName, setNewResourceName] = useState('');
   const [newResourceContent, setNewResourceContent] = useState('');
@@ -746,7 +749,6 @@ export function ResourceComposePage({
         <ToolbarPanels
           activePanel={activePanel}
           theme={theme}
-          showLineNumbers={showLineNumbers}
         />
 
         {/* Toolbar - Always visible on the right */}

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

@@ -1,10 +1,12 @@
 import { describe, it, expect, vi } from 'vitest';
+import { asStates } from '../../../../__tests__/test-client';
+import { sessionOf } from '../../../../__tests__/test-client';
 import { BehaviorSubject, Observable, firstValueFrom } from 'rxjs';
 import { filter } from 'rxjs/operators';
 import type { SemiontClient } from '@semiont/sdk';
 import type { ShellStateUnit } from '../../../../state/shell-state-unit';
 import { createComposePageStateUnit } from '../compose-page-state-unit';
-import { assertStateUnitAxioms, disposeProbe } from '@semiont/core/testing';
+import { assertStateUnitAxioms, disposeProbe } from '@semiont/core/testing/axioms';
 
 /** Build an `UploadObservable`-shaped mock that emits started → finished. */
 function mockUpload(resourceId: string) {
@@ -32,7 +34,7 @@ function mockClient(overrides: {
   const entityTypes$ = overrides.entityTypes$ ?? new BehaviorSubject<string[] | undefined>(['Person']);
   return {
     browse: {
-      entityTypes: () => entityTypes$.asObservable(),
+      entityTypes: () => asStates(entityTypes$.asObservable()),
     },
     yield: {
       fromToken: overrides.fromToken ?? vi.fn().mockResolvedValue({ '@id': 'src-1', representations: [{ mediaType: 'text/plain' }] }),
@@ -51,7 +53,7 @@ function mockClient(overrides: {
 
 describe('createComposePageStateUnit', () => {
   it('defaults to "new" mode', async () => {
-    const stateUnit = createComposePageStateUnit(mockClient(), mockBrowse(), {});
+    const stateUnit = createComposePageStateUnit(sessionOf(mockClient()), mockBrowse(), {});
 
     const mode = await firstValueFrom(stateUnit.mode$);
     expect(mode).toBe('new');
@@ -63,7 +65,7 @@ describe('createComposePageStateUnit', () => {
   });
 
   it('detects reference mode from params', async () => {
-    const stateUnit = createComposePageStateUnit(mockClient(), mockBrowse(), {
+    const stateUnit = createComposePageStateUnit(sessionOf(mockClient()), mockBrowse(), {
       annotationUri: 'ann-1',
       sourceDocumentId: 'doc-1',
       name: 'Reference Doc',
@@ -82,7 +84,7 @@ describe('createComposePageStateUnit', () => {
 
   it('parses storedContext in reference mode', async () => {
     const context = { annotation: { id: 'ann-1' }, sourceContext: 'text' };
-    const stateUnit = createComposePageStateUnit(mockClient(), mockBrowse(), {
+    const stateUnit = createComposePageStateUnit(sessionOf(mockClient()), mockBrowse(), {
       annotationUri: 'ann-1',
       sourceDocumentId: 'doc-1',
       name: 'Ref',
@@ -96,7 +98,7 @@ describe('createComposePageStateUnit', () => {
   });
 
   it('ignores malformed storedContext', async () => {
-    const stateUnit = createComposePageStateUnit(mockClient(), mockBrowse(), {
+    const stateUnit = createComposePageStateUnit(sessionOf(mockClient()), mockBrowse(), {
       annotationUri: 'ann-1',
       sourceDocumentId: 'doc-1',
       name: 'Ref',
@@ -113,9 +115,9 @@ describe('createComposePageStateUnit', () => {
   });
 
   it('exposes entity types', async () => {
-    const stateUnit = createComposePageStateUnit(mockClient(), mockBrowse(), {});
+    const stateUnit = createComposePageStateUnit(sessionOf(mockClient()), mockBrowse(), {});
 
-    const types = await firstValueFrom(stateUnit.entityTypes$);
+    const types = await firstValueFrom(stateUnit.entityTypes.value$);
     expect(types).toEqual(['Person']);
 
     stateUnit.dispose();
@@ -123,7 +125,7 @@ describe('createComposePageStateUnit', () => {
 
   it('save in new mode calls yield.resource', async () => {
     const resource = mockUpload('new-3');
-    const stateUnit = createComposePageStateUnit(mockClient({ resource }), mockBrowse(), {});
+    const stateUnit = createComposePageStateUnit(sessionOf(mockClient({ resource })), mockBrowse(), {});
 
     const id = await stateUnit.save({
       mode: 'new',
@@ -143,7 +145,7 @@ describe('createComposePageStateUnit', () => {
   it('save in reference mode calls yield.resource then bind.body', async () => {
     const resource = mockUpload('new-4');
     const body = vi.fn().mockResolvedValue(undefined);
-    const stateUnit = createComposePageStateUnit(mockClient({ resource, body }), mockBrowse(), {
+    const stateUnit = createComposePageStateUnit(sessionOf(mockClient({ resource, body })), mockBrowse(), {
       annotationUri: 'ann-1',
       sourceDocumentId: 'doc-1',
       name: 'Ref',
@@ -167,7 +169,7 @@ describe('createComposePageStateUnit', () => {
 
   it('save in clone mode calls yield.createFromToken', async () => {
     const createFromToken = vi.fn().mockResolvedValue({ resourceId: 'cloned-1' });
-    const stateUnit = createComposePageStateUnit(mockClient({ createFromToken }), mockBrowse(), {
+    const stateUnit = createComposePageStateUnit(sessionOf(mockClient({ createFromToken })), mockBrowse(), {
       mode: 'clone',
       token: 'tok-abc',
     });
@@ -192,9 +194,28 @@ describe('ComposePageStateUnit — StateUnit axioms', () => {
     assertStateUnitAxioms({
       setup: () => {
         const browse = disposeProbe();
-        return { unit: createComposePageStateUnit(mockClient(), browse as unknown as ShellStateUnit, {}), passedIn: [browse] };
+        return { unit: createComposePageStateUnit(sessionOf(mockClient()), browse as unknown as ShellStateUnit, {}), passedIn: [browse] };
       },
       surfaces: (u) => [u.mode$, u.loading$, u.cloneData$, u.referenceData$, u.gatheredContext$, u.uploadProgress$],
     });
   });
 });
+
+describe('createComposePageStateUnit — entity types load failure', () => {
+  // Lower severity than the two hangs: compose defaults to an empty picker,
+  // which misrepresents a failed load as "this KB has no entity types".
+  // See .plans/PANEL-FAILURE-STATES.md
+
+  it('surfaces the failure rather than presenting an empty picker as fact', async () => {
+    const entityTypes$ = new BehaviorSubject<string[] | undefined>(undefined);
+    const stateUnit = createComposePageStateUnit(sessionOf(mockClient({ entityTypes$ })), mockBrowse(), {});
+
+    entityTypes$.next({ status: 'failed', error: new Error('boom') } as never);
+
+    expect(await firstValueFrom(stateUnit.entityTypes.loading$)).toBe(false);
+    expect(await firstValueFrom(stateUnit.entityTypes.error$)).not.toBeNull();
+    expect(await firstValueFrom(stateUnit.entityTypes.value$)).toEqual([]);
+
+    stateUnit.dispose();
+  });
+});

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

@@ -1,10 +1,11 @@
-import { BehaviorSubject, type Observable, map } from 'rxjs';
+import { BehaviorSubject, type Observable } from 'rxjs';
 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/core';
 import type { ShellStateUnit } from '../../../state/shell-state-unit';
-import type { SemiontClient } from '@semiont/sdk';
+import { trackList, type ListState } from '../../../state/list-state';
+import type { SemiontSession } from '@semiont/sdk';
 import { decodeWithCharset, extensionForMediaType } from '@semiont/core';
 import type { UploadProgress } from '@semiont/sdk';
 
@@ -54,7 +55,7 @@ export interface ComposePageStateUnit extends StateUnit {
   cloneData$: Observable<CloneData | null>;
   referenceData$: Observable<ReferenceData | null>;
   gatheredContext$: Observable<GatheredContext | null>;
-  entityTypes$: Observable<string[]>;
+  entityTypes: ListState<string[]>;
   /**
    * Live upload-progress for the in-flight `save(...)` call. Emits the
    * full `UploadProgress` lifecycle (started → finished) while a save is
@@ -66,11 +67,12 @@ export interface ComposePageStateUnit extends StateUnit {
 }
 
 export function createComposePageStateUnit(
-  client: SemiontClient,
+  session: SemiontSession,
   browse: ShellStateUnit,
   params: ComposeParams,
   auth?: AccessToken,
 ): ComposePageStateUnit {
+  const { client } = session;
   const disposer = createDisposer();
   // `browse` (ShellStateUnit) is a *passed-in* dependency owned by the caller
   // (`useShellStateUnit`), not this unit — do NOT add it to the disposer (it's the
@@ -87,9 +89,8 @@ export function createComposePageStateUnit(
   const gatheredContext$ = new BehaviorSubject<GatheredContext | null>(null);
   const uploadProgress$ = new BehaviorSubject<UploadProgress | null>(null);
 
-  const entityTypes$: Observable<string[]> = client.browse.entityTypes().pipe(
-    map((e) => e ?? []),
-  );
+  const entityTypes = trackList<string[]>(() => client.browse.entityTypes(), []);
+  disposer.add(entityTypes.dispose);
 
   // Initialize based on mode
   if (isReferenceMode) {
@@ -192,7 +193,7 @@ export function createComposePageStateUnit(
     cloneData$: cloneData$.asObservable(),
     referenceData$: referenceData$.asObservable(),
     gatheredContext$: gatheredContext$.asObservable(),
-    entityTypes$,
+    entityTypes: entityTypes.state,
     uploadProgress$: uploadProgress$.asObservable(),
     save,
     dispose: () => {

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

@@ -36,7 +36,6 @@ const createMockProps = (overrides?: Partial<ResourceDiscoveryPageProps>): Resou
   selectedEntityType: '',
   onSelectedEntityTypeChange: vi.fn(),
   theme: 'light',
-  showLineNumbers: false,
   activePanel: null,
   onNavigateToResource: vi.fn(),
   onNavigateToCompose: vi.fn(),
@@ -56,7 +55,9 @@ const createMockProps = (overrides?: Partial<ResourceDiscoveryPageProps>): Resou
     composeFirstResource: 'Compose First Resource',
     archived: 'Archived',
     created: 'Created:',
-    loadingKnowledgeBase: 'Loading knowledge base...',
+    recentFailed: 'Could not load resources.',
+  retry: 'Try again',
+  loadingKnowledgeBase: 'Loading knowledge base...',
   },
   ToolbarPanels: ({ children }: any) => <div data-testid="toolbar-panels">{children}</div>,
   ...overrides,