@semiont/react-ui 0.4.20 → 0.4.21

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

@@ -5,9 +5,9 @@
  * Only requires minimal props from the framework layer (routing, modals).
  */
 
-import React, { useState, useEffect, useCallback, useMemo } from 'react';
-import { useQueryClient } from '@tanstack/react-query';
+import React, { useState, useEffect, useCallback } from 'react';
 import type { components, ResourceId, GatheredContext, EventMap } from '@semiont/core';
+import type { ConnectionState } from '@semiont/api-client';
 import { annotationId } from '@semiont/core';
 import { getLanguage, getPrimaryRepresentation, getPrimaryMediaType, getMimeCategory } from '@semiont/api-client';
 import { ANNOTATORS } from '@semiont/react-ui';
@@ -21,34 +21,23 @@ import { Toolbar } from '@semiont/react-ui';
 import { useResourceLoadingAnnouncements } from '@semiont/react-ui';
 import { ResourceViewer } from '@semiont/react-ui';
 import { useObservable } from '@semiont/react-ui';
-import { QUERY_KEYS } from '../../../lib/query-keys';
-import { useResources, useEntityTypes } from '../../../lib/api-hooks';
 import { useResourceContent } from '../../../hooks/useResourceContent';
 import { useMediaToken } from '../../../hooks/useMediaToken';
 import { useToast } from '../../../components/Toast';
 import { useTheme } from '../../../contexts/ThemeContext';
 import { useLineNumbers } from '../../../hooks/useLineNumbers';
 import { useHoverDelay } from '../../../hooks/useHoverDelay';
-import { useResourceEvents } from '../../../hooks/useResourceEvents';
-import { useOpenResources } from '../../../contexts/OpenResourcesContext';
-// Import EventBus hooks directly from context to avoid mocking issues in tests
-import { useEventBus } from '../../../contexts/EventBusContext';
 import { useEventSubscriptions } from '../../../contexts/useEventSubscription';
 import { useResourceAnnotations } from '../../../contexts/ResourceAnnotationsContext';
-import { useApiClient } from '../../../contexts/ApiClientContext';
-import { useBindFlow } from '../../../hooks/useBindFlow';
-import { useMarkFlow } from '../../../hooks/useMarkFlow';
-import { useBeckonFlow } from '../../../hooks/useBeckonFlow';
-import type { StreamStatus } from '../../../hooks/useResourceEvents';
-import { usePanelBrowse } from '../../../hooks/usePanelBrowse';
-import { useYieldFlow } from '../../../hooks/useYieldFlow';
-import { useContextGatherFlow } from '../../../hooks/useContextGatherFlow';
+import { useSemiont } from '../../../session/SemiontProvider';
+import { createResourceViewerPageVM } from '@semiont/api-client';
+import { useViewModel } from '../../../hooks/useViewModel';
+import { useShellVM } from '../../../hooks/useShellVM';
 import { useTranslations } from '../../../contexts/TranslationContext';
 import { ReferenceWizardModal } from '../../../components/modals/ReferenceWizardModal';
 import type { GenerationConfig } from '../../../components/modals/ConfigureGenerationStep';
 
 type SemiontResource = components['schemas']['ResourceDescriptor'];
