@semiont/react-ui 0.4.20 → 0.4.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@semiont/react-ui",
-  "version": "0.4.20",
+  "version": "0.4.21",
   "description": "React components and hooks for Semiont",
   "main": "./dist/index.mjs",
   "types": "./dist/index.d.mts",
@@ -73,7 +73,6 @@
     "test:split:coverage": "npm run test:coverage"
   },
   "peerDependencies": {
-    "@tanstack/react-query": "^5.0.0",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
   },

package/src/components/AnnotateReferencesProgressWidget.tsx

@@ -1,19 +1,15 @@
 'use client';
 
 import { useTranslations } from '../contexts/TranslationContext';
-import { useEventBus } from '../contexts/EventBusContext';
-import type { MarkProgress } from '@semiont/core';
+import { useSemiont } from '../session/SemiontProvider';
+import { useObservable } from '../hooks/useObservable';
 import type { components } from '@semiont/core';
 
 type Motivation = components['schemas']['Motivation'];
-
-// Extended MarkProgress with optional request parameters
-interface EnrichedMarkProgress extends MarkProgress {
-  requestParams?: Array<{ label: string; value: string }>;
-}
+type JobProgress = components['schemas']['JobProgress'];
 
 interface AnnotateReferencesProgressWidgetProps {
-  progress: MarkProgress | null;
+  progress: JobProgress | null;
   annotationType?: Motivation | 'reference';
 }
 
@@ -24,11 +20,11 @@ interface AnnotateReferencesProgressWidgetProps {
  */
 export function AnnotateReferencesProgressWidget({ progress, annotationType = 'reference' }: AnnotateReferencesProgressWidgetProps) {
   const t = useTranslations('ReferencesPanel');
-  const eventBus = useEventBus();
+  const session = useObservable(useSemiont().activeSession$);
 
   const handleCancel = () => {
     // Emit event for job cancellation
-    eventBus.get('job:cancel-requested').next({ jobType: 'annotation' });
+    session?.client.emit('job:cancel-requested', { jobType: 'annotation' });
   };
 
   if (!progress) return null;
@@ -36,7 +32,7 @@ export function AnnotateReferencesProgressWidget({ progress, annotationType = 'r
   return (
     <div
       className="semiont-annotation-progress"
-      data-status={progress.status}
+      data-status={progress.stage}
       data-type={annotationType}
     >
       {/* Header with pulsing sparkle */}
@@ -45,7 +41,7 @@ export function AnnotateReferencesProgressWidget({ progress, annotationType = 'r
           <span className="semiont-annotation-sparkle">✨</span>
           {t('annotationProgressTitle')}
         </h3>
-        {progress.status !== 'complete' && (
+        {progress.stage !== 'complete' && (
           <button
             onClick={handleCancel}
             className="semiont-annotation-cancel"
@@ -57,19 +53,16 @@ export function AnnotateReferencesProgressWidget({ progress, annotationType = 'r
       </div>
 
       {/* Request Parameters */}
-      {(() => {
-        const enrichedProgress = progress as EnrichedMarkProgress;
-        return enrichedProgress.requestParams && enrichedProgress.requestParams.length > 0 && (
-          <div className="semiont-annotation-progress__params">
-            <div className="semiont-annotation-progress__params-title">Request Parameters:</div>
-            {enrichedProgress.requestParams.map((param, idx) => (
-              <div key={idx} className="semiont-annotation-progress__param">
-                <span className="semiont-annotation-progress__param-label">{param.label}:</span> {param.value}
-              </div>
-            ))}
-          </div>
-        );
-      })()}
+      {progress.requestParams && progress.requestParams.length > 0 && (
+        <div className="semiont-annotation-progress__params">
+          <div className="semiont-annotation-progress__params-title">Request Parameters:</div>
+          {progress.requestParams.map((param, idx) => (
+            <div key={idx} className="semiont-annotation-progress__param">
+              <span className="semiont-annotation-progress__param-label">{param.label}:</span> {param.value}
+            </div>
+          ))}
+        </div>
+      )}
 
       {/* Completed entity types log */}
       {progress.completedEntityTypes && progress.completedEntityTypes.length > 0 && (
@@ -86,12 +79,12 @@ export function AnnotateReferencesProgressWidget({ progress, annotationType = 'r
 
       {/* Status display with pulsing animation */}
       <div className="semiont-annotation-progress__status">
-        {progress.status === 'complete' ? (
+        {progress.stage === 'complete' ? (
           <div className="semiont-annotation-progress__message">
             <span className="semiont-annotation-progress__icon">✅</span>
             <span>{t('complete')}</span>
           </div>
-        ) : progress.status === 'error' ? (
+        ) : progress.stage === 'error' ? (
           <div className="semiont-annotation-progress__message">
             <span className="semiont-annotation-progress__icon">❌</span>
             <span>{progress.message || t('failed')}</span>
@@ -102,7 +95,7 @@ export function AnnotateReferencesProgressWidget({ progress, annotationType = 'r
             <span>{progress.message || (progress.currentEntityType ? t('current', { entityType: progress.currentEntityType }) : t('annotating'))}</span>
           </div>
         )}
-        {progress.currentEntityType && progress.status !== 'complete' && progress.status !== 'error' && (
+        {progress.currentEntityType && progress.stage !== 'complete' && progress.stage !== 'error' && (
           <div className="semiont-annotation-progress__details">
             Processing: {progress.currentEntityType}
           </div>

package/src/components/CodeMirrorRenderer.tsx

@@ -6,9 +6,7 @@ import { EditorState, RangeSetBuilder, StateField, StateEffect, Compartment } fr
 import { markdown } from '@codemirror/lang-markdown';
 import { ReferenceResolutionWidget, showWidgetPreview, hideWidgetPreview } from '../lib/codemirror-widgets';
 import { scrollAnnotationIntoView } from '../lib/scroll-utils';
-import { isReference } from '@semiont/api-client';
-import type { EventBus } from "@semiont/core";
-import { createHoverHandlers } from '../hooks/useBeckonFlow';
+import { isReference, createHoverHandlers, type SemiontSession } from '@semiont/api-client';
 import {
   convertSegmentPositions,
   computeAnnotationDecorations,
@@ -43,7 +41,7 @@ interface Props {
   sourceView?: boolean; // If true, show raw source (no markdown rendering)
   showLineNumbers?: boolean; // If true, show line numbers
   enableWidgets?: boolean; // If true, show inline widgets (reference previews, entity badges)
-  eventBus?: EventBus;
+  session?: SemiontSession | null | undefined;
   getTargetResourceName?: (resourceId: string) => string | undefined;
   generatingReferenceId?: string | null; // ID of reference currently generating a document
   hoverDelayMs: number; // Hover delay in milliseconds for accessibility
@@ -179,7 +177,7 @@ export function CodeMirrorRenderer({
   sourceView = false,
   showLineNumbers = false,
   enableWidgets = false,
-  eventBus,
+  session,
   getTargetResourceName,
   generatingReferenceId,
   hoverDelayMs
@@ -196,7 +194,7 @@ export function CodeMirrorRenderer({
   // Index segments by annotation ID for O(1) click lookups
   const segmentsByIdRef = useRef(new Map<string, TextSegment>());
   const lineNumbersCompartment = useRef(new Compartment());
-  const eventBusRef = useRef(eventBus);
+  const sessionRef = useRef(session);
   const getTargetResourceNameRef = useRef(getTargetResourceName);
 
   // Update refs when they change
@@ -206,7 +204,7 @@ export function CodeMirrorRenderer({
     if (s.annotation) segmentsById.set(s.annotation.id, s);
   }
   segmentsByIdRef.current = segmentsById;
-  eventBusRef.current = eventBus;
+  sessionRef.current = session;
   getTargetResourceNameRef.current = getTargetResourceName;
 
   // Initialize CodeMirror view once
@@ -238,7 +236,7 @@ export function CodeMirrorRenderer({
         EditorView.domEventHandlers({
           click: (event, _view) => {
             const target = event.target as HTMLElement;
-            if (eventBusRef.current && handleAnnotationClick(target, segmentsByIdRef.current, eventBusRef.current)) {
+            if (sessionRef.current && handleAnnotationClick(target, segmentsByIdRef.current, sessionRef.current)) {
               event.preventDefault();
               return true;
             }
@@ -303,7 +301,7 @@ export function CodeMirrorRenderer({
     const container = view.dom;
 
     const { handleMouseEnter, handleMouseLeave, cleanup: cleanupHover } = createHoverHandlers(
-      (annotationId) => eventBusRef.current?.get('beckon:hover').next({ annotationId }),
+      (annotationId) => sessionRef.current?.client.emit('beckon:hover', { annotationId }),
       hoverDelayMs
     );
 
@@ -329,8 +327,8 @@ export function CodeMirrorRenderer({
       e.preventDefault();
       e.stopPropagation();
 
-      if (eventBusRef.current) {
-        dispatchWidgetClick(result, eventBusRef.current);
+      if (sessionRef.current) {
+        dispatchWidgetClick(result, sessionRef.current);
       }
     };
 

package/src/components/StatusDisplay.tsx

@@ -1,6 +1,8 @@
 'use client';
 
-import { useHealth } from '../lib/api-hooks';
+import { useEffect, useState } from 'react';
+import { useSemiont } from '../session/SemiontProvider';
+import { useObservable } from '../hooks/useObservable';
 import './StatusDisplay.css';
 
 interface StatusDisplayProps {
@@ -9,36 +11,61 @@ interface StatusDisplayProps {
   hasValidBackendToken?: boolean;
 }
 
+interface StatusData {
+  status: string;
+  version: string;
+}
+
 export function StatusDisplay({
   isFullyAuthenticated = false,
   isAuthenticated = false,
   hasValidBackendToken = false
 }: StatusDisplayProps) {
-  const health = useHealth();
-  const status = health.status.useQuery(30000); // Poll every 30 seconds
+  const semiont = useObservable(useSemiont().activeSession$)?.client;
+  const [data, setData] = useState<StatusData | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<Error | null>(null);
+
+  useEffect(() => {
+    if (!semiont) { setLoading(false); return; }
+
+    const fetchStatus = () => {
+      semiont.getStatus()
+        .then((result) => {
+          setData(result as StatusData);
+          setError(null);
+          setLoading(false);
+        })
+        .catch((err) => {
+          setError(err instanceof Error ? err : new Error(String(err)));
+          setLoading(false);
+        });
+    };
+
+    fetchStatus();
+    const interval = setInterval(fetchStatus, 30000);
+    return () => clearInterval(interval);
+  }, [semiont]);
 
   const getStatusContent = () => {
-    // Check for users who are logged in but missing backend token (old sessions)
     if (isAuthenticated && !hasValidBackendToken) {
       return '🚀 Frontend Status: Ready • Backend: Please sign out and sign in again to reconnect';
     }
 
-    // If user is not authenticated at all, show appropriate message
     if (!isFullyAuthenticated) {
       return '🚀 Frontend Status: Ready • Backend: Authentication required';
     }
 
-    if (status.data) {
-      return `🚀 Frontend Status: Ready • Backend: ${status.data.status} (v${status.data.version})`;
+    if (data) {
+      return `🚀 Frontend Status: Ready • Backend: ${data.status} (v${data.version})`;
     }
 
-    if (status.isLoading) {
+    if (loading) {
       return '🚀 Frontend Status: Ready • Backend: Connecting...';
     }
 
-    if (status.error) {
-      // Check if this is an auth error that might be fixed by re-login
-      const errorMessage = status.error instanceof Error ? status.error.message : String(status.error);
+    if (error) {
+      const errorMessage = error.message;
       if (errorMessage.includes('401') || errorMessage.includes('Unauthorized')) {
         return '🚀 Frontend Status: Ready • Backend: Please sign out and sign in again';
       }
@@ -49,7 +76,6 @@ export function StatusDisplay({
   };
 
   const getStatusType = (): 'warning' | 'info' | 'success' | 'loading' | 'error' => {
-    // Check for users who need to re-authenticate
     if (isAuthenticated && !hasValidBackendToken) {
       return 'warning';
     }
@@ -58,11 +84,11 @@ export function StatusDisplay({
       return 'info';
     }
 
-    if (status.data) {
+    if (data) {
       return 'success';
     }
 
-    if (status.isLoading) {
+    if (loading) {
       return 'loading';
     }
 
@@ -85,7 +111,7 @@ export function StatusDisplay({
         <p className="semiont-status-hint">
           Sign in to view backend status
         </p>
-      ) : status.error ? (
+      ) : error ? (
         <p className="semiont-status-hint semiont-status-error-hint" role="alert">
           <span className="sr-only">Error: </span>
           Check that the backend server is running and accessible
@@ -93,4 +119,4 @@ export function StatusDisplay({
       ) : null}
     </section>
   );
-}
+}

package/src/components/Toolbar.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { useTranslations } from '../contexts/TranslationContext';
-import { useEventBus } from '../contexts/EventBusContext';
+import { useSemiont } from '../session/SemiontProvider';
 import './toolbar/Toolbar.css';
 
 type ToolbarContext = 'document' | 'simple';
@@ -17,7 +17,7 @@ interface Props<T extends string = string> {
 /**
  * Toolbar component for panel navigation
  *
- * @emits browse:panel-toggle - Toggle panel visibility. Payload: { panel: string }
+ * @emits panel:toggle - Toggle panel visibility. Payload: { panel: string }
  */
 export function Toolbar<T extends string = string>({
   context,
@@ -25,10 +25,10 @@ export function Toolbar<T extends string = string>({
   isArchived = false
 }: Props<T>) {
   const t = useTranslations('Toolbar');
-  const eventBus = useEventBus();
+  const semiont = useSemiont();
 
   const handlePanelToggle = (panel: string) => {
-    eventBus.get('browse:panel-toggle').next({ panel });
+    semiont.emit('panel:toggle', { panel });
   };
 
   return (

package/src/components/__tests__/AnnotateReferencesProgressWidget.test.tsx

@@ -4,7 +4,9 @@ import { screen, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { renderWithProviders } from '../../test-utils';
 import { AnnotateReferencesProgressWidget } from '../AnnotateReferencesProgressWidget';
-import type { MarkProgress } from '@semiont/core';
+import type { components } from '@semiont/core';
+
+type JobProgress = components['schemas']['JobProgress'];
 
 describe('AnnotateReferencesProgressWidget', () => {
   it('returns null when progress is null', () => {
@@ -15,9 +17,10 @@ describe('AnnotateReferencesProgressWidget', () => {
     expect(container.firstChild).toBeNull();
   });
 
-  it('renders progress with status message', () => {
-    const progress: MarkProgress = {
-      status: 'in-progress',
+  it('renders progress with stage message', () => {
+    const progress: JobProgress = {
+      stage: 'in-progress',
+      percentage: 50,
       message: 'Processing entities...',
     };
 
@@ -29,8 +32,9 @@ describe('AnnotateReferencesProgressWidget', () => {
   });
 
   it('shows cancel button when not complete', () => {
-    const progress: MarkProgress = {
-      status: 'in-progress',
+    const progress: JobProgress = {
+      stage: 'in-progress',
+      percentage: 30,
       message: 'Working...',
     };
 
@@ -43,8 +47,10 @@ describe('AnnotateReferencesProgressWidget', () => {
   });
 
   it('hides cancel button when complete', () => {
-    const progress: MarkProgress = {
-      status: 'complete',
+    const progress: JobProgress = {
+      stage: 'complete',
+      percentage: 100,
+      message: '',
     };
 
     renderWithProviders(
@@ -56,8 +62,9 @@ describe('AnnotateReferencesProgressWidget', () => {
 
   it('emits job:cancel-requested on cancel click', () => {
     const handler = vi.fn();
-    const progress: MarkProgress = {
-      status: 'in-progress',
+    const progress: JobProgress = {
+      stage: 'in-progress',
+      percentage: 40,
       message: 'Working...',
     };
 
@@ -77,8 +84,10 @@ describe('AnnotateReferencesProgressWidget', () => {
   });
 
   it('renders completed entity types', () => {
-    const progress: MarkProgress = {
-      status: 'in-progress',
+    const progress: JobProgress = {
+      stage: 'in-progress',
+      percentage: 60,
+      message: '',
       completedEntityTypes: [
         { entityType: 'Person', foundCount: 5 },
         { entityType: 'Organization', foundCount: 3 },
@@ -96,9 +105,11 @@ describe('AnnotateReferencesProgressWidget', () => {
     expect(foundLabels).toHaveLength(2);
   });
 
-  it('shows complete icon for complete status', () => {
-    const progress: MarkProgress = {
-      status: 'complete',
+  it('shows complete icon for complete stage', () => {
+    const progress: JobProgress = {
+      stage: 'complete',
+      percentage: 100,
+      message: '',
     };
 
     const { container } = renderWithProviders(
@@ -109,9 +120,10 @@ describe('AnnotateReferencesProgressWidget', () => {
     expect(screen.getByText('ReferencesPanel.complete')).toBeInTheDocument();
   });
 
-  it('shows error message for error status', () => {
-    const progress: MarkProgress = {
-      status: 'error',
+  it('shows error message for error stage', () => {
+    const progress: JobProgress = {
+      stage: 'error',
+      percentage: 0,
       message: 'Something went wrong',
     };
 
@@ -124,8 +136,10 @@ describe('AnnotateReferencesProgressWidget', () => {
   });
 
   it('shows current entity type processing details', () => {
-    const progress: MarkProgress = {
-      status: 'in-progress',
+    const progress: JobProgress = {
+      stage: 'in-progress',
+      percentage: 50,
+      message: '',
       currentEntityType: 'Location',
     };
 

package/src/components/__tests__/StatusDisplay.test.tsx

@@ -1,42 +1,35 @@
 import { describe, it, expect, beforeEach, vi } from 'vitest';
 import React from 'react';
-import { screen } from '@testing-library/react';
+import { screen, waitFor } from '@testing-library/react';
+import { BehaviorSubject } from 'rxjs';
 import '@testing-library/jest-dom';
 import { renderWithProviders } from '../../test-utils';
-
-// Mock api-hooks
-vi.mock('../../lib/api-hooks', () => ({
-  useHealth: vi.fn(),
-}));
-
-import { useHealth } from '../../lib/api-hooks';
-import type { MockedFunction } from 'vitest';
 import { StatusDisplay } from '../StatusDisplay';
 
-const mockUseHealth = useHealth as MockedFunction<typeof useHealth>;
+let mockGetStatus: ReturnType<typeof vi.fn>;
+const stableMockClient = {
+  get getStatus() { return mockGetStatus; },
+};
+const stableMockSession = { client: stableMockClient };
+const stableActiveSession$ = new BehaviorSubject<any>(stableMockSession);
+const stableMockBrowser = { activeSession$: stableActiveSession$ };
 
-function createMockHealth(queryResult: { data?: unknown; isLoading?: boolean; error?: unknown }) {
+vi.mock('../../session/SemiontProvider', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('../../session/SemiontProvider')>();
   return {
-    check: {
-      useQuery: vi.fn(),
-    },
-    status: {
-      useQuery: vi.fn().mockReturnValue({
-        data: queryResult.data ?? undefined,
-        isLoading: queryResult.isLoading ?? false,
-        error: queryResult.error ?? undefined,
-      }),
-    },
+    ...actual,
+    useSemiont: () => stableMockBrowser,
   };
-}
+});
 
 describe('StatusDisplay', () => {
   beforeEach(() => {
     vi.clearAllMocks();
+    mockGetStatus = vi.fn();
   });
 
   it('should show "Authentication required" when not fully authenticated', () => {
-    mockUseHealth.mockReturnValue(createMockHealth({ data: undefined, isLoading: false }) as ReturnType<typeof useHealth>);
+    mockGetStatus.mockResolvedValue({ status: 'healthy', version: '1.0.0' });
 
     renderWithProviders(
       <StatusDisplay isFullyAuthenticated={false} isAuthenticated={false} />
@@ -45,55 +38,45 @@ describe('StatusDisplay', () => {
     expect(screen.getByText(/Authentication required/)).toBeInTheDocument();
   });
 
-  it('should show "Connecting..." when loading', () => {
-    mockUseHealth.mockReturnValue(createMockHealth({ isLoading: true }) as ReturnType<typeof useHealth>);
+  it('should show status when data is available', async () => {
+    mockGetStatus.mockResolvedValue({ status: 'healthy', version: '1.2.3' });
 
     renderWithProviders(
       <StatusDisplay isFullyAuthenticated={true} isAuthenticated={true} hasValidBackendToken={true} />
     );
 
-    expect(screen.getByText(/Connecting\.\.\./)).toBeInTheDocument();
+    await waitFor(() => {
+      expect(screen.getByText(/healthy/)).toBeInTheDocument();
+      expect(screen.getByText(/v1\.2\.3/)).toBeInTheDocument();
+    });
   });
 
-  it('should show status when data is available', () => {
-    mockUseHealth.mockReturnValue(createMockHealth({
-      data: { status: 'healthy', version: '1.2.3' },
-    }) as ReturnType<typeof useHealth>);
+  it('should show "Connection failed" on error', async () => {
+    mockGetStatus.mockRejectedValue(new Error('Network error'));
 
     renderWithProviders(
       <StatusDisplay isFullyAuthenticated={true} isAuthenticated={true} hasValidBackendToken={true} />
     );
 
-    expect(screen.getByText(/healthy/)).toBeInTheDocument();
-    expect(screen.getByText(/v1\.2\.3/)).toBeInTheDocument();
+    await waitFor(() => {
+      expect(screen.getByText(/Connection failed/)).toBeInTheDocument();
+    });
   });
 
-  it('should show "Connection failed" on error', () => {
-    mockUseHealth.mockReturnValue(createMockHealth({
-      error: new Error('Network error'),
-    }) as ReturnType<typeof useHealth>);
+  it('should show re-login message for 401 errors', async () => {
+    mockGetStatus.mockRejectedValue(new Error('401 Unauthorized'));
 
     renderWithProviders(
       <StatusDisplay isFullyAuthenticated={true} isAuthenticated={true} hasValidBackendToken={true} />
     );
 
-    expect(screen.getByText(/Connection failed/)).toBeInTheDocument();
-  });
-
-  it('should show re-login message for 401 errors', () => {
-    mockUseHealth.mockReturnValue(createMockHealth({
-      error: new Error('401 Unauthorized'),
-    }) as ReturnType<typeof useHealth>);
-
-    renderWithProviders(
-      <StatusDisplay isFullyAuthenticated={true} isAuthenticated={true} hasValidBackendToken={true} />
-    );
-
-    expect(screen.getByText(/sign out and sign in again/i)).toBeInTheDocument();
+    await waitFor(() => {
+      expect(screen.getByText(/sign out and sign in again/i)).toBeInTheDocument();
+    });
   });
 
   it('should show warning for authenticated users missing backend token', () => {
-    mockUseHealth.mockReturnValue(createMockHealth({ data: undefined }) as ReturnType<typeof useHealth>);
+    mockGetStatus.mockResolvedValue(undefined);
 
     renderWithProviders(
       <StatusDisplay isFullyAuthenticated={false} isAuthenticated={true} hasValidBackendToken={false} />
@@ -103,7 +86,7 @@ describe('StatusDisplay', () => {
   });
 
   it('should have role="status"', () => {
-    mockUseHealth.mockReturnValue(createMockHealth({ data: undefined }) as ReturnType<typeof useHealth>);
+    mockGetStatus.mockResolvedValue(undefined);
 
     renderWithProviders(
       <StatusDisplay isFullyAuthenticated={false} isAuthenticated={false} />
@@ -113,7 +96,7 @@ describe('StatusDisplay', () => {
   });
 
   it('should have aria-live="polite"', () => {
-    mockUseHealth.mockReturnValue(createMockHealth({ data: undefined }) as ReturnType<typeof useHealth>);
+    mockGetStatus.mockResolvedValue(undefined);
 
     renderWithProviders(
       <StatusDisplay isFullyAuthenticated={false} isAuthenticated={false} />
@@ -124,7 +107,7 @@ describe('StatusDisplay', () => {
   });
 
   it('should show sign-in hint when not authenticated', () => {
-    mockUseHealth.mockReturnValue(createMockHealth({ data: undefined }) as ReturnType<typeof useHealth>);
+    mockGetStatus.mockResolvedValue(undefined);
 
     renderWithProviders(
       <StatusDisplay isFullyAuthenticated={false} isAuthenticated={false} />
@@ -133,28 +116,28 @@ describe('StatusDisplay', () => {
     expect(screen.getByText('Sign in to view backend status')).toBeInTheDocument();
   });
 
-  it('should show error hint when there is an error', () => {
-    mockUseHealth.mockReturnValue(createMockHealth({
-      error: new Error('Connection refused'),
-    }) as ReturnType<typeof useHealth>);
+  it('should show error hint when there is an error', async () => {
+    mockGetStatus.mockRejectedValue(new Error('Connection refused'));
 
     renderWithProviders(
       <StatusDisplay isFullyAuthenticated={true} isAuthenticated={true} hasValidBackendToken={true} />
     );
 
-    expect(screen.getByText(/Check that the backend server is running/)).toBeInTheDocument();
+    await waitFor(() => {
+      expect(screen.getByText(/Check that the backend server is running/)).toBeInTheDocument();
+    });
   });
 
-  it('should set data-status attribute based on state', () => {
-    mockUseHealth.mockReturnValue(createMockHealth({
-      data: { status: 'healthy', version: '1.0.0' },
-    }) as ReturnType<typeof useHealth>);
+  it('should set data-status attribute based on state', async () => {
+    mockGetStatus.mockResolvedValue({ status: 'healthy', version: '1.0.0' });
 
     renderWithProviders(
       <StatusDisplay isFullyAuthenticated={true} isAuthenticated={true} hasValidBackendToken={true} />
     );
 
-    const status = screen.getByRole('status');
-    expect(status).toHaveAttribute('data-status', 'success');
+    await waitFor(() => {
+      const status = screen.getByRole('status');
+      expect(status).toHaveAttribute('data-status', 'success');
+    });
   });
 });