@semiont/react-ui 0.4.6 → 0.4.9

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

@@ -22,7 +22,7 @@ import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
 import { render, screen, waitFor } from '@testing-library/react';
 import { act } from 'react';
 import { useMarkFlow } from '../../../hooks/useMarkFlow';
-import { EventBusProvider, resetEventBusForTesting, useEventBus } from '../../../contexts/EventBusContext';
+import { EventBusProvider, useEventBus } from '../../../contexts/EventBusContext';
 import { ApiClientProvider } from '../../../contexts/ApiClientContext';
 import { AuthTokenProvider } from '../../../contexts/AuthTokenContext';
 import { SSEClient } from '@semiont/api-client';
@@ -43,7 +43,6 @@ describe('Detection Progress Dismissal Bug', () => {
   const rUri = resourceId('test');
 
   beforeEach(() => {
-    resetEventBusForTesting();
     vi.clearAllMocks();
 
     mockStream = {

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

@@ -18,7 +18,7 @@ import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
 import { render, waitFor } from '@testing-library/react';
 import { act } from 'react';
 import { useBindFlow } from '../../../hooks/useBindFlow';
-import { EventBusProvider, useEventBus, resetEventBusForTesting } from '../../../contexts/EventBusContext';
+import { EventBusProvider, useEventBus } from '../../../contexts/EventBusContext';
 import { ApiClientProvider } from '../../../contexts/ApiClientContext';
 import { AuthTokenProvider } from '../../../contexts/AuthTokenContext';
 import { SSEClient } from '@semiont/api-client';
@@ -42,7 +42,6 @@ describe('Bind Flow - Body Update Integration', () => {
 
   beforeEach(() => {
     vi.clearAllMocks();
-    resetEventBusForTesting();
 
     bindAnnotationSpy = vi.fn().mockImplementation((_rId: any, annId: any, _req: any, opts: any) => {
       queueMicrotask(() => opts.eventBus.get('bind:finished').next({ annotationId: annId }));

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

@@ -14,7 +14,7 @@ import { describe, it, expect, vi, beforeEach } from 'vitest';
 import { render, screen, waitFor } from '@testing-library/react';
 import { act } from 'react';
 import { useMarkFlow } from '../../../hooks/useMarkFlow';
-import { EventBusProvider, useEventBus, resetEventBusForTesting } from '../../../contexts/EventBusContext';
+import { EventBusProvider, useEventBus } from '../../../contexts/EventBusContext';
 import { ApiClientProvider } from '../../../contexts/ApiClientContext';
 import { AuthTokenProvider } from '../../../contexts/AuthTokenContext';
 import { SSEClient } from '@semiont/api-client';
@@ -31,7 +31,6 @@ vi.mock('../../../components/Toast', () => ({
 
 describe('REPRODUCING BUG: Detection state not updating', () => {
   beforeEach(() => {
-    resetEventBusForTesting();
     vi.clearAllMocks();
 
     // Minimal mock - SSE streams not needed for this test

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

@@ -26,7 +26,7 @@ import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
 import { render, screen, waitFor } from '@testing-library/react';
 import { act } from 'react';
 import { useMarkFlow } from '../../../hooks/useMarkFlow';
-import { EventBusProvider, useEventBus, resetEventBusForTesting } from '../../../contexts/EventBusContext';
+import { EventBusProvider, useEventBus } from '../../../contexts/EventBusContext';
 import { ApiClientProvider } from '../../../contexts/ApiClientContext';
 import { AuthTokenProvider } from '../../../contexts/AuthTokenContext';
 import { SSEClient } from '@semiont/api-client';
@@ -60,7 +60,6 @@ describe('Detection Flow - Feature Integration', () => {
 
   beforeEach(() => {
     vi.clearAllMocks();
-    resetEventBusForTesting();
 
     // Create fresh mock stream for each test
     mockStream = createMockSSEStream();

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

@@ -27,7 +27,7 @@ import { act } from 'react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { SemiontApiClient } from '@semiont/api-client';
 import { resourceId, accessToken } from '@semiont/core';
-import { EventBusProvider, useEventBus, resetEventBusForTesting } from '../../../contexts/EventBusContext';
+import { EventBusProvider, useEventBus } from '../../../contexts/EventBusContext';
 import { useEventSubscriptions } from '../../../contexts/useEventSubscription';
 import { ApiClientProvider } from '../../../contexts/ApiClientContext';
 import { AuthTokenProvider } from '../../../contexts/AuthTokenContext';
@@ -101,15 +101,15 @@ function renderHarness() {
   });
 
   render(
-    <AuthTokenProvider token={TEST_TOKEN}>
-      <ApiClientProvider baseUrl={BASE_URL}>
-        <QueryClientProvider client={queryClient}>
-          <EventBusProvider>
+    <EventBusProvider>
+      <AuthTokenProvider token={TEST_TOKEN}>
+        <ApiClientProvider baseUrl={BASE_URL}>
+          <QueryClientProvider client={queryClient}>
             <ResourceMutationHarness onEventBus={(eventBus) => { capturedEventBus = eventBus; }} />
-          </EventBusProvider>
-        </QueryClientProvider>
-      </ApiClientProvider>
-    </AuthTokenProvider>
+          </QueryClientProvider>
+        </ApiClientProvider>
+      </AuthTokenProvider>
+    </EventBusProvider>
   );
 
   const emit = <K extends keyof EventMap>(event: K, payload: EventMap[K]) => {
@@ -128,7 +128,6 @@ describe('Resource mutations — hooks hoisted to top level', () => {
 
   beforeEach(() => {
     vi.clearAllMocks();
-    resetEventBusForTesting();
 
     generateCloneTokenSpy = vi
       .spyOn(SemiontApiClient.prototype, 'generateCloneToken')

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

@@ -11,7 +11,7 @@ import React from 'react';
 import { ResourceViewerPage } from '../components/ResourceViewerPage';
 import type { ResourceViewerPageProps } from '../components/ResourceViewerPage';
 // Import directly from context file to bypass mocked barrel export
-import { EventBusProvider, resetEventBusForTesting } from '../../../contexts/EventBusContext';
+import { EventBusProvider } from '../../../contexts/EventBusContext';
 import { ApiClientProvider } from '../../../contexts/ApiClientContext';
 import { AuthTokenProvider } from '../../../contexts/AuthTokenContext';
 import { ToastProvider } from '../../../components/Toast';
@@ -41,6 +41,7 @@ vi.mock('../../../lib/api-hooks', () => ({
   useResources: () => ({
     annotations: { useQuery: () => ({ data: { annotations: [] } }) },
     referencedBy: { useQuery: () => ({ data: { referencedBy: [] }, isLoading: false }) },
+    mediaToken: { useQuery: () => ({ data: { token: 'mock-media-token' }, isLoading: false }) },
     update: { useMutation: () => ({ mutateAsync: vi.fn() }) },
     generateCloneToken: { useMutation: () => ({ mutateAsync: vi.fn() }) },
   }),
@@ -86,7 +87,7 @@ useDebouncedCallback: (fn: any) => fn,
       announceResourceLoading: vi.fn(),
       announceResourceLoaded: vi.fn(),
     }),
-    // Don't mock EventBusProvider, useEventBus, resetEventBusForTesting - let actual pass through via ...actual
+    // Don't mock EventBusProvider, useEventBus - let actual pass through via ...actual
     useEventSubscriptions: vi.fn(),
     useResourceAnnotations: () => ({
       clearNewAnnotationId: vi.fn(),
@@ -153,6 +154,7 @@ const createMockProps = (overrides?: Partial<ResourceViewerPageProps>): Resource
   Link: ({ children }: any) => <a>{children}</a>,
   routes: {},
   refetchDocument: vi.fn().mockResolvedValue(undefined),
+  streamStatus: 'connected' as const,
   ToolbarPanels: ({ children, activePanel }: any) =>
     !activePanel ? null : <div data-testid="toolbar-panels">{children}</div>,
   ...overrides,
@@ -164,9 +166,11 @@ const renderWithProviders = (ui: React.ReactElement) => {
     <ThemeProvider>
       <ToastProvider>
         <AuthTokenProvider token={null}>
-          <ApiClientProvider baseUrl="http://localhost:4000">
-            <EventBusProvider>{ui}</EventBusProvider>
-          </ApiClientProvider>
+          <EventBusProvider>
+            <ApiClientProvider baseUrl="http://localhost:4000">
+              {ui}
+            </ApiClientProvider>
+          </EventBusProvider>
         </AuthTokenProvider>
       </ToastProvider>
     </ThemeProvider>
@@ -175,7 +179,6 @@ const renderWithProviders = (ui: React.ReactElement) => {
 
 describe('ResourceViewerPage', () => {
   beforeEach(() => {
-    resetEventBusForTesting();
   });
 
   describe('Basic Rendering', () => {

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

@@ -16,7 +16,7 @@
 
 import { describe, it, expect, vi, beforeEach } from 'vitest';
 import { render, waitFor, act } from '@testing-library/react';
-import { EventBusProvider, resetEventBusForTesting, useEventBus } from '../../../contexts/EventBusContext';
+import { EventBusProvider, useEventBus } from '../../../contexts/EventBusContext';
 import { ApiClientProvider } from '../../../contexts/ApiClientContext';
 import { AuthTokenProvider } from '../../../contexts/AuthTokenContext';
 import { resourceId } from '@semiont/core';
@@ -41,7 +41,6 @@ describe('Toast Notifications - Verifies Toast Integration', () => {
   const rUri = resourceId('test');
 
   beforeEach(() => {
-    resetEventBusForTesting();
     mockShowSuccess.mockClear();
     mockShowError.mockClear();
   });
@@ -115,17 +114,8 @@ describe('Toast Notifications - Verifies Toast Integration', () => {
       // Emit detection failed event
       act(() => {
         eventBusInstance.get('mark:assist-failed').next({
-          type: 'job.failed' as const,
           resourceId: 'test' as any,
-          userId: 'user' as any,
-          id: 'evt-1' as any,
-          timestamp: new Date().toISOString(),
-          version: 1,
-          payload: {
-            jobId: 'job-1' as any,
-            jobType: 'detection',
-            error: 'AI service unavailable',
-          },
+          message: 'AI service unavailable',
         });
       });
 

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

@@ -22,7 +22,7 @@ import { describe, it, expect, vi, beforeEach } from 'vitest';
 import { render, screen, waitFor } from '@testing-library/react';
 import { act } from 'react';
 import { useYieldFlow } from '../../../hooks/useYieldFlow';
-import { EventBusProvider, useEventBus, resetEventBusForTesting } from '../../../contexts/EventBusContext';
+import { EventBusProvider, useEventBus } from '../../../contexts/EventBusContext';
 import { ApiClientProvider } from '../../../contexts/ApiClientContext';
 import { AuthTokenProvider } from '../../../contexts/AuthTokenContext';
 import { useBindFlow } from '../../../hooks/useBindFlow';
@@ -58,7 +58,6 @@ describe('Generation Flow - Feature Integration', () => {
 
   beforeEach(() => {
     vi.clearAllMocks();
-    resetEventBusForTesting();
 
     // Create fresh mock stream for each test
     mockStream = createMockGenerationStream();

package/src/features/resource-viewer/__tests__/annotation-progress-flow.test.tsx

@@ -28,7 +28,7 @@ import userEvent from '@testing-library/user-event';
 import { act } from 'react';
 import { HighlightPanel } from '../../../components/resource/panels/HighlightPanel';
 import { useMarkFlow } from '../../../hooks/useMarkFlow';
-import { EventBusProvider, resetEventBusForTesting } from '../../../contexts/EventBusContext';
+import { EventBusProvider, useEventBus } from '../../../contexts/EventBusContext';
 import { ApiClientProvider } from '../../../contexts/ApiClientContext';
 import { AuthTokenProvider } from '../../../contexts/AuthTokenContext';
 import { SSEClient } from '@semiont/api-client';
@@ -71,7 +71,11 @@ vi.mock('../../../contexts/TranslationContext', () => ({
 
 // Create a mock SSE stream that we can control
 class MockSSEStream {
-  constructor(private eventBus: any) {}
+  private eventBus: any = null;
+
+  setEventBus(eventBus: any) {
+    this.eventBus = eventBus;
+  }
 
   close() {
     // Mock close method
@@ -133,10 +137,18 @@ describe('Detection Progress Flow Integration (Layer 3)', () => {
   let mockStream: MockSSEStream;
   const rUri = 'https://example.com/resources/test-resource-1';
 
+  // Helper component that captures the EventBus and wires it into mockStream
+  function EventBusCapturer() {
+    const eventBus = useEventBus();
+    mockStream.setEventBus(eventBus);
+    return null;
+  }
+
   // Helper to render test harness with composition
   const renderDetectionFlow = () => {
     return render(
       <EventBusProvider>
+        <EventBusCapturer />
         <AuthTokenProvider token={null}>
           <ApiClientProvider baseUrl="http://localhost:4000">
             <DetectionFlowTestHarness
@@ -150,12 +162,10 @@ describe('Detection Progress Flow Integration (Layer 3)', () => {
   };
 
   beforeEach(() => {
-    // Reset event bus for test isolation
-    const eventBus = resetEventBusForTesting();
     vi.clearAllMocks();
 
-    // Reset mocks - create stream with eventBus
-    mockStream = new MockSSEStream(eventBus);
+    // Create fresh stream for each test
+    mockStream = new MockSSEStream();
 
     // Spy on SSEClient prototype methods to inject mock stream
     vi.spyOn(SSEClient.prototype, 'markHighlights').mockReturnValue(mockStream as any);

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

@@ -9,7 +9,7 @@ import React, { useState, useEffect, useCallback, useMemo } from 'react';
 import { useQueryClient } from '@tanstack/react-query';
 import type { components, ResourceId, ResourceEvent, GatheredContext } from '@semiont/core';
 import { annotationId } from '@semiont/core';
-import { getLanguage, getPrimaryRepresentation, getPrimaryMediaType } from '@semiont/api-client';
+import { getLanguage, getPrimaryRepresentation, getPrimaryMediaType, getMimeCategory } from '@semiont/api-client';
 import { ANNOTATORS } from '@semiont/react-ui';
 import { ErrorBoundary } from '@semiont/react-ui';
 import { AnnotationHistory } from '@semiont/react-ui';
@@ -20,15 +20,16 @@ import { JsonLdPanel } from '@semiont/react-ui';
 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 { useDebouncedCallback } from '../../../hooks/useDebounce';
 import { useOpenResources } from '../../../contexts/OpenResourcesContext';
 // Import EventBus hooks directly from context to avoid mocking issues in tests
 import { useEventBus } from '../../../contexts/EventBusContext';
@@ -38,6 +39,7 @@ 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';
@@ -83,6 +85,11 @@ export interface ResourceViewerPageProps {
    * Callback to refetch document from parent
    */
   refetchDocument: () => Promise<unknown>;
+
+  /**
+   * SSE attention stream connection status for the active workspace
+   */
+  streamStatus: StreamStatus;
 }
 
 /**
@@ -120,6 +127,7 @@ export function ResourceViewerPage({
   routes,
   ToolbarPanels,
   refetchDocument,
+  streamStatus,
 }: ResourceViewerPageProps) {
   // Translations
   const tw = useTranslations('ReferenceWizard');
@@ -127,7 +135,7 @@ export function ResourceViewerPage({
   // Get unified event bus for subscribing to UI events
   const eventBus = useEventBus();
   const client = useApiClient();
-  const queryClient = useQueryClient();
+  const queryClient = useQueryClient(); // retained for non-store queries (events log)
 
   // UI state hooks
   const { showError, showSuccess } = useToast();
@@ -141,10 +149,23 @@ export function ResourceViewerPage({
   const resources = useResources();
   const entityTypesAPI = useEntityTypes();
 
-  // Load all data
-  const { content, loading: contentLoading } = useResourceContent(rUri, resource);
+  // Determine MIME category to choose content path
+  const resourceMediaType = getPrimaryMediaType(resource) || 'text/plain';
+  const isBinary = getMimeCategory(resourceMediaType) === 'image';
+
+  // Text path: fetch and decode representation (disabled for binary — mediaToken path handles those)
+  const { content: textContent, loading: textLoading } = useResourceContent(rUri, resource, !isBinary);
 
-  const { data: annotationsData } = resources.annotations.useQuery(rUri);
+  // Binary path: fetch short-lived media token, construct URL
+  const { token: mediaToken, loading: mediaTokenLoading } = useMediaToken(rUri);
+  const binaryContent = (isBinary && mediaToken && client)
+    ? `${client.baseUrl}/api/resources/${rUri}?token=${mediaToken}`
+    : '';
+
+  const content = isBinary ? binaryContent : textContent;
+  const contentLoading = isBinary ? mediaTokenLoading : textLoading;
+
+  const annotationsData = useObservable(client.stores.annotations.listForResource(rUri));
   const annotations = useMemo(
     () => annotationsData?.annotations || [],
     [annotationsData?.annotations]
@@ -165,7 +186,7 @@ export function ResourceViewerPage({
     generationProgress,
     onGenerateDocument,
   } = useYieldFlow(locale, rUri, clearNewAnnotationId);
-  const { gatherContext, gatherLoading, gatherError } = useContextGatherFlow(eventBus, { client, resourceId: rUri });
+  const { gatherContext, gatherLoading, gatherError } = useContextGatherFlow({ resourceId: rUri });
 
   // Wizard state — driven by bind:initiate from ReferenceEntry
   const [wizardOpen, setWizardOpen] = useState(false);
@@ -183,7 +204,7 @@ export function ResourceViewerPage({
       setWizardOpen(true);
 
       // Trigger context gathering
-      eventBus.get('gather:requested').next({ annotationId: event.annotationId, resourceId: event.resourceId });
+      eventBus.get('gather:requested').next({ correlationId: crypto.randomUUID(), annotationId: event.annotationId, resourceId: event.resourceId });
     });
     return () => subscription.unsubscribe();
   }, [eventBus]);
@@ -241,15 +262,6 @@ export function ResourceViewerPage({
     });
   }, []); // eventBus is stable singleton
 
-  // Debounced invalidation for real-time events
-  const debouncedInvalidateAnnotations = useDebouncedCallback(
-    () => {
-      queryClient.invalidateQueries({ queryKey: QUERY_KEYS.resources.annotations(rUri) });
-      queryClient.invalidateQueries({ queryKey: QUERY_KEYS.resources.events(rUri) });
-    },
-    500
-  );
-
   // Add resource to open tabs when it loads
   useEffect(() => {
     if (resource && rUri) {
@@ -262,56 +274,22 @@ export function ResourceViewerPage({
   }, [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,
 
-    // Annotation events - use debounced invalidation to batch rapid updates
     onAnnotationAdded: useCallback((_event: any) => {
-      debouncedInvalidateAnnotations();
-    }, [debouncedInvalidateAnnotations]),
+      // Store handles annotation refresh; events log needs explicit invalidation
+      queryClient.invalidateQueries({ queryKey: QUERY_KEYS.resources.events(rUri) });
+    }, [queryClient, rUri]),
 
     onAnnotationRemoved: useCallback((_event: any) => {
-      debouncedInvalidateAnnotations();
-    }, [debouncedInvalidateAnnotations]),
-
-    onAnnotationBodyUpdated: useCallback((event: any) => {
-      // Optimistically update annotations cache with body operations
-      queryClient.setQueryData(QUERY_KEYS.resources.annotations(rUri), (old: any) => {
-        if (!old) return old;
-        return {
-          ...old,
-          annotations: old.annotations.map((annotation: any) => {
-            if (annotation.id === event.payload.annotationId) {
-              let bodyArray = Array.isArray(annotation.body) ? [...annotation.body] : [];
-
-              for (const op of event.payload.operations || []) {
-                if (op.op === 'add') {
-                  bodyArray.push(op.item);
-                } else if (op.op === 'remove') {
-                  bodyArray = bodyArray.filter((item: any) =>
-                    JSON.stringify(item) !== JSON.stringify(op.item)
-                  );
-                } else if (op.op === 'replace') {
-                  const index = bodyArray.findIndex((item: any) =>
-                    JSON.stringify(item) === JSON.stringify(op.oldItem)
-                  );
-                  if (index !== -1) {
-                    bodyArray[index] = op.newItem;
-                  }
-                }
-              }
-
-              return {
-                ...annotation,
-                body: bodyArray,
-              };
-            }
-            return annotation;
-          }),
-        };
-      });
+      queryClient.invalidateQueries({ queryKey: QUERY_KEYS.resources.events(rUri) });
+    }, [queryClient, rUri]),
 
+    onAnnotationBodyUpdated: useCallback((_event: any) => {
       queryClient.invalidateQueries({ queryKey: QUERY_KEYS.resources.events(rUri) });
     }, [queryClient, rUri]),
 
@@ -319,25 +297,21 @@ export function ResourceViewerPage({
     onDocumentArchived: useCallback((_event: any) => {
       refetchDocument();
       showSuccess('This document has been archived');
-      debouncedInvalidateAnnotations();
-    }, [refetchDocument, showSuccess, debouncedInvalidateAnnotations]),
+    }, [refetchDocument, showSuccess]),
 
     onDocumentUnarchived: useCallback((_event: any) => {
       refetchDocument();
       showSuccess('This document has been unarchived');
-      debouncedInvalidateAnnotations();
-    }, [refetchDocument, showSuccess, debouncedInvalidateAnnotations]),
+    }, [refetchDocument, showSuccess]),
 
     // Entity tag events
     onEntityTagAdded: useCallback((_event: any) => {
       refetchDocument();
-      debouncedInvalidateAnnotations();
-    }, [refetchDocument, debouncedInvalidateAnnotations]),
+    }, [refetchDocument]),
 
     onEntityTagRemoved: useCallback((_event: any) => {
       refetchDocument();
-      debouncedInvalidateAnnotations();
-    }, [refetchDocument, debouncedInvalidateAnnotations]),
+    }, [refetchDocument]),
 
     onError: useCallback((error: any) => {
       console.error('[RealTime] Event stream error:', error);
@@ -386,8 +360,7 @@ export function ResourceViewerPage({
 
   const handleAnnotationAdded = useCallback((event: Extract<ResourceEvent, { type: 'annotation.added' }>) => {
     triggerSparkleAnimation(event.payload.annotation.id);
-    debouncedInvalidateAnnotations();
-  }, [triggerSparkleAnimation, debouncedInvalidateAnnotations]);
+  }, [triggerSparkleAnimation]);
 
   const handleAnnotationCreateFailed = useCallback(() => showError('Failed to create annotation'), [showError]);
   const handleAnnotationDeleteFailed = useCallback(() => showError('Failed to delete annotation'), [showError]);
@@ -399,13 +372,11 @@ export function ResourceViewerPage({
   const handleSettingsThemeChanged = useCallback(({ theme }: { theme: any }) => setTheme(theme), [setTheme]);
 
   const handleDetectionComplete = useCallback(() => {
-    // Toast notification is handled by useMarkFlow
-    queryClient.invalidateQueries({ queryKey: QUERY_KEYS.resources.annotations(rUri) });
+    // 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
-    queryClient.invalidateQueries({ queryKey: QUERY_KEYS.resources.annotations(rUri) });
+    // Error notification is handled by useMarkFlow; store handles annotation refresh
     queryClient.invalidateQueries({ queryKey: QUERY_KEYS.resources.events(rUri) });
   }, [queryClient, rUri]);
   const handleGenerationComplete = useCallback(() => {
@@ -441,7 +412,6 @@ export function ResourceViewerPage({
     'yield:clone': handleResourceClone,
     'beckon:sparkle': handleAnnotationSparkle,
     'mark:added': handleAnnotationAdded,
-    'mark:removed': debouncedInvalidateAnnotations,
     'mark:create-failed': handleAnnotationCreateFailed,
     'mark:delete-failed': handleAnnotationDeleteFailed,
     'mark:body-updated': handleAnnotateBodyUpdated,
@@ -656,7 +626,7 @@ export function ResourceViewerPage({
             {/* Collaboration Panel */}
             {activePanel === 'collaboration' && (
               <CollaborationPanel
-                isConnected={false}
+                isConnected={streamStatus === 'connected'}
                 eventCount={0}
               />
             )}

package/src/styles/core/forms.css

@@ -252,3 +252,35 @@
 /* Note: Basic form controls (.semiont-textarea, .semiont-select, .semiont-checkbox)
    are now defined in /styles/core/ as they are fundamental UI elements.
    See: core/textareas.css, core/selects.css, core/checkboxes.css */
+
+/* Scrollable form body — keeps form within viewport height */
+.semiont-form--scrollable {
+  overflow-y: auto;
+  max-height: 70vh;
+  padding-right: 0.25rem;
+}
+
+/* Inline row — lays out multiple fields side by side */
+.semiont-form__inline-row {
+  display: flex;
+  flex-direction: row;
+  gap: 0.75rem;
+  align-items: flex-start;
+}
+
+/* Inline field variant — participates in an inline row */
+.semiont-form__field--inline {
+  flex-shrink: 0;
+}
+
+/* Grow modifier — field takes remaining space */
+.semiont-form__field--grow {
+  flex: 1;
+  min-width: 0;
+}
+
+/* Narrow modifier — fixed compact width for short numeric inputs */
+.semiont-form__field--narrow {
+  width: 5.5rem;
+  flex-shrink: 0;
+}

package/src/styles/core/sliders.css

@@ -216,6 +216,11 @@
   color: var(--semiont-text-secondary);
 }
 
+/* Small labels variant — reduced font size for compact inline contexts */
+.semiont-slider__labels--small {
+  font-size: 0.6875rem;
+}
+
 .semiont-slider__value {
   text-align: center;
   font-size: var(--semiont-text-sm);

package/translations/ar.json

@@ -5,7 +5,8 @@
     "resourceInfo": "معلومات المورد",
     "collaboration": "التعاون",
     "userAccount": "حساب المستخدم",
-    "settings": "الإعدادات"
+    "settings": "الإعدادات",
+    "knowledgeBase": "قاعدة المعرفة"
   },
   "ResourceInfoPanel": {
     "title": "معلومات المورد",
@@ -373,4 +374,4 @@
     "searching": "جاري البحث...",
     "search": "بحث"
   }
-}
+}

package/translations/bn.json

@@ -5,7 +5,8 @@
     "resourceInfo": "সম্পদের তথ্য",
     "collaboration": "সহযোগিতা",
     "userAccount": "ব্যবহারকারীর অ্যাকাউন্ট",
-    "settings": "সেটিংস"
+    "settings": "সেটিংস",
+    "knowledgeBase": "জ্ঞান ভান্ডার"
   },
   "ResourceInfoPanel": {
     "title": "সম্পদের তথ্য",
@@ -373,4 +374,4 @@
     "searching": "অনুসন্ধান করা হচ্ছে...",
     "search": "অনুসন্ধান"
   }
-}
+}

package/translations/cs.json

@@ -5,7 +5,8 @@
     "resourceInfo": "Informace o zdroji",
     "collaboration": "Spolupráce",
     "userAccount": "Uživatelský účet",
-    "settings": "Nastavení"
+    "settings": "Nastavení",
+    "knowledgeBase": "Znalostní báze"
   },
   "ResourceInfoPanel": {
     "title": "Informace o zdroji",
@@ -373,4 +374,4 @@
     "searching": "Vyhledávání...",
     "search": "Hledat"
   }
-}
+}

package/translations/da.json

@@ -5,7 +5,8 @@
     "resourceInfo": "Ressourceinfo",
     "collaboration": "Samarbejde",
     "userAccount": "Brugerkonto",
-    "settings": "Indstillinger"
+    "settings": "Indstillinger",
+    "knowledgeBase": "Vidensbase"
   },
   "ResourceInfoPanel": {
     "title": "Ressourceinfo",
@@ -373,4 +374,4 @@
     "searching": "Søger...",
     "search": "Søg"
   }
-}
+}