-type Annotation = components['schemas']['Annotation'];
 
 export interface ResourceViewerPageProps {
   /**
@@ -87,9 +76,11 @@ export interface ResourceViewerPageProps {
   refetchDocument: () => Promise<unknown>;
 
   /**
-   * SSE attention stream connection status for the active workspace
+   * Bus connection state for the active workspace. Six-valued state
+   * machine from `actor.state$`; CollaborationPanel maps it to the
+   * "Live" / "Disconnected" visual.
    */
-  streamStatus: StreamStatus;
+  streamStatus: ConnectionState;
 
   /**
    * Name of the active knowledge base (for display in panels)
@@ -102,7 +93,7 @@ export interface ResourceViewerPageProps {
  *
  * Uses hooks directly (NO containers, NO render props, NO ResourceViewerPageContent wrapper)
  *
- * @emits browse:router-push - Navigate to a resource or filtered view
+ * @emits nav:push - Navigate to a resource or filtered view
  * @emits beckon:sparkle - Trigger sparkle animation on an annotation
  * @emits bind:update-body - Update annotation body content
  * @subscribes mark:archive - Archive the current resource
@@ -138,23 +129,17 @@ export function ResourceViewerPage({
   // Translations
   const tw = useTranslations('ReferenceWizard');
 
-  // Get unified event bus for subscribing to UI events
-  const eventBus = useEventBus();
-  const semiont = useApiClient();
-  const queryClient = useQueryClient(); // retained for non-store queries (events log)
+  const browser = useSemiont();
+  const session = useObservable(browser.activeSession$);
+  const semiont = session?.client;
 
   // UI state hooks
-  const { showError, showSuccess } = useToast();
+  const { showError, showSuccess, showInfo } = useToast();
   const { theme, setTheme } = useTheme();
   const { showLineNumbers, toggleLineNumbers } = useLineNumbers();
   const { hoverDelayMs } = useHoverDelay();
-  const { addResource } = useOpenResources();
   const { triggerSparkleAnimation, clearNewAnnotationId } = useResourceAnnotations();
 
-  // API hooks
-  const resources = useResources();
-  const entityTypesAPI = useEntityTypes();
-
   // Determine MIME category to choose content path
   const resourceMediaType = getPrimaryMediaType(resource) || 'text/plain';
   const isBinary = getMimeCategory(resourceMediaType) === 'image';
@@ -171,56 +156,42 @@ export function ResourceViewerPage({
   const content = isBinary ? binaryContent : textContent;
   const contentLoading = isBinary ? mediaTokenLoading : textLoading;
 
-  const annotationsData = useObservable(semiont.browse.annotations(rUri));
-  const annotations = useMemo(
-    () => annotationsData || [],
-    [annotationsData]
-  );
-
-  const { data: referencedByData, isLoading: referencedByLoading } = resources.referencedBy.useQuery(rUri);
-  const referencedBy = referencedByData?.referencedBy || [];
-
-  const { data: entityTypesData } = entityTypesAPI.list.useQuery();
-  const allEntityTypes = (entityTypesData as { entityTypes: string[] } | undefined)?.entityTypes || [];
-
-  // Flow state hooks (NO CONTAINERS)
-  const { hoveredAnnotationId } = useBeckonFlow();
-  const { assistingMotivation, progress, pendingAnnotation } = useMarkFlow(rUri);
-  const { activePanel, scrollToAnnotationId, panelInitialTab, onScrollCompleted } = usePanelBrowse();
-  useBindFlow(rUri);
-  const {
-    generationProgress,
-    onGenerateDocument,
-  } = useYieldFlow(locale, rUri, clearNewAnnotationId);
-  const { gatherContext, gatherLoading, gatherError } = useContextGatherFlow({ resourceId: rUri });
-
-  // Wizard state — driven by bind:initiate from ReferenceEntry
-  const [wizardOpen, setWizardOpen] = useState(false);
-  const [wizardAnnotationId, setWizardAnnotationId] = useState<string | null>(null);
-  const [wizardResourceId, setWizardResourceId] = useState<string | null>(null);
-  const [wizardDefaultTitle, setWizardDefaultTitle] = useState('');
-  const [wizardEntityTypes, setWizardEntityTypes] = useState<string[]>([]);
-
-  useEffect(() => {
-    const subscription = eventBus.get('bind:initiate').subscribe((event) => {
-      setWizardAnnotationId(event.annotationId);
-      setWizardResourceId(event.resourceId);
-      setWizardDefaultTitle(event.defaultTitle);
-      setWizardEntityTypes(event.entityTypes);
-      setWizardOpen(true);
-
-      // Trigger context gathering — gather:requested is consumed by useContextGatherFlow
-      eventBus.get('gather:requested').next({ correlationId: crypto.randomUUID(), annotationId: event.annotationId, resourceId: event.resourceId, options: { contextWindow: 2000 } });
-    });
-    return () => subscription.unsubscribe();
-  }, [eventBus]);
+  // Composite VM — owns all flow VMs, wizard state, annotations, entity types
+  const browseVM = useShellVM();
+  const vm = useViewModel(() => createResourceViewerPageVM(semiont!, rUri, locale, browseVM));
+
+  const annotations = useObservable(vm.annotations$) ?? [];
+  const groups = useObservable(vm.annotationGroups$);
+  const allEntityTypes = useObservable(vm.entityTypes$) ?? [];
+  const referencedByRaw = useObservable(vm.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 wizardOpen = wizardState?.open ?? false;
+  const wizardAnnotationId = wizardState?.annotationId ?? null;
+  const wizardResourceId = wizardState?.resourceId ?? null;
+  const wizardDefaultTitle = wizardState?.defaultTitle ?? '';
+  const wizardEntityTypes = wizardState?.entityTypes ?? [];
 
   const handleWizardClose = useCallback(() => {
-    setWizardOpen(false);
-  }, []);
+    vm.closeWizard();
+  }, [vm]);
 
   const handleWizardGenerateSubmit = useCallback((referenceId: string, config: GenerationConfig) => {
-    onGenerateDocument(referenceId, {
+    clearNewAnnotationId(annotationId(referenceId));
+    vm.yield.generate(referenceId, {
       title: config.title,
       storageUri: config.storagePath,
       prompt: config.prompt,
@@ -229,9 +200,10 @@ export function ResourceViewerPage({
       maxTokens: config.maxTokens,
       context: config.context,
     });
-  }, [onGenerateDocument]);
+  }, [vm, clearNewAnnotationId]);
 
   const handleWizardLinkResource = useCallback(async (referenceId: string, targetResourceId: string) => {
+    if (!semiont) return;
     try {
       await semiont.bind.body(
         rUri,
@@ -259,103 +231,71 @@ export function ResourceViewerPage({
       name: title,
       entityTypes: entTypes.join(','),
     });
-    eventBus.get('browse:router-push').next({
+    browser.emit('nav:push', {
       path: `/know/compose?${params.toString()}`,
       reason: 'compose-from-wizard',
     });
-  }, []); // eventBus is stable singleton
+  }, [session]);
 
   // Add resource to open tabs when it loads
   useEffect(() => {
     if (resource && rUri) {
       const mediaType = getPrimaryMediaType(resource);
-      addResource(rUri, resource.name, mediaType || undefined, resource.storageUri);
+      browser.addOpenResource(rUri, resource.name, mediaType || undefined, resource.storageUri);
       if (typeof localStorage !== 'undefined') {
         localStorage.setItem('lastViewedDocumentId', rUri);
       }
     }
-  }, [resource, rUri, addResource]);
-
-  // Real-time document events (SSE)
-  // Annotation updates are handled by AnnotationStore reacting to EventBus events.
-  // Callbacks here only handle non-annotation side effects.
-  useResourceEvents({
-    rUri,
-    autoConnect: true,
-
-    onAnnotationAdded: useCallback((_event: any) => {
-      // Store handles annotation refresh; events log needs explicit invalidation
-      queryClient.invalidateQueries({ queryKey: QUERY_KEYS.resources.events(rUri) });
-    }, [queryClient, rUri]),
-
-    onAnnotationRemoved: useCallback((_event: any) => {
-      queryClient.invalidateQueries({ queryKey: QUERY_KEYS.resources.events(rUri) });
-    }, [queryClient, rUri]),
-
-    onAnnotationBodyUpdated: useCallback((_event: any) => {
-      queryClient.invalidateQueries({ queryKey: QUERY_KEYS.resources.events(rUri) });
-    }, [queryClient, rUri]),
-
-    // Document status events
-    onDocumentArchived: useCallback((_event: any) => {
-      refetchDocument();
-      showSuccess('This document has been archived');
-    }, [refetchDocument, showSuccess]),
-
-    onDocumentUnarchived: useCallback((_event: any) => {
-      refetchDocument();
-      showSuccess('This document has been unarchived');
-    }, [refetchDocument, showSuccess]),
-
-    // Entity tag events
-    onEntityTagAdded: useCallback((_event: any) => {
-      refetchDocument();
-    }, [refetchDocument]),
-
-    onEntityTagRemoved: useCallback((_event: any) => {
-      refetchDocument();
-    }, [refetchDocument]),
-
-    onError: useCallback((error: any) => {
-      console.error('[RealTime] Event stream error:', error);
-    }, []),
-  });
+  }, [resource, rUri, browser]);
 
-  // Mutations hoisted to top level — hooks must not be called inside callbacks
-  const updateMutation = resources.update.useMutation();
-  const generateCloneTokenMutation = resources.generateCloneToken.useMutation();
+  // Bridge: when the mark VM produces a pending annotation, open the
+  // annotations panel. The mark VM (session-scoped) can't emit `panel:open`
+  // (app-scoped) directly — the React tree is the natural seam between
+  // the two buses.
+  useEffect(() => {
+    if (pendingAnnotation) {
+      browser.emit('panel:open', { panel: 'annotations' });
+    }
+  }, [pendingAnnotation, browser]);
+
+  // Domain events flow through the bus gateway (ActorVM → local EventBus).
+  // BrowseNamespace cache invalidation handles annotation/resource updates.
+  // The resource-viewer-page-vm calls client.subscribeToResource(resourceId)
+  // which bridges scoped domain events into the local EventBus.
 
-  // Event handlers extracted to useCallback (tenet: no inline handlers in useEventSubscriptions)
   const handleResourceArchive = useCallback(async () => {
+    if (!semiont) return;
     try {
-      await updateMutation.mutateAsync({ id: rUri, data: { archived: true } });
+      await semiont.updateResource(rUri, { archived: true });
       await refetchDocument();
     } catch (err) {
       console.error('Failed to archive document:', err);
       showError('Failed to archive document');
     }
-  }, [updateMutation, rUri, refetchDocument, showError]);
+  }, [semiont, rUri, refetchDocument, showError]);
 
   const handleResourceUnarchive = useCallback(async () => {
+    if (!semiont) return;
     try {
-      await updateMutation.mutateAsync({ id: rUri, data: { archived: false } });
+      await semiont.updateResource(rUri, { archived: false });
       await refetchDocument();
     } catch (err) {
       console.error('Failed to unarchive document:', err);
       showError('Failed to unarchive document');
     }
-  }, [updateMutation, rUri, refetchDocument, showError]);
+  }, [semiont, rUri, refetchDocument, showError]);
 
   const handleResourceClone = useCallback(async () => {
+    if (!semiont) return;
     try {
-      const result = await generateCloneTokenMutation.mutateAsync(rUri);
+      const result = await semiont.generateCloneToken(rUri);
       const token = result.token;
-      eventBus.get('browse:router-push').next({ path: `/know/compose?mode=clone&token=${token}`, reason: 'clone' });
+      browser.emit('nav:push', { path: `/know/compose?mode=clone&token=${token}`, reason: 'clone' });
     } catch (err) {
       console.error('Failed to generate clone token:', err);
       showError('Failed to generate clone link');
     }
-  }, [generateCloneTokenMutation, rUri, showError]);
+  }, [semiont, rUri, showError, session]);
 
   const handleAnnotationSparkle = useCallback(({ annotationId }: { annotationId: string }) => {
     triggerSparkleAnimation(annotationId);
@@ -365,43 +305,58 @@ export function ResourceViewerPage({
     triggerSparkleAnimation(stored.payload.annotation.id);
   }, [triggerSparkleAnimation]);
 
-  const handleAnnotationCreateFailed = useCallback(() => showError('Failed to create annotation'), [showError]);
-  const handleAnnotationDeleteFailed = useCallback(() => showError('Failed to delete annotation'), [showError]);
+  const handleAnnotationCreateFailed = useCallback(({ message }: { message?: string }) =>
+    showError(`Failed to create annotation: ${message || 'unknown error'}`), [showError]);
+  const handleAnnotationDeleteFailed = useCallback(({ message }: { message?: string }) =>
+    showError(`Failed to delete annotation: ${message || 'unknown error'}`), [showError]);
   const handleAnnotateBodyUpdated = useCallback(() => {
-    // Success - optimistic update already applied via useResourceEvents
+    // Success - optimistic update already applied via EventBus
   }, []);
-  const handleAnnotateBodyUpdateFailed = useCallback(() => showError('Failed to update annotation'), [showError]);
+  const handleAnnotateBodyUpdateFailed = useCallback(({ message }: { message: string }) =>
+    showError(`Failed to update reference: ${message}`), [showError]);
 
   const handleSettingsThemeChanged = useCallback(({ theme }: { theme: any }) => setTheme(theme), [setTheme]);
 
-  const handleDetectionComplete = useCallback(() => {
-    // Toast notification is handled by useMarkFlow; store handles annotation refresh
-    queryClient.invalidateQueries({ queryKey: QUERY_KEYS.resources.events(rUri) });
-  }, [queryClient, rUri]);
-  const handleDetectionFailed = useCallback(() => {
-    // Error notification is handled by useMarkFlow; store handles annotation refresh
-    queryClient.invalidateQueries({ queryKey: QUERY_KEYS.resources.events(rUri) });
-  }, [queryClient, rUri]);
-  const handleGenerationComplete = useCallback(() => {
-    // Toast notification is handled by useYieldFlow
-  }, []);
-  const handleGenerationFailed = useCallback(() => {
-    // Error notification is handled by useYieldFlow
-  }, []);
+  // Unified job lifecycle handlers. `job:complete` / `job:fail` fire
+  // for every job type (annotation + generation); we dispatch on
+  // jobType and filter to this resource. `annotationId` is present on
+  // jobs attached to a specific annotation (today: generation from a
+  // reference); it's what UI consumers lower down in the tree use to
+  // attach per-annotation visual feedback.
+  const handleJobComplete = useCallback((event: components['schemas']['JobCompleteCommand']) => {
+    if (event.resourceId !== (resource.id as string)) return;
+    if (event.jobType === 'generation') {
+      const result = event.result as components['schemas']['JobGenerationResult'] | undefined;
+      const name = result?.resourceName;
+      showSuccess(name
+        ? `Resource "${name}" created successfully!`
+        : 'Resource created successfully!');
+    } else {
+      showSuccess('Annotation complete');
+    }
+  }, [resource.id, showSuccess]);
+  const handleJobFailed = useCallback((event: components['schemas']['JobFailCommand']) => {
+    if (event.resourceId !== (resource.id as string)) return;
+    if (event.jobType === 'generation') {
+      showError(`Resource generation failed: ${event.error}`);
+    } else {
+      showError(event.error || 'Annotation failed');
+    }
+  }, [resource.id, showError]);
 
   const handleReferenceNavigate = useCallback(({ resourceId }: { resourceId: string }) => {
     if (routes.resourceDetail) {
       const path = routes.resourceDetail(resourceId);
-      eventBus.get('browse:router-push').next({ path, reason: 'reference-link' });
+      browser.emit('nav:push', { path, reason: 'reference-link' });
     }
-  }, [routes.resourceDetail]); // eventBus is stable singleton - never in deps
+  }, [routes.resourceDetail, session]);
 
   const handleEntityTypeClicked = useCallback(({ entityType }: { entityType: string }) => {
     if (routes.know) {
       const path = `${routes.know}?entityType=${encodeURIComponent(entityType)}`;
-      eventBus.get('browse:router-push').next({ path, reason: 'entity-type-filter' });
+      browser.emit('nav:push', { path, reason: 'entity-type-filter' });
     }
-  }, [routes.know]); // eventBus is stable singleton - never in deps
+  }, [routes.know, session]);
 
   const handleModeToggled = useCallback(() => {
     setAnnotateMode(prev => !prev);
@@ -421,10 +376,9 @@ export function ResourceViewerPage({
     'bind:body-update-failed': handleAnnotateBodyUpdateFailed,
     'settings:theme-changed': handleSettingsThemeChanged,
     'settings:line-numbers-toggled': toggleLineNumbers,
-    'mark:assist-finished': handleDetectionComplete,
-    'mark:assist-failed': handleDetectionFailed,
-    'yield:finished': handleGenerationComplete,
-    'yield:failed': handleGenerationFailed,
+    'job:complete': handleJobComplete,
+    'job:fail': handleJobFailed,
+    'mark:assist-cancelled': () => showInfo('Annotation cancelled'),
     'browse:reference-navigate': handleReferenceNavigate,
     'browse:entity-type-clicked': handleEntityTypeClicked,
   });
@@ -460,28 +414,6 @@ export function ResourceViewerPage({
     return false;
   });
 
-  // Group annotations by type using static ANNOTATORS (memoized to avoid re-grouping on unrelated re-renders)
-  const groups = useMemo(() => {
-    const result = {
-      highlights: [] as Annotation[],
-      references: [] as Annotation[],
-      assessments: [] as Annotation[],
-      comments: [] as Annotation[],
-      tags: [] as Annotation[]
-    };
-
-    for (const ann of annotations) {
-      const annotator = Object.values(ANNOTATORS).find(a => a.matchesAnnotation(ann));
-      if (annotator) {
-        const key = annotator.internalType + 's'; // highlight -> highlights
-        if (result[key as keyof typeof result]) {
-          result[key as keyof typeof result].push(ann);
-        }
-      }
-    }
-
-    return result;
-  }, [annotations]);
 
   // Combine resource with content
   const resourceWithContent = { ...resource, content };
@@ -489,9 +421,9 @@ export function ResourceViewerPage({
   // Handlers for AnnotationHistory (legacy event-based interaction)
   const handleEventHover = useCallback((annotationId: string | null) => {
     if (annotationId) {
-      eventBus.get('beckon:sparkle').next({ annotationId });
+      session?.client.emit('beckon:sparkle', { annotationId });
     }
-  }, []); // eventBus is stable singleton - never in deps
+  }, [session]);
 
   const handleEventClick = useCallback((_annotationId: string | null) => {
     // ResourceViewer now manages scroll state internally
@@ -539,8 +471,8 @@ export function ResourceViewerPage({
               ) : (
                 <ResourceViewer
                   resource={resourceWithContent}
-                  annotations={groups}
-                  generatingReferenceId={generationProgress?.referenceId ?? null}
+                  annotations={groups ?? { highlights: [], comments: [], assessments: [], references: [], tags: [] }}
+                  generatingReferenceId={generationProgress?.annotationId ?? null}
                   showLineNumbers={showLineNumbers}
                   hoverDelayMs={hoverDelayMs}
                   hoveredAnnotationId={hoveredAnnotationId}
@@ -583,7 +515,7 @@ export function ResourceViewerPage({
                 progress={progress}
                 pendingAnnotation={pendingAnnotation}
                 allEntityTypes={allEntityTypes}
-                generatingReferenceId={generationProgress?.referenceId ?? null}
+                generatingReferenceId={generationProgress?.annotationId ?? null}
                 referencedBy={referencedBy}
                 referencedByLoading={referencedByLoading}
                 resourceId={rUri}
@@ -632,7 +564,7 @@ export function ResourceViewerPage({
             {/* Collaboration Panel */}
             {activePanel === 'collaboration' && (
               <CollaborationPanel
-                isConnected={streamStatus === 'connected'}
+                state={streamStatus}
                 eventCount={0}
                 knowledgeBaseName={knowledgeBaseName}
               />
@@ -665,7 +597,6 @@ export function ResourceViewerPage({
         context={gatherContext}
         contextLoading={gatherLoading}
         contextError={gatherError}
-        eventBus={eventBus}
         onGenerateSubmit={handleWizardGenerateSubmit}
         onLinkResource={handleWizardLinkResource}
         onComposeNavigate={handleWizardComposeNavigate}