@semiont/react-ui 0.5.22 → 0.5.24

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

@@ -20,6 +20,13 @@ export interface ResourceDiscoveryPageProps {
   searchDocuments: ResourceDescriptor[];
   entityTypes: string[];
   isLoadingRecent: boolean;
+  /**
+   * The recent-resources load failed terminally (B15). Without it, "loading"
+   * derived from an absent value never resolves and this route freezes.
+   * See .plans/PANEL-FAILURE-STATES.md
+   */
+  recentError?: Error | null;
+  onRetryRecent?: () => void;
   isSearching: boolean;
 
   // Controlled search state
@@ -33,7 +40,6 @@ export interface ResourceDiscoveryPageProps {
 
   // UI state props
   theme: 'light' | 'dark';
-  showLineNumbers: boolean;
   activePanel: string | null;
 
   // Navigation props
@@ -58,6 +64,8 @@ export interface ResourceDiscoveryPageProps {
     archived: string;
     created: string;
     loadingKnowledgeBase: string;
+    recentFailed: string;
+    retry: string;
   };
 
   // Component dependencies
@@ -69,13 +77,14 @@ export function ResourceDiscoveryPage({
   searchDocuments,
   entityTypes,
   isLoadingRecent,
+  recentError = null,
+  onRetryRecent,
   isSearching,
   searchQuery,
   onSearchQueryChange,
   selectedEntityType,
   onSelectedEntityTypeChange,
   theme,
-  showLineNumbers,
   activePanel,
   onNavigateToResource,
   onNavigateToCompose,
@@ -116,6 +125,20 @@ export function ResourceDiscoveryPage({
     }
   }, []);
 
+  // A terminally failed load is not still loading — check it first.
+  if (recentError) {
+    return (
+      <div className="semiont-page__loading">
+        <p className="semiont-page__loading-text">{t.recentFailed}</p>
+        {onRetryRecent && (
+          <button type="button" onClick={onRetryRecent} className="semiont-button" data-variant="secondary">
+            {t.retry}
+          </button>
+        )}
+      </div>
+    );
+  }
+
   // Loading state
   if (isLoadingRecent) {
     return (
@@ -261,7 +284,6 @@ export function ResourceDiscoveryPage({
         <ToolbarPanels
           activePanel={activePanel}
           theme={theme}
-          showLineNumbers={showLineNumbers}
         />
 
         {/* Toolbar - Always visible on the right */}

package/src/features/resource-discovery/state/__tests__/discover-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, 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';
-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;
@@ -34,9 +36,9 @@ function mockClient(overrides: {
     browse: {
       resources: (filters: BrowseFilters = {}) => {
         resourceCalls.push(filters);
-        return resourcesFn(filters).asObservable();
+        return asStates(resourcesFn(filters).asObservable());
       },
-      entityTypes: () => entityTypes$.asObservable(),
+      entityTypes: () => asStates(entityTypes$.asObservable()),
     },
   } as unknown as SemiontClient;
 
@@ -46,9 +48,9 @@ function mockClient(overrides: {
 describe('createDiscoverStateUnit', () => {
   it('exposes recent resources from browse namespace', async () => {
     const { client } = mockClient();
-    const stateUnit = createDiscoverStateUnit(client, mockBrowse());
+    const stateUnit = createDiscoverStateUnit(sessionOf(client), mockBrowse());
 
-    const recent = await firstValueFrom(stateUnit.recentResources$);
+    const recent = await firstValueFrom(stateUnit.recent.value$);
     expect(recent).toEqual([{ '@id': 'r1' }]);
 
     stateUnit.dispose();
@@ -56,9 +58,9 @@ describe('createDiscoverStateUnit', () => {
 
   it('exposes entity types from browse namespace', async () => {
     const { client } = mockClient();
-    const stateUnit = createDiscoverStateUnit(client, mockBrowse());
+    const stateUnit = createDiscoverStateUnit(sessionOf(client), mockBrowse());
 
-    const types = await firstValueFrom(stateUnit.entityTypes$);
+    const types = await firstValueFrom(stateUnit.entityTypes.value$);
     expect(types).toEqual(['Person']);
 
     stateUnit.dispose();
@@ -67,9 +69,9 @@ describe('createDiscoverStateUnit', () => {
   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 stateUnit = createDiscoverStateUnit(sessionOf(client), mockBrowse());
 
-    const types = await firstValueFrom(stateUnit.entityTypes$);
+    const types = await firstValueFrom(stateUnit.entityTypes.value$);
     expect(types).toEqual([]);
 
     stateUnit.dispose();
@@ -78,13 +80,13 @@ describe('createDiscoverStateUnit', () => {
   it('reports loading when resources are undefined', async () => {
     const resources$ = new BehaviorSubject<unknown[] | undefined>(undefined);
     const { client } = mockClient({ resources$ });
-    const stateUnit = createDiscoverStateUnit(client, mockBrowse());
+    const stateUnit = createDiscoverStateUnit(sessionOf(client), mockBrowse());
 
-    const loading = await firstValueFrom(stateUnit.isLoadingRecent$);
+    const loading = await firstValueFrom(stateUnit.recent.loading$);
     expect(loading).toBe(true);
 
     resources$.next([]);
-    const loaded = await firstValueFrom(stateUnit.isLoadingRecent$.pipe(filter((l) => !l)));
+    const loaded = await firstValueFrom(stateUnit.recent.loading$.pipe(filter((l) => !l)));
     expect(loaded).toBe(false);
 
     stateUnit.dispose();
@@ -92,7 +94,7 @@ describe('createDiscoverStateUnit', () => {
 
   it('exposes a search pipeline', () => {
     const { client } = mockClient();
-    const stateUnit = createDiscoverStateUnit(client, mockBrowse());
+    const stateUnit = createDiscoverStateUnit(sessionOf(client), mockBrowse());
 
     expect(stateUnit.search).toBeDefined();
     expect(typeof stateUnit.search.setQuery).toBe('function');
@@ -103,9 +105,9 @@ describe('createDiscoverStateUnit', () => {
 
   it('initial selectedEntityType$ is empty and recent fetch carries no entityType', async () => {
     const { client, resourceCalls } = mockClient();
-    const stateUnit = createDiscoverStateUnit(client, mockBrowse());
+    const stateUnit = createDiscoverStateUnit(sessionOf(client), mockBrowse());
 
-    await firstValueFrom(stateUnit.recentResources$);
+    await firstValueFrom(stateUnit.recent.value$);
 
     expect(resourceCalls).toHaveLength(1);
     expect(resourceCalls[0]).toEqual({ limit: 10, archived: false });
@@ -116,10 +118,10 @@ describe('createDiscoverStateUnit', () => {
 
   it('setSelectedEntityType drives a refetch with the entityType filter', async () => {
     const { client, resourceCalls } = mockClient();
-    const stateUnit = createDiscoverStateUnit(client, mockBrowse());
+    const stateUnit = createDiscoverStateUnit(sessionOf(client), mockBrowse());
 
     // Prime the first subscription so the switchMap is live.
-    const sub = stateUnit.recentResources$.subscribe();
+    const sub = stateUnit.recent.value$.subscribe();
 
     stateUnit.setSelectedEntityType('Person');
 
@@ -136,7 +138,7 @@ describe('createDiscoverStateUnit', () => {
     vi.useFakeTimers();
     try {
       const { client, resourceCalls } = mockClient();
-      const stateUnit = createDiscoverStateUnit(client, mockBrowse());
+      const stateUnit = createDiscoverStateUnit(sessionOf(client), mockBrowse());
 
       const collected: Array<{ results: unknown[]; isSearching: boolean }> = [];
       const sub = stateUnit.search.state$.subscribe((s) => collected.push(s));
@@ -161,7 +163,7 @@ describe('createDiscoverStateUnit', () => {
       const { client, resourceCalls } = mockClient({
         resourcesFn: (filters) => (filters.search ? results$ : new BehaviorSubject<unknown[] | undefined>([])),
       });
-      const stateUnit = createDiscoverStateUnit(client, mockBrowse());
+      const stateUnit = createDiscoverStateUnit(sessionOf(client), mockBrowse());
 
       const sub = stateUnit.search.state$.subscribe();
       stateUnit.setSelectedEntityType('Person');
@@ -191,7 +193,7 @@ describe('createDiscoverStateUnit', () => {
       const { client } = mockClient({
         resourcesFn: () => results$,
       });
-      const stateUnit = createDiscoverStateUnit(client, mockBrowse());
+      const stateUnit = createDiscoverStateUnit(sessionOf(client), mockBrowse());
 
       const collected: Array<{ results: unknown[]; isSearching: boolean }> = [];
       const sub = stateUnit.search.state$.subscribe((s) => collected.push(s));
@@ -215,7 +217,7 @@ describe('createDiscoverStateUnit', () => {
       const { client } = mockClient({
         resourcesFn: () => inflight$,
       });
-      const stateUnit = createDiscoverStateUnit(client, mockBrowse());
+      const stateUnit = createDiscoverStateUnit(sessionOf(client), mockBrowse());
 
       const collected: Array<{ results: unknown[]; isSearching: boolean }> = [];
       const sub = stateUnit.search.state$.subscribe((s) => collected.push(s));
@@ -234,7 +236,7 @@ describe('createDiscoverStateUnit', () => {
 
   it('search query observable echoes the latest setQuery value', async () => {
     const { client } = mockClient();
-    const stateUnit = createDiscoverStateUnit(client, mockBrowse());
+    const stateUnit = createDiscoverStateUnit(sessionOf(client), mockBrowse());
 
     const queries = stateUnit.search.query$.pipe(skip(1), take(1), toArray()).toPromise();
     stateUnit.search.setQuery('alpha');
@@ -246,9 +248,9 @@ describe('createDiscoverStateUnit', () => {
 
   it('omits entityType from the filter when the empty sentinel is selected', async () => {
     const { client, resourceCalls } = mockClient();
-    const stateUnit = createDiscoverStateUnit(client, mockBrowse());
+    const stateUnit = createDiscoverStateUnit(sessionOf(client), mockBrowse());
 
-    const sub = stateUnit.recentResources$.subscribe();
+    const sub = stateUnit.recent.value$.subscribe();
     stateUnit.setSelectedEntityType('Person');
     stateUnit.setSelectedEntityType('');
 
@@ -266,10 +268,73 @@ describe('DiscoverStateUnit — StateUnit axioms', () => {
       setup: () => {
         const browse = disposeProbe();
         const { client } = mockClient();
-        return { unit: createDiscoverStateUnit(client, browse as unknown as ShellStateUnit), passedIn: [browse] };
+        return { unit: createDiscoverStateUnit(sessionOf(client), browse as unknown as ShellStateUnit), passedIn: [browse] };
       },
       surfaces: (u) => [u.selectedEntityType$],
       invocations: (u) => [() => u.setSelectedEntityType('')],
     });
   });
 });
+
+describe('createDiscoverStateUnit — terminal load failure', () => {
+  // `isLoadingRecent$` was `recent$.pipe(map(r => r === undefined))`, so a
+  // terminally failed list (B15) — which has no value either — left
+  // /know/discover spinning for ever. Same defect as the References and
+  // History panels. See .plans/PANEL-FAILURE-STATES.md
+
+  it('recent: stops loading and surfaces the reason instead of spinning for ever', async () => {
+    const resources$ = new BehaviorSubject<unknown[] | undefined>(undefined);
+    const { client } = mockClient({ resources$ });
+    const unit = createDiscoverStateUnit(sessionOf(client), mockBrowse());
+
+    expect(await firstValueFrom(unit.recent.loading$)).toBe(true);
+    resources$.next({ status: 'failed', error: new Error('Resource not found') } as never);
+
+    expect(await firstValueFrom(unit.recent.loading$)).toBe(false);
+    expect((await firstValueFrom(unit.recent.error$) as Error | null)?.message)
+      .toBe('Resource not found');
+
+    unit.dispose();
+  });
+
+  it('entityTypes: same, and keeps an empty list to render', async () => {
+    const entityTypes$ = new BehaviorSubject<string[] | undefined>(undefined);
+    const { client } = mockClient({ entityTypes$ });
+    const unit = createDiscoverStateUnit(sessionOf(client), mockBrowse());
+
+    entityTypes$.next({ status: 'failed', error: new Error('boom') } as never);
+
+    expect(await firstValueFrom(unit.entityTypes.loading$)).toBe(false);
+    expect(await firstValueFrom(unit.entityTypes.error$)).not.toBeNull();
+    expect(await firstValueFrom(unit.entityTypes.value$)).toEqual([]);
+
+    unit.dispose();
+  });
+
+  it('recent.retry() re-issues the query and can recover', async () => {
+    // A fresh `observe()` is what clears the B15 marker, so retry must reach
+    // `browse.resources()` again rather than re-subscribing to a dead stream.
+    const attempts: BehaviorSubject<unknown[] | undefined>[] = [];
+    const { client } = mockClient({
+      resourcesFn: () => {
+        const s = new BehaviorSubject<unknown[] | undefined>(undefined);
+        attempts.push(s);
+        return s;
+      },
+    });
+    const unit = createDiscoverStateUnit(sessionOf(client), mockBrowse());
+
+    attempts[0]!.next({ status: 'failed', error: new Error('nope') } as never);
+    expect(await firstValueFrom(unit.recent.error$)).not.toBeNull();
+
+    unit.recent.retry();
+    expect(attempts.length).toBeGreaterThan(1);
+    expect(await firstValueFrom(unit.recent.error$)).toBeNull();
+
+    attempts[attempts.length - 1]!.next([{ '@id': 'r1' }]);
+    expect(await firstValueFrom(unit.recent.value$)).toHaveLength(1);
+    expect(await firstValueFrom(unit.recent.loading$)).toBe(false);
+
+    unit.dispose();
+  });
+});

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

@@ -1,10 +1,12 @@
 import { BehaviorSubject, Subject, combineLatest, of, type Observable } from 'rxjs';
+import { readyValue } from '@semiont/sdk';
 import { debounceTime, distinctUntilChanged, map, startWith, switchMap, shareReplay } from 'rxjs/operators';
 import type { ResourceDescriptor } from '@semiont/core';
-import type { SemiontClient } from '@semiont/sdk';
+import type { SemiontSession } from '@semiont/sdk';
 import type { StateUnit } from '@semiont/core';
 import { createDisposer } from '@semiont/sdk';
 import type { ShellStateUnit } from '../../../state/shell-state-unit';
+import { trackList, type ListState } from '../../../state/list-state';
 
 const RECENT_LIMIT = 10;
 const SEARCH_LIMIT = 20;
@@ -19,17 +21,17 @@ export interface DiscoverSearchPipeline {
 export interface DiscoverStateUnit extends StateUnit {
   browse: ShellStateUnit;
   search: DiscoverSearchPipeline;
-  recentResources$: Observable<ResourceDescriptor[]>;
-  entityTypes$: Observable<string[]>;
-  isLoadingRecent$: Observable<boolean>;
+  recent: ListState<ResourceDescriptor[]>;
+  entityTypes: ListState<string[]>;
   selectedEntityType$: Observable<string>;
   setSelectedEntityType(value: string): void;
 }
 
 export function createDiscoverStateUnit(
-  client: SemiontClient,
+  session: SemiontSession,
   browse: ShellStateUnit,
 ): DiscoverStateUnit {
+  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
@@ -44,28 +46,27 @@ export function createDiscoverStateUnit(
   const queryInput$ = new Subject<string>();
   disposer.add(() => queryInput$.complete());
 
-  const recent$ = selectedEntityType$.pipe(
-    switchMap((et) =>
-      client.browse.resources({
-        limit: RECENT_LIMIT,
-        archived: false,
-        ...(et ? { entityType: et } : {}),
-      }),
+  // `trackList` holds the single subscription and multicasts through its own
+  // subjects, so the previous `shareReplay` is unnecessary — and it would have
+  // been actively wrong here: a replayed ERROR cannot be retried away, and
+  // retry must reach `browse.resources()` again for B15 to clear the marker.
+  // The thunk therefore rebuilds the whole chain per attempt.
+  const recent = trackList<ResourceDescriptor[]>(
+    () => selectedEntityType$.pipe(
+      switchMap((et) =>
+        client.browse.resources({
+          limit: RECENT_LIMIT,
+          archived: false,
+          ...(et ? { entityType: et } : {}),
+        }),
+      ),
     ),
-    shareReplay({ bufferSize: 1, refCount: true }),
-  );
-
-  const recentResources$: Observable<ResourceDescriptor[]> = recent$.pipe(
-    map((r) => r ?? []),
+    [],
   );
+  disposer.add(recent.dispose);
 
-  const isLoadingRecent$: Observable<boolean> = recent$.pipe(
-    map((r) => r === undefined),
-  );
-
-  const entityTypes$: Observable<string[]> = client.browse.entityTypes().pipe(
-    map((e) => e ?? []),
-  );
+  const entityTypes = trackList<string[]>(() => client.browse.entityTypes(), []);
+  disposer.add(entityTypes.dispose);
 
   const debouncedQuery$ = queryInput$.pipe(
     startWith(''),
@@ -87,9 +88,9 @@ export function createDiscoverStateUnit(
             ...(et ? { entityType: et } : {}),
           })
           .pipe(
-            map((results) => ({
-              results: results ?? [],
-              isSearching: results === undefined,
+            map((st) => ({
+              results: readyValue(st) ?? [],
+              isSearching: st.status === 'pending',
             })),
             startWith({ results: [] as ResourceDescriptor[], isSearching: true }),
           );
@@ -106,9 +107,8 @@ export function createDiscoverStateUnit(
   return {
     browse,
     search,
-    recentResources$,
-    entityTypes$,
-    isLoadingRecent$,
+    recent: recent.state,
+    entityTypes: entityTypes.state,
     selectedEntityType$: selectedEntityType$.asObservable(),
     setSelectedEntityType: (value) => selectedEntityType$.next(value),
     dispose: () => disposer.dispose(),

package/src/features/resource-viewer/__tests__/ResourceViewerPage.test.tsx

@@ -12,6 +12,7 @@ import { ResourceViewerPage } from '../components/ResourceViewerPage';
 import type { ResourceViewerPageProps } from '../components/ResourceViewerPage';
 import { ToastProvider } from '../../../components/Toast';
 import { ThemeProvider } from '../../../contexts/ThemeContext';
+import { LineNumbersProvider } from '../../../contexts/LineNumbersContext';
 import { createTestSemiontWrapper } from '../../../test-utils';
 import type { ResourceId } from '@semiont/core';
 
@@ -57,6 +58,7 @@ const { stubBrowser } = vi.hoisted(() => {
     removeOpenResource: vi.fn(),
     updateOpenResourceName: vi.fn(),
     reorderOpenResources: vi.fn(),
+    setLastViewedResource: vi.fn(),
     emit: vi.fn(),
     on: vi.fn(() => () => {}),
     stream: vi.fn(() => ({ subscribe: () => ({ unsubscribe: () => {} }) })),
@@ -162,11 +164,13 @@ const renderWithProviders = (ui: React.ReactElement) => {
   const { SemiontWrapper } = createTestSemiontWrapper();
   return render(
     <ThemeProvider>
-      <ToastProvider>
-        <SemiontWrapper>
-          {ui}
-        </SemiontWrapper>
-      </ToastProvider>
+      <LineNumbersProvider>
+        <ToastProvider>
+          <SemiontWrapper>
+            {ui}
+          </SemiontWrapper>
+        </ToastProvider>
+      </LineNumbersProvider>
     </ThemeProvider>
   );
 };