From 3e69d98513be563bbf06a80d7b7d4416e36eeb0c Mon Sep 17 00:00:00 2001
From: Adam Romlein <35015390+romleiaj@users.noreply.github.com>
Date: Wed, 8 Jul 2026 10:47:30 -0400
Subject: [PATCH 1/6] Percentile stretch Image Enhancement option (#1690)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Fix spelling error, move duplicate filter IDs to a single variable

* Add percentile stretch option to 'Image Enhancements' for thermal imagery.

* Fix per-camera image enhancement state and persistence

  Each camera now maintains independent enhancement values. Viewer.vue
  loads enhancements from each camera's sub-meta instead of root meta,
  saves to the correct camera-scoped path via a per-camera debounce map,
  and flushes pending saves before switching cameras.

* Fix Vue 2 reactivity, spurious save, and percentileStretch aliasing in per-camera enhancements

* Sync image enhancement sliders when a new camera is selected

* client/platform/desktop/backend/media/

* Fix seven correctness and quality issues in display processing backend

Float32/Float64 TIFFs now use sort-based percentile instead of the
integer histogram, which collapsed sub-integer values to a single bin
and produced solid-color output silently. Uint8/Uint16 bin counts are
now type-matched (256 vs 65536).

Zero-range frames (flat field, dead sensor) now render as mid-gray;
the previous check tested only raw[0] against min, so every uniform
frame filled with black.

Cache keys now include mtimeMs so entries are invalidated when a source
file is replaced at the same path, matching the tile cache pattern.

fs.statSync replaced with await fs.stat to avoid blocking the event
loop on a per-frame hot path. The two try-catch blocks collapsed into
one with ENOENT distinguished for a 404.

Array.isArray guards added for low and high query params; duplicate
params previously passed validation and silently discarded extra values.
A low >= high check catches inverted percentile inputs at the boundary.

encodePngRgba deduplicated — exported from displayProcessing.ts and
imported by geotiffTiles.ts, removing the unused pngjs import.

* Wire percentile stretch UI: toggle/sliders in ImageEnhancements, display URL remapping in Viewer

* fix: percentile slider bounds, signed-16 histogram, per-camera URL debounce, stale isDefaultImage, TIFF lazy load, and in-flight decode dedup

* fix: derive display URL origin from rawUrl to bypass Vite proxy in Electron

* fix: stretch original TIFF via dataset id+frame, pass through non-TIFF originals

* Reuse the existing viewer when imageData URLs are swapped in place

The imageData watcher rebuilt the whole viewer via initializeViewer,
which replaces the geojs map and orphans every feature layer and event
handler other components attached to it (LayerManager annotation layers
crash with 'null.api' on redraw; calibration click handlers go dead).
An imageData change on a mounted annotator is a display-URL swap for
the same camera (percentile stretch), so rebuild only the image cache
and redraw the current frame on the existing map; drawImage already
handles dimension changes via resetMapDimensions.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

* Linting

* Change stretch to 0-1 on the low end, 99-100 on the high end, more realistic for IR data.

* disable percentile stretch on unsupported imagery

* add histogram viewer to percentile stretch

* web support for percentile stretching

* updating docs about image enhancements

* support for multicamera IR/EO importing from parent folder for electron and web

---------

Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
Co-authored-by: Bryon Lewis <Bryon.Lewis@kitware.com>
---
 client/dive-common/apispec.ts                 |  13 +-
 .../components/ControlsContainer.vue          |   2 +-
 .../ImportMultiCamAddType.vue                 |   4 +-
 .../ImportMultiCamDialog.vue                  |   2 +-
 .../ImportMultiCamSubfolders.vue              |   5 +-
 .../multicamSubfolderLayout.spec.ts           | 118 +++++-
 .../multicamSubfolderLayout.ts                | 123 ++++++-
 .../useImportMultiCamDialog.ts                |  48 ++-
 client/dive-common/components/Viewer.vue      | 344 ++++++++++++++++--
 client/package-lock.json                      |  18 -
 .../backend/media/displayProcessing.ts        | 307 ++++++++++++++++
 .../platform/desktop/backend/native/common.ts |  87 ++++-
 client/platform/desktop/backend/server.ts     | 114 ++++++
 .../desktop/backend/tiles/geotiffTiles.ts     |  30 +-
 client/platform/web-girder/App.vue            |   2 +
 .../web-girder/api/dataset.service.ts         |   6 +-
 .../platform/web-girder/api/girder.service.ts |   4 +-
 .../web-girder/api/largeImage.service.ts      |  21 ++
 .../api/waitForFolderDatasetReady.ts          |  73 +++-
 client/platform/web-girder/views/Upload.vue   |  20 +-
 client/src/components/ImageEnhancements.vue   | 251 ++++++++++++-
 client/src/components/LayerManager.vue        |  25 +-
 .../components/annotators/ImageAnnotator.vue  |  83 +++--
 .../annotators/LargeImageAnnotator.vue        |  93 ++++-
 .../components/annotators/VideoAnnotator.vue  |  10 +-
 .../annotators/useMediaController.ts          |  13 +-
 client/src/layers/BaseLayer.ts                |   3 +
 client/src/provides.ts                        |  47 ++-
 client/src/use/useImageEnhancements.ts        | 292 +++++++++++++--
 docs/Annotation-User-Interface-Overview.md    |   4 +-
 docs/DataFormats.md                           |   6 +-
 docs/Large-Image-Support.md                   |  15 +-
 docs/UI-Image-Enhancements.md                 |  70 ++++
 docs/UI-Navigation-Editing-Bar.md             |   2 +-
 docs/index.md                                 |   3 +-
 mkdocs.yml                                    |   3 +-
 server/README.md                              |   3 +-
 server/dive_server/crud_dataset.py            |  35 +-
 server/dive_utils/constants.py                |   1 +
 server/tests/test_validate_files.py           |  29 ++
 40 files changed, 2099 insertions(+), 230 deletions(-)
 create mode 100644 client/platform/desktop/backend/media/displayProcessing.ts
 create mode 100644 docs/UI-Image-Enhancements.md
 create mode 100644 server/tests/test_validate_files.py

diff --git a/client/dive-common/apispec.ts b/client/dive-common/apispec.ts
index 78c40b8ec..e8cba0276 100644
--- a/client/dive-common/apispec.ts
+++ b/client/dive-common/apispec.ts
@@ -8,6 +8,7 @@ import { Attribute } from 'vue-media-annotator/use/AttributeTypes';
 import { CustomStyle } from 'vue-media-annotator/StyleManager';
 import { AttributeTrackFilter } from 'vue-media-annotator/AttributeTrackFilterControls';
 import { ImageEnhancements } from 'vue-media-annotator/use/useImageEnhancements';
+import type { PercentileStretch } from 'vue-media-annotator/use/useImageEnhancements';
 
 type DatasetType = 'image-sequence' | 'video' | 'multi' | 'large-image';
 type MultiTrackRecord = Record<string, TrackData>;
@@ -133,9 +134,11 @@ export interface MultiCamImportFolderArgs {
   sourceList: Record<string, {
     sourcePath: string;
     trackFile: string;
+    /** Per-camera media type when cameras differ (e.g. EO JPG + IR TIFF on web). */
+    type?: 'image-sequence' | 'video' | 'large-image';
   }>; // path/track file per camera
   calibrationFile?: string; // NPZ calibation matrix file
-  type: 'image-sequence' | 'video';
+  type: 'image-sequence' | 'video' | 'large-image';
 }
 
 export interface MultiCamImportKeywordArgs {
@@ -297,6 +300,12 @@ interface Api {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   getTileURL?(itemId: string, x: number, y: number, level: number, query: Record<string, any>):
    string;
+  getTileHistogram?(itemId: string, options?: {
+    bins?: number;
+    frame?: number;
+    width?: number;
+    height?: number;
+  }): Promise<unknown>;
   importAnnotationFile(id: string, path: string, file?: File,
     additive?: boolean, additivePrepend?: string, set?: string): Promise<boolean | string[]>;
   // Desktop-only calibration persistence functions
@@ -527,3 +536,5 @@ export {
   MultiCamMedia,
   MediaImportResponse,
 };
+
+export type { PercentileStretch };
diff --git a/client/dive-common/components/ControlsContainer.vue b/client/dive-common/components/ControlsContainer.vue
index c0f135df7..1e547658b 100644
--- a/client/dive-common/components/ControlsContainer.vue
+++ b/client/dive-common/components/ControlsContainer.vue
@@ -322,7 +322,7 @@ export default defineComponent({
       <template #middle>
         <div :class="{ 'middle-content-bottom': bottomLayout }">
           <file-name-time-display
-            v-if="datasetType === 'image-sequence' || datasetType === 'large-image'"
+            v-if="datasetType === 'image-sequence' || datasetType === 'large-image' || datasetType === 'multi'"
             :class="bottomLayout ? 'filename-toolbar' : 'text-middle px-3'"
             display-type="filename"
             :truncate-filename="bottomLayout"
diff --git a/client/dive-common/components/ImportMultiCamDialog/ImportMultiCamAddType.vue b/client/dive-common/components/ImportMultiCamDialog/ImportMultiCamAddType.vue
index 4ec5617b4..1a73c7dc5 100644
--- a/client/dive-common/components/ImportMultiCamDialog/ImportMultiCamAddType.vue
+++ b/client/dive-common/components/ImportMultiCamDialog/ImportMultiCamAddType.vue
@@ -15,7 +15,7 @@ export default defineComponent({
   },
   setup(props, { emit }) {
     const newSetName = ref('');
-    const alphaNumeric = /^[a-zA-Z0-9]*$/;
+    const alphaNumeric = /^[a-zA-Z0-9_]*$/;
     const enabled = ref(false);
 
     const addNewSet = () => {
@@ -55,7 +55,7 @@ export default defineComponent({
         v-model="newSetName"
         :rules="[
           v => !!v || 'Name is required',
-          v => alphaNumeric.test(v) || 'Letters and Numbers only',
+          v => alphaNumeric.test(v) || 'Letters, numbers, and underscores only',
           v => !v.includes(' ') || 'No spaces',
           v => !nameList.includes(v) || 'No duplicate Names']"
         label="name"
diff --git a/client/dive-common/components/ImportMultiCamDialog/ImportMultiCamDialog.vue b/client/dive-common/components/ImportMultiCamDialog/ImportMultiCamDialog.vue
index 03250ba8b..cf2d03738 100644
--- a/client/dive-common/components/ImportMultiCamDialog/ImportMultiCamDialog.vue
+++ b/client/dive-common/components/ImportMultiCamDialog/ImportMultiCamDialog.vue
@@ -123,7 +123,7 @@ export default defineComponent({
         </v-alert>
       </div>
 
-      <div v-if="nextSteps && importType !== 'subfolders'">
+      <div v-if="showFinalizeStep">
         <v-alert
           type="info"
           outlined
diff --git a/client/dive-common/components/ImportMultiCamDialog/ImportMultiCamSubfolders.vue b/client/dive-common/components/ImportMultiCamDialog/ImportMultiCamSubfolders.vue
index 6b69a75a5..caebe72ba 100644
--- a/client/dive-common/components/ImportMultiCamDialog/ImportMultiCamSubfolders.vue
+++ b/client/dive-common/components/ImportMultiCamDialog/ImportMultiCamSubfolders.vue
@@ -59,8 +59,9 @@ export default defineComponent({
       class="mb-3"
     >
       Choose a parent folder with either one subfolder per camera (2 or 3 subfolders)
-      or separate video files in the folder (2 or 3 videos). Names come from the subfolder
-      or video file name (letters and numbers only).
+      or separate video files in the folder (2 or 3 videos). Subfolders without image or
+      video files are ignored. Names come from the subfolder or video file name
+      (letters, numbers, and underscores).
     </v-alert>
     <v-row
       no-gutters
diff --git a/client/dive-common/components/ImportMultiCamDialog/multicamSubfolderLayout.spec.ts b/client/dive-common/components/ImportMultiCamDialog/multicamSubfolderLayout.spec.ts
index 7307bcf43..7493eeec1 100644
--- a/client/dive-common/components/ImportMultiCamDialog/multicamSubfolderLayout.spec.ts
+++ b/client/dive-common/components/ImportMultiCamDialog/multicamSubfolderLayout.spec.ts
@@ -3,14 +3,20 @@ import { describe, expect, it } from 'vitest';
 
 import {
   applyParentPathToAssignments,
+  filterSubfolderGroupsWithMedia,
   groupFilesByImmediateSubfolder,
   groupParentFolderByCamera,
   groupRootLevelVideoFiles,
+  inferSubfolderImportType,
+  isEoSubfolderName,
+  isImageFileName,
+  isMediaFileName,
   isValidCameraName,
   isVideoFileName,
   organizeSubfolderCameras,
   orderSubfolderCameraNames,
   parentFolderLabelFromAbsolutePaths,
+  preferEoSubfolderFirst,
   preferLeftSubfolderFirst,
   pickDefaultMulticamCamera,
   sortSubfolderCameraNames,
@@ -18,12 +24,13 @@ import {
 } from './multicamSubfolderLayout';
 
 describe('isValidCameraName', () => {
-  it('accepts alphanumeric names', () => {
+  it('accepts alphanumeric names and underscores', () => {
     expect(isValidCameraName('cam1')).toBe(true);
     expect(isValidCameraName('LeftCam')).toBe(true);
+    expect(isValidCameraName('2021_EO_SHORT')).toBe(true);
   });
 
-  it('rejects spaces and punctuation', () => {
+  it('rejects spaces and punctuation other than underscore', () => {
     expect(isValidCameraName('Port Cam')).toBe(false);
     expect(isValidCameraName('cam-1')).toBe(false);
   });
@@ -132,7 +139,13 @@ describe('organizeSubfolderCameras', () => {
 
   it('rejects invalid folder names', () => {
     const result = organizeSubfolderCameras(['good', 'bad name']);
-    expect(result.error).toMatch(/letters and numbers only/);
+    expect(result.error).toMatch(/letters, numbers, and underscores only/);
+  });
+
+  it('accepts folder names with underscores', () => {
+    const result = organizeSubfolderCameras(['2021_EO_SHORT', '2021_IR_SHORT']);
+    expect(result.error).toBeNull();
+    expect(result.assignments.map((a) => a.cameraName)).toEqual(['2021_EO_SHORT', '2021_IR_SHORT']);
   });
 
   it('rejects duplicate folder names', () => {
@@ -186,6 +199,37 @@ describe('groupRootLevelVideoFiles', () => {
   });
 });
 
+describe('isImageFileName', () => {
+  it('recognizes common image extensions', () => {
+    expect(isImageFileName('frame.jpg')).toBe(true);
+    expect(isImageFileName('frame.tif')).toBe(true);
+    expect(isImageFileName('notes.txt')).toBe(false);
+  });
+});
+
+describe('isMediaFileName', () => {
+  it('selects image or video extensions based on media type', () => {
+    expect(isMediaFileName('frame.jpg', 'image-sequence')).toBe(true);
+    expect(isMediaFileName('clip.mp4', 'video')).toBe(true);
+    expect(isMediaFileName('clip.mp4', 'image-sequence')).toBe(false);
+    expect(isMediaFileName('transform.h5', 'image-sequence')).toBe(false);
+  });
+});
+
+describe('filterSubfolderGroupsWithMedia', () => {
+  const mk = (path: string) => ({ webkitRelativePath: path, name: path.split('/').pop() } as File);
+
+  it('drops subfolders that only contain non-media files', () => {
+    const groups = groupFilesByImmediateSubfolder([
+      mk('example_seal_data/2021_EO_SHORT/a.jpg'),
+      mk('example_seal_data/2021_IR_SHORT/a.tif'),
+      mk('example_seal_data/transformations/Kotz.h5'),
+    ], 'example_seal_data');
+    const filtered = filterSubfolderGroupsWithMedia(groups, 'image-sequence');
+    expect([...filtered.keys()].sort()).toEqual(['2021_EO_SHORT', '2021_IR_SHORT']);
+  });
+});
+
 describe('groupParentFolderByCamera', () => {
   const mk = (path: string) => ({ webkitRelativePath: path, name: path.split('/').pop() } as File);
 
@@ -194,7 +238,7 @@ describe('groupParentFolderByCamera', () => {
       mk('set/left/a.mp4'),
       mk('set/right/b.mp4'),
       mk('set/left_cam.mp4'),
-    ], { allowRootLevelVideos: true }, 'set');
+    ], { allowRootLevelVideos: true, mediaType: 'video' }, 'set');
     expect([...groups.keys()].sort()).toEqual(['left', 'right']);
   });
 
@@ -216,6 +260,18 @@ describe('groupParentFolderByCamera', () => {
     ], undefined, 'stereo');
     expect(groups.size).toBe(0);
   });
+
+  it('ignores non-media subfolders when discovering cameras', () => {
+    const groups = groupParentFolderByCamera([
+      mk('example_seal_data/2021_EO_SHORT/a.jpg'),
+      mk('example_seal_data/2021_IR_SHORT/a.tif'),
+      mk('example_seal_data/transformations/Kotz.h5'),
+    ], { mediaType: 'image-sequence' }, 'example_seal_data');
+    expect([...groups.keys()].sort()).toEqual(['2021_EO_SHORT', '2021_IR_SHORT']);
+    const organized = organizeSubfolderCameras([...groups.keys()]);
+    expect(organized.error).toBeNull();
+    expect(organized.assignments.map((a) => a.cameraName)).toEqual(['2021_EO_SHORT', '2021_IR_SHORT']);
+  });
 });
 
 describe('groupFilesByImmediateSubfolder', () => {
@@ -270,6 +326,60 @@ describe('sortSubfolderCameraNames', () => {
   });
 });
 
+describe('preferEoSubfolderFirst', () => {
+  it('moves EO-named folders before IR and others', () => {
+    expect(preferEoSubfolderFirst(['2021_IR_SHORT', '2021_EO_SHORT'])).toEqual([
+      '2021_EO_SHORT',
+      '2021_IR_SHORT',
+    ]);
+  });
+
+  it('leaves order unchanged when EO is already first', () => {
+    expect(preferEoSubfolderFirst(['2021_EO_SHORT', '2021_IR_SHORT'])).toEqual([
+      '2021_EO_SHORT',
+      '2021_IR_SHORT',
+    ]);
+  });
+});
+
+describe('pickDefaultMulticamCamera EO/IR', () => {
+  it('prefers EO as default display when present', () => {
+    expect(pickDefaultMulticamCamera(['2021_IR_SHORT', '2021_EO_SHORT'])).toBe('2021_EO_SHORT');
+  });
+});
+
+describe('inferSubfolderImportType', () => {
+  const mk = (name: string) => ({ name } as File);
+
+  it('uses large-image for all-TIFF subfolders on web', () => {
+    expect(inferSubfolderImportType([
+      mk('a.tif'),
+      mk('b.tiff'),
+    ], { largeImageForTiff: true })).toBe('large-image');
+  });
+
+  it('keeps image-sequence for mixed or JPG folders', () => {
+    expect(inferSubfolderImportType([
+      mk('a.jpg'),
+      mk('b.jpg'),
+    ], { largeImageForTiff: true })).toBe('image-sequence');
+    expect(inferSubfolderImportType([
+      mk('a.tif'),
+      mk('b.jpg'),
+    ], { largeImageForTiff: true })).toBe('image-sequence');
+  });
+});
+
+describe('organizeSubfolderCameras seal example', () => {
+  it('orders EO before IR and picks EO as default', () => {
+    const result = organizeSubfolderCameras(['2021_IR_SHORT', '2021_EO_SHORT']);
+    expect(result.error).toBeNull();
+    expect(result.assignments.map((a) => a.cameraName)).toEqual(['2021_EO_SHORT', '2021_IR_SHORT']);
+    expect(result.defaultDisplay).toBe('2021_EO_SHORT');
+    expect(isEoSubfolderName(result.defaultDisplay)).toBe(true);
+  });
+});
+
 describe('preferLeftSubfolderFirst', () => {
   it('moves an exact "left" folder to the front', () => {
     expect(preferLeftSubfolderFirst(['right', 'left'])).toEqual(['left', 'right']);
diff --git a/client/dive-common/components/ImportMultiCamDialog/multicamSubfolderLayout.ts b/client/dive-common/components/ImportMultiCamDialog/multicamSubfolderLayout.ts
index 17312cc3f..015c3bfc3 100644
--- a/client/dive-common/components/ImportMultiCamDialog/multicamSubfolderLayout.ts
+++ b/client/dive-common/components/ImportMultiCamDialog/multicamSubfolderLayout.ts
@@ -19,7 +19,21 @@ export interface OrganizeSubfolderCamerasResult {
 }
 
 /** Same rules as manual "Add Camera" in ImportMultiCamDialog/ImportMultiCamAddType. */
-export const CAMERA_NAME_PATTERN = /^[a-zA-Z0-9]+$/;
+export const CAMERA_NAME_PATTERN = /^[a-zA-Z0-9_]+$/;
+
+/** Image extensions accepted for parent-folder subfolder discovery (aligned with desktop import). */
+export const fileImageTypes = [
+  'png',
+  'jpg',
+  'jpeg',
+  'gif',
+  'tif',
+  'tiff',
+  'bmp',
+  'sgi',
+  'pgm',
+  'avif',
+];
 
 /** Preferred camera order when subfolders use these names (case-insensitive). */
 export const PREFERRED_SUBFOLDER_ORDER = ['STAR', 'CENTER', 'PORT'] as const;
@@ -27,6 +41,53 @@ export const PREFERRED_SUBFOLDER_ORDER = ['STAR', 'CENTER', 'PORT'] as const;
 /** Camera names that should be the default display when present (case-insensitive). */
 export const DEFAULT_DISPLAY_NAME_ALIASES = ['center', 'middle'] as const;
 
+export function isTiffFileName(fileName: string): boolean {
+  const parts = fileName.split('.');
+  if (parts.length < 2) {
+    return false;
+  }
+  const ext = parts.pop()?.toLowerCase() ?? '';
+  return ext === 'tif' || ext === 'tiff';
+}
+
+/** True when the subfolder/camera name denotes an electro-optical (EO) sensor. */
+export function isEoSubfolderName(name: string): boolean {
+  return /(^|_)EO(_|$)/i.test(name);
+}
+
+/** True when the subfolder/camera name denotes an infrared (IR) sensor. */
+export function isIrSubfolderName(name: string): boolean {
+  return /(^|_)IR(_|$)/i.test(name);
+}
+
+/** Move an EO-named folder to the front when present (before IR and other cameras). */
+export function preferEoSubfolderFirst(names: string[]): string[] {
+  const eoIndex = names.findIndex((name) => isEoSubfolderName(name));
+  if (eoIndex <= 0) {
+    return names;
+  }
+  const eo = names[eoIndex];
+  return [eo, ...names.filter((_, index) => index !== eoIndex)];
+}
+
+/**
+ * Infer import type for one camera subfolder. On web, all-TIFF folders become large-image
+ * so 16-bit tiles and percentile stretch work in the viewer.
+ */
+export function inferSubfolderImportType(
+  files: Pick<File, 'name'>[],
+  options?: { largeImageForTiff?: boolean },
+): 'image-sequence' | 'large-image' {
+  const media = filterMediaFiles(files, 'image-sequence');
+  if (!media.length) {
+    return 'image-sequence';
+  }
+  if (options?.largeImageForTiff && media.every((file) => isTiffFileName(file.name))) {
+    return 'large-image';
+  }
+  return 'image-sequence';
+}
+
 /**
  * Pick the default multicam display camera: prefer "center" / "middle", else the middle
  * camera in display order (for 3 cameras: index 1; for 2: index 0).
@@ -45,6 +106,11 @@ export function pickDefaultMulticamCamera(
     return byAlias;
   }
 
+  const eo = cameraNames.find((name) => isEoSubfolderName(name));
+  if (eo) {
+    return eo;
+  }
+
   if (options?.preferLeftForStereo) {
     const left = cameraNames.find((name) => name.toLowerCase() === 'left');
     if (left) {
@@ -110,9 +176,9 @@ export function orderSubfolderCameraNames(
     });
   }
   if (options?.preferLeftFirst) {
-    return preferLeftSubfolderFirst(ordered);
+    ordered = preferLeftSubfolderFirst(ordered);
   }
-  return ordered;
+  return preferEoSubfolderFirst(ordered);
 }
 
 export function isValidCameraName(name: string): boolean {
@@ -173,7 +239,7 @@ export function organizeSubfolderCameras(
     return {
       ...empty,
       error: (
-        `Subfolder names must be letters and numbers only (no spaces): ${invalid.join(', ')}. `
+        `Subfolder names must be letters, numbers, and underscores only (no spaces): ${invalid.join(', ')}. `
         + 'Rename folders on disk or edit camera names after import.'
       ),
     };
@@ -288,6 +354,44 @@ export function isVideoFileName(fileName: string): boolean {
   return fileVideoTypes.includes(ext);
 }
 
+export function isImageFileName(fileName: string): boolean {
+  const parts = fileName.split('.');
+  if (parts.length < 2) {
+    return false;
+  }
+  const ext = parts.pop()?.toLowerCase() ?? '';
+  return fileImageTypes.includes(ext);
+}
+
+export function isMediaFileName(
+  fileName: string,
+  mediaType: 'image-sequence' | 'video',
+): boolean {
+  return mediaType === 'video' ? isVideoFileName(fileName) : isImageFileName(fileName);
+}
+
+export function filterMediaFiles(
+  fileList: Pick<File, 'name'>[],
+  mediaType: 'image-sequence' | 'video',
+): Pick<File, 'name'>[] {
+  return fileList.filter((file) => isMediaFileName(file.name, mediaType));
+}
+
+/** Drop subfolder groups that do not contain importable image or video files. */
+export function filterSubfolderGroupsWithMedia(
+  groups: Map<string, File[]>,
+  mediaType: 'image-sequence' | 'video',
+): Map<string, File[]> {
+  const filtered = new Map<string, File[]>();
+  groups.forEach((files, folderName) => {
+    const mediaFiles = filterMediaFiles(files, mediaType) as File[];
+    if (mediaFiles.length) {
+      filtered.set(folderName, mediaFiles);
+    }
+  });
+  return filtered;
+}
+
 /** Display label for a video camera in parent-folder import (includes file extension when known). */
 export function subfolderVideoDisplayLabel(
   sourcePath: string,
@@ -339,10 +443,17 @@ export function groupRootLevelVideoFiles(
  */
 export function groupParentFolderByCamera(
   fileList: File[],
-  options?: { allowRootLevelVideos?: boolean },
+  options?: {
+    allowRootLevelVideos?: boolean;
+    mediaType?: 'image-sequence' | 'video';
+  },
   root = '',
 ): Map<string, File[]> {
-  const subfolderGroups = groupFilesByImmediateSubfolder(fileList, root);
+  const mediaType = options?.mediaType ?? 'image-sequence';
+  const subfolderGroups = filterSubfolderGroupsWithMedia(
+    groupFilesByImmediateSubfolder(fileList, root),
+    mediaType,
+  );
   if (subfolderGroups.size >= 2) {
     return subfolderGroups;
   }
diff --git a/client/dive-common/components/ImportMultiCamDialog/useImportMultiCamDialog.ts b/client/dive-common/components/ImportMultiCamDialog/useImportMultiCamDialog.ts
index df5478d47..14da8fce8 100644
--- a/client/dive-common/components/ImportMultiCamDialog/useImportMultiCamDialog.ts
+++ b/client/dive-common/components/ImportMultiCamDialog/useImportMultiCamDialog.ts
@@ -18,6 +18,7 @@ import {
   applyParentPathToAssignments,
   commonPathPrefix,
   groupParentFolderByCamera,
+  inferSubfolderImportType,
   isValidCameraName,
   organizeSubfolderCameras,
   parentFolderLabelFromAbsolutePaths,
@@ -60,7 +61,11 @@ export function useImportMultiCamDialog(
     findParentFolderCalibrationFile,
   } = useApi();
   const importType: Ref<MulticamImportType> = ref('');
-  const folderList: Ref<Record<string, { sourcePath: string; trackFile: string }>> = ref({});
+  const folderList: Ref<Record<string, {
+    sourcePath: string;
+    trackFile: string;
+    type?: DatasetType;
+  }>> = ref({});
   const parentFolderName = ref('');
   const subfolderLayoutLabel = ref('');
   const keywordFolder = ref('');
@@ -272,6 +277,19 @@ export function useImportMultiCamDialog(
     return false;
   });
 
+  const showFinalizeStep = computed(() => {
+    if (importType.value === 'subfolders') {
+      return false;
+    }
+    if (importType.value === 'multi') {
+      return camerasReady.value;
+    }
+    if (importType.value === 'keyword') {
+      return nextSteps.value;
+    }
+    return false;
+  });
+
   async function openParentFolder() {
     const ret = await openFromDisk(props.dataType, true);
     if (ret.canceled) {
@@ -295,6 +313,7 @@ export function useImportMultiCamDialog(
         parentPath = ret.root || commonPathPrefix(paths);
         grouped = groupParentFolderByCamera(ret.fileList, {
           allowRootLevelVideos: props.dataType === VideoType,
+          mediaType,
         }, parentPath);
         folderNames = [...grouped.keys()];
       } else {
@@ -374,7 +393,13 @@ export function useImportMultiCamDialog(
             files,
           ),
         );
-        Vue.set(folderList.value, cameraName, { sourcePath, trackFile: '' });
+        Vue.set(folderList.value, cameraName, {
+          sourcePath,
+          trackFile: '',
+          type: props.registerSubfolderCameras && props.dataType !== VideoType
+            ? inferSubfolderImportType(files, { largeImageForTiff: true })
+            : props.dataType,
+        });
         // eslint-disable-next-line no-await-in-loop -- import each camera media sequentially
         const mediaPayload = await props.importMedia(sourcePath);
         Vue.set(pendingImportPayloads.value, cameraName, mediaPayload);
@@ -393,7 +418,7 @@ export function useImportMultiCamDialog(
       return;
     }
     if (!isValidCameraName(newKey)) {
-      throw new Error('Camera name must be letters and numbers only');
+      throw new Error('Camera name must be letters, numbers, and underscores only');
     }
     if (folderList.value[newKey]) {
       throw new Error(`Camera name "${newKey}" already exists`);
@@ -496,6 +521,13 @@ export function useImportMultiCamDialog(
         }
         folderList.value[folder].trackFile = '';
         const { sourcePath } = folderList.value[folder];
+        if (props.registerSubfolderCameras && ret.fileList?.length) {
+          props.registerSubfolderCameras([{
+            cameraName: folder,
+            sourcePath,
+            files: ret.fileList,
+          }]);
+        }
         Vue.set(
           pendingImportPayloads.value,
           folder,
@@ -564,7 +596,12 @@ export function useImportMultiCamDialog(
       const sourceList: MultiCamImportFolderArgs['sourceList'] = {};
       orderedCameraKeys.value.forEach((key) => {
         if (folderList.value[key]) {
-          sourceList[key] = folderList.value[key];
+          const { sourcePath, trackFile, type } = folderList.value[key];
+          sourceList[key] = {
+            sourcePath,
+            trackFile,
+            ...(type ? { type } : {}),
+          };
         }
       });
       const args: MultiCamImportFolderArgs = {
@@ -593,7 +630,7 @@ export function useImportMultiCamDialog(
   ];
 
   function syncSuggestedDatasetNameFromCameraPaths() {
-    if (!listParentFolderCameras || importType.value !== 'multi') {
+    if (importType.value !== 'multi') {
       return;
     }
     const paths = Object.values(folderList.value)
@@ -685,6 +722,7 @@ export function useImportMultiCamDialog(
     datasetNameRules,
     errorMessage,
     nextSteps,
+    showFinalizeStep,
     open,
     openParentFolder,
     prepForImport,
diff --git a/client/dive-common/components/Viewer.vue b/client/dive-common/components/Viewer.vue
index 83a157ed2..646b3b1fd 100644
--- a/client/dive-common/components/Viewer.vue
+++ b/client/dive-common/components/Viewer.vue
@@ -1,7 +1,7 @@
 <script lang="ts">
 import {
   defineComponent, ref, toRef, computed, Ref,
-  reactive, watch, inject, provide, nextTick, onBeforeUnmount, PropType,
+  reactive, watch, inject, provide, nextTick, onBeforeUnmount, PropType, set as VueSet,
 } from 'vue';
 import type { Vue } from 'vue/types/vue';
 import type Vuetify from 'vuetify/lib';
@@ -62,6 +62,18 @@ import type {
 import clientSettingsSetup, { clientSettings, isStereoInteractiveModeEnabled } from 'dive-common/store/settings';
 import { useApi, FrameImage, DatasetType } from 'dive-common/apispec';
 import { orderedMultiCamCameraNames } from 'dive-common/multicamDisplay';
+import {
+  computeOutputs,
+  computeIsDefault,
+  defaultImageEnhancements,
+  effectiveImageEnhancements,
+  ImageEnhancements,
+  resolvePercentileStretchSupported,
+  parseGirderHistogramResponse,
+  girderHistogramToPercentileHistogram,
+  PercentileHistogram,
+  PercentileStretch,
+} from 'vue-media-annotator/use/useImageEnhancements';
 import { usePrompt } from 'dive-common/vue-utilities/prompt-service';
 import context from 'dive-common/store/context';
 import { MarkChangesPendingFilter } from 'vue-media-annotator/BaseFilterControls';
@@ -157,13 +169,15 @@ export default defineComponent({
     } = useMediaController();
     const { time, updateTime, initialize: initTime } = useTimeObserver();
     const imageData = ref({ singleCam: [] } as Record<string, FrameImage[]>);
+    const rawImageData = ref({ singleCam: [] } as Record<string, FrameImage[]>);
     const datasetType: Ref<DatasetType> = ref('image-sequence');
+    const cameraTypesByCamera: Ref<Record<string, DatasetType>> = ref({});
     const datasetName = ref('');
     const subType = ref(null as string | null);
     const saveInProgress = ref(false);
     const videoUrl: Ref<Record<string, string>> = ref({});
     const {
-      loadDetections, loadMetadata, saveMetadata, getTiles, getTileURL,
+      loadDetections, loadMetadata, saveMetadata, getTiles, getTileURL, getTileHistogram,
     } = useApi();
     const progress = reactive({
       // Loaded flag prevents annotator window from populating
@@ -291,12 +305,29 @@ export default defineComponent({
 
     const {
       imageEnhancements,
-      imageEnhancementOutputs,
-      isDefaultImage,
+      imageEnhancementsByCamera,
+      percentileStretchSupported,
+      percentileHistogram,
+      percentileHistogramLoading,
       setImageEnhancements,
       setSVGFilters,
+      setPercentileStretchSupported,
+      setPercentileHistogram,
+      setPercentileHistogramLoading,
     } = useImageEnhancements();
 
+    const isDesktopApp = typeof window !== 'undefined' && 'diveDesktop' in window;
+    const supportsLargeImageTileStretch = !!getTileHistogram;
+    const percentileStretchSupportedByCamera: Ref<Record<string, boolean>> = ref({});
+
+    function cameraSupportsPercentileStretch(camera: string): boolean {
+      return percentileStretchSupportedByCamera.value[camera] ?? false;
+    }
+
+    function syncPercentileStretchSupported(camera: string) {
+      setPercentileStretchSupported(cameraSupportsPercentileStretch(camera));
+    }
+
     const segmentationRecipe = new SegmentationPointClick();
     const segmentationCursorLoading = computed(
       () => segmentationRecipe.loading.value || segmentationRecipe.predicting.value,
@@ -616,14 +647,196 @@ export default defineComponent({
       });
     }
 
-    function saveImageEnhancements() {
-      saveMetadata(datasetId.value, {
-        imageEnhancements: imageEnhancements.value,
-      });
+    const debouncedSaves: Record<string, ReturnType<typeof debounce>> = {};
+
+    function getCameraId(camera: string): string {
+      return multiCamList.value.length > 1
+        ? `${baseMulticamDatasetId.value}/${camera}`
+        : datasetId.value;
+    }
+
+    function getDebouncedSave(camera: string) {
+      if (!debouncedSaves[camera]) {
+        debouncedSaves[camera] = debounce(
+          () => saveMetadata(
+            getCameraId(camera),
+            { imageEnhancements: imageEnhancementsByCamera.value[camera] },
+          ),
+          1000,
+          { trailing: true },
+        );
+      }
+      return debouncedSaves[camera];
+    }
+
+    function toDisplayUrl(
+      rawUrl: string,
+      camera: string,
+      frame: number,
+      low: number,
+      high: number,
+    ): string {
+      // The backend resolves the ORIGINAL source image from (dataset id, frame index)
+      // rather than the transcoded path in rawUrl, so it can stretch the original 16-bit
+      // TIFF instead of the 8-bit PNG that import-time transcoding produced.
+      // For desktop the raw URL is absolute (http://127.0.0.1:PORT/api/media?path=...).
+      // Reuse its origin so requests go directly to the Express backend, not through the
+      // Vite proxy which doesn't know the randomly-assigned backend port.
+      let apiBase = '/api';
+      try {
+        const parsed = new URL(rawUrl);
+        apiBase = `${parsed.origin}/api`;
+      } catch { /* rawUrl is relative (web platform) — keep /api */ }
+      const id = encodeURIComponent(getCameraId(camera));
+      return `${apiBase}/media/display?id=${id}&frame=${frame}&low=${low}&high=${high}`;
+    }
+
+    function toHistogramUrl(
+      rawUrl: string,
+      camera: string,
+      frame: number,
+      low: number,
+      high: number,
+    ): string {
+      let apiBase = '/api';
+      try {
+        const parsed = new URL(rawUrl);
+        apiBase = `${parsed.origin}/api`;
+      } catch { /* rawUrl is relative (web platform) — keep /api */ }
+      const id = encodeURIComponent(getCameraId(camera));
+      return `${apiBase}/media/histogram?id=${id}&frame=${frame}&low=${low}&high=${high}`;
+    }
+
+    const previousStretchByCam: Record<string, string> = {};
+
+    function stretchKey(camera: string): string {
+      const enh = imageEnhancementsByCamera.value[camera];
+      const effective = effectiveImageEnhancements(
+        enh ?? defaultImageEnhancements,
+        cameraSupportsPercentileStretch(camera),
+      );
+      const s = effective.percentileStretch;
+      return s ? `${s.lowPercentile}:${s.highPercentile}` : 'none';
+    }
+
+    function applyDisplayUrls(camera: string) {
+      const raw = rawImageData.value[camera] ?? [];
+      const enh = imageEnhancementsByCamera.value[camera];
+      const effective = effectiveImageEnhancements(
+        enh ?? defaultImageEnhancements,
+        cameraSupportsPercentileStretch(camera),
+      );
+      let frames: FrameImage[];
+      if (effective.percentileStretch) {
+        const { lowPercentile, highPercentile } = effective.percentileStretch;
+        frames = raw.map((item, index) => ({
+          ...item,
+          url: toDisplayUrl(item.url, camera, index, lowPercentile, highPercentile),
+        }));
+      } else {
+        frames = raw;
+      }
+      if (imageData.value[camera] !== frames) {
+        VueSet(imageData.value, camera, frames);
+      }
+      previousStretchByCam[camera] = stretchKey(camera);
+    }
+
+    let histogramRequestToken = 0;
+
+    async function fetchSelectedCameraHistogram() {
+      const camera = selectedCamera.value;
+      const frame = time.frame.value;
+      const rawFrames = rawImageData.value[camera] ?? [];
+      if (!progress.loaded || !cameraSupportsPercentileStretch(camera) || frame < 0 || frame >= rawFrames.length) {
+        histogramRequestToken += 1;
+        setPercentileHistogram(null);
+        setPercentileHistogramLoading(false);
+        return;
+      }
+      const rawFrame = rawFrames[frame];
+      if (!rawFrame?.url) {
+        histogramRequestToken += 1;
+        setPercentileHistogram(null);
+        setPercentileHistogramLoading(false);
+        return;
+      }
+      const requestToken = histogramRequestToken + 1;
+      histogramRequestToken = requestToken;
+      setPercentileHistogramLoading(true);
+      try {
+        const cameraType = cameraTypesByCamera.value[camera] ?? datasetType.value;
+        if (cameraType === 'large-image' && rawFrame.id && getTileHistogram) {
+          const response = await getTileHistogram(rawFrame.id, { bins: 256 });
+          if (histogramRequestToken !== requestToken) return;
+          setPercentileHistogram(
+            girderHistogramToPercentileHistogram(parseGirderHistogramResponse(response)),
+          );
+          return;
+        }
+        // Bins depend only on the source frame; percentile markers are derived client-side.
+        const response = await fetch(toHistogramUrl(rawFrame.url, camera, frame, 1, 99));
+        if (!response.ok) {
+          throw new Error(`Histogram request failed with status ${response.status}`);
+        }
+        const payload = await response.json() as PercentileHistogram;
+        if (histogramRequestToken !== requestToken) return;
+        setPercentileHistogram(payload);
+      } catch {
+        if (histogramRequestToken !== requestToken) return;
+        setPercentileHistogram(null);
+      } finally {
+        if (histogramRequestToken === requestToken) {
+          setPercentileHistogramLoading(false);
+        }
+      }
+    }
+
+    const debouncedApplyUrlsByCam: Record<string, ReturnType<typeof debounce>> = {};
+    const debouncedFetchHistogram = debounce(fetchSelectedCameraHistogram, 200, { trailing: true });
+
+    function getDebouncedApplyDisplayUrls(camera: string) {
+      if (!debouncedApplyUrlsByCam[camera]) {
+        debouncedApplyUrlsByCam[camera] = debounce(applyDisplayUrls, 500, { trailing: true });
+      }
+      return debouncedApplyUrlsByCam[camera];
     }
-    const debouncedSaveImageEnhancements = debounce(saveImageEnhancements, 1000, { trailing: true });
 
-    watch(imageEnhancements, debouncedSaveImageEnhancements, { deep: true });
+    watch(imageEnhancements, () => {
+      const camera = selectedCamera.value;
+      VueSet(imageEnhancementsByCamera.value, camera, imageEnhancements.value);
+      getDebouncedSave(camera)();
+
+      const current = stretchKey(camera);
+      const previous = previousStretchByCam[camera] ?? 'none';
+      if (current !== previous) {
+        const isToggle = (current === 'none') !== (previous === 'none');
+        if (isToggle) {
+          getDebouncedApplyDisplayUrls(camera).cancel();
+          applyDisplayUrls(camera);
+        } else {
+          getDebouncedApplyDisplayUrls(camera)(camera);
+        }
+      }
+    }, { deep: true });
+
+    watch(selectedCamera, (newCam, oldCam) => {
+      debouncedSaves[oldCam]?.flush();
+      debouncedFetchHistogram.cancel();
+      setImageEnhancements(
+        imageEnhancementsByCamera.value[newCam] ?? { ...defaultImageEnhancements },
+      );
+      syncPercentileStretchSupported(newCam);
+      fetchSelectedCameraHistogram().catch(() => {});
+      // cancel the save that watch(imageEnhancements) schedules when setImageEnhancements
+      // replaces the ref — loading a camera's stored state is not a user-initiated change
+      nextTick(() => { debouncedSaves[newCam]?.cancel(); });
+    });
+
+    watch(
+      [() => time.frame.value, percentileStretchSupported],
+      () => { debouncedFetchHistogram(); },
+    );
 
     // Auto-save annotations when enabled, but never while editing a track.
     // Delay is configurable in settings and applied dynamically.
@@ -917,11 +1130,10 @@ export default defineComponent({
         }
         trackFilters.setConfidenceFilters(meta.confidenceFilters);
         trackFilters.setTimeFilters(meta.timeFilters ?? null);
-        if (meta.imageEnhancements) {
-          setImageEnhancements(meta.imageEnhancements);
-        }
+        /* imageEnhancements are loaded per-camera below */
         datasetName.value = meta.name;
         subType.value = meta.subType || null;
+        datasetType.value = meta.type as DatasetType;
         initTime({
           frameRate: meta.fps,
           originalFps: meta.originalFps || null,
@@ -934,9 +1146,25 @@ export default defineComponent({
           }
           // eslint-disable-next-line no-await-in-loop
           const subCameraMeta = await loadMetadata(cameraId);
-          datasetType.value = subCameraMeta.type as DatasetType;
+          VueSet(cameraTypesByCamera.value, camera, subCameraMeta.type as DatasetType);
+          if (multiCamList.value.length <= 1) {
+            datasetType.value = subCameraMeta.type as DatasetType;
+          }
 
-          imageData.value[camera] = cloneDeep(subCameraMeta.imageData) as FrameImage[];
+          VueSet(imageEnhancementsByCamera.value, camera, subCameraMeta.imageEnhancements
+            ? { ...subCameraMeta.imageEnhancements as ImageEnhancements }
+            : { ...defaultImageEnhancements });
+          VueSet(
+            percentileStretchSupportedByCamera.value,
+            camera,
+            resolvePercentileStretchSupported(
+              subCameraMeta,
+              isDesktopApp,
+              supportsLargeImageTileStretch,
+            ),
+          );
+          VueSet(rawImageData.value, camera, cloneDeep(subCameraMeta.imageData) as FrameImage[]);
+          applyDisplayUrls(camera);
           if (subCameraMeta.videoUrl) {
             videoUrl.value[camera] = subCameraMeta.videoUrl;
           }
@@ -1042,7 +1270,12 @@ export default defineComponent({
         if (meta.attributeTrackFilters) {
           trackFilters.loadTrackAttributesFilter(Object.values(meta.attributeTrackFilters));
         }
+        setImageEnhancements(
+          imageEnhancementsByCamera.value[selectedCamera.value] ?? { ...defaultImageEnhancements },
+        );
+        syncPercentileStretchSupported(selectedCamera.value);
         progress.loaded = true;
+        fetchSelectedCameraHistogram().catch(() => {});
         // If multiCam add Tools and remove group Tools
         if (cameraStore.camMap.value.size > 1) {
           context.unregister({
@@ -1078,6 +1311,17 @@ export default defineComponent({
     const reloadAnnotations = async () => {
       progress.loaded = false;
       discardChanges();
+      Object.values(debouncedSaves).forEach((fn) => fn.cancel());
+      Object.keys(debouncedSaves).forEach((k) => delete debouncedSaves[k]);
+      Object.values(debouncedApplyUrlsByCam).forEach((fn) => fn.cancel());
+      Object.keys(debouncedApplyUrlsByCam).forEach((k) => delete debouncedApplyUrlsByCam[k]);
+      Object.keys(previousStretchByCam).forEach((k) => delete previousStretchByCam[k]);
+      imageEnhancementsByCamera.value = {};
+      cameraTypesByCamera.value = {};
+      percentileStretchSupportedByCamera.value = {};
+      setPercentileStretchSupported(false);
+      setPercentileHistogram(null);
+      setPercentileHistogramLoading(false);
       cameraStore.clearAll();
       mediaControllerClear();
       await loadData();
@@ -1112,6 +1356,9 @@ export default defineComponent({
     });
     onBeforeUnmount(() => {
       debouncedAutoSave.cancel();
+      Object.values(debouncedApplyUrlsByCam).forEach((fn) => fn.cancel());
+      debouncedFetchHistogram.cancel();
+      Object.values(debouncedSaves).forEach((fn) => fn.flush());
       if (controlsRef.value) observer.unobserve(controlsRef.value.$el);
     });
 
@@ -1172,6 +1419,9 @@ export default defineComponent({
         visibleModes,
         readOnlyMode: readonlyState,
         imageEnhancements,
+        percentileStretchSupported,
+        percentileHistogram,
+        percentileHistogramLoading,
       },
       globalHandler,
       useAttributeFilters,
@@ -1326,6 +1576,40 @@ export default defineComponent({
       }
     }
 
+    function cameraAnnotatorComponent(camera: string): string {
+      const type = cameraTypesByCamera.value[camera] ?? datasetType.value;
+      if (type === 'image-sequence') {
+        return 'image-annotator';
+      }
+      if (type === 'video') {
+        return 'video-annotator';
+      }
+      return 'large-image-annotator';
+    }
+
+    function cameraEnhOutputs(camera: string) {
+      return computeOutputs(
+        imageEnhancementsByCamera.value[camera] ?? defaultImageEnhancements,
+      );
+    }
+
+    function isCameraDefault(camera: string): boolean {
+      return computeIsDefault(
+        effectiveImageEnhancements(
+          imageEnhancementsByCamera.value[camera] ?? defaultImageEnhancements,
+          cameraSupportsPercentileStretch(camera),
+        ),
+      );
+    }
+
+    function cameraPercentileStretch(camera: string): PercentileStretch | null {
+      const effective = effectiveImageEnhancements(
+        imageEnhancementsByCamera.value[camera] ?? defaultImageEnhancements,
+        cameraSupportsPercentileStretch(camera),
+      );
+      return effective.percentileStretch ?? null;
+    }
+
     return {
       /* props */
       aggregateController,
@@ -1348,6 +1632,7 @@ export default defineComponent({
       clientSettings,
       datasetName,
       datasetType,
+      cameraAnnotatorComponent,
       subType,
       editingTrack,
       editingMode,
@@ -1379,8 +1664,9 @@ export default defineComponent({
       originalFps: time.originalFps,
       context,
       readonlyState,
-      imageEnhancementOutputs,
-      isDefaultImage,
+      cameraEnhOutputs,
+      isCameraDefault,
+      cameraPercentileStretch,
       disableAnnotationFilters,
       trackStyleManager,
       visible,
@@ -1723,10 +2009,7 @@ export default defineComponent({
               @mouseup.right="changeCamera(camera, $event)"
             >
               <component
-                :is="datasetType === 'image-sequence' ? 'image-annotator'
-                  : datasetType === 'video'
-                    ? 'video-annotator'
-                    : 'large-image-annotator'"
+                :is="cameraAnnotatorComponent(camera)"
                 v-if="(imageData[camera].length || videoUrl[camera]) && progress.loaded"
                 ref="subPlaybackComponent"
                 class="fill-height"
@@ -1738,10 +2021,12 @@ export default defineComponent({
                   frameRate,
                   originalFps,
                   camera,
-                  imageEnhancementOutputs,
-                  isDefaultImage,
+                  imageEnhancementOutputs: cameraEnhOutputs(camera),
+                  isDefaultImage: isCameraDefault(camera),
                   getTiles,
                   getTileURL,
+                  percentileStretch: cameraPercentileStretch(camera),
+                  filterId: `imageEnhancements-${camera}`,
                 }"
                 @large-image-warning="$emit('large-image-warning', true)"
               >
@@ -1753,7 +2038,7 @@ export default defineComponent({
             ref="controlsRef"
             :collapsed.sync="controlsCollapsed"
             v-bind="{
-              lineChartData, eventChartData, groupChartData, datasetType, isDefaultImage,
+              lineChartData, eventChartData, groupChartData, datasetType, isDefaultImage: isCameraDefault(selectedCamera),
             }"
           />
         </div>
@@ -1821,8 +2106,7 @@ export default defineComponent({
               @mouseup.right="changeCamera(camera, $event)"
             >
               <component
-                :is="datasetType === 'image-sequence' ? 'image-annotator'
-                  : datasetType === 'video' ? 'video-annotator' : 'large-image-annotator'"
+                :is="cameraAnnotatorComponent(camera)"
                 v-if="(imageData[camera].length || videoUrl[camera]) && progress.loaded"
                 ref="subPlaybackComponent"
                 class="fill-height"
@@ -1834,10 +2118,12 @@ export default defineComponent({
                   frameRate,
                   originalFps,
                   camera,
-                  imageEnhancementOutputs,
-                  isDefaultImage,
+                  imageEnhancementOutputs: cameraEnhOutputs(camera),
+                  isDefaultImage: isCameraDefault(camera),
                   getTiles,
                   getTileURL,
+                  percentileStretch: cameraPercentileStretch(camera),
+                  filterId: `imageEnhancements-${camera}`,
                 }"
                 @large-image-warning="$emit('large-image-warning', true)"
               >
@@ -1854,7 +2140,7 @@ export default defineComponent({
             :event-chart-data="eventChartData"
             :group-chart-data="groupChartData"
             :dataset-type="datasetType"
-            :is-default-image="isDefaultImage"
+            :is-default-image="isCameraDefault(selectedCamera)"
             :client-settings="clientSettings"
             :track-filters="trackFilters"
             :attributes="attributes"
diff --git a/client/package-lock.json b/client/package-lock.json
index 0d84b5716..87537342a 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -3203,9 +3203,6 @@
         "arm"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -3227,9 +3224,6 @@
         "arm"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -3251,9 +3245,6 @@
         "arm64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -3275,9 +3266,6 @@
         "arm64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -3299,9 +3287,6 @@
         "x64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -3323,9 +3308,6 @@
         "x64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
diff --git a/client/platform/desktop/backend/media/displayProcessing.ts b/client/platform/desktop/backend/media/displayProcessing.ts
new file mode 100644
index 000000000..e80172592
--- /dev/null
+++ b/client/platform/desktop/backend/media/displayProcessing.ts
@@ -0,0 +1,307 @@
+import { fromFile } from 'geotiff';
+import PNG from 'pngjs';
+
+type RasterArray = Uint8Array | Uint16Array | Int16Array | Float32Array | Float64Array;
+
+export interface DisplayHistogram {
+  bins: number[];
+  lowValue: number;
+  highValue: number;
+  sourceMin: number;
+  sourceMax: number;
+}
+
+interface TiffImage {
+  getWidth(): number;
+  getHeight(): number;
+  readRasters(opts: Record<string, unknown>): Promise<unknown>;
+}
+interface TiffFile {
+  getImage(index?: number): Promise<TiffImage>;
+}
+
+const MAX_DISPLAY_CACHE_ENTRIES = 64;
+const HISTOGRAM_BIN_COUNT = 256;
+
+const displayPngCache = new Map<string, Buffer>();
+const displayHistogramCache = new Map<string, DisplayHistogram>();
+
+function touchDisplayCacheEntry(key: string, value: Buffer): void {
+  displayPngCache.delete(key);
+  displayPngCache.set(key, value);
+  if (displayPngCache.size > MAX_DISPLAY_CACHE_ENTRIES) {
+    const oldest = displayPngCache.keys().next().value as string | undefined;
+    if (oldest) displayPngCache.delete(oldest);
+  }
+}
+
+function touchHistogramCacheEntry(key: string, value: DisplayHistogram): void {
+  displayHistogramCache.delete(key);
+  displayHistogramCache.set(key, value);
+  if (displayHistogramCache.size > MAX_DISPLAY_CACHE_ENTRIES) {
+    const oldest = displayHistogramCache.keys().next().value as string | undefined;
+    if (oldest) displayHistogramCache.delete(oldest);
+  }
+}
+
+/** Map raster samples to display bytes by clamping to [0, 255] (no dynamic range stretch). */
+export function normalizeToU8(
+  raw: RasterArray,
+  out: Uint8Array,
+  offset = 0,
+  stride = 1,
+): void {
+  const n = Math.min(raw.length, Math.floor((out.length - offset) / stride));
+  if (n === 0) return;
+  const outView = out;
+  for (let i = 0; i < n; i += 1) {
+    outView[offset + i * stride] = Math.max(0, Math.min(255, Math.round(Number(raw[i]))));
+  }
+}
+
+/** Linearly stretch raster values from [min, max] to [0, 255]. */
+export function linearStretchToU8(
+  raw: RasterArray,
+  min: number,
+  max: number,
+): Uint8Array {
+  const out = new Uint8Array(raw.length);
+  const range = max - min;
+  if (range <= 0) {
+    out.fill(128); // flat field — no contrast, display as mid-gray
+    return out;
+  }
+  for (let i = 0; i < raw.length; i += 1) {
+    const v = (Number(raw[i]) - min) / range;
+    out[i] = Math.max(0, Math.min(255, Math.round(v * 255)));
+  }
+  return out;
+}
+
+export function encodePngRgba(width: number, height: number, rgba: Uint8Array): Buffer {
+  type PngInstance = { data: Uint8Array };
+  type PngConstructor = {
+    new(opts: { width: number; height: number }): PngInstance;
+    sync: { write(png: PngInstance): Buffer };
+  };
+  const pngModule = PNG as unknown as { PNG?: PngConstructor };
+  const PngCtor = pngModule.PNG ?? (PNG as unknown as PngConstructor);
+  const png = new PngCtor({ width, height });
+  png.data.set(rgba);
+  return PngCtor.sync.write(png);
+}
+
+function encodeGrayscalePng(pixels: Uint8Array, width: number, height: number): Buffer {
+  const rgba = new Uint8Array(width * height * 4);
+  for (let i = 0; i < pixels.length; i += 1) {
+    const v = pixels[i];
+    const dst = i * 4;
+    rgba[dst] = v;
+    rgba[dst + 1] = v;
+    rgba[dst + 2] = v;
+    rgba[dst + 3] = 255;
+  }
+  return encodePngRgba(width, height, rgba);
+}
+
+async function openTiff(tiffPath: string): Promise<TiffFile> {
+  return fromFile(tiffPath) as unknown as TiffFile;
+}
+
+/** Find the pixel values at lowPercentile and highPercentile within a single band. */
+function computeFrameBounds(
+  band: RasterArray,
+  lowPercentile: number,
+  highPercentile: number,
+): { min: number; max: number } {
+  if (band.length === 0) return { min: 0, max: 65535 };
+
+  // Float rasters and signed integers need sort-based percentile: histogram bins are
+  // indexed by value, which breaks for negatives (Int16) and loses sub-integer
+  // precision for floats.
+  if (band instanceof Float32Array || band instanceof Float64Array || band instanceof Int16Array) {
+    const sorted = band.slice().sort() as Float32Array | Float64Array;
+    const n = sorted.length;
+    const lowIdx = Math.min(n - 1, Math.floor(n * (lowPercentile / 100)));
+    const highIdx = Math.min(n - 1, Math.floor(n * (highPercentile / 100)));
+    return { min: sorted[lowIdx], max: sorted[highIdx] };
+  }
+
+  // Integer path: Uint8 → 256 bins, Uint16 → 65536 bins, indexed directly by value.
+  const binCount = band instanceof Uint8Array ? 256 : 65536;
+  const histogram = new Uint32Array(binCount);
+  for (let i = 0; i < band.length; i += 1) {
+    histogram[band[i]] += 1;
+  }
+
+  const lowTarget = Math.floor(band.length * (lowPercentile / 100));
+  const highTarget = Math.floor(band.length * (highPercentile / 100));
+
+  let min = 0;
+  let max = binCount - 1;
+  let cumulative = 0;
+  let foundMin = false;
+
+  for (let v = 0; v < binCount; v += 1) {
+    cumulative += histogram[v];
+    // `cumulative > 0` guards the lowTarget === 0 case (tiny images), where
+    // `cumulative >= 0` would otherwise pin min to bin 0 before any pixel is seen.
+    if (!foundMin && cumulative > 0 && cumulative >= lowTarget) {
+      min = v;
+      foundMin = true;
+    }
+    if (cumulative >= highTarget) {
+      max = v;
+      break;
+    }
+  }
+
+  return { min, max };
+}
+
+const inFlightDecodes = new Map<string, Promise<Buffer>>();
+const inFlightHistograms = new Map<string, Promise<DisplayHistogram>>();
+
+function computeSourceBounds(band: RasterArray): { sourceMin: number; sourceMax: number } {
+  if (band instanceof Uint8Array) return { sourceMin: 0, sourceMax: 255 };
+  if (band instanceof Uint16Array) return { sourceMin: 0, sourceMax: 65535 };
+  if (band.length === 0) return { sourceMin: 0, sourceMax: 1 };
+
+  let sourceMin = Number.POSITIVE_INFINITY;
+  let sourceMax = Number.NEGATIVE_INFINITY;
+  for (let i = 0; i < band.length; i += 1) {
+    const v = Number(band[i]);
+    if (v < sourceMin) sourceMin = v;
+    if (v > sourceMax) sourceMax = v;
+  }
+  if (!Number.isFinite(sourceMin) || !Number.isFinite(sourceMax)) {
+    return { sourceMin: 0, sourceMax: 1 };
+  }
+  return { sourceMin, sourceMax };
+}
+
+function buildHistogramBins(
+  band: RasterArray,
+  sourceMin: number,
+  sourceMax: number,
+  binCount = HISTOGRAM_BIN_COUNT,
+): number[] {
+  const bins = new Uint32Array(binCount);
+  if (band.length === 0) {
+    return Array.from(bins);
+  }
+
+  if (band instanceof Uint8Array && binCount === 256) {
+    for (let i = 0; i < band.length; i += 1) bins[band[i]] += 1;
+    return Array.from(bins);
+  }
+
+  if (band instanceof Uint16Array && binCount === 256) {
+    for (let i = 0; i < band.length; i += 1) {
+      bins[Math.floor(band[i] / 256)] += 1;
+    }
+    return Array.from(bins);
+  }
+
+  const range = sourceMax - sourceMin;
+  if (range <= 0) {
+    bins[0] = band.length;
+    return Array.from(bins);
+  }
+
+  for (let i = 0; i < band.length; i += 1) {
+    const v = Number(band[i]);
+    const normalized = (v - sourceMin) / range;
+    const idx = Math.max(0, Math.min(binCount - 1, Math.floor(normalized * (binCount - 1))));
+    bins[idx] += 1;
+  }
+
+  return Array.from(bins);
+}
+
+/**
+ * Decode a TIFF file, compute per-frame percentile bounds, apply a linear stretch,
+ * and return a grayscale PNG buffer. Cached by (path, lowPercentile, highPercentile, mtimeMs);
+ * the mtime component ensures stale entries are evicted when a file is replaced on disk.
+ * Concurrent requests for the same key share one decode promise instead of duplicating work.
+ */
+export async function getDisplayPng(
+  tiffPath: string,
+  lowPercentile: number,
+  highPercentile: number,
+  mtimeMs: number,
+): Promise<Buffer> {
+  const key = `${tiffPath}::${lowPercentile}::${highPercentile}::${mtimeMs}`;
+  const cached = displayPngCache.get(key);
+  if (cached) {
+    touchDisplayCacheEntry(key, cached);
+    return cached;
+  }
+
+  const inflight = inFlightDecodes.get(key);
+  if (inflight) return inflight;
+
+  const decodePromise = (async () => {
+    const tiff = await openTiff(tiffPath);
+    const image = await tiff.getImage();
+    const width = image.getWidth();
+    const height = image.getHeight();
+
+    const rasters = await image.readRasters({
+      samples: [0],
+      interleave: false,
+    }) as RasterArray[];
+    const band = (rasters[0] ?? new Uint8Array(0)) as RasterArray;
+
+    const { min, max } = computeFrameBounds(band, lowPercentile, highPercentile);
+    const stretched = linearStretchToU8(band, min, max);
+    const pngBuf = encodeGrayscalePng(stretched, width, height);
+    touchDisplayCacheEntry(key, pngBuf);
+    return pngBuf;
+  })().finally(() => inFlightDecodes.delete(key));
+
+  inFlightDecodes.set(key, decodePromise);
+  return decodePromise;
+}
+
+export async function getDisplayHistogram(
+  tiffPath: string,
+  lowPercentile: number,
+  highPercentile: number,
+  mtimeMs: number,
+): Promise<DisplayHistogram> {
+  const key = `${tiffPath}::${lowPercentile}::${highPercentile}::${mtimeMs}`;
+  const cached = displayHistogramCache.get(key);
+  if (cached) {
+    touchHistogramCacheEntry(key, cached);
+    return cached;
+  }
+
+  const inflight = inFlightHistograms.get(key);
+  if (inflight) return inflight;
+
+  const histogramPromise = (async () => {
+    const tiff = await openTiff(tiffPath);
+    const image = await tiff.getImage();
+    const rasters = await image.readRasters({
+      samples: [0],
+      interleave: false,
+    }) as RasterArray[];
+    const band = (rasters[0] ?? new Uint8Array(0)) as RasterArray;
+    const { min, max } = computeFrameBounds(band, lowPercentile, highPercentile);
+    const { sourceMin, sourceMax } = computeSourceBounds(band);
+    const bins = buildHistogramBins(band, sourceMin, sourceMax);
+    const payload: DisplayHistogram = {
+      bins,
+      lowValue: min,
+      highValue: max,
+      sourceMin,
+      sourceMax,
+    };
+    touchHistogramCacheEntry(key, payload);
+    return payload;
+  })().finally(() => inFlightHistograms.delete(key));
+
+  inFlightHistograms.set(key, histogramPromise);
+  return histogramPromise;
+}
diff --git a/client/platform/desktop/backend/native/common.ts b/client/platform/desktop/backend/native/common.ts
index 6939811e0..5973c13cd 100644
--- a/client/platform/desktop/backend/native/common.ts
+++ b/client/platform/desktop/backend/native/common.ts
@@ -1047,9 +1047,43 @@ function isVideoFilePath(filePath: string): boolean {
   return fileVideoTypes.includes(ext);
 }
 
+/**
+ * Return true when a subfolder contains at least one importable image or video file.
+ */
+async function subfolderContainsMedia(
+  subfolderPath: string,
+  mediaType: 'image-sequence' | 'video',
+): Promise<boolean> {
+  if (!await fs.pathExists(subfolderPath)) {
+    return false;
+  }
+  const stat = await fs.stat(subfolderPath);
+  if (!stat.isDirectory()) {
+    return mediaType === 'video' && isVideoFilePath(subfolderPath);
+  }
+  if (mediaType === 'image-sequence') {
+    const found = await findImagesInFolder(subfolderPath);
+    return found.imagePaths.length > 0;
+  }
+  const entries = await fs.readdir(subfolderPath, { withFileTypes: true });
+  for (let i = 0; i < entries.length; i += 1) {
+    const entry = entries[i];
+    if (!entry.isFile()) {
+      // eslint-disable-next-line no-continue
+      continue;
+    }
+    const fullPath = npath.join(subfolderPath, entry.name);
+    if (isVideoFilePath(fullPath)) {
+      return true;
+    }
+  }
+  return false;
+}
+
 /**
  * Discover cameras under a parent folder: immediate subfolders, or separate video files
  * in the parent when importing video and there are no subfolders.
+ * Subfolders without importable media (e.g. calibration or transform data) are skipped.
  */
 async function listParentFolderCameras(
   parentPath: string,
@@ -1058,13 +1092,22 @@ async function listParentFolderCameras(
   const subfolders = await listImmediateSubfolders(parentPath);
   const separator = parentPath.includes('\\') ? '\\' : '/';
   const normalized = parentPath.replace(/[\\/]+$/, '');
-  if (subfolders.length >= 2) {
-    return subfolders.map((name) => ({
+  const mediaSubfolders: string[] = [];
+  for (let i = 0; i < subfolders.length; i += 1) {
+    const name = subfolders[i];
+    const fullPath = `${normalized}${separator}${name}`;
+    // eslint-disable-next-line no-await-in-loop
+    if (await subfolderContainsMedia(fullPath, mediaType)) {
+      mediaSubfolders.push(name);
+    }
+  }
+  if (mediaSubfolders.length >= 2) {
+    return mediaSubfolders.map((name) => ({
       name,
       sourcePath: `${normalized}${separator}${name}`,
     }));
   }
-  if (mediaType === 'video' && subfolders.length === 0) {
+  if (mediaType === 'video' && mediaSubfolders.length === 0) {
     const children = await fs.readdir(parentPath, { withFileTypes: true });
     const videoPaths: string[] = [];
     children.forEach((entry) => {
@@ -1082,7 +1125,7 @@ async function listParentFolderCameras(
       sourcePath: fullPath,
     }));
   }
-  return subfolders.map((name) => ({
+  return mediaSubfolders.map((name) => ({
     name,
     sourcePath: `${normalized}${separator}${name}`,
   }));
@@ -1550,6 +1593,41 @@ async function getLargeImagePath(settings: Settings, datasetId: string): Promise
   }
 }
 
+/**
+ * Resolve the absolute path of the ORIGINAL (pre-transcode) image for a frame.
+ *
+ * The percentile-stretch / display path must read the original source image
+ * (e.g. a 16-bit IR TIFF), NOT the 8-bit PNG produced by import-time transcoding
+ * (`transcodedImageFiles`), which has already discarded the dynamic range the
+ * stretch is meant to recover. `imageData` URLs sent to the client point at the
+ * transcoded copies, so the client passes a frame index and we map it back to
+ * the original here. Returns null if the frame is out of range or unavailable.
+ */
+async function getDisplayImagePath(
+  settings: Settings,
+  datasetId: string,
+  frame: number,
+): Promise<string | null> {
+  try {
+    const projectDirData = await getValidatedProjectDir(settings, datasetId);
+    const meta = await loadJsonMetadata(projectDirData.metaFileAbsPath);
+    const originals = meta.originalImageFiles ?? [];
+    if (!Number.isInteger(frame) || frame < 0 || frame >= originals.length) {
+      console.warn(
+        `[display] getDisplayImagePath: frame ${frame} out of range for dataset "${datasetId}" (${originals.length} images)`,
+      );
+      return null;
+    }
+    const entry = originals[frame];
+    // originalImageFiles entries are relative to originalBasePath, except for
+    // image-list imports where they are absolute and originalBasePath is ''.
+    return npath.isAbsolute(entry) ? entry : npath.join(meta.originalBasePath, entry);
+  } catch (err) {
+    console.warn(`[display] getDisplayImagePath: error for dataset "${datasetId}":`, err);
+    return null;
+  }
+}
+
 async function openLink(url: string) {
   shell.openExternal(url);
 }
@@ -2036,6 +2114,7 @@ export {
   getProjectDir,
   getValidatedProjectDir,
   getLargeImagePath,
+  getDisplayImagePath,
   loadMetadata,
   loadJsonMetadata,
   loadAnnotationFile,
diff --git a/client/platform/desktop/backend/server.ts b/client/platform/desktop/backend/server.ts
index 11dd5fdd0..7c338e7c1 100644
--- a/client/platform/desktop/backend/server.ts
+++ b/client/platform/desktop/backend/server.ts
@@ -1,5 +1,6 @@
 import type { AddressInfo } from 'net';
 import http from 'http';
+import npath from 'path';
 
 import cors from 'cors';
 import mime from 'mime-types';
@@ -13,6 +14,7 @@ import { SaveAttributeArgs, SaveAttributeTrackFilterArgs, SaveDetectionsArgs } f
 import settings from './state/settings';
 import * as common from './native/common';
 import * as geotiffTiles from './tiles/geotiffTiles';
+import * as displayProcessing from './media/displayProcessing';
 
 const app = express();
 app.use(express.json({ limit: '250MB' }));
@@ -181,6 +183,118 @@ apirouter.get('/dataset/:id/:camera?/tiles', async (req, res, next) => {
   return null;
 });
 
+const tiffExtensions = ['.tif', '.tiff'];
+
+/**
+ * Serve a per-frame percentile stretch of an image, returned as a grayscale PNG.
+ *
+ * The stretch must run against the ORIGINAL source image (e.g. a 16-bit IR TIFF),
+ * not the 8-bit PNG produced by import-time transcoding — that copy has already
+ * lost the dynamic range the stretch recovers. The client therefore identifies the
+ * frame by (dataset id, frame index) and the original is resolved server-side.
+ *
+ * Non-TIFF originals (e.g. 8-bit EO JPEGs) have no extra range to recover, so they
+ * are streamed through as-is rather than failing — toggling stretch is a visual
+ * no-op for them instead of producing a black image.
+ */
+apirouter.get('/media/display', async (req, res, next) => {
+  const {
+    id: reqId, frame: reqFrame, low: reqLow, high: reqHigh,
+  } = req.query;
+  if (!reqId || Array.isArray(reqId) || reqFrame === undefined || Array.isArray(reqFrame)
+      || !reqLow || !reqHigh || Array.isArray(reqLow) || Array.isArray(reqHigh)) {
+    return next({ status: 400, statusMessage: 'id, frame, low, and high query params are required' });
+  }
+  const datasetId = reqId.toString();
+  const frame = parseInt(reqFrame.toString(), 10);
+  const low = parseFloat(reqLow.toString());
+  const high = parseFloat(reqHigh.toString());
+  if (Number.isNaN(frame)) {
+    return next({ status: 400, statusMessage: 'frame must be an integer' });
+  }
+  if (Number.isNaN(low) || Number.isNaN(high)) {
+    return next({ status: 400, statusMessage: 'low and high must be numbers' });
+  }
+  if (low >= high) {
+    return next({ status: 400, statusMessage: 'low must be less than high' });
+  }
+  try {
+    const filePath = await common.getDisplayImagePath(settings.get(), datasetId, frame);
+    if (!filePath) {
+      return next({ status: 404, statusMessage: `No source image for dataset ${datasetId} frame ${frame}` });
+    }
+    const stat = await fs.stat(filePath);
+    if (!stat.isFile()) {
+      return next({ status: 404, statusMessage: `Not a file: ${filePath}` });
+    }
+    // Only TIFFs carry recoverable dynamic range; pass everything else through unchanged.
+    if (!tiffExtensions.includes(npath.extname(filePath).toLowerCase())) {
+      const mimetype = mime.lookup(filePath);
+      if (mimetype) res.setHeader('Content-Type', mimetype);
+      pump(fs.createReadStream(filePath), res);
+      return null;
+    }
+    const pngBuf = await displayProcessing.getDisplayPng(filePath, low, high, stat.mtimeMs);
+    res.setHeader('Content-Type', 'image/png');
+    res.send(pngBuf);
+  } catch (err) {
+    if ((err as NodeJS.ErrnoException).code === 'ENOENT') {
+      return next({ status: 404, statusMessage: 'Source image file not found' });
+    }
+    (err as { status?: number }).status = 500;
+    next(err);
+  }
+  return null;
+});
+
+/**
+ * Return a compact histogram (256 bins) for the ORIGINAL source image frame.
+ * Bounds are computed with the same percentile parameters as /media/display.
+ */
+apirouter.get('/media/histogram', async (req, res, next) => {
+  const {
+    id: reqId, frame: reqFrame, low: reqLow, high: reqHigh,
+  } = req.query;
+  if (!reqId || Array.isArray(reqId) || reqFrame === undefined || Array.isArray(reqFrame)
+      || !reqLow || !reqHigh || Array.isArray(reqLow) || Array.isArray(reqHigh)) {
+    return next({ status: 400, statusMessage: 'id, frame, low, and high query params are required' });
+  }
+  const datasetId = reqId.toString();
+  const frame = parseInt(reqFrame.toString(), 10);
+  const low = parseFloat(reqLow.toString());
+  const high = parseFloat(reqHigh.toString());
+  if (Number.isNaN(frame)) {
+    return next({ status: 400, statusMessage: 'frame must be an integer' });
+  }
+  if (Number.isNaN(low) || Number.isNaN(high)) {
+    return next({ status: 400, statusMessage: 'low and high must be numbers' });
+  }
+  if (low >= high) {
+    return next({ status: 400, statusMessage: 'low must be less than high' });
+  }
+  try {
+    const filePath = await common.getDisplayImagePath(settings.get(), datasetId, frame);
+    if (!filePath) {
+      return next({ status: 404, statusMessage: `No source image for dataset ${datasetId} frame ${frame}` });
+    }
+    const stat = await fs.stat(filePath);
+    if (!stat.isFile()) {
+      return next({ status: 404, statusMessage: `Not a file: ${filePath}` });
+    }
+    if (!tiffExtensions.includes(npath.extname(filePath).toLowerCase())) {
+      return next({ status: 400, statusMessage: 'Histogram only supported for TIFF source images' });
+    }
+    const histogram = await displayProcessing.getDisplayHistogram(filePath, low, high, stat.mtimeMs);
+    return res.json(histogram);
+  } catch (err) {
+    if ((err as NodeJS.ErrnoException).code === 'ENOENT') {
+      return next({ status: 404, statusMessage: 'Source image file not found' });
+    }
+    (err as { status?: number }).status = 500;
+    return next(err);
+  }
+});
+
 /* STREAM media */
 apirouter.get('/media', (req, res, next) => {
   let { path } = req.query;
diff --git a/client/platform/desktop/backend/tiles/geotiffTiles.ts b/client/platform/desktop/backend/tiles/geotiffTiles.ts
index 67057afcc..34db566ba 100644
--- a/client/platform/desktop/backend/tiles/geotiffTiles.ts
+++ b/client/platform/desktop/backend/tiles/geotiffTiles.ts
@@ -12,9 +12,9 @@
 
 import fs from 'fs-extra';
 import { fromArrayBuffer, fromFile } from 'geotiff';
-import PNG from 'pngjs';
 import type { Settings } from 'platform/desktop/constants';
 import { getLargeImagePath } from '../native/common';
+import { normalizeToU8, encodePngRgba } from '../media/displayProcessing';
 
 const TILE_SIZE = 256;
 
@@ -673,21 +673,6 @@ export async function getTilePng(
   }
 }
 
-/** Map raster samples to display bytes by clamping to [0, 255] (no dynamic range stretch). */
-function normalizeToU8(
-  raw: Uint8Array | Uint16Array | Float32Array | Float64Array,
-  out: Uint8Array,
-  offset = 0,
-  stride = 1,
-): void {
-  const n = Math.min(raw.length, Math.floor((out.length - offset) / stride));
-  if (n === 0) return;
-  const outView = out;
-  for (let i = 0; i < n; i += 1) {
-    outView[offset + i * stride] = clampToByte(Number(raw[i]));
-  }
-}
-
 function normalizeInterleavedRgbToRgba(
   raw: Uint8Array | Uint16Array | Float32Array | Float64Array,
   outRgba: Uint8Array,
@@ -781,16 +766,3 @@ function blitRgba(
     targetRgba.set(sourceRgba.subarray(srcOffset, srcOffset + rowLength), dstOffset);
   }
 }
-
-function encodePngRgba(width: number, height: number, rgba: Uint8Array): Buffer {
-  type PngInstance = { data: Uint8Array };
-  type PngConstructor = {
-    new(options: { width: number; height: number }): PngInstance;
-    sync: { write(png: PngInstance): Buffer };
-  };
-  const pngModule = PNG as unknown as { PNG?: PngConstructor };
-  const PngCtor = (pngModule.PNG ?? (PNG as unknown as PngConstructor));
-  const png = new PngCtor({ width, height });
-  png.data.set(rgba);
-  return PngCtor.sync.write(png);
-}
diff --git a/client/platform/web-girder/App.vue b/client/platform/web-girder/App.vue
index 8786b2321..d4bd4a5bb 100644
--- a/client/platform/web-girder/App.vue
+++ b/client/platform/web-girder/App.vue
@@ -28,6 +28,7 @@ import {
   unwrap,
   getTiles,
   getTileURL,
+  getTileHistogram,
   hasCalibrationFile,
   downloadCalibration,
   deleteCalibration,
@@ -81,6 +82,7 @@ export default defineComponent({
       importAnnotationFile,
       getTiles,
       getTileURL,
+      getTileHistogram,
     });
   },
 });
diff --git a/client/platform/web-girder/api/dataset.service.ts b/client/platform/web-girder/api/dataset.service.ts
index c2503d493..55a44f3a4 100644
--- a/client/platform/web-girder/api/dataset.service.ts
+++ b/client/platform/web-girder/api/dataset.service.ts
@@ -175,7 +175,7 @@ async function saveMetadata(datasetId: string, metadata: DatasetMetaMutable) {
 
 interface ValidationResponse {
   ok: boolean;
-  type: 'video' | 'image-sequence';
+  type: 'video' | 'image-sequence' | 'large-image';
   media: string[];
   annotations: string[];
   message: string;
@@ -189,10 +189,10 @@ export interface CreateMulticamDatasetArgs {
   parentFolderId: string;
   name: string;
   fps: number;
-  type: 'video' | 'image-sequence';
+  type: 'video' | 'image-sequence' | 'large-image';
   subType: 'stereo' | 'multicam';
   defaultDisplay: string;
-  cameras: Record<string, { folderId: string }>;
+  cameras: Record<string, { folderId: string; type?: 'video' | 'image-sequence' | 'large-image' }>;
   cameraOrder?: string[];
   calibrationFileId?: string;
 }
diff --git a/client/platform/web-girder/api/girder.service.ts b/client/platform/web-girder/api/girder.service.ts
index 566e5bcd9..3de7f73a1 100644
--- a/client/platform/web-girder/api/girder.service.ts
+++ b/client/platform/web-girder/api/girder.service.ts
@@ -21,9 +21,9 @@ function deleteItem(itemId: string) {
   return girderRest.delete(`item/${itemId}`);
 }
 
-function getItemsInFolder(folderId: string, limit: number) {
+function getItemsInFolder(folderId: string, limit: number, offset = 0) {
   return girderRest.get<GirderModel[]>('item', {
-    params: { folderId, limit },
+    params: { folderId, limit, offset },
   });
 }
 
diff --git a/client/platform/web-girder/api/largeImage.service.ts b/client/platform/web-girder/api/largeImage.service.ts
index 385754c5e..13551eb53 100644
--- a/client/platform/web-girder/api/largeImage.service.ts
+++ b/client/platform/web-girder/api/largeImage.service.ts
@@ -28,9 +28,30 @@ async function getTileFrames(itemId: string, options: any) {
   return data;
 }
 
+interface TileHistogramOptions {
+  bins?: number;
+  frame?: number;
+  width?: number;
+  height?: number;
+}
+
+async function getTileHistogram(itemId: string, options: TileHistogramOptions = {}) {
+  const { data } = await girderRest.get(`item/${itemId}/tiles/histogram`, {
+    params: {
+      bins: options.bins ?? 256,
+      ...(options.frame != null ? { frame: options.frame } : {}),
+      ...(options.width != null ? { width: options.width } : {}),
+      ...(options.height != null ? { height: options.height } : {}),
+    },
+  });
+  return data;
+}
+
 export {
   getTilesMetadata,
   getTiles,
   getTileURL,
   getTileFrames,
+  getTileHistogram,
 };
+export type { TileHistogramOptions };
diff --git a/client/platform/web-girder/api/waitForFolderDatasetReady.ts b/client/platform/web-girder/api/waitForFolderDatasetReady.ts
index 1703d2920..58c02dec2 100644
--- a/client/platform/web-girder/api/waitForFolderDatasetReady.ts
+++ b/client/platform/web-girder/api/waitForFolderDatasetReady.ts
@@ -1,7 +1,7 @@
 /* eslint-disable import/prefer-default-export -- single-purpose polling helper */
 import { all } from '@girder/components/src/components/Job/status';
 import girderRest from 'platform/web-girder/plugins/girder';
-import { getFolder } from './girder.service';
+import { getFolder, getItemsInFolder } from './girder.service';
 
 const JobStatus = all();
 const TERMINAL_JOB_STATUSES = [
@@ -10,6 +10,47 @@ const TERMINAL_JOB_STATUSES = [
   JobStatus.CANCELED.value,
 ];
 
+const LARGE_IMAGE_ITEM_PATTERN = /\.(tif|tiff|nitf|ntf|vrt)$/i;
+const VIEWABLE_IMAGE_PATTERN = /\.(png|jpe?g)$/i;
+
+async function countLargeImageItems(folderId: string): Promise<number> {
+  let offset = 0;
+  const limit = 100;
+  let count = 0;
+  /* eslint-disable no-await-in-loop -- paginate folder items until all are checked */
+  while (true) {
+    const { data: items } = await getItemsInFolder(folderId, limit, offset);
+    if (!items.length) {
+      break;
+    }
+    count += items.filter((item) => LARGE_IMAGE_ITEM_PATTERN.test(item.name)).length;
+    if (items.length < limit) {
+      break;
+    }
+    offset += items.length;
+  }
+  return count;
+}
+
+async function countViewableImages(folderId: string): Promise<number> {
+  let offset = 0;
+  const limit = 100;
+  let count = 0;
+  /* eslint-disable no-await-in-loop -- paginate folder items until all are checked */
+  while (true) {
+    const { data: items } = await getItemsInFolder(folderId, limit, offset);
+    if (!items.length) {
+      break;
+    }
+    count += items.filter((item) => VIEWABLE_IMAGE_PATTERN.test(item.name)).length;
+    if (items.length < limit) {
+      break;
+    }
+    offset += items.length;
+  }
+  return count;
+}
+
 /**
  * Wait until a folder has been marked as a DIVE dataset (post-process / transcode finished).
  * Used by multicam import so child camera folders are valid before create_multicam runs.
@@ -21,6 +62,10 @@ export async function waitForFolderDatasetReady(
     timeoutMs?: number;
     /** Called with average job completion fraction in [0, 1] when jobs report progress. */
     onProgress?: (fraction: number) => void;
+    /** When true, keep polling until at least one web-safe image exists in the folder. */
+    requireViewableImages?: boolean;
+    /** When true, keep polling until at least one tiled/large-image file exists in the folder. */
+    requireLargeImageItems?: boolean;
   },
   jobIds: string[] = [],
 ): Promise<void> {
@@ -28,10 +73,25 @@ export async function waitForFolderDatasetReady(
   const timeoutMs = options?.timeoutMs ?? 10 * 60 * 1000;
   const deadline = Date.now() + timeoutMs;
 
+  async function folderReady(): Promise<boolean> {
+    const { data: folder } = await getFolder(folderId);
+    if (!folder.meta?.annotate) {
+      return false;
+    }
+    if (options?.requireViewableImages) {
+      const viewableCount = await countViewableImages(folderId);
+      return viewableCount > 0;
+    }
+    if (options?.requireLargeImageItems) {
+      const largeImageCount = await countLargeImageItems(folderId);
+      return largeImageCount > 0;
+    }
+    return true;
+  }
+
   /* eslint-disable no-await-in-loop -- poll folder and jobs until ready or timeout */
   while (Date.now() < deadline) {
-    const { data: folder } = await getFolder(folderId);
-    if (folder.meta?.annotate) {
+    if (await folderReady()) {
       return;
     }
 
@@ -63,11 +123,10 @@ export async function waitForFolderDatasetReady(
           const detail = failed.map((job) => job.title || 'processing job failed').join('; ');
           throw new Error(detail);
         }
-        const { data: folderAfterJobs } = await getFolder(folderId);
-        if (folderAfterJobs.meta?.annotate) {
+        if (await folderReady()) {
           return;
         }
-        throw new Error('Video processing finished but the camera folder is not ready for import');
+        throw new Error('Image processing finished but the camera folder has no viewable frames');
       }
     }
 
@@ -76,5 +135,5 @@ export async function waitForFolderDatasetReady(
     });
   }
 
-  throw new Error('Timed out waiting for camera video processing');
+  throw new Error('Timed out waiting for camera folder processing');
 }
diff --git a/client/platform/web-girder/views/Upload.vue b/client/platform/web-girder/views/Upload.vue
index 98b734234..5679dc4c3 100644
--- a/client/platform/web-girder/views/Upload.vue
+++ b/client/platform/web-girder/views/Upload.vue
@@ -190,6 +190,7 @@ export default defineComponent({
       annotationFile: File | null,
       mediaList: File[],
       suggestedFps?: number, // suggested FPS for large/images
+      expectedType?: DatasetType,
     ) => {
       const resp = (await validateUploadGroup(allFiles.map((f) => f.name))).data;
       if (!resp.ok) {
@@ -198,6 +199,7 @@ export default defineComponent({
         }
         throw new Error(resp.message);
       }
+      const uploadType = expectedType === LargeImageType ? LargeImageType : resp.type;
       const fps = suggestedFps || clientSettings.annotationFPS || DefaultVideoFPS;
       const defaultFilename = resp.media[0];
       const validFiles = resp.media.concat(resp.annotations);
@@ -220,7 +222,7 @@ export default defineComponent({
         meta,
         annotationFile,
         mediaList,
-        type: resp.type,
+        type: uploadType,
         fps,
         uploading: false,
         skipTranscoding: true,
@@ -305,6 +307,7 @@ export default defineComponent({
                 processed.annotationFile,
                 processed.mediaList,
                 suggestedFps,
+                dstype,
               );
             } else {
               addPendingZipUpload(name, processed.fullList);
@@ -396,7 +399,7 @@ export default defineComponent({
           description: 'Multicamera dataset',
         });
         datasetFolderId = datasetFolder._id;
-        const cameras: Record<string, { folderId: string }> = {};
+        const cameras: Record<string, { folderId: string; type?: string }> = {};
         const cameraOrder = args.cameraOrder?.length
           ? args.cameraOrder
           : Object.keys(args.sourceList);
@@ -416,8 +419,11 @@ export default defineComponent({
           if (!validation.ok) {
             throw new Error(validation.message || `Invalid files for camera "${cameraName}"`);
           }
-          if (validation.type !== args.type) {
-            throw new Error(`Camera "${cameraName}" must use ${args.type} media`);
+          const cameraType = source.type ?? args.type;
+          const uploadType = validation.type;
+          const compatibleTypes = new Set([cameraType, args.type, 'large-image', 'image-sequence']);
+          if (!compatibleTypes.has(uploadType)) {
+            throw new Error(`Camera "${cameraName}" must use ${cameraType} media`);
           }
           const mediaList = files.filter((file) => validation.media.includes(file.name));
           const annotationFile = source.trackFile
@@ -428,7 +434,7 @@ export default defineComponent({
           const { folder, jobIds } = await uploadComponent.uploadCameraDataset({
             name: cameraName,
             fps,
-            type: args.type,
+            type: uploadType,
             mediaList,
             annotationFile: annotationFile ?? null,
             skipTranscoding: true,
@@ -452,6 +458,8 @@ export default defineComponent({
                 `Processing ${cameraName} (${i + 1} of ${totalCameras})`,
               );
             },
+            requireViewableImages: uploadType === ImageSequenceType,
+            requireLargeImageItems: uploadType === LargeImageType,
           }, jobIds);
           setMulticamImportProgress(
             multicamCameraSlotPercent(i + 1, totalCameras, 0),
@@ -459,7 +467,7 @@ export default defineComponent({
               ? `Finished ${cameraName}, starting next camera…`
               : `Finished ${cameraName}`,
           );
-          cameras[cameraName] = { folderId: folder._id };
+          cameras[cameraName] = { folderId: folder._id, type: uploadType };
         }
 
         setMulticamImportProgress(92, 'Finalizing multicam dataset…');
diff --git a/client/src/components/ImageEnhancements.vue b/client/src/components/ImageEnhancements.vue
index 53854d979..9f3426c58 100644
--- a/client/src/components/ImageEnhancements.vue
+++ b/client/src/components/ImageEnhancements.vue
@@ -1,17 +1,42 @@
 <script lang="ts">
-import { defineComponent, ref } from 'vue';
-import { useHandler, useImageEnhancements } from '../provides';
+import {
+  computed, defineComponent, ref, watch,
+} from 'vue';
+import {
+  useHandler,
+  useImageEnhancements,
+  usePercentileHistogram,
+  usePercentileHistogramLoading,
+  usePercentileStretchSupported,
+} from '../provides';
+import { computePercentileBoundsFromBins } from '../use/useImageEnhancements';
 
 export default defineComponent({
   name: 'ImageEnhancements',
-  description: 'Image controls',
+  description: 'Brightness, contrast, and high bit-depth percentile stretch',
   setup() {
     const { setSVGFilters } = useHandler();
     const imageEnhancements = useImageEnhancements();
-    const brightness = ref(imageEnhancements.value.brightness || 1);
-    const contrast = ref(imageEnhancements.value.contrast || 1);
-    const saturation = ref(imageEnhancements.value.saturation || 1);
-    const sharpen = ref(imageEnhancements.value.sharpen || 0);
+    const percentileStretchSupported = usePercentileStretchSupported();
+    const percentileHistogram = usePercentileHistogram();
+    const percentileHistogramLoading = usePercentileHistogramLoading();
+    const brightness = ref(imageEnhancements.value.brightness);
+    const contrast = ref(imageEnhancements.value.contrast);
+    const saturation = ref(imageEnhancements.value.saturation);
+    const sharpen = ref(imageEnhancements.value.sharpen);
+    const stretchEnabled = ref(imageEnhancements.value.percentileStretch != null);
+    const lowPercentile = ref(imageEnhancements.value.percentileStretch?.lowPercentile ?? 1);
+    const highPercentile = ref(imageEnhancements.value.percentileStretch?.highPercentile ?? 99);
+
+    watch(imageEnhancements, (val) => {
+      brightness.value = val.brightness;
+      contrast.value = val.contrast;
+      saturation.value = val.saturation;
+      sharpen.value = val.sharpen;
+      stretchEnabled.value = val.percentileStretch != null;
+      lowPercentile.value = val.percentileStretch?.lowPercentile ?? 1;
+      highPercentile.value = val.percentileStretch?.highPercentile ?? 99;
+    }, { deep: true });
 
     const modifyValue = () => {
       setSVGFilters({
@@ -19,6 +44,9 @@ export default defineComponent({
         contrast: contrast.value,
         saturation: saturation.value,
         sharpen: sharpen.value,
+        percentileStretch: percentileStretchSupported.value && stretchEnabled.value
+          ? { lowPercentile: lowPercentile.value, highPercentile: highPercentile.value }
+          : null,
       });
     };
 
@@ -27,9 +55,60 @@ export default defineComponent({
       contrast.value = 1;
       saturation.value = 1;
       sharpen.value = 0;
+      stretchEnabled.value = false;
+      lowPercentile.value = 1;
+      highPercentile.value = 99;
       modifyValue();
     };
 
+    function markerX(value: number): number {
+      const histogram = percentileHistogram.value;
+      if (!histogram) return 0;
+      const range = histogram.sourceMax - histogram.sourceMin;
+      if (range <= 0) return 0;
+      const normalized = (value - histogram.sourceMin) / range;
+      return Math.max(0, Math.min(100, normalized * 100));
+    }
+
+    function formatBound(value: number): string {
+      if (!Number.isFinite(value)) return '-';
+      const abs = Math.abs(value);
+      if (abs >= 1000) return Math.round(value).toString();
+      if (abs >= 100) return value.toFixed(1);
+      return value.toFixed(2);
+    }
+
+    const hasHistogram = computed(() => (percentileHistogram.value?.bins?.length ?? 0) > 0);
+    const histogramPolyline = computed(() => {
+      const bins = percentileHistogram.value?.bins ?? [];
+      if (!bins.length) return '';
+      const maxCount = Math.max(...bins);
+      if (maxCount <= 0) return '';
+      const maxRoot = Math.sqrt(maxCount);
+      return bins.map((count, idx) => {
+        const x = bins.length === 1 ? 0 : (idx / (bins.length - 1)) * 100;
+        const y = 40 - (Math.sqrt(count) / maxRoot) * 40;
+        return `${x.toFixed(2)},${y.toFixed(2)}`;
+      }).join(' ');
+    });
+    const percentileMarkerValues = computed(() => {
+      const histogram = percentileHistogram.value;
+      if (!histogram?.bins?.length) {
+        return { lowValue: 0, highValue: 0 };
+      }
+      return computePercentileBoundsFromBins(
+        histogram.bins,
+        lowPercentile.value,
+        highPercentile.value,
+        histogram.sourceMin,
+        histogram.sourceMax,
+      );
+    });
+    const lowMarkerX = computed(() => markerX(percentileMarkerValues.value.lowValue));
+    const highMarkerX = computed(() => markerX(percentileMarkerValues.value.highValue));
+    const histogramMinLabel = computed(() => formatBound(percentileHistogram.value?.sourceMin ?? 0));
+    const histogramMaxLabel = computed(() => formatBound(percentileHistogram.value?.sourceMax ?? 0));
+
     return {
       modifyValue,
       reset,
@@ -37,6 +116,17 @@ export default defineComponent({
       contrast,
       saturation,
       sharpen,
+      stretchEnabled,
+      lowPercentile,
+      highPercentile,
+      percentileStretchSupported,
+      percentileHistogramLoading,
+      hasHistogram,
+      histogramPolyline,
+      lowMarkerX,
+      highMarkerX,
+      histogramMinLabel,
+      histogramMaxLabel,
     };
   },
 });
@@ -45,7 +135,9 @@ export default defineComponent({
 <template>
   <div class="mx-4">
     <span class="text-body-2">
-      Controls for adjusting images.
+      Adjust brightness, contrast, saturation, and sharpness. For high bit-depth TIFF
+      (Web large-image or Desktop TIFF sequences), percentile stretch remaps intensity
+      using the histogram below.
     </span>
     <v-divider class="my-3" />
     <v-row>
@@ -124,6 +216,97 @@ export default defineComponent({
         <span>{{ sharpen.toFixed(1) }}</span>
       </v-col>
     </v-row>
+    <v-divider
+      v-if="percentileStretchSupported"
+      class="my-3"
+    />
+    <template v-if="percentileStretchSupported">
+      <v-row
+        align="center"
+        class="ma-0"
+      >
+        <v-col cols="8">
+          <span class="text-caption">Percentile Stretch</span>
+        </v-col>
+        <v-col class="pa-0">
+          <v-switch
+            v-model="stretchEnabled"
+            hide-details
+            class="ma-0 pa-0 mt-1"
+            @change="modifyValue()"
+          />
+        </v-col>
+      </v-row>
+      <v-row class="ma-0 mt-1 mb-2">
+        <v-col cols="12" class="pa-0">
+          <div class="histogram-shell">
+            <div v-if="percentileHistogramLoading" class="histogram-status text-caption">
+              Loading histogram...
+            </div>
+            <template v-else-if="hasHistogram">
+              <svg viewBox="0 0 100 40" preserveAspectRatio="none" class="histogram-svg">
+                <polyline
+                  :points="histogramPolyline"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="1.4"
+                  class="histogram-line"
+                />
+                <line :x1="lowMarkerX" y1="0" :x2="lowMarkerX" y2="40" class="histogram-marker-low" />
+                <line :x1="highMarkerX" y1="0" :x2="highMarkerX" y2="40" class="histogram-marker-high" />
+              </svg>
+              <div class="histogram-bounds text-caption">
+                <span>{{ histogramMinLabel }}</span>
+                <span>{{ histogramMaxLabel }}</span>
+              </div>
+            </template>
+            <div v-else class="histogram-status text-caption">
+              Histogram unavailable for this frame.
+            </div>
+          </div>
+        </v-col>
+      </v-row>
+      <template v-if="stretchEnabled">
+        <v-row class="percentile-slider-row">
+          <v-col cols="4">
+            <span class="text-caption">Low %</span>
+          </v-col>
+          <v-col cols="5">
+            <v-slider
+              v-model="lowPercentile"
+              :min="0"
+              :max="1"
+              :step="0.01"
+              hide-details
+              class="pa-0 ma-0"
+              @input="modifyValue()"
+            />
+          </v-col>
+          <v-col cols="3" class="percentile-value-col">
+            <span class="percentile-value">{{ lowPercentile.toFixed(2) }}</span>
+          </v-col>
+        </v-row>
+        <v-row class="percentile-slider-row">
+          <v-col cols="4">
+            <span class="text-caption">High %</span>
+          </v-col>
+          <v-col cols="5">
+            <v-slider
+              v-model="highPercentile"
+              :min="99"
+              :max="100"
+              :step="0.01"
+              hide-details
+              class="pa-0 ma-0"
+              @input="modifyValue()"
+            />
+          </v-col>
+          <v-col cols="3" class="percentile-value-col">
+            <span class="percentile-value">{{ highPercentile.toFixed(2) }}</span>
+          </v-col>
+        </v-row>
+      </template>
+    </template>
     <v-btn
       block
       depressed
@@ -137,4 +320,56 @@ export default defineComponent({
 </template>
 
 <style scoped>
+.histogram-shell {
+  border: 1px solid rgba(127, 127, 127, 0.45);
+  border-radius: 4px;
+  padding: 6px 8px 4px;
+}
+
+.histogram-svg {
+  display: block;
+  width: 100%;
+  height: 56px;
+}
+
+.histogram-line {
+  opacity: 0.9;
+}
+
+.histogram-marker-low {
+  stroke: #ff9800;
+  stroke-width: 1;
+  stroke-dasharray: 2 2;
+}
+
+.histogram-marker-high {
+  stroke: #4caf50;
+  stroke-width: 1;
+  stroke-dasharray: 2 2;
+}
+
+.histogram-bounds {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 4px;
+}
+
+.histogram-status {
+  min-height: 48px;
+  display: flex;
+  align-items: center;
+}
+
+.percentile-value-col {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding-left: 0;
+}
+
+.percentile-value {
+  min-width: 3.5rem;
+  text-align: right;
+  white-space: nowrap;
+}
 </style>
diff --git a/client/src/components/LayerManager.vue b/client/src/components/LayerManager.vue
index ac0824c7d..2e6456844 100644
--- a/client/src/components/LayerManager.vue
+++ b/client/src/components/LayerManager.vue
@@ -535,16 +535,21 @@ export default defineComponent({
     watch(
       () => aggregateController.value.resizeTrigger.value,
       () => {
-        updateLayers(
-          frameNumberRef.value,
-          editingModeRef.value,
-          selectedTrackIdRef.value,
-          multiSeletListRef.value,
-          enabledTracksRef.value,
-          visibleModesRef.value,
-          selectedKeyRef.value,
-          props.colorBy,
-        );
+        window.requestAnimationFrame(() => {
+          if (!annotator.geoViewerRef?.value) {
+            return;
+          }
+          updateLayers(
+            frameNumberRef.value,
+            editingModeRef.value,
+            selectedTrackIdRef.value,
+            multiSeletListRef.value,
+            enabledTracksRef.value,
+            visibleModesRef.value,
+            selectedKeyRef.value,
+            props.colorBy,
+          );
+        });
       },
     );
 
diff --git a/client/src/components/annotators/ImageAnnotator.vue b/client/src/components/annotators/ImageAnnotator.vue
index bb9e50630..08b57f09b 100644
--- a/client/src/components/annotators/ImageAnnotator.vue
+++ b/client/src/components/annotators/ImageAnnotator.vue
@@ -59,6 +59,10 @@ export default defineComponent({
       type: Boolean as PropType<boolean>,
       required: true,
     },
+    filterId: {
+      type: String as PropType<string>,
+      default: 'imageEnhancements',
+    },
   },
   setup(props, { emit }) {
     const loadingVideo = ref(false);
@@ -329,7 +333,7 @@ export default defineComponent({
           if (props.isDefaultImage) {
             local.quadFeature.layer().node().css('filter', '');
           } else {
-            local.quadFeature.layer().node().css('filter', 'url(#imageEhancements)');
+            local.quadFeature.layer().node().css('filter', `url(#${props.filterId})`);
           }
         }
       },
@@ -353,14 +357,22 @@ export default defineComponent({
         });
         // Set quadFeature and conditionally apply brightness filter
         local.quadFeature = quadFeatureLayer.createFeature('quad');
-        local.quadFeature.layer().node().css('filter', 'url(#imageEhancements)');
+        local.quadFeature.layer().node().css('filter', `url(#${props.filterId})`);
         data.ready = true;
         seek(0);
       });
     }
     function init() {
       data.maxFrame = props.imageData.length - 1;
-      // Below are configuration settings we can set until we decide on good numbers to utilize.
+      // When the viewer already exists, an imageData change is a URL swap for
+      // the same camera (e.g. the percentile-stretch display remap). Rebuild
+      // only the image cache and redraw the current frame in place: calling
+      // initializeViewer again would replace the geojs map, orphaning every
+      // feature layer and event handler that other components (LayerManager
+      // and its annotation/calibration layers) attached to the old map. Any
+      // dimension change is already handled by drawImage/resetMapDimensions.
+      const reusableQuad = data.ready && geoViewer.value !== undefined
+        ? local.quadFeature : undefined;
       local = {
         playCache: 1, // seconds required to be fully cached before playback
         cacheSeconds: 6, // seconds to cache from the current frame
@@ -368,29 +380,54 @@ export default defineComponent({
         imgs: new Array<ImageDataItemInternal | undefined>(props.imageData.length),
         pendingImgs: new Set<ImageDataItemInternal>(),
         lastFrame: -1,
-        width: 0,
-        height: 0,
+        width: reusableQuad !== undefined ? local.width : 0,
+        height: reusableQuad !== undefined ? local.height : 0,
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        quadFeature: undefined as any,
+        quadFeature: reusableQuad as any,
       };
-      if (local.imgs.length) {
-        const imgInternal = cacheFrame(0);
-        imgInternal.onloadPromise.then(() => {
-          initializeViewer(imgInternal.image.naturalWidth, imgInternal.image.naturalHeight);
-          const quadFeatureLayer = geoViewer.value.createLayer('feature', {
-            features: ['quad'],
-            autoshareRenderer: false,
-            renderer: 'canvas',
+      if (!local.imgs.length) {
+        return;
+      }
+      if (reusableQuad !== undefined) {
+        if (data.frame > data.maxFrame) {
+          data.frame = data.maxFrame;
+          data.syncedFrame = data.maxFrame;
+        }
+        data.filename = props.imageData[data.frame].filename;
+        // seek() short-circuits on a same-frame re-seek, so drive the redraw
+        // directly through the fresh cache.
+        cacheImages();
+        const imgInternal = expectFrame(data.frame);
+        drawImage(imgInternal.image);
+        if (!imgInternal.cached) {
+          loadingImage.value = true;
+          imgInternal.onloadPromise.then(() => {
+            if (imgInternal.frame === data.frame) {
+              loadingImage.value = false;
+              drawImage(imgInternal.image);
+            }
           });
-          // Set quadFeature and conditionally apply brightness filter
-          local.quadFeature = quadFeatureLayer.createFeature('quad');
-          data.ready = true;
-          seek(0);
-          if (!props.isDefaultImage) {
-            local.quadFeature.layer().node().css('filter', 'url(#imageEhancements)');
-          }
-        });
+        } else {
+          loadingImage.value = false;
+        }
+        return;
       }
+      const imgInternal = cacheFrame(0);
+      imgInternal.onloadPromise.then(() => {
+        initializeViewer(imgInternal.image.naturalWidth, imgInternal.image.naturalHeight);
+        const quadFeatureLayer = geoViewer.value.createLayer('feature', {
+          features: ['quad'],
+          autoshareRenderer: false,
+          renderer: 'canvas',
+        });
+        // Set quadFeature and conditionally apply brightness filter
+        local.quadFeature = quadFeatureLayer.createFeature('quad');
+        data.ready = true;
+        seek(0);
+        if (!props.isDefaultImage) {
+          local.quadFeature.layer().node().css('filter', `url(#${props.filterId})`);
+        }
+      });
     }
     // Watch imageData for change
     watch(toRef(props, 'imageData'), () => {
@@ -417,7 +454,7 @@ export default defineComponent({
       style="position: absolute; top: -1px; left: -1px"
     >
       <defs>
-        <filter id="imageEhancements">
+        <filter :id="filterId">
           <feComponentTransfer id="feBrightness">
             <feFuncR
               type="linear"
diff --git a/client/src/components/annotators/LargeImageAnnotator.vue b/client/src/components/annotators/LargeImageAnnotator.vue
index 1f2d10cad..ce524a170 100644
--- a/client/src/components/annotators/LargeImageAnnotator.vue
+++ b/client/src/components/annotators/LargeImageAnnotator.vue
@@ -2,8 +2,13 @@
 import {
   defineComponent, ref, onUnmounted, PropType, toRef, watch, computed,
 } from 'vue';
+import { debounce } from 'lodash';
 import geo from 'geojs';
-import { ImageEnhancementOutputs } from 'vue-media-annotator/use/useImageEnhancements';
+import {
+  ImageEnhancementOutputs,
+  PercentileStretch,
+  percentileStretchToTileStyle,
+} from 'vue-media-annotator/use/useImageEnhancements';
 import { SetTimeFunc } from '../../use/useTimeObserver';
 import AnnotatorImageCursor from './AnnotatorImageCursor.vue';
 import useAnnotatorImageCursor from './useAnnotatorImageCursor';
@@ -104,6 +109,14 @@ export default defineComponent({
       type: Boolean as PropType<boolean>,
       required: true,
     },
+    filterId: {
+      type: String as PropType<string>,
+      default: 'imageEnhancements',
+    },
+    percentileStretch: {
+      type: Object as PropType<PercentileStretch | null>,
+      default: null,
+    },
   },
   setup(props) {
     const loadingVideo = ref(false);
@@ -210,6 +223,72 @@ export default defineComponent({
       nextLayer: '' as any,
       nextLayerFrame: 0,
     };
+    const activePercentileStretch = ref<PercentileStretch | null>(props.percentileStretch);
+
+    function stretchCacheKey(stretch: PercentileStretch | null): string {
+      if (!stretch) return 'none';
+      return `${stretch.lowPercentile}:${stretch.highPercentile}`;
+    }
+
+    function applyTileQueryParams(
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      params: Record<string, any>,
+      proj?: string,
+    ) {
+      const updatedParams = { ...params, encoding: 'PNG' };
+      if (proj) {
+        updatedParams.projection = proj;
+      }
+      const style = percentileStretchToTileStyle(activePercentileStretch.value);
+      if (style) {
+        updatedParams.style = style;
+      }
+      return updatedParams;
+    }
+
+    function refreshVisibleTileLayers() {
+      if (
+        !data.ready
+        || !local.currentLayer
+        || typeof local.currentLayer.url !== 'function'
+        || !props.imageData[data.frame]?.id
+      ) {
+        return;
+      }
+      local.currentLayer.url(_getTileURL(props.imageData[data.frame].id, projection));
+      if (
+        local.nextLayer
+        && typeof local.nextLayer.url === 'function'
+        && props.imageData[local.nextLayerFrame]?.id
+      ) {
+        local.nextLayer.url(_getTileURL(props.imageData[local.nextLayerFrame].id, projection));
+      }
+    }
+
+    const debouncedRefreshTileLayers = debounce(refreshVisibleTileLayers, 500, { trailing: true });
+    let previousStretchKey = stretchCacheKey(props.percentileStretch);
+
+    watch(
+      () => props.percentileStretch,
+      (stretch) => {
+        activePercentileStretch.value = stretch;
+        if (!data.ready) {
+          previousStretchKey = stretchCacheKey(stretch);
+          return;
+        }
+        const currentKey = stretchCacheKey(stretch);
+        const isToggle = (currentKey === 'none') !== (previousStretchKey === 'none');
+        previousStretchKey = currentKey;
+        if (isToggle) {
+          debouncedRefreshTileLayers.cancel();
+          refreshVisibleTileLayers();
+        } else {
+          debouncedRefreshTileLayers();
+        }
+      },
+      { deep: true },
+    );
+
     function forceUnload(imgInternal: ImageDataItemInternal) {
       // Removal from list indicates we are no longer attempting to load this image
       local.imgs[imgInternal.frame] = undefined;
@@ -221,10 +300,7 @@ export default defineComponent({
     function _getTileURL(itemId: string, proj?: string) {
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       const returnFunc = (x: number, y: number, level: number, params: any) => {
-        const updatedParams = { ...params, encoding: 'PNG' };
-        if (proj) {
-          updatedParams.projection = proj;
-        }
+        const updatedParams = applyTileQueryParams(params, proj);
         return props.getTileURL(itemId, x, y, level, updatedParams);
       };
       return returnFunc;
@@ -252,6 +328,7 @@ export default defineComponent({
      * requests for image load.
      */
     onUnmounted(() => {
+      debouncedRefreshTileLayers.cancel();
       Array.from(local.pendingImgs).forEach(forceUnload);
       if (tileLoadErrorResizeObserver && container.value) {
         tileLoadErrorResizeObserver.unobserve(container.value);
@@ -354,7 +431,7 @@ export default defineComponent({
           if (props.isDefaultImage) {
             local.currentLayer.node().css('filter', '');
           } else {
-            local.currentLayer.node().css('filter', 'url(#imageEhancements)');
+            local.currentLayer.node().css('filter', `url(#${props.filterId})`);
           }
         }
       },
@@ -499,7 +576,7 @@ export default defineComponent({
         );
         // Set quadFeature and conditionally apply brightness filter
         if (!props.isDefaultImage) {
-          local.currentLayer.node().css('filter', 'url(#imageEhancements)');
+          local.currentLayer.node().css('filter', `url(#${props.filterId})`);
         }
         data.ready = true;
         loadingVideo.value = false;
@@ -543,7 +620,7 @@ export default defineComponent({
       style="position: absolute; top: -1px; left: -1px"
     >
       <defs>
-        <filter id="imageEhancements">
+        <filter :id="filterId">
           <feComponentTransfer id="feBrightness">
             <feFuncR
               type="linear"
diff --git a/client/src/components/annotators/VideoAnnotator.vue b/client/src/components/annotators/VideoAnnotator.vue
index 02125937e..0517f6ce4 100644
--- a/client/src/components/annotators/VideoAnnotator.vue
+++ b/client/src/components/annotators/VideoAnnotator.vue
@@ -106,6 +106,10 @@ export default defineComponent({
       type: Boolean,
       default: true,
     },
+    filterId: {
+      type: String as PropType<string>,
+      default: 'imageEnhancements',
+    },
   },
   setup(props) {
     const cameraInitializer = injectCameraInitializer();
@@ -212,7 +216,7 @@ export default defineComponent({
           if (newVal) {
             quadFeatureLayer.node().css('filter', '');
           } else {
-            quadFeatureLayer.node().css('filter', 'url(#imageEhancements)');
+            quadFeatureLayer.node().css('filter', `url(#${props.filterId})`);
           }
         }
       },
@@ -259,7 +263,7 @@ export default defineComponent({
       // See https://github.com/Kitware/dive/issues/447 for more details.
       seek(0);
       if (!props.isDefaultImage) {
-        quadFeatureLayer.node().css('filter', 'url(#imageEhancements)');
+        quadFeatureLayer.node().css('filter', `url(#${props.filterId})`);
       }
       data.ready = true;
       data.volume = video.volume;
@@ -291,7 +295,7 @@ export default defineComponent({
   <div class="video-annotator" :style="{ cursor: data.cursor }">
     <svg width="0" height="0" style="position: absolute; top: -1px; left: -1px">
       <defs>
-        <filter id="imageEhancements">
+        <filter :id="filterId">
           <feComponentTransfer id="feBrightness">
             <feFuncR
               type="linear"
diff --git a/client/src/components/annotators/useMediaController.ts b/client/src/components/annotators/useMediaController.ts
index 2908ed45b..3349dba8c 100644
--- a/client/src/components/annotators/useMediaController.ts
+++ b/client/src/components/annotators/useMediaController.ts
@@ -142,6 +142,7 @@ export function useMediaController() {
    */
   function onResize() {
     let resized = false;
+    const pendingResizes: (() => void)[] = [];
     subControllers.forEach((mc) => {
       const camera = cameraControllerSymbols[mc.cameraName.value].toString();
       const geoViewerRef = geoViewers[camera];
@@ -153,16 +154,22 @@ export function useMediaController() {
       const mapSize = geoViewerRef.value.size();
       if (size.width !== mapSize.width || size.height !== mapSize.height) {
         resized = true;
-        window.requestAnimationFrame(() => {
+        pendingResizes.push(() => {
+          if (geoViewerRef.value === undefined) {
+            return;
+          }
           geoViewerRef.value.size(size);
           mc.resetZoom();
         });
       }
     });
-    // Trigger layer redraw after resize
+    // Resize maps first, then redraw annotation layers once GeoJS has settled.
     if (resized) {
       window.requestAnimationFrame(() => {
-        resizeTrigger.value += 1;
+        pendingResizes.forEach((applyResize) => applyResize());
+        window.requestAnimationFrame(() => {
+          resizeTrigger.value += 1;
+        });
       });
     }
   }
diff --git a/client/src/layers/BaseLayer.ts b/client/src/layers/BaseLayer.ts
index c47d5052f..2235b06bd 100644
--- a/client/src/layers/BaseLayer.ts
+++ b/client/src/layers/BaseLayer.ts
@@ -104,6 +104,9 @@ export default abstract class BaseLayer<D> {
 
     changeData(frameData: FrameDataTrack[], comparisons: string[] = []) {
       this.formattedData = this.formatData(frameData, comparisons);
+      if (!this.annotator.geoViewerRef?.value || !this.featureLayer) {
+        return;
+      }
       this.redraw();
     }
 
diff --git a/client/src/provides.ts b/client/src/provides.ts
index c30aad99a..5fe22850e 100644
--- a/client/src/provides.ts
+++ b/client/src/provides.ts
@@ -16,7 +16,11 @@ import type {
   TimelineAttribute,
 } from './use/AttributeTypes';
 import type { Time } from './use/useTimeObserver';
-import type { ImageEnhancements } from './use/useImageEnhancements';
+import type {
+  ImageEnhancements,
+  PercentileHistogram,
+  PercentileStretch,
+} from './use/useImageEnhancements';
 import TrackFilterControls from './TrackFilterControls';
 import GroupFilterControls from './GroupFilterControls';
 import CameraStore from './CameraStore';
@@ -111,6 +115,13 @@ type ReadOnylModeType = Readonly<Ref<boolean>>;
 const ImageEnhancementsSymbol = Symbol('imageEnhancements');
 type ImageEnhancementsType = Readonly<Ref<ImageEnhancements>>;
 
+const PercentileStretchSupportedSymbol = Symbol('percentileStretchSupported');
+type PercentileStretchSupportedType = Readonly<Ref<boolean>>;
+const PercentileHistogramSymbol = Symbol('percentileHistogram');
+type PercentileHistogramType = Readonly<Ref<PercentileHistogram | null>>;
+const PercentileHistogramLoadingSymbol = Symbol('percentileHistogramLoading');
+type PercentileHistogramLoadingType = Readonly<Ref<boolean>>;
+
 /** Class-based symbols */
 const CameraStoreSymbol = Symbol('cameraStore');
 
@@ -203,8 +214,14 @@ export interface Handler {
   /* Reload Annotation File */
   reloadAnnotations(): Promise<void>;
   setSVGFilters({
-    brightness, contrast, saturation, sharpen,
-  }: {brightness?: number; contrast?: number; saturation?: number; sharpen?: number}): void;
+    brightness, contrast, saturation, sharpen, percentileStretch,
+  }: {
+    brightness?: number;
+    contrast?: number;
+    saturation?: number;
+    sharpen?: number;
+    percentileStretch?: PercentileStretch | null;
+  }): void;
   /* unlink Camera Track */
   unlinkCameraTrack(trackId: AnnotationId, camera: string): void;
   /* link Camera Track */
@@ -308,6 +325,9 @@ export interface State {
   visibleModes: VisibleModesType;
   readOnlyMode: ReadOnylModeType;
   imageEnhancements: ImageEnhancementsType;
+  percentileStretchSupported: Readonly<Ref<boolean>>;
+  percentileHistogram: PercentileHistogramType;
+  percentileHistogramLoading: PercentileHistogramLoadingType;
 }
 
 // eslint-disable-next-line @typescript-eslint/no-empty-function
@@ -387,6 +407,9 @@ function dummyState(): State {
       saturation: 1,
       sharpen: 0,
     }),
+    percentileStretchSupported: ref(false),
+    percentileHistogram: ref(null),
+    percentileHistogramLoading: ref(false),
   };
 }
 
@@ -427,6 +450,9 @@ function provideAnnotator(state: State, handler: Handler, attributesFilters: Att
   provide(VisibleModesSymbol, state.visibleModes);
   provide(ReadOnlyModeSymbol, state.readOnlyMode);
   provide(ImageEnhancementsSymbol, state.imageEnhancements);
+  provide(PercentileStretchSupportedSymbol, state.percentileStretchSupported);
+  provide(PercentileHistogramSymbol, state.percentileHistogram);
+  provide(PercentileHistogramLoadingSymbol, state.percentileHistogramLoading);
   provide(HandlerSymbol, handler);
   provide(AttributesFilterSymbol, attributesFilters);
 }
@@ -552,6 +578,18 @@ function useImageEnhancements() {
   return use<ImageEnhancementsType>(ImageEnhancementsSymbol);
 }
 
+function usePercentileStretchSupported() {
+  return use<PercentileStretchSupportedType>(PercentileStretchSupportedSymbol);
+}
+
+function usePercentileHistogram() {
+  return use<PercentileHistogramType>(PercentileHistogramSymbol);
+}
+
+function usePercentileHistogramLoading() {
+  return use<PercentileHistogramLoadingType>(PercentileHistogramLoadingSymbol);
+}
+
 function useSegmentationPoints() {
   return use<SegmentationPointsType>(SegmentationPointsSymbol);
 }
@@ -593,6 +631,9 @@ export {
   useVisibleModes,
   useReadOnlyMode,
   useImageEnhancements,
+  usePercentileStretchSupported,
+  usePercentileHistogram,
+  usePercentileHistogramLoading,
   useAttributesFilters,
   useSegmentationPoints,
   useSegmentationCursorLoading,
diff --git a/client/src/use/useImageEnhancements.ts b/client/src/use/useImageEnhancements.ts
index 627e89d80..fedf670fa 100644
--- a/client/src/use/useImageEnhancements.ts
+++ b/client/src/use/useImageEnhancements.ts
@@ -3,13 +3,151 @@ import {
   ref, Ref, set as VueSet,
 } from 'vue';
 
+export interface PercentileStretch {
+  lowPercentile: number;
+  highPercentile: number;
+}
+
+export interface PercentileHistogram {
+  bins: number[];
+  lowValue: number;
+  highValue: number;
+  sourceMin: number;
+  sourceMax: number;
+}
+
+export interface PercentileStretchMetadata {
+  type?: string;
+  originalImageFiles?: string[];
+  originalLargeImageFile?: string;
+  imageData?: readonly { readonly filename?: string }[];
+}
+
+/** Girder large_image histogram entry (first channel). */
+export interface GirderHistogramEntry {
+  hist?: number[];
+  bin_edges?: number[];
+  range?: [number, number];
+  min?: number;
+  max?: number;
+}
+
+const tiffExtensions = ['.tif', '.tiff'];
+
+export function isTiffImagePath(path: string): boolean {
+  const lower = path.toLowerCase();
+  return tiffExtensions.some((ext) => lower.endsWith(ext));
+}
+
+/** True when originals are TIFF and stretch can recover dynamic range. */
+export function metadataSupportsPercentileStretch(meta: PercentileStretchMetadata): boolean {
+  if (meta.type === 'large-image') {
+    if (meta.originalLargeImageFile && isTiffImagePath(meta.originalLargeImageFile)) {
+      return true;
+    }
+    const { imageData } = meta;
+    if (imageData?.length) {
+      return imageData.some((item) => item.filename && isTiffImagePath(item.filename));
+    }
+    return false;
+  }
+  const { originalImageFiles: files } = meta;
+  if (files?.length) {
+    return files.some(isTiffImagePath);
+  }
+  return false;
+}
+
+/**
+ * Whether percentile stretch UI should be enabled for this dataset on the current platform.
+ * Web large-image uses Girder tile style params; desktop image-sequence uses /media/display.
+ */
+export function resolvePercentileStretchSupported(
+  meta: PercentileStretchMetadata,
+  isDesktopApp: boolean,
+  supportsLargeImageTileStretch: boolean,
+): boolean {
+  if (!metadataSupportsPercentileStretch(meta)) {
+    return false;
+  }
+  if (meta.type === 'large-image') {
+    return supportsLargeImageTileStretch;
+  }
+  return isDesktopApp;
+}
+
+/** Build Girder large_image tile `style` JSON for percentile stretch. */
+export function percentileStretchToTileStyle(
+  stretch: PercentileStretch | null | undefined,
+): string | undefined {
+  if (!stretch) return undefined;
+  const lowFraction = stretch.lowPercentile / 100;
+  const highFraction = (100 - stretch.highPercentile) / 100;
+  const style = {
+    bands: [{
+      min: `min:${lowFraction}`,
+      max: `max:${highFraction}`,
+    }],
+  };
+  return JSON.stringify(style);
+}
+
+/** Map Girder item/{id}/tiles/histogram response to the client histogram shape. */
+export function parseGirderHistogramResponse(
+  response: unknown,
+): GirderHistogramEntry | undefined {
+  if (Array.isArray(response)) {
+    return response[0] as GirderHistogramEntry | undefined;
+  }
+  if (response && typeof response === 'object' && 'histogram' in response) {
+    const { histogram } = response as { histogram?: GirderHistogramEntry[] };
+    return histogram?.[0];
+  }
+  return undefined;
+}
+
+/** Map a single Girder histogram channel to the client histogram shape. */
+export function girderHistogramToPercentileHistogram(
+  entry: GirderHistogramEntry | undefined,
+): PercentileHistogram | null {
+  if (!entry?.hist?.length) return null;
+  const bins = entry.hist.map((count) => Math.round(count));
+  let sourceMin = entry.min ?? entry.range?.[0] ?? 0;
+  let sourceMax = entry.max ?? entry.range?.[1] ?? 255;
+  if (entry.bin_edges && entry.bin_edges.length >= 2) {
+    const [firstEdge, ...remainingEdges] = entry.bin_edges;
+    sourceMin = firstEdge;
+    sourceMax = remainingEdges[remainingEdges.length - 1];
+  }
+  return {
+    bins,
+    lowValue: sourceMin,
+    highValue: sourceMax,
+    sourceMin,
+    sourceMax,
+  };
+}
+
+export function effectiveImageEnhancements(
+  enh: ImageEnhancements,
+  percentileStretchSupported: boolean,
+): ImageEnhancements {
+  if (percentileStretchSupported || enh.percentileStretch == null) {
+    return enh;
+  }
+  const rest = { ...enh };
+  delete rest.percentileStretch;
+  return rest;
+}
+
 // Expecting this may be a placeholder for more complicated client side enhancements
 // or more image filters
 export interface ImageEnhancements {
     brightness: number;
     contrast: number;
     saturation: number;
-    sharpen: number
+    sharpen: number;
+    percentileStretch?: PercentileStretch;
   }
 
 export interface ImageEnhancementOutputs {
@@ -19,53 +157,109 @@ export interface ImageEnhancementOutputs {
     sharpen: { kernelMatrix: string; divisor: number };
   }
 
+export const defaultImageEnhancements: ImageEnhancements = {
+  brightness: 1,
+  contrast: 1,
+  saturation: 1,
+  sharpen: 0,
+};
+
+export function computeOutputs(enh: ImageEnhancements): ImageEnhancementOutputs {
+  const s = enh.sharpen;
+  const center = 1 + 4 * s;
+  const kernel = [0, -s, 0, -s, center, -s, 0, -s, 0].map((n) => Number(n).toFixed(4)).join(' ');
+  return {
+    brightness: { slope: enh.brightness, intercept: 0 },
+    contrast: { slope: enh.contrast, intercept: 0.5 - 0.5 * enh.contrast },
+    saturation: { values: enh.saturation },
+    sharpen: { kernelMatrix: kernel, divisor: 1 },
+  };
+}
+
+/** Derive percentile cutoff values from a binned histogram (no server round-trip). */
+export function computePercentileBoundsFromBins(
+  bins: number[],
+  lowPercentile: number,
+  highPercentile: number,
+  sourceMin: number,
+  sourceMax: number,
+): { lowValue: number; highValue: number } {
+  const total = bins.reduce((sum, count) => sum + count, 0);
+  if (total === 0) return { lowValue: sourceMin, highValue: sourceMax };
+
+  const lowTarget = Math.floor(total * (lowPercentile / 100));
+  const highTarget = Math.floor(total * (highPercentile / 100));
+  const binCount = bins.length;
+
+  function binToValue(binIndex: number): number {
+    if (sourceMax > 255) return Math.min(sourceMax, binIndex * 256);
+    if (sourceMin === 0 && sourceMax <= 255) return binIndex;
+    const range = sourceMax - sourceMin;
+    return sourceMin + (binCount <= 1 ? 0 : (binIndex / (binCount - 1)) * range);
+  }
+
+  let cumulative = 0;
+  let lowValue = sourceMin;
+  let highValue = sourceMax;
+  let foundLow = false;
+
+  for (let i = 0; i < binCount; i += 1) {
+    cumulative += bins[i];
+    if (!foundLow && cumulative > 0 && cumulative >= lowTarget) {
+      lowValue = binToValue(i);
+      foundLow = true;
+    }
+    if (cumulative >= highTarget) {
+      highValue = binToValue(i);
+      break;
+    }
+  }
+
+  return { lowValue, highValue };
+}
+
+export function computeIsDefault(enh: ImageEnhancements): boolean {
+  return (
+    enh.brightness === 1
+    && enh.contrast === 1
+    && enh.saturation === 1
+    && enh.sharpen === 0
+    && enh.percentileStretch == null
+  );
+}
+
 export default function useImageEnhancements() {
-  const imageEnhancements: Ref<ImageEnhancements> = ref({
-    brightness: 1,
-    contrast: 1,
-    saturation: 1,
-    sharpen: 0,
-  });
+  const imageEnhancements: Ref<ImageEnhancements> = ref({ ...defaultImageEnhancements });
+  const imageEnhancementsByCamera: Ref<Record<string, ImageEnhancements>> = ref({});
+  const percentileStretchSupported: Ref<boolean> = ref(false);
+  const percentileHistogram: Ref<PercentileHistogram | null> = ref(null);
+  const percentileHistogramLoading: Ref<boolean> = ref(false);
 
   const setSVGFilters = ({
-    brightness, contrast, saturation, sharpen,
-  }:
-    { brightness: number; contrast: number; saturation: number; sharpen: number }) => {
+    brightness, contrast, saturation, sharpen, percentileStretch,
+  }: {
+    brightness: number;
+    contrast: number;
+    saturation: number;
+    sharpen: number;
+    percentileStretch?: PercentileStretch | null;
+  }) => {
     VueSet(imageEnhancements.value, 'brightness', brightness);
     VueSet(imageEnhancements.value, 'contrast', contrast);
     VueSet(imageEnhancements.value, 'saturation', saturation);
     VueSet(imageEnhancements.value, 'sharpen', sharpen);
+    if (percentileStretch !== undefined) {
+      VueSet(
+        imageEnhancements.value,
+        'percentileStretch',
+        percentileStretch ? { ...percentileStretch } : undefined,
+      );
+    }
   };
 
-  const brightness = computed(() => ({ slope: imageEnhancements.value.brightness, intercept: 0 }));
-
-  const contrast = computed(() => {
-    const value = imageEnhancements.value.contrast;
-    return { slope: value, intercept: 0.5 - 0.5 * (value) };
-  });
-
-  const saturation = computed(() => ({ values: imageEnhancements.value.saturation }));
-
-  const sharpen = computed(() => {
-    const s = imageEnhancements.value.sharpen;
-    const center = (1 + 4 * s);
-    const kernel = [0, -s, 0, -s, center, -s, 0, -s, 0].map((n) => Number(n).toFixed(4)).join(' ');
-    return { kernelMatrix: kernel, divisor: 1 };
-  });
+  const imageEnhancementOutputs = computed(() => computeOutputs(imageEnhancements.value));
 
-  const imageEnhancementOutputs = computed(() => ({
-    brightness: brightness.value,
-    contrast: contrast.value,
-    saturation: saturation.value,
-    sharpen: sharpen.value,
-  }));
-
-  const isDefaultImage = computed(() => (
-    imageEnhancements.value.brightness === 1
-    && imageEnhancements.value.contrast === 1
-    && imageEnhancements.value.saturation === 1
-    && imageEnhancements.value.sharpen === 0
-  ));
+  const isDefaultImage = computed(() => computeIsDefault(imageEnhancements.value));
 
   const setImageEnhancements = (enhancements: ImageEnhancements) => {
     imageEnhancements.value = {
@@ -73,14 +267,36 @@ export default function useImageEnhancements() {
       contrast: enhancements.contrast,
       saturation: enhancements.saturation,
       sharpen: enhancements.sharpen,
+      percentileStretch: enhancements.percentileStretch
+        ? { ...enhancements.percentileStretch }
+        : undefined,
     };
   };
 
+  const setPercentileStretchSupported = (supported: boolean) => {
+    percentileStretchSupported.value = supported;
+  };
+
+  const setPercentileHistogram = (hist: PercentileHistogram | null) => {
+    percentileHistogram.value = hist;
+  };
+
+  const setPercentileHistogramLoading = (loading: boolean) => {
+    percentileHistogramLoading.value = loading;
+  };
+
   return {
     imageEnhancements,
+    imageEnhancementsByCamera,
     imageEnhancementOutputs,
     isDefaultImage,
+    percentileStretchSupported,
+    percentileHistogram,
+    percentileHistogramLoading,
     setSVGFilters,
     setImageEnhancements,
+    setPercentileStretchSupported,
+    setPercentileHistogram,
+    setPercentileHistogramLoading,
   };
 }
diff --git a/docs/Annotation-User-Interface-Overview.md b/docs/Annotation-User-Interface-Overview.md
index 111108785..87de4d8ae 100644
--- a/docs/Annotation-User-Interface-Overview.md
+++ b/docs/Annotation-User-Interface-Overview.md
@@ -15,7 +15,9 @@ This documentation section provides a reference guide to the annotation interfac
     * **[Dataset Info](UI-DatasetInfo.md)** - View dataset properties and attach custom dataset-level metadata that is shown while annotating and included in CSV export.
     * **[Revision History](Web-Version.md#revision-history)** (Web) - Inspect and check out past saved annotation states.
     * **Threshold Controls** - Advance thresholding of annotation confidence values per-type.
-    * **Image Enhancement** - Adjust the image threshold range.
+    * **Image Enhancement** — Brightness, contrast, saturation, sharpness, and
+      [percentile stretch for high bit-depth TIFF](UI-Image-Enhancements.md) (Web
+      large-image and Desktop image-sequence).
     * **[Group Manager](UI-Group-Manager.md)** - Controls for creating, managing, and filtering multi-annotation groups.
     * **[Annotation Sets](Annotation-Sets.md)** - Parallel annotation versions on the same dataset (web only): switch sets, create named copies, and compare overlays.
     * **[Attributes Details Panel](UI-AttributeDetails.md)** - Attributes panel used to filter or generate graphs of attributes.
diff --git a/docs/DataFormats.md b/docs/DataFormats.md
index e9491e9fa..d825c6fea 100644
--- a/docs/DataFormats.md
+++ b/docs/DataFormats.md
@@ -180,12 +180,16 @@ interface DatasetMetaMutable {
   customTypeStyling?: Record<string, CustomStyle>;
   customGroupStyling?: Record<string, CustomStyle>;
   confidenceFilters?: Record<string, number>;
-  imageEnhancments?: ImageEnhancements;
+  imageEnhancements?: ImageEnhancements;
   attributes?: Readonly<Record<string, Attribute>>;
   datasetInfo?: Record<string, unknown>;
 }
 ```
 
+`imageEnhancements` stores viewer display settings (brightness, contrast, saturation,
+sharpen, and optional percentile stretch bounds). See
+[Image Enhancements](UI-Image-Enhancements.md) for platform support of high bit-depth stretch.
+
 ## VIAME CSV
 
 Read the [VIAME CSV Specification](https://viame.readthedocs.io/en/latest/sections/detection_file_conversions.html).
diff --git a/docs/Large-Image-Support.md b/docs/Large-Image-Support.md
index e9e0f64f9..90941904c 100644
--- a/docs/Large-Image-Support.md
+++ b/docs/Large-Image-Support.md
@@ -1,6 +1,19 @@
 # Large Image Support
 
-DIVE supports large image datasets (GeoTIFF/TIFF) through tiled pyramid access.
+DIVE supports large image datasets (GeoTIFF/TIFF) through tiled pyramid access on **Web**
+(Girder [large_image](https://girder.github.io/large_image/)) and **Desktop** (local
+GeoTIFF tile server).
+
+## Dynamic range in the viewer
+
+For **Web** tiled TIFF datasets (`large-image` type), use the
+[Image Enhancements](UI-Image-Enhancements.md) panel to apply **percentile stretch** while
+annotating. DIVE passes stretch parameters to Girder tile requests so 16-bit (and other
+high bit-depth) data can be viewed interactively without baking a fixed min/max into the
+file first.
+
+Pre-scaling to 8-bit COG (below) is still useful when you want a fixed display range at
+import time or when preparing files for tools that do not support dynamic tile styling.
 
 ## Requirement: Internal Overviews
 
diff --git a/docs/UI-Image-Enhancements.md b/docs/UI-Image-Enhancements.md
new file mode 100644
index 000000000..46ad07985
--- /dev/null
+++ b/docs/UI-Image-Enhancements.md
@@ -0,0 +1,70 @@
+# Image Enhancements
+
+The **Image Enhancements** panel adjusts how imagery looks in the annotation view. Open it
+from the [context sidebar](UI-Navigation-Editing-Bar.md#context-sidebar-web) (Web) or the
+viewer controls (Desktop).
+
+Settings are saved per dataset in the `imageEnhancements` metadata field and restored the
+next time you open the dataset.
+
+## Standard controls
+
+These apply to **8-bit and tiled imagery** on both Web and Desktop:
+
+* **Brightness** — linear intensity offset
+* **Contrast** — linear intensity scale around mid-gray
+* **Saturation** — color saturation (meaningful for RGB imagery)
+* **Sharpness** — convolution sharpening filter
+
+They are applied as SVG filters on top of the displayed image or tile layer.
+
+Use **Reset** to return all sliders (including percentile stretch) to defaults.
+
+## Percentile stretch (greater than 8-bit)
+
+High bit-depth sources such as **16-bit TIFF** are often imported or transcoded into a
+narrow 8-bit range for display. **Percentile stretch** remaps pixel values using histogram
+percentiles so detail is visible without permanently rewriting the source file.
+
+When supported, the panel shows:
+
+* A **Percentile Stretch** toggle
+* A **histogram** of the current frame (when available)
+* **Low %** and **High %** sliders (defaults 1 and 99) that clip the dimmest and brightest
+  portions of the histogram before stretching to display range
+
+Low and high cutoff markers on the histogram update as you move the sliders.
+
+### Where percentile stretch is available
+
+| Dataset type | Platform | How stretch is applied |
+|--------------|----------|------------------------|
+| `large-image` (TIFF / GeoTIFF) | **Web** | Girder [large_image](Large-Image-Support.md) tile `style` parameters; histogram from `item/{id}/tiles/histogram` |
+| `image-sequence` (TIFF originals) | **Desktop** | On-demand PNG from the original TIFF via the local `/api/media/display` endpoint |
+| `image-sequence` (TIFF) | Web | Not available — import-time transcoding produces 8-bit PNGs |
+| 8-bit PNG / JPEG / video | Web or Desktop | Percentile stretch hidden; use brightness/contrast only |
+
+For **Web** high bit-depth TIFFs, import the file as a **tiled large-image** dataset (see
+[Large Image Support](Large-Image-Support.md)) rather than as a folder of PNGs. The viewer
+uses `LargeImageAnnotator` and Girder tile endpoints for display and stretch.
+
+For **Desktop** folder-based TIFF sequences, DIVE keeps the original TIFF on disk and
+serves stretched frames from that source while annotations continue to reference the
+transcoded PNG timeline.
+
+### Pre-scaling vs dynamic stretch
+
+[Large Image Support](Large-Image-Support.md) documents optional GDAL pre-scaling to 8-bit
+COG (`gdal_translate … -scale <min> <max> 0 255`). That produces a fixed display range at
+import time.
+
+Percentile stretch is an **interactive alternative** (Web large-image and Desktop
+image-sequence TIFF): you can tune low/high percentiles while annotating without
+re-exporting the file. Pre-scaled COGs and percentile stretch can both be valid depending
+on workflow.
+
+## Related documentation
+
+* [Large Image Support](Large-Image-Support.md) — tiled TIFF requirements and COG conversion
+* [Data formats](DataFormats.md) — `imageEnhancements` in dataset metadata
+* [Annotation UI overview](Annotation-User-Interface-Overview.md) — where the panel lives in the layout
diff --git a/docs/UI-Navigation-Editing-Bar.md b/docs/UI-Navigation-Editing-Bar.md
index e3eefae20..1c9791e82 100644
--- a/docs/UI-Navigation-Editing-Bar.md
+++ b/docs/UI-Navigation-Editing-Bar.md
@@ -26,7 +26,7 @@ The editing bar is the second row below navigation.
 
 On the right side of the editing bar, ==:material-chevron-left-box:== (or ==:material-chevron-right-box:== when open) toggles the **context sidebar** — advanced tools and settings panels on the right side of the viewer.
 
-Use the dropdown at the top of that panel to switch tools, including [Dataset Info](UI-DatasetInfo.md), [Revision History](Web-Version.md#revision-history), Group Manager, threshold controls, and (when applicable) [Annotation Sets](Annotation-Sets.md).
+Use the dropdown at the top of that panel to switch tools, including [Dataset Info](UI-DatasetInfo.md), [Revision History](Web-Version.md#revision-history), [Image Enhancements](UI-Image-Enhancements.md), Group Manager, threshold controls, and (when applicable) [Annotation Sets](Annotation-Sets.md).
 
 ### Editing Status Indicator
 
diff --git a/docs/index.md b/docs/index.md
index a6e048b8b..c52ee2149 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -38,7 +38,8 @@ Freeform or multi-select attributes | ✔️ | ✔️
 | &nbsp;&nbsp;&nbsp; Interactive point-click segmentation | ❌ | ✔️
 | &nbsp;&nbsp;&nbsp; Interactive stereo (warp / length recompute) | ❌ | ✔️
 | **Data Review** |
-Image enhancement (thresholding) | ✔️ | ✔️
+Image enhancement (brightness, contrast, saturation, sharpness) | ✔️ | ✔️
+| &nbsp;&nbsp;&nbsp; Percentile stretch for high bit-depth TIFF | ✔️ (large-image) | ✔️ (image-sequence)
 Advanced per-type annotation confidence threshoding | ✔️ | ✔️
 Review save history and load previous states | ✔️ | ❌
 Multiple parallel annotation sets on one dataset | ✔️ | ❌
diff --git a/mkdocs.yml b/mkdocs.yml
index 3944a0ad8..dd5ab91dc 100644
--- a/mkdocs.yml
+++ b/mkdocs.yml
@@ -69,12 +69,13 @@ nav:
         - Attribute Track Filtering: UI-AttributeTrackFiltering.md
       - Group Manager: UI-Group-Manager.md
       - Dataset Info: UI-DatasetInfo.md
+      - Image Enhancements: UI-Image-Enhancements.md
       - Annotation Sets: Annotation-Sets.md
     - Keyboard Shortcut Reference: Mouse-Keyboard-Shortcuts.md
     - Advanced features:
       - Pipeline Import and Export: Pipeline-Import-Export.md
       - Command Line Tools: Command-Line-Tools.md
-      - Large Image Desktop Support: Large-Image-Support.md
+      - Large Image Support: Large-Image-Support.md
       - Multicamera and Stereo Data: Multicamera-data.md
       - Interactive Annotation (Desktop): Interactive-Annotation.md
     - Screenshots: Screenshots.md
diff --git a/server/README.md b/server/README.md
index cb61c1871..b91f3bcaa 100644
--- a/server/README.md
+++ b/server/README.md
@@ -151,7 +151,8 @@ Image chips that compose a video are stored as girder items in a folder.  Videos
 * `fps` (number) annotation framerate, not to be confused with video raw framerate
 * `ffprobe_info` (JSON) output of ffprobe for raw input video
 * `confidenceFilters` (JSON) map of filter name to float in [0, 1]
-* `imageEnhancements` (JSON) values for image enhancements (brightness, contrast, saturation, sharpen)
+* `imageEnhancements` (JSON) values for image enhancements (brightness, contrast,
+  saturation, sharpen, optional `percentileStretch` with `lowPercentile` / `highPercentile`)
 * `customTypeStyline` (JSON) map of class name to GeoJS display attributes.
 * `foreign_media_id` (string) For "cloned" datasets, this is an objectId pointer to the source media
 
diff --git a/server/dive_server/crud_dataset.py b/server/dive_server/crud_dataset.py
index c0f7dc24f..04dd5c8d5 100644
--- a/server/dive_server/crud_dataset.py
+++ b/server/dive_server/crud_dataset.py
@@ -897,6 +897,8 @@ def _child_media_frame_count(
 ) -> int:
     if media_type == constants.ImageSequenceType:
         return len(crud.valid_images(child, user))
+    if media_type == constants.LargeImageType:
+        return len(crud.valid_large_images(child, user))
     if media_type == constants.VideoType:
         video_item = Item().findOne(
             {
@@ -1206,9 +1208,13 @@ def create_multicam(
             code=400,
         )
 
-    if validated.type not in (constants.ImageSequenceType, constants.VideoType):
+    if validated.type not in (
+        constants.ImageSequenceType,
+        constants.VideoType,
+        constants.LargeImageType,
+    ):
         raise RestException(
-            f'Multicam type must be image-sequence or video, not {validated.type}',
+            f'Multicam type must be image-sequence, large-image, or video, not {validated.type}',
             code=400,
         )
 
@@ -1223,6 +1229,7 @@ def create_multicam(
         camera_order = list(cameras.keys())
 
     loaded_children: Dict[str, types.GirderModel] = {}
+    camera_types_by_name: Dict[str, str] = {}
     frame_counts: List[int] = []
     child_fps_by_name: Dict[str, float] = {}
     for name in camera_order:
@@ -1230,6 +1237,16 @@ def create_multicam(
         folder_id = cam.get('folderId')
         if not folder_id:
             raise RestException(f'Camera "{name}" missing folderId', code=400)
+        cam_type = cam.get('type') or validated.type
+        if cam_type not in (
+            constants.ImageSequenceType,
+            constants.VideoType,
+            constants.LargeImageType,
+        ):
+            raise RestException(
+                f'Camera "{name}" has unsupported type {cam_type}',
+                code=400,
+            )
         child = Folder().load(folder_id, level=AccessType.WRITE, user=user)
         if child is None:
             raise RestException(f'Camera folder {folder_id} was not found', code=404)
@@ -1240,15 +1257,16 @@ def create_multicam(
             )
         crud.verify_dataset(child)
         child_type = fromMeta(child, constants.TypeMarker)
-        if child_type != validated.type:
+        if child_type != cam_type:
             raise RestException(
-                f'Camera "{name}" has type {child_type}, expected {validated.type}',
+                f'Camera "{name}" has type {child_type}, expected {cam_type}',
                 code=400,
             )
         child_fps = fromMeta(child, constants.FPSMarker)
         child_fps_by_name[name] = child_fps
-        frame_counts.append(_child_media_frame_count(child, user, validated.type))
+        frame_counts.append(_child_media_frame_count(child, user, cam_type))
         loaded_children[name] = child
+        camera_types_by_name[name] = cam_type
 
     use_video_fps = validated.type == constants.VideoType and validated.fps == -1
     if use_video_fps:
@@ -1267,9 +1285,12 @@ def create_multicam(
                 )
 
     if len(set(frame_counts)) > 1:
+        details = ', '.join(
+            f'{name}={count}' for name, count in zip(camera_order, frame_counts)
+        )
         expected = frame_counts[0]
         raise RestException(
-            f'All cameras must have the same number of frames (expected {expected})',
+            f'All cameras must have the same number of frames (expected {expected}; {details})',
             code=400,
         )
 
@@ -1283,7 +1304,7 @@ def create_multicam(
             Folder().save(child)
         multi_cam_cameras[name] = {
             'folderId': str(child['_id']),
-            'type': validated.type,
+            'type': camera_types_by_name[name],
         }
 
     calibration_source_item_id = None
diff --git a/server/dive_utils/constants.py b/server/dive_utils/constants.py
index 2666593a2..cb782614b 100644
--- a/server/dive_utils/constants.py
+++ b/server/dive_utils/constants.py
@@ -47,6 +47,7 @@
 videoRegex = re.compile(r"(\." + r"|\.".join(validVideoFormats) + ')$', re.IGNORECASE)
 imageRegex = re.compile(r"(\." + r"|\.".join(validImageFormats) + ')$', re.IGNORECASE)
 largeImageRegEx = re.compile(r"(\." + r"|\.".join(validLargeImageFormats) + ')$', re.IGNORECASE)
+tiffSequenceRegex = re.compile(r'\.tiff?$', re.IGNORECASE)
 allLargeImageRegEx = re.compile(
     r"(\." + r"|\.".join(allValidLargeImageFormats) + ')$', re.IGNORECASE
 )
diff --git a/server/tests/test_validate_files.py b/server/tests/test_validate_files.py
new file mode 100644
index 000000000..b26f27e94
--- /dev/null
+++ b/server/tests/test_validate_files.py
@@ -0,0 +1,29 @@
+from dive_server import crud_dataset
+from dive_utils import constants
+
+
+def test_validate_files_tiff_as_large_image():
+    files = [
+        'kamera_2021_test_fl01_C_20210814_003347.198347_ir.tif',
+        'kamera_2021_test_fl01_C_20210814_003353.208198_ir.tif',
+    ]
+    result = crud_dataset.validate_files(files)
+    assert result['ok'] is True
+    assert result['type'] == constants.LargeImageType
+    assert result['media'] == files
+
+
+def test_validate_files_jpg_as_image_sequence():
+    files = ['frame.jpg', 'frame2.jpg']
+    result = crud_dataset.validate_files(files)
+    assert result['ok'] is True
+    assert result['type'] == constants.ImageSequenceType
+    assert result['media'] == files
+
+
+def test_validate_files_nitf_remains_large_image():
+    files = ['scene.nitf']
+    result = crud_dataset.validate_files(files)
+    assert result['ok'] is True
+    assert result['type'] == constants.LargeImageType
+    assert result['media'] == files

From 301f4ea17d829c2dad6c3a54996370a6712d0a91 Mon Sep 17 00:00:00 2001
From: Adam Romlein <35015390+romleiaj@users.noreply.github.com>
Date: Wed, 8 Jul 2026 12:26:32 -0400
Subject: [PATCH 2/6] Add a batch import for multicam datasets (#1745)

* Add batch multicam collect-folder scanner

Scans a root folder of collect folders (collect -> camera -> images) and
produces per-collect beginMultiCamImport arguments for MML seal surveys,
without copying imagery. Camera subfolders are matched case-insensitively
across collects; the canonical camera set is the union of image-bearing
subfolder names, limited to 2-3 alphanumeric cameras to match the existing
multicam subfolder import. Missing/empty/imageless camera folders are
reported as per-collect blocking problems; frame-count mismatches are
non-blocking warnings (seal collects legitimately drop frames). Default
display camera follows pickDefaultMulticamCamera (center/middle alias,
else the middle camera of display order).

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

* Add batch multicam import UI and desktop wiring

New 'MultiCam Batch' entry in the Open Image Sequence dropdown (desktop
only, behind a new batch-multi-cam-import prop on ImportButton) opens
ImportMultiCamBatchDialog: pick a root folder, review a per-collect
validation summary table (cameras, frame counts, problems/warnings),
then import all valid collects sequentially via the existing
import-multicam-media / finalize-import machinery, continuing past
per-collect failures and reporting a final summary. Adds the
scan-multicam-batch IPC handler and scanMultiCamBatch frontend API.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

* make the dropdown area larger to display full multicam batch import option

* editable batch import datasets

* add support for web to batch upload multicam datasets

* update documentation for batch multi-camera import functionality

* linting

* ordering multicam imports

* prevent stereoscopic loading and calculations when in multicamera mode

---------

Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
Co-authored-by: Bryon Lewis <Bryon.Lewis@kitware.com>
---
 .../dive-common/components/ImportButton.vue   |  27 +-
 .../components/ImportMultiCamBatchDialog.vue  | 429 ++++++++++++++++++
 .../components/ImportMultiCamDialog/README.md |  27 ++
 .../multicamSubfolderLayout.spec.ts           |  23 +-
 .../multicamSubfolderLayout.ts                |  28 +-
 client/dive-common/components/Viewer.vue      |   3 +-
 client/dive-common/multiCamBatchScan.spec.ts  | 151 ++++++
 client/dive-common/multiCamBatchScan.ts       | 183 ++++++++
 client/dive-common/multicamDisplay.spec.ts    |  14 +
 client/dive-common/multicamDisplay.ts         |   8 +-
 client/dive-common/use/useModeManager.ts      |  16 +-
 client/platform/desktop/backend/ipcService.ts |   6 +
 .../backend/native/multiCollectImport.spec.ts | 263 +++++++++++
 .../backend/native/multiCollectImport.ts      |  52 +++
 client/platform/desktop/constants.ts          |   6 +
 client/platform/desktop/frontend/api.ts       |   6 +
 .../components/ImportMultiCamBatchDialog.vue  |  51 +++
 .../desktop/frontend/components/Recent.vue    |  18 +
 .../frontend/components/ViewerLoader.vue      |  42 +-
 .../web-girder/scanMultiCamBatch.spec.ts      |  47 ++
 .../platform/web-girder/scanMultiCamBatch.ts  |  94 ++++
 client/platform/web-girder/views/Upload.vue   | 166 +++++--
 docs/Dive-Desktop.md                          |   1 +
 docs/Multicamera-data.md                      |  46 ++
 docs/Web-Version.md                           |   9 +-
 docs/index.md                                 |   1 +
 26 files changed, 1656 insertions(+), 61 deletions(-)
 create mode 100644 client/dive-common/components/ImportMultiCamBatchDialog.vue
 create mode 100644 client/dive-common/multiCamBatchScan.spec.ts
 create mode 100644 client/dive-common/multiCamBatchScan.ts
 create mode 100644 client/platform/desktop/backend/native/multiCollectImport.spec.ts
 create mode 100644 client/platform/desktop/backend/native/multiCollectImport.ts
 create mode 100644 client/platform/desktop/frontend/components/ImportMultiCamBatchDialog.vue
 create mode 100644 client/platform/web-girder/scanMultiCamBatch.spec.ts
 create mode 100644 client/platform/web-girder/scanMultiCamBatch.ts

diff --git a/client/dive-common/components/ImportButton.vue b/client/dive-common/components/ImportButton.vue
index d2bf90bde..8020ef548 100644
--- a/client/dive-common/components/ImportButton.vue
+++ b/client/dive-common/components/ImportButton.vue
@@ -1,6 +1,6 @@
 <script lang="ts">
 import type { DatasetType } from 'dive-common/apispec';
-import { defineComponent, PropType } from 'vue';
+import { computed, defineComponent, PropType } from 'vue';
 
 export const DefaultButtonAttrs = {
   block: true,
@@ -27,6 +27,10 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
+    batchMultiCamImport: { // Batch import of collect folders (collect/camera/images)
+      type: Boolean,
+      default: false,
+    },
     buttonAttrs: {
       type: Object,
       default: () => DefaultButtonAttrs,
@@ -40,8 +44,11 @@ export default defineComponent({
       default: '',
     },
   },
-  setup() {
+  setup(props) {
+    const menuWidth = computed(() => (props.batchMultiCamImport ? 240 : 180));
+
     return {
+      menuWidth,
     };
   },
 });
@@ -52,8 +59,8 @@ export default defineComponent({
     <v-menu
       offset-y
       offset-x
-      nudge-left="180"
-      max-width="180"
+      :nudge-left="menuWidth"
+      :max-width="menuWidth"
     >
       <template #activator="{ on }">
         <v-tooltip
@@ -171,6 +178,18 @@ export default defineComponent({
               <v-list-item-title>MultiCam</v-list-item-title>
             </v-list-item-content>
           </v-list-item>
+          <v-list-item
+            v-if="batchMultiCamImport"
+            style="align-items':'center"
+            @click="$emit('multi-cam-batch')"
+          >
+            <v-list-item-icon>
+              <v-icon>mdi-folder-multiple-image</v-icon>
+            </v-list-item-icon>
+            <v-list-item-content>
+              <v-list-item-title>MultiCam Batch</v-list-item-title>
+            </v-list-item-content>
+          </v-list-item>
         </v-list>
       </v-card>
     </v-menu>
diff --git a/client/dive-common/components/ImportMultiCamBatchDialog.vue b/client/dive-common/components/ImportMultiCamBatchDialog.vue
new file mode 100644
index 000000000..c8c67c800
--- /dev/null
+++ b/client/dive-common/components/ImportMultiCamBatchDialog.vue
@@ -0,0 +1,429 @@
+<!--
+  Batch multicam import: pick a root folder of collect folders (collect -> camera -> images),
+  review the scan/validation summary, then import one multicam dataset per valid collect,
+  continuing past per-collect failures.
+-->
+<script lang="ts">
+import {
+  computed, defineComponent, PropType, ref, Ref,
+} from 'vue';
+import {
+  MultiCamBatchCollect,
+  MultiCamBatchScanResult,
+} from 'dive-common/multiCamBatchScan';
+
+interface CollectStatus {
+  state: 'ready' | 'blocked' | 'importing' | 'done' | 'failed';
+  message?: string;
+}
+
+const headers = [
+  {
+    text: '', align: 'center', sortable: false, value: 'selected', width: '48',
+  },
+  {
+    text: 'Dataset Name', align: 'start', sortable: false, value: 'name',
+  },
+  {
+    text: 'Cameras', align: 'start', sortable: false, value: 'cameras',
+  },
+  {
+    text: 'Issues', align: 'start', sortable: false, value: 'issues',
+  },
+  {
+    text: 'Status', align: 'start', sortable: false, value: 'status', width: '160',
+  },
+];
+
+export default defineComponent({
+  name: 'ImportMultiCamBatchDialog',
+
+  props: {
+    chooseAndScan: {
+      type: Function as PropType<() => Promise<MultiCamBatchScanResult | null>>,
+      required: true,
+    },
+    importCollect: {
+      type: Function as PropType<(collect: MultiCamBatchCollect, datasetName: string) => Promise<void>>,
+      required: true,
+    },
+    chooseFolderLabel: {
+      type: String,
+      default: 'Choose Root Folder',
+    },
+  },
+
+  setup(props) {
+    const scan: Ref<MultiCamBatchScanResult | null> = ref(null);
+    const scanning = ref(false);
+    const importing = ref(false);
+    const finished = ref(false);
+    const errorMessage: Ref<string | null> = ref(null);
+    const statuses: Ref<Record<string, CollectStatus>> = ref({});
+    const selectedState: Ref<Record<string, boolean>> = ref({});
+    const datasetNames: Ref<Record<string, string>> = ref({});
+
+    const importableCollects = computed(() => (scan.value
+      ? scan.value.collects.filter((collect) => collect.importArgs !== null)
+      : []));
+
+    const selectedImportableCollects = computed(() => importableCollects.value
+      .filter((collect) => selectedState.value[collect.name]));
+
+    const allImportableSelected = computed(() => {
+      const importable = importableCollects.value;
+      return importable.length > 0
+        && importable.every((collect) => selectedState.value[collect.name]);
+    });
+
+    const someImportableSelected = computed(() => {
+      const importable = importableCollects.value;
+      const selectedCount = importable
+        .filter((collect) => selectedState.value[collect.name]).length;
+      return selectedCount > 0 && selectedCount < importable.length;
+    });
+
+    const canImport = computed(() => selectedImportableCollects.value.length > 0
+      && selectedImportableCollects.value.every(
+        (collect) => (datasetNames.value[collect.name] || '').trim().length > 0,
+      ));
+
+    const doneCount = computed(() => Object.values(statuses.value)
+      .filter((status) => status.state === 'done').length);
+    const failedCount = computed(() => Object.values(statuses.value)
+      .filter((status) => status.state === 'failed').length);
+    const blockedCount = computed(() => (scan.value
+      ? scan.value.collects.length - importableCollects.value.length
+      : 0));
+    const notImportedCount = computed(() => importableCollects.value
+      .filter((collect) => !selectedState.value[collect.name]).length);
+
+    function resetAfterScan() {
+      const nextStatuses: Record<string, CollectStatus> = {};
+      const nextSelected: Record<string, boolean> = {};
+      const nextDatasetNames: Record<string, string> = {};
+      scan.value?.collects.forEach((collect) => {
+        nextStatuses[collect.name] = { state: collect.importArgs ? 'ready' : 'blocked' };
+        nextSelected[collect.name] = collect.importArgs !== null;
+        nextDatasetNames[collect.name] = collect.name;
+      });
+      statuses.value = nextStatuses;
+      selectedState.value = nextSelected;
+      datasetNames.value = nextDatasetNames;
+    }
+
+    function toggleSelectAll(selected: boolean) {
+      const next = { ...selectedState.value };
+      importableCollects.value.forEach((collect) => {
+        next[collect.name] = selected;
+      });
+      selectedState.value = next;
+    }
+
+    function setSelected(name: string, selected: boolean) {
+      selectedState.value = { ...selectedState.value, [name]: selected };
+    }
+
+    async function chooseRootFolder() {
+      errorMessage.value = null;
+      scan.value = null;
+      finished.value = false;
+      scanning.value = true;
+      try {
+        scan.value = await props.chooseAndScan();
+        if (scan.value) {
+          resetAfterScan();
+        }
+      } catch (err) {
+        errorMessage.value = String(err);
+      } finally {
+        scanning.value = false;
+      }
+    }
+
+    async function runImports() {
+      if (importing.value || !canImport.value) {
+        return;
+      }
+      importing.value = true;
+      errorMessage.value = null;
+      // Sequential on purpose: concurrent imports can conflict behind the scenes
+      // and per-collect failures must not stop the batch.
+      // eslint-disable-next-line no-restricted-syntax
+      for (const collect of selectedImportableCollects.value) {
+        statuses.value = { ...statuses.value, [collect.name]: { state: 'importing' } };
+        const datasetName = (datasetNames.value[collect.name] || collect.name).trim();
+        try {
+          // eslint-disable-next-line no-await-in-loop
+          await props.importCollect(collect, datasetName);
+          statuses.value = { ...statuses.value, [collect.name]: { state: 'done' } };
+        } catch (err) {
+          statuses.value = {
+            ...statuses.value,
+            [collect.name]: { state: 'failed', message: String(err) },
+          };
+        }
+      }
+      importing.value = false;
+      finished.value = true;
+    }
+
+    function statusChip(collect: MultiCamBatchCollect): { text: string; color: string } {
+      if (!collect.importArgs) {
+        return { text: 'Skipped', color: 'warning' };
+      }
+      if (!selectedState.value[collect.name]) {
+        return { text: finished.value ? 'Not imported' : 'Not selected', color: 'grey darken-1' };
+      }
+      const status = statuses.value[collect.name];
+      switch (status?.state) {
+        case 'importing':
+          return { text: 'Importing', color: 'primary' };
+        case 'done':
+          return { text: 'Imported', color: 'success' };
+        case 'failed':
+          return { text: 'Failed', color: 'error' };
+        default:
+          return { text: 'Ready', color: 'grey darken-1' };
+      }
+    }
+
+    return {
+      scan,
+      scanning,
+      importing,
+      finished,
+      errorMessage,
+      statuses,
+      selectedState,
+      datasetNames,
+      headers,
+      importableCollects,
+      selectedImportableCollects,
+      allImportableSelected,
+      someImportableSelected,
+      canImport,
+      doneCount,
+      failedCount,
+      blockedCount,
+      notImportedCount,
+      chooseRootFolder,
+      runImports,
+      statusChip,
+      toggleSelectAll,
+      setSelected,
+    };
+  },
+});
+</script>
+
+<template>
+  <v-card
+    outlined
+    class="import-card"
+  >
+    <v-card-title class="text-h5">
+      Batch Multicam Import
+    </v-card-title>
+    <v-card-text>
+      <p class="grey--text text--lighten-1">
+        Select a top-level folder whose subfolders are collects; each collect must
+        contain the same camera subfolders (for example EO, IR, UV) holding that
+        camera's images. One multicam dataset is created per collect.
+      </p>
+      <v-row
+        no-gutters
+        class="align-center mb-3"
+      >
+        <v-btn
+          color="primary"
+          :disabled="scanning || importing"
+          @click="chooseRootFolder"
+        >
+          <v-icon class="mr-2">
+            mdi-folder-multiple-image
+          </v-icon>
+          {{ chooseFolderLabel }}
+        </v-btn>
+        <span
+          v-if="scan"
+          class="ml-4 grey--text"
+        >
+          {{ scan.rootPath }}
+        </span>
+      </v-row>
+      <v-progress-linear
+        v-if="scanning"
+        indeterminate
+        color="light-blue"
+        class="mb-3"
+      />
+      <v-alert
+        v-if="errorMessage"
+        type="error"
+        outlined
+        dense
+      >
+        {{ errorMessage }}
+      </v-alert>
+      <template v-if="scan">
+        <v-alert
+          v-for="problem in scan.problems"
+          :key="problem"
+          type="error"
+          outlined
+          dense
+        >
+          {{ problem }}
+        </v-alert>
+        <div
+          v-if="scan.cameraNames.length"
+          class="mb-2"
+        >
+          <span class="mr-2">Cameras:</span>
+          <v-chip
+            v-for="camera in scan.cameraNames"
+            :key="camera"
+            small
+            class="mr-1"
+          >
+            {{ camera }}
+          </v-chip>
+        </div>
+        <v-data-table
+          :headers="headers"
+          :items="scan.collects"
+          item-key="name"
+          disable-sort
+          disable-pagination
+          hide-default-footer
+          dense
+        >
+          <template #header.selected>
+            <v-simple-checkbox
+              :value="allImportableSelected"
+              :indeterminate="someImportableSelected"
+              :disabled="!importableCollects.length || importing || finished"
+              @input="toggleSelectAll"
+            />
+          </template>
+          <template #item.selected="{ item }">
+            <v-simple-checkbox
+              v-if="item.importArgs"
+              :value="selectedState[item.name]"
+              :disabled="importing || finished"
+              @input="setSelected(item.name, $event)"
+            />
+          </template>
+          <template #item.name="{ item }">
+            <template v-if="item.importArgs">
+              <v-text-field
+                v-model="datasetNames[item.name]"
+                dense
+                hide-details
+                placeholder="Dataset name"
+                :disabled="importing || finished || !selectedState[item.name]"
+              />
+              <div class="grey--text text-caption">
+                Collect folder: {{ item.name }}
+              </div>
+            </template>
+            <span
+              v-else
+              class="grey--text"
+            >{{ item.name }}</span>
+          </template>
+          <template #item.cameras="{ item }">
+            <span v-if="item.cameras.length">
+              <v-chip
+                v-for="camera in item.cameras"
+                :key="camera.name"
+                x-small
+                class="mr-1"
+              >
+                {{ camera.name }} ({{ camera.imageCount }})
+              </v-chip>
+            </span>
+            <span
+              v-else
+              class="grey--text"
+            >none</span>
+          </template>
+          <template #item.issues="{ item }">
+            <div
+              v-for="problem in item.problems"
+              :key="`problem-${problem}`"
+              class="error--text text-caption"
+            >
+              {{ problem }}
+            </div>
+            <div
+              v-for="warning in item.warnings"
+              :key="`warning-${warning}`"
+              class="warning--text text-caption"
+            >
+              {{ warning }}
+            </div>
+            <div
+              v-if="statuses[item.name] && statuses[item.name].message"
+              class="error--text text-caption"
+            >
+              {{ statuses[item.name].message }}
+            </div>
+          </template>
+          <template #item.status="{ item }">
+            <v-chip
+              small
+              outlined
+              :color="statusChip(item).color"
+            >
+              {{ statusChip(item).text }}
+            </v-chip>
+          </template>
+        </v-data-table>
+        <v-alert
+          v-if="finished"
+          :type="failedCount ? 'warning' : 'success'"
+          outlined
+          dense
+          class="mt-3"
+        >
+          Imported {{ doneCount }} of {{ selectedImportableCollects.length }} selected collects
+          <template v-if="failedCount">
+            ({{ failedCount }} failed)
+          </template>
+          <template v-if="blockedCount">
+            ({{ blockedCount }} skipped due to validation problems)
+          </template>
+          <template v-if="notImportedCount">
+            ({{ notImportedCount }} not selected)
+          </template>
+        </v-alert>
+      </template>
+      <v-row
+        no-gutters
+        class="align-center mt-4"
+      >
+        <v-spacer />
+        <v-btn
+          text
+          outlined
+          class="mr-3"
+          :disabled="importing"
+          @click="$emit('abort', doneCount)"
+        >
+          {{ finished ? 'Close' : 'Cancel' }}
+        </v-btn>
+        <v-btn
+          color="primary"
+          :disabled="!canImport || importing || finished"
+          :loading="importing"
+          @click="runImports"
+        >
+          Import {{ selectedImportableCollects.length }}
+          Collect{{ selectedImportableCollects.length === 1 ? '' : 's' }}
+        </v-btn>
+      </v-row>
+    </v-card-text>
+  </v-card>
+</template>
diff --git a/client/dive-common/components/ImportMultiCamDialog/README.md b/client/dive-common/components/ImportMultiCamDialog/README.md
index c24082941..7fdf87c0f 100644
--- a/client/dive-common/components/ImportMultiCamDialog/README.md
+++ b/client/dive-common/components/ImportMultiCamDialog/README.md
@@ -15,6 +15,33 @@ Used by:
 - `client/platform/desktop/frontend/components/Recent.vue`
 - `client/platform/web-girder/views/Upload.vue`
 
+## Batch multicam import (`ImportMultiCamBatchDialog`)
+
+Separate from the single-dataset dialog above. Entry point:
+
+```ts
+import ImportMultiCamBatchDialog from 'dive-common/components/ImportMultiCamBatchDialog.vue';
+```
+
+Used by the same platform pages (`Recent.vue`, `Upload.vue`), opened from the ==MultiCam Batch== item on `ImportButton` (`batchMultiCamImport` prop).
+
+| Piece | Role |
+|-------|------|
+| `ImportMultiCamBatchDialog.vue` | Scan review UI, editable dataset names, per-collect selection, sequential import |
+| `multiCamBatchScan.ts` | Shared scan/validation (`scanMultiCamBatchFromCollects`, `MultiCamBatchCollect`) |
+| `multicamSubfolderLayout.ts` | Camera naming rules and preferred order (shared with subfolder import) |
+| `platform/desktop/backend/native/multiCollectImport.ts` | Desktop filesystem scan (`scan-multicam-batch` IPC) |
+| `platform/web-girder/scanMultiCamBatch.ts` | Web scan from `File[]` + `webkitRelativePath` |
+
+Platform wiring:
+
+- **Desktop** — `chooseAndScan` calls `api.scanMultiCamBatch(path)`; `importCollect` runs the existing multicam import path per collect.
+- **Web** — `chooseAndScan` picks a folder via `openFromDisk`, then `scanMultiCamBatchFromFiles`; `importCollect` uploads each camera's files and finalizes the multicam parent dataset.
+
+Tests: `multiCamBatchScan.spec.ts`, `multiCollectImport.spec.ts`, `scanMultiCamBatch.spec.ts`.
+
+User-facing docs: [Multicamera and Stereo Data](../../../../docs/Multicamera-data.md#batch-multicam-import).
+
 ## Import modes
 
 | Mode (`importType`) | UI component | Description |
diff --git a/client/dive-common/components/ImportMultiCamDialog/multicamSubfolderLayout.spec.ts b/client/dive-common/components/ImportMultiCamDialog/multicamSubfolderLayout.spec.ts
index 7493eeec1..6ca1674ab 100644
--- a/client/dive-common/components/ImportMultiCamDialog/multicamSubfolderLayout.spec.ts
+++ b/client/dive-common/components/ImportMultiCamDialog/multicamSubfolderLayout.spec.ts
@@ -16,6 +16,7 @@ import {
   organizeSubfolderCameras,
   orderSubfolderCameraNames,
   parentFolderLabelFromAbsolutePaths,
+  preferEoIrSubfolderOrder,
   preferEoSubfolderFirst,
   preferLeftSubfolderFirst,
   pickDefaultMulticamCamera,
@@ -326,19 +327,27 @@ describe('sortSubfolderCameraNames', () => {
   });
 });
 
-describe('preferEoSubfolderFirst', () => {
-  it('moves EO-named folders before IR and others', () => {
-    expect(preferEoSubfolderFirst(['2021_IR_SHORT', '2021_EO_SHORT'])).toEqual([
+describe('preferEoIrSubfolderOrder', () => {
+  it('moves EO-named folders left and IR-named folders right', () => {
+    expect(preferEoIrSubfolderOrder(['2021_IR_SHORT', '2021_EO_SHORT'])).toEqual([
       '2021_EO_SHORT',
       '2021_IR_SHORT',
     ]);
+    expect(preferEoIrSubfolderOrder(['IR', 'UV', 'EO'])).toEqual(['EO', 'UV', 'IR']);
   });
 
-  it('leaves order unchanged when EO is already first', () => {
-    expect(preferEoSubfolderFirst(['2021_EO_SHORT', '2021_IR_SHORT'])).toEqual([
+  it('leaves order unchanged when EO is already first and IR is already last', () => {
+    expect(preferEoIrSubfolderOrder(['2021_EO_SHORT', '2021_IR_SHORT'])).toEqual([
       '2021_EO_SHORT',
       '2021_IR_SHORT',
     ]);
+    expect(preferEoIrSubfolderOrder(['EO', 'UV', 'IR'])).toEqual(['EO', 'UV', 'IR']);
+  });
+});
+
+describe('preferEoSubfolderFirst', () => {
+  it('delegates to preferEoIrSubfolderOrder', () => {
+    expect(preferEoSubfolderFirst(['IR', 'UV', 'EO'])).toEqual(['EO', 'UV', 'IR']);
   });
 });
 
@@ -406,6 +415,10 @@ describe('orderSubfolderCameraNames', () => {
   it('uses preferred order when STAR, CENTER, and PORT are all present', () => {
     expect(orderSubfolderCameraNames(['PORT', 'CENTER', 'STAR'])).toEqual(['STAR', 'CENTER', 'PORT']);
   });
+
+  it('orders EO left and IR right when those tokens appear in folder names', () => {
+    expect(orderSubfolderCameraNames(['IR', 'UV', 'EO'])).toEqual(['EO', 'UV', 'IR']);
+  });
 });
 
 describe('organizeSubfolderCameras case', () => {
diff --git a/client/dive-common/components/ImportMultiCamDialog/multicamSubfolderLayout.ts b/client/dive-common/components/ImportMultiCamDialog/multicamSubfolderLayout.ts
index 015c3bfc3..8b640b9e5 100644
--- a/client/dive-common/components/ImportMultiCamDialog/multicamSubfolderLayout.ts
+++ b/client/dive-common/components/ImportMultiCamDialog/multicamSubfolderLayout.ts
@@ -60,14 +60,26 @@ export function isIrSubfolderName(name: string): boolean {
   return /(^|_)IR(_|$)/i.test(name);
 }
 
-/** Move an EO-named folder to the front when present (before IR and other cameras). */
+/** Move EO-named folders to the front and IR-named folders to the back; preserve middle order. */
+export function preferEoIrSubfolderOrder(names: string[]): string[] {
+  const eo: string[] = [];
+  const middle: string[] = [];
+  const ir: string[] = [];
+  names.forEach((name) => {
+    if (isEoSubfolderName(name)) {
+      eo.push(name);
+    } else if (isIrSubfolderName(name)) {
+      ir.push(name);
+    } else {
+      middle.push(name);
+    }
+  });
+  return [...eo, ...middle, ...ir];
+}
+
+/** @deprecated Use preferEoIrSubfolderOrder */
 export function preferEoSubfolderFirst(names: string[]): string[] {
-  const eoIndex = names.findIndex((name) => isEoSubfolderName(name));
-  if (eoIndex <= 0) {
-    return names;
-  }
-  const eo = names[eoIndex];
-  return [eo, ...names.filter((_, index) => index !== eoIndex)];
+  return preferEoIrSubfolderOrder(names);
 }
 
 /**
@@ -178,7 +190,7 @@ export function orderSubfolderCameraNames(
   if (options?.preferLeftFirst) {
     ordered = preferLeftSubfolderFirst(ordered);
   }
-  return preferEoSubfolderFirst(ordered);
+  return preferEoIrSubfolderOrder(ordered);
 }
 
 export function isValidCameraName(name: string): boolean {
diff --git a/client/dive-common/components/Viewer.vue b/client/dive-common/components/Viewer.vue
index 646b3b1fd..879f0ad9f 100644
--- a/client/dive-common/components/Viewer.vue
+++ b/client/dive-common/components/Viewer.vue
@@ -410,6 +410,7 @@ export default defineComponent({
       cameraStore,
       aggregateController,
       readonlyState,
+      isStereoscopicDataset: computed(() => subType.value === 'stereo'),
       onStereoAnnotationComplete: (params: StereoAnnotationCompleteParams) => {
         emit('stereo-annotation-complete', params);
       },
@@ -583,7 +584,7 @@ export default defineComponent({
       // measurement (length, midpoint, range, RMS) computed for every frame
       // where both cameras now have a line. The desktop loader owns the stereo
       // service, so delegate via an event.
-      if (isStereoInteractiveModeEnabled()) {
+      if (isStereoInteractiveModeEnabled() && subType.value === 'stereo') {
         emit('stereo-track-linked', baseTrack);
       }
     }
diff --git a/client/dive-common/multiCamBatchScan.spec.ts b/client/dive-common/multiCamBatchScan.spec.ts
new file mode 100644
index 000000000..661183491
--- /dev/null
+++ b/client/dive-common/multiCamBatchScan.spec.ts
@@ -0,0 +1,151 @@
+import {
+  CollectRawScan,
+  CollectSubfolderScan,
+  scanMultiCamBatchFromCollects,
+} from 'dive-common/multiCamBatchScan';
+
+function collectSubfolder(
+  collectName: string,
+  cameraName: string,
+  imageCount: number,
+  entryCount = imageCount,
+): CollectSubfolderScan {
+  return {
+    folderName: cameraName,
+    path: `/survey/${collectName}/${cameraName}`,
+    entryCount,
+    imageCount,
+  };
+}
+
+function collectScan(
+  name: string,
+  subfolders: Record<string, CollectSubfolderScan>,
+): CollectRawScan {
+  return {
+    name,
+    path: `/survey/${name}`,
+    subfolders: new Map(Object.entries(subfolders).map(([key, value]) => [key.toLowerCase(), value])),
+  };
+}
+
+describe('multiCamBatchScan', () => {
+  it('produces import args for every valid collect', () => {
+    const result = scanMultiCamBatchFromCollects('/survey', [
+      collectScan('fl01', {
+        EO: collectSubfolder('fl01', 'EO', 3),
+        IR: collectSubfolder('fl01', 'IR', 3),
+        UV: collectSubfolder('fl01', 'UV', 3),
+      }),
+      collectScan('fl02', {
+        EO: collectSubfolder('fl02', 'EO', 2),
+        IR: collectSubfolder('fl02', 'IR', 2),
+        UV: collectSubfolder('fl02', 'UV', 2),
+      }),
+    ]);
+    expect(result.problems).toEqual([]);
+    expect(result.cameraNames).toEqual(['EO', 'UV', 'IR']);
+    expect(result.collects.map((c) => c.name)).toEqual(['fl01', 'fl02']);
+    result.collects.forEach((collect) => {
+      expect(collect.problems).toEqual([]);
+      expect(collect.warnings).toEqual([]);
+      expect(collect.importArgs).not.toBeNull();
+      expect(collect.importArgs?.datasetName).toBe(collect.name);
+      expect(collect.importArgs?.cameraOrder).toEqual(['EO', 'UV', 'IR']);
+      expect(collect.importArgs?.type).toBe('image-sequence');
+      expect(collect.importArgs?.defaultDisplay).toBe('EO');
+      expect(collect.importArgs?.sourceList).toEqual({
+        EO: { sourcePath: `/survey/${collect.name}/EO`, trackFile: '' },
+        IR: { sourcePath: `/survey/${collect.name}/IR`, trackFile: '' },
+        UV: { sourcePath: `/survey/${collect.name}/UV`, trackFile: '' },
+      });
+    });
+  });
+
+  it('flags a collect missing a camera folder without blocking others', () => {
+    const result = scanMultiCamBatchFromCollects('/survey', [
+      collectScan('fl01', {
+        EO: collectSubfolder('fl01', 'EO', 3),
+        IR: collectSubfolder('fl01', 'IR', 3),
+      }),
+      collectScan('fl02', {
+        EO: collectSubfolder('fl02', 'EO', 3),
+      }),
+    ]);
+    expect(result.problems).toEqual([]);
+    expect(result.cameraNames).toEqual(['EO', 'IR']);
+    const [fl01, fl02] = result.collects;
+    expect(fl01.problems).toEqual([]);
+    expect(fl01.importArgs).not.toBeNull();
+    expect(fl02.problems).toEqual(['Missing camera folder "IR"']);
+    expect(fl02.importArgs).toBeNull();
+  });
+
+  it('distinguishes empty camera folders from folders with no supported images', () => {
+    const result = scanMultiCamBatchFromCollects('/survey', [
+      collectScan('fl01', {
+        EO: collectSubfolder('fl01', 'EO', 2),
+        IR: collectSubfolder('fl01', 'IR', 2),
+      }),
+      collectScan('fl02', {
+        EO: collectSubfolder('fl02', 'EO', 2),
+        IR: collectSubfolder('fl02', 'IR', 0, 0),
+      }),
+      collectScan('fl03', {
+        EO: collectSubfolder('fl03', 'EO', 2),
+        IR: collectSubfolder('fl03', 'IR', 0, 1),
+      }),
+    ]);
+    const [, fl02, fl03] = result.collects;
+    expect(fl02.problems).toEqual(['Camera folder "IR" is empty']);
+    expect(fl03.problems).toEqual(['No supported images in camera folder "IR"']);
+    expect(fl02.importArgs).toBeNull();
+    expect(fl03.importArgs).toBeNull();
+  });
+
+  it('warns (without blocking) on frame count mismatch between cameras', () => {
+    const result = scanMultiCamBatchFromCollects('/survey', [
+      collectScan('fl01', {
+        EO: collectSubfolder('fl01', 'EO', 3),
+        IR: collectSubfolder('fl01', 'IR', 2),
+      }),
+    ]);
+    const [fl01] = result.collects;
+    expect(fl01.problems).toEqual([]);
+    expect(fl01.warnings).toEqual(['Frame counts differ across cameras (EO: 3, IR: 2)']);
+    expect(fl01.importArgs).not.toBeNull();
+    expect(fl01.cameras.map((c) => c.imageCount)).toEqual([3, 2]);
+  });
+
+  it('reports a root problem when no collect folders exist', () => {
+    const result = scanMultiCamBatchFromCollects('/survey', []);
+    expect(result.problems).toEqual(['No collect folders found in /survey']);
+    expect(result.collects).toEqual([]);
+  });
+
+  it('blocks all collects when fewer than two cameras are shared', () => {
+    const result = scanMultiCamBatchFromCollects('/survey', [
+      collectScan('fl01', { EO: collectSubfolder('fl01', 'EO', 2) }),
+      collectScan('fl02', { EO: collectSubfolder('fl02', 'EO', 2) }),
+    ]);
+    expect(result.problems).toEqual([
+      'Expected 2 or 3 camera folders shared across collects, found 1 (EO)',
+    ]);
+    result.collects.forEach((collect) => {
+      expect(collect.importArgs).toBeNull();
+    });
+  });
+
+  it('rejects camera folder names that are not alphanumeric', () => {
+    const result = scanMultiCamBatchFromCollects('/survey', [
+      collectScan('fl01', {
+        'EO cam': collectSubfolder('fl01', 'EO cam', 2),
+        IR: collectSubfolder('fl01', 'IR', 2),
+      }),
+    ]);
+    expect(result.problems).toEqual([
+      'Camera folder names must be letters and numbers only (no spaces): EO cam',
+    ]);
+    expect(result.collects[0].importArgs).toBeNull();
+  });
+});
diff --git a/client/dive-common/multiCamBatchScan.ts b/client/dive-common/multiCamBatchScan.ts
new file mode 100644
index 000000000..ead9ecc82
--- /dev/null
+++ b/client/dive-common/multiCamBatchScan.ts
@@ -0,0 +1,183 @@
+/**
+ * Batch multicam ("multi-collect") import scan logic shared by desktop and web.
+ *
+ * Scans a root folder whose immediate children are "collect" folders; each collect
+ * folder is expected to hold the same set of camera subfolders (e.g. EO/, IR/, UV/),
+ * each containing that camera's image frames.
+ */
+import { MultiCamImportFolderArgs } from 'dive-common/apispec';
+import {
+  isValidCameraName,
+  orderSubfolderCameraNames,
+  pickDefaultMulticamCamera,
+} from 'dive-common/components/ImportMultiCamDialog/multicamSubfolderLayout';
+
+/** Camera-count limits shared with the single multicam subfolder import. */
+export const MinBatchCameras = 2;
+export const MaxBatchCameras = 3;
+
+/** One camera subfolder discovered inside a collect folder during a batch scan. */
+export interface MultiCamBatchCamera {
+  name: string;
+  sourcePath: string;
+  imageCount: number;
+}
+
+/** Scan result for a single collect folder (one multicam dataset candidate). */
+export interface MultiCamBatchCollect {
+  name: string;
+  path: string;
+  cameras: MultiCamBatchCamera[];
+  problems: string[];
+  warnings: string[];
+  importArgs: MultiCamImportFolderArgs | null;
+}
+
+/** Result of scanning a root folder of collect folders for batch multicam import. */
+export interface MultiCamBatchScanResult {
+  rootPath: string;
+  cameraNames: string[];
+  collects: MultiCamBatchCollect[];
+  problems: string[];
+}
+
+export interface CollectSubfolderScan {
+  folderName: string;
+  path: string;
+  entryCount: number;
+  imageCount: number;
+}
+
+export interface CollectRawScan {
+  name: string;
+  path: string;
+  subfolders: Map<string, CollectSubfolderScan>;
+}
+
+function canonicalCameraNames(collects: CollectRawScan[]): string[] {
+  const canonical = new Map<string, string>();
+  collects.forEach((collect) => {
+    collect.subfolders.forEach((subfolder, lowerName) => {
+      if (subfolder.imageCount > 0 && !canonical.has(lowerName)) {
+        canonical.set(lowerName, subfolder.folderName);
+      }
+    });
+  });
+  return orderSubfolderCameraNames([...canonical.values()]);
+}
+
+function validateCameraSet(cameraNames: string[]): string[] {
+  const problems: string[] = [];
+  if (cameraNames.length < MinBatchCameras || cameraNames.length > MaxBatchCameras) {
+    problems.push(
+      `Expected ${MinBatchCameras} or ${MaxBatchCameras} camera folders shared across collects, `
+      + `found ${cameraNames.length}${cameraNames.length ? ` (${cameraNames.join(', ')})` : ''}`,
+    );
+  }
+  const invalid = cameraNames.filter((name) => !isValidCameraName(name));
+  if (invalid.length) {
+    problems.push(
+      `Camera folder names must be letters and numbers only (no spaces): ${invalid.join(', ')}`,
+    );
+  }
+  return problems;
+}
+
+function buildCollectResult(
+  collect: CollectRawScan,
+  cameraNames: string[],
+): MultiCamBatchCollect {
+  const problems: string[] = [];
+  const warnings: string[] = [];
+  const cameras: MultiCamBatchCamera[] = [];
+
+  cameraNames.forEach((cameraName) => {
+    const subfolder = collect.subfolders.get(cameraName.toLowerCase());
+    if (!subfolder) {
+      problems.push(`Missing camera folder "${cameraName}"`);
+      return;
+    }
+    if (subfolder.entryCount === 0) {
+      problems.push(`Camera folder "${cameraName}" is empty`);
+      return;
+    }
+    if (subfolder.imageCount === 0) {
+      problems.push(`No supported images in camera folder "${cameraName}"`);
+      return;
+    }
+    cameras.push({
+      name: cameraName,
+      sourcePath: subfolder.path,
+      imageCount: subfolder.imageCount,
+    });
+  });
+
+  if (!problems.length && cameras.length > 1) {
+    const counts = cameras.map((camera) => camera.imageCount);
+    if (new Set(counts).size > 1) {
+      warnings.push(
+        `Frame counts differ across cameras (${cameras
+          .map((camera) => `${camera.name}: ${camera.imageCount}`)
+          .join(', ')})`,
+      );
+    }
+  }
+
+  let importArgs: MultiCamImportFolderArgs | null = null;
+  if (!problems.length) {
+    const sourceList: MultiCamImportFolderArgs['sourceList'] = {};
+    cameras.forEach((camera) => {
+      sourceList[camera.name] = { sourcePath: camera.sourcePath, trackFile: '' };
+    });
+    importArgs = {
+      datasetName: collect.name,
+      defaultDisplay: pickDefaultMulticamCamera(cameraNames),
+      cameraOrder: [...cameraNames],
+      sourceList,
+      type: 'image-sequence',
+    };
+  }
+
+  return {
+    name: collect.name,
+    path: collect.path,
+    cameras,
+    problems,
+    warnings,
+    importArgs,
+  };
+}
+
+/**
+ * Build a batch scan result from pre-scanned collect folders.
+ */
+export function scanMultiCamBatchFromCollects(
+  rootPath: string,
+  rawScans: CollectRawScan[],
+): MultiCamBatchScanResult {
+  const problems: string[] = [];
+  if (!rawScans.length) {
+    problems.push(`No collect folders found in ${rootPath}`);
+  }
+
+  const cameraNames = canonicalCameraNames(rawScans);
+  if (rawScans.length) {
+    problems.push(...validateCameraSet(cameraNames));
+  }
+
+  const cameraSetValid = !problems.length;
+  const collects = rawScans.map((collect) => {
+    const result = buildCollectResult(collect, cameraNames);
+    if (!cameraSetValid) {
+      return { ...result, importArgs: null };
+    }
+    return result;
+  });
+
+  return {
+    rootPath,
+    cameraNames,
+    collects,
+    problems,
+  };
+}
diff --git a/client/dive-common/multicamDisplay.spec.ts b/client/dive-common/multicamDisplay.spec.ts
index a5b2a274b..99c4f589b 100644
--- a/client/dive-common/multicamDisplay.spec.ts
+++ b/client/dive-common/multicamDisplay.spec.ts
@@ -4,6 +4,7 @@ import {
   getMultiCamTooltip,
   isMultiCamDatasetMeta,
   isMultiCamTrainingTarget,
+  isStereoscopicDatasetMeta,
   orderedMultiCamCameraNames,
 } from './multicamDisplay';
 
@@ -36,11 +37,24 @@ describe('multicamDisplay', () => {
     })).toEqual(['left', 'right']);
   });
 
+  it('falls back to EO left and IR right when cameraOrder is missing', () => {
+    expect(orderedMultiCamCameraNames({
+      defaultDisplay: 'EO',
+      cameras: { IR: {}, UV: {}, EO: {} },
+    })).toEqual(['EO', 'UV', 'IR']);
+  });
+
   it('detects multicam dataset meta for training guards', () => {
     expect(isMultiCamDatasetMeta({ type: 'multi', subType: 'stereo' })).toBe(true);
     expect(isMultiCamDatasetMeta({ type: 'video', subType: null })).toBe(false);
   });
 
+  it('detects stereoscopic vs plain multicam datasets', () => {
+    expect(isStereoscopicDatasetMeta({ type: 'multi', subType: 'stereo' })).toBe(true);
+    expect(isStereoscopicDatasetMeta({ type: 'multi', subType: 'multicam' })).toBe(false);
+    expect(isStereoscopicDatasetMeta({ type: 'video', subType: 'stereo' })).toBe(false);
+  });
+
   it('disables training for multicam parent and child camera selection', () => {
     const parent = {
       _id: 'parent-id',
diff --git a/client/dive-common/multicamDisplay.ts b/client/dive-common/multicamDisplay.ts
index 7a30e10b8..acb0ca846 100644
--- a/client/dive-common/multicamDisplay.ts
+++ b/client/dive-common/multicamDisplay.ts
@@ -1,4 +1,5 @@
 import type { SubType } from 'dive-common/apispec';
+import { preferEoIrSubfolderOrder } from 'dive-common/components/ImportMultiCamDialog/multicamSubfolderLayout';
 
 export type MultiCamSubType = 'stereo' | 'multicam';
 
@@ -38,7 +39,7 @@ export function orderedMultiCamCameraNames(multiCamMedia: MultiCamMediaLike | nu
   if (cameraOrder?.length) {
     return cameraOrder.filter((name) => name in cameras);
   }
-  return Object.keys(cameras);
+  return preferEoIrSubfolderOrder(Object.keys(cameras));
 }
 
 export function isMultiCamSubType(subType: SubType | string | null | undefined): subType is MultiCamSubType {
@@ -61,6 +62,11 @@ export function isMultiCamDatasetMeta(meta: DatasetMetaLike | null | undefined):
   return getMultiCamSubType(meta) !== null;
 }
 
+/** True when folder meta describes a stereoscopic (not plain multicam) parent dataset. */
+export function isStereoscopicDatasetMeta(meta: DatasetMetaLike | null | undefined): boolean {
+  return getMultiCamSubType(meta) === 'stereo';
+}
+
 /**
  * Whether training should be disabled for the current data browser selection.
  * Covers the multicam parent, browsing inside it with no selection, and per-camera child folders.
diff --git a/client/dive-common/use/useModeManager.ts b/client/dive-common/use/useModeManager.ts
index 38f17ea68..ad322c869 100644
--- a/client/dive-common/use/useModeManager.ts
+++ b/client/dive-common/use/useModeManager.ts
@@ -97,6 +97,7 @@ export default function useModeManager({
   aggregateController,
   readonlyState,
   recipes,
+  isStereoscopicDataset,
   onStereoAnnotationComplete,
   onStereoAnnotationReset,
   onStereoSegmentationFinalize,
@@ -107,12 +108,19 @@ export default function useModeManager({
     aggregateController: Ref<AggregateMediaController>;
     readonlyState: Readonly<Ref<boolean>>;
     recipes: Recipe[];
+    /** When set, interactive stereo only runs on stereoscopic datasets. */
+    isStereoscopicDataset?: Ref<boolean>;
     onStereoAnnotationComplete?: (params: StereoAnnotationCompleteParams) => void;
     onStereoAnnotationReset?: (params: StereoAnnotationResetParams) => void;
     onStereoSegmentationFinalize?: (params?: StereoSegmentationFinalizeParams) => void;
 }) {
   let creating = false;
   const { prompt } = usePrompt();
+
+  function stereoInteractiveActive(): boolean {
+    return isStereoInteractiveModeEnabled()
+      && (isStereoscopicDataset === undefined || isStereoscopicDataset.value);
+  }
   const annotationModes = reactive({
     visible: ['rectangle', 'Polygon', 'LineString', 'text'] as VisibleAnnotationTypes[],
     editing: 'rectangle' as EditAnnotationTypes,
@@ -557,7 +565,7 @@ export default function useModeManager({
         newTrackSettingsAfterLogic(track);
 
         // Stereo: emit box annotation complete
-        if (onStereoAnnotationComplete && isStereoInteractiveModeEnabled()) {
+        if (onStereoAnnotationComplete && stereoInteractiveActive()) {
           onStereoAnnotationComplete({
             type: 'box',
             camera: selectedCamera.value,
@@ -731,7 +739,7 @@ export default function useModeManager({
             newTrackSettingsAfterLogic(track);
 
             // Stereo: emit line or polygon annotation complete
-            if (onStereoAnnotationComplete && isStereoInteractiveModeEnabled()
+            if (onStereoAnnotationComplete && stereoInteractiveActive()
                 && completedTrackId !== null) {
               // Check for LineString with exactly 2 points (line annotation)
               if (data.geometry.type === 'LineString'
@@ -1295,7 +1303,7 @@ export default function useModeManager({
       // without waiting for the user to finalize the detection. Only fired for
       // fresh predictions (controlPoints present), so navigating frames or
       // restoring a pending preview does not re-trigger stereo work.
-      if (onStereoAnnotationComplete && isStereoInteractiveModeEnabled()
+      if (onStereoAnnotationComplete && stereoInteractiveActive()
           && selectedTrackId.value !== null && result.controlPoints) {
         onStereoAnnotationComplete({
           type: 'segmentation',
@@ -1466,7 +1474,7 @@ export default function useModeManager({
         : []);
     }
 
-    if (onStereoAnnotationReset && isStereoInteractiveModeEnabled()) {
+    if (onStereoAnnotationReset && stereoInteractiveActive()) {
       onStereoAnnotationReset({
         trackId: selectedTrackId.value as number,
         frameNum: data.frameNum,
diff --git a/client/platform/desktop/backend/ipcService.ts b/client/platform/desktop/backend/ipcService.ts
index c8b01ab7b..070d4bf44 100644
--- a/client/platform/desktop/backend/ipcService.ts
+++ b/client/platform/desktop/backend/ipcService.ts
@@ -23,6 +23,7 @@ import linux from './native/linux';
 import win32 from './native/windows';
 import * as common from './native/common';
 import beginMultiCamImport from './native/multiCamImport';
+import scanMultiCamBatch from './native/multiCollectImport';
 import settings from './state/settings';
 import { listen } from './server';
 import {
@@ -228,6 +229,11 @@ export default function register() {
     return ret;
   });
 
+  ipcMain.handle('scan-multicam-batch', async (event, { path: rootPath }: { path: string }) => {
+    const ret = await scanMultiCamBatch(rootPath);
+    return ret;
+  });
+
   ipcMain.handle('import-annotation', async (event, {
     id, path, additive, additivePrepend,
   }: { id: string; path: string; additive: boolean; additivePrepend: string }) => {
diff --git a/client/platform/desktop/backend/native/multiCollectImport.spec.ts b/client/platform/desktop/backend/native/multiCollectImport.spec.ts
new file mode 100644
index 000000000..cab294d06
--- /dev/null
+++ b/client/platform/desktop/backend/native/multiCollectImport.spec.ts
@@ -0,0 +1,263 @@
+import mockfs from 'mock-fs';
+import { Console } from 'console';
+
+// https://github.com/tschaub/mock-fs/issues/234
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const console = new Console(process.stdout, process.stderr);
+
+vi.mock('fs-extra', async () => {
+  const actual = await vi.importActual<typeof import('fs-extra')>('fs-extra');
+  const fsNode = await import('node:fs');
+  const existsByStat = (targetPath: import('node:fs').PathLike) => {
+    try {
+      fsNode.statSync(targetPath);
+      return true;
+    } catch {
+      return false;
+    }
+  };
+
+  const patchedDefault = {
+    ...actual.default,
+    existsSync: existsByStat,
+    pathExistsSync: existsByStat,
+  };
+
+  return {
+    ...actual,
+    default: patchedDefault,
+    existsSync: existsByStat,
+    pathExistsSync: existsByStat,
+  };
+});
+
+vi.mock('./mediaJobs', () => ({
+  checkMedia: vi.fn(() => Promise.resolve({
+    websafe: true,
+    originalFpsString: '30/1',
+    originalFps: 30,
+    videoDimensions: { width: 1920, height: 1080 },
+  })),
+}));
+
+// eslint-disable-next-line import/first
+import scanMultiCamBatch from './multiCollectImport';
+// eslint-disable-next-line import/first
+import beginMultiCamImport from './multiCamImport';
+
+const frames = (count: number, prefix = 'frame') => {
+  const files: Record<string, string> = {};
+  for (let i = 0; i < count; i += 1) {
+    files[`${prefix}_${String(i).padStart(4, '0')}.png`] = '';
+  }
+  return files;
+};
+
+afterEach(() => {
+  mockfs.restore();
+});
+
+describe('native.multiCollectImport', () => {
+  it('produces import args for every valid collect', async () => {
+    mockfs({
+      '/survey': {
+        fl01: { EO: frames(3), IR: frames(3), UV: frames(3) },
+        fl02: { EO: frames(2), IR: frames(2), UV: frames(2) },
+      },
+    });
+    const result = await scanMultiCamBatch('/survey');
+    expect(result.problems).toEqual([]);
+    expect(result.cameraNames).toEqual(['EO', 'UV', 'IR']);
+    expect(result.collects.map((c) => c.name)).toEqual(['fl01', 'fl02']);
+    result.collects.forEach((collect) => {
+      expect(collect.problems).toEqual([]);
+      expect(collect.warnings).toEqual([]);
+      expect(collect.importArgs).not.toBeNull();
+      expect(collect.importArgs?.datasetName).toBe(collect.name);
+      expect(collect.importArgs?.cameraOrder).toEqual(['EO', 'UV', 'IR']);
+      expect(collect.importArgs?.type).toBe('image-sequence');
+      // EO is preferred as default display when present
+      expect(collect.importArgs?.defaultDisplay).toBe('EO');
+      expect(collect.importArgs?.sourceList).toEqual({
+        EO: { sourcePath: `/survey/${collect.name}/EO`, trackFile: '' },
+        IR: { sourcePath: `/survey/${collect.name}/IR`, trackFile: '' },
+        UV: { sourcePath: `/survey/${collect.name}/UV`, trackFile: '' },
+      });
+    });
+  });
+
+  it('flags a collect missing a camera folder without blocking others', async () => {
+    mockfs({
+      '/survey': {
+        fl01: { EO: frames(3), IR: frames(3) },
+        fl02: { EO: frames(3) },
+      },
+    });
+    const result = await scanMultiCamBatch('/survey');
+    expect(result.problems).toEqual([]);
+    expect(result.cameraNames).toEqual(['EO', 'IR']);
+    const [fl01, fl02] = result.collects;
+    expect(fl01.problems).toEqual([]);
+    expect(fl01.importArgs).not.toBeNull();
+    expect(fl02.problems).toEqual(['Missing camera folder "IR"']);
+    expect(fl02.importArgs).toBeNull();
+  });
+
+  it('distinguishes empty camera folders from folders with no supported images', async () => {
+    mockfs({
+      '/survey': {
+        fl01: { EO: frames(2), IR: frames(2) },
+        fl02: { EO: frames(2), IR: {} },
+        fl03: { EO: frames(2), IR: { 'notes.txt': 'x' } },
+      },
+    });
+    const result = await scanMultiCamBatch('/survey');
+    const [, fl02, fl03] = result.collects;
+    expect(fl02.problems).toEqual(['Camera folder "IR" is empty']);
+    expect(fl03.problems).toEqual(['No supported images in camera folder "IR"']);
+    expect(fl02.importArgs).toBeNull();
+    expect(fl03.importArgs).toBeNull();
+  });
+
+  it('ignores non-camera folders and loose files inside collects', async () => {
+    mockfs({
+      '/survey': {
+        'flight_manifest.csv': 'a,b',
+        fl01: {
+          EO: frames(2),
+          IR: frames(2),
+          logs: { 'run.log': 'ok' },
+          'readme.txt': 'notes',
+        },
+        fl02: { EO: frames(2), IR: frames(2), logs: {} },
+      },
+    });
+    const result = await scanMultiCamBatch('/survey');
+    expect(result.problems).toEqual([]);
+    expect(result.cameraNames).toEqual(['EO', 'IR']);
+    expect(result.collects.map((c) => c.name)).toEqual(['fl01', 'fl02']);
+    result.collects.forEach((collect) => {
+      expect(collect.problems).toEqual([]);
+      expect(Object.keys(collect.importArgs?.sourceList ?? {})).toEqual(['EO', 'IR']);
+    });
+  });
+
+  it('warns (without blocking) on frame count mismatch between cameras', async () => {
+    mockfs({
+      '/survey': {
+        fl01: { EO: frames(3), IR: frames(2) },
+      },
+    });
+    const result = await scanMultiCamBatch('/survey');
+    const [fl01] = result.collects;
+    expect(fl01.problems).toEqual([]);
+    expect(fl01.warnings).toEqual(['Frame counts differ across cameras (EO: 3, IR: 2)']);
+    expect(fl01.importArgs).not.toBeNull();
+    expect(fl01.cameras.map((c) => c.imageCount)).toEqual([3, 2]);
+  });
+
+  it('matches camera folders case-insensitively across collects', async () => {
+    mockfs({
+      '/survey': {
+        fl01: { EO: frames(2), IR: frames(2) },
+        fl02: { eo: frames(2), ir: frames(2) },
+      },
+    });
+    const result = await scanMultiCamBatch('/survey');
+    expect(result.cameraNames).toEqual(['EO', 'IR']);
+    const [, fl02] = result.collects;
+    expect(fl02.problems).toEqual([]);
+    expect(fl02.importArgs?.sourceList).toEqual({
+      EO: { sourcePath: '/survey/fl02/eo', trackFile: '' },
+      IR: { sourcePath: '/survey/fl02/ir', trackFile: '' },
+    });
+  });
+
+  it('prefers a center camera for defaultDisplay and the STAR/CENTER/PORT order', async () => {
+    mockfs({
+      '/survey': {
+        fl01: { CENTER: frames(2), PORT: frames(2), STAR: frames(2) },
+      },
+    });
+    const result = await scanMultiCamBatch('/survey');
+    expect(result.cameraNames).toEqual(['STAR', 'CENTER', 'PORT']);
+    expect(result.collects[0].importArgs?.defaultDisplay).toBe('CENTER');
+  });
+
+  it('reports a root problem when no collect folders exist', async () => {
+    mockfs({ '/survey': { 'stray.png': '' } });
+    const result = await scanMultiCamBatch('/survey');
+    expect(result.problems).toEqual(['No collect folders found in /survey']);
+    expect(result.collects).toEqual([]);
+  });
+
+  it('blocks all collects when fewer than two cameras are shared', async () => {
+    mockfs({
+      '/survey': {
+        fl01: { EO: frames(2) },
+        fl02: { EO: frames(2) },
+      },
+    });
+    const result = await scanMultiCamBatch('/survey');
+    expect(result.problems).toEqual([
+      'Expected 2 or 3 camera folders shared across collects, found 1 (EO)',
+    ]);
+    result.collects.forEach((collect) => {
+      expect(collect.importArgs).toBeNull();
+    });
+  });
+
+  it('blocks all collects when more than three cameras are shared', async () => {
+    mockfs({
+      '/survey': {
+        fl01: {
+          A: frames(1), B: frames(1), C: frames(1), D: frames(1),
+        },
+      },
+    });
+    const result = await scanMultiCamBatch('/survey');
+    expect(result.problems).toEqual([
+      'Expected 2 or 3 camera folders shared across collects, found 4 (A, B, C, D)',
+    ]);
+    expect(result.collects[0].importArgs).toBeNull();
+  });
+
+  it('rejects camera folder names that are not alphanumeric', async () => {
+    mockfs({
+      '/survey': {
+        fl01: { 'EO cam': frames(2), IR: frames(2) },
+      },
+    });
+    const result = await scanMultiCamBatch('/survey');
+    expect(result.problems).toEqual([
+      'Camera folder names must be letters and numbers only (no spaces): EO cam',
+    ]);
+    expect(result.collects[0].importArgs).toBeNull();
+  });
+
+  it('throws when the root path does not exist', async () => {
+    mockfs({ '/survey': {} });
+    await expect(scanMultiCamBatch('/missing')).rejects.toThrow('Directory not found');
+  });
+
+  it('produces args accepted by beginMultiCamImport', async () => {
+    mockfs({
+      '/survey': {
+        fl01: { EO: frames(2), IR: frames(2) },
+      },
+    });
+    const result = await scanMultiCamBatch('/survey');
+    const { importArgs } = result.collects[0];
+    expect(importArgs).not.toBeNull();
+    if (!importArgs) {
+      return;
+    }
+    const imported = await beginMultiCamImport(importArgs);
+    expect(imported.jsonMeta.name).toBe('fl01');
+    expect(imported.jsonMeta.subType).toBe('multicam');
+    expect(imported.jsonMeta.multiCam?.defaultDisplay).toBe('EO');
+    expect(Object.keys(imported.jsonMeta.multiCam?.cameras ?? {})).toEqual(['EO', 'IR']);
+    expect(imported.jsonMeta.multiCam?.cameras.EO.originalBasePath).toBe('/survey/fl01/EO');
+    expect(imported.jsonMeta.multiCam?.cameras.EO.originalImageFiles).toHaveLength(2);
+  });
+});
diff --git a/client/platform/desktop/backend/native/multiCollectImport.ts b/client/platform/desktop/backend/native/multiCollectImport.ts
new file mode 100644
index 000000000..7a7d74f6d
--- /dev/null
+++ b/client/platform/desktop/backend/native/multiCollectImport.ts
@@ -0,0 +1,52 @@
+/**
+ * Batch multicam import scanner (desktop filesystem backend).
+ */
+import npath from 'path';
+import fs from 'fs-extra';
+import {
+  CollectRawScan,
+  CollectSubfolderScan,
+  scanMultiCamBatchFromCollects,
+} from 'dive-common/multiCamBatchScan';
+import { findImagesInFolder, listImmediateSubfolders } from './common';
+
+async function scanCollectFolder(collectPath: string): Promise<Map<string, CollectSubfolderScan>> {
+  const subfolderNames = await listImmediateSubfolders(collectPath);
+  const subfolders = new Map<string, CollectSubfolderScan>();
+  for (let i = 0; i < subfolderNames.length; i += 1) {
+    const folderName = subfolderNames[i];
+    const subfolderPath = npath.join(collectPath, folderName);
+    // eslint-disable-next-line no-await-in-loop
+    const entryCount = (await fs.readdir(subfolderPath)).length;
+    // eslint-disable-next-line no-await-in-loop
+    const found = await findImagesInFolder(subfolderPath);
+    subfolders.set(folderName.toLowerCase(), {
+      folderName,
+      path: subfolderPath,
+      entryCount,
+      imageCount: found.imagePaths.length,
+    });
+  }
+  return subfolders;
+}
+
+async function scanMultiCamBatch(rootPath: string) {
+  const collectNames = (await listImmediateSubfolders(rootPath))
+    .sort((a, b) => a.localeCompare(b));
+
+  const rawScans: CollectRawScan[] = [];
+  for (let i = 0; i < collectNames.length; i += 1) {
+    const name = collectNames[i];
+    const collectPath = npath.join(rootPath, name);
+    rawScans.push({
+      name,
+      path: collectPath,
+      // eslint-disable-next-line no-await-in-loop
+      subfolders: await scanCollectFolder(collectPath),
+    });
+  }
+
+  return scanMultiCamBatchFromCollects(rootPath, rawScans);
+}
+
+export default scanMultiCamBatch;
diff --git a/client/platform/desktop/constants.ts b/client/platform/desktop/constants.ts
index 5b24868ff..c7b0337c4 100644
--- a/client/platform/desktop/constants.ts
+++ b/client/platform/desktop/constants.ts
@@ -257,6 +257,12 @@ export interface DesktopMediaImportResponse extends MediaImportResponse {
   metaFileAbsPath?: string;
 }
 
+export type {
+  MultiCamBatchCamera,
+  MultiCamBatchCollect,
+  MultiCamBatchScanResult,
+} from 'dive-common/multiCamBatchScan';
+
 export interface DesktopJobUpdate extends DesktopJob {
   // body contents of update payload
   body: string[];
diff --git a/client/platform/desktop/frontend/api.ts b/client/platform/desktop/frontend/api.ts
index 942f2d7d9..e773257ee 100644
--- a/client/platform/desktop/frontend/api.ts
+++ b/client/platform/desktop/frontend/api.ts
@@ -21,6 +21,7 @@ import {
   ExportMulticamEverythingArgs,
   DesktopMediaImportResponse, ConversionArgs, JobType,
   DesktopJob,
+  MultiCamBatchScanResult,
 } from 'platform/desktop/constants';
 
 import { gpuJobQueue, cpuJobQueue } from './store/jobs';
@@ -220,6 +221,10 @@ function importMultiCam(args: MultiCamImportArgs):
   return window.diveDesktop.invoke('import-multicam-media', { args });
 }
 
+function scanMultiCamBatch(path: string): Promise<MultiCamBatchScanResult> {
+  return window.diveDesktop.invoke('scan-multicam-batch', { path });
+}
+
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 function importAnnotationFile(id: string, path: string, _htmlFile = undefined, additive = false, additivePrepend = ''): Promise<boolean | string[]> {
   return window.diveDesktop.invoke('import-annotation', {
@@ -699,6 +704,7 @@ export {
   checkDataset,
   importAnnotationFile,
   importMultiCam,
+  scanMultiCamBatch,
   openLink,
   nvidiaSmi,
   cancelJob,
diff --git a/client/platform/desktop/frontend/components/ImportMultiCamBatchDialog.vue b/client/platform/desktop/frontend/components/ImportMultiCamBatchDialog.vue
new file mode 100644
index 000000000..377eb6694
--- /dev/null
+++ b/client/platform/desktop/frontend/components/ImportMultiCamBatchDialog.vue
@@ -0,0 +1,51 @@
+<script lang="ts">
+import { defineComponent } from 'vue';
+import ImportMultiCamBatchDialog from 'dive-common/components/ImportMultiCamBatchDialog.vue';
+import { MultiCamBatchCollect } from 'dive-common/multiCamBatchScan';
+import * as api from '../api';
+import { setRecents } from '../store/dataset';
+
+export default defineComponent({
+  name: 'DesktopImportMultiCamBatchDialog',
+  components: { ImportMultiCamBatchDialog },
+
+  setup() {
+    async function chooseAndScan() {
+      const ret = await api.openFromDisk('image-sequence', true);
+      if (ret.canceled || !ret.filePaths?.length) {
+        return null;
+      }
+      return api.scanMultiCamBatch(ret.filePaths[0]);
+    }
+
+    async function importCollect(collect: MultiCamBatchCollect, datasetName: string) {
+      if (!collect.importArgs) {
+        return;
+      }
+      const importPayload = await api.importMultiCam({
+        ...collect.importArgs,
+        datasetName,
+      });
+      const conversionArgs = await api.finalizeImport(importPayload);
+      if (conversionArgs.mediaList.length > 0) {
+        await api.convert(conversionArgs);
+      }
+      const recentsMeta = await api.loadMetadata(conversionArgs.meta.id);
+      setRecents(recentsMeta);
+    }
+
+    return {
+      chooseAndScan,
+      importCollect,
+    };
+  },
+});
+</script>
+
+<template>
+  <ImportMultiCamBatchDialog
+    :choose-and-scan="chooseAndScan"
+    :import-collect="importCollect"
+    @abort="$emit('abort')"
+  />
+</template>
diff --git a/client/platform/desktop/frontend/components/Recent.vue b/client/platform/desktop/frontend/components/Recent.vue
index ae0fad5a2..d0a076616 100644
--- a/client/platform/desktop/frontend/components/Recent.vue
+++ b/client/platform/desktop/frontend/components/Recent.vue
@@ -31,6 +31,7 @@ import DatasetSourceInfo from './DatasetSourceInfo.vue';
 import NavigationBar from './NavigationBar.vue';
 import ImportDialog from './ImportDialog.vue';
 import BulkImportDialog from './BulkImportDialog.vue';
+import ImportMultiCamBatchDialog from './ImportMultiCamBatchDialog.vue';
 
 export default defineComponent({
   components: {
@@ -41,12 +42,14 @@ export default defineComponent({
     BulkImportDialog,
     NavigationBar,
     ImportMultiCamDialog,
+    ImportMultiCamBatchDialog,
     TooltipBtn,
   },
 
   setup() {
     const router = useRouter();
     const importMultiCamDialog = ref(false);
+    const importMultiCamBatchDialog = ref(false);
     const pendingImportPayload: Ref<DesktopMediaImportResponse[] | null> = ref(null);
     const bulkImport = ref(false);
     const searchText: Ref<string | null> = ref('');
@@ -269,6 +272,7 @@ export default defineComponent({
       error,
       importing,
       importMultiCamDialog,
+      importMultiCamBatchDialog,
       headers,
       upgradedVersion,
       downgradedVersion,
@@ -310,6 +314,18 @@ export default defineComponent({
         @abort="importMultiCamDialog = false"
       />
     </v-dialog>
+    <v-dialog
+      :value="importMultiCamBatchDialog"
+      persistent
+      overlay-opacity="0.95"
+      max-width="80%"
+      width="1000"
+    >
+      <ImportMultiCamBatchDialog
+        v-if="importMultiCamBatchDialog"
+        @abort="importMultiCamBatchDialog = false"
+      />
+    </v-dialog>
     <v-dialog
       :value="pendingImportPayload !== null"
       persistent
@@ -416,8 +432,10 @@ export default defineComponent({
               open-type="image-sequence"
               class="my-3"
               :multi-cam-import="true"
+              :batch-multi-cam-import="true"
               @open="open($event)"
               @multi-cam="openMultiCamDialog"
+              @multi-cam-batch="importMultiCamBatchDialog = true"
             />
             <ImportButton
               name="Open Video"
diff --git a/client/platform/desktop/frontend/components/ViewerLoader.vue b/client/platform/desktop/frontend/components/ViewerLoader.vue
index ab4f0887a..b065e459b 100644
--- a/client/platform/desktop/frontend/components/ViewerLoader.vue
+++ b/client/platform/desktop/frontend/components/ViewerLoader.vue
@@ -11,6 +11,7 @@ import context from 'dive-common/store/context';
 import { usePrompt } from 'dive-common/vue-utilities/prompt-service';
 import { SegmentationPredictRequest } from 'dive-common/apispec';
 import { clientSettings } from 'dive-common/store/settings';
+import { isStereoscopicDatasetMeta } from 'dive-common/multicamDisplay';
 import type {
   StereoAnnotationCompleteParams,
   StereoAnnotationResetParams,
@@ -92,6 +93,7 @@ export default defineComponent({
     const { prompt } = usePrompt();
     const viewerRef = ref();
     const subTypeList = computed(() => [datasets.value[props.id]?.subType || null]);
+    const isStereoscopicDataset = computed(() => subTypeList.value[0] === 'stereo');
     const camNumbers = computed(() => [datasets.value[props.id]?.cameraNumber || 1]);
     const readonlyMode = computed(() => settings.value?.readonlyMode || false);
     const selectedCamera = ref('');
@@ -628,9 +630,9 @@ export default defineComponent({
     async function loadStereoMetadata(): Promise<boolean> {
       try {
         const meta = await loadMetadata(props.id);
-        // Single-camera datasets have no stereo pair: report no stereo so the
-        // caller does not load the stereo service.
-        if (!meta.multiCamMedia) return false;
+        // Plain multicam and single-camera datasets have no stereo pair: report
+        // no stereo so the caller does not load the stereo service.
+        if (!meta.multiCamMedia || !isStereoscopicDatasetMeta(meta)) return false;
 
         // Extract calibration file path from multiCam metadata
         stereoCalibrationFile = meta.multiCam?.calibration || undefined;
@@ -715,8 +717,10 @@ export default defineComponent({
     // The backend stereo service is needed whenever either stereo feature is on
     // (length-on-modify or cross-camera auto-compute). Track the combined state
     // so toggling one feature while the other is already on does not restart it.
-    const stereoServiceWanted = () => clientSettings.stereoSettings.updateLengthsOnModify
-      || clientSettings.stereoSettings.autoComputeOtherCamera;
+    const stereoServiceWanted = () => isStereoscopicDataset.value && (
+      clientSettings.stereoSettings.updateLengthsOnModify
+      || clientSettings.stereoSettings.autoComputeOtherCamera
+    );
 
     function disableStereoFeatureToggles() {
       clientSettings.stereoSettings.updateLengthsOnModify = false;
@@ -812,6 +816,16 @@ export default defineComponent({
     // in single-camera datasets.
     let stereoDatasetUnavailable = false;
 
+    function resetStereoStateForDatasetChange() {
+      stereoDatasetUnavailable = false;
+      stereoImagePathGetters.value = {};
+      stereoCameraFps.value = {};
+      lastStereoFrame = -1;
+      stereoCalibrationFile = undefined;
+      stereoDatasetFps = undefined;
+      closeStereoLoadingDialog();
+    }
+
     function requestStereoServiceState(enabled: boolean, userInitiated: boolean): Promise<void> {
       const p = applyStereoServiceState(enabled, userInitiated).finally(() => {
         if (stereoStatePromise === p) stereoStatePromise = null;
@@ -820,6 +834,24 @@ export default defineComponent({
       return p;
     }
 
+    watch(() => props.id, () => {
+      resetStereoStateForDatasetChange();
+      if (stereoEnabled.value) {
+        requestStereoServiceState(false, false);
+      }
+    });
+
+    watch(isStereoscopicDataset, (isStereo) => {
+      if (!isStereo) {
+        stereoDatasetUnavailable = true;
+        if (stereoEnabled.value) {
+          requestStereoServiceState(false, false);
+        }
+      } else {
+        stereoDatasetUnavailable = false;
+      }
+    });
+
     // Wait out any in-flight enable/disable; returns whether the service is up.
     async function stereoServiceReady(): Promise<boolean> {
       // Self-heal: a stereo feature is wanted but no enable is running and
diff --git a/client/platform/web-girder/scanMultiCamBatch.spec.ts b/client/platform/web-girder/scanMultiCamBatch.spec.ts
new file mode 100644
index 000000000..bb493f478
--- /dev/null
+++ b/client/platform/web-girder/scanMultiCamBatch.spec.ts
@@ -0,0 +1,47 @@
+import { scanMultiCamBatchFromFiles } from './scanMultiCamBatch';
+
+function makeFile(relativePath: string): File {
+  const name = relativePath.split('/').pop() ?? relativePath;
+  const file = new File([''], name, { type: 'image/png' });
+  Object.defineProperty(file, 'webkitRelativePath', { value: relativePath });
+  return file;
+}
+
+function frames(collect: string, camera: string, count: number, root = 'survey'): File[] {
+  return Array.from({ length: count }, (_, index) => makeFile(
+    `${root}/${collect}/${camera}/frame_${String(index).padStart(4, '0')}.png`,
+  ));
+}
+
+describe('scanMultiCamBatchFromFiles', () => {
+  it('produces import args for every valid collect', () => {
+    const files = [
+      ...frames('fl01', 'EO', 3),
+      ...frames('fl01', 'IR', 3),
+      ...frames('fl01', 'UV', 3),
+      ...frames('fl02', 'EO', 2),
+      ...frames('fl02', 'IR', 2),
+      ...frames('fl02', 'UV', 2),
+    ];
+    const result = scanMultiCamBatchFromFiles('survey', files);
+    expect(result.problems).toEqual([]);
+    expect(result.cameraNames).toEqual(['EO', 'UV', 'IR']);
+    expect(result.collects.map((collect) => collect.name)).toEqual(['fl01', 'fl02']);
+    result.collects.forEach((collect) => {
+      expect(collect.importArgs).not.toBeNull();
+      expect(collect.importArgs?.sourceList.EO.sourcePath).toBe(`survey/${collect.name}/EO`);
+    });
+  });
+
+  it('flags a collect missing a camera folder without blocking others', () => {
+    const files = [
+      ...frames('fl01', 'EO', 3),
+      ...frames('fl01', 'IR', 3),
+      ...frames('fl02', 'EO', 3),
+    ];
+    const result = scanMultiCamBatchFromFiles('survey', files);
+    expect(result.problems).toEqual([]);
+    expect(result.collects[0].importArgs).not.toBeNull();
+    expect(result.collects[1].problems).toEqual(['Missing camera folder "IR"']);
+  });
+});
diff --git a/client/platform/web-girder/scanMultiCamBatch.ts b/client/platform/web-girder/scanMultiCamBatch.ts
new file mode 100644
index 000000000..7af60fc59
--- /dev/null
+++ b/client/platform/web-girder/scanMultiCamBatch.ts
@@ -0,0 +1,94 @@
+/**
+ * Batch multicam import scanner for the web (browser File list + webkitRelativePath).
+ */
+import {
+  CollectRawScan,
+  CollectSubfolderScan,
+  scanMultiCamBatchFromCollects,
+} from 'dive-common/multiCamBatchScan';
+import { filterMediaFiles } from 'dive-common/components/ImportMultiCamDialog/multicamSubfolderLayout';
+
+function normalizeRootPath(rootPath: string): string {
+  return rootPath.replace(/\\/g, '/').replace(/\/+$/, '');
+}
+
+function relativePath(file: File): string {
+  return (file.webkitRelativePath || file.name).replace(/\\/g, '/');
+}
+
+function pathWithinPrefix(path: string, prefix: string): boolean {
+  return path === prefix || path.startsWith(`${prefix}/`);
+}
+
+function directChildNames(prefix: string, paths: string[]): Set<string> {
+  const childPrefix = `${prefix}/`;
+  const children = new Set<string>();
+  paths.forEach((path) => {
+    if (!path.startsWith(childPrefix)) {
+      return;
+    }
+    const rest = path.slice(childPrefix.length);
+    const parts = rest.split('/').filter(Boolean);
+    if (parts.length >= 1) {
+      children.add(parts[0]);
+    }
+  });
+  return children;
+}
+
+function scanCollectFromFiles(collectPath: string, allFiles: File[]): Map<string, CollectSubfolderScan> {
+  const normalizedCollectPath = normalizeRootPath(collectPath);
+  const relPaths = allFiles.map((file) => relativePath(file));
+  const subfolderNames = directChildNames(normalizedCollectPath, relPaths);
+  const subfolders = new Map<string, CollectSubfolderScan>();
+
+  subfolderNames.forEach((folderName) => {
+    const subfolderPath = `${normalizedCollectPath}/${folderName}`;
+    const subfolderPrefix = `${subfolderPath}/`;
+    const filesInSubfolder = allFiles.filter((file) => pathWithinPrefix(relativePath(file), subfolderPath));
+    const directChildPaths = filesInSubfolder
+      .map((file) => relativePath(file))
+      .filter((path) => path.startsWith(subfolderPrefix))
+      .map((path) => path.slice(subfolderPrefix.length))
+      .filter((rest) => rest.length > 0);
+    const directEntries = new Set<string>();
+    directChildPaths.forEach((rest) => {
+      const [first] = rest.split('/');
+      if (first) {
+        directEntries.add(first);
+      }
+    });
+    const directFiles = filesInSubfolder.filter((file) => {
+      const rest = relativePath(file).slice(subfolderPrefix.length);
+      return rest.length > 0 && !rest.includes('/');
+    });
+    subfolders.set(folderName.toLowerCase(), {
+      folderName,
+      path: subfolderPath,
+      entryCount: directEntries.size,
+      imageCount: filterMediaFiles(directFiles, 'image-sequence').length,
+    });
+  });
+
+  return subfolders;
+}
+
+export function scanMultiCamBatchFromFiles(
+  rootPath: string,
+  files: File[],
+): ReturnType<typeof scanMultiCamBatchFromCollects> {
+  const normalizedRoot = normalizeRootPath(rootPath);
+  const relPaths = files.map((file) => relativePath(file));
+  const collectNames = [...directChildNames(normalizedRoot, relPaths)].sort((a, b) => a.localeCompare(b));
+  const rawScans: CollectRawScan[] = collectNames.map((name) => ({
+    name,
+    path: `${normalizedRoot}/${name}`,
+    subfolders: scanCollectFromFiles(`${normalizedRoot}/${name}`, files),
+  }));
+  return scanMultiCamBatchFromCollects(normalizedRoot, rawScans);
+}
+
+export function filesForCameraSource(sourcePath: string, allFiles: File[]): File[] {
+  const normalizedSource = normalizeRootPath(sourcePath);
+  return allFiles.filter((file) => pathWithinPrefix(relativePath(file), normalizedSource));
+}
diff --git a/client/platform/web-girder/views/Upload.vue b/client/platform/web-girder/views/Upload.vue
index 5679dc4c3..01bbe0e15 100644
--- a/client/platform/web-girder/views/Upload.vue
+++ b/client/platform/web-girder/views/Upload.vue
@@ -16,6 +16,8 @@ import {
 
 import ImportButton from 'dive-common/components/ImportButton.vue';
 import ImportMultiCamDialog from 'dive-common/components/ImportMultiCamDialog.vue';
+import ImportMultiCamBatchDialog from 'dive-common/components/ImportMultiCamBatchDialog.vue';
+import { MultiCamBatchCollect } from 'dive-common/multiCamBatchScan';
 import {
   DatasetType, MediaImportResponse, MultiCamImportArgs, MultiCamImportFolderArgs,
 } from 'dive-common/apispec';
@@ -42,6 +44,8 @@ import {
   stereoCalibrationAllowedExtensionsLabel,
 } from 'platform/web-girder/multicamCalibration';
 import { openFromDisk } from 'platform/web-girder/utils';
+import { filesForCameraSource, scanMultiCamBatchFromFiles } from 'platform/web-girder/scanMultiCamBatch';
+import eventBus from 'platform/web-girder/eventBus';
 import { usePrompt } from 'dive-common/vue-utilities/prompt-service';
 import { getResponseError } from 'vue-media-annotator/utils';
 import { clientSettings } from 'dive-common/store/settings';
@@ -112,7 +116,12 @@ function multicamCameraSlotPercent(
 }
 
 export default defineComponent({
-  components: { ImportButton, ImportMultiCamDialog, UploadGirder },
+  components: {
+    ImportButton,
+    ImportMultiCamDialog,
+    ImportMultiCamBatchDialog,
+    UploadGirder,
+  },
   props: {
     location: {
       type: Object,
@@ -125,6 +134,8 @@ export default defineComponent({
     const stereo = ref(false);
     const multiCamOpenType = ref('image-sequence');
     const importMultiCamDialog = ref(false);
+    const importMultiCamBatchDialog = ref(false);
+    const batchImportFiles: Ref<File[]> = ref([]);
     const multicamImporting = ref(false);
     const multicamImportProgress = ref<MulticamImportProgress | null>(null);
     const girderUpload: Ref<null | GirderUpload> = ref(null);
@@ -363,24 +374,36 @@ export default defineComponent({
       renameCameraFolderFiles(oldSourcePath, newSourcePath);
     };
 
-    const multiCamImport = async (args: MultiCamImportArgs) => {
-      importMultiCamDialog.value = false;
-      if (!isMultiCamFolderArgs(args)) {
-        preUploadErrorMessage.value = 'Glob-based multicam import is not supported on web yet.';
-        return;
-      }
+    interface MultiCamFolderImportOptions {
+      openViewer?: boolean;
+      closeUpload?: boolean;
+      showProgressOverlay?: boolean;
+      progressLabel?: string;
+    }
+
+    const runMultiCamFolderImport = async (
+      args: MultiCamImportFolderArgs,
+      options: MultiCamFolderImportOptions = {},
+    ): Promise<string> => {
+      const {
+        openViewer = true,
+        closeUpload = true,
+        showProgressOverlay = true,
+        progressLabel = '',
+      } = options;
+      const labelPrefix = progressLabel ? `${progressLabel} — ` : '';
       if (!props.location?._id || props.location._modelType !== 'folder') {
-        preUploadErrorMessage.value = 'Select a folder to upload into before importing multicam data.';
-        return;
+        throw new Error('Select a folder to upload into before importing multicam data.');
       }
       const uploadComponent = girderUpload.value;
       if (!uploadComponent?.uploadCameraDataset) {
-        preUploadErrorMessage.value = 'Upload is not ready. Close and reopen the upload dialog.';
-        return;
+        throw new Error('Upload is not ready. Close and reopen the upload dialog.');
       }
 
-      multicamImporting.value = true;
-      multicamImportProgress.value = { percent: 0, message: 'Preparing import…' };
+      if (showProgressOverlay) {
+        multicamImporting.value = true;
+        multicamImportProgress.value = { percent: 0, message: `${labelPrefix}Preparing import…` };
+      }
       preUploadErrorMessage.value = null;
       let datasetFolderId: string | null = null;
       let multicamLinked = false;
@@ -392,7 +415,7 @@ export default defineComponent({
         const fps = args.type === VideoType
           ? DefaultVideoFPS
           : (clientSettings.annotationFPS || 1);
-        setMulticamImportProgress(MULTICAM_PROGRESS_START, 'Creating dataset folder…');
+        setMulticamImportProgress(MULTICAM_PROGRESS_START, `${labelPrefix}Creating dataset folder…`);
         const { data: datasetFolder } = await createGirderFolder({
           folderId: props.location._id,
           name: datasetName,
@@ -443,7 +466,7 @@ export default defineComponent({
           clearMulticamUploadProgressTimer();
           setMulticamImportProgress(
             multicamCameraSlotPercent(i, totalCameras, MULTICAM_CAMERA_UPLOAD_WEIGHT),
-            `Processing ${cameraName} (${i + 1} of ${totalCameras})`,
+            `${labelPrefix}Processing ${cameraName} (${i + 1} of ${totalCameras})`,
           );
           // eslint-disable-next-line no-await-in-loop -- finalize only after post-process marks folder as a dataset
           await waitForFolderDatasetReady(folder._id, {
@@ -455,7 +478,7 @@ export default defineComponent({
                   totalCameras,
                   MULTICAM_CAMERA_UPLOAD_WEIGHT + fraction * processShare,
                 ),
-                `Processing ${cameraName} (${i + 1} of ${totalCameras})`,
+                `${labelPrefix}Processing ${cameraName} (${i + 1} of ${totalCameras})`,
               );
             },
             requireViewableImages: uploadType === ImageSequenceType,
@@ -464,16 +487,16 @@ export default defineComponent({
           setMulticamImportProgress(
             multicamCameraSlotPercent(i + 1, totalCameras, 0),
             totalCameras > 1 && i + 1 < totalCameras
-              ? `Finished ${cameraName}, starting next camera…`
-              : `Finished ${cameraName}`,
+              ? `${labelPrefix}Finished ${cameraName}, starting next camera…`
+              : `${labelPrefix}Finished ${cameraName}`,
           );
           cameras[cameraName] = { folderId: folder._id, type: uploadType };
         }
 
-        setMulticamImportProgress(92, 'Finalizing multicam dataset…');
+        setMulticamImportProgress(92, `${labelPrefix}Finalizing multicam dataset…`);
         let calibrationFileId: string | undefined;
         if (args.calibrationFile) {
-          setMulticamImportProgress(94, 'Uploading calibration…');
+          setMulticamImportProgress(94, `${labelPrefix}Uploading calibration…`);
           const calFile = getCalibrationFile(args.calibrationFile);
           if (!calFile) {
             throw new Error(
@@ -489,7 +512,7 @@ export default defineComponent({
         }
 
         const subType = stereo.value ? 'stereo' : 'multicam';
-        setMulticamImportProgress(97, 'Linking cameras…');
+        setMulticamImportProgress(97, `${labelPrefix}Linking cameras…`);
         const { data: parentFolder } = await createMulticamDataset({
           parentFolderId: datasetFolder._id,
           name: datasetName,
@@ -503,25 +526,82 @@ export default defineComponent({
         });
         multicamLinked = true;
 
-        setMulticamImportProgress(100, 'Opening viewer…');
-        clearMulticamFileRegistry();
-        await router.push({ name: 'viewer', params: { id: parentFolder._id } });
-        close();
+        if (openViewer) {
+          setMulticamImportProgress(100, `${labelPrefix}Opening viewer…`);
+          clearMulticamFileRegistry();
+          await router.push({ name: 'viewer', params: { id: parentFolder._id } });
+          if (closeUpload) {
+            close();
+          }
+        }
+        return parentFolder._id;
       } catch (err) {
-        preUploadErrorMessage.value = err.response?.data?.message || err.message || String(err);
         if (datasetFolderId && !multicamLinked) {
           try {
             await deleteResources([{ _id: datasetFolderId, _modelType: 'folder' }]);
           } catch (cleanupErr) {
-            await errorHandler({ err: cleanupErr, name: 'Multicam import cleanup' });
+            if (showProgressOverlay) {
+              await errorHandler({ err: cleanupErr, name: 'Multicam import cleanup' });
+            }
           }
         }
-        await errorHandler({ err, name: 'Multicam import' });
+        if (showProgressOverlay) {
+          preUploadErrorMessage.value = err.response?.data?.message || err.message || String(err);
+          await errorHandler({ err, name: 'Multicam import' });
+        }
+        throw err;
       } finally {
         clearMulticamUploadProgressTimer();
-        multicamImporting.value = false;
-        multicamImportProgress.value = null;
+        if (showProgressOverlay) {
+          multicamImporting.value = false;
+          multicamImportProgress.value = null;
+        }
+      }
+    };
+
+    const multiCamImport = async (args: MultiCamImportArgs) => {
+      importMultiCamDialog.value = false;
+      if (!isMultiCamFolderArgs(args)) {
+        preUploadErrorMessage.value = 'Glob-based multicam import is not supported on web yet.';
+        return;
+      }
+      await runMultiCamFolderImport(args);
+    };
+
+    const chooseAndScanBatch = async () => {
+      const ret = await openFromDisk('image-sequence', true);
+      if (ret.canceled || !ret.fileList?.length) {
+        return null;
       }
+      batchImportFiles.value = ret.fileList;
+      const root = ret.root ?? ret.filePaths[0]?.split('/').filter(Boolean)[0] ?? '';
+      if (!root) {
+        throw new Error('Could not determine the selected root folder.');
+      }
+      return scanMultiCamBatchFromFiles(root, ret.fileList);
+    };
+
+    const importBatchCollect = async (collect: MultiCamBatchCollect, datasetName: string) => {
+      if (!collect.importArgs) {
+        return;
+      }
+      clearMulticamFileRegistry();
+      collect.cameras.forEach((camera) => {
+        stashCameraFolderFiles(
+          camera.sourcePath,
+          filesForCameraSource(camera.sourcePath, batchImportFiles.value),
+        );
+      });
+      await runMultiCamFolderImport(
+        { ...collect.importArgs, datasetName },
+        {
+          openViewer: false,
+          closeUpload: false,
+          showProgressOverlay: false,
+          progressLabel: collect.name,
+        },
+      );
+      clearMulticamFileRegistry();
     };
     // Filter to show how many files are left to upload
     const filesNotUploaded = (item: PendingUpload) => item.files.filter(
@@ -569,6 +649,13 @@ export default defineComponent({
     function close() {
       emit('close');
     }
+    const closeMultiCamBatchDialog = (importedCount = 0) => {
+      importMultiCamBatchDialog.value = false;
+      batchImportFiles.value = [];
+      if (importedCount > 0) {
+        eventBus.$emit('refresh-data-browser');
+      }
+    };
     function abort() {
       if (pendingUploads.value.length === 0) {
         close();
@@ -607,6 +694,7 @@ export default defineComponent({
       stereo,
       multiCamOpenType,
       importMultiCamDialog,
+      importMultiCamBatchDialog,
       girderUpload,
       multicamImporting,
       multicamImportProgress,
@@ -614,12 +702,15 @@ export default defineComponent({
       clientSettings,
       //methods
       close,
+      closeMultiCamBatchDialog,
       openImport,
       processImport,
       openMultiCamDialog,
       filterFileUpload,
       multiCamImportCheck,
       multiCamImport,
+      chooseAndScanBatch,
+      importBatchCollect,
       registerSubfolderCameras,
       unregisterSubfolderCamera,
       renameSubfolderCamera,
@@ -678,6 +769,19 @@ export default defineComponent({
         @abort="importMultiCamDialog = false; preUploadErrorMessage = null"
       />
     </v-dialog>
+    <v-dialog
+      :value="importMultiCamBatchDialog"
+      persistent
+      overlay-opacity="0.95"
+      max-width="80%"
+    >
+      <ImportMultiCamBatchDialog
+        v-if="importMultiCamBatchDialog"
+        :choose-and-scan="chooseAndScanBatch"
+        :import-collect="importBatchCollect"
+        @abort="closeMultiCamBatchDialog"
+      />
+    </v-dialog>
     <v-card
       outlined
       color="default"
@@ -853,9 +957,11 @@ export default defineComponent({
                   class="grow my-2"
                   :small="!!pendingUploads.length"
                   :multi-cam-import="true"
+                  :batch-multi-cam-import="true"
                   :button-attrs="buttonAttrs"
                   @open="openImport($event)"
                   @multi-cam="openMultiCamDialog"
+                  @multi-cam-batch="importMultiCamBatchDialog = true"
                 />
               </v-list-item>
               <v-list-item>
diff --git a/docs/Dive-Desktop.md b/docs/Dive-Desktop.md
index a21cd6948..a9547742a 100644
--- a/docs/Dive-Desktop.md
+++ b/docs/Dive-Desktop.md
@@ -57,6 +57,7 @@ Click either ==Open Image Sequence :material-folder-open:== or ==Open Video :mat
 * ==:material-view-list-outline: Image List== will prompt you to choose a `.txt` file that contains an image name or full path on each line.
 * ==:material-binoculars: Stereo== will prompt you to choose 2 videos or 2 image sequences and a calibration file.
 * ==:material-camera-burst: Multi-Cam== will prompt you to describe the multi-cam configuration by naming several cameras and picking the source media for each.
+* ==:material-folder-multiple-image: MultiCam Batch== will prompt you to choose a root folder of **collect** subfolders and import one multicam image-sequence dataset per collect. See [Batch multicam import](Multicamera-data.md#batch-multicam-import) for the expected folder layout.
 
 The import routine will look for `.csv` and `.json` files in the same directory as the source media, and you will be prompted to manually select an annotation file and a configuration file.  Neither is required.
 
diff --git a/docs/Multicamera-data.md b/docs/Multicamera-data.md
index 4de064bb6..2c97197d7 100644
--- a/docs/Multicamera-data.md
+++ b/docs/Multicamera-data.md
@@ -6,6 +6,7 @@ DIVE supports **multicamera** and **stereo** datasets on both the [web version](
 |------------|-----|---------|
 | Import stereo (2 cameras + calibration) | ✔️ | ✔️ |
 | Import multicam (2 or 3 cameras) | ✔️ | ✔️ |
+| Batch multicam import (collect folders) | ✔️ | ✔️ |
 | View and annotate across cameras | ✔️ | ✔️ |
 | MultiCamera Tools (link/unlink tracks) | ✔️ | ✔️ |
 | Run stereo / multicam VIAME pipelines | ✔️ | ✔️ |
@@ -30,6 +31,7 @@ Multicam import is available from the standard upload dialog on [viame.kitware.c
 5. Choose one of:
     * ==:material-binoculars: Stereoscopic== — exactly 2 cameras and a calibration `.npz` file.
     * ==:material-camera-burst: MultiCam== — 2 or 3 cameras; no calibration file required.
+    * ==:material-folder-multiple-image: MultiCam Batch== — import many multicam datasets at once from a folder of **collect** subfolders (image sequences only). See [Batch multicam import](#batch-multicam-import).
 6. In the import dialog, assign a source folder or video file to each camera. All cameras must use the same media type (all image sequences or all videos) and must have the same number of frames (or matching video duration).
 7. Optionally attach a per-camera annotation file during import.
 8. Enter a dataset name, choose the default display camera, and click ==Begin Import==.
@@ -47,6 +49,7 @@ For general web upload concepts (permissions, transcoding, zip import), see [Upl
 
 * ==:material-binoculars: Stereo== — choose 2 videos or 2 image sequences and a calibration file.
 * ==:material-camera-burst: Multi-Cam== — name each camera and pick its source media.
+* ==:material-folder-multiple-image: MultiCam Batch== — import many multicam datasets from a folder of collect subfolders (image sequences only). See [Batch multicam import](#batch-multicam-import).
 
 Desktop additionally supports ==:material-view-list-outline: Image List== and glob-based folder filtering for single-camera imports, and glob/keyword layout options for multicam import.
 
@@ -54,6 +57,49 @@ Desktop additionally supports ==:material-view-list-outline: Image List== and gl
 
     Stereoscopic data **requires** a calibration file. Generic multicamera data does **not**.
 
+### Batch multicam import
+
+Use **MultiCam Batch** when you have many synchronized multicam **collects** on disk that share the same camera layout — for example repeated survey passes where each pass is one collect folder with the same camera subfolders (`EO/`, `IR/`, `UV/`, and so on).
+
+**Folder layout:**
+
+```
+survey/                 ← choose this root folder
+  collect_001/          ← one multicam dataset
+    EO/
+      frame001.jpg
+      frame002.jpg
+    IR/
+      frame001.jpg
+      frame002.jpg
+  collect_002/
+    EO/
+    IR/
+```
+
+Each immediate child of the root is a **collect** folder. Inside every collect, the same **2 or 3 camera subfolders** must appear, each holding that camera's image frames for that collect.
+
+**Requirements:**
+
+* **Image sequences only** — not video or stereo.
+* **2 or 3 cameras** shared across all collects (same subfolder names in every collect).
+* **Camera folder names** must use letters, numbers, and underscores only (no spaces).
+* **Frame counts** should match across cameras within a collect; mismatches are flagged as warnings in the review table.
+* Supported image formats match standard DIVE image-sequence import (PNG, JPEG, TIFF, and others).
+
+**Workflow (Web and Desktop):**
+
+1. Open ==Add Image Sequence== and choose ==MultiCam Batch== from the ==:material-chevron-down:== dropdown.
+2. Select the **root folder** whose subfolders are collects.
+3. Review the scan summary: detected cameras, per-collect frame counts, and any blocking issues.
+4. Edit the **dataset name** for each collect you plan to import (defaults to the collect folder name).
+5. Select which valid collects to import, then start the batch. DIVE creates **one multicam parent dataset per collect**.
+6. If one collect fails, the batch **continues** with the remaining selected collects.
+
+On **Web**, the folder picker uploads all files under the chosen root; scanning uses browser paths to group images by collect and camera. On **Desktop**, scanning reads the folder tree locally before import begins.
+
+For a single multicam dataset from one parent folder (one collect, camera subfolders only), use ==MultiCam== with the **parent-folder** import mode instead of MultiCam Batch.
+
 ## Data/Track Organization
 
 Data is loaded amongst multiple folders to create a multicamera dataset. In these cases trackIds will be linked if they are the same across the cameras. Selection of a trackId that exists across multiple cameras will be linked together in the [Track List](UI-Track-List.md).
diff --git a/docs/Web-Version.md b/docs/Web-Version.md
index ec784ef2e..7760d3575 100644
--- a/docs/Web-Version.md
+++ b/docs/Web-Version.md
@@ -53,10 +53,13 @@ DIVE Web supports importing **stereo** (2 cameras + calibration) and **multicam*
 1. Navigate to the folder where the new dataset should live (see steps above).
 2. Click ==:material-file-upload: Upload==.
 3. On ==Add Image Sequence== or ==Add Video==, open the ==:material-chevron-down:== dropdown.
-4. Choose ==:material-binoculars: Stereoscopic== or ==:material-camera-burst: MultiCam==.
-5. Assign media to each camera, set a dataset name and default display camera, then start the import.
+4. Choose one of:
+    * ==:material-binoculars: Stereoscopic== — 2 cameras plus a calibration `.npz` file.
+    * ==:material-camera-burst: MultiCam== — assign media to each of 2 or 3 cameras for **one** dataset.
+    * ==:material-folder-multiple-image: MultiCam Batch== — import **many** multicam image-sequence datasets from a root folder of collect subfolders (see [Batch multicam import](Multicamera-data.md#batch-multicam-import)).
+5. For Stereoscopic or MultiCam, assign media to each camera, set a dataset name and default display camera, then start the import. For MultiCam Batch, choose the root folder, review the scan table, edit dataset names, select collects, and start the batch.
 
-All cameras in one import must share the same media type and frame count. Stereoscopic imports require a calibration `.npz` file.
+All cameras in one import must share the same media type and frame count. Stereoscopic imports require a calibration `.npz` file. MultiCam Batch is **image-sequence only** (not video or stereo).
 
 For camera selection, linked tracks, MultiCamera Tools, and pipeline details, see [Multicamera and Stereo Data](Multicamera-data.md).
 
diff --git a/docs/index.md b/docs/index.md
index c52ee2149..1714c3291 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -21,6 +21,7 @@ Load your own images and videos | ✔️ | ✔️
 | &nbsp;&nbsp;&nbsp; Image and video transcoding | ✔️ | ✔️
 | &nbsp;&nbsp;&nbsp; Import using image lists  | ❌ | ✔️
 Multicamera and stereo datasets | ✔️ | ✔️
+| &nbsp;&nbsp;&nbsp; Batch multicam import (collect folders) | ✔️ | ✔️
 Load annotations from [supported formats](DataFormats.md) | ✔️ | ✔️
 Create new object and track annotation | ✔️ | ✔️
 Annotation export | ✔️ | ✔️

From 41fefb6492880bc12bb9ec8da2fa26903ec18480 Mon Sep 17 00:00:00 2001
From: Adam Romlein <35015390+romleiaj@users.noreply.github.com>
Date: Wed, 8 Jul 2026 14:36:31 -0400
Subject: [PATCH 3/6] Add option to infer frame index from filename (#1742)

* Parse per-frame capture timestamps from filenames

  Multicam datasets assume cameras are frame-aligned by position, but
  cameras in a rig can independently drop frames, so index i isn't
  necessarily the same real-world moment across cameras. Phase I of
  SEAL feature 5: derive a best-effort timestamp per frame from its
  filename and expose it on FrameImage/MediaResource, so later phases
  can build a real aligned timeline instead of assuming index parity.

  Parsing is provisional (no real MML sample filenames yet) and fully
  optional -- undefined/None is the expected common case and must not
  affect existing datasets. No meta.json schema change: the timestamp
  is computed at read time from the filename, mirroring how url/
  filename are already derived, not persisted.

* Align multicam playback to a global timestamp-derived timeline

  Multicam playback assumed cameras were frame-aligned by position, but
  cameras in a rig can independently drop frames, so index i wasn't
  necessarily the same real-world moment across cameras. Phase II of
  SEAL feature 5: when every camera has a timestamp on every frame,
  build a global aligned timeline and resolve each camera's own local
  frame per slot, blanking a camera's pane when it has none at that
  instant. Falls back byte-identically to today's positional broadcast
  whenever any camera lacks full timestamp coverage -- zero risk to
  existing datasets.

  Also fixes a latent gap this surfaced: continuous playback bypassed
  the aggregate controller entirely (each camera free-ran its own
  frame-advance loop), so aligned mode would have applied to scrubbing
  but silently reverted to raw per-camera advancement during playback.
  Centralizes a single tick in the aggregate controller when aligned.

* Fix stale annotation overlay and add UI for blanked aligned-timeline panes

      Phase III of SEAL feature 5. Phase II blanked a camera's image when the
      global aligned timeline has no frame for it at a slot, but left two
      gaps: LayerManager kept drawing annotations for whatever local frame
      the camera was on before blanking, since seek(undefined) deliberately
      leaves data.frame untouched and LayerManager's watchers are keyed on
      frame number -- so stale boxes floated over an otherwise-blank pane.
      The pane itself also gave no visual indication it was blanked rather
      than just failing to load.

      Expose the existing per-camera hasFrame flag on MediaController, and
      have LayerManager watch it: every prior updateLayers() call site now
      goes through a new refreshLayers(), which disables all annotation/edit
      layers instead whenever hasFrame is false. ImageAnnotator/VideoAnnotator
      now render a 'eNo frame at this instant' overlay over a blanked pane.

* Fix local-vs-global frame bugs in editing/seek and add timeline gap indicator

Track create/edit/delete and seek operations were keying off the global
aligned slot index instead of the selected camera's local frame, writing
detections to wrong frame numbers when alignment is active. Adds
selectedCameraFrame() in useModeManager, seekCameraFrame() with an
inverse aligned index, per-selected-camera time updates in Viewer, and
an aligned-gap indicator bar under the frame slider in Controls.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

* Fix aligned timeline never activating on real multicam datasets

imageData was initialized as { singleCam: [] } and multicam loading only
added per-camera keys on top, so the leftover empty singleCam entry made
canAlign() disqualify every multicam dataset. Rebuild imageData with
exactly the dataset's cameras before loading (replacing the whole object,
since adding keys via bracket assignment is non-reactive under Vue 2.7)
and restrict the alignedTimeline computed to the multicam camera list so
stale keys can never disqualify alignment.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

* Make per-camera controller lookups null-safe during load

loadData calls changeCamera(defaultCamera) before progress.loaded, so no
annotator (and thus no camera controller) exists yet and the aggregate is
the empty stub whose getController() throws. That produced an unhandled
promise rejection on every multicam load and skipped selectCamera's
edit-mode restore and change-camera emit. selectedCameraFrame() and
isCreatingNewDetection() shared the same throw exposure whenever a
camera's annotator never mounted. Wrap all three lookups with a graceful
fallback (skip the time resync / fall back to the aggregate frame).

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

* Route local-frame seek producers through seekCameraFrame

Viewer.vue's seekToFrame (track-seek from TrackItem/TrackList/
TrackDetailsPanel/AttributesSubsection keyframe navigation, BottomPanel)
and ControlsContainer's Timeline chart click-seek were calling the
aggregate seek(), which operates in global slot space under an aligned
timeline, with frames produced in the selected camera's local frame
space. Translate both through seekCameraFrame(selectedCamera, frame)
(a passthrough when alignment is inactive), and drive the Timeline
playhead from time.frame -- which tracks the selected camera's local
frame -- so charts, playhead, and click-seek all agree on frame space.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

* Center timeline gap-indicator bands on the slider thumb position

The gap gradient painted slot s over [s/maxFrame, (s+1)/maxFrame], a full
cell to the right of the v-slider thumb (which sits at s/maxFrame), and a
trailing gap at s === maxFrame painted [100%, 100+%] -- invisible, since
the widening branch only ran for sub-0.25% cells. Extract the computation
into a pure computeGapGradient() in alignedTimeline.ts that centers each
band on the thumb position ([(s-0.5)/maxFrame, (s+0.5)/maxFrame], clamped
to [0, 100]) and unit-test it, including edge slots and min-width
widening.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

* Apply the aligned seek when a resolver is installed or a camera mounts

setAlignedFrameResolver() reset alignedCurrentFrame to 0 without seeking,
so a camera that should be blank at slot 0 kept showing its local frame 0
until the first user seek. Perform an aligned seek to slot 0 on resolver
install, and re-apply the current slot (flush: 'post') whenever a camera
registers while a resolver is active -- annotators self-seek to their own
local frame 0 during init, which covers the common ordering where the
resolver is installed before the annotators mount.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

* Pair identical-timestamp frames positionally and skip no-op timeline reinstalls

Sorting triples camera-name-first swept all of one camera's same-time
frames into consecutive single-camera slots, so a calibration dataset
where every frame shares one collection timestamp produced a timeline of
mostly blank panes instead of positional pairing; tie-break equal
timestamps by local index first. Also key the Viewer's resolver install
on the slot structure so display-URL swaps (percentile stretch) that
leave timestamps unchanged no longer reinstall the resolver and visibly
re-seek every camera.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

* Allow unequal multicam frame counts via filename frame-index inference

Add an "Infer frame index from filename" toggle to the multicam import
dialog. When enabled, the equal-frame-count validation is skipped so
datasets with dropped frames (e.g. KAMERA, which encodes a capture
timestamp per filename) can be imported and aligned downstream by their
filename timestamps rather than by exact positional index.

Also drop the matching server-side equal-frame-count rejection in
create_multicam, keeping the frame-count call only for its validation
side effect.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* Remove provisional language

* Unify frame-timestamp parsing on a single client implementation

Replace the hand-synced Python + TypeScript filename timestamp parsers with
one shared TS module (dive-common/frameTimestamp.ts) used by both platforms.

The girder server previously parsed each frame's timestamp in get_media and
embedded it in the /media response, but nothing server-side ever read it -- it
existed only to reach the client. Move parsing to the client: the web-girder
API layer now attaches timestamps from filenames after fetching media (both the
single-cam /media response and multicam per-camera imageData from /dive_dataset),
mirroring how the desktop backend already parses on media enumeration.

- Add dive-common/frameTimestamp.ts (parseFrameTimestamp + attachFrameTimestamps)
  and move its tests out of sharedUtils.spec.ts.
- Point the desktop backend importers at the new shared module.
- Delete server dive_utils/timestamp_parser.py and its test; drop the now-dead
  MediaResource.timestamp field and the get_media parsing call; update the
  multicam dataset tests that asserted server-side timestamps.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* Shrink alignment to 0s, from 0.5s tolerance

* Update tests - matching intended metadata behavior

* documentation update

---------

Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
Co-authored-by: Bryon Lewis <Bryon.Lewis@kitware.com>
---
 client/dive-common/alignedTimeline.spec.ts    | 211 ++++++++++++
 client/dive-common/alignedTimeline.ts         | 212 ++++++++++++
 client/dive-common/apispec.ts                 |   2 +
 .../components/ControlsContainer.vue          |  21 +-
 .../ImportMultiCamDialog.vue                  |  10 +
 .../useImportMultiCamDialog.ts                |   6 +
 .../validateMulticamImageSets.spec.ts         |  20 ++
 .../validateMulticamImageSets.ts              |   8 +-
 client/dive-common/components/Viewer.vue      | 121 ++++++-
 client/dive-common/frameTimestamp.spec.ts     |  55 ++++
 client/dive-common/frameTimestamp.ts          | 104 ++++++
 client/dive-common/use/useModeManager.ts      |  68 ++--
 .../desktop/backend/native/common.spec.ts     |  21 +-
 .../platform/desktop/backend/native/common.ts |   6 +-
 .../desktop/backend/native/multiCamUtils.ts   |   2 +
 .../web-girder/api/dataset.service.ts         |  12 +-
 client/src/components/LayerManager.vue        | 131 +++-----
 .../components/annotators/ImageAnnotator.vue  |  33 +-
 .../components/annotators/VideoAnnotator.vue  |  35 +-
 .../src/components/annotators/annotator.scss  |  13 +
 .../annotators/mediaControllerType.ts         |  55 ++++
 .../annotators/useMediaController.spec.ts     | 302 ++++++++++++++++++
 .../annotators/useMediaController.ts          | 179 ++++++++++-
 client/src/components/controls/Controls.vue   |  30 ++
 docs/DataFormats.md                           |  16 +
 docs/Large-Image-Support.md                   |   3 +
 docs/Multicamera-data.md                      |  46 ++-
 docs/UI-Timeline.md                           |   8 +-
 docs/Web-Version.md                           |   5 +-
 docs/index.md                                 |   1 +
 server/dive_server/crud_dataset.py            |  27 +-
 server/tests/test_create_multicam.py          |  21 +-
 server/tests/test_multicam_dataset.py         |   8 +-
 33 files changed, 1635 insertions(+), 157 deletions(-)
 create mode 100644 client/dive-common/alignedTimeline.spec.ts
 create mode 100644 client/dive-common/alignedTimeline.ts
 create mode 100644 client/dive-common/frameTimestamp.spec.ts
 create mode 100644 client/dive-common/frameTimestamp.ts
 create mode 100644 client/src/components/annotators/useMediaController.spec.ts

diff --git a/client/dive-common/alignedTimeline.spec.ts b/client/dive-common/alignedTimeline.spec.ts
new file mode 100644
index 000000000..d0d0520fb
--- /dev/null
+++ b/client/dive-common/alignedTimeline.spec.ts
@@ -0,0 +1,211 @@
+import type { FrameImage } from './apispec';
+import {
+  buildAlignedTimeline, buildInverseAlignedIndex, canAlign, computeGapGradient, computeGapSlots,
+} from './alignedTimeline';
+
+function frame(timestamp?: number): FrameImage {
+  return { url: `url-${timestamp}`, filename: `frame-${timestamp}.png`, timestamp };
+}
+
+describe('alignedTimeline', () => {
+  it('aligns when every camera has a timestamp on every frame', () => {
+    const camerasFrames = {
+      A: [frame(100), frame(200), frame(300)],
+      B: [frame(100), frame(200), frame(300)],
+    };
+    expect(canAlign(camerasFrames)).toBe(true);
+    const result = buildAlignedTimeline(camerasFrames);
+    expect(result).toEqual({
+      aligned: true,
+      slots: [
+        { A: 0, B: 0 },
+        { A: 1, B: 1 },
+        { A: 2, B: 2 },
+      ],
+    });
+  });
+
+  it('falls back when any single frame anywhere is missing a timestamp', () => {
+    const camerasFrames = {
+      A: [frame(100), frame(undefined)],
+      B: [frame(100), frame(200)],
+    };
+    expect(canAlign(camerasFrames)).toBe(false);
+    expect(buildAlignedTimeline(camerasFrames)).toEqual({ aligned: false });
+  });
+
+  it('resolves a genuinely missing frame on one camera to undefined at that slot', () => {
+    const camerasFrames = {
+      A: [frame(100), frame(200), frame(300)],
+      B: [frame(100), frame(300)],
+    };
+    const result = buildAlignedTimeline(camerasFrames);
+    expect(result).toEqual({
+      aligned: true,
+      slots: [
+        { A: 0, B: 0 },
+        { A: 1, B: undefined },
+        { A: 2, B: 1 },
+      ],
+    });
+  });
+
+  it('merges cameras with clock drift within tolerance into one slot', () => {
+    const camerasFrames = {
+      A: [frame(100), frame(200), frame(300)],
+      B: [frame(100.45), frame(200.4), frame(300.3)],
+    };
+    const result = buildAlignedTimeline(camerasFrames, 0.5);
+    expect(result).toEqual({
+      aligned: true,
+      slots: [
+        { A: 0, B: 0 },
+        { A: 1, B: 1 },
+        { A: 2, B: 2 },
+      ],
+    });
+  });
+
+  it('splits two same-camera frames within one tolerance window into separate slots', () => {
+    const camerasFrames = {
+      A: [frame(100), frame(100.2)],
+      B: [frame(100.1)],
+    };
+    const result = buildAlignedTimeline(camerasFrames, 0.5);
+    expect(result).toEqual({
+      aligned: true,
+      slots: [
+        { A: 0, B: 0 },
+        { A: 1, B: undefined },
+      ],
+    });
+  });
+
+  it('pairs frames positionally when every frame shares one identical timestamp', () => {
+    // Calibration-style datasets (e.g. C/L/R shots stamped with a single
+    // collection timestamp) must reduce to positional pairing, not spill each
+    // camera's frames into separate mostly-blank slots.
+    const t = 1712495277.206341;
+    const camerasFrames = {
+      EO: [frame(t), frame(t), frame(t)],
+      IR: [frame(t), frame(t), frame(t)],
+    };
+    const result = buildAlignedTimeline(camerasFrames, 0.5);
+    expect(result).toEqual({
+      aligned: true,
+      slots: [
+        { EO: 0, IR: 0 },
+        { EO: 1, IR: 1 },
+        { EO: 2, IR: 2 },
+      ],
+    });
+  });
+
+  it('disqualifies a dataset with an empty-array (e.g. video-backed) camera', () => {
+    const camerasFrames = {
+      A: [] as FrameImage[],
+      B: [frame(100)],
+    };
+    expect(canAlign(camerasFrames)).toBe(false);
+    expect(buildAlignedTimeline(camerasFrames)).toEqual({ aligned: false });
+  });
+
+  it('disqualifies datasets with fewer than two cameras', () => {
+    const camerasFrames = {
+      A: [frame(100), frame(200)],
+    };
+    expect(canAlign(camerasFrames)).toBe(false);
+    expect(buildAlignedTimeline(camerasFrames)).toEqual({ aligned: false });
+  });
+
+  describe('computeGapSlots', () => {
+    it('returns no gaps when every camera has a frame at every slot', () => {
+      const camerasFrames = {
+        A: [frame(100), frame(200)],
+        B: [frame(100), frame(200)],
+      };
+      const result = buildAlignedTimeline(camerasFrames);
+      expect(result.aligned).toBe(true);
+      expect(result.aligned && computeGapSlots(result.slots)).toEqual([]);
+    });
+
+    it('flags slots where any camera is missing a frame', () => {
+      const camerasFrames = {
+        A: [frame(100), frame(200), frame(300)],
+        B: [frame(100), frame(300)],
+      };
+      const result = buildAlignedTimeline(camerasFrames);
+      expect(result.aligned).toBe(true);
+      expect(result.aligned && computeGapSlots(result.slots)).toEqual([1]);
+    });
+  });
+
+  describe('computeGapGradient', () => {
+    it('returns none with no gaps or a non-positive maxFrame', () => {
+      expect(computeGapGradient([], 10)).toBe('none');
+      expect(computeGapGradient([1], 0)).toBe('none');
+      expect(computeGapGradient([1], -5)).toBe('none');
+    });
+
+    it('centers a gap band on the slider thumb position for its slot', () => {
+      // Thumb for value 4 of maxFrame 8 sits at 50%; band is [43.75%, 56.25%].
+      expect(computeGapGradient([4], 8)).toBe(
+        'linear-gradient(to right, transparent 43.75%, #ff5252 43.75%, #ff5252 56.25%, transparent 56.25%)',
+      );
+    });
+
+    it('keeps a trailing gap at slot === maxFrame visible (clamped to 100%)', () => {
+      expect(computeGapGradient([8], 8)).toBe(
+        'linear-gradient(to right, transparent 93.75%, #ff5252 93.75%, #ff5252 100%, transparent 100%)',
+      );
+    });
+
+    it('keeps a leading gap at slot 0 visible (clamped to 0%)', () => {
+      expect(computeGapGradient([0], 8)).toBe(
+        'linear-gradient(to right, transparent 0%, #ff5252 0%, #ff5252 6.25%, transparent 6.25%)',
+      );
+    });
+
+    it('merges consecutive gap slots into a single band', () => {
+      expect(computeGapGradient([2, 3], 8)).toBe(
+        'linear-gradient(to right, transparent 18.75%, #ff5252 18.75%, #ff5252 43.75%, transparent 43.75%)',
+      );
+    });
+
+    it('emits one band per distinct gap run', () => {
+      expect(computeGapGradient([1, 3], 8)).toBe(
+        'linear-gradient(to right, '
+        + 'transparent 6.25%, #ff5252 6.25%, #ff5252 18.75%, transparent 18.75%, '
+        + 'transparent 31.25%, #ff5252 31.25%, #ff5252 43.75%, transparent 43.75%)',
+      );
+    });
+
+    it('widens sub-minimum-width bands around their center so they stay visible', () => {
+      // One slot of 1024 is ~0.098% wide -- below the 0.25% minimum, so the
+      // band is widened to exactly 0.25% centered on the thumb at 50%.
+      expect(computeGapGradient([512], 1024)).toBe(
+        'linear-gradient(to right, transparent 49.875%, #ff5252 49.875%, #ff5252 50.125%, transparent 50.125%)',
+      );
+    });
+  });
+
+  describe('buildInverseAlignedIndex', () => {
+    it('maps each camera\'s local frame back to its global slot', () => {
+      const camerasFrames = {
+        A: [frame(100), frame(200), frame(300)],
+        B: [frame(100), frame(300)],
+      };
+      const result = buildAlignedTimeline(camerasFrames);
+      expect(result.aligned).toBe(true);
+      if (!result.aligned) return;
+      const inverse = buildInverseAlignedIndex(result.slots);
+      expect(inverse.A.get(0)).toBe(0);
+      expect(inverse.A.get(1)).toBe(1);
+      expect(inverse.A.get(2)).toBe(2);
+      expect(inverse.B.get(0)).toBe(0);
+      expect(inverse.B.get(1)).toBe(2);
+      // B has no local frame 2 -- it only ever appears in slots 0 and 2.
+      expect(inverse.B.get(2)).toBeUndefined();
+    });
+  });
+});
diff --git a/client/dive-common/alignedTimeline.ts b/client/dive-common/alignedTimeline.ts
new file mode 100644
index 000000000..88307e34a
--- /dev/null
+++ b/client/dive-common/alignedTimeline.ts
@@ -0,0 +1,212 @@
+import type { FrameImage } from './apispec';
+
+/**
+ * Max time delta, in seconds, between two cameras' frame timestamps for them to
+ * be considered "the same instant" (SEAL feature 5). In KAMERA sample data the
+ * C/L/R cameras share an identical capture timestamp per shot, so for now this
+ * requires an exact match (0). Widen it only if real captures turn out to have
+ * sub-second jitter that needs absorbing.
+ */
+export const FRAME_ALIGNMENT_TOLERANCE_SECONDS = 0;
+
+/**
+ * camera name -> local index into that camera's own FrameImage[], or undefined
+ * if no frame from that camera falls within tolerance of this timeline slot.
+ */
+export type AlignedSlot = Record<string, number | undefined>;
+
+export type TimelineResult =
+  | { aligned: true; slots: AlignedSlot[] }
+  | { aligned: false };
+
+interface FrameTriple {
+  camera: string;
+  localIndex: number;
+  timestamp: number;
+}
+
+/**
+ * A dataset qualifies for aligned playback only when there are at least two
+ * cameras, every camera has at least one frame, and every frame on every
+ * camera has a defined timestamp. A single untimestamped frame anywhere means
+ * the whole dataset falls back to today's exact positional alignment -- the
+ * safe, conservative default for datasets whose filenames don't follow a
+ * recognized timestamp convention (see dive_utils/timestamp_parser.py).
+ */
+export function canAlign(camerasFrames: Record<string, FrameImage[]>): boolean {
+  const cameraNames = Object.keys(camerasFrames);
+  if (cameraNames.length < 2) {
+    return false;
+  }
+  return cameraNames.every((camera) => {
+    const frames = camerasFrames[camera];
+    return frames.length > 0 && frames.every((frame) => frame.timestamp !== undefined);
+  });
+}
+
+/**
+ * Builds a global aligned timeline from each camera's own frame list, when
+ * every frame across every camera carries a timestamp (see canAlign).
+ *
+ * Algorithm: flatten every camera's frames into (camera, localIndex,
+ * timestamp) triples, sort ascending by timestamp (tied by camera name then
+ * local index, for determinism), then sweep once: open a slot at the first
+ * unassigned triple's timestamp, and absorb subsequent triples within
+ * `toleranceSeconds` of that slot's start time as long as that camera isn't
+ * already filled in the open slot. Otherwise close the slot and open a new
+ * one at that triple. This is deliberately simple (O(n log n), single pass,
+ * no bipartite matching) -- appropriate given there's no real data yet to
+ * justify anything smarter.
+ *
+ * One explicit simplification: if a camera has two frames within tolerance of
+ * the same open slot's start (e.g. a faster capture rate than other
+ * cameras), the second spills into a new slot rather than overwriting the
+ * first -- first-come-first-served per camera per slot, not silent data loss.
+ */
+export function buildAlignedTimeline(
+  camerasFrames: Record<string, FrameImage[]>,
+  toleranceSeconds: number = FRAME_ALIGNMENT_TOLERANCE_SECONDS,
+): TimelineResult {
+  if (!canAlign(camerasFrames)) {
+    return { aligned: false };
+  }
+
+  const cameraNames = Object.keys(camerasFrames);
+  const triples: FrameTriple[] = [];
+  cameraNames.forEach((camera) => {
+    camerasFrames[camera].forEach((frame, localIndex) => {
+      // frame.timestamp is guaranteed defined here by canAlign() above
+      triples.push({ camera, localIndex, timestamp: frame.timestamp as number });
+    });
+  });
+
+  // Tie-break equal timestamps by local index BEFORE camera name: when several
+  // cameras share identical capture timestamps (e.g. a calibration set where
+  // every C/L/R shot carries one collection timestamp), interleaving by index
+  // pairs frame i of every camera into the same slot. Camera-name-first
+  // ordering would instead sweep all of one camera's same-time frames into
+  // consecutive single-camera slots (spill), producing a timeline of mostly
+  // blank panes for data that is really positionally aligned.
+  triples.sort((a, b) => (
+    a.timestamp - b.timestamp
+    || a.localIndex - b.localIndex
+    || a.camera.localeCompare(b.camera)
+  ));
+
+  const slots: AlignedSlot[] = [];
+  let openSlot: AlignedSlot | null = null;
+  let openSlotStartTime = 0;
+
+  triples.forEach((triple) => {
+    const withinTolerance = openSlot !== null
+      && triple.timestamp - openSlotStartTime <= toleranceSeconds;
+    const cameraAlreadyFilled = openSlot !== null && openSlot[triple.camera] !== undefined;
+
+    if (!withinTolerance || cameraAlreadyFilled) {
+      if (openSlot !== null) {
+        slots.push(openSlot);
+      }
+      openSlot = Object.fromEntries(cameraNames.map((camera) => [camera, undefined]));
+      openSlotStartTime = triple.timestamp;
+    }
+
+    (openSlot as AlignedSlot)[triple.camera] = triple.localIndex;
+  });
+  if (openSlot !== null) {
+    slots.push(openSlot);
+  }
+
+  return { aligned: true, slots };
+}
+
+/**
+ * Inverse of a slot lookup: for each camera, maps its own local frame index
+ * to the global aligned-timeline slot it appears in. Used to translate a
+ * "seek this camera to its own local frame X" request (e.g. jumping to a
+ * track's start/end, which is stored in local-frame units) into the correct
+ * global slot, so every camera stays aligned instead of just the one camera
+ * jumping independently. Each camera appears in at most one slot per local
+ * frame (buildAlignedTimeline's first-come-first-served rule), so this is
+ * always a 1:1 mapping.
+ */
+export type InverseAlignedIndex = Record<string, Map<number, number>>;
+
+export function buildInverseAlignedIndex(slots: AlignedSlot[]): InverseAlignedIndex {
+  const inverse: InverseAlignedIndex = {};
+  slots.forEach((slot, slotIndex) => {
+    Object.entries(slot).forEach(([camera, localIndex]) => {
+      if (localIndex === undefined) {
+        return;
+      }
+      if (!inverse[camera]) {
+        inverse[camera] = new Map();
+      }
+      inverse[camera].set(localIndex, slotIndex);
+    });
+  });
+  return inverse;
+}
+
+/**
+ * Builds the CSS linear-gradient that Controls.vue paints under the frame
+ * scrubber to mark aligned-timeline gap slots (slots where at least one
+ * camera has no frame). Pure so it is unit-testable.
+ *
+ * Geometry: a v-slider thumb for value v sits at v/maxFrame of the track
+ * width, so each gap band is centered on the thumb position for its slot --
+ * slot s paints [(s - 0.5) / maxFrame, (s + 0.5) / maxFrame], clamped to
+ * [0, 100]. Consecutive gap slots are merged into a single band so the CSS
+ * stop count tracks the number of distinct gaps, not the number of gap
+ * frames. Bands narrower than `minWidthPct` are widened around their center
+ * so single-frame gaps stay visible on long timelines.
+ */
+export function computeGapGradient(
+  gapSlots: number[],
+  maxFrame: number,
+  minWidthPct = 0.25,
+): string {
+  if (!gapSlots.length || maxFrame <= 0) {
+    return 'none';
+  }
+  const ranges: [number, number][] = [];
+  let rangeStart = gapSlots[0];
+  let rangeEnd = gapSlots[0];
+  for (let i = 1; i < gapSlots.length; i += 1) {
+    if (gapSlots[i] === rangeEnd + 1) {
+      rangeEnd = gapSlots[i];
+    } else {
+      ranges.push([rangeStart, rangeEnd]);
+      rangeStart = gapSlots[i];
+      rangeEnd = gapSlots[i];
+    }
+  }
+  ranges.push([rangeStart, rangeEnd]);
+  const toPct = (frame: number) => (frame / maxFrame) * 100;
+  const stops: string[] = [];
+  ranges.forEach(([start, end]) => {
+    let startPct = Math.max(0, toPct(start - 0.5));
+    let endPct = Math.min(100, toPct(end + 0.5));
+    if (endPct - startPct < minWidthPct) {
+      const mid = (startPct + endPct) / 2;
+      startPct = Math.max(0, mid - minWidthPct / 2);
+      endPct = Math.min(100, mid + minWidthPct / 2);
+    }
+    stops.push(`transparent ${startPct}%`, `#ff5252 ${startPct}%`, `#ff5252 ${endPct}%`, `transparent ${endPct}%`);
+  });
+  return `linear-gradient(to right, ${stops.join(', ')})`;
+}
+
+/**
+ * Global aligned-timeline slot indices where at least one loaded camera has
+ * no frame -- i.e. scrubbing to that slot will blank at least one camera's
+ * pane. Used to render a gap indicator on the timeline scrubber.
+ */
+export function computeGapSlots(slots: AlignedSlot[]): number[] {
+  const gaps: number[] = [];
+  slots.forEach((slot, index) => {
+    if (Object.values(slot).some((localIndex) => localIndex === undefined)) {
+      gaps.push(index);
+    }
+  });
+  return gaps;
+}
diff --git a/client/dive-common/apispec.ts b/client/dive-common/apispec.ts
index e8cba0276..e1fd84a66 100644
--- a/client/dive-common/apispec.ts
+++ b/client/dive-common/apispec.ts
@@ -124,6 +124,8 @@ interface FrameImage {
   filename: string;
   /** Required for large-image (tiled) datasets; used as itemId for getTiles/getTileURL */
   id?: string;
+  /** Best-effort capture timestamp (epoch seconds) parsed from the filename, when available */
+  timestamp?: number;
 }
 
 export interface MultiCamImportFolderArgs {
diff --git a/client/dive-common/components/ControlsContainer.vue b/client/dive-common/components/ControlsContainer.vue
index 1e547658b..75fc1f512 100644
--- a/client/dive-common/components/ControlsContainer.vue
+++ b/client/dive-common/components/ControlsContainer.vue
@@ -19,6 +19,7 @@ import {
   useAttributesFilters,
   useCameraStore,
   useSelectedCamera,
+  useTime,
 } from '../../src/provides';
 
 export default defineComponent({
@@ -126,16 +127,28 @@ export default defineComponent({
       handler.trackSelect(trackId, false, modifiers);
     }
 
+    const aggregateController = injectAggregateController();
     const {
-      maxFrame, frame, seek, volume, setVolume, setSpeed, speed,
-    } = injectAggregateController().value;
+      maxFrame, volume, setVolume, setSpeed, speed,
+    } = aggregateController.value;
+    // The timeline charts (line/event charts) are built from trackStores in
+    // the selected camera's own local frame space. Under an aligned timeline
+    // (SEAL feature 5) the aggregate controller's frame/seek operate in
+    // global slot space, which diverges from local frames -- so the playhead
+    // uses time.frame (which tracks the selected camera's local frame) and
+    // chart click-seeks are translated through seekCameraFrame. Both are
+    // passthroughs when alignment isn't active.
+    const { frame: localFrame } = useTime();
+    function seekToFrame(frame: number) {
+      aggregateController.value.seekCameraFrame(selectedCamera.value, frame);
+    }
     return {
       currentView,
       toggleView,
       maxFrame,
       multiCam,
-      frame,
-      seek,
+      frame: localFrame,
+      seek: seekToFrame,
       volume,
       setVolume,
       speed,
diff --git a/client/dive-common/components/ImportMultiCamDialog/ImportMultiCamDialog.vue b/client/dive-common/components/ImportMultiCamDialog/ImportMultiCamDialog.vue
index cf2d03738..b6471e36d 100644
--- a/client/dive-common/components/ImportMultiCamDialog/ImportMultiCamDialog.vue
+++ b/client/dive-common/components/ImportMultiCamDialog/ImportMultiCamDialog.vue
@@ -138,6 +138,16 @@ export default defineComponent({
         />
       </div>
 
+      <v-checkbox
+        v-if="importType && dataType === 'image-sequence'"
+        v-model="inferFrameIndexFromFilename"
+        label="Infer frame index from filename"
+        hint="Example: test_seattle_2020_fl09_C_20200830_020814.141365_rgb.jpg"
+        dense
+        persistent-hint
+        class="mt-0"
+      />
+
       <v-row
         no-gutters
         class="align-center"
diff --git a/client/dive-common/components/ImportMultiCamDialog/useImportMultiCamDialog.ts b/client/dive-common/components/ImportMultiCamDialog/useImportMultiCamDialog.ts
index 14da8fce8..fd301694a 100644
--- a/client/dive-common/components/ImportMultiCamDialog/useImportMultiCamDialog.ts
+++ b/client/dive-common/components/ImportMultiCamDialog/useImportMultiCamDialog.ts
@@ -79,6 +79,10 @@ export function useImportMultiCamDialog(
   const cameraOrder: Ref<string[]> = ref([]);
   const defaultDisplay = ref('left');
   const importAnnotationFilesCheck = ref(false);
+  // When set, cameras may have differing frame counts; frames are aligned downstream
+  // by their filename-encoded timestamps instead of by exact positional index. Enables
+  // importing datasets with dropped frames (e.g. KAMERA). See validateMulticamImageSets.
+  const inferFrameIndexFromFilename = ref(false);
   const { error: importError, request: importRequest } = useRequest();
 
   onMounted(async () => {
@@ -261,6 +265,7 @@ export function useImportMultiCamDialog(
       filteredImages.value,
       Object.keys(globList.value).length,
       props.dataType,
+      inferFrameIndexFromFilename.value,
     );
   });
 
@@ -715,6 +720,7 @@ export function useImportMultiCamDialog(
     canMoveCamera,
     moveCamera,
     importAnnotationFilesCheck,
+    inferFrameIndexFromFilename,
     parentFolderName,
     subfolderLayoutLabel,
     subfolderOriginalNames,
diff --git a/client/dive-common/components/ImportMultiCamDialog/validateMulticamImageSets.spec.ts b/client/dive-common/components/ImportMultiCamDialog/validateMulticamImageSets.spec.ts
index a7439b080..22de7649a 100644
--- a/client/dive-common/components/ImportMultiCamDialog/validateMulticamImageSets.spec.ts
+++ b/client/dive-common/components/ImportMultiCamDialog/validateMulticamImageSets.spec.ts
@@ -26,6 +26,26 @@ describe('validateMulticamImageSets', () => {
     )).toBe('All cameras should have the same length of 1');
   });
 
+  it('allows unequal image counts when inferring frame index from filename', () => {
+    expect(validateMulticamImageSets(
+      'multi',
+      { left: ['a.png'], right: ['a.png', 'b.png'] },
+      0,
+      'image-sequence',
+      true,
+    )).toBeNull();
+  });
+
+  it('still requires non-empty cameras when inferring frame index from filename', () => {
+    expect(validateMulticamImageSets(
+      'multi',
+      { left: [], right: ['a.png'] },
+      0,
+      'image-sequence',
+      true,
+    )).toBe('Requires filtered Images for left ');
+  });
+
   it('rejects overlapping filenames in keyword mode', () => {
     expect(validateMulticamImageSets(
       'keyword',
diff --git a/client/dive-common/components/ImportMultiCamDialog/validateMulticamImageSets.ts b/client/dive-common/components/ImportMultiCamDialog/validateMulticamImageSets.ts
index e17c9ccd7..e505dbeca 100644
--- a/client/dive-common/components/ImportMultiCamDialog/validateMulticamImageSets.ts
+++ b/client/dive-common/components/ImportMultiCamDialog/validateMulticamImageSets.ts
@@ -1,6 +1,11 @@
 /**
  * Pure validation for multicam image lists: non-empty filters, equal frame counts,
  * and mutually exclusive filenames in keyword/glob mode. Video imports skip image checks.
+ *
+ * When `inferFrameIndexFromFilename` is set, the equal-frame-count check is skipped:
+ * datasets with dropped frames (e.g. KAMERA, which encodes a capture timestamp in each
+ * filename) legitimately have differing per-camera counts and are aligned downstream by
+ * their filename timestamps rather than by exact positional index.
  */
 export type MulticamImportType = 'multi' | 'keyword' | 'subfolders' | '';
 
@@ -9,6 +14,7 @@ export function validateMulticamImageSets(
   filteredImages: Record<string, string[]>,
   globListKeyCount: number,
   dataType: string,
+  inferFrameIndexFromFilename = false,
 ): string | null {
   if (importType === 'keyword' && globListKeyCount === 0) {
     return 'Add at least 1 filter pattern';
@@ -30,7 +36,7 @@ export function validateMulticamImageSets(
     if (length === -1) {
       length = images.length;
     }
-    if (length !== images.length) {
+    if (!inferFrameIndexFromFilename && length !== images.length) {
       return `All cameras should have the same length of ${length}`;
     }
     if (importType === 'keyword'
diff --git a/client/dive-common/components/Viewer.vue b/client/dive-common/components/Viewer.vue
index 879f0ad9f..24f459080 100644
--- a/client/dive-common/components/Viewer.vue
+++ b/client/dive-common/components/Viewer.vue
@@ -32,6 +32,7 @@ import {
   FilterList,
 } from 'vue-media-annotator/components';
 import type { AnnotationId } from 'vue-media-annotator/BaseAnnotation';
+import type { SetTimeFunc } from 'vue-media-annotator/use/useTimeObserver';
 import { getResponseError, featureHasSegmentationPolygon } from 'vue-media-annotator/utils';
 
 /* DIVE COMMON */
@@ -62,6 +63,9 @@ import type {
 import clientSettingsSetup, { clientSettings, isStereoInteractiveModeEnabled } from 'dive-common/store/settings';
 import { useApi, FrameImage, DatasetType } from 'dive-common/apispec';
 import { orderedMultiCamCameraNames } from 'dive-common/multicamDisplay';
+import {
+  buildAlignedTimeline, buildInverseAlignedIndex, computeGapSlots, TimelineResult,
+} from 'dive-common/alignedTimeline';
 import {
   computeOutputs,
   computeIsDefault,
@@ -166,6 +170,7 @@ export default defineComponent({
       aggregateController,
       onResize,
       clear: mediaControllerClear,
+      setAlignedFrameResolver,
     } = useMediaController();
     const { time, updateTime, initialize: initTime } = useTimeObserver();
     const imageData = ref({ singleCam: [] } as Record<string, FrameImage[]>);
@@ -189,6 +194,53 @@ export default defineComponent({
       // Total tracks
       total: 0,
     });
+    /**
+     * Global aligned-timeline resolution (SEAL feature 5, Phase II): only
+     * engages when every camera in a multicam dataset has a timestamp on
+     * every frame (see alignedTimeline.ts's canAlign). Otherwise -- including
+     * always for singleCam datasets -- playback falls back to today's exact
+     * positional (broadcast-same-index) behavior via useMediaController.ts.
+     */
+    const alignedTimeline = computed<TimelineResult>(() => {
+      if (!progress.loaded || multiCamList.value.length < 2) {
+        return { aligned: false };
+      }
+      // Only consider cameras that are actually part of this dataset:
+      // imageData could retain keys from before the load (e.g. the initial
+      // 'singleCam' entry), and a single leftover empty camera would make
+      // canAlign() disqualify the whole dataset.
+      const camerasFrames: Record<string, FrameImage[]> = {};
+      multiCamList.value.forEach((camera) => {
+        camerasFrames[camera] = imageData.value[camera] ?? [];
+      });
+      return buildAlignedTimeline(camerasFrames);
+    });
+    // Serialized shape of the currently installed timeline. The computed
+    // re-evaluates whenever any camera's imageData array identity changes --
+    // including pure display-URL swaps (e.g. the percentile-stretch remap)
+    // that don't alter timestamps at all. Installing a new resolver re-seeks
+    // every camera (a visible reload/blank flash), so skip the reinstall
+    // when the slot structure is unchanged.
+    let installedTimelineKey: string | null = null;
+    watch(alignedTimeline, (result) => {
+      const timelineKey = result.aligned ? JSON.stringify(result.slots) : null;
+      if (timelineKey === installedTimelineKey) {
+        return;
+      }
+      installedTimelineKey = timelineKey;
+      if (result.aligned) {
+        const inverseIndex = buildInverseAlignedIndex(result.slots);
+        setAlignedFrameResolver({
+          slotCount: computed(() => result.slots.length),
+          frameRate: time.frameRate,
+          resolveSlot: (f) => result.slots[f] ?? {},
+          resolveGlobalSlot: (camera, localFrame) => inverseIndex[camera]?.get(localFrame),
+          gapSlots: computed(() => computeGapSlots(result.slots)),
+        });
+      } else {
+        setAlignedFrameResolver(null);
+      }
+    }, { immediate: true });
     const controlsRef = ref();
     const controlsHeight = ref(0);
     const controlsCollapsed = ref(false);
@@ -422,6 +474,24 @@ export default defineComponent({
       },
     });
 
+    /**
+     * Every camera pane calls updateTime() from its own seek/play/pause, but
+     * useTime()'s frame/flick is a single shared value consumed app-wide as
+     * "the current frame" (track split, keyframe toggling, attribute editing,
+     * etc.). Under an aligned timeline (SEAL feature 5) cameras can sit on
+     * different local frames for the same instant, so only the selected
+     * camera's updates may reach it -- otherwise whichever camera's annotator
+     * happened to seek last would silently win, regardless of which camera
+     * the user is actually looking at/editing.
+     */
+    function selectedCameraUpdateTime(camera: string): SetTimeFunc {
+      return (data) => {
+        if (selectedCamera.value === camera) {
+          updateTime(data);
+        }
+      };
+    }
+
     const {
       attributesList: attributes,
       loadAttributes,
@@ -982,6 +1052,19 @@ export default defineComponent({
         }
       }
       selectedCamera.value = camera;
+      // Immediately resync the shared time observer to the newly selected
+      // camera's own local frame (see selectedCameraUpdateTime) -- otherwise
+      // it would keep reporting the previously selected camera's local frame
+      // until the next seek/play/pause happens to land on this camera.
+      // During load (loadData calls changeCamera before progress.loaded, so
+      // no annotator has mounted yet) there is no controller for the camera:
+      // skip the resync gracefully -- the annotator syncs time on mount.
+      try {
+        const newCameraController = aggregateController.value.getController(camera);
+        updateTime({ frame: newCameraController.frame.value, flick: newCameraController.flick.value });
+      } catch {
+        // No controller registered for this camera (yet); nothing to resync.
+      }
       /**
        * Enters edit mode if no track exists for the camera and forcing edit mode
        * or if a track exists and are alrady in edit mode we don't set it again
@@ -1009,7 +1092,20 @@ export default defineComponent({
       if (!track) {
         return false;
       }
-      return track.getFeature(aggregateController.value.frame.value)[0] == null;
+      // Must use selectedCamera's own local frame, not aggregateController's
+      // frame: under an aligned timeline (SEAL feature 5) the aggregate frame
+      // is the global slot index, which diverges from any camera's local
+      // frame -- and getFeature() is keyed by local frame, same as tracks are
+      // stored. See LayerManager.vue's identically-named helper.
+      let cameraFrame: number;
+      try {
+        cameraFrame = aggregateController.value.getController(selectedCamera.value).frame.value;
+      } catch {
+        // This camera's annotator never mounted (e.g. mid load/reload); fall
+        // back to the aggregate frame rather than throwing.
+        cameraFrame = aggregateController.value.frame.value;
+      }
+      return track.getFeature(cameraFrame)[0] == null;
     };
     // While editing, the creation cursor is live on any camera still missing
     // the selected track's geometry at this frame (see LayerManager's
@@ -1139,6 +1235,16 @@ export default defineComponent({
           frameRate: meta.fps,
           originalFps: meta.originalFps || null,
         });
+        // Rebuild imageData with exactly this dataset's cameras, dropping the
+        // initial 'singleCam' placeholder (on multicam datasets) and any
+        // previous dataset's leftovers. A stale empty entry would make
+        // alignedTimeline's canAlign() disqualify the dataset. Replacing the
+        // whole object (rather than adding keys with bracket assignment,
+        // which is non-reactive for new keys under Vue 2.7) also keeps the
+        // alignedTimeline computed and the template reactive to these keys.
+        imageData.value = Object.fromEntries(
+          multiCamList.value.map((camera) => [camera, [] as FrameImage[]]),
+        );
         for (let i = 0; i < multiCamList.value.length; i += 1) {
           const camera = multiCamList.value[i];
           let cameraId = baseMulticamDatasetId.value;
@@ -1452,8 +1558,13 @@ export default defineComponent({
     ));
 
     function seekToFrame(frame: number) {
+      // `frame` arrives in the selected camera's own local frame space (track
+      // begin/end from TrackItem/TrackList/TrackDetailsPanel, keyframe
+      // navigation, BottomPanel...). Under an aligned timeline (SEAL feature
+      // 5) the aggregate seek() expects a global slot index, so translate via
+      // seekCameraFrame -- a passthrough when alignment isn't active.
       try {
-        aggregateController.value.seek(frame);
+        aggregateController.value.seekCameraFrame(selectedCamera.value, frame);
       } catch {
         // Ignore seek requests while controllers are initializing.
       }
@@ -1699,7 +1810,7 @@ export default defineComponent({
       save,
       saveThreshold,
       saveTimeFilter,
-      updateTime,
+      selectedCameraUpdateTime,
       // multicam
       multiCamList,
       defaultCamera,
@@ -2018,7 +2129,7 @@ export default defineComponent({
                 v-bind="{
                   imageData: imageData[camera],
                   videoUrl: videoUrl[camera],
-                  updateTime,
+                  updateTime: selectedCameraUpdateTime(camera),
                   frameRate,
                   originalFps,
                   camera,
@@ -2115,7 +2226,7 @@ export default defineComponent({
                 v-bind="{
                   imageData: imageData[camera],
                   videoUrl: videoUrl[camera],
-                  updateTime,
+                  updateTime: selectedCameraUpdateTime(camera),
                   frameRate,
                   originalFps,
                   camera,
diff --git a/client/dive-common/frameTimestamp.spec.ts b/client/dive-common/frameTimestamp.spec.ts
new file mode 100644
index 000000000..dd9457e6e
--- /dev/null
+++ b/client/dive-common/frameTimestamp.spec.ts
@@ -0,0 +1,55 @@
+import type { FrameImage } from 'dive-common/apispec';
+import { attachFrameTimestamps, parseFrameTimestamp } from 'dive-common/frameTimestamp';
+
+describe('parseFrameTimestamp', () => {
+  it('parses a YYYYMMDD_HHMMSS datestamp', () => {
+    expect(parseFrameTimestamp('left_20230615_143022.png')).toBe(1686839422);
+  });
+
+  it('parses a real KAMERA filename with microsecond precision', () => {
+    // Confirmed convention from real sample data (data/test_data).
+    expect(parseFrameTimestamp('kamera_calibration_fl02_C_20240407_130757.206341_ir.tif'))
+      .toBeCloseTo(1712495277.206341, 6);
+  });
+
+  it('parses a datestamp with a fractional-second suffix', () => {
+    expect(parseFrameTimestamp('left_20230615_143022.500.png')).toBe(1686839422.5);
+  });
+
+  it('parses a bare epoch-milliseconds filename', () => {
+    expect(parseFrameTimestamp('img_1719843225123.tif')).toBeCloseTo(1719843225.123, 6);
+  });
+
+  it('parses a bare epoch-seconds filename', () => {
+    expect(parseFrameTimestamp('img_1719843225.tif')).toBe(1719843225);
+  });
+
+  it('returns undefined for a plain sequential filename', () => {
+    expect(parseFrameTimestamp('img_00001.png')).toBeUndefined();
+  });
+
+  it('returns undefined for a short frame-counter filename', () => {
+    expect(parseFrameTimestamp('frame042.tif')).toBeUndefined();
+  });
+
+  it('returns undefined for an implausible-range digit run', () => {
+    expect(parseFrameTimestamp('img_0000000001.png')).toBeUndefined();
+  });
+
+  it('is extension-agnostic (same stem, different extension)', () => {
+    expect(parseFrameTimestamp('left_20230615_143022.tif'))
+      .toBe(parseFrameTimestamp('left_20230615_143022.png'));
+  });
+});
+
+describe('attachFrameTimestamps', () => {
+  it('populates timestamp in place from each frame filename', () => {
+    const frames: FrameImage[] = [
+      { url: 'a', filename: 'left_20230615_143022.png' },
+      { url: 'b', filename: 'img_00001.png' },
+    ];
+    attachFrameTimestamps(frames);
+    expect(frames[0].timestamp).toBe(1686839422);
+    expect(frames[1].timestamp).toBeUndefined();
+  });
+});
diff --git a/client/dive-common/frameTimestamp.ts b/client/dive-common/frameTimestamp.ts
new file mode 100644
index 000000000..b5a3bbda0
--- /dev/null
+++ b/client/dive-common/frameTimestamp.ts
@@ -0,0 +1,104 @@
+import type { FrameImage } from 'dive-common/apispec';
+
+/**
+ * Single source of truth for parsing a frame's capture timestamp out of its
+ * filename (SEAL feature 5). Used by both platforms -- the desktop backend
+ * (platform/desktop/backend/native) when enumerating local media, and the
+ * web-girder API layer (platform/web-girder/api) after fetching media from
+ * girder -- so there is exactly one implementation to maintain.
+ */
+
+interface FrameTimestampPattern {
+  name: string;
+  regex: RegExp;
+  toSeconds: (match: RegExpMatchArray) => number | undefined;
+}
+
+/* Roughly year 2000 to year 2100, used to reject implausible epoch candidates */
+function isPlausibleEpochSeconds(seconds: number): boolean {
+  return seconds >= 946684800 && seconds <= 4102444800;
+}
+
+function dateStampToSeconds(match: RegExpMatchArray): number | undefined {
+  const [, y, mo, d, h, mi, s, frac] = match;
+  const year = Number(y);
+  const month = Number(mo);
+  const day = Number(d);
+  const hour = Number(h);
+  const minute = Number(mi);
+  const second = Number(s);
+  if (month < 1 || month > 12) return undefined;
+  if (day < 1 || day > 31) return undefined;
+  if (hour > 23 || minute > 59 || second > 59) return undefined;
+  const millis = Date.UTC(year, month - 1, day, hour, minute, second);
+  const fracSeconds = frac ? Number(`0.${frac}`) : 0;
+  return millis / 1000 + fracSeconds;
+}
+
+/*
+ * Parses a frame timestamp from a filename using a small ordered list of
+ * conventions. The primary convention is KAMERA's, confirmed against sample
+ * data (see the datestamp entry); the epoch-based patterns are fallbacks for
+ * other capture systems. Each entry is tried in order against the
+ * extension-stripped filename stem; the first regex that matches AND passes its
+ * own plausibility check wins.
+ */
+const FRAME_TIMESTAMP_PATTERNS: FrameTimestampPattern[] = [
+  {
+    // KAMERA convention: YYYYMMDD[_-]HHMMSS with an optional fractional-second
+    // suffix, e.g. kamera_calibration_fl02_C_20240407_130757.206341_ir.tif
+    name: 'datestamp',
+    regex: /(?<!\d)(\d{4})(\d{2})(\d{2})[_-]?(\d{2})(\d{2})(\d{2})(?:[.,](\d{1,6}))?(?!\d)/,
+    toSeconds: dateStampToSeconds,
+  },
+  {
+    // bare epoch milliseconds, e.g. img_1719843225123.tif
+    name: 'epoch-millis',
+    regex: /(?<!\d)(\d{13})(?!\d)/,
+    toSeconds: (match) => {
+      const seconds = Number(match[1]) / 1000;
+      return isPlausibleEpochSeconds(seconds) ? seconds : undefined;
+    },
+  },
+  {
+    // bare epoch seconds, e.g. img_1719843225.tif
+    name: 'epoch-seconds',
+    regex: /(?<!\d)(\d{10})(?!\d)/,
+    toSeconds: (match) => {
+      const seconds = Number(match[1]);
+      return isPlausibleEpochSeconds(seconds) ? seconds : undefined;
+    },
+  },
+];
+
+/**
+ * Frame capture timestamp, in epoch seconds, parsed from a filename. Returns
+ * undefined (never throws) when no recognized convention matches; callers must
+ * treat that as "no timestamp available".
+ */
+export function parseFrameTimestamp(filename: string): number | undefined {
+  const stem = filename.replace(/\.[^./\\]+$/, '');
+  for (let i = 0; i < FRAME_TIMESTAMP_PATTERNS.length; i += 1) {
+    const { regex, toSeconds } = FRAME_TIMESTAMP_PATTERNS[i];
+    const match = stem.match(regex);
+    if (match) {
+      const seconds = toSeconds(match);
+      if (seconds !== undefined) {
+        return seconds;
+      }
+    }
+  }
+  return undefined;
+}
+
+/**
+ * Populates `timestamp` on each frame in place from its filename. Convenience
+ * for the web-girder API layer, which receives frames without timestamps and
+ * parses them client-side (the girder server no longer does this).
+ */
+export function attachFrameTimestamps(frames: FrameImage[]): void {
+  frames.forEach((frame) => {
+    // eslint-disable-next-line no-param-reassign
+    frame.timestamp = parseFrameTimestamp(frame.filename);
+  });
+}
diff --git a/client/dive-common/use/useModeManager.ts b/client/dive-common/use/useModeManager.ts
index ad322c869..45e8813fa 100644
--- a/client/dive-common/use/useModeManager.ts
+++ b/client/dive-common/use/useModeManager.ts
@@ -129,6 +129,26 @@ export default function useModeManager({
   const groupSettings = toRef(clientSettings, 'groupSettings');
   const selectedCamera = ref('singleCam');
 
+  /**
+   * The currently selected camera's own local frame number. Under an aligned
+   * timeline (SEAL feature 5), aggregateController.value.frame is the global
+   * slot index, which diverges from any camera's local frame -- but tracks
+   * are stored/keyed by local frame. Every read/write below that keys track
+   * storage for selectedCamera must go through this, not aggregateController
+   * directly. See LayerManager.vue and Viewer.vue's isCreatingNewDetection
+   * for the identical pattern elsewhere.
+   */
+  function selectedCameraFrame(): number {
+    try {
+      return aggregateController.value.getController(selectedCamera.value).frame.value;
+    } catch {
+      // No controller registered for the selected camera (e.g. its annotator
+      // hasn't mounted yet during load/reload); fall back to the aggregate
+      // frame rather than throwing.
+      return aggregateController.value.frame.value;
+    }
+  }
+
   const linkingState = ref(false);
   const linkingTrack: Ref<AnnotationId| null> = ref(null);
   const linkingCamera = ref('');
@@ -235,11 +255,11 @@ export default function useModeManager({
   const editingDetails = computed(() => {
     _depend();
     if (editingMode.value && selectedTrackId.value !== null) {
-      const { frame } = aggregateController.value;
+      const frame = selectedCameraFrame();
       try {
         const track = cameraStore.getPossibleTrack(selectedTrackId.value, selectedCamera.value);
         if (track) {
-          const [feature] = track.getFeature(frame.value);
+          const [feature] = track.getFeature(frame);
           if (feature) {
             if (!feature?.bounds?.length) {
               return 'Creating';
@@ -285,17 +305,28 @@ export default function useModeManager({
   }
 
   function seekNearest(track: Track) {
-    // Seek to the nearest point in the track.
-    const { frame } = aggregateController.value;
-    if (frame.value < track.begin) {
-      aggregateController.value.seek(track.begin);
-    } else if (frame.value > track.end) {
-      aggregateController.value.seek(track.end);
+    // Seek to the nearest point in the track. Compares/seeks using
+    // selectedCamera's own local frame (see selectedCameraFrame) rather than
+    // aggregateController.frame directly -- under an aligned timeline (SEAL
+    // feature 5) that's the global slot index, a different number space than
+    // track.begin/end. seekCameraFrame translates back through the timeline
+    // so every camera stays aligned; it's a no-op passthrough when alignment
+    // isn't active.
+    const frame = selectedCameraFrame();
+    if (frame < track.begin) {
+      aggregateController.value.seekCameraFrame(selectedCamera.value, track.begin);
+    } else if (frame > track.end) {
+      aggregateController.value.seekCameraFrame(selectedCamera.value, track.end);
     }
   }
 
+  // frame is selectedCamera's own local frame (e.g. FilterList.vue's
+  // "jump to peak frame" derives it from selectedCamera's own trackStore) --
+  // route through seekCameraFrame so this still lands correctly under an
+  // aligned timeline (SEAL feature 5), where local and global frame numbers
+  // can diverge.
   function seekFrame(frame: number) {
-    aggregateController.value.seek(frame);
+    aggregateController.value.seekCameraFrame(selectedCamera.value, frame);
   }
 
   async function _setLinkingTrack(trackId: TrackId) {
@@ -472,7 +503,7 @@ export default function useModeManager({
     }
     // Handles adding a new track with the NewTrack Settings
     handleEscapeMode();
-    const { frame } = aggregateController.value;
+    const frame = selectedCameraFrame();
     let trackType = trackSettings.value.newTrackSettings.type;
     if (overrideTrackId !== undefined) {
       const track = cameraStore.getAnyPossibleTrack(overrideTrackId);
@@ -487,7 +518,7 @@ export default function useModeManager({
     const trackStore = cameraStore.camMap.value.get(selectedCamera.value)?.trackStore;
     if (trackStore) {
       const newTrackId = trackStore.add(
-        frame.value,
+        frame,
         trackType,
         selectedTrackId.value || undefined,
         overrideTrackId,
@@ -793,9 +824,8 @@ export default function useModeManager({
       if (track) {
         recipes.forEach((r) => {
           if (r.active.value) {
-            const { frame } = aggregateController.value;
             r.deletePoint(
-              frame.value,
+              selectedCameraFrame(),
               track,
               selectedFeatureHandle.value,
               selectedKey.value,
@@ -813,8 +843,7 @@ export default function useModeManager({
     if (selectedTrackId.value !== null) {
       const track = cameraStore.getPossibleTrack(selectedTrackId.value, selectedCamera.value);
       if (track) {
-        const { frame } = aggregateController.value;
-        const frameNum = frame.value;
+        const frameNum = selectedCameraFrame();
         recipes.forEach((r) => {
           if (r.active.value) {
             r.delete(frameNum, track, selectedKey.value, annotationModes.editing);
@@ -927,8 +956,7 @@ export default function useModeManager({
       // When in LineString mode, set the selected key so EditAnnotationLayer
       // can find the geometry (lines are stored with a recipe key like 'HeadTails').
       if (editing) {
-        const { frame } = aggregateController.value;
-        const [feature] = track.getFeature(frame.value);
+        const [feature] = track.getFeature(selectedCameraFrame());
         if (feature?.geometry?.features?.length) {
           if (annotationModes.editing === 'LineString') {
             const lineFeature = feature.geometry.features.find(
@@ -1218,7 +1246,6 @@ export default function useModeManager({
       return;
     }
 
-    const { frame } = aggregateController.value;
     const track = cameraStore.getPossibleTrack(selectedTrackId.value, selectedCamera.value);
     if (!track) {
       return;
@@ -1252,7 +1279,7 @@ export default function useModeManager({
 
       // Update the track's feature with the preview polygon
       // Use frame number from the result if provided, otherwise current frame
-      const targetFrame = result.frameNum ?? frame.value;
+      const targetFrame = result.frameNum ?? selectedCameraFrame();
       const { interpolate } = track.canInterpolate(targetFrame);
 
       // Save original feature state before first prediction modifies the track
@@ -1509,8 +1536,7 @@ export default function useModeManager({
     if (polygonRecipe && 'setAddingPolygon' in polygonRecipe) {
       const track = cameraStore.getPossibleTrack(selectedTrackId.value, selectedCamera.value);
       if (track) {
-        const { frame } = aggregateController.value;
-        const newKey = track.getNextPolygonKey(frame.value);
+        const newKey = track.getNextPolygonKey(selectedCameraFrame());
         (polygonRecipe as { setAddingPolygon: (key: string) => void }).setAddingPolygon(newKey);
       }
     }
diff --git a/client/platform/desktop/backend/native/common.spec.ts b/client/platform/desktop/backend/native/common.spec.ts
index 4598d323c..828acab62 100644
--- a/client/platform/desktop/backend/native/common.spec.ts
+++ b/client/platform/desktop/backend/native/common.spec.ts
@@ -294,7 +294,7 @@ beforeEach(() => {
             fps: 5,
             originalBasePath: '/home/user/media/projectid1data',
             originalImageFiles: [
-              'foo.png',
+              'foo_20230615_143022.png',
               'bar.png',
             ],
           } as JsonMeta),
@@ -342,14 +342,17 @@ beforeEach(() => {
           'meta.json': JSON.stringify({
             type: 'multi',
             multiCam: {
+              defaultDisplay: 'left',
               cameras: {
                 left: {
                   type: 'image-sequence',
                   originalBasePath: '/home/user/viamedata/DIVE_Projects/stereoDataset/left',
+                  originalImageFiles: ['left_20230615_143022.png', 'left_00002.png'],
                 },
                 right: {
                   type: 'image-sequence',
                   originalBasePath: '/home/user/viamedata/DIVE_Projects/stereoDataset/right',
+                  originalImageFiles: ['right_00001.png', 'right_00002.png'],
                 },
               },
             },
@@ -453,7 +456,21 @@ describe('native.common', () => {
     const data = await common.loadMetadata(settings, 'projectid1', urlMapper);
     expect(data.id).toBe('projectid1');
     expect(data.imageData.map(({ filename }) => filename)).toEqual([
-      'foo.png', 'bar.png',
+      'foo_20230615_143022.png', 'bar.png',
+    ]);
+    expect(data.imageData[0].timestamp).toBe(1686839422);
+    expect(data.imageData[1].timestamp).toBeUndefined();
+  });
+
+  it('loadJsonMetadata parses per-camera frame timestamps for multicam datasets', async () => {
+    const data = await common.loadMetadata(settings, 'stereoDataset', urlMapper);
+    expect(data.multiCamMedia).not.toBeNull();
+    const { cameras } = data.multiCamMedia!;
+    expect(cameras.left.imageData.map(({ timestamp }) => timestamp)).toEqual([
+      1686839422, undefined,
+    ]);
+    expect(cameras.right.imageData.map(({ timestamp }) => timestamp)).toEqual([
+      undefined, undefined,
     ]);
   });
 
diff --git a/client/platform/desktop/backend/native/common.ts b/client/platform/desktop/backend/native/common.ts
index 5973c13cd..0c890ba03 100644
--- a/client/platform/desktop/backend/native/common.ts
+++ b/client/platform/desktop/backend/native/common.ts
@@ -56,6 +56,7 @@ import {
 import {
   cleanString, filterByGlob, makeid, strNumericCompare,
 } from 'platform/desktop/sharedUtils';
+import { parseFrameTimestamp } from 'dive-common/frameTimestamp';
 
 import processTrackAttributes from './attributeProcessor';
 import { upgrade } from './migrations';
@@ -404,13 +405,16 @@ async function loadMetadata(
       imageData = projectMetaData.transcodedImageFiles.map((filename: string) => ({
         url: makeMediaUrl(npath.join(projectDirData.basePath, filename)),
         filename,
+        timestamp: parseFrameTimestamp(filename),
       }));
     } else {
       imageData = projectMetaData.originalImageFiles.map((pathOrFilename: string) => {
         const absPath = npath.join(projectMetaData.originalBasePath, pathOrFilename);
+        const filename = npath.basename(absPath);
         return {
           url: makeMediaUrl(absPath),
-          filename: npath.basename(absPath),
+          filename,
+          timestamp: parseFrameTimestamp(filename),
         };
       });
     }
diff --git a/client/platform/desktop/backend/native/multiCamUtils.ts b/client/platform/desktop/backend/native/multiCamUtils.ts
index 00dc796ce..f6ccf7b5d 100644
--- a/client/platform/desktop/backend/native/multiCamUtils.ts
+++ b/client/platform/desktop/backend/native/multiCamUtils.ts
@@ -10,6 +10,7 @@ import { JsonMeta, Settings } from 'platform/desktop/constants';
 // eslint-disable-next-line import/no-cycle
 import { loadAnnotationFile, loadJsonMetadata, getValidatedProjectDir } from 'platform/desktop/backend/native/common';
 import { serialize } from 'platform/desktop/backend/serializers/viame';
+import { parseFrameTimestamp } from 'dive-common/frameTimestamp';
 
 /**
  * Figure out the destination location
@@ -171,6 +172,7 @@ function getMultiCamUrls(
         imageData = displayFilenames.map((filename: string) => ({
           url: makeMediaUrl(npath.join(originalBasePath, filename)),
           filename,
+          timestamp: parseFrameTimestamp(filename),
         }));
       } else if (value.type === 'video') {
         let displayFilename = value.originalVideoFile;
diff --git a/client/platform/web-girder/api/dataset.service.ts b/client/platform/web-girder/api/dataset.service.ts
index 55a44f3a4..3c632850a 100644
--- a/client/platform/web-girder/api/dataset.service.ts
+++ b/client/platform/web-girder/api/dataset.service.ts
@@ -4,6 +4,7 @@ import {
   DatasetMetaMutable, FrameImage, SaveAttributeArgs, SaveAttributeTrackFilterArgs,
 } from 'dive-common/apispec';
 import { calibrationFileMarker, jsonCalibrationFileMarker } from 'dive-common/constants';
+import { attachFrameTimestamps } from 'dive-common/frameTimestamp';
 import { parentDatasetId } from 'dive-common/compositeDatasetId';
 import { isStereoCalibrationFileName } from 'dive-common/stereoParentFolder';
 import { GirderMetadataStatic } from 'platform/web-girder/constants';
@@ -21,6 +22,12 @@ async function getDataset(datasetId: string) {
   if (compositeId) {
     response.data.id = compositeId;
   }
+  // Parse per-frame capture timestamps client-side (single shared implementation
+  // with desktop; see dive-common/frameTimestamp.ts). The girder server no longer
+  // does this, so multicam per-camera frames arrive without timestamps.
+  Object.values(response.data.multiCamMedia?.cameras ?? {}).forEach(
+    (camera) => attachFrameTimestamps(camera.imageData),
+  );
   return response;
 }
 
@@ -61,7 +68,10 @@ export interface DatasetSourceMedia {
 
 async function getDatasetMedia(datasetId: string) {
   const { folderId } = await resolveDatasetFolderId(datasetId);
-  return girderRest.get<DatasetSourceMedia>(`dive_dataset/${folderId}/media`);
+  const response = await girderRest.get<DatasetSourceMedia>(`dive_dataset/${folderId}/media`);
+  // Parse per-frame capture timestamps client-side (see getDataset above).
+  attachFrameTimestamps(response.data.imageData ?? []);
+  return response;
 }
 
 function clone({
diff --git a/client/src/components/LayerManager.vue b/client/src/components/LayerManager.vue
index 2e6456844..376ef45cc 100644
--- a/client/src/components/LayerManager.vue
+++ b/client/src/components/LayerManager.vue
@@ -105,6 +105,7 @@ export default defineComponent({
     const annotator = aggregateController.value.getController(props.camera);
     const frameNumberRef = annotator.frame;
     const flickNumberRef = annotator.flick;
+    const hasFrameRef = annotator.hasFrame;
 
     const rectAnnotationLayer = new RectangleLayer({
       annotator,
@@ -454,11 +455,34 @@ export default defineComponent({
     }
 
     /**
-     * TODO: for some reason, GeoJS requires us to initialize
-     * by calling the render function twice.  This is a bug.
-     * https://github.com/Kitware/dive/issues/365
+     * Disables every annotation/edit layer without touching stored track
+     * data. Used when this camera has no frame at the current aligned-
+     * timeline slot (hasFrameRef false) -- frameNumberRef still holds the
+     * last real local frame, so leaving the layers as-is would draw stale
+     * boxes over a blank pane.
      */
-    [1, 2].forEach(() => {
+    function disableAllLayers() {
+      rectAnnotationLayer.disable();
+      overlapLayer.disable();
+      polyAnnotationLayer.disable();
+      lineLayer.disable();
+      pointLayer.disable();
+      tailLayer.disable();
+      textLayer.disable();
+      attributeLayer.disable();
+      attributeBoxLayer.disable();
+      editAnnotationLayer.disable();
+      segmentationPointsLayer.clear();
+      hoverOvered.value = [];
+      uiLayer.setToolTipWidget('customToolTip', false);
+    }
+
+    /** Re-runs updateLayers with current ref values, or blanks the layers when this camera has no frame at the current aligned-timeline slot. */
+    function refreshLayers() {
+      if (!hasFrameRef.value) {
+        disableAllLayers();
+        return;
+      }
       updateLayers(
         frameNumberRef.value,
         editingModeRef.value,
@@ -469,6 +493,17 @@ export default defineComponent({
         selectedKeyRef.value,
         props.colorBy,
       );
+    }
+
+    watch(hasFrameRef, () => refreshLayers());
+
+    /**
+     * TODO: for some reason, GeoJS requires us to initialize
+     * by calling the render function twice.  This is a bug.
+     * https://github.com/Kitware/dive/issues/365
+     */
+    [1, 2].forEach(() => {
+      refreshLayers();
     });
 
     /** Shallow watch */
@@ -486,16 +521,7 @@ export default defineComponent({
         selectedKeyRef,
       ],
       () => {
-        updateLayers(
-          frameNumberRef.value,
-          editingModeRef.value,
-          selectedTrackIdRef.value,
-          multiSeletListRef.value,
-          enabledTracksRef.value,
-          visibleModesRef.value,
-          selectedKeyRef.value,
-          props.colorBy,
-        );
+        refreshLayers();
       },
     );
 
@@ -503,32 +529,14 @@ export default defineComponent({
     watch(
       annotatorPrefs,
       () => {
-        updateLayers(
-          frameNumberRef.value,
-          editingModeRef.value,
-          selectedTrackIdRef.value,
-          multiSeletListRef.value,
-          enabledTracksRef.value,
-          visibleModesRef.value,
-          selectedKeyRef.value,
-          props.colorBy,
-        );
+        refreshLayers();
       },
       { deep: true },
     );
 
     watch(attributes, () => {
       updateAttributes();
-      updateLayers(
-        frameNumberRef.value,
-        editingModeRef.value,
-        selectedTrackIdRef.value,
-        multiSeletListRef.value,
-        enabledTracksRef.value,
-        visibleModesRef.value,
-        selectedKeyRef.value,
-        props.colorBy,
-      );
+      refreshLayers();
     });
 
     /** Watch for resize events to redraw layers after view mode changes */
@@ -655,16 +663,7 @@ export default defineComponent({
       // This is especially important when already editing the same track
       // since annotation-right-clicked won't be emitted in that case
       window.setTimeout(() => {
-        updateLayers(
-          frameNumberRef.value,
-          editingModeRef.value,
-          selectedTrackIdRef.value,
-          multiSeletListRef.value,
-          enabledTracksRef.value,
-          visibleModesRef.value,
-          selectedKeyRef.value,
-          props.colorBy,
-        );
+        refreshLayers();
       }, 0);
     });
     polyAnnotationLayer.bus.$on('annotation-ctrl-clicked', Clicked);
@@ -681,16 +680,7 @@ export default defineComponent({
       // Force layer update to load the newly selected polygon
       // Use nextTick to ensure the selectedKey ref has been updated
       window.setTimeout(() => {
-        updateLayers(
-          frameNumberRef.value,
-          editingModeRef.value,
-          selectedTrackIdRef.value,
-          multiSeletListRef.value,
-          enabledTracksRef.value,
-          visibleModesRef.value,
-          selectedKeyRef.value,
-          props.colorBy,
-        );
+        refreshLayers();
       }, 0);
     });
     // Handle right-click outside polygons to finalize/cancel creation
@@ -700,16 +690,7 @@ export default defineComponent({
         handler.cancelCreation();
         handler.selectFeatureHandle(-1, '');
         window.setTimeout(() => {
-          updateLayers(
-            frameNumberRef.value,
-            editingModeRef.value,
-            selectedTrackIdRef.value,
-            multiSeletListRef.value,
-            enabledTracksRef.value,
-            visibleModesRef.value,
-            selectedKeyRef.value,
-            props.colorBy,
-          );
+          refreshLayers();
         }, 0);
       }
     });
@@ -780,16 +761,7 @@ export default defineComponent({
         // Suppress the select that rides along with this same finalizing click.
         justFinalizedCreation = true;
         window.setTimeout(() => { justFinalizedCreation = false; }, 0);
-        updateLayers(
-          frameNumberRef.value,
-          editingModeRef.value,
-          selectedTrackIdRef.value,
-          multiSeletListRef.value,
-          enabledTracksRef.value,
-          visibleModesRef.value,
-          selectedKeyRef.value,
-          props.colorBy,
-        );
+        refreshLayers();
       }
     });
     editAnnotationLayer.bus.$on(
@@ -834,16 +806,7 @@ export default defineComponent({
         handler.selectFeatureHandle(-1, polygonKey);
         // Force layer update to load the newly selected polygon
         window.setTimeout(() => {
-          updateLayers(
-            frameNumberRef.value,
-            editingModeRef.value,
-            selectedTrackIdRef.value,
-            multiSeletListRef.value,
-            enabledTracksRef.value,
-            visibleModesRef.value,
-            selectedKeyRef.value,
-            props.colorBy,
-          );
+          refreshLayers();
         }, 0);
       }
     });
diff --git a/client/src/components/annotators/ImageAnnotator.vue b/client/src/components/annotators/ImageAnnotator.vue
index 08b57f09b..2d8f414a9 100644
--- a/client/src/components/annotators/ImageAnnotator.vue
+++ b/client/src/components/annotators/ImageAnnotator.vue
@@ -76,6 +76,7 @@ export default defineComponent({
       container,
       initializeViewer,
       mediaController,
+      externallyDriven,
     } = cameraInitializer(props.camera, {
       // allow hoisting for these functions to pass a reference before defining them.
       // eslint-disable-next-line @typescript-eslint/no-use-before-define
@@ -236,10 +237,27 @@ export default defineComponent({
         cacheNewRange(min, max);
       }
     }
-    async function seek(f: number) {
+    async function seek(f: number | undefined) {
       if (!data.ready) {
         return;
       }
+      if (f === undefined) {
+        // No frame for this camera at the current aligned-timeline slot: blank
+        // the pane. Deliberately leaves data.frame/data.filename untouched --
+        // those are read elsewhere (e.g. annotation-overlay lookups) and this
+        // phase doesn't touch annotation storage.
+        data.hasFrame = false;
+        if (local.quadFeature !== undefined) {
+          local.quadFeature.layer().node().css('visibility', 'hidden');
+        }
+        return;
+      }
+      if (!data.hasFrame) {
+        data.hasFrame = true;
+        if (local.quadFeature !== undefined) {
+          local.quadFeature.layer().node().css('visibility', '');
+        }
+      }
       let newFrame = f;
       if (f < 0) newFrame = 0;
       if (f > data.maxFrame) newFrame = data.maxFrame;
@@ -317,7 +335,12 @@ export default defineComponent({
     async function play() {
       try {
         data.playing = true;
-        syncWithVideo(data.frame + 1);
+        // When a global aligned timeline is driving playback, the aggregate
+        // controller's own centralized tick calls seek() directly -- this
+        // camera must not also free-run its own loop.
+        if (!externallyDriven.value) {
+          syncWithVideo(data.frame + 1);
+        }
         props.updateTime(data);
       } catch (ex) {
         console.error(ex);
@@ -538,6 +561,12 @@ export default defineComponent({
           Loading
         </v-progress-circular>
       </div>
+      <div
+        v-if="data.ready && !data.hasFrame"
+        class="no-frame-overlay"
+      >
+        No frame at this instant
+      </div>
     </div>
     <slot v-if="data.ready" />
   </div>
diff --git a/client/src/components/annotators/VideoAnnotator.vue b/client/src/components/annotators/VideoAnnotator.vue
index 0517f6ce4..aea42d6e3 100644
--- a/client/src/components/annotators/VideoAnnotator.vue
+++ b/client/src/components/annotators/VideoAnnotator.vue
@@ -121,6 +121,7 @@ export default defineComponent({
       container,
       initializeViewer,
       mediaController,
+      externallyDriven,
     } = cameraInitializer(props.camera, {
       // allow hoisting for these functions.
       // eslint-disable-next-line @typescript-eslint/no-use-before-define
@@ -148,7 +149,26 @@ export default defineComponent({
         video.pause();
       }
     });
-    async function seek(frame: number) {
+    async function seek(frame: number | undefined) {
+      if (frame === undefined) {
+        // No frame for this camera at the current aligned-timeline slot: blank
+        // the pane. Leaves data.frame untouched -- it's read elsewhere (e.g.
+        // annotation-overlay lookups) and this phase doesn't touch annotation
+        // storage. In practice unreachable today since a video-backed camera
+        // (empty imageData) always disqualifies the whole dataset from aligned
+        // mode (see alignedTimeline.ts's canAlign) -- kept for symmetry/safety.
+        data.hasFrame = false;
+        if (quadFeatureLayer !== undefined) {
+          quadFeatureLayer.node().css('visibility', 'hidden');
+        }
+        return;
+      }
+      if (!data.hasFrame) {
+        data.hasFrame = true;
+        if (quadFeatureLayer !== undefined) {
+          quadFeatureLayer.node().css('visibility', '');
+        }
+      }
       /** Only perform seek for whole frame numbers */
       const requestedFrame = Math.round(frame);
       /** Different seek approaches based on known information */
@@ -191,7 +211,12 @@ export default defineComponent({
         await video.play();
         data.playing = true;
         props.updateTime(data);
-        syncWithVideo();
+        // When a global aligned timeline is driving playback, the aggregate
+        // controller's own centralized tick calls seek() directly -- this
+        // camera must not also free-run its own loop.
+        if (!externallyDriven.value) {
+          syncWithVideo();
+        }
       } catch (ex) {
         console.error(ex);
       }
@@ -367,6 +392,12 @@ export default defineComponent({
       @mouseleave="cursorHandler.handleMouseLeave"
       @mouseover="cursorHandler.handleMouseEnter"
     />
+    <div
+      v-if="data.ready && !data.hasFrame"
+      class="no-frame-overlay"
+    >
+      No frame at this instant
+    </div>
     <slot name="control" />
     <slot v-if="data.ready" />
   </div>
diff --git a/client/src/components/annotators/annotator.scss b/client/src/components/annotators/annotator.scss
index 1abfa8229..363717153 100644
--- a/client/src/components/annotators/annotator.scss
+++ b/client/src/components/annotators/annotator.scss
@@ -37,6 +37,19 @@
   .geojs-map.annotation-input {
     cursor: inherit;
   }
+  .no-frame-overlay {
+    z-index: 20;
+    margin: 0;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    padding: 8px 16px;
+    background: rgba(0, 0, 0, 0.6);
+    color: white;
+    border-radius: 4px;
+    pointer-events: none;
+  }
 }
 
 .selected-camera{
diff --git a/client/src/components/annotators/mediaControllerType.ts b/client/src/components/annotators/mediaControllerType.ts
index 27a955ef1..ece6d1d12 100644
--- a/client/src/components/annotators/mediaControllerType.ts
+++ b/client/src/components/annotators/mediaControllerType.ts
@@ -1,5 +1,33 @@
 import type { Ref } from 'vue';
 
+/**
+ * Supplied by Viewer.vue when every camera in a multicam dataset has a
+ * timestamp on every frame (see dive-common/alignedTimeline.ts). Translates
+ * a global aligned-timeline slot into each camera's own local frame index,
+ * or undefined for a camera with no frame at that slot. Absent (null)
+ * whenever alignment isn't possible/applicable -- including always for
+ * single-camera datasets -- in which case playback falls back to today's
+ * exact positional (broadcast-same-index) behavior.
+ */
+export interface AlignedFrameResolver {
+  slotCount: Readonly<Ref<number>>;
+  frameRate: Readonly<Ref<number>>;
+  resolveSlot: (globalFrame: number) => Record<string, number | undefined>;
+  /**
+   * Inverse of resolveSlot (see dive-common/alignedTimeline.ts's
+   * buildInverseAlignedIndex): given a camera and its own local frame,
+   * returns the global aligned-timeline slot it appears in, or undefined if
+   * that local frame isn't part of any slot.
+   */
+  resolveGlobalSlot: (camera: string, localFrame: number) => number | undefined;
+  /**
+   * Global slot indices where at least one camera has no frame (see
+   * dive-common/alignedTimeline.ts's computeGapSlots) -- used to render a
+   * gap indicator on the timeline scrubber.
+   */
+  gapSlots: Readonly<Ref<number[]>>;
+}
+
 /**
  * AggregateMediaController provides an interface for time and a few
  * other properties of all cameras in the annotator window.
@@ -17,6 +45,12 @@ export interface AggregateMediaController {
   cameraSync: Readonly<Ref<boolean>>;
   /** Incremented when the viewer is resized, used to trigger layer redraws */
   resizeTrigger: Readonly<Ref<number>>;
+  /**
+   * Global aligned-timeline slot indices with at least one camera missing a
+   * frame (see AlignedFrameResolver's gapSlots); empty whenever alignment
+   * isn't active.
+   */
+  alignedGapSlots: Readonly<Ref<number[]>>;
 
   pause: () => void;
   play: () => void;
@@ -28,6 +62,15 @@ export interface AggregateMediaController {
   setSpeed: (speed: number) => void;
   getController: (cameraName: string) => MediaController;
   toggleSynchronizeCameras: (sync: boolean) => void;
+  /**
+   * Seeks so that `camera` lands on its own local frame `localFrame` (e.g.
+   * jumping to a track's stored begin/end, which is in local-frame units).
+   * Under an aligned timeline (see AlignedFrameResolver) this translates
+   * through the global slot so every camera stays aligned; otherwise it's
+   * equivalent to seek(localFrame), since local and global frame numbers are
+   * identical under today's positional broadcast.
+   */
+  seekCameraFrame: (camera: string, localFrame: number) => void;
 }
 
 /**
@@ -43,6 +86,18 @@ export interface MediaController extends AggregateMediaController {
   geoViewerRef: Readonly<Ref<any>>;
   /** @deprecated may be removed in a future release */
   syncedFrame: Readonly<Ref<number>>;
+  /**
+   * False when an aligned-timeline slot has no frame for this camera (see
+   * AlignedFrameResolver) -- the pane is blank and LayerManager should not
+   * draw annotations for the stale `frame` value left over from before.
+   */
+  hasFrame: Readonly<Ref<boolean>>;
+  /**
+   * Per-camera seek accepts undefined when this camera has no frame at the
+   * current aligned-timeline slot (see AlignedFrameResolver) -- the camera
+   * should blank its pane rather than draw anything for that slot.
+   */
+  seek: (frame: number | undefined) => void;
 
   centerOn(coords: { x: number; y: number; z: number }): void;
   transition(coords: { x: number; y:number}, duration: number, zoom?: number): void;
diff --git a/client/src/components/annotators/useMediaController.spec.ts b/client/src/components/annotators/useMediaController.spec.ts
new file mode 100644
index 000000000..dd6d7f3a4
--- /dev/null
+++ b/client/src/components/annotators/useMediaController.spec.ts
@@ -0,0 +1,302 @@
+// @vitest-environment jsdom
+import { defineComponent, ref } from 'vue';
+// eslint-disable-next-line import/no-extraneous-dependencies -- @vue/test-utils is only used in tests
+import { mount } from '@vue/test-utils';
+import { useMediaController } from './useMediaController';
+import type { AlignedFrameResolver } from './mediaControllerType';
+
+function noop() { /* unused setVolume/setSpeed stub */ }
+
+/**
+ * useMediaController() calls Vue's provide(), so it needs a component setup()
+ * context. initialize() itself (unlike initializeViewer()) never touches
+ * GeoJS/DOM, so camera controllers can be registered directly here with
+ * mocked seek/play/pause -- no need to mount real annotator components.
+ */
+function mountMediaController() {
+  const seekA = vi.fn();
+  const playA = vi.fn();
+  const pauseA = vi.fn();
+  const seekB = vi.fn();
+  const playB = vi.fn();
+  const pauseB = vi.fn();
+
+  let composable!: ReturnType<typeof useMediaController>;
+
+  const Host = defineComponent({
+    setup() {
+      composable = useMediaController();
+      composable.initialize('A', {
+        seek: seekA, play: playA, pause: pauseA, setVolume: noop, setSpeed: noop,
+      });
+      composable.initialize('B', {
+        seek: seekB, play: playB, pause: pauseB, setVolume: noop, setSpeed: noop,
+      });
+      return {};
+    },
+    template: '<div />',
+  });
+
+  const wrapper = mount(Host);
+  return {
+    wrapper,
+    composable,
+    mocks: {
+      seekA, playA, pauseA, seekB, playB, pauseB,
+    },
+  };
+}
+
+/**
+ * Camera A is missing a frame at slot 1; camera B has one at every slot. A
+ * never reports local frame 1 at all in this mock (slot 1 has no A entry,
+ * and slot 2's A entry is local frame 2, not a shifted-down 1) -- so A's
+ * local frame space has a hole at 1, identical to the global slot space.
+ */
+function makeGappedResolver(slotCount = 3, frameRate = 2): AlignedFrameResolver {
+  return {
+    slotCount: ref(slotCount),
+    frameRate: ref(frameRate),
+    resolveSlot: (f: number) => ({
+      A: f === 1 ? undefined : f,
+      B: f,
+    }),
+    resolveGlobalSlot: (camera: string, localFrame: number) => {
+      if (camera === 'B') return localFrame;
+      if (camera === 'A') return (localFrame === 0 || localFrame === 2) ? localFrame : undefined;
+      return undefined;
+    },
+    gapSlots: ref([1]),
+  };
+}
+
+/**
+ * Camera A drops the frame at global slot 1, so unlike makeGappedResolver's
+ * A, its OWN frame array is contiguous: local frame 0 is slot 0, and local
+ * frame 1 (its very next captured frame) is slot 2 -- a realistic shift
+ * between local and global numbering, exercising the non-trivial direction
+ * of resolveGlobalSlot.
+ */
+function makeShiftedResolver(): AlignedFrameResolver {
+  // A's own frame array only has two entries: slot 0's frame, then slot 2's.
+  const aSlotForGlobalFrame: Record<number, number | undefined> = { 0: 0, 1: undefined, 2: 1 };
+  const aGlobalSlotForLocalFrame: Record<number, number | undefined> = { 0: 0, 1: 2 };
+  return {
+    slotCount: ref(3),
+    frameRate: ref(2),
+    resolveSlot: (f: number) => ({
+      A: aSlotForGlobalFrame[f],
+      B: f,
+    }),
+    resolveGlobalSlot: (camera: string, localFrame: number) => {
+      if (camera === 'B') return localFrame;
+      if (camera === 'A') return aGlobalSlotForLocalFrame[localFrame];
+      return undefined;
+    },
+    gapSlots: ref([1]),
+  };
+}
+
+describe('useMediaController', () => {
+  it('without a resolver, seek broadcasts the identical frame to every camera', () => {
+    const { composable, mocks } = mountMediaController();
+    composable.aggregateController.value.seek(5);
+    expect(mocks.seekA).toHaveBeenCalledWith(5);
+    expect(mocks.seekB).toHaveBeenCalledWith(5);
+  });
+
+  it('without a resolver, maxFrame/frame alias the first-initialized camera (today\'s behavior)', () => {
+    const { composable } = mountMediaController();
+    const keyA = Object.keys(composable.state)
+      .find((k) => composable.state[k].cameraName === 'A');
+    expect(keyA).toBeDefined();
+    composable.state[keyA as string].maxFrame = 10;
+    composable.state[keyA as string].frame = 4;
+    expect(composable.aggregateController.value.maxFrame.value).toBe(10);
+    expect(composable.aggregateController.value.frame.value).toBe(4);
+  });
+
+  it('with a resolver, seek(n) calls each camera with the resolved per-camera frame, including undefined', () => {
+    const { composable, mocks } = mountMediaController();
+    composable.setAlignedFrameResolver(makeGappedResolver());
+    composable.aggregateController.value.seek(1);
+    expect(mocks.seekA).toHaveBeenCalledWith(undefined);
+    expect(mocks.seekB).toHaveBeenCalledWith(1);
+    expect(composable.aggregateController.value.frame.value).toBe(1);
+    expect(composable.aggregateController.value.maxFrame.value).toBe(2);
+  });
+
+  it('with a resolver, nextFrame/prevFrame advance the global slot pointer, not each camera\'s own local frame', () => {
+    const { composable, mocks } = mountMediaController();
+    composable.setAlignedFrameResolver(makeGappedResolver());
+    composable.aggregateController.value.seek(0);
+    mocks.seekA.mockClear();
+    mocks.seekB.mockClear();
+
+    composable.aggregateController.value.nextFrame();
+    expect(composable.aggregateController.value.frame.value).toBe(1);
+    expect(mocks.seekA).toHaveBeenLastCalledWith(undefined);
+    expect(mocks.seekB).toHaveBeenLastCalledWith(1);
+
+    composable.aggregateController.value.nextFrame();
+    expect(composable.aggregateController.value.frame.value).toBe(2);
+    expect(mocks.seekA).toHaveBeenLastCalledWith(2);
+    expect(mocks.seekB).toHaveBeenLastCalledWith(2);
+
+    composable.aggregateController.value.prevFrame();
+    expect(composable.aggregateController.value.frame.value).toBe(1);
+    expect(mocks.seekA).toHaveBeenLastCalledWith(undefined);
+    expect(mocks.seekB).toHaveBeenLastCalledWith(1);
+  });
+
+  it('play() drives one centralized tick at frameRate and stops at slotCount - 1', () => {
+    vi.useFakeTimers();
+    try {
+      const { composable, mocks } = mountMediaController();
+      composable.setAlignedFrameResolver(makeGappedResolver(3, 2)); // 2fps => 500ms/tick
+      composable.aggregateController.value.seek(0);
+      mocks.playA.mockClear();
+      mocks.playB.mockClear();
+
+      composable.aggregateController.value.play();
+      expect(mocks.playA).toHaveBeenCalledTimes(1);
+      expect(mocks.playB).toHaveBeenCalledTimes(1);
+
+      vi.advanceTimersByTime(500);
+      expect(composable.aggregateController.value.frame.value).toBe(1);
+
+      vi.advanceTimersByTime(500);
+      expect(composable.aggregateController.value.frame.value).toBe(2);
+
+      mocks.pauseA.mockClear();
+      mocks.pauseB.mockClear();
+      vi.advanceTimersByTime(500);
+      // reached slotCount - 1: auto-pauses and stops advancing
+      expect(mocks.pauseA).toHaveBeenCalledTimes(1);
+      expect(mocks.pauseB).toHaveBeenCalledTimes(1);
+      expect(composable.aggregateController.value.frame.value).toBe(2);
+
+      vi.advanceTimersByTime(1000);
+      expect(composable.aggregateController.value.frame.value).toBe(2);
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+
+  it('pause() stops the centralized tick', () => {
+    vi.useFakeTimers();
+    try {
+      const { composable, mocks } = mountMediaController();
+      composable.setAlignedFrameResolver(makeGappedResolver(10, 2));
+      composable.aggregateController.value.seek(0);
+      composable.aggregateController.value.play();
+      vi.advanceTimersByTime(500);
+      expect(composable.aggregateController.value.frame.value).toBe(1);
+
+      composable.aggregateController.value.pause();
+      expect(mocks.pauseA).toHaveBeenCalled();
+      expect(mocks.pauseB).toHaveBeenCalled();
+
+      vi.advanceTimersByTime(2000);
+      expect(composable.aggregateController.value.frame.value).toBe(1);
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+
+  it('without a resolver, seekCameraFrame(camera, frame) is equivalent to seek(frame)', () => {
+    const { composable, mocks } = mountMediaController();
+    composable.aggregateController.value.seekCameraFrame('A', 5);
+    expect(mocks.seekA).toHaveBeenCalledWith(5);
+    expect(mocks.seekB).toHaveBeenCalledWith(5);
+  });
+
+  it('with a resolver, seekCameraFrame(camera, localFrame) translates a shifted local frame to the correct global slot', () => {
+    const { composable, mocks } = mountMediaController();
+    composable.setAlignedFrameResolver(makeShiftedResolver());
+
+    // A's own local frame 1 is really global slot 2 (A dropped the frame at slot 1).
+    composable.aggregateController.value.seekCameraFrame('A', 1);
+    expect(composable.aggregateController.value.frame.value).toBe(2);
+    expect(mocks.seekA).toHaveBeenLastCalledWith(1);
+    expect(mocks.seekB).toHaveBeenLastCalledWith(2);
+  });
+
+  it('with a resolver, seekCameraFrame falls back to seeking only that camera when its local frame maps to no slot', () => {
+    const { composable, mocks } = mountMediaController();
+    composable.setAlignedFrameResolver(makeGappedResolver());
+    mocks.seekB.mockClear();
+
+    // A never reports local frame 1 in this resolver -- no slot maps to it.
+    composable.aggregateController.value.seekCameraFrame('A', 1);
+    expect(mocks.seekA).toHaveBeenLastCalledWith(1);
+    expect(mocks.seekB).not.toHaveBeenCalled();
+  });
+
+  it('exposes alignedGapSlots from the resolver, empty when unaligned', () => {
+    const { composable } = mountMediaController();
+    expect(composable.aggregateController.value.alignedGapSlots.value).toEqual([]);
+
+    composable.setAlignedFrameResolver(makeGappedResolver());
+    expect(composable.aggregateController.value.alignedGapSlots.value).toEqual([1]);
+
+    composable.setAlignedFrameResolver(null);
+    expect(composable.aggregateController.value.alignedGapSlots.value).toEqual([]);
+  });
+
+  it('installing a resolver immediately performs an aligned seek to slot 0', () => {
+    const { composable, mocks } = mountMediaController();
+    // Gap at slot 0: A has no frame there and must blank right away rather
+    // than continuing to show its local frame 0 until the first user seek.
+    const resolver: AlignedFrameResolver = {
+      slotCount: ref(3),
+      frameRate: ref(2),
+      resolveSlot: (f: number) => ({
+        A: f === 0 ? undefined : f - 1,
+        B: f,
+      }),
+      resolveGlobalSlot: (camera: string, localFrame: number) => (
+        camera === 'B' ? localFrame : localFrame + 1),
+      gapSlots: ref([0]),
+    };
+    composable.setAlignedFrameResolver(resolver);
+    expect(mocks.seekA).toHaveBeenCalledWith(undefined);
+    expect(mocks.seekB).toHaveBeenCalledWith(0);
+    expect(composable.aggregateController.value.frame.value).toBe(0);
+  });
+
+  it('re-applies the current aligned slot when a camera registers after the resolver is installed', async () => {
+    const { composable, wrapper } = mountMediaController();
+    const resolver: AlignedFrameResolver = {
+      slotCount: ref(3),
+      frameRate: ref(2),
+      resolveSlot: (f: number) => ({ A: f, B: f, C: f + 10 }),
+      resolveGlobalSlot: (_camera: string, localFrame: number) => localFrame,
+      gapSlots: ref([]),
+    };
+    composable.setAlignedFrameResolver(resolver);
+    composable.aggregateController.value.seek(1);
+
+    // A late-mounting annotator (e.g. it registered after Viewer installed
+    // the resolver) self-seeks to its own local frame 0 during init; the
+    // roster watcher must re-seek it onto the current slot afterwards.
+    const seekC = vi.fn();
+    composable.initialize('C', {
+      seek: seekC, play: noop, pause: noop, setVolume: noop, setSpeed: noop,
+    });
+    await wrapper.vm.$nextTick();
+    expect(seekC).toHaveBeenLastCalledWith(11);
+    expect(composable.aggregateController.value.frame.value).toBe(1);
+  });
+
+  it('setAlignedFrameResolver(null) resets the aligned frame and hands control back to camera aliasing', () => {
+    const { composable } = mountMediaController();
+    composable.setAlignedFrameResolver(makeGappedResolver());
+    composable.aggregateController.value.seek(2);
+    expect(composable.aggregateController.value.frame.value).toBe(2);
+
+    composable.setAlignedFrameResolver(null);
+    // Falls back to the first-initialized camera's own (untouched, still 0) local frame ref.
+    expect(composable.aggregateController.value.frame.value).toBe(0);
+  });
+});
diff --git a/client/src/components/annotators/useMediaController.ts b/client/src/components/annotators/useMediaController.ts
index 3349dba8c..5b3317277 100644
--- a/client/src/components/annotators/useMediaController.ts
+++ b/client/src/components/annotators/useMediaController.ts
@@ -4,12 +4,12 @@ import geo, { GeoEvent } from 'geojs';
 import * as d3 from 'd3';
 
 import Vue, {
-  ref, reactive, provide, toRef, Ref, UnwrapRef, computed,
+  ref, shallowRef, reactive, provide, toRef, Ref, UnwrapRef, computed, watch,
 } from 'vue';
 import { map, over } from 'lodash';
 
 import { use } from '../../provides';
-import type { AggregateMediaController, MediaController } from './mediaControllerType';
+import type { AggregateMediaController, AlignedFrameResolver, MediaController } from './mediaControllerType';
 
 const AggregateControllerSymbol = Symbol('aggregate-controller');
 const CameraInitializerSymbol = Symbol('camera-initializer');
@@ -29,6 +29,8 @@ interface MediaControllerReactiveData {
   speed: number;
   maxFrame: number;
   syncedFrame: number;
+  /** False when an aligned-timeline slot has no frame for this camera; pane should blank. */
+  hasFrame: boolean;
   cursor: string;
   imageCursor: string;
   imageCursorEditing: boolean;
@@ -54,12 +56,18 @@ interface CameraInitializerReturn {
   initializeViewer: (width: number, height: number, tileWidth?: number,
     tileHeight?: number, isMap?: boolean, geoSpatial?: boolean) => void;
   mediaController: MediaController;
+  /**
+   * True whenever a global aligned timeline is driving playback (see
+   * AlignedFrameResolver) -- callers should skip starting their own internal
+   * frame-advance loop and rely on the aggregate controller's seek instead.
+   */
+  externallyDriven: Readonly<Ref<boolean>>;
 }
 
 type CameraInitializerFunc = (cameraName: string, {
   seek, play, pause, setVolume, setSpeed,
 }: {
-  seek(frame: number): void;
+  seek(frame: number | undefined): void;
   play(): void;
   pause(): void;
   setVolume(level: number): void;
@@ -85,6 +93,13 @@ export function useMediaController() {
   let cameraControllerSymbols: Record<string, symbol> = {};
   const synchronizeCameras: Ref<boolean> = ref(false);
   const resizeTrigger: Ref<number> = ref(0);
+  // shallowRef: an AlignedFrameResolver carries nested Refs (slotCount, frameRate)
+  // that must NOT be deep-reactive-converted/auto-unwrapped by a plain ref().
+  const alignedFrameResolver: Ref<AlignedFrameResolver | null> = shallowRef(null);
+  const alignedCurrentFrame: Ref<number> = ref(0);
+  const externallyDriven = computed(() => alignedFrameResolver.value !== null);
+  const alignedGapSlots = computed(() => alignedFrameResolver.value?.gapSlots.value ?? []);
+  let alignedPlaybackTimer: ReturnType<typeof setTimeout> | undefined;
   const emptyControllerFrame = ref(0);
   const emptyControllerMaxFrame = ref(0);
   const emptyControllerPlaying = ref(false);
@@ -112,7 +127,51 @@ export function useMediaController() {
     toggleSynchronizeCameras,
     cameraSync: synchronizeCameras,
     resizeTrigger,
+    alignedGapSlots,
+    seekCameraFrame: aggregateSeekCameraFrame,
   };
+  function stopAlignedPlaybackTimer() {
+    if (alignedPlaybackTimer !== undefined) {
+      clearTimeout(alignedPlaybackTimer);
+      alignedPlaybackTimer = undefined;
+    }
+  }
+
+  /**
+   * Set (or clear, with null) the resolver that translates a global
+   * aligned-timeline slot into each camera's own local frame index. Called
+   * by Viewer.vue whenever its computed aligned timeline changes.
+   */
+  function setAlignedFrameResolver(resolver: AlignedFrameResolver | null) {
+    stopAlignedPlaybackTimer();
+    alignedFrameResolver.value = resolver;
+    if (resolver) {
+      // Immediately perform an aligned seek to slot 0 so that any camera with
+      // no frame at that slot blanks right away, rather than continuing to
+      // show its own local frame 0 until the first user-driven seek.
+      alignedSeek(resolver, 0);
+    } else {
+      alignedCurrentFrame.value = 0;
+    }
+  }
+
+  /**
+   * Re-apply the current aligned slot whenever the camera roster changes
+   * while a resolver is active. Annotators self-seek to their own local
+   * frame 0 during init (see ImageAnnotator's init()), so a camera that
+   * mounts after the resolver was installed would wrongly display its local
+   * frame 0 even when the current slot has no frame for it. flush: 'post'
+   * ensures this runs after the mounting annotator's own init-time seek.
+   * (Watch the length via a getter: under Vue 2.7 a shallow watch on the ref
+   * itself does not fire for in-place array mutation like push/splice.)
+   */
+  watch(() => cameras.value.length, () => {
+    const resolver = alignedFrameResolver.value;
+    if (resolver && cameras.value.length > 0) {
+      alignedSeek(resolver, alignedCurrentFrame.value);
+    }
+  }, { flush: 'post' });
+
   function clear() {
     geoViewers = {};
     containers = {};
@@ -121,6 +180,7 @@ export function useMediaController() {
     subControllers = [];
     state = {};
     cameraControllerSymbols = {};
+    setAlignedFrameResolver(null);
   }
 
   function getController(camera?: string) {
@@ -211,7 +271,7 @@ export function useMediaController() {
   function initialize(cameraName: string, {
     seek: _seek, play: _play, pause: _pause, setVolume: _setVolume, setSpeed: _setSpeed,
   }: {
-    seek(frame: number): void;
+    seek(frame: number | undefined): void;
     play(): void;
     pause(): void;
     setVolume(level: number): void;
@@ -255,6 +315,7 @@ export function useMediaController() {
       speed: 1.0,
       maxFrame: 0,
       syncedFrame: 0,
+      hasFrame: true,
       cursor: 'default',
       imageCursor: '',
       imageCursorEditing: false,
@@ -472,6 +533,7 @@ export function useMediaController() {
       maxFrame: toRef(state[camera], 'maxFrame'),
       speed: toRef(state[camera], 'speed'),
       syncedFrame: toRef(state[camera], 'syncedFrame'),
+      hasFrame: toRef(state[camera], 'hasFrame'),
       prevFrame,
       nextFrame,
       play: _play,
@@ -502,7 +564,96 @@ export function useMediaController() {
       cursorHandler,
       initializeViewer,
       mediaController,
+      externallyDriven,
+    };
+  }
+
+  /** Seeks every camera to its own local frame for the given global aligned-timeline slot. */
+  function alignedSeek(resolver: AlignedFrameResolver, rawFrame: number) {
+    const maxFrame = Math.max(0, resolver.slotCount.value - 1);
+    const clamped = Math.min(Math.max(rawFrame, 0), maxFrame);
+    alignedCurrentFrame.value = clamped;
+    const perCamera = resolver.resolveSlot(clamped);
+    subControllers.forEach((mc) => {
+      mc.seek(perCamera[mc.cameraName.value]);
+    });
+  }
+
+  function aggregateSeek(frame: number) {
+    const resolver = alignedFrameResolver.value;
+    if (resolver) {
+      alignedSeek(resolver, frame);
+    } else {
+      subControllers.forEach((mc) => mc.seek(frame));
+    }
+  }
+
+  /**
+   * Seeks so that `camera` lands on its own local frame `localFrame`. Without
+   * alignment, local and global frame numbers are identical (today's
+   * positional broadcast), so this is just aggregateSeek. Under an aligned
+   * timeline, translates through the global slot via resolveGlobalSlot so
+   * every camera stays aligned; falls back to seeking only `camera` itself
+   * if that local frame isn't part of any slot (shouldn't normally happen).
+   */
+  function aggregateSeekCameraFrame(camera: string, localFrame: number) {
+    const resolver = alignedFrameResolver.value;
+    if (!resolver) {
+      aggregateSeek(localFrame);
+      return;
+    }
+    const slot = resolver.resolveGlobalSlot(camera, localFrame);
+    if (slot !== undefined) {
+      alignedSeek(resolver, slot);
+    } else {
+      getController(camera).seek(localFrame);
+    }
+  }
+
+  function aggregateNextFrame() {
+    const resolver = alignedFrameResolver.value;
+    if (resolver) {
+      alignedSeek(resolver, alignedCurrentFrame.value + 1);
+    } else {
+      subControllers.forEach((mc) => mc.nextFrame());
+    }
+  }
+
+  function aggregatePrevFrame() {
+    const resolver = alignedFrameResolver.value;
+    if (resolver) {
+      alignedSeek(resolver, alignedCurrentFrame.value - 1);
+    } else {
+      subControllers.forEach((mc) => mc.prevFrame());
+    }
+  }
+
+  function aggregatePause() {
+    subControllers.forEach((mc) => mc.pause());
+    stopAlignedPlaybackTimer();
+  }
+
+  function aggregatePlay() {
+    // Each camera still flips its own `playing` UI state; when a resolver is
+    // set, ImageAnnotator/VideoAnnotator skip starting their own internal
+    // frame-advance loop (see externallyDriven) and this centralized tick
+    // drives seeks instead.
+    subControllers.forEach((mc) => mc.play());
+    const resolver = alignedFrameResolver.value;
+    if (!resolver) {
+      return;
+    }
+    stopAlignedPlaybackTimer();
+    const tick = () => {
+      const maxFrame = Math.max(0, resolver.slotCount.value - 1);
+      if (alignedCurrentFrame.value >= maxFrame) {
+        aggregatePause();
+        return;
+      }
+      alignedSeek(resolver, alignedCurrentFrame.value + 1);
+      alignedPlaybackTimer = setTimeout(tick, 1000 / Math.max(1, resolver.frameRate.value));
     };
+    alignedPlaybackTimer = setTimeout(tick, 1000 / Math.max(1, resolver.frameRate.value));
   }
 
   const aggregateController: Ref<AggregateMediaController> = computed(() => {
@@ -512,19 +663,22 @@ export function useMediaController() {
       return emptyAggregateController;
     }
     const defaultController = getController();
+    const resolver = alignedFrameResolver.value;
     return {
       cameras: computed(() => cameras.value.map((v) => String(v))),
-      maxFrame: defaultController.maxFrame,
-      frame: defaultController.frame,
-      seek: over(map(subControllers, 'seek')),
-      nextFrame: over(map(subControllers, 'nextFrame')),
-      prevFrame: over(map(subControllers, 'prevFrame')),
+      maxFrame: resolver
+        ? computed(() => Math.max(0, resolver.slotCount.value - 1))
+        : defaultController.maxFrame,
+      frame: resolver ? alignedCurrentFrame : defaultController.frame,
+      seek: aggregateSeek,
+      nextFrame: aggregateNextFrame,
+      prevFrame: aggregatePrevFrame,
       volume: defaultController.volume,
       setVolume: over(map(subControllers, 'setVolume')),
       speed: defaultController.speed,
       setSpeed: over(map(subControllers, 'setSpeed')),
-      pause: over(map(subControllers, 'pause')),
-      play: over(map(subControllers, 'play')),
+      pause: aggregatePause,
+      play: aggregatePlay,
       playing: defaultController.playing,
       resetZoom: over(map(subControllers, 'resetZoom')),
       currentTime: defaultController.currentTime,
@@ -532,6 +686,8 @@ export function useMediaController() {
       toggleSynchronizeCameras,
       cameraSync: synchronizeCameras,
       resizeTrigger,
+      alignedGapSlots,
+      seekCameraFrame: aggregateSeekCameraFrame,
     };
   });
 
@@ -547,5 +703,6 @@ export function useMediaController() {
     initialize,
     onResize,
     clear,
+    setAlignedFrameResolver,
   };
 }
diff --git a/client/src/components/controls/Controls.vue b/client/src/components/controls/Controls.vue
index 3bf2239a2..c580c5bfc 100644
--- a/client/src/components/controls/Controls.vue
+++ b/client/src/components/controls/Controls.vue
@@ -7,6 +7,7 @@ import { usePrompt } from 'dive-common/vue-utilities/prompt-service';
 import context from 'dive-common/store/context';
 import { clientSettings } from 'dive-common/store/settings';
 import { DatasetType, useApi } from 'dive-common/apispec';
+import { computeGapGradient } from 'dive-common/alignedTimeline';
 import { frameToTimestamp } from 'vue-media-annotator/utils';
 import { injectAggregateController } from '../annotators/useMediaController';
 import { useTime, useTrackFilters, useDatasetId } from '../../provides';
@@ -60,6 +61,21 @@ export default defineComponent({
       }
       data.frame = value;
     }
+
+    /**
+     * A CSS gradient overlay marking timeline slots where at least one camera
+     * has no frame (SEAL feature 5's aligned timeline, see alignedTimeline.ts).
+     * Uses a gradient rather than one element per gap so this stays cheap
+     * regardless of how many gaps there are. Each band is centered on the
+     * v-slider thumb position for its slot (see computeGapGradient); this is
+     * a lightweight visual approximation drawn under the v-slider, not
+     * pixel-exact with its clickable thumb track.
+     */
+    const alignedGapGradient = computed(() => computeGapGradient(
+      mediaController.alignedGapSlots.value,
+      mediaController.maxFrame.value,
+    ));
+    const alignedGapCount = computed(() => mediaController.alignedGapSlots.value.length);
     function togglePlay(_: HTMLElement, keyEvent: KeyboardEvent) {
       // Prevent scroll from spacebar and other default effects.
       keyEvent.preventDefault();
@@ -215,6 +231,8 @@ export default defineComponent({
       mediaController,
       dragHandler,
       input,
+      alignedGapGradient,
+      alignedGapCount,
       togglePlay,
       toggleEnhancements,
       visible,
@@ -276,6 +294,12 @@ export default defineComponent({
         @end="dragHandler.end"
         @input="input"
       />
+      <div
+        v-if="alignedGapCount > 0"
+        class="aligned-gap-indicator"
+        :style="{ background: alignedGapGradient }"
+        :title="`${alignedGapCount} timeline slot(s) with a missing camera frame`"
+      />
       <v-row
         no-gutters
         :class="{
@@ -1238,6 +1262,12 @@ export default defineComponent({
 </template>
 
 <style scoped>
+.aligned-gap-indicator {
+  height: 4px;
+  margin: -8px 0 4px;
+  border-radius: 2px;
+}
+
 .bottom-controls-row {
   flex-wrap: nowrap;
 }
diff --git a/docs/DataFormats.md b/docs/DataFormats.md
index d825c6fea..0503ed752 100644
--- a/docs/DataFormats.md
+++ b/docs/DataFormats.md
@@ -190,6 +190,22 @@ interface DatasetMetaMutable {
 sharpen, and optional percentile stretch bounds). See
 [Image Enhancements](UI-Image-Enhancements.md) for platform support of high bit-depth stretch.
 
+### Media frame metadata
+
+Each frame in an image-sequence or multicam dataset may carry a `timestamp` field (epoch
+seconds) parsed from the filename at load time. When every frame on every camera in a
+multicam dataset has a timestamp, DIVE builds a global aligned timeline for playback. See
+[Aligned playback and timestamps](Multicamera-data.md#aligned-playback-and-timestamps).
+
+```typescript
+interface FrameImage {
+  url: string;
+  filename: string;
+  id?: string; // large-image item id (web tiled TIFF)
+  timestamp?: number; // capture time in epoch seconds, when parseable from filename
+}
+```
+
 ## VIAME CSV
 
 Read the [VIAME CSV Specification](https://viame.readthedocs.io/en/latest/sections/detection_file_conversions.html).
diff --git a/docs/Large-Image-Support.md b/docs/Large-Image-Support.md
index 90941904c..e33bb81ce 100644
--- a/docs/Large-Image-Support.md
+++ b/docs/Large-Image-Support.md
@@ -15,6 +15,9 @@ file first.
 Pre-scaling to 8-bit COG (below) is still useful when you want a fixed display range at
 import time or when preparing files for tools that do not support dynamic tile styling.
 
+On **Web**, an upload batch that contains only `.tif` / `.tiff` files is classified as a
+`large-image` dataset (not an image sequence). JPEG or PNG uploads remain image sequences.
+
 ## Requirement: Internal Overviews
 
 Large images must include internal overview levels (reduced-resolution pyramid levels) for tile rendering. Files without internal overviews can fail to load in the large-image viewer.
diff --git a/docs/Multicamera-data.md b/docs/Multicamera-data.md
index 2c97197d7..c6534bb46 100644
--- a/docs/Multicamera-data.md
+++ b/docs/Multicamera-data.md
@@ -7,6 +7,7 @@ DIVE supports **multicamera** and **stereo** datasets on both the [web version](
 | Import stereo (2 cameras + calibration) | ✔️ | ✔️ |
 | Import multicam (2 or 3 cameras) | ✔️ | ✔️ |
 | Batch multicam import (collect folders) | ✔️ | ✔️ |
+| Timestamp-aligned multicam playback | ✔️ | ✔️ |
 | View and annotate across cameras | ✔️ | ✔️ |
 | MultiCamera Tools (link/unlink tracks) | ✔️ | ✔️ |
 | Run stereo / multicam VIAME pipelines | ✔️ | ✔️ |
@@ -32,7 +33,7 @@ Multicam import is available from the standard upload dialog on [viame.kitware.c
     * ==:material-binoculars: Stereoscopic== — exactly 2 cameras and a calibration `.npz` file.
     * ==:material-camera-burst: MultiCam== — 2 or 3 cameras; no calibration file required.
     * ==:material-folder-multiple-image: MultiCam Batch== — import many multicam datasets at once from a folder of **collect** subfolders (image sequences only). See [Batch multicam import](#batch-multicam-import).
-6. In the import dialog, assign a source folder or video file to each camera. All cameras must use the same media type (all image sequences or all videos) and must have the same number of frames (or matching video duration).
+6. In the import dialog, assign a source folder or video file to each camera. All cameras must use the same media type (all image sequences or all videos). By default, every camera must have the same number of frames (or matching video duration). For **image-sequence** imports with capture timestamps in filenames, enable **Infer frame index from filename** to allow unequal per-camera counts — see [Infer frame index from filename](#infer-frame-index-from-filename).
 7. Optionally attach a per-camera annotation file during import.
 8. Enter a dataset name, choose the default display camera, and click ==Begin Import==.
 9. When upload finishes, DIVE opens the new multicam dataset in the annotator.
@@ -100,6 +101,49 @@ On **Web**, the folder picker uploads all files under the chosen root; scanning
 
 For a single multicam dataset from one parent folder (one collect, camera subfolders only), use ==MultiCam== with the **parent-folder** import mode instead of MultiCam Batch.
 
+### Infer frame index from filename
+
+At the bottom of the multicam import dialog (image sequences only), **Infer frame index from filename** relaxes the equal-frame-count requirement when filenames encode capture time. Enable it for datasets where cameras may have different numbers of frames — for example when one camera dropped occasional shots but each surviving frame still carries a parseable timestamp.
+
+When enabled, DIVE skips the import-time check that every camera has the same image count. During playback, frames are aligned by those filename timestamps rather than by positional index (see [Aligned playback and timestamps](#aligned-playback-and-timestamps)).
+
+Example filename (KAMERA-style datestamp):
+
+```
+test_seattle_2020_fl09_C_20200830_020814.141365_rgb.jpg
+```
+
+This option is available on both Web and Desktop for ==MultiCam== imports. It does not apply to video or stereo imports.
+
+### Aligned playback and timestamps
+
+On multicam **image-sequence** datasets, DIVE can synchronize playback across cameras using capture timestamps parsed from each frame's filename. When alignment is active, scrubbing and playback use a single **global timeline** whose slots group frames that share the same capture instant across cameras.
+
+**When alignment activates:**
+
+* The dataset has **two or three** cameras.
+* **Every** frame on **every** camera has a parseable timestamp in its filename.
+
+If any frame on any camera lacks a timestamp, DIVE falls back to **positional alignment** — each camera advances by its own local frame index, as in earlier DIVE versions.
+
+**Supported filename conventions** (first match wins):
+
+| Pattern | Example |
+|---------|---------|
+| Datestamp `YYYYMMDD[_-]HHMMSS` with optional fractional seconds | `kamera_fl02_C_20240407_130757.206341_ir.tif` |
+| Epoch milliseconds (13 digits) | `img_1719843225123.tif` |
+| Epoch seconds (10 digits) | `img_1719843225.tif` |
+
+Timestamps are parsed automatically when media loads; no import setting is required beyond having recognizable filenames (and, if counts differ, enabling **Infer frame index from filename** at import time).
+
+**What you see in the viewer:**
+
+* The timeline **frame counter** reflects the global aligned slot index, not an individual camera's local index.
+* When the current slot has no frame for a camera, that camera's pane **blanks** and its annotation overlay clears until you scrub to a slot where that camera has data.
+* Red bands on the [timeline scrubber](UI-Timeline.md#multicam-gap-indicators) mark slots where at least one camera is missing a frame.
+
+Identical capture timestamps on every camera (common in synchronized rigs) are grouped into the same slot. If one camera has extra frames at the same timestamp, the surplus frames spill into later slots rather than overwriting the first match.
+
 ## Data/Track Organization
 
 Data is loaded amongst multiple folders to create a multicamera dataset. In these cases trackIds will be linked if they are the same across the cameras. Selection of a trackId that exists across multiple cameras will be linked together in the [Track List](UI-Track-List.md).
diff --git a/docs/UI-Timeline.md b/docs/UI-Timeline.md
index 693d38e1c..62414e3d5 100644
--- a/docs/UI-Timeline.md
+++ b/docs/UI-Timeline.md
@@ -18,7 +18,13 @@ The timeline provides a control bar and a few different temporal visualizations.
 * ==:material-lock-open:== will enable camera lock, which causes the annotation view to auto-zoom and pan to whatever annotation is currently selected.  This is useful when reviewing the output of a pipeline.
     * Hovering over the camera lock will open additional settings for forcing transition and locking to a zoomed in multiple of the bbox size
 * ==:material-image-filter-center-focus:== or the ++r++ key will reset zoom/pan in the annotation view.
-* ==:material-contrast-box:== will open the image contrast adjustment panel.
+* ==:material-contrast-box:== will open the [Image Enhancements](UI-Image-Enhancements.md) panel.
+
+## Multicam gap indicators
+
+On multicam image-sequence datasets where [timestamp-aligned playback](Multicamera-data.md#aligned-playback-and-timestamps) is active, the frame scrubber may show **red bands** beneath the slider track. Each band marks a global timeline slot where at least one camera has no frame at that instant — scrubbing there blanks that camera's pane.
+
+Hover the scrubber to see a tooltip with the count of such gap slots. Consecutive gap slots are merged into a single visible band on long sequences.
 
 ## Detection/Track Count
 
diff --git a/docs/Web-Version.md b/docs/Web-Version.md
index 7760d3575..86bd508e3 100644
--- a/docs/Web-Version.md
+++ b/docs/Web-Version.md
@@ -27,6 +27,7 @@ A user account is required to store data and run pipelines on viame.kitware.com.
 * Select a video or multi-select a group of image frames.
     * Use ++ctrl++ or ++shift++ to click every file you want to upload.
     * If you already have `annotations.csv` or an annotation or configuration JSON select that too.
+    * Uploads that contain only `.tif` / `.tiff` files are classified as [large-image](Large-Image-Support.md) datasets rather than image sequences.
 * Choose a name for the dataset and enter the optional playback frame rate or select other optional files.
 * Press ==Start Upload==
 * In the data browser, a new ==Launch Annotator== button will appear next to your data
@@ -59,9 +60,9 @@ DIVE Web supports importing **stereo** (2 cameras + calibration) and **multicam*
     * ==:material-folder-multiple-image: MultiCam Batch== — import **many** multicam image-sequence datasets from a root folder of collect subfolders (see [Batch multicam import](Multicamera-data.md#batch-multicam-import)).
 5. For Stereoscopic or MultiCam, assign media to each camera, set a dataset name and default display camera, then start the import. For MultiCam Batch, choose the root folder, review the scan table, edit dataset names, select collects, and start the batch.
 
-All cameras in one import must share the same media type and frame count. Stereoscopic imports require a calibration `.npz` file. MultiCam Batch is **image-sequence only** (not video or stereo).
+All cameras in one import must share the same media type. By default, every camera must have the same frame count (or matching video duration). For image-sequence ==MultiCam== imports with capture timestamps in filenames, enable **Infer frame index from filename** in the import dialog to allow unequal per-camera counts — see [Multicamera and Stereo Data](Multicamera-data.md#infer-frame-index-from-filename). Stereoscopic imports require a calibration `.npz` file. MultiCam Batch is **image-sequence only** (not video or stereo).
 
-For camera selection, linked tracks, MultiCamera Tools, and pipeline details, see [Multicamera and Stereo Data](Multicamera-data.md).
+For camera selection, linked tracks, MultiCamera Tools, timestamp-aligned playback, and pipeline details, see [Multicamera and Stereo Data](Multicamera-data.md).
 
 !!! note
 
diff --git a/docs/index.md b/docs/index.md
index 1714c3291..d4946331b 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -22,6 +22,7 @@ Load your own images and videos | ✔️ | ✔️
 | &nbsp;&nbsp;&nbsp; Import using image lists  | ❌ | ✔️
 Multicamera and stereo datasets | ✔️ | ✔️
 | &nbsp;&nbsp;&nbsp; Batch multicam import (collect folders) | ✔️ | ✔️
+| &nbsp;&nbsp;&nbsp; Timestamp-aligned multicam playback | ✔️ | ✔️
 Load annotations from [supported formats](DataFormats.md) | ✔️ | ✔️
 Create new object and track annotation | ✔️ | ✔️
 Annotation export | ✔️ | ✔️
diff --git a/server/dive_server/crud_dataset.py b/server/dive_server/crud_dataset.py
index 04dd5c8d5..6e22c3d96 100644
--- a/server/dive_server/crud_dataset.py
+++ b/server/dive_server/crud_dataset.py
@@ -16,7 +16,15 @@
 
 from dive_server import crud, crud_annotation
 from dive_tasks import tasks
-from dive_utils import TRUTHY_META_VALUES, asbool, calibration_format, constants, fromMeta, models, types
+from dive_utils import (
+    TRUTHY_META_VALUES,
+    asbool,
+    calibration_format,
+    constants,
+    fromMeta,
+    models,
+    types,
+)
 from dive_utils.serializers import kwcoco
 
 
@@ -1230,7 +1238,6 @@ def create_multicam(
 
     loaded_children: Dict[str, types.GirderModel] = {}
     camera_types_by_name: Dict[str, str] = {}
-    frame_counts: List[int] = []
     child_fps_by_name: Dict[str, float] = {}
     for name in camera_order:
         cam = cameras[name]
@@ -1264,7 +1271,9 @@ def create_multicam(
             )
         child_fps = fromMeta(child, constants.FPSMarker)
         child_fps_by_name[name] = child_fps
-        frame_counts.append(_child_media_frame_count(child, user, cam_type))
+        # Called for its validation side effect (e.g. a video camera missing its
+        # processed video raises here); differing counts across cameras are allowed.
+        _child_media_frame_count(child, user, validated.type)
         loaded_children[name] = child
         camera_types_by_name[name] = cam_type
 
@@ -1284,15 +1293,9 @@ def create_multicam(
                     code=400,
                 )
 
-    if len(set(frame_counts)) > 1:
-        details = ', '.join(
-            f'{name}={count}' for name, count in zip(camera_order, frame_counts)
-        )
-        expected = frame_counts[0]
-        raise RestException(
-            f'All cameras must have the same number of frames (expected {expected}; {details})',
-            code=400,
-        )
+    # NOTE: cameras are intentionally allowed to have differing frame counts.
+    # Frame alignment pairs frames across cameras downstream, so a per-camera
+    # frame-count equality check would reject the primary use case for this feature.
 
     default_child = loaded_children[validated.defaultDisplay]
     parent_folder_doc = parent_folder
diff --git a/server/tests/test_create_multicam.py b/server/tests/test_create_multicam.py
index a1bc72e8c..896fd8762 100644
--- a/server/tests/test_create_multicam.py
+++ b/server/tests/test_create_multicam.py
@@ -69,13 +69,20 @@ def load_folder(folder_id, level=None, user=None):
     assert set(saved_meta[constants.MultiCamMarker]['cameras'].keys()) == {'left', 'right'}
 
 
+@patch('dive_server.crud_dataset.Item')
+@patch('dive_server.crud_dataset.crud.get_or_create_auxiliary_folder')
 @patch('dive_server.crud_dataset.crud.valid_images')
 @patch('dive_server.crud_dataset.Folder')
 @patch('dive_server.crud_dataset.crud.verify_dataset')
-def test_create_multicam_rejects_mismatched_frame_counts(_verify, folder_cls, valid_images_mock):
+def test_create_multicam_accepts_mismatched_frame_counts(
+    _verify, folder_cls, valid_images_mock, _aux, item_cls
+):
+    """Cameras with differing frame counts are paired downstream by frame alignment,
+    so create_multicam must not reject them."""
     user = {'login': 'tester'}
-    left = _child_folder('left-id', 'cam-left')
-    right = _child_folder('right-id', 'cam-right')
+    dataset_parent = _dataset_parent()
+    left = _child_folder('left-id', 'left')
+    right = _child_folder('right-id', 'right')
 
     folder_cls.return_value.load.side_effect = lambda fid, **kwargs: {
         'left-id': left,
@@ -89,14 +96,18 @@ def test_create_multicam_rejects_mismatched_frame_counts(_verify, folder_cls, va
         'type': 'image-sequence',
         'subType': 'stereo',
         'defaultDisplay': 'left',
+        'cameraOrder': ['left', 'right'],
         'cameras': {
             'left': {'folderId': 'left-id'},
             'right': {'folderId': 'right-id'},
         },
     }
 
-    with pytest.raises(RestException, match='same number of frames'):
-        crud_dataset.create_multicam(user, _dataset_parent(), data)
+    result = crud_dataset.create_multicam(user, dataset_parent, data)
+
+    assert result == dataset_parent
+    saved_meta = folder_cls.return_value.save.call_args_list[-1][0][0]['meta']
+    assert saved_meta[constants.TypeMarker] == constants.MultiType
 
 
 @patch('dive_server.crud_dataset.Item')
diff --git a/server/tests/test_multicam_dataset.py b/server/tests/test_multicam_dataset.py
index 2f7ed13f2..0f31b6966 100644
--- a/server/tests/test_multicam_dataset.py
+++ b/server/tests/test_multicam_dataset.py
@@ -105,7 +105,11 @@ def load_folder(folder_id, level=None, user=None):
 
     folder_cls.return_value.load.side_effect = load_folder
 
-    left_image = MediaResource(id='img-left', url='/api/v1/.../left.png', filename='left.png')
+    left_image = MediaResource(
+        id='img-left',
+        url='/api/v1/.../left.png',
+        filename='left_20230615_143022.png',
+    )
     right_image = MediaResource(id='img-right', url='/api/v1/.../right.png', filename='right.png')
 
     def media_for_child(child_folder, child_user):
@@ -124,7 +128,7 @@ def media_for_child(child_folder, child_user):
     assert result.multiCamMedia.defaultDisplay == 'left'
     assert result.multiCamMedia.cameraOrder == ['left', 'right']
     assert set(result.multiCamMedia.cameras.keys()) == {'left', 'right'}
-    assert result.multiCamMedia.cameras['left'].imageData[0].filename == 'left.png'
+    assert result.multiCamMedia.cameras['left'].imageData[0].filename == 'left_20230615_143022.png'
     assert 'multiCam' not in result.dict()
 
 

From 3645971a58543f9ab33c704a47e9641e08551cd3 Mon Sep 17 00:00:00 2001
From: Bryon Lewis <Bryon.Lewis@kitware.com>
Date: Thu, 9 Jul 2026 09:01:54 -0400
Subject: [PATCH 4/6] fix current frame drift with multiframe datga

---
 .../components/ControlsContainer.vue          | 25 +++++++++++++------
 1 file changed, 18 insertions(+), 7 deletions(-)

diff --git a/client/dive-common/components/ControlsContainer.vue b/client/dive-common/components/ControlsContainer.vue
index 75fc1f512..ef7d380ae 100644
--- a/client/dive-common/components/ControlsContainer.vue
+++ b/client/dive-common/components/ControlsContainer.vue
@@ -129,23 +129,34 @@ export default defineComponent({
 
     const aggregateController = injectAggregateController();
     const {
-      maxFrame, volume, setVolume, setSpeed, speed,
+      volume, setVolume, setSpeed, speed,
     } = aggregateController.value;
     // The timeline charts (line/event charts) are built from trackStores in
     // the selected camera's own local frame space. Under an aligned timeline
-    // (SEAL feature 5) the aggregate controller's frame/seek operate in
-    // global slot space, which diverges from local frames -- so the playhead
-    // uses time.frame (which tracks the selected camera's local frame) and
-    // chart click-seeks are translated through seekCameraFrame. Both are
-    // passthroughs when alignment isn't active.
+    // (SEAL feature 5) the aggregate controller's frame/maxFrame/seek operate
+    // in global slot space, which diverges from local frames -- so the
+    // playhead, axis extent, and chart click-seeks all stay in local space:
+    // time.frame + the selected camera's maxFrame, with seeks translated
+    // through seekCameraFrame. All three are passthroughs when alignment
+    // isn't active. (Controls.vue's main scrubber correctly stays in global
+    // space; mixing that maxFrame here with a local playhead caused drift.)
     const { frame: localFrame } = useTime();
+    const timelineMaxFrame = computed(() => {
+      try {
+        return aggregateController.value.getController(selectedCamera.value).maxFrame.value;
+      } catch {
+        // Selected camera's annotator hasn't mounted yet (e.g. mid load);
+        // fall back to the aggregate max rather than throwing.
+        return aggregateController.value.maxFrame.value;
+      }
+    });
     function seekToFrame(frame: number) {
       aggregateController.value.seekCameraFrame(selectedCamera.value, frame);
     }
     return {
       currentView,
       toggleView,
-      maxFrame,
+      maxFrame: timelineMaxFrame,
       multiCam,
       frame: localFrame,
       seek: seekToFrame,

From e3ee3c5f0c55c03db82c4007a5273c2fcdadf6c4 Mon Sep 17 00:00:00 2001
From: Bryon Lewis <Bryon.Lewis@kitware.com>
Date: Thu, 9 Jul 2026 09:04:41 -0400
Subject: [PATCH 5/6] fix camera/frame mistmatch for multicam mis-aligned
 frames

---
 client/src/components/LayerManager.vue | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/client/src/components/LayerManager.vue b/client/src/components/LayerManager.vue
index 376ef45cc..a50ab44df 100644
--- a/client/src/components/LayerManager.vue
+++ b/client/src/components/LayerManager.vue
@@ -216,11 +216,14 @@ export default defineComponent({
     uiLayer.addDOMWidget('customToolTip', ToolTipWidget, toolTipWidgetProps, { x: 10, y: 10 });
 
     // True when the selected track is a brand-new detection with no geometry yet
-    // on this frame (the user is mid-creation). Used to mirror the creation cursor
-    // onto non-selected cameras so a new detection can be drawn on any camera.
+    // on this camera at this frame (the user is mid-creation). Used to mirror the
+    // creation cursor onto non-selected cameras so a new detection can be drawn
+    // on any camera. Must look up the track on props.camera (same as
+    // cameraAwaitingGeometry): `frame` is this layer's local frame, and under an
+    // aligned timeline that diverges from selectedCamera's local frame.
     function isCreatingNewDetection(frame: number, trackId: AnnotationId | null): boolean {
       if (trackId === null) return false;
-      const t = cameraStore.getPossibleTrack(trackId, selectedCamera.value);
+      const t = cameraStore.getPossibleTrack(trackId, props.camera);
       if (!t) return false;
       return t.getFeature(frame)[0] == null;
     }

From f35b7558926cd33c40bf8d066fdd6407d6b64a78 Mon Sep 17 00:00:00 2001
From: Bryon Lewis <Bryon.Lewis@kitware.com>
Date: Thu, 9 Jul 2026 09:05:46 -0400
Subject: [PATCH 6/6] fix frame alignment for creating new detections

---
 client/dive-common/components/Viewer.vue | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/client/dive-common/components/Viewer.vue b/client/dive-common/components/Viewer.vue
index 24f459080..67d1c3c88 100644
--- a/client/dive-common/components/Viewer.vue
+++ b/client/dive-common/components/Viewer.vue
@@ -1127,7 +1127,18 @@ export default defineComponent({
       if (!track) {
         return true;
       }
-      const [feature] = track.getFeature(aggregateController.value.frame.value);
+      // Must use this camera's own local frame, not aggregateController's
+      // frame: under an aligned timeline the aggregate frame is the global
+      // slot index, which diverges from any camera's local frame -- and
+      // getFeature() is keyed by local frame. Same pattern as
+      // isCreatingNewDetection above.
+      let cameraFrame: number;
+      try {
+        cameraFrame = aggregateController.value.getController(camera).frame.value;
+      } catch {
+        cameraFrame = aggregateController.value.frame.value;
+      }
+      const [feature] = track.getFeature(cameraFrame);
       if (feature == null) {
         return true;
       }