@semiont/react-ui 0.5.8 → 0.5.10

package/src/components/resource/panels/ResourceInfoPanel.tsx

@@ -23,6 +23,12 @@ interface Props {
   wasAttributedTo?: Agent | Agent[] | undefined;
   wasDerivedFrom?: string | string[] | undefined;
   generator?: Agent | Agent[] | undefined;
+  /**
+   * Open the resource-generate flow. UI-only — the SDK isn't involved in
+   * *opening* the display (if collaborative gather ever lands, this graduates
+   * to a verb). Omit to hide the Generate action.
+   */
+  onGenerate?: () => void;
 }
 
 /**
@@ -45,6 +51,7 @@ export function ResourceInfoPanel({
   wasAttributedTo,
   wasDerivedFrom,
   generator,
+  onGenerate,
 }: Props) {
   const t = useTranslations('ResourceInfoPanel');
   const session = useObservable(useSemiont().activeSession$);
@@ -177,6 +184,21 @@ export function ResourceInfoPanel({
         </div>
       )}
 
+      {/* Generate Action — opens the resource-generate flow (UI-only) */}
+      {onGenerate && (
+        <div className="semiont-resource-info-panel__action-section">
+          <button
+            onClick={onGenerate}
+            className="semiont-resource-button semiont-resource-button--secondary"
+          >
+            ✨ {t('generate')}
+          </button>
+          <p className="semiont-resource-info-panel__description">
+            {t('generateDescription')}
+          </p>
+        </div>
+      )}
+
       {/* Clone Action */}
       <div className="semiont-resource-info-panel__action-section">
         <button

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

@@ -20,6 +20,8 @@ vi.mock('../../../../contexts/TranslationContext', () => ({
       storageUri: 'Storage',
       clone: 'Clone',
       cloneDescription: 'Generate a shareable clone link for this resource',
+      generate: 'Generate',
+      generateDescription: "Generate a new resource from this one's context",
       archive: 'Archive',
       archiveDescription: 'Move this resource to archived status',
       unarchive: 'Unarchive',
@@ -269,6 +271,30 @@ describe('ResourceInfoPanel Component', () => {
     });
   });
 
+  describe('Generate Action', () => {
+    it('renders the Generate button when onGenerate is provided', () => {
+      renderWithEventBus(
+        <ResourceInfoPanel {...defaultProps} onGenerate={() => {}} />
+      );
+      expect(screen.getByRole('button', { name: /Generate/i })).toBeInTheDocument();
+      expect(screen.getByText("Generate a new resource from this one's context")).toBeInTheDocument();
+    });
+
+    it('hides the Generate button when onGenerate is omitted', () => {
+      renderWithEventBus(<ResourceInfoPanel {...defaultProps} />);
+      expect(screen.queryByRole('button', { name: /Generate/i })).not.toBeInTheDocument();
+    });
+
+    it('calls onGenerate when clicked', () => {
+      const onGenerate = vi.fn();
+      renderWithEventBus(
+        <ResourceInfoPanel {...defaultProps} onGenerate={onGenerate} />
+      );
+      fireEvent.click(screen.getByRole('button', { name: /Generate/i }));
+      expect(onGenerate).toHaveBeenCalledTimes(1);
+    });
+  });
+
   describe('Provenance Section', () => {
     it('should not render provenance section when no provenance data', () => {
       renderWithEventBus(<ResourceInfoPanel {...defaultProps} />);

package/src/features/admin-exchange/state/__tests__/exchange-state-unit.test.ts

@@ -2,6 +2,7 @@ import { describe, it, expect, vi } from 'vitest';
 import { firstValueFrom, of, throwError } from 'rxjs';
 import type { ShellStateUnit } from '../../../../state/shell-state-unit';
 import { createExchangeStateUnit } from '../exchange-state-unit';
+import { assertStateUnitAxioms, disposeProbe } from '@semiont/core/testing';
 
 function mockBrowse(): ShellStateUnit {
   return { dispose: vi.fn() } as unknown as ShellStateUnit;
@@ -169,3 +170,16 @@ describe('createExchangeStateUnit', () => {
     stateUnit.dispose();
   });
 });
+
+describe('ExchangeStateUnit — StateUnit axioms', () => {
+  it('satisfies the StateUnit axioms (incl. A7-passed: never disposes the injected browse)', () => {
+    assertStateUnitAxioms({
+      setup: () => {
+        const browse = disposeProbe();
+        return { unit: createExchangeStateUnit(browse as unknown as ShellStateUnit, vi.fn(), vi.fn()), passedIn: [browse] };
+      },
+      surfaces: (u) => [u.selectedFile$, u.preview$, u.importPhase$, u.importMessage$, u.importResult$, u.isExporting$, u.isImporting$],
+      invocations: (u) => [() => u.cancelImport(), () => u.doImport()],
+    });
+  });
+});

package/src/features/admin-exchange/state/exchange-state-unit.ts

@@ -1,7 +1,7 @@
 import { BehaviorSubject, lastValueFrom, type Observable } from 'rxjs';
 import { tap } from 'rxjs/operators';
 import { createDisposer } from '@semiont/sdk';
-import type { StateUnit } from '@semiont/sdk';
+import type { StateUnit } from '@semiont/core';
 import type { ShellStateUnit } from '../../../state/shell-state-unit';
 import type { BackendDownload, ProgressEvent } from '@semiont/core';
 
@@ -33,7 +33,9 @@ export function createExchangeStateUnit(
   importFn: (file: File) => Observable<ProgressEvent>,
 ): ExchangeStateUnit {
   const disposer = createDisposer();
-  disposer.add(browse);
+  // `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
+  // shared, app-scoped shell). See packages/sdk/docs/STATE-UNITS.md (composition rule).
 
   const selectedFile$ = new BehaviorSubject<File | null>(null);
   const preview$ = new BehaviorSubject<ImportPreview | null>(null);

package/src/features/admin-security/state/__tests__/admin-security-state-unit.test.ts

@@ -4,6 +4,7 @@ import { filter } from 'rxjs/operators';
 import type { SemiontClient } from '@semiont/sdk';
 import type { ShellStateUnit } from '../../../../state/shell-state-unit';
 import { createAdminSecurityStateUnit } from '../admin-security-state-unit';
+import { assertStateUnitAxioms, disposeProbe } from '@semiont/core/testing';
 
 function mockBrowse(): ShellStateUnit {
   return { dispose: vi.fn() } as unknown as ShellStateUnit;
@@ -66,3 +67,16 @@ describe('createAdminSecurityStateUnit', () => {
     stateUnit.dispose();
   });
 });
+
+describe('AdminSecurityStateUnit — StateUnit axioms', () => {
+  it('satisfies the StateUnit axioms (incl. A7-passed: never disposes the injected browse)', () => {
+    assertStateUnitAxioms({
+      setup: () => {
+        const browse = disposeProbe();
+        const client = mockClient(vi.fn().mockResolvedValue({ providers: [], allowedDomains: [] }));
+        return { unit: createAdminSecurityStateUnit(client, browse as unknown as ShellStateUnit), passedIn: [browse] };
+      },
+      surfaces: (u) => [u.providers$, u.allowedDomains$, u.isLoading$],
+    });
+  });
+});

package/src/features/admin-security/state/admin-security-state-unit.ts

@@ -1,6 +1,6 @@
 import { BehaviorSubject, type Observable } from 'rxjs';
 import { createDisposer } from '@semiont/sdk';
-import type { StateUnit } from '@semiont/sdk';
+import type { StateUnit } from '@semiont/core';
 import type { ShellStateUnit } from '../../../state/shell-state-unit';
 import type { SemiontClient } from '@semiont/sdk';
 
@@ -16,7 +16,9 @@ export function createAdminSecurityStateUnit(
   browse: ShellStateUnit,
 ): AdminSecurityStateUnit {
   const disposer = createDisposer();
-  disposer.add(browse);
+  // `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
+  // shared, app-scoped shell). See packages/sdk/docs/STATE-UNITS.md (composition rule).
 
   const providers$ = new BehaviorSubject<unknown[]>([]);
   const allowedDomains$ = new BehaviorSubject<string[]>([]);

package/src/features/admin-users/state/__tests__/admin-users-state-unit.test.ts

@@ -4,6 +4,7 @@ import { filter } from 'rxjs/operators';
 import type { SemiontClient } from '@semiont/sdk';
 import type { ShellStateUnit } from '../../../../state/shell-state-unit';
 import { createAdminUsersStateUnit } from '../admin-users-state-unit';
+import { assertStateUnitAxioms, disposeProbe } from '@semiont/core/testing';
 
 function mockBrowse(): ShellStateUnit {
   return { dispose: vi.fn() } as unknown as ShellStateUnit;
@@ -77,10 +78,16 @@ describe('createAdminUsersStateUnit', () => {
     stateUnit.dispose();
   });
 
-  it('disposes browse on dispose', () => {
-    const browse = mockBrowse();
-    const stateUnit = createAdminUsersStateUnit(mockClient(), browse);
-    stateUnit.dispose();
-    expect(browse.dispose).toHaveBeenCalled();
+});
+
+describe('AdminUsersStateUnit — StateUnit axioms', () => {
+  it('satisfies the StateUnit axioms (incl. A7-passed: never disposes the injected browse)', () => {
+    assertStateUnitAxioms({
+      setup: () => {
+        const browse = disposeProbe();
+        return { unit: createAdminUsersStateUnit(mockClient(), browse as unknown as ShellStateUnit), passedIn: [browse] };
+      },
+      surfaces: (u) => [u.users$, u.stats$, u.usersLoading$, u.statsLoading$],
+    });
   });
 });

package/src/features/admin-users/state/admin-users-state-unit.ts

@@ -1,7 +1,7 @@
 import { BehaviorSubject, type Observable } from 'rxjs';
 import { userDID } from '@semiont/core';
 import { createDisposer } from '@semiont/sdk';
-import type { StateUnit } from '@semiont/sdk';
+import type { StateUnit } from '@semiont/core';
 import type { ShellStateUnit } from '../../../state/shell-state-unit';
 import type { SemiontClient } from '@semiont/sdk';
 
@@ -19,7 +19,9 @@ export function createAdminUsersStateUnit(
   browse: ShellStateUnit,
 ): AdminUsersStateUnit {
   const disposer = createDisposer();
-  disposer.add(browse);
+  // `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
+  // shared, app-scoped shell). See packages/sdk/docs/STATE-UNITS.md (composition rule).
 
   const users$ = new BehaviorSubject<unknown[]>([]);
   const stats$ = new BehaviorSubject<unknown | null>(null);

package/src/features/auth-welcome/state/__tests__/welcome-state-unit.test.ts

@@ -3,6 +3,7 @@ import { firstValueFrom } from 'rxjs';
 import { filter } from 'rxjs/operators';
 import type { SemiontClient } from '@semiont/sdk';
 import { createWelcomeStateUnit } from '../welcome-state-unit';
+import { assertStateUnitAxioms } from '@semiont/core/testing';
 
 function mockClient(overrides: {
   getMe?: ReturnType<typeof vi.fn>;
@@ -84,3 +85,13 @@ describe('createWelcomeStateUnit', () => {
     stateUnit.dispose();
   });
 });
+
+describe('WelcomeStateUnit — StateUnit axioms', () => {
+  it('satisfies the StateUnit axioms', () => {
+    assertStateUnitAxioms({
+      setup: () => createWelcomeStateUnit(mockClient()),
+      surfaces: (u) => [u.userData$, u.isProcessing$],
+      invocations: (u) => [() => u.acceptTerms()],
+    });
+  });
+});

package/src/features/auth-welcome/state/welcome-state-unit.ts

@@ -1,6 +1,6 @@
 import { BehaviorSubject, type Observable } from 'rxjs';
 import { createDisposer } from '@semiont/sdk';
-import type { StateUnit } from '@semiont/sdk';
+import type { StateUnit } from '@semiont/core';
 import type { SemiontClient } from '@semiont/sdk';
 
 export interface WelcomeStateUnit extends StateUnit {

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

@@ -4,6 +4,7 @@ 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';
 
 function mockBrowse(): ShellStateUnit {
   return { dispose: vi.fn() } as unknown as ShellStateUnit;
@@ -100,3 +101,16 @@ describe('createEntityTagsStateUnit', () => {
     stateUnit.dispose();
   });
 });
+
+describe('EntityTagsStateUnit — StateUnit axioms', () => {
+  it('satisfies the StateUnit axioms (incl. A7-passed: never disposes the injected browse)', () => {
+    assertStateUnitAxioms({
+      setup: () => {
+        const browse = disposeProbe();
+        return { unit: createEntityTagsStateUnit(mockClient(), browse as unknown as ShellStateUnit), passedIn: [browse] };
+      },
+      surfaces: (u) => [u.newTag$, u.error$, u.isAdding$],
+      invocations: (u) => [() => u.setNewTag(''), () => u.addTag()],
+    });
+  });
+});

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

@@ -1,6 +1,6 @@
 import { BehaviorSubject, type Observable, map } from 'rxjs';
 import { createDisposer } from '@semiont/sdk';
-import type { StateUnit } from '@semiont/sdk';
+import type { StateUnit } from '@semiont/core';
 import type { ShellStateUnit } from '../../../state/shell-state-unit';
 import type { SemiontClient } from '@semiont/sdk';
 
@@ -20,7 +20,9 @@ export function createEntityTagsStateUnit(
   browse: ShellStateUnit,
 ): EntityTagsStateUnit {
   const disposer = createDisposer();
-  disposer.add(browse);
+  // `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
+  // shared, app-scoped shell). See packages/sdk/docs/STATE-UNITS.md (composition rule).
 
   const newTag$ = new BehaviorSubject<string>('');
   const error$ = new BehaviorSubject<string>('');

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

@@ -7,7 +7,7 @@
  */
 
 import React, { useState, useEffect } from 'react';
-import type { GatheredContext } from '@semiont/core';
+import { deriveViews, type GatheredContext } 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';
@@ -283,6 +283,12 @@ export function ResourceComposePage({
   const isClone = mode === 'clone';
   const isReferenceCompletion = mode === 'reference';
 
+  // Gathered-context panel — annotation-focus only for now.
+  const composeFocus = gatheredContext?.focus.kind === 'annotation' ? gatheredContext.focus : null;
+  const composeConnections = gatheredContext && composeFocus
+    ? deriveViews(gatheredContext.graph, String(composeFocus.sourceResource.id)).connections
+    : [];
+
   return (
     <div className={`semiont-page${activePanel && COMMON_PANELS.includes(activePanel as ToolbarPanelType) ? ' semiont-page--panel-open' : ''}`}>
       {/* Main Content Area */}
@@ -316,7 +322,7 @@ export function ResourceComposePage({
             border: '1px solid var(--semiont-border-primary)',
           }}>
             <h3 className="semiont-form__label" style={{ marginBottom: '0.75rem' }}>Gathered Context</h3>
-            {gatheredContext.sourceContext && (
+            {composeFocus?.selected && (
               <div style={{
                 padding: '0.75rem',
                 backgroundColor: 'var(--semiont-bg-primary)',
@@ -327,27 +333,27 @@ export function ResourceComposePage({
                 marginBottom: '0.5rem',
               }}>
                 <div style={{ fontSize: 'var(--semiont-text-sm)', fontFamily: 'monospace', whiteSpace: 'pre-wrap', color: 'var(--semiont-text-secondary)' }}>
-                  {gatheredContext.sourceContext.before && <span>{gatheredContext.sourceContext.before}</span>}
+                  {composeFocus.selected.before && <span>{composeFocus.selected.before}</span>}
                   <span style={{
                     backgroundColor: 'var(--semiont-color-primary-100)',
                     padding: '0 0.25rem',
                     fontWeight: 600,
                     color: 'var(--semiont-color-primary-900)',
                   }}>
-                    {gatheredContext.sourceContext.selected}
+                    {composeFocus.selected.text}
                   </span>
-                  {gatheredContext.sourceContext.after && <span>{gatheredContext.sourceContext.after}</span>}
+                  {composeFocus.selected.after && <span>{composeFocus.selected.after}</span>}
                 </div>
               </div>
             )}
-            {gatheredContext.graphContext && gatheredContext.graphContext.connections && gatheredContext.graphContext.connections.length > 0 && (
+            {composeConnections.length > 0 && (
               <div style={{
                 padding: '0.5rem 0',
                 fontSize: 'var(--semiont-text-sm)',
                 color: 'var(--semiont-text-secondary)',
               }}>
                 <span style={{ fontSize: 'var(--semiont-text-xs)', fontWeight: 500, marginRight: '0.5rem' }}>Connections:</span>
-                {gatheredContext.graphContext.connections.map(conn => (
+                {composeConnections.map(conn => (
                   <span key={conn.resourceId} className="semiont-chip" style={{ fontSize: 'var(--semiont-text-xs)', padding: '0.125rem 0.5rem', marginRight: '0.25rem' }}>
                     {conn.resourceName}
                   </span>

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

@@ -4,6 +4,7 @@ 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';
 
 /** Build an `UploadObservable`-shaped mock that emits started → finished. */
 function mockUpload(resourceId: string) {
@@ -185,3 +186,15 @@ describe('createComposePageStateUnit', () => {
     stateUnit.dispose();
   });
 });
+
+describe('ComposePageStateUnit — StateUnit axioms', () => {
+  it('satisfies the StateUnit axioms (incl. A7-passed: never disposes the injected browse)', () => {
+    assertStateUnitAxioms({
+      setup: () => {
+        const browse = disposeProbe();
+        return { unit: createComposePageStateUnit(mockClient(), browse as unknown as ShellStateUnit, {}), passedIn: [browse] };
+      },
+      surfaces: (u) => [u.mode$, u.loading$, u.cloneData$, u.referenceData$, u.gatheredContext$, u.uploadProgress$],
+    });
+  });
+});

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

@@ -2,7 +2,7 @@ import { BehaviorSubject, type Observable, map } 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/sdk';
+import type { StateUnit } from '@semiont/core';
 import type { ShellStateUnit } from '../../../state/shell-state-unit';
 import type { SemiontClient } from '@semiont/sdk';
 import { decodeWithCharset, extensionForMediaType } from '@semiont/core';
@@ -72,7 +72,9 @@ export function createComposePageStateUnit(
   auth?: AccessToken,
 ): ComposePageStateUnit {
   const disposer = createDisposer();
-  disposer.add(browse);
+  // `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
+  // shared, app-scoped shell). See packages/sdk/docs/STATE-UNITS.md (composition rule).
 
   const isReferenceMode = Boolean(params.annotationUri && params.sourceDocumentId && params.name);
   const isCloneMode = params.mode === 'clone' && Boolean(params.token);
@@ -199,6 +201,7 @@ export function createComposePageStateUnit(
       cloneData$.complete();
       referenceData$.complete();
       gatheredContext$.complete();
+      uploadProgress$.complete();
       disposer.dispose();
     },
   };

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

@@ -4,6 +4,7 @@ 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';
 
 function mockBrowse(): ShellStateUnit {
   return { dispose: vi.fn() } as unknown as ShellStateUnit;
@@ -100,15 +101,6 @@ describe('createDiscoverStateUnit', () => {
     stateUnit.dispose();
   });
 
-  it('disposes browse and search on dispose', () => {
-    const browse = mockBrowse();
-    const { client } = mockClient();
-    const stateUnit = createDiscoverStateUnit(client, browse);
-    stateUnit.dispose();
-
-    expect(browse.dispose).toHaveBeenCalled();
-  });
-
   it('initial selectedEntityType$ is empty and recent fetch carries no entityType', async () => {
     const { client, resourceCalls } = mockClient();
     const stateUnit = createDiscoverStateUnit(client, mockBrowse());
@@ -267,3 +259,17 @@ describe('createDiscoverStateUnit', () => {
     stateUnit.dispose();
   });
 });
+
+describe('DiscoverStateUnit — StateUnit axioms', () => {
+  it('satisfies the StateUnit axioms (incl. A7-passed: never disposes the injected browse)', () => {
+    assertStateUnitAxioms({
+      setup: () => {
+        const browse = disposeProbe();
+        const { client } = mockClient();
+        return { unit: createDiscoverStateUnit(client, browse as unknown as ShellStateUnit), passedIn: [browse] };
+      },
+      surfaces: (u) => [u.selectedEntityType$],
+      invocations: (u) => [() => u.setSelectedEntityType('')],
+    });
+  });
+});

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

@@ -1,7 +1,8 @@
 import { BehaviorSubject, Subject, combineLatest, of, type Observable } from 'rxjs';
 import { debounceTime, distinctUntilChanged, map, startWith, switchMap, shareReplay } from 'rxjs/operators';
 import type { ResourceDescriptor } from '@semiont/core';
-import type { SemiontClient, StateUnit } from '@semiont/sdk';
+import type { SemiontClient } from '@semiont/sdk';
+import type { StateUnit } from '@semiont/core';
 import { createDisposer } from '@semiont/sdk';
 import type { ShellStateUnit } from '../../../state/shell-state-unit';
 
@@ -30,7 +31,9 @@ export function createDiscoverStateUnit(
   browse: ShellStateUnit,
 ): DiscoverStateUnit {
   const disposer = createDisposer();
-  disposer.add(browse);
+  // `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
+  // shared, app-scoped shell). See packages/sdk/docs/STATE-UNITS.md (composition rule).
 
   // Selected entity-type chip on the Discover page. Drives both the
   // `recent` list and the search results — filtering happens on the

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

@@ -35,6 +35,8 @@ import { useStateUnit } from '../../../hooks/useStateUnit';
 import { useShellStateUnit } from '../../../hooks/useShellStateUnit';
 import { useTranslations } from '../../../contexts/TranslationContext';
 import { ReferenceWizardModal } from '../../../components/modals/ReferenceWizardModal';
+import { ResourceGenerateModal } from '../../../components/modals/ResourceGenerateModal';
+import { AnnotateReferencesProgressWidget } from '../../../components/AnnotateReferencesProgressWidget';
 import type { GenerationConfig } from '../../../components/modals/ConfigureGenerationStep';
 
 type SemiontResource = ResourceDescriptor;
@@ -128,6 +130,7 @@ export function ResourceViewerPage({
 }: ResourceViewerPageProps) {
   // Translations
   const tw = useTranslations('ReferenceWizard');
+  const tg = useTranslations('ResourceGenerate');
 
   const browser = useSemiont();
   const session = useObservable(browser.activeSession$);
@@ -187,6 +190,7 @@ export function ResourceViewerPage({
   const wizardResourceId = wizardState?.resourceId ?? null;
   const wizardDefaultTitle = wizardState?.defaultTitle ?? '';
   const wizardEntityTypes = wizardState?.entityTypes ?? [];
+  const [generateOpen, setGenerateOpen] = useState(false);
 
   const handleWizardClose = useCallback(() => {
     stateUnit.closeWizard();
@@ -209,6 +213,23 @@ export function ResourceViewerPage({
     });
   }, [stateUnit, clearNewAnnotationId, resource]);
 
+  // Resource-generate flow (GENERATE-FROM-BUTTON): drive the SAME yield progress$
+  // the annotation path uses so the full AnnotateReferencesProgressWidget shows —
+  // NOT a toast. `generateFromResource` is Phase 6 (the @semiont/sdk session);
+  // this is declared RED until that method lands. Do not re-impl it here.
+  const handleResourceGenerateSubmit = useCallback((_resourceId: string, config: GenerationConfig) => {
+    stateUnit.yield.generateFromResource({
+      title: config.title,
+      storageUri: config.storagePath,
+      ...(config.prompt ? { prompt: config.prompt } : {}),
+      language: config.language,
+      sourceLanguage: getLanguage(resource),
+      temperature: config.temperature,
+      maxTokens: config.maxTokens,
+      context: config.context,
+    });
+  }, [stateUnit, resource]);
+
   const handleWizardLinkResource = useCallback(async (referenceId: string, targetResourceId: string) => {
     if (!semiont) return;
     try {
@@ -452,6 +473,21 @@ export function ResourceViewerPage({
               </h2>
             </div>
           </div>
+          {/* Resource-generation progress (GENERATE-FROM-BUTTON P7) — no annotationId ⇒ a resource-gen job */}
+          {generationProgress && !generationProgress.annotationId && (
+            <AnnotateReferencesProgressWidget
+              progress={generationProgress}
+              annotationType="generation"
+              cancelJobType="generation"
+              translations={{
+                title: tg('progressTitle'),
+                cancel: tg('progressCancel'),
+                inProgress: tg('progressInProgress'),
+                complete: tg('progressComplete'),
+                failed: tg('progressFailed'),
+              }}
+            />
+          )}
           {/* Scrollable body wrapper - contains document content, header is sibling above */}
           <div className="semiont-document-viewer__scrollable-body" lang={getLanguage(resource) || undefined}>
             <ErrorBoundary
@@ -565,6 +601,7 @@ export function ResourceViewerPage({
                 wasAttributedTo={resource.wasAttributedTo}
                 wasDerivedFrom={resource.wasDerivedFrom}
                 generator={resource.generator as components['schemas']['Agent'] | components['schemas']['Agent'][] | undefined}
+                onGenerate={() => setGenerateOpen(true)}
               />
             )}
 
@@ -645,6 +682,48 @@ export function ResourceViewerPage({
           semanticScoringHelp: tw('semanticScoringHelp'),
         }}
       />
+
+      {/* Resource-generate flow (GENERATE-FROM-BUTTON) */}
+      <ResourceGenerateModal
+        isOpen={generateOpen}
+        onClose={() => setGenerateOpen(false)}
+        resourceId={rUri}
+        defaultTitle=""
+        locale={locale}
+        onGenerateSubmit={handleResourceGenerateSubmit}
+        translations={{
+          gatherTitle: tg('gatherTitle'),
+          reviewTitle: tg('reviewTitle'),
+          configureTitle: tg('configureTitle'),
+          next: tg('next'),
+          back: tg('back'),
+          cancel: tg('cancel'),
+          gatherIntro: tg('gatherIntro'),
+          includeContent: tg('includeContent'),
+          includeSummary: tg('includeSummary'),
+          gatherDepth: tg('gatherDepth'),
+          gatherMaxResources: tg('gatherMaxResources'),
+          gatherButton: tg('gatherButton'),
+          excludeLabel: tg('excludeLabel'),
+          loadingContext: tg('loadingContext'),
+          failedContext: tg('failedContext'),
+          sourceContextLabel: tg('sourceContextLabel'),
+          connectionsLabel: tg('connectionsLabel'),
+          citedByLabel: tg('citedByLabel'),
+          resourceTitle: tg('resourceTitle'),
+          resourceTitlePlaceholder: tg('resourceTitlePlaceholder'),
+          additionalInstructions: tg('additionalInstructions'),
+          additionalInstructionsPlaceholder: tg('additionalInstructionsPlaceholder'),
+          language: tg('language'),
+          languageHelp: tg('languageHelp'),
+          creativity: tg('creativity'),
+          creativityFocused: tg('creativityFocused'),
+          creativityCreative: tg('creativityCreative'),
+          maxLength: tg('maxLength'),
+          maxLengthHelp: tg('maxLengthHelp'),
+          generate: tg('generate'),
+        }}
+      />
     </div>
   );
 }

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

@@ -4,6 +4,7 @@ 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';
+import { assertStateUnitAxioms } from '@semiont/core/testing';
 
 const RID = makeResourceId('res-1');
 
@@ -44,3 +45,13 @@ describe('createResourceLoaderStateUnit', () => {
     stateUnit.dispose();
   });
 });
+
+describe('ResourceLoaderStateUnit — StateUnit axioms', () => {
+  it('satisfies the StateUnit axioms', () => {
+    // No owned surfaces: resource$/isLoading$ are derived from client.browse; dispose is a no-op.
+    assertStateUnitAxioms({
+      setup: () => createResourceLoaderStateUnit(mockClient(), RID),
+      invocations: (u) => [() => u.invalidate()],
+    });
+  });
+});