@semiont/react-ui 0.5.0 → 0.5.2

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

@@ -0,0 +1,209 @@
+import { BehaviorSubject, type Observable, map } from 'rxjs';
+import type { GatheredContext, AnnotationId, ContentFormat, 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 type { UploadProgress } from '@semiont/sdk';
+
+export type ComposeMode = 'new' | 'clone' | 'reference';
+
+export interface ComposeParams {
+  mode?: string | undefined;
+  token?: string | undefined;
+  annotationUri?: string | undefined;
+  sourceDocumentId?: string | undefined;
+  name?: string | undefined;
+  entityTypes?: string | undefined;
+  storedContext?: string | undefined;
+}
+
+export interface CloneData {
+  sourceResource: ResourceDescriptor;
+  sourceContent: string;
+}
+
+export interface ReferenceData {
+  annotationUri: string;
+  sourceDocumentId: string;
+  name: string;
+  entityTypes: string[];
+}
+
+export interface SaveResourceParams {
+  mode: ComposeMode;
+  name: string;
+  storageUri: string;
+  content?: string;
+  file?: File;
+  format?: string;
+  charset?: string;
+  entityTypes?: string[];
+  language: string;
+  archiveOriginal?: boolean;
+  annotationUri?: string;
+  sourceDocumentId?: string;
+}
+
+export interface ComposePageStateUnit extends StateUnit {
+  browse: ShellStateUnit;
+  mode$: Observable<ComposeMode>;
+  loading$: Observable<boolean>;
+  cloneData$: Observable<CloneData | null>;
+  referenceData$: Observable<ReferenceData | null>;
+  gatheredContext$: Observable<GatheredContext | null>;
+  entityTypes$: Observable<string[]>;
+  /**
+   * Live upload-progress for the in-flight `save(...)` call. Emits the
+   * full `UploadProgress` lifecycle (started → finished) while a save is
+   * underway; resets to `null` between saves and after completion. UI
+   * components can subscribe to render an upload-in-progress indicator.
+   */
+  uploadProgress$: Observable<UploadProgress | null>;
+  save(params: SaveResourceParams): Promise<string>;
+}
+
+export function createComposePageStateUnit(
+  client: SemiontClient,
+  browse: ShellStateUnit,
+  params: ComposeParams,
+  auth?: AccessToken,
+): ComposePageStateUnit {
+  const disposer = createDisposer();
+  disposer.add(browse);
+
+  const isReferenceMode = Boolean(params.annotationUri && params.sourceDocumentId && params.name);
+  const isCloneMode = params.mode === 'clone' && Boolean(params.token);
+  const pageMode: ComposeMode = isCloneMode ? 'clone' : isReferenceMode ? 'reference' : 'new';
+
+  const mode$ = new BehaviorSubject<ComposeMode>(pageMode);
+  const loading$ = new BehaviorSubject<boolean>(true);
+  const cloneData$ = new BehaviorSubject<CloneData | null>(null);
+  const referenceData$ = new BehaviorSubject<ReferenceData | null>(null);
+  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 ?? []),
+  );
+
+  // Initialize based on mode
+  if (isReferenceMode) {
+    const entityTypes = params.entityTypes ? params.entityTypes.split(',') : [];
+    referenceData$.next({
+      annotationUri: params.annotationUri!,
+      sourceDocumentId: params.sourceDocumentId!,
+      name: params.name!,
+      entityTypes,
+    });
+    if (params.storedContext) {
+      try { gatheredContext$.next(JSON.parse(params.storedContext)); } catch { /* ignore malformed */ }
+    }
+    loading$.next(false);
+  } else if (isCloneMode) {
+    void (async () => {
+      try {
+        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);
+          cloneData$.next({ sourceResource: tokenResult, sourceContent: content });
+        }
+      } catch {
+        // Error handling is the consumer's responsibility (toast)
+      }
+      loading$.next(false);
+    })();
+  } else {
+    loading$.next(false);
+  }
+
+  const save = async (saveParams: SaveResourceParams): Promise<string> => {
+    if (saveParams.mode === 'clone') {
+      const response = await client.yield.createFromToken({
+        token: params.token!,
+        name: saveParams.name,
+        content: saveParams.content!,
+        archiveOriginal: saveParams.archiveOriginal ?? true,
+      });
+      return response.resourceId;
+    }
+
+    let fileToUpload: File;
+    let mimeType: string;
+
+    if (saveParams.file) {
+      fileToUpload = saveParams.file;
+      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';
+      fileToUpload = new File([blob], saveParams.name + extension, { type: saveParams.format ?? 'application/octet-stream' });
+      mimeType = saveParams.format ?? 'application/octet-stream';
+    }
+
+    const format = saveParams.charset && !saveParams.file ? `${mimeType}; charset=${saveParams.charset}` : mimeType;
+
+    // Subscribe to the upload's full progress lifecycle so the UI can
+    // render an upload-in-progress indicator. Resolve the save() promise
+    // on the `finished` event and clear the progress signal on completion
+    // (success or error).
+    const newResourceId = await new Promise<ResourceId>((resolve, reject) => {
+      client.yield.resource({
+        name: saveParams.name,
+        file: fileToUpload,
+        format,
+        entityTypes: saveParams.entityTypes || [],
+        language: saveParams.language,
+        creationMethod: 'ui',
+        storageUri: saveParams.storageUri,
+      }).subscribe({
+        next: (event) => {
+          uploadProgress$.next(event);
+          if (event.phase === 'finished') resolve(event.resourceId);
+        },
+        error: (err) => {
+          uploadProgress$.next(null);
+          reject(err);
+        },
+        complete: () => uploadProgress$.next(null),
+      });
+    });
+
+    if (saveParams.mode === 'reference' && saveParams.annotationUri && saveParams.sourceDocumentId) {
+      await client.bind.body(
+        makeResourceId(saveParams.sourceDocumentId),
+        makeAnnotationId(saveParams.annotationUri) as AnnotationId,
+        [{ op: 'add', item: { type: 'SpecificResource' as const, source: newResourceId, purpose: 'linking' as const } }],
+      );
+    }
+
+    return newResourceId;
+  };
+
+  return {
+    browse,
+    mode$: mode$.asObservable(),
+    loading$: loading$.asObservable(),
+    cloneData$: cloneData$.asObservable(),
+    referenceData$: referenceData$.asObservable(),
+    gatheredContext$: gatheredContext$.asObservable(),
+    entityTypes$,
+    uploadProgress$: uploadProgress$.asObservable(),
+    save,
+    dispose: () => {
+      mode$.complete();
+      loading$.complete();
+      cloneData$.complete();
+      referenceData$.complete();
+      gatheredContext$.complete();
+      disposer.dispose();
+    },
+  };
+}

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

@@ -7,7 +7,7 @@
 
 import React, { useState, useCallback, useRef } from 'react';
 import { getResourceId } from '@semiont/core';
-import { COMMON_PANELS, type ToolbarPanelType } from '@semiont/sdk';
+import { COMMON_PANELS, type ToolbarPanelType } from '../../../state/shell-state-unit';
 import { useRovingTabIndex } from '../../../hooks/useRovingTabIndex';
 import { Toolbar } from '../../../components/Toolbar';
 import { ResourceCard } from './ResourceCard';

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

@@ -0,0 +1,76 @@
+import { describe, it, expect, vi } from 'vitest';
+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 { createDiscoverStateUnit } from '../discover-state-unit';
+
+function mockBrowse(): ShellStateUnit {
+  return { dispose: vi.fn() } as unknown as ShellStateUnit;
+}
+
+function mockClient(overrides: {
+  resources$?: BehaviorSubject<unknown[] | undefined>;
+  entityTypes$?: BehaviorSubject<string[] | undefined>;
+} = {}): SemiontClient {
+  const resources$ = overrides.resources$ ?? new BehaviorSubject<unknown[] | undefined>([{ '@id': 'r1' }]);
+  const entityTypes$ = overrides.entityTypes$ ?? new BehaviorSubject<string[] | undefined>(['Person']);
+  return {
+    browse: {
+      resources: () => resources$.asObservable(),
+      entityTypes: () => entityTypes$.asObservable(),
+    },
+  } as unknown as SemiontClient;
+}
+
+describe('createDiscoverStateUnit', () => {
+  it('exposes recent resources from browse namespace', async () => {
+    const stateUnit = createDiscoverStateUnit(mockClient(), mockBrowse());
+
+    const recent = await firstValueFrom(stateUnit.recentResources$);
+    expect(recent).toEqual([{ '@id': 'r1' }]);
+
+    stateUnit.dispose();
+  });
+
+  it('exposes entity types from browse namespace', async () => {
+    const stateUnit = createDiscoverStateUnit(mockClient(), mockBrowse());
+
+    const types = await firstValueFrom(stateUnit.entityTypes$);
+    expect(types).toEqual(['Person']);
+
+    stateUnit.dispose();
+  });
+
+  it('reports loading when resources are undefined', async () => {
+    const resources$ = new BehaviorSubject<unknown[] | undefined>(undefined);
+    const stateUnit = createDiscoverStateUnit(mockClient({ resources$ }), mockBrowse());
+
+    const loading = await firstValueFrom(stateUnit.isLoadingRecent$);
+    expect(loading).toBe(true);
+
+    resources$.next([]);
+    const loaded = await firstValueFrom(stateUnit.isLoadingRecent$.pipe(filter((l) => !l)));
+    expect(loaded).toBe(false);
+
+    stateUnit.dispose();
+  });
+
+  it('exposes a search pipeline', () => {
+    const stateUnit = createDiscoverStateUnit(mockClient(), mockBrowse());
+
+    expect(stateUnit.search).toBeDefined();
+    expect(typeof stateUnit.search.setQuery).toBe('function');
+    expect(stateUnit.search.state$).toBeDefined();
+
+    stateUnit.dispose();
+  });
+
+  it('disposes browse and search on dispose', () => {
+    const browse = mockBrowse();
+    const stateUnit = createDiscoverStateUnit(mockClient(), browse);
+    stateUnit.dispose();
+
+    expect(browse.dispose).toHaveBeenCalled();
+  });
+});

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

@@ -0,0 +1,54 @@
+import { map, type Observable } from 'rxjs';
+import type { ResourceDescriptor } from '@semiont/core';
+import type { StateUnit } from '@semiont/sdk';
+import { createDisposer } from '@semiont/sdk';
+import type { ShellStateUnit } from '../../../state/shell-state-unit';
+import { createSearchPipeline, type SearchPipeline } from '@semiont/sdk';
+import type { SemiontClient } from '@semiont/sdk';
+
+const RECENT_LIMIT = 10;
+const SEARCH_LIMIT = 20;
+
+export interface DiscoverStateUnit extends StateUnit {
+  browse: ShellStateUnit;
+  search: SearchPipeline<ResourceDescriptor>;
+  recentResources$: Observable<ResourceDescriptor[]>;
+  entityTypes$: Observable<string[]>;
+  isLoadingRecent$: Observable<boolean>;
+}
+
+export function createDiscoverStateUnit(
+  client: SemiontClient,
+  browse: ShellStateUnit,
+): DiscoverStateUnit {
+  const disposer = createDisposer();
+
+  const search = createSearchPipeline<ResourceDescriptor>((q) =>
+    client.browse.resources({ search: q, limit: SEARCH_LIMIT }),
+  );
+  disposer.add(search);
+  disposer.add(browse);
+
+  const recent$ = client.browse.resources({ limit: RECENT_LIMIT, archived: false });
+
+  const recentResources$: Observable<ResourceDescriptor[]> = recent$.pipe(
+    map((r) => r ?? []),
+  );
+
+  const isLoadingRecent$: Observable<boolean> = recent$.pipe(
+    map((r) => r === undefined),
+  );
+
+  const entityTypes$: Observable<string[]> = client.browse.entityTypes().pipe(
+    map((e) => e ?? []),
+  );
+
+  return {
+    browse,
+    search,
+    recentResources$,
+    entityTypes$,
+    isLoadingRecent$,
+    dispose: () => disposer.dispose(),
+  };
+}

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

@@ -37,14 +37,16 @@ vi.mock('../../../hooks/useResourceContent', () => ({
 
 // Stub SemiontBrowser whose activeSession$ emits a session carrying a real
 // SemiontClient (wired to a dummy baseUrl). The real client surface lets
-// createResourceViewerPageVM run against the full namespace API without us
+// createResourceViewerPageStateUnit run against the full namespace API without us
 // hand-stubbing every method it touches.
 const { stubBrowser } = vi.hoisted(() => {
   const { BehaviorSubject } = require('rxjs');
   const { SemiontClient, HttpTransport, HttpContentTransport } = require('@semiont/sdk');
   const { baseUrl } = require('@semiont/core');
   const transport = new HttpTransport({ baseUrl: baseUrl('http://localhost:4000') });
-  const client = new SemiontClient(transport, new HttpContentTransport(transport));
+  // HttpTransport implements both ITransport and IBackendOperations; pass it
+  // as backend so `client.auth` (used by useMediaToken) is wired.
+  const client = new SemiontClient(transport, new HttpContentTransport(transport), transport);
   const stubActiveSession$ = new BehaviorSubject({ client });
   const stubOpenResources$ = new BehaviorSubject([]);
   const stubBrowser = {

package/src/features/resource-viewer/components/ResourceViewerPage.tsx

@@ -31,9 +31,9 @@ import { useHoverDelay } from '../../../hooks/useHoverDelay';
 import { useEventSubscriptions } from '../../../contexts/useEventSubscription';
 import { useResourceAnnotations } from '../../../contexts/ResourceAnnotationsContext';
 import { useSemiont } from '../../../session/SemiontProvider';
-import { createResourceViewerPageVM } from '@semiont/sdk';
-import { useViewModel } from '../../../hooks/useViewModel';
-import { useShellVM } from '../../../hooks/useShellVM';
+import { createResourceViewerPageStateUnit } from '../state/resource-viewer-page-state-unit';
+import { useStateUnit } from '../../../hooks/useStateUnit';
+import { useShellStateUnit } from '../../../hooks/useShellStateUnit';
 import { useTranslations } from '../../../contexts/TranslationContext';
 import { ReferenceWizardModal } from '../../../components/modals/ReferenceWizardModal';
 import type { GenerationConfig } from '../../../components/modals/ConfigureGenerationStep';
@@ -157,29 +157,29 @@ export function ResourceViewerPage({
   const content = isBinary ? binaryContent : textContent;
   const contentLoading = isBinary ? mediaTokenLoading : textLoading;
 
-  // Composite VM — owns all flow VMs, wizard state, annotations, entity types
-  const browseVM = useShellVM();
-  const vm = useViewModel(() => createResourceViewerPageVM(semiont!, rUri, locale, browseVM));
+  // Composite state unit — owns all flow VMs, wizard state, annotations, entity types
+  const browseStateUnit = useShellStateUnit();
+  const stateUnit = useStateUnit(() => createResourceViewerPageStateUnit(semiont!, rUri, locale, browseStateUnit));
 
-  const annotations = useObservable(vm.annotations$) ?? [];
-  const groups = useObservable(vm.annotationGroups$);
-  const allEntityTypes = useObservable(vm.entityTypes$) ?? [];
-  const referencedByRaw = useObservable(vm.referencedBy$);
+  const annotations = useObservable(stateUnit.annotations$) ?? [];
+  const groups = useObservable(stateUnit.annotationGroups$);
+  const allEntityTypes = useObservable(stateUnit.entityTypes$) ?? [];
+  const referencedByRaw = useObservable(stateUnit.referencedBy$);
   const referencedBy = referencedByRaw ?? [];
   const referencedByLoading = referencedByRaw === undefined;
-  const hoveredAnnotationId = useObservable(vm.beckon.hoveredAnnotationId$) ?? null;
-  const pendingAnnotation = useObservable(vm.mark.pendingAnnotation$) ?? null;
-  const assistingMotivation = useObservable(vm.mark.assistingMotivation$) ?? null;
-  const progress = useObservable(vm.mark.progress$) ?? null;
-  const activePanel = useObservable(vm.browse.activePanel$) ?? null;
-  const scrollToAnnotationId = useObservable(vm.browse.scrollToAnnotationId$) ?? null;
-  const panelInitialTab = useObservable(vm.browse.panelInitialTab$) ?? null;
-  const onScrollCompleted = vm.browse.onScrollCompleted;
-  const generationProgress = useObservable(vm.yield.progress$) ?? null;
-  const gatherContext = useObservable(vm.gather.context$) ?? null;
-  const gatherLoading = useObservable(vm.gather.loading$) ?? false;
-  const gatherError = useObservable(vm.gather.error$) ?? null;
-  const wizardState = useObservable(vm.wizard$);
+  const hoveredAnnotationId = useObservable(stateUnit.beckon.hoveredAnnotationId$) ?? null;
+  const pendingAnnotation = useObservable(stateUnit.mark.pendingAnnotation$) ?? null;
+  const assistingMotivation = useObservable(stateUnit.mark.assistingMotivation$) ?? null;
+  const progress = useObservable(stateUnit.mark.progress$) ?? null;
+  const activePanel = useObservable(stateUnit.browse.activePanel$) ?? null;
+  const scrollToAnnotationId = useObservable(stateUnit.browse.scrollToAnnotationId$) ?? null;
+  const panelInitialTab = useObservable(stateUnit.browse.panelInitialTab$) ?? null;
+  const onScrollCompleted = stateUnit.browse.onScrollCompleted;
+  const generationProgress = useObservable(stateUnit.yield.progress$) ?? null;
+  const gatherContext = useObservable(stateUnit.gather.context$) ?? null;
+  const gatherLoading = useObservable(stateUnit.gather.loading$) ?? false;
+  const gatherError = useObservable(stateUnit.gather.error$) ?? null;
+  const wizardState = useObservable(stateUnit.wizard$);
   const wizardOpen = wizardState?.open ?? false;
   const wizardAnnotationId = wizardState?.annotationId ?? null;
   const wizardResourceId = wizardState?.resourceId ?? null;
@@ -187,21 +187,25 @@ export function ResourceViewerPage({
   const wizardEntityTypes = wizardState?.entityTypes ?? [];
 
   const handleWizardClose = useCallback(() => {
-    vm.closeWizard();
-  }, [vm]);
+    stateUnit.closeWizard();
+  }, [stateUnit]);
 
   const handleWizardGenerateSubmit = useCallback((referenceId: string, config: GenerationConfig) => {
     clearNewAnnotationId(annotationId(referenceId));
-    vm.yield.generate(referenceId, {
+    stateUnit.yield.generate(referenceId, {
       title: config.title,
       storageUri: config.storagePath,
       prompt: config.prompt,
       language: config.language,
+      // The source resource is the one the user is viewing — fed into the
+      // prompt so the LLM understands the embedded context (selected
+      // passage, surrounding text) regardless of UI/target language.
+      sourceLanguage: getLanguage(resource),
       temperature: config.temperature,
       maxTokens: config.maxTokens,
       context: config.context,
     });
-  }, [vm, clearNewAnnotationId]);
+  }, [stateUnit, clearNewAnnotationId, resource]);
 
   const handleWizardLinkResource = useCallback(async (referenceId: string, targetResourceId: string) => {
     if (!semiont) return;
@@ -249,8 +253,8 @@ export function ResourceViewerPage({
     }
   }, [resource, rUri, browser]);
 
-  // Bridge: when the mark VM produces a pending annotation, open the
-  // annotations panel. The mark VM (session-scoped) can't emit `panel:open`
+  // Bridge: when the mark state unit produces a pending annotation, open the
+  // annotations panel. The mark state unit (session-scoped) can't emit `panel:open`
   // (app-scoped) directly — the React tree is the natural seam between
   // the two buses.
   useEffect(() => {
@@ -259,9 +263,9 @@ export function ResourceViewerPage({
     }
   }, [pendingAnnotation, browser]);
 
-  // Domain events flow through the bus gateway (ActorVM → local EventBus).
+  // Domain events flow through the bus gateway (ActorStateUnit → local EventBus).
   // BrowseNamespace cache invalidation handles annotation/resource updates.
-  // The resource-viewer-page-vm calls client.subscribeToResource(resourceId)
+  // The resource-viewer-page-state-unit calls client.subscribeToResource(resourceId)
   // which bridges scoped domain events into the local EventBus.
 
   const handleResourceArchive = useCallback(async () => {
@@ -490,7 +494,6 @@ export function ResourceViewerPage({
             activePanel={activePanel}
             theme={theme}
             showLineNumbers={showLineNumbers}
-            hoverDelayMs={hoverDelayMs}
             width={
               activePanel === 'jsonld' ? 'w-[600px]' :
               activePanel === 'annotations' ? 'w-[400px]' :
@@ -521,6 +524,7 @@ export function ResourceViewerPage({
                 referencedByLoading={referencedByLoading}
                 resourceId={rUri}
                 locale={locale}
+                sourceLanguage={getLanguage(resource)}
                 scrollToAnnotationId={scrollToAnnotationId}
                 hoveredAnnotationId={hoveredAnnotationId}
                 onScrollCompleted={onScrollCompleted}

package/src/features/resource-viewer/state/__tests__/resource-loader-state-unit.test.ts

@@ -0,0 +1,46 @@
+import { describe, it, expect, vi } from 'vitest';
+import { BehaviorSubject, firstValueFrom } from 'rxjs';
+import { filter } from 'rxjs/operators';
+import { resourceId as makeResourceId } from '@semiont/core';
+import type { SemiontClient } from '@semiont/sdk';
+import { createResourceLoaderStateUnit } from '../resource-loader-state-unit';
+
+const RID = makeResourceId('res-1');
+
+function mockClient(resource$?: BehaviorSubject<unknown>): SemiontClient {
+  const subject = resource$ ?? new BehaviorSubject<unknown>({ '@id': 'res-1', name: 'Test' });
+  const invalidate = vi.fn();
+  return {
+    browse: {
+      resource: () => subject.asObservable(),
+      invalidateResourceDetail: invalidate,
+    },
+  } as unknown as SemiontClient;
+}
+
+describe('createResourceLoaderStateUnit', () => {
+  it('exposes resource from browse namespace', async () => {
+    const stateUnit = createResourceLoaderStateUnit(mockClient(), RID);
+    const resource = await firstValueFrom(stateUnit.resource$.pipe(filter((r) => r !== undefined)));
+    expect((resource as { name: string }).name).toBe('Test');
+    stateUnit.dispose();
+  });
+
+  it('reports loading when resource is undefined', async () => {
+    const subject = new BehaviorSubject<unknown>(undefined);
+    const stateUnit = createResourceLoaderStateUnit(mockClient(subject), RID);
+    expect(await firstValueFrom(stateUnit.isLoading$)).toBe(true);
+
+    subject.next({ '@id': 'res-1' });
+    expect(await firstValueFrom(stateUnit.isLoading$.pipe(filter((l) => !l)))).toBe(false);
+    stateUnit.dispose();
+  });
+
+  it('invalidate calls browse.invalidateResourceDetail', () => {
+    const client = mockClient();
+    const stateUnit = createResourceLoaderStateUnit(client, RID);
+    stateUnit.invalidate();
+    expect(client.browse.invalidateResourceDetail).toHaveBeenCalledWith(RID);
+    stateUnit.dispose();
+  });
+});