@striae-org/striae 4.3.2 → 4.3.4

package/app/components/actions/case-import/orchestrator.ts

@@ -287,7 +287,7 @@ export async function importCaseForReview(
       throw new Error(`Case "${result.caseNumber}" already exists in your case list. You cannot import a case for review if you were the original analyst.`);
     }
     if (existingRegularCase && isArchivedExport) {
-      throw new Error(`Cannot import this archive because case "${result.caseNumber}" already exists in your case list (active or archived). To import this archive, the existing case must first be deleted.`);
+      throw new Error(`Cannot import this archived case because "${result.caseNumber}" already exists in your regular case list. Delete the regular case before importing this archive.`);
     }
     
     // Step 2b: Check if read-only case already exists

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

@@ -14,7 +14,7 @@ import {
   signForensicManifest,
   removeCaseConfirmationSummary
 } from '~/utils/data';
-import { type CaseData, type ReadOnlyCaseData, type FileData, type AuditTrail, type CaseExportData } from '~/types';
+import { type CaseData, type ReadOnlyCaseData, type FileData, type AuditTrail, type CaseExportData, type ValidationAuditEntry } from '~/types';
 import { auditService } from '~/services/audit';
 import { fetchImageApi } from '~/utils/api';
 import { exportCaseData, formatDateForFilename } from '~/components/actions/case-export';
@@ -27,7 +27,7 @@ import {
   getVerificationPublicKey,
 } from '~/utils/forensics';
 import { signAuditExport } from '~/services/audit/audit-export-signing';
-import { generateAuditSummary } from '~/services/audit/audit-query-helpers';
+import { generateAuditSummary, sortAuditEntriesNewestFirst } from '~/services/audit/audit-query-helpers';
 
 /**
  * Delete a file without individual audit logging (for bulk operations)
@@ -182,8 +182,9 @@ export const checkExistingCase = async (user: User, caseNumber: string): Promise
       return null;
     }
 
-    // Check if this is a read-only case - if so, don't consider it as an existing regular case
-    if ('isReadOnly' in caseData && caseData.isReadOnly) {
+    // Imported review cases are read-only and should not be treated as regular cases.
+    // Archived cases remain regular case records even if legacy data includes isReadOnly.
+    if ('isReadOnly' in caseData && caseData.isReadOnly && !caseData.archived) {
       return null;
     }
     
@@ -212,11 +213,6 @@ export const checkCaseIsReadOnly = async (user: User, caseNumber: string): Promi
       return false;
     }
 
-    // Archived cases are always treated as read-only.
-    if (caseData.archived) {
-      return true;
-    }
-
     // Use type guard to check for isReadOnly property safely
     return isReadOnlyCaseData(caseData) ? !!caseData.isReadOnly : false;
     
@@ -397,15 +393,23 @@ export const renameCase = async (
     // 5) Delete old case number in user's KV entry
     await removeUserCase(user, oldCaseNumber);
 
-    // Log successful case rename
+    // Log successful case rename under the original case number context
     const endTime = Date.now();
     await auditService.logCaseRename(
       user,
-      newCaseNumber, // Use new case number as the current context
+      oldCaseNumber,
       oldCaseNumber,
       newCaseNumber
     );
 
+    // Log creation of the new case number as a rename-derived case
+    await auditService.logCaseCreation(
+      user,
+      newCaseNumber,
+      newCaseNumber,
+      oldCaseNumber
+    );
+
     console.log(`✅ Case renamed: ${oldCaseNumber} → ${newCaseNumber} (${endTime - startTime}ms)`);
     
   } catch (error) {
@@ -748,7 +752,7 @@ export const archiveCase = async (
       archivedBy: user.uid,
       archivedByDisplay,
       archiveReason: archiveReason?.trim() || undefined,
-      isReadOnly: true,
+      isReadOnly: false,
     } as CaseData;
 
     const exportData = await exportCaseData(user, caseNumber, { includeMetadata: true });
@@ -812,11 +816,43 @@ export const archiveCase = async (
       startDate: caseData.createdAt,
       endDate: archivedAt,
     });
+
+    // Ensure the bundled archive trail includes the archival event itself.
+    const archiveAuditEntry: ValidationAuditEntry = {
+      timestamp: archivedAt,
+      userId: user.uid,
+      userEmail: user.email || '',
+      action: 'case-archive',
+      result: 'success',
+      details: {
+        fileName: `${caseNumber}.case`,
+        fileType: 'case-package',
+        validationErrors: [],
+        caseNumber,
+        workflowPhase: 'casework',
+        caseDetails: {
+          newCaseName: caseNumber,
+          archiveReason: archiveReason?.trim() || 'No reason provided',
+          totalFiles: archiveData.files?.length || 0,
+          lastModified: archivedAt,
+        },
+        performanceMetrics: {
+          processingTimeMs: Date.now() - startTime,
+          fileSizeBytes: 0,
+        },
+      },
+    };
+
+    const auditEntriesWithArchive = sortAuditEntriesNewestFirst([
+      ...auditEntries,
+      archiveAuditEntry,
+    ]);
+
     const auditTrail: AuditTrail = {
       caseNumber,
       workflowId: `${caseNumber}-archive-${Date.now()}`,
-      entries: auditEntries,
-      summary: generateAuditSummary(auditEntries),
+      entries: auditEntriesWithArchive,
+      summary: generateAuditSummary(auditEntriesWithArchive),
     };
 
     const auditTrailPayload = {

package/app/components/audit/user-audit.module.css

@@ -522,11 +522,60 @@
   white-space: nowrap;
 }
 
+.entryHeaderActions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-left: auto;
+}
+
+.entryDetailsToggle {
+  background: color-mix(in lab, var(--primary) 10%, transparent);
+  color: color-mix(in lab, var(--primary) 65%, var(--text));
+  border: 1px solid color-mix(in lab, var(--primary) 30%, transparent);
+  padding: 4px 8px;
+  border-radius: 999px;
+  font-size: 0.75rem;
+  font-weight: var(--fontWeightMedium);
+  cursor: pointer;
+  transition: background-color var(--durationS) var(--bezierFastoutSlowin);
+}
+
+.entryDetailsToggle:hover {
+  background: color-mix(in lab, var(--primary) 16%, transparent);
+}
+
+.entryDetailsToggle:focus-visible {
+  outline: 2px solid color-mix(in lab, var(--primary) 45%, transparent);
+  outline-offset: 2px;
+}
+
 /* Entry Details */
 .entryDetails {
   padding: 12px 14px;
 }
 
+.expandedDetails {
+  margin-top: 10px;
+  padding-top: 10px;
+  border-top: 1px dashed color-mix(in lab, var(--textLight) 25%, transparent);
+}
+
+.expandedDetailsCode {
+  margin: 4px 0 0;
+  padding: 10px;
+  border-radius: 6px;
+  border: 1px solid color-mix(in lab, var(--textLight) 20%, transparent);
+  background: color-mix(in lab, var(--backgroundLight) 75%, transparent);
+  color: var(--text);
+  font-size: 0.78rem;
+  line-height: 1.4;
+  white-space: pre-wrap;
+  word-break: break-word;
+  max-height: 280px;
+  overflow: auto;
+}
+
 .detailRow {
   display: flex;
   align-items: center;

package/app/components/audit/viewer/audit-entries-list.tsx

@@ -1,3 +1,4 @@
+import { useMemo, useState, type MouseEvent } from 'react';
 import { type ValidationAuditEntry } from '~/types';
 import { formatAuditTimestamp, getAuditActionIcon, getAuditStatusIcon } from './audit-viewer-utils';
 import styles from '../user-audit.module.css';
@@ -13,7 +14,57 @@ const isConfirmationImportEntry = (entry: ValidationAuditEntry): boolean => {
   );
 };
 
+const isConfirmationEvent = (entry: ValidationAuditEntry): boolean => {
+  return (
+    entry.action === 'confirmation-create' ||
+    entry.action === 'confirmation-export' ||
+    entry.action === 'confirmation-import' ||
+    entry.action === 'confirm' ||
+    (entry.action === 'import' && entry.details.workflowPhase === 'confirmation') ||
+    (entry.action === 'export' && entry.details.workflowPhase === 'confirmation')
+  );
+};
+
+const supportsFullDetailsToggle = (entry: ValidationAuditEntry): boolean => {
+  return (
+    entry.action === 'annotation-create' ||
+    entry.action === 'annotation-edit' ||
+    entry.action === 'annotation-delete' ||
+    isConfirmationEvent(entry)
+  );
+};
+
+const getEntryKey = (entry: ValidationAuditEntry): string => {
+  return `${entry.timestamp}-${entry.userId}-${entry.action}-${entry.details.fileName || ''}-${entry.details.confirmationId || ''}`;
+};
+
 export const AuditEntriesList = ({ entries }: AuditEntriesListProps) => {
+  const [expandedEntryKeys, setExpandedEntryKeys] = useState<Set<string>>(new Set());
+
+  const expandableEntries = useMemo(() => {
+    return new Set(entries.filter(supportsFullDetailsToggle).map(getEntryKey));
+  }, [entries]);
+
+  const toggleExpanded = (entryKey: string) => {
+    setExpandedEntryKeys((current) => {
+      const next = new Set(current);
+
+      if (next.has(entryKey)) {
+        next.delete(entryKey);
+      } else {
+        next.add(entryKey);
+      }
+
+      return next;
+    });
+  };
+
+  const handleToggleClick = (event: MouseEvent<HTMLButtonElement>, entryKey: string) => {
+    event.preventDefault();
+    event.stopPropagation();
+    toggleExpanded(entryKey);
+  };
+
   return (
     <div className={styles.entriesList}>
       <h3>Activity Log ({entries.length} entries)</h3>
@@ -22,30 +73,49 @@ export const AuditEntriesList = ({ entries }: AuditEntriesListProps) => {
           <p>No activities match the current filters.</p>
         </div>
       ) : (
-        entries.map((entry) => (
-          <div
-            key={`${entry.timestamp}-${entry.userId}-${entry.action}-${entry.details.fileName || ''}`}
-            className={`${styles.entry} ${styles[entry.result]}`}
-          >
-            <div className={styles.entryHeader}>
-              <div className={styles.entryIcons}>
-                <span className={styles.actionIcon}>{getAuditActionIcon(entry.action)}</span>
-                <span className={styles.statusIcon}>{getAuditStatusIcon(entry.result)}</span>
-              </div>
-              <div className={styles.entryTitle}>
-                <span className={styles.action}>{entry.action.toUpperCase().replace(/-/g, ' ')}</span>
-                <span className={styles.fileName}>{entry.details.fileName}</span>
-              </div>
-              <div className={styles.entryTimestamp}>{formatAuditTimestamp(entry.timestamp)}</div>
-            </div>
+        entries.map((entry) => {
+          const entryKey = getEntryKey(entry);
+          const isExpandable = expandableEntries.has(entryKey);
+          const isExpanded = expandedEntryKeys.has(entryKey);
 
-            <div className={styles.entryDetails}>
-              {entry.details.caseNumber && (
-                <div className={styles.detailRow}>
-                  <span className={styles.detailLabel}>Case:</span>
-                  <span className={styles.detailValue}>{entry.details.caseNumber}</span>
+          return (
+            <div
+              key={entryKey}
+              className={`${styles.entry} ${styles[entry.result]}`}
+            >
+              <div className={styles.entryHeader}>
+                <div className={styles.entryIcons}>
+                  <span className={styles.actionIcon}>{getAuditActionIcon(entry.action)}</span>
+                  <span className={styles.statusIcon}>{getAuditStatusIcon(entry.result)}</span>
                 </div>
-              )}
+                <div className={styles.entryTitle}>
+                  <span className={styles.action}>{entry.action.toUpperCase().replace(/-/g, ' ')}</span>
+                  <span className={styles.fileName}>{entry.details.fileName}</span>
+                </div>
+
+                <div className={styles.entryHeaderActions}>
+                  <div className={styles.entryTimestamp}>{formatAuditTimestamp(entry.timestamp)}</div>
+                  {isExpandable && (
+                    <button
+                      type="button"
+                      className={styles.entryDetailsToggle}
+                      aria-expanded={isExpanded}
+                      aria-label={isExpanded ? 'Hide full entry details' : 'Show full entry details'}
+                      onClick={(event) => handleToggleClick(event, entryKey)}
+                    >
+                      {isExpanded ? 'Hide details' : 'Show details'}
+                    </button>
+                  )}
+                </div>
+              </div>
+
+              <div className={styles.entryDetails}>
+                {entry.details.caseNumber && (
+                  <div className={styles.detailRow}>
+                    <span className={styles.detailLabel}>Case:</span>
+                    <span className={styles.detailValue}>{entry.details.caseNumber}</span>
+                  </div>
+                )}
 
               {entry.details.userProfileDetails?.badgeId && (
                 <div className={styles.detailRow}>
@@ -191,37 +261,49 @@ export const AuditEntriesList = ({ entries }: AuditEntriesListProps) => {
                 </>
               )}
 
-              {(entry.action === 'pdf-generate' || entry.action === 'confirm') && entry.details.fileDetails && (
-                <>
-                  {entry.details.fileDetails.fileId && (
-                    <div className={styles.detailRow}>
-                      <span className={styles.detailLabel}>
-                        {entry.action === 'pdf-generate' ? 'Source File ID:' : 'Original Image ID:'}
-                      </span>
-                      <span className={styles.detailValue}>{entry.details.fileDetails.fileId}</span>
-                    </div>
-                  )}
+                {(entry.action === 'pdf-generate' || entry.action === 'confirm') && entry.details.fileDetails && (
+                  <>
+                    {entry.details.fileDetails.fileId && (
+                      <div className={styles.detailRow}>
+                        <span className={styles.detailLabel}>
+                          {entry.action === 'pdf-generate' ? 'Source File ID:' : 'Original Image ID:'}
+                        </span>
+                        <span className={styles.detailValue}>{entry.details.fileDetails.fileId}</span>
+                      </div>
+                    )}
 
-                  {entry.details.fileDetails.originalFileName && (
-                    <div className={styles.detailRow}>
-                      <span className={styles.detailLabel}>
-                        {entry.action === 'pdf-generate' ? 'Source Filename:' : 'Original Filename:'}
-                      </span>
-                      <span className={styles.detailValue}>{entry.details.fileDetails.originalFileName}</span>
-                    </div>
-                  )}
+                    {entry.details.fileDetails.originalFileName && (
+                      <div className={styles.detailRow}>
+                        <span className={styles.detailLabel}>
+                          {entry.action === 'pdf-generate' ? 'Source Filename:' : 'Original Filename:'}
+                        </span>
+                        <span className={styles.detailValue}>{entry.details.fileDetails.originalFileName}</span>
+                      </div>
+                    )}
+
+                    {entry.action === 'confirm' && entry.details.confirmationId && (
+                      <div className={styles.detailRow}>
+                        <span className={styles.detailLabel}>Confirmation ID:</span>
+                        <span className={styles.detailValue}>{entry.details.confirmationId}</span>
+                      </div>
+                    )}
+                  </>
+                )}
 
-                  {entry.action === 'confirm' && entry.details.confirmationId && (
+                {isExpandable && isExpanded && (
+                  <div className={styles.expandedDetails}>
                     <div className={styles.detailRow}>
-                      <span className={styles.detailLabel}>Confirmation ID:</span>
-                      <span className={styles.detailValue}>{entry.details.confirmationId}</span>
+                      <span className={styles.detailLabel}>Full Entry Details:</span>
                     </div>
-                  )}
-                </>
-              )}
+                    <pre className={styles.expandedDetailsCode}>
+                      {JSON.stringify(entry, null, 2)}
+                    </pre>
+                  </div>
+                )}
+              </div>
             </div>
-          </div>
-        ))
+          );
+        })
       )}
     </div>
   );

package/app/components/navbar/navbar.tsx

@@ -13,6 +13,7 @@ interface NavbarProps {
   isUploading?: boolean;
   company?: string;
   isReadOnly?: boolean;
+  isReviewOnlyCase?: boolean;
   currentCase?: string;
   currentFileName?: string;
   isCurrentImageConfirmed?: boolean;
@@ -43,6 +44,7 @@ export const Navbar = ({
   isUploading = false,
   company,
   isReadOnly = false,
+  isReviewOnlyCase = false,
   currentCase,
   currentFileName,
   isCurrentImageConfirmed = false,
@@ -119,16 +121,17 @@ export const Navbar = ({
   const disableLongRunningCaseActions = isUploading;
   const isCaseManagementActive = true;
   const isFileManagementActive = isFileMenuOpen || hasLoadedImage;
-  const canOpenImageNotes = hasLoadedImage && !isCurrentImageConfirmed;
+  const canOpenImageNotes = hasLoadedImage && !isCurrentImageConfirmed && !isReadOnly;
   const isImageNotesActive = canOpenImageNotes;
   const canDeleteCurrentFile = hasLoadedImage && !isReadOnly;
+  const isArchivedRegularReadOnly = Boolean(isReadOnly && archiveDetails?.archived && !isReviewOnlyCase);
 
   return (
     <>
       <header className={styles.navbar} aria-label="Canvas top navigation">
         <div className={styles.companyLabelContainer}>
           <div className={styles.companyLabel}>
-            {isReadOnly ? 'CASE REVIEW ONLY' : `${company}${user?.displayName ? ` | ${user.displayName}` : ''}${userBadgeId ? `, ${userBadgeId}` : ''}`}
+            {isReviewOnlyCase ? 'CASE REVIEW ONLY' : `${company}${user?.displayName ? ` | ${user.displayName}` : ''}${userBadgeId ? `, ${userBadgeId}` : ''}`}
           </div>
         </div>
         <div className={styles.navCenterTrack}>
@@ -153,8 +156,8 @@ export const Navbar = ({
                   type="button"
                   role="menuitem"
                   className={`${styles.caseMenuItem} ${styles.caseMenuItemOpen}`}
-                  disabled={isReadOnly}
-                  title={isReadOnly ? 'Clear the read-only case first to open or switch cases' : undefined}
+                  disabled={isReviewOnlyCase}
+                  title={isReviewOnlyCase ? 'Clear the read-only case first to open or switch cases' : undefined}
                   onClick={() => {
                     onOpenCase?.();
                     setIsCaseMenuOpen(false);
@@ -166,8 +169,8 @@ export const Navbar = ({
                   type="button"
                   role="menuitem"
                   className={`${styles.caseMenuItem} ${styles.caseMenuItemList}`}
-                  disabled={isReadOnly}
-                  title={isReadOnly ? 'Clear the read-only case first to list all cases' : undefined}
+                  disabled={isReviewOnlyCase}
+                  title={isReviewOnlyCase ? 'Clear the read-only case first to list all cases' : undefined}
                   onClick={() => {
                     onOpenListAllCases?.();
                     setIsCaseMenuOpen(false);
@@ -180,9 +183,11 @@ export const Navbar = ({
                   type="button"
                   role="menuitem"
                   className={`${styles.caseMenuItem} ${styles.caseMenuItemExport}`}
-                  disabled={!hasLoadedCase || disableLongRunningCaseActions}
+                  disabled={!hasLoadedCase || disableLongRunningCaseActions || isArchivedRegularReadOnly}
                   title={
-                    !hasLoadedCase
+                    isArchivedRegularReadOnly
+                      ? 'Export is unavailable for archived cases loaded from your regular case list'
+                      : !hasLoadedCase
                       ? 'Load a case to export case data'
                       : disableLongRunningCaseActions
                         ? 'Export is unavailable while files are uploading'
@@ -209,7 +214,7 @@ export const Navbar = ({
                   Case Audit Trail
                 </button>
                 <div className={styles.caseMenuSectionLabel}>Maintenance</div>
-                {isReadOnly && (
+                {isReviewOnlyCase && (
                   <button
                     type="button"
                     role="menuitem"
@@ -249,9 +254,9 @@ export const Navbar = ({
                   type="button"
                   role="menuitem"
                   className={`${styles.caseMenuItem} ${styles.caseMenuItemDelete}`}
-                  disabled={!hasLoadedCase || disableLongRunningCaseActions || isReadOnly}
+                  disabled={!hasLoadedCase || disableLongRunningCaseActions || isReviewOnlyCase}
                   title={
-                    isReadOnly
+                    isReviewOnlyCase
                       ? 'Clear the read-only case first before deleting'
                       : !hasLoadedCase
                         ? 'Load a case to delete it'
@@ -370,7 +375,15 @@ export const Navbar = ({
             className={`${styles.navSectionButton} ${isImageNotesActive ? styles.navSectionButtonActive : ''}`}
             disabled={!canOpenImageNotes}
             aria-pressed={isImageNotesActive}
-            title={!hasLoadedImage ? 'Load an image to enable image notes' : isCurrentImageConfirmed ? 'Confirmed images are read-only and viewable via toolbar only' : undefined}
+            title={
+              !hasLoadedImage
+                ? 'Load an image to enable image notes'
+                : isCurrentImageConfirmed
+                  ? 'Confirmed images are read-only and viewable via toolbar only'
+                  : isReadOnly
+                    ? 'Image notes are disabled for read-only cases'
+                    : undefined
+            }
             onClick={() => {
               onOpenImageNotes?.();
             }}