@striae-org/striae 3.2.1 → 3.3.0

package/app/components/actions/case-import/zip-processing.ts

@@ -1,14 +1,49 @@
-import { User } from 'firebase/auth';
-import { CaseExportData, CaseImportPreview } from '~/types';
+import type { User } from 'firebase/auth';
+import { type CaseExportData, type CaseImportPreview } from '~/types';
 import { validateCaseNumber } from '../case-manage';
 import {
   extractForensicManifestData,
-  SignedForensicManifest,
+  type SignedForensicManifest,
   validateCaseIntegritySecure as validateForensicIntegrity,
   verifyForensicManifestSignature
 } from '~/utils/SHA256';
 import { validateExporterUid, removeForensicWarning } from './validation';
 
+function getLeafFileName(path: string): string {
+  const segments = path.split('/').filter(Boolean);
+  return segments.length > 0 ? segments[segments.length - 1] : path;
+}
+
+function selectPreferredPemPath(pemPaths: string[]): string | undefined {
+  if (pemPaths.length === 0) {
+    return undefined;
+  }
+
+  const sortedPaths = [...pemPaths].sort((left, right) => left.localeCompare(right));
+  const preferred = sortedPaths.find((path) =>
+    /^striae-public-signing-key.*\.pem$/i.test(getLeafFileName(path))
+  );
+
+  return preferred ?? sortedPaths[0];
+}
+
+async function extractVerificationPublicKeyFromZip(
+  zip: {
+    files: Record<string, { dir: boolean }>;
+    file: (path: string) => { async: (type: 'text') => Promise<string> } | null;
+  }
+): Promise<string | undefined> {
+  const filePaths = Object.keys(zip.files).filter((path) => !zip.files[path].dir);
+  const pemPaths = filePaths.filter((path) => getLeafFileName(path).toLowerCase().endsWith('.pem'));
+  const preferredPemPath = selectPreferredPemPath(pemPaths);
+
+  if (!preferredPemPath) {
+    return undefined;
+  }
+
+  return zip.file(preferredPemPath)?.async('text');
+}
+
 /**
  * Extract original image ID from export filename format
  * Format: {originalFilename}-{id}.{extension}
@@ -51,6 +86,7 @@ export async function previewCaseImport(zipFile: File, currentUser: User): Promi
   
   try {
     const zip = await JSZip.loadAsync(zipFile);
+    const verificationPublicKeyPem = await extractVerificationPublicKeyFromZip(zip);
     
     // First, validate hash if forensic metadata exists
     let hashValid: boolean | undefined = undefined;
@@ -128,7 +164,10 @@ export async function previewCaseImport(zipFile: File, currentUser: User): Promi
               }));
             }
 
-            const signatureResult = await verifyForensicManifestSignature(forensicManifest);
+            const signatureResult = await verifyForensicManifestSignature(
+              forensicManifest,
+              verificationPublicKeyPem
+            );
           
             // Perform comprehensive validation
             const validation = await validateForensicIntegrity(
@@ -267,12 +306,14 @@ export async function parseImportZip(zipFile: File, currentUser: User): Promise<
   imageIdMapping: { [exportFilename: string]: string }; // exportFilename -> originalImageId
   metadata?: Record<string, unknown>;
   cleanedContent?: string; // Add cleaned content for hash validation
+  verificationPublicKeyPem?: string;
 }> {
   // Dynamic import of JSZip to avoid bundle size issues
   const JSZip = (await import('jszip')).default;
   
   try {
     const zip = await JSZip.loadAsync(zipFile);
+    const verificationPublicKeyPem = await extractVerificationPublicKeyFromZip(zip);
     
     // Find the main data file (JSON or CSV)
     const dataFiles = Object.keys(zip.files).filter(name => 
@@ -367,7 +408,8 @@ export async function parseImportZip(zipFile: File, currentUser: User): Promise<
       imageFiles,
       imageIdMapping,
       metadata,
-      cleanedContent
+      cleanedContent,
+      verificationPublicKeyPem
     };
     
   } catch (error) {

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

@@ -1,4 +1,4 @@
-import { User } from 'firebase/auth';
+import type { User } from 'firebase/auth';
 import { 
   canCreateCase, 
   getUserCases,
@@ -13,8 +13,8 @@ import {
   duplicateCaseData,
   deleteFileAnnotations
 } from '~/utils/data-operations';
-import { CaseData, ReadOnlyCaseData, FileData } from '~/types';
-import { auditService } from '~/services/audit.service';
+import { type CaseData, type ReadOnlyCaseData, type FileData } from '~/types';
+import { auditService } from '~/services/audit';
 import { getImageApiKey } from '~/utils/auth';
 import paths from '~/config/config.json';
 

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

@@ -1,9 +1,14 @@
-import { User } from 'firebase/auth';
+import type { User } from 'firebase/auth';
 import { calculateSHA256Secure } from '~/utils/SHA256';
 import { getUserData } from '~/utils/permissions';
 import { getCaseData, updateCaseData, signConfirmationData } from '~/utils/data-operations';
-import { ConfirmationData, CaseConfirmations, CaseDataWithConfirmations, ConfirmationImportData } from '~/types';
-import { auditService } from '~/services/audit.service';
+import { type ConfirmationData, type CaseConfirmations, type CaseDataWithConfirmations, type ConfirmationImportData } from '~/types';
+import {
+  createPublicSigningKeyFileName,
+  getCurrentPublicSigningKeyDetails,
+  getVerificationPublicKey
+} from '~/utils/signature-utils';
+import { auditService } from '~/services/audit';
 
 /**
  * Store a confirmation for a specific image, linked to the original image ID
@@ -267,15 +272,8 @@ export async function exportConfirmationData(
       }
     };
 
-    // Convert final data to JSON blob
     const finalJsonString = JSON.stringify(finalExportData, null, 2);
-    const blob = new Blob([finalJsonString], { type: 'application/json' });
-    
-    // Create download
-    const url = URL.createObjectURL(blob);
-    const a = document.createElement('a');
-    a.href = url;
-    
+
     // Use local timezone for filename timestamp
     const now = new Date();
     const year = now.getFullYear();
@@ -285,14 +283,47 @@ export async function exportConfirmationData(
     const minutes = String(now.getMinutes()).padStart(2, '0');
     const seconds = String(now.getSeconds()).padStart(2, '0');
     const timestampString = `${year}${month}${day}-${hours}${minutes}${seconds}`;
+
+    const confirmationFileName = `confirmation-data-${caseNumber}-${timestampString}.json`;
+
+    const keyFromSignature = getVerificationPublicKey(signingResult.signature.keyId);
+    const currentKey = getCurrentPublicSigningKeyDetails();
+    const publicKeyPem = keyFromSignature ?? currentKey.publicKeyPem;
+    const publicKeyFileName = createPublicSigningKeyFileName(
+      keyFromSignature ? signingResult.signature.keyId : currentKey.keyId
+    );
+
+    if (!publicKeyPem || publicKeyPem.trim().length === 0) {
+      throw new Error('No public signing key is configured for confirmation export packaging.');
+    }
+
+    const JSZip = (await import('jszip')).default;
+    const zip = new JSZip();
+    const normalizedPem = publicKeyPem.endsWith('\n') ? publicKeyPem : `${publicKeyPem}\n`;
+
+    zip.file(confirmationFileName, finalJsonString);
+    zip.file(publicKeyFileName, normalizedPem);
+
+    const zipBlob = await zip.generateAsync({
+      type: 'blob',
+      compression: 'DEFLATE',
+      compressionOptions: { level: 6 }
+    });
+
+    const exportFileName = `confirmation-export-${caseNumber}-${timestampString}.zip`;
+
+    // Create download
+    const url = URL.createObjectURL(zipBlob);
+    const a = document.createElement('a');
+    a.href = url;
     
-    a.download = `confirmation-data-${caseNumber}-${timestampString}.json`;
+    a.download = exportFileName;
     document.body.appendChild(a);
     a.click();
     document.body.removeChild(a);
     URL.revokeObjectURL(url);
     
-    console.log(`Confirmation data exported for case ${caseNumber}`);
+    console.log(`Confirmation export ZIP generated for case ${caseNumber}`);
     
     // Log successful confirmation export
     const endTime = Date.now();
@@ -300,14 +331,14 @@ export async function exportConfirmationData(
     await auditService.logConfirmationExport(
       user,
       caseNumber,
-      `confirmation-data-${caseNumber}-${timestampString}.json`,
+      exportFileName,
       confirmationCount,
       'success',
       [],
       undefined, // Original examiner UID not available here
       {
         processingTimeMs: endTime - startTime,
-        fileSizeBytes: new Blob([jsonString]).size,
+        fileSizeBytes: zipBlob.size,
         validationStepsCompleted: confirmationCount,
         validationStepsFailed: 0
       },
@@ -328,7 +359,7 @@ export async function exportConfirmationData(
     await auditService.logConfirmationExport(
       user,
       caseNumber,
-      `confirmation-data-${caseNumber}-error.json`,
+      `confirmation-export-${caseNumber}-error.zip`,
       0,
       'failure',
       [error instanceof Error ? error.message : 'Unknown error'],

package/app/components/actions/generate-pdf.ts

@@ -1,8 +1,8 @@
 import paths from '~/config/config.json';
-import { AnnotationData } from '~/types/annotations';
-import { auditService } from '~/services/audit.service';
+import { type AnnotationData } from '~/types/annotations';
+import { auditService } from '~/services/audit';
 import { getPdfApiKey } from '~/utils/auth';
-import { User } from 'firebase/auth';
+import type { User } from 'firebase/auth';
 
 interface GeneratePDFParams {
   user: User;

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

@@ -1,4 +1,4 @@
-import { User } from 'firebase/auth';
+import type { User } from 'firebase/auth';
 import paths from '~/config/config.json';
 import { 
   getImageApiKey,
@@ -6,8 +6,8 @@ import {
 } from '~/utils/auth';
 import { canUploadFile } from '~/utils/permissions';
 import { getCaseData, updateCaseData, deleteFileAnnotations } from '~/utils/data-operations';
-import { CaseData, FileData, ImageUploadResponse } from '~/types';
-import { auditService } from '~/services/audit.service';
+import type { CaseData, FileData, ImageUploadResponse } from '~/types';
+import { auditService } from '~/services/audit';
 
 const IMAGE_URL = paths.image_worker_url;
 

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

@@ -1,6 +1,6 @@
-import { User } from 'firebase/auth';
-import { AnnotationData } from '~/types/annotations';
-import { saveFileAnnotations, getFileAnnotations, DataOperationOptions } from '~/utils/data-operations';
+import type { User } from 'firebase/auth';
+import { type AnnotationData } from '~/types/annotations';
+import { saveFileAnnotations, getFileAnnotations, type DataOperationOptions } from '~/utils/data-operations';
 
 export const saveNotes = async (
   user: User,

package/app/components/actions/signout.tsx

@@ -1,5 +1,5 @@
 import { auth } from '~/services/firebase';
-import { auditService } from '~/services/audit.service';
+import { auditService } from '~/services/audit';
 import { generateUniqueId } from '~/utils/id-generator';
 import styles from './signout.module.css';
 

package/app/components/audit/user-audit-viewer.tsx

@@ -1,8 +1,7 @@
 import { useState, useEffect, useContext, useCallback } from 'react';
 import { AuthContext } from '~/contexts/auth.context';
-import { auditService } from '~/services/audit.service';
-import { auditExportService } from '~/services/audit-export.service';
-import { ValidationAuditEntry, AuditAction, AuditResult, AuditTrail, UserData, WorkflowPhase } from '~/types';
+import { auditService, auditExportService } from '~/services/audit';
+import { type ValidationAuditEntry, type AuditAction, type AuditResult, type AuditTrail, type UserData, type WorkflowPhase } from '~/types';
 import { getUserData } from '~/utils/permissions';
 import styles from './user-audit.module.css';
 

package/app/components/auth/auth-provider.tsx

@@ -1,11 +1,11 @@
-import { User } from 'firebase/auth';
+import type { User } from 'firebase/auth';
 import { useEffect, useState } from 'react';
 import { auth } from '~/services/firebase';
 import { useInactivityTimeout } from '~/hooks/useInactivityTimeout';
 import { INACTIVITY_CONFIG } from '~/config/inactivity';
 import { AuthContext } from '~/contexts/auth.context';
 import { InactivityWarning } from '~/components/user/inactivity-warning';
-import { auditService } from '~/services/audit.service';
+import { auditService } from '~/services/audit';
 import { generateUniqueId } from '~/utils/id-generator';
 
 interface AuthProviderProps {

package/app/components/auth/mfa-enrollment.tsx

@@ -6,11 +6,11 @@ import {
   PhoneMultiFactorGenerator,
   RecaptchaVerifier,
   multiFactor,
-  User
+  type User
 } from 'firebase/auth';
-import { handleAuthError, getValidationError } from '~/services/firebase-errors';
+import { handleAuthError, getValidationError } from '~/services/firebase/errors';
 import { SignOut } from '~/components/actions/signout';
-import { auditService } from '~/services/audit.service';
+import { auditService } from '~/services/audit';
 import styles from './mfa-enrollment.module.css';
 
 interface MFAEnrollmentProps {

package/app/components/auth/mfa-verification.tsx

@@ -3,13 +3,13 @@ import {
   PhoneAuthProvider, 
   PhoneMultiFactorGenerator, 
   RecaptchaVerifier,
-  MultiFactorResolver,
-  UserCredential
+  type MultiFactorResolver,
+  type UserCredential
 } from 'firebase/auth';
 import { auth } from '~/services/firebase';
-import { handleAuthError, getValidationError } from '~/services/firebase-errors';
+import { handleAuthError, getValidationError } from '~/services/firebase/errors';
 import { SignOut } from '~/components/actions/signout';
-import { auditService } from '~/services/audit.service';
+import { auditService } from '~/services/audit';
 import { generateUniqueId } from '~/utils/id-generator';
 import styles from './mfa-verification.module.css';
 

package/app/components/canvas/box-annotations/box-annotations.tsx

@@ -1,7 +1,7 @@
 import { useState, useCallback, useMemo, useRef, useEffect, useContext } from 'react';
-import { BoxAnnotation } from '~/types';
+import { type BoxAnnotation } from '~/types';
 import { AuthContext } from '~/contexts/auth.context';
-import { auditService } from '~/services/audit.service';
+import { auditService } from '~/services/audit';
 import { resolveEarliestAnnotationTimestamp } from '~/utils/annotation-timestamp';
 import styles from './box-annotations.module.css';
 

package/app/components/canvas/canvas.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState, useRef, useContext, useCallback } from 'react';
 import { BoxAnnotations } from './box-annotations/box-annotations';
 import { ConfirmationModal } from './confirmation/confirmation';
-import { AnnotationData, BoxAnnotation, ConfirmationData } from '~/types/annotations';
+import { type AnnotationData, type BoxAnnotation, type ConfirmationData } from '~/types/annotations';
 import { AuthContext } from '~/contexts/auth.context';
 import { storeConfirmation } from '~/components/actions/confirm-export';
 import styles from './canvas.module.css';

package/app/components/canvas/confirmation/confirmation.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect, useContext } from 'react';
-import { ConfirmationData } from '~/types/annotations';
+import { type ConfirmationData } from '~/types/annotations';
 import { AuthContext } from '~/contexts/auth.context';
 import { generateConfirmationId } from '~/utils/id-generator';
 import styles from './confirmation.module.css';

package/app/components/form/form-button.tsx

@@ -1,7 +1,7 @@
 import styles from './form.module.css';
 
 interface FormButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  variant?: 'primary' | 'secondary' | 'success' | 'error';
+  variant?: 'primary' | 'secondary' | 'success' | 'error' | 'audit';
   isLoading?: boolean;
   loadingText?: string;
   children: React.ReactNode;

package/app/components/form/form.module.css

@@ -124,6 +124,15 @@
   background-color: color-mix(in lab, var(--error) 85%, var(--black));
 }
 
+.buttonAudit {
+  background-color: #6f42c1;
+  color: var(--white);
+}
+
+.buttonAudit:hover:not(:disabled) {
+  background-color: #5a359a;
+}
+
 .button:disabled {
   background-color: color-mix(in lab, var(--background) 95%, transparent);
   color: var(--textLight);

package/app/components/public-signing-key-modal/public-signing-key-modal.module.css

@@ -79,93 +79,207 @@
   font-weight: var(--fontWeightMedium);
 }
 
-.label {
+.verifierLayout {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spaceL);
+}
+
+.verificationField {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spaceS);
+}
+
+.fieldHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spaceS);
+}
+
+.fieldLabel {
   font-size: var(--fontSizeBodyXS);
   font-weight: var(--fontWeightMedium);
   color: var(--textTitle);
 }
 
-.field {
-  width: 100%;
-  max-width: 100%;
-  box-sizing: border-box;
-  min-height: 180px;
-  padding: var(--spaceM);
-  border: 1px solid color-mix(in lab, var(--text) 10%, transparent);
-  border-radius: var(--spaceXS);
-  background: color-mix(in lab, var(--background) 96%, transparent);
-  color: var(--textBody);
+.hiddenFileInput {
+  display: none;
+}
+
+.clearButton {
+  background: none;
+  border: none;
+  padding: 0;
+  color: var(--primary);
   font-size: var(--fontSizeBodyXS);
-  line-height: 1.4;
-  font-family: Consolas, "Courier New", monospace;
-  resize: vertical;
+  font-weight: var(--fontWeightMedium);
+  cursor: pointer;
 }
 
-.howToTitle {
+.dropZone {
+  min-height: 144px;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: var(--spaceXS);
+  padding: var(--spaceL);
+  border: 1px dashed color-mix(in lab, var(--text) 18%, transparent);
+  border-radius: var(--radiusM);
+  background: linear-gradient(
+    135deg,
+    color-mix(in lab, var(--primary) 4%, var(--backgroundLight)),
+    color-mix(in lab, var(--background) 94%, transparent)
+  );
+  cursor: pointer;
+  transition:
+    border-color var(--durationS) var(--bezierFastoutSlowin),
+    background-color var(--durationS) var(--bezierFastoutSlowin),
+    box-shadow var(--durationS) var(--bezierFastoutSlowin);
+}
+
+.dropZone:hover {
+  border-color: color-mix(in lab, var(--primary) 35%, transparent);
+  background: linear-gradient(
+    135deg,
+    color-mix(in lab, var(--primary) 7%, var(--backgroundLight)),
+    color-mix(in lab, var(--background) 92%, transparent)
+  );
+}
+
+.dropZone:focus-visible {
+  outline: none;
+  border-color: color-mix(in lab, var(--primary) 48%, transparent);
+  box-shadow: 0 0 0 3px color-mix(in lab, var(--primary) 14%, transparent);
+}
+
+.dropZoneActive {
+  border-color: color-mix(in lab, var(--primary) 50%, transparent);
+  background: linear-gradient(
+    135deg,
+    color-mix(in lab, var(--primary) 10%, var(--backgroundLight)),
+    color-mix(in lab, var(--background) 90%, transparent)
+  );
+  box-shadow: 0 0 0 3px color-mix(in lab, var(--primary) 12%, transparent);
+}
+
+.dropZoneDisabled {
+  opacity: 0.7;
+  cursor: not-allowed;
+}
+
+.dropZonePrimary {
   margin: 0;
   font-size: var(--fontSizeBodyS);
   font-weight: var(--fontWeightMedium);
   color: var(--textTitle);
 }
 
-.howToList {
+.dropZoneSecondary {
   margin: 0;
-  padding-left: var(--spaceL);
-  display: flex;
-  flex-direction: column;
-  gap: var(--spaceXS);
+  font-size: var(--fontSizeBodyXS);
   color: var(--textBody);
-  font-size: var(--fontSizeBodyS);
 }
 
-.actions {
+.fieldActions {
   display: flex;
-  justify-content: flex-end;
+  flex-wrap: wrap;
   gap: var(--spaceS);
 }
 
-.status {
+.fieldError {
   margin: 0;
   font-size: var(--fontSizeBodyXS);
+  color: var(--error);
+}
+
+.resultCard {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spaceXS);
+  padding: var(--spaceM) var(--spaceL);
+  border-radius: var(--radiusM);
+}
+
+.resultPass {
+  border: 1px solid color-mix(in lab, var(--success) 38%, transparent);
+  background: color-mix(in lab, var(--success) 12%, var(--backgroundLight));
+}
+
+.resultFail {
+  border: 1px solid color-mix(in lab, var(--error) 32%, transparent);
+  background: color-mix(in lab, var(--errorLight) 40%, var(--backgroundLight));
+}
+
+.resultTitle {
+  margin: 0;
+  font-size: var(--fontSizeBodyM);
+  font-weight: var(--fontWeightBold);
+  letter-spacing: 0.06em;
+}
+
+.resultPass .resultTitle {
+  color: color-mix(in lab, var(--success) 78%, var(--black));
+}
+
+.resultFail .resultTitle {
+  color: color-mix(in lab, var(--error) 78%, var(--black));
+}
+
+.resultMessage {
+  margin: 0;
+  font-size: var(--fontSizeBodyS);
   color: var(--textBody);
 }
 
-.copyButton {
-  background: transparent;
-  color: var(--primary);
-  border: 1px solid color-mix(in lab, var(--primary) 35%, transparent);
+.actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--spaceS);
+  flex-wrap: wrap;
+}
+
+.primaryButton,
+.secondaryButton {
   border-radius: var(--spaceXS);
   padding: var(--spaceS) var(--spaceL);
   font-size: var(--fontSizeBodyS);
   font-weight: var(--fontWeightMedium);
   cursor: pointer;
-  transition: all var(--durationS) var(--bezierFastoutSlowin);
+  transition:
+    background-color var(--durationS) var(--bezierFastoutSlowin),
+    border-color var(--durationS) var(--bezierFastoutSlowin),
+    color var(--durationS) var(--bezierFastoutSlowin);
 }
 
-.copyButton:hover:not(:disabled) {
-  background: color-mix(in lab, var(--primary) 10%, transparent);
-  border-color: color-mix(in lab, var(--primary) 55%, transparent);
+.primaryButton {
+  background: var(--primary);
+  color: var(--white);
+  border: 1px solid var(--primary);
 }
 
-.copyButton:disabled {
-  background: color-mix(in lab, var(--background) 95%, transparent);
-  color: var(--textLight);
-  border-color: color-mix(in lab, var(--text) 10%, transparent);
-  cursor: not-allowed;
+.primaryButton:hover:not(:disabled) {
+  background: color-mix(in lab, var(--primary) 84%, var(--black));
+  border-color: color-mix(in lab, var(--primary) 84%, var(--black));
 }
 
-.closeModalButton {
-  background: var(--primary);
-  color: white;
-  border: none;
-  border-radius: var(--spaceXS);
-  padding: var(--spaceS) var(--spaceL);
-  font-size: var(--fontSizeBodyS);
-  font-weight: var(--fontWeightMedium);
-  cursor: pointer;
-  transition: all var(--durationS) var(--bezierFastoutSlowin);
+.secondaryButton {
+  background: transparent;
+  color: var(--textTitle);
+  border: 1px solid color-mix(in lab, var(--text) 16%, transparent);
 }
 
-.closeModalButton:hover {
-  background: color-mix(in lab, var(--primary) 85%, var(--black));
+.secondaryButton:hover:not(:disabled) {
+  background: color-mix(in lab, var(--text) 5%, transparent);
+  border-color: color-mix(in lab, var(--text) 22%, transparent);
+}
+
+.primaryButton:disabled,
+.secondaryButton:disabled {
+  background: color-mix(in lab, var(--background) 95%, transparent);
+  color: var(--textLight);
+  border-color: color-mix(in lab, var(--text) 10%, transparent);
+  cursor: not-allowed;
 }