@striae-org/striae 3.0.5 → 3.1.0

package/app/components/sidebar/case-export/case-export.tsx

@@ -1,10 +1,63 @@
 import { useState, useEffect, useContext } from 'react';
 import styles from './case-export.module.css';
+import config from '~/config/config.json';
 import { AuthContext } from '~/contexts/auth.context';
+import { getVerificationPublicKey } from '~/utils/signature-utils';
 import { getCaseConfirmations, exportConfirmationData } from '../../actions/confirm-export';
 
 export type ExportFormat = 'json' | 'csv';
 
+type ManifestSigningConfig = {
+  manifest_signing_key_id?: string;
+  manifest_signing_public_key?: string;
+  manifest_signing_public_keys?: Record<string, string>;
+};
+
+function getPublicSigningKeyDetails(): { keyId: string | null; publicKeyPem: string | null } {
+  const signingConfig = config as unknown as ManifestSigningConfig;
+  const configuredKeyId =
+    typeof signingConfig.manifest_signing_key_id === 'string' &&
+    signingConfig.manifest_signing_key_id.trim().length > 0
+      ? signingConfig.manifest_signing_key_id
+      : null;
+
+  if (configuredKeyId) {
+    return {
+      keyId: configuredKeyId,
+      publicKeyPem: getVerificationPublicKey(configuredKeyId)
+    };
+  }
+
+  const keyMap = signingConfig.manifest_signing_public_keys;
+  if (keyMap && typeof keyMap === 'object') {
+    const firstConfiguredEntry = Object.entries(keyMap).find(
+      ([, value]) => typeof value === 'string' && value.trim().length > 0
+    );
+
+    if (firstConfiguredEntry) {
+      return {
+        keyId: firstConfiguredEntry[0],
+        publicKeyPem: firstConfiguredEntry[1]
+      };
+    }
+  }
+
+  if (
+    typeof signingConfig.manifest_signing_public_key === 'string' &&
+    signingConfig.manifest_signing_public_key.trim().length > 0
+  ) {
+    return {
+      keyId: null,
+      publicKeyPem: signingConfig.manifest_signing_public_key
+    };
+  }
+
+  return {
+    keyId: null,
+    publicKeyPem: null
+  };
+}
+
 interface CaseExportProps {
   isOpen: boolean;
   onClose: () => void;
@@ -32,6 +85,10 @@ export const CaseExport = ({
   const [selectedFormat, setSelectedFormat] = useState<ExportFormat>('json');
   const [includeImages, setIncludeImages] = useState(false);
   const [hasConfirmationData, setHasConfirmationData] = useState(false);
+  const [isPublicKeyModalOpen, setIsPublicKeyModalOpen] = useState(false);
+  const [isCopyingPublicKey, setIsCopyingPublicKey] = useState(false);
+  const [publicKeyCopyMessage, setPublicKeyCopyMessage] = useState('');
+  const { keyId: publicSigningKeyId, publicKeyPem } = getPublicSigningKeyDetails();
 
   // Update caseNumber when currentCaseNumber prop changes
   useEffect(() => {
@@ -63,7 +120,7 @@ export const CaseExport = ({
     };
 
     checkConfirmationData();
-  }, [isReadOnly, user?.uid, caseNumber]);
+  }, [isReadOnly, user, caseNumber]);
 
   // Additional useEffect to check when modal opens
   useEffect(() => {
@@ -80,7 +137,7 @@ export const CaseExport = ({
       };
       checkOnOpen();
     }
-  }, [isOpen, isReadOnly, user?.uid, caseNumber]);
+  }, [isOpen, isReadOnly, user, caseNumber]);
 
   // Force JSON format and disable images for read-only cases
   useEffect(() => {
@@ -90,10 +147,28 @@ export const CaseExport = ({
     }
   }, [isReadOnly]);
 
+  useEffect(() => {
+    if (!isOpen) {
+      setIsPublicKeyModalOpen(false);
+    }
+  }, [isOpen]);
+
+  useEffect(() => {
+    if (!isPublicKeyModalOpen) {
+      setIsCopyingPublicKey(false);
+      setPublicKeyCopyMessage('');
+    }
+  }, [isPublicKeyModalOpen]);
+
   // Handle Escape key to close modal
   useEffect(() => {
     const handleEscapeKey = (event: KeyboardEvent) => {
       if (event.key === 'Escape' && isOpen) {
+        if (isPublicKeyModalOpen) {
+          setIsPublicKeyModalOpen(false);
+          return;
+        }
+
         onClose();
       }
     };
@@ -105,7 +180,7 @@ export const CaseExport = ({
     return () => {
       document.removeEventListener('keydown', handleEscapeKey);
     };
-  }, [isOpen, onClose]);
+  }, [isOpen, isPublicKeyModalOpen, onClose]);
 
   if (!isOpen) return null;
 
@@ -169,14 +244,107 @@ export const CaseExport = ({
     }
   };
 
-  const handleOverlayClick = (e: React.MouseEvent) => {
+  const handleOverlayMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {
     if (e.target === e.currentTarget) {
       onClose();
     }
   };
 
+  const handleOverlayKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
+    if (e.target !== e.currentTarget) {
+      return;
+    }
+
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      onClose();
+    }
+  };
+
+  const handlePublicKeyOverlayMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {
+    if (e.target === e.currentTarget) {
+      setIsPublicKeyModalOpen(false);
+    }
+  };
+
+  const handlePublicKeyOverlayKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
+    if (e.target !== e.currentTarget) {
+      return;
+    }
+
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      setIsPublicKeyModalOpen(false);
+    }
+  };
+
+  const copyTextWithExecCommand = (text: string): boolean => {
+    const tempTextarea = document.createElement('textarea');
+    tempTextarea.value = text;
+    tempTextarea.setAttribute('readonly', '');
+    tempTextarea.style.position = 'fixed';
+    tempTextarea.style.opacity = '0';
+    tempTextarea.style.pointerEvents = 'none';
+
+    document.body.appendChild(tempTextarea);
+    tempTextarea.select();
+
+    let copied = false;
+    try {
+      copied = document.execCommand('copy');
+    } finally {
+      document.body.removeChild(tempTextarea);
+    }
+
+    return copied;
+  };
+
+  const handleCopyPublicKey = async () => {
+    if (!publicKeyPem) {
+      setPublicKeyCopyMessage('No public signing key is configured for this environment.');
+      return;
+    }
+
+    setIsCopyingPublicKey(true);
+    setPublicKeyCopyMessage('');
+
+    try {
+      if (navigator.clipboard && typeof navigator.clipboard.writeText === 'function') {
+        await navigator.clipboard.writeText(publicKeyPem);
+        setPublicKeyCopyMessage('Public key copied to clipboard.');
+      } else {
+        const copied = copyTextWithExecCommand(publicKeyPem);
+        setPublicKeyCopyMessage(
+          copied
+            ? 'Public key copied to clipboard.'
+            : 'Copy failed. Select and copy the key manually.'
+        );
+      }
+    } catch (copyError) {
+      const copied = copyTextWithExecCommand(publicKeyPem);
+      setPublicKeyCopyMessage(
+        copied
+          ? 'Public key copied to clipboard.'
+          : 'Copy failed. Select and copy the key manually.'
+      );
+
+      if (!copied) {
+        console.error('Failed to copy public signing key:', copyError);
+      }
+    } finally {
+      setIsCopyingPublicKey(false);
+    }
+  };
+
   return (
-    <div className={styles.overlay} onClick={handleOverlayClick}>
+    <div
+      className={styles.overlay}
+      onMouseDown={handleOverlayMouseDown}
+      onKeyDown={handleOverlayKeyDown}
+      role="button"
+      tabIndex={0}
+      aria-label="Close case export dialog"
+    >
       <div className={styles.modal}>
         <div className={styles.header}>
           <h2 className={styles.title}>Export Case Data</h2>
@@ -234,21 +402,23 @@ export const CaseExport = ({
 
             {/* 3. Image inclusion option - disabled for read-only cases */}
             <div className={styles.imageOption}>
-              <label className={styles.checkboxLabel}>
+              <div className={styles.checkboxLabel}>
                 <input
+                  id="includeImagesOption"
                   type="checkbox"
                   className={styles.checkbox}
                   checked={includeImages}
                   onChange={(e) => setIncludeImages(e.target.checked)}
                   disabled={!caseNumber.trim() || isExporting || isExportingAll || isReadOnly}
+                  aria-label="Include images in ZIP export"
                 />
-                <div className={styles.checkboxText}>
+                <label htmlFor="includeImagesOption" className={styles.checkboxText}>
                   <span>Include Images (ZIP)</span>
-                  <p className={styles.checkboxTooltip}>
+                  <span className={styles.checkboxTooltip}>
                     Available for single case exports only. Downloads a ZIP file containing data and all associated image files. Case imports support only JSON data format.
-                  </p>
-                </div>
-              </label>
+                  </span>
+                </label>
+              </div>
             </div>
             
             {/* 4. Export buttons (case OR all cases) */}
@@ -281,6 +451,20 @@ export const CaseExport = ({
                 </div>
               </>
             )}
+
+            <div className={styles.divider}>
+              <span>Verification</span>
+            </div>
+
+            <div className={styles.publicKeySection}>
+              <button
+                type="button"
+                className={styles.publicKeyButton}
+                onClick={() => setIsPublicKeyModalOpen(true)}
+              >
+                View Public Signing Key
+              </button>
+            </div>
             
             {exportProgress && exportProgress.total > 0 && (
               <div className={styles.progressSection}>
@@ -312,6 +496,102 @@ export const CaseExport = ({
           </div>
         </div>
       </div>
+
+      {isPublicKeyModalOpen && (
+        <div
+          className={styles.publicKeyOverlay}
+          onMouseDown={handlePublicKeyOverlayMouseDown}
+          onKeyDown={handlePublicKeyOverlayKeyDown}
+          role="button"
+          tabIndex={0}
+          aria-label="Close public signing key dialog"
+        >
+          <div
+            className={styles.publicKeyModal}
+            role="dialog"
+            aria-modal="true"
+            aria-labelledby="publicSigningKeyTitle"
+          >
+            <div className={styles.publicKeyHeader}>
+              <h3 id="publicSigningKeyTitle" className={styles.publicKeyTitle}>
+                Striae Public Signing Key
+              </h3>
+              <button
+                type="button"
+                className={styles.closeButton}
+                onClick={() => setIsPublicKeyModalOpen(false)}
+                aria-label="Close public signing key dialog"
+              >
+                ×
+              </button>
+            </div>
+
+            <div className={styles.publicKeyContent}>
+              <p className={styles.publicKeyDescription}>
+                This key verifies digital signatures attached to Striae exports. It is safe to share for
+                independent verification.
+              </p>
+
+              {publicSigningKeyId && (
+                <p className={styles.publicKeyMeta}>
+                  Key ID: <span>{publicSigningKeyId}</span>
+                </p>
+              )}
+
+              <label htmlFor="publicSigningKey" className={styles.publicKeyLabel}>
+                Public signing key (PEM)
+              </label>
+              <textarea
+                id="publicSigningKey"
+                className={styles.publicKeyField}
+                value={publicKeyPem || 'No public signing key is configured for this environment.'}
+                readOnly
+                rows={10}
+              />
+
+              <p className={styles.publicKeyHowToTitle}>How to verify Striae exports</p>
+              <ol className={styles.publicKeyHowToList}>
+                <li>
+                  Locate signature metadata in the export (for case ZIP exports, see FORENSIC_MANIFEST.json;
+                  for confirmation exports, see metadata.signature).
+                </li>
+                <li>
+                  Use this public key with your signature verification workflow (for example OpenSSL or an
+                  internal verifier) to validate the signed payload.
+                </li>
+                <li>
+                  Trust the export only when signature verification succeeds and the key ID matches the export
+                  metadata.
+                </li>
+              </ol>
+
+              {publicKeyCopyMessage && (
+                <p className={styles.publicKeyStatus} role="status" aria-live="polite">
+                  {publicKeyCopyMessage}
+                </p>
+              )}
+
+              <div className={styles.publicKeyActions}>
+                <button
+                  type="button"
+                  className={styles.publicKeyCopyButton}
+                  onClick={handleCopyPublicKey}
+                  disabled={isCopyingPublicKey || !publicKeyPem}
+                >
+                  {isCopyingPublicKey ? 'Copying...' : 'Copy Key'}
+                </button>
+                <button
+                  type="button"
+                  className={styles.publicKeyCloseButton}
+                  onClick={() => setIsPublicKeyModalOpen(false)}
+                >
+                  Close
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   );
 };

package/app/components/sidebar/case-import/case-import.module.css

@@ -6,6 +6,7 @@
   justify-content: center;
   align-items: center;
   z-index: var(--zIndex5);
+  cursor: default;
   transition: background-color var(--durationM) var(--bezierFastoutSlowin);
 }
 
@@ -15,10 +16,12 @@
   width: 90%;
   max-width: 600px;
   max-height: 95vh;
-  box-shadow: 0 var(--spaceXS) var(--spaceL) color-mix(in lab, var(--black) 10%, transparent);
+  box-shadow: 0 var(--spaceXS) var(--spaceL)
+    color-mix(in lab, var(--black) 10%, transparent);
   transition: background-color var(--durationM) var(--bezierFastoutSlowin);
   display: flex;
   flex-direction: column;
+  cursor: default;
 }
 
 .header {
@@ -337,7 +340,7 @@
   box-shadow: 0 1px 3px color-mix(in lab, var(--error) 30%, transparent);
 }
 
-.cancelButton:hover:not(:disabled) {  
+.cancelButton:hover:not(:disabled) {
   background: color-mix(in lab, var(--error) 80%, white);
   border-color: color-mix(in lab, var(--error) 60%, transparent);
   box-shadow: 0 2px 6px color-mix(in lab, var(--error) 40%, transparent);
@@ -525,7 +528,8 @@
   border-radius: var(--spaceXS);
   width: 90%;
   max-width: 400px;
-  box-shadow: 0 var(--spaceM) var(--spaceXL) color-mix(in lab, var(--black) 20%, transparent);
+  box-shadow: 0 var(--spaceM) var(--spaceXL)
+    color-mix(in lab, var(--black) 20%, transparent);
 }
 
 .confirmationContent {
@@ -610,7 +614,7 @@
   transition: all var(--durationS) var(--bezierFastoutSlowin);
 }
 
-.confirmButton:hover {  
+.confirmButton:hover {
   box-shadow: 0 2px 6px color-mix(in lab, var(--primary) 30%, transparent);
 }
 
@@ -623,4 +627,4 @@
   margin-top: var(--spaceM);
   font-size: var(--fontSizeBodyS);
   font-weight: var(--fontWeightMedium);
-}
+}

package/app/components/sidebar/case-import/case-import.tsx

@@ -53,10 +53,9 @@ export const CaseImport = ({
   const [existingReadOnlyCase, setExistingReadOnlyCase] = useState<string | null>(null);
   const fileInputRef = useRef<HTMLInputElement>(null);
   
-  // Clear import data helper
-  const clearImportData = useCallback(() => {
+  // Clear import selection state (used by preview hook on validation failure)
+  const clearImportSelection = useCallback(() => {
     updateImportState({ selectedFile: null, importType: null });
-    clearPreviews();
     resetFileInput(fileInputRef);
   }, [updateImportState]);
 
@@ -71,9 +70,15 @@ export const CaseImport = ({
     user,
     setError,
     (loading) => updateImportState({ isLoadingPreview: loading }),
-    clearImportData
+    clearImportSelection
   );
 
+  // Clear import data helper used by UI actions.
+  const clearImportData = useCallback(() => {
+    clearImportSelection();
+    clearPreviews();
+  }, [clearImportSelection, clearPreviews]);
+
   // Import execution hook
   const { executeImport } = useImportExecution({
     user,
@@ -212,12 +217,23 @@ export const CaseImport = ({
     onClose();
   }, [clearImportData, onClose]);
 
-  const handleOverlayClick = useCallback((e: React.MouseEvent) => {
+  const handleOverlayMouseDown = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
     if (e.target === e.currentTarget && !importState.isImporting && !importState.isClearing) {
       onClose();
     }
   }, [importState.isImporting, importState.isClearing, onClose]);
 
+  const handleOverlayKeyDown = useCallback((e: React.KeyboardEvent<HTMLDivElement>) => {
+    if (e.target !== e.currentTarget || importState.isImporting || importState.isClearing) {
+      return;
+    }
+
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      onClose();
+    }
+  }, [importState.isImporting, importState.isClearing, onClose]);
+
   // Effects
   useEffect(() => {
     if (user && isOpen) {
@@ -259,8 +275,15 @@ export const CaseImport = ({
 
   return (
     <>
-      <div className={styles.overlay} onClick={handleOverlayClick}>
-      <div className={styles.modal}>
+      <div
+        className={styles.overlay}
+        onMouseDown={handleOverlayMouseDown}
+        onKeyDown={handleOverlayKeyDown}
+        role="button"
+        tabIndex={0}
+        aria-label="Close case import dialog"
+      >
+        <div className={styles.modal}>
         <div className={styles.header}>
           <h2 className={styles.title}>Import RO Case or Confirmations</h2>
           <button 

package/app/components/sidebar/case-import/components/CasePreviewSection.tsx

@@ -59,9 +59,9 @@ export const CasePreviewSection = ({ casePreview, isLoadingPreview }: CasePrevie
           <div className={styles.validationItem}>            
             <span className={`${styles.validationValue} ${casePreview.hashValid ? styles.validationSuccess : styles.validationError}`}>
               {casePreview.hashValid ? (
-                <>✓ Verified (SHA-256: {casePreview.expectedHash})</>
+                <>✓ Validation passed</>
               ) : (
-                <>✗ FAILED - {casePreview.hashError}</>
+                <>✗ Validation failed</>
               )}
             </span>
           </div>

package/app/components/sidebar/case-import/components/ConfirmationDialog.tsx

@@ -17,7 +17,7 @@ export const ConfirmationDialog = ({
   if (!showConfirmation || !casePreview) return null;
 
   return (
-    <div className={styles.confirmationOverlay} onClick={(e) => e.stopPropagation()}>
+    <div className={styles.confirmationOverlay}>
       <div className={styles.confirmationModal}>
         <div className={styles.confirmationContent}>
           <h3 className={styles.confirmationTitle}>Confirm Case Import</h3>

package/app/components/sidebar/case-import/components/ExistingCaseSection.tsx

@@ -20,7 +20,7 @@ export const ExistingCaseSection = ({
   return (
     <div className={styles.warningSection}>
       <div className={styles.warningText}>
-        <strong>Current Review Case:</strong> "{existingReadOnlyCase}"
+        <strong>Current Review Case:</strong> &quot;{existingReadOnlyCase}&quot;
         <p className={styles.warningSubtext}>
           {selectedFile 
             ? 'Importing a new case will automatically replace the existing one.'

package/app/components/sidebar/case-import/hooks/useFilePreview.ts

@@ -4,6 +4,11 @@ import { previewCaseImport } from '~/components/actions/case-review';
 import { CaseImportPreview } from '~/types';
 import { ConfirmationPreview } from '../components/ConfirmationPreviewSection';
 
+type UnknownRecord = Record<string, unknown>;
+
+const isRecord = (value: unknown): value is UnknownRecord =>
+  typeof value === 'object' && value !== null && !Array.isArray(value);
+
 interface UseFilePreviewReturn {
   casePreview: CaseImportPreview | null;
   confirmationPreview: ConfirmationPreview | null;
@@ -52,15 +57,22 @@ export const useFilePreview = (
     setIsLoadingPreview(true);
     try {
       const text = await file.text();
-      const data = JSON.parse(text);
+      const parsed = JSON.parse(text) as unknown;
+
+      if (!isRecord(parsed)) {
+        throw new Error('Invalid confirmation data format');
+      }
+
+      const metadata = isRecord(parsed.metadata) ? parsed.metadata : undefined;
+      const confirmations = isRecord(parsed.confirmations) ? parsed.confirmations : undefined;
       
       // Extract confirmation IDs from the confirmations object
       const confirmationIds: string[] = [];
-      if (data.confirmations) {
-        Object.values(data.confirmations).forEach((imageConfirmations: any) => {
+      if (confirmations) {
+        Object.values(confirmations).forEach((imageConfirmations) => {
           if (Array.isArray(imageConfirmations)) {
-            imageConfirmations.forEach((confirmation: any) => {
-              if (confirmation.confirmationId) {
+            imageConfirmations.forEach((confirmation) => {
+              if (isRecord(confirmation) && typeof confirmation.confirmationId === 'string') {
                 confirmationIds.push(confirmation.confirmationId);
               }
             });
@@ -68,11 +80,24 @@ export const useFilePreview = (
         });
       }
 
+      const caseNumber =
+        metadata && typeof metadata.caseNumber === 'string' ? metadata.caseNumber : 'Unknown';
+      const fullName =
+        metadata && typeof metadata.exportedByName === 'string' ? metadata.exportedByName : 'Unknown';
+      const exportDate =
+        metadata && typeof metadata.exportDate === 'string'
+          ? metadata.exportDate
+          : new Date().toISOString();
+      const totalConfirmations =
+        metadata && typeof metadata.totalConfirmations === 'number'
+          ? metadata.totalConfirmations
+          : confirmationIds.length;
+
       const preview: ConfirmationPreview = {
-        caseNumber: data.metadata?.caseNumber || 'Unknown',
-        fullName: data.metadata?.exportedByName || 'Unknown',
-        exportDate: data.metadata?.exportDate || new Date().toISOString(),
-        totalConfirmations: data.metadata?.totalConfirmations || confirmationIds.length,
+        caseNumber,
+        fullName,
+        exportDate,
+        totalConfirmations,
         confirmationIds
       };
       

package/app/components/sidebar/cases/case-sidebar.tsx

@@ -96,7 +96,7 @@ export const CaseSidebar = ({
   const [isRenaming, setIsRenaming] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
   const [isModalOpen, setIsModalOpen] = useState(false);
-  const [fileError, setFileError] = useState('');
+  const [, setFileError] = useState('');
   const [newCaseName, setNewCaseName] = useState('');
   const [showCaseActions, setShowCaseActions] = useState(false);
   const [canCreateNewCase, setCanCreateNewCase] = useState(true);
@@ -137,13 +137,8 @@ export const CaseSidebar = ({
     };
   }, [files]);
 
-  // Check user permissions on mount and when user changes
-  useEffect(() => {
-    checkUserPermissions();
-  }, [user]);
-
   // Function to check user permissions (extracted for reuse)
-  const checkUserPermissions = async () => {
+  const checkUserPermissions = useCallback(async () => {
     setPermissionChecking(true);
     try {
       const casePermission = await canCreateCase(user);
@@ -164,10 +159,10 @@ export const CaseSidebar = ({
     } finally {
       setPermissionChecking(false);
     }
-  };
+  }, [user]);
 
   // Function to check file upload permissions (extracted for reuse)
-  const checkFileUploadPermissions = async (fileCount?: number) => {
+  const checkFileUploadPermissions = useCallback(async (fileCount?: number) => {
     if (currentCase) {
       try {
         // Use provided fileCount or fall back to current files.length
@@ -184,12 +179,17 @@ export const CaseSidebar = ({
       setCanUploadNewFile(true);
       setUploadFileError('');
     }
-  };
+  }, [currentCase, files.length, user]);
+
+  // Check user permissions on mount and when user changes
+  useEffect(() => {
+    checkUserPermissions();
+  }, [checkUserPermissions]);
 
   // Check file upload permissions when currentCase or files change
   useEffect(() => {
     checkFileUploadPermissions();
-  }, [user, currentCase, files.length]);
+  }, [checkFileUploadPermissions]);
    
   useEffect(() => {
     if (currentCase) {
@@ -267,7 +267,7 @@ export const CaseSidebar = ({
     return () => {
       isCancelled = true;
     };
-  }, [currentCase, fileIdsKey, user, calculateCaseConfirmationStatus]);
+  }, [currentCase, fileIdsKey, user, files, calculateCaseConfirmationStatus]);
 
   // Refresh only selected file confirmation status after confirmation-related data is persisted
   useEffect(() => {
@@ -308,7 +308,7 @@ export const CaseSidebar = ({
     return () => {
       isCancelled = true;
     };
-  }, [currentCase, fileIdsKey, user, selectedFileId, confirmationSaveVersion, calculateCaseConfirmationStatus]);
+  }, [currentCase, fileIdsKey, user, selectedFileId, confirmationSaveVersion, files.length, calculateCaseConfirmationStatus]);
   
   const handleCase = async () => {
     setIsLoading(true);