@striae-org/striae 4.3.4 → 5.0.0

package/app/components/actions/case-manage.ts

@@ -22,7 +22,9 @@ import { getImageUrl } from './image-manage';
 import {
   calculateSHA256Secure,
   createPublicSigningKeyFileName,
+  encryptExportDataWithAllImages,
   generateForensicManifestSecure,
+  getCurrentEncryptionPublicKeyDetails,
   getCurrentPublicSigningKeyDetails,
   getVerificationPublicKey,
 } from '~/utils/forensics';
@@ -897,8 +899,64 @@ export const archiveCase = async (
       auditTrail,
     };
 
-    zip.file('audit/case-audit-trail.json', JSON.stringify(signedAuditTrail, null, 2));
-    zip.file('audit/case-audit-signature.json', JSON.stringify(signedAuditExportPayload, null, 2));
+    const auditTrailJson = JSON.stringify(signedAuditTrail, null, 2);
+    const auditSignatureJson = JSON.stringify(signedAuditExportPayload, null, 2);
+    zip.file('audit/case-audit-trail.json', auditTrailJson);
+    zip.file('audit/case-audit-signature.json', auditSignatureJson);
+
+    const encryptionKeyDetails = getCurrentEncryptionPublicKeyDetails();
+
+    if (!encryptionKeyDetails.publicKeyPem || !encryptionKeyDetails.keyId) {
+      throw new Error(
+        'Archive encryption is mandatory. Your Striae instance does not have a configured encryption public key. ' +
+        'Please contact your administrator to set up export encryption.'
+      );
+    }
+
+    try {
+      const filesToEncrypt: Array<{ filename: string; blob: Blob }> = [
+        ...Object.entries(imageBlobs).map(([filename, blob]) => ({
+          filename,
+          blob
+        })),
+        {
+          filename: 'audit/case-audit-trail.json',
+          blob: new Blob([auditTrailJson], { type: 'application/json' })
+        },
+        {
+          filename: 'audit/case-audit-signature.json',
+          blob: new Blob([auditSignatureJson], { type: 'application/json' })
+        }
+      ];
+
+      const encryptionResult = await encryptExportDataWithAllImages(
+        caseJsonContent,
+        filesToEncrypt,
+        encryptionKeyDetails.publicKeyPem,
+        encryptionKeyDetails.keyId
+      );
+
+      zip.file(`${caseNumber}_data.json`, encryptionResult.ciphertext);
+
+      for (let index = 0; index < filesToEncrypt.length; index += 1) {
+        const originalFilename = filesToEncrypt[index].filename;
+        const encryptedContent = encryptionResult.encryptedImages[index];
+
+        if (originalFilename.startsWith('audit/')) {
+          zip.file(originalFilename, encryptedContent);
+          continue;
+        }
+
+        if (imageFolder) {
+          imageFolder.file(originalFilename, encryptedContent);
+        }
+      }
+
+      zip.file('ENCRYPTION_MANIFEST.json', JSON.stringify(encryptionResult.encryptionManifest, null, 2));
+    } catch (error) {
+      console.error('Archive encryption failed:', error);
+      throw new Error(`Failed to encrypt archive package: ${error instanceof Error ? error.message : 'Unknown error'}`);
+    }
 
     zip.file(
       'README.txt',
@@ -913,12 +971,14 @@ export const archiveCase = async (
         '',
         'Package Contents',
         '- Case data JSON export with all image references',
-        '- images/ folder with exported image files',
+        '- images/ folder with exported image files (encrypted)',
         '- Full case audit trail export and signed audit metadata',
         '- Forensic manifest with server-side signature',
+        '- ENCRYPTION_MANIFEST.json with encryption metadata and encrypted image hashes',
         `- ${publicKeyFileName} for verification`,
         '',
         'This package is intended for read-only review and verification workflows.',
+        'This package is encrypted. Only Striae can decrypt and re-import it.',
       ].join('\n')
     );
 
@@ -950,7 +1010,7 @@ export const archiveCase = async (
     );
 
     const downloadUrl = URL.createObjectURL(zipBlob);
-    const archiveFileName = `striae-case-${caseNumber}-archive-${formatDateForFilename(new Date())}.zip`;
+    const archiveFileName = `striae-case-${caseNumber}-archive-${formatDateForFilename(new Date())}-encrypted.zip`;
     const anchor = document.createElement('a');
     anchor.href = downloadUrl;
     anchor.download = archiveFileName;

package/app/components/actions/confirm-export.ts

@@ -3,7 +3,9 @@ import {
   calculateSHA256Secure,
   createPublicSigningKeyFileName,
   getCurrentPublicSigningKeyDetails,
-  getVerificationPublicKey
+  getVerificationPublicKey,
+  getCurrentEncryptionPublicKeyDetails,
+  encryptExportDataWithAllImages
 } from '~/utils/forensics';
 import { getUserData, getCaseData, updateCaseData, signConfirmationData, upsertFileConfirmationSummary } from '~/utils/data';
 import { type AnnotationData, type ConfirmationData, type CaseConfirmations, type CaseDataWithConfirmations, type ConfirmationImportData } from '~/types';
@@ -318,8 +320,35 @@ export async function exportConfirmationData(
     const zip = new JSZip();
     const normalizedPem = publicKeyPem.endsWith('\n') ? publicKeyPem : `${publicKeyPem}\n`;
 
-    zip.file(confirmationFileName, finalJsonString);
+    const encKeyDetails = getCurrentEncryptionPublicKeyDetails();
+    if (!encKeyDetails.publicKeyPem || !encKeyDetails.keyId) {
+      throw new Error(
+        'Confirmation export encryption is mandatory. Your Striae instance does not have a configured encryption public key. ' +
+        'Please contact your administrator to set up export encryption.'
+      );
+    }
+
+    let encryptedConfirmationContent: string | Uint8Array;
+    let encryptionManifestJson: string;
+
+    try {
+      const encryptionResult = await encryptExportDataWithAllImages(
+        finalJsonString,
+        [],
+        encKeyDetails.publicKeyPem,
+        encKeyDetails.keyId
+      );
+
+      encryptedConfirmationContent = encryptionResult.ciphertext;
+      encryptionManifestJson = JSON.stringify(encryptionResult.encryptionManifest, null, 2);
+    } catch (error) {
+      console.error('Confirmation export encryption failed:', error);
+      throw new Error(`Failed to encrypt confirmation export: ${error instanceof Error ? error.message : 'Unknown error'}`);
+    }
+
+    zip.file(confirmationFileName, encryptedConfirmationContent);
     zip.file(publicKeyFileName, normalizedPem);
+    zip.file('ENCRYPTION_MANIFEST.json', encryptionManifestJson);
 
     const zipBlob = await zip.generateAsync({
       type: 'blob',
@@ -327,7 +356,7 @@ export async function exportConfirmationData(
       compressionOptions: { level: 6 }
     });
 
-    const exportFileName = `confirmation-export-${caseNumber}-${timestampString}.zip`;
+    const exportFileName = `confirmation-export-${caseNumber}-${timestampString}-encrypted.zip`;
 
     // Create download
     const url = URL.createObjectURL(zipBlob);

package/app/components/navbar/navbar.module.css

@@ -374,16 +374,6 @@
   background: color-mix(in lab, #6c757d 21%, #ffffff);
 }
 
-.caseMenuItemKey {
-  background: color-mix(in lab, #0d9488 14%, #ffffff);
-  color: #0f766e;
-  border-color: color-mix(in lab, #0d9488 28%, transparent);
-}
-
-.caseMenuItemKey:hover {
-  background: color-mix(in lab, #0d9488 20%, #ffffff);
-}
-
 .caseMenuItemClearRO {
   background: color-mix(in lab, #fd7e14 16%, #ffffff);
   color: #7c3f00;

package/app/components/navbar/navbar.tsx

@@ -3,8 +3,6 @@ import styles from './navbar.module.css';
 import { SignOut } from '../actions/signout';
 import { ManageProfile } from '../user/manage-profile';
 import { CaseImport } from '../sidebar/case-import/case-import';
-import { PublicSigningKeyModal } from '~/components/public-signing-key-modal/public-signing-key-modal';
-import { getCurrentPublicSigningKeyDetails } from '~/utils/forensics';
 import { AuthContext } from '~/contexts/auth.context';
 import { getUserData } from '~/utils/data';
 import { type ImportResult, type ConfirmationImportResult } from '~/types';
@@ -68,10 +66,8 @@ export const Navbar = ({
   const [userBadgeId, setUserBadgeId] = useState<string>('');
   const [isProfileModalOpen, setIsProfileModalOpen] = useState(false);
   const [isImportModalOpen, setIsImportModalOpen] = useState(false);
-  const [isPublicKeyModalOpen, setIsPublicKeyModalOpen] = useState(false);
   const [isCaseMenuOpen, setIsCaseMenuOpen] = useState(false);
   const [isFileMenuOpen, setIsFileMenuOpen] = useState(false);
-  const { keyId: publicSigningKeyId, publicKeyPem } = getCurrentPublicSigningKeyDetails();
   const caseMenuRef = useRef<HTMLDivElement>(null);
   const fileMenuRef = useRef<HTMLDivElement>(null);
 
@@ -292,18 +288,6 @@ export const Navbar = ({
                     Archive Case
                   </button>
                 )}
-                <div className={styles.caseMenuSectionLabel}>Verification</div>
-                <button
-                  type="button"
-                  role="menuitem"
-                  className={`${styles.caseMenuItem} ${styles.caseMenuItemKey}`}
-                  onClick={() => {
-                    setIsPublicKeyModalOpen(true);
-                    setIsCaseMenuOpen(false);
-                  }}
-                >
-                  Verify Exports
-                </button>
                 {currentCase && (
                   <div className={styles.caseMenuCaption}>Case: {currentCase}</div>
                 )}
@@ -423,12 +407,6 @@ export const Navbar = ({
         isOpen={isProfileModalOpen}
         onClose={() => setIsProfileModalOpen(false)}
       />
-      <PublicSigningKeyModal
-        isOpen={isPublicKeyModalOpen}
-        onClose={() => setIsPublicKeyModalOpen(false)}
-        publicSigningKeyId={publicSigningKeyId}
-        publicKeyPem={publicKeyPem}
-      />
     </>
   );
 };

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

@@ -425,6 +425,13 @@
   color: var(--textTitle);
 }
 
+.previewMessage {
+  margin: 0;
+  color: var(--textBody);
+  font-size: var(--fontSizeBodyS);
+  line-height: 1.5;
+}
+
 .archivedImportNote {
   margin-bottom: var(--spaceM);
   padding: var(--spaceS) var(--spaceM);
@@ -447,62 +454,6 @@
   font-weight: var(--fontWeightMedium);
 }
 
-/* Validation Section - Green/Red Based on Status */
-.validationSection {
-  border-radius: var(--spaceXS);
-  padding: var(--spaceM);
-  margin: var(--spaceM) 0;
-  background: color-mix(in lab, var(--primary) 5%, transparent);
-  border: 1px solid color-mix(in lab, var(--primary) 15%, transparent);
-}
-
-.validationSectionValid {
-  background: color-mix(in lab, var(--success) 8%, transparent) !important;
-  border: 2px solid color-mix(in lab, var(--success) 25%, transparent) !important;
-  box-shadow: 0 2px 6px color-mix(in lab, var(--success) 12%, transparent) !important;
-}
-
-.validationSectionInvalid {
-  background: color-mix(in lab, var(--error) 8%, transparent) !important;
-  border: 2px solid color-mix(in lab, var(--error) 25%, transparent) !important;
-  box-shadow: 0 2px 6px color-mix(in lab, var(--error) 12%, transparent) !important;
-}
-
-.validationTitle {
-  margin: 0 0 var(--spaceM) 0;
-  font-size: var(--fontSizeBodyM);
-  font-weight: var(--fontWeightMedium);
-  color: var(--textTitle);
-}
-
-.validationItem {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: var(--spaceXS) 0;
-  font-size: var(--fontSizeBodyS);
-}
-
-.validationLabel {
-  font-weight: var(--fontWeightMedium);
-  color: var(--textTitle);
-}
-
-.validationValue {
-  font-family: var(--fontMono);
-  font-size: var(--fontSizeBodyXS);
-}
-
-.validationSuccess {
-  color: var(--success);
-  font-weight: var(--fontWeightMedium);
-}
-
-.validationError {
-  color: var(--error);
-  font-weight: var(--fontWeightMedium);
-}
-
 .previewLoading {
   text-align: center;
   color: var(--textLight);
@@ -510,31 +461,6 @@
   padding: var(--spaceM);
 }
 
-.previewGrid {
-  display: grid;
-  gap: var(--spaceS);
-}
-
-.previewItem {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: var(--spaceXS) 0;
-}
-
-.previewLabel {
-  font-weight: var(--fontWeightMedium);
-  color: var(--textBody);
-  font-size: var(--fontSizeBodyS);
-}
-
-.previewValue {
-  color: var(--textTitle);
-  font-size: var(--fontSizeBodyS);
-  text-align: right;
-  font-weight: var(--fontWeightMedium);
-}
-
 /* Confirmation Dialog */
 .confirmationOverlay {
   position: fixed;
@@ -582,45 +508,6 @@
   margin: 0 0 var(--spaceL) 0;
 }
 
-.confirmationItem {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: var(--spaceXS) 0;
-  font-size: var(--fontSizeBodyS);
-}
-
-.confirmationItem:not(:last-child) {
-  border-bottom: 1px solid color-mix(in lab, var(--text) 5%, transparent);
-}
-
-.confirmationItemValid {
-  background: color-mix(in lab, var(--success) 15%, transparent);
-  border-radius: var(--spaceXS);
-  padding: var(--spaceS) var(--spaceM);
-  margin: var(--spaceXS) calc(-1 * var(--spaceM));
-  border: 2px solid color-mix(in lab, var(--success) 35%, transparent);
-  box-shadow: 0 2px 4px color-mix(in lab, var(--success) 10%, transparent);
-}
-
-.confirmationItemInvalid {
-  background: color-mix(in lab, var(--error) 8%, transparent);
-  border-radius: var(--spaceXS);
-  padding: var(--spaceS) var(--spaceM);
-  margin: var(--spaceXS) calc(-1 * var(--spaceM));
-  border: 1px solid color-mix(in lab, var(--error) 20%, transparent);
-}
-
-.confirmationSuccess {
-  color: var(--success);
-  font-weight: var(--fontWeightMedium);
-}
-
-.confirmationError {
-  color: var(--error);
-  font-weight: var(--fontWeightMedium);
-}
-
 .confirmationButtons {
   display: flex;
   gap: var(--spaceM);
@@ -642,14 +529,3 @@
 .confirmButton:hover {
   box-shadow: 0 2px 6px color-mix(in lab, var(--primary) 30%, transparent);
 }
-
-.hashWarning {
-  background: color-mix(in lab, var(--error) 10%, transparent);
-  border: 1px solid color-mix(in lab, var(--error) 30%, transparent);
-  color: var(--error);
-  padding: var(--spaceM);
-  border-radius: var(--spaceXS);
-  margin-top: var(--spaceM);
-  font-size: var(--fontSizeBodyS);
-  font-weight: var(--fontWeightMedium);
-}

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

@@ -4,8 +4,7 @@ import { useOverlayDismiss } from '~/hooks/useOverlayDismiss';
 import {
   ARCHIVED_REGULAR_CASE_BLOCK_MESSAGE,
   IMPORT_FILE_TYPE_NOT_ALLOWED,
-  IMPORT_FILE_TYPE_NOT_SUPPORTED,
-  DATA_INTEGRITY_BLOCKED_TAMPERING
+  IMPORT_FILE_TYPE_NOT_SUPPORTED
 } from '~/utils/ui';
 import { 
   listReadOnlyCases, 
@@ -177,14 +176,14 @@ export const CaseImport = ({
     clearMessages();
 
     if (!isValidImportFile(file)) {
-      setError('Only Striae case ZIP files, confirmation ZIP files, or confirmation JSON files are allowed.');
+      setError(IMPORT_FILE_TYPE_NOT_ALLOWED);
       clearImportData();
       return;
     }
 
     const importType = await resolveImportType(file);
     if (!importType) {
-      setError('The selected file is not a supported Striae case or confirmation import package.');
+      setError(IMPORT_FILE_TYPE_NOT_SUPPORTED);
       clearImportData();
       return;
     }
@@ -415,13 +414,6 @@ export const CaseImport = ({
             {/* Import progress */}
             <ProgressSection importProgress={importProgress} />
 
-            {/* Hash validation warning */}
-            {casePreview?.hashValid === false && (
-              <div className={styles.hashWarning}>
-                <strong>⚠️ Import Blocked:</strong> {DATA_INTEGRITY_BLOCKED_TAMPERING}
-              </div>
-            )}
-
             {isArchivedRegularCaseImportBlocked && (
               <div className={styles.error}>{ARCHIVED_REGULAR_CASE_BLOCK_MESSAGE}</div>
             )}
@@ -452,7 +444,7 @@ export const CaseImport = ({
                   importState.isClearing || 
                   importState.isLoadingPreview ||
                   (importState.importType === 'case' && isArchivedRegularCaseImportBlocked) ||
-                  (importState.importType === 'case' && (!casePreview || casePreview.hashValid !== true))
+                  (importState.importType === 'case' && (!casePreview || casePreview.hashValid === false))
                 }
               >
                 {importState.isImporting ? 'Importing...' : 
@@ -472,15 +464,16 @@ export const CaseImport = ({
             <div className={styles.instructions}>
               <h3 className={styles.instructionsTitle}>Case Review Instructions:</h3>
               <ul className={styles.instructionsList}>
-                <li>Only ZIP files (.zip) exported with the JSON data format from Striae are accepted</li>
+                <li>Only case ZIP packages exported from Striae are accepted</li>
                 <li>Only one case can be reviewed at a time</li>
                 <li>Imported cases are read-only and cannot be modified</li>
+                <li>Integrity and signature validation are enforced during import</li>
                 <li>Importing will automatically replace any existing review case</li>
               </ul>
               <br />
               <h3 className={styles.instructionsTitle}>Confirmation Import Instructions:</h3>
               <ul className={styles.instructionsList}>
-                <li>Confirmation imports accept either confirmation JSON files or confirmation ZIP packages exported from Striae</li>
+                <li>Confirmation imports accept only encrypted confirmation ZIP packages exported from Striae</li>
                 <li>Only one confirmation file can be imported at a time</li>
                 <li>Confirmed images will become read-only and cannot be modified</li>
                 <li>If an image has a pre-existing confirmation, it will be skipped</li>

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

@@ -1,5 +1,8 @@
 import { type CaseImportPreview } from '~/types';
-import { ARCHIVED_REGULAR_CASE_BLOCK_MESSAGE, DATA_INTEGRITY_VALIDATION_PASSED, DATA_INTEGRITY_VALIDATION_FAILED } from '~/utils/ui';
+import {
+  ARCHIVED_REGULAR_CASE_BLOCK_MESSAGE,
+  ARCHIVED_SELF_IMPORT_NOTE
+} from '~/utils/ui';
 import styles from '../case-import.module.css';
 
 interface CasePreviewSectionProps {
@@ -26,67 +29,21 @@ export const CasePreviewSection = ({
   if (!casePreview) return null;
 
   return (
-    <>
-      {/* Case Information - Always Blue */}
-      <div className={styles.previewSection}>
-        <h3 className={styles.previewTitle}>Case Information</h3>
-        {casePreview.archived && (
-          <div className={styles.archivedImportNote}>
-            Archived export detected. Original exporter imports are allowed for archived cases.
-          </div>
-        )}
-        {isArchivedRegularCaseImportBlocked && (
-          <div className={styles.archivedRegularCaseRiskNote}>
-            {ARCHIVED_REGULAR_CASE_BLOCK_MESSAGE}
-          </div>
-        )}
-        <div className={styles.previewGrid}>
-          <div className={styles.previewItem}>
-            <span className={styles.previewLabel}>Case Number:</span>
-            <span className={styles.previewValue}>{casePreview.caseNumber}</span>
-          </div>
-          <div className={styles.previewItem}>
-            <span className={styles.previewLabel}>Exported by:</span>
-            <span className={styles.previewValue}>
-              {casePreview.exportedByName || casePreview.exportedBy || 'N/A'}
-            </span>
-          </div>
-          <div className={styles.previewItem}>
-            <span className={styles.previewLabel}>Lab/Company:</span>
-            <span className={styles.previewValue}>{casePreview.exportedByCompany || 'N/A'}</span>
-          </div>
-          <div className={styles.previewItem}>
-            <span className={styles.previewLabel}>Export Date:</span>
-            <span className={styles.previewValue}>
-              {new Date(casePreview.exportDate).toLocaleDateString()}
-            </span>
-          </div>
-          <div className={styles.previewItem}>
-            <span className={styles.previewLabel}>Total Images:</span>
-            <span className={styles.previewValue}>{casePreview.totalFiles}</span>
-          </div>
-          <div className={styles.previewItem}>
-            <span className={styles.previewLabel}>Archived Export:</span>
-            <span className={styles.previewValue}>{casePreview.archived ? 'Yes' : 'No'}</span>
-          </div>
+    <div className={styles.previewSection}>
+      <h3 className={styles.previewTitle}>Case Import Preview</h3>
+      <p className={styles.previewMessage}>
+        Case package detected. Details are hidden until import verification completes.
+      </p>
+      {casePreview.archived && (
+        <div className={styles.archivedImportNote}>
+          {ARCHIVED_SELF_IMPORT_NOTE}
         </div>
-      </div>
-
-      {/* Data Integrity Checks - Green/Red Based on Validation */}
-      {casePreview.hashValid !== undefined && (
-        <div className={`${styles.validationSection} ${casePreview.hashValid ? styles.validationSectionValid : styles.validationSectionInvalid}`}>
-          <h3 className={styles.validationTitle}>Data Integrity Validation</h3>
-          <div className={styles.validationItem}>            
-            <span className={`${styles.validationValue} ${casePreview.hashValid ? styles.validationSuccess : styles.validationError}`}>
-              {casePreview.hashValid ? (
-                <>{DATA_INTEGRITY_VALIDATION_PASSED}</>
-              ) : (
-                <>{DATA_INTEGRITY_VALIDATION_FAILED}</>
-              )}
-            </span>
-          </div>
+      )}
+      {isArchivedRegularCaseImportBlocked && (
+        <div className={styles.archivedRegularCaseRiskNote}>
+          {ARCHIVED_REGULAR_CASE_BLOCK_MESSAGE}
         </div>
       )}
-    </>
+    </div>
   );
 };

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

@@ -1,5 +1,8 @@
 import { type CaseImportPreview } from '~/types';
-import { ARCHIVED_REGULAR_CASE_BLOCK_MESSAGE, DATA_INTEGRITY_VALIDATION_PASSED, DATA_INTEGRITY_VALIDATION_FAILED } from '~/utils/ui';
+import {
+  ARCHIVED_REGULAR_CASE_BLOCK_MESSAGE,
+  ARCHIVED_SELF_IMPORT_NOTE
+} from '~/utils/ui';
 import styles from '../case-import.module.css';
 
 interface ConfirmationDialogProps {
@@ -21,6 +24,8 @@ export const ConfirmationDialog = ({
 }: ConfirmationDialogProps) => {
   if (!showConfirmation || !casePreview) return null;
 
+  const hasDetails = casePreview.archived || isArchivedRegularCaseImportBlocked;
+
   return (
     <div className={styles.confirmationOverlay}>
       <div className={styles.confirmationModal}>
@@ -29,45 +34,24 @@ export const ConfirmationDialog = ({
           <p className={styles.confirmationText}>
             Are you sure you want to import this case for review?
           </p>
-          
-          <div className={styles.confirmationDetails}>
-            <div className={styles.confirmationItem}>
-              <strong>Case Number:</strong> {casePreview.caseNumber}
-            </div>
-            <div className={styles.confirmationItem}>
-              <strong>Exported by:</strong> {casePreview.exportedByName || casePreview.exportedBy || 'N/A'}
-            </div>
-            <div className={styles.confirmationItem}>
-              <strong>Lab/Company:</strong> {casePreview.exportedByCompany || 'N/A'}
-            </div>
-            <div className={styles.confirmationItem}>
-              <strong>Export Date:</strong> {new Date(casePreview.exportDate).toLocaleDateString()}
-            </div>
-            <div className={styles.confirmationItem}>
-              <strong>Total Images:</strong> {casePreview.totalFiles}
-            </div>
-            <div className={styles.confirmationItem}>
-              <strong>Archived Export:</strong> {casePreview.archived ? 'Yes' : 'No'}
+          <p className={styles.confirmationText}>
+            Package details stay hidden until verification completes.
+          </p>
+
+          {hasDetails && (
+            <div className={styles.confirmationDetails}>
+              {casePreview.archived && (
+                <div className={styles.archivedImportNote}>
+                  {ARCHIVED_SELF_IMPORT_NOTE}
+                </div>
+              )}
+              {isArchivedRegularCaseImportBlocked && (
+                <div className={styles.archivedRegularCaseRiskNote}>
+                  {archivedRegularCaseBlockMessage}
+                </div>
+              )}
             </div>
-            {casePreview.archived && (
-              <div className={styles.archivedImportNote}>
-                Archived export detected. Original exporter imports are allowed for archived cases.
-              </div>
-            )}
-            {isArchivedRegularCaseImportBlocked && (
-              <div className={styles.archivedRegularCaseRiskNote}>
-                {archivedRegularCaseBlockMessage}
-              </div>
-            )}
-            {casePreview.hashValid !== undefined && (
-              <div className={`${styles.confirmationItem} ${casePreview.hashValid ? styles.confirmationItemValid : styles.confirmationItemInvalid}`}>
-                <strong>Data Integrity:</strong> 
-                <span className={casePreview.hashValid ? styles.confirmationSuccess : styles.confirmationError}>
-                  {casePreview.hashValid ? DATA_INTEGRITY_VALIDATION_PASSED : DATA_INTEGRITY_VALIDATION_FAILED}
-                </span>
-              </div>
-            )}
-          </div>
+          )}
 
           <div className={styles.confirmationButtons}>
             <button