From 12c3eba59cc052847b293b949d8ebd8b5bf426db Mon Sep 17 00:00:00 2001
From: "Simms, Andrew" <Andrew.Simms@nrel.gov>
Date: Sat, 7 Feb 2026 10:45:12 -0700
Subject: [PATCH 01/44] Template: Simplify upload template to only support file
 browser

---
 app/templates/index.html | 123 ++++++++++++---------------------------
 1 file changed, 37 insertions(+), 86 deletions(-)

diff --git a/app/templates/index.html b/app/templates/index.html
index f69633f..afcfafa 100644
--- a/app/templates/index.html
+++ b/app/templates/index.html
@@ -10,7 +10,7 @@
     <div class="flex items-center justify-between">
         <div>
             <h1 class="text-2xl font-bold text-gray-900">Upload MCAP Files</h1>
-            <p class="text-gray-600 mt-1">Drag and drop files or select a folder to upload to S3</p>
+            <p class="text-gray-600 mt-1">Select a folder to upload MCAP files to MODAQ Cloud (NLR AWS S3)</p>
         </div>
     </div>
 
@@ -80,97 +80,48 @@ <h1 class="text-2xl font-bold text-gray-900">Upload MCAP Files</h1>
         </div>
     </div>
 
-    <!-- Drop Zone -->
-    <div id="drop-zone"
-         class="drop-zone border-2 border-dashed border-gray-300 rounded-lg p-12 text-center cursor-pointer hover:border-nrel-blue transition-colors">
-        <svg class="mx-auto h-16 w-16 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                  d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
-        </svg>
-        <p class="mt-4 text-lg text-gray-600">Drop MCAP files here</p>
-        <p class="mt-2 text-sm text-gray-500">or click to select files</p>
-        <input type="file" id="file-input" multiple accept=".mcap" class="hidden">
-
-        <!-- Folder selection -->
-        <div class="mt-4 pt-4 border-t border-gray-200">
-            <button id="folder-btn"
-                    class="px-6 py-3 bg-nrel-blue text-white rounded-md hover:bg-nrel-blue-light transition-colors">
-                Select Folder
-            </button>
-            <p class="mt-2 text-xs text-gray-400">
-                Browse and select a folder containing MCAP files
-            </p>
+    <!-- Inline Folder Browser -->
+    <div id="folder-browser-panel" class="bg-white rounded-lg shadow overflow-hidden">
+        <!-- Quick Links -->
+        <div id="folder-quick-links" class="px-6 py-2 bg-gray-50 border-b border-gray-200 flex items-center space-x-2 overflow-x-auto">
+            <!-- Quick links will be inserted here -->
         </div>
-    </div>
 
-    <!-- Folder Browser Modal -->
-    <div id="folder-browser-modal" class="hidden fixed inset-0 z-50 overflow-y-auto">
-        <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:p-0">
-            <!-- Backdrop -->
-            <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"></div>
-
-            <!-- Modal Panel -->
-            <div class="relative bg-white rounded-lg shadow-xl transform transition-all sm:max-w-4xl sm:w-full">
-                <!-- Header -->
-                <div class="px-6 py-4 border-b border-gray-200 flex items-center justify-between">
-                    <h3 class="text-lg font-semibold text-gray-900">Select Folder</h3>
-                    <button id="close-folder-browser" class="text-gray-400 hover:text-gray-600">
-                        <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-                        </svg>
-                    </button>
-                </div>
-
-                <!-- Quick Links -->
-                <div id="folder-quick-links" class="px-6 py-2 bg-gray-50 border-b border-gray-200 flex items-center space-x-2 overflow-x-auto">
-                    <!-- Quick links will be inserted here -->
-                </div>
-
-                <!-- Breadcrumb Navigation -->
-                <div class="px-6 py-2 bg-gray-50 border-b border-gray-200">
-                    <div id="folder-breadcrumb" class="flex items-center space-x-1 text-sm overflow-x-auto">
-                        <!-- Breadcrumbs will be inserted here -->
-                    </div>
-                </div>
-
-                <!-- Current Path Info -->
-                <div class="px-6 py-2 bg-blue-50 border-b border-gray-200 flex items-center justify-between">
-                    <span class="text-sm text-blue-800" title="Does not include files in subfolders">
-                        <span id="folder-mcap-count">0</span> MCAP files in this folder (not subfolders)
-                    </span>
-                    <button id="select-current-folder"
-                            class="px-4 py-1 bg-nrel-green text-white text-sm rounded-md hover:bg-nrel-green-light transition-colors disabled:opacity-50 disabled:cursor-not-allowed">
-                        Select This Folder
-                    </button>
-                </div>
+        <!-- Breadcrumb Navigation -->
+        <div class="px-6 py-2 bg-gray-50 border-b border-gray-200">
+            <div id="folder-breadcrumb" class="flex items-center space-x-1 text-sm overflow-x-auto">
+                <!-- Breadcrumbs will be inserted here -->
+            </div>
+        </div>
 
-                <!-- Folder List -->
-                <div id="folder-list" class="max-h-96 overflow-y-auto divide-y divide-gray-200">
-                    <!-- Folders will be inserted here -->
-                </div>
+        <!-- Current Path Info -->
+        <div class="px-6 py-2 bg-blue-50 border-b border-gray-200 flex items-center justify-between">
+            <span class="text-sm text-blue-800" title="Does not include files in subfolders">
+                <span id="folder-mcap-count">0</span> MCAP files in this folder (not subfolders)
+            </span>
+            <button id="select-current-folder"
+                    class="px-4 py-1 bg-nrel-green text-white text-sm rounded-md hover:bg-nrel-green-light transition-colors disabled:opacity-50 disabled:cursor-not-allowed">
+                Select This Folder
+            </button>
+        </div>
 
-                <!-- Loading State -->
-                <div id="folder-loading" class="hidden p-8 text-center">
-                    <svg class="spinner h-8 w-8 mx-auto text-nrel-blue" fill="none" viewBox="0 0 24 24">
-                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-                    </svg>
-                    <p class="mt-2 text-gray-500">Loading...</p>
-                </div>
+        <!-- Folder List -->
+        <div id="folder-list" class="max-h-96 overflow-y-auto divide-y divide-gray-200">
+            <!-- Folders will be inserted here -->
+        </div>
 
-                <!-- Error State -->
-                <div id="folder-error" class="hidden p-8 text-center">
-                    <p class="text-red-600" id="folder-error-message">Error loading folder</p>
-                </div>
+        <!-- Loading State -->
+        <div id="folder-loading" class="hidden p-8 text-center">
+            <svg class="spinner h-8 w-8 mx-auto text-nrel-blue" fill="none" viewBox="0 0 24 24">
+                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+            </svg>
+            <p class="mt-2 text-gray-500">Loading...</p>
+        </div>
 
-                <!-- Footer -->
-                <div class="px-6 py-4 border-t border-gray-200 flex justify-end space-x-3">
-                    <button id="cancel-folder-browser"
-                            class="px-4 py-2 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 transition-colors">
-                        Cancel
-                    </button>
-                </div>
-            </div>
+        <!-- Error State -->
+        <div id="folder-error" class="hidden p-8 text-center">
+            <p class="text-red-600" id="folder-error-message">Error loading folder</p>
         </div>
     </div>
 

From 0003360acf6766da80a57fa50f7770d5150183d4 Mon Sep 17 00:00:00 2001
From: "Simms, Andrew" <Andrew.Simms@nrel.gov>
Date: Sat, 7 Feb 2026 10:53:24 -0700
Subject: [PATCH 02/44] JS: Simplify upload flow on initial upload screen

---
 app/static/js/modules/analysis.js       | 122 ++----------------------
 app/static/js/modules/file-handler.js   | 106 --------------------
 app/static/js/modules/folder-browser.js |  48 ++--------
 app/static/js/modules/upload-control.js |   5 +-
 app/static/js/modules/upload-init.js    |  71 ++------------
 5 files changed, 21 insertions(+), 331 deletions(-)
 delete mode 100644 app/static/js/modules/file-handler.js

diff --git a/app/static/js/modules/analysis.js b/app/static/js/modules/analysis.js
index b2bf3f6..ff744a8 100644
--- a/app/static/js/modules/analysis.js
+++ b/app/static/js/modules/analysis.js
@@ -1,9 +1,8 @@
 /**
- * File analysis/validation (Step 3) and handleFiles entry point.
+ * File analysis/validation (Step 3).
  */
 import state from './state.js';
-import { STEP_3_VALIDATED, setUploadStep, showUploadSteps } from './stepper.js';
-import { resetUpload } from './upload-control.js';
+import { STEP_3_VALIDATED, setUploadStep } from './stepper.js';
 import { connectProgressStream, showCompletionSummary, updateProgressUI } from './upload-exec.js';
 import { formatBytes, showNotification } from './utils.js';
 
@@ -23,18 +22,18 @@ export async function checkForActiveJob() {
 
     if (job.status === 'analyzing') {
       setUploadStep(3);
-      document.getElementById('drop-zone')?.classList.add('hidden');
+      document.getElementById('folder-browser-panel')?.classList.add('hidden');
       document.getElementById('analysis-section')?.classList.remove('hidden');
       initializeAnalysisTableFromJob(job);
       connectAnalysisProgressStream(state.currentJobId);
     } else if (job.status === 'ready') {
       setUploadStep(3);
-      document.getElementById('drop-zone')?.classList.add('hidden');
+      document.getElementById('folder-browser-panel')?.classList.add('hidden');
       document.getElementById('analysis-section')?.classList.remove('hidden');
       displayAnalysisResults(job);
     } else if (job.status === 'uploading') {
       setUploadStep(4);
-      document.getElementById('drop-zone')?.classList.add('hidden');
+      document.getElementById('folder-browser-panel')?.classList.add('hidden');
       document.getElementById('progress-section')?.classList.remove('hidden');
       connectProgressStream();
     } else if (
@@ -43,7 +42,7 @@ export async function checkForActiveJob() {
       job.status === 'cancelled'
     ) {
       setUploadStep(5);
-      document.getElementById('drop-zone')?.classList.add('hidden');
+      document.getElementById('folder-browser-panel')?.classList.add('hidden');
       document.getElementById('completion-section')?.classList.remove('hidden');
       showCompletionSummary(job);
     }
@@ -118,115 +117,6 @@ function initializeAnalysisTableFromJob(job) {
   if (uploadBtn) uploadBtn.disabled = true;
 }
 
-/**
- * Handle files from drag-drop or file input.
- * @param {File[]} files
- */
-export async function handleFiles(files) {
-  const formData = new FormData();
-  for (const file of files) {
-    formData.append('files', file);
-  }
-
-  showUploadSteps(3);
-
-  document.getElementById('drop-zone')?.classList.add('hidden');
-  document.getElementById('analysis-section')?.classList.remove('hidden');
-
-  initializeAnalysisTable(files);
-
-  try {
-    const response = await fetch('/api/upload/analyze', {
-      method: 'POST',
-      body: formData,
-    });
-
-    const data = await response.json();
-
-    if (!response.ok && response.status !== 202) {
-      throw new Error(data.error || 'Analysis failed');
-    }
-
-    state.currentJobId = data.job_id;
-
-    if (response.status === 202) {
-      connectAnalysisProgressStream(data.job_id);
-    } else {
-      displayAnalysisResults(data);
-    }
-  } catch (error) {
-    showNotification(/** @type {Error} */ (error).message, 'error');
-    resetUpload();
-  }
-}
-
-/**
- * Initialize the analysis table with placeholder rows.
- * @param {File[]} files
- */
-function initializeAnalysisTable(files) {
-  const tbody = document.getElementById('file-table-body');
-  if (!tbody) return;
-
-  tbody.innerHTML = files
-    .map(
-      (file) => `
-        <tr class="file-item" data-filename="${file.name}" data-is-analyzed="false" data-is-duplicate="false">
-            <td class="px-4 py-3">
-                <div class="flex items-center min-w-0">
-                    <svg class="h-5 w-5 text-gray-400 mr-2 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                              d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
-                    </svg>
-                    <span class="text-sm font-medium text-gray-900 truncate" title="${file.name}">${file.name}</span>
-                </div>
-            </td>
-            <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">${formatBytes(file.size)}</td>
-            <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">-</td>
-            <td class="px-4 py-3 text-sm text-gray-500 truncate">-</td>
-            <td class="px-4 py-3 whitespace-nowrap">
-                <span class="px-2 py-1 text-xs rounded-full bg-blue-100 text-blue-800 inline-flex items-center">
-                    <svg class="spinner h-3 w-3 mr-1" fill="none" viewBox="0 0 24 24">
-                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-                    </svg>
-                    Analyzing
-                </span>
-            </td>
-        </tr>
-    `,
-    )
-    .join('');
-
-  const totalFiles = document.getElementById('total-files');
-  if (totalFiles) totalFiles.textContent = String(files.length);
-
-  const totalSize = document.getElementById('total-size');
-  if (totalSize) totalSize.textContent = formatBytes(files.reduce((sum, f) => sum + f.size, 0));
-
-  const duplicateCount = document.getElementById('duplicate-count');
-  if (duplicateCount) duplicateCount.textContent = '0';
-
-  const uploadBtn = /** @type {HTMLButtonElement | null} */ (document.getElementById('upload-btn'));
-  if (uploadBtn) uploadBtn.disabled = true;
-
-  const analysisCompleted = document.getElementById('analysis-completed');
-  if (analysisCompleted) analysisCompleted.textContent = '0';
-
-  const analysisTotal = document.getElementById('analysis-total');
-  if (analysisTotal) analysisTotal.textContent = String(files.length);
-
-  const analysisPercent = document.getElementById('analysis-percent');
-  if (analysisPercent) analysisPercent.textContent = '0%';
-
-  const analysisProgressBar = /** @type {HTMLElement | null} */ (
-    document.getElementById('analysis-progress-bar')
-  );
-  if (analysisProgressBar) analysisProgressBar.style.width = '0%';
-
-  document.getElementById('analysis-progress')?.classList.remove('hidden');
-}
-
 /**
  * Initialize analysis table from file paths (folder upload).
  * @param {string[]} filePaths
diff --git a/app/static/js/modules/file-handler.js b/app/static/js/modules/file-handler.js
deleted file mode 100644
index bc7b885..0000000
--- a/app/static/js/modules/file-handler.js
+++ /dev/null
@@ -1,106 +0,0 @@
-/**
- * File extraction from drag-and-drop and file input.
- */
-
-/**
- * Recursively read all files from a FileSystemDirectoryHandle.
- * @param {FileSystemDirectoryHandle} dirHandle
- * @param {string} [path]
- * @returns {Promise<File[]>}
- */
-export async function readDirectoryRecursively(dirHandle, path = '') {
-  const files = [];
-
-  // @ts-ignore — FileSystemDirectoryHandle async iteration not in all TS DOM libs
-  for await (const [name, handle] of dirHandle) {
-    if (handle.kind === 'file') {
-      const file = await handle.getFile();
-      file.relativePath = path + name;
-      files.push(file);
-    } else if (handle.kind === 'directory') {
-      const subFiles = await readDirectoryRecursively(handle, `${path}${name}/`);
-      files.push(...subFiles);
-    }
-  }
-
-  return files;
-}
-
-/**
- * Extract all files from dropped items, recursively scanning folders.
- * @param {DataTransferItemList} items
- * @returns {Promise<File[]>}
- */
-export async function extractFilesFromDrop(items) {
-  const files = [];
-  const entries = [];
-
-  for (let i = 0; i < items.length; i++) {
-    const item = items[i];
-    if (item.kind === 'file') {
-      const entry = item.webkitGetAsEntry ? item.webkitGetAsEntry() : null;
-      if (entry) {
-        entries.push(entry);
-      } else {
-        const file = item.getAsFile();
-        if (file) files.push(file);
-      }
-    }
-  }
-
-  for (const entry of entries) {
-    const entryFiles = await readEntryRecursively(entry);
-    files.push(...entryFiles);
-  }
-
-  return files;
-}
-
-/**
- * Recursively read a FileSystemEntry (file or directory).
- * @param {FileSystemEntry} entry
- * @returns {Promise<File[]>}
- */
-async function readEntryRecursively(entry) {
-  if (entry.isFile) {
-    return new Promise((resolve) => {
-      /** @type {FileSystemFileEntry} */ (entry).file(
-        (file) => resolve([file]),
-        () => resolve([]),
-      );
-    });
-  }
-
-  if (entry.isDirectory) {
-    const files = [];
-    const reader = /** @type {FileSystemDirectoryEntry} */ (entry).createReader();
-
-    const readAllEntries = async () => {
-      const allEntries = [];
-      const readBatch = () =>
-        new Promise((resolve) => {
-          reader.readEntries(
-            (batch) => resolve(batch),
-            () => resolve([]),
-          );
-        });
-
-      let batch;
-      do {
-        batch = await readBatch();
-        allEntries.push(...batch);
-      } while (batch.length > 0);
-
-      return allEntries;
-    };
-
-    const childEntries = await readAllEntries();
-    for (const child of childEntries) {
-      const childFiles = await readEntryRecursively(child);
-      files.push(...childFiles);
-    }
-    return files;
-  }
-
-  return [];
-}
diff --git a/app/static/js/modules/folder-browser.js b/app/static/js/modules/folder-browser.js
index 3c7234d..02d6da0 100644
--- a/app/static/js/modules/folder-browser.js
+++ b/app/static/js/modules/folder-browser.js
@@ -1,32 +1,17 @@
 import { connectAnalysisProgressStream, initializeAnalysisTableFromPaths } from './analysis.js';
 /**
- * Folder browser modal and scan results for folder-based upload.
+ * Inline folder browser and scan results for folder-based upload.
  */
 import state from './state.js';
 import { setUploadStep, showUploadSteps } from './stepper.js';
 import { formatBytes, showNotification } from './utils.js';
 
 /**
- * Initialize folder browser modal handlers.
+ * Initialize the inline folder browser and auto-load initial folder.
  */
-export function initFolderBrowser() {
-  const modal = document.getElementById('folder-browser-modal');
-  if (!modal) return;
-
-  document.getElementById('close-folder-browser')?.addEventListener('click', closeFolderBrowser);
-  document.getElementById('cancel-folder-browser')?.addEventListener('click', closeFolderBrowser);
-
-  modal.addEventListener('click', (e) => {
-    if (e.target === modal.querySelector('.fixed.inset-0')) {
-      closeFolderBrowser();
-    }
-  });
-
-  document.addEventListener('keydown', (e) => {
-    if (e.key === 'Escape' && !modal.classList.contains('hidden')) {
-      closeFolderBrowser();
-    }
-  });
+export async function initFolderBrowser() {
+  const panel = document.getElementById('folder-browser-panel');
+  if (!panel) return;
 
   document.getElementById('select-current-folder')?.addEventListener('click', selectCurrentFolder);
 
@@ -66,24 +51,9 @@ export function initFolderBrowser() {
       }
     });
   }
-}
-
-export function closeFolderBrowser() {
-  const modal = document.getElementById('folder-browser-modal');
-  if (modal) modal.classList.add('hidden');
-  document.body.style.overflow = '';
-}
-
-/**
- * Open the folder browser modal.
- */
-export async function openFolderBrowser() {
-  const modal = document.getElementById('folder-browser-modal');
-  if (modal) modal.classList.remove('hidden');
-  document.body.style.overflow = 'hidden';
 
+  // Auto-load: use last folder or default from settings
   const lastFolder = localStorage.getItem('lastUploadFolder');
-
   if (lastFolder) {
     loadFolderBrowser(lastFolder);
   } else {
@@ -296,8 +266,6 @@ async function selectCurrentFolder() {
     state.selectedFolderPath = folderPath;
     localStorage.setItem('lastUploadFolder', folderPath);
 
-    closeFolderBrowser();
-
     const prefilterResponse = await fetch('/api/upload/bulk-analyze', {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
@@ -325,7 +293,7 @@ async function selectCurrentFolder() {
  */
 function showScanResults(scanData, prefilterStats) {
   const scanSection = document.getElementById('scan-results-section');
-  const dropZone = document.getElementById('drop-zone');
+  const browserPanel = document.getElementById('folder-browser-panel');
 
   showUploadSteps(2);
 
@@ -369,7 +337,7 @@ function showScanResults(scanData, prefilterStats) {
     startBtn.disabled = (prefilterStats.to_analyze || scanData.total_count) === 0;
   }
 
-  if (dropZone) dropZone.classList.add('hidden');
+  if (browserPanel) browserPanel.classList.add('hidden');
   if (scanSection) scanSection.classList.remove('hidden');
 }
 
diff --git a/app/static/js/modules/upload-control.js b/app/static/js/modules/upload-control.js
index 42c3cef..e0931ca 100644
--- a/app/static/js/modules/upload-control.js
+++ b/app/static/js/modules/upload-control.js
@@ -30,15 +30,12 @@ export function resetUpload() {
 
   hideUploadSteps();
 
-  document.getElementById('drop-zone')?.classList.remove('hidden');
+  document.getElementById('folder-browser-panel')?.classList.remove('hidden');
   document.getElementById('analysis-section')?.classList.add('hidden');
   document.getElementById('progress-section')?.classList.add('hidden');
   document.getElementById('completion-section')?.classList.add('hidden');
   document.getElementById('scan-results-section')?.classList.add('hidden');
 
-  const fileInput = /** @type {HTMLInputElement | null} */ (document.getElementById('file-input'));
-  if (fileInput) fileInput.value = '';
-
   state.selectedFolderPath = null;
   state.scanFilePaths = [];
 }
diff --git a/app/static/js/modules/upload-init.js b/app/static/js/modules/upload-init.js
index 1e09a22..b69ac7c 100644
--- a/app/static/js/modules/upload-init.js
+++ b/app/static/js/modules/upload-init.js
@@ -1,6 +1,5 @@
-import { applyUploadedFilter, checkForActiveJob, handleFiles } from './analysis.js';
-import { extractFilesFromDrop } from './file-handler.js';
-import { initFolderBrowser, openFolderBrowser, startDirectUpload } from './folder-browser.js';
+import { applyUploadedFilter, checkForActiveJob } from './analysis.js';
+import { initFolderBrowser, startDirectUpload } from './folder-browser.js';
 /**
  * Upload page initialization and event wiring.
  */
@@ -8,75 +7,16 @@ import state from './state.js';
 import { setUploadStep } from './stepper.js';
 import { cancelAnalysis, cancelUpload, resetUpload } from './upload-control.js';
 import { startUpload } from './upload-exec.js';
-import { showNotification } from './utils.js';
 
 export function initUpload() {
-  const dropZone = document.getElementById('drop-zone');
-  const fileInput = /** @type {HTMLInputElement | null} */ (document.getElementById('file-input'));
-  const folderBtn = document.getElementById('folder-btn');
-
-  if (!dropZone) return;
+  const panel = document.getElementById('folder-browser-panel');
+  if (!panel) return;
 
   initFolderBrowser();
 
   setUploadStep(1);
   checkForActiveJob();
 
-  folderBtn?.addEventListener('click', (e) => {
-    e.preventDefault();
-    e.stopPropagation();
-    e.stopImmediatePropagation();
-    openFolderBrowser();
-  });
-
-  dropZone.addEventListener('click', (e) => {
-    if (
-      /** @type {HTMLElement} */ (e.target).id === 'folder-btn' ||
-      /** @type {HTMLElement} */ (e.target).closest('#folder-btn')
-    ) {
-      return;
-    }
-    fileInput?.click();
-  });
-
-  fileInput?.addEventListener('change', () => {
-    if (fileInput.files && fileInput.files.length > 0) {
-      handleFiles(Array.from(fileInput.files));
-    }
-  });
-
-  dropZone.addEventListener('dragover', (e) => {
-    e.preventDefault();
-    dropZone.classList.add('drag-over');
-  });
-
-  dropZone.addEventListener('dragleave', () => {
-    dropZone.classList.remove('drag-over');
-  });
-
-  dropZone.addEventListener('drop', async (e) => {
-    e.preventDefault();
-    dropZone.classList.remove('drag-over');
-
-    const items = e.dataTransfer?.items;
-    if (items && items.length > 0) {
-      const files = await extractFilesFromDrop(items);
-      const mcapFiles = files.filter((f) => f.name.endsWith('.mcap'));
-      if (mcapFiles.length > 0) {
-        handleFiles(mcapFiles);
-      } else {
-        showNotification('No MCAP files found in dropped items', 'error');
-      }
-    } else {
-      const files = Array.from(e.dataTransfer?.files || []).filter((f) => f.name.endsWith('.mcap'));
-      if (files.length > 0) {
-        handleFiles(files);
-      } else {
-        showNotification('Please drop MCAP files only', 'error');
-      }
-    }
-  });
-
   document.getElementById('upload-btn')?.addEventListener('click', startUpload);
   document.getElementById('cancel-analyze-btn')?.addEventListener('click', cancelAnalysis);
   document.getElementById('cancel-upload-btn')?.addEventListener('click', cancelUpload);
@@ -87,7 +27,8 @@ export function initUpload() {
   document.getElementById('start-upload-btn')?.addEventListener('click', startDirectUpload);
   document.getElementById('cancel-scan-btn')?.addEventListener('click', () => {
     document.getElementById('scan-results-section')?.classList.add('hidden');
-    document.getElementById('drop-zone')?.classList.remove('hidden');
+    document.getElementById('folder-browser-panel')?.classList.remove('hidden');
     state.selectedFolderPath = null;
+    setUploadStep(1);
   });
 }

From 83bc89e01ad65c5b5fde50935632c94a7d8f5871 Mon Sep 17 00:00:00 2001
From: "Simms, Andrew" <Andrew.Simms@nrel.gov>
Date: Sun, 8 Feb 2026 09:59:21 -0700
Subject: [PATCH 03/44] Ignore: App generated logs

---
 .gitignore | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/.gitignore b/.gitignore
index 77ff673..447eb83 100644
--- a/.gitignore
+++ b/.gitignore
@@ -5,6 +5,9 @@ settings.json
 # SQLite cache
 modaq_upload_cache.db
 
+# Log files
+logs/
+
 # Python
 __pycache__/
 *.py[cod]

From 8eaa3930aa7945a67544135931b464678d9e0361 Mon Sep 17 00:00:00 2001
From: "Simms, Andrew" <Andrew.Simms@nrel.gov>
Date: Sun, 8 Feb 2026 10:03:08 -0700
Subject: [PATCH 04/44] Settings: Add logs to settings

---
 settings.default.json | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/settings.default.json b/settings.default.json
index cf60731..7b271cb 100644
--- a/settings.default.json
+++ b/settings.default.json
@@ -2,5 +2,6 @@
     "aws_profile": "default",
     "aws_region": "us-west-2",
     "s3_bucket": "",
-    "default_upload_folder": ""
+    "default_upload_folder": "",
+    "log_directory": "logs"
 }

From c2939415f6e0d815fedceddb7c02f6931ead5bff Mon Sep 17 00:00:00 2001
From: "Simms, Andrew" <Andrew.Simms@nrel.gov>
Date: Sun, 8 Feb 2026 10:03:53 -0700
Subject: [PATCH 05/44] Templates: Refactor to use nlr prefix

---
 app/templates/base.html     |  92 +++++++------
 app/templates/files.html    |  18 +--
 app/templates/index.html    | 264 +++++++++++++++++-------------------
 app/templates/settings.html |  22 +--
 4 files changed, 192 insertions(+), 204 deletions(-)

diff --git a/app/templates/base.html b/app/templates/base.html
index 298c4f8..bbdf0aa 100644
--- a/app/templates/base.html
+++ b/app/templates/base.html
@@ -46,12 +46,12 @@
         }
 
         /* Header styles matching NLR branding */
-        .nrel-header {
+        .nlr-header {
             background: #fff;
             width: 100%;
         }
 
-        .nrel-header-top {
+        .nlr-header-top {
             display: flex;
             align-items: center;
             justify-content: space-between;
@@ -61,25 +61,25 @@
             padding: 0 15px;
         }
 
-        .nrel-header-title {
+        .nlr-header-title {
             font-weight: normal;
             color: #212224;
             font-size: 24px;
             letter-spacing: 0.5px;
         }
 
-        .nrel-logo-image {
+        .nlr-logo-image {
             width: 200px;
         }
 
         /* Menu bar styles */
-        .nrel-menu-bar {
+        .nlr-menu-bar {
             background: #EDEDED;
             border-top: 1px solid #D6D4D4;
             height: 50px;
         }
 
-        .nrel-menu-container {
+        .nlr-menu-container {
             max-width: 1140px;
             margin: 0 auto;
             display: flex;
@@ -88,7 +88,7 @@
             padding: 0 15px;
         }
 
-        .nrel-menu-item {
+        .nlr-menu-item {
             color: #2F2F2F;
             padding: 14px 20px;
             font-size: 14px;
@@ -96,40 +96,40 @@
             transition: all 0.2s;
         }
 
-        .nrel-menu-item:hover,
-        .nrel-menu-item.active {
+        .nlr-menu-item:hover,
+        .nlr-menu-item.active {
             background: #5E6A71;
             color: #fff;
         }
 
         /* Footer styles matching NLR branding */
-        .nrel-footer {
+        .nlr-footer {
             background-color: #E3E6E8;
             font-size: 14px;
             font-weight: 400;
             line-height: 1.2;
         }
 
-        .nrel-footer-top {
+        .nlr-footer-top {
             background-color: #D1D5D8;
             padding: 1.5em 0;
         }
 
-        .nrel-footer-bottom {
+        .nlr-footer-bottom {
             padding: 1.5em 0 3em 0;
         }
 
-        .nrel-footer a {
+        .nlr-footer a {
             color: #000;
             text-decoration: none;
         }
 
-        .nrel-footer a:hover {
+        .nlr-footer a:hover {
             color: #C60;
             text-decoration: underline;
         }
 
-        .nrel-attr {
+        .nlr-attr {
             font-size: 12px;
         }
 
@@ -144,7 +144,12 @@
 
         /* Progress bar animation */
         .progress-bar {
-            transition: width 0.3s ease;
+            transition: width 0.4s ease-out;
+        }
+
+        /* Phase label fade transition */
+        #upload-phase-label {
+            transition: opacity 0.15s ease;
         }
 
         /* File item hover effect */
@@ -210,29 +215,29 @@
 
         /* Responsive adjustments */
         @media (max-width: 991px) {
-            .nrel-header-top {
+            .nlr-header-top {
                 max-width: 720px;
             }
-            .nrel-menu-container {
+            .nlr-menu-container {
                 max-width: 720px;
             }
         }
 
         @media (max-width: 767px) {
-            .nrel-header-top {
+            .nlr-header-top {
                 flex-direction: column;
                 height: auto;
                 padding: 15px;
                 text-align: center;
             }
-            .nrel-header-title {
+            .nlr-header-title {
                 font-size: 20px;
                 margin-top: 10px;
             }
-            .nrel-logo-image {
+            .nlr-logo-image {
                 width: 180px;
             }
-            .nrel-menu-item {
+            .nlr-menu-item {
                 padding: 12px 15px;
                 font-size: 13px;
             }
@@ -243,38 +248,39 @@
 </head>
 <body class="bg-gray-50 min-h-screen flex flex-col font-roboto" {% block body_attrs %}{% endblock %}>
     <!-- NLR Header -->
-    <header class="nrel-header">
+    <header class="nlr-header">
         <!-- Top section with title and logo -->
-        <div class="nrel-header-top">
-            <h1 class="nrel-header-title">{{ display_name }}</h1>
+        <div class="nlr-header-top">
+            <h1 class="nlr-header-title">{{ display_name }}</h1>
             <a href="https://www.nlr.gov" target="_blank" rel="noopener noreferrer">
-                <img src="{{ url_for('static', filename='images/nrel-logo@2x-01.png') }}"
+                <img src="{{ url_for('static', filename='images/nlr-logo@2x-01.png') }}"
                      alt="National Laboratory of the Rockies"
-                     class="nrel-logo-image">
+                     class="nlr-logo-image">
             </a>
         </div>
 
         <!-- Navigation menu bar -->
-        <nav class="nrel-menu-bar">
-            <div class="nrel-menu-container">
+        <nav class="nlr-menu-bar">
+            <div class="nlr-menu-container">
                 <a href="{{ url_for('main.index') }}"
-                   class="nrel-menu-item {% if request.endpoint == 'main.index' %}active{% endif %}">
+                   class="nlr-menu-item {% if request.endpoint == 'main.index' %}active{% endif %}">
                     Upload
                 </a>
                 <a href="{{ url_for('main.files') }}"
-                   class="nrel-menu-item {% if request.endpoint == 'main.files' %}active{% endif %}">
+                   class="nlr-menu-item {% if request.endpoint == 'main.files' %}active{% endif %}">
                     Browse Uploaded Files
                 </a>
-                <a href="{{ url_for('main.settings') }}"
-                   class="nrel-menu-item {% if request.endpoint == 'main.settings' %}active{% endif %}">
-                    Settings
+                <a href="{{ url_for('main.logs') }}"
+                   class="nlr-menu-item {% if request.endpoint == 'main.logs' %}active{% endif %}">
+                    Logs
                 </a>
                 <!-- Spacer to push right-side items -->
                 <div class="flex-grow"></div>
                 <!-- Version badge (clickable to open About modal) -->
-                <button data-action="open-about" class="text-xs text-nrel-gray px-3 py-1 hover:text-nrel-blue transition-colors">
-                    v<span id="header-version">...</span>
-                </button>
+                <a href="{{ url_for('main.settings') }}"
+                   class="nlr-menu-item {% if request.endpoint == 'main.settings' %}active{% endif %}">
+                    Settings
+                </a>
             </div>
         </nav>
     </header>
@@ -301,9 +307,9 @@ <h1 class="nrel-header-title">{{ display_name }}</h1>
     </main>
 
     <!-- NLR Footer -->
-    <footer class="nrel-footer mt-auto">
+    <footer class="nlr-footer mt-auto">
         <!-- Footer Top -->
-        <div class="nrel-footer-top">
+        <div class="nlr-footer-top">
             <div class="max-w-5xl mx-auto px-4">
                 <div class="flex flex-col md:flex-row justify-between items-start md:items-center">
                     <div>
@@ -320,7 +326,7 @@ <h1 class="nrel-header-title">{{ display_name }}</h1>
         </div>
 
         <!-- Footer Bottom -->
-        <div class="nrel-footer-bottom">
+        <div class="nlr-footer-bottom">
             <div class="max-w-5xl mx-auto px-4">
                 <div class="flex flex-col md:flex-row justify-between items-center">
                     <div class="flex items-center gap-6 mb-4 md:mb-0">
@@ -335,7 +341,7 @@ <h1 class="nrel-header-title">{{ display_name }}</h1>
                                  class="h-10">
                         </a>
                     </div>
-                    <p class="nrel-attr text-center md:text-right max-w-md flex-grow">
+                    <p class="nlr-attr text-center md:text-right max-w-md flex-grow">
                         The National Laboratory of the Rockies is a national laboratory of the
                         U.S. Department of Energy, Office of Critical Minerals and Energy Innovation.
                     </p>
@@ -348,7 +354,7 @@ <h1 class="nrel-header-title">{{ display_name }}</h1>
     <div id="about-modal" class="fixed inset-0 bg-black bg-opacity-50 hidden z-50 flex items-center justify-center">
         <div class="bg-white rounded-lg shadow-xl max-w-sm w-full mx-4 overflow-hidden">
             <!-- Modal Header -->
-            <div class="bg-nrel-blue text-white px-6 py-4 flex justify-between items-center">
+            <div class="bg-nlr-blue text-white px-6 py-4 flex justify-between items-center">
                 <h2 class="text-lg font-semibold">About</h2>
                 <button data-action="close-about" class="text-white hover:text-gray-200">
                     <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -378,7 +384,7 @@ <h2 class="text-lg font-semibold">About</h2>
             <!-- Modal Footer -->
             <div class="bg-gray-50 px-6 py-3 flex justify-end">
                 <button data-action="close-about"
-                        class="px-4 py-2 bg-nrel-gray text-white rounded hover:bg-opacity-90 text-sm">
+                        class="px-4 py-2 bg-nlr-gray text-white rounded hover:bg-opacity-90 text-sm">
                     Close
                 </button>
             </div>
diff --git a/app/templates/files.html b/app/templates/files.html
index 99197c3..4330026 100644
--- a/app/templates/files.html
+++ b/app/templates/files.html
@@ -1,4 +1,5 @@
 {% extends "base.html" %}
+{% from "macros.html" import spinner %}
 
 {% block title %}Browse Uploaded Files - {{ super() }}{% endblock %}
 
@@ -16,14 +17,14 @@ <h1 class="text-2xl font-bold text-gray-900">S3 File Browser</h1>
             <!-- Search -->
             <div class="relative">
                 <input type="text" id="search-input" placeholder="Search files..."
-                       class="pl-10 pr-4 py-2 border border-gray-300 rounded-md focus:ring-nrel-blue focus:border-nrel-blue">
+                       class="pl-10 pr-4 py-2 border border-gray-300 rounded-md focus:ring-nlr-blue focus:border-nlr-blue">
                 <svg class="absolute left-3 top-2.5 h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                           d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                 </svg>
             </div>
             <button id="refresh-btn"
-                    class="px-4 py-2 bg-nrel-blue text-white rounded-md hover:bg-nrel-blue-light transition-colors">
+                    class="px-4 py-2 bg-nlr-blue text-white rounded-md hover:bg-nlr-blue-light transition-colors">
                 Refresh
             </button>
         </div>
@@ -33,7 +34,7 @@ <h1 class="text-2xl font-bold text-gray-900">S3 File Browser</h1>
     <div id="bucket-info" class="bg-white rounded-lg shadow p-4">
         <div class="flex items-center justify-between">
             <div class="flex items-center space-x-3">
-                <svg class="h-6 w-6 text-nrel-blue" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <svg class="h-6 w-6 text-nlr-blue" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                           d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4" />
                 </svg>
@@ -47,7 +48,7 @@ <h1 class="text-2xl font-bold text-gray-900">S3 File Browser</h1>
 
     <!-- Breadcrumb Navigation -->
     <nav id="breadcrumb" class="flex items-center space-x-2 text-sm">
-        <a href="#" data-prefix="" class="text-nrel-blue hover:underline">Root</a>
+        <a href="#" data-prefix="" class="text-nlr-blue hover:underline">Root</a>
         <!-- Breadcrumb items will be inserted here -->
     </nav>
 
@@ -55,12 +56,7 @@ <h1 class="text-2xl font-bold text-gray-900">S3 File Browser</h1>
     <div class="bg-white rounded-lg shadow overflow-hidden">
         <!-- Loading State -->
         <div id="loading-state" class="p-8 text-center">
-            <svg class="spinner h-8 w-8 mx-auto text-nrel-blue" fill="none" viewBox="0 0 24 24">
-                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-                <path class="opacity-75" fill="currentColor"
-                      d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-            </svg>
-            <p class="mt-2 text-gray-600">Loading files...</p>
+            {{ spinner("Loading files...") }}
         </div>
 
         <!-- Error State -->
@@ -71,7 +67,7 @@ <h1 class="text-2xl font-bold text-gray-900">S3 File Browser</h1>
             </svg>
             <p id="error-message" class="mt-2 text-red-600">An error occurred</p>
             <button id="retry-btn"
-                    class="mt-4 px-4 py-2 bg-nrel-blue text-white rounded-md hover:bg-nrel-blue-light transition-colors">
+                    class="mt-4 px-4 py-2 bg-nlr-blue text-white rounded-md hover:bg-nlr-blue-light transition-colors">
                 Retry
             </button>
         </div>
diff --git a/app/templates/index.html b/app/templates/index.html
index afcfafa..b9976bf 100644
--- a/app/templates/index.html
+++ b/app/templates/index.html
@@ -1,4 +1,5 @@
 {% extends "base.html" %}
+{% from "macros.html" import spinner, stat_card %}
 
 {% block title %}Upload Files - {{ super() }}{% endblock %}
 
@@ -40,30 +41,19 @@ <h1 class="text-2xl font-bold text-gray-900">Upload MCAP Files</h1>
                 <!-- Connector -->
                 <div class="step-connector flex-1 h-0.5 bg-gray-300 mx-3"></div>
 
-                <!-- Step 3: Validate -->
+                <!-- Step 3: Upload -->
                 <div class="flex items-center" data-step="3">
                     <div class="step-circle flex items-center justify-center w-8 h-8 rounded-full border-2 border-gray-300 bg-white text-gray-500 font-semibold text-sm">
                         3
                     </div>
-                    <span class="step-label ml-2 text-sm font-medium text-gray-500">Validate</span>
-                </div>
-
-                <!-- Connector -->
-                <div class="step-connector flex-1 h-0.5 bg-gray-300 mx-3"></div>
-
-                <!-- Step 4: Upload -->
-                <div class="flex items-center" data-step="4">
-                    <div class="step-circle flex items-center justify-center w-8 h-8 rounded-full border-2 border-gray-300 bg-white text-gray-500 font-semibold text-sm">
-                        4
-                    </div>
                     <span class="step-label ml-2 text-sm font-medium text-gray-500">Upload</span>
                 </div>
 
                 <!-- Connector -->
                 <div class="step-connector flex-1 h-0.5 bg-gray-300 mx-3"></div>
 
-                <!-- Step 5: Complete -->
-                <div class="flex items-center" data-step="5">
+                <!-- Step 4: Complete -->
+                <div class="flex items-center" data-step="4">
                     <div class="step-circle flex items-center justify-center w-8 h-8 rounded-full border-2 border-gray-300 bg-white text-gray-500 font-semibold text-sm">
                         <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
@@ -99,30 +89,61 @@ <h1 class="text-2xl font-bold text-gray-900">Upload MCAP Files</h1>
             <span class="text-sm text-blue-800" title="Does not include files in subfolders">
                 <span id="folder-mcap-count">0</span> MCAP files in this folder (not subfolders)
             </span>
-            <button id="select-current-folder"
-                    class="px-4 py-1 bg-nrel-green text-white text-sm rounded-md hover:bg-nrel-green-light transition-colors disabled:opacity-50 disabled:cursor-not-allowed">
-                Select This Folder
-            </button>
         </div>
 
-        <!-- Folder List -->
-        <div id="folder-list" class="max-h-96 overflow-y-auto divide-y divide-gray-200">
+        <!-- Folder List (subfolders) -->
+        <div id="folder-list" class="divide-y divide-gray-200">
             <!-- Folders will be inserted here -->
         </div>
 
+        <!-- File Table (MCAP files with sortable columns) -->
+        <div id="file-table-section" class="hidden">
+            <table class="w-full divide-y divide-gray-200">
+                <thead class="bg-gray-50" id="file-table-head">
+                    <tr>
+                        <th class="px-6 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer hover:bg-gray-100"
+                            data-file-sort="name">
+                            Filename <span class="file-sort-indicator"></span>
+                        </th>
+                        <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer hover:bg-gray-100 w-40"
+                            data-file-sort="mtime">
+                            Date Modified <span class="file-sort-indicator"></span>
+                        </th>
+                        <th class="px-4 py-2 text-right text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer hover:bg-gray-100 w-24"
+                            data-file-sort="size">
+                            Size <span class="file-sort-indicator"></span>
+                        </th>
+                    </tr>
+                </thead>
+                <tbody id="file-table-body" class="bg-white divide-y divide-gray-200">
+                    <!-- File rows will be inserted here -->
+                </tbody>
+            </table>
+        </div>
+
         <!-- Loading State -->
         <div id="folder-loading" class="hidden p-8 text-center">
-            <svg class="spinner h-8 w-8 mx-auto text-nrel-blue" fill="none" viewBox="0 0 24 24">
-                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-            </svg>
-            <p class="mt-2 text-gray-500">Loading...</p>
+            {{ spinner() }}
         </div>
 
         <!-- Error State -->
         <div id="folder-error" class="hidden p-8 text-center">
             <p class="text-red-600" id="folder-error-message">Error loading folder</p>
         </div>
+
+        <!-- Primary Upload Folder Action (sticky so it's visible with large file lists) -->
+        <div class="px-6 py-4 border-t border-gray-200 bg-white sticky bottom-0 flex items-center justify-between">
+            <span id="folder-select-summary" class="text-sm text-gray-600">
+                Navigate to the folder containing your MCAP files, then click Upload Folder.
+            </span>
+            <button id="select-folder-btn"
+                    class="px-8 py-3 bg-nlr-blue text-white text-base font-semibold rounded-lg shadow-md hover:bg-nlr-blue-light transition-colors disabled:bg-gray-300 disabled:text-gray-500 disabled:shadow-none disabled:cursor-not-allowed flex items-center">
+                <span>Upload This Folder</span>
+                <svg class="w-5 h-5 ml-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" />
+                </svg>
+            </button>
+        </div>
     </div>
 
     <!-- Scan Results (Step 2: Review) -->
@@ -135,18 +156,9 @@ <h2 class="text-lg font-semibold text-gray-900">Review Selected Files</h2>
 
             <div class="p-6 border-b border-gray-200">
                 <div class="grid grid-cols-3 gap-4 text-center mb-6">
-                    <div class="bg-gray-50 rounded-lg p-4">
-                        <div id="scan-total" class="text-2xl font-bold text-gray-700">0</div>
-                        <div class="text-sm text-gray-500">Total MCAP Files</div>
-                    </div>
-                    <div class="bg-green-50 rounded-lg p-4">
-                        <div id="scan-to-upload" class="text-2xl font-bold text-green-600">0</div>
-                        <div class="text-sm text-green-700">To Validate</div>
-                    </div>
-                    <div class="bg-yellow-50 rounded-lg p-4">
-                        <div id="scan-already-uploaded" class="text-2xl font-bold text-yellow-600">0</div>
-                        <div class="text-sm text-yellow-700">Already Uploaded</div>
-                    </div>
+                    {{ stat_card("scan-total", "Total MCAP Files", "gray") }}
+                    {{ stat_card("scan-total-volume", "Total Volume", "blue", "0 B") }}
+                    {{ stat_card("scan-already-uploaded", "Already Uploaded", "yellow") }}
                 </div>
 
                 <div class="flex justify-center space-x-4">
@@ -157,106 +169,47 @@ <h2 class="text-lg font-semibold text-gray-900">Review Selected Files</h2>
                         </svg>
                         <span>Back</span>
                     </button>
-                    <button id="start-upload-btn"
-                            class="px-6 py-2 bg-nrel-blue text-white rounded-md hover:bg-nrel-blue-light transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center">
-                        <span>Validate Files</span>
+                    <button id="continue-upload-btn"
+                            class="px-6 py-2 bg-nlr-blue text-white rounded-md hover:bg-nlr-blue-light transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center">
+                        <span>Continue</span>
                         <svg class="w-4 h-4 ml-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" />
                         </svg>
                     </button>
                 </div>
-                <p class="text-xs text-gray-500 mt-3 text-center">
-                    Validation extracts timestamps and checks for duplicates. You'll review results before uploading.
-                </p>
             </div>
 
-            <!-- File List -->
+            <!-- Sortable File Table -->
             <div class="px-6 py-3 bg-gray-50 border-b border-gray-200 flex items-center justify-between">
                 <span class="text-sm font-medium text-gray-700">Files</span>
                 <label class="flex items-center">
                     <input type="checkbox" id="scan-hide-uploaded"
-                           class="rounded border-gray-300 text-nrel-blue focus:ring-nrel-blue">
+                           class="rounded border-gray-300 text-nlr-blue focus:ring-nlr-blue">
                     <span class="ml-2 text-sm text-gray-600">Hide already uploaded</span>
                 </label>
             </div>
-            <div id="scan-file-list" class="max-h-96 overflow-y-auto divide-y divide-gray-200">
-                <!-- Files will be inserted here -->
-            </div>
-        </div>
-    </div>
-
-    <!-- Analysis Results (Step 3: Validate) -->
-    <div id="analysis-section" class="hidden">
-        <div class="bg-white rounded-lg shadow overflow-hidden">
-            <!-- Analysis Progress Bar -->
-            <div id="analysis-progress" class="px-6 py-3 bg-blue-50 border-b border-gray-200">
-                <div class="flex items-center justify-between mb-1">
-                    <span class="text-sm font-medium text-blue-800">
-                        Validating files: <span id="analysis-completed">0</span> / <span id="analysis-total">0</span>
-                    </span>
-                    <span class="text-sm text-blue-600" id="analysis-percent">0%</span>
-                </div>
-                <div class="w-full bg-blue-200 rounded-full h-2">
-                    <div id="analysis-progress-bar" class="bg-nrel-blue h-2 rounded-full transition-all duration-300" style="width: 0%"></div>
-                </div>
-            </div>
-
-            <div class="px-6 py-4 border-b border-gray-200 flex items-center justify-between">
-                <h2 class="text-lg font-semibold text-gray-900">File Validation</h2>
-                <div class="flex items-center space-x-4">
-                    <label class="flex items-center">
-                        <input type="checkbox" id="hide-uploaded"
-                               class="rounded border-gray-300 text-nrel-blue focus:ring-nrel-blue">
-                        <span class="ml-2 text-sm text-gray-600">Hide already uploaded</span>
-                    </label>
-                    <label class="flex items-center">
-                        <input type="checkbox" id="skip-duplicates" checked
-                               class="rounded border-gray-300 text-nrel-blue focus:ring-nrel-blue">
-                        <span class="ml-2 text-sm text-gray-600">Skip duplicates</span>
-                    </label>
-                    <button id="cancel-analyze-btn"
-                            class="px-4 py-2 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 transition-colors flex items-center">
-                        <svg class="w-4 h-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 17l-5-5m0 0l5-5m-5 5h12" />
-                        </svg>
-                        Back
-                    </button>
-                    <button id="upload-btn"
-                            class="px-4 py-2 bg-nrel-green text-white rounded-md hover:bg-nrel-green-light transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center">
-                        Upload Files
-                        <svg class="w-4 h-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" />
-                        </svg>
-                    </button>
-                </div>
-            </div>
-
-            <!-- Analysis Summary -->
-            <div id="analysis-summary" class="px-6 py-3 bg-gray-50 border-b border-gray-200">
-                <div class="flex items-center justify-between text-sm">
-                    <span class="text-gray-600">
-                        <span id="total-files">0</span> files selected
-                        (<span id="total-size">0 B</span>)
-                    </span>
-                    <span class="text-nrel-yellow">
-                        <span id="duplicate-count">0</span> duplicates found
-                    </span>
-                </div>
-            </div>
-
-            <!-- File Table -->
             <div class="overflow-x-auto">
                 <table class="w-full divide-y divide-gray-200 table-fixed">
                     <thead class="bg-gray-50">
                         <tr>
-                            <th class="w-1/4 px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">File</th>
-                            <th class="w-20 px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Size</th>
-                            <th class="w-32 px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Start Time</th>
-                            <th class="w-1/3 px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">S3 Path</th>
-                            <th class="w-24 px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
+                            <th class="w-1/4 px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer hover:bg-gray-100" data-sort="filename">
+                                Filename <span class="sort-indicator"></span>
+                            </th>
+                            <th class="w-1/4 px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer hover:bg-gray-100" data-sort="path">
+                                Path <span class="sort-indicator"></span>
+                            </th>
+                            <th class="w-1/6 px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer hover:bg-gray-100" data-sort="mtime">
+                                Date Modified <span class="sort-indicator"></span>
+                            </th>
+                            <th class="w-20 px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer hover:bg-gray-100" data-sort="size">
+                                Size <span class="sort-indicator"></span>
+                            </th>
+                            <th class="w-24 px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer hover:bg-gray-100" data-sort="status">
+                                Status <span class="sort-indicator"></span>
+                            </th>
                         </tr>
                     </thead>
-                    <tbody id="file-table-body" class="bg-white divide-y divide-gray-200">
+                    <tbody id="scan-file-list" class="bg-white divide-y divide-gray-200">
                         <!-- File rows will be inserted here -->
                     </tbody>
                 </table>
@@ -264,8 +217,8 @@ <h2 class="text-lg font-semibold text-gray-900">File Validation</h2>
         </div>
     </div>
 
-    <!-- Upload Progress (Step 4: Upload) -->
-    <div id="progress-section" class="hidden">
+    <!-- Combined Upload (Step 3: Validate + Upload) -->
+    <div id="upload-section" class="hidden">
         <div class="bg-white rounded-lg shadow overflow-hidden">
             <div class="px-6 py-4 border-b border-gray-200 flex items-center justify-between">
                 <h2 class="text-lg font-semibold text-gray-900">Upload Progress</h2>
@@ -275,6 +228,11 @@ <h2 class="text-lg font-semibold text-gray-900">Upload Progress</h2>
                 </button>
             </div>
 
+            <!-- Phase Label -->
+            <div id="upload-phase" class="px-6 py-2 bg-blue-50 border-b border-gray-200">
+                <span class="text-sm font-medium text-blue-800" id="upload-phase-label">Validating files...</span>
+            </div>
+
             <!-- Overall Progress -->
             <div class="px-6 py-4 border-b border-gray-200">
                 <div class="flex items-center justify-between mb-2">
@@ -287,42 +245,33 @@ <h2 class="text-lg font-semibold text-gray-900">Upload Progress</h2>
                     </span>
                 </div>
                 <div class="w-full bg-gray-200 rounded-full h-4">
-                    <div id="progress-bar" class="progress-bar bg-nrel-blue h-4 rounded-full" style="width: 0%"></div>
+                    <div id="progress-bar" class="progress-bar bg-nlr-blue h-4 rounded-full" style="width: 0%"></div>
                 </div>
                 <div class="mt-2 text-sm text-gray-500">
                     ETA: <span id="eta">Calculating...</span>
                 </div>
             </div>
 
-            <!-- File Progress List -->
-            <div id="progress-list" class="divide-y divide-gray-200 max-h-96 overflow-y-auto">
+            <!-- File Status List -->
+            <div id="upload-file-list" class="divide-y divide-gray-200 max-h-96 overflow-y-auto">
                 <!-- File progress items will be inserted here -->
             </div>
         </div>
     </div>
 
-    <!-- Completion Summary (Step 5: Complete) -->
+    <!-- Completion Summary (Step 4: Complete) -->
     <div id="completion-section" class="hidden">
         <div class="bg-white rounded-lg shadow overflow-hidden">
             <div class="px-6 py-4 border-b border-gray-200">
-                <h2 class="text-lg font-semibold text-gray-900">Upload Complete</h2>
+                <h2 class="text-lg font-semibold text-gray-900">Upload Summary</h2>
             </div>
 
             <div class="p-6">
                 <!-- File Status Summary -->
                 <div id="completion-summary" class="grid grid-cols-3 gap-6 text-center mb-6">
-                    <div class="bg-green-50 rounded-lg p-4">
-                        <div id="completed-count" class="text-3xl font-bold text-green-600">0</div>
-                        <div class="text-sm text-green-700">Uploaded</div>
-                    </div>
-                    <div class="bg-yellow-50 rounded-lg p-4">
-                        <div id="skipped-count" class="text-3xl font-bold text-yellow-600">0</div>
-                        <div class="text-sm text-yellow-700">Skipped</div>
-                    </div>
-                    <div class="bg-red-50 rounded-lg p-4">
-                        <div id="failed-count" class="text-3xl font-bold text-red-600">0</div>
-                        <div class="text-sm text-red-700">Failed</div>
-                    </div>
+                    {{ stat_card("completed-count", "Uploaded", "green", size="3xl") }}
+                    {{ stat_card("skipped-count", "Skipped", "yellow", size="3xl") }}
+                    {{ stat_card("failed-count", "Failed", "red", size="3xl") }}
                 </div>
 
                 <!-- Aggregate Stats -->
@@ -350,9 +299,16 @@ <h2 class="text-lg font-semibold text-gray-900">Upload Complete</h2>
                 <!-- Action Buttons -->
                 <div class="flex justify-center space-x-4 mb-6">
                     <button id="upload-more-btn"
-                            class="px-6 py-2 bg-nrel-blue text-white rounded-md hover:bg-nrel-blue-light transition-colors">
+                            class="px-6 py-2 bg-nlr-blue text-white rounded-md hover:bg-nlr-blue-light transition-colors">
                         Upload More Files
                     </button>
+                    <button id="download-csv-btn"
+                            class="px-6 py-2 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 transition-colors flex items-center">
+                        <svg class="w-4 h-4 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+                        </svg>
+                        Download CSV
+                    </button>
                     <a href="{{ url_for('main.files') }}"
                        class="px-6 py-2 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 transition-colors">
                         Browse Uploaded Files
@@ -370,6 +326,7 @@ <h2 class="text-lg font-semibold text-gray-900">Upload Complete</h2>
                         <thead class="bg-gray-50">
                             <tr>
                                 <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">File</th>
+                                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">S3 Path</th>
                                 <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Size</th>
                                 <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Duration</th>
                                 <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Speed</th>
@@ -385,5 +342,34 @@ <h2 class="text-lg font-semibold text-gray-900">Upload Complete</h2>
         </div>
     </div>
 </div>
-{% endblock %}
 
+<!-- Confirm Upload Modal -->
+<div id="confirm-upload-modal" class="hidden fixed inset-0 z-50 flex items-center justify-center">
+    <div class="fixed inset-0 bg-black bg-opacity-50" data-action="close-confirm-modal"></div>
+    <div class="relative bg-white rounded-lg shadow-xl max-w-md w-full mx-4 p-6">
+        <h3 class="text-lg font-semibold text-gray-900 mb-4">Upload to MODAQ Cloud?</h3>
+        <p class="text-sm text-gray-600 mb-2">
+            <span id="confirm-file-count" class="font-medium">0</span> files
+            (<span id="confirm-total-size" class="font-medium">0 B</span>) will be uploaded.
+        </p>
+        <label class="flex items-center mb-2">
+            <input type="checkbox" id="force-reupload-checkbox"
+                   class="rounded border-gray-300 text-nlr-blue focus:ring-nlr-blue">
+            <span class="ml-2 text-sm text-gray-700">Force reupload already uploaded files</span>
+        </label>
+        <p id="confirm-skip-note" class="text-xs text-gray-500 mb-6">
+            Duplicate files will be automatically skipped.
+        </p>
+        <div class="flex justify-end space-x-3">
+            <button class="px-4 py-2 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 transition-colors"
+                    data-action="close-confirm-modal">
+                Cancel
+            </button>
+            <button id="confirm-upload-btn"
+                    class="px-4 py-2 bg-nlr-green text-white rounded-md hover:bg-nlr-green-light transition-colors">
+                Confirm Upload
+            </button>
+        </div>
+    </div>
+</div>
+{% endblock %}
diff --git a/app/templates/settings.html b/app/templates/settings.html
index 97cc36f..8e61dfd 100644
--- a/app/templates/settings.html
+++ b/app/templates/settings.html
@@ -19,7 +19,7 @@ <h1 class="text-2xl font-bold text-gray-900">Settings</h1>
             <div class="px-6 py-4">
                 <label for="aws-profile" class="block text-sm font-medium text-gray-700">AWS Profile</label>
                 <select id="aws-profile"
-                        class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-nrel-blue focus:border-nrel-blue rounded-md">
+                        class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-nlr-blue focus:border-nlr-blue rounded-md">
                     <option value="">Loading profiles...</option>
                 </select>
                 <p class="mt-1 text-sm text-gray-500">Select AWS profile from ~/.aws/credentials</p>
@@ -29,7 +29,7 @@ <h1 class="text-2xl font-bold text-gray-900">Settings</h1>
             <div class="px-6 py-4">
                 <label for="aws-region-select" class="block text-sm font-medium text-gray-700">AWS Region</label>
                 <select id="aws-region-select"
-                        class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-nrel-blue focus:border-nrel-blue rounded-md">
+                        class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-nlr-blue focus:border-nlr-blue rounded-md">
                     <option value="us-west-2">US West (Oregon) - us-west-2 (NLR Default)</option>
                     <option value="us-west-1">US West (N. California) - us-west-1</option>
                     <option value="us-east-1">US East (N. Virginia) - us-east-1</option>
@@ -39,12 +39,12 @@ <h1 class="text-2xl font-bold text-gray-900">Settings</h1>
                     <option value="other">Other...</option>
                 </select>
                 <input type="text" id="aws-region-custom"
-                       class="mt-2 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-nrel-blue focus:border-nrel-blue hidden"
+                       class="mt-2 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-nlr-blue focus:border-nlr-blue hidden"
                        placeholder="e.g. eu-west-1">
                 <p id="aws-region-help" class="mt-1 text-sm text-gray-500 hidden">
                     See <a href="https://docs.aws.amazon.com/global-infrastructure/latest/regions/aws-regions.html"
                            target="_blank" rel="noopener noreferrer"
-                           class="text-nrel-blue hover:underline">AWS Regions documentation</a> for available regions.
+                           class="text-nlr-blue hover:underline">AWS Regions documentation</a> for available regions.
                 </p>
             </div>
 
@@ -52,7 +52,7 @@ <h1 class="text-2xl font-bold text-gray-900">Settings</h1>
             <div class="px-6 py-4">
                 <label for="s3-bucket" class="block text-sm font-medium text-gray-700">S3 Bucket</label>
                 <input type="text" id="s3-bucket"
-                       class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-nrel-blue focus:border-nrel-blue"
+                       class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-nlr-blue focus:border-nlr-blue"
                        placeholder="my-mcap-bucket">
                 <p class="mt-1 text-sm text-gray-500">Name of the S3 bucket to upload files to</p>
             </div>
@@ -61,7 +61,7 @@ <h1 class="text-2xl font-bold text-gray-900">Settings</h1>
             <div class="px-6 py-4">
                 <label for="default-folder" class="block text-sm font-medium text-gray-700">Default Upload Folder</label>
                 <input type="text" id="default-folder"
-                       class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-nrel-blue focus:border-nrel-blue"
+                       class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-nlr-blue focus:border-nlr-blue"
                        placeholder="/path/to/mcap/files">
                 <p class="mt-1 text-sm text-gray-500">Default folder to open when selecting files (optional)</p>
             </div>
@@ -76,7 +76,7 @@ <h1 class="text-2xl font-bold text-gray-900">Settings</h1>
                         </div>
                     </div>
                     <button type="button" id="test-connection-btn"
-                            class="px-4 py-2 bg-nrel-blue text-white rounded-md hover:bg-nrel-blue-light transition-colors">
+                            class="px-4 py-2 bg-nlr-blue text-white rounded-md hover:bg-nlr-blue-light transition-colors">
                         Test Connection
                     </button>
                 </div>
@@ -85,7 +85,7 @@ <h1 class="text-2xl font-bold text-gray-900">Settings</h1>
             <!-- Save Button -->
             <div class="px-6 py-4 flex justify-end">
                 <button type="submit"
-                        class="px-6 py-2 bg-nrel-green text-white rounded-md hover:bg-nrel-green-light transition-colors">
+                        class="px-6 py-2 bg-nlr-green text-white rounded-md hover:bg-nlr-green-light transition-colors">
                     Save Settings
                 </button>
             </div>
@@ -105,7 +105,7 @@ <h2 class="text-lg font-semibold text-gray-900">Application Updates</h2>
             <div class="grid grid-cols-4 gap-4 text-sm">
                 <div>
                     <span class="text-gray-500">Version:</span>
-                    <span id="pkg-version" class="ml-2 font-semibold text-nrel-blue">-</span>
+                    <span id="pkg-version" class="ml-2 font-semibold text-nlr-blue">-</span>
                 </div>
                 <div>
                     <span class="text-gray-500">Branch:</span>
@@ -136,7 +136,7 @@ <h2 class="text-lg font-semibold text-gray-900">Application Updates</h2>
                         Check for Updates
                     </button>
                     <button type="button" id="run-update-btn"
-                            class="px-4 py-2 bg-nrel-yellow text-white rounded-md hover:bg-nrel-yellow-light transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+                            class="px-4 py-2 bg-nlr-yellow text-white rounded-md hover:bg-nlr-yellow-light transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
                             disabled>
                         Update Application
                     </button>
@@ -189,7 +189,7 @@ <h2 class="text-lg font-semibold text-gray-900">Upload Cache</h2>
                 </div>
                 <div class="flex space-x-4">
                     <button type="button" id="sync-cache-btn"
-                            class="px-4 py-2 bg-nrel-blue text-white rounded-md hover:bg-nrel-blue-light transition-colors">
+                            class="px-4 py-2 bg-nlr-blue text-white rounded-md hover:bg-nlr-blue-light transition-colors">
                         Sync Cache with AWS
                     </button>
                 </div>

From 05c4227b8dfbbad1d0650cacaaf6fa2511d0a80a Mon Sep 17 00:00:00 2001
From: "Simms, Andrew" <Andrew.Simms@nrel.gov>
Date: Sun, 8 Feb 2026 10:04:06 -0700
Subject: [PATCH 06/44] Templates: Add logs template

---
 app/templates/logs.html | 169 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 169 insertions(+)
 create mode 100644 app/templates/logs.html

diff --git a/app/templates/logs.html b/app/templates/logs.html
new file mode 100644
index 0000000..c940502
--- /dev/null
+++ b/app/templates/logs.html
@@ -0,0 +1,169 @@
+{% extends "base.html" %}
+
+{% block title %}Logs - {{ super() }}{% endblock %}
+
+{% block body_attrs %}data-page="logs"{% endblock %}
+
+{% block content %}
+<div class="space-y-6">
+    <!-- Header -->
+    <div>
+        <h1 class="text-2xl font-bold text-gray-900">Application Logs</h1>
+        <p class="text-gray-600 mt-1">View upload activity, analysis results, and system events</p>
+    </div>
+
+    <!-- Stats Bar -->
+    <div class="grid grid-cols-4 gap-4">
+        <div class="bg-white rounded-lg shadow p-4 text-center">
+            <div id="stat-total" class="text-2xl font-bold text-gray-700">-</div>
+            <div class="text-sm text-gray-500">Total Entries</div>
+        </div>
+        <div class="bg-white rounded-lg shadow p-4 text-center">
+            <div id="stat-today" class="text-2xl font-bold text-nlr-blue">-</div>
+            <div class="text-sm text-gray-500">Today</div>
+        </div>
+        <div class="bg-white rounded-lg shadow p-4 text-center">
+            <div id="stat-errors" class="text-2xl font-bold text-red-600">-</div>
+            <div class="text-sm text-gray-500">Errors</div>
+        </div>
+        <div class="bg-white rounded-lg shadow p-4 text-center">
+            <div id="stat-files" class="text-2xl font-bold text-nlr-gray">-</div>
+            <div class="text-sm text-gray-500">Log Files</div>
+        </div>
+    </div>
+
+    <!-- Filter Bar -->
+    <div class="bg-white rounded-lg shadow p-4">
+        <div class="flex flex-wrap items-center gap-3">
+            <!-- Date Picker -->
+            <div>
+                <input type="date" id="filter-date"
+                       class="border border-gray-300 rounded-md px-3 py-2 text-sm focus:ring-nlr-blue focus:border-nlr-blue">
+            </div>
+
+            <!-- Level Dropdown -->
+            <div>
+                <select id="filter-level"
+                        class="border border-gray-300 rounded-md px-3 py-2 text-sm focus:ring-nlr-blue focus:border-nlr-blue">
+                    <option value="">All Levels</option>
+                    <option value="INFO">INFO</option>
+                    <option value="WARNING">WARNING</option>
+                    <option value="ERROR">ERROR</option>
+                </select>
+            </div>
+
+            <!-- Category Dropdown -->
+            <div>
+                <select id="filter-category"
+                        class="border border-gray-300 rounded-md px-3 py-2 text-sm focus:ring-nlr-blue focus:border-nlr-blue">
+                    <option value="">All Categories</option>
+                    <option value="upload">Upload</option>
+                    <option value="analysis">Analysis</option>
+                    <option value="settings">Settings</option>
+                    <option value="app">App</option>
+                    <option value="sync">Sync</option>
+                </select>
+            </div>
+
+            <!-- Search -->
+            <div class="flex-grow">
+                <input type="text" id="filter-search" placeholder="Search messages..."
+                       class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm focus:ring-nlr-blue focus:border-nlr-blue">
+            </div>
+
+            <!-- Action Buttons -->
+            <button id="clear-filters-btn"
+                    class="px-4 py-2 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 text-sm transition-colors">
+                Clear
+            </button>
+            <button id="sync-logs-btn"
+                    class="px-4 py-2 bg-nlr-blue text-white rounded-md hover:bg-nlr-blue-light text-sm transition-colors">
+                Sync to S3
+            </button>
+        </div>
+    </div>
+
+    <!-- Upload Summaries -->
+    <div class="bg-white rounded-lg shadow overflow-hidden">
+        <button id="csv-section-toggle"
+                class="w-full px-6 py-3 bg-gray-50 border-b border-gray-200 flex items-center justify-between hover:bg-gray-100 transition-colors">
+            <div class="flex items-center gap-2">
+                <svg id="csv-toggle-icon" class="h-4 w-4 text-gray-500 transform transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+                </svg>
+                <span class="text-sm font-medium text-gray-700">Upload Summaries</span>
+                <span id="csv-count-badge"
+                      class="px-2 py-0.5 text-xs font-medium rounded-full bg-nlr-blue text-white hidden">0</span>
+            </div>
+        </button>
+        <div id="csv-section-body" class="hidden">
+            <div class="overflow-x-auto">
+                <table class="w-full divide-y divide-gray-200">
+                    <thead class="bg-gray-50">
+                        <tr>
+                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase w-28">Date</th>
+                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase w-20">Time</th>
+                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Filename</th>
+                            <th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase w-32">Actions</th>
+                        </tr>
+                    </thead>
+                    <tbody id="csv-table-body" class="bg-white divide-y divide-gray-200">
+                        <tr>
+                            <td colspan="4" class="px-4 py-6 text-center text-gray-500 text-sm">No upload summaries found</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+            <!-- CSV Preview Panel -->
+            <div id="csv-preview-panel" class="hidden border-t border-gray-200">
+                <div class="px-6 py-3 bg-gray-50 flex items-center justify-between">
+                    <span id="csv-preview-title" class="text-sm font-medium text-gray-700">Preview</span>
+                    <button id="csv-preview-close"
+                            class="text-gray-400 hover:text-gray-600 text-sm">Close</button>
+                </div>
+                <div id="csv-preview-content" class="overflow-x-auto p-4"></div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Log Table -->
+    <div class="bg-white rounded-lg shadow overflow-hidden">
+        <!-- Table Header -->
+        <div class="px-6 py-3 bg-gray-50 border-b border-gray-200 flex items-center justify-between">
+            <span id="log-count-label" class="text-sm text-gray-600">Loading...</span>
+            <div class="flex items-center gap-2">
+                <button id="prev-page-btn"
+                        class="px-3 py-1 bg-gray-200 text-gray-600 rounded text-sm hover:bg-gray-300 disabled:opacity-50 disabled:cursor-not-allowed"
+                        disabled>
+                    Previous
+                </button>
+                <button id="next-page-btn"
+                        class="px-3 py-1 bg-gray-200 text-gray-600 rounded text-sm hover:bg-gray-300 disabled:opacity-50 disabled:cursor-not-allowed"
+                        disabled>
+                    Next
+                </button>
+            </div>
+        </div>
+
+        <!-- Table -->
+        <div class="overflow-x-auto">
+            <table class="w-full divide-y divide-gray-200">
+                <thead class="bg-gray-50">
+                    <tr>
+                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase w-44">Timestamp</th>
+                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase w-20">Level</th>
+                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase w-24">Category</th>
+                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase w-48">Event</th>
+                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Message</th>
+                    </tr>
+                </thead>
+                <tbody id="log-table-body" class="bg-white divide-y divide-gray-200">
+                    <tr>
+                        <td colspan="5" class="px-4 py-8 text-center text-gray-500">Loading...</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </div>
+</div>
+{% endblock %}

From 8f228afea3daf55275e155c6cf2fae04e9b2b8e6 Mon Sep 17 00:00:00 2001
From: "Simms, Andrew" <Andrew.Simms@nrel.gov>
Date: Sun, 8 Feb 2026 10:04:16 -0700
Subject: [PATCH 07/44] Templates: Add macro template for common components

---
 app/templates/macros.html | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)
 create mode 100644 app/templates/macros.html

diff --git a/app/templates/macros.html b/app/templates/macros.html
new file mode 100644
index 0000000..117c521
--- /dev/null
+++ b/app/templates/macros.html
@@ -0,0 +1,16 @@
+{# Reusable template macros #}
+
+{% macro spinner(message="Loading...") %}
+<svg class="spinner h-8 w-8 mx-auto text-nlr-blue" fill="none" viewBox="0 0 24 24">
+    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+</svg>
+<p class="mt-2 text-gray-500">{{ message }}</p>
+{% endmacro %}
+
+{% macro stat_card(id, label, color, value="0", size="2xl") %}
+<div class="bg-{{ color }}-50 rounded-lg p-4">
+    <div id="{{ id }}" class="text-{{ size }} font-bold text-{{ color }}-600">{{ value }}</div>
+    <div class="text-sm text-{{ color }}-700">{{ label }}</div>
+</div>
+{% endmacro %}

From e1772fe4f4117ad6d8bc353f22fa93406a03346e Mon Sep 17 00:00:00 2001
From: "Simms, Andrew" <Andrew.Simms@nrel.gov>
Date: Sun, 8 Feb 2026 10:06:45 -0700
Subject: [PATCH 08/44] Assets: Use nlr in logo filename

---
 .../{nrel-logo@2x-01.png => nlr-logo@2x-01.png}     | Bin
 modaq-upload.desktop.template                       |   2 +-
 2 files changed, 1 insertion(+), 1 deletion(-)
 rename app/static/images/{nrel-logo@2x-01.png => nlr-logo@2x-01.png} (100%)

diff --git a/app/static/images/nrel-logo@2x-01.png b/app/static/images/nlr-logo@2x-01.png
similarity index 100%
rename from app/static/images/nrel-logo@2x-01.png
rename to app/static/images/nlr-logo@2x-01.png
diff --git a/modaq-upload.desktop.template b/modaq-upload.desktop.template
index c861747..6eccd35 100644
--- a/modaq-upload.desktop.template
+++ b/modaq-upload.desktop.template
@@ -4,7 +4,7 @@ Type=Application
 Name=MODAQ Upload
 Comment=MODAQ File Uploader
 Exec=python3 {{PROJECT_DIR}}/launch.py
-Icon={{PROJECT_DIR}}/app/static/images/nrel-logo@2x-01.png
+Icon={{PROJECT_DIR}}/app/static/images/nlr-logo@2x-01.png
 Terminal=true
 Categories=Science;Utility;
 StartupNotify=true

From 5bc2a38c5175aae610f1fd7d3ac56e571b099b9a Mon Sep 17 00:00:00 2001
From: "Simms, Andrew" <Andrew.Simms@nrel.gov>
Date: Sun, 8 Feb 2026 10:13:52 -0700
Subject: [PATCH 09/44] Config: Cache package version

---
 app/config.py | 23 +++++++++++++----------
 1 file changed, 13 insertions(+), 10 deletions(-)

diff --git a/app/config.py b/app/config.py
index 72cb7d5..c41ae1d 100644
--- a/app/config.py
+++ b/app/config.py
@@ -1,5 +1,6 @@
 """Configuration management for modaq_upload"""
 
+import functools
 import json
 import os
 import subprocess
@@ -28,26 +29,28 @@
 ENV_S3_BUCKET = "MODAQ_S3_BUCKET"
 ENV_DEFAULT_UPLOAD_FOLDER = "MODAQ_DEFAULT_UPLOAD_FOLDER"
 ENV_DISPLAY_NAME = "MODAQ_DISPLAY_NAME"
+ENV_LOG_DIRECTORY = "MODAQ_LOG_DIRECTORY"
 
 
-def get_package_version() -> str:
-    """Get the package version from pyproject.toml."""
+@functools.cache
+def _read_pyproject_field(field: str, default: str) -> str:
+    """Read a field from pyproject.toml [project] section (cached)."""
     try:
         with open(PYPROJECT_FILE, "rb") as f:
             pyproject = tomllib.load(f)
-        return str(pyproject.get("project", {}).get("version", "0.0.0"))
+        return str(pyproject.get("project", {}).get(field, default))
     except Exception:
-        return "0.0.0"
+        return default
+
+
+def get_package_version() -> str:
+    """Get the package version from pyproject.toml."""
+    return _read_pyproject_field("version", "0.0.0")
 
 
 def get_package_name() -> str:
     """Get the package name from pyproject.toml."""
-    try:
-        with open(PYPROJECT_FILE, "rb") as f:
-            pyproject = tomllib.load(f)
-        return str(pyproject.get("project", {}).get("name", "modaq-uploader"))
-    except Exception:
-        return "modaq-uploader"
+    return _read_pyproject_field("name", "modaq-uploader")
 
 
 class Settings:

From 6f69c31cc64fddd0d381c76d40e8b8c569cfba7c Mon Sep 17 00:00:00 2001
From: "Simms, Andrew" <Andrew.Simms@nrel.gov>
Date: Sun, 8 Feb 2026 10:14:41 -0700
Subject: [PATCH 10/44] Config: Add logs folders

---
 app/config.py | 97 +++++++++++++++++++++------------------------------
 1 file changed, 39 insertions(+), 58 deletions(-)

diff --git a/app/config.py b/app/config.py
index c41ae1d..432314c 100644
--- a/app/config.py
+++ b/app/config.py
@@ -82,6 +82,7 @@ def _load_settings(self) -> None:
             "s3_bucket": "",
             "default_upload_folder": "",
             "display_name": "MODAQ Uploader",
+            "log_directory": "logs",
         }
 
         # Load from settings.default.json if it exists
@@ -101,6 +102,7 @@ def _load_settings(self) -> None:
             "s3_bucket": os.environ.get(ENV_S3_BUCKET),
             "default_upload_folder": os.environ.get(ENV_DEFAULT_UPLOAD_FOLDER),
             "display_name": os.environ.get(ENV_DISPLAY_NAME),
+            "log_directory": os.environ.get(ENV_LOG_DIRECTORY),
         }
 
         # Only apply non-None environment values
@@ -144,27 +146,36 @@ def reload(self) -> None:
     @property
     def aws_profile(self) -> str:
         """Get the AWS profile name."""
-        return str(self._settings.get("aws_profile", "default"))
+        return str(self._settings["aws_profile"])
 
     @property
     def aws_region(self) -> str:
         """Get the AWS region."""
-        return str(self._settings.get("aws_region", "us-west-2"))
+        return str(self._settings["aws_region"])
 
     @property
     def s3_bucket(self) -> str:
         """Get the S3 bucket name."""
-        return str(self._settings.get("s3_bucket", ""))
+        return str(self._settings["s3_bucket"])
 
     @property
     def default_upload_folder(self) -> str:
         """Get the default upload folder path."""
-        return str(self._settings.get("default_upload_folder", ""))
+        return str(self._settings["default_upload_folder"])
 
     @property
     def display_name(self) -> str:
         """Get the display name for the application."""
-        return str(self._settings.get("display_name", "MODAQ Uploader"))
+        return str(self._settings["display_name"])
+
+    @property
+    def log_directory(self) -> Path:
+        """Get the log directory path (resolved to absolute path relative to BASE_DIR)."""
+        log_dir = str(self._settings["log_directory"])
+        path = Path(log_dir)
+        if not path.is_absolute():
+            path = BASE_DIR / path
+        return path
 
 
 def get_settings() -> Settings:
@@ -232,35 +243,11 @@ def update_application(self) -> dict[str, Any]:
             "modaq_toolkit": {"success": False, "output": ""},
         }
 
-        try:
-            # Git pull
-            git_result = subprocess.run(
-                ["git", "pull"],
-                cwd=self.base_dir,
-                capture_output=True,
-                text=True,
-                check=True,
-            )
-            results["git_pull"] = {
-                "success": True,
-                "output": git_result.stdout + git_result.stderr,
-            }
-
-            # Pip install requirements
-            pip_result = subprocess.run(
-                [sys.executable, "-m", "pip", "install", "-r", "requirements.txt"],
-                cwd=self.base_dir,
-                capture_output=True,
-                text=True,
-                check=True,
-            )
-            results["pip_install"] = {
-                "success": True,
-                "output": pip_result.stdout + pip_result.stderr,
-            }
-
-            # Update modaq_toolkit specifically (force reinstall to get latest)
-            modaq_result = subprocess.run(
+        steps: list[tuple[str, list[str]]] = [
+            ("git_pull", ["git", "pull"]),
+            ("pip_install", [sys.executable, "-m", "pip", "install", "-r", "requirements.txt"]),
+            (
+                "modaq_toolkit",
                 [
                     sys.executable,
                     "-m",
@@ -270,34 +257,28 @@ def update_application(self) -> dict[str, Any]:
                     "--force-reinstall",
                     "git+https://github.com/MODAQ2/MODAQ_toolkit.git",
                 ],
-                cwd=self.base_dir,
-                capture_output=True,
-                text=True,
-                check=True,
-            )
-            results["modaq_toolkit"] = {
-                "success": True,
-                "output": modaq_result.stdout + modaq_result.stderr,
-            }
-
-        except subprocess.CalledProcessError as e:
-            # Record which step failed
-            cmd_name = " ".join(e.cmd) if isinstance(e.cmd, list) else str(e.cmd)
-            if "git" in cmd_name:
-                results["git_pull"] = {
-                    "success": False,
-                    "output": e.stdout + e.stderr if e.stdout else str(e),
-                }
-            elif "modaq" in cmd_name.lower() or "MODAQ" in cmd_name:
-                results["modaq_toolkit"] = {
-                    "success": False,
-                    "output": e.stdout + e.stderr if e.stdout else str(e),
+            ),
+        ]
+
+        for step_name, cmd in steps:
+            try:
+                result = subprocess.run(
+                    cmd,
+                    cwd=self.base_dir,
+                    capture_output=True,
+                    text=True,
+                    check=True,
+                )
+                results[step_name] = {
+                    "success": True,
+                    "output": result.stdout + result.stderr,
                 }
-            else:
-                results["pip_install"] = {
+            except subprocess.CalledProcessError as e:
+                results[step_name] = {
                     "success": False,
                     "output": e.stdout + e.stderr if e.stdout else str(e),
                 }
+                break
 
         return results
 

From cb747c7163a6b6dc77bf30d50f234a01a9201305 Mon Sep 17 00:00:00 2001
From: "Simms, Andrew" <Andrew.Simms@nrel.gov>
Date: Sun, 8 Feb 2026 10:15:55 -0700
Subject: [PATCH 11/44] Routes: Leverage DRY and caching/class variables

---
 app/routes/files.py | 51 +++++++++++++++++++++------------------------
 1 file changed, 24 insertions(+), 27 deletions(-)

diff --git a/app/routes/files.py b/app/routes/files.py
index a102c74..3b122e0 100644
--- a/app/routes/files.py
+++ b/app/routes/files.py
@@ -2,7 +2,7 @@
 
 from pathlib import Path
 
-from flask import Blueprint, Response, jsonify, request
+from flask import Blueprint, Response, g, jsonify, request
 
 from app.config import get_settings
 from app.services import s3_service
@@ -10,6 +10,16 @@
 files_bp = Blueprint("files", __name__)
 
 
+@files_bp.before_request
+def _require_bucket() -> tuple[Response, int] | None:
+    """Ensure S3 bucket is configured before handling any request."""
+    settings = get_settings()
+    if not settings.s3_bucket:
+        return jsonify({"error": "S3 bucket not configured"}), 400
+    g.settings = settings
+    return None
+
+
 @files_bp.route("/list", methods=["GET"])
 def list_files() -> tuple[Response, int]:
     """List files and folders in S3 bucket.
@@ -21,23 +31,18 @@ def list_files() -> tuple[Response, int]:
     Returns:
         JSON response with folders and files
     """
-    settings = get_settings()
-
-    if not settings.s3_bucket:
-        return jsonify({"error": "S3 bucket not configured"}), 400
-
     prefix = request.args.get("prefix", "")
     delimiter = request.args.get("delimiter", "/")
 
     try:
         client = s3_service.create_s3_client(
-            settings.aws_profile,
-            settings.aws_region,
+            g.settings.aws_profile,
+            g.settings.aws_region,
         )
 
         result = s3_service.list_bucket_objects(
             client,
-            settings.s3_bucket,
+            g.settings.s3_bucket,
             prefix=prefix,
             delimiter=delimiter,
         )
@@ -71,24 +76,19 @@ def get_file_info() -> tuple[Response, int]:
     Returns:
         JSON response with object metadata
     """
-    settings = get_settings()
-
-    if not settings.s3_bucket:
-        return jsonify({"error": "S3 bucket not configured"}), 400
-
     key = request.args.get("key", "")
     if not key:
         return jsonify({"error": "Object key required"}), 400
 
     try:
         client = s3_service.create_s3_client(
-            settings.aws_profile,
-            settings.aws_region,
+            g.settings.aws_profile,
+            g.settings.aws_region,
         )
 
         result = s3_service.get_object_metadata(
             client,
-            settings.s3_bucket,
+            g.settings.s3_bucket,
             key,
         )
 
@@ -112,11 +112,6 @@ def search_files() -> tuple[Response, int]:
     Returns:
         JSON response with matching files
     """
-    settings = get_settings()
-
-    if not settings.s3_bucket:
-        return jsonify({"error": "S3 bucket not configured"}), 400
-
     query = request.args.get("query", "").lower()
     prefix = request.args.get("prefix", "")
 
@@ -125,14 +120,14 @@ def search_files() -> tuple[Response, int]:
 
     try:
         client = s3_service.create_s3_client(
-            settings.aws_profile,
-            settings.aws_region,
+            g.settings.aws_profile,
+            g.settings.aws_region,
         )
 
         # List all objects with prefix (no delimiter to get all files)
         result = s3_service.list_bucket_objects(
             client,
-            settings.s3_bucket,
+            g.settings.s3_bucket,
             prefix=prefix,
             delimiter="",  # No delimiter to get all nested files
             max_keys=10000,
@@ -196,7 +191,7 @@ def browse_local() -> tuple[Response, int]:
 
     # Build response
     folders: list[dict[str, str | int]] = []
-    files: list[dict[str, str | int]] = []
+    files: list[dict[str, str | int | float]] = []
     mcap_count = 0
 
     try:
@@ -223,11 +218,13 @@ def browse_local() -> tuple[Response, int]:
                 elif entry.is_file():
                     if entry.suffix == ".mcap":
                         mcap_count += 1
+                        file_stat = entry.stat()
                         files.append(
                             {
                                 "name": entry.name,
                                 "path": str(entry),
-                                "size": entry.stat().st_size,
+                                "size": file_stat.st_size,
+                                "mtime": file_stat.st_mtime,
                             }
                         )
             except PermissionError:

From 9b99bd4903878bbfbf271cbe3927dcf5dad7e46c Mon Sep 17 00:00:00 2001
From: "Simms, Andrew" <Andrew.Simms@nrel.gov>
Date: Sun, 8 Feb 2026 10:16:49 -0700
Subject: [PATCH 12/44] Service: Add function to get S3 client

---
 app/services/s3_service.py | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/app/services/s3_service.py b/app/services/s3_service.py
index bcd461d..f50740e 100644
--- a/app/services/s3_service.py
+++ b/app/services/s3_service.py
@@ -255,6 +255,15 @@ def validate_bucket_access(client: S3Client, bucket: str) -> dict[str, Any]:
         }
 
 
+def get_s3_client_from_settings() -> tuple[S3Client, str]:
+    """Create S3 client from current app settings. Returns (client, bucket)."""
+    from app.config import get_settings
+
+    settings = get_settings()
+    client = create_s3_client(settings.aws_profile, settings.aws_region)
+    return client, settings.s3_bucket
+
+
 def get_object_metadata(client: S3Client, bucket: str, key: str) -> dict[str, Any]:
     """Get metadata for an S3 object.
 

From 3710f26c550d167b66fcd9440438d95029a79aec Mon Sep 17 00:00:00 2001
From: "Simms, Andrew" <Andrew.Simms@nrel.gov>
Date: Sun, 8 Feb 2026 10:20:19 -0700
Subject: [PATCH 13/44] Services: Wire up logging/logger in upload_manager

---
 app/services/upload_manager.py | 371 ++++++++++++++++++++++++++++-----
 1 file changed, 322 insertions(+), 49 deletions(-)

diff --git a/app/services/upload_manager.py b/app/services/upload_manager.py
index e32c5b0..e2e3aa7 100644
--- a/app/services/upload_manager.py
+++ b/app/services/upload_manager.py
@@ -1,5 +1,6 @@
 """Upload manager for orchestrating file uploads to S3."""
 
+import logging
 import shutil
 import threading
 import uuid
@@ -13,6 +14,10 @@
 
 from app.services import mcap_service, s3_service
 from app.services.cache_service import get_cache_service
+from app.services.log_service import get_log_service
+from app.services.utils import format_file_size
+
+logger = logging.getLogger(__name__)
 
 # Timestamps before this date are considered invalid (1970/epoch issues)
 EPOCH_CUTOFF = datetime(1980, 1, 1)
@@ -62,7 +67,7 @@ def to_dict(self) -> dict[str, Any]:
             "filename": self.filename,
             "local_path": self.local_path,
             "file_size": self.file_size,
-            "file_size_formatted": mcap_service.format_file_size(self.file_size),
+            "file_size_formatted": format_file_size(self.file_size),
             "status": self.status.value,
             "s3_path": self.s3_path,
             "start_time": self.start_time.isoformat() if self.start_time else None,
@@ -102,7 +107,7 @@ class UploadJob:
     auto_upload: bool = False  # Auto-start upload when analysis completes
     temp_dir: str | None = None  # Temp directory for cleanup
     pre_filter_stats: dict[str, Any] = field(default_factory=dict)  # Pre-filter statistics
-    _lock: threading.Lock = field(default_factory=threading.Lock, repr=False)
+    lock: threading.Lock = field(default_factory=threading.Lock, repr=False)
 
     @property
     def total_bytes(self) -> int:
@@ -178,6 +183,13 @@ def average_upload_speed_mbps(self) -> float | None:
             return round(self.successfully_uploaded_bytes / duration / 1024 / 1024 * 8, 2)
         return None
 
+    def resolve_analysis_status(self) -> None:
+        """Set job status based on file analysis results."""
+        if any(f.status == UploadStatus.READY for f in self.files):
+            self.status = UploadStatus.READY
+        else:
+            self.status = UploadStatus.FAILED
+
     def to_dict(self) -> dict[str, Any]:
         """Convert to dictionary for JSON serialization."""
         duration = self.total_upload_duration_seconds
@@ -191,11 +203,11 @@ def to_dict(self) -> dict[str, Any]:
             "files_skipped": sum(1 for f in self.files if f.status == UploadStatus.SKIPPED),
             "files_uploaded": sum(1 for f in self.files if f.status == UploadStatus.COMPLETED),
             "total_bytes": self.total_bytes,
-            "total_bytes_formatted": mcap_service.format_file_size(self.total_bytes),
+            "total_bytes_formatted": format_file_size(self.total_bytes),
             "uploaded_bytes": self.uploaded_bytes,
-            "uploaded_bytes_formatted": mcap_service.format_file_size(self.uploaded_bytes),
+            "uploaded_bytes_formatted": format_file_size(self.uploaded_bytes),
             "successfully_uploaded_bytes": self.successfully_uploaded_bytes,
-            "successfully_uploaded_bytes_formatted": mcap_service.format_file_size(
+            "successfully_uploaded_bytes_formatted": format_file_size(
                 self.successfully_uploaded_bytes
             ),
             "progress_percent": self.progress_percent,
@@ -255,6 +267,19 @@ def create_job(
         with self._lock:
             self.jobs[job_id] = job
 
+        log = get_log_service()
+        log.info(
+            "upload",
+            "upload_job_created",
+            f"Created upload job with {len(job.files)} files",
+            {
+                "job_id": job_id,
+                "total_files": len(job.files),
+                "total_bytes": job.total_bytes,
+                "auto_upload": auto_upload,
+            },
+        )
+
         return job
 
     def get_job(self, job_id: str) -> UploadJob | None:
@@ -319,12 +344,7 @@ def analyze_job(
                 file_state.error_message = str(e)
 
         # Update job status
-        if all(f.status == UploadStatus.READY for f in job.files):
-            job.status = UploadStatus.READY
-        elif any(f.status == UploadStatus.READY for f in job.files):
-            job.status = UploadStatus.READY
-        else:
-            job.status = UploadStatus.FAILED
+        job.resolve_analysis_status()
 
         return job
 
@@ -334,6 +354,9 @@ def _analyze_single_file(
         s3_client: Any,
         s3_bucket: str,
         use_cache: bool = True,
+        job_id: str = "",
+        progress_callback: Callable[["UploadJob", FileUploadState], None] | None = None,
+        job: "UploadJob | None" = None,
     ) -> FileUploadState:
         """Analyze a single file - extract timestamp and check for duplicates.
 
@@ -342,11 +365,17 @@ def _analyze_single_file(
             s3_client: S3 client for duplicate checking
             s3_bucket: S3 bucket name
             use_cache: Whether to use the cache for duplicate checking
+            job_id: The parent job ID (for logging)
+            progress_callback: Optional callback fired when file starts analyzing
+            job: The parent UploadJob (needed for callback)
 
         Returns:
             The updated FileUploadState
         """
+        log = get_log_service()
         file_state.status = UploadStatus.ANALYZING
+        if progress_callback and job:
+            progress_callback(job, file_state)
         try:
             # Extract timestamp from MCAP
             start_time = mcap_service.extract_start_time(file_state.local_path)
@@ -387,10 +416,31 @@ def _analyze_single_file(
 
             file_state.status = UploadStatus.READY
 
+            log.info(
+                "analysis",
+                "file_analysis_completed",
+                f"Analyzed {file_state.filename}",
+                {
+                    "job_id": job_id,
+                    "filename": file_state.filename,
+                    "file_size": file_state.file_size,
+                    "s3_path": file_state.s3_path,
+                    "is_duplicate": file_state.is_duplicate,
+                    "is_valid": file_state.is_valid,
+                },
+            )
+
         except Exception as e:
             file_state.status = UploadStatus.FAILED
             file_state.error_message = str(e)
 
+            log.error(
+                "analysis",
+                "file_analysis_failed",
+                f"Failed to analyze {file_state.filename}: {e}",
+                {"job_id": job_id, "filename": file_state.filename, "error": str(e)},
+            )
+
         return file_state
 
     def analyze_job_async(
@@ -415,17 +465,22 @@ def analyze_job_async(
         Returns:
             The updated UploadJob or None if not found
         """
+        log = get_log_service()
         job = self.get_job(job_id)
         if not job:
             return None
 
         job.status = UploadStatus.ANALYZING
 
-        # Mark all files as analyzing
-        for file_state in job.files:
-            file_state.status = UploadStatus.ANALYZING
+        log.info(
+            "analysis",
+            "analysis_started",
+            f"Starting analysis of {len(job.files)} files",
+            {"job_id": job_id, "total_files": len(job.files)},
+        )
 
-        # Send initial progress
+        # Keep files as PENDING; workers will mark ANALYZING when they start.
+        # Send initial callbacks so frontend knows the job started and can show queue.
         if progress_callback:
             for file_state in job.files:
                 progress_callback(job, file_state)
@@ -452,6 +507,9 @@ def analyze_job_async(
                     s3_client,
                     s3_bucket,
                     use_cache,
+                    job_id,
+                    progress_callback,
+                    job,
                 )
                 futures[future] = file_state
 
@@ -462,7 +520,7 @@ def analyze_job_async(
                     # Result is already updated in-place, but get it to handle exceptions
                     future.result()
                 except Exception as e:
-                    with job._lock:
+                    with job.lock:
                         file_state.status = UploadStatus.FAILED
                         file_state.error_message = str(e)
 
@@ -471,13 +529,25 @@ def analyze_job_async(
                     progress_callback(job, file_state)
 
         # Update job status
-        with job._lock:
-            if all(f.status == UploadStatus.READY for f in job.files):
-                job.status = UploadStatus.READY
-            elif any(f.status == UploadStatus.READY for f in job.files):
-                job.status = UploadStatus.READY
-            else:
-                job.status = UploadStatus.FAILED
+        with job.lock:
+            job.resolve_analysis_status()
+
+        ready_count = sum(1 for f in job.files if f.status == UploadStatus.READY)
+        failed_count = sum(1 for f in job.files if f.status == UploadStatus.FAILED)
+        duplicate_count = sum(1 for f in job.files if f.is_duplicate)
+
+        log.info(
+            "analysis",
+            "analysis_completed",
+            f"Analysis complete: {ready_count} ready, {failed_count} failed, "
+            f"{duplicate_count} duplicates",
+            {
+                "job_id": job_id,
+                "ready": ready_count,
+                "failed": failed_count,
+                "duplicates": duplicate_count,
+            },
+        )
 
         return job
 
@@ -488,7 +558,7 @@ def start_upload(
         aws_region: str,
         s3_bucket: str,
         skip_duplicates: bool = True,
-        progress_callback: Any | None = None,
+        progress_callback: Callable[["UploadJob"], None] | None = None,
     ) -> None:
         """Start uploading files in a job.
 
@@ -518,6 +588,8 @@ def start_upload(
                     file_state.error_message = f"Failed to create S3 client: {e}"
             return
 
+        log = get_log_service()
+
         # Filter files to upload
         files_to_upload = []
         for file_state in job.files:
@@ -527,12 +599,28 @@ def start_upload(
             if skip_duplicates and file_state.is_duplicate:
                 file_state.status = UploadStatus.SKIPPED
                 file_state.bytes_uploaded = file_state.file_size
+                log.info(
+                    "upload",
+                    "file_upload_skipped",
+                    f"Skipped duplicate: {file_state.filename}",
+                    {"job_id": job_id, "filename": file_state.filename, "reason": "duplicate"},
+                )
                 continue
 
             # Skip files with invalid timestamps
             if not file_state.is_valid:
                 file_state.status = UploadStatus.SKIPPED
                 file_state.error_message = "Invalid timestamp (pre-1980)"
+                log.warning(
+                    "upload",
+                    "file_upload_skipped",
+                    f"Skipped invalid timestamp: {file_state.filename}",
+                    {
+                        "job_id": job_id,
+                        "filename": file_state.filename,
+                        "reason": "invalid_timestamp",
+                    },
+                )
                 continue
 
             files_to_upload.append(file_state)
@@ -544,27 +632,45 @@ def start_upload(
                 if job.cancelled:
                     break
 
-                def make_callback(
+                def make_upload_task(
                     fs: FileUploadState,
-                ) -> Any:
-                    def callback(uploaded: int, total: int) -> None:
-                        with job._lock:
-                            fs.bytes_uploaded = uploaded
+                ) -> Callable[[], Any]:
+                    def upload_task() -> Any:
+                        # Mark UPLOADING inside the worker so files stay READY until picked up
+                        with job.lock:
+                            fs.status = UploadStatus.UPLOADING
+                            fs.upload_started_at = datetime.now(UTC)
+                        log.info(
+                            "upload",
+                            "file_upload_started",
+                            f"Uploading {fs.filename}",
+                            {
+                                "job_id": job_id,
+                                "filename": fs.filename,
+                                "file_size": fs.file_size,
+                                "s3_path": fs.s3_path,
+                            },
+                        )
                         if progress_callback:
                             progress_callback(job)
 
-                    return callback
+                        def byte_callback(uploaded: int, total: int) -> None:
+                            with job.lock:
+                                fs.bytes_uploaded = uploaded
+                            if progress_callback:
+                                progress_callback(job)
 
-                file_state.status = UploadStatus.UPLOADING
-                file_state.upload_started_at = datetime.now()
-                future = executor.submit(
-                    s3_service.upload_file_with_progress,
-                    s3_client,
-                    file_state.local_path,
-                    s3_bucket,
-                    file_state.s3_path,
-                    make_callback(file_state),
-                )
+                        return s3_service.upload_file_with_progress(
+                            s3_client,
+                            fs.local_path,
+                            s3_bucket,
+                            fs.s3_path,
+                            byte_callback,
+                        )
+
+                    return upload_task
+
+                future = executor.submit(make_upload_task(file_state))
                 futures[future] = file_state
 
             # Process results as they complete
@@ -579,6 +685,18 @@ def callback(uploaded: int, total: int) -> None:
                     if result["success"]:
                         file_state.status = UploadStatus.COMPLETED
                         file_state.bytes_uploaded = file_state.file_size
+                        log.info(
+                            "upload",
+                            "file_upload_completed",
+                            f"Uploaded {file_state.filename}",
+                            {
+                                "job_id": job_id,
+                                "filename": file_state.filename,
+                                "file_size": file_state.file_size,
+                                "upload_duration_seconds": file_state.upload_duration_seconds,
+                                "s3_path": file_state.s3_path,
+                            },
+                        )
                         # Update cache to mark file as existing
                         try:
                             cache = get_cache_service()
@@ -590,14 +708,30 @@ def callback(uploaded: int, total: int) -> None:
                                 file_size=file_state.file_size,
                             )
                         except Exception:
-                            pass  # Cache update failure shouldn't fail the upload
+                            logger.debug("Cache update failed after upload", exc_info=True)
                     else:
                         file_state.status = UploadStatus.FAILED
                         file_state.error_message = result.get("error", "Unknown error")
+                        log.error(
+                            "upload",
+                            "file_upload_failed",
+                            f"Failed to upload {file_state.filename}: {file_state.error_message}",
+                            {
+                                "job_id": job_id,
+                                "filename": file_state.filename,
+                                "error": file_state.error_message,
+                            },
+                        )
                 except Exception as e:
-                    file_state.upload_completed_at = datetime.now()
+                    file_state.upload_completed_at = datetime.now(UTC)
                     file_state.status = UploadStatus.FAILED
                     file_state.error_message = str(e)
+                    log.error(
+                        "upload",
+                        "file_upload_failed",
+                        f"Failed to upload {file_state.filename}: {e}",
+                        {"job_id": job_id, "filename": file_state.filename, "error": str(e)},
+                    )
 
                 if progress_callback:
                     progress_callback(job)
@@ -616,6 +750,71 @@ def callback(uploaded: int, total: int) -> None:
         # Clean up temp directory when upload completes
         self.cleanup_temp_dir(job_id)
 
+        uploaded_count = sum(1 for f in job.files if f.status == UploadStatus.COMPLETED)
+        skipped_count = sum(1 for f in job.files if f.status == UploadStatus.SKIPPED)
+        failed_count = sum(1 for f in job.files if f.status == UploadStatus.FAILED)
+
+        # Build per-file summary for logging
+        file_summary = [
+            {
+                "filename": f.filename,
+                "s3_path": f.s3_path,
+                "status": f.status.value,
+                "file_size": f.file_size,
+                "duration_seconds": f.upload_duration_seconds,
+            }
+            for f in job.files
+        ]
+
+        log.info(
+            "upload",
+            "upload_job_completed",
+            f"Upload job completed: {uploaded_count} uploaded, "
+            f"{skipped_count} skipped, {failed_count} failed",
+            {
+                "job_id": job_id,
+                "status": job.status.value,
+                "uploaded": uploaded_count,
+                "skipped": skipped_count,
+                "failed": failed_count,
+                "total_bytes_uploaded": job.successfully_uploaded_bytes,
+                "duration_seconds": job.total_upload_duration_seconds,
+                "avg_speed_mbps": job.average_upload_speed_mbps,
+                "files": file_summary,
+            },
+        )
+
+        # Save per-job JSONL summary
+        try:
+            completed_at = job.completed_at or datetime.now(UTC)
+            log.save_job_jsonl(job_id, {
+                "timestamp": completed_at.isoformat(),
+                "event": "upload_job_completed",
+                "job_id": job_id,
+                "status": job.status.value,
+                "uploaded": uploaded_count,
+                "skipped": skipped_count,
+                "failed": failed_count,
+                "total_bytes_uploaded": job.successfully_uploaded_bytes,
+                "duration_seconds": job.total_upload_duration_seconds,
+                "avg_speed_mbps": job.average_upload_speed_mbps,
+                "files": file_summary,
+            }, completed_at)
+        except Exception:
+            logger.warning("Failed to save job JSONL summary", exc_info=True)
+
+        # Save upload summary CSV
+        try:
+            log.save_job_csv(job_id, job, completed_at)
+        except Exception:
+            logger.warning("Failed to save job CSV summary", exc_info=True)
+
+        # Auto-sync logs to S3 after job completion
+        try:
+            log.sync_logs_to_s3(s3_client, s3_bucket)
+        except Exception:
+            logger.debug("Log sync to S3 failed", exc_info=True)
+
         if progress_callback:
             progress_callback(job)
 
@@ -640,6 +839,14 @@ def cancel_job(self, job_id: str) -> bool:
         # Clean up temp directory when job is cancelled
         self.cleanup_temp_dir(job_id)
 
+        log = get_log_service()
+        log.warning(
+            "upload",
+            "upload_job_cancelled",
+            f"Upload job {job_id} cancelled",
+            {"job_id": job_id},
+        )
+
         return True
 
     def cleanup_temp_dir(self, job_id: str) -> bool:
@@ -662,22 +869,27 @@ def cleanup_temp_dir(self, job_id: str) -> bool:
                 job.temp_dir = None
                 return True
             except Exception:
-                pass
+                logger.warning("Failed to clean up temp dir: %s", temp_path, exc_info=True)
         return False
 
     def pre_filter_files(
         self,
         file_paths: list[str],
         s3_bucket: str,
+        aws_profile: str = "default",
+        aws_region: str = "us-west-2",
     ) -> tuple[list[str], dict[str, Any]]:
         """Pre-filter files using cache and filename timestamp extraction.
 
         This is a fast pre-filtering step that avoids expensive MCAP parsing
         by extracting timestamps from filenames and checking the cache.
+        On cache miss, falls back to S3 HEAD checks.
 
         Args:
             file_paths: List of file paths to filter
             s3_bucket: S3 bucket name for cache lookup
+            aws_profile: AWS profile for S3 fallback checks
+            aws_region: AWS region for S3 fallback checks
 
         Returns:
             Tuple of (files_to_analyze, stats_dict)
@@ -686,11 +898,15 @@ def pre_filter_files(
         cache = get_cache_service()
         files_to_analyze: list[str] = []
         file_statuses: list[dict[str, Any]] = []
+        # Track cache misses that have valid S3 paths for batch S3 check
+        cache_miss_indices: list[int] = []
+        cache_miss_s3_paths: list[str] = []
 
         stats: dict[str, Any] = {
             "total": len(file_paths),
             "cache_hits": 0,
             "cache_skipped": 0,
+            "s3_hits": 0,
             "no_timestamp": 0,
             "to_analyze": 0,
         }
@@ -700,13 +916,26 @@ def pre_filter_files(
             if not path.exists():
                 continue
 
+            stat = path.stat()
             file_status: dict[str, Any] = {
                 "path": file_path,
                 "filename": path.name,
-                "size": path.stat().st_size,
+                "size": stat.st_size,
+                "mtime": stat.st_mtime,
                 "already_uploaded": False,
             }
 
+            # First: check cache by filename+size (works regardless of timestamp source)
+            filename_result = cache.check_exists_by_filename(
+                s3_bucket, path.name, stat.st_size
+            )
+            if filename_result is True:
+                stats["cache_hits"] += 1
+                stats["cache_skipped"] += 1
+                file_status["already_uploaded"] = True
+                file_statuses.append(file_status)
+                continue
+
             # Try to extract timestamp from filename (fast, no file I/O)
             timestamp = mcap_service._extract_timestamp_from_filename(path.name)
 
@@ -719,8 +948,9 @@ def pre_filter_files(
 
             # Generate S3 path from filename timestamp
             s3_path = mcap_service.generate_s3_path(timestamp, path.name)
+            file_status["s3_path"] = s3_path
 
-            # Check cache
+            # Check cache by S3 path
             cache_result = cache.check_exists_cached(s3_bucket, s3_path)
 
             if cache_result is True:
@@ -728,18 +958,61 @@ def pre_filter_files(
                 stats["cache_hits"] += 1
                 stats["cache_skipped"] += 1
                 file_status["already_uploaded"] = True
-            else:
-                # Not in cache or doesn't exist, need analysis
-                if cache_result is not None:
-                    stats["cache_hits"] += 1
+            elif cache_result is False:
+                # Cache says it doesn't exist
+                stats["cache_hits"] += 1
                 files_to_analyze.append(file_path)
+            else:
+                # Cache miss (None) — need S3 check
+                cache_miss_indices.append(len(file_statuses))
+                cache_miss_s3_paths.append(s3_path)
 
             file_statuses.append(file_status)
 
+        # Batch S3 HEAD checks for cache misses
+        if cache_miss_s3_paths:
+            try:
+                s3_client = s3_service.create_s3_client(aws_profile, aws_region)
+
+                def check_s3(s3_path: str) -> bool:
+                    return s3_service.check_file_exists(s3_client, s3_bucket, s3_path)
+
+                with ThreadPoolExecutor(max_workers=self.max_workers) as executor:
+                    results = list(executor.map(check_s3, cache_miss_s3_paths))
+
+                for idx, s3_path, exists in zip(
+                    cache_miss_indices, cache_miss_s3_paths, results, strict=True
+                ):
+                    # Update cache with result
+                    fs = file_statuses[idx]
+                    cache.update_cache(
+                        s3_bucket, s3_path, exists, fs["filename"], fs["size"]
+                    )
+                    if exists:
+                        stats["s3_hits"] += 1
+                        fs["already_uploaded"] = True
+                    else:
+                        files_to_analyze.append(fs["path"])
+            except Exception:
+                # S3 check failed — fall back to full analysis for cache misses
+                for idx in cache_miss_indices:
+                    files_to_analyze.append(file_statuses[idx]["path"])
+
         stats["to_analyze"] = len(files_to_analyze)
         stats["file_statuses"] = file_statuses
         return files_to_analyze, stats
 
+    def get_active_jobs(self) -> list[UploadJob]:
+        """Get all currently active (non-terminal) jobs."""
+        active_statuses = {
+            UploadStatus.PENDING,
+            UploadStatus.ANALYZING,
+            UploadStatus.READY,
+            UploadStatus.UPLOADING,
+        }
+        with self._lock:
+            return [j for j in self.jobs.values() if j.status in active_statuses]
+
     def cleanup_old_jobs(self, max_age_seconds: int = 3600) -> int:
         """Remove completed jobs older than max_age_seconds.
 

From d3a70e20d07b4a9332d29d986c931f710649c55c Mon Sep 17 00:00:00 2001
From: "Simms, Andrew" <Andrew.Simms@nrel.gov>
Date: Sun, 8 Feb 2026 10:20:45 -0700
Subject: [PATCH 14/44] Services: Explicitly use UTC for all datetimes in
 upload_manager

---
 app/services/upload_manager.py | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/app/services/upload_manager.py b/app/services/upload_manager.py
index e2e3aa7..0f7ffea 100644
--- a/app/services/upload_manager.py
+++ b/app/services/upload_manager.py
@@ -7,7 +7,7 @@
 from collections.abc import Callable
 from concurrent.futures import ThreadPoolExecutor, as_completed
 from dataclasses import dataclass, field
-from datetime import datetime
+from datetime import UTC, datetime
 from enum import Enum
 from pathlib import Path
 from typing import Any
@@ -20,7 +20,7 @@
 logger = logging.getLogger(__name__)
 
 # Timestamps before this date are considered invalid (1970/epoch issues)
-EPOCH_CUTOFF = datetime(1980, 1, 1)
+EPOCH_CUTOFF = datetime(1980, 1, 1, tzinfo=UTC)
 
 
 class UploadStatus(Enum):
@@ -100,7 +100,7 @@ class UploadJob:
     job_id: str
     files: list[FileUploadState] = field(default_factory=list)
     status: UploadStatus = UploadStatus.PENDING
-    created_at: datetime = field(default_factory=datetime.now)
+    created_at: datetime = field(default_factory=lambda: datetime.now(UTC))
     started_at: datetime | None = None
     completed_at: datetime | None = None
     cancelled: bool = False
@@ -144,7 +144,7 @@ def eta_seconds(self) -> int | None:
         if not self.started_at or self.uploaded_bytes == 0:
             return None
 
-        elapsed = (datetime.now() - self.started_at).total_seconds()
+        elapsed = (datetime.now(UTC) - self.started_at).total_seconds()
         if elapsed <= 0:
             return None
 
@@ -382,8 +382,8 @@ def _analyze_single_file(
             file_state.start_time = start_time
 
             # Check if timestamp is valid (after 1980)
-            check_time = start_time.replace(tzinfo=None) if start_time.tzinfo else start_time
-            file_state.is_valid = check_time >= EPOCH_CUTOFF
+            naive_start = mcap_service.to_naive_utc(start_time)
+            file_state.is_valid = naive_start >= EPOCH_CUTOFF.replace(tzinfo=None)
 
             # Generate S3 path
             s3_path = mcap_service.generate_s3_path(start_time, file_state.filename)
@@ -575,7 +575,7 @@ def start_upload(
             return
 
         job.status = UploadStatus.UPLOADING
-        job.started_at = datetime.now()
+        job.started_at = datetime.now(UTC)
 
         # Create S3 client
         try:
@@ -681,7 +681,7 @@ def byte_callback(uploaded: int, total: int) -> None:
                 file_state = futures[future]
                 try:
                     result = future.result()
-                    file_state.upload_completed_at = datetime.now()
+                    file_state.upload_completed_at = datetime.now(UTC)
                     if result["success"]:
                         file_state.status = UploadStatus.COMPLETED
                         file_state.bytes_uploaded = file_state.file_size
@@ -737,7 +737,7 @@ def byte_callback(uploaded: int, total: int) -> None:
                     progress_callback(job)
 
         # Update final job status
-        job.completed_at = datetime.now()
+        job.completed_at = datetime.now(UTC)
         if job.cancelled:
             job.status = UploadStatus.CANCELLED
         elif all(f.status in (UploadStatus.COMPLETED, UploadStatus.SKIPPED) for f in job.files):
@@ -1022,7 +1022,7 @@ def cleanup_old_jobs(self, max_age_seconds: int = 3600) -> int:
         Returns:
             Number of jobs removed
         """
-        now = datetime.now()
+        now = datetime.now(UTC)
         removed = 0
 
         with self._lock:

From 105ed35dff22ed7a3075925f950c317817e9d872 Mon Sep 17 00:00:00 2001
From: "Simms, Andrew" <Andrew.Simms@nrel.gov>
Date: Sun, 8 Feb 2026 10:23:53 -0700
Subject: [PATCH 15/44] Service: Add log service for csv and jsonl logs

---
 app/services/log_service.py | 530 ++++++++++++++++++++++++++++++++++++
 1 file changed, 530 insertions(+)
 create mode 100644 app/services/log_service.py

diff --git a/app/services/log_service.py b/app/services/log_service.py
new file mode 100644
index 0000000..2d06715
--- /dev/null
+++ b/app/services/log_service.py
@@ -0,0 +1,530 @@
+"""JSONL logging service for application events.
+
+Writes one JSON object per line to hive-partitioned daily .jsonl files.
+DuckDB-compatible: SELECT * FROM read_json_auto('logs/json/**/events.jsonl', hive_partitioning=true)
+"""
+
+import csv
+import io
+import json
+import re
+import threading
+from datetime import UTC, datetime
+from pathlib import Path
+from typing import Any
+
+from app.config import get_settings
+
+
+class LogService:
+    """JSONL log service with thread-safe file writes."""
+
+    def __init__(self) -> None:
+        """Initialize the log service."""
+        self._write_lock = threading.Lock()
+
+    def _get_log_dir(self) -> Path:
+        """Get the configured log directory, creating it if needed."""
+        settings = get_settings()
+        log_dir = settings.log_directory
+        log_dir.mkdir(parents=True, exist_ok=True)
+        return log_dir
+
+    def _get_hive_dir(self, subdir: str, dt: datetime) -> Path:
+        """Build a hive-partitioned directory path and create it.
+
+        Args:
+            subdir: Top-level subdirectory ('json' or 'csv')
+            dt: Datetime to partition by
+
+        Returns:
+            Path like logs/json/year=2026/month=02/day=08/
+        """
+        log_dir = self._get_log_dir()
+        hive_dir = (
+            log_dir
+            / subdir
+            / f"year={dt.year:04d}"
+            / f"month={dt.month:02d}"
+            / f"day={dt.day:02d}"
+        )
+        hive_dir.mkdir(parents=True, exist_ok=True)
+        return hive_dir
+
+    @staticmethod
+    def _extract_date_from_hive_path(path: Path) -> str | None:
+        """Extract YYYY-MM-DD date string from a hive-partitioned path.
+
+        Looks for year=YYYY/month=MM/day=DD components in the path.
+
+        Returns:
+            Date string like '2026-02-08', or None if not found
+        """
+        path_str = str(path)
+        match = re.search(r"year=(\d{4})/month=(\d{2})/day=(\d{2})", path_str)
+        if match:
+            return f"{match.group(1)}-{match.group(2)}-{match.group(3)}"
+        return None
+
+    def _get_current_log_file(self) -> Path:
+        """Get the path to today's events log file (hive-partitioned)."""
+        now = datetime.now(UTC)
+        hive_dir = self._get_hive_dir("json", now)
+        return hive_dir / "events.jsonl"
+
+    def log(
+        self,
+        level: str,
+        category: str,
+        event: str,
+        message: str,
+        metadata: dict[str, Any] | None = None,
+    ) -> None:
+        """Append a log entry to the current day's JSONL file.
+
+        Args:
+            level: Log level (INFO, WARNING, ERROR)
+            category: Event category (upload, analysis, settings, app, sync)
+            event: Machine-readable event name (snake_case)
+            message: Human-readable message
+            metadata: Optional additional data
+        """
+        entry: dict[str, Any] = {
+            "timestamp": datetime.now(UTC).isoformat(),
+            "level": level.upper(),
+            "category": category,
+            "event": event,
+            "message": message,
+        }
+        if metadata:
+            entry["metadata"] = metadata
+
+        line = json.dumps(entry, default=str)
+
+        with self._write_lock:
+            log_file = self._get_current_log_file()
+            with open(log_file, "a", encoding="utf-8") as f:
+                f.write(line + "\n")
+
+    def info(
+        self,
+        category: str,
+        event: str,
+        message: str,
+        metadata: dict[str, Any] | None = None,
+    ) -> None:
+        """Log an INFO-level event."""
+        self.log("INFO", category, event, message, metadata)
+
+    def warning(
+        self,
+        category: str,
+        event: str,
+        message: str,
+        metadata: dict[str, Any] | None = None,
+    ) -> None:
+        """Log a WARNING-level event."""
+        self.log("WARNING", category, event, message, metadata)
+
+    def error(
+        self,
+        category: str,
+        event: str,
+        message: str,
+        metadata: dict[str, Any] | None = None,
+    ) -> None:
+        """Log an ERROR-level event."""
+        self.log("ERROR", category, event, message, metadata)
+
+    def save_job_jsonl(
+        self,
+        job_id: str,
+        job_dict: dict[str, Any],
+        completed_at: datetime,
+    ) -> Path:
+        """Write a per-job JSONL summary file.
+
+        Args:
+            job_id: The upload job ID
+            job_dict: Full job completion summary dict
+            completed_at: When the job completed
+
+        Returns:
+            Path to the written file
+        """
+        hive_dir = self._get_hive_dir("json", completed_at)
+        out_path = hive_dir / f"{job_id}.jsonl"
+        line = json.dumps(job_dict, default=str)
+        with self._write_lock:
+            with open(out_path, "w", encoding="utf-8") as f:
+                f.write(line + "\n")
+        return out_path
+
+    def save_job_csv(
+        self,
+        job_id: str,
+        job: Any,
+        completed_at: datetime,
+    ) -> Path:
+        """Write a per-job CSV upload summary.
+
+        Args:
+            job_id: The upload job ID
+            job: UploadJob instance with file states
+            completed_at: When the job completed
+
+        Returns:
+            Path to the written CSV file
+        """
+        from app.services.utils import format_file_size
+
+        hive_dir = self._get_hive_dir("csv", completed_at)
+        time_str = completed_at.strftime("%H%M%S")
+        short_id = job_id[:8]
+        out_path = hive_dir / f"upload-summary-{time_str}-{short_id}.csv"
+
+        columns = [
+            "job_id",
+            "filename",
+            "file_size_bytes",
+            "file_size_formatted",
+            "s3_path",
+            "status",
+            "data_start_time",
+            "upload_started_at",
+            "upload_completed_at",
+            "upload_duration_seconds",
+            "upload_speed_mbps",
+            "is_duplicate",
+            "is_valid",
+            "error_message",
+        ]
+
+        buf = io.StringIO()
+        writer = csv.writer(buf)
+        writer.writerow(columns)
+
+        for f in job.files:
+            duration = f.upload_duration_seconds
+            speed = (
+                round(f.file_size / duration / 1024 / 1024 * 8, 2)
+                if duration and duration > 0
+                else None
+            )
+            writer.writerow([
+                job_id,
+                f.filename,
+                f.file_size,
+                format_file_size(f.file_size),
+                f.s3_path,
+                f.status.value,
+                f.start_time.isoformat() if f.start_time else "",
+                f.upload_started_at.isoformat() if f.upload_started_at else "",
+                f.upload_completed_at.isoformat() if f.upload_completed_at else "",
+                f.upload_duration_seconds,
+                speed,
+                f.is_duplicate,
+                f.is_valid,
+                f.error_message,
+            ])
+
+        with self._write_lock:
+            with open(out_path, "w", encoding="utf-8", newline="") as fh:
+                fh.write(buf.getvalue())
+
+        return out_path
+
+    def list_log_files(self) -> list[dict[str, Any]]:
+        """List all log files (JSONL + CSV) with metadata.
+
+        Returns:
+            List of dicts with date, filename, path, size_bytes, relative_path, type
+        """
+        log_dir = self._get_log_dir()
+        json_dir = log_dir / "json"
+        csv_dir = log_dir / "csv"
+
+        result: list[dict[str, Any]] = []
+
+        # Collect JSONL files under json/
+        if json_dir.exists():
+            for f in sorted(json_dir.rglob("*.jsonl"), reverse=True):
+                date_str = self._extract_date_from_hive_path(f)
+                rel_path = f.relative_to(log_dir)
+                result.append({
+                    "date": date_str,
+                    "filename": f.name,
+                    "path": str(f),
+                    "relative_path": str(rel_path),
+                    "size_bytes": f.stat().st_size,
+                    "type": "jsonl",
+                })
+
+        # Collect CSV files under csv/
+        if csv_dir.exists():
+            for f in sorted(csv_dir.rglob("*.csv"), reverse=True):
+                date_str = self._extract_date_from_hive_path(f)
+                rel_path = f.relative_to(log_dir)
+                result.append({
+                    "date": date_str,
+                    "filename": f.name,
+                    "path": str(f),
+                    "relative_path": str(rel_path),
+                    "size_bytes": f.stat().st_size,
+                    "type": "csv",
+                })
+
+        return result
+
+    def read_log_entries(
+        self,
+        date: str | None = None,
+        level: str | None = None,
+        category: str | None = None,
+        search: str | None = None,
+        offset: int = 0,
+        limit: int = 100,
+    ) -> dict[str, Any]:
+        """Read and filter log entries with pagination.
+
+        Args:
+            date: Filter by date (YYYY-MM-DD). None = all dates.
+            level: Filter by level (INFO/WARNING/ERROR)
+            category: Filter by category
+            search: Full-text search in message and event fields
+            offset: Number of entries to skip
+            limit: Maximum entries to return
+
+        Returns:
+            Dict with entries, total count, offset, limit
+        """
+        log_dir = self._get_log_dir()
+        json_dir = log_dir / "json"
+
+        # Determine which event files to read
+        if date:
+            # Parse date and construct hive path directly
+            try:
+                dt = datetime.strptime(date, "%Y-%m-%d")
+            except ValueError:
+                return {"entries": [], "total": 0, "offset": offset, "limit": limit}
+            hive_path = (
+                json_dir
+                / f"year={dt.year:04d}"
+                / f"month={dt.month:02d}"
+                / f"day={dt.day:02d}"
+                / "events.jsonl"
+            )
+            files = [hive_path] if hive_path.exists() else []
+        else:
+            if json_dir.exists():
+                files = sorted(json_dir.rglob("events.jsonl"), reverse=True)
+            else:
+                files = []
+
+        # Read and filter entries
+        all_entries: list[dict[str, Any]] = []
+        for log_file in files:
+            try:
+                with open(log_file, encoding="utf-8") as f:
+                    for line in f:
+                        line = line.strip()
+                        if not line:
+                            continue
+                        try:
+                            entry = json.loads(line)
+                        except json.JSONDecodeError:
+                            continue
+
+                        # Apply filters
+                        if level and entry.get("level", "").upper() != level.upper():
+                            continue
+                        if category and entry.get("category") != category:
+                            continue
+                        if search:
+                            search_lower = search.lower()
+                            msg = entry.get("message", "").lower()
+                            evt = entry.get("event", "").lower()
+                            if search_lower not in msg and search_lower not in evt:
+                                continue
+
+                        all_entries.append(entry)
+            except OSError:
+                continue
+
+        # Sort by timestamp descending (newest first)
+        all_entries.sort(key=lambda e: e.get("timestamp", ""), reverse=True)
+
+        total = len(all_entries)
+        paginated = all_entries[offset : offset + limit]
+
+        return {
+            "entries": paginated,
+            "total": total,
+            "offset": offset,
+            "limit": limit,
+        }
+
+    def get_log_stats(self) -> dict[str, Any]:
+        """Get aggregate statistics across all log files.
+
+        Returns:
+            Dict with counts by level/category, date range, totals
+        """
+        log_dir = self._get_log_dir()
+        json_dir = log_dir / "json"
+        csv_dir = log_dir / "csv"
+
+        level_counts: dict[str, int] = {}
+        category_counts: dict[str, int] = {}
+        total_entries = 0
+        total_size = 0
+        today_count = 0
+        today_str = datetime.now(UTC).strftime("%Y-%m-%d")
+        dates: list[str] = []
+
+        event_files = sorted(json_dir.rglob("events.jsonl")) if json_dir.exists() else []
+
+        for log_file in event_files:
+            total_size += log_file.stat().st_size
+            date_str = self._extract_date_from_hive_path(log_file)
+            if date_str and date_str not in dates:
+                dates.append(date_str)
+            is_today = date_str == today_str
+
+            try:
+                with open(log_file, encoding="utf-8") as f:
+                    for line in f:
+                        line = line.strip()
+                        if not line:
+                            continue
+                        try:
+                            entry = json.loads(line)
+                        except json.JSONDecodeError:
+                            continue
+
+                        total_entries += 1
+                        if is_today:
+                            today_count += 1
+
+                        lvl = entry.get("level", "UNKNOWN")
+                        level_counts[lvl] = level_counts.get(lvl, 0) + 1
+
+                        cat = entry.get("category", "unknown")
+                        category_counts[cat] = category_counts.get(cat, 0) + 1
+            except OSError:
+                continue
+
+        dates.sort()
+
+        # Count CSV files
+        csv_count = len(list(csv_dir.rglob("*.csv"))) if csv_dir.exists() else 0
+
+        return {
+            "total_entries": total_entries,
+            "today_entries": today_count,
+            "total_size_bytes": total_size,
+            "level_counts": level_counts,
+            "category_counts": category_counts,
+            "date_range": {
+                "earliest": dates[0] if dates else None,
+                "latest": dates[-1] if dates else None,
+            },
+            "file_count": len(event_files),
+            "csv_count": csv_count,
+        }
+
+    def sync_logs_to_s3(
+        self,
+        s3_client: Any,
+        bucket: str,
+        prefix: str = "logs/",
+    ) -> dict[str, Any]:
+        """Upload new/changed log files (JSONL + CSV) to S3.
+
+        Tracks sync state in .sync_state.json to only upload changed files.
+        Uses relative paths as both the sync state key and S3 key suffix.
+
+        Args:
+            s3_client: boto3 S3 client
+            bucket: S3 bucket name
+            prefix: S3 key prefix for log files
+
+        Returns:
+            Dict with sync results
+        """
+        log_dir = self._get_log_dir()
+        sync_state_file = log_dir / ".sync_state.json"
+
+        # Load previous sync state
+        sync_state: dict[str, int] = {}
+        if sync_state_file.exists():
+            try:
+                with open(sync_state_file, encoding="utf-8") as f:
+                    sync_state = json.load(f)
+            except (json.JSONDecodeError, OSError):
+                sync_state = {}
+
+        # Discover all JSONL under json/ and CSV under csv/
+        files: list[Path] = []
+        json_dir = log_dir / "json"
+        csv_dir = log_dir / "csv"
+        if json_dir.exists():
+            files.extend(json_dir.rglob("*.jsonl"))
+        if csv_dir.exists():
+            files.extend(csv_dir.rglob("*.csv"))
+
+        synced = 0
+        skipped = 0
+        errors: list[str] = []
+
+        for log_file in files:
+            rel_path = str(log_file.relative_to(log_dir))
+            current_size = log_file.stat().st_size
+            last_synced_size = sync_state.get(rel_path, 0)
+
+            if current_size == last_synced_size:
+                skipped += 1
+                continue
+
+            s3_key = f"{prefix}{rel_path}"
+            try:
+                s3_client.upload_file(str(log_file), bucket, s3_key)
+                sync_state[rel_path] = current_size
+                synced += 1
+            except Exception as e:
+                errors.append(f"{rel_path}: {e}")
+
+        # Save updated sync state
+        try:
+            with open(sync_state_file, "w", encoding="utf-8") as f:
+                json.dump(sync_state, f, indent=2)
+        except OSError:
+            pass
+
+        self.info(
+            "sync",
+            "log_sync_completed",
+            f"Synced {synced} log files to S3",
+            {"synced": synced, "skipped": skipped, "errors": len(errors)},
+        )
+
+        return {
+            "success": len(errors) == 0,
+            "synced": synced,
+            "skipped": skipped,
+            "errors": errors,
+            "total_files": len(files),
+        }
+
+
+# Module-level singleton accessor
+_log_service: LogService | None = None
+
+
+def get_log_service() -> LogService:
+    """Get the singleton LogService instance."""
+    global _log_service
+    if _log_service is None:
+        _log_service = LogService()
+    return _log_service

From 0dc3c7d081519a6121e2eaa02684d96d3d72b104 Mon Sep 17 00:00:00 2001
From: "Simms, Andrew" <Andrew.Simms@nrel.gov>
Date: Sun, 8 Feb 2026 10:24:19 -0700
Subject: [PATCH 16/44] Route: Add logs api endpoint

---
 app/routes/logs.py | 173 +++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 173 insertions(+)
 create mode 100644 app/routes/logs.py

diff --git a/app/routes/logs.py b/app/routes/logs.py
new file mode 100644
index 0000000..6017f08
--- /dev/null
+++ b/app/routes/logs.py
@@ -0,0 +1,173 @@
+"""Logs API routes for modaq_upload"""
+
+import csv
+from pathlib import Path
+
+from flask import Blueprint, Response, jsonify, request, send_file
+
+from app.config import get_settings
+from app.services import s3_service
+from app.services.log_service import get_log_service
+
+logs_bp = Blueprint("logs", __name__)
+
+
+@logs_bp.route("/entries", methods=["GET"])
+def get_log_entries() -> tuple[Response, int]:
+    """Query log entries with filtering and pagination.
+
+    Query params:
+        date: Filter by date (YYYY-MM-DD)
+        level: Filter by level (INFO/WARNING/ERROR)
+        category: Filter by category (upload/analysis/settings/app/sync)
+        search: Full-text search in message and event
+        offset: Pagination offset (default 0)
+        limit: Pagination limit (default 100)
+
+    Returns:
+        JSON with entries, total, offset, limit
+    """
+    log = get_log_service()
+
+    date = request.args.get("date")
+    level = request.args.get("level")
+    category = request.args.get("category")
+    search = request.args.get("search")
+    offset = request.args.get("offset", "0")
+    limit = request.args.get("limit", "100")
+
+    try:
+        offset_int = max(0, int(offset))
+        limit_int = max(1, min(1000, int(limit)))
+    except ValueError:
+        offset_int = 0
+        limit_int = 100
+
+    result = log.read_log_entries(
+        date=date,
+        level=level,
+        category=category,
+        search=search,
+        offset=offset_int,
+        limit=limit_int,
+    )
+
+    return jsonify(result), 200
+
+
+@logs_bp.route("/files", methods=["GET"])
+def get_log_files() -> tuple[Response, int]:
+    """List all log files with metadata.
+
+    Returns:
+        JSON with list of log files (date, filename, size)
+    """
+    log = get_log_service()
+    files = log.list_log_files()
+    return jsonify({"files": files}), 200
+
+
+@logs_bp.route("/stats", methods=["GET"])
+def get_log_stats() -> tuple[Response, int]:
+    """Get aggregate log statistics.
+
+    Returns:
+        JSON with counts by level/category, date range, totals
+    """
+    log = get_log_service()
+    stats = log.get_log_stats()
+    return jsonify(stats), 200
+
+
+@logs_bp.route("/sync", methods=["POST"])
+def sync_logs() -> tuple[Response, int]:
+    """Trigger S3 sync of log files.
+
+    Returns:
+        JSON with sync results (synced, skipped, errors)
+    """
+    settings = get_settings()
+
+    if not settings.s3_bucket:
+        return jsonify({"success": False, "error": "S3 bucket not configured"}), 400
+
+    log = get_log_service()
+    log.info("sync", "log_sync_started", "Starting log sync to S3")
+
+    try:
+        client = s3_service.create_s3_client(settings.aws_profile, settings.aws_region)
+        result = log.sync_logs_to_s3(client, settings.s3_bucket)
+        return jsonify(result), 200
+    except Exception as e:
+        log.error("sync", "log_sync_failed", f"Log sync failed: {e}", {"error": str(e)})
+        return jsonify({"success": False, "error": str(e)}), 200
+
+
+def _resolve_csv_path(relative_path: str) -> Path | None:
+    """Resolve a relative CSV path safely within the log directory.
+
+    Returns the absolute path if valid, or None if the path is invalid or
+    escapes the log directory.
+    """
+    settings = get_settings()
+    log_dir = settings.log_directory
+    if not log_dir.is_absolute():
+        from app.config import BASE_DIR
+
+        log_dir = BASE_DIR / log_dir
+
+    resolved = (log_dir / relative_path).resolve()
+    try:
+        resolved.relative_to(log_dir.resolve())
+    except ValueError:
+        return None
+    if not resolved.is_file() or resolved.suffix != ".csv":
+        return None
+    return resolved
+
+
+@logs_bp.route("/csv-download", methods=["GET"])
+def csv_download() -> tuple[Response, int] | Response:
+    """Serve a CSV file for browser download.
+
+    Query params:
+        path: Relative path within the log directory
+              (e.g. csv/year=2026/month=02/day=08/upload-summary-143022-abcd1234.csv)
+    """
+    relative_path = request.args.get("path", "")
+    if not relative_path:
+        return jsonify({"error": "Missing path parameter"}), 400
+
+    resolved = _resolve_csv_path(relative_path)
+    if resolved is None:
+        return jsonify({"error": "Invalid path"}), 400
+
+    return send_file(resolved, as_attachment=True, download_name=resolved.name)
+
+
+@logs_bp.route("/csv-preview", methods=["GET"])
+def csv_preview() -> tuple[Response, int]:
+    """Parse a CSV and return JSON for in-page viewing.
+
+    Query params:
+        path: Relative path within the log directory
+
+    Returns:
+        JSON with columns list and rows list of dicts
+    """
+    relative_path = request.args.get("path", "")
+    if not relative_path:
+        return jsonify({"error": "Missing path parameter"}), 400
+
+    resolved = _resolve_csv_path(relative_path)
+    if resolved is None:
+        return jsonify({"error": "Invalid path"}), 400
+
+    try:
+        with open(resolved, encoding="utf-8", newline="") as f:
+            reader = csv.DictReader(f)
+            columns = reader.fieldnames or []
+            rows = list(reader)
+        return jsonify({"columns": columns, "rows": rows}), 200
+    except Exception as e:
+        return jsonify({"error": f"Failed to read CSV: {e}"}), 500

From c64b08cbab4b96e88c853ffd895296921a3bace6 Mon Sep 17 00:00:00 2001
From: "Simms, Andrew" <Andrew.Simms@nrel.gov>
Date: Sun, 8 Feb 2026 10:25:22 -0700
Subject: [PATCH 17/44] Web: Add shared utils

---
 app/services/mcap_service.py | 77 ++++++++++++++++--------------------
 app/services/utils.py        | 18 +++++++++
 2 files changed, 51 insertions(+), 44 deletions(-)
 create mode 100644 app/services/utils.py

diff --git a/app/services/mcap_service.py b/app/services/mcap_service.py
index 375180c..705d7c6 100644
--- a/app/services/mcap_service.py
+++ b/app/services/mcap_service.py
@@ -1,11 +1,23 @@
 """MCAP service for parsing MCAP files and extracting metadata."""
 
+import logging
 import re
 from datetime import UTC, datetime
 from pathlib import Path
 
 import pandas as pd
 
+from app.services.utils import format_file_size
+
+logger = logging.getLogger(__name__)
+
+__all__ = ["format_file_size"]
+
+
+def to_naive_utc(dt: datetime) -> datetime:
+    """Strip timezone for comparison (normalize to naive UTC)."""
+    return dt.replace(tzinfo=None) if dt.tzinfo else dt
+
 
 def _extract_timestamp_from_filename(filename: str) -> datetime | None:
     """Try to extract a timestamp from the filename.
@@ -92,12 +104,12 @@ def _find_datetime_in_dataframes(dataframes: dict[str, pd.DataFrame]) -> datetim
             # Check if it's a valid timestamp (after 1980)
             if topic_time is not None:
                 # Make timezone-naive for comparison
-                check_time = topic_time.replace(tzinfo=None) if topic_time.tzinfo else topic_time
-                if check_time > epoch_cutoff.replace(tzinfo=None):
-                    if earliest_time is None or check_time < earliest_time.replace(tzinfo=None):
+                check_time = to_naive_utc(topic_time)
+                if check_time > to_naive_utc(epoch_cutoff):
+                    if earliest_time is None or check_time < to_naive_utc(earliest_time):
                         earliest_time = topic_time
         except Exception:
-            pass
+            logger.debug("Failed to extract datetime from index of topic", exc_info=True)
 
         # Then, check columns for datetime types
         for col in df.columns:
@@ -116,13 +128,9 @@ def _find_datetime_in_dataframes(dataframes: dict[str, pd.DataFrame]) -> datetim
                         else:
                             topic_time = pd.Timestamp(first_val).to_pydatetime()
 
-                        check_time = (
-                            topic_time.replace(tzinfo=None) if topic_time.tzinfo else topic_time
-                        )
-                        if check_time > epoch_cutoff.replace(tzinfo=None):
-                            if earliest_time is None or check_time < earliest_time.replace(
-                                tzinfo=None
-                            ):
+                        check_time = to_naive_utc(topic_time)
+                        if check_time > to_naive_utc(epoch_cutoff):
+                            if earliest_time is None or check_time < to_naive_utc(earliest_time):
                                 earliest_time = topic_time
 
                 # Check for timestamp-like column names
@@ -139,22 +147,18 @@ def _find_datetime_in_dataframes(dataframes: dict[str, pd.DataFrame]) -> datetim
                                 elif first_val > 1e12:  # Milliseconds
                                     topic_time = pd.Timestamp(first_val, unit="ms").to_pydatetime()
                                 else:  # Seconds
-                                    topic_time = datetime.fromtimestamp(first_val)
-
-                                check_time = (
-                                    topic_time.replace(tzinfo=None)
-                                    if topic_time.tzinfo
-                                    else topic_time
-                                )
-                                if check_time > epoch_cutoff.replace(tzinfo=None):
-                                    if earliest_time is None or check_time < earliest_time.replace(
-                                        tzinfo=None
+                                    topic_time = datetime.fromtimestamp(first_val, tz=UTC)
+
+                                check_time = to_naive_utc(topic_time)
+                                if check_time > to_naive_utc(epoch_cutoff):
+                                    if earliest_time is None or check_time < to_naive_utc(
+                                        earliest_time
                                     ):
                                         earliest_time = topic_time
                         except Exception:
-                            pass
+                            logger.debug("Failed to parse timestamp column %s", col, exc_info=True)
             except Exception:
-                continue
+                logger.debug("Failed to inspect column %s", col, exc_info=True)
 
     return earliest_time
 
@@ -183,7 +187,7 @@ def extract_start_time(file_path: Path | str) -> datetime:
         raise FileNotFoundError(f"MCAP file not found: {path}")
 
     earliest_time: datetime | None = None
-    epoch_cutoff = datetime(1980, 1, 1)
+    epoch_cutoff = datetime(1980, 1, 1, tzinfo=UTC)
 
     try:
         parser = MCAPParser(path)
@@ -196,7 +200,7 @@ def extract_start_time(file_path: Path | str) -> datetime:
             )
             earliest_time = _find_datetime_in_dataframes(dataframes)
         except Exception:
-            pass
+            logger.debug("Stage2 datetime extraction failed", exc_info=True)
 
         # If no valid time found, try without conversion
         if earliest_time is None:
@@ -204,7 +208,7 @@ def extract_start_time(file_path: Path | str) -> datetime:
                 dataframes = parser.get_dataframes(process_stage2=False)
                 earliest_time = _find_datetime_in_dataframes(dataframes)
             except Exception:
-                pass
+                logger.debug("Raw dataframe extraction failed", exc_info=True)
 
     except ImportError as e:
         raise ImportError(
@@ -212,12 +216,11 @@ def extract_start_time(file_path: Path | str) -> datetime:
             "Install with: pip install git+https://github.com/MODAQ2/MODAQ_toolkit.git"
         ) from e
     except Exception:
-        pass  # Will fall back to filename parsing
+        logger.debug("MCAP parser initialization failed for %s", path, exc_info=True)
 
     # Validate the timestamp - must be after 1980
     if earliest_time is not None:
-        check_time = earliest_time.replace(tzinfo=None) if earliest_time.tzinfo else earliest_time
-        if check_time < epoch_cutoff:
+        if to_naive_utc(earliest_time) < to_naive_utc(epoch_cutoff):
             earliest_time = None  # Invalid timestamp, try filename
 
     # Fallback: try to extract from filename
@@ -247,6 +250,7 @@ def generate_s3_path(start_time: datetime, filename: str) -> str:
     minute_bucket = (start_time.minute // 10) * 10
 
     path = (
+        f"data/"
         f"year={start_time.year:04d}/"
         f"month={start_time.month:02d}/"
         f"day={start_time.day:02d}/"
@@ -288,18 +292,3 @@ def get_file_info(file_path: Path | str) -> dict[str, str | int | None]:
     return info
 
 
-def format_file_size(size_bytes: int) -> str:
-    """Format a file size in bytes to a human-readable string.
-
-    Args:
-        size_bytes: Size in bytes
-
-    Returns:
-        Human-readable size string (e.g., "1.5 GB")
-    """
-    size_float = float(size_bytes)
-    for unit in ["B", "KB", "MB", "GB", "TB"]:
-        if abs(size_float) < 1024.0:
-            return f"{size_float:.1f} {unit}"
-        size_float = size_float / 1024.0
-    return f"{size_float:.1f} PB"
diff --git a/app/services/utils.py b/app/services/utils.py
new file mode 100644
index 0000000..93bf86d
--- /dev/null
+++ b/app/services/utils.py
@@ -0,0 +1,18 @@
+"""Shared utility functions for app services."""
+
+
+def format_file_size(size_bytes: int) -> str:
+    """Format a file size in bytes to a human-readable string.
+
+    Args:
+        size_bytes: Size in bytes
+
+    Returns:
+        Human-readable size string (e.g., "1.5 GB")
+    """
+    size_float = float(size_bytes)
+    for unit in ["B", "KB", "MB", "GB", "TB"]:
+        if abs(size_float) < 1024.0:
+            return f"{size_float:.1f} {unit}"
+        size_float = size_float / 1024.0
+    return f"{size_float:.1f} PB"

From 8b4711b4d1c1539b1dd23bd50afc913d56a24239 Mon Sep 17 00:00:00 2001
From: "Simms, Andrew" <Andrew.Simms@nrel.gov>
Date: Sun, 8 Feb 2026 10:25:49 -0700
Subject: [PATCH 18/44] Web: Add logs route to main routing

---
 app/routes/main.py | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/app/routes/main.py b/app/routes/main.py
index 291039a..700e234 100644
--- a/app/routes/main.py
+++ b/app/routes/main.py
@@ -21,3 +21,9 @@ def files() -> str:
 def settings() -> str:
     """Render the settings page."""
     return render_template("settings.html")
+
+
+@main_bp.route("/logs")
+def logs() -> str:
+    """Render the logs viewer page."""
+    return render_template("logs.html")

From 63fb7e0ab7d21605cfdd19cc0ec36c9736ca517f Mon Sep 17 00:00:00 2001
From: "Simms, Andrew" <Andrew.Simms@nrel.gov>
Date: Sun, 8 Feb 2026 10:26:25 -0700
Subject: [PATCH 19/44] Routes: Use logging in settings

---
 app/routes/settings.py | 39 ++++++++++++++++++++++++++++++++++++++-
 1 file changed, 38 insertions(+), 1 deletion(-)

diff --git a/app/routes/settings.py b/app/routes/settings.py
index 7b06f88..bc1e1a6 100644
--- a/app/routes/settings.py
+++ b/app/routes/settings.py
@@ -5,6 +5,7 @@
 from app.config import get_package_version, get_settings, get_updater
 from app.services import s3_service
 from app.services.cache_service import get_cache_service
+from app.services.log_service import get_log_service
 
 settings_bp = Blueprint("settings", __name__)
 
@@ -40,7 +41,10 @@ def update_settings() -> tuple[Response, int]:
     settings = get_settings()
 
     # Validate settings
-    allowed_keys = {"aws_profile", "aws_region", "s3_bucket", "default_upload_folder"}
+    allowed_keys = {
+        "aws_profile", "aws_region", "s3_bucket", "default_upload_folder", "display_name",
+        "log_directory",
+    }
     filtered_data = {k: v for k, v in data.items() if k in allowed_keys}
 
     if not filtered_data:
@@ -48,6 +52,14 @@ def update_settings() -> tuple[Response, int]:
 
     settings.update(filtered_data)
 
+    log = get_log_service()
+    log.info(
+        "settings",
+        "settings_updated",
+        f"Updated settings: {', '.join(filtered_data.keys())}",
+        {"changed_keys": list(filtered_data.keys())},
+    )
+
     return jsonify(settings.all()), 200
 
 
@@ -90,11 +102,18 @@ def validate_connection() -> tuple[Response, int]:
     if not bucket:
         return jsonify({"error": "S3 bucket not specified"}), 400
 
+    log = get_log_service()
     try:
         client = s3_service.create_s3_client(profile, region)
         result = s3_service.validate_bucket_access(client, bucket)
 
         if result["success"]:
+            log.info(
+                "settings",
+                "connection_test",
+                f"Connection test succeeded for bucket '{bucket}'",
+                {"bucket": bucket, "profile": profile, "region": region, "success": True},
+            )
             return jsonify(
                 {
                     "success": True,
@@ -102,6 +121,18 @@ def validate_connection() -> tuple[Response, int]:
                 }
             ), 200
         else:
+            log.warning(
+                "settings",
+                "connection_test",
+                f"Connection test failed for bucket '{bucket}': {result['error']}",
+                {
+                    "bucket": bucket,
+                    "profile": profile,
+                    "region": region,
+                    "success": False,
+                    "error": result["error"],
+                },
+            )
             return jsonify(
                 {
                     "success": False,
@@ -110,6 +141,12 @@ def validate_connection() -> tuple[Response, int]:
             ), 200
 
     except Exception as e:
+        log.error(
+            "settings",
+            "connection_test",
+            f"Connection test error for bucket '{bucket}': {e}",
+            {"bucket": bucket, "profile": profile, "region": region, "error": str(e)},
+        )
         return jsonify(
             {
                 "success": False,

From 54daa77fdbb469cbf1135d414b24be0ce9735670 Mon Sep 17 00:00:00 2001
From: "Simms, Andrew" <Andrew.Simms@nrel.gov>
Date: Sun, 8 Feb 2026 10:27:35 -0700
Subject: [PATCH 20/44] Upload: Refactor to use callback architecture

---
 app/routes/upload.py | 115 ++++++++++++++++++++++---------------------
 1 file changed, 59 insertions(+), 56 deletions(-)

diff --git a/app/routes/upload.py b/app/routes/upload.py
index f8d3cdb..0010c50 100644
--- a/app/routes/upload.py
+++ b/app/routes/upload.py
@@ -1,10 +1,11 @@
 """Upload API routes for modaq_upload"""
 
 import json
-import os
 import tempfile
 import threading
-from collections.abc import Generator
+import time
+from collections import deque
+from collections.abc import Callable, Generator
 from pathlib import Path
 from typing import Any
 
@@ -21,7 +22,7 @@
 upload_bp = Blueprint("upload", __name__)
 
 # Store for SSE clients per job
-_sse_queues: dict[str, list[Any]] = {}
+_sse_queues: dict[str, list[deque[dict[str, Any]]]] = {}
 _sse_lock = threading.Lock()
 
 
@@ -33,6 +34,27 @@ def send_sse_event(job_id: str, data: dict[str, Any]) -> None:
             q.append(data)
 
 
+def _make_analysis_callback(
+    job_id: str,
+) -> Callable[[UploadJob, FileUploadState], None]:
+    """Create an analysis progress callback that sends SSE events."""
+
+    def callback(job: UploadJob, file_state: FileUploadState) -> None:
+        send_sse_event(
+            job_id,
+            {
+                "type": "analysis_progress",
+                "job_id": job.job_id,
+                "job_status": job.status.value,
+                "file": file_state.to_dict(),
+                "total_files": len(job.files),
+                "analysis_complete": job.status.value in ("ready", "failed"),
+            },
+        )
+
+    return callback
+
+
 @upload_bp.route("/analyze", methods=["POST"])
 def analyze_files() -> tuple[Response, int]:
     """Analyze uploaded files and prepare for upload.
@@ -58,11 +80,10 @@ def analyze_files() -> tuple[Response, int]:
         for uploaded_file in uploaded_files:
             if uploaded_file.filename:
                 # Filename may include subdirectory path from folder selection
-                temp_path = os.path.join(temp_dir, uploaded_file.filename)
-                # Create parent directories if they don't exist
-                os.makedirs(os.path.dirname(temp_path), exist_ok=True)
+                temp_path = Path(temp_dir) / uploaded_file.filename
+                temp_path.parent.mkdir(parents=True, exist_ok=True)
                 uploaded_file.save(temp_path)
-                file_paths.append(temp_path)
+                file_paths.append(str(temp_path))
 
     # Handle JSON with file paths (for folder selection / bulk mode)
     elif request.is_json:
@@ -76,19 +97,7 @@ def analyze_files() -> tuple[Response, int]:
 
     # Create job with temp_dir tracked for cleanup
     job = manager.create_job(file_paths, temp_dir=temp_dir)
-
-    def analysis_progress_callback(job: UploadJob, file_state: FileUploadState) -> None:
-        """Send analysis progress updates via SSE."""
-        send_sse_event(
-            job.job_id,
-            {
-                "type": "analysis_progress",
-                "job_id": job.job_id,
-                "job_status": job.status.value,
-                "file": file_state.to_dict(),
-                "analysis_complete": job.status.value in ("ready", "failed"),
-            },
-        )
+    analysis_progress_callback = _make_analysis_callback(job.job_id)
 
     # Start analysis in background thread
     def run_analysis() -> None:
@@ -186,7 +195,7 @@ def get_progress(job_id: str) -> Response:
 
     def generate() -> Generator[str, None, None]:
         # Create a queue for this client
-        queue: list[Any] = []
+        queue: deque[dict[str, Any]] = deque()
         with _sse_lock:
             if job_id not in _sse_queues:
                 _sse_queues[job_id] = []
@@ -202,7 +211,7 @@ def generate() -> Generator[str, None, None]:
             while True:
                 # Check for updates
                 while queue:
-                    data = queue.pop(0)
+                    data = queue.popleft()
                     yield f"data: {json.dumps(data)}\n\n"
 
                     # Check if job is complete
@@ -210,8 +219,6 @@ def generate() -> Generator[str, None, None]:
                         return
 
                 # Small delay to prevent busy waiting
-                import time
-
                 time.sleep(0.1)
 
                 # Check if job still exists
@@ -268,19 +275,11 @@ def get_active_job() -> tuple[Response, int]:
     manager = get_upload_manager()
 
     # Find the most recent job that is still active (not completed/failed/cancelled)
-    active_statuses = {
-        UploadStatus.PENDING,
-        UploadStatus.ANALYZING,
-        UploadStatus.READY,
-        UploadStatus.UPLOADING,
-    }
-
+    active_jobs = manager.get_active_jobs()
     active_job: UploadJob | None = None
-    for job in manager.jobs.values():
-        if job.status in active_statuses:
-            # Return the most recently created active job
-            if active_job is None or job.job_id > active_job.job_id:
-                active_job = job
+    for job in active_jobs:
+        if active_job is None or job.job_id > active_job.job_id:
+            active_job = job
 
     if active_job:
         return jsonify(
@@ -345,14 +344,20 @@ def scan_folder() -> tuple[Response, int]:
 
     # Recursively find all .mcap files
     files: list[dict[str, Any]] = []
+    total_size = 0
     try:
         for mcap_path in folder_path.rglob("*.mcap"):
             if mcap_path.is_file():
+                stat = mcap_path.stat()
+                file_size = stat.st_size
+                total_size += file_size
                 files.append(
                     {
                         "path": str(mcap_path.absolute()),
                         "filename": mcap_path.name,
-                        "size": mcap_path.stat().st_size,
+                        "size": file_size,
+                        "mtime": stat.st_mtime,
+                        "relative_path": str(mcap_path.relative_to(folder_path)),
                     }
                 )
     except PermissionError as e:
@@ -364,6 +369,7 @@ def scan_folder() -> tuple[Response, int]:
             "folder_path": str(folder_path.absolute()),
             "files": files,
             "total_count": len(files),
+            "total_size": total_size,
         }
     ), 200
 
@@ -393,6 +399,7 @@ def bulk_analyze() -> tuple[Response, int]:
     file_paths: list[str] = data["file_paths"]
     auto_upload: bool = data.get("auto_upload", False)
     pre_filter_only: bool = data.get("pre_filter_only", False)
+    skip_duplicates: bool = data.get("skip_duplicates", True)
 
     if not file_paths:
         return jsonify({"error": "No files provided"}), 400
@@ -400,8 +407,10 @@ def bulk_analyze() -> tuple[Response, int]:
     settings = get_settings()
     manager = get_upload_manager()
 
-    # Run pre-filtering
-    files_to_analyze, pre_filter_stats = manager.pre_filter_files(file_paths, settings.s3_bucket)
+    # Run pre-filtering (with S3 fallback for cache misses)
+    files_to_analyze, pre_filter_stats = manager.pre_filter_files(
+        file_paths, settings.s3_bucket, settings.aws_profile, settings.aws_region
+    )
 
     if pre_filter_only:
         return jsonify(
@@ -412,22 +421,13 @@ def bulk_analyze() -> tuple[Response, int]:
             }
         ), 200
 
+    # When force-reuploading, analyze ALL files (not just non-duplicates)
+    job_files = file_paths if not skip_duplicates else files_to_analyze
+
     # Create job with files that need analysis (no temp_dir - direct file access)
-    job = manager.create_job(files_to_analyze, auto_upload=auto_upload)
+    job = manager.create_job(job_files, auto_upload=auto_upload)
     job.pre_filter_stats = pre_filter_stats
-
-    def analysis_progress_callback(job: UploadJob, file_state: FileUploadState) -> None:
-        """Send analysis progress updates via SSE."""
-        send_sse_event(
-            job.job_id,
-            {
-                "type": "analysis_progress",
-                "job_id": job.job_id,
-                "job_status": job.status.value,
-                "file": file_state.to_dict(),
-                "analysis_complete": job.status.value in ("ready", "failed"),
-            },
-        )
+    analysis_progress_callback = _make_analysis_callback(job.job_id)
 
     def upload_progress_callback(job: UploadJob) -> None:
         """Send upload progress updates via SSE."""
@@ -455,8 +455,8 @@ def run_bulk_analysis() -> None:
                 },
             )
 
-            # Auto-upload if enabled and there are valid files
-            if final_job.auto_upload and final_job.has_valid_uploadable_files:
+            # Auto-upload if enabled and analysis succeeded
+            if final_job.auto_upload and final_job.status == UploadStatus.READY:
                 send_sse_event(
                     job.job_id,
                     {
@@ -469,9 +469,12 @@ def run_bulk_analysis() -> None:
                     settings.aws_profile,
                     settings.aws_region,
                     settings.s3_bucket,
-                    skip_duplicates=True,
+                    skip_duplicates=skip_duplicates,
                     progress_callback=upload_progress_callback,
                 )
+            elif final_job.auto_upload:
+                # All files failed analysis — send terminal status so frontend doesn't hang
+                send_sse_event(job.job_id, final_job.to_dict())
 
     thread = threading.Thread(target=run_bulk_analysis, daemon=True)
     thread.start()

From b9390036c92d41c2ae685b0e26117b7236885507 Mon Sep 17 00:00:00 2001
From: "Simms, Andrew" <Andrew.Simms@nrel.gov>
Date: Sun, 8 Feb 2026 10:28:08 -0700
Subject: [PATCH 21/44] Service: Update cache service to understand hive
 partitions

---
 app/services/cache_service.py | 57 +++++++++++++++++++++++++----------
 1 file changed, 41 insertions(+), 16 deletions(-)

diff --git a/app/services/cache_service.py b/app/services/cache_service.py
index a18add1..e925709 100644
--- a/app/services/cache_service.py
+++ b/app/services/cache_service.py
@@ -10,31 +10,16 @@
 
 
 class CacheService:
-    """Singleton cache service with thread-safe SQLite access for S3 file tracking."""
+    """Cache service with thread-safe SQLite access for S3 file tracking."""
 
     CACHE_FILE = "modaq_upload_cache.db"
     CACHE_TTL_SECONDS = 3600  # 1 hour default TTL
 
-    _instance: "CacheService | None" = None
-    _lock = threading.Lock()
-
-    def __new__(cls) -> "CacheService":
-        """Ensure singleton instance."""
-        with cls._lock:
-            if cls._instance is None:
-                cls._instance = super().__new__(cls)
-                cls._instance._initialized = False
-            return cls._instance
-
     def __init__(self) -> None:
         """Initialize the cache database."""
-        if getattr(self, "_initialized", False):
-            return
-
         self._db_path = Path(self.CACHE_FILE)
         self._local = threading.local()
         self._init_db()
-        self._initialized = True
 
     def _get_connection(self) -> sqlite3.Connection:
         """Get thread-local database connection."""
@@ -75,6 +60,10 @@ def _init_db(self) -> None:
             CREATE INDEX IF NOT EXISTS idx_bucket ON s3_files(bucket)
         """)
 
+        cursor.execute("""
+            CREATE INDEX IF NOT EXISTS idx_bucket_filename ON s3_files(bucket, filename, file_size)
+        """)
+
         # Metadata table for tracking sync status per bucket
         cursor.execute("""
             CREATE TABLE IF NOT EXISTS cache_metadata (
@@ -132,6 +121,42 @@ def check_exists_cached(
 
         return bool(row["file_exists"])
 
+    def check_exists_by_filename(
+        self,
+        bucket: str,
+        filename: str,
+        file_size: int,
+    ) -> bool | None:
+        """Check if a file exists in the cache by filename and size.
+
+        Fallback lookup when the S3 path isn't known (e.g. pre-filter can't
+        generate the same path as the actual MCAP analysis). No TTL is applied
+        because if we uploaded a file, that fact doesn't expire.
+
+        Args:
+            bucket: S3 bucket name
+            filename: Original filename
+            file_size: File size in bytes
+
+        Returns:
+            True if any cache entry for this filename+size says it exists,
+            None if no matching entry found
+        """
+        conn = self._get_connection()
+        cursor = conn.cursor()
+
+        cursor.execute(
+            """
+            SELECT 1 FROM s3_files
+            WHERE bucket = ? AND filename = ? AND file_size = ? AND file_exists = 1
+            LIMIT 1
+            """,
+            (bucket, filename, file_size),
+        )
+
+        row = cursor.fetchone()
+        return True if row else None
+
     def update_cache(
         self,
         bucket: str,

From d04392fb1f5c4f215e8e86f64a71d60767443f4b Mon Sep 17 00:00:00 2001
From: "Simms, Andrew" <Andrew.Simms@nrel.gov>
Date: Sun, 8 Feb 2026 10:29:42 -0700
Subject: [PATCH 22/44] App: Add latest routes and imports

---
 app/__init__.py | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/app/__init__.py b/app/__init__.py
index 38559d8..7c69fc9 100644
--- a/app/__init__.py
+++ b/app/__init__.py
@@ -4,7 +4,7 @@
 
 from flask import Flask
 
-from app.config import get_settings
+from app.config import get_package_version, get_settings
 
 
 def create_app() -> Flask:
@@ -26,6 +26,7 @@ def inject_display_name() -> dict[str, str]:
 
     # Register blueprints
     from app.routes.files import files_bp
+    from app.routes.logs import logs_bp
     from app.routes.main import main_bp
     from app.routes.settings import settings_bp
     from app.routes.upload import upload_bp
@@ -34,5 +35,17 @@ def inject_display_name() -> dict[str, str]:
     app.register_blueprint(upload_bp, url_prefix="/api/upload")
     app.register_blueprint(files_bp, url_prefix="/api/files")
     app.register_blueprint(settings_bp, url_prefix="/api/settings")
+    app.register_blueprint(logs_bp, url_prefix="/api/logs")
+
+    # Log application startup
+    from app.services.log_service import get_log_service
+
+    log = get_log_service()
+    log.info(
+        "app",
+        "app_started",
+        f"Application started (v{get_package_version()})",
+        {"version": get_package_version()},
+    )
 
     return app

From f95243aeaa231d63f74fd236f1c7d9411d1c5691 Mon Sep 17 00:00:00 2001
From: "Simms, Andrew" <Andrew.Simms@nrel.gov>
Date: Sun, 8 Feb 2026 10:30:22 -0700
Subject: [PATCH 23/44] JS: Refactor utils into separate files

---
 app/static/js/modules/api.js                  | 51 +++++++++++++++++++
 app/static/js/modules/debounce.js             | 16 ++++++
 app/static/js/modules/dom.js                  | 48 +++++++++++++++++
 .../js/modules/{utils.js => formatters.js}    | 32 +++++-------
 app/static/js/modules/icons.js                | 26 ++++++++++
 app/static/js/modules/notify.js               | 25 +++++++++
 app/static/js/modules/sorting-helpers.js      | 40 +++++++++++++++
 7 files changed, 219 insertions(+), 19 deletions(-)
 create mode 100644 app/static/js/modules/api.js
 create mode 100644 app/static/js/modules/debounce.js
 create mode 100644 app/static/js/modules/dom.js
 rename app/static/js/modules/{utils.js => formatters.js} (60%)
 create mode 100644 app/static/js/modules/icons.js
 create mode 100644 app/static/js/modules/notify.js
 create mode 100644 app/static/js/modules/sorting-helpers.js

diff --git a/app/static/js/modules/api.js b/app/static/js/modules/api.js
new file mode 100644
index 0000000..ca68506
--- /dev/null
+++ b/app/static/js/modules/api.js
@@ -0,0 +1,51 @@
+/**
+ * Shared fetch wrappers for JSON API calls.
+ */
+
+/**
+ * GET a JSON endpoint. Throws on non-ok responses.
+ * @param {string} url
+ * @returns {Promise<any>}
+ */
+export async function apiGet(url) {
+  const response = await fetch(url);
+  const data = await response.json();
+  if (!response.ok) throw new Error(data.error || `Request failed (${response.status})`);
+  return data;
+}
+
+/**
+ * POST to a JSON endpoint. Throws on non-ok responses.
+ * @param {string} url
+ * @param {any} [body] - If provided, sent as JSON with Content-Type header.
+ * @returns {Promise<any>}
+ */
+export async function apiPost(url, body) {
+  /** @type {RequestInit} */
+  const options = { method: 'POST' };
+  if (body !== undefined) {
+    options.headers = { 'Content-Type': 'application/json' };
+    options.body = JSON.stringify(body);
+  }
+  const response = await fetch(url, options);
+  const data = await response.json();
+  if (!response.ok) throw new Error(data.error || `Request failed (${response.status})`);
+  return data;
+}
+
+/**
+ * PUT to a JSON endpoint. Throws on non-ok responses.
+ * @param {string} url
+ * @param {any} body
+ * @returns {Promise<any>}
+ */
+export async function apiPut(url, body) {
+  const response = await fetch(url, {
+    method: 'PUT',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(body),
+  });
+  const data = await response.json();
+  if (!response.ok) throw new Error(data.error || `Request failed (${response.status})`);
+  return data;
+}
diff --git a/app/static/js/modules/debounce.js b/app/static/js/modules/debounce.js
new file mode 100644
index 0000000..d7b0b72
--- /dev/null
+++ b/app/static/js/modules/debounce.js
@@ -0,0 +1,16 @@
+/**
+ * Debounce utility.
+ */
+
+/**
+ * @param {(...args: any[]) => void} fn
+ * @param {number} delay
+ * @returns {(...args: any[]) => void}
+ */
+export function debounce(fn, delay) {
+  let timeout = 0;
+  return (/** @type {any[]} */ ...args) => {
+    clearTimeout(timeout);
+    timeout = window.setTimeout(() => fn(...args), delay);
+  };
+}
diff --git a/app/static/js/modules/dom.js b/app/static/js/modules/dom.js
new file mode 100644
index 0000000..341571b
--- /dev/null
+++ b/app/static/js/modules/dom.js
@@ -0,0 +1,48 @@
+/**
+ * DOM manipulation helpers.
+ */
+
+/**
+ * Set the text content of an element by ID.
+ * @param {string} id
+ * @param {string | number} value
+ */
+export function setText(id, value) {
+  const el = document.getElementById(id);
+  if (el) el.textContent = String(value);
+}
+
+/**
+ * Remove the `hidden` class from an element by ID.
+ * @param {string} id
+ */
+export function showEl(id) {
+  document.getElementById(id)?.classList.remove('hidden');
+}
+
+/**
+ * Add the `hidden` class to an element by ID.
+ * @param {string} id
+ */
+export function hideEl(id) {
+  document.getElementById(id)?.classList.add('hidden');
+}
+
+/**
+ * Disable a button, swap its label, run a callback, then restore.
+ * @param {HTMLButtonElement | null} btn
+ * @param {string} loadingText
+ * @param {() => Promise<void>} callback
+ */
+export async function withLoadingButton(btn, loadingText, callback) {
+  if (!btn) return;
+  const originalText = btn.textContent;
+  btn.disabled = true;
+  btn.textContent = loadingText;
+  try {
+    await callback();
+  } finally {
+    btn.disabled = false;
+    btn.textContent = originalText;
+  }
+}
diff --git a/app/static/js/modules/utils.js b/app/static/js/modules/formatters.js
similarity index 60%
rename from app/static/js/modules/utils.js
rename to app/static/js/modules/formatters.js
index b16c98e..d3ceaa8 100644
--- a/app/static/js/modules/utils.js
+++ b/app/static/js/modules/formatters.js
@@ -1,5 +1,5 @@
 /**
- * Pure utility functions for formatting and notifications.
+ * Pure formatting functions for bytes, time, and dates.
  */
 
 /**
@@ -44,23 +44,17 @@ export function formatDuration(seconds) {
 }
 
 /**
- * @param {string} message
- * @param {'info' | 'error' | 'success'} [type]
+ * Format a Unix epoch (seconds) into a locale date string.
+ * @param {number | null | undefined} epochSeconds
+ * @returns {string}
  */
-export function showNotification(message, type = 'info') {
-  const notification = document.createElement('div');
-  notification.className = `fixed top-4 right-4 px-6 py-3 rounded-md shadow-lg z-50 transition-opacity duration-300 ${
-    type === 'error'
-      ? 'bg-red-500 text-white'
-      : type === 'success'
-        ? 'bg-green-500 text-white'
-        : 'bg-nrel-blue text-white'
-  }`;
-  notification.textContent = message;
-  document.body.appendChild(notification);
-
-  setTimeout(() => {
-    notification.classList.add('opacity-0');
-    setTimeout(() => notification.remove(), 300);
-  }, 5000);
+export function formatMtime(epochSeconds) {
+  if (!epochSeconds) return '-';
+  return new Date(epochSeconds * 1000).toLocaleString('en-US', {
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+  });
 }
diff --git a/app/static/js/modules/icons.js b/app/static/js/modules/icons.js
new file mode 100644
index 0000000..d9bc569
--- /dev/null
+++ b/app/static/js/modules/icons.js
@@ -0,0 +1,26 @@
+/**
+ * Reusable SVG icon templates.
+ */
+
+const FILE_ICON_PATH =
+  'M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z';
+
+const FOLDER_ICON_PATH = 'M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z';
+
+/**
+ * File document SVG icon.
+ * @param {string} [cls] - CSS classes (default: 'h-5 w-5 text-gray-400 mr-3')
+ * @returns {string}
+ */
+export function fileIcon(cls = 'h-5 w-5 text-gray-400 mr-3') {
+  return `<svg class="${cls}" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="${FILE_ICON_PATH}" /></svg>`;
+}
+
+/**
+ * Folder SVG icon.
+ * @param {string} [cls] - CSS classes (default: 'h-5 w-5 text-nlr-yellow mr-3')
+ * @returns {string}
+ */
+export function folderIcon(cls = 'h-5 w-5 text-nlr-yellow mr-3') {
+  return `<svg class="${cls}" fill="currentColor" viewBox="0 0 20 20"><path d="${FOLDER_ICON_PATH}" /></svg>`;
+}
diff --git a/app/static/js/modules/notify.js b/app/static/js/modules/notify.js
new file mode 100644
index 0000000..e121a5b
--- /dev/null
+++ b/app/static/js/modules/notify.js
@@ -0,0 +1,25 @@
+/**
+ * Toast notification system.
+ */
+
+/**
+ * @param {string} message
+ * @param {'info' | 'error' | 'success'} [type]
+ */
+export function showNotification(message, type = 'info') {
+  const notification = document.createElement('div');
+  notification.className = `fixed top-4 right-4 px-6 py-3 rounded-md shadow-lg z-50 transition-opacity duration-300 ${
+    type === 'error'
+      ? 'bg-red-500 text-white'
+      : type === 'success'
+        ? 'bg-green-500 text-white'
+        : 'bg-nlr-blue text-white'
+  }`;
+  notification.textContent = message;
+  document.body.appendChild(notification);
+
+  setTimeout(() => {
+    notification.classList.add('opacity-0');
+    setTimeout(() => notification.remove(), 300);
+  }, 5000);
+}
diff --git a/app/static/js/modules/sorting-helpers.js b/app/static/js/modules/sorting-helpers.js
new file mode 100644
index 0000000..4ce1d70
--- /dev/null
+++ b/app/static/js/modules/sorting-helpers.js
@@ -0,0 +1,40 @@
+/**
+ * Table sorting helpers: toggle column direction and update header indicators.
+ */
+
+/**
+ * Toggle sort direction on a column config object.
+ * @param {{ column: string, ascending: boolean }} config
+ * @param {string} column
+ */
+export function toggleSort(config, column) {
+  if (config.column === column) {
+    config.ascending = !config.ascending;
+  } else {
+    config.column = column;
+    config.ascending = true;
+  }
+}
+
+/**
+ * Update sort indicator arrows in table headers.
+ * @param {string} headerSelector  - e.g. `'[data-sort]'`
+ * @param {string} indicatorSelector - e.g. `'.sort-indicator'`
+ * @param {string} dataKey - dataset key, e.g. `'sort'` or `'fileSort'`
+ * @param {string} currentColumn
+ * @param {boolean} ascending
+ */
+export function updateSortIndicators(
+  headerSelector,
+  indicatorSelector,
+  dataKey,
+  currentColumn,
+  ascending,
+) {
+  for (const th of document.querySelectorAll(headerSelector)) {
+    const indicator = th.querySelector(indicatorSelector);
+    if (!indicator) continue;
+    const col = /** @type {HTMLElement} */ (th).dataset[dataKey];
+    indicator.textContent = col === currentColumn ? (ascending ? ' \u25B2' : ' \u25BC') : '';
+  }
+}

From 4d209aec0c15cf29508ab19fb39a01f327be1b4c Mon Sep 17 00:00:00 2001
From: "Simms, Andrew" <Andrew.Simms@nrel.gov>
Date: Sun, 8 Feb 2026 10:32:26 -0700
Subject: [PATCH 24/44] JS: Add logs module

---
 app/static/js/modules/logs.js | 433 ++++++++++++++++++++++++++++++++++
 1 file changed, 433 insertions(+)
 create mode 100644 app/static/js/modules/logs.js

diff --git a/app/static/js/modules/logs.js b/app/static/js/modules/logs.js
new file mode 100644
index 0000000..3f3d1fe
--- /dev/null
+++ b/app/static/js/modules/logs.js
@@ -0,0 +1,433 @@
+/**
+ * Logs viewer page module.
+ *
+ * Loads log entries from /api/logs/entries with filtering, pagination,
+ * expandable detail rows, and S3 sync trigger.
+ */
+import { apiGet, apiPost } from './api.js';
+import { debounce } from './debounce.js';
+import { setText, withLoadingButton } from './dom.js';
+import { showNotification } from './notify.js';
+import state from './state.js';
+
+/**
+ * Format an ISO timestamp for display.
+ * @param {string} iso
+ * @returns {string}
+ */
+function formatTimestamp(iso) {
+  try {
+    const d = new Date(iso);
+    return d.toLocaleString(undefined, {
+      year: 'numeric',
+      month: '2-digit',
+      day: '2-digit',
+      hour: '2-digit',
+      minute: '2-digit',
+      second: '2-digit',
+    });
+  } catch {
+    return iso;
+  }
+}
+
+/**
+ * Return Tailwind classes for a log level badge.
+ * @param {string} level
+ * @returns {string}
+ */
+function levelBadgeClass(level) {
+  const upper = level.toUpperCase();
+  if (upper === 'ERROR') return 'bg-red-100 text-red-800';
+  if (upper === 'WARNING') return 'bg-yellow-100 text-yellow-800';
+  return 'bg-blue-100 text-blue-800';
+}
+
+/**
+ * Get the filter DOM elements (shared by clearFilters and applyFilters).
+ */
+function getFilterEls() {
+  return {
+    date: /** @type {HTMLInputElement | null} */ (document.getElementById('filter-date')),
+    level: /** @type {HTMLSelectElement | null} */ (document.getElementById('filter-level')),
+    category: /** @type {HTMLSelectElement | null} */ (document.getElementById('filter-category')),
+    search: /** @type {HTMLInputElement | null} */ (document.getElementById('filter-search')),
+  };
+}
+
+/**
+ * Render the log table body from an array of entries.
+ * @param {Array<Record<string, unknown>>} entries
+ */
+function renderLogTable(entries) {
+  const tbody = document.getElementById('log-table-body');
+  if (!tbody) return;
+
+  if (entries.length === 0) {
+    tbody.innerHTML =
+      '<tr><td colspan="5" class="px-4 py-8 text-center text-gray-500">No log entries found</td></tr>';
+    return;
+  }
+
+  let html = '';
+  for (const entry of entries) {
+    const ts = formatTimestamp(/** @type {string} */ (entry.timestamp) || '');
+    const level = /** @type {string} */ (entry.level) || 'INFO';
+    const category = /** @type {string} */ (entry.category) || '';
+    const event = /** @type {string} */ (entry.event) || '';
+    const message = /** @type {string} */ (entry.message) || '';
+    const metadata = /** @type {Record<string, unknown> | undefined} */ (entry.metadata);
+    const hasMetadata = metadata && Object.keys(metadata).length > 0;
+
+    const rowClass = hasMetadata ? 'cursor-pointer hover:bg-gray-50' : '';
+    const toggleAttr = hasMetadata ? 'data-log-toggle' : '';
+
+    html += `<tr class="${rowClass}" ${toggleAttr}>
+      <td class="px-4 py-2 text-xs text-gray-600 font-mono whitespace-nowrap">${ts}</td>
+      <td class="px-4 py-2"><span class="px-2 py-0.5 text-xs font-semibold rounded ${levelBadgeClass(level)}">${level}</span></td>
+      <td class="px-4 py-2"><span class="px-2 py-0.5 text-xs rounded bg-gray-100 text-gray-700">${category}</span></td>
+      <td class="px-4 py-2 text-xs text-gray-700 font-mono">${event}</td>
+      <td class="px-4 py-2 text-sm text-gray-800 truncate max-w-xs" title="${message.replace(/"/g, '&quot;')}">${message}</td>
+    </tr>`;
+
+    if (hasMetadata) {
+      const metaRows = Object.entries(metadata)
+        .map(
+          ([k, v]) =>
+            `<tr><td class="pr-4 text-gray-500 font-mono text-right align-top">${k}</td><td class="text-gray-800 break-all">${typeof v === 'object' ? JSON.stringify(v) : String(v)}</td></tr>`,
+        )
+        .join('');
+
+      html += `<tr class="hidden log-detail-row">
+        <td colspan="5" class="px-4 py-3 bg-gray-50">
+          <table class="text-xs"><tbody>${metaRows}</tbody></table>
+        </td>
+      </tr>`;
+    }
+  }
+
+  tbody.innerHTML = html;
+
+  // Wire toggle for expandable rows
+  for (const row of tbody.querySelectorAll('[data-log-toggle]')) {
+    row.addEventListener('click', () => {
+      const detail = row.nextElementSibling;
+      if (detail?.classList.contains('log-detail-row')) {
+        detail.classList.toggle('hidden');
+      }
+    });
+  }
+}
+
+/** Fetch and render log entries using current filters + pagination. */
+export async function loadLogEntries() {
+  const params = new URLSearchParams();
+  const { logFilters, logPagination } = state;
+
+  if (logFilters.date) params.set('date', logFilters.date);
+  if (logFilters.level) params.set('level', logFilters.level);
+  if (logFilters.category) params.set('category', logFilters.category);
+  if (logFilters.search) params.set('search', logFilters.search);
+  params.set('offset', String(logPagination.offset));
+  params.set('limit', String(logPagination.limit));
+
+  try {
+    const data = await apiGet(`/api/logs/entries?${params}`);
+
+    renderLogTable(data.entries || []);
+
+    // Update count label
+    const total = data.total || 0;
+    const from = total > 0 ? data.offset + 1 : 0;
+    const to = Math.min(data.offset + data.limit, total);
+    setText('log-count-label', `Showing ${from}-${to} of ${total}`);
+
+    // Pagination buttons
+    const prevBtn = /** @type {HTMLButtonElement | null} */ (
+      document.getElementById('prev-page-btn')
+    );
+    const nextBtn = /** @type {HTMLButtonElement | null} */ (
+      document.getElementById('next-page-btn')
+    );
+    if (prevBtn) prevBtn.disabled = data.offset <= 0;
+    if (nextBtn) nextBtn.disabled = data.offset + data.limit >= total;
+  } catch {
+    setText('log-count-label', 'Failed to load log entries');
+  }
+}
+
+/** Fetch and render log stats into the stat cards. */
+export async function loadLogStats() {
+  try {
+    const data = await apiGet('/api/logs/stats');
+
+    setText('stat-total', data.total_entries ?? 0);
+    setText('stat-today', data.today_entries ?? 0);
+    setText('stat-errors', data.level_counts?.ERROR ?? 0);
+    setText('stat-files', data.file_count ?? 0);
+  } catch {
+    // Silently fail — stats are non-critical
+  }
+}
+
+/** POST /api/logs/sync and show notification. */
+export async function syncLogs() {
+  const btn = /** @type {HTMLButtonElement | null} */ (document.getElementById('sync-logs-btn'));
+
+  await withLoadingButton(btn, 'Syncing...', async () => {
+    try {
+      const data = await apiPost('/api/logs/sync');
+
+      if (data.success) {
+        showNotification(`Synced ${data.synced} log files to S3`, 'success');
+      } else {
+        showNotification(`Sync failed: ${data.error || 'Unknown error'}`, 'error');
+      }
+    } catch (err) {
+      showNotification(`Sync error: ${err}`, 'error');
+    }
+  });
+}
+
+/** Track which CSV is currently previewed (to toggle on re-click). */
+let currentPreviewPath = '';
+
+/**
+ * Extract time (HH:MM:SS) from a CSV filename like upload-summary-143022-abcd1234.csv.
+ * @param {string} filename
+ * @returns {string}
+ */
+function extractTimeFromFilename(filename) {
+  const match = filename.match(/upload-summary-(\d{2})(\d{2})(\d{2})/);
+  if (match) return `${match[1]}:${match[2]}:${match[3]}`;
+  return '-';
+}
+
+/** Fetch CSV file list and render the Upload Summaries table. */
+export async function loadCsvFiles() {
+  try {
+    const data = await apiGet('/api/logs/files');
+    /** @type {Array<{date: string|null, filename: string, relative_path: string, size_bytes: number, type: string}>} */
+    const csvFiles = (data.files || []).filter(
+      (/** @type {{type: string}} */ f) => f.type === 'csv',
+    );
+
+    // Update badge
+    const badge = document.getElementById('csv-count-badge');
+    if (badge) {
+      badge.textContent = String(csvFiles.length);
+      badge.classList.toggle('hidden', csvFiles.length === 0);
+    }
+
+    const tbody = document.getElementById('csv-table-body');
+    if (!tbody) return;
+
+    if (csvFiles.length === 0) {
+      tbody.innerHTML =
+        '<tr><td colspan="4" class="px-4 py-6 text-center text-gray-500 text-sm">No upload summaries found</td></tr>';
+      return;
+    }
+
+    let html = '';
+    for (const file of csvFiles) {
+      const date = file.date || '-';
+      const time = extractTimeFromFilename(file.filename);
+      const escapedPath = file.relative_path.replace(/"/g, '&quot;');
+
+      html += `<tr>
+        <td class="px-4 py-3 text-sm text-gray-700">${date}</td>
+        <td class="px-4 py-3 text-sm text-gray-700 font-mono">${time}</td>
+        <td class="px-4 py-3 text-sm text-gray-900 truncate" title="${file.filename}">${file.filename}</td>
+        <td class="px-4 py-3 text-right whitespace-nowrap">
+          <button class="csv-download-btn text-sm text-nlr-blue hover:underline mr-3" data-path="${escapedPath}">Download</button>
+          <button class="csv-view-btn text-sm text-nlr-blue hover:underline" data-path="${escapedPath}">View</button>
+        </td>
+      </tr>`;
+    }
+    tbody.innerHTML = html;
+
+    // Wire download buttons
+    for (const btn of tbody.querySelectorAll('.csv-download-btn')) {
+      btn.addEventListener('click', () => {
+        const path = /** @type {HTMLElement} */ (btn).dataset.path || '';
+        downloadCsv(path);
+      });
+    }
+
+    // Wire view buttons
+    for (const btn of tbody.querySelectorAll('.csv-view-btn')) {
+      btn.addEventListener('click', () => {
+        const path = /** @type {HTMLElement} */ (btn).dataset.path || '';
+        previewCsv(path);
+      });
+    }
+  } catch {
+    // Non-critical — silently fail
+  }
+}
+
+/**
+ * Trigger a browser download for a CSV file.
+ * @param {string} path - Relative path within the log directory
+ */
+function downloadCsv(path) {
+  window.location.href = `/api/logs/csv-download?path=${encodeURIComponent(path)}`;
+}
+
+/**
+ * Fetch and render a CSV preview inline. Toggle on re-click.
+ * @param {string} path - Relative path within the log directory
+ */
+async function previewCsv(path) {
+  const panel = document.getElementById('csv-preview-panel');
+  const content = document.getElementById('csv-preview-content');
+  const title = document.getElementById('csv-preview-title');
+  if (!panel || !content) return;
+
+  // Toggle off if clicking the same file
+  if (currentPreviewPath === path && !panel.classList.contains('hidden')) {
+    panel.classList.add('hidden');
+    currentPreviewPath = '';
+    return;
+  }
+
+  currentPreviewPath = path;
+  content.innerHTML = '<p class="text-sm text-gray-500">Loading...</p>';
+  panel.classList.remove('hidden');
+
+  const filename = path.split('/').pop() || path;
+  if (title) title.textContent = `Preview: ${filename}`;
+
+  try {
+    const data = await apiGet(`/api/logs/csv-preview?path=${encodeURIComponent(path)}`);
+
+    if (data.error) {
+      content.innerHTML = `<p class="text-sm text-red-600">${data.error}</p>`;
+      return;
+    }
+
+    const columns = /** @type {string[]} */ (data.columns || []);
+    const rows = /** @type {Array<Record<string, string>>} */ (data.rows || []);
+
+    if (columns.length === 0) {
+      content.innerHTML = '<p class="text-sm text-gray-500">Empty CSV</p>';
+      return;
+    }
+
+    let tableHtml = '<table class="w-full text-xs divide-y divide-gray-200">';
+    tableHtml += '<thead class="bg-gray-50"><tr>';
+    for (const col of columns) {
+      tableHtml += `<th class="px-3 py-2 text-left font-medium text-gray-500 uppercase">${col}</th>`;
+    }
+    tableHtml += '</tr></thead><tbody class="divide-y divide-gray-200">';
+    for (const row of rows) {
+      tableHtml += '<tr>';
+      for (const col of columns) {
+        const val = row[col] ?? '';
+        tableHtml += `<td class="px-3 py-2 text-gray-700 whitespace-nowrap">${val}</td>`;
+      }
+      tableHtml += '</tr>';
+    }
+    tableHtml += '</tbody></table>';
+    content.innerHTML = tableHtml;
+  } catch {
+    content.innerHTML = '<p class="text-sm text-red-600">Failed to load CSV preview</p>';
+  }
+}
+
+/** Reset all filters and reload. */
+export function clearFilters() {
+  state.logFilters = { date: null, level: null, category: null, search: '' };
+  state.logPagination = { offset: 0, limit: 100 };
+
+  const { date, level, category, search } = getFilterEls();
+  if (date) date.value = '';
+  if (level) level.value = '';
+  if (category) category.value = '';
+  if (search) search.value = '';
+
+  loadLogEntries();
+  loadLogStats();
+}
+
+/** Read current filter values from the DOM into state and reload. */
+function applyFilters() {
+  const { date, level, category, search } = getFilterEls();
+
+  state.logFilters.date = date?.value || null;
+  state.logFilters.level = level?.value || null;
+  state.logFilters.category = category?.value || null;
+  state.logFilters.search = search?.value || '';
+  state.logPagination.offset = 0;
+
+  loadLogEntries();
+}
+
+/** Initialize the logs page: load data and wire event handlers. */
+export function initLogs() {
+  // Reset state
+  state.logFilters = { date: null, level: null, category: null, search: '' };
+  state.logPagination = { offset: 0, limit: 100 };
+
+  // Initial load
+  loadLogEntries();
+  loadLogStats();
+  loadCsvFiles();
+
+  // CSV section toggle
+  const csvToggle = document.getElementById('csv-section-toggle');
+  const csvBody = document.getElementById('csv-section-body');
+  const csvIcon = document.getElementById('csv-toggle-icon');
+  if (csvToggle && csvBody) {
+    csvToggle.addEventListener('click', () => {
+      csvBody.classList.toggle('hidden');
+      csvIcon?.classList.toggle('rotate-90');
+    });
+  }
+
+  // CSV preview close button
+  const csvPreviewClose = document.getElementById('csv-preview-close');
+  const csvPreviewPanel = document.getElementById('csv-preview-panel');
+  if (csvPreviewClose && csvPreviewPanel) {
+    csvPreviewClose.addEventListener('click', () => {
+      csvPreviewPanel.classList.add('hidden');
+      currentPreviewPath = '';
+    });
+  }
+
+  // Filter controls
+  const { date: dateEl, level: levelEl, category: catEl, search: searchEl } = getFilterEls();
+  const clearBtn = document.getElementById('clear-filters-btn');
+  const syncBtn = document.getElementById('sync-logs-btn');
+  const prevBtn = document.getElementById('prev-page-btn');
+  const nextBtn = document.getElementById('next-page-btn');
+
+  if (dateEl) dateEl.addEventListener('change', applyFilters);
+  if (levelEl) levelEl.addEventListener('change', applyFilters);
+  if (catEl) catEl.addEventListener('change', applyFilters);
+
+  // Debounced search
+  if (searchEl) {
+    searchEl.addEventListener('input', debounce(applyFilters, 300));
+  }
+
+  if (clearBtn) clearBtn.addEventListener('click', clearFilters);
+  if (syncBtn) syncBtn.addEventListener('click', syncLogs);
+
+  if (prevBtn) {
+    prevBtn.addEventListener('click', () => {
+      state.logPagination.offset = Math.max(
+        0,
+        state.logPagination.offset - state.logPagination.limit,
+      );
+      loadLogEntries();
+    });
+  }
+
+  if (nextBtn) {
+    nextBtn.addEventListener('click', () => {
+      state.logPagination.offset += state.logPagination.limit;
+      loadLogEntries();
+    });
+  }
+}

From f89206b0df1f378c2a9ea9d3ce9a18b4c234eda2 Mon Sep 17 00:00:00 2001
From: "Simms, Andrew" <Andrew.Simms@nrel.gov>
Date: Sun, 8 Feb 2026 10:47:22 -0700
Subject: [PATCH 25/44] JS: Add more dom helpers

---
 app/static/js/modules/dom.js | 25 +++++++++++++++++++++++++
 1 file changed, 25 insertions(+)

diff --git a/app/static/js/modules/dom.js b/app/static/js/modules/dom.js
index 341571b..0af1309 100644
--- a/app/static/js/modules/dom.js
+++ b/app/static/js/modules/dom.js
@@ -28,6 +28,31 @@ export function hideEl(id) {
   document.getElementById(id)?.classList.add('hidden');
 }
 
+/**
+ * Disable a button, swap its label, run a callback, then restore.
+ * @param {HTMLButtonElement | null} btn
+ * @param {string} loadingText
+ * @param {() => Promise<void>} callback
+ */
+/**
+ * Toggle the `hidden` class on an element by ID.
+ * @param {string} id
+ * @param {boolean} show - When true, remove `hidden`; when false, add it.
+ */
+export function toggleEl(id, show) {
+  document.getElementById(id)?.classList.toggle('hidden', !show);
+}
+
+/**
+ * Append text to an element's textContent by ID.
+ * @param {string} id
+ * @param {string} value
+ */
+export function appendText(id, value) {
+  const el = document.getElementById(id);
+  if (el) el.textContent += String(value);
+}
+
 /**
  * Disable a button, swap its label, run a callback, then restore.
  * @param {HTMLButtonElement | null} btn

From 41e6e4bc36bbb0305613d27921fc81aaf9b5079c Mon Sep 17 00:00:00 2001
From: "Simms, Andrew" <Andrew.Simms@nrel.gov>
Date: Sun, 8 Feb 2026 10:47:58 -0700
Subject: [PATCH 26/44] JS: Simplify about modal js

---
 app/static/js/modules/about.js | 67 ++++++++++++----------------------
 1 file changed, 23 insertions(+), 44 deletions(-)

diff --git a/app/static/js/modules/about.js b/app/static/js/modules/about.js
index 183fc79..a206e82 100644
--- a/app/static/js/modules/about.js
+++ b/app/static/js/modules/about.js
@@ -1,73 +1,52 @@
 /**
  * About modal functionality.
  */
-import state from "./state.js";
+import { apiGet } from './api.js';
+import { hideEl, setText, showEl } from './dom.js';
+import state from './state.js';
 
 /**
  * Load version info from the API and populate header badge.
  */
-export function loadHeaderVersion() {
-  fetch("/api/settings/version")
-    .then((r) => r.json())
-    .then((data) => {
-      state.appVersionData = data;
-      const version = data.version || "0.0.0";
-
-      const headerVersion = document.getElementById("header-version");
-      if (headerVersion) {
-        headerVersion.textContent = version;
-      }
-    })
-    .catch(() => {
-      const headerVersion = document.getElementById("header-version");
-      if (headerVersion) {
-        headerVersion.textContent = "?";
-      }
-    });
+export async function loadHeaderVersion() {
+  try {
+    const data = await apiGet('/api/settings/version');
+    state.appVersionData = data;
+    setText('header-version', data.version || '0.0.0');
+  } catch {
+    setText('header-version', '?');
+  }
 }
 
 export function openAboutModal() {
-  const modal = document.getElementById("about-modal");
-  if (modal) {
-    modal.classList.remove("hidden");
-    document.body.style.overflow = "hidden";
-
-    if (state.appVersionData) {
-      const aboutVersion = document.getElementById("about-version");
-      const aboutCommit = document.getElementById("about-commit");
-      const aboutBranch = document.getElementById("about-branch");
+  showEl('about-modal');
+  document.body.style.overflow = 'hidden';
 
-      if (aboutVersion)
-        aboutVersion.textContent = state.appVersionData.version || "0.0.0";
-      if (aboutCommit)
-        aboutCommit.textContent = state.appVersionData.commit || "-";
-      if (aboutBranch)
-        aboutBranch.textContent = state.appVersionData.branch || "-";
-    }
+  if (state.appVersionData) {
+    setText('about-version', state.appVersionData.version || '0.0.0');
+    setText('about-commit', state.appVersionData.commit || '-');
+    setText('about-branch', state.appVersionData.branch || '-');
   }
 }
 
 export function closeAboutModal() {
-  const modal = document.getElementById("about-modal");
-  if (modal) {
-    modal.classList.add("hidden");
-    document.body.style.overflow = "";
-  }
+  hideEl('about-modal');
+  document.body.style.overflow = '';
 }
 
 /**
  * Initialize about modal event listeners.
  */
 export function initAboutModal() {
-  document.addEventListener("keydown", (e) => {
-    if (e.key === "Escape") {
+  document.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape') {
       closeAboutModal();
     }
   });
 
-  const modal = document.getElementById("about-modal");
+  const modal = document.getElementById('about-modal');
   if (modal) {
-    modal.addEventListener("click", (e) => {
+    modal.addEventListener('click', (e) => {
       if (e.target === modal) {
         closeAboutModal();
       }

From c0001b364ffd78204a13e107e1126b4f3af88a57 Mon Sep 17 00:00:00 2001
From: "Simms, Andrew" <Andrew.Simms@nrel.gov>
Date: Sun, 8 Feb 2026 10:48:50 -0700
Subject: [PATCH 27/44] JS: Completely refactor analysis to make more sense to
 end user

---
 app/static/js/modules/analysis.js | 645 +++++++++++++-----------------
 1 file changed, 282 insertions(+), 363 deletions(-)

diff --git a/app/static/js/modules/analysis.js b/app/static/js/modules/analysis.js
index ff744a8..acc4e18 100644
--- a/app/static/js/modules/analysis.js
+++ b/app/static/js/modules/analysis.js
@@ -1,49 +1,81 @@
 /**
- * File analysis/validation (Step 3).
+ * File analysis/validation and combined upload progress (Step 3).
  */
+import { apiGet } from './api.js';
+import { hideEl, setText, showEl } from './dom.js';
+import { formatBytes } from './formatters.js';
+import { showNotification } from './notify.js';
 import state from './state.js';
-import { STEP_3_VALIDATED, setUploadStep } from './stepper.js';
-import { connectProgressStream, showCompletionSummary, updateProgressUI } from './upload-exec.js';
-import { formatBytes, showNotification } from './utils.js';
+import { setUploadStep } from './stepper.js';
+import { showCompletionSummary, updateProgressUI } from './upload-exec.js';
+
+// Progress weighting: analysis is typically slower than upload
+const ANALYSIS_WEIGHT = 70;
+const UPLOAD_WEIGHT = 30;
+
+/**
+ * Cache of last-known status per filename to avoid redundant DOM rebuilds.
+ * @type {Map<string, string>}
+ */
+const fileRowStatusCache = new Map();
+
+/** Pending file updates to flush in the next animation frame. @type {Map<string, any>} */
+const pendingFileUpdates = new Map();
+
+/** Whether a requestAnimationFrame is already scheduled. */
+let rafScheduled = false;
+
+/** Pending overall progress data to flush. @type {any} */
+let pendingProgressData = null;
+
+/** Current phase of the upload flow: 'analysis' or 'upload'. */
+let currentPhase = 'analysis';
+
+/**
+ * Reset internal state (call when starting a new job or resetting).
+ */
+export function resetAnalysisState() {
+  fileRowStatusCache.clear();
+  pendingFileUpdates.clear();
+  pendingProgressData = null;
+  rafScheduled = false;
+  currentPhase = 'analysis';
+}
 
 /**
  * Check for an active upload job and restore UI state.
  */
 export async function checkForActiveJob() {
   try {
-    const response = await fetch('/api/upload/active');
-    if (!response.ok) return;
-
-    const data = await response.json();
+    const data = await apiGet('/api/upload/active');
     if (!data.job_id) return;
 
     state.currentJobId = data.job_id;
     const job = data.job;
 
-    if (job.status === 'analyzing') {
+    if (job.status === 'analyzing' || job.status === 'uploading') {
       setUploadStep(3);
-      document.getElementById('folder-browser-panel')?.classList.add('hidden');
-      document.getElementById('analysis-section')?.classList.remove('hidden');
-      initializeAnalysisTableFromJob(job);
-      connectAnalysisProgressStream(state.currentJobId);
+      hideEl('folder-browser-panel');
+      showEl('upload-section');
+
+      if (job.status === 'uploading') {
+        setText('upload-phase-label', 'Uploading files...');
+      }
+
+      connectCombinedProgressStream(state.currentJobId);
     } else if (job.status === 'ready') {
       setUploadStep(3);
-      document.getElementById('folder-browser-panel')?.classList.add('hidden');
-      document.getElementById('analysis-section')?.classList.remove('hidden');
-      displayAnalysisResults(job);
-    } else if (job.status === 'uploading') {
-      setUploadStep(4);
-      document.getElementById('folder-browser-panel')?.classList.add('hidden');
-      document.getElementById('progress-section')?.classList.remove('hidden');
-      connectProgressStream();
+      hideEl('folder-browser-panel');
+      showEl('upload-section');
+      connectCombinedProgressStream(state.currentJobId);
     } else if (
       job.status === 'completed' ||
       job.status === 'failed' ||
       job.status === 'cancelled'
     ) {
-      setUploadStep(5);
-      document.getElementById('folder-browser-panel')?.classList.add('hidden');
-      document.getElementById('completion-section')?.classList.remove('hidden');
+      setUploadStep(4);
+      hideEl('folder-browser-panel');
+      showEl('completion-section');
       showCompletionSummary(job);
     }
   } catch (error) {
@@ -52,150 +84,21 @@ export async function checkForActiveJob() {
 }
 
 /**
- * Initialize analysis table from an existing job (for state restoration).
- * @param {any} job
- */
-function initializeAnalysisTableFromJob(job) {
-  const tbody = document.getElementById('file-table-body');
-  if (!tbody) return;
-
-  tbody.innerHTML = job.files
-    .map((/** @type {any} */ file) => {
-      let statusBadge;
-      if (file.status === 'analyzing') {
-        statusBadge = `<span class="px-2 py-1 text-xs rounded-full bg-blue-100 text-blue-800 inline-flex items-center">
-                <svg class="spinner h-3 w-3 mr-1" fill="none" viewBox="0 0 24 24">
-                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-                </svg>
-                Analyzing
-            </span>`;
-      } else if (file.status === 'failed') {
-        statusBadge =
-          '<span class="px-2 py-1 text-xs rounded-full bg-red-100 text-red-800">Failed</span>';
-      } else if (file.is_duplicate) {
-        statusBadge =
-          '<span class="px-2 py-1 text-xs rounded-full bg-yellow-100 text-yellow-800">Duplicate</span>';
-      } else {
-        statusBadge =
-          '<span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">Ready</span>';
-      }
-
-      const startTimeDisplay = file.start_time
-        ? new Date(file.start_time).toLocaleString('en-US', {
-            month: 'short',
-            day: 'numeric',
-            hour: '2-digit',
-            minute: '2-digit',
-          })
-        : '-';
-
-      return `
-            <tr class="file-item" data-filename="${file.filename}" data-is-analyzed="${file.status !== 'analyzing'}" data-is-duplicate="${file.is_duplicate || false}">
-                <td class="px-4 py-3">
-                    <div class="flex items-center min-w-0">
-                        <svg class="h-5 w-5 text-gray-400 mr-2 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                  d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
-                        </svg>
-                        <span class="text-sm font-medium text-gray-900 truncate" title="${file.filename}">${file.filename}</span>
-                    </div>
-                </td>
-                <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">${file.file_size_formatted || '-'}</td>
-                <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">${startTimeDisplay}</td>
-                <td class="px-4 py-3 text-sm text-gray-500 truncate">${file.s3_path || '-'}</td>
-                <td class="px-4 py-3 whitespace-nowrap">${statusBadge}</td>
-            </tr>
-        `;
-    })
-    .join('');
-
-  const totalFiles = document.getElementById('total-files');
-  if (totalFiles) totalFiles.textContent = String(job.files.length);
-
-  const uploadBtn = /** @type {HTMLButtonElement | null} */ (document.getElementById('upload-btn'));
-  if (uploadBtn) uploadBtn.disabled = true;
-}
-
-/**
- * Initialize analysis table from file paths (folder upload).
- * @param {string[]} filePaths
- */
-export function initializeAnalysisTableFromPaths(filePaths) {
-  const tbody = document.getElementById('file-table-body');
-  if (!tbody) return;
-
-  tbody.innerHTML = filePaths
-    .map((path) => {
-      const filename = path.split('/').pop();
-      return `
-            <tr class="file-item" data-filename="${filename}" data-is-analyzed="false" data-is-duplicate="false">
-                <td class="px-4 py-3">
-                    <div class="flex items-center min-w-0">
-                        <svg class="h-5 w-5 text-gray-400 mr-2 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                  d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
-                        </svg>
-                        <span class="text-sm font-medium text-gray-900 truncate" title="${filename}">${filename}</span>
-                    </div>
-                </td>
-                <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">-</td>
-                <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">-</td>
-                <td class="px-4 py-3 text-sm text-gray-500 truncate">-</td>
-                <td class="px-4 py-3 whitespace-nowrap">
-                    <span class="px-2 py-1 text-xs rounded-full bg-blue-100 text-blue-800 inline-flex items-center">
-                        <svg class="spinner h-3 w-3 mr-1" fill="none" viewBox="0 0 24 24">
-                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-                            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-                        </svg>
-                        Analyzing
-                    </span>
-                </td>
-            </tr>
-        `;
-    })
-    .join('');
-
-  const totalFiles = document.getElementById('total-files');
-  if (totalFiles) totalFiles.textContent = String(filePaths.length);
-
-  const totalSize = document.getElementById('total-size');
-  if (totalSize) totalSize.textContent = '-';
-
-  const duplicateCount = document.getElementById('duplicate-count');
-  if (duplicateCount) duplicateCount.textContent = '0';
-
-  const uploadBtn = /** @type {HTMLButtonElement | null} */ (document.getElementById('upload-btn'));
-  if (uploadBtn) uploadBtn.disabled = true;
-
-  const analysisCompleted = document.getElementById('analysis-completed');
-  if (analysisCompleted) analysisCompleted.textContent = '0';
-
-  const analysisTotal = document.getElementById('analysis-total');
-  if (analysisTotal) analysisTotal.textContent = String(filePaths.length);
-
-  const analysisPercent = document.getElementById('analysis-percent');
-  if (analysisPercent) analysisPercent.textContent = '0%';
-
-  const analysisProgressBar = /** @type {HTMLElement | null} */ (
-    document.getElementById('analysis-progress-bar')
-  );
-  if (analysisProgressBar) analysisProgressBar.style.width = '0%';
-
-  document.getElementById('analysis-progress')?.classList.remove('hidden');
-}
-
-/**
- * Connect to SSE stream for analysis progress updates.
+ * Connect to SSE stream for combined validation + upload progress.
  * @param {string | null} jobId
  */
-export function connectAnalysisProgressStream(jobId) {
+export function connectCombinedProgressStream(jobId) {
   if (state.eventSource) {
     state.eventSource.close();
   }
 
+  resetAnalysisState();
+
   state.eventSource = new EventSource(`/api/upload/progress/${jobId}`);
 
+  let analysisTotal = 0;
+  let analysisCompleted = 0;
+
   state.eventSource.onmessage = (event) => {
     const data = JSON.parse(event.data);
 
@@ -205,12 +108,32 @@ export function connectAnalysisProgressStream(jobId) {
       return;
     }
 
+    // Analysis progress: queue per-file update for next frame
     if (data.type === 'analysis_progress') {
-      updateAnalysisRow(data.file);
+      queueFileUpdate(data.file);
+
+      // Set total from the first event that carries it
+      if (data.total_files && analysisTotal === 0) {
+        analysisTotal = data.total_files;
+        setText('files-total', data.total_files);
+      }
+
+      // Only count terminal statuses for progress bar (not pending/analyzing)
+      if (data.file.status !== 'pending' && data.file.status !== 'analyzing') {
+        analysisCompleted++;
+      }
+
+      // Update progress bar for analysis phase (use float, let CSS transition smooth it)
+      if (analysisTotal > 0) {
+        const percent = (analysisCompleted / analysisTotal) * ANALYSIS_WEIGHT;
+        setProgressBar(percent);
+      }
     }
 
+    // Analysis complete: transition to upload phase
     if (data.type === 'analysis_complete') {
-      displayAnalysisResults(data.job);
+      setProgressBar(ANALYSIS_WEIGHT);
+      setPhaseLabel('Preparing upload...');
 
       if (!data.auto_upload) {
         state.eventSource?.close();
@@ -218,22 +141,33 @@ export function connectAnalysisProgressStream(jobId) {
       }
     }
 
+    // Auto-upload starting
     if (data.type === 'auto_upload_starting') {
-      showNotification('Auto-upload starting...', 'info');
-      setUploadStep(4);
-      document.getElementById('analysis-section')?.classList.add('hidden');
-      document.getElementById('progress-section')?.classList.remove('hidden');
+      currentPhase = 'upload';
+      setPhaseLabel('Uploading files...');
     }
 
+    // Upload progress updates (job-level data without a type field)
     if (!data.type && data.job_id && data.status) {
       if (data.status === 'uploading') {
-        updateProgressUI(data);
+        // Remap upload progress into the UPLOAD_WEIGHT portion of the bar
+        const adjusted = {
+          ...data,
+          progress_percent: ANALYSIS_WEIGHT + (data.progress_percent / 100) * UPLOAD_WEIGHT,
+        };
+        pendingProgressData = adjusted;
+
+        // Queue per-file row updates
+        if (data.files) {
+          for (const file of data.files) {
+            queueFileUpdate(file);
+          }
+        }
+        scheduleRaf();
       } else if (['completed', 'failed', 'cancelled'].includes(data.status)) {
         state.eventSource?.close();
         state.eventSource = null;
         showCompletionSummary(data);
-      } else if (data.status === 'ready') {
-        displayAnalysisResults(data);
       }
     }
   };
@@ -248,226 +182,211 @@ export function connectAnalysisProgressStream(jobId) {
 }
 
 /**
- * Update a single row in the analysis table.
- * @param {any} fileData
+ * Set the overall progress bar value (CSS transition handles smoothing).
+ * @param {number} percent
  */
-function updateAnalysisRow(fileData) {
-  const row = /** @type {HTMLTableRowElement | null} */ (
-    document.querySelector(`tr[data-filename="${fileData.filename}"]`)
-  );
-  if (!row) return;
-
-  let statusBadge;
-  if (fileData.status === 'failed') {
-    statusBadge = `<span class="px-2 py-1 text-xs rounded-full bg-red-100 text-red-800" title="${fileData.error_message || ''}">Failed</span>`;
-  } else if (fileData.is_duplicate) {
-    statusBadge =
-      '<span class="px-2 py-1 text-xs rounded-full bg-yellow-100 text-yellow-800">Duplicate</span>';
-  } else if (fileData.is_valid === false) {
-    statusBadge =
-      '<span class="px-2 py-1 text-xs rounded-full bg-orange-100 text-orange-800" title="Invalid timestamp (pre-1980)">Invalid</span>';
-  } else if (fileData.status === 'ready') {
-    statusBadge =
-      '<span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">Ready</span>';
-  } else {
-    statusBadge = `<span class="px-2 py-1 text-xs rounded-full bg-blue-100 text-blue-800 inline-flex items-center">
-            <svg class="spinner h-3 w-3 mr-1" fill="none" viewBox="0 0 24 24">
-                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-            </svg>
-            Analyzing
-        </span>`;
-  }
+function setProgressBar(percent) {
+  const progressBar = /** @type {HTMLElement | null} */ (document.getElementById('progress-bar'));
+  if (progressBar) progressBar.style.width = `${percent}%`;
+  setText('progress-percent', percent.toFixed(1));
+}
 
-  row.dataset.status = fileData.status;
-  row.dataset.isDuplicate = fileData.is_duplicate ? 'true' : 'false';
-  row.dataset.isAnalyzed =
-    fileData.status === 'ready' || fileData.status === 'failed' ? 'true' : 'false';
-
-  const startTimeDisplay = fileData.start_time
-    ? new Date(fileData.start_time).toLocaleString('en-US', {
-        month: 'short',
-        day: 'numeric',
-        hour: '2-digit',
-        minute: '2-digit',
-      })
-    : '-';
-
-  row.innerHTML = `
-        <td class="px-4 py-3">
-            <div class="flex items-center min-w-0">
-                <svg class="h-5 w-5 text-gray-400 mr-2 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                          d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
-                </svg>
-                <span class="text-sm font-medium text-gray-900 truncate" title="${fileData.filename}">${fileData.filename}</span>
-            </div>
-        </td>
-        <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">${fileData.file_size_formatted}</td>
-        <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500" title="${fileData.start_time || ''}">${startTimeDisplay}</td>
-        <td class="px-4 py-3 text-sm text-gray-500 truncate" title="${fileData.s3_path || ''}">${fileData.s3_path || '-'}</td>
-        <td class="px-4 py-3 whitespace-nowrap">${statusBadge}</td>
-    `;
-
-  updateAnalysisProgress();
-  updateAnalysisSummary();
-  applyUploadedFilter();
+/**
+ * Update the phase label with an opacity fade transition.
+ * @param {string} text
+ */
+function setPhaseLabel(text) {
+  const phaseLabel = document.getElementById('upload-phase-label');
+  if (!phaseLabel || phaseLabel.textContent === text) return;
+  phaseLabel.style.opacity = '0';
+  setTimeout(() => {
+    phaseLabel.textContent = text;
+    phaseLabel.style.opacity = '1';
+  }, 150);
 }
 
-function updateAnalysisSummary() {
-  const rows = document.querySelectorAll('#file-table-body tr[data-filename]');
-  let duplicateCount = 0;
+/**
+ * Queue a file update for the next animation frame.
+ * @param {any} fileData
+ */
+function queueFileUpdate(fileData) {
+  pendingFileUpdates.set(fileData.filename, fileData);
+  scheduleRaf();
+}
 
-  for (const row of rows) {
-    const badge = row.querySelector('td:last-child span');
-    if (badge?.textContent?.includes('Duplicate')) {
-      duplicateCount++;
-    }
+/** Schedule a requestAnimationFrame if not already pending. */
+function scheduleRaf() {
+  if (!rafScheduled) {
+    rafScheduled = true;
+    requestAnimationFrame(flushUpdates);
   }
-
-  const el = document.getElementById('duplicate-count');
-  if (el) el.textContent = String(duplicateCount);
 }
 
-function updateAnalysisProgress() {
-  const rows = document.querySelectorAll('#file-table-body tr[data-filename]');
-  const total = rows.length;
-  let analyzed = 0;
+/** Flush all pending updates in a single animation frame. */
+function flushUpdates() {
+  rafScheduled = false;
 
-  for (const row of rows) {
-    if (/** @type {HTMLElement} */ (row).dataset.isAnalyzed === 'true') {
-      analyzed++;
-    }
+  // Flush pending file row updates
+  for (const [, fileData] of pendingFileUpdates) {
+    updateUploadFileRow(fileData);
   }
+  pendingFileUpdates.clear();
 
-  const percent = total > 0 ? Math.round((analyzed / total) * 100) : 0;
+  // Recompute queue positions after row updates
+  recomputeQueuePositions();
 
-  const analysisCompleted = document.getElementById('analysis-completed');
-  if (analysisCompleted) analysisCompleted.textContent = String(analyzed);
-
-  const analysisTotal = document.getElementById('analysis-total');
-  if (analysisTotal) analysisTotal.textContent = String(total);
-
-  const analysisPercent = document.getElementById('analysis-percent');
-  if (analysisPercent) analysisPercent.textContent = `${percent}%`;
-
-  const analysisProgressBar = /** @type {HTMLElement | null} */ (
-    document.getElementById('analysis-progress-bar')
-  );
-  if (analysisProgressBar) analysisProgressBar.style.width = `${percent}%`;
-
-  const progressSection = document.getElementById('analysis-progress');
-  if (analyzed === total && total > 0) {
-    progressSection?.classList.add('hidden');
-  } else {
-    progressSection?.classList.remove('hidden');
+  // Flush pending overall progress
+  if (pendingProgressData) {
+    updateProgressUI(pendingProgressData);
+    pendingProgressData = null;
   }
 }
 
-export function applyUploadedFilter() {
-  const hideUploadedEl = /** @type {HTMLInputElement | null} */ (
-    document.getElementById('hide-uploaded')
-  );
-  const hideUploaded = hideUploadedEl?.checked || false;
-  const rows = document.querySelectorAll('#file-table-body tr[data-filename]');
+/**
+ * Recompute "Queued (X of Y)" labels for pending/ready-queued files.
+ */
+function recomputeQueuePositions() {
+  const allRows = document.querySelectorAll('[data-upload-file]');
+  // Determine which statuses count as "queued" based on current phase
+  const queuedStatuses = currentPhase === 'upload' ? ['ready'] : ['pending'];
+
+  // First pass: count queued files
+  let totalQueued = 0;
+  for (const row of allRows) {
+    const filename = /** @type {HTMLElement} */ (row).getAttribute('data-upload-file');
+    const status = fileRowStatusCache.get(filename || '');
+    if (status && queuedStatuses.includes(status)) {
+      totalQueued++;
+    }
+  }
 
-  for (const row of rows) {
-    if (hideUploaded && /** @type {HTMLElement} */ (row).dataset.isDuplicate === 'true') {
-      row.classList.add('hidden');
-    } else {
-      row.classList.remove('hidden');
+  if (totalQueued === 0) return;
+
+  // Second pass: assign positions
+  let pos = 1;
+  for (const row of allRows) {
+    const filename = /** @type {HTMLElement} */ (row).getAttribute('data-upload-file');
+    const status = fileRowStatusCache.get(filename || '');
+    if (status && queuedStatuses.includes(status)) {
+      const label = row.querySelector('[data-queue-label]');
+      if (label) {
+        label.textContent =
+          currentPhase === 'upload'
+            ? `Queued for upload (${pos} of ${totalQueued})`
+            : `Queued (${pos} of ${totalQueued})`;
+      }
+      pos++;
     }
   }
 }
 
 /**
- * Display final analysis results.
- * @param {any} job
+ * Update a single file row with minimal DOM changes.
+ * Only rebuilds innerHTML on status transitions; for uploading progress,
+ * just updates the bar width and percentage text to avoid resetting spinners.
+ * @param {any} fileData
  */
-export function displayAnalysisResults(job) {
-  const tbody = document.getElementById('file-table-body');
-  if (!tbody) return;
-
-  let totalSize = 0;
-  let duplicateCount = 0;
-  let invalidCount = 0;
-
-  tbody.innerHTML = job.files
-    .map((/** @type {any} */ file) => {
-      totalSize += file.file_size;
-      if (file.is_duplicate) duplicateCount++;
-      if (file.is_valid === false) invalidCount++;
-
-      let statusBadge;
-      if (file.status === 'failed') {
-        statusBadge = `<span class="px-2 py-1 text-xs rounded-full bg-red-100 text-red-800" title="${file.error_message}">Failed</span>`;
-      } else if (file.is_duplicate) {
-        statusBadge =
-          '<span class="px-2 py-1 text-xs rounded-full bg-yellow-100 text-yellow-800">Duplicate</span>';
-      } else if (file.is_valid === false) {
-        statusBadge =
-          '<span class="px-2 py-1 text-xs rounded-full bg-orange-100 text-orange-800" title="Invalid timestamp (pre-1980)">Invalid</span>';
-      } else {
-        statusBadge =
-          '<span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">Ready</span>';
-      }
+function updateUploadFileRow(fileData) {
+  const row = document.querySelector(`[data-upload-file="${fileData.filename}"]`);
+  if (!row) return;
 
-      const startTimeDisplay = file.start_time
-        ? new Date(file.start_time).toLocaleString('en-US', {
-            month: 'short',
-            day: 'numeric',
-            hour: '2-digit',
-            minute: '2-digit',
-          })
-        : '-';
-
-      return `
-            <tr class="file-item" data-filename="${file.filename}"
-                data-status="${file.status}"
-                data-is-duplicate="${file.is_duplicate ? 'true' : 'false'}"
-                data-is-analyzed="true">
-                <td class="px-4 py-3">
-                    <div class="flex items-center min-w-0">
-                        <svg class="h-5 w-5 text-gray-400 mr-2 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                  d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
-                        </svg>
-                        <span class="text-sm font-medium text-gray-900 truncate" title="${file.filename}">${file.filename}</span>
-                    </div>
-                </td>
-                <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">${file.file_size_formatted}</td>
-                <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500" title="${file.start_time || ''}">${startTimeDisplay}</td>
-                <td class="px-4 py-3 text-sm text-gray-500 truncate" title="${file.s3_path || ''}">${file.s3_path || '-'}</td>
-                <td class="px-4 py-3 whitespace-nowrap">${statusBadge}</td>
-            </tr>
-        `;
-    })
-    .join('');
-
-  const totalFilesEl = document.getElementById('total-files');
-  if (totalFilesEl) totalFilesEl.textContent = String(job.files.length);
-
-  const totalSizeEl = document.getElementById('total-size');
-  if (totalSizeEl) totalSizeEl.textContent = formatBytes(totalSize);
-
-  const duplicateCountEl = document.getElementById('duplicate-count');
-  if (duplicateCountEl) {
-    duplicateCountEl.textContent =
-      String(duplicateCount) + (invalidCount > 0 ? ` + ${invalidCount} invalid` : '');
+  const cachedStatus = fileRowStatusCache.get(fileData.filename);
+  const newStatus = fileData.is_duplicate ? `${fileData.status}:dup` : fileData.status;
+
+  // If status hasn't changed, only do micro-updates for uploading progress
+  if (cachedStatus === newStatus) {
+    if (fileData.status === 'uploading') {
+      const bar = /** @type {HTMLElement | null} */ (row.querySelector('[data-progress-bar]'));
+      if (bar) bar.style.width = `${fileData.progress_percent || 0}%`;
+      const label = row.querySelector('[data-progress-label]');
+      if (label) {
+        label.textContent =
+          fileData.progress_percent != null ? `${fileData.progress_percent.toFixed(0)}%` : '';
+      }
+    }
+    return;
   }
 
-  document.getElementById('analysis-progress')?.classList.add('hidden');
-
-  const hasUploadableFiles = job.files.some(
-    (/** @type {any} */ f) => f.status === 'ready' && f.is_valid !== false && !f.is_duplicate,
-  );
-  const uploadBtn = /** @type {HTMLButtonElement | null} */ (document.getElementById('upload-btn'));
-  if (uploadBtn) uploadBtn.disabled = !hasUploadableFiles;
+  // Status changed — full rebuild of the row
+  fileRowStatusCache.set(fileData.filename, newStatus);
+  row.innerHTML = buildFileRowHTML(fileData);
+}
 
-  const descriptionEl = document.getElementById('step-description');
-  if (descriptionEl) {
-    descriptionEl.textContent = STEP_3_VALIDATED;
+/**
+ * Build the full HTML for a file row.
+ * @param {any} fileData
+ * @returns {string}
+ */
+function buildFileRowHTML(fileData) {
+  let statusIcon = '';
+  let statusText = '';
+
+  if (fileData.status === 'completed') {
+    statusIcon =
+      '<svg class="h-5 w-5 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg>';
+    statusText = '<span class="text-xs text-green-600">Uploaded</span>';
+  } else if (fileData.status === 'failed') {
+    statusIcon =
+      '<svg class="h-5 w-5 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>';
+    statusText = `<span class="text-xs text-red-600" title="${fileData.error_message || ''}">Failed</span>`;
+  } else if (fileData.status === 'skipped') {
+    statusIcon =
+      '<svg class="h-5 w-5 text-yellow-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 9l3 3m0 0l-3 3m3-3H8m13 0a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>';
+    statusText = '<span class="text-xs text-yellow-600">Skipped</span>';
+  } else if (fileData.status === 'uploading') {
+    statusIcon =
+      '<svg class="spinner h-5 w-5 text-nlr-blue" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>';
+    const pct = fileData.progress_percent != null ? `${fileData.progress_percent.toFixed(0)}%` : '';
+    statusText = `
+      <div class="flex items-center space-x-2">
+        <div class="w-16 bg-gray-200 rounded-full h-2">
+          <div data-progress-bar class="bg-nlr-blue h-2 rounded-full transition-[width] duration-300 ease-out" style="width: ${fileData.progress_percent || 0}%"></div>
+        </div>
+        <span data-progress-label class="text-xs text-gray-500 w-8">${pct}</span>
+      </div>`;
+  } else if (fileData.status === 'analyzing') {
+    statusIcon =
+      '<svg class="spinner h-5 w-5 text-blue-500" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>';
+    statusText = '<span class="text-xs text-blue-600">Validating</span>';
+  } else if (fileData.status === 'ready') {
+    if (fileData.is_duplicate) {
+      statusIcon =
+        '<svg class="h-5 w-5 text-yellow-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg>';
+      statusText = '<span class="text-xs text-yellow-600">Duplicate</span>';
+    } else if (currentPhase === 'upload') {
+      // In upload phase, non-duplicate ready files are queued for upload
+      statusIcon =
+        '<div class="h-5 w-5 text-gray-400"><svg class="h-5 w-5 animate-pulse" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" /></svg></div>';
+      statusText = '<span data-queue-label class="text-xs text-gray-500">Queued for upload</span>';
+    } else {
+      statusIcon =
+        '<svg class="h-5 w-5 text-green-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4" /></svg>';
+      statusText = '<span class="text-xs text-green-600">Validated</span>';
+    }
+  } else if (fileData.status === 'pending') {
+    statusIcon =
+      '<div class="h-5 w-5 text-gray-400"><svg class="h-5 w-5 animate-pulse" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" /></svg></div>';
+    statusText = '<span data-queue-label class="text-xs text-gray-500">Queued</span>';
+  } else {
+    statusText = `<span class="text-xs text-gray-400">${fileData.status || 'Unknown'}</span>`;
   }
 
-  applyUploadedFilter();
+  return `
+    <div class="flex items-center space-x-3">
+        ${statusIcon || '<div class="h-5 w-5"></div>'}
+        <span class="text-sm text-gray-900">${fileData.filename}</span>
+    </div>
+    <div class="flex items-center space-x-4">
+        ${fileData.file_size_formatted ? `<span class="text-sm text-gray-500">${fileData.file_size_formatted}</span>` : ''}
+        ${statusText}
+    </div>
+  `;
+}
+
+/**
+ * @param {any} fileData
+ * @returns {string}
+ */
+export function formatFileSize(fileData) {
+  return fileData.file_size_formatted || formatBytes(fileData.file_size || 0);
 }

From 4a5273196d83a2cf65de56f4be63ae02b2652cab Mon Sep 17 00:00:00 2001
From: "Simms, Andrew" <Andrew.Simms@nrel.gov>
Date: Sun, 8 Feb 2026 10:49:37 -0700
Subject: [PATCH 28/44] JS: Use dom.js selectors in logs.js

---
 app/static/js/modules/logs.js | 26 +++++++++-----------------
 1 file changed, 9 insertions(+), 17 deletions(-)

diff --git a/app/static/js/modules/logs.js b/app/static/js/modules/logs.js
index 3f3d1fe..1a65cfc 100644
--- a/app/static/js/modules/logs.js
+++ b/app/static/js/modules/logs.js
@@ -6,7 +6,7 @@
  */
 import { apiGet, apiPost } from './api.js';
 import { debounce } from './debounce.js';
-import { setText, withLoadingButton } from './dom.js';
+import { hideEl, setText, toggleEl, withLoadingButton } from './dom.js';
 import { showNotification } from './notify.js';
 import state from './state.js';
 
@@ -213,11 +213,8 @@ export async function loadCsvFiles() {
     );
 
     // Update badge
-    const badge = document.getElementById('csv-count-badge');
-    if (badge) {
-      badge.textContent = String(csvFiles.length);
-      badge.classList.toggle('hidden', csvFiles.length === 0);
-    }
+    setText('csv-count-badge', csvFiles.length);
+    toggleEl('csv-count-badge', csvFiles.length > 0);
 
     const tbody = document.getElementById('csv-table-body');
     if (!tbody) return;
@@ -281,12 +278,11 @@ function downloadCsv(path) {
 async function previewCsv(path) {
   const panel = document.getElementById('csv-preview-panel');
   const content = document.getElementById('csv-preview-content');
-  const title = document.getElementById('csv-preview-title');
   if (!panel || !content) return;
 
   // Toggle off if clicking the same file
   if (currentPreviewPath === path && !panel.classList.contains('hidden')) {
-    panel.classList.add('hidden');
+    hideEl('csv-preview-panel');
     currentPreviewPath = '';
     return;
   }
@@ -296,7 +292,7 @@ async function previewCsv(path) {
   panel.classList.remove('hidden');
 
   const filename = path.split('/').pop() || path;
-  if (title) title.textContent = `Preview: ${filename}`;
+  setText('csv-preview-title', `Preview: ${filename}`);
 
   try {
     const data = await apiGet(`/api/logs/csv-preview?path=${encodeURIComponent(path)}`);
@@ -386,14 +382,10 @@ export function initLogs() {
   }
 
   // CSV preview close button
-  const csvPreviewClose = document.getElementById('csv-preview-close');
-  const csvPreviewPanel = document.getElementById('csv-preview-panel');
-  if (csvPreviewClose && csvPreviewPanel) {
-    csvPreviewClose.addEventListener('click', () => {
-      csvPreviewPanel.classList.add('hidden');
-      currentPreviewPath = '';
-    });
-  }
+  document.getElementById('csv-preview-close')?.addEventListener('click', () => {
+    hideEl('csv-preview-panel');
+    currentPreviewPath = '';
+  });
 
   // Filter controls
   const { date: dateEl, level: levelEl, category: catEl, search: searchEl } = getFilterEls();

From df781052c892d708b0a0fa5bc316fd7ec36151bd Mon Sep 17 00:00:00 2001
From: "Simms, Andrew" <Andrew.Simms@nrel.gov>
Date: Sun, 8 Feb 2026 10:50:14 -0700
Subject: [PATCH 29/44] JS: Clean up file browser with dom.js

---
 app/static/js/modules/file-browser.js | 95 +++++++++++----------------
 1 file changed, 38 insertions(+), 57 deletions(-)

diff --git a/app/static/js/modules/file-browser.js b/app/static/js/modules/file-browser.js
index 3d9528b..cfc58ea 100644
--- a/app/static/js/modules/file-browser.js
+++ b/app/static/js/modules/file-browser.js
@@ -1,8 +1,13 @@
 /**
  * S3 file browser page functionality.
  */
+import { apiGet } from './api.js';
+import { debounce } from './debounce.js';
+import { hideEl, setText, showEl } from './dom.js';
+import { formatBytes } from './formatters.js';
+import { fileIcon, folderIcon } from './icons.js';
+import { showNotification } from './notify.js';
 import state from './state.js';
-import { formatBytes, showNotification } from './utils.js';
 
 export function initFileBrowser() {
   const refreshBtn = document.getElementById('refresh-btn');
@@ -18,32 +23,25 @@ export function initFileBrowser() {
   retryBtn?.addEventListener('click', () => loadFiles(state.currentPrefix));
   closeSearchBtn?.addEventListener('click', hideSearchResults);
 
-  let searchTimeout = 0;
-  searchInput?.addEventListener('input', () => {
-    clearTimeout(searchTimeout);
-    searchTimeout = window.setTimeout(() => {
-      const query = searchInput.value.trim();
-      if (query.length >= 2) {
-        searchFiles(query);
-      } else {
-        hideSearchResults();
-      }
-    }, 300);
-  });
+  const debouncedSearch = debounce(() => {
+    const query = searchInput?.value.trim() || '';
+    if (query.length >= 2) {
+      searchFiles(query);
+    } else {
+      hideSearchResults();
+    }
+  }, 300);
+  searchInput?.addEventListener('input', debouncedSearch);
 
   loadSettings().then(() => loadFiles(''));
 }
 
 async function loadSettings() {
   try {
-    const response = await fetch('/api/settings');
-    const settings = await response.json();
-
-    const bucketName = document.getElementById('bucket-name');
-    if (bucketName) bucketName.textContent = settings.s3_bucket || 'No bucket configured';
+    const settings = await apiGet('/api/settings');
+    setText('bucket-name', settings.s3_bucket || 'No bucket configured');
   } catch (_error) {
-    const bucketName = document.getElementById('bucket-name');
-    if (bucketName) bucketName.textContent = 'Error loading settings';
+    setText('bucket-name', 'Error loading settings');
   }
 }
 
@@ -53,35 +51,32 @@ async function loadSettings() {
 async function loadFiles(prefix) {
   state.currentPrefix = prefix;
 
-  document.getElementById('loading-state')?.classList.remove('hidden');
-  document.getElementById('error-state')?.classList.add('hidden');
-  document.getElementById('empty-state')?.classList.add('hidden');
-  document.getElementById('file-list')?.classList.add('hidden');
+  showEl('loading-state');
+  hideEl('error-state');
+  hideEl('empty-state');
+  hideEl('file-list');
 
   try {
-    const response = await fetch(`/api/files/list?prefix=${encodeURIComponent(prefix)}`);
-    const data = await response.json();
+    const data = await apiGet(`/api/files/list?prefix=${encodeURIComponent(prefix)}`);
 
-    if (!response.ok || !data.success) {
+    if (!data.success) {
       throw new Error(data.error || 'Failed to load files');
     }
 
-    document.getElementById('loading-state')?.classList.add('hidden');
+    hideEl('loading-state');
 
     updateBreadcrumb(data.breadcrumbs || []);
 
     if (data.folders.length === 0 && data.files.length === 0) {
-      document.getElementById('empty-state')?.classList.remove('hidden');
+      showEl('empty-state');
       return;
     }
 
     displayFiles(data.folders, data.files);
   } catch (error) {
-    document.getElementById('loading-state')?.classList.add('hidden');
-    document.getElementById('error-state')?.classList.remove('hidden');
-
-    const errorMessage = document.getElementById('error-message');
-    if (errorMessage) errorMessage.textContent = /** @type {Error} */ (error).message;
+    hideEl('loading-state');
+    showEl('error-state');
+    setText('error-message', /** @type {Error} */ (error).message);
   }
 }
 
@@ -93,12 +88,12 @@ function updateBreadcrumb(breadcrumbs) {
   if (!nav) return;
 
   nav.innerHTML = `
-        <a href="#" data-prefix="" class="text-nrel-blue hover:underline">Root</a>
+        <a href="#" data-prefix="" class="text-nlr-blue hover:underline">Root</a>
         ${breadcrumbs
           .map(
             (b) => `
             <span class="text-gray-400">/</span>
-            <a href="#" data-prefix="${b.prefix}" class="text-nrel-blue hover:underline">${b.name}</a>
+            <a href="#" data-prefix="${b.prefix}" class="text-nlr-blue hover:underline">${b.name}</a>
         `,
           )
           .join('')}
@@ -124,9 +119,7 @@ function displayFiles(folders, files) {
     ...folders.map(
       (folder) => `
             <div class="file-item px-6 py-3 flex items-center cursor-pointer" data-prefix="${folder.prefix}">
-                <svg class="h-5 w-5 text-nrel-yellow mr-3" fill="currentColor" viewBox="0 0 20 20">
-                    <path d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" />
-                </svg>
+                ${folderIcon()}
                 <span class="text-sm font-medium text-gray-900">${folder.name}/</span>
             </div>
         `,
@@ -135,10 +128,7 @@ function displayFiles(folders, files) {
       (file) => `
             <div class="file-item px-6 py-3 flex items-center justify-between">
                 <div class="flex items-center">
-                    <svg class="h-5 w-5 text-gray-400 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                              d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
-                    </svg>
+                    ${fileIcon()}
                     <span class="text-sm text-gray-900">${file.name}</span>
                 </div>
                 <div class="flex items-center space-x-4 text-sm text-gray-500">
@@ -150,7 +140,7 @@ function displayFiles(folders, files) {
     ),
   ].join('');
 
-  fileList.classList.remove('hidden');
+  showEl('file-list');
 
   for (const el of fileList.querySelectorAll('[data-prefix]')) {
     el.addEventListener('click', () =>
@@ -164,15 +154,9 @@ function displayFiles(folders, files) {
  */
 async function searchFiles(query) {
   try {
-    const response = await fetch(
+    const data = await apiGet(
       `/api/files/search?query=${encodeURIComponent(query)}&prefix=${encodeURIComponent(state.currentPrefix)}`,
     );
-    const data = await response.json();
-
-    if (!response.ok) {
-      throw new Error(data.error || 'Search failed');
-    }
-
     showSearchResults(data.files, query);
   } catch (error) {
     showNotification(/** @type {Error} */ (error).message, 'error');
@@ -196,10 +180,7 @@ function showSearchResults(files, _query) {
             (file) => `
                 <div class="px-6 py-3 flex items-center justify-between">
                     <div class="flex items-center">
-                        <svg class="h-5 w-5 text-gray-400 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                  d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
-                        </svg>
+                        ${fileIcon()}
                         <div>
                             <div class="text-sm text-gray-900">${file.name}</div>
                             <div class="text-xs text-gray-500">${file.key}</div>
@@ -211,11 +192,11 @@ function showSearchResults(files, _query) {
           )
           .join('');
 
-  container.classList.remove('hidden');
+  showEl('search-results');
 }
 
 function hideSearchResults() {
-  document.getElementById('search-results')?.classList.add('hidden');
+  hideEl('search-results');
 
   const searchInput = /** @type {HTMLInputElement | null} */ (
     document.getElementById('search-input')

From 73465a246c66397c6bd1512f25f8b43c44051156 Mon Sep 17 00:00:00 2001
From: "Simms, Andrew" <Andrew.Simms@nrel.gov>
Date: Sun, 8 Feb 2026 10:50:58 -0700
Subject: [PATCH 30/44] JS: Add logs params to state

---
 app/static/js/modules/state.js | 32 +++++++++++++++++++++++++++++---
 1 file changed, 29 insertions(+), 3 deletions(-)

diff --git a/app/static/js/modules/state.js b/app/static/js/modules/state.js
index 888cc08..d2e9107 100644
--- a/app/static/js/modules/state.js
+++ b/app/static/js/modules/state.js
@@ -12,11 +12,11 @@ const state = {
   /** @type {string | null} */
   selectedFolderPath: null,
 
-  /** Current upload step (1-5) */
+  /** Current upload step (1-4) */
   currentStep: 1,
 
   /** S3 file browser current prefix */
-  currentPrefix: "",
+  currentPrefix: '',
 
   /** @type {{ version?: string, commit?: string, branch?: string } | null} */
   appVersionData: null,
@@ -27,8 +27,34 @@ const state = {
   /** @type {string[]} */
   scanFilePaths: [],
 
-  /** @type {Array<{ path: string, filename: string, size: number, already_uploaded: boolean }>} */
+  /** @type {Array<{ path: string, filename: string, size: number, mtime?: number, already_uploaded: boolean }>} */
   scanFileStatuses: [],
+
+  /** Total size of all scanned files in bytes */
+  scanTotalSize: 0,
+
+  /** @type {string | null} */
+  scanFolderPath: null,
+
+  /** Sort configuration for the review table */
+  reviewSortConfig: { column: 'filename', ascending: true },
+
+  /** @type {Array<{ name: string, size: number, mtime: number }>} */
+  browserFiles: [],
+
+  /** Sort configuration for the folder browser file table */
+  browserFileSortConfig: { column: 'name', ascending: true },
+
+  /** Log viewer filter state */
+  logFilters: {
+    /** @type {string | null} */ date: null,
+    /** @type {string | null} */ level: null,
+    /** @type {string | null} */ category: null,
+    /** @type {string} */ search: '',
+  },
+
+  /** Log viewer pagination state */
+  logPagination: { offset: 0, limit: 100 },
 };
 
 export default state;

From 4af725064bea6dd919e21d02d8371b43b86891ce Mon Sep 17 00:00:00 2001
From: "Simms, Andrew" <Andrew.Simms@nrel.gov>
Date: Sun, 8 Feb 2026 10:51:27 -0700
Subject: [PATCH 31/44] JS: Refactor folder browser to improve usability

---
 app/static/js/modules/folder-browser.js | 572 +++++++++++++++---------
 1 file changed, 371 insertions(+), 201 deletions(-)

diff --git a/app/static/js/modules/folder-browser.js b/app/static/js/modules/folder-browser.js
index 02d6da0..55c0102 100644
--- a/app/static/js/modules/folder-browser.js
+++ b/app/static/js/modules/folder-browser.js
@@ -1,10 +1,15 @@
-import { connectAnalysisProgressStream, initializeAnalysisTableFromPaths } from './analysis.js';
+import { connectCombinedProgressStream } from './analysis.js';
+import { apiGet, apiPost } from './api.js';
+import { hideEl, setText, showEl } from './dom.js';
+import { formatBytes, formatMtime } from './formatters.js';
+import { fileIcon, folderIcon } from './icons.js';
+import { showNotification } from './notify.js';
+import { toggleSort, updateSortIndicators } from './sorting-helpers.js';
 /**
  * Inline folder browser and scan results for folder-based upload.
  */
 import state from './state.js';
 import { setUploadStep, showUploadSteps } from './stepper.js';
-import { formatBytes, showNotification } from './utils.js';
 
 /**
  * Initialize the inline folder browser and auto-load initial folder.
@@ -13,41 +18,39 @@ export async function initFolderBrowser() {
   const panel = document.getElementById('folder-browser-panel');
   if (!panel) return;
 
-  document.getElementById('select-current-folder')?.addEventListener('click', selectCurrentFolder);
+  document.getElementById('select-folder-btn')?.addEventListener('click', selectCurrentFolder);
 
-  // Delegated click handler for folder navigation
-  const folderList = document.getElementById('folder-list');
-  if (folderList) {
-    folderList.addEventListener('click', (e) => {
-      const target = /** @type {HTMLElement} */ (e.target).closest(
-        '[data-action="navigate-folder"]',
-      );
-      if (target) {
-        loadFolderBrowser(/** @type {HTMLElement} */ (target).dataset.path || '');
-      }
-    });
+  // Delegated click handler for folder navigation (shared across 3 containers)
+  /** @param {Event} e */
+  function handleFolderNavClick(e) {
+    const target = /** @type {HTMLElement} */ (e.target).closest('[data-action="navigate-folder"]');
+    if (target) {
+      loadFolderBrowser(/** @type {HTMLElement} */ (target).dataset.path || '');
+    }
   }
 
-  const quickLinks = document.getElementById('folder-quick-links');
-  if (quickLinks) {
-    quickLinks.addEventListener('click', (e) => {
-      const target = /** @type {HTMLElement} */ (e.target).closest(
-        '[data-action="navigate-folder"]',
-      );
-      if (target) {
-        loadFolderBrowser(/** @type {HTMLElement} */ (target).dataset.path || '');
+  document.getElementById('folder-list')?.addEventListener('click', handleFolderNavClick);
+  document.getElementById('folder-quick-links')?.addEventListener('click', handleFolderNavClick);
+  document.getElementById('folder-breadcrumb')?.addEventListener('click', handleFolderNavClick);
+
+  // Sort header click handler (Review table)
+  const scanSection = document.getElementById('scan-results-section');
+  if (scanSection) {
+    scanSection.addEventListener('click', (e) => {
+      const th = /** @type {HTMLElement} */ (e.target).closest('[data-sort]');
+      if (th) {
+        sortReviewTable(/** @type {HTMLElement} */ (th).dataset.sort || 'filename');
       }
     });
   }
 
-  const breadcrumb = document.getElementById('folder-breadcrumb');
-  if (breadcrumb) {
-    breadcrumb.addEventListener('click', (e) => {
-      const target = /** @type {HTMLElement} */ (e.target).closest(
-        '[data-action="navigate-folder"]',
-      );
-      if (target) {
-        loadFolderBrowser(/** @type {HTMLElement} */ (target).dataset.path || '');
+  // Sort header click handler (File browser table)
+  const fileTableHead = document.getElementById('file-table-head');
+  if (fileTableHead) {
+    fileTableHead.addEventListener('click', (e) => {
+      const th = /** @type {HTMLElement} */ (e.target).closest('[data-file-sort]');
+      if (th) {
+        sortBrowserFileTable(/** @type {HTMLElement} */ (th).dataset.fileSort || 'name');
       }
     });
   }
@@ -58,13 +61,8 @@ export async function initFolderBrowser() {
     loadFolderBrowser(lastFolder);
   } else {
     try {
-      const response = await fetch('/api/settings');
-      const settings = await response.json();
-      if (settings.default_upload_folder) {
-        loadFolderBrowser(settings.default_upload_folder);
-      } else {
-        loadFolderBrowser('');
-      }
+      const settings = await apiGet('/api/settings');
+      loadFolderBrowser(settings.default_upload_folder || '');
     } catch (_error) {
       loadFolderBrowser('');
     }
@@ -73,17 +71,14 @@ export async function initFolderBrowser() {
 
 /**
  * Load folder contents from the backend.
+ * Uses raw fetch for complex retry-on-failure logic.
  * @param {string} path
  * @param {boolean} [isRetry]
  */
 export async function loadFolderBrowser(path, isRetry = false) {
-  const folderList = document.getElementById('folder-list');
-  const loadingState = document.getElementById('folder-loading');
-  const errorState = document.getElementById('folder-error');
-
-  if (folderList) folderList.classList.add('hidden');
-  if (errorState) errorState.classList.add('hidden');
-  if (loadingState) loadingState.classList.remove('hidden');
+  hideEl('folder-list');
+  hideEl('folder-error');
+  showEl('folder-loading');
 
   try {
     const url = path ? `/api/files/browse?path=${encodeURIComponent(path)}` : '/api/files/browse';
@@ -108,7 +103,7 @@ export async function loadFolderBrowser(path, isRetry = false) {
       if (lastUsedFolder && lastUsedFolder !== data.current_path) {
         const lastFolderName = lastUsedFolder.split('/').pop() || lastUsedFolder;
         quickLinksHtml += `
-                    <button class="px-3 py-1 text-sm bg-nrel-blue text-white hover:bg-nrel-blue-light rounded-md whitespace-nowrap"
+                    <button class="px-3 py-1 text-sm bg-nlr-blue text-white hover:bg-nlr-blue-light rounded-md whitespace-nowrap"
                             data-action="navigate-folder" data-path="${lastUsedFolder}">
                         Last: ${lastFolderName}
                     </button>
@@ -136,7 +131,7 @@ export async function loadFolderBrowser(path, isRetry = false) {
         .map(
           (/** @type {{ name: string, path: string }} */ crumb, /** @type {number} */ i) => `
                 ${i > 0 ? '<span class="text-gray-400">/</span>' : ''}
-                <button class="text-nrel-blue hover:underline whitespace-nowrap"
+                <button class="text-nlr-blue hover:underline whitespace-nowrap"
                         data-action="navigate-folder" data-path="${crumb.path}">
                     ${crumb.name}
                 </button>
@@ -146,22 +141,35 @@ export async function loadFolderBrowser(path, isRetry = false) {
     }
 
     // Update MCAP count
-    const mcapCount = document.getElementById('folder-mcap-count');
-    if (mcapCount) mcapCount.textContent = String(data.mcap_count);
+    setText('folder-mcap-count', data.mcap_count);
 
-    // Enable/disable select button
-    const selectBtn = /** @type {HTMLButtonElement | null} */ (
-      document.getElementById('select-current-folder')
+    // Enable select button and store current path
+    const selectFolderBtn = /** @type {HTMLButtonElement | null} */ (
+      document.getElementById('select-folder-btn')
     );
-    if (selectBtn) {
-      selectBtn.disabled = false;
-      selectBtn.dataset.path = data.current_path;
+    if (selectFolderBtn) {
+      selectFolderBtn.disabled = false;
+      selectFolderBtn.dataset.path = data.current_path;
+    }
+
+    // Update bottom summary with MCAP count
+    if (data.mcap_count > 0) {
+      setText(
+        'folder-select-summary',
+        `${data.mcap_count} MCAP file${data.mcap_count === 1 ? '' : 's'} in this folder.`,
+      );
+    } else {
+      setText(
+        'folder-select-summary',
+        'Navigate to the folder containing your MCAP files, then click Upload Folder.',
+      );
     }
 
     // Render folder list
-    if (loadingState) loadingState.classList.add('hidden');
-    if (folderList) folderList.classList.remove('hidden');
+    hideEl('folder-loading');
+    showEl('folder-list');
 
+    const folderList = document.getElementById('folder-list');
     if (folderList) {
       if (data.folders.length === 0 && data.files.length === 0) {
         folderList.innerHTML =
@@ -184,9 +192,7 @@ export async function loadFolderBrowser(path, isRetry = false) {
                         <div class="px-6 py-3 flex items-center justify-between cursor-pointer hover:bg-gray-50"
                              data-action="navigate-folder" data-path="${folder.path}">
                             <div class="flex items-center">
-                                <svg class="h-5 w-5 text-nrel-yellow mr-3" fill="currentColor" viewBox="0 0 20 20">
-                                    <path d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" />
-                                </svg>
+                                ${folderIcon()}
                                 <span class="text-sm font-medium text-gray-900">${folder.name}</span>
                             </div>
                             ${
@@ -197,36 +203,27 @@ export async function loadFolderBrowser(path, isRetry = false) {
                         </div>
                     `,
           ),
-          ...data.files.slice(0, 10).map(
-            (/** @type {{ name: string, size: number }} */ file) => `
-                        <div class="px-6 py-3 flex items-center justify-between bg-gray-50">
-                            <div class="flex items-center">
-                                <svg class="h-5 w-5 text-gray-400 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                          d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
-                                </svg>
-                                <span class="text-sm text-gray-600">${file.name}</span>
-                            </div>
-                            <span class="text-xs text-gray-500">${formatBytes(file.size)}</span>
-                        </div>
-                    `,
-          ),
-          data.files.length > 10
-            ? `
-                        <div class="px-6 py-2 text-center text-xs text-gray-500">
-                            ... and ${data.files.length - 10} more MCAP files
-                        </div>
-                    `
-            : '',
         ].join('');
       }
     }
-  } catch (error) {
-    if (loadingState) loadingState.classList.add('hidden');
-    if (errorState) errorState.classList.remove('hidden');
 
-    const errorMessage = document.getElementById('folder-error-message');
-    if (errorMessage) errorMessage.textContent = /** @type {Error} */ (error).message;
+    // Render MCAP file table
+    if (data.files.length > 0) {
+      state.browserFiles = data.files;
+      state.browserFileSortConfig = state.browserFileSortConfig || {
+        column: 'name',
+        ascending: true,
+      };
+      renderBrowserFileTable();
+      showEl('file-table-section');
+    } else {
+      state.browserFiles = [];
+      hideEl('file-table-section');
+    }
+  } catch (error) {
+    hideEl('folder-loading');
+    showEl('folder-error');
+    setText('folder-error-message', /** @type {Error} */ (error).message);
   }
 }
 
@@ -234,29 +231,20 @@ export async function loadFolderBrowser(path, isRetry = false) {
  * Select the current folder and scan for MCAP files.
  */
 async function selectCurrentFolder() {
-  const selectBtn = /** @type {HTMLButtonElement | null} */ (
-    document.getElementById('select-current-folder')
+  const btn = /** @type {HTMLButtonElement | null} */ (
+    document.getElementById('select-folder-btn')
   );
-  if (!selectBtn) return;
+  if (!btn) return;
 
-  const folderPath = selectBtn.dataset.path;
+  const folderPath = btn.dataset.path;
   if (!folderPath) return;
 
-  selectBtn.disabled = true;
-  selectBtn.textContent = 'Scanning...';
+  btn.disabled = true;
+  const btnSpan = btn.querySelector('span');
+  if (btnSpan) btnSpan.textContent = 'Scanning...';
 
   try {
-    const response = await fetch('/api/upload/scan-folder', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ folder_path: folderPath }),
-    });
-
-    const data = await response.json();
-
-    if (!response.ok) {
-      throw new Error(data.error || 'Failed to scan folder');
-    }
+    const data = await apiPost('/api/upload/scan-folder', { folder_path: folderPath });
 
     if (data.total_count === 0) {
       showNotification('No MCAP files found in this folder', 'error');
@@ -266,61 +254,68 @@ async function selectCurrentFolder() {
     state.selectedFolderPath = folderPath;
     localStorage.setItem('lastUploadFolder', folderPath);
 
-    const prefilterResponse = await fetch('/api/upload/bulk-analyze', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({
-        file_paths: data.files.map((/** @type {{ path: string }} */ f) => f.path),
-        pre_filter_only: true,
-      }),
+    const prefilterData = await apiPost('/api/upload/bulk-analyze', {
+      file_paths: data.files.map((/** @type {{ path: string }} */ f) => f.path),
+      pre_filter_only: true,
     });
 
-    const prefilterData = await prefilterResponse.json();
-
     showScanResults(data, prefilterData.pre_filter_stats || {});
   } catch (error) {
     showNotification(/** @type {Error} */ (error).message, 'error');
   } finally {
-    selectBtn.disabled = false;
-    selectBtn.textContent = 'Select This Folder';
+    btn.disabled = false;
+    const resetSpan = btn.querySelector('span');
+    if (resetSpan) resetSpan.textContent = 'Upload This Folder';
   }
 }
 
 /**
- * Show scan results UI.
+ * Show scan results UI with sortable review table.
  * @param {any} scanData
  * @param {any} prefilterStats
  */
 function showScanResults(scanData, prefilterStats) {
-  const scanSection = document.getElementById('scan-results-section');
-  const browserPanel = document.getElementById('folder-browser-panel');
-
   showUploadSteps(2);
 
-  const selectedFolderPath = document.getElementById('selected-folder-path');
-  if (selectedFolderPath) selectedFolderPath.textContent = scanData.folder_path;
+  // Store folder path for relative path computation
+  state.scanFolderPath = scanData.folder_path;
+  state.scanTotalSize = scanData.total_size || 0;
 
-  const scanTotal = document.getElementById('scan-total');
-  if (scanTotal) scanTotal.textContent = String(scanData.total_count);
+  setText('selected-folder-path', scanData.folder_path);
+  setText('scan-total', scanData.total_count);
+  setText('scan-total-volume', formatBytes(state.scanTotalSize));
+  setText('scan-already-uploaded', prefilterStats.cache_skipped || 0);
 
-  const scanToUpload = document.getElementById('scan-to-upload');
-  if (scanToUpload) {
-    scanToUpload.textContent = String(prefilterStats.to_analyze || scanData.total_count);
+  // Merge scan data files with prefilter statuses
+  const fileStatuses = prefilterStats.file_statuses || [];
+  /** @type {Map<string, any>} */
+  const prefilterMap = new Map();
+  for (const fs of fileStatuses) {
+    prefilterMap.set(fs.path, fs);
   }
 
-  const scanAlreadyUploaded = document.getElementById('scan-already-uploaded');
-  if (scanAlreadyUploaded) {
-    scanAlreadyUploaded.textContent = String(prefilterStats.cache_skipped || 0);
+  /** @type {Array<any>} */
+  const mergedStatuses = [];
+  for (const scanFile of scanData.files) {
+    const pf = prefilterMap.get(scanFile.path);
+    mergedStatuses.push({
+      path: scanFile.path,
+      filename: scanFile.filename,
+      size: scanFile.size,
+      mtime: scanFile.mtime || 0,
+      relative_path: scanFile.relative_path || scanFile.filename,
+      already_uploaded: pf ? pf.already_uploaded : false,
+    });
   }
 
-  const fileStatuses = prefilterStats.file_statuses || [];
-  state.scanFilePaths = fileStatuses
+  state.scanFilePaths = mergedStatuses
     .filter((/** @type {any} */ f) => !f.already_uploaded)
     .map((/** @type {any} */ f) => f.path);
 
-  state.scanFileStatuses = fileStatuses;
+  state.scanFileStatuses = mergedStatuses;
+  state.reviewSortConfig = { column: 'filename', ascending: true };
 
-  renderScanFileList(fileStatuses);
+  renderReviewTable(mergedStatuses);
 
   const hideUploadedCheckbox = /** @type {HTMLInputElement | null} */ (
     document.getElementById('scan-hide-uploaded')
@@ -330,58 +325,96 @@ function showScanResults(scanData, prefilterStats) {
     hideUploadedCheckbox.onchange = () => applyScanFileFilter();
   }
 
-  const startBtn = /** @type {HTMLButtonElement | null} */ (
-    document.getElementById('start-upload-btn')
+  const continueBtn = /** @type {HTMLButtonElement | null} */ (
+    document.getElementById('continue-upload-btn')
   );
-  if (startBtn) {
-    startBtn.disabled = (prefilterStats.to_analyze || scanData.total_count) === 0;
+  if (continueBtn) {
+    continueBtn.disabled = state.scanFileStatuses.length === 0;
   }
 
-  if (browserPanel) browserPanel.classList.add('hidden');
-  if (scanSection) scanSection.classList.remove('hidden');
+  hideEl('folder-browser-panel');
+  showEl('scan-results-section');
 }
 
 /**
+ * Render the sortable review table body.
  * @param {any[]} fileStatuses
  */
-function renderScanFileList(fileStatuses) {
-  const fileList = document.getElementById('scan-file-list');
-  if (!fileList) return;
+function renderReviewTable(fileStatuses) {
+  const tbody = document.getElementById('scan-file-list');
+  if (!tbody) return;
+
+  const { column, ascending } = state.reviewSortConfig;
 
   const sorted = [...fileStatuses].sort((a, b) => {
-    if (a.already_uploaded === b.already_uploaded) {
-      return a.filename.localeCompare(b.filename);
+    let cmp = 0;
+    if (column === 'filename') {
+      cmp = a.filename.localeCompare(b.filename);
+    } else if (column === 'path') {
+      const aDir = getDirectoryPart(a.relative_path);
+      const bDir = getDirectoryPart(b.relative_path);
+      cmp = aDir.localeCompare(bDir);
+    } else if (column === 'mtime') {
+      cmp = (a.mtime || 0) - (b.mtime || 0);
+    } else if (column === 'size') {
+      cmp = a.size - b.size;
+    } else if (column === 'status') {
+      cmp = Number(a.already_uploaded) - Number(b.already_uploaded);
     }
-    return a.already_uploaded ? 1 : -1;
+    return ascending ? cmp : -cmp;
   });
 
-  fileList.innerHTML = sorted
-    .map(
-      (file) => `
-        <div class="px-6 py-3 flex items-center justify-between ${file.already_uploaded ? 'bg-yellow-50' : ''}"
-             data-already-uploaded="${file.already_uploaded}">
-            <div class="flex items-center min-w-0">
-                <svg class="h-5 w-5 ${file.already_uploaded ? 'text-yellow-500' : 'text-green-500'} mr-3 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                    ${
-                      file.already_uploaded
-                        ? '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />'
-                        : '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />'
-                    }
-                </svg>
-                <span class="text-sm ${file.already_uploaded ? 'text-gray-500' : 'text-gray-900'} truncate" title="${file.filename}">
+  tbody.innerHTML = sorted
+    .map((file) => {
+      const dirPath = getDirectoryPart(file.relative_path);
+
+      return `
+        <tr class="${file.already_uploaded ? 'bg-yellow-50' : ''}"
+            data-already-uploaded="${file.already_uploaded}">
+            <td class="px-4 py-3">
+                <span class="text-sm ${file.already_uploaded ? 'text-gray-500' : 'text-gray-900'} truncate block" title="${file.filename}">
                     ${file.filename}
                 </span>
-            </div>
-            <div class="flex items-center space-x-4 flex-shrink-0">
-                <span class="text-xs text-gray-500">${formatBytes(file.size)}</span>
+            </td>
+            <td class="px-4 py-3">
+                <span class="text-sm text-gray-500 truncate block" title="${dirPath}">${dirPath || '.'}</span>
+            </td>
+            <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">${formatMtime(file.mtime)}</td>
+            <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">${formatBytes(file.size)}</td>
+            <td class="px-4 py-3 whitespace-nowrap">
                 <span class="px-2 py-1 text-xs rounded-full ${file.already_uploaded ? 'bg-yellow-100 text-yellow-800' : 'bg-green-100 text-green-800'}">
                     ${file.already_uploaded ? 'Uploaded' : 'To Upload'}
                 </span>
-            </div>
-        </div>
-    `,
-    )
+            </td>
+        </tr>
+    `;
+    })
     .join('');
+
+  // Update sort indicators
+  updateSortIndicators('[data-sort]', '.sort-indicator', 'sort', column, ascending);
+
+  // Re-apply filter
+  applyScanFileFilter();
+}
+
+/**
+ * Get the directory part of a relative path (everything before the filename).
+ * @param {string} relativePath
+ * @returns {string}
+ */
+function getDirectoryPart(relativePath) {
+  const lastSlash = relativePath.lastIndexOf('/');
+  return lastSlash >= 0 ? relativePath.substring(0, lastSlash) : '';
+}
+
+/**
+ * Sort the review table by column.
+ * @param {string} column
+ */
+function sortReviewTable(column) {
+  toggleSort(state.reviewSortConfig, column);
+  renderReviewTable(state.scanFileStatuses);
 }
 
 function applyScanFileFilter() {
@@ -389,66 +422,203 @@ function applyScanFileFilter() {
     document.getElementById('scan-hide-uploaded')
   );
   const hideUploaded = hideUploadedEl?.checked || false;
-  const fileList = document.getElementById('scan-file-list');
-  if (!fileList) return;
+  const tbody = document.getElementById('scan-file-list');
+  if (!tbody) return;
 
-  const items = fileList.querySelectorAll('[data-already-uploaded]');
-  for (const item of items) {
-    if (hideUploaded && /** @type {HTMLElement} */ (item).dataset.alreadyUploaded === 'true') {
-      item.classList.add('hidden');
+  const rows = tbody.querySelectorAll('[data-already-uploaded]');
+  for (const row of rows) {
+    if (hideUploaded && /** @type {HTMLElement} */ (row).dataset.alreadyUploaded === 'true') {
+      row.classList.add('hidden');
     } else {
-      item.classList.remove('hidden');
+      row.classList.remove('hidden');
     }
   }
 }
 
 /**
- * Start direct upload from scanned folder.
+ * Show the confirm upload modal.
  */
-export async function startDirectUpload() {
-  if (!state.scanFilePaths || state.scanFilePaths.length === 0) {
+export function showConfirmModal() {
+  if (!state.scanFileStatuses || state.scanFileStatuses.length === 0) {
     showNotification('No files to upload', 'error');
     return;
   }
 
-  const startBtn = /** @type {HTMLButtonElement | null} */ (
-    document.getElementById('start-upload-btn')
+  // Calculate size of non-uploaded files (default view)
+  updateConfirmModalCounts(false);
+
+  // Wire up force-reupload checkbox to update counts dynamically
+  const checkbox = /** @type {HTMLInputElement | null} */ (
+    document.getElementById('force-reupload-checkbox')
   );
-  if (startBtn) {
-    startBtn.disabled = true;
-    startBtn.textContent = 'Validating...';
+  if (checkbox) {
+    checkbox.checked = false;
+    checkbox.onchange = () => updateConfirmModalCounts(checkbox.checked);
   }
 
-  try {
-    const response = await fetch('/api/upload/bulk-analyze', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({
-        file_paths: state.scanFilePaths,
-        auto_upload: false,
-      }),
-    });
-
-    const data = await response.json();
+  showEl('confirm-skip-note');
+  showEl('confirm-upload-modal');
+}
 
-    if (!response.ok && response.status !== 202) {
-      throw new Error(data.error || 'Failed to start upload');
+/**
+ * Update confirm modal file count/size based on force-reupload state.
+ * @param {boolean} forceReupload
+ */
+function updateConfirmModalCounts(forceReupload) {
+  let uploadSize = 0;
+  let uploadCount = 0;
+  for (const file of state.scanFileStatuses) {
+    if (forceReupload || !file.already_uploaded) {
+      uploadSize += file.size;
+      uploadCount++;
     }
+  }
 
-    state.currentJobId = data.job_id;
+  setText('confirm-file-count', uploadCount);
+  setText('confirm-total-size', formatBytes(uploadSize));
+
+  if (forceReupload) {
+    hideEl('confirm-skip-note');
+  } else {
+    showEl('confirm-skip-note');
+  }
+}
+
+/**
+ * Start the combined validate + upload flow.
+ */
+export async function startCombinedUpload() {
+  // Close confirm modal
+  hideEl('confirm-upload-modal');
+
+  // Check force-reupload state
+  const forceCheckbox = /** @type {HTMLInputElement | null} */ (
+    document.getElementById('force-reupload-checkbox')
+  );
+  const forceReupload = forceCheckbox?.checked || false;
+
+  // Determine which file paths to send
+  const filePaths = forceReupload
+    ? state.scanFileStatuses.map((/** @type {any} */ f) => f.path)
+    : state.scanFilePaths;
+
+  if (!filePaths || filePaths.length === 0) {
+    showNotification('No files to upload', 'error');
+    return;
+  }
+
+  setUploadStep(3);
+
+  hideEl('scan-results-section');
+  showEl('upload-section');
+
+  // Set phase label
+  setText('upload-phase-label', 'Validating files...');
 
-    setUploadStep(3);
+  // Initialize file list with pending status
+  initUploadFileList(filePaths);
 
-    document.getElementById('scan-results-section')?.classList.add('hidden');
-    document.getElementById('analysis-section')?.classList.remove('hidden');
+  try {
+    /** @type {Record<string, any>} */
+    const requestBody = {
+      file_paths: filePaths,
+      auto_upload: true,
+    };
+    if (forceReupload) {
+      requestBody.skip_duplicates = false;
+    }
 
-    initializeAnalysisTableFromPaths(state.scanFilePaths);
-    connectAnalysisProgressStream(data.job_id);
+    const data = await apiPost('/api/upload/bulk-analyze', requestBody);
+
+    state.currentJobId = data.job_id;
+    setText('files-total', data.total_files);
+
+    connectCombinedProgressStream(data.job_id);
   } catch (error) {
     showNotification(/** @type {Error} */ (error).message, 'error');
-    if (startBtn) {
-      startBtn.disabled = false;
-      startBtn.textContent = 'Validate Files';
+  }
+}
+
+/**
+ * Render the sortable file table in the folder browser.
+ */
+function renderBrowserFileTable() {
+  const tbody = document.getElementById('file-table-body');
+  if (!tbody || !state.browserFiles) return;
+
+  const { column, ascending } = state.browserFileSortConfig;
+
+  const sorted = [...state.browserFiles].sort((a, b) => {
+    let cmp = 0;
+    if (column === 'name') {
+      cmp = a.name.localeCompare(b.name);
+    } else if (column === 'mtime') {
+      cmp = (a.mtime || 0) - (b.mtime || 0);
+    } else if (column === 'size') {
+      cmp = a.size - b.size;
     }
+    return ascending ? cmp : -cmp;
+  });
+
+  tbody.innerHTML = sorted
+    .map(
+      (/** @type {{ name: string, size: number, mtime: number }} */ file) => `
+          <tr class="hover:bg-gray-50">
+            <td class="px-6 py-2">
+              <div class="flex items-center">
+                ${fileIcon('h-4 w-4 text-gray-400 mr-2 flex-shrink-0')}
+                <span class="text-sm text-gray-600 truncate">${file.name}</span>
+              </div>
+            </td>
+            <td class="px-4 py-2 text-sm text-gray-500 whitespace-nowrap">${formatMtime(file.mtime)}</td>
+            <td class="px-4 py-2 text-sm text-gray-500 text-right whitespace-nowrap">${formatBytes(file.size)}</td>
+          </tr>
+        `,
+    )
+    .join('');
+
+  // Update sort indicators
+  updateSortIndicators('[data-file-sort]', '.file-sort-indicator', 'fileSort', column, ascending);
+}
+
+/**
+ * Sort the browser file table by column.
+ * @param {string} column
+ */
+function sortBrowserFileTable(column) {
+  if (!state.browserFileSortConfig) {
+    state.browserFileSortConfig = { column, ascending: true };
+  } else {
+    toggleSort(state.browserFileSortConfig, column);
   }
+  renderBrowserFileTable();
+}
+
+/**
+ * Initialize the upload file list with queued status.
+ * @param {string[]} filePaths
+ */
+function initUploadFileList(filePaths) {
+  const listEl = document.getElementById('upload-file-list');
+  if (!listEl) return;
+
+  const total = filePaths.length;
+  listEl.innerHTML = filePaths
+    .map((path, index) => {
+      const filename = path.split('/').pop() || path;
+      return `
+        <div class="px-6 py-3 flex items-center justify-between" data-upload-file="${filename}">
+            <div class="flex items-center space-x-3">
+                <div class="h-5 w-5 text-gray-400">
+                    <svg class="h-5 w-5 animate-pulse" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+                    </svg>
+                </div>
+                <span class="text-sm text-gray-900">${filename}</span>
+            </div>
+            <span data-queue-label class="text-xs text-gray-500">Queued (${index + 1} of ${total})</span>
+        </div>
+      `;
+    })
+    .join('');
 }

From 1f660c77ba5a65fccd32e87f3cd06784dfa11695 Mon Sep 17 00:00:00 2001
From: "Simms, Andrew" <Andrew.Simms@nrel.gov>
Date: Sun, 8 Feb 2026 10:52:26 -0700
Subject: [PATCH 32/44] JS: Leverage new modules in settings to clean up

---
 app/static/js/modules/settings.js | 326 ++++++++++++------------------
 1 file changed, 125 insertions(+), 201 deletions(-)

diff --git a/app/static/js/modules/settings.js b/app/static/js/modules/settings.js
index c26ec8b..06c3ea5 100644
--- a/app/static/js/modules/settings.js
+++ b/app/static/js/modules/settings.js
@@ -1,8 +1,10 @@
-import state from './state.js';
+import { apiGet, apiPost, apiPut } from './api.js';
+import { appendText, setText, showEl, withLoadingButton } from './dom.js';
+import { showNotification } from './notify.js';
 /**
  * Settings page functionality.
  */
-import { showNotification } from './utils.js';
+import state from './state.js';
 
 const AWS_REGION_OPTIONS = new Set([
   'us-west-2',
@@ -90,8 +92,7 @@ export function initSettings() {
 
 async function loadCurrentSettings() {
   try {
-    const response = await fetch('/api/settings');
-    const settings = await response.json();
+    const settings = await apiGet('/api/settings');
 
     setAwsRegion(settings.aws_region || 'us-west-2');
 
@@ -111,8 +112,7 @@ async function loadCurrentSettings() {
 
 async function loadAwsProfiles() {
   try {
-    const response = await fetch('/api/settings/profiles');
-    const data = await response.json();
+    const data = await apiGet('/api/settings/profiles');
 
     const select = /** @type {HTMLSelectElement | null} */ (document.getElementById('aws-profile'));
     if (!select) return;
@@ -131,29 +131,18 @@ async function loadAwsProfiles() {
 
 async function loadVersionInfo() {
   try {
-    const response = await fetch('/api/settings/version');
-    const data = await response.json();
-
-    const gitBranch = document.getElementById('git-branch');
-    if (gitBranch) gitBranch.textContent = data.branch || '-';
-
-    const gitCommit = document.getElementById('git-commit');
-    if (gitCommit) gitCommit.textContent = data.commit || '-';
-
-    const gitDate = document.getElementById('git-date');
-    if (gitDate) gitDate.textContent = data.last_updated || '-';
+    const data = await apiGet('/api/settings/version');
 
-    const pkgVersion = document.getElementById('pkg-version');
-    if (pkgVersion) pkgVersion.textContent = data.version || '-';
+    setText('git-branch', data.branch || '-');
+    setText('git-commit', data.commit || '-');
+    setText('git-date', data.last_updated || '-');
+    setText('pkg-version', data.version || '-');
 
-    const versionInfo = document.getElementById('version-info');
-    if (versionInfo) {
-      let versionText = data.version || '0.0.0';
-      if (data.commit) {
-        versionText += ` (${data.commit})`;
-      }
-      versionInfo.textContent = versionText;
+    let versionText = data.version || '0.0.0';
+    if (data.commit) {
+      versionText += ` (${data.commit})`;
     }
+    setText('version-info', versionText);
   } catch (error) {
     console.error('Failed to load version info:', error);
   }
@@ -170,17 +159,7 @@ async function saveSettings() {
   };
 
   try {
-    const response = await fetch('/api/settings', {
-      method: 'PUT',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify(settings),
-    });
-
-    if (!response.ok) {
-      const data = await response.json();
-      throw new Error(data.error || 'Failed to save settings');
-    }
-
+    await apiPut('/api/settings', settings);
     showNotification('Settings saved successfully', 'success');
   } catch (error) {
     showNotification(/** @type {Error} */ (error).message, 'error');
@@ -194,8 +173,6 @@ async function testConnection() {
   const status = document.getElementById('connection-status');
   if (!btn || !status) return;
 
-  btn.disabled = true;
-  btn.textContent = 'Testing...';
   status.textContent = 'Testing connection...';
   status.className = 'mt-1 text-sm text-gray-500';
 
@@ -205,29 +182,16 @@ async function testConnection() {
     s3_bucket: /** @type {HTMLInputElement} */ (document.getElementById('s3-bucket'))?.value,
   };
 
-  try {
-    const response = await fetch('/api/settings/validate', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify(settings),
-    });
-
-    const data = await response.json();
-
-    if (data.success) {
-      status.textContent = data.message;
-      status.className = 'mt-1 text-sm text-green-600';
-    } else {
-      status.textContent = data.error;
+  await withLoadingButton(btn, 'Testing...', async () => {
+    try {
+      const data = await apiPost('/api/settings/validate', settings);
+      status.textContent = data.success ? data.message : data.error;
+      status.className = `mt-1 text-sm ${data.success ? 'text-green-600' : 'text-red-600'}`;
+    } catch (error) {
+      status.textContent = /** @type {Error} */ (error).message;
       status.className = 'mt-1 text-sm text-red-600';
     }
-  } catch (error) {
-    status.textContent = /** @type {Error} */ (error).message;
-    status.className = 'mt-1 text-sm text-red-600';
-  }
-
-  btn.disabled = false;
-  btn.textContent = 'Test Connection';
+  });
 }
 
 async function checkForUpdates() {
@@ -240,94 +204,82 @@ async function checkForUpdates() {
   );
   if (!btn || !status) return;
 
-  btn.disabled = true;
-  btn.textContent = 'Checking...';
-
-  try {
-    const response = await fetch('/api/settings/check-updates');
-    const data = await response.json();
-
-    if (data.error) {
-      status.textContent = `Error: ${data.error}`;
+  await withLoadingButton(btn, 'Checking...', async () => {
+    try {
+      const data = await apiGet('/api/settings/check-updates');
+
+      if (data.error) {
+        status.textContent = `Error: ${data.error}`;
+        status.className = 'text-sm text-red-600';
+      } else if (data.updates_available) {
+        status.textContent = 'Updates available! Click "Update Application" to install.';
+        status.className = 'text-sm text-nlr-yellow font-medium';
+        if (updateBtn) updateBtn.disabled = false;
+      } else if (data.up_to_date) {
+        status.textContent = 'Application is up to date.';
+        status.className = 'text-sm text-green-600';
+      } else {
+        status.textContent = 'Could not determine update status.';
+        status.className = 'text-sm text-gray-600';
+      }
+    } catch (error) {
+      status.textContent = /** @type {Error} */ (error).message;
       status.className = 'text-sm text-red-600';
-    } else if (data.updates_available) {
-      status.textContent = 'Updates available! Click "Update Application" to install.';
-      status.className = 'text-sm text-nrel-yellow font-medium';
-      if (updateBtn) updateBtn.disabled = false;
-    } else if (data.up_to_date) {
-      status.textContent = 'Application is up to date.';
-      status.className = 'text-sm text-green-600';
-    } else {
-      status.textContent = 'Could not determine update status.';
-      status.className = 'text-sm text-gray-600';
     }
-  } catch (error) {
-    status.textContent = /** @type {Error} */ (error).message;
-    status.className = 'text-sm text-red-600';
-  }
-
-  btn.disabled = false;
-  btn.textContent = 'Check for Updates';
+  });
 }
 
 async function runUpdate() {
   const btn = /** @type {HTMLButtonElement | null} */ (document.getElementById('run-update-btn'));
   const status = document.getElementById('update-status');
-  const logSection = document.getElementById('update-log');
-  const logOutput = document.getElementById('update-output');
-  if (!btn || !status || !logSection || !logOutput) return;
+  if (!btn || !status) return;
 
-  btn.disabled = true;
-  btn.textContent = 'Updating...';
   status.textContent = 'Running update...';
+  showEl('update-log');
+  setText('update-output', 'Starting update...\n');
 
-  logSection.classList.remove('hidden');
-  logOutput.textContent = 'Starting update...\n';
+  await withLoadingButton(btn, 'Updating...', async () => {
+    try {
+      const data = await apiPost('/api/settings/update');
 
-  try {
-    const response = await fetch('/api/settings/update', { method: 'POST' });
-    const data = await response.json();
+      let output = '';
 
-    let output = '';
+      if (data.results.git_pull) {
+        output += '=== Git Pull ===\n';
+        output += data.results.git_pull.success ? '[SUCCESS]\n' : '[FAILED]\n';
+        output += `${data.results.git_pull.output}\n\n`;
+      }
 
-    if (data.results.git_pull) {
-      output += '=== Git Pull ===\n';
-      output += data.results.git_pull.success ? '[SUCCESS]\n' : '[FAILED]\n';
-      output += `${data.results.git_pull.output}\n\n`;
-    }
+      if (data.results.pip_install) {
+        output += '=== Pip Install ===\n';
+        output += data.results.pip_install.success ? '[SUCCESS]\n' : '[FAILED]\n';
+        output += `${data.results.pip_install.output}\n\n`;
+      }
 
-    if (data.results.pip_install) {
-      output += '=== Pip Install ===\n';
-      output += data.results.pip_install.success ? '[SUCCESS]\n' : '[FAILED]\n';
-      output += `${data.results.pip_install.output}\n\n`;
-    }
+      if (data.results.modaq_toolkit) {
+        output += '=== MODAQ Toolkit Update ===\n';
+        output += data.results.modaq_toolkit.success ? '[SUCCESS]\n' : '[FAILED]\n';
+        output += `${data.results.modaq_toolkit.output}\n`;
+      }
 
-    if (data.results.modaq_toolkit) {
-      output += '=== MODAQ Toolkit Update ===\n';
-      output += data.results.modaq_toolkit.success ? '[SUCCESS]\n' : '[FAILED]\n';
-      output += `${data.results.modaq_toolkit.output}\n`;
-    }
+      setText('update-output', output);
 
-    logOutput.textContent = output;
+      if (data.success) {
+        status.textContent = 'Update completed! Restart the application to apply changes.';
+        status.className = 'text-sm text-green-600 font-medium';
+        showNotification('Update completed! Please restart the application.', 'success');
+      } else {
+        status.textContent = 'Update completed with some errors. Check the log below.';
+        status.className = 'text-sm text-yellow-600';
+      }
 
-    if (data.success) {
-      status.textContent = 'Update completed! Restart the application to apply changes.';
-      status.className = 'text-sm text-green-600 font-medium';
-      showNotification('Update completed! Please restart the application.', 'success');
-    } else {
-      status.textContent = 'Update completed with some errors. Check the log below.';
-      status.className = 'text-sm text-yellow-600';
+      loadVersionInfo();
+    } catch (error) {
+      status.textContent = /** @type {Error} */ (error).message;
+      status.className = 'text-sm text-red-600';
+      appendText('update-output', `\nError: ${/** @type {Error} */ (error).message}`);
     }
-
-    loadVersionInfo();
-  } catch (error) {
-    status.textContent = /** @type {Error} */ (error).message;
-    status.className = 'text-sm text-red-600';
-    logOutput.textContent += `\nError: ${/** @type {Error} */ (error).message}`;
-  }
-
-  btn.disabled = false;
-  btn.textContent = 'Update Application';
+  });
 }
 
 async function resetSettings() {
@@ -336,21 +288,13 @@ async function resetSettings() {
   }
 
   try {
-    const response = await fetch('/api/settings', {
-      method: 'PUT',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({
-        aws_profile: 'default',
-        aws_region: 'us-west-2',
-        s3_bucket: '',
-        default_upload_folder: '',
-      }),
+    await apiPut('/api/settings', {
+      aws_profile: 'default',
+      aws_region: 'us-west-2',
+      s3_bucket: '',
+      default_upload_folder: '',
     });
 
-    if (!response.ok) {
-      throw new Error('Failed to reset settings');
-    }
-
     loadCurrentSettings();
     showNotification('Settings reset to defaults', 'success');
   } catch (error) {
@@ -377,29 +321,19 @@ function clearBrowserCache() {
 
 async function loadCacheStats() {
   try {
-    const response = await fetch('/api/settings/cache/stats');
-    const data = await response.json();
+    const data = await apiGet('/api/settings/cache/stats');
 
     if (data.success && data.stats) {
       const stats = data.stats;
 
-      const cacheTotal = document.getElementById('cache-total');
-      if (cacheTotal) cacheTotal.textContent = String(stats.total_entries || 0);
-
-      const cacheExists = document.getElementById('cache-exists');
-      if (cacheExists) cacheExists.textContent = String(stats.exists_count || 0);
+      setText('cache-total', stats.total_entries || 0);
+      setText('cache-exists', stats.exists_count || 0);
+      setText('cache-deleted', stats.not_exists_count || 0);
 
-      const cacheDeleted = document.getElementById('cache-deleted');
-      if (cacheDeleted) cacheDeleted.textContent = String(stats.not_exists_count || 0);
-
-      const cacheLastSync = document.getElementById('cache-last-sync');
-      if (cacheLastSync) {
-        if (stats.last_full_sync) {
-          const syncDate = new Date(stats.last_full_sync);
-          cacheLastSync.textContent = syncDate.toLocaleString();
-        } else {
-          cacheLastSync.textContent = 'Never';
-        }
+      if (stats.last_full_sync) {
+        setText('cache-last-sync', new Date(stats.last_full_sync).toLocaleString());
+      } else {
+        setText('cache-last-sync', 'Never');
       }
     }
   } catch (error) {
@@ -412,34 +346,30 @@ async function syncCacheWithAws() {
   const status = document.getElementById('sync-status');
   if (!btn || !status) return;
 
-  btn.disabled = true;
-  btn.textContent = 'Syncing...';
   status.classList.remove('hidden');
   status.textContent = 'Fetching file list from S3...';
   status.className = 'mt-2 text-sm text-gray-600';
 
-  try {
-    const response = await fetch('/api/settings/cache/sync', { method: 'POST' });
-    const data = await response.json();
-
-    if (data.success) {
-      status.textContent = data.message;
-      status.className = 'mt-2 text-sm text-green-600';
-      showNotification(data.message, 'success');
-      loadCacheStats();
-    } else {
-      status.textContent = `Error: ${data.error}`;
+  await withLoadingButton(btn, 'Syncing...', async () => {
+    try {
+      const data = await apiPost('/api/settings/cache/sync');
+
+      if (data.success) {
+        status.textContent = data.message;
+        status.className = 'mt-2 text-sm text-green-600';
+        showNotification(data.message, 'success');
+        loadCacheStats();
+      } else {
+        status.textContent = `Error: ${data.error}`;
+        status.className = 'mt-2 text-sm text-red-600';
+        showNotification(data.error, 'error');
+      }
+    } catch (error) {
+      status.textContent = `Error: ${/** @type {Error} */ (error).message}`;
       status.className = 'mt-2 text-sm text-red-600';
-      showNotification(data.error, 'error');
+      showNotification(/** @type {Error} */ (error).message, 'error');
     }
-  } catch (error) {
-    status.textContent = `Error: ${/** @type {Error} */ (error).message}`;
-    status.className = 'mt-2 text-sm text-red-600';
-    showNotification(/** @type {Error} */ (error).message, 'error');
-  }
-
-  btn.disabled = false;
-  btn.textContent = 'Sync Cache with AWS';
+  });
 }
 
 async function invalidateUploadCache() {
@@ -454,25 +384,19 @@ async function invalidateUploadCache() {
   const btn = /** @type {HTMLButtonElement | null} */ (
     document.getElementById('invalidate-cache-btn')
   );
-  if (!btn) return;
-
-  btn.disabled = true;
-  btn.textContent = 'Clearing...';
 
-  try {
-    const response = await fetch('/api/settings/cache/invalidate', { method: 'POST' });
-    const data = await response.json();
+  await withLoadingButton(btn, 'Clearing...', async () => {
+    try {
+      const data = await apiPost('/api/settings/cache/invalidate');
 
-    if (data.success) {
-      showNotification(data.message, 'success');
-      loadCacheStats();
-    } else {
-      showNotification(data.error || 'Failed to clear cache', 'error');
+      if (data.success) {
+        showNotification(data.message, 'success');
+        loadCacheStats();
+      } else {
+        showNotification(data.error || 'Failed to clear cache', 'error');
+      }
+    } catch (error) {
+      showNotification(/** @type {Error} */ (error).message, 'error');
     }
-  } catch (error) {
-    showNotification(/** @type {Error} */ (error).message, 'error');
-  }
-
-  btn.disabled = false;
-  btn.textContent = 'Clear Upload Cache';
+  });
 }

From 652c1ec2bd34ad4809578a64da2d113ab3645ad3 Mon Sep 17 00:00:00 2001
From: "Simms, Andrew" <Andrew.Simms@nrel.gov>
Date: Sun, 8 Feb 2026 10:52:49 -0700
Subject: [PATCH 33/44] JS: Leverage new modules in stepper

---
 app/static/js/modules/stepper.js | 32 ++++++++++----------------------
 1 file changed, 10 insertions(+), 22 deletions(-)

diff --git a/app/static/js/modules/stepper.js b/app/static/js/modules/stepper.js
index 93b9b1b..bce8cdd 100644
--- a/app/static/js/modules/stepper.js
+++ b/app/static/js/modules/stepper.js
@@ -1,24 +1,20 @@
 /**
  * Upload step indicator management.
  */
+import { setText } from './dom.js';
+import { showNotification } from './notify.js';
 import state from './state.js';
-import { showNotification } from './utils.js';
 
 export const UPLOAD_STEPS = {
   1: { name: 'Select', description: 'Select files or a folder to upload' },
   2: {
     name: 'Review',
-    description:
-      'Review files found - click Validate to continue, or Back to select different files',
+    description: 'Review files found - click Continue to upload, or Back to select different files',
   },
-  3: { name: 'Validate', description: 'Extracting timestamps and checking for duplicates...' },
-  4: { name: 'Upload', description: 'Uploading files to S3...' },
-  5: { name: 'Complete', description: 'Upload complete!' },
+  3: { name: 'Upload', description: 'Validating and uploading files...' },
+  4: { name: 'Complete', description: 'Upload complete!' },
 };
 
-export const STEP_3_VALIDATING = 'Extracting timestamps and checking for duplicates...';
-export const STEP_3_VALIDATED = 'Validation complete - review results and click Upload Files';
-
 /**
  * Set the current step in the upload flow.
  * @param {number} step
@@ -28,7 +24,7 @@ export function setUploadStep(step) {
   const stepsContainer = document.getElementById('upload-steps');
   if (!stepsContainer) return;
 
-  for (let i = 1; i <= 5; i++) {
+  for (let i = 1; i <= 4; i++) {
     const stepEl = stepsContainer.querySelector(`[data-step="${i}"]`);
     if (!stepEl) continue;
 
@@ -47,9 +43,8 @@ export function setUploadStep(step) {
       index < step - 1 ? '#5D9732' : '#D1D5DB';
   });
 
-  const descriptionEl = document.getElementById('step-description');
-  if (descriptionEl && UPLOAD_STEPS[step]) {
-    descriptionEl.textContent = UPLOAD_STEPS[step].description;
+  if (UPLOAD_STEPS[step]) {
+    setText('step-description', UPLOAD_STEPS[step].description);
   }
 }
 
@@ -76,20 +71,13 @@ export function hideUploadSteps() {
 export async function goToStep(targetStep) {
   if (targetStep >= state.currentStep) return;
 
-  if (targetStep === 1 && state.currentStep <= 3) {
-    const { resetUpload } = await import('./upload-control.js');
-    resetUpload();
-    return;
-  }
-
-  if (targetStep === 2 && state.currentStep === 3) {
+  if (targetStep === 1 && state.currentStep <= 2) {
     const { resetUpload } = await import('./upload-control.js');
-    showNotification('Going back to file selection', 'info');
     resetUpload();
     return;
   }
 
-  if (state.currentStep >= 4) {
+  if (state.currentStep >= 3) {
     showNotification('Cannot go back during or after upload', 'error');
   }
 }

From eb7be120a09352c82e6e73ef4004ec3c030847bf Mon Sep 17 00:00:00 2001
From: "Simms, Andrew" <Andrew.Simms@nrel.gov>
Date: Sun, 8 Feb 2026 10:53:31 -0700
Subject: [PATCH 34/44] JS: Leverage new modules in upload-*

---
 app/static/js/modules/upload-control.js |  25 ++-
 app/static/js/modules/upload-exec.js    | 254 ++++++++----------------
 app/static/js/modules/upload-init.js    |  20 +-
 3 files changed, 107 insertions(+), 192 deletions(-)

diff --git a/app/static/js/modules/upload-control.js b/app/static/js/modules/upload-control.js
index e0931ca..62c107e 100644
--- a/app/static/js/modules/upload-control.js
+++ b/app/static/js/modules/upload-control.js
@@ -1,19 +1,18 @@
+import { resetAnalysisState } from './analysis.js';
 /**
  * Cancel and reset operations for uploads.
  */
+import { apiPost } from './api.js';
+import { hideEl, showEl } from './dom.js';
+import { showNotification } from './notify.js';
 import state from './state.js';
 import { hideUploadSteps } from './stepper.js';
-import { showNotification } from './utils.js';
-
-export function cancelAnalysis() {
-  resetUpload();
-}
 
 export async function cancelUpload() {
   if (!state.currentJobId) return;
 
   try {
-    await fetch(`/api/upload/cancel/${state.currentJobId}`, { method: 'POST' });
+    await apiPost(`/api/upload/cancel/${state.currentJobId}`);
     if (state.eventSource) state.eventSource.close();
     showNotification('Upload cancelled', 'info');
   } catch (_error) {
@@ -28,14 +27,18 @@ export function resetUpload() {
     state.eventSource = null;
   }
 
+  resetAnalysisState();
   hideUploadSteps();
 
-  document.getElementById('folder-browser-panel')?.classList.remove('hidden');
-  document.getElementById('analysis-section')?.classList.add('hidden');
-  document.getElementById('progress-section')?.classList.add('hidden');
-  document.getElementById('completion-section')?.classList.add('hidden');
-  document.getElementById('scan-results-section')?.classList.add('hidden');
+  showEl('folder-browser-panel');
+  hideEl('upload-section');
+  hideEl('completion-section');
+  hideEl('scan-results-section');
+  hideEl('confirm-upload-modal');
 
   state.selectedFolderPath = null;
   state.scanFilePaths = [];
+  state.scanFileStatuses = [];
+  state.scanTotalSize = 0;
+  state.scanFolderPath = null;
 }
diff --git a/app/static/js/modules/upload-exec.js b/app/static/js/modules/upload-exec.js
index dce318b..a164da9 100644
--- a/app/static/js/modules/upload-exec.js
+++ b/app/static/js/modules/upload-exec.js
@@ -1,198 +1,69 @@
 /**
- * Upload execution: start upload, SSE progress tracking, completion summary.
+ * Upload execution: progress tracking and completion summary.
  */
-import state from './state.js';
+import { hideEl, setText, showEl } from './dom.js';
+import { formatDuration, formatEta } from './formatters.js';
+import { fileIcon } from './icons.js';
+import { showNotification } from './notify.js';
 import { setUploadStep } from './stepper.js';
-import { formatDuration, formatEta, showNotification } from './utils.js';
 
-export async function startUpload() {
-  if (!state.currentJobId) return;
-
-  const skipDuplicatesEl = /** @type {HTMLInputElement | null} */ (
-    document.getElementById('skip-duplicates')
-  );
-  const skipDuplicates = skipDuplicatesEl?.checked ?? true;
-
-  setUploadStep(4);
-
-  document.getElementById('analysis-section')?.classList.add('hidden');
-  document.getElementById('progress-section')?.classList.remove('hidden');
-
-  try {
-    const response = await fetch(`/api/upload/start/${state.currentJobId}`, {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ skip_duplicates: skipDuplicates }),
-    });
-
-    if (!response.ok) {
-      const data = await response.json();
-      throw new Error(data.error || 'Failed to start upload');
-    }
-
-    connectProgressStream();
-  } catch (error) {
-    showNotification(/** @type {Error} */ (error).message, 'error');
-  }
-}
-
-export function connectProgressStream() {
-  if (state.eventSource) {
-    state.eventSource.close();
-  }
-
-  state.eventSource = new EventSource(`/api/upload/progress/${state.currentJobId}`);
-
-  state.eventSource.onmessage = (event) => {
-    const data = JSON.parse(event.data);
-
-    if (data.error) {
-      showNotification(data.error, 'error');
-      state.eventSource?.close();
-      return;
-    }
-
-    updateProgressUI(data);
-
-    if (['completed', 'failed', 'cancelled'].includes(data.status)) {
-      state.eventSource?.close();
-      showCompletionSummary(data);
-    }
-  };
-
-  state.eventSource.onerror = () => {
-    state.eventSource?.close();
-    showNotification('Connection to server lost', 'error');
-  };
-}
+/** @type {any} */
+let lastCompletedJob = null;
 
 /**
  * @param {any} job
  */
 export function updateProgressUI(job) {
-  const el = (/** @type {string} */ id) => document.getElementById(id);
-
-  const progressPercent = el('progress-percent');
-  if (progressPercent) progressPercent.textContent = job.progress_percent.toFixed(1);
-
-  const progressBar = /** @type {HTMLElement | null} */ (el('progress-bar'));
+  setText('progress-percent', job.progress_percent.toFixed(1));
+  setText('files-completed', job.files_completed);
+  setText('files-total', job.total_files);
+  setText('bytes-uploaded', job.uploaded_bytes_formatted);
+  setText('bytes-total', job.total_bytes_formatted);
+  setText('eta', formatEta(job.eta_seconds));
+
+  const progressBar = /** @type {HTMLElement | null} */ (document.getElementById('progress-bar'));
   if (progressBar) progressBar.style.width = `${job.progress_percent}%`;
-
-  const filesCompleted = el('files-completed');
-  if (filesCompleted) filesCompleted.textContent = job.files_completed;
-
-  const filesTotal = el('files-total');
-  if (filesTotal) filesTotal.textContent = job.total_files;
-
-  const bytesUploaded = el('bytes-uploaded');
-  if (bytesUploaded) bytesUploaded.textContent = job.uploaded_bytes_formatted;
-
-  const bytesTotal = el('bytes-total');
-  if (bytesTotal) bytesTotal.textContent = job.total_bytes_formatted;
-
-  const eta = el('eta');
-  if (eta) eta.textContent = formatEta(job.eta_seconds);
-
-  const progressList = el('progress-list');
-  if (progressList) {
-    progressList.innerHTML = job.files
-      .map((/** @type {any} */ file) => {
-        const statusIcon =
-          file.status === 'completed'
-            ? '<svg class="h-5 w-5 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg>'
-            : file.status === 'failed'
-              ? '<svg class="h-5 w-5 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>'
-              : file.status === 'skipped'
-                ? '<svg class="h-5 w-5 text-yellow-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 9l3 3m0 0l-3 3m3-3H8m13 0a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>'
-                : file.status === 'uploading'
-                  ? '<svg class="spinner h-5 w-5 text-nrel-blue" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>'
-                  : '<div class="h-5 w-5"></div>';
-
-        return `
-                <div class="px-6 py-3 flex items-center justify-between">
-                    <div class="flex items-center space-x-3">
-                        ${statusIcon}
-                        <span class="text-sm text-gray-900">${file.filename}</span>
-                    </div>
-                    <div class="flex items-center space-x-4">
-                        <span class="text-sm text-gray-500">${file.file_size_formatted}</span>
-                        ${
-                          file.status === 'uploading'
-                            ? `
-                            <div class="w-24 bg-gray-200 rounded-full h-2">
-                                <div class="bg-nrel-blue h-2 rounded-full" style="width: ${file.progress_percent}%"></div>
-                            </div>
-                            <span class="text-sm text-gray-500 w-12">${file.progress_percent.toFixed(0)}%</span>
-                        `
-                            : ''
-                        }
-                    </div>
-                </div>
-            `;
-      })
-      .join('');
-  }
 }
 
 /**
  * @param {any} job
  */
 export function showCompletionSummary(job) {
-  setUploadStep(5);
+  lastCompletedJob = job;
+  setUploadStep(4);
 
-  document.getElementById('progress-section')?.classList.add('hidden');
-  document.getElementById('completion-section')?.classList.remove('hidden');
+  hideEl('upload-section');
+  showEl('completion-section');
 
   const completed = job.files.filter((/** @type {any} */ f) => f.status === 'completed').length;
   const skipped = job.files.filter((/** @type {any} */ f) => f.status === 'skipped').length;
   const failed = job.files.filter((/** @type {any} */ f) => f.status === 'failed').length;
 
-  const el = (/** @type {string} */ id) => document.getElementById(id);
-
-  const completedCount = el('completed-count');
-  if (completedCount) completedCount.textContent = String(completed);
-
-  const skippedCount = el('skipped-count');
-  if (skippedCount) skippedCount.textContent = String(skipped);
-
-  const failedCount = el('failed-count');
-  if (failedCount) failedCount.textContent = String(failed);
-
-  const totalUploadedSize = el('total-uploaded-size');
-  if (totalUploadedSize) {
-    totalUploadedSize.textContent = job.successfully_uploaded_bytes_formatted || '-';
-  }
-
-  const totalUploadTime = el('total-upload-time');
-  if (totalUploadTime) {
-    totalUploadTime.textContent = job.total_upload_duration_formatted || '-';
-  }
-
-  const avgUploadSpeed = el('avg-upload-speed');
-  if (avgUploadSpeed) {
-    avgUploadSpeed.textContent = job.average_upload_speed_mbps
-      ? `${job.average_upload_speed_mbps} Mbps`
-      : '-';
-  }
+  setText('completed-count', completed);
+  setText('skipped-count', skipped);
+  setText('failed-count', failed);
+  setText('total-uploaded-size', job.successfully_uploaded_bytes_formatted || '-');
+  setText('total-upload-time', job.total_upload_duration_formatted || '-');
+  setText(
+    'avg-upload-speed',
+    job.average_upload_speed_mbps ? `${job.average_upload_speed_mbps} Mbps` : '-',
+  );
 
   const uploadedFiles = job.files.filter(
     (/** @type {any} */ f) => f.status === 'completed' && f.upload_duration_seconds,
   );
-  const avgFileTime = el('avg-file-time');
-  if (avgFileTime) {
-    if (uploadedFiles.length > 0) {
-      const avgSeconds =
-        uploadedFiles.reduce(
-          (/** @type {number} */ sum, /** @type {any} */ f) => sum + f.upload_duration_seconds,
-          0,
-        ) / uploadedFiles.length;
-      avgFileTime.textContent = formatDuration(avgSeconds);
-    } else {
-      avgFileTime.textContent = '-';
-    }
+  if (uploadedFiles.length > 0) {
+    const avgSeconds =
+      uploadedFiles.reduce(
+        (/** @type {number} */ sum, /** @type {any} */ f) => sum + f.upload_duration_seconds,
+        0,
+      ) / uploadedFiles.length;
+    setText('avg-file-time', formatDuration(avgSeconds));
+  } else {
+    setText('avg-file-time', '-');
   }
 
-  const tbody = el('completion-file-list');
+  const tbody = document.getElementById('completion-file-list');
   if (tbody) {
     tbody.innerHTML = job.files
       .map((/** @type {any} */ file) => {
@@ -221,13 +92,11 @@ export function showCompletionSummary(job) {
                 <tr>
                     <td class="px-4 py-3">
                         <div class="flex items-center">
-                            <svg class="h-4 w-4 text-gray-400 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                      d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
-                            </svg>
+                            ${fileIcon('h-4 w-4 text-gray-400 mr-2')}
                             <span class="text-sm text-gray-900 truncate" title="${file.filename}">${file.filename}</span>
                         </div>
                     </td>
+                    <td class="px-4 py-3 text-sm text-gray-500 truncate" title="${file.s3_path || ''}">${file.s3_path || '-'}</td>
                     <td class="px-4 py-3 text-sm text-gray-500">${file.file_size_formatted}</td>
                     <td class="px-4 py-3 text-sm text-gray-500">${duration}</td>
                     <td class="px-4 py-3 text-sm text-gray-500">${speed}</td>
@@ -246,3 +115,46 @@ export function showCompletionSummary(job) {
     showNotification(`Upload completed with ${failed} failed files`, 'error');
   }
 }
+
+/**
+ * Download the upload summary as a CSV file.
+ */
+export function downloadSummaryCSV() {
+  if (!lastCompletedJob || !lastCompletedJob.files) {
+    showNotification('No upload data available', 'error');
+    return;
+  }
+
+  const headers = ['Filename', 'Size', 'S3 Path', 'Status', 'Duration', 'Speed'];
+  const rows = lastCompletedJob.files.map((/** @type {any} */ file) => {
+    const duration = file.upload_duration_seconds
+      ? formatDuration(file.upload_duration_seconds)
+      : '';
+    const speed = file.upload_speed_mbps ? `${file.upload_speed_mbps} Mbps` : '';
+    return [
+      file.filename,
+      file.file_size_formatted || '',
+      file.s3_path || '',
+      file.status,
+      duration,
+      speed,
+    ];
+  });
+
+  const csvContent = [
+    headers.join(','),
+    ...rows.map((/** @type {string[]} */ row) =>
+      row.map((/** @type {string} */ cell) => `"${String(cell).replace(/"/g, '""')}"`).join(','),
+    ),
+  ].join('\n');
+
+  const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
+  const url = URL.createObjectURL(blob);
+  const link = document.createElement('a');
+  link.href = url;
+  const now = new Date();
+  const pad = (/** @type {number} */ n) => String(n).padStart(2, '0');
+  link.download = `upload-summary-${now.toISOString().slice(0, 10)}-${pad(now.getHours())}${pad(now.getMinutes())}.csv`;
+  link.click();
+  URL.revokeObjectURL(url);
+}
diff --git a/app/static/js/modules/upload-init.js b/app/static/js/modules/upload-init.js
index b69ac7c..f952c20 100644
--- a/app/static/js/modules/upload-init.js
+++ b/app/static/js/modules/upload-init.js
@@ -1,12 +1,13 @@
-import { applyUploadedFilter, checkForActiveJob } from './analysis.js';
-import { initFolderBrowser, startDirectUpload } from './folder-browser.js';
+import { checkForActiveJob } from './analysis.js';
+import { hideEl, showEl } from './dom.js';
+import { initFolderBrowser, showConfirmModal, startCombinedUpload } from './folder-browser.js';
 /**
  * Upload page initialization and event wiring.
  */
 import state from './state.js';
 import { setUploadStep } from './stepper.js';
-import { cancelAnalysis, cancelUpload, resetUpload } from './upload-control.js';
-import { startUpload } from './upload-exec.js';
+import { cancelUpload, resetUpload } from './upload-control.js';
+import { downloadSummaryCSV } from './upload-exec.js';
 
 export function initUpload() {
   const panel = document.getElementById('folder-browser-panel');
@@ -17,17 +18,16 @@ export function initUpload() {
   setUploadStep(1);
   checkForActiveJob();
 
-  document.getElementById('upload-btn')?.addEventListener('click', startUpload);
-  document.getElementById('cancel-analyze-btn')?.addEventListener('click', cancelAnalysis);
   document.getElementById('cancel-upload-btn')?.addEventListener('click', cancelUpload);
   document.getElementById('upload-more-btn')?.addEventListener('click', resetUpload);
+  document.getElementById('download-csv-btn')?.addEventListener('click', downloadSummaryCSV);
 
-  document.getElementById('hide-uploaded')?.addEventListener('change', applyUploadedFilter);
+  document.getElementById('continue-upload-btn')?.addEventListener('click', showConfirmModal);
+  document.getElementById('confirm-upload-btn')?.addEventListener('click', startCombinedUpload);
 
-  document.getElementById('start-upload-btn')?.addEventListener('click', startDirectUpload);
   document.getElementById('cancel-scan-btn')?.addEventListener('click', () => {
-    document.getElementById('scan-results-section')?.classList.add('hidden');
-    document.getElementById('folder-browser-panel')?.classList.remove('hidden');
+    hideEl('scan-results-section');
+    showEl('folder-browser-panel');
     state.selectedFolderPath = null;
     setUploadStep(1);
   });

From 50c15688196528722e5dd48a619e2e0f2bf38a4e Mon Sep 17 00:00:00 2001
From: "Simms, Andrew" <Andrew.Simms@nrel.gov>
Date: Sun, 8 Feb 2026 10:53:52 -0700
Subject: [PATCH 35/44] JS: Add new modules to entry point

---
 app/static/js/app.js | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/app/static/js/app.js b/app/static/js/app.js
index fd52f12..08d325b 100644
--- a/app/static/js/app.js
+++ b/app/static/js/app.js
@@ -11,6 +11,7 @@ import {
   loadHeaderVersion,
   openAboutModal,
 } from './modules/about.js';
+import { hideEl } from './modules/dom.js';
 import { goToStep } from './modules/stepper.js';
 
 // Global initialization (runs on every page)
@@ -31,6 +32,8 @@ document.addEventListener('click', (e) => {
   } else if (action === 'go-to-step') {
     const step = Number(/** @type {HTMLElement} */ (target).dataset.step);
     if (step) goToStep(step);
+  } else if (action === 'close-confirm-modal') {
+    hideEl('confirm-upload-modal');
   }
 });
 
@@ -43,4 +46,6 @@ if (page === 'upload') {
   import('./modules/file-browser.js').then(({ initFileBrowser }) => initFileBrowser());
 } else if (page === 'settings') {
   import('./modules/settings.js').then(({ initSettings }) => initSettings());
+} else if (page === 'logs') {
+  import('./modules/logs.js').then(({ initLogs }) => initLogs());
 }

From 4070ab4d8c82bd473919d8c579e881949fa6f903 Mon Sep 17 00:00:00 2001
From: "Simms, Andrew" <Andrew.Simms@nrel.gov>
Date: Sun, 8 Feb 2026 19:33:35 -0700
Subject: [PATCH 36/44] Dev: Fix keyword typo

---
 pyproject.toml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pyproject.toml b/pyproject.toml
index 37fbe21..4f383f1 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -6,7 +6,7 @@ requires-python = ">=3.11"
 authors = [
     { name = "Andrew Simms", email = "andrew.simms@nlr.gov" },
 ]
-keywords = ["modaq", "upload", "s3",  "warine-energy"]
+keywords = ["modaq", "upload", "s3",  "marine-energy"]
 
 [tool.ruff]
 line-length = 100

From 217cc95486dc3e6599bf6b30bb84ac397681fb18 Mon Sep 17 00:00:00 2001
From: "Simms, Andrew" <Andrew.Simms@nrel.gov>
Date: Sun, 8 Feb 2026 19:35:45 -0700
Subject: [PATCH 37/44] Dev: Add pre commit hooks

---
 .pre-commit-config.yaml | 19 +++++++++++++++++++
 requirements-dev.txt    |  1 +
 2 files changed, 20 insertions(+)
 create mode 100644 .pre-commit-config.yaml

diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
new file mode 100644
index 0000000..924d336
--- /dev/null
+++ b/.pre-commit-config.yaml
@@ -0,0 +1,19 @@
+repos:
+  # Standard safety hooks
+  - repo: https://github.com/pre-commit/pre-commit-hooks
+    rev: v5.0.0
+    hooks:
+      - id: detect-private-key
+      - id: check-added-large-files
+        args: [--maxkb=1000]
+      - id: check-merge-conflict
+      - id: check-yaml
+      - id: check-json
+      - id: no-commit-to-branch
+        args: [--branch, main]
+
+  # Comprehensive secret detection
+  - repo: https://github.com/gitleaks/gitleaks
+    rev: v8.21.2
+    hooks:
+      - id: gitleaks
diff --git a/requirements-dev.txt b/requirements-dev.txt
index da94958..1b738ee 100644
--- a/requirements-dev.txt
+++ b/requirements-dev.txt
@@ -4,3 +4,4 @@ moto[s3]>=5.0.0
 mypy>=1.8.0
 boto3-stubs[s3]>=1.34.0
 ruff>=0.2.0
+pre-commit>=3.6.0

From c1837a3556a7409752aac6bf8f40de9752aacdd0 Mon Sep 17 00:00:00 2001
From: "Simms, Andrew" <Andrew.Simms@nrel.gov>
Date: Sun, 8 Feb 2026 19:38:52 -0700
Subject: [PATCH 38/44] Tests: Add initial python tests

---
 tests/__init__.py            |   1 +
 tests/conftest.py            | 118 ++++++++
 tests/test_cache_service.py  | 303 +++++++++++++++++++
 tests/test_log_service.py    | 545 +++++++++++++++++++++++++++++++++++
 tests/test_mcap_service.py   | 207 +++++++++++++
 tests/test_routes.py         | 337 ++++++++++++++++++++++
 tests/test_s3_service.py     | 221 ++++++++++++++
 tests/test_upload_manager.py | 274 ++++++++++++++++++
 8 files changed, 2006 insertions(+)
 create mode 100644 tests/__init__.py
 create mode 100644 tests/conftest.py
 create mode 100644 tests/test_cache_service.py
 create mode 100644 tests/test_log_service.py
 create mode 100644 tests/test_mcap_service.py
 create mode 100644 tests/test_routes.py
 create mode 100644 tests/test_s3_service.py
 create mode 100644 tests/test_upload_manager.py

diff --git a/tests/__init__.py b/tests/__init__.py
new file mode 100644
index 0000000..b7a61b0
--- /dev/null
+++ b/tests/__init__.py
@@ -0,0 +1 @@
+"""Test suite for the modaq_upload application."""
diff --git a/tests/conftest.py b/tests/conftest.py
new file mode 100644
index 0000000..0bf19e8
--- /dev/null
+++ b/tests/conftest.py
@@ -0,0 +1,118 @@
+"""Pytest configuration and fixtures for the modaq_upload tests."""
+
+import json
+import os
+import tempfile
+from collections.abc import Generator
+from pathlib import Path
+from typing import Any
+
+import pytest
+from flask import Flask
+from flask.testing import FlaskClient
+
+from app import create_app
+from app.config import SETTINGS_FILE
+
+
+@pytest.fixture
+def app() -> Generator[Flask, None, None]:
+    """Create application for testing."""
+    # Use a temporary settings file
+    with tempfile.NamedTemporaryFile(mode="w", suffix=".json", delete=False) as f:
+        json.dump(
+            {
+                "aws_profile": "default",
+                "aws_region": "us-west-2",
+                "s3_bucket": "test-bucket",
+                "default_upload_folder": "",
+            },
+            f,
+        )
+        temp_settings = f.name
+
+    # Create the app (settings will be loaded from default)
+    _ = SETTINGS_FILE  # Reference to avoid unused import warning
+
+    app = create_app()
+    app.config["TESTING"] = True
+
+    yield app
+
+    # Cleanup
+    os.unlink(temp_settings)
+
+
+@pytest.fixture
+def client(app: Flask) -> FlaskClient:
+    """Create test client."""
+    return app.test_client()
+
+
+@pytest.fixture
+def temp_mcap_file() -> Generator[Path, None, None]:
+    """Create a temporary file to simulate an MCAP file.
+
+    Note: This creates a dummy file, not a real MCAP file.
+    For real MCAP testing, use actual test files from SURF-WEC data.
+    """
+    with tempfile.NamedTemporaryFile(mode="wb", suffix=".mcap", delete=False) as f:
+        # Write some dummy content
+        f.write(b"MCAP0" + b"\x00" * 100)
+        temp_path = Path(f.name)
+
+    yield temp_path
+
+    # Cleanup
+    if temp_path.exists():
+        temp_path.unlink()
+
+
+@pytest.fixture
+def temp_files() -> Generator[list[Path], None, None]:
+    """Create multiple temporary files for testing."""
+    files: list[Path] = []
+    temp_dir = tempfile.mkdtemp()
+
+    for i in range(3):
+        path = Path(temp_dir) / f"test_file_{i}.mcap"
+        path.write_bytes(b"MCAP0" + b"\x00" * (100 * (i + 1)))
+        files.append(path)
+
+    yield files
+
+    # Cleanup
+    for f in files:
+        if f.exists():
+            f.unlink()
+    os.rmdir(temp_dir)
+
+
+@pytest.fixture
+def mock_settings() -> dict[str, Any]:
+    """Return mock settings for testing."""
+    return {
+        "aws_profile": "test-profile",
+        "aws_region": "us-west-2",
+        "s3_bucket": "test-bucket",
+        "default_upload_folder": "/tmp/test",
+    }
+
+
+@pytest.fixture
+def sample_timestamps() -> list[tuple[int, int, str]]:
+    """Return sample timestamps for S3 path generation testing.
+
+    Returns list of (minute, expected_bucket, description) tuples.
+    """
+    return [
+        (0, 0, "Start of hour"),
+        (5, 0, "Within first bucket"),
+        (10, 10, "Exactly on bucket boundary"),
+        (15, 10, "Within second bucket"),
+        (25, 20, "Within third bucket"),
+        (35, 30, "Within fourth bucket"),
+        (45, 40, "Within fifth bucket"),
+        (55, 50, "Within last bucket"),
+        (59, 50, "End of hour"),
+    ]
diff --git a/tests/test_cache_service.py b/tests/test_cache_service.py
new file mode 100644
index 0000000..bcb418b
--- /dev/null
+++ b/tests/test_cache_service.py
@@ -0,0 +1,303 @@
+"""Tests for the cache service module."""
+
+import tempfile
+from datetime import datetime, timedelta
+from pathlib import Path
+from unittest.mock import MagicMock
+
+import pytest
+
+import app.services.cache_service as cache_module
+from app.services.cache_service import CacheService, get_cache_service
+
+
+@pytest.fixture
+def temp_cache_db(monkeypatch: pytest.MonkeyPatch) -> Path:
+    """Create a temporary cache database file."""
+    with tempfile.NamedTemporaryFile(suffix=".db", delete=False) as f:
+        temp_path = Path(f.name)
+
+    # Patch the CACHE_FILE class attribute
+    monkeypatch.setattr(CacheService, "CACHE_FILE", str(temp_path))
+    # Reset module-level singleton so get_cache_service() creates a fresh instance
+    monkeypatch.setattr(cache_module, "_cache_service", None)
+
+    yield temp_path
+
+    # Cleanup
+    if temp_path.exists():
+        temp_path.unlink()
+
+
+@pytest.fixture
+def cache_service(temp_cache_db: Path) -> CacheService:
+    """Create a CacheService instance with a temp database."""
+    service = CacheService()
+    return service
+
+
+class TestCacheServiceSchema:
+    """Tests for cache database schema."""
+
+    def test_creates_database(self, cache_service: CacheService, temp_cache_db: Path) -> None:
+        """Test that database is created."""
+        assert temp_cache_db.exists()
+
+    def test_creates_s3_files_table(self, cache_service: CacheService) -> None:
+        """Test that s3_files table is created."""
+        conn = cache_service._get_connection()
+        cursor = conn.cursor()
+        cursor.execute("SELECT name FROM sqlite_master WHERE type='table' AND name='s3_files'")
+        result = cursor.fetchone()
+        assert result is not None
+
+    def test_creates_indexes(self, cache_service: CacheService) -> None:
+        """Test that indexes are created."""
+        conn = cache_service._get_connection()
+        cursor = conn.cursor()
+        cursor.execute("SELECT name FROM sqlite_master WHERE type='index'")
+        indexes = [row[0] for row in cursor.fetchall()]
+
+        assert "idx_bucket_path" in indexes
+        assert "idx_bucket" in indexes
+
+
+class TestCheckExistsCached:
+    """Tests for check_exists_cached method."""
+
+    def test_returns_none_for_uncached_path(self, cache_service: CacheService) -> None:
+        """Test that None is returned for paths not in cache."""
+        result = cache_service.check_exists_cached("test-bucket", "path/to/file.mcap")
+        assert result is None
+
+    def test_returns_true_for_existing_file(self, cache_service: CacheService) -> None:
+        """Test that True is returned for cached existing files."""
+        cache_service.update_cache("test-bucket", "path/to/file.mcap", exists=True)
+        result = cache_service.check_exists_cached("test-bucket", "path/to/file.mcap")
+        assert result is True
+
+    def test_returns_false_for_nonexisting_file(self, cache_service: CacheService) -> None:
+        """Test that False is returned for cached non-existing files."""
+        cache_service.update_cache("test-bucket", "path/to/file.mcap", exists=False)
+        result = cache_service.check_exists_cached("test-bucket", "path/to/file.mcap")
+        assert result is False
+
+    def test_returns_none_for_expired_entry(
+        self, cache_service: CacheService, monkeypatch: pytest.MonkeyPatch
+    ) -> None:
+        """Test that None is returned for expired cache entries."""
+        cache_service.update_cache("test-bucket", "path/to/file.mcap", exists=True)
+
+        # Check with very short TTL (entry should be expired)
+        result = cache_service.check_exists_cached("test-bucket", "path/to/file.mcap", ttl=0)
+        # The entry was just created, so with TTL=0 it might still be valid
+        # Use a negative timestamp test instead
+        conn = cache_service._get_connection()
+        cursor = conn.cursor()
+        old_time = (datetime.now() - timedelta(hours=2)).isoformat()
+        cursor.execute(
+            "UPDATE s3_files SET last_verified = ? WHERE bucket = ? AND s3_path = ?",
+            (old_time, "test-bucket", "path/to/file.mcap"),
+        )
+        conn.commit()
+
+        # Now it should be expired with default TTL
+        result = cache_service.check_exists_cached("test-bucket", "path/to/file.mcap")
+        assert result is None
+
+    def test_respects_bucket_scope(self, cache_service: CacheService) -> None:
+        """Test that cache is scoped by bucket."""
+        cache_service.update_cache("bucket-a", "path/file.mcap", exists=True)
+        cache_service.update_cache("bucket-b", "path/file.mcap", exists=False)
+
+        assert cache_service.check_exists_cached("bucket-a", "path/file.mcap") is True
+        assert cache_service.check_exists_cached("bucket-b", "path/file.mcap") is False
+
+
+class TestUpdateCache:
+    """Tests for update_cache method."""
+
+    def test_inserts_new_entry(self, cache_service: CacheService) -> None:
+        """Test inserting a new cache entry."""
+        cache_service.update_cache(
+            "test-bucket",
+            "path/to/file.mcap",
+            exists=True,
+            filename="file.mcap",
+            file_size=1024,
+        )
+
+        conn = cache_service._get_connection()
+        cursor = conn.cursor()
+        cursor.execute(
+            "SELECT * FROM s3_files WHERE bucket = ? AND s3_path = ?",
+            ("test-bucket", "path/to/file.mcap"),
+        )
+        row = cursor.fetchone()
+
+        assert row is not None
+        assert row["file_exists"] == 1
+        assert row["filename"] == "file.mcap"
+        assert row["file_size"] == 1024
+
+    def test_updates_existing_entry(self, cache_service: CacheService) -> None:
+        """Test updating an existing cache entry."""
+        cache_service.update_cache("test-bucket", "path/file.mcap", exists=False)
+        cache_service.update_cache("test-bucket", "path/file.mcap", exists=True)
+
+        result = cache_service.check_exists_cached("test-bucket", "path/file.mcap")
+        assert result is True
+
+
+class TestBulkUpdateCache:
+    """Tests for bulk_update_cache method."""
+
+    def test_bulk_inserts_entries(self, cache_service: CacheService) -> None:
+        """Test bulk inserting cache entries."""
+        entries = [
+            {"s3_path": "path/file1.mcap", "exists": True, "filename": "file1.mcap"},
+            {"s3_path": "path/file2.mcap", "exists": True, "filename": "file2.mcap"},
+            {"s3_path": "path/file3.mcap", "exists": False, "filename": "file3.mcap"},
+        ]
+
+        cache_service.bulk_update_cache("test-bucket", entries)
+
+        assert cache_service.check_exists_cached("test-bucket", "path/file1.mcap") is True
+        assert cache_service.check_exists_cached("test-bucket", "path/file2.mcap") is True
+        assert cache_service.check_exists_cached("test-bucket", "path/file3.mcap") is False
+
+    def test_bulk_handles_empty_list(self, cache_service: CacheService) -> None:
+        """Test bulk update with empty list."""
+        cache_service.bulk_update_cache("test-bucket", [])
+        # Should not raise
+
+
+class TestInvalidateBucket:
+    """Tests for invalidate_bucket method."""
+
+    def test_deletes_all_entries_for_bucket(self, cache_service: CacheService) -> None:
+        """Test that all entries for a bucket are deleted."""
+        cache_service.update_cache("bucket-a", "file1.mcap", exists=True)
+        cache_service.update_cache("bucket-a", "file2.mcap", exists=True)
+        cache_service.update_cache("bucket-b", "file1.mcap", exists=True)
+
+        deleted = cache_service.invalidate_bucket("bucket-a")
+
+        assert deleted == 2
+        assert cache_service.check_exists_cached("bucket-a", "file1.mcap") is None
+        assert cache_service.check_exists_cached("bucket-a", "file2.mcap") is None
+        assert cache_service.check_exists_cached("bucket-b", "file1.mcap") is True
+
+    def test_returns_zero_for_empty_bucket(self, cache_service: CacheService) -> None:
+        """Test that zero is returned for bucket with no entries."""
+        deleted = cache_service.invalidate_bucket("nonexistent-bucket")
+        assert deleted == 0
+
+
+class TestGetCacheStats:
+    """Tests for get_cache_stats method."""
+
+    def test_returns_stats_for_bucket(self, cache_service: CacheService) -> None:
+        """Test getting stats for a specific bucket."""
+        cache_service.update_cache("test-bucket", "file1.mcap", exists=True)
+        cache_service.update_cache("test-bucket", "file2.mcap", exists=True)
+        cache_service.update_cache("test-bucket", "file3.mcap", exists=False)
+
+        stats = cache_service.get_cache_stats("test-bucket")
+
+        assert stats["total_entries"] == 3
+        assert stats["exists_count"] == 2
+        assert stats["not_exists_count"] == 1
+        assert stats["bucket"] == "test-bucket"
+
+    def test_returns_global_stats(self, cache_service: CacheService) -> None:
+        """Test getting stats for all buckets."""
+        cache_service.update_cache("bucket-a", "file1.mcap", exists=True)
+        cache_service.update_cache("bucket-b", "file1.mcap", exists=True)
+
+        stats = cache_service.get_cache_stats()
+
+        assert stats["total_entries"] == 2
+        assert stats["bucket"] is None
+
+    def test_returns_empty_stats(self, cache_service: CacheService) -> None:
+        """Test getting stats with no entries."""
+        stats = cache_service.get_cache_stats("empty-bucket")
+
+        assert stats["total_entries"] == 0
+        assert stats["exists_count"] == 0
+        assert stats["not_exists_count"] == 0
+
+    def test_counts_expired_entries(
+        self, cache_service: CacheService, monkeypatch: pytest.MonkeyPatch
+    ) -> None:
+        """Test that expired entries are counted."""
+        cache_service.update_cache("test-bucket", "file1.mcap", exists=True)
+        cache_service.update_cache("test-bucket", "file2.mcap", exists=True)
+
+        # Make one entry expired
+        conn = cache_service._get_connection()
+        cursor = conn.cursor()
+        old_time = (datetime.now() - timedelta(hours=2)).isoformat()
+        cursor.execute(
+            "UPDATE s3_files SET last_verified = ? WHERE s3_path = ?",
+            (old_time, "file1.mcap"),
+        )
+        conn.commit()
+
+        stats = cache_service.get_cache_stats("test-bucket")
+
+        assert stats["expired_count"] == 1
+
+
+class TestSyncWithS3Prefix:
+    """Tests for sync_with_s3_prefix method."""
+
+    def test_syncs_files_from_s3(self, cache_service: CacheService) -> None:
+        """Test syncing files from S3."""
+        mock_client = MagicMock()
+        mock_paginator = MagicMock()
+        mock_client.get_paginator.return_value = mock_paginator
+        mock_paginator.paginate.return_value = [
+            {
+                "Contents": [
+                    {"Key": "prefix/file1.mcap", "Size": 1000},
+                    {"Key": "prefix/file2.mcap", "Size": 2000},
+                ]
+            }
+        ]
+
+        result = cache_service.sync_with_s3_prefix(mock_client, "test-bucket", "prefix/")
+
+        assert result["success"] is True
+        assert result["files_synced"] == 2
+        assert cache_service.check_exists_cached("test-bucket", "prefix/file1.mcap") is True
+        assert cache_service.check_exists_cached("test-bucket", "prefix/file2.mcap") is True
+
+    def test_handles_s3_error(self, cache_service: CacheService) -> None:
+        """Test handling S3 errors during sync."""
+        mock_client = MagicMock()
+        mock_client.get_paginator.side_effect = Exception("S3 error")
+
+        result = cache_service.sync_with_s3_prefix(mock_client, "test-bucket", "prefix/")
+
+        assert result["success"] is False
+        assert "S3 error" in result["error"]
+
+
+class TestGetCacheServiceSingleton:
+    """Tests for get_cache_service function."""
+
+    def test_returns_same_instance(
+        self, temp_cache_db: Path, monkeypatch: pytest.MonkeyPatch
+    ) -> None:
+        """Test that get_cache_service returns a singleton."""
+        # Reset the global instance
+        import app.services.cache_service as cache_module
+
+        monkeypatch.setattr(cache_module, "_cache_service", None)
+
+        service1 = get_cache_service()
+        service2 = get_cache_service()
+
+        assert service1 is service2
diff --git a/tests/test_log_service.py b/tests/test_log_service.py
new file mode 100644
index 0000000..9f5c264
--- /dev/null
+++ b/tests/test_log_service.py
@@ -0,0 +1,545 @@
+"""Tests for the JSONL log service."""
+
+import csv
+import json
+from datetime import UTC, datetime
+from pathlib import Path
+from typing import Any
+from unittest.mock import MagicMock, patch
+
+import pytest
+
+from app.services.log_service import LogService
+
+
+@pytest.fixture
+def log_service(tmp_path: Path) -> LogService:
+    """Create a log service with a temporary log directory."""
+    # Reset singleton so we get a fresh instance
+    LogService._instance = None
+
+    svc = LogService()
+
+    # Patch settings to use tmp_path as log directory
+    mock_settings = MagicMock()
+    mock_settings.log_directory = tmp_path
+
+    with patch("app.services.log_service.get_settings", return_value=mock_settings):
+        # Prime the service so it uses our tmp_path
+        pass
+
+    # We need the mock active during all calls, so we store it
+    svc._test_settings_mock = mock_settings  # type: ignore[attr-defined]
+    return svc
+
+
+@pytest.fixture
+def _mock_settings(log_service: LogService) -> Any:
+    """Context manager that patches get_settings for the log service."""
+    return patch(
+        "app.services.log_service.get_settings",
+        return_value=log_service._test_settings_mock,  # type: ignore[attr-defined]
+    )
+
+
+def _find_event_files(log_dir: Path) -> list[Path]:
+    """Find all events.jsonl files under the hive-partitioned json/ directory."""
+    json_dir = log_dir / "json"
+    if not json_dir.exists():
+        return []
+    return list(json_dir.rglob("events.jsonl"))
+
+
+class TestLogServiceWrite:
+    """Tests for writing log entries."""
+
+    def test_log_creates_file(self, log_service: LogService, _mock_settings: Any) -> None:
+        """Test that log() creates a JSONL file in hive-partitioned structure."""
+        with _mock_settings:
+            log_service.log("INFO", "app", "test_event", "Test message")
+
+        log_dir: Path = log_service._test_settings_mock.log_directory  # type: ignore[attr-defined]
+        files = _find_event_files(log_dir)
+        assert len(files) == 1
+        assert "json" in str(files[0])
+        assert "year=" in str(files[0])
+
+    def test_log_entry_format(self, log_service: LogService, _mock_settings: Any) -> None:
+        """Test that log entries have the correct JSON schema."""
+        with _mock_settings:
+            log_service.log(
+                "INFO", "upload", "file_uploaded", "Uploaded file.mcap", {"file_size": 1024}
+            )
+
+        log_dir: Path = log_service._test_settings_mock.log_directory  # type: ignore[attr-defined]
+        log_file = _find_event_files(log_dir)[0]
+        line = log_file.read_text().strip()
+        entry = json.loads(line)
+
+        assert "timestamp" in entry
+        assert entry["level"] == "INFO"
+        assert entry["category"] == "upload"
+        assert entry["event"] == "file_uploaded"
+        assert entry["message"] == "Uploaded file.mcap"
+        assert entry["metadata"]["file_size"] == 1024
+
+    def test_info_convenience(self, log_service: LogService, _mock_settings: Any) -> None:
+        """Test info() convenience method."""
+        with _mock_settings:
+            log_service.info("app", "test", "Test info")
+
+        log_dir: Path = log_service._test_settings_mock.log_directory  # type: ignore[attr-defined]
+        log_file = _find_event_files(log_dir)[0]
+        entry = json.loads(log_file.read_text().strip())
+        assert entry["level"] == "INFO"
+
+    def test_warning_convenience(self, log_service: LogService, _mock_settings: Any) -> None:
+        """Test warning() convenience method."""
+        with _mock_settings:
+            log_service.warning("app", "test", "Test warning")
+
+        log_dir: Path = log_service._test_settings_mock.log_directory  # type: ignore[attr-defined]
+        log_file = _find_event_files(log_dir)[0]
+        entry = json.loads(log_file.read_text().strip())
+        assert entry["level"] == "WARNING"
+
+    def test_error_convenience(self, log_service: LogService, _mock_settings: Any) -> None:
+        """Test error() convenience method."""
+        with _mock_settings:
+            log_service.error("app", "test", "Test error")
+
+        log_dir: Path = log_service._test_settings_mock.log_directory  # type: ignore[attr-defined]
+        log_file = _find_event_files(log_dir)[0]
+        entry = json.loads(log_file.read_text().strip())
+        assert entry["level"] == "ERROR"
+
+    def test_multiple_entries_appended(
+        self, log_service: LogService, _mock_settings: Any
+    ) -> None:
+        """Test that multiple log calls append to the same file."""
+        with _mock_settings:
+            log_service.info("app", "event1", "First")
+            log_service.info("app", "event2", "Second")
+            log_service.error("app", "event3", "Third")
+
+        log_dir: Path = log_service._test_settings_mock.log_directory  # type: ignore[attr-defined]
+        log_file = _find_event_files(log_dir)[0]
+        lines = [line for line in log_file.read_text().strip().split("\n") if line]
+        assert len(lines) == 3
+
+    def test_no_metadata_omits_field(
+        self, log_service: LogService, _mock_settings: Any
+    ) -> None:
+        """Test that metadata field is omitted when not provided."""
+        with _mock_settings:
+            log_service.info("app", "test", "No metadata")
+
+        log_dir: Path = log_service._test_settings_mock.log_directory  # type: ignore[attr-defined]
+        log_file = _find_event_files(log_dir)[0]
+        entry = json.loads(log_file.read_text().strip())
+        assert "metadata" not in entry
+
+
+class TestLogServiceRead:
+    """Tests for reading and filtering log entries."""
+
+    def test_read_entries(self, log_service: LogService, _mock_settings: Any) -> None:
+        """Test reading entries returns correct structure."""
+        with _mock_settings:
+            log_service.info("app", "event1", "First")
+            log_service.error("upload", "event2", "Second")
+            result = log_service.read_log_entries()
+
+        assert result["total"] == 2
+        assert len(result["entries"]) == 2
+        assert result["offset"] == 0
+
+    def test_filter_by_level(self, log_service: LogService, _mock_settings: Any) -> None:
+        """Test filtering by level."""
+        with _mock_settings:
+            log_service.info("app", "event1", "Info msg")
+            log_service.error("app", "event2", "Error msg")
+            result = log_service.read_log_entries(level="ERROR")
+
+        assert result["total"] == 1
+        assert result["entries"][0]["level"] == "ERROR"
+
+    def test_filter_by_category(self, log_service: LogService, _mock_settings: Any) -> None:
+        """Test filtering by category."""
+        with _mock_settings:
+            log_service.info("upload", "event1", "Upload msg")
+            log_service.info("settings", "event2", "Settings msg")
+            result = log_service.read_log_entries(category="upload")
+
+        assert result["total"] == 1
+        assert result["entries"][0]["category"] == "upload"
+
+    def test_filter_by_search(self, log_service: LogService, _mock_settings: Any) -> None:
+        """Test full-text search in message field."""
+        with _mock_settings:
+            log_service.info("app", "event1", "Uploaded file.mcap successfully")
+            log_service.info("app", "event2", "Started application")
+            result = log_service.read_log_entries(search="file.mcap")
+
+        assert result["total"] == 1
+
+    def test_pagination(self, log_service: LogService, _mock_settings: Any) -> None:
+        """Test offset/limit pagination."""
+        with _mock_settings:
+            for i in range(5):
+                log_service.info("app", f"event{i}", f"Message {i}")
+            result = log_service.read_log_entries(offset=2, limit=2)
+
+        assert result["total"] == 5
+        assert len(result["entries"]) == 2
+        assert result["offset"] == 2
+
+    def test_read_entries_date_filter_hive(
+        self, log_service: LogService, _mock_settings: Any
+    ) -> None:
+        """Test that date filter constructs the correct hive path."""
+        with _mock_settings:
+            log_service.info("app", "event1", "Today's entry")
+            today = datetime.now(UTC).strftime("%Y-%m-%d")
+            result = log_service.read_log_entries(date=today)
+
+        assert result["total"] == 1
+        assert result["entries"][0]["event"] == "event1"
+
+    def test_read_entries_invalid_date(
+        self, log_service: LogService, _mock_settings: Any
+    ) -> None:
+        """Test that an invalid date returns empty results."""
+        with _mock_settings:
+            result = log_service.read_log_entries(date="not-a-date")
+
+        assert result["total"] == 0
+        assert result["entries"] == []
+
+    def test_list_log_files(self, log_service: LogService, _mock_settings: Any) -> None:
+        """Test listing log files."""
+        with _mock_settings:
+            log_service.info("app", "test", "Entry")
+            files = log_service.list_log_files()
+
+        assert len(files) == 1
+        assert files[0]["filename"].endswith(".jsonl")
+        assert files[0]["size_bytes"] > 0
+        assert files[0]["type"] == "jsonl"
+        assert "relative_path" in files[0]
+
+    def test_list_log_files_includes_csv(
+        self, log_service: LogService, _mock_settings: Any
+    ) -> None:
+        """Test that list_log_files includes both JSONL and CSV files."""
+        log_dir: Path = log_service._test_settings_mock.log_directory  # type: ignore[attr-defined]
+        with _mock_settings:
+            log_service.info("app", "test", "Entry")
+
+            # Manually create a CSV file in the hive structure
+            now = datetime.now(UTC)
+            csv_dir = (
+                log_dir
+                / "csv"
+                / f"year={now.year:04d}"
+                / f"month={now.month:02d}"
+                / f"day={now.day:02d}"
+            )
+            csv_dir.mkdir(parents=True, exist_ok=True)
+            csv_file = csv_dir / "upload-summary-120000-abcd1234.csv"
+            csv_file.write_text("col1,col2\nval1,val2\n")
+
+            files = log_service.list_log_files()
+
+        jsonl_files = [f for f in files if f["type"] == "jsonl"]
+        csv_files = [f for f in files if f["type"] == "csv"]
+        assert len(jsonl_files) >= 1
+        assert len(csv_files) == 1
+        assert csv_files[0]["filename"] == "upload-summary-120000-abcd1234.csv"
+
+
+class TestLogServiceStats:
+    """Tests for log statistics."""
+
+    def test_get_stats(self, log_service: LogService, _mock_settings: Any) -> None:
+        """Test stats aggregation."""
+        with _mock_settings:
+            log_service.info("upload", "event1", "Info 1")
+            log_service.info("upload", "event2", "Info 2")
+            log_service.error("app", "event3", "Error 1")
+            stats = log_service.get_log_stats()
+
+        assert stats["total_entries"] == 3
+        assert stats["level_counts"]["INFO"] == 2
+        assert stats["level_counts"]["ERROR"] == 1
+        assert stats["category_counts"]["upload"] == 2
+        assert stats["category_counts"]["app"] == 1
+        assert stats["file_count"] == 1
+
+    def test_empty_stats(self, log_service: LogService, _mock_settings: Any) -> None:
+        """Test stats with no log files."""
+        with _mock_settings:
+            stats = log_service.get_log_stats()
+
+        assert stats["total_entries"] == 0
+        assert stats["file_count"] == 0
+
+    def test_stats_includes_csv_count(
+        self, log_service: LogService, _mock_settings: Any
+    ) -> None:
+        """Test that stats include csv_count."""
+        with _mock_settings:
+            log_service.info("app", "test", "Entry")
+            stats = log_service.get_log_stats()
+
+        assert "csv_count" in stats
+        assert stats["csv_count"] == 0
+
+
+class TestLogServiceSync:
+    """Tests for S3 sync."""
+
+    def test_sync_uploads_files(self, log_service: LogService, _mock_settings: Any) -> None:
+        """Test that sync uploads JSONL files to S3."""
+        mock_client = MagicMock()
+
+        with _mock_settings:
+            log_service.info("app", "test", "Entry")
+            result = log_service.sync_logs_to_s3(mock_client, "test-bucket")
+
+        assert result["success"] is True
+        # 1 from the test entry + 1 from the sync_completed log inside sync
+        assert result["synced"] >= 1
+        mock_client.upload_file.assert_called()
+
+    def test_sync_skips_unchanged(self, log_service: LogService, _mock_settings: Any) -> None:
+        """Test that sync skips files that haven't changed."""
+        mock_client = MagicMock()
+
+        with _mock_settings:
+            log_service.info("app", "test", "Entry")
+            # First sync
+            log_service.sync_logs_to_s3(mock_client, "test-bucket")
+            mock_client.reset_mock()
+            # Second sync with no new entries — files may have grown due to
+            # the sync_completed log entry written by first sync
+            result = log_service.sync_logs_to_s3(mock_client, "test-bucket")
+
+        # The sync itself writes a log entry, so the file grows.
+        # What matters is the mechanism works (not zero uploads necessarily)
+        assert result["total_files"] >= 1
+
+    def test_sync_uses_relative_hive_paths(
+        self, log_service: LogService, _mock_settings: Any
+    ) -> None:
+        """Test that S3 keys use hive-partitioned relative paths."""
+        mock_client = MagicMock()
+
+        with _mock_settings:
+            log_service.info("app", "test", "Entry")
+            log_service.sync_logs_to_s3(mock_client, "test-bucket", prefix="logs/")
+
+        # Check that S3 keys contain hive partition components
+        calls = mock_client.upload_file.call_args_list
+        assert len(calls) >= 1
+        for call in calls:
+            s3_key = call[0][2]  # Third positional arg is the S3 key
+            assert s3_key.startswith("logs/json/year=")
+            assert "/month=" in s3_key
+            assert "/day=" in s3_key
+
+
+class TestHivePartitioning:
+    """Tests for hive-partitioned directory structure."""
+
+    def test_hive_dir_structure(self, log_service: LogService, _mock_settings: Any) -> None:
+        """Test that _get_hive_dir creates the correct directory path."""
+        log_dir: Path = log_service._test_settings_mock.log_directory  # type: ignore[attr-defined]
+        dt = datetime(2026, 2, 8, 14, 30, 25, tzinfo=UTC)
+
+        with _mock_settings:
+            hive_dir = log_service._get_hive_dir("json", dt)
+
+        assert hive_dir == log_dir / "json" / "year=2026" / "month=02" / "day=08"
+        assert hive_dir.exists()
+
+    def test_hive_dir_csv(self, log_service: LogService, _mock_settings: Any) -> None:
+        """Test hive dir for csv subdirectory."""
+        log_dir: Path = log_service._test_settings_mock.log_directory  # type: ignore[attr-defined]
+        dt = datetime(2025, 12, 31, 23, 59, 0, tzinfo=UTC)
+
+        with _mock_settings:
+            hive_dir = log_service._get_hive_dir("csv", dt)
+
+        assert hive_dir == log_dir / "csv" / "year=2025" / "month=12" / "day=31"
+        assert hive_dir.exists()
+
+    def test_extract_date_from_hive_path(self) -> None:
+        """Test extracting date from hive path."""
+        path = Path("/tmp/logs/json/year=2026/month=02/day=08/events.jsonl")
+        result = LogService._extract_date_from_hive_path(path)
+        assert result == "2026-02-08"
+
+    def test_extract_date_from_non_hive_path(self) -> None:
+        """Test that non-hive paths return None."""
+        path = Path("/tmp/logs/2026-02-08.jsonl")
+        result = LogService._extract_date_from_hive_path(path)
+        assert result is None
+
+    def test_log_writes_to_hive_path(
+        self, log_service: LogService, _mock_settings: Any
+    ) -> None:
+        """Test that log() writes to a hive-partitioned events.jsonl."""
+        log_dir: Path = log_service._test_settings_mock.log_directory  # type: ignore[attr-defined]
+
+        with _mock_settings:
+            log_service.info("app", "test", "Hello")
+
+        # Verify the file exists at the hive path
+        now = datetime.now(UTC)
+        expected_dir = (
+            log_dir
+            / "json"
+            / f"year={now.year:04d}"
+            / f"month={now.month:02d}"
+            / f"day={now.day:02d}"
+        )
+        events_file = expected_dir / "events.jsonl"
+        assert events_file.exists()
+        entry = json.loads(events_file.read_text().strip())
+        assert entry["event"] == "test"
+
+
+class TestJobSaveJsonl:
+    """Tests for per-job JSONL saving."""
+
+    def test_save_job_jsonl_creates_file(
+        self, log_service: LogService, _mock_settings: Any
+    ) -> None:
+        """Test that save_job_jsonl creates a file at the correct hive path."""
+        log_dir: Path = log_service._test_settings_mock.log_directory  # type: ignore[attr-defined]
+        job_id = "a1b2c3d4-5678-9abc-def0-1234567890ab"
+        completed_at = datetime(2026, 2, 8, 14, 30, 25, tzinfo=UTC)
+        job_dict = {"event": "upload_job_completed", "job_id": job_id, "uploaded": 3}
+
+        with _mock_settings:
+            result_path = log_service.save_job_jsonl(job_id, job_dict, completed_at)
+
+        expected_dir = log_dir / "json" / "year=2026" / "month=02" / "day=08"
+        assert result_path == expected_dir / f"{job_id}.jsonl"
+        assert result_path.exists()
+
+        content = json.loads(result_path.read_text().strip())
+        assert content["job_id"] == job_id
+        assert content["uploaded"] == 3
+
+    def test_save_job_jsonl_is_single_line(
+        self, log_service: LogService, _mock_settings: Any
+    ) -> None:
+        """Test that the JSONL file has exactly one line."""
+        job_id = "test-job-id"
+        completed_at = datetime(2026, 1, 15, tzinfo=UTC)
+
+        with _mock_settings:
+            path = log_service.save_job_jsonl(
+                job_id, {"event": "test", "job_id": job_id}, completed_at
+            )
+
+        lines = [ln for ln in path.read_text().split("\n") if ln.strip()]
+        assert len(lines) == 1
+
+
+class TestJobSaveCsv:
+    """Tests for per-job CSV saving."""
+
+    def _make_mock_job(self) -> MagicMock:
+        """Create a mock UploadJob with file states."""
+        mock_file = MagicMock()
+        mock_file.filename = "test.mcap"
+        mock_file.file_size = 1024000
+        mock_file.s3_path = "year=2026/month=02/day=08/hour=14/minute=30/test.mcap"
+        mock_file.status.value = "completed"
+        mock_file.start_time.isoformat.return_value = "2026-02-08T14:30:00+00:00"
+        mock_file.upload_started_at.isoformat.return_value = "2026-02-08T14:30:05+00:00"
+        mock_file.upload_completed_at.isoformat.return_value = "2026-02-08T14:30:15+00:00"
+        mock_file.upload_duration_seconds = 10.0
+        mock_file.is_duplicate = False
+        mock_file.is_valid = True
+        mock_file.error_message = ""
+
+        mock_job = MagicMock()
+        mock_job.files = [mock_file]
+        return mock_job
+
+    def test_save_job_csv_creates_file(
+        self, log_service: LogService, _mock_settings: Any
+    ) -> None:
+        """Test that save_job_csv creates a CSV at the correct hive path."""
+        log_dir: Path = log_service._test_settings_mock.log_directory  # type: ignore[attr-defined]
+        job_id = "a1b2c3d4-5678-9abc-def0-1234567890ab"
+        completed_at = datetime(2026, 2, 8, 14, 30, 25, tzinfo=UTC)
+        mock_job = self._make_mock_job()
+
+        with _mock_settings:
+            result_path = log_service.save_job_csv(job_id, mock_job, completed_at)
+
+        expected_dir = log_dir / "csv" / "year=2026" / "month=02" / "day=08"
+        assert result_path.parent == expected_dir
+        assert result_path.name.startswith("upload-summary-143025-a1b2c3d4")
+        assert result_path.name.endswith(".csv")
+        assert result_path.exists()
+
+    def test_save_job_csv_columns(
+        self, log_service: LogService, _mock_settings: Any
+    ) -> None:
+        """Test that the CSV has all 14 expected columns."""
+        job_id = "test-job-id-1234"
+        completed_at = datetime(2026, 2, 8, 12, 0, 0, tzinfo=UTC)
+        mock_job = self._make_mock_job()
+
+        with _mock_settings:
+            result_path = log_service.save_job_csv(job_id, mock_job, completed_at)
+
+        with open(result_path, newline="") as f:
+            reader = csv.reader(f)
+            header = next(reader)
+
+        expected_columns = [
+            "job_id",
+            "filename",
+            "file_size_bytes",
+            "file_size_formatted",
+            "s3_path",
+            "status",
+            "data_start_time",
+            "upload_started_at",
+            "upload_completed_at",
+            "upload_duration_seconds",
+            "upload_speed_mbps",
+            "is_duplicate",
+            "is_valid",
+            "error_message",
+        ]
+        assert header == expected_columns
+
+    def test_save_job_csv_data_row(
+        self, log_service: LogService, _mock_settings: Any
+    ) -> None:
+        """Test that the CSV has a data row for each file."""
+        job_id = "test-job-id"
+        completed_at = datetime(2026, 2, 8, 12, 0, 0, tzinfo=UTC)
+        mock_job = self._make_mock_job()
+
+        with _mock_settings:
+            result_path = log_service.save_job_csv(job_id, mock_job, completed_at)
+
+        with open(result_path, newline="") as f:
+            reader = csv.reader(f)
+            rows = list(reader)
+
+        # Header + 1 data row
+        assert len(rows) == 2
+        data_row = rows[1]
+        assert data_row[0] == job_id
+        assert data_row[1] == "test.mcap"
+        assert data_row[2] == "1024000"
diff --git a/tests/test_mcap_service.py b/tests/test_mcap_service.py
new file mode 100644
index 0000000..a7ccb19
--- /dev/null
+++ b/tests/test_mcap_service.py
@@ -0,0 +1,207 @@
+"""Tests for the MCAP service module."""
+
+from datetime import datetime
+from pathlib import Path
+from unittest.mock import MagicMock, patch
+
+import pytest
+
+from app.services import mcap_service
+from app.services.mcap_service import _extract_timestamp_from_filename
+
+
+class TestGenerateS3Path:
+    """Tests for generate_s3_path function."""
+
+    def test_basic_path_generation(self) -> None:
+        """Test basic S3 path generation."""
+        timestamp = datetime(2024, 6, 15, 14, 35, 0)
+        result = mcap_service.generate_s3_path(timestamp, "test.mcap")
+
+        assert result == "data/year=2024/month=06/day=15/hour=14/minute=30/test.mcap"
+
+    def test_10min_bucket_rounding(self, sample_timestamps: list[tuple[int, int, str]]) -> None:
+        """Test that minutes are correctly rounded to 10-minute buckets."""
+        for minute, expected_bucket, description in sample_timestamps:
+            timestamp = datetime(2024, 1, 1, 12, minute, 0)
+            result = mcap_service.generate_s3_path(timestamp, "test.mcap")
+
+            assert f"minute={expected_bucket:02d}" in result, f"Failed for: {description}"
+
+    def test_zero_padded_values(self) -> None:
+        """Test that single-digit values are zero-padded."""
+        timestamp = datetime(2024, 1, 5, 3, 7, 0)
+        result = mcap_service.generate_s3_path(timestamp, "test.mcap")
+
+        assert "month=01" in result
+        assert "day=05" in result
+        assert "hour=03" in result
+        assert "minute=00" in result
+
+    def test_preserves_filename(self) -> None:
+        """Test that the original filename is preserved."""
+        timestamp = datetime(2024, 6, 15, 14, 0, 0)
+        filename = "my_data_file_2024.mcap"
+        result = mcap_service.generate_s3_path(timestamp, filename)
+
+        assert result.endswith(filename)
+
+    def test_end_of_year(self) -> None:
+        """Test path generation at end of year."""
+        timestamp = datetime(2024, 12, 31, 23, 59, 59)
+        result = mcap_service.generate_s3_path(timestamp, "test.mcap")
+
+        assert "year=2024" in result
+        assert "month=12" in result
+        assert "day=31" in result
+        assert "hour=23" in result
+        assert "minute=50" in result
+
+
+class TestExtractStartTime:
+    """Tests for extract_start_time function."""
+
+    def test_file_not_found(self) -> None:
+        """Test that FileNotFoundError is raised for missing files."""
+        with pytest.raises(FileNotFoundError):
+            mcap_service.extract_start_time("/nonexistent/path/file.mcap")
+
+    def test_invalid_mcap_raises_value_error(self, temp_mcap_file: Path) -> None:
+        """Test that invalid MCAP files raise ValueError."""
+        # The temp file is not a valid MCAP, so it should raise an error
+        with pytest.raises((ValueError, ImportError)):
+            mcap_service.extract_start_time(temp_mcap_file)
+
+    @patch("modaq_toolkit.MCAPParser")
+    def test_successful_extraction(self, mock_parser_class: MagicMock) -> None:
+        """Test successful timestamp extraction with mocked parser."""
+        import pandas as pd
+
+        # Setup mock
+        mock_parser = MagicMock()
+        mock_parser_class.return_value = mock_parser
+
+        # Create a real pandas DataFrame with datetime index
+        test_time = datetime(2024, 6, 15, 14, 30, 0)
+        mock_df = pd.DataFrame({"value": [1, 2, 3]}, index=pd.to_datetime([test_time] * 3))
+        mock_parser.get_dataframes.return_value = {"topic1": mock_df}
+
+        # Create a temp file path that "exists"
+        with patch("pathlib.Path.exists", return_value=True):
+            result = mcap_service.extract_start_time("/fake/path.mcap")
+
+        assert result == test_time
+
+    @patch("modaq_toolkit.MCAPParser")
+    def test_no_channels_falls_back_to_filename(self, mock_parser_class: MagicMock) -> None:
+        """Test that empty topic list falls back to filename parsing."""
+        mock_parser = MagicMock()
+        mock_parser_class.return_value = mock_parser
+        mock_parser.get_dataframes.return_value = {}
+
+        # Use a filename with embedded timestamp
+        with patch("pathlib.Path.exists", return_value=True):
+            with patch.object(Path, "name", "Bag_2024_06_15_14_30_00.mcap"):
+                result = mcap_service.extract_start_time("/fake/Bag_2024_06_15_14_30_00.mcap")
+
+        assert result == datetime(2024, 6, 15, 14, 30, 0)
+
+    @patch("modaq_toolkit.MCAPParser")
+    def test_no_channels_no_filename_timestamp_raises_error(
+        self, mock_parser_class: MagicMock
+    ) -> None:
+        """Test that error is raised when no timestamp can be found."""
+        mock_parser = MagicMock()
+        mock_parser_class.return_value = mock_parser
+        mock_parser.get_dataframes.return_value = {}
+
+        with patch("pathlib.Path.exists", return_value=True):
+            with patch.object(Path, "name", "random_file.mcap"):
+                with pytest.raises(ValueError, match="Could not extract timestamps"):
+                    mcap_service.extract_start_time("/fake/random_file.mcap")
+
+
+class TestGetFileInfo:
+    """Tests for get_file_info function."""
+
+    def test_nonexistent_file(self) -> None:
+        """Test handling of nonexistent files."""
+        result = mcap_service.get_file_info("/nonexistent/file.mcap")
+
+        assert result["filename"] == "file.mcap"
+        assert result["error"] is not None
+
+    def test_file_info_structure(self, temp_mcap_file: Path) -> None:
+        """Test that file info returns expected structure."""
+        result = mcap_service.get_file_info(temp_mcap_file)
+
+        assert "filename" in result
+        assert "path" in result
+        assert "size" in result
+        assert "start_time" in result
+        assert "s3_path" in result
+        assert "error" in result
+
+        assert result["filename"] == temp_mcap_file.name
+        assert result["size"] > 0
+
+
+class TestExtractTimestampFromFilename:
+    """Tests for _extract_timestamp_from_filename function."""
+
+    def test_bag_underscore_format(self) -> None:
+        """Test Bag_YYYY_MM_DD_HH_mm_ss format."""
+        result = _extract_timestamp_from_filename("Bag_2026_01_22_17_10_46_0.mcap")
+        assert result == datetime(2026, 1, 22, 17, 10, 46)
+
+    def test_bag_format_with_suffix(self) -> None:
+        """Test Bag format with various suffixes."""
+        result = _extract_timestamp_from_filename("Bag_2024_06_15_14_30_00_1.mcap")
+        assert result == datetime(2024, 6, 15, 14, 30, 0)
+
+    def test_iso_dash_format(self) -> None:
+        """Test YYYY-MM-DD_HH-mm-ss format."""
+        result = _extract_timestamp_from_filename("recording_2024-06-15_14-30-00.mcap")
+        assert result == datetime(2024, 6, 15, 14, 30, 0)
+
+    def test_compact_format(self) -> None:
+        """Test YYYYMMDD_HHmmss format."""
+        result = _extract_timestamp_from_filename("data_20240615_143000.mcap")
+        assert result == datetime(2024, 6, 15, 14, 30, 0)
+
+    def test_no_timestamp_returns_none(self) -> None:
+        """Test that filenames without timestamps return None."""
+        assert _extract_timestamp_from_filename("random_file.mcap") is None
+        assert _extract_timestamp_from_filename("test.mcap") is None
+
+    def test_invalid_date_returns_none(self) -> None:
+        """Test that invalid dates return None."""
+        # Invalid month (13)
+        assert _extract_timestamp_from_filename("Bag_2024_13_15_14_30_00.mcap") is None
+
+
+class TestFormatFileSize:
+    """Tests for format_file_size function."""
+
+    def test_bytes(self) -> None:
+        """Test formatting bytes."""
+        assert mcap_service.format_file_size(0) == "0.0 B"
+        assert mcap_service.format_file_size(500) == "500.0 B"
+
+    def test_kilobytes(self) -> None:
+        """Test formatting kilobytes."""
+        assert mcap_service.format_file_size(1024) == "1.0 KB"
+        assert mcap_service.format_file_size(1536) == "1.5 KB"
+
+    def test_megabytes(self) -> None:
+        """Test formatting megabytes."""
+        assert mcap_service.format_file_size(1024 * 1024) == "1.0 MB"
+        assert mcap_service.format_file_size(int(1024 * 1024 * 2.5)) == "2.5 MB"
+
+    def test_gigabytes(self) -> None:
+        """Test formatting gigabytes."""
+        assert mcap_service.format_file_size(1024**3) == "1.0 GB"
+
+    def test_terabytes(self) -> None:
+        """Test formatting terabytes."""
+        assert mcap_service.format_file_size(1024**4) == "1.0 TB"
diff --git a/tests/test_routes.py b/tests/test_routes.py
new file mode 100644
index 0000000..cd4cb36
--- /dev/null
+++ b/tests/test_routes.py
@@ -0,0 +1,337 @@
+"""Tests for Flask route endpoints."""
+
+import json
+from unittest.mock import MagicMock, patch
+
+from flask.testing import FlaskClient
+
+
+class TestMainRoutes:
+    """Tests for main page routes."""
+
+    def test_index_page(self, client: FlaskClient) -> None:
+        """Test that index page loads successfully."""
+        response = client.get("/")
+        assert response.status_code == 200
+        assert b"Upload MCAP Files" in response.data
+
+    def test_files_page(self, client: FlaskClient) -> None:
+        """Test that files page loads successfully."""
+        response = client.get("/files")
+        assert response.status_code == 200
+        assert b"S3 File Browser" in response.data
+
+    def test_settings_page(self, client: FlaskClient) -> None:
+        """Test that settings page loads successfully."""
+        response = client.get("/settings")
+        assert response.status_code == 200
+        assert b"Settings" in response.data
+
+
+class TestSettingsAPI:
+    """Tests for settings API endpoints."""
+
+    def test_get_settings(self, client: FlaskClient) -> None:
+        """Test getting current settings."""
+        response = client.get("/api/settings")
+        assert response.status_code == 200
+
+        data = json.loads(response.data)
+        assert "aws_profile" in data
+        assert "aws_region" in data
+        assert "s3_bucket" in data
+
+    def test_update_settings(self, client: FlaskClient) -> None:
+        """Test updating settings."""
+        response = client.put(
+            "/api/settings",
+            data=json.dumps({"s3_bucket": "new-bucket"}),
+            content_type="application/json",
+        )
+        assert response.status_code == 200
+
+        data = json.loads(response.data)
+        assert data["s3_bucket"] == "new-bucket"
+
+    def test_update_settings_invalid_key(self, client: FlaskClient) -> None:
+        """Test that invalid settings keys are ignored."""
+        response = client.put(
+            "/api/settings",
+            data=json.dumps({"invalid_key": "value"}),
+            content_type="application/json",
+        )
+        assert response.status_code == 400
+
+    def test_update_settings_no_json(self, client: FlaskClient) -> None:
+        """Test error when no JSON body provided."""
+        response = client.put("/api/settings", data="not json")
+        assert response.status_code == 400
+
+    def test_get_profiles(self, client: FlaskClient) -> None:
+        """Test getting available AWS profiles."""
+        response = client.get("/api/settings/profiles")
+        assert response.status_code == 200
+
+        data = json.loads(response.data)
+        assert "profiles" in data
+        assert isinstance(data["profiles"], list)
+        assert "default" in data["profiles"]
+
+    @patch("app.routes.settings.s3_service")
+    def test_validate_connection_success(self, mock_s3: MagicMock, client: FlaskClient) -> None:
+        """Test successful connection validation."""
+        mock_s3.create_s3_client.return_value = MagicMock()
+        mock_s3.validate_bucket_access.return_value = {"success": True, "error": None}
+
+        response = client.post(
+            "/api/settings/validate",
+            data=json.dumps({"s3_bucket": "test-bucket"}),
+            content_type="application/json",
+        )
+        assert response.status_code == 200
+
+        data = json.loads(response.data)
+        assert data["success"] is True
+
+    def test_validate_connection_no_bucket(self, client: FlaskClient) -> None:
+        """Test validation fails without bucket."""
+        # First clear the bucket
+        client.put(
+            "/api/settings",
+            data=json.dumps({"s3_bucket": ""}),
+            content_type="application/json",
+        )
+
+        response = client.post("/api/settings/validate")
+        assert response.status_code == 400
+
+    def test_get_version(self, client: FlaskClient) -> None:
+        """Test getting version info."""
+        response = client.get("/api/settings/version")
+        assert response.status_code == 200
+
+        data = json.loads(response.data)
+        # Version info may or may not be available depending on git
+        assert "commit" in data or "error" in data
+
+
+class TestUploadAPI:
+    """Tests for upload API endpoints."""
+
+    def test_analyze_no_files(self, client: FlaskClient) -> None:
+        """Test analyze endpoint with no files."""
+        response = client.post("/api/upload/analyze")
+        assert response.status_code == 400
+
+        data = json.loads(response.data)
+        assert "error" in data
+
+    def test_analyze_with_json_paths(self, client: FlaskClient) -> None:
+        """Test analyze endpoint with JSON file paths."""
+        # Nonexistent files will result in empty job, returns 202 (async processing)
+        response = client.post(
+            "/api/upload/analyze",
+            data=json.dumps({"file_paths": ["/nonexistent/file.mcap"]}),
+            content_type="application/json",
+        )
+        assert response.status_code == 202
+
+        data = json.loads(response.data)
+        assert "job_id" in data
+        assert "files" in data
+        assert data["status"] == "analyzing"
+
+    def test_get_status_not_found(self, client: FlaskClient) -> None:
+        """Test getting status for nonexistent job."""
+        response = client.get("/api/upload/status/nonexistent-job-id")
+        assert response.status_code == 404
+
+    def test_cancel_upload_not_found(self, client: FlaskClient) -> None:
+        """Test cancelling nonexistent upload."""
+        response = client.post("/api/upload/cancel/nonexistent-job-id")
+        assert response.status_code == 404
+
+    def test_start_upload_not_found(self, client: FlaskClient) -> None:
+        """Test starting nonexistent upload."""
+        response = client.post("/api/upload/start/nonexistent-job-id")
+        assert response.status_code == 404
+
+
+class TestFilesAPI:
+    """Tests for files API endpoints."""
+
+    @patch("app.routes.files.s3_service")
+    def test_list_files_success(self, mock_s3: MagicMock, client: FlaskClient) -> None:
+        """Test listing files successfully."""
+        # Ensure bucket is set
+        client.put(
+            "/api/settings",
+            data=json.dumps({"s3_bucket": "test-bucket"}),
+            content_type="application/json",
+        )
+
+        mock_s3.create_s3_client.return_value = MagicMock()
+        mock_s3.list_bucket_objects.return_value = {
+            "success": True,
+            "bucket": "test-bucket",
+            "prefix": "",
+            "folders": [{"name": "folder1", "prefix": "folder1/"}],
+            "files": [{"name": "file.mcap", "key": "file.mcap", "size": 1000}],
+            "error": None,
+        }
+
+        response = client.get("/api/files/list")
+        assert response.status_code == 200
+
+        data = json.loads(response.data)
+        assert data["success"] is True
+        assert "folders" in data
+        assert "files" in data
+
+    def test_list_files_no_bucket(self, client: FlaskClient) -> None:
+        """Test listing files without bucket configured."""
+        # Clear the bucket first
+        client.put(
+            "/api/settings",
+            data=json.dumps({"s3_bucket": ""}),
+            content_type="application/json",
+        )
+
+        response = client.get("/api/files/list")
+        assert response.status_code == 400
+
+    def test_search_no_query(self, client: FlaskClient) -> None:
+        """Test search without query parameter."""
+        # Ensure bucket is set for this test
+        client.put(
+            "/api/settings",
+            data=json.dumps({"s3_bucket": "test-bucket"}),
+            content_type="application/json",
+        )
+
+        response = client.get("/api/files/search")
+        assert response.status_code == 400
+
+    @patch("app.routes.files.s3_service")
+    def test_search_success(self, mock_s3: MagicMock, client: FlaskClient) -> None:
+        """Test successful file search."""
+        # Ensure bucket is set
+        client.put(
+            "/api/settings",
+            data=json.dumps({"s3_bucket": "test-bucket"}),
+            content_type="application/json",
+        )
+
+        mock_s3.create_s3_client.return_value = MagicMock()
+        mock_s3.list_bucket_objects.return_value = {
+            "success": True,
+            "bucket": "test-bucket",
+            "prefix": "",
+            "folders": [],
+            "files": [
+                {"name": "test_file.mcap", "key": "path/test_file.mcap", "size": 1000},
+                {"name": "other.mcap", "key": "path/other.mcap", "size": 2000},
+            ],
+            "error": None,
+        }
+
+        response = client.get("/api/files/search?query=test")
+        assert response.status_code == 200
+
+        data = json.loads(response.data)
+        assert data["success"] is True
+        assert len(data["files"]) == 1
+        assert data["files"][0]["name"] == "test_file.mcap"
+
+    def test_get_file_info_no_key(self, client: FlaskClient) -> None:
+        """Test getting file info without key parameter."""
+        response = client.get("/api/files/info")
+        assert response.status_code == 400
+
+
+class TestLogsAPI:
+    """Tests for logs API endpoints."""
+
+    def test_logs_page(self, client: FlaskClient) -> None:
+        """Test that logs page loads successfully."""
+        response = client.get("/logs")
+        assert response.status_code == 200
+        assert b"Application Logs" in response.data
+
+    def test_get_entries(self, client: FlaskClient) -> None:
+        """Test getting log entries."""
+        response = client.get("/api/logs/entries")
+        assert response.status_code == 200
+
+        data = json.loads(response.data)
+        assert "entries" in data
+        assert "total" in data
+        assert isinstance(data["entries"], list)
+
+    def test_get_entries_with_filters(self, client: FlaskClient) -> None:
+        """Test getting log entries with query params."""
+        response = client.get("/api/logs/entries?level=INFO&category=app&limit=10")
+        assert response.status_code == 200
+
+        data = json.loads(response.data)
+        assert data["limit"] == 10
+
+    def test_get_files(self, client: FlaskClient) -> None:
+        """Test listing log files."""
+        response = client.get("/api/logs/files")
+        assert response.status_code == 200
+
+        data = json.loads(response.data)
+        assert "files" in data
+        assert isinstance(data["files"], list)
+
+    def test_get_stats(self, client: FlaskClient) -> None:
+        """Test getting log stats."""
+        response = client.get("/api/logs/stats")
+        assert response.status_code == 200
+
+        data = json.loads(response.data)
+        assert "total_entries" in data
+        assert "level_counts" in data
+
+    def test_sync_no_bucket(self, client: FlaskClient) -> None:
+        """Test sync fails without bucket configured."""
+        # Clear bucket
+        client.put(
+            "/api/settings",
+            data=json.dumps({"s3_bucket": ""}),
+            content_type="application/json",
+        )
+
+        response = client.post("/api/logs/sync")
+        assert response.status_code == 400
+
+    @patch("app.routes.logs.s3_service")
+    def test_sync_success(self, mock_s3: MagicMock, client: FlaskClient) -> None:
+        """Test successful log sync."""
+        # Ensure bucket is set
+        client.put(
+            "/api/settings",
+            data=json.dumps({"s3_bucket": "test-bucket"}),
+            content_type="application/json",
+        )
+
+        mock_s3.create_s3_client.return_value = MagicMock()
+
+        response = client.post("/api/logs/sync")
+        assert response.status_code == 200
+
+        data = json.loads(response.data)
+        assert "synced" in data
+
+
+class TestProgressSSE:
+    """Tests for Server-Sent Events progress endpoint."""
+
+    def test_progress_stream_not_found(self, client: FlaskClient) -> None:
+        """Test progress stream for nonexistent job returns error."""
+        response = client.get("/api/upload/progress/nonexistent-job-id")
+
+        # SSE streams return 200 even for errors (error is in the stream)
+        assert response.status_code == 200
+        assert "text/event-stream" in response.content_type
diff --git a/tests/test_s3_service.py b/tests/test_s3_service.py
new file mode 100644
index 0000000..c678aea
--- /dev/null
+++ b/tests/test_s3_service.py
@@ -0,0 +1,221 @@
+"""Tests for the S3 service module."""
+
+from pathlib import Path
+from unittest.mock import MagicMock, patch
+
+import pytest
+
+# Import moto for AWS mocking
+try:
+    import boto3
+    from moto import mock_aws
+
+    MOTO_AVAILABLE = True
+except ImportError:
+    MOTO_AVAILABLE = False
+    mock_aws = None  # type: ignore[assignment]
+
+from app.services import s3_service
+
+
+class TestGetAvailableProfiles:
+    """Tests for get_available_profiles function."""
+
+    def test_always_includes_default(self) -> None:
+        """Test that default profile is always included."""
+        with patch("pathlib.Path.exists", return_value=False):
+            profiles = s3_service.get_available_profiles()
+            assert "default" in profiles
+
+    @patch("configparser.ConfigParser.read")
+    @patch("configparser.ConfigParser.sections")
+    @patch("pathlib.Path.exists")
+    def test_reads_credentials_file(
+        self,
+        mock_exists: MagicMock,
+        mock_sections: MagicMock,
+        mock_read: MagicMock,
+    ) -> None:
+        """Test that credentials file is read."""
+        mock_exists.return_value = True
+        mock_sections.return_value = ["profile1", "profile2"]
+
+        profiles = s3_service.get_available_profiles()
+
+        assert "profile1" in profiles
+        assert "profile2" in profiles
+
+    def test_returns_sorted_list(self) -> None:
+        """Test that profiles are returned sorted."""
+        with patch("pathlib.Path.exists", return_value=False):
+            profiles = s3_service.get_available_profiles()
+            assert profiles == sorted(profiles)
+
+
+@pytest.mark.skipif(not MOTO_AVAILABLE, reason="moto not installed")
+class TestS3Operations:
+    """Tests for S3 operations using moto mock."""
+
+    def test_check_file_exists_true(self) -> None:
+        """Test check_file_exists returns True for existing file."""
+        with mock_aws():
+            client = boto3.client("s3", region_name="us-west-2")
+            client.create_bucket(
+                Bucket="test-bucket",
+                CreateBucketConfiguration={"LocationConstraint": "us-west-2"},
+            )
+            client.put_object(Bucket="test-bucket", Key="test/file.mcap", Body=b"data")
+
+            result = s3_service.check_file_exists(client, "test-bucket", "test/file.mcap")
+            assert result is True
+
+    def test_check_file_exists_false(self) -> None:
+        """Test check_file_exists returns False for missing file."""
+        with mock_aws():
+            client = boto3.client("s3", region_name="us-west-2")
+            client.create_bucket(
+                Bucket="test-bucket",
+                CreateBucketConfiguration={"LocationConstraint": "us-west-2"},
+            )
+
+            result = s3_service.check_file_exists(client, "test-bucket", "nonexistent/file.mcap")
+            assert result is False
+
+    def test_list_bucket_objects_empty(self) -> None:
+        """Test listing objects in an empty bucket."""
+        with mock_aws():
+            client = boto3.client("s3", region_name="us-west-2")
+            client.create_bucket(
+                Bucket="test-bucket",
+                CreateBucketConfiguration={"LocationConstraint": "us-west-2"},
+            )
+
+            result = s3_service.list_bucket_objects(client, "test-bucket")
+
+            assert result["success"] is True
+            assert result["folders"] == []
+            assert result["files"] == []
+
+    def test_list_bucket_objects_with_files(self) -> None:
+        """Test listing objects with files and folders."""
+        with mock_aws():
+            client = boto3.client("s3", region_name="us-west-2")
+            client.create_bucket(
+                Bucket="test-bucket",
+                CreateBucketConfiguration={"LocationConstraint": "us-west-2"},
+            )
+            client.put_object(Bucket="test-bucket", Key="folder1/file1.mcap", Body=b"data")
+            client.put_object(Bucket="test-bucket", Key="folder1/file2.mcap", Body=b"data")
+            client.put_object(Bucket="test-bucket", Key="folder2/file3.mcap", Body=b"data")
+
+            result = s3_service.list_bucket_objects(client, "test-bucket")
+
+            assert result["success"] is True
+            assert len(result["folders"]) == 2
+            folder_names = [f["name"] for f in result["folders"]]
+            assert "folder1" in folder_names
+            assert "folder2" in folder_names
+
+    def test_list_bucket_objects_with_prefix(self) -> None:
+        """Test listing objects with a prefix filter."""
+        with mock_aws():
+            client = boto3.client("s3", region_name="us-west-2")
+            client.create_bucket(
+                Bucket="test-bucket",
+                CreateBucketConfiguration={"LocationConstraint": "us-west-2"},
+            )
+            client.put_object(Bucket="test-bucket", Key="folder1/sub/file1.mcap", Body=b"data")
+            client.put_object(Bucket="test-bucket", Key="folder1/file2.mcap", Body=b"data")
+
+            result = s3_service.list_bucket_objects(client, "test-bucket", prefix="folder1/")
+
+            assert result["success"] is True
+            assert result["prefix"] == "folder1/"
+
+    def test_validate_bucket_access_success(self) -> None:
+        """Test validate_bucket_access for accessible bucket."""
+        with mock_aws():
+            client = boto3.client("s3", region_name="us-west-2")
+            client.create_bucket(
+                Bucket="test-bucket",
+                CreateBucketConfiguration={"LocationConstraint": "us-west-2"},
+            )
+
+            result = s3_service.validate_bucket_access(client, "test-bucket")
+
+            assert result["success"] is True
+            assert result["error"] is None
+
+    def test_validate_bucket_access_not_found(self) -> None:
+        """Test validate_bucket_access for nonexistent bucket."""
+        with mock_aws():
+            client = boto3.client("s3", region_name="us-west-2")
+
+            result = s3_service.validate_bucket_access(client, "nonexistent-bucket")
+
+            assert result["success"] is False
+            assert result["error"] is not None
+
+    def test_upload_file_with_progress(self, temp_mcap_file: Path) -> None:
+        """Test uploading a file with progress callback."""
+        with mock_aws():
+            client = boto3.client("s3", region_name="us-west-2")
+            client.create_bucket(
+                Bucket="test-bucket",
+                CreateBucketConfiguration={"LocationConstraint": "us-west-2"},
+            )
+
+            progress_calls: list[tuple[int, int]] = []
+
+            def callback(uploaded: int, total: int) -> None:
+                progress_calls.append((uploaded, total))
+
+            result = s3_service.upload_file_with_progress(
+                client,
+                str(temp_mcap_file),
+                "test-bucket",
+                "test/upload.mcap",
+                callback,
+            )
+
+            assert result["success"] is True
+            assert result["key"] == "test/upload.mcap"
+
+    def test_get_object_metadata(self) -> None:
+        """Test getting object metadata."""
+        with mock_aws():
+            client = boto3.client("s3", region_name="us-west-2")
+            client.create_bucket(
+                Bucket="test-bucket",
+                CreateBucketConfiguration={"LocationConstraint": "us-west-2"},
+            )
+            client.put_object(Bucket="test-bucket", Key="test/file.mcap", Body=b"test data")
+
+            result = s3_service.get_object_metadata(client, "test-bucket", "test/file.mcap")
+
+            assert result["success"] is True
+            assert result["size"] == 9  # len("test data")
+
+
+class TestCreateS3Client:
+    """Tests for create_s3_client function."""
+
+    @patch("boto3.Session")
+    def test_creates_session_with_profile(self, mock_session: MagicMock) -> None:
+        """Test that session is created with correct profile."""
+        mock_client = MagicMock()
+        mock_session.return_value.client.return_value = mock_client
+
+        s3_service.create_s3_client("test-profile", "us-west-2")
+
+        mock_session.assert_called_once_with(profile_name="test-profile", region_name="us-west-2")
+
+    @patch("boto3.Session")
+    def test_default_region(self, mock_session: MagicMock) -> None:
+        """Test that default region is us-west-2."""
+        mock_client = MagicMock()
+        mock_session.return_value.client.return_value = mock_client
+
+        s3_service.create_s3_client("test-profile")
+
+        mock_session.assert_called_once_with(profile_name="test-profile", region_name="us-west-2")
diff --git a/tests/test_upload_manager.py b/tests/test_upload_manager.py
new file mode 100644
index 0000000..47a7967
--- /dev/null
+++ b/tests/test_upload_manager.py
@@ -0,0 +1,274 @@
+"""Tests for the upload manager module."""
+
+from datetime import UTC, datetime
+from pathlib import Path
+from unittest.mock import MagicMock, patch
+
+from app.services.upload_manager import (
+    FileUploadState,
+    UploadJob,
+    UploadManager,
+    UploadStatus,
+    get_upload_manager,
+)
+
+
+class TestUploadStatus:
+    """Tests for UploadStatus enum."""
+
+    def test_all_statuses_have_values(self) -> None:
+        """Test that all statuses have string values."""
+        assert UploadStatus.PENDING.value == "pending"
+        assert UploadStatus.ANALYZING.value == "analyzing"
+        assert UploadStatus.READY.value == "ready"
+        assert UploadStatus.UPLOADING.value == "uploading"
+        assert UploadStatus.COMPLETED.value == "completed"
+        assert UploadStatus.FAILED.value == "failed"
+        assert UploadStatus.SKIPPED.value == "skipped"
+        assert UploadStatus.CANCELLED.value == "cancelled"
+
+
+class TestFileUploadState:
+    """Tests for FileUploadState dataclass."""
+
+    def test_default_values(self) -> None:
+        """Test default values for FileUploadState."""
+        state = FileUploadState(
+            filename="test.mcap", local_path="/path/to/test.mcap", file_size=1000
+        )
+
+        assert state.status == UploadStatus.PENDING
+        assert state.s3_path == ""
+        assert state.start_time is None
+        assert state.bytes_uploaded == 0
+        assert state.error_message == ""
+        assert state.is_duplicate is False
+
+    def test_to_dict(self) -> None:
+        """Test conversion to dictionary."""
+        state = FileUploadState(
+            filename="test.mcap",
+            local_path="/path/to/test.mcap",
+            file_size=1024 * 1024,  # 1 MB
+            status=UploadStatus.UPLOADING,
+            bytes_uploaded=512 * 1024,  # 512 KB
+        )
+
+        result = state.to_dict()
+
+        assert result["filename"] == "test.mcap"
+        assert result["status"] == "uploading"
+        assert result["progress_percent"] == 50.0
+        assert "MB" in result["file_size_formatted"]
+
+    def test_progress_percent_zero_size(self) -> None:
+        """Test progress calculation with zero file size."""
+        state = FileUploadState(filename="empty.mcap", local_path="/path/empty.mcap", file_size=0)
+
+        result = state.to_dict()
+        assert result["progress_percent"] == 0
+
+
+class TestUploadJob:
+    """Tests for UploadJob dataclass."""
+
+    def test_total_bytes(self) -> None:
+        """Test total_bytes property."""
+        job = UploadJob(job_id="test-job")
+        job.files = [
+            FileUploadState("f1.mcap", "/p/f1.mcap", 1000),
+            FileUploadState("f2.mcap", "/p/f2.mcap", 2000),
+            FileUploadState("f3.mcap", "/p/f3.mcap", 3000),
+        ]
+
+        assert job.total_bytes == 6000
+
+    def test_uploaded_bytes(self) -> None:
+        """Test uploaded_bytes property."""
+        job = UploadJob(job_id="test-job")
+        job.files = [
+            FileUploadState("f1.mcap", "/p/f1.mcap", 1000),
+            FileUploadState("f2.mcap", "/p/f2.mcap", 2000),
+        ]
+        job.files[0].bytes_uploaded = 500
+        job.files[1].bytes_uploaded = 1000
+
+        assert job.uploaded_bytes == 1500
+
+    def test_progress_percent(self) -> None:
+        """Test progress_percent property."""
+        job = UploadJob(job_id="test-job")
+        job.files = [
+            FileUploadState("f1.mcap", "/p/f1.mcap", 1000),
+            FileUploadState("f2.mcap", "/p/f2.mcap", 1000),
+        ]
+        job.files[0].bytes_uploaded = 1000
+        job.files[1].bytes_uploaded = 500
+
+        assert job.progress_percent == 75.0
+
+    def test_progress_percent_empty(self) -> None:
+        """Test progress_percent with no files."""
+        job = UploadJob(job_id="test-job")
+        assert job.progress_percent == 0.0
+
+    def test_files_completed(self) -> None:
+        """Test files_completed property."""
+        job = UploadJob(job_id="test-job")
+        job.files = [
+            FileUploadState("f1.mcap", "/p/f1.mcap", 1000),
+            FileUploadState("f2.mcap", "/p/f2.mcap", 1000),
+            FileUploadState("f3.mcap", "/p/f3.mcap", 1000),
+        ]
+        job.files[0].status = UploadStatus.COMPLETED
+        job.files[1].status = UploadStatus.SKIPPED
+        job.files[2].status = UploadStatus.UPLOADING
+
+        assert job.files_completed == 2
+
+    def test_files_failed(self) -> None:
+        """Test files_failed property."""
+        job = UploadJob(job_id="test-job")
+        job.files = [
+            FileUploadState("f1.mcap", "/p/f1.mcap", 1000),
+            FileUploadState("f2.mcap", "/p/f2.mcap", 1000),
+        ]
+        job.files[0].status = UploadStatus.FAILED
+        job.files[1].status = UploadStatus.COMPLETED
+
+        assert job.files_failed == 1
+
+    def test_eta_seconds_not_started(self) -> None:
+        """Test ETA when upload hasn't started."""
+        job = UploadJob(job_id="test-job")
+        assert job.eta_seconds is None
+
+    def test_eta_seconds_no_progress(self) -> None:
+        """Test ETA with no bytes uploaded."""
+        job = UploadJob(job_id="test-job")
+        job.started_at = datetime.now()
+        job.files = [FileUploadState("f1.mcap", "/p/f1.mcap", 1000)]
+
+        assert job.eta_seconds is None
+
+    def test_to_dict(self) -> None:
+        """Test conversion to dictionary."""
+        job = UploadJob(job_id="test-job-123")
+        job.files = [FileUploadState("f1.mcap", "/p/f1.mcap", 1000)]
+
+        result = job.to_dict()
+
+        assert result["job_id"] == "test-job-123"
+        assert result["total_files"] == 1
+        assert "files" in result
+        assert len(result["files"]) == 1
+
+
+class TestUploadManager:
+    """Tests for UploadManager class."""
+
+    def test_create_job(self, temp_files: list[Path]) -> None:
+        """Test job creation."""
+        manager = UploadManager()
+        file_paths = [str(f) for f in temp_files]
+
+        job = manager.create_job(file_paths)
+
+        assert job.job_id is not None
+        assert len(job.files) == len(temp_files)
+        assert job.status == UploadStatus.PENDING
+
+    def test_create_job_skips_missing_files(self) -> None:
+        """Test that missing files are skipped during job creation."""
+        manager = UploadManager()
+        file_paths = ["/nonexistent/file1.mcap", "/nonexistent/file2.mcap"]
+
+        job = manager.create_job(file_paths)
+
+        assert len(job.files) == 0
+
+    def test_get_job(self, temp_files: list[Path]) -> None:
+        """Test retrieving a job by ID."""
+        manager = UploadManager()
+        created_job = manager.create_job([str(temp_files[0])])
+
+        retrieved_job = manager.get_job(created_job.job_id)
+
+        assert retrieved_job is not None
+        assert retrieved_job.job_id == created_job.job_id
+
+    def test_get_job_not_found(self) -> None:
+        """Test retrieving a nonexistent job."""
+        manager = UploadManager()
+        result = manager.get_job("nonexistent-id")
+        assert result is None
+
+    def test_cancel_job(self, temp_files: list[Path]) -> None:
+        """Test cancelling a job."""
+        manager = UploadManager()
+        job = manager.create_job([str(temp_files[0])])
+
+        result = manager.cancel_job(job.job_id)
+
+        assert result is True
+        assert job.cancelled is True
+
+    def test_cancel_job_not_found(self) -> None:
+        """Test cancelling a nonexistent job."""
+        manager = UploadManager()
+        result = manager.cancel_job("nonexistent-id")
+        assert result is False
+
+    def test_cleanup_old_jobs(self, temp_files: list[Path]) -> None:
+        """Test cleanup of old completed jobs."""
+        manager = UploadManager()
+        job = manager.create_job([str(temp_files[0])])
+        job.status = UploadStatus.COMPLETED
+        job.completed_at = datetime(2020, 1, 1, tzinfo=UTC)  # Old date
+
+        removed = manager.cleanup_old_jobs(max_age_seconds=1)
+
+        assert removed == 1
+        assert manager.get_job(job.job_id) is None
+
+    @patch("app.services.upload_manager.s3_service")
+    @patch("app.services.upload_manager.mcap_service")
+    def test_analyze_job(
+        self,
+        mock_mcap: MagicMock,
+        mock_s3: MagicMock,
+        temp_files: list[Path],
+    ) -> None:
+        """Test job analysis."""
+        # Setup mocks
+        mock_s3.create_s3_client.return_value = MagicMock()
+        mock_s3.check_file_exists.return_value = False
+        mock_mcap.extract_start_time.return_value = datetime(2024, 6, 15, 14, 30, 0)
+        mock_mcap.generate_s3_path.return_value = (
+            "data/year=2024/month=06/day=15/hour=14/minute=30/test.mcap"
+        )
+
+        manager = UploadManager()
+        job = manager.create_job([str(temp_files[0])])
+
+        result = manager.analyze_job(job.job_id, "profile", "us-west-2", "bucket")
+
+        assert result is not None
+        assert result.files[0].status == UploadStatus.READY
+        assert result.files[0].s3_path != ""
+
+
+class TestGetUploadManager:
+    """Tests for get_upload_manager function."""
+
+    def test_returns_singleton(self) -> None:
+        """Test that get_upload_manager returns the same instance."""
+        manager1 = get_upload_manager()
+        manager2 = get_upload_manager()
+
+        assert manager1 is manager2
+
+    def test_returns_upload_manager_instance(self) -> None:
+        """Test that get_upload_manager returns an UploadManager."""
+        manager = get_upload_manager()
+        assert isinstance(manager, UploadManager)

From b75fd158221b6f635c8ac95ba5450c39679b32ba Mon Sep 17 00:00:00 2001
From: "Simms, Andrew" <Andrew.Simms@nrel.gov>
Date: Sun, 8 Feb 2026 19:39:11 -0700
Subject: [PATCH 39/44] Tests: Add initial js tests

---
 tests/js/file-browser.test.js   |  35 ++++++++++
 tests/js/logs.test.js           |  44 +++++++++++++
 tests/js/settings.test.js       |  18 ++++++
 tests/js/state.test.js          |  39 ++++++++++++
 tests/js/stepper.test.js        | 101 +++++++++++++++++++++++++++++
 tests/js/upload-control.test.js |  81 ++++++++++++++++++++++++
 tests/js/upload-exec.test.js    | 102 ++++++++++++++++++++++++++++++
 tests/js/utils.test.js          | 109 ++++++++++++++++++++++++++++++++
 8 files changed, 529 insertions(+)
 create mode 100644 tests/js/file-browser.test.js
 create mode 100644 tests/js/logs.test.js
 create mode 100644 tests/js/settings.test.js
 create mode 100644 tests/js/state.test.js
 create mode 100644 tests/js/stepper.test.js
 create mode 100644 tests/js/upload-control.test.js
 create mode 100644 tests/js/upload-exec.test.js
 create mode 100644 tests/js/utils.test.js

diff --git a/tests/js/file-browser.test.js b/tests/js/file-browser.test.js
new file mode 100644
index 0000000..c9b9ebb
--- /dev/null
+++ b/tests/js/file-browser.test.js
@@ -0,0 +1,35 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import state from '../../app/static/js/modules/state.js';
+
+describe('file-browser', () => {
+    beforeEach(() => {
+        state.currentPrefix = '';
+
+        document.body.innerHTML = `
+            <div id="refresh-btn"></div>
+            <input id="search-input" type="text" />
+            <div id="retry-btn"></div>
+            <div id="close-search-btn"></div>
+            <div id="bucket-name">Loading...</div>
+            <div id="bucket-status"></div>
+            <div id="loading-state" class="hidden"></div>
+            <div id="error-state" class="hidden"></div>
+            <div id="error-message"></div>
+            <div id="empty-state" class="hidden"></div>
+            <div id="file-list" class="hidden"></div>
+            <nav id="breadcrumb"></nav>
+            <div id="search-results" class="hidden"></div>
+            <div id="search-results-list"></div>
+        `;
+    });
+
+    it('state.currentPrefix defaults to empty string', () => {
+        expect(state.currentPrefix).toBe('');
+    });
+
+    it('currentPrefix can be updated', () => {
+        state.currentPrefix = 'year=2024/';
+        expect(state.currentPrefix).toBe('year=2024/');
+        state.currentPrefix = '';
+    });
+});
diff --git a/tests/js/logs.test.js b/tests/js/logs.test.js
new file mode 100644
index 0000000..c69cb18
--- /dev/null
+++ b/tests/js/logs.test.js
@@ -0,0 +1,44 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import state from '../../app/static/js/modules/state.js';
+
+describe('logs state', () => {
+  beforeEach(() => {
+    state.logFilters = { date: null, level: null, category: null, search: '' };
+    state.logPagination = { offset: 0, limit: 100 };
+  });
+
+  it('logFilters defaults are correct', () => {
+    expect(state.logFilters.date).toBeNull();
+    expect(state.logFilters.level).toBeNull();
+    expect(state.logFilters.category).toBeNull();
+    expect(state.logFilters.search).toBe('');
+  });
+
+  it('logPagination defaults are correct', () => {
+    expect(state.logPagination.offset).toBe(0);
+    expect(state.logPagination.limit).toBe(100);
+  });
+
+  it('logFilters can be updated', () => {
+    state.logFilters.date = '2026-02-07';
+    state.logFilters.level = 'ERROR';
+    state.logFilters.category = 'upload';
+    state.logFilters.search = 'test';
+
+    expect(state.logFilters.date).toBe('2026-02-07');
+    expect(state.logFilters.level).toBe('ERROR');
+    expect(state.logFilters.category).toBe('upload');
+    expect(state.logFilters.search).toBe('test');
+  });
+
+  it('logPagination offset can be advanced', () => {
+    state.logPagination.offset = 100;
+    expect(state.logPagination.offset).toBe(100);
+  });
+
+  it('logFilters can be reset', () => {
+    state.logFilters.level = 'ERROR';
+    state.logFilters = { date: null, level: null, category: null, search: '' };
+    expect(state.logFilters.level).toBeNull();
+  });
+});
diff --git a/tests/js/settings.test.js b/tests/js/settings.test.js
new file mode 100644
index 0000000..534e0ff
--- /dev/null
+++ b/tests/js/settings.test.js
@@ -0,0 +1,18 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import state from '../../app/static/js/modules/state.js';
+
+describe('settings', () => {
+    beforeEach(() => {
+        state.currentAwsProfile = undefined;
+    });
+
+    it('state.currentAwsProfile defaults to undefined', () => {
+        expect(state.currentAwsProfile).toBeUndefined();
+    });
+
+    it('state.currentAwsProfile can be set', () => {
+        state.currentAwsProfile = 'my-profile';
+        expect(state.currentAwsProfile).toBe('my-profile');
+        state.currentAwsProfile = undefined;
+    });
+});
diff --git a/tests/js/state.test.js b/tests/js/state.test.js
new file mode 100644
index 0000000..3a04e2a
--- /dev/null
+++ b/tests/js/state.test.js
@@ -0,0 +1,39 @@
+import { describe, it, expect } from 'vitest';
+import state from '../../app/static/js/modules/state.js';
+
+describe('state', () => {
+    it('has correct default values', () => {
+        expect(state.currentJobId).toBeNull();
+        expect(state.eventSource).toBeNull();
+        expect(state.selectedFolderPath).toBeNull();
+        expect(state.currentStep).toBe(1);
+        expect(state.currentPrefix).toBe('');
+        expect(state.appVersionData).toBeNull();
+        expect(state.currentAwsProfile).toBeUndefined();
+        expect(state.scanFilePaths).toEqual([]);
+        expect(state.scanFileStatuses).toEqual([]);
+        expect(state.scanTotalSize).toBe(0);
+        expect(state.scanFolderPath).toBeNull();
+        expect(state.reviewSortConfig).toEqual({ column: 'filename', ascending: true });
+    });
+
+    it('is a shared mutable reference', () => {
+        const originalStep = state.currentStep;
+        state.currentStep = 3;
+        expect(state.currentStep).toBe(3);
+        state.currentStep = originalStep;
+    });
+
+    it('allows setting and clearing job id', () => {
+        state.currentJobId = 'test-job-123';
+        expect(state.currentJobId).toBe('test-job-123');
+        state.currentJobId = null;
+        expect(state.currentJobId).toBeNull();
+    });
+
+    it('allows managing scan file paths', () => {
+        state.scanFilePaths = ['/path/to/file1.mcap', '/path/to/file2.mcap'];
+        expect(state.scanFilePaths).toHaveLength(2);
+        state.scanFilePaths = [];
+    });
+});
diff --git a/tests/js/stepper.test.js b/tests/js/stepper.test.js
new file mode 100644
index 0000000..5e1416d
--- /dev/null
+++ b/tests/js/stepper.test.js
@@ -0,0 +1,101 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { setUploadStep, showUploadSteps, hideUploadSteps, goToStep } from '../../app/static/js/modules/stepper.js';
+import state from '../../app/static/js/modules/state.js';
+
+describe('stepper', () => {
+    beforeEach(() => {
+        state.currentStep = 1;
+
+        document.body.innerHTML = `
+            <div id="upload-steps">
+                <div data-step="1" class=""><div class="step-circle"></div><span class="step-label"></span></div>
+                <div class="step-connector"></div>
+                <div data-step="2" class=""><div class="step-circle"></div><span class="step-label"></span></div>
+                <div class="step-connector"></div>
+                <div data-step="3" class=""><div class="step-circle"></div><span class="step-label"></span></div>
+                <div class="step-connector"></div>
+                <div data-step="4" class=""><div class="step-circle"></div><span class="step-label"></span></div>
+            </div>
+            <div id="step-description"></div>
+        `;
+    });
+
+    describe('setUploadStep', () => {
+        it('sets the active step', () => {
+            setUploadStep(3);
+
+            const step3 = document.querySelector('[data-step="3"]');
+            expect(step3.classList.contains('active')).toBe(true);
+            expect(step3.classList.contains('completed')).toBe(false);
+        });
+
+        it('marks previous steps as completed', () => {
+            setUploadStep(3);
+
+            const step1 = document.querySelector('[data-step="1"]');
+            const step2 = document.querySelector('[data-step="2"]');
+            expect(step1.classList.contains('completed')).toBe(true);
+            expect(step2.classList.contains('completed')).toBe(true);
+        });
+
+        it('leaves future steps unmarked', () => {
+            setUploadStep(3);
+
+            const step4 = document.querySelector('[data-step="4"]');
+            expect(step4.classList.contains('active')).toBe(false);
+            expect(step4.classList.contains('completed')).toBe(false);
+        });
+
+        it('updates the step description', () => {
+            setUploadStep(1);
+            const desc = document.getElementById('step-description');
+            expect(desc.textContent).toBe('Select files or a folder to upload');
+        });
+
+        it('updates state.currentStep', () => {
+            setUploadStep(4);
+            expect(state.currentStep).toBe(4);
+        });
+
+        it('colors connectors for completed steps', () => {
+            setUploadStep(3);
+            const connectors = document.querySelectorAll('.step-connector');
+            expect(connectors[0].style.backgroundColor).toBe('rgb(93, 151, 50)');
+            expect(connectors[1].style.backgroundColor).toBe('rgb(93, 151, 50)');
+            expect(connectors[2].style.backgroundColor).toBe('rgb(209, 213, 219)');
+        });
+    });
+
+    describe('showUploadSteps', () => {
+        it('delegates to setUploadStep', () => {
+            showUploadSteps(2);
+            expect(state.currentStep).toBe(2);
+            const step2 = document.querySelector('[data-step="2"]');
+            expect(step2.classList.contains('active')).toBe(true);
+        });
+    });
+
+    describe('hideUploadSteps', () => {
+        it('resets to step 1', () => {
+            setUploadStep(4);
+            hideUploadSteps();
+            expect(state.currentStep).toBe(1);
+            const step1 = document.querySelector('[data-step="1"]');
+            expect(step1.classList.contains('active')).toBe(true);
+        });
+    });
+
+    describe('goToStep', () => {
+        it('does nothing when navigating forward', async () => {
+            state.currentStep = 2;
+            await goToStep(3);
+            expect(state.currentStep).toBe(2);
+        });
+
+        it('does nothing when navigating to current step', async () => {
+            state.currentStep = 2;
+            await goToStep(2);
+            expect(state.currentStep).toBe(2);
+        });
+    });
+});
diff --git a/tests/js/upload-control.test.js b/tests/js/upload-control.test.js
new file mode 100644
index 0000000..401e366
--- /dev/null
+++ b/tests/js/upload-control.test.js
@@ -0,0 +1,81 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { resetUpload } from '../../app/static/js/modules/upload-control.js';
+import state from '../../app/static/js/modules/state.js';
+
+describe('upload-control', () => {
+    beforeEach(() => {
+        state.currentJobId = 'test-job';
+        state.eventSource = null;
+        state.selectedFolderPath = '/some/path';
+        state.scanFilePaths = ['/file1.mcap'];
+        state.scanFileStatuses = [{ path: '/file1.mcap', filename: 'file1.mcap', size: 100, already_uploaded: false }];
+        state.scanTotalSize = 100;
+        state.scanFolderPath = '/some/path';
+        state.currentStep = 3;
+
+        document.body.innerHTML = `
+            <div id="upload-steps">
+                <div data-step="1"></div>
+                <div class="step-connector"></div>
+                <div data-step="2"></div>
+                <div class="step-connector"></div>
+                <div data-step="3"></div>
+                <div class="step-connector"></div>
+                <div data-step="4"></div>
+            </div>
+            <div id="step-description"></div>
+            <div id="folder-browser-panel" class="hidden"></div>
+            <div id="upload-section"></div>
+            <div id="completion-section"></div>
+            <div id="scan-results-section"></div>
+            <div id="confirm-upload-modal"></div>
+        `;
+    });
+
+    describe('resetUpload', () => {
+        it('clears the job ID', () => {
+            resetUpload();
+            expect(state.currentJobId).toBeNull();
+        });
+
+        it('clears selected folder path', () => {
+            resetUpload();
+            expect(state.selectedFolderPath).toBeNull();
+        });
+
+        it('clears scan file paths', () => {
+            resetUpload();
+            expect(state.scanFilePaths).toEqual([]);
+        });
+
+        it('clears scan file statuses and total size', () => {
+            resetUpload();
+            expect(state.scanFileStatuses).toEqual([]);
+            expect(state.scanTotalSize).toBe(0);
+            expect(state.scanFolderPath).toBeNull();
+        });
+
+        it('shows folder browser panel and hides other sections', () => {
+            resetUpload();
+
+            expect(document.getElementById('folder-browser-panel').classList.contains('hidden')).toBe(false);
+            expect(document.getElementById('upload-section').classList.contains('hidden')).toBe(true);
+            expect(document.getElementById('completion-section').classList.contains('hidden')).toBe(true);
+            expect(document.getElementById('scan-results-section').classList.contains('hidden')).toBe(true);
+            expect(document.getElementById('confirm-upload-modal').classList.contains('hidden')).toBe(true);
+        });
+
+        it('resets stepper to step 1', () => {
+            resetUpload();
+            expect(state.currentStep).toBe(1);
+        });
+
+        it('closes eventSource if open', () => {
+            let closeCalled = false;
+            state.eventSource = { close: () => { closeCalled = true; } };
+            resetUpload();
+            expect(closeCalled).toBe(true);
+            expect(state.eventSource).toBeNull();
+        });
+    });
+});
diff --git a/tests/js/upload-exec.test.js b/tests/js/upload-exec.test.js
new file mode 100644
index 0000000..4e34634
--- /dev/null
+++ b/tests/js/upload-exec.test.js
@@ -0,0 +1,102 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { updateProgressUI, showCompletionSummary } from '../../app/static/js/modules/upload-exec.js';
+import state from '../../app/static/js/modules/state.js';
+
+describe('upload-exec', () => {
+    beforeEach(() => {
+        state.currentStep = 3;
+
+        document.body.innerHTML = `
+            <div id="upload-steps">
+                <div data-step="1"></div>
+                <div class="step-connector"></div>
+                <div data-step="2"></div>
+                <div class="step-connector"></div>
+                <div data-step="3"></div>
+                <div class="step-connector"></div>
+                <div data-step="4"></div>
+            </div>
+            <div id="step-description"></div>
+            <div id="progress-percent"></div>
+            <div id="progress-bar" style="width: 0%"></div>
+            <div id="files-completed"></div>
+            <div id="files-total"></div>
+            <div id="bytes-uploaded"></div>
+            <div id="bytes-total"></div>
+            <div id="eta"></div>
+            <div id="upload-section"></div>
+            <div id="completion-section" class="hidden"></div>
+            <div id="completed-count"></div>
+            <div id="skipped-count"></div>
+            <div id="failed-count"></div>
+            <div id="total-uploaded-size"></div>
+            <div id="total-upload-time"></div>
+            <div id="avg-upload-speed"></div>
+            <div id="avg-file-time"></div>
+            <div id="completion-file-list"></div>
+        `;
+    });
+
+    describe('updateProgressUI', () => {
+        it('updates progress elements', () => {
+            updateProgressUI({
+                progress_percent: 50.5,
+                files_completed: 3,
+                total_files: 6,
+                uploaded_bytes_formatted: '15 MB',
+                total_bytes_formatted: '30 MB',
+                eta_seconds: 120,
+                files: [
+                    { filename: 'test.mcap', status: 'completed', file_size_formatted: '5 MB', progress_percent: 100 },
+                    { filename: 'test2.mcap', status: 'uploading', file_size_formatted: '5 MB', progress_percent: 50 },
+                ],
+            });
+
+            expect(document.getElementById('progress-percent').textContent).toBe('50.5');
+            expect(document.getElementById('files-completed').textContent).toBe('3');
+            expect(document.getElementById('files-total').textContent).toBe('6');
+            expect(document.getElementById('bytes-uploaded').textContent).toBe('15 MB');
+            expect(document.getElementById('bytes-total').textContent).toBe('30 MB');
+            expect(document.getElementById('eta').textContent).toBe('2m 0s');
+        });
+    });
+
+    describe('showCompletionSummary', () => {
+        it('updates completion counts', () => {
+            showCompletionSummary({
+                files: [
+                    { status: 'completed', filename: 'a.mcap', file_size_formatted: '5 MB' },
+                    { status: 'completed', filename: 'b.mcap', file_size_formatted: '3 MB' },
+                    { status: 'skipped', filename: 'c.mcap', file_size_formatted: '2 MB' },
+                    { status: 'failed', filename: 'd.mcap', file_size_formatted: '1 MB' },
+                ],
+                successfully_uploaded_bytes_formatted: '8 MB',
+                total_upload_duration_formatted: '1m 30s',
+                average_upload_speed_mbps: 42.5,
+            });
+
+            expect(document.getElementById('completed-count').textContent).toBe('2');
+            expect(document.getElementById('skipped-count').textContent).toBe('1');
+            expect(document.getElementById('failed-count').textContent).toBe('1');
+            expect(document.getElementById('total-uploaded-size').textContent).toBe('8 MB');
+            expect(document.getElementById('avg-upload-speed').textContent).toBe('42.5 Mbps');
+        });
+
+        it('sets step to 4 (complete)', () => {
+            showCompletionSummary({
+                files: [{ status: 'completed', filename: 'a.mcap', file_size_formatted: '5 MB' }],
+            });
+
+            expect(state.currentStep).toBe(4);
+        });
+
+        it('shows completion section and hides upload section', () => {
+            showCompletionSummary({
+                files: [{ status: 'completed', filename: 'a.mcap', file_size_formatted: '5 MB' }],
+            });
+
+            expect(document.getElementById('upload-section').classList.contains('hidden')).toBe(true);
+            expect(document.getElementById('completion-section').classList.contains('hidden')).toBe(false);
+        });
+    });
+});
diff --git a/tests/js/utils.test.js b/tests/js/utils.test.js
new file mode 100644
index 0000000..45070b7
--- /dev/null
+++ b/tests/js/utils.test.js
@@ -0,0 +1,109 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import { showNotification } from '../../app/static/js/modules/notify.js';
+import { formatBytes, formatEta, formatDuration } from '../../app/static/js/modules/formatters.js';
+
+describe('formatBytes', () => {
+    it('returns "0 B" for zero bytes', () => {
+        expect(formatBytes(0)).toBe('0 B');
+    });
+
+    it('formats bytes correctly', () => {
+        expect(formatBytes(500)).toBe('500 B');
+    });
+
+    it('formats kilobytes', () => {
+        expect(formatBytes(1024)).toBe('1 KB');
+        expect(formatBytes(1536)).toBe('1.5 KB');
+    });
+
+    it('formats megabytes', () => {
+        expect(formatBytes(1048576)).toBe('1 MB');
+        expect(formatBytes(1572864)).toBe('1.5 MB');
+    });
+
+    it('formats gigabytes', () => {
+        expect(formatBytes(1073741824)).toBe('1 GB');
+    });
+
+    it('formats terabytes', () => {
+        expect(formatBytes(1099511627776)).toBe('1 TB');
+    });
+});
+
+describe('formatEta', () => {
+    it('returns "Calculating..." for null/undefined', () => {
+        expect(formatEta(null)).toBe('Calculating...');
+        expect(formatEta(undefined)).toBe('Calculating...');
+    });
+
+    it('returns "Calculating..." for negative values', () => {
+        expect(formatEta(-5)).toBe('Calculating...');
+    });
+
+    it('formats seconds', () => {
+        expect(formatEta(30)).toBe('30s');
+        expect(formatEta(1)).toBe('1s');
+    });
+
+    it('formats minutes and seconds', () => {
+        expect(formatEta(90)).toBe('1m 30s');
+        expect(formatEta(125)).toBe('2m 5s');
+    });
+
+    it('formats hours and minutes', () => {
+        expect(formatEta(3661)).toBe('1h 1m');
+        expect(formatEta(7200)).toBe('2h 0m');
+    });
+});
+
+describe('formatDuration', () => {
+    it('formats sub-second durations as milliseconds', () => {
+        expect(formatDuration(0.5)).toBe('500ms');
+        expect(formatDuration(0.001)).toBe('1ms');
+    });
+
+    it('formats seconds with one decimal', () => {
+        expect(formatDuration(5.3)).toBe('5.3s');
+        expect(formatDuration(30.0)).toBe('30.0s');
+    });
+
+    it('formats minutes and seconds', () => {
+        expect(formatDuration(90)).toBe('1m 30s');
+        expect(formatDuration(125)).toBe('2m 5s');
+    });
+});
+
+describe('showNotification', () => {
+    beforeEach(() => {
+        document.body.innerHTML = '';
+    });
+
+    afterEach(() => {
+        document.body.innerHTML = '';
+    });
+
+    it('creates a notification element in the DOM', () => {
+        showNotification('Test message', 'info');
+        const notification = document.querySelector('.fixed.top-4.right-4');
+        expect(notification).not.toBeNull();
+        expect(notification.textContent).toBe('Test message');
+    });
+
+    it('applies error styling for error type', () => {
+        showNotification('Error!', 'error');
+        const notification = document.querySelector('.fixed.top-4.right-4');
+        expect(notification.classList.contains('bg-red-500')).toBe(true);
+    });
+
+    it('applies success styling for success type', () => {
+        showNotification('Success!', 'success');
+        const notification = document.querySelector('.fixed.top-4.right-4');
+        expect(notification.classList.contains('bg-green-500')).toBe(true);
+    });
+
+    it('applies info styling by default', () => {
+        showNotification('Info');
+        const notification = document.querySelector('.fixed.top-4.right-4');
+        expect(notification.classList.contains('bg-nlr-blue')).toBe(true);
+    });
+});

From 36399463bb0f5e01674cda060ef12af8ef043b03 Mon Sep 17 00:00:00 2001
From: "Simms, Andrew" <Andrew.Simms@nrel.gov>
Date: Sun, 8 Feb 2026 19:48:46 -0700
Subject: [PATCH 40/44] Actions: Add testing action

---
 .github/workflows/run_tests.yml | 62 +++++++++++++++++++++++++++++++++
 1 file changed, 62 insertions(+)
 create mode 100644 .github/workflows/run_tests.yml

diff --git a/.github/workflows/run_tests.yml b/.github/workflows/run_tests.yml
new file mode 100644
index 0000000..85c5276
--- /dev/null
+++ b/.github/workflows/run_tests.yml
@@ -0,0 +1,62 @@
+name: Run Tests
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+jobs:
+  pre-commit:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-python@v5
+        with:
+          python-version: "3.11"
+
+      - uses: pre-commit/action@v3.0.1
+
+  python:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-python@v5
+        with:
+          python-version: "3.11"
+          cache: pip
+          cache-dependency-path: |
+            requirements.txt
+            requirements-dev.txt
+
+      - name: Install dependencies
+        run: |
+          pip install -r requirements.txt
+          pip install -r requirements-dev.txt
+
+      - name: Lint
+        run: ruff check app/ tests/
+
+      - name: Type check
+        run: mypy app/
+
+      - name: Test
+        run: pytest tests/ -v
+
+  javascript:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: npm
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Lint, type check, and test
+        run: npm run check

From 2e777937eec21fa2706a222935161f03d9ff5560 Mon Sep 17 00:00:00 2001
From: "Simms, Andrew" <Andrew.Simms@nrel.gov>
Date: Sun, 8 Feb 2026 20:01:43 -0700
Subject: [PATCH 41/44] Actions: Run tests on pull requests into develop and
 main

---
 .github/workflows/run_tests.yml | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/.github/workflows/run_tests.yml b/.github/workflows/run_tests.yml
index 85c5276..5e7bb19 100644
--- a/.github/workflows/run_tests.yml
+++ b/.github/workflows/run_tests.yml
@@ -1,10 +1,18 @@
 name: Run Tests
 
 on:
-  push:
-    branches: [main]
+  # Runs when commits are pushed directly to these branches
+  # Note: we are purposly skipping push in favor of branch protection rules
+  # that require PRs to be opened against these branches. This ensures that all
+  # changes are reviewed and pass tests before being merged. This avoids
+  # running tests on every push to feature branches, which can be noisy and
+  # inefficient. Instead, tests will only run when a PR is opened or updated
+  # that targets the main or develop branches.
+  # push:
+  #   branches: [main, develop]
+  # Runs when a PR is opened/updated that wants to merge INTO these branches
   pull_request:
-    branches: [main]
+    branches: [main, develop]
 
 jobs:
   pre-commit:

From 214d0e0767c463988a36adb45c53b5fab066221c Mon Sep 17 00:00:00 2001
From: "Simms, Andrew" <Andrew.Simms@nrel.gov>
Date: Sun, 8 Feb 2026 20:04:54 -0700
Subject: [PATCH 42/44] Tests: Skip type checking for pandas

---
 pyproject.toml | 1 +
 1 file changed, 1 insertion(+)

diff --git a/pyproject.toml b/pyproject.toml
index 4f383f1..fac3601 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -45,6 +45,7 @@ module = [
     "modaq_toolkit.*",
     "moto.*",
     "flask.*",
+    "pandas.*",
 ]
 ignore_missing_imports = true
 

From 55cca8d5cfeb355cc795d7b40d49169469fc00b7 Mon Sep 17 00:00:00 2001
From: "Simms, Andrew" <Andrew.Simms@nrel.gov>
Date: Sun, 8 Feb 2026 20:08:45 -0700
Subject: [PATCH 43/44] Reqs: Add missing mcap-ros2-support req

---
 requirements.txt | 1 +
 1 file changed, 1 insertion(+)

diff --git a/requirements.txt b/requirements.txt
index 770efdd..8f31002 100644
--- a/requirements.txt
+++ b/requirements.txt
@@ -4,3 +4,4 @@ boto3-stubs[s3]>=1.34.0
 python-dotenv>=1.0.0
 gunicorn>=21.0.0
 modaq_toolkit[mcap] @ git+https://github.com/MODAQ2/MODAQ_toolkit.git
+mcap-ros2-support

From b6d232b773bc5ef24f617cadd4d586b476a54045 Mon Sep 17 00:00:00 2001
From: "Simms, Andrew" <Andrew.Simms@nrel.gov>
Date: Sun, 8 Feb 2026 20:13:10 -0700
Subject: [PATCH 44/44] Release: Prep v0.2.0 release

---
 pyproject.toml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pyproject.toml b/pyproject.toml
index fac3601..2789233 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -1,6 +1,6 @@
 [project]
 name = "modaq-upload"
-version = "0.1.0"
+version = "0.2.0"
 description = "Python/Flask web application for uploading MODAQ data to Amazon AWS S3 buckets"
 requires-python = ">=3.11"
 authors = [