@striae-org/striae 6.1.3 → 6.1.5

package/app/components/sidebar/sidebar.tsx

@@ -5,6 +5,7 @@ import styles from './sidebar.module.css';
 import { CaseSidebar } from './cases/case-sidebar';
 import { Toast } from '../toast/toast';
 import { type FileData } from '~/types';
+import { type UserConfirmationSummaryDocument } from '~/utils/data';
 
 interface SidebarProps {
   user: User;
@@ -26,6 +27,7 @@ interface SidebarProps {
   isUploading?: boolean;
   onUploadStatusChange?: (isUploading: boolean) => void;
   onOpenCaseExport?: () => void;
+  initialConfirmationSummary?: UserConfirmationSummaryDocument;
 }
 
 export const Sidebar = ({ 
@@ -46,6 +48,7 @@ export const Sidebar = ({
   isUploading: initialIsUploading = false,
   onUploadStatusChange,
   onOpenCaseExport,
+  initialConfirmationSummary,
 }: SidebarProps) => {
   const [isUploading, setIsUploading] = useState(initialIsUploading);
   const [toastMessage, setToastMessage] = useState('');
@@ -97,6 +100,7 @@ export const Sidebar = ({
         onUploadStatusChange={handleUploadStatusChange}
         onUploadComplete={handleUploadComplete}
         onOpenCaseExport={onOpenCaseExport}
+        initialConfirmationSummary={initialConfirmationSummary}
       />
       <Toast 
         message={toastMessage}

package/app/components/user/mfa-phone-update.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import {
   EmailAuthProvider,
   getMultiFactorResolver,
@@ -56,7 +56,7 @@ export const MfaPhoneUpdateSection = ({
   const [mfaReauthVerificationCode, setMfaReauthVerificationCode] = useState('');
   const [isMfaReauthCodeSent, setIsMfaReauthCodeSent] = useState(false);
   const [isMfaReauthLoading, setIsMfaReauthLoading] = useState(false);
-  const [recaptchaVerifier, setRecaptchaVerifier] = useState<RecaptchaVerifier | null>(null);
+  const recaptchaVerifierRef = useRef<RecaptchaVerifier | null>(null);
 
   const isMfaBusy = isMfaLoading || isMfaReauthLoading;
   const hasMfaPhoneInput = mfaPhoneInput.trim().length > 0;
@@ -125,7 +125,8 @@ export const MfaPhoneUpdateSection = ({
       return;
     }
 
-    if (!recaptchaVerifier) {
+    const captchaVerifier = recaptchaVerifierRef.current;
+    if (!captchaVerifier) {
       setMfaError(getValidationError('MFA_RECAPTCHA_ERROR'));
       setMfaSuccess('');
       return;
@@ -144,7 +145,7 @@ export const MfaPhoneUpdateSection = ({
       };
 
       const phoneAuthProvider = new PhoneAuthProvider(auth);
-      const verificationId = await phoneAuthProvider.verifyPhoneNumber(phoneInfoOptions, recaptchaVerifier);
+      const verificationId = await phoneAuthProvider.verifyPhoneNumber(phoneInfoOptions, captchaVerifier);
 
       setMfaVerificationId(verificationId);
       setIsMfaCodeSent(true);
@@ -208,7 +209,7 @@ export const MfaPhoneUpdateSection = ({
       const { message, data } = handleAuthError(err);
 
       if (data?.code === 'auth/multi-factor-auth-required') {
-        if (!recaptchaVerifier) {
+        if (!recaptchaVerifierRef.current) {
           setMfaSuccess('');
           setMfaError(getValidationError('MFA_RECAPTCHA_ERROR'));
           return;
@@ -249,7 +250,8 @@ export const MfaPhoneUpdateSection = ({
       return;
     }
 
-    if (!recaptchaVerifier) {
+    const captchaVerifier = recaptchaVerifierRef.current;
+    if (!captchaVerifier) {
       setMfaSuccess('');
       setMfaError(getValidationError('MFA_RECAPTCHA_ERROR'));
       return;
@@ -266,7 +268,7 @@ export const MfaPhoneUpdateSection = ({
         session: mfaReauthResolver.session,
       };
 
-      const verificationId = await phoneAuthProvider.verifyPhoneNumber(phoneInfoOptions, recaptchaVerifier);
+      const verificationId = await phoneAuthProvider.verifyPhoneNumber(phoneInfoOptions, captchaVerifier);
       setMfaReauthVerificationId(verificationId);
       setMfaReauthVerificationCode('');
       setIsMfaReauthCodeSent(true);
@@ -502,11 +504,11 @@ export const MfaPhoneUpdateSection = ({
       },
     });
 
-    setRecaptchaVerifier(verifier);
+    recaptchaVerifierRef.current = verifier;
 
     return () => {
       verifier.clear();
-      setRecaptchaVerifier(null);
+      recaptchaVerifierRef.current = null;
     };
   }, [isOpen, user]);
 

package/app/components/user/mfa-totp-section.tsx

@@ -1,4 +1,4 @@
-import { useState, useCallback, useEffect } from 'react';
+import { useState, useCallback, useEffect, useRef } from 'react';
 import {
   EmailAuthProvider,
   getMultiFactorResolver,
@@ -49,7 +49,7 @@ export const MfaTotpSection = ({
   const [reauthVerificationCode, setReauthVerificationCode] = useState('');
   const [isReauthCodeSent, setIsReauthCodeSent] = useState(false);
   const [isReauthLoading, setIsReauthLoading] = useState(false);
-  const [recaptchaVerifier, setRecaptchaVerifier] = useState<RecaptchaVerifier | null>(null);
+  const recaptchaVerifierRef = useRef<RecaptchaVerifier | null>(null);
 
   const isBusy = isLoading || isReauthLoading;
 
@@ -98,11 +98,11 @@ export const MfaTotpSection = ({
         setError(getValidationError('MFA_RECAPTCHA_EXPIRED'));
       },
     });
-    setRecaptchaVerifier(verifier);
+    recaptchaVerifierRef.current = verifier;
 
     return () => {
       verifier.clear();
-      setRecaptchaVerifier(null);
+      recaptchaVerifierRef.current = null;
     };
   }, [isOpen, user]);
 
@@ -168,7 +168,7 @@ export const MfaTotpSection = ({
       const { data, message } = handleAuthError(err);
 
       if (data?.code === 'auth/multi-factor-auth-required') {
-        if (!recaptchaVerifier) {
+        if (!recaptchaVerifierRef.current) {
           setError(getValidationError('MFA_RECAPTCHA_ERROR'));
           return;
         }
@@ -199,7 +199,8 @@ export const MfaTotpSection = ({
   };
 
   const handleSendReauthCode = async () => {
-    if (!reauthResolver || !reauthHint || !recaptchaVerifier) {
+    const captchaVerifier = recaptchaVerifierRef.current;
+    if (!reauthResolver || !reauthHint || !captchaVerifier) {
       setError(getValidationError('MFA_RECAPTCHA_ERROR'));
       return;
     }
@@ -211,7 +212,7 @@ export const MfaTotpSection = ({
       const phoneAuthProvider = new PhoneAuthProvider(auth);
       const verificationId = await phoneAuthProvider.verifyPhoneNumber(
         { multiFactorHint: reauthHint, session: reauthResolver.session },
-        recaptchaVerifier
+        captchaVerifier
       );
       setReauthVerificationId(verificationId);
       setReauthVerificationCode('');

package/app/root.tsx

@@ -64,6 +64,7 @@ export function Layout({ children }: { children: React.ReactNode }) {
       <head>
         <meta charSet="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <meta name="robots" content="noindex, nofollow" />
         <style dangerouslySetInnerHTML={{ __html: themeStyles }} />        
         <Links />
       </head>

package/app/routes/auth/{login.example.tsx → login.tsx}

@@ -147,7 +147,24 @@ export const Login = () => {
       // On network/API errors, throw error to prevent login
       throw new Error('System error. Please try logging in at a later time.');
     }
-  };  
+  };
+
+  // Add proper sign out handling
+  const handleSignOut = async () => {
+    try {
+      await auth.signOut();      
+      setUser(null);
+      setIsLoading(false);
+      setShowMfaEnrollment(false);
+      setShowMfaVerification(false);
+      setMfaResolver(null);
+      setIsWelcomeToastVisible(false);
+      setWelcomeToastType('success');
+      shouldShowWelcomeToastRef.current = false;
+    } catch (err) {
+      console.error('Sign out error:', err);
+    }
+  };
 
    useEffect(() => {
   const unsubscribe = onAuthStateChanged(auth, async (user) => {
@@ -436,23 +453,6 @@ export const Login = () => {
   }
 };
 
-  // Add proper sign out handling
-  const handleSignOut = async () => {
-    try {
-      await auth.signOut();      
-      setUser(null);
-      setIsLoading(false);
-      setShowMfaEnrollment(false);
-      setShowMfaVerification(false);
-      setMfaResolver(null);
-      setIsWelcomeToastVisible(false);
-      setWelcomeToastType('success');
-      shouldShowWelcomeToastRef.current = false;
-    } catch (err) {
-      console.error('Sign out error:', err);
-    }
-  };
-
   // MFA handlers
   const handleMfaSuccess = () => {
     setShowMfaVerification(false);

package/app/routes/striae/striae.tsx

@@ -10,7 +10,7 @@ import { ExportConfirmationsModal } from '~/components/navbar/case-modals/export
 import { Toolbar } from '~/components/toolbar/toolbar';
 import { Canvas } from '~/components/canvas/canvas';
 import { Toast, type ToastType } from '~/components/toast/toast';
-import { getImageUrl, fetchFiles, deleteFile } from '~/components/actions/image-manage';
+import { getImageUrl, deleteFile } from '~/components/actions/image-manage';
 import { getNotes, saveNotes } from '~/components/actions/notes-manage';
 import { generatePDF } from '~/components/actions/generate-pdf';
 import { exportConfirmationData } from '~/components/actions/confirm-export';
@@ -20,9 +20,9 @@ import { NotesEditorModal } from '~/components/sidebar/notes/notes-editor-modal'
 import { UserAuditViewer } from '~/components/audit/user-audit-viewer';
 import { fetchUserApi } from '~/utils/api';
 import { type AnnotationData, type FileData, type ExportOptions } from '~/types';
-import { validateCaseNumber, renameCase, deleteCase, checkExistingCase, createNewCase, archiveCase, getCaseArchiveDetails } from '~/components/actions/case-manage';
+import { validateCaseNumber, renameCase, deleteCase, checkExistingCase, createNewCase, archiveCase, deriveCaseArchiveDetails } from '~/components/actions/case-manage';
 import { checkReadOnlyCaseExists, deleteReadOnlyCase } from '~/components/actions/case-review';
-import { canCreateCase, getCaseConfirmationSummary } from '~/utils/data';
+import { canCreateCase, getCaseConfirmationSummary, getCaseData, getConfirmationSummaryDocument, type UserConfirmationSummaryDocument } from '~/utils/data';
 import {
   resolveEarliestAnnotationTimestamp,
   CREATE_READ_ONLY_CASE_EXISTS_ERROR,
@@ -64,6 +64,7 @@ export const Striae = ({ user }: StriaePage) => {
   const [isUploading, setIsUploading] = useState(false);
   const [isReadOnlyCase, setIsReadOnlyCase] = useState(false);
   const [isReviewOnlyCase, setIsReviewOnlyCase] = useState(false);
+  const [initialConfirmationSummary, setInitialConfirmationSummary] = useState<UserConfirmationSummaryDocument | undefined>(undefined);
 
   // Annotation states
   const [activeAnnotations, setActiveAnnotations] = useState<Set<string>>(new Set());
@@ -189,41 +190,95 @@ export const Striae = ({ user }: StriaePage) => {
     setImageId(undefined);    
   };
 
-  // Check if current case is read-only when case changes
+  const showNotification = (
+    message: string,
+    type: ToastType = 'success',
+    duration = 4000
+  ) => {
+    setToastType(type);
+    setToastMessage(message);
+    setToastDuration(duration);
+    setShowToast(true);
+  };
+
+  const closeToast = () => {
+    setShowToast(false);
+  };
+
+  // Tracks whether the current case load was triggered by loadCaseIntoWorkspace.
+  // A ref (not state) so it can be read inside the metadata effect without
+  // becoming a dependency that would re-trigger the fetch on status changes.
+  const loadInitiatedRef = useRef(false);
+
+  // On case change: load case data, read-only status, archive details, and
+  // pre-fetch the confirmation summary — all in a single parallel batch to
+  // avoid redundant round-trips to the user and data workers.
   useEffect(() => {
-    const checkReadOnlyStatus = async () => {
+    let isCancelled = false;
+
+    const loadCaseMetadata = async () => {
       if (!currentCase || !user?.uid) {
         setIsReadOnlyCase(false);
         setIsReviewOnlyCase(false);
+        setArchiveDetails({ archived: false });
+        setFiles([]);
+        setInitialConfirmationSummary(undefined);
         return;
       }
 
       try {
         // Imported review cases are tracked in the user's read-only case list.
         // This includes archived ZIP imports and distinguishes them from manually archived regular cases.
-        const readOnlyCaseEntry = await checkReadOnlyCaseExists(user, currentCase);
-        const details = await getCaseArchiveDetails(user, currentCase);
+        // Individual .catch(() => null) guards prevent a single failing call from aborting the batch.
+        const [readOnlyCaseEntry, caseData, summaryDoc] = await Promise.all([
+          checkReadOnlyCaseExists(user, currentCase).catch(() => null),
+          getCaseData(user, currentCase, { skipValidation: true }).catch(() => null),
+          getConfirmationSummaryDocument(user).catch(() => null),
+        ]);
+
+        if (isCancelled) return;
+
         const reviewOnly = Boolean(readOnlyCaseEntry);
+        const details = deriveCaseArchiveDetails(caseData);
         setIsReviewOnlyCase(reviewOnly);
         setIsReadOnlyCase(reviewOnly || details.archived);
         setArchiveDetails(details);
+        setFiles(caseData?.files ?? []);
+        setInitialConfirmationSummary(summaryDoc ?? undefined);
+        // Only show toast for loads triggered via loadCaseIntoWorkspace.
+        // Direct setCurrentCase calls (e.g. case creation) handle their own notifications.
+        if (loadInitiatedRef.current) {
+          showNotification(`Case ${currentCase} loaded successfully.`, 'success');
+          loadInitiatedRef.current = false;
+        }
       } catch (error) {
-        console.error('Error checking read-only status:', error);
+        if (isCancelled) return;
+        console.error('Error loading case metadata:', error);
         setIsReadOnlyCase(false);
         setIsReviewOnlyCase(false);
         setArchiveDetails({ archived: false });
+        setFiles([]);
+        setInitialConfirmationSummary(undefined);
+        if (loadInitiatedRef.current) {
+          showNotification(`Failed to load case ${currentCase}. Please try again.`, 'error');
+          loadInitiatedRef.current = false;
+        }
       }
     };
 
-    checkReadOnlyStatus();
+    void loadCaseMetadata();
+    return () => {
+      isCancelled = true;
+    };
   }, [currentCase, user]);
 
-  // Disable box annotation mode when notes sidebar is opened
-  useEffect(() => {
-    if (showNotes && isBoxAnnotationMode) {
-      setIsBoxAnnotationMode(false);
-    }
-  }, [showNotes, isBoxAnnotationMode]);
+  // Derived early so downstream handlers (handleToolSelect) can reference them.
+  const hasLoadedImage = !!(selectedImage && selectedImage !== '/clear.jpg' && imageLoaded);
+  const isCurrentImageConfirmed = hasLoadedImage && !!annotationData?.confirmationData;
+  // Derive the effective notes open state — notes can only be open when an image is loaded.
+  const effectiveShowNotes = showNotes && hasLoadedImage;
+  // Box annotation mode is mutually exclusive with the notes panel being open.
+  const effectiveIsBoxAnnotationMode = isBoxAnnotationMode && !effectiveShowNotes;
 
   // Handler for toolbar annotation selection
   const handleToolSelect = (toolId: string, active: boolean) => {
@@ -240,7 +295,7 @@ export const Striae = ({ user }: StriaePage) => {
 
     // Handle box annotation mode (prevent when notes are open, read-only, or confirmed)
     if (toolId === 'box') {
-      setIsBoxAnnotationMode(active && !showNotes && !isReadOnlyCase && !annotationData?.confirmationData);
+      setIsBoxAnnotationMode(active && !effectiveShowNotes && !isReadOnlyCase && !annotationData?.confirmationData);
     }
   };
 
@@ -276,22 +331,6 @@ export const Striae = ({ user }: StriaePage) => {
     });
   };
 
-  const showNotification = (
-    message: string,
-    type: ToastType = 'success',
-    duration = 4000
-  ) => {
-    setToastType(type);
-    setToastMessage(message);
-    setToastDuration(duration);
-    setShowToast(true);
-  };
-
-  // Close toast notification
-  const closeToast = () => {
-    setShowToast(false);
-  };
-
   const handleExport = async (
     exportCaseNumber: string,
     designatedReviewerEmail?: string,
@@ -572,11 +611,14 @@ export const Striae = ({ user }: StriaePage) => {
   };
 
   const loadCaseIntoWorkspace = async (caseToLoad: string) => {
+    if (caseToLoad === currentCase) {
+      showNotification(`Case ${caseToLoad} is already loaded.`, 'success');
+      return;
+    }
+    loadInitiatedRef.current = true;
     setCurrentCase(caseToLoad);
     setShowNotes(false);
-    const loadedFiles = await fetchFiles(user, caseToLoad, { skipValidation: true });
-    setFiles(loadedFiles);
-    showNotification(`Case ${caseToLoad} loaded successfully.`, 'success');
+    showNotification(`Loading case ${caseToLoad}...`, 'loading', 0);
   };
 
   const handleOpenCaseSubmit = async (nextCaseNumber: string) => {
@@ -742,15 +784,6 @@ export const Striae = ({ user }: StriaePage) => {
   }
 };
 
-  const hasLoadedImage = !!(selectedImage && selectedImage !== '/clear.jpg' && imageLoaded);
-  const isCurrentImageConfirmed = hasLoadedImage && !!annotationData?.confirmationData;
-
-  useEffect(() => {
-    if (showNotes && !hasLoadedImage) {
-      setShowNotes(false);
-    }
-  }, [showNotes, hasLoadedImage]);
-
   // Automatic save handler for annotation updates
   const handleAnnotationUpdate = async (data: AnnotationData) => {
     if (annotationData?.confirmationData) {
@@ -871,6 +904,7 @@ export const Striae = ({ user }: StriaePage) => {
           confirmationSaveVersion={confirmationSaveVersion}
           isUploading={isUploading}
           onUploadStatusChange={setIsUploading}
+          initialConfirmationSummary={initialConfirmationSummary}
         />
         <main className={styles.mainContent}>
         <div className={styles.canvasArea}>
@@ -896,7 +930,7 @@ export const Striae = ({ user }: StriaePage) => {
             error={error ?? ''}
             activeAnnotations={activeAnnotations}
             annotationData={annotationData}
-            isBoxAnnotationMode={isBoxAnnotationMode}
+            isBoxAnnotationMode={effectiveIsBoxAnnotationMode}
             boxAnnotationColor={boxAnnotationColor}
             onAnnotationUpdate={handleAnnotationUpdate}
             isReadOnly={isReadOnlyCase}
@@ -923,6 +957,7 @@ export const Striae = ({ user }: StriaePage) => {
         currentCase={currentCase || ''}
         user={user}
         confirmationSaveVersion={confirmationSaveVersion}
+        initialConfirmationSummary={initialConfirmationSummary}
       />
       <FilesModal
         isOpen={isFilesModalOpen}
@@ -936,9 +971,10 @@ export const Striae = ({ user }: StriaePage) => {
         isReadOnly={isReadOnlyCase}
         selectedFileId={imageId}
         confirmationSaveVersion={confirmationSaveVersion}
+        initialConfirmationSummary={initialConfirmationSummary}
       />
       <NotesEditorModal
-        isOpen={showNotes}
+        isOpen={effectiveShowNotes}
         onClose={() => setShowNotes(false)}
         currentCase={currentCase}
         user={user}

package/app/utils/data/confirmation-summary/summary-core.ts

@@ -26,6 +26,12 @@ export interface UserConfirmationSummaryDocument {
 export interface ConfirmationSummaryEnsureOptions {
   forceRefresh?: boolean;
   maxAgeMs?: number;
+  /**
+   * Pre-fetched summary document to use instead of fetching from the data worker.
+   * Useful when the document has already been fetched in a parallel request, such as
+   * during initial case load, to avoid a redundant round-trip.
+   */
+  prefetchedSummary?: UserConfirmationSummaryDocument;
 }
 
 export interface ConfirmationSummaryTelemetry {

package/app/utils/data/operations/confirmation-summary-operations.ts

@@ -131,7 +131,9 @@ export const ensureCaseConfirmationSummary = async (
     throw new Error(`Access denied: ${accessCheck.reason}`);
   }
 
-  const summary = await getConfirmationSummaryDocument(user);
+  const summary = options.prefetchedSummary
+    ? structuredClone(options.prefetchedSummary)
+    : await getConfirmationSummaryDocument(user);
   const existingCase = summary.cases[caseNumber];
   const filesById: Record<string, FileConfirmationSummary> = existingCase ? { ...existingCase.filesById } : {};
   const fileIds = new Set(files.map((file) => file.id));

package/app/utils/data/permissions.ts

@@ -36,21 +36,43 @@ export interface NotesViewPermission {
   reason?: string;         // Reason if notes cannot be opened
 }
 
+const USER_DATA_CACHE_TTL_MS = 30_000;
+
+interface UserDataCacheEntry {
+  data: UserData | null;
+  expiresAt: number;
+}
+
+const userDataCache = new Map<string, UserDataCacheEntry>();
+
+function invalidateUserDataCache(uid: string): void {
+  userDataCache.delete(uid);
+}
+
 /**
- * Get user data from KV store
+ * Get user data from KV store, with a 30-second in-memory cache to avoid
+ * redundant round-trips across the many callers within a single case-load sequence.
  */
 export const getUserData = async (user: User): Promise<UserData | null> => {
+  const cached = userDataCache.get(user.uid);
+  if (cached && Date.now() < cached.expiresAt) {
+    return cached.data;
+  }
+
   try {
     const response = await fetchUserApi(user, `/${encodeURIComponent(user.uid)}`, {
       method: 'GET',
     });
 
     if (response.ok) {
-      return await response.json() as UserData;
+      const data = await response.json() as UserData;
+      userDataCache.set(user.uid, { data, expiresAt: Date.now() + USER_DATA_CACHE_TTL_MS });
+      return data;
     }
     
     if (response.status === 404) {
-      return null; // User not found
+      userDataCache.set(user.uid, { data: null, expiresAt: Date.now() + USER_DATA_CACHE_TTL_MS });
+      return null;
     }
 
     const responseBody = await response.text().catch(() => '');
@@ -142,6 +164,7 @@ export const createUser = async (
       throw new Error(`Failed to create user data: ${response.status} ${response.statusText}`);
     }
 
+    invalidateUserDataCache(user.uid);
     return userData;
   } catch (error) {
     console.error('Error creating user data:', error);
@@ -300,7 +323,9 @@ export const updateUserData = async (user: User, updates: Partial<UserData>): Pr
       throw new Error(`Failed to update user data: ${response.status} - ${errorText}`);
     }
 
-    return await response.json() as UserData;
+    const result = await response.json() as UserData;
+    invalidateUserDataCache(user.uid);
+    return result;
     
   } catch (error) {
     console.error('Error updating user data:', error);