diff --git a/client/.gitignore b/client/.gitignore
index 83b73f202..061dc1076 100644
--- a/client/.gitignore
+++ b/client/.gitignore
@@ -3,6 +3,7 @@ node_modules
 /dist
 /dist_desktop
 /dist_electron
+/coverage
 /.electron
 /lib
 /bin
diff --git a/client/dive-common/apispec.ts b/client/dive-common/apispec.ts
index bfeaadd06..574aa8793 100644
--- a/client/dive-common/apispec.ts
+++ b/client/dive-common/apispec.ts
@@ -270,6 +270,98 @@ function useApi() {
   return use<Readonly<Api>>(ApiSymbol);
 }
 
+/**
+ * Interactive Segmentation Types
+ */
+export interface SegmentationPredictRequest {
+  /** Path to the image file */
+  imagePath: string;
+  /** Point coordinates as [x, y] pairs */
+  points: [number, number][];
+  /** Point labels: 1 for foreground, 0 for background */
+  pointLabels: number[];
+  /** Optional low-res mask from previous prediction for refinement */
+  maskInput?: number[][];
+  /** Whether to return multiple mask options */
+  multimaskOutput?: boolean;
+  /** Time in seconds when imagePath is a video file */
+  frameTime?: number;
+}
+
+export interface SegmentationPredictResponse {
+  /** Whether the prediction succeeded */
+  success: boolean;
+  /** Error message if failed */
+  error?: string;
+  /** Polygon coordinates as [x, y] pairs */
+  polygon?: [number, number][];
+  /** Bounding box [x_min, y_min, x_max, y_max] */
+  bounds?: [number, number, number, number];
+  /** Quality score from segmentation model */
+  score?: number;
+  /** Low-res mask for subsequent refinement */
+  lowResMask?: number[][];
+  /** Mask dimensions [height, width] */
+  maskShape?: [number, number];
+  /** RLE-encoded full-resolution mask for display: [[value, count], ...] */
+  rleMask?: [number, number][];
+}
+
+/**
+ * Stereo point-segmentation. The segmentation service warps the seed to the
+ * other camera (configured stereo backend), segments there, and -- when enabled
+ * -- derives head/tail lines + the measurement.
+ */
+export interface SegmentationStereoSegmentRequest {
+  /** The already-segmented source-camera polygon (sampling + measurement). */
+  polygon?: [number, number][];
+  /** Source-camera click points and labels. */
+  points: [number, number][];
+  pointLabels: number[];
+  /** Source (clicked) and other camera image/video paths. */
+  sourceImagePath: string;
+  otherImagePath: string;
+  /** Calibration file path, read by the embedded stereo warper. */
+  calibrationFile?: string;
+  /** Time in seconds when the paths are video files. */
+  frameTime?: number;
+}
+
+export interface SegmentationStereoSegmentResponse {
+  id: string;
+  success: boolean;
+  error?: string;
+  /** Other-camera polygon from SAM. */
+  polygon?: [number, number][];
+  bounds?: [number, number, number, number];
+  score?: number;
+  /** Seed point(s) used on the other camera (median of warped samples). */
+  seedPoints?: [number, number][];
+  seedLabels?: number[];
+  /** Optional head/tail lines: source = clicked camera, other = warped. */
+  generateLine?: boolean;
+  lineSource?: [[number, number], [number, number]];
+  lineOther?: [[number, number], [number, number]];
+  /** Stereo measurement for the derived line (calibration units, e.g. mm). */
+  measurement?: {
+    length: number;
+    midpoint_x: number;
+    midpoint_y: number;
+    midpoint_z: number;
+    midpoint_range: number;
+    stereo_rms: number;
+  };
+}
+
+export interface SegmentationStatusResponse {
+  /** Whether segmentation is available */
+  available: boolean;
+  /** Whether the model is currently loaded */
+  loaded?: boolean;
+  /** Whether the service is ready for predictions */
+  ready?: boolean;
+}
+
 export {
   provideApi,
   useApi,
diff --git a/client/dive-common/components/BottomPanel.vue b/client/dive-common/components/BottomPanel.vue
index e3c4b7b11..a8588edd2 100644
--- a/client/dive-common/components/BottomPanel.vue
+++ b/client/dive-common/components/BottomPanel.vue
@@ -54,6 +54,7 @@ export default defineComponent({
     addAttribute: { type: Function, required: true },
     editAttribute: { type: Function, required: true },
     saveThreshold: { type: Function, required: true },
+    isStereoDataset: { type: Boolean, default: false },
   },
   setup() {
     return { context };
@@ -106,7 +107,10 @@ export default defineComponent({
         @track-seek="aggregateSeek($event)"
       >
         <template slot="settings">
-          <TrackSettingsPanel :all-types="trackFilters.allTypes.value" />
+          <TrackSettingsPanel
+            :all-types="trackFilters.allTypes.value"
+            :is-stereo-dataset="isStereoDataset"
+          />
         </template>
         <template slot="column-settings">
           <TrackListColumnSettings
diff --git a/client/dive-common/components/DeleteControls.vue b/client/dive-common/components/DeleteControls.vue
index 50ecdd08a..3d10226e5 100644
--- a/client/dive-common/components/DeleteControls.vue
+++ b/client/dive-common/components/DeleteControls.vue
@@ -24,8 +24,20 @@ export default Vue.extend({
       if (this.editingMode === 'rectangle') {
         return true; // deleting rectangle is unsupported
       }
+      if (this.editingMode === 'Point') {
+        return true; // Point mode uses reset instead of delete
+      }
       return false;
     },
+    isPolygonMode(): boolean {
+      return this.editingMode === 'Polygon';
+    },
+    editModeIcon(): string {
+      if (this.editingMode === 'Polygon') return 'mdi-vector-polygon';
+      if (this.editingMode === 'LineString') return 'mdi-vector-line';
+      if (this.editingMode === 'rectangle') return 'mdi-vector-square';
+      return 'mdi-shape';
+    },
   },
 
   methods: {
@@ -39,33 +51,104 @@ export default Vue.extend({
         this.$emit('delete-annotation');
       }
     },
+    addHole() {
+      this.$emit('add-hole');
+    },
+    addPolygon() {
+      this.$emit('add-polygon');
+    },
   },
 });
 </script>
 
 <template>
-  <span class="mx-1">
-    <v-btn
+  <span class="mx-1 d-flex align-center">
+    <!-- Add Polygon button - shown in polygon edit mode -->
+    <v-tooltip
+      v-if="isPolygonMode"
+      bottom
+    >
+      <template #activator="{ on, attrs }">
+        <v-btn
+          v-bind="attrs"
+          color="primary"
+          depressed
+          small
+          class="mr-1"
+          v-on="on"
+          @click="addPolygon"
+        >
+          <v-icon small>
+            mdi-vector-polygon
+          </v-icon>
+          <v-icon
+            x-small
+            class="ml-n1"
+          >
+            mdi-plus-circle-outline
+          </v-icon>
+        </v-btn>
+      </template>
+      <span>Add another polygon</span>
+    </v-tooltip>
+
+    <!-- Add Hole button - shown in polygon edit mode -->
+    <v-tooltip
+      v-if="isPolygonMode"
+      bottom
+    >
+      <template #activator="{ on, attrs }">
+        <v-btn
+          v-bind="attrs"
+          color="primary"
+          depressed
+          small
+          class="mr-1"
+          v-on="on"
+          @click="addHole"
+        >
+          <v-icon small>
+            mdi-vector-polygon
+          </v-icon>
+          <v-icon
+            x-small
+            class="ml-n1"
+          >
+            mdi-minus-circle-outline
+          </v-icon>
+        </v-btn>
+      </template>
+      <span>Add hole to polygon</span>
+    </v-tooltip>
+
+    <!-- Delete button -->
+    <v-tooltip
       v-if="!disabled"
-      color="error"
-      depressed
-      small
-      @click="deleteSelected"
+      bottom
     >
-      <pre class="mr-1 text-body-2">del</pre>
-      <span v-if="selectedFeatureHandle >= 0">
-        point {{ selectedFeatureHandle }}
-      </span>
-      <span v-else-if="editingMode">
-        {{ editingMode }}
-      </span>
-      <span v-else>unselected</span>
-      <v-icon
-        small
-        class="ml-2"
-      >
-        mdi-delete
-      </v-icon>
-    </v-btn>
+      <template #activator="{ on, attrs }">
+        <v-btn
+          v-bind="attrs"
+          color="error"
+          depressed
+          small
+          v-on="on"
+          @click="deleteSelected"
+        >
+          <span class="mr-1 text-body-2 font-weight-bold">DEL</span>
+          <span v-if="selectedFeatureHandle >= 0">
+            pt{{ selectedFeatureHandle }}
+          </span>
+          <v-icon
+            v-else
+            small
+          >
+            {{ editModeIcon }}
+          </v-icon>
+        </v-btn>
+      </template>
+      <span v-if="selectedFeatureHandle >= 0">Delete point {{ selectedFeatureHandle }}</span>
+      <span v-else-if="editingMode">Delete {{ editingMode }}</span>
+    </v-tooltip>
   </span>
 </template>
diff --git a/client/dive-common/components/EditorMenu.vue b/client/dive-common/components/EditorMenu.vue
index 2a02fdb9e..740c38409 100644
--- a/client/dive-common/components/EditorMenu.vue
+++ b/client/dive-common/components/EditorMenu.vue
@@ -11,6 +11,7 @@ import { flatten } from 'lodash';
 import { Mousetrap } from 'vue-media-annotator/types';
 import { EditAnnotationTypes, VisibleAnnotationTypes } from 'vue-media-annotator/layers';
 import Recipe from 'vue-media-annotator/recipe';
+import SegmentationPointClick from 'dive-common/recipes/segmentationpointclick';
 
 import AnnotationVisibilityMenu from './AnnotationVisibilityMenu.vue';
 
@@ -19,6 +20,7 @@ interface ButtonData {
   icon: string;
   type?: VisibleAnnotationTypes;
   active: boolean;
+  loading?: boolean;
   mousetrap?: Mousetrap[];
   description: string;
   click: () => void;
@@ -75,7 +77,11 @@ export default defineComponent({
       default: true,
     },
   },
-  emits: ['set-annotation-state', 'update:tail-settings', 'update:show-user-created-icon'],
+  emits: [
+    'set-annotation-state',
+    'update:tail-settings',
+    'update:show-user-created-icon',
+  ],
   setup(props, { emit }) {
     const toolTimeTimeout = ref<number | null>(null);
     const STORAGE_KEY = 'editorMenu.editButtonsExpanded';
@@ -129,6 +135,8 @@ export default defineComponent({
           id: r.name,
           icon: r.icon.value || 'mdi-pencil',
           active: props.editingTrack && r.active.value,
+          loading: (r.loading?.value ?? false)
+            || (r instanceof SegmentationPointClick && r.predicting.value),
           description: r.name,
           click: () => r.activate(),
           mousetrap: [
@@ -142,7 +150,9 @@ export default defineComponent({
       ];
     });
 
-    const mousetrap = computed((): Mousetrap[] => flatten(editButtons.value.map((b) => b.mousetrap || [])));
+    const mousetrap = computed((): Mousetrap[] => [
+      ...flatten(editButtons.value.map((b) => b.mousetrap || [])),
+    ]);
 
     const activeEditButton = computed(() => editButtons.value.find((b) => b.active) || editButtons.value[0]);
 
@@ -165,6 +175,13 @@ export default defineComponent({
       if (props.multiSelectActive) {
         return { text: 'Multi-select Mode', icon: 'mdi-call-merge', color: 'error' };
       }
+      if (activeSegmentationRecipe.value) {
+        return {
+          text: `${props.editingDetails === 'Editing' ? 'Editing' : 'Creating'} Segment`,
+          icon: 'mdi-auto-fix',
+          color: props.editingDetails === 'Creating' ? 'success' : 'primary',
+        };
+      }
       if (props.editingDetails !== 'disabled') {
         return {
           text: `${props.editingDetails} ${props.editingMode} `,
@@ -175,6 +192,26 @@ export default defineComponent({
       return { text: 'Not editing', icon: 'mdi-pencil-off-outline', color: '' };
     });
 
+    const activeSegmentationRecipe = computed((): SegmentationPointClick | null => {
+      const segRecipe = props.recipes.find(
+        (r) => r instanceof SegmentationPointClick && r.active.value,
+      ) as SegmentationPointClick | undefined;
+      return segRecipe || null;
+    });
+
+    const segmentationPredicting = computed(
+      () => activeSegmentationRecipe.value?.predicting.value ?? false,
+    );
+
+    const segmentationLoading = computed(() => {
+      const segRecipe = props.recipes.find(
+        (r) => r instanceof SegmentationPointClick,
+      ) as SegmentationPointClick | undefined;
+      return segRecipe?.loading.value ?? false;
+    });
+
+    const segmentationTooltip = 'Left click to add positive points. Middle click or Shift+click for negative points. Right click or Enter to confirm. Escape to cancel.';
+
     const editingTooltip = computed(() => {
       if (props.editingDetails === 'disabled' || !props.editingMode || typeof props.editingMode !== 'string') {
         return '';
@@ -208,6 +245,10 @@ export default defineComponent({
       toggleEditButtonsExpanded,
       activeEditButton,
       editButtonsMenuKey,
+      activeSegmentationRecipe,
+      segmentationPredicting,
+      segmentationLoading,
+      segmentationTooltip,
     };
   },
 });
@@ -248,6 +289,15 @@ export default defineComponent({
               Multi-select in progress.  Editing is disabled.
               Select additional tracks to merge or group.
             </span>
+            <span v-else-if="segmentationLoading">
+              Loading segmentation model...
+            </span>
+            <span v-else-if="segmentationPredicting">
+              Computing segmentation...
+            </span>
+            <span v-else-if="activeSegmentationRecipe">
+              {{ segmentationTooltip }}
+            </span>
             <span v-else-if="editingDetails !== 'disabled' && editingMode && typeof editingMode === 'string'">
               {{ editingTooltip }}
             </span>
@@ -265,7 +315,7 @@ export default defineComponent({
         <template #activator="{ on, attrs }">
           <v-btn
             v-bind="attrs"
-            :disabled="!editingMode"
+            :disabled="!editingMode || activeEditButton?.loading"
             :outlined="!activeEditButton?.active"
             :color="activeEditButton?.active ? editingHeader.color : ''"
             class="mx-1"
@@ -273,7 +323,9 @@ export default defineComponent({
             v-on="on"
           >
             <pre v-if="activeEditButton?.mousetrap">{{ activeEditButton.mousetrap[0].bind }}:</pre>
-            <v-icon>{{ activeEditButton?.icon }}</v-icon>
+            <v-icon :class="{ 'mdi-spin': activeEditButton?.loading }">
+              {{ activeEditButton?.icon }}
+            </v-icon>
             <v-btn
               icon
               x-small
@@ -293,7 +345,7 @@ export default defineComponent({
           >
             <v-list-item-icon>
               <v-btn
-                :disabled="!editingMode"
+                :disabled="!editingMode || button.loading"
                 :outlined="!button.active"
                 :color="button.active ? editingHeader.color : ''"
                 class="mx-1"
@@ -301,7 +353,9 @@ export default defineComponent({
                 @click="button.click"
               >
                 <pre v-if="button.mousetrap">{{ button.mousetrap[0].bind }}:</pre>
-                <v-icon>{{ button.icon }}</v-icon>
+                <v-icon :class="{ 'mdi-spin': button.loading }">
+                  {{ button.icon }}
+                </v-icon>
               </v-btn>
             </v-list-item-icon>
             <v-list-item-content>
@@ -332,7 +386,7 @@ export default defineComponent({
         <v-btn
           v-for="button in editButtons"
           :key="button.id + 'view'"
-          :disabled="!editingMode"
+          :disabled="!editingMode || button.loading"
           :outlined="!button.active"
           :color="button.active ? editingHeader.color : ''"
           class="mx-1"
@@ -340,10 +394,35 @@ export default defineComponent({
           @click="button.click"
         >
           <pre v-if="button.mousetrap">{{ button.mousetrap[0].bind }}:</pre>
-          <v-icon>{{ button.icon }}</v-icon>
+          <v-icon :class="{ 'mdi-spin': button.loading }">
+            {{ button.icon }}
+          </v-icon>
         </v-btn>
       </template>
-      <slot name="delete-controls" />
+      <!-- Segmentation Reset button -->
+      <template v-if="activeSegmentationRecipe && editingMode === 'Point'">
+        <v-divider
+          vertical
+          class="mx-2"
+        />
+        <v-btn
+          color="error"
+          class="mx-1"
+          small
+          :disabled="!activeSegmentationRecipe.hasPoints() || segmentationPredicting"
+          @click="activeSegmentationRecipe.resetPoints()"
+        >
+          <v-icon left>
+            mdi-close
+          </v-icon>
+          Reset
+        </v-btn>
+      </template>
+      <!-- Hide delete controls when in segmentation mode -->
+      <slot
+        v-if="!activeSegmentationRecipe"
+        name="delete-controls"
+      />
       <slot name="multicam-controls-left" />
       <v-spacer />
       <slot name="multicam-controls-right" />
diff --git a/client/dive-common/components/Sidebar.vue b/client/dive-common/components/Sidebar.vue
index aeeb45802..3e37c0ebb 100644
--- a/client/dive-common/components/Sidebar.vue
+++ b/client/dive-common/components/Sidebar.vue
@@ -49,6 +49,10 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
+    isStereoDataset: {
+      type: Boolean,
+      default: false,
+    },
   },
 
   setup() {
@@ -230,6 +234,7 @@ export default defineComponent({
             <template slot="settings">
               <TrackSettingsPanel
                 :all-types="allTypesRef"
+                :is-stereo-dataset="isStereoDataset"
               />
             </template>
           </TrackList>
@@ -313,6 +318,7 @@ export default defineComponent({
           <template slot="settings">
             <TrackSettingsPanel
               :all-types="allTypesRef"
+              :is-stereo-dataset="isStereoDataset"
             />
           </template>
           <template #header-trailing>
diff --git a/client/dive-common/components/TrackSettingsPanel.vue b/client/dive-common/components/TrackSettingsPanel.vue
index 90ed67ed9..fa00103ee 100644
--- a/client/dive-common/components/TrackSettingsPanel.vue
+++ b/client/dive-common/components/TrackSettingsPanel.vue
@@ -7,6 +7,7 @@ import {
   computed,
 } from 'vue';
 import { clientSettings } from 'dive-common/store/settings';
+import isDesktopRuntime from 'dive-common/isDesktopRuntime';
 
 export default defineComponent({
   name: 'TrackSettingsPanel',
@@ -16,6 +17,10 @@ export default defineComponent({
       type: Array as PropType<Array<string>>,
       required: true,
     },
+    isStereoDataset: {
+      type: Boolean,
+      default: false,
+    },
   },
 
   setup(props) {
@@ -32,6 +37,9 @@ export default defineComponent({
       prompt: 'Prompt user before deleting a track?',
       filterTracksByFrame: 'Filter the track list by those with detections in the current frame',
       autoZoom: 'Automatically zoom to the track when selected',
+      showMultiCamToolbar: 'Show multi-camera tools in the top toolbar when a track is selected',
+      stereoUpdateLengths: 'When a line annotation is modified on a detection that is linked across both cameras, recompute its stereo measurement (length, midpoint, range, RMS) automatically.',
+      stereoAutoCompute: 'When an annotation is drawn on one camera and the other camera has no detection for it yet, automatically warp it to the other camera using stereo disparity.',
     });
     const modes = ref(['Track', 'Detection']);
     // Add unknown as the default type to the typeList
@@ -39,6 +47,7 @@ export default defineComponent({
 
     return {
       clientSettings,
+      isDesktopRuntime: isDesktopRuntime(),
       itemHeight,
       help,
       modes,
@@ -322,6 +331,121 @@ export default defineComponent({
           </v-tooltip>
         </v-col>
       </v-row>
+      <v-divider class="my-2" />
+      <div class="subheading">
+        Multi-Camera Settings
+      </div>
+      <v-row
+        align="end"
+        dense
+      >
+        <v-col class="py-1">
+          <v-switch
+            v-model="clientSettings.multiCamSettings.showToolbar"
+            class="my-0 ml-1 pt-0"
+            dense
+            label="Show Toolbar"
+            hide-details
+          />
+        </v-col>
+        <v-col
+          cols="2"
+          class="py-1"
+          align="right"
+        >
+          <v-tooltip
+            open-delay="200"
+            max-width="200"
+            bottom
+          >
+            <template #activator="{ on }">
+              <v-icon
+                small
+                v-on="on"
+              >
+                mdi-help
+              </v-icon>
+            </template>
+            <span>{{ help.showMultiCamToolbar }}</span>
+          </v-tooltip>
+        </v-col>
+      </v-row>
+      <template v-if="isStereoDataset && isDesktopRuntime">
+        <v-divider class="my-2" />
+        <div class="subheading">
+          Stereo Settings
+        </div>
+        <v-row
+          align="end"
+          dense
+        >
+          <v-col class="py-1">
+            <v-switch
+              v-model="clientSettings.stereoSettings.updateLengthsOnModify"
+              class="my-0 ml-1 pt-0"
+              dense
+              label="Update lengths when modified"
+              hide-details
+            />
+          </v-col>
+          <v-col
+            cols="2"
+            class="py-1"
+            align="right"
+          >
+            <v-tooltip
+              open-delay="200"
+              max-width="200"
+              bottom
+            >
+              <template #activator="{ on }">
+                <v-icon
+                  small
+                  v-on="on"
+                >
+                  mdi-help
+                </v-icon>
+              </template>
+              <span>{{ help.stereoUpdateLengths }}</span>
+            </v-tooltip>
+          </v-col>
+        </v-row>
+        <v-row
+          align="end"
+          dense
+        >
+          <v-col class="py-1">
+            <v-switch
+              v-model="clientSettings.stereoSettings.autoComputeOtherCamera"
+              class="my-0 ml-1 pt-0"
+              dense
+              label="Auto-compute location on other camera"
+              hide-details
+            />
+          </v-col>
+          <v-col
+            cols="2"
+            class="py-1"
+            align="right"
+          >
+            <v-tooltip
+              open-delay="200"
+              max-width="200"
+              bottom
+            >
+              <template #activator="{ on }">
+                <v-icon
+                  small
+                  v-on="on"
+                >
+                  mdi-help
+                </v-icon>
+              </template>
+              <span>{{ help.stereoAutoCompute }}</span>
+            </v-tooltip>
+          </v-col>
+        </v-row>
+      </template>
     </v-card>
   </div>
 </template>
diff --git a/client/dive-common/components/UserSettingsDialog.vue b/client/dive-common/components/UserSettingsDialog.vue
index 57da52aca..d5c69d7b1 100644
--- a/client/dive-common/components/UserSettingsDialog.vue
+++ b/client/dive-common/components/UserSettingsDialog.vue
@@ -1,6 +1,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { clientSettings } from 'dive-common/store/settings';
+import isDesktopRuntime from 'dive-common/isDesktopRuntime';
 
 export default defineComponent({
   name: 'UserSettingsDialog',
@@ -11,10 +12,9 @@ export default defineComponent({
     },
   },
   setup() {
-    const isDesktopRuntime = typeof window !== 'undefined' && 'diveDesktop' in window;
     return {
       clientSettings,
-      isDesktopRuntime,
+      isDesktopRuntime: isDesktopRuntime(),
     };
   },
 });
diff --git a/client/dive-common/components/Viewer.vue b/client/dive-common/components/Viewer.vue
index 4b60ed02d..42314697d 100644
--- a/client/dive-common/components/Viewer.vue
+++ b/client/dive-common/components/Viewer.vue
@@ -37,6 +37,7 @@ import { getResponseError } from 'vue-media-annotator/utils';
 /* DIVE COMMON */
 import PolygonBase from 'dive-common/recipes/polygonbase';
 import HeadTail from 'dive-common/recipes/headtail';
+import SegmentationPointClick from 'dive-common/recipes/segmentationpointclick';
 import EditorMenu from 'dive-common/components/EditorMenu.vue';
 import ConfidenceFilter from 'dive-common/components/ConfidenceFilter.vue';
 import UserGuideButton from 'dive-common/components/UserGuideButton.vue';
@@ -53,7 +54,12 @@ import ControlsContainer from 'dive-common/components/ControlsContainer.vue';
 import Sidebar from 'dive-common/components/Sidebar.vue';
 import BottomPanel from 'dive-common/components/BottomPanel.vue';
 import { useModeManager, useSave, useLassoMode } from 'dive-common/use';
-import clientSettingsSetup, { clientSettings } from 'dive-common/store/settings';
+import type {
+  StereoAnnotationCompleteParams,
+  StereoAnnotationResetParams,
+  StereoSegmentationFinalizeParams,
+} from 'dive-common/use/useModeManager';
+import clientSettingsSetup, { clientSettings, isStereoInteractiveModeEnabled } from 'dive-common/store/settings';
 import { useApi, FrameImage, DatasetType } from 'dive-common/apispec';
 import { orderedMultiCamCameraNames } from 'dive-common/multicamDisplay';
 import { usePrompt } from 'dive-common/vue-utilities/prompt-service';
@@ -145,6 +151,7 @@ export default defineComponent({
     const imageData = ref({ singleCam: [] } as Record<string, FrameImage[]>);
     const datasetType: Ref<DatasetType> = ref('image-sequence');
     const datasetName = ref('');
+    const subType = ref(null as string | null);
     const saveInProgress = ref(false);
     const videoUrl: Ref<Record<string, string>> = ref({});
     const {
@@ -163,6 +170,8 @@ export default defineComponent({
     const controlsRef = ref();
     const controlsHeight = ref(0);
     const controlsCollapsed = ref(false);
+
+    const sideBarCollapsed = ref(false);
     // Sidebar mode: 'left', 'bottom', or 'collapsed'
     const getInitialSidebarMode = (): 'left' | 'bottom' | 'collapsed' => {
       const defaultMode = clientSettings.layoutSettings.sidebarPosition as 'left' | 'bottom' | 'collapsed';
@@ -256,9 +265,14 @@ export default defineComponent({
       setSVGFilters,
     } = useImageEnhancements();
 
+    const segmentationRecipe = new SegmentationPointClick();
+    const segmentationCursorLoading = computed(
+      () => segmentationRecipe.loading.value || segmentationRecipe.predicting.value,
+    );
     const recipes = [
       new PolygonBase(),
       new HeadTail(),
+      segmentationRecipe,
     ];
 
     const vuetify = inject('vuetify') as Vuetify;
@@ -325,6 +339,7 @@ export default defineComponent({
       selectedKey,
       selectedCamera,
       editingTrack,
+      segmentationPoints,
     } = useModeManager({
       recipes,
       trackFilterControls: trackFilters,
@@ -332,6 +347,15 @@ export default defineComponent({
       cameraStore,
       aggregateController,
       readonlyState,
+      onStereoAnnotationComplete: (params: StereoAnnotationCompleteParams) => {
+        emit('stereo-annotation-complete', params);
+      },
+      onStereoAnnotationReset: (params: StereoAnnotationResetParams) => {
+        emit('stereo-annotation-reset', params);
+      },
+      onStereoSegmentationFinalize: (params?: StereoSegmentationFinalizeParams) => {
+        emit('stereo-segmentation-finalize', params);
+      },
     });
 
     const {
@@ -491,6 +515,14 @@ export default defineComponent({
         trackStore.insert(newTrack, { imported: false });
       }
       handler.trackSelect(newTrack.id);
+
+      // In interactive stereo mode, a freshly linked pair should get its stereo
+      // 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()) {
+        emit('stereo-track-linked', baseTrack);
+      }
     }
     watch(linkingTrack, () => {
       if (linkingTrack.value !== null && selectedTrackId.value !== null) {
@@ -706,18 +738,47 @@ export default defineComponent({
       }
       emit('change-camera', camera);
     };
+    // While drawing a brand-new detection (selected track has no geometry yet on
+    // this frame), the user may start the draw on any camera. Detect that so the
+    // camera-view mousedown doesn't steal the draw — preventDefault would kill a
+    // rectangle's mousedown-drag. The draw is routed to the drawn-on camera in
+    // LayerManager's update:geojson handler instead.
+    const isCreatingNewDetection = (): boolean => {
+      if (selectedTrackId.value === null || !editingTrack.value) {
+        return false;
+      }
+      const track = cameraStore.getPossibleTrack(selectedTrackId.value, selectedCamera.value);
+      if (!track) {
+        return false;
+      }
+      return track.getFeature(aggregateController.value.frame.value)[0] == null;
+    };
     // Handles changing camera using the dropdown or mouse clicks
     // When using mouse clicks and right button it will remain in edit mode for the selected track
     const changeCamera = (camera: string, event?: MouseEvent) => {
       if (selectedCamera.value === camera) {
         return;
       }
+      // Don't intercept clicks mid-creation; let the draw land on this camera.
+      // The draw is routed to the drawn-on camera in LayerManager's update handler.
+      if (isCreatingNewDetection()) {
+        return;
+      }
       if (event) {
         event.preventDefault();
       }
-      // Left click should kick out of editing mode automatically
+      // Left click should kick out of editing mode, unless the selected track
+      // exists on the target camera (e.g. a stereo-warped annotation) — in that
+      // case preserve editing so the user can immediately adjust it.
       if (event?.button === 0) {
-        editingTrack.value = false;
+        if (selectedTrackId.value !== null) {
+          const targetTrack = cameraStore.getPossibleTrack(selectedTrackId.value, camera);
+          if (!targetTrack) {
+            editingTrack.value = false;
+          }
+        } else {
+          editingTrack.value = false;
+        }
       }
       selectCamera(camera, event?.button === 2);
       emit('change-camera', camera);
@@ -758,6 +819,7 @@ export default defineComponent({
           setImageEnhancements(meta.imageEnhancements);
         }
         datasetName.value = meta.name;
+        subType.value = meta.subType || null;
         initTime({
           frameRate: meta.fps,
           originalFps: meta.originalFps || null,
@@ -923,6 +985,10 @@ export default defineComponent({
 
     watch(datasetId, reloadAnnotations);
     watch(readonlyState, () => handler.trackSelect(null, false));
+    // Update segmentation recipe when frame changes to show only current frame's points
+    watch(() => time.frame.value, (newFrame) => {
+      segmentationRecipe.handleFrameChange(newFrame);
+    });
 
     function handleResize() {
       if (controlsRef.value) {
@@ -991,6 +1057,8 @@ export default defineComponent({
         annotationSet: toRef(props, 'currentSet'),
         annotationSets: sets,
         comparisonSets: toRef(props, 'comparisonSets'),
+        segmentationPoints,
+        segmentationCursorLoading,
         selectedCamera,
         selectedKey,
         selectedTrackId,
@@ -1164,6 +1232,7 @@ export default defineComponent({
       controlsRef,
       controlsHeight,
       controlsCollapsed,
+      sideBarCollapsed,
       sidebarMode,
       cycleSidebarMode,
       sidebarModeIcon,
@@ -1174,6 +1243,7 @@ export default defineComponent({
       clientSettings,
       datasetName,
       datasetType,
+      subType,
       editingTrack,
       editingMode,
       editingDetails,
@@ -1192,6 +1262,7 @@ export default defineComponent({
       showUserSettingsDialog,
       playbackComponent,
       recipes,
+      segmentationRecipe,
       selectedFeatureHandle,
       selectedTrackId,
       editingGroupId,
@@ -1366,6 +1437,8 @@ export default defineComponent({
               class="mr-2"
               @delete-point="handler.removePoint"
               @delete-annotation="handler.removeAnnotation"
+              @add-hole="handler.addHole"
+              @add-polygon="handler.addPolygon"
             />
           </template>
           <template
@@ -1484,6 +1557,7 @@ export default defineComponent({
     >
       <sidebar
         v-if="sidebarMode === 'left'"
+        :is-stereo-dataset="subType === 'stereo'"
         @import-types="trackFilters.importTypes($event)"
         @track-seek="seekToFrame($event)"
       >
@@ -1534,7 +1608,9 @@ export default defineComponent({
             >
               <component
                 :is="datasetType === 'image-sequence' ? 'image-annotator'
-                  : datasetType === 'video' ? 'video-annotator' : 'large-image-annotator'"
+                  : datasetType === 'video'
+                    ? 'video-annotator'
+                    : 'large-image-annotator'"
                 v-if="(imageData[camera].length || videoUrl[camera]) && progress.loaded"
                 ref="subPlaybackComponent"
                 class="fill-height"
@@ -1655,6 +1731,7 @@ export default defineComponent({
           </div>
           <BottomPanel
             :sidebar-mode="sidebarMode"
+            :is-stereo-dataset="subType === 'stereo'"
             :controls-ref="controlsRef"
             :controls-collapsed.sync="controlsCollapsed"
             :line-chart-data="lineChartData"
diff --git a/client/dive-common/isDesktopRuntime.ts b/client/dive-common/isDesktopRuntime.ts
new file mode 100644
index 000000000..78201fd50
--- /dev/null
+++ b/client/dive-common/isDesktopRuntime.ts
@@ -0,0 +1,4 @@
+/** True when running inside the Electron desktop app (not web Girder). */
+export default function isDesktopRuntime(): boolean {
+  return typeof window !== 'undefined' && 'diveDesktop' in window;
+}
diff --git a/client/dive-common/recipes/headtail.ts b/client/dive-common/recipes/headtail.ts
index 3e26686d2..5afff9115 100644
--- a/client/dive-common/recipes/headtail.ts
+++ b/client/dive-common/recipes/headtail.ts
@@ -27,6 +27,8 @@ const PaddingVectorZero: [number, number][] = [
   [1, 0],
   [0, 0],
 ];
+/* Cap how skinny a line's box may get: longer side at most this x the shorter. */
+const MAX_BOX_ASPECT_RATIO = 6;
 
 export default class HeadTail implements Recipe {
   active: Ref<boolean>;
@@ -35,6 +37,9 @@ export default class HeadTail implements Recipe {
 
   private startWithHead: boolean;
 
+  /* Whether the track had bounds before line creation started */
+  private hadBoundsOnCreate: boolean;
+
   bus: Vue;
 
   toggleable: Ref<boolean>;
@@ -44,6 +49,7 @@ export default class HeadTail implements Recipe {
   constructor() {
     this.bus = new Vue();
     this.startWithHead = true;
+    this.hadBoundsOnCreate = false;
     this.active = ref(false);
     this.name = 'HeadTail';
     this.toggleable = ref(true);
@@ -102,6 +108,58 @@ export default class HeadTail implements Recipe {
     return (results.filter((item) => item).length === coords.length);
   }
 
+  /**
+   * Compute a tight axis-aligned bounding box around coords, expanded by fraction
+   * (e.g. 0.10 = 10% larger in each dimension).
+   */
+  private static tightBoundsExpanded(
+    coords: GeoJSON.Position[],
+    fraction: number,
+  ): GeoJSON.Polygon[] {
+    const xs = coords.map((c) => c[0]);
+    const ys = coords.map((c) => c[1]);
+    const minX = Math.min(...xs);
+    const maxX = Math.max(...xs);
+    const minY = Math.min(...ys);
+    const maxY = Math.max(...ys);
+    const width = maxX - minX;
+    const height = maxY - minY;
+    // Use the other dimension as fallback for degenerate (zero-width/height) cases
+    const padX = width * fraction || height * fraction;
+    const padY = height * fraction || width * fraction;
+    let x0 = minX - padX;
+    let x1 = maxX + padX;
+    let y0 = minY - padY;
+    let y1 = maxY + padY;
+
+    // Cap the aspect ratio so a near-horizontal/vertical line doesn't make a
+    // razor-thin box: grow the shorter side about its center until the
+    // longer:shorter ratio is at most MAX_BOX_ASPECT_RATIO.
+    const boxW = x1 - x0;
+    const boxH = y1 - y0;
+    if (boxW > 0 && boxH > 0) {
+      if (boxW / boxH > MAX_BOX_ASPECT_RATIO) {
+        const grow = (boxW / MAX_BOX_ASPECT_RATIO - boxH) / 2;
+        y0 -= grow;
+        y1 += grow;
+      } else if (boxH / boxW > MAX_BOX_ASPECT_RATIO) {
+        const grow = (boxH / MAX_BOX_ASPECT_RATIO - boxW) / 2;
+        x0 -= grow;
+        x1 += grow;
+      }
+    }
+    return [{
+      type: 'Polygon',
+      coordinates: [[
+        [x0, y0],
+        [x0, y1],
+        [x1, y1],
+        [x1, y0],
+        [x0, y0],
+      ]],
+    }];
+  }
+
   private static makeGeom(ls: GeoJSON.LineString, startWithHead: boolean) {
     const firstFeature: GeoJSON.Feature<GeoJSON.Point> = {
       type: 'Feature',
@@ -187,14 +245,19 @@ export default class HeadTail implements Recipe {
           } as GeoJSON.LineString;
         }
         if (geom.coordinates.length === 2) {
-          let union = HeadTail.findBounds(geom, PaddingVector);
+          let union: GeoJSON.Polygon[];
           if (bounds !== null) {
             // If both are inside of the bbox don't adjust the union
             if (HeadTail.coordsInBounds(bounds, geom.coordinates)) {
               union = [];
             } else if (tail.length > 0) { // If creating new box add padding
               union = HeadTail.findBounds(geom, PaddingVectorZero);
+            } else {
+              union = HeadTail.findBounds(geom, PaddingVector);
             }
+          } else {
+            // No existing box: make box 10% larger than tight box around vertices
+            union = HeadTail.tightBoundsExpanded(geom.coordinates, 0.10);
           }
           // Both head and tail placed, replace them.
           return {
@@ -206,7 +269,8 @@ export default class HeadTail implements Recipe {
           } as UpdateResponse;
         }
         if (geom.coordinates.length === 1) {
-          // Only the head placed so far
+          // Only the head placed so far — record if the track already had bounds
+          this.hadBoundsOnCreate = bounds !== null;
           let union = HeadTail.findBounds(geom, PaddingVector);
           if (bounds !== null) {
             if (HeadTail.coordsInBounds(bounds, geom.coordinates)) {
@@ -226,6 +290,16 @@ export default class HeadTail implements Recipe {
       /**
        * IF recipe isn't active, but the key matches, we are editing
        */
+        if (this.active.value && !this.hadBoundsOnCreate) {
+          // Creating a new line on a track without a pre-existing box:
+          // use unionWithoutBounds to replace interim bounds with 10% expanded box
+          return {
+            ...EmptyResponse,
+            data: HeadTail.makeGeom(linestring.geometry, true),
+            unionWithoutBounds: HeadTail.tightBoundsExpanded(linestring.geometry.coordinates, 0.20),
+            done: true,
+          };
+        }
         return {
           ...EmptyResponse,
           data: HeadTail.makeGeom(linestring.geometry, true),
diff --git a/client/dive-common/recipes/polygonbase.ts b/client/dive-common/recipes/polygonbase.ts
index 1caae557a..8fe53cea3 100644
--- a/client/dive-common/recipes/polygonbase.ts
+++ b/client/dive-common/recipes/polygonbase.ts
@@ -8,6 +8,49 @@ import { EditAnnotationTypes } from 'vue-media-annotator/layers';
 
 const EmptyResponse = { data: {}, union: [], unionWithoutBounds: [] };
 
+/**
+ * Check if a point is inside a polygon using ray casting algorithm
+ * @param point [x, y] coordinates
+ * @param polygon array of [x, y] coordinates forming the polygon (outer ring only)
+ * @returns true if point is inside polygon
+ */
+function isPointInsidePolygon(point: [number, number], polygon: GeoJSON.Position[]): boolean {
+  const [x, y] = point;
+  let inside = false;
+
+  for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i, i += 1) {
+    const xi = polygon[i][0];
+    const yi = polygon[i][1];
+    const xj = polygon[j][0];
+    const yj = polygon[j][1];
+
+    const intersect = ((yi > y) !== (yj > y))
+      && (x < ((xj - xi) * (y - yi)) / (yj - yi) + xi);
+
+    if (intersect) {
+      inside = !inside;
+    }
+  }
+
+  return inside;
+}
+
+/**
+ * Check if all vertices of polygon P are inside polygon E
+ * @param innerPolygon polygon to check if it's inside
+ * @param outerPolygon polygon to check if it contains the inner polygon
+ * @returns true if all vertices of innerPolygon are inside outerPolygon
+ */
+function isPolygonInsidePolygon(
+  innerPolygon: GeoJSON.Position[],
+  outerPolygon: GeoJSON.Position[],
+): boolean {
+  // Check if all vertices of the inner polygon are inside the outer polygon
+  return innerPolygon.every(
+    (vertex) => isPointInsidePolygon([vertex[0], vertex[1]], outerPolygon),
+  );
+}
+
 export default class PolygonBoundsExpand implements Recipe {
   active: Ref<boolean>;
 
@@ -19,12 +62,41 @@ export default class PolygonBoundsExpand implements Recipe {
 
   bus: Vue;
 
+  // Mode for adding polygons: 'normal', 'hole', or 'newPolygon'
+  addingMode: Ref<'normal' | 'hole' | 'newPolygon'>;
+
   constructor() {
     this.bus = new Vue();
     this.active = ref(false);
     this.name = 'PolygonBase';
     this.toggleable = ref(true);
     this.icon = ref('mdi-vector-polygon');
+    this.addingMode = ref('normal');
+  }
+
+  setAddingHole() {
+    this.addingMode.value = 'hole';
+    // Emit activate event with special key to trigger creation mode
+    // The special key ensures no geometry matches, forcing creation mode
+    this.bus.$emit('activate', {
+      editing: 'Polygon' as EditAnnotationTypes,
+      key: '__adding_hole__',
+      recipeName: this.name,
+    });
+  }
+
+  setAddingPolygon(newKey: string) {
+    this.addingMode.value = 'newPolygon';
+    // Emit activate event with new key to trigger creation mode
+    this.bus.$emit('activate', {
+      editing: 'Polygon' as EditAnnotationTypes,
+      key: newKey,
+      recipeName: this.name,
+    });
+  }
+
+  resetAddingMode() {
+    this.addingMode.value = 'normal';
   }
 
   update(
@@ -37,12 +109,89 @@ export default class PolygonBoundsExpand implements Recipe {
     if (data.length === 1 && mode === 'editing' && this.active.value) {
       const poly = data[0].geometry;
       if (poly.type === 'Polygon') {
+        const newPolyCoords = poly.coordinates[0] as GeoJSON.Position[];
+        const currentMode = this.addingMode.value;
+
+        // Reset adding mode after processing
+        this.resetAddingMode();
+
+        if (currentMode === 'hole' || key === '__adding_hole__') {
+          // Adding a hole - find the first polygon and add hole to it
+          const existingPolygons = track.getPolygonFeatures(frameNum);
+          if (existingPolygons.length > 0) {
+            // Add as hole to the first (default) polygon
+            const targetPoly = existingPolygons[0];
+            // Create updated polygon geometry with the hole added
+            const updatedCoordinates = [
+              ...targetPoly.geometry.coordinates,
+              newPolyCoords,
+            ];
+            const updatedPolygon: GeoJSON.Polygon = {
+              type: 'Polygon',
+              coordinates: updatedCoordinates,
+            };
+            const updatedFeature: GeoJSON.Feature<GeoJSON.Polygon> = {
+              type: 'Feature',
+              properties: { key: targetPoly.key },
+              geometry: updatedPolygon,
+            };
+            // Return data like add polygon mode so right-click behavior is consistent
+            return {
+              data: {
+                [targetPoly.key]: [updatedFeature],
+              },
+              union: [],
+              done: true,
+              unionWithoutBounds: [],
+              newSelectedKey: targetPoly.key, // Set to target polygon's key for proper mode transition
+            };
+          }
+          // No existing polygon, treat as normal (create first polygon)
+          return {
+            data: {
+              '': data,
+            },
+            union: [],
+            done: true,
+            unionWithoutBounds: [poly],
+            newSelectedKey: '',
+          };
+        }
+
+        if (currentMode === 'newPolygon') {
+          // Adding a new separate polygon - key should already be set to new value
+          const useKey = key || track.getNextPolygonKey(frameNum);
+          const newFeature: GeoJSON.Feature<GeoJSON.Polygon> = {
+            type: 'Feature',
+            properties: { key: useKey },
+            geometry: poly,
+          };
+          return {
+            data: {
+              [useKey]: [newFeature],
+            },
+            union: [poly], // Use union to EXPAND bounds, not replace them
+            done: true,
+            unionWithoutBounds: [],
+            newSelectedKey: '', // Reset to default polygon for future edits
+          };
+        }
+
+        // Standard case: save polygon with the given key
+        // Calculate bounds from ALL polygons in the detection, not just the edited one
+        const allPolygons = track.getPolygonFeatures(frameNum);
+        const otherPolygons: GeoJSON.Polygon[] = allPolygons
+          .filter((p) => p.key !== (key || ''))
+          .map((p) => p.geometry);
+
         return {
           data: {
             [key || '']: data,
           },
-          union: [],
+          // Use union with other polygons to ensure bounds encompass all
+          union: otherPolygons,
           done: true,
+          // The edited polygon replaces the base bounds
           unionWithoutBounds: [poly],
         };
       }
@@ -50,19 +199,61 @@ export default class PolygonBoundsExpand implements Recipe {
     return EmptyResponse;
   }
 
+  /**
+   * Add a polygon as a hole to an existing polygon, or as a new separate polygon.
+   * Call this method explicitly when auto-hole detection is desired.
+   */
+  // eslint-disable-next-line class-methods-use-this
+  addPolygonWithHoleDetection(
+    frameNum: number,
+    track: Track,
+    poly: GeoJSON.Polygon,
+    key?: string,
+  ) {
+    const newPolyCoords = poly.coordinates[0] as GeoJSON.Position[];
+
+    // Get existing polygons for this frame
+    const existingPolygons = track.getPolygonFeatures(frameNum);
+
+    // Check if this is an edit to an existing polygon (key matches)
+    const isExistingEdit = existingPolygons.some((p) => p.key === (key || ''));
+
+    if (!isExistingEdit && existingPolygons.length > 0) {
+      // This is a new polygon - check if it should be a hole in an existing polygon
+      const containingPoly = existingPolygons.find((existingPoly) => {
+        const outerRing = existingPoly.geometry.coordinates[0] as GeoJSON.Position[];
+        return isPolygonInsidePolygon(newPolyCoords, outerRing);
+      });
+
+      if (containingPoly) {
+        // New polygon is inside existing polygon - add as hole
+        track.addHoleToPolygon(frameNum, containingPoly.key, newPolyCoords);
+        return { isHole: true, key: containingPoly.key };
+      }
+
+      // Not inside any existing polygon - add as new separate polygon with auto-key
+      const newKey = track.getNextPolygonKey(frameNum);
+      return { isHole: false, key: newKey };
+    }
+
+    // Standard case: use provided key or default
+    return { isHole: false, key: key || '' };
+  }
+
   // eslint-disable-next-line class-methods-use-this
   delete(frame: number, track: Track, key: string, type: EditAnnotationTypes) {
-    if (key === '' && type === 'Polygon') {
-      track.removeFeatureGeometry(frame, { key: '', type: 'Polygon' });
+    if (type === 'Polygon') {
+      // Remove polygon with the specified key (supports multiple polygons)
+      track.removeFeatureGeometry(frame, { key, type: 'Polygon' });
     }
   }
 
   // eslint-disable-next-line class-methods-use-this
   deletePoint(frame: number, track: Track, idx: number, key: string, type: EditAnnotationTypes) {
-    if (key === '' && type === 'Polygon') {
+    if (type === 'Polygon') {
       const geoJsonFeatures = track.getFeatureGeometry(frame, {
         type: 'Polygon',
-        key: '',
+        key,
       });
       if (geoJsonFeatures.length === 0) return;
       const clone = cloneDeep(geoJsonFeatures[0]);
diff --git a/client/dive-common/recipes/segmentationpointclick.ts b/client/dive-common/recipes/segmentationpointclick.ts
new file mode 100644
index 000000000..151d05e75
--- /dev/null
+++ b/client/dive-common/recipes/segmentationpointclick.ts
@@ -0,0 +1,834 @@
+/**
+ * Segmentation Point-Click Recipe
+ *
+ * Allows users to click on objects to automatically generate segmentation
+ * masks using point-based segmentation models.
+ *
+ * Usage:
+ * - Activate with 's' hotkey or Segment button
+ * - Left-click: Add foreground point (include in segmentation)
+ * - Shift+click or Middle-click: Add background point (exclude from segmentation)
+ * - Right-click: Confirm and lock the annotation
+ * - Enter: Confirm and commit the segmentation
+ * - Escape: Cancel and clear points
+ *
+ * Multi-frame support:
+ * - Points are tracked per-frame
+ * - When switching frames, previous frame's points are saved
+ * - Visual dots only show for the current frame
+ * - Confirming commits all frames with valid polygons
+ *
+ * Error handling:
+ * - If first point fails, segmentation is deactivated
+ * - If subsequent points fail, the point is rejected with message
+ *   "Latest point rejected by segmentation method"
+ */
+
+import Vue, { ref, Ref } from 'vue';
+
+import Track from 'vue-media-annotator/track';
+import Recipe, { UpdateResponse } from 'vue-media-annotator/recipe';
+import { EditAnnotationTypes } from 'vue-media-annotator/layers';
+import { Mousetrap } from 'vue-media-annotator/types';
+import { SegmentationPredictRequest, SegmentationPredictResponse } from 'dive-common/apispec';
+import isDesktopRuntime from 'dive-common/isDesktopRuntime';
+
+export const SegmentationPolygonKey = 'SegmentationPolygon';
+
+const EmptyResponse: UpdateResponse = {
+  data: {},
+  union: [],
+  unionWithoutBounds: [],
+};
+
+export interface SegmentationRecipeOptions {
+  /**
+   * Function to call segmentation predict API (platform-specific)
+   * @param request - The prediction request with points and labels
+   * @param frameNum - The current frame number (useful for web platform)
+   */
+  predictFn: (request: SegmentationPredictRequest, frameNum: number) => Promise<SegmentationPredictResponse>;
+  /** Function to get image path for current frame (used by desktop platform) */
+  getImagePath: (frameNum: number) => string;
+  /** Optional function to get the time in seconds for a given frame (for video seek) */
+  getFrameTime?: (frameNum: number) => number | undefined;
+  /**
+   * Optional function to initialize the segmentation service.
+   * Called when the recipe is activated (user clicks Segment button).
+   * Should throw an error if initialization fails.
+   */
+  initializeServiceFn?: () => Promise<void>;
+}
+
+/** Callback data when prediction completes */
+export interface SegmentationPredictionResult {
+  polygon: [number, number][];
+  bounds: [number, number, number, number] | null;
+  frameNum: number;
+  /** RLE-encoded full-resolution mask for display */
+  rleMask?: [number, number][];
+  /** Mask dimensions [height, width] */
+  maskShape?: [number, number];
+  /** Control points used for this prediction (for stereo warping) */
+  controlPoints?: {
+    points: [number, number][];
+    labels: number[];
+  };
+}
+
+/** Data stored per frame for multi-frame segmentation */
+interface FrameSegmentationData {
+  points: [number, number][];
+  labels: number[];
+  polygon: [number, number][] | null;
+  bounds: [number, number, number, number] | null;
+  lowResMask: number[][] | null;
+  rleMask: [number, number][] | null;
+  maskShape: [number, number] | null;
+}
+
+/** Result containing all frames for multi-frame confirmation */
+export interface MultiFrameSegmentationResult {
+  /** Map of frame number to segmentation result */
+  frames: Map<number, SegmentationPredictionResult>;
+}
+
+/**
+ * Segmentation Point-Click Recipe
+ *
+ * This recipe captures point clicks and uses segmentation models to generate polygons.
+ */
+export default class SegmentationPointClick implements Recipe {
+  active: Ref<boolean>;
+
+  name: string;
+
+  bus: Vue;
+
+  toggleable: Ref<boolean>;
+
+  icon: Ref<string>;
+
+  /** Platform-specific segmentation predict function */
+  private predictFn: ((request: SegmentationPredictRequest, frameNum: number) => Promise<SegmentationPredictResponse>) | null = null;
+
+  /** Function to get image path for current frame */
+  private getImagePath: ((frameNum: number) => string) | null = null;
+
+  /** Function to get the time in seconds for a given frame (for video seek) */
+  private getFrameTime: ((frameNum: number) => number | undefined) | null = null;
+
+  /** Function to initialize the segmentation service (called on activation) */
+  private initializeServiceFn: (() => Promise<void>) | null = null;
+
+  /** Whether the service has been successfully initialized */
+  private serviceInitialized: boolean = false;
+
+  /** Whether activation is pending (waiting for async init to complete) */
+  private pendingActivation: boolean = false;
+
+  /** Accumulated points for current frame's segmentation */
+  private points: [number, number][] = [];
+
+  /** Labels for accumulated points (1=foreground, 0=background) */
+  private pointLabels: number[] = [];
+
+  /** Low-res mask from last prediction (for refinement) */
+  private lastLowResMask: number[][] | null = null;
+
+  /** Pending polygon from async prediction */
+  private pendingPolygon: [number, number][] | null = null;
+
+  /** Pending bounds from async prediction */
+  private pendingBounds: [number, number, number, number] | null = null;
+
+  /** Pending RLE mask from async prediction (for display) */
+  private pendingRleMask: [number, number][] | null = null;
+
+  /** Pending mask shape from async prediction */
+  private pendingMaskShape: [number, number] | null = null;
+
+  /** Number of in-flight predictions (supports rapid successive clicks) */
+  private pendingPredictionCount: number = 0;
+
+  /** Delayed timer before showing the predicting UI state */
+  private predictionLoadingTimer: ReturnType<typeof setTimeout> | null = null;
+
+  private static readonly PREDICTION_LOADING_DELAY_MS = 400;
+
+  /** Whether segmentation calculation is in progress (shown after a short delay) */
+  predicting: Ref<boolean>;
+
+  /** Whether points were reset since last activation (to distinguish from initial entry) */
+  private _wasReset: boolean = false;
+
+  /** Current frame number */
+  private currentFrame: number = 0;
+
+  /** Per-frame segmentation data for multi-frame support */
+  private frameData: Map<number, FrameSegmentationData> = new Map();
+
+  /** Whether the recipe is currently loading (initializing the service) */
+  loading: Ref<boolean>;
+
+  constructor() {
+    this.bus = new Vue();
+    this.active = ref(false);
+    this.name = 'Segment';
+    // Requires the desktop VIAME interactive segmentation service.
+    this.toggleable = ref(isDesktopRuntime());
+    this.icon = ref('mdi-auto-fix');
+    this.loading = ref(false);
+    this.predicting = ref(false);
+  }
+
+  private clearPredictionLoadingTimer(): void {
+    if (this.predictionLoadingTimer !== null) {
+      clearTimeout(this.predictionLoadingTimer);
+      this.predictionLoadingTimer = null;
+    }
+  }
+
+  private clearPredictingState(): void {
+    this.clearPredictionLoadingTimer();
+    this.predicting.value = false;
+    this.pendingPredictionCount = 0;
+  }
+
+  private beginPrediction(): void {
+    this.pendingPredictionCount += 1;
+    if (this.pendingPredictionCount === 1 && this.predictionLoadingTimer === null) {
+      this.predictionLoadingTimer = setTimeout(() => {
+        this.predictionLoadingTimer = null;
+        if (this.pendingPredictionCount > 0) {
+          this.predicting.value = true;
+        }
+      }, SegmentationPointClick.PREDICTION_LOADING_DELAY_MS);
+    }
+  }
+
+  private endPrediction(): void {
+    this.pendingPredictionCount = Math.max(0, this.pendingPredictionCount - 1);
+    if (this.pendingPredictionCount === 0) {
+      this.clearPredictionLoadingTimer();
+      this.predicting.value = false;
+    }
+  }
+
+  /**
+   * Initialize the recipe with platform-specific options.
+   * Must be called before using the recipe.
+   */
+  initialize(options: SegmentationRecipeOptions): void {
+    this.predictFn = options.predictFn;
+    this.getImagePath = options.getImagePath;
+    this.getFrameTime = options.getFrameTime || null;
+    this.initializeServiceFn = options.initializeServiceFn || null;
+    // Reset service initialization state when re-initializing
+    this.serviceInitialized = false;
+  }
+
+  /**
+   * Reset the recipe state (clear accumulated points for all frames)
+   */
+  private reset(): void {
+    this.points = [];
+    this.pointLabels = [];
+    this.lastLowResMask = null;
+    this.pendingPolygon = null;
+    this.pendingBounds = null;
+    this.pendingRleMask = null;
+    this.pendingMaskShape = null;
+    this.clearPredictingState();
+    this.frameData.clear();
+    // Clear visual feedback for points
+    this.bus.$emit('points-updated', { points: [], labels: [], frameNum: this.currentFrame });
+  }
+
+  /**
+   * Whether the recipe was reset (points cleared) since last activation.
+   * Used to distinguish "just entered edit mode, no points yet" from
+   * "was actively used and then reset" so right-click can finalize after reset.
+   */
+  get wasReset(): boolean {
+    return this._wasReset;
+  }
+
+  /**
+   * Reset only the current frame's points (used when clearing current frame)
+   */
+  private resetCurrentFrame(): void {
+    this.points = [];
+    this.pointLabels = [];
+    this.lastLowResMask = null;
+    this.pendingPolygon = null;
+    this.pendingBounds = null;
+    this.pendingRleMask = null;
+    this.pendingMaskShape = null;
+    this.frameData.delete(this.currentFrame);
+    // Clear visual feedback for points
+    this.bus.$emit('points-updated', { points: [], labels: [], frameNum: this.currentFrame });
+  }
+
+  /**
+   * Save current frame's data to frameData map
+   */
+  private saveCurrentFrameData(): void {
+    if (this.points.length > 0 || this.pendingPolygon || this.pendingRleMask) {
+      this.frameData.set(this.currentFrame, {
+        points: [...this.points],
+        labels: [...this.pointLabels],
+        polygon: this.pendingPolygon ? [...this.pendingPolygon] : null,
+        bounds: this.pendingBounds ? [...this.pendingBounds] as [number, number, number, number] : null,
+        lowResMask: this.lastLowResMask,
+        rleMask: this.pendingRleMask ? [...this.pendingRleMask] : null,
+        maskShape: this.pendingMaskShape ? [...this.pendingMaskShape] as [number, number] : null,
+      });
+    }
+  }
+
+  /**
+   * Load frame data from frameData map into current state
+   */
+  private loadFrameData(frameNum: number): void {
+    const data = this.frameData.get(frameNum);
+    if (data) {
+      this.points = [...data.points];
+      this.pointLabels = [...data.labels];
+      this.pendingPolygon = data.polygon ? [...data.polygon] : null;
+      this.pendingBounds = data.bounds ? [...data.bounds] as [number, number, number, number] : null;
+      this.lastLowResMask = data.lowResMask;
+      this.pendingRleMask = data.rleMask ? [...data.rleMask] : null;
+      this.pendingMaskShape = data.maskShape ? [...data.maskShape] as [number, number] : null;
+    } else {
+      this.points = [];
+      this.pointLabels = [];
+      this.pendingPolygon = null;
+      this.pendingBounds = null;
+      this.lastLowResMask = null;
+      this.pendingRleMask = null;
+      this.pendingMaskShape = null;
+    }
+  }
+
+  /**
+   * Handle frame change - save current frame's data and load new frame's data
+   * Emits event to clear visual dots when moving to a different frame
+   */
+  handleFrameChange(newFrame: number): void {
+    if (!this.active.value) return;
+    if (newFrame === this.currentFrame) return;
+
+    // Save current frame's data
+    this.saveCurrentFrameData();
+
+    // Update current frame
+    this.currentFrame = newFrame;
+
+    // Load new frame's data (if any)
+    this.loadFrameData(newFrame);
+
+    // Update visual feedback for the new frame
+    // If new frame has no points, this clears the display
+    this.bus.$emit('points-updated', {
+      points: [...this.points],
+      labels: [...this.pointLabels],
+      frameNum: newFrame,
+    });
+
+    // If new frame has a pending prediction (polygon or mask), emit it
+    if (this.pendingPolygon || this.pendingRleMask) {
+      this.bus.$emit('prediction-ready', {
+        polygon: this.pendingPolygon || [],
+        bounds: this.pendingBounds,
+        frameNum: newFrame,
+        rleMask: this.pendingRleMask || undefined,
+        maskShape: this.pendingMaskShape || undefined,
+      } as SegmentationPredictionResult);
+    }
+  }
+
+  /**
+   * Make segmentation prediction with current points
+   * @param frameNum - The frame number to predict on
+   * @param isFirstPoint - Whether this is the first point (affects error handling)
+   */
+  private async makePrediction(frameNum: number, isFirstPoint: boolean = false): Promise<void> {
+    if (!this.predictFn || !this.getImagePath) {
+      return;
+    }
+
+    if (this.points.length === 0) {
+      return;
+    }
+
+    this.beginPrediction();
+
+    try {
+      const imagePath = this.getImagePath(frameNum);
+
+      if (!imagePath) {
+        throw new Error(`No image path available for frame ${frameNum}`);
+      }
+
+      const request: SegmentationPredictRequest = {
+        imagePath,
+        points: this.points,
+        pointLabels: this.pointLabels,
+        maskInput: this.lastLowResMask ?? undefined,
+        multimaskOutput: this.points.length === 1, // Use multimask for single point
+        frameTime: this.getFrameTime ? this.getFrameTime(frameNum) : undefined,
+      };
+
+      const response = await this.predictFn(request, frameNum);
+
+      if (response.success && response.polygon && response.polygon.length > 0) {
+        this.pendingPolygon = response.polygon;
+        this.pendingBounds = response.bounds ?? null;
+        this.lastLowResMask = response.lowResMask ?? null;
+        this.pendingRleMask = response.rleMask ?? null;
+        this.pendingMaskShape = response.maskShape ?? null;
+
+        // Emit event to notify that prediction is ready
+        // Include frameNum so listeners can update the correct frame
+        // Includes mask data for display during editing
+        // controlPoints carries the click points/labels so interactive-stereo
+        // mode can auto-generate the other-camera annotation immediately on a
+        // fresh prediction (the frame-change re-emit above omits them, so
+        // merely navigating does not re-trigger stereo work).
+        this.bus.$emit('prediction-ready', {
+          polygon: response.polygon,
+          bounds: response.bounds,
+          score: response.score,
+          frameNum,
+          rleMask: response.rleMask,
+          maskShape: response.maskShape,
+          controlPoints: this.points.length > 0 ? {
+            points: [...this.points],
+            labels: [...this.pointLabels],
+          } : undefined,
+        } as SegmentationPredictionResult & { score?: number });
+      } else {
+        // Prediction returned an error - handle point rejection
+        this.handlePredictionError(response.error || 'Prediction failed', isFirstPoint, frameNum);
+      }
+    } catch (error) {
+      // Exception during prediction - handle point rejection
+      const errorMessage = error instanceof Error ? error.message : 'Prediction failed';
+      this.handlePredictionError(errorMessage, isFirstPoint, frameNum);
+    } finally {
+      this.endPrediction();
+    }
+  }
+
+  /**
+   * Handle prediction errors - remove rejected point and stay in edit mode.
+   * The user can manually reset or cancel if they want to start over.
+   */
+  private handlePredictionError(originalError: string, isFirstPoint: boolean, frameNum: number): void {
+    // Remove the rejected point regardless of whether it was the first point
+    this.points.pop();
+    this.pointLabels.pop();
+
+    // Update icon to reflect new point count
+    this.icon.value = this.points.length > 0
+      ? `mdi-numeric-${Math.min(this.points.length, 9)}-circle`
+      : 'mdi-auto-fix';
+
+    // Emit updated points to remove the rejected point from visual display
+    this.bus.$emit('points-updated', {
+      points: [...this.points],
+      labels: [...this.pointLabels],
+      frameNum,
+    });
+
+    // Show error message - different message for first point vs subsequent
+    if (isFirstPoint) {
+      this.bus.$emit('prediction-error', originalError);
+    } else {
+      this.bus.$emit('prediction-error', 'Latest point rejected by segmentation method');
+    }
+    // Stay in edit mode - let the user decide to reset or try again
+  }
+
+  /**
+   * Recipe update handler - called when user draws/clicks
+   */
+  update(
+    mode: 'in-progress' | 'editing',
+    frameNum: number,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    track: Track,
+    data: GeoJSON.Feature<GeoJSON.LineString | GeoJSON.Polygon | GeoJSON.Point>[],
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    key?: string,
+  ): Readonly<UpdateResponse> {
+    // Only process if this recipe is active
+    if (!this.active.value) {
+      return EmptyResponse;
+    }
+
+    this.currentFrame = frameNum;
+
+    // Look for point features in the data
+    const pointFeatures = data.filter(
+      (d) => d.geometry.type === 'Point',
+    ) as GeoJSON.Feature<GeoJSON.Point>[];
+
+    // Handle Point clicks - Point mode emits 'editing' directly (not 'in-progress')
+    // because points complete immediately. We need to handle both modes.
+    if (pointFeatures.length > 0) {
+      const point = pointFeatures[0];
+      const coords = point.geometry.coordinates as [number, number];
+
+      // Check if this is the same point we already processed (avoid duplicates)
+      const lastPoint = this.points[this.points.length - 1];
+      const isDuplicate = lastPoint
+        && lastPoint[0] === coords[0]
+        && lastPoint[1] === coords[1];
+
+      if (!isDuplicate) {
+        // Track if this is the first point (for error handling)
+        const isFirstPoint = this.points.length === 0;
+
+        // Determine if this is a foreground or background point
+        // Check for shift key or middle-click via properties (if available)
+        const isBackground = point.properties?.background === true;
+        const label = isBackground ? 0 : 1;
+
+        // Add point to accumulator
+        this.points.push(coords);
+        this.pointLabels.push(label);
+
+        // Update icon to show point count
+        this.icon.value = this.points.length > 1
+          ? `mdi-numeric-${Math.min(this.points.length, 9)}-circle`
+          : 'mdi-auto-fix';
+
+        // Emit point update for visual feedback (green=foreground, red=background)
+        this.bus.$emit('points-updated', {
+          points: [...this.points],
+          labels: [...this.pointLabels],
+          frameNum,
+        });
+
+        // Trigger segmentation prediction asynchronously
+        // The prediction result will be handled by the event listener in Viewer
+        // Pass isFirstPoint so error handling knows whether to reject the point
+        this.makePrediction(frameNum, isFirstPoint);
+      }
+
+      // For Point mode, we DON'T return polygon data here.
+      // The polygon will be set directly on the track when prediction completes
+      // via the 'prediction-ready' event handler in Viewer.vue.
+      // Return done: false to keep the track in edit mode.
+      return {
+        data: {},
+        union: [],
+        unionWithoutBounds: [],
+        done: false,
+      };
+    }
+
+    // If we're in editing mode with non-point data and have a pending polygon, commit it
+    if (mode === 'editing' && this.pendingPolygon && this.pendingPolygon.length > 2) {
+      const polygon: GeoJSON.Feature<GeoJSON.Polygon> = {
+        type: 'Feature',
+        geometry: {
+          type: 'Polygon',
+          coordinates: [this.pendingPolygon],
+        },
+        properties: {},
+      };
+
+      const unionPolygon = this.pendingBounds
+        ? SegmentationPointClick.boundsToPolygon(this.pendingBounds)
+        : null;
+
+      // Clear state after committing
+      this.reset();
+      this.deactivate();
+
+      return {
+        data: {
+          [SegmentationPolygonKey]: [polygon],
+        },
+        union: unionPolygon ? [unionPolygon] : [],
+        unionWithoutBounds: [],
+        newSelectedKey: SegmentationPolygonKey,
+        done: true,
+      };
+    }
+
+    return EmptyResponse;
+  }
+
+  /**
+   * Convert bounds to a GeoJSON Polygon for union calculation
+   */
+  private static boundsToPolygon(bounds: [number, number, number, number]): GeoJSON.Polygon {
+    const [minX, minY, maxX, maxY] = bounds;
+    return {
+      type: 'Polygon',
+      coordinates: [[
+        [minX, minY],
+        [maxX, minY],
+        [maxX, maxY],
+        [minX, maxY],
+        [minX, minY],
+      ]],
+    };
+  }
+
+  /**
+   * Handle deletion of segmentation geometry
+   */
+  delete(frame: number, track: Track, key: string, type: EditAnnotationTypes): void {
+    if (key === SegmentationPolygonKey && type === 'Polygon') {
+      track.removeFeatureGeometry(frame, { type: 'Polygon', key: SegmentationPolygonKey });
+      this.reset();
+    }
+  }
+
+  /**
+   * Handle point deletion (not applicable for segmentation, but required by interface)
+   */
+  deletePoint(
+    frame: number,
+    track: Track,
+    idx: number,
+    key: string,
+    type: EditAnnotationTypes,
+  ): void {
+    // Segmentation doesn't support individual point deletion within a polygon
+    // If needed, delete the whole polygon
+    if (key === SegmentationPolygonKey && type === 'Polygon') {
+      this.delete(frame, track, key, type);
+    }
+  }
+
+  /**
+   * Activate the segmentation recipe.
+   * If an initializeServiceFn was provided, it will be called first to ensure
+   * the segmentation service is ready. If initialization fails, the recipe will not
+   * activate and an error event will be emitted.
+   */
+  activate(): void {
+    // If we have an initialization function and haven't initialized yet, do it now
+    if (this.initializeServiceFn && !this.serviceInitialized) {
+      // Show loading state
+      this.loading.value = true;
+      this.icon.value = 'mdi-loading';
+      // Track that we're waiting for initialization
+      this.pendingActivation = true;
+
+      this.initializeServiceFn()
+        .then(() => {
+          this.serviceInitialized = true;
+          this.loading.value = false;
+          // Only complete activation if we weren't deactivated during async wait
+          // (e.g., user switched to polygon mode while waiting)
+          if (this.pendingActivation) {
+            this.pendingActivation = false;
+            this.completeActivation();
+          }
+        })
+        .catch((error) => {
+          this.pendingActivation = false;
+          const errorMessage = error instanceof Error ? error.message : 'Unable to load segmentation module';
+          this.bus.$emit('prediction-error', errorMessage);
+          this.loading.value = false;
+          this.icon.value = 'mdi-auto-fix';
+          // Don't activate - stay in previous mode
+        });
+    } else {
+      // No initialization function or already initialized - activate immediately
+      this.completeActivation();
+    }
+  }
+
+  /**
+   * Complete the activation after service is ready
+   */
+  private completeActivation(): void {
+    this.active.value = true;
+    this.reset();
+    this._wasReset = false;
+    this.icon.value = 'mdi-auto-fix';
+
+    // Emit activation event to trigger Point editing mode
+    this.bus.$emit('activate', {
+      editing: 'Point' as EditAnnotationTypes,
+      key: SegmentationPolygonKey,
+      recipeName: this.name,
+    });
+  }
+
+  /**
+   * Deactivate the segmentation recipe
+   */
+  deactivate(): void {
+    this.active.value = false;
+    // Cancel any pending activation from async init
+    this.pendingActivation = false;
+    this.loading.value = false;
+    this.clearPredictingState();
+    this.reset();
+    this._wasReset = false;
+    this.icon.value = 'mdi-auto-fix';
+
+    // Emit empty points to clear the visual points layer
+    this.bus.$emit('points-updated', {
+      points: [],
+      labels: [],
+      frameNum: this.currentFrame,
+    });
+  }
+
+  /**
+   * Check if there's a pending prediction that can be confirmed (current frame or any saved frame)
+   */
+  hasPendingPrediction(): boolean {
+    // Check current frame
+    if (this.pendingPolygon !== null && this.pendingPolygon.length > 2) {
+      return true;
+    }
+    // Check saved frames
+    return Array.from(this.frameData.values()).some(
+      (data) => data.polygon && data.polygon.length > 2,
+    );
+  }
+
+  /**
+   * Check if there are any points accumulated (current frame or any saved frame)
+   */
+  hasPoints(): boolean {
+    // Check current frame
+    if (this.points.length > 0) {
+      return true;
+    }
+    // Check saved frames
+    return Array.from(this.frameData.values()).some(
+      (data) => data.points.length > 0,
+    );
+  }
+
+  /**
+   * Get the number of frames with pending predictions
+   */
+  getFrameCount(): number {
+    // Save current frame data first
+    this.saveCurrentFrameData();
+
+    return Array.from(this.frameData.values()).filter(
+      (data) => data.polygon && data.polygon.length > 2,
+    ).length;
+  }
+
+  /**
+   * Public method to reset (clear) all accumulated points and pending prediction.
+   * Called from UI Reset button. Clears all frames.
+   */
+  resetPoints(): void {
+    // Emit reset event for all frames with data
+    const framesToReset = [this.currentFrame, ...this.frameData.keys()];
+    framesToReset.forEach((frameNum) => {
+      this.bus.$emit('prediction-reset', { frameNum });
+    });
+    this.reset();
+    this._wasReset = true;
+    this.icon.value = 'mdi-auto-fix';
+  }
+
+  /**
+   * Public method to confirm the current prediction and emit it for track update.
+   * Called from UI Confirm button. Confirms all frames with valid polygons.
+   */
+  confirmPrediction(): void {
+    // Save current frame data to frameData map
+    this.saveCurrentFrameData();
+
+    // Collect all frames with valid polygons
+    const confirmedFrames: Map<number, SegmentationPredictionResult> = new Map();
+
+    Array.from(this.frameData.entries()).forEach(([frameNum, data]) => {
+      if (data.polygon && data.polygon.length > 2) {
+        confirmedFrames.set(frameNum, {
+          polygon: data.polygon,
+          bounds: data.bounds,
+          frameNum,
+          controlPoints: data.points.length > 0 ? {
+            points: data.points,
+            labels: data.labels,
+          } : undefined,
+        });
+      }
+    });
+
+    if (confirmedFrames.size === 0) {
+      return;
+    }
+
+    // Emit multi-frame confirmed event
+    this.bus.$emit('prediction-confirmed-multi', {
+      frames: confirmedFrames,
+    } as MultiFrameSegmentationResult);
+
+    // Also emit single-frame events for backward compatibility
+    // (in case only single-frame handler is registered)
+    Array.from(confirmedFrames.values()).forEach((result) => {
+      this.bus.$emit('prediction-confirmed', result);
+    });
+
+    // Reset state and deactivate
+    this.reset();
+    this.deactivate();
+  }
+
+  /**
+   * Implements the Recipe interface's confirm method.
+   * Called when right-click is used to lock the annotation.
+   */
+  confirm(): void {
+    if (this.active.value) {
+      if (this.hasPendingPrediction()) {
+        this.confirmPrediction();
+      } else {
+        // No prediction to confirm, still deactivate the recipe
+        this.deactivate();
+      }
+    }
+  }
+
+  /**
+   * Keyboard shortcuts for segmentation recipe
+   */
+  mousetrap(): Mousetrap[] {
+    return [
+      {
+        bind: 's',
+        handler: () => {
+          if (!this.active.value) {
+            this.activate();
+          }
+        },
+      },
+      {
+        bind: 'escape',
+        handler: () => {
+          if (this.active.value) {
+            this.resetPoints();
+          }
+        },
+      },
+      {
+        bind: 'enter',
+        handler: () => {
+          if (this.active.value && this.hasPendingPrediction()) {
+            this.confirmPrediction();
+          }
+        },
+      },
+    ];
+  }
+}
diff --git a/client/dive-common/store/settings.ts b/client/dive-common/store/settings.ts
index d369b6264..3b9030569 100644
--- a/client/dive-common/store/settings.ts
+++ b/client/dive-common/store/settings.ts
@@ -1,6 +1,7 @@
 import { Ref, watch, reactive } from 'vue';
 import { cloneDeep, merge } from 'lodash';
 import { AnnotatorPreferences } from 'vue-media-annotator/types';
+import isDesktopRuntime from 'dive-common/isDesktopRuntime';
 
 interface ColumnVisibilitySettings {
   type: boolean;
@@ -67,6 +68,16 @@ interface AnnotationSettings {
     enabled: boolean;
     delaySeconds: number;
   };
+  stereoSettings: {
+    // Recompute length attributes when a line's vertices are modified on a
+    // detection that is linked across both cameras.
+    updateLengthsOnModify: boolean;
+    // Warp an annotation drawn on one camera to the other camera when that
+    // camera has no detection for it yet.
+    autoComputeOtherCamera: boolean;
+    loading: boolean;
+    loadingMessage: string;
+  };
 }
 
 const defaultSettings: AnnotationSettings = {
@@ -142,6 +153,12 @@ const defaultSettings: AnnotationSettings = {
     enabled: false, // Disabled by default for backward compatibility
     delaySeconds: 60,
   },
+  stereoSettings: {
+    updateLengthsOnModify: true,
+    autoComputeOtherCamera: false,
+    loading: false,
+    loadingMessage: '',
+  },
 };
 const MIN_AUTO_SAVE_DELAY_SECONDS = 10;
 
@@ -162,7 +179,16 @@ function loadStoredSettings(): Partial<AnnotationSettings> {
 function saveSettings() {
   try {
     if (typeof localStorage !== 'undefined') {
-      localStorage.setItem('Settings', JSON.stringify(clientSettings));
+      // Exclude transient stereo fields from persistence
+      const toSave = {
+        ...clientSettings,
+        stereoSettings: {
+          ...clientSettings.stereoSettings,
+          loading: false,
+          loadingMessage: '',
+        },
+      };
+      localStorage.setItem('Settings', JSON.stringify(toSave));
     }
   } catch (e) {
     console.warn('Failed to save settings to localStorage:', e);
@@ -175,11 +201,27 @@ function hydrate(obj: Partial<AnnotationSettings>): AnnotationSettings {
     MIN_AUTO_SAVE_DELAY_SECONDS,
     Number(hydrated.autoSaveSettings.delaySeconds) || defaultSettings.autoSaveSettings.delaySeconds,
   );
+  if (!isDesktopRuntime()) {
+    hydrated.stereoSettings.updateLengthsOnModify = false;
+    hydrated.stereoSettings.autoComputeOtherCamera = false;
+  }
   return hydrated;
 }
 
 const clientSettings = reactive(hydrate(loadStoredSettings()));
 
+/**
+ * Interactive stereo requires the desktop VIAME interactive service. The
+ * backend service is needed whenever either stereo feature (length update or
+ * cross-camera auto-compute) is enabled.
+ */
+function isStereoInteractiveModeEnabled(): boolean {
+  return isDesktopRuntime() && (
+    clientSettings.stereoSettings.updateLengthsOnModify
+    || clientSettings.stereoSettings.autoComputeOtherCamera
+  );
+}
+
 export default function setup(allTypes: Ref<Readonly<string[]>>) {
   // If a type is deleted, reset the default new track type to unknown
   watch(allTypes, (newval) => {
@@ -192,6 +234,7 @@ watch(clientSettings, saveSettings, { deep: true });
 
 export {
   clientSettings,
+  isStereoInteractiveModeEnabled,
   AnnotationSettings,
   ColumnVisibilitySettings,
 };
diff --git a/client/dive-common/use/useModeManager.ts b/client/dive-common/use/useModeManager.ts
index 47f632a9a..c576dcebb 100644
--- a/client/dive-common/use/useModeManager.ts
+++ b/client/dive-common/use/useModeManager.ts
@@ -2,7 +2,7 @@ import {
   computed, Ref, reactive, ref, onBeforeUnmount, toRef,
 } from 'vue';
 import { uniq, flatMapDeep, flattenDeep } from 'lodash';
-import Track, { TrackId } from 'vue-media-annotator/track';
+import Track, { Feature, TrackId, TrackSupportedFeature } from 'vue-media-annotator/track';
 import {
   RectBounds,
   updateBounds,
@@ -17,10 +17,16 @@ import type { AnnotationId } from 'vue-media-annotator/BaseAnnotation';
 import type TrackFilterControls from 'vue-media-annotator/TrackFilterControls';
 
 import { usePrompt } from 'dive-common/vue-utilities/prompt-service';
-import { clientSettings } from 'dive-common/store/settings';
+import { clientSettings, isStereoInteractiveModeEnabled } from 'dive-common/store/settings';
 import GroupFilterControls from 'vue-media-annotator/GroupFilterControls';
 import CameraStore from 'vue-media-annotator/CameraStore';
 import { SortedAnnotation } from 'vue-media-annotator/BaseAnnotationStore';
+import SegmentationPointClick, {
+  SegmentationPolygonKey,
+  SegmentationPredictionResult,
+  MultiFrameSegmentationResult,
+} from 'dive-common/recipes/segmentationpointclick';
+import { HeadPointKey, TailPointKey } from 'dive-common/recipes/headtail';
 
 type SupportedFeature = GeoJSON.Feature<GeoJSON.Point | GeoJSON.Polygon | GeoJSON.LineString>;
 
@@ -55,6 +61,28 @@ interface SetAnnotationStateArgs {
   key?: string;
   recipeName?: string;
 }
+
+export type StereoAnnotationCompleteParams =
+  | { type: 'line'; camera: string; trackId: number; frameNum: number;
+      line: [[number, number], [number, number]]; key: string; }
+  | { type: 'box'; camera: string; trackId: number; frameNum: number;
+      bounds: [number, number, number, number]; }
+  | { type: 'polygon'; camera: string; trackId: number; frameNum: number;
+      polygon: [number, number][]; key: string; }
+  | { type: 'segmentation'; camera: string; trackId: number; frameNum: number;
+      points: [number, number][]; labels: number[]; };
+
+export type StereoAnnotationResetParams = {
+  trackId: number;
+  frameNum: number;
+  sourceCamera: string;
+};
+
+export type StereoSegmentationFinalizeParams = {
+  trackId: number;
+  frameNums: number[];
+};
+
 /**
  * The point of this composition function is to define and manage the transition betwee
  * different UI states within the program.  States and state transitions can be modified
@@ -69,6 +97,9 @@ export default function useModeManager({
   aggregateController,
   readonlyState,
   recipes,
+  onStereoAnnotationComplete,
+  onStereoAnnotationReset,
+  onStereoSegmentationFinalize,
 }: {
     cameraStore: CameraStore;
     trackFilterControls: TrackFilterControls;
@@ -76,6 +107,9 @@ export default function useModeManager({
     aggregateController: Ref<AggregateMediaController>;
     readonlyState: Readonly<Ref<boolean>>;
     recipes: Recipe[];
+    onStereoAnnotationComplete?: (params: StereoAnnotationCompleteParams) => void;
+    onStereoAnnotationReset?: (params: StereoAnnotationResetParams) => void;
+    onStereoSegmentationFinalize?: (params?: StereoSegmentationFinalizeParams) => void;
 }) {
   let creating = false;
   const { prompt } = usePrompt();
@@ -113,6 +147,12 @@ export default function useModeManager({
   const editingMode = computed(() => editingTrack.value && annotationModes.editing);
   const editingCanary = ref(false);
 
+  /**
+   * Callback that the LayerManager registers to finalize in-progress shapes
+   * (e.g., an incomplete polygon) before switching tracks or creating new ones.
+   */
+  let finalizeCreationCallback: (() => void) | null = null;
+
   // Track Multi-select state
   const multiSelectList = ref([] as AnnotationId[]);
   const multiSelectActive = computed(() => multiSelectList.value.length > 0);
@@ -129,7 +169,44 @@ export default function useModeManager({
 
   const selectNextGroup = (delta = 1) => selectNext(_filteredGroups.value, editingGroupId.value, delta);
 
+  /**
+   * Remove a track if it has no features (empty detection with nothing drawn).
+   * Returns true if the track was removed.
+   */
+  function _removeIfEmpty(checkTrackId: AnnotationId): boolean {
+    const track = cameraStore.getPossibleTrack(checkTrackId, selectedCamera.value);
+    if (track && track.begin === track.end) {
+      const features = track.getFeature(track.begin);
+      if (!features.filter((item) => item !== null).length) {
+        const trackStore = cameraStore.camMap.value.get(selectedCamera.value)?.trackStore;
+        if (trackStore) {
+          trackStore.remove(checkTrackId);
+          return true;
+        }
+      }
+    }
+    return false;
+  }
+
   function selectTrack(trackId: AnnotationId | null, edit = false) {
+    // Reset segmentation recipe state when switching to a different track
+    // so stale points/mask from the previous detection don't interfere
+    if (trackId !== selectedTrackId.value) {
+      recipes.forEach((r) => {
+        if (r instanceof SegmentationPointClick && r.active.value) {
+          r.resetPoints();
+        }
+      });
+    }
+    // Clean up empty tracks when leaving edit mode (e.g., created a detection
+    // but never drew an annotation, then clicked away or right-clicked to deselect)
+    if (
+      selectedTrackId.value !== null
+      && editingTrack.value
+      && selectedTrackId.value !== trackId
+    ) {
+      _removeIfEmpty(selectedTrackId.value);
+    }
     selectedTrackId.value = trackId;
     if (edit && readonlyState.value) {
       prompt({ title: 'Read Only Mode', text: 'This Dataset is in Read Only mode, no edits can be made.' });
@@ -161,7 +238,12 @@ export default function useModeManager({
             } if (annotationModes.editing === 'rectangle') {
               return 'Editing';
             }
-            return (feature.geometry?.features.filter((item) => item.geometry.type === annotationModes.editing).length ? 'Editing' : 'Creating');
+            // Check if there's a geometry matching both the type AND the selectedKey
+            const matchingGeometry = feature.geometry?.features.filter(
+              (item) => item.geometry.type === annotationModes.editing
+                && item.properties?.key === selectedKey.value,
+            );
+            return (matchingGeometry?.length ? 'Editing' : 'Creating');
           }
           return 'Creating';
         }
@@ -352,17 +434,7 @@ export default function useModeManager({
   //Handles deselection or hitting escape including while editing
   function handleEscapeMode() {
     if (selectedTrackId.value !== null) {
-      const track = cameraStore.getPossibleTrack(selectedTrackId.value, selectedCamera.value);
-      if (track && track.begin === track.end) {
-        const features = track.getFeature(track.begin);
-        // If no features exist we remove the empty track
-        if (!features.filter((item) => item !== null).length) {
-          const trackStore = cameraStore.camMap.value.get(selectedCamera.value)?.trackStore;
-          if (trackStore) {
-            trackStore.remove(selectedTrackId.value);
-          }
-        }
-      }
+      _removeIfEmpty(selectedTrackId.value);
     }
     linkingState.value = false;
     linkingCamera.value = '';
@@ -373,6 +445,23 @@ export default function useModeManager({
   }
 
   function handleAddTrackOrDetection(overrideTrackId?: number): TrackId {
+    // If a segmentation recipe has a pending prediction, commit it permanently
+    // by clearing preSegmentationFeatures. Without this, selectTrack calls
+    // resetPoints → handleSegmentationReset which restores the pre-segmentation
+    // state (deleting the polygon) AFTER _removeIfEmpty already ran, leaving
+    // an empty detection in the list.
+    const hasSegPrediction = recipes.some(
+      (r) => r instanceof SegmentationPointClick && r.active.value && r.hasPendingPrediction(),
+    );
+    if (hasSegPrediction) {
+      preSegmentationFeatures.clear();
+    }
+    // Finalize any in-progress shape (e.g., incomplete polygon) before
+    // escaping and creating a new track. This commits the shape if valid
+    // (3+ polygon vertices) or discards it otherwise.
+    if (finalizeCreationCallback) {
+      finalizeCreationCallback();
+    }
     // Handles adding a new track with the NewTrack Settings
     handleEscapeMode();
     const { frame } = aggregateController.value;
@@ -460,7 +549,54 @@ export default function useModeManager({
         if (isEditingExisting && track.attributes?.userCreated !== true) {
           track.setFeatureAttribute(frameNum, 'userModified', true);
         }
+        // Capture track ID before newTrackSettingsAfterLogic, which may
+        // create a new track in continuous detection mode and change
+        // selectedTrackId
+        const completedTrackId = selectedTrackId.value as number;
+
         newTrackSettingsAfterLogic(track);
+
+        // Stereo: emit box annotation complete
+        if (onStereoAnnotationComplete && isStereoInteractiveModeEnabled()) {
+          onStereoAnnotationComplete({
+            type: 'box',
+            camera: selectedCamera.value,
+            trackId: completedTrackId,
+            frameNum,
+            bounds: bounds as [number, number, number, number],
+          });
+        }
+      }
+    }
+  }
+
+  /**
+   * Set a feature on a track with proper interpolation handling.
+   * This is used by segmentation and other modes that need to set features
+   * while respecting track settings and interpolation logic.
+   */
+  function handleSetTrackFeature(
+    frameNum: number,
+    bounds: RectBounds,
+    geometry: GeoJSON.Feature<TrackSupportedFeature>[],
+    runAfterLogic: boolean = true,
+  ) {
+    if (selectedTrackId.value !== null) {
+      const track = cameraStore.getPossibleTrack(selectedTrackId.value, selectedCamera.value);
+      if (track) {
+        const { interpolate } = track.canInterpolate(frameNum);
+
+        track.setFeature({
+          frame: frameNum,
+          flick: 0,
+          bounds,
+          keyframe: true,
+          interpolate: _shouldInterpolate(interpolate),
+        }, geometry);
+
+        if (runAfterLogic) {
+          newTrackSettingsAfterLogic(track);
+        }
       }
     }
   }
@@ -539,16 +675,18 @@ export default function useModeManager({
 
         // If a drawable changed, but we aren't changing modes
         // prevent an interrupt within EditAnnotationLayer
+        // Use === undefined to distinguish "no key change" from "change to empty key"
         if (
           somethingChanged
-          && !update.newSelectedKey
+          && update.newSelectedKey === undefined
           && !update.newType
           && preventInterrupt
         ) {
           preventInterrupt();
         } else {
           // Otherwise, one of these state changes will trigger an interrupt.
-          if (update.newSelectedKey) {
+          // Use !== undefined to allow setting key to empty string
+          if (update.newSelectedKey !== undefined) {
             selectedKey.value = update.newSelectedKey;
           }
           if (update.newType) {
@@ -566,7 +704,7 @@ export default function useModeManager({
             flick: flickNum,
             keyframe: true,
             bounds: updateBounds(real?.bounds, update.union, update.unionWithoutBounds),
-            interpolate,
+            interpolate: _shouldInterpolate(interpolate),
           }, flatMapDeep(
             update.geoJsonFeatureRecord,
             (geomlist, key_) => geomlist.map((geom) => ({
@@ -586,7 +724,50 @@ export default function useModeManager({
           // Treat this as a completed annotation if eventType is editing
           // Or none of the recieps reported that they were unfinished.
           if (eventType === 'editing' || update.done.every((v) => v !== false)) {
+            // Capture track ID before newTrackSettingsAfterLogic which may
+            // change selectedTrackId in continuous detection mode
+            const completedTrackId = selectedTrackId.value;
+
             newTrackSettingsAfterLogic(track);
+
+            // Stereo: emit line or polygon annotation complete
+            if (onStereoAnnotationComplete && isStereoInteractiveModeEnabled()
+                && completedTrackId !== null) {
+              // Check for LineString with exactly 2 points (line annotation)
+              if (data.geometry.type === 'LineString'
+                  && data.geometry.coordinates.length === 2) {
+                const coords = data.geometry.coordinates as [number, number][];
+                onStereoAnnotationComplete({
+                  type: 'line',
+                  camera: selectedCamera.value,
+                  trackId: completedTrackId as number,
+                  frameNum,
+                  line: [coords[0], coords[1]],
+                  key: selectedKey.value,
+                });
+              }
+              // Check for completed Polygon (done=true from recipes)
+              if (update.done.some((v) => v === true)) {
+                // Look for polygon geometry in the update record
+                Object.entries(update.geoJsonFeatureRecord).forEach(([geoKey, features]) => {
+                  features.forEach((feat) => {
+                    if (feat.geometry.type === 'Polygon'
+                        && feat.geometry.coordinates[0]
+                        && feat.geometry.coordinates[0].length >= 3) {
+                      const polyCoords = feat.geometry.coordinates[0] as [number, number][];
+                      onStereoAnnotationComplete({
+                        type: 'polygon',
+                        camera: selectedCamera.value,
+                        trackId: completedTrackId as number,
+                        frameNum,
+                        polygon: polyCoords,
+                        key: geoKey,
+                      });
+                    }
+                  });
+                });
+              }
+            }
           }
         }
       } else {
@@ -625,11 +806,32 @@ export default function useModeManager({
       const track = cameraStore.getPossibleTrack(selectedTrackId.value, selectedCamera.value);
       if (track) {
         const { frame } = aggregateController.value;
+        const frameNum = frame.value;
         recipes.forEach((r) => {
           if (r.active.value) {
-            r.delete(frame.value, track, selectedKey.value, annotationModes.editing);
+            r.delete(frameNum, track, selectedKey.value, annotationModes.editing);
           }
         });
+
+        // After deleting a polygon, recalculate bounds from remaining polygons
+        if (annotationModes.editing === 'Polygon') {
+          const remainingPolygons = track.getPolygonFeatures(frameNum);
+          if (remainingPolygons.length > 0) {
+            // Recalculate bounds from remaining polygons
+            const polygonGeometries = remainingPolygons.map((p) => p.geometry);
+            const newBounds = updateBounds(undefined, [], polygonGeometries);
+
+            // Get current feature and update with new bounds
+            const [currentFeature] = track.getFeature(frameNum);
+            if (currentFeature && newBounds) {
+              track.setFeature({
+                ...currentFeature,
+                bounds: newBounds,
+              });
+            }
+          }
+        }
+
         _nudgeEditingCanary();
       }
     }
@@ -652,9 +854,6 @@ export default function useModeManager({
         if (group) group.removeMembers(trackIds);
       }
     }
-    if (editingMultiTrack.value && !editingMultiTrack.value) {
-      handleSelectTrack(null);
-    }
     /** Exit group editing mode if last track is removed */
     if (multiSelectList.value.length === 0) {
       handleEscapeMode();
@@ -717,6 +916,32 @@ export default function useModeManager({
     if (track) {
       seekNearest(track);
       const editing = trackId === selectedTrackId.value ? (!editingTrack.value) : true;
+      // 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);
+        if (feature?.geometry?.features?.length) {
+          if (annotationModes.editing === 'LineString') {
+            const lineFeature = feature.geometry.features.find(
+              (f) => f.geometry.type === 'LineString',
+            );
+            selectedKey.value = lineFeature?.properties?.key || '';
+          }
+        }
+        // If editing type is Point (segmentation), ensure the segmentation
+        // recipe is active so point clicks generate segmentation predictions.
+        // Only set the active flag directly - don't call activate() which would
+        // re-emit the activate event and interfere with the track selection.
+        if (annotationModes.editing === 'Point') {
+          const segRecipe = recipes.find(
+            (rec) => rec instanceof SegmentationPointClick && !rec.active.value,
+          ) as SegmentationPointClick | undefined;
+          if (segRecipe) {
+            segRecipe.active.value = true;
+          }
+        }
+      }
       handleSelectTrack(trackId, editing);
     } else if (cameraStore.getAnyTrack(trackId) !== undefined) {
       //track exists in other cameras we create in the current map using override
@@ -766,6 +991,46 @@ export default function useModeManager({
     }
   }
 
+  /**
+   * Confirm the current annotation for any active recipe that supports it.
+   * Called when right-click is used in Point mode to lock the annotation.
+   */
+  function handleConfirmRecipe() {
+    // First check if any active segmentation recipe has a pending prediction
+    // or was explicitly reset by the user (Escape key).
+    // If neither, there's nothing to confirm - this happens when the contextmenu
+    // event from a right-click that entered Point edit mode triggers
+    // confirm-annotation before any points are placed. In that case, don't
+    // confirm/deactivate recipes or deselect - let the edit mode continue.
+    let hadPendingPredictionOrReset = false;
+    recipes.forEach((r) => {
+      if (r.active.value && r.confirm && r instanceof SegmentationPointClick) {
+        if (r.hasPendingPrediction() || r.wasReset) {
+          hadPendingPredictionOrReset = true;
+        }
+      }
+    });
+    if (!hadPendingPredictionOrReset) {
+      return;
+    }
+    const activeSegRecipes: SegmentationPointClick[] = [];
+    recipes.forEach((r) => {
+      if (r.active.value && r.confirm) {
+        if (r instanceof SegmentationPointClick) {
+          activeSegRecipes.push(r);
+        }
+        r.confirm();
+      }
+    });
+    // Clear saved state - the confirmed polygons are now permanent
+    preSegmentationFeatures.clear();
+    onStereoSegmentationFinalize?.();
+    // Exit editing mode and deselect to unhighlight the track
+    selectTrack(null, false);
+    // Re-activate segmentation recipe so it's ready for the next detection
+    activeSegRecipes.forEach((r) => r.activate());
+  }
+
   /**
    * Merge: Enabled whenever there are candidates in the merge list
    */
@@ -860,11 +1125,400 @@ export default function useModeManager({
     handleGroupEdit(previousOrNext);
   }
 
+  /**
+   * Save original track feature state before segmentation prediction modifies it.
+   * Used by handleSegmentationReset to restore the detection to its pre-segmentation state.
+   */
+  const preSegmentationFeatures = new Map<number, {
+    hadFeature: boolean;
+    bounds?: RectBounds;
+    interpolate?: boolean;
+    geometryFeatures?: GeoJSON.Feature[];
+    fishLength?: number;
+    attributes?: Feature['attributes'];
+    existingPolygonKeys?: Set<string>;
+  }>();
+
+  function removeStereoLineGeometry(track: Track, frameNum: number) {
+    track.removeFeatureGeometry(frameNum, { type: 'LineString', key: '' });
+    track.removeFeatureGeometry(frameNum, { type: 'Point', key: HeadPointKey });
+    track.removeFeatureGeometry(frameNum, { type: 'Point', key: TailPointKey });
+  }
+
+  /**
+   * Segmentation prompt points for visualization (green=foreground, red=background)
+   */
+  const segmentationPoints: Ref<{ points: [number, number][]; labels: number[]; frameNum: number }> = ref({
+    points: [],
+    labels: [],
+    frameNum: -1,
+  });
+
+  /**
+   * Handle segmentation points update - update visual display of prompt points
+   */
+  function handleSegmentationPointsUpdated(data: { points: [number, number][]; labels: number[]; frameNum: number }) {
+    segmentationPoints.value = {
+      points: [...data.points],
+      labels: [...data.labels],
+      frameNum: data.frameNum,
+    };
+  }
+
+  /**
+   * Handle segmentation prediction ready - update visual display with pending polygon/mask.
+   * This is called when the segmentation model returns a prediction.
+   * During editing, we show the polygon preview but don't commit it yet.
+   */
+  function handleSegmentationPredictionReady(result: SegmentationPredictionResult, fromClick = false) {
+    if (selectedTrackId.value === null) {
+      return;
+    }
+
+    const { frame } = aggregateController.value;
+    const track = cameraStore.getPossibleTrack(selectedTrackId.value, selectedCamera.value);
+    if (!track) {
+      return;
+    }
+
+    // Create polygon geometry from prediction result
+    if (result.polygon && result.polygon.length >= 3) {
+      const bounds = result.bounds || [
+        Math.min(...result.polygon.map((p) => p[0])),
+        Math.min(...result.polygon.map((p) => p[1])),
+        Math.max(...result.polygon.map((p) => p[0])),
+        Math.max(...result.polygon.map((p) => p[1])),
+      ] as [number, number, number, number];
+
+      // Close polygon if not already closed
+      const closedPolygon = [...result.polygon];
+      const first = closedPolygon[0];
+      const last = closedPolygon[closedPolygon.length - 1];
+      if (first[0] !== last[0] || first[1] !== last[1]) {
+        closedPolygon.push([...first] as [number, number]);
+      }
+
+      const polygonGeometry: GeoJSON.Feature<TrackSupportedFeature>[] = [{
+        type: 'Feature',
+        geometry: {
+          type: 'Polygon',
+          coordinates: [closedPolygon],
+        },
+        properties: { key: SegmentationPolygonKey },
+      }];
+
+      // 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 { interpolate } = track.canInterpolate(targetFrame);
+
+      // Save original feature state before first prediction modifies the track
+      if (!preSegmentationFeatures.has(targetFrame)) {
+        const [existingFeature] = track.getFeature(targetFrame);
+        // Track which polygon keys existed before segmentation so reset can
+        // tell originals from segmentation-added polygons.
+        const existingPolygonKeys = new Set<string>();
+        if (existingFeature?.geometry?.features) {
+          existingFeature.geometry.features.forEach((f) => {
+            if (f.geometry.type === 'Polygon') {
+              existingPolygonKeys.add(f.properties?.key ?? '');
+            }
+          });
+        }
+        if (existingFeature) {
+          preSegmentationFeatures.set(targetFrame, {
+            hadFeature: true,
+            bounds: existingFeature.bounds
+              ? [...existingFeature.bounds] as RectBounds : undefined,
+            interpolate: existingFeature.interpolate,
+            geometryFeatures: existingFeature.geometry?.features
+              ? JSON.parse(JSON.stringify(existingFeature.geometry.features))
+              : undefined,
+            fishLength: existingFeature.fishLength,
+            attributes: existingFeature.attributes
+              ? JSON.parse(JSON.stringify(existingFeature.attributes))
+              : undefined,
+            existingPolygonKeys,
+          });
+        } else {
+          preSegmentationFeatures.set(targetFrame, { hadFeature: false, existingPolygonKeys });
+        }
+      }
+
+      track.setFeature({
+        frame: targetFrame,
+        flick: 0,
+        bounds,
+        keyframe: true,
+        interpolate,
+      }, polygonGeometry);
+
+      _nudgeEditingCanary();
+
+      // Interactive stereo: as soon as the left polygon is predicted, generate
+      // the other-camera polygon + head/tail lines + measurement automatically,
+      // 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()
+          && selectedTrackId.value !== null && result.controlPoints) {
+        onStereoAnnotationComplete({
+          type: 'segmentation',
+          camera: selectedCamera.value,
+          trackId: selectedTrackId.value as number,
+          frameNum: targetFrame,
+          points: result.controlPoints.points,
+          labels: result.controlPoints.labels,
+        });
+      }
+
+      // Continuous detection mode: each fresh foreground click commits its own
+      // detection, then immediately start a new one so the next click segments a
+      // new track instead of refining this one. controlPoints distinguishes a
+      // real click from a preview restored on frame navigation; fromClick
+      // excludes the right-click/Enter confirm path. Background (negative) clicks
+      // only make sense as refinements, so they do not spawn a new detection.
+      const { labels } = result.controlPoints ?? { labels: [] };
+      const lastPointForeground = labels.length > 0 && labels[labels.length - 1] !== 0;
+      if (fromClick && result.controlPoints && lastPointForeground
+        && trackSettings.value.newTrackSettings?.mode === 'Detection'
+        && trackSettings.value.newTrackSettings.modeSettings.Detection.continuous
+        && recipes.some((r) => r instanceof SegmentationPointClick && r.active.value)) {
+        preSegmentationFeatures.clear();
+        handleAddTrackOrDetection();
+      }
+    }
+  }
+
+  /**
+   * Handle segmentation prediction confirmed - commit the polygon to the track.
+   * This is called when the user confirms the segmentation (right-click or Enter).
+   */
+  function handleSegmentationPredictionConfirmed(result: SegmentationPredictionResult) {
+    handleSegmentationPredictionReady(result);
+  }
+
+  /** Click-path variant: a fresh point click that should honor continuous mode. */
+  function handleSegmentationPredictionReadyFromClick(result: SegmentationPredictionResult) {
+    handleSegmentationPredictionReady(result, true);
+  }
+
+  /**
+   * Handle multi-frame segmentation confirmation.
+   * Commits polygons for all frames that have valid predictions.
+   */
+  function handleSegmentationConfirmedMulti(result: MultiFrameSegmentationResult) {
+    if (selectedTrackId.value === null) {
+      return;
+    }
+
+    const track = cameraStore.getPossibleTrack(selectedTrackId.value, selectedCamera.value);
+    if (!track) {
+      return;
+    }
+
+    // Apply each frame's prediction to the track
+    result.frames.forEach((frameResult, frameNum) => {
+      if (frameResult.polygon && frameResult.polygon.length >= 3) {
+        const bounds = frameResult.bounds || [
+          Math.min(...frameResult.polygon.map((p) => p[0])),
+          Math.min(...frameResult.polygon.map((p) => p[1])),
+          Math.max(...frameResult.polygon.map((p) => p[0])),
+          Math.max(...frameResult.polygon.map((p) => p[1])),
+        ] as [number, number, number, number];
+
+        // Close polygon if not already closed
+        const closedPolygon = [...frameResult.polygon];
+        const first = closedPolygon[0];
+        const last = closedPolygon[closedPolygon.length - 1];
+        if (first[0] !== last[0] || first[1] !== last[1]) {
+          closedPolygon.push([...first] as [number, number]);
+        }
+
+        const polygonGeometry: GeoJSON.Feature<TrackSupportedFeature>[] = [{
+          type: 'Feature',
+          geometry: {
+            type: 'Polygon',
+            coordinates: [closedPolygon],
+          },
+          properties: { key: SegmentationPolygonKey },
+        }];
+
+        const { interpolate } = track.canInterpolate(frameNum);
+
+        track.setFeature({
+          frame: frameNum,
+          flick: 0,
+          bounds,
+          keyframe: true,
+          interpolate,
+        }, polygonGeometry);
+
+        // Note: the other-camera (stereo) annotation is generated earlier, on
+        // each fresh prediction (handleSegmentationPredictionReady), so there is
+        // no need to regenerate it on confirm.
+        preSegmentationFeatures.delete(frameNum);
+      }
+    });
+
+    _nudgeEditingCanary();
+
+    if (onStereoSegmentationFinalize && selectedTrackId.value !== null) {
+      onStereoSegmentationFinalize({
+        trackId: selectedTrackId.value as number,
+        frameNums: Array.from(result.frames.keys()),
+      });
+    }
+  }
+
+  /**
+   * Handle segmentation prediction error - show error dialog to user
+   */
+  function handleSegmentationPredictionError(errorMessage: string) {
+    prompt({
+      title: 'Segmentation Error',
+      text: [errorMessage],
+    });
+  }
+
+  /**
+   * Handle segmentation reset - restore detection to its pre-segmentation state.
+   * Called when the user presses the Reset button, which triggers resetPoints()
+   * on the recipe, which emits 'prediction-reset' for each frame.
+   */
+  function handleSegmentationReset(data: { frameNum: number }) {
+    if (selectedTrackId.value === null) return;
+    const track = cameraStore.getPossibleTrack(selectedTrackId.value, selectedCamera.value);
+    if (!track) return;
+
+    const saved = preSegmentationFeatures.get(data.frameNum);
+    if (!saved) return;
+
+    if (!saved.hadFeature) {
+      track.deleteFeature(data.frameNum);
+    } else {
+      // Remove polygons that segmentation added (any key not present before),
+      // plus the default-key polygon (segmentation overwrites it). Original
+      // polygons under pre-existing keys are then overwritten back to their
+      // saved geometry by setFeature below.
+      const currentPolygons = track.getPolygonFeatures(data.frameNum);
+      const preExistingKeys = saved.existingPolygonKeys || new Set<string>();
+      currentPolygons.forEach((pf) => {
+        if (!preExistingKeys.has(pf.key)) {
+          track.removeFeatureGeometry(data.frameNum, { key: pf.key, type: 'Polygon' });
+        }
+      });
+      track.removeFeatureGeometry(data.frameNum, { key: '', type: 'Polygon' });
+      removeStereoLineGeometry(track, data.frameNum);
+      // Restore all original polygon geometry (including segmentation-keyed
+      // polygons that already existed before this edit), not just the default key.
+      const origFeatures = saved.geometryFeatures?.filter(
+        (f) => f.geometry.type === 'Polygon',
+      ) || [];
+      // Restore original bounds and geometry
+      track.setFeature({
+        frame: data.frameNum,
+        flick: 0,
+        bounds: saved.bounds,
+        keyframe: true,
+        interpolate: saved.interpolate ?? false,
+        fishLength: saved.fishLength,
+        attributes: saved.attributes
+          ? JSON.parse(JSON.stringify(saved.attributes))
+          : undefined,
+      }, origFeatures.length > 0
+        ? origFeatures as GeoJSON.Feature<TrackSupportedFeature>[]
+        : []);
+    }
+
+    if (onStereoAnnotationReset && isStereoInteractiveModeEnabled()) {
+      onStereoAnnotationReset({
+        trackId: selectedTrackId.value as number,
+        frameNum: data.frameNum,
+        sourceCamera: selectedCamera.value,
+      });
+    }
+
+    preSegmentationFeatures.delete(data.frameNum);
+    _nudgeEditingCanary();
+  }
+
+  /**
+   * Set up polygon recipe for adding a hole to an existing polygon.
+   * The recipe emits an activate event that triggers creation mode.
+   */
+  function handleAddHole() {
+    if (selectedTrackId.value === null) return;
+
+    const polygonRecipe = recipes.find((r) => r.name === 'PolygonBase');
+    if (polygonRecipe && 'setAddingHole' in polygonRecipe) {
+      (polygonRecipe as { setAddingHole: () => void }).setAddingHole();
+    }
+  }
+
+  /**
+   * Set up polygon recipe for adding a new separate polygon.
+   */
+  function handleAddPolygon() {
+    if (selectedTrackId.value === null) return;
+
+    const polygonRecipe = recipes.find((r) => r.name === 'PolygonBase');
+    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);
+        (polygonRecipe as { setAddingPolygon: (key: string) => void }).setAddingPolygon(newKey);
+      }
+    }
+  }
+
+  /**
+   * Cancel any in-progress creation mode (hole or polygon addition).
+   */
+  function handleCancelCreation() {
+    const polygonRecipe = recipes.find((r) => r.name === 'PolygonBase');
+    if (polygonRecipe && 'resetAddingMode' in polygonRecipe) {
+      (polygonRecipe as { resetAddingMode: () => void }).resetAddingMode();
+    }
+  }
+
+  /**
+   * Register a callback to finalize in-progress creation shapes.
+   * Called by LayerManager to connect the edit layer's finalize method.
+   */
+  function registerFinalizeCreation(cb: () => void) {
+    finalizeCreationCallback = cb;
+  }
+
   /* Subscribe to recipe activation events */
   recipes.forEach((r) => r.bus.$on('activate', handleSetAnnotationState));
+
+  /* Subscribe to segmentation recipe events */
+  recipes.forEach((r) => {
+    if (r instanceof SegmentationPointClick) {
+      r.bus.$on('points-updated', handleSegmentationPointsUpdated);
+      r.bus.$on('prediction-ready', handleSegmentationPredictionReadyFromClick);
+      r.bus.$on('prediction-confirmed', handleSegmentationPredictionConfirmed);
+      r.bus.$on('prediction-confirmed-multi', handleSegmentationConfirmedMulti);
+      r.bus.$on('prediction-error', handleSegmentationPredictionError);
+      r.bus.$on('prediction-reset', handleSegmentationReset);
+    }
+  });
+
   /* Unsubscribe before unmount */
   onBeforeUnmount(() => {
     recipes.forEach((r) => r.bus.$off('activate', handleSetAnnotationState));
+    recipes.forEach((r) => {
+      if (r instanceof SegmentationPointClick) {
+        r.bus.$off('points-updated', handleSegmentationPointsUpdated);
+        r.bus.$off('prediction-ready', handleSegmentationPredictionReadyFromClick);
+        r.bus.$off('prediction-confirmed', handleSegmentationPredictionConfirmed);
+        r.bus.$off('prediction-confirmed-multi', handleSegmentationConfirmedMulti);
+        r.bus.$off('prediction-error', handleSegmentationPredictionError);
+        r.bus.$off('prediction-reset', handleSegmentationReset);
+      }
+    });
   });
 
   return {
@@ -884,8 +1538,10 @@ export default function useModeManager({
     selectedKey,
     selectedCamera,
     selectNextTrack,
+    segmentationPoints,
     handler: {
       commitMerge: handleCommitMerge,
+      confirmRecipe: handleConfirmRecipe,
       groupAdd: handleAddGroup,
       deleteSelectedTracks: handleDeleteSelectedTracks,
       groupEdit: handleGroupEdit,
@@ -897,6 +1553,7 @@ export default function useModeManager({
       trackSelect: handleSelectTrack,
       lassoSelect: handleLassoSelect,
       trackSelectNext: handleSelectNext,
+      setTrackFeature: handleSetTrackFeature,
       updateRectBounds: handleUpdateRectBounds,
       updateGeoJSON: handleUpdateGeoJSON,
       removeTrack: handleRemoveTrack,
@@ -909,6 +1566,10 @@ export default function useModeManager({
       startLinking: handleStartLinking,
       stopLinking: handleStopLinking,
       seekFrame,
+      addHole: handleAddHole,
+      addPolygon: handleAddPolygon,
+      cancelCreation: handleCancelCreation,
+      registerFinalizeCreation,
     },
   };
 }
diff --git a/client/package.json b/client/package.json
index 7225ac7ff..580e19025 100644
--- a/client/package.json
+++ b/client/package.json
@@ -17,6 +17,7 @@
     "serve:electron:windows": "cross-env ELECTRON_DISABLE_SECURITY_WARNINGS=true electron-vite dev --entry=.electron/main/background.js",
     "build:web": "vite build",
     "build:electron": "electron-vite build && electron-builder --config electron-builder.json",
+    "build:electron:dir": "electron-vite build && electron-builder --config electron-builder.json --dir",
     "divecli": "node ./bin/platform/desktop/backend/cli.js",
     "lint": "eslint --ext .js,.ts,.vue src/ dive-common/ platform/",
     "lint:templates": "eslint --ext vue src/ dive-common/ platform/",
diff --git a/client/platform/desktop/backend/ipcService.ts b/client/platform/desktop/backend/ipcService.ts
index 40eb2b992..d76228da5 100644
--- a/client/platform/desktop/backend/ipcService.ts
+++ b/client/platform/desktop/backend/ipcService.ts
@@ -24,9 +24,25 @@ import * as common from './native/common';
 import beginMultiCamImport from './native/multiCamImport';
 import settings from './state/settings';
 import { listen } from './server';
+import {
+  getInteractiveServiceManager,
+} from './native/interactive';
+import {
+  SegmentationPredictRequest,
+  SegmentationStereoSegmentRequest,
+} from './native/segmentation';
+import {
+  StereoCalibration,
+  StereoSetFrameRequest,
+  StereoTransferLineRequest,
+  StereoTransferPointsRequest,
+  StereoMeasureLineRequest,
+  StereoAggregateLengthsRequest,
+} from './native/stereo';
 
 // defaults to linux if win32 doesn't exist
 const currentPlatform = OS.platform() === 'win32' ? win32 : linux;
+let samWarningShown = false;
 if (OS.platform() === 'win32') {
   win32.initialize();
 }
@@ -247,4 +263,166 @@ export default function register() {
     };
     return currentPlatform.train(settings.get(), args, updater);
   });
+
+  /**
+   * Interactive Segmentation Service
+   */
+
+  ipcMain.handle('segmentation-initialize', async () => {
+    const currentSettings = settings.get();
+    const pipelinesDir = path.join(currentSettings.viamePath, 'configs', 'pipelines');
+    const hasSam2 = fs.existsSync(path.join(pipelinesDir, 'interactive_segmenter_sam2.conf'));
+    const hasSam3 = fs.existsSync(path.join(pipelinesDir, 'interactive_segmenter_sam3.conf'));
+    const noSamInstalled = !hasSam2 && !hasSam3;
+
+    // Show a one-time warning if neither SAM pack is installed,
+    // but still proceed with initialization (VIAME has a default GrabCut fallback)
+    const showWarning = noSamInstalled && !samWarningShown;
+    if (showWarning) {
+      samWarningShown = true;
+    }
+
+    const segService = getInteractiveServiceManager();
+    await segService.initialize(currentSettings);
+    return { success: true, noSamInstalled: showWarning };
+  });
+
+  ipcMain.handle('segmentation-predict', async (_, args: SegmentationPredictRequest) => {
+    const segService = getInteractiveServiceManager();
+
+    // Auto-initialize if not ready
+    if (!segService.isSegmentationReady()) {
+      await segService.initialize(settings.get());
+    }
+
+    const response = await segService.predict(args);
+    return response;
+  });
+
+  ipcMain.handle('segmentation-stereo-segment', async (_, args: SegmentationStereoSegmentRequest) => {
+    const segService = getInteractiveServiceManager();
+
+    // Auto-initialize if not ready
+    if (!segService.isSegmentationReady()) {
+      await segService.initialize(settings.get());
+    }
+
+    const response = await segService.stereoSegment(args);
+    return response;
+  });
+
+  ipcMain.handle('segmentation-set-image', async (_, imagePath: string) => {
+    const segService = getInteractiveServiceManager();
+
+    if (!segService.isSegmentationReady()) {
+      await segService.initialize(settings.get());
+    }
+
+    await segService.setImage(imagePath);
+    return { success: true };
+  });
+
+  ipcMain.handle('segmentation-clear-image', async () => {
+    const segService = getInteractiveServiceManager();
+
+    if (segService.isReady()) {
+      await segService.clearImage();
+    }
+    return { success: true };
+  });
+
+  ipcMain.handle('segmentation-shutdown', async () => {
+    const segService = getInteractiveServiceManager();
+    return segService.shutdownSegmentation();
+  });
+
+  ipcMain.handle('segmentation-is-ready', () => {
+    const segService = getInteractiveServiceManager();
+    return { ready: segService.isSegmentationReady() };
+  });
+
+  /**
+   * Interactive Stereo Service
+   */
+
+  ipcMain.handle('stereo-enable', async (event, args?: { calibration?: StereoCalibration; calibrationFile?: string }) => {
+    const stereoService = getInteractiveServiceManager();
+
+    // Forward async disparity events to the renderer. The manager is a
+    // long-lived singleton, so clear any prior forwarders before re-adding to
+    // avoid accumulating listeners across enable cycles.
+    stereoService.removeAllListeners('disparity_ready');
+    stereoService.removeAllListeners('disparity_error');
+    stereoService.on('disparity_ready', (data) => {
+      event.sender.send('stereo-disparity-ready', data);
+    });
+    stereoService.on('disparity_error', (data) => {
+      event.sender.send('stereo-disparity-error', data);
+    });
+
+    const result = await stereoService.enable(
+      settings.get(),
+      args?.calibration,
+      args?.calibrationFile,
+    );
+    return result;
+  });
+
+  ipcMain.handle('stereo-disable', async () => {
+    const stereoService = getInteractiveServiceManager();
+    const result = await stereoService.disable();
+    return result;
+  });
+
+  ipcMain.handle('stereo-set-frame', async (_, args: StereoSetFrameRequest) => {
+    const stereoService = getInteractiveServiceManager();
+    const result = await stereoService.setFrame(args);
+    return result;
+  });
+
+  ipcMain.handle('stereo-get-status', async () => {
+    const stereoService = getInteractiveServiceManager();
+    const result = await stereoService.getStatus();
+    return result;
+  });
+
+  ipcMain.handle('stereo-transfer-line', async (_, args: StereoTransferLineRequest) => {
+    const stereoService = getInteractiveServiceManager();
+    const result = await stereoService.transferLine(args);
+    return result;
+  });
+
+  ipcMain.handle('stereo-transfer-points', async (_, args: StereoTransferPointsRequest) => {
+    const stereoService = getInteractiveServiceManager();
+    const result = await stereoService.transferPoints(args);
+    return result;
+  });
+
+  ipcMain.handle('stereo-measure-line', async (_, args: StereoMeasureLineRequest) => {
+    const stereoService = getInteractiveServiceManager();
+    const result = await stereoService.measureLine(args);
+    return result;
+  });
+
+  ipcMain.handle('stereo-aggregate-lengths', async (_, args: StereoAggregateLengthsRequest) => {
+    const stereoService = getInteractiveServiceManager();
+    const result = await stereoService.aggregateLengths(args);
+    return result;
+  });
+
+  ipcMain.handle('stereo-set-calibration', async (_, args: { calibration: StereoCalibration }) => {
+    const stereoService = getInteractiveServiceManager();
+    await stereoService.setCalibration(args.calibration);
+    return { success: true };
+  });
+
+  ipcMain.handle('stereo-shutdown', async () => {
+    const stereoService = getInteractiveServiceManager();
+    return stereoService.disable();
+  });
+
+  ipcMain.handle('stereo-is-enabled', () => {
+    const stereoService = getInteractiveServiceManager();
+    return { enabled: stereoService.isEnabled() };
+  });
 }
diff --git a/client/platform/desktop/backend/native/interactive.ts b/client/platform/desktop/backend/native/interactive.ts
new file mode 100644
index 000000000..6911f0c18
--- /dev/null
+++ b/client/platform/desktop/backend/native/interactive.ts
@@ -0,0 +1,679 @@
+/**
+ * Interactive Service Manager for Desktop
+ *
+ * Manages ONE persistent Python subprocess (viame.core.interactive_service) that
+ * hosts both interactive segmentation (point/SAM, text query, stereo point
+ * segmentation) and interactive stereo (enable, transfer, measure, dense
+ * disparity). Merging them into a single process lets stereo point-segmentation
+ * reuse the same stereo backend that interactive-stereo mode loads, instead of
+ * loading the stereo model twice.
+ *
+ * The process is spawned lazily on first use of either feature, and each
+ * feature's models load lazily on first relevant request (segmentation on the
+ * first predict, stereo on the first enable), so nothing heavy loads
+ * unnecessarily. Separate, unmodified VIAME config files drive each feature.
+ */
+
+import OS from 'os';
+import { spawn, ChildProcess } from 'child_process';
+import npath from 'path';
+import readline from 'readline';
+import { EventEmitter } from 'events';
+import { Settings } from 'platform/desktop/constants';
+import { observeChild } from './processManager';
+import linux from './linux';
+import win32 from './windows';
+import {
+  SegmentationStereoSegmentRequest,
+  SegmentationStereoSegmentResponse,
+  SegmentationPredictRequest,
+  SegmentationPredictResponse,
+} from './segmentation';
+import {
+  StereoCalibration,
+  StereoSetFrameRequest,
+  StereoSetFrameResponse,
+  StereoTransferLineRequest,
+  StereoTransferLineResponse,
+  StereoMeasureLineRequest,
+  StereoMeasureLineResponse,
+  StereoAggregateLengthsRequest,
+  StereoAggregateLengthsResponse,
+  StereoTransferPointsRequest,
+  StereoTransferPointsResponse,
+  StereoStatusResponse,
+  StereoMeasurement,
+} from './stereo';
+
+/** Error headline shown to users when the interactive service fails to load. */
+export const INTERACTIVE_LOAD_ERROR_MESSAGE = 'Unable to load the interactive service.';
+
+function getCurrentPlatform() {
+  return OS.platform() === 'win32' ? win32 : linux;
+}
+
+interface InteractiveLoadErrorContext {
+  reason: string;
+  viamePath?: string;
+  exitCode?: number | null;
+  signal?: NodeJS.Signals | null;
+  stderrLines?: string[];
+  cause?: string;
+}
+
+export function formatInteractiveLoadError(context: InteractiveLoadErrorContext): string {
+  const parts: string[] = [INTERACTIVE_LOAD_ERROR_MESSAGE, context.reason];
+  if (context.cause) {
+    parts.push(`Cause: ${context.cause}`);
+  }
+  if (context.exitCode != null || context.signal) {
+    const details: string[] = [];
+    if (context.exitCode != null) details.push(`exit code ${context.exitCode}`);
+    if (context.signal) details.push(`signal ${context.signal}`);
+    parts.push(`Process ended (${details.join(', ')}).`);
+  }
+  if (context.viamePath) {
+    parts.push(`VIAME path: ${context.viamePath}`);
+  }
+  const stderr = context.stderrLines?.filter((line) => line.trim()).slice(-8);
+  if (stderr?.length) {
+    parts.push('Recent service output:');
+    parts.push(...stderr.map((line) => `  ${line}`));
+  }
+  parts.push('Verify VIAME is installed and the path is set correctly in Settings.');
+  return parts.join('\n');
+}
+
+function formatStereoEnableError(
+  error: string,
+  options: { calibrationFile?: string; viamePath?: string },
+): string {
+  const parts = [error];
+  if (options.calibrationFile) {
+    parts.push(`Calibration file: ${options.calibrationFile}`);
+  }
+  if (options.viamePath) {
+    parts.push(`VIAME path: ${options.viamePath}`);
+  }
+  return parts.join('\n');
+}
+
+/** Loose shape of a JSON response line from the Python service. */
+interface ServiceResponse {
+  id: string;
+  success?: boolean;
+  error?: string;
+  type?: string;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  [key: string]: any;
+}
+
+interface PendingRequest {
+  resolve: (response: ServiceResponse) => void;
+  reject: (error: Error) => void;
+  timeout: NodeJS.Timeout;
+}
+
+export class InteractiveServiceManager extends EventEmitter {
+  private process: ChildProcess | null = null;
+
+  private readline: readline.Interface | null = null;
+
+  private pendingRequests: Map<string, PendingRequest> = new Map();
+
+  private isStarting = false;
+
+  private startPromise: Promise<void> | null = null;
+
+  private settings: Settings | null = null;
+
+  private requestCounter = 0;
+
+  /** Whether interactive stereo has been enabled in the running process. */
+  private stereoEnabled = false;
+
+  /** Whether the segmentation backend + model have been initialized (warmed). */
+  private segInitialized = false;
+
+  // Generous timeout: the first request of each feature lazily loads its model.
+  private readonly requestTimeoutMs = 300000;
+
+  /** Is the shared process running? */
+  isReady(): boolean {
+    return this.process !== null && this.process.exitCode === null;
+  }
+
+  /** Is interactive stereo currently enabled? */
+  isEnabled(): boolean {
+    return this.stereoEnabled && this.isReady();
+  }
+
+  /** Has the segmentation backend/model been initialized (warmed up)? */
+  isSegmentationReady(): boolean {
+    return this.segInitialized && this.isReady();
+  }
+
+  private generateRequestId(): string {
+    this.requestCounter += 1;
+    return `req_${Date.now()}_${this.requestCounter}`;
+  }
+
+  /**
+   * Ensure the shared Python process is running. Idempotent and de-duplicates
+   * concurrent callers. Spawning loads plugins (the slow, feature-agnostic step)
+   * but no models; models load lazily on first relevant request.
+   */
+  async ensureStarted(settings: Settings): Promise<void> {
+    if (this.isReady()) {
+      return;
+    }
+    if (this.isStarting && this.startPromise) {
+      await this.startPromise;
+      return;
+    }
+    this.isStarting = true;
+    this.settings = settings;
+    this.startPromise = this.doStart(settings);
+    try {
+      await this.startPromise;
+    } finally {
+      this.isStarting = false;
+    }
+  }
+
+  private async doStart(settings: Settings): Promise<void> {
+    // Clean up any defunct process first.
+    await this.shutdown();
+
+    const platform = getCurrentPlatform();
+    const isValid = await platform.validateViamePath(settings);
+    if (isValid !== true) {
+      throw new Error(formatInteractiveLoadError({
+        reason: isValid,
+        viamePath: settings.viamePath,
+      }));
+    }
+
+    return new Promise((resolve, reject) => {
+      const viameConstants = platform.getViameConstants(settings);
+      const pythonExe = platform.getViamePythonExe(settings);
+      const pipelines = npath.join(settings.viamePath, 'configs', 'pipelines');
+      const segConfig = npath.join(pipelines, 'interactive_segmenter_default.conf');
+      const stereoConfig = npath.join(pipelines, 'interactive_stereo_default.conf');
+
+      // -I: isolated mode — do not prepend the process cwd to sys.path. Without
+      // this, a sibling folder named "coverage" (e.g. Vitest HTML output under
+      // client/coverage/) shadows Python's coverage package, breaks numba import,
+      // and prevents ocv_watershed from registering during plugin load.
+      const pyCommand = [
+        `"${pythonExe}" -I -m viame.core.interactive_service`,
+        `--segmentation-config "${segConfig}"`,
+        `--stereo-config "${stereoConfig}"`,
+      ].join(' ');
+
+      const command = `${viameConstants.setupScriptAbs} && ${pyCommand}`;
+
+      console.log('[Interactive] Starting interactive service...');
+      console.log(`[Interactive] Command: ${command}`);
+
+      const stderrLines: string[] = [];
+      const maxStderrLines = 20;
+
+      this.process = observeChild(spawn(command, {
+        shell: viameConstants.shell,
+        cwd: settings.viamePath,
+        stdio: ['pipe', 'pipe', 'pipe'],
+      }));
+
+      if (this.process.stdout) {
+        this.readline = readline.createInterface({
+          input: this.process.stdout,
+          crlfDelay: Infinity,
+        });
+        this.readline.on('line', (line) => this.handleResponse(line));
+      }
+
+      let startupTimeout: NodeJS.Timeout | null = null;
+
+      if (this.process.stderr) {
+        this.process.stderr.on('data', (data: Buffer) => {
+          const message = data.toString().trim();
+          if (message) {
+            console.log(`[Interactive] ${message}`);
+            stderrLines.push(message);
+            if (stderrLines.length > maxStderrLines) {
+              stderrLines.shift();
+            }
+            // Ready once plugins are loaded and the stdin loop is live (before
+            // any model loads — those happen lazily on first request).
+            if (message.includes('Service started, waiting for requests')) {
+              if (startupTimeout) {
+                clearTimeout(startupTimeout);
+                startupTimeout = null;
+              }
+              resolve();
+            }
+          }
+        });
+      }
+
+      const rejectStartup = (context: InteractiveLoadErrorContext) => {
+        if (!this.isStarting) {
+          return;
+        }
+        this.isStarting = false;
+        if (startupTimeout) {
+          clearTimeout(startupTimeout);
+          startupTimeout = null;
+        }
+        this.shutdown().finally(() => reject(new Error(formatInteractiveLoadError({
+          ...context,
+          viamePath: context.viamePath ?? settings.viamePath,
+          stderrLines: context.stderrLines ?? stderrLines,
+        }))));
+      };
+
+      this.process.on('exit', (code, signal) => {
+        console.log(`[Interactive] Process exited with code ${code}, signal ${signal}`);
+        this.cleanup();
+        if (this.isStarting) {
+          rejectStartup({
+            reason: 'The service process exited before it became ready.',
+            exitCode: code,
+            signal,
+          });
+        }
+      });
+
+      this.process.on('error', (err) => {
+        console.error('[Interactive] Process error:', err);
+        this.cleanup();
+        if (this.isStarting) {
+          rejectStartup({
+            reason: 'Failed to start the service process.',
+            cause: err.message,
+          });
+        }
+      });
+
+      // Startup covers plugin loading only (~tens of seconds), not models.
+      startupTimeout = setTimeout(() => {
+        rejectStartup({
+          reason: 'The service did not become ready within 5 minutes.',
+        });
+      }, 300000);
+    });
+  }
+
+  /** Route an incoming JSON line to its pending request, or emit async events. */
+  private handleResponse(line: string): void {
+    let response: ServiceResponse;
+    try {
+      response = JSON.parse(line) as ServiceResponse;
+    } catch (err) {
+      console.error('[Interactive] Failed to parse response:', line, err);
+      return;
+    }
+    const pending = this.pendingRequests.get(response.id);
+    if (pending) {
+      clearTimeout(pending.timeout);
+      this.pendingRequests.delete(response.id);
+      pending.resolve(response);
+    } else if (response.type === 'disparity_ready') {
+      this.emit('disparity_ready', response);
+    } else if (response.type === 'disparity_error') {
+      this.emit('disparity_error', response);
+    } else {
+      console.warn(`[Interactive] Received response for unknown request: ${response.id}`);
+    }
+  }
+
+  /** Write a command to the process and resolve with the matching response. */
+  private sendRequest(payload: Record<string, unknown>, timeoutLabel: string): Promise<ServiceResponse> {
+    if (!this.isReady() || !this.process?.stdin) {
+      return Promise.reject(new Error('Interactive service is not running'));
+    }
+    const id = this.generateRequestId();
+    const fullRequest = { ...payload, id };
+    return new Promise<ServiceResponse>((resolve, reject) => {
+      const timeout = setTimeout(() => {
+        this.pendingRequests.delete(id);
+        reject(new Error(`${timeoutLabel} request timed out after ${this.requestTimeoutMs}ms`));
+      }, this.requestTimeoutMs);
+
+      this.pendingRequests.set(id, { resolve, reject, timeout });
+
+      const requestLine = `${JSON.stringify(fullRequest)}\n`;
+      this.process!.stdin!.write(requestLine, (err) => {
+        if (err) {
+          clearTimeout(timeout);
+          this.pendingRequests.delete(id);
+          reject(err);
+        }
+      });
+    });
+  }
+
+  // ----------------------------------------------------- segmentation API
+
+  /**
+   * Start the shared process and initialize + warm up the segmentation models.
+   * Called when the user enters point-segmentation mode, so SAM loads on mode
+   * entry rather than on the first click. Idempotent.
+   */
+  async initialize(settings: Settings): Promise<void> {
+    await this.ensureStarted(settings);
+    if (!this.segInitialized) {
+      const response = await this.sendRequest({ command: 'init_segmentation' }, 'Segmentation init');
+      if (!response.success) {
+        throw new Error(response.error || 'Failed to initialize segmentation');
+      }
+      this.segInitialized = true;
+    }
+  }
+
+  async predict(request: SegmentationPredictRequest): Promise<SegmentationPredictResponse> {
+    if (!request.imagePath) {
+      throw new Error('imagePath is required for segmentation prediction');
+    }
+    const response = await this.sendRequest({
+      command: 'predict',
+      image_path: request.imagePath,
+      points: request.points,
+      point_labels: request.pointLabels,
+      mask_input: request.maskInput,
+      multimask_output: request.multimaskOutput ?? false,
+      frame_time: request.frameTime,
+    }, 'Segmentation predict');
+    return response as unknown as SegmentationPredictResponse;
+  }
+
+  async stereoSegment(
+    request: SegmentationStereoSegmentRequest,
+  ): Promise<SegmentationStereoSegmentResponse> {
+    const r = await this.sendRequest({
+      command: 'stereo_segment',
+      polygon: request.polygon,
+      points: request.points,
+      point_labels: request.pointLabels,
+      source_image_path: request.sourceImagePath,
+      other_image_path: request.otherImagePath,
+      calibration_file: request.calibrationFile,
+      frame_time: request.frameTime,
+    }, 'Segmentation stereo_segment');
+    return {
+      id: r.id,
+      success: r.success,
+      error: r.error,
+      polygon: r.polygon,
+      bounds: r.bounds,
+      score: r.score,
+      seedPoints: r.seed_points as [number, number][] | undefined,
+      seedLabels: r.seed_labels as number[] | undefined,
+      generateLine: r.generate_line as boolean | undefined,
+      lineSource: r.line_source as [[number, number], [number, number]] | undefined,
+      lineOther: r.line_other as [[number, number], [number, number]] | undefined,
+      measurement: r.measurement as StereoMeasurement | undefined,
+    };
+  }
+
+  async setImage(imagePath: string): Promise<void> {
+    await this.sendRequest({ command: 'set_image', image_path: imagePath }, 'set_image');
+  }
+
+  async clearImage(): Promise<void> {
+    if (!this.isReady()) {
+      return;
+    }
+    await this.sendRequest({ command: 'clear_image' }, 'clear_image');
+  }
+
+  /**
+   * Release segmentation resources without killing the shared process.
+   * Stereo may still be enabled in the same backend.
+   */
+  async shutdownSegmentation(): Promise<{ success: boolean }> {
+    if (!this.isReady()) {
+      this.segInitialized = false;
+      return { success: true };
+    }
+    try {
+      await this.clearImage();
+    } catch {
+      // Best-effort teardown; still mark segmentation as not ready.
+    }
+    this.segInitialized = false;
+    return { success: true };
+  }
+
+  // ----------------------------------------------------------- stereo API
+
+  async enable(
+    settings: Settings,
+    calibration?: StereoCalibration,
+    calibrationFile?: string,
+  ): Promise<{ success: boolean; error?: string }> {
+    try {
+      await this.ensureStarted(settings);
+    } catch (err) {
+      return { success: false, error: err instanceof Error ? err.message : String(err) };
+    }
+    try {
+      const response = await this.sendRequest({
+        command: 'enable',
+        calibration,
+        calibration_file: calibrationFile,
+      }, 'Stereo enable');
+      if (response.success) {
+        this.stereoEnabled = true;
+        return { success: true };
+      }
+      return {
+        success: false,
+        error: formatStereoEnableError(
+          response.error || 'Failed to enable stereo service',
+          { calibrationFile, viamePath: settings.viamePath },
+        ),
+      };
+    } catch (err) {
+      return { success: false, error: err instanceof Error ? err.message : String(err) };
+    }
+  }
+
+  /**
+   * Disable interactive stereo. Unlike the old standalone manager this does NOT
+   * kill the process (segmentation may still be in use); it just tells the
+   * backend to disable and marks stereo disabled.
+   */
+  async disable(): Promise<{ success: boolean }> {
+    if (!this.stereoEnabled || !this.isReady()) {
+      this.stereoEnabled = false;
+      return { success: true };
+    }
+    try {
+      await this.sendRequest({ command: 'disable' }, 'Stereo disable');
+    } catch {
+      // ignore — disabling is best-effort
+    }
+    this.stereoEnabled = false;
+    return { success: true };
+  }
+
+  async setCalibration(calibration: StereoCalibration): Promise<void> {
+    await this.sendRequest({ command: 'set_calibration', calibration }, 'set_calibration');
+  }
+
+  async setFrame(request: StereoSetFrameRequest): Promise<StereoSetFrameResponse> {
+    if (!this.isEnabled()) {
+      return {
+        id: '', success: false, error: 'Stereo service is not enabled', disparityReady: false,
+      };
+    }
+    const r = await this.sendRequest({
+      command: 'set_frame',
+      left_image_path: request.leftImagePath,
+      right_image_path: request.rightImagePath,
+      frame_time: request.frameTime,
+    }, 'set_frame');
+    return {
+      id: r.id,
+      success: r.success,
+      error: r.error,
+      disparityReady: r.disparity_ready || false,
+      message: r.message,
+    };
+  }
+
+  async getStatus(): Promise<StereoStatusResponse> {
+    if (!this.isReady()) {
+      return {
+        id: '', success: true, enabled: false, disparityReady: false, hasCalibration: false,
+      };
+    }
+    const r = await this.sendRequest({ command: 'get_status' }, 'get_status');
+    return {
+      id: r.id,
+      success: r.success,
+      enabled: r.enabled || false,
+      disparityReady: r.disparity_ready || false,
+      computing: r.computing,
+      currentLeftPath: r.current_left_path,
+      currentRightPath: r.current_right_path,
+      hasCalibration: r.has_calibration || false,
+    };
+  }
+
+  async transferLine(request: StereoTransferLineRequest): Promise<StereoTransferLineResponse> {
+    if (!this.isEnabled()) {
+      return { id: '', success: false, error: 'Stereo service is not enabled' };
+    }
+    const r = await this.sendRequest({ command: 'transfer_line', line: request.line }, 'transfer_line');
+    return {
+      id: r.id,
+      success: r.success,
+      error: r.error,
+      transferredLine: r.transferred_line,
+      originalLine: r.original_line,
+      length: r.length,
+      measurement: r.measurement,
+      depthInfo: r.depth_info ? {
+        depthPoint1: r.depth_info.depth_point1,
+        depthPoint2: r.depth_info.depth_point2,
+        disparityPoint1: r.depth_info.disparity_point1,
+        disparityPoint2: r.depth_info.disparity_point2,
+      } : undefined,
+    };
+  }
+
+  async transferPoints(request: StereoTransferPointsRequest): Promise<StereoTransferPointsResponse> {
+    if (!this.isEnabled()) {
+      return { id: '', success: false, error: 'Stereo service is not enabled' };
+    }
+    const r = await this.sendRequest({ command: 'transfer_points', points: request.points }, 'transfer_points');
+    return {
+      id: r.id,
+      success: r.success,
+      error: r.error,
+      transferredPoints: r.transferred_points,
+      originalPoints: r.original_points,
+      disparityValues: r.disparity_values,
+    };
+  }
+
+  async measureLine(request: StereoMeasureLineRequest): Promise<StereoMeasureLineResponse> {
+    if (!this.isEnabled()) {
+      return { id: '', success: false, error: 'Stereo service is not enabled' };
+    }
+    const r = await this.sendRequest({
+      command: 'measure_line',
+      left_line: request.leftLine,
+      right_line: request.rightLine,
+    }, 'measure_line');
+    return {
+      id: r.id, success: r.success, error: r.error, length: r.length, measurement: r.measurement,
+    };
+  }
+
+  async aggregateLengths(request: StereoAggregateLengthsRequest): Promise<StereoAggregateLengthsResponse> {
+    if (!this.isEnabled()) {
+      return { id: '', success: false, error: 'Stereo service is not enabled' };
+    }
+    const r = await this.sendRequest({
+      command: 'aggregate_lengths',
+      lengths: request.lengths,
+      method: request.method || 'average',
+    }, 'aggregate_lengths');
+    return {
+      id: r.id, success: r.success, error: r.error, avgLength: r.avg_length,
+    };
+  }
+
+  // ------------------------------------------------------------ lifecycle
+
+  private cleanup(): void {
+    this.pendingRequests.forEach((pending) => {
+      clearTimeout(pending.timeout);
+      pending.reject(new Error('Interactive service terminated'));
+    });
+    this.pendingRequests.clear();
+
+    if (this.readline) {
+      this.readline.close();
+      this.readline = null;
+    }
+
+    this.process = null;
+    this.stereoEnabled = false;
+    this.segInitialized = false;
+    this.emit('shutdown');
+  }
+
+  async shutdown(): Promise<void> {
+    if (!this.process) {
+      return;
+    }
+    console.log('[Interactive] Shutting down interactive service...');
+    await new Promise<void>((resolve) => {
+      const reqId = this.generateRequestId();
+      const request = { id: reqId, command: 'shutdown' };
+      if (this.process?.stdin?.writable) {
+        this.process.stdin.write(`${JSON.stringify(request)}\n`);
+      }
+      const timeoutId = setTimeout(() => {
+        if (this.process) {
+          console.log('[Interactive] Force killing interactive service...');
+          this.process.kill('SIGTERM');
+        }
+        this.cleanup();
+        resolve();
+      }, 5000);
+      if (this.process) {
+        this.process.once('exit', () => {
+          clearTimeout(timeoutId);
+          this.cleanup();
+          resolve();
+        });
+      } else {
+        clearTimeout(timeoutId);
+        resolve();
+      }
+    });
+  }
+}
+
+// Singleton instance shared by all IPC handlers.
+let serviceManager: InteractiveServiceManager | null = null;
+
+export function getInteractiveServiceManager(): InteractiveServiceManager {
+  if (!serviceManager) {
+    serviceManager = new InteractiveServiceManager();
+  }
+  return serviceManager;
+}
+
+export async function shutdownInteractiveService(): Promise<void> {
+  if (serviceManager) {
+    await serviceManager.shutdown();
+    serviceManager = null;
+  }
+}
diff --git a/client/platform/desktop/backend/native/linux.ts b/client/platform/desktop/backend/native/linux.ts
index 1ec205ea7..77041b879 100644
--- a/client/platform/desktop/backend/native/linux.ts
+++ b/client/platform/desktop/backend/native/linux.ts
@@ -46,7 +46,26 @@ const ViameLinuxConstants = {
 
 function sourceString(settings: Settings) {
   const setupScriptAbs = npath.join(settings.viamePath, ViameLinuxConstants.setup);
-  return `. "${setupScriptAbs}"`;
+  // Clear inherited VIAME paths so setup_viame.sh defines a consistent environment.
+  const clearEnv = [
+    'KWIVER_PLUGIN_PATH',
+    'SPROKIT_PYTHON_MODULES',
+    'PYTHONPATH',
+    'VIAME_INSTALL',
+    'SPROKIT_MODULE_PATH',
+  ].join(' ');
+  return `unset ${clearEnv} && . "${setupScriptAbs}"`;
+}
+
+function getViameConstants(settings: Settings): viame.ViameConstants {
+  return {
+    ...ViameLinuxConstants,
+    setupScriptAbs: sourceString(settings),
+  };
+}
+
+function getViamePythonExe(settings: Settings): string {
+  return npath.join(settings.viamePath, 'bin', 'python');
 }
 
 async function validateViamePath(settings: Settings): Promise<true | string> {
@@ -82,10 +101,7 @@ async function runPipeline(
   runPipelineArgs: RunPipeline,
   updater: DesktopJobUpdater,
 ): Promise<DesktopJob> {
-  return viame.runPipeline(settings, runPipelineArgs, updater, validateViamePath, {
-    ...ViameLinuxConstants,
-    setupScriptAbs: sourceString(settings),
-  });
+  return viame.runPipeline(settings, runPipelineArgs, updater, validateViamePath, getViameConstants(settings));
 }
 
 async function exportTrainedPipeline(
@@ -93,10 +109,13 @@ async function exportTrainedPipeline(
   exportTrainedPipelineArgs: ExportTrainedPipeline,
   updater: DesktopJobUpdater,
 ): Promise<DesktopJob> {
-  return viame.exportTrainedPipeline(settings, exportTrainedPipelineArgs, updater, validateViamePath, {
-    ...ViameLinuxConstants,
-    setupScriptAbs: sourceString(settings),
-  });
+  return viame.exportTrainedPipeline(
+    settings,
+    exportTrainedPipelineArgs,
+    updater,
+    validateViamePath,
+    getViameConstants(settings),
+  );
 }
 
 async function train(
@@ -104,10 +123,7 @@ async function train(
   runTrainingArgs: RunTraining,
   updater: DesktopJobUpdater,
 ): Promise<DesktopJob> {
-  return viame.train(settings, runTrainingArgs, updater, validateViamePath, {
-    ...ViameLinuxConstants,
-    setupScriptAbs: sourceString(settings),
-  });
+  return viame.train(settings, runTrainingArgs, updater, validateViamePath, getViameConstants(settings));
 }
 
 // Based on https://github.com/chrisallenlane/node-nvidia-smi
@@ -146,4 +162,6 @@ export default {
   exportTrainedPipeline,
   train,
   validateViamePath,
+  getViameConstants,
+  getViamePythonExe,
 };
diff --git a/client/platform/desktop/backend/native/multiCamImport.ts b/client/platform/desktop/backend/native/multiCamImport.ts
index 5a7b160d2..2d1678f62 100644
--- a/client/platform/desktop/backend/native/multiCamImport.ts
+++ b/client/platform/desktop/backend/native/multiCamImport.ts
@@ -218,6 +218,7 @@ async function beginMultiCamImport(args: MultiCamImportArgs): Promise<DesktopMed
     mediaConvertList,
     trackFileAbsPath: '',
     forceMediaTranscode: false,
+    useNativePlayback: false,
     multiCamTrackFiles: trackFileCount === 0 ? null : multiCamTrackFiles,
   };
 }
diff --git a/client/platform/desktop/backend/native/segmentation.ts b/client/platform/desktop/backend/native/segmentation.ts
new file mode 100644
index 000000000..e71ad0d1e
--- /dev/null
+++ b/client/platform/desktop/backend/native/segmentation.ts
@@ -0,0 +1,95 @@
+/**
+ * Interactive Segmentation types.
+ *
+ * The runtime service manager was merged into the unified InteractiveServiceManager
+ * (see ./interactive). This module now only holds the segmentation request/response
+ * contracts shared between that manager and the IPC layer.
+ */
+
+import { StereoMeasurement } from './stereo';
+
+/** Error message shown to users when segmentation model process fails to load */
+export const SEGMENTATION_LOAD_ERROR_MESSAGE = "Model failed to load. If you haven't downloaded the SAM2 model pack from the VIAME Add-On wiki, please do so.";
+
+/** Request to the segmentation service */
+export interface SegmentationInternalPredictRequest {
+  /** Unique request ID for correlation */
+  id: string;
+  /** Path to the image file (or video file if frame is specified) */
+  imagePath: string;
+  /** Point coordinates as [x, y] pairs */
+  points: [number, number][];
+  /** Point labels: 1 for foreground, 0 for background */
+  pointLabels: number[];
+  /** Optional low-res mask from previous prediction for refinement */
+  maskInput?: number[][];
+  /** Whether to return multiple mask options */
+  multimaskOutput?: boolean;
+  /** Time in seconds when imagePath is a video file */
+  frameTime?: number;
+}
+
+/** Response from the segmentation service */
+export interface SegmentationInternalPredictResponse {
+  /** Request ID for correlation */
+  id: string;
+  /** Whether the prediction succeeded */
+  success: boolean;
+  /** Error message if failed */
+  error?: string;
+  /** Polygon coordinates as [x, y] pairs (largest exterior, for backward compat) */
+  polygon?: [number, number][];
+  /** Multi-polygon data with holes support */
+  polygons?: Array<{ exterior: [number, number][]; holes: [number, number][][] }>;
+  /** Bounding box [x_min, y_min, x_max, y_max] */
+  bounds?: [number, number, number, number];
+  /** Quality score from segmentation model */
+  score?: number;
+  /** Low-res mask for subsequent refinement */
+  lowResMask?: number[][];
+  /** Mask dimensions [height, width] */
+  maskShape?: [number, number];
+}
+
+/**
+ * Request for stereo point-segmentation. The segmentation service orchestrates
+ * everything: it warps a seed to the other camera (reusing the configured
+ * interactive-stereo backend), segments there, and -- when enabled -- derives
+ * head/tail lines and the stereo measurement.
+ */
+export interface SegmentationStereoSegmentRequest {
+  /** The already-segmented source-camera polygon (for sampling + measurement). */
+  polygon?: [number, number][];
+  /** Source-camera click points and labels. */
+  points: [number, number][];
+  pointLabels: number[];
+  /** Source (clicked) and other camera image/video paths. */
+  sourceImagePath: string;
+  otherImagePath: string;
+  /** Calibration file path, read by the embedded stereo warper. */
+  calibrationFile?: string;
+  /** Time in seconds when the paths are video files. */
+  frameTime?: number;
+}
+
+/** Response: the other-camera polygon plus optional lines + measurement. */
+export interface SegmentationStereoSegmentResponse {
+  id: string;
+  success: boolean;
+  error?: string;
+  /** Other-camera polygon from SAM. */
+  polygon?: [number, number][];
+  bounds?: [number, number, number, number];
+  score?: number;
+  /** Seed point(s) used on the other camera (median of warped samples). */
+  seedPoints?: [number, number][];
+  seedLabels?: number[];
+  /** Optional head/tail lines: source = clicked camera, other = warped. */
+  generateLine?: boolean;
+  lineSource?: [[number, number], [number, number]];
+  lineOther?: [[number, number], [number, number]];
+  measurement?: StereoMeasurement;
+}
+
+export type SegmentationPredictRequest = Omit<SegmentationInternalPredictRequest, 'id'>;
+export type SegmentationPredictResponse = SegmentationInternalPredictResponse;
diff --git a/client/platform/desktop/backend/native/stereo.ts b/client/platform/desktop/backend/native/stereo.ts
new file mode 100644
index 000000000..4e07a1fec
--- /dev/null
+++ b/client/platform/desktop/backend/native/stereo.ts
@@ -0,0 +1,133 @@
+/**
+ * Interactive Stereo types.
+ *
+ * The runtime service manager was merged into the unified InteractiveServiceManager
+ * (see ./interactive). This module now only holds the stereo request/response
+ * contracts shared between that manager and the IPC layer.
+ */
+
+/** Error message shown to users when stereo service fails to load */
+export const STEREO_LOAD_ERROR_MESSAGE = 'Unable to load stereo service';
+
+/** Calibration data for stereo depth computation */
+export interface StereoCalibration {
+  fx_left: number;
+  fy_left?: number;
+  cx_left: number;
+  cy_left: number;
+  T: [number, number, number];
+}
+
+/** Request to set the current stereo frame */
+export interface StereoSetFrameRequest {
+  leftImagePath: string;
+  rightImagePath: string;
+  /** Time in seconds when paths are video files */
+  frameTime?: number;
+}
+
+/** Response from set frame request */
+export interface StereoSetFrameResponse {
+  id: string;
+  success: boolean;
+  error?: string;
+  disparityReady: boolean;
+  message?: string;
+}
+
+/** Request to transfer a line from left to right image */
+export interface StereoTransferLineRequest {
+  line: [[number, number], [number, number]];
+}
+
+/**
+ * Full stereo measurement for a line, mirroring VIAME's compute_stereo_measurement.
+ * All values are in calibration units (e.g. mm). Keys match VIAME's attribute names.
+ */
+export interface StereoMeasurement {
+  length: number;
+  midpoint_x: number;
+  midpoint_y: number;
+  midpoint_z: number;
+  midpoint_range: number;
+  stereo_rms: number;
+}
+
+/** Response from transfer line request */
+export interface StereoTransferLineResponse {
+  id: string;
+  success: boolean;
+  error?: string;
+  transferredLine?: [[number, number], [number, number]];
+  originalLine?: [[number, number], [number, number]];
+  /** Triangulated 3D length of the line in calibration units (e.g. mm). */
+  length?: number;
+  /** Full stereo measurement (length, midpoint, range, RMS). */
+  measurement?: StereoMeasurement;
+  depthInfo?: {
+    depthPoint1: number | null;
+    depthPoint2: number | null;
+    disparityPoint1: number;
+    disparityPoint2: number;
+  };
+}
+
+/** Request to triangulate the length of a line already corresponded on both images */
+export interface StereoMeasureLineRequest {
+  leftLine: [[number, number], [number, number]];
+  rightLine: [[number, number], [number, number]];
+}
+
+/** Response from a measure-line request */
+export interface StereoMeasureLineResponse {
+  id: string;
+  success: boolean;
+  error?: string;
+  /** Triangulated 3D length in calibration units (e.g. mm). */
+  length?: number;
+  /** Full stereo measurement (length, midpoint, range, RMS). */
+  measurement?: StereoMeasurement;
+}
+
+/** Request to aggregate per-detection lengths along a track into a single value */
+export interface StereoAggregateLengthsRequest {
+  lengths: number[];
+  /** 'average' (default), 'average_iqr', or 'median'. */
+  method?: string;
+}
+
+/** Response from an aggregate-lengths request */
+export interface StereoAggregateLengthsResponse {
+  id: string;
+  success: boolean;
+  error?: string;
+  /** Aggregated length in calibration units (e.g. mm). */
+  avgLength?: number;
+}
+
+/** Request to transfer multiple points */
+export interface StereoTransferPointsRequest {
+  points: [number, number][];
+}
+
+/** Response from transfer points request */
+export interface StereoTransferPointsResponse {
+  id: string;
+  success: boolean;
+  error?: string;
+  transferredPoints?: [number, number][];
+  originalPoints?: [number, number][];
+  disparityValues?: number[];
+}
+
+/** Status response from the stereo service */
+export interface StereoStatusResponse {
+  id: string;
+  success: boolean;
+  enabled: boolean;
+  disparityReady: boolean;
+  computing?: boolean;
+  currentLeftPath?: string;
+  currentRightPath?: string;
+  hasCalibration: boolean;
+}
diff --git a/client/platform/desktop/backend/native/windows.ts b/client/platform/desktop/backend/native/windows.ts
index 8961dc6d7..45dc630e0 100644
--- a/client/platform/desktop/backend/native/windows.ts
+++ b/client/platform/desktop/backend/native/windows.ts
@@ -83,7 +83,16 @@ async function validateViamePath(settings: Settings): Promise<true | string> {
   });
 }
 
-// Mock the validate call when starting jobs because it just takes too long to run.
+function getViameConstants(settings: Settings): viame.ViameConstants {
+  return {
+    ...ViameWindowsConstants,
+    setupScriptAbs: `"${npath.join(settings.viamePath, ViameWindowsConstants.setup)}"`,
+  };
+}
+
+function getViamePythonExe(settings: Settings): string {
+  return npath.join(settings.viamePath, 'bin', 'python.exe');
+}
 // TODO: maybe perform a lightweight check or some other test that doesn't spawn() viame
 const validateFake = () => Promise.resolve(true as const);
 
@@ -92,10 +101,7 @@ async function runPipeline(
   runPipelineArgs: RunPipeline,
   updater: DesktopJobUpdater,
 ): Promise<DesktopJob> {
-  return viame.runPipeline(settings, runPipelineArgs, updater, validateFake, {
-    ...ViameWindowsConstants,
-    setupScriptAbs: `"${npath.join(settings.viamePath, ViameWindowsConstants.setup)}"`,
-  });
+  return viame.runPipeline(settings, runPipelineArgs, updater, validateFake, getViameConstants(settings));
 }
 
 async function exportTrainedPipeline(
@@ -103,10 +109,13 @@ async function exportTrainedPipeline(
   exportTrainedPipelineArgs: ExportTrainedPipeline,
   updater: DesktopJobUpdater,
 ): Promise<DesktopJob> {
-  return viame.exportTrainedPipeline(settings, exportTrainedPipelineArgs, updater, validateFake, {
-    ...ViameWindowsConstants,
-    setupScriptAbs: `"${npath.join(settings.viamePath, ViameWindowsConstants.setup)}"`,
-  });
+  return viame.exportTrainedPipeline(
+    settings,
+    exportTrainedPipelineArgs,
+    updater,
+    validateFake,
+    getViameConstants(settings),
+  );
 }
 
 async function train(
@@ -114,10 +123,7 @@ async function train(
   runTrainingArgs: RunTraining,
   updater: DesktopJobUpdater,
 ): Promise<DesktopJob> {
-  return viame.train(settings, runTrainingArgs, updater, validateFake, {
-    ...ViameWindowsConstants,
-    setupScriptAbs: `"${npath.join(settings.viamePath, ViameWindowsConstants.setup)}"`,
-  });
+  return viame.train(settings, runTrainingArgs, updater, validateFake, getViameConstants(settings));
 }
 
 function checkDefaultNvidiaSmi(resolve: (value: NvidiaSmiReply) => void) {
@@ -190,4 +196,6 @@ export default {
   train,
   nvidiaSmi,
   initialize,
+  getViameConstants,
+  getViamePythonExe,
 };
diff --git a/client/platform/desktop/backend/serializers/viame.ts b/client/platform/desktop/backend/serializers/viame.ts
index 5f3201aab..25333581f 100644
--- a/client/platform/desktop/backend/serializers/viame.ts
+++ b/client/platform/desktop/backend/serializers/viame.ts
@@ -26,7 +26,10 @@ const HeadRegex = /^\(kp\) head (-?[0-9]+\.*-?[0-9]*) (-?[0-9]+\.*-?[0-9]*)/g;
 const TailRegex = /^\(kp\) tail (-?[0-9]+\.*-?[0-9]*) (-?[0-9]+\.*-?[0-9]*)/g;
 const AttrRegex = /^\(atr\) (.*?)\s(.+)/g;
 const TrackAttrRegex = /^\(trk-atr\) (.*?)\s(.+)/g;
-const PolyRegex = /^(\(poly\)) ((?:-?[0-9]+\.*-?[0-9]*\s*)+)/g;
+// Polygon format: (poly) coordinates
+const PolyRegex = /^\(poly\)\s*((?:-?[0-9]+\.*-?[0-9]*\s*)+)/g;
+// Hole format: (hole) coordinates
+const HoleRegex = /^\(hole\)\s*((?:-?[0-9]+\.*-?[0-9]*\s*)+)/g;
 const NoteRegex = /^\(note\)\s*(.+)/g;
 const FpsRegex = /fps:\s*(\d+(\.\d+)?)/ig;
 const ExecTimeRegEx = /exec_time:\s*(\d+(\.\d+)?)/ig;
@@ -93,6 +96,35 @@ function _rowInfo(row: string[]) {
   };
 }
 
+/** Resolve detection length from attributes.length or fishLength (either may be set). */
+function resolveDetectionLength(
+  fishLength?: number,
+  attributes?: StringKeyObject,
+): number | undefined {
+  const lengthAttr = attributes?.length;
+  const fromAttr = lengthAttr !== undefined && lengthAttr !== null ? Number(lengthAttr) : NaN;
+  if (Number.isFinite(fromAttr)) {
+    return fromAttr;
+  }
+  if (fishLength !== undefined && Number.isFinite(fishLength) && fishLength !== -1) {
+    return fishLength;
+  }
+  return undefined;
+}
+
+/** Keep fishLength and attributes.length in sync when either is present. */
+function syncDetectionLengthFields(feature: Feature): Feature {
+  const resolved = resolveDetectionLength(feature.fishLength, feature.attributes);
+  if (resolved === undefined) {
+    return feature;
+  }
+  return {
+    ...feature,
+    fishLength: resolved,
+    attributes: { ...(feature.attributes || {}), length: resolved },
+  };
+}
+
 /**
  * Read dataset metadata from a `dataset_info: <json>` comment field. Returns the parsed
  * object, or a `warning` if the field is present but unusable so the import can continue.
@@ -154,6 +186,18 @@ function _deduceType(value: string): boolean | number | string {
   return value;
 }
 
+/**
+ * Get the next available polygon key for a feature collection.
+ */
+function _getNextPolygonKey(
+  geoFeatureCollection: GeoJSON.FeatureCollection<TrackSupportedFeature, GeoJSON.GeoJsonProperties>,
+): string {
+  const polygonCount = geoFeatureCollection.features.filter(
+    (f) => f.geometry.type === 'Polygon',
+  ).length;
+  return polygonCount > 0 ? String(polygonCount) : '';
+}
+
 /**
  * Simplified from python variant.  Does not handle duplicate type/key pairs
  * within a single feature.
@@ -185,6 +229,28 @@ function _createGeoJsonFeature(
   return geoFeature;
 }
 
+/**
+ * Find an existing polygon feature by key and add a hole to it.
+ * @param geoFeatureCollection the feature collection to search
+ * @param coords hole coordinates
+ * @param key polygon key to find
+ */
+function _addHoleToPolygon(
+  geoFeatureCollection: GeoJSON.FeatureCollection<TrackSupportedFeature, GeoJSON.GeoJsonProperties>,
+  coords: number[][],
+  key = '',
+) {
+  const matchingFeature = geoFeatureCollection.features.find(
+    (feature) => feature.geometry.type === 'Polygon' && feature.properties?.key === key,
+  );
+  if (matchingFeature) {
+    // Add hole as additional ring to the polygon coordinates
+    (matchingFeature.geometry.coordinates as number[][][]).push(coords);
+    return true;
+  }
+  return false;
+}
+
 function _parseRow(row: string[]) {
   // Create empty feature collection
   const geoFeatureCollection:
@@ -241,11 +307,33 @@ function _parseRow(row: string[]) {
       trackAttributes[trackattr[1]] = _deduceType(trackattr[2]);
     }
 
-    /* Polygon */
+    /* Polygon - format: (poly) coordinates
+     * Multiple (poly) entries create separate polygons with auto-generated keys */
     const poly = getCaptureGroups(PolyRegex, value);
     if (poly !== null) {
+      const coordString = poly[1];
+      const coords: number[][] = [];
+      const polyList = coordString.split(' ');
+      polyList.forEach((coord, j) => {
+        if (j % 2 === 0) {
+          // Filter out ODDs
+          if (polyList[j + 1]) {
+            coords.push([parseFloat(coord), parseFloat(polyList[j + 1])]);
+          }
+        }
+      });
+      // Create new polygon with auto-generated key
+      const newKey = _getNextPolygonKey(geoFeatureCollection);
+      geoFeatureCollection.features.push(_createGeoJsonFeature('Polygon', coords, newKey));
+    }
+
+    /* Hole - format: (hole) coordinates
+     * Added to the most recent polygon */
+    const hole = getCaptureGroups(HoleRegex, value);
+    if (hole !== null) {
+      const coordString = hole[1];
       const coords: number[][] = [];
-      const polyList = poly[2].split(' ');
+      const polyList = coordString.split(' ');
       polyList.forEach((coord, j) => {
         if (j % 2 === 0) {
           // Filter out ODDs
@@ -254,7 +342,12 @@ function _parseRow(row: string[]) {
           }
         }
       });
-      geoFeatureCollection.features.push(_createGeoJsonFeature('Polygon', coords));
+      // Add as hole to the most recent polygon
+      const polygons = geoFeatureCollection.features.filter((f) => f.geometry.type === 'Polygon');
+      if (polygons.length > 0) {
+        const lastPolyKey = polygons[polygons.length - 1].properties?.key || '';
+        _addHoleToPolygon(geoFeatureCollection, coords, lastPolyKey);
+      }
     }
 
     /* Note */
@@ -288,21 +381,22 @@ function _parseFeature(row: string[]) {
     frame: rowInfo.frame,
     bounds: rowInfo.bounds,
   };
-  if (rowInfo.fishLength !== -1) {
+  if (rowInfo.fishLength !== -1 && Number.isFinite(rowInfo.fishLength)) {
     feature.fishLength = rowInfo.fishLength;
   }
   if (rowData.attributes) {
     feature.attributes = rowData.attributes;
   }
+  const syncedFeature = syncDetectionLengthFields(feature);
   if (rowData.geoFeatureCollection.features.length > 0) {
-    feature.geometry = rowData.geoFeatureCollection;
+    syncedFeature.geometry = rowData.geoFeatureCollection;
   }
   if (rowData.notes.length > 0) {
-    feature.notes = rowData.notes;
+    syncedFeature.notes = rowData.notes;
   }
   return {
     rowInfo,
-    feature,
+    feature: syncedFeature,
     trackAttributes: rowData.trackAttributes,
     confidencePairs: rowData.confidencePairs,
   };
@@ -638,18 +732,24 @@ async function serialize(
               column2 = moment.utc((feature.frame / meta.fps) * 1000).format('HH:mm:ss.SSSSSS');
             }
 
+            const lengthValue = resolveDetectionLength(feature.fishLength, feature.attributes);
+
             const row = [
               track.id,
               column2,
               feature.frame,
               ...(feature.bounds as number[]),
               sortedPairs[0][1], // always take highest confidence to be track confidence
-              feature.fishLength || -1,
+              (lengthValue !== undefined && Number.isFinite(lengthValue)) ? lengthValue : -1,
               ...flattenDeep(sortedPairs),
             ];
 
-            /* Feature Attributes */
-            Object.entries(feature.attributes || {}).forEach(([key, val]) => {
+            /* Feature Attributes — export length in (atr) as well as the length column */
+            const exportAttributes = { ...(feature.attributes || {}) };
+            if (lengthValue !== undefined && Number.isFinite(lengthValue)) {
+              exportAttributes.length = lengthValue;
+            }
+            Object.entries(exportAttributes).forEach(([key, val]) => {
               row.push(`${AtrToken} ${key} ${val}`);
             });
             /* Track Attributes */
@@ -661,8 +761,19 @@ async function serialize(
             if (feature.geometry && feature.geometry.type === 'FeatureCollection') {
               feature.geometry.features.forEach((geoJSONFeature) => {
                 if (geoJSONFeature.geometry.type === 'Polygon') {
-                  const coordinates = flattenDeep(geoJSONFeature.geometry.coordinates[0]);
-                  row.push(`${PolyToken} ${coordinates.map(Math.round).join(' ')}`);
+                  const allRings = geoJSONFeature.geometry.coordinates as number[][][];
+
+                  // Write outer ring (first ring)
+                  if (allRings.length > 0) {
+                    const outerCoords = flattenDeep(allRings[0]);
+                    row.push(`${PolyToken} ${outerCoords.map(Math.round).join(' ')}`);
+
+                    // Write holes (additional rings)
+                    for (let holeIdx = 0; holeIdx < allRings.length - 1; holeIdx += 1) {
+                      const holeCoords = flattenDeep(allRings[holeIdx + 1]);
+                      row.push(`(hole) ${holeCoords.map(Math.round).join(' ')}`);
+                    }
+                  }
                 } else if (geoJSONFeature.geometry.type === 'Point') {
                   if (geoJSONFeature.properties) {
                     const kpname = geoJSONFeature.properties.key;
@@ -672,7 +783,6 @@ async function serialize(
                     );
                   }
                 }
-                /* TODO support for multiple GeoJSON Objects of the same type */
               });
             }
 
diff --git a/client/platform/desktop/frontend/api.ts b/client/platform/desktop/frontend/api.ts
index 6ba334bb4..2e5293b77 100644
--- a/client/platform/desktop/frontend/api.ts
+++ b/client/platform/desktop/frontend/api.ts
@@ -4,6 +4,8 @@ import type {
   DatasetMetaMutable, DatasetType, MultiCamImportArgs,
   Pipe, Pipelines, PipelineParams, SaveAttributeArgs,
   SaveAttributeTrackFilterArgs, SaveDetectionsArgs, TrainingConfigs,
+  SegmentationPredictRequest, SegmentationPredictResponse, SegmentationStatusResponse,
+  SegmentationStereoSegmentRequest, SegmentationStereoSegmentResponse,
 } from 'dive-common/apispec';
 
 import {
@@ -266,6 +268,194 @@ async function cancelJob(job: DesktopJob): Promise<void> {
   return window.diveDesktop.invoke('cancel-job', job);
 }
 
+/**
+ * Interactive Segmentation API
+ */
+
+async function segmentationInitialize(): Promise<{ success: boolean; noSamInstalled?: boolean }> {
+  return window.diveDesktop.invoke('segmentation-initialize');
+}
+
+async function segmentationPredict(request: SegmentationPredictRequest): Promise<SegmentationPredictResponse> {
+  return window.diveDesktop.invoke('segmentation-predict', request);
+}
+
+async function segmentationStereoSegment(
+  request: SegmentationStereoSegmentRequest,
+): Promise<SegmentationStereoSegmentResponse> {
+  return window.diveDesktop.invoke('segmentation-stereo-segment', request);
+}
+
+async function segmentationSetImage(imagePath: string): Promise<{ success: boolean }> {
+  return window.diveDesktop.invoke('segmentation-set-image', imagePath);
+}
+
+async function segmentationClearImage(): Promise<{ success: boolean }> {
+  return window.diveDesktop.invoke('segmentation-clear-image');
+}
+
+async function segmentationShutdown(): Promise<{ success: boolean }> {
+  return window.diveDesktop.invoke('segmentation-shutdown');
+}
+
+async function segmentationIsReady(): Promise<SegmentationStatusResponse> {
+  return window.diveDesktop.invoke('segmentation-is-ready');
+}
+
+/**
+ * Interactive Stereo API
+ */
+
+interface StereoCalibration {
+  fx_left: number;
+  fy_left?: number;
+  cx_left: number;
+  cy_left: number;
+  T: [number, number, number];
+}
+
+interface StereoSetFrameRequest {
+  leftImagePath: string;
+  rightImagePath: string;
+}
+
+interface StereoSetFrameResponse {
+  id: string;
+  success: boolean;
+  error?: string;
+  disparityReady: boolean;
+  message?: string;
+}
+
+interface StereoStatusResponse {
+  id: string;
+  success: boolean;
+  enabled: boolean;
+  disparityReady: boolean;
+  computing?: boolean;
+  currentLeftPath?: string;
+  currentRightPath?: string;
+  hasCalibration: boolean;
+}
+
+interface StereoTransferLineRequest {
+  line: [[number, number], [number, number]];
+}
+
+interface StereoMeasurement {
+  length: number;
+  midpoint_x: number;
+  midpoint_y: number;
+  midpoint_z: number;
+  midpoint_range: number;
+  stereo_rms: number;
+}
+
+interface StereoTransferLineResponse {
+  id: string;
+  success: boolean;
+  error?: string;
+  transferredLine?: [[number, number], [number, number]];
+  originalLine?: [[number, number], [number, number]];
+  length?: number;
+  measurement?: StereoMeasurement;
+  depthInfo?: {
+    depthPoint1: number | null;
+    depthPoint2: number | null;
+    disparityPoint1: number;
+    disparityPoint2: number;
+  };
+}
+
+interface StereoMeasureLineRequest {
+  leftLine: [[number, number], [number, number]];
+  rightLine: [[number, number], [number, number]];
+}
+
+interface StereoMeasureLineResponse {
+  id: string;
+  success: boolean;
+  error?: string;
+  length?: number;
+  measurement?: StereoMeasurement;
+}
+
+interface StereoAggregateLengthsRequest {
+  lengths: number[];
+  method?: string;
+}
+
+interface StereoAggregateLengthsResponse {
+  id: string;
+  success: boolean;
+  error?: string;
+  avgLength?: number;
+}
+
+interface StereoTransferPointsRequest {
+  points: [number, number][];
+}
+
+interface StereoTransferPointsResponse {
+  id: string;
+  success: boolean;
+  error?: string;
+  transferredPoints?: [number, number][];
+  originalPoints?: [number, number][];
+  disparityValues?: number[];
+}
+
+async function stereoEnable(
+  calibration?: StereoCalibration,
+  calibrationFile?: string,
+): Promise<{ success: boolean; error?: string }> {
+  return window.diveDesktop.invoke('stereo-enable', { calibration, calibrationFile });
+}
+
+async function stereoDisable(): Promise<{ success: boolean }> {
+  return window.diveDesktop.invoke('stereo-disable');
+}
+
+async function stereoSetFrame(request: StereoSetFrameRequest): Promise<StereoSetFrameResponse> {
+  return window.diveDesktop.invoke('stereo-set-frame', request);
+}
+
+async function stereoGetStatus(): Promise<StereoStatusResponse> {
+  return window.diveDesktop.invoke('stereo-get-status');
+}
+
+async function stereoTransferLine(request: StereoTransferLineRequest): Promise<StereoTransferLineResponse> {
+  return window.diveDesktop.invoke('stereo-transfer-line', request);
+}
+
+async function stereoTransferPoints(request: StereoTransferPointsRequest): Promise<StereoTransferPointsResponse> {
+  return window.diveDesktop.invoke('stereo-transfer-points', request);
+}
+
+async function stereoMeasureLine(request: StereoMeasureLineRequest): Promise<StereoMeasureLineResponse> {
+  return window.diveDesktop.invoke('stereo-measure-line', request);
+}
+
+async function stereoAggregateLengths(request: StereoAggregateLengthsRequest): Promise<StereoAggregateLengthsResponse> {
+  return window.diveDesktop.invoke('stereo-aggregate-lengths', request);
+}
+
+async function stereoSetCalibration(calibration: StereoCalibration): Promise<{ success: boolean }> {
+  return window.diveDesktop.invoke('stereo-set-calibration', { calibration });
+}
+
+async function stereoIsEnabled(): Promise<{ enabled: boolean }> {
+  return window.diveDesktop.invoke('stereo-is-enabled');
+}
+
+function onStereoDisparityReady(callback: (data: unknown) => void): () => void {
+  return window.diveDesktop.on('stereo-disparity-ready', (data: unknown) => callback(data));
+}
+
+function onStereoDisparityError(callback: (data: unknown) => void): () => void {
+  return window.diveDesktop.on('stereo-disparity-error', (data: unknown) => callback(data));
+}
+
 /**
  * REST api for larger-body messages
  */
@@ -391,4 +581,25 @@ export {
   cancelJob,
   getLastCalibration,
   saveCalibration,
+  /* Segmentation APIs */
+  segmentationInitialize,
+  segmentationPredict,
+  segmentationStereoSegment,
+  segmentationSetImage,
+  segmentationClearImage,
+  segmentationShutdown,
+  segmentationIsReady,
+  /* Stereo APIs */
+  stereoEnable,
+  stereoDisable,
+  stereoSetFrame,
+  stereoGetStatus,
+  stereoTransferLine,
+  stereoTransferPoints,
+  stereoMeasureLine,
+  stereoAggregateLengths,
+  stereoSetCalibration,
+  stereoIsEnabled,
+  onStereoDisparityReady,
+  onStereoDisparityError,
 };
diff --git a/client/platform/desktop/frontend/components/ViewerLoader.vue b/client/platform/desktop/frontend/components/ViewerLoader.vue
index 141c49bac..27da7c806 100644
--- a/client/platform/desktop/frontend/components/ViewerLoader.vue
+++ b/client/platform/desktop/frontend/components/ViewerLoader.vue
@@ -1,6 +1,6 @@
 <script lang="ts">
 import {
-  computed, defineComponent, ref, watch, Ref,
+  computed, defineComponent, ref, watch, Ref, onMounted, onBeforeUnmount, nextTick,
 } from 'vue';
 import Viewer from 'dive-common/components/Viewer.vue';
 import RunPipelineMenu from 'dive-common/components/RunPipelineMenu.vue';
@@ -8,12 +8,39 @@ import ImportAnnotations from 'dive-common//components/ImportAnnotations.vue';
 import SidebarContext from 'dive-common/components/SidebarContext.vue';
 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 type {
+  StereoAnnotationCompleteParams,
+  StereoAnnotationResetParams,
+  StereoSegmentationFinalizeParams,
+} from 'dive-common/use/useModeManager';
+import { HeadPointKey, TailPointKey, HeadTailLineKey } from 'dive-common/recipes/headtail';
+import type { RectBounds } from 'vue-media-annotator/utils';
+import {
+  segmentationPredict, segmentationStereoSegment, segmentationInitialize, segmentationIsReady,
+  loadMetadata,
+  stereoEnable, stereoDisable, stereoSetFrame, stereoTransferLine, stereoTransferPoints,
+  stereoMeasureLine, stereoAggregateLengths,
+  onStereoDisparityReady, onStereoDisparityError,
+} from 'platform/desktop/frontend/api';
 import Export from './Export.vue';
 import JobTab from './JobTab.vue';
 import { datasets } from '../store/dataset';
 import { settings } from '../store/settings';
 import { runningJobs } from '../store/jobs';
 
+// Renderer-safe path helpers. Node's 'path' module is externalized in the
+// renderer (contextIsolation), so npath.* is unavailable here.
+function isAbsolutePath(p: string): boolean {
+  return /^([A-Za-z]:[\\/]|[\\/])/.test(p);
+}
+function joinPath(base: string, file: string): string {
+  if (!base) return file;
+  const sep = base.includes('\\') ? '\\' : '/';
+  return `${base.replace(/[\\/]+$/, '')}${sep}${file}`;
+}
+
 const buttonOptions = {
   outlined: true,
   color: 'grey lighten-1',
@@ -117,6 +144,1132 @@ export default defineComponent({
       });
     }
 
+    /**
+     * Build a function that resolves frame numbers to image file paths from dataset metadata.
+     */
+    function buildImagePathGetter(meta: {
+      originalBasePath: string;
+      originalImageFiles: string[];
+      type: string;
+      originalVideoFile?: string;
+    }): (frameNum: number) => string {
+      const {
+        originalBasePath, originalImageFiles, type, originalVideoFile,
+      } = meta;
+      return (frameNum: number): string => {
+        if (type === 'video') {
+          return joinPath(originalBasePath, originalVideoFile || '');
+        }
+        if (originalImageFiles && originalImageFiles[frameNum]) {
+          const imagePath = originalImageFiles[frameNum];
+          if (isAbsolutePath(imagePath)) {
+            return imagePath;
+          }
+          return joinPath(originalBasePath, imagePath);
+        }
+        return '';
+      };
+    }
+
+    /**
+     * Initialize segmentation recipe with platform-specific functions
+     */
+    async function initializeSegmentation() {
+      await nextTick(); // Wait for Viewer to be mounted
+      if (!viewerRef.value?.segmentationRecipe) {
+        return;
+      }
+
+      try {
+        // Load metadata to get image paths
+        const meta = await loadMetadata(props.id);
+
+        let getImagePath: (frameNum: number) => string;
+        let getFrameTime: ((frameNum: number) => number | undefined) | undefined;
+
+        if (meta.multiCamMedia) {
+          // Multicam: load per-camera metadata and build per-camera getters
+          const { cameras } = meta.multiCamMedia;
+          const cameraNames = Object.keys(cameras);
+          let multiCamIsVideo = false;
+          for (let i = 0; i < cameraNames.length; i += 1) {
+            const cam = cameraNames[i];
+            // eslint-disable-next-line no-await-in-loop
+            const camMeta = await loadMetadata(`${props.id}/${cam}`);
+            stereoImagePathGetters.value[cam] = buildImagePathGetter(camMeta);
+            if (camMeta.fps) stereoCameraFps.value[cam] = camMeta.fps;
+            if (camMeta.type === 'video') multiCamIsVideo = true;
+          }
+          stereoDatasetFps = meta.fps || meta.originalFps || stereoDatasetFps;
+          // Dynamic getter that reads selectedCamera at call time
+          getImagePath = (frameNum: number): string => {
+            const cam = viewerRef.value?.selectedCamera;
+            if (cam && stereoImagePathGetters.value[cam]) {
+              return stereoImagePathGetters.value[cam](frameNum);
+            }
+            return '';
+          };
+          // Video frame-time getter keyed on the selected camera's fps. Both
+          // stereo cameras share one fps; fall back to dataset / any-camera fps.
+          getFrameTime = multiCamIsVideo
+            ? (frameNum: number): number | undefined => {
+              const cam = viewerRef.value?.selectedCamera;
+              const fps = (cam ? stereoCameraFps.value[cam] : undefined)
+                || stereoDatasetFps || Object.values(stereoCameraFps.value)[0];
+              return fps ? frameNum / fps : undefined;
+            }
+            : undefined;
+        } else {
+          // Single cam: use base metadata directly
+          const singleGetter = buildImagePathGetter(meta);
+          getImagePath = singleGetter;
+          // Also cache for text query and video frame usage
+          cachedMeta = {
+            originalBasePath: meta.originalBasePath,
+            originalImageFiles: meta.originalImageFiles,
+            type: meta.type,
+            originalVideoFile: meta.originalVideoFile,
+            fps: meta.fps,
+            originalFps: meta.originalFps,
+          };
+          getFrameTime = cachedMeta.type === 'video' && cachedMeta.fps
+            ? (frameNum: number) => frameNum / (cachedMeta!.fps || 1)
+            : undefined;
+        }
+
+        // Initialize the recipe
+        // Desktop uses imagePath from the request, so we ignore the frameNum parameter
+        viewerRef.value.segmentationRecipe.initialize({
+          // eslint-disable-next-line @typescript-eslint/no-unused-vars
+          predictFn: (request: SegmentationPredictRequest, _frameNum: number) => segmentationPredict(request),
+          getImagePath,
+          getFrameTime,
+          // Initialize the segmentation service when the recipe is activated (user clicks Segment button)
+          // Check if already ready to avoid showing loading indicator unnecessarily
+          initializeServiceFn: async () => {
+            const status = await segmentationIsReady();
+            if (status.ready) {
+              return;
+            }
+            const result = await segmentationInitialize();
+            if (result.noSamInstalled) {
+              await prompt({
+                title: 'SAM Not Installed',
+                text: [
+                  'Neither the SAM2 nor SAM3 model pack appears to be installed.',
+                  'Interactive segmentation will use the default GrabCut fallback, which may be less accurate.',
+                  'See the VIAME Add-On wiki to download a SAM model pack.',
+                ],
+              });
+            }
+          },
+        });
+      } catch {
+        // Segmentation initialization failed - recipe will not be available
+      }
+    }
+
+    // Store metadata for video frame-time / image path resolution
+    let cachedMeta: {
+      originalBasePath: string;
+      originalImageFiles: string[];
+      type: string;
+      originalVideoFile?: string;
+    } | null = null;
+
+    // Initialize segmentation when component is mounted
+    onMounted(() => {
+      initializeSegmentation();
+    });
+
+    /**
+     * Interactive Stereo Service
+     */
+    const stereoLoadingDialog = ref(false);
+    const stereoLoadingMessage = ref('Loading stereo model...');
+    const stereoLoadingError = ref('');
+    const stereoEnabled = ref(false);
+    // Transient notification reporting the latest computed stereo length
+    const stereoLengthSnackbar = ref(false);
+    const stereoLengthMessage = ref('');
+
+    // Cache image path getters per camera for stereo frame setting
+    const stereoImagePathGetters = ref({} as Record<string, (frameNum: number) => string>);
+    // Per-camera FPS, used to convert a frame number to a frame time for video stereo.
+    const stereoCameraFps = ref({} as Record<string, number>);
+
+    function closeStereoLoadingDialog() {
+      stereoLoadingDialog.value = false;
+      stereoLoadingError.value = '';
+    }
+
+    // Calibration file path for stereo matching
+    let stereoCalibrationFile: string | undefined;
+    // Dataset-level FPS fallback for video frame-time computation, used when a
+    // per-camera metadata entry has no fps (both stereo cameras share one fps).
+    let stereoDatasetFps: number | undefined;
+
+    /**
+     * Load multicam metadata for both cameras to build image path getters
+     */
+    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;
+
+        // Extract calibration file path from multiCam metadata
+        stereoCalibrationFile = meta.multiCam?.calibration || undefined;
+        // Capture the dataset-level fps as a fallback for per-camera frame times.
+        stereoDatasetFps = meta.fps || meta.originalFps || stereoDatasetFps;
+
+        // Skip per-camera metadata loading if already populated (e.g. by initializeSegmentation)
+        if (Object.keys(stereoImagePathGetters.value).length > 0) return true;
+
+        const { cameras } = meta.multiCamMedia;
+        const cameraNames = Object.keys(cameras);
+
+        for (let i = 0; i < cameraNames.length; i += 1) {
+          const cam = cameraNames[i];
+          const cameraId = `${props.id}/${cam}`;
+          // eslint-disable-next-line no-await-in-loop
+          const camMeta = await loadMetadata(cameraId);
+          const {
+            originalBasePath, originalImageFiles, type, originalVideoFile,
+          } = camMeta;
+
+          stereoImagePathGetters.value[cam] = (frameNum: number): string => {
+            if (type === 'video') {
+              return joinPath(originalBasePath, originalVideoFile || '');
+            }
+            if (originalImageFiles && originalImageFiles[frameNum]) {
+              const imagePath = originalImageFiles[frameNum];
+              if (isAbsolutePath(imagePath)) {
+                return imagePath;
+              }
+              return joinPath(originalBasePath, imagePath);
+            }
+            return '';
+          };
+        }
+        return true;
+      } catch (err) {
+        console.error('[Stereo] Failed to load multicam metadata:', err);
+        return false;
+      }
+    }
+
+    // Track last stereo frame to avoid redundant set_frame calls
+    let lastStereoFrame = -1;
+
+    function getViewerFrame(): number | undefined {
+      const viewer = viewerRef.value;
+      if (!viewer?.progress?.loaded) return undefined;
+      try {
+        return viewer.aggregateController?.frame?.value;
+      } catch {
+        return undefined;
+      }
+    }
+
+    // Push the stereo frame (left/right paths + frame time) to the backend and
+    // wait for it to land. Returns whether disparity/images are ready, so callers
+    // that need a correspondence (line/point transfer) can guarantee readiness
+    // instead of racing the proactive watcher. Updates lastStereoFrame on success.
+    async function ensureStereoFrame(frameNum: number | undefined): Promise<boolean> {
+      if (frameNum === undefined || !stereoEnabled.value) return false;
+      const cameras = Object.keys(stereoImagePathGetters.value);
+      if (cameras.length < 2) return false;
+      const leftPath = stereoImagePathGetters.value[cameras[0]]?.(frameNum) || '';
+      const rightPath = stereoImagePathGetters.value[cameras[1]]?.(frameNum) || '';
+      if (!leftPath || !rightPath) return false;
+      const fps0 = stereoCameraFps.value[cameras[0]]
+        || stereoDatasetFps || Object.values(stereoCameraFps.value)[0];
+      const ft = fps0 ? frameNum / fps0 : undefined;
+      try {
+        const r = await stereoSetFrame({
+          leftImagePath: leftPath, rightImagePath: rightPath, frameTime: ft,
+        });
+        if (r.success) lastStereoFrame = frameNum;
+        return r.success;
+      } catch (err) {
+        console.warn('[Stereo] Failed to set frame:', err);
+        return false;
+      }
+    }
+
+    // Watch stereo toggle (immediate so a remembered setting enables on load)
+    // The backend stereo service is needed whenever either stereo feature is on
+    // (length-on-modify or cross-camera auto-compute). Watch 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;
+
+    function disableStereoFeatureToggles() {
+      clientSettings.stereoSettings.updateLengthsOnModify = false;
+      clientSettings.stereoSettings.autoComputeOtherCamera = false;
+    }
+
+    watch(stereoServiceWanted, async (enabled, wasEnabled) => {
+      // wasEnabled === undefined on the initial immediate run. A failure then
+      // (e.g. a stereo dataset without calibration, with length-update on by
+      // default) degrades quietly rather than popping an error dialog or
+      // persisting the feature toggles off.
+      const userInitiated = wasEnabled !== undefined;
+      if (enabled) {
+        stereoLoadingDialog.value = userInitiated;
+        stereoLoadingMessage.value = 'Loading stereo model...';
+        stereoLoadingError.value = '';
+
+        try {
+          const hasStereo = await loadStereoMetadata();
+          if (!hasStereo) {
+            // Single-camera dataset: nothing to enable. Do NOT spin up the
+            // stereo service. Leave the toggles untouched so the defaults still
+            // apply when a stereo dataset is opened later.
+            stereoEnabled.value = false;
+            stereoLoadingDialog.value = false;
+            return;
+          }
+          const result = await stereoEnable(undefined, stereoCalibrationFile);
+          if (!result.success) {
+            throw new Error(result.error || 'Failed to enable stereo service');
+          }
+          stereoEnabled.value = true;
+          stereoLoadingDialog.value = false;
+
+          // Kick off disparity computation for the current frame. A failure here
+          // must NOT tear down the already-enabled service -- the line/point draw
+          // handler re-sets the frame before transferring, so it self-recovers.
+          await ensureStereoFrame(getViewerFrame());
+        } catch (err) {
+          stereoEnabled.value = false;
+          console.error('[Stereo] Failed to enable interactive stereo:', err);
+          if (userInitiated) {
+            // The user explicitly enabled a feature: revert the toggles and
+            // surface the failure in a dialog.
+            disableStereoFeatureToggles();
+            stereoLoadingError.value = err instanceof Error ? err.message : String(err);
+            stereoLoadingDialog.value = true;
+          } else {
+            // Load-time auto-enable failed: degrade silently and keep the
+            // toggle states so a later calibrated dataset still works.
+            stereoLoadingDialog.value = false;
+          }
+        }
+      } else {
+        try {
+          await stereoDisable();
+        } catch {
+          // Ignore errors on disable
+        }
+        stereoEnabled.value = false;
+      }
+    }, { immediate: true });
+
+    // Watch frame changes to proactively compute disparity
+    watch(() => getViewerFrame(), (frameNum) => {
+      if (frameNum === undefined || frameNum === lastStereoFrame || !stereoEnabled.value) return;
+      lastStereoFrame = frameNum;
+      ensureStereoFrame(frameNum);
+    });
+
+    // Clean up disparity event listeners
+    let cleanupDisparityReady: (() => void) | null = null;
+    let cleanupDisparityError: (() => void) | null = null;
+
+    onMounted(() => {
+      cleanupDisparityReady = onStereoDisparityReady(() => {
+        // Disparity is ready for current frame - no action needed, transfers will succeed
+      });
+      cleanupDisparityError = onStereoDisparityError((data) => {
+        console.warn('[Stereo] Disparity error:', data);
+      });
+    });
+
+    onBeforeUnmount(() => {
+      if (cleanupDisparityReady) cleanupDisparityReady();
+      if (cleanupDisparityError) cleanupDisparityError();
+    });
+
+    /**
+     * Get or create a track on the target camera.
+     * In multicam, a track drawn on one camera doesn't automatically exist on the other.
+     */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    function getOrCreateStereoTrack(cameraStore: any, trackId: number, sourceCamera: string, targetCamera: string, frameNum: number) {
+      let track = cameraStore.getPossibleTrack(trackId, targetCamera);
+      if (!track) {
+        const targetTrackStore = cameraStore.camMap.value.get(targetCamera)?.trackStore;
+        if (targetTrackStore) {
+          const sourceTrack = cameraStore.getPossibleTrack(trackId, sourceCamera);
+          const trackType = sourceTrack?.confidencePairs?.[0]?.[0] || 'unknown';
+          track = targetTrackStore.add(frameNum, trackType, undefined, trackId);
+        }
+      }
+      return track;
+    }
+
+    /**
+     * Extract the two endpoints of a 2-point LineString from a track's feature
+     * at the given frame. Returns null if there is no such line.
+     */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    function getStereoLineEndpoints(track: any, frameNum: number)
+      : [[number, number], [number, number]] | null {
+      if (!track) return null;
+      const [feature] = track.getFeature(frameNum);
+      if (!feature || !feature.geometry) return null;
+      const lineFeat = feature.geometry.features.find(
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        (f: any) => f.geometry.type === 'LineString' && f.geometry.coordinates.length === 2,
+      );
+      if (!lineFeat) return null;
+      const c = lineFeat.geometry.coordinates as [number, number][];
+      return [c[0], c[1]];
+    }
+
+    /**
+     * Extract the outer ring of the first Polygon in a track's feature at a frame.
+     */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    function getStereoPolygon(track: any, frameNum: number): [number, number][] | null {
+      if (!track) return null;
+      const [feature] = track.getFeature(frameNum);
+      if (!feature || !feature.geometry) return null;
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const polyFeat = feature.geometry.features.find((f: any) => f.geometry.type === 'Polygon');
+      if (!polyFeat) return null;
+      const ring = polyFeat.geometry.coordinates[0];
+      return ring && ring.length >= 3 ? (ring as [number, number][]) : null;
+    }
+
+    /**
+     * Add a head/tail line (LineString + head/tail points) to a track's existing
+     * feature at a frame. Preserves any existing geometry (e.g. a segmentation
+     * polygon) and replaces any prior line/head/tail so re-running is idempotent.
+     */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    function applyStereoLine(track: any, frameNum: number, line: [[number, number], [number, number]]) {
+      if (!track) return;
+      const [feature] = track.getFeature(frameNum);
+      if (!feature || !feature.keyframe || !feature.geometry) return;
+      const [p1, p2] = line;
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const preserved = (feature.geometry.features || []).filter((f: any) => {
+        if (f.geometry.type === 'LineString') return false;
+        const key = f.properties?.key;
+        return key !== HeadPointKey && key !== TailPointKey;
+      });
+      const lineGeometry: GeoJSON.Feature[] = [
+        ...preserved,
+        { type: 'Feature', geometry: { type: 'LineString', coordinates: line }, properties: { key: HeadTailLineKey } },
+        { type: 'Feature', geometry: { type: 'Point', coordinates: [p1[0], p1[1]] }, properties: { key: HeadPointKey } },
+        { type: 'Feature', geometry: { type: 'Point', coordinates: [p2[0], p2[1]] }, properties: { key: TailPointKey } },
+      ];
+      track.setFeature({ frame: frameNum, keyframe: true }, lineGeometry);
+    }
+
+    const STEREO_MEASUREMENT_ATTRS = [
+      'length', 'midpoint_x', 'midpoint_y', 'midpoint_z', 'midpoint_range', 'stereo_rms',
+    ];
+
+    // Per-feature marker: a human (not the stereo warp) authored this camera's
+    // line at this frame. Once set, interactive stereo never overwrites that
+    // side's geometry again — only the user can. Kept off the Attributes panel.
+    const STEREO_USER_LINE_ATTR = 'stereo_user_line';
+    // How the length was set: 'stereo' = auto-computed from the warped lines,
+    // 'user_set' = locked by the user (auto-update leaves the length alone).
+    const STEREO_LENGTH_METHOD_ATTR = 'length_method';
+
+    interface SavedStereoCameraState {
+      trackExisted: boolean;
+      hadFeature: boolean;
+      bounds?: RectBounds;
+      interpolate?: boolean;
+      geometryFeatures?: GeoJSON.Feature[];
+      fishLength?: number;
+      attributes?: Record<string, unknown>;
+    }
+
+    const preStereoSegmentationState = new Map<string, Record<string, SavedStereoCameraState>>();
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    function captureStereoCameraState(track: any, frameNum: number): SavedStereoCameraState {
+      if (!track) {
+        return { trackExisted: false, hadFeature: false };
+      }
+      const [feature] = track.getFeature(frameNum);
+      if (!feature || !feature.keyframe) {
+        return { trackExisted: true, hadFeature: false };
+      }
+      return {
+        trackExisted: true,
+        hadFeature: true,
+        bounds: feature.bounds ? [...feature.bounds] as RectBounds : undefined,
+        interpolate: feature.interpolate,
+        geometryFeatures: feature.geometry?.features
+          ? JSON.parse(JSON.stringify(feature.geometry.features))
+          : undefined,
+        fishLength: feature.fishLength,
+        attributes: feature.attributes
+          ? JSON.parse(JSON.stringify(feature.attributes))
+          : undefined,
+      };
+    }
+
+    function savePreStereoSegmentationState(
+      trackId: number,
+      frameNum: number,
+      sourceCamera: string,
+      otherCamera: string,
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      cameraStore: any,
+    ) {
+      const key = `${trackId}:${frameNum}`;
+      if (preStereoSegmentationState.has(key)) return;
+      preStereoSegmentationState.set(key, {
+        [sourceCamera]: captureStereoCameraState(
+          cameraStore.getPossibleTrack(trackId, sourceCamera),
+          frameNum,
+        ),
+        [otherCamera]: captureStereoCameraState(
+          cameraStore.getPossibleTrack(trackId, otherCamera),
+          frameNum,
+        ),
+      });
+    }
+
+    function restoreStereoCameraState(
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      cameraStore: any,
+      trackId: number,
+      camera: string,
+      frameNum: number,
+      saved: SavedStereoCameraState,
+    ) {
+      if (!saved.trackExisted) {
+        const track = cameraStore.getPossibleTrack(trackId, camera);
+        if (track) {
+          cameraStore.removeTracks(trackId, camera);
+        }
+        return;
+      }
+      const track = cameraStore.getPossibleTrack(trackId, camera);
+      if (!track) return;
+      if (!saved.hadFeature) {
+        track.deleteFeature(frameNum);
+        return;
+      }
+      track.deleteFeature(frameNum);
+      track.setFeature({
+        frame: frameNum,
+        flick: 0,
+        bounds: saved.bounds,
+        keyframe: true,
+        interpolate: saved.interpolate ?? false,
+        fishLength: saved.fishLength,
+        attributes: saved.attributes
+          ? JSON.parse(JSON.stringify(saved.attributes))
+          : undefined,
+      }, saved.geometryFeatures || []);
+    }
+
+    function clearPreStereoSegmentationState() {
+      preStereoSegmentationState.clear();
+    }
+
+    /**
+     * Ensure the standard stereo measurement attributes are defined as numeric
+     * detection attributes so they're visible in the Attributes panel.
+     */
+    function ensureMeasurementAttributes() {
+      const viewer = viewerRef.value;
+      if (!viewer || !viewer.handler || !viewer.handler.setAttribute) return;
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const existing = (viewer.attributes || []) as any[];
+      STEREO_MEASUREMENT_ATTRS.forEach((name) => {
+        if (!existing.find((a) => a.name === name && a.belongs === 'detection')) {
+          viewer.handler.setAttribute({
+            data: {
+              belongs: 'detection',
+              datatype: 'number',
+              name,
+              key: `detection_${name}`,
+            },
+          });
+        }
+      });
+      // How the length was set: lets the user lock a length to 'user_set' so the
+      // stereo auto-update stops overwriting it.
+      if (!existing.find((a) => a.name === STEREO_LENGTH_METHOD_ATTR && a.belongs === 'detection')) {
+        viewer.handler.setAttribute({
+          data: {
+            belongs: 'detection',
+            datatype: 'text',
+            name: STEREO_LENGTH_METHOD_ATTR,
+            key: `detection_${STEREO_LENGTH_METHOD_ATTR}`,
+            values: ['stereo', 'user_set'],
+          },
+        });
+      }
+      // Track-level average length (mean of the per-frame lengths along the track).
+      if (!existing.find((a) => a.name === 'avg_length' && a.belongs === 'track')) {
+        viewer.handler.setAttribute({
+          data: {
+            belongs: 'track',
+            datatype: 'number',
+            name: 'avg_length',
+            key: 'track_avg_length',
+          },
+        });
+      }
+    }
+
+    /**
+     * Recompute the average stereo length along a whole track and store it as
+     * the track-level 'avg_length' attribute. The per-frame lengths are gathered
+     * from the track (needs nothing but the track); the aggregation itself is
+     * done in VIAME by viame::core::aggregate_lengths (the same helper the
+     * pair_stereo_tracks pipeline uses), reached via the stereo service.
+     */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    async function updateTrackAverageLength(track: any) {
+      if (!track) return;
+      const frames = track.featureIndex || [];
+      const lengths: number[] = [];
+      for (let i = 0; i < frames.length; i += 1) {
+        const feature = track.features[frames[i]];
+        const lengthAttr = feature?.attributes?.length;
+        const fromAttr = lengthAttr !== undefined && lengthAttr !== null
+          ? Number(lengthAttr)
+          : NaN;
+        const length = Number.isFinite(fromAttr) ? fromAttr : feature?.fishLength;
+        if (feature && Number.isFinite(length)) {
+          lengths.push(length);
+        }
+      }
+      if (lengths.length === 0) return;
+
+      const response = await stereoAggregateLengths({ lengths });
+      if (response.success && Number.isFinite(response.avgLength)) {
+        track.setAttribute('avg_length', Math.round((response.avgLength as number) * 100) / 100);
+      }
+    }
+
+    /**
+     * Recompute the track-level average length for both camera tracks of a
+     * linked pair. Called once per measurement event (after per-frame lengths
+     * have been written).
+     */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    async function updateStereoTrackAverages(cameraStore: any, trackId: number) {
+      const cameras = Object.keys(stereoImagePathGetters.value);
+      if (cameras.length < 2) return;
+      const [leftCamera, rightCamera] = cameras;
+      await updateTrackAverageLength(cameraStore.getPossibleTrack(trackId, leftCamera));
+      await updateTrackAverageLength(cameraStore.getPossibleTrack(trackId, rightCamera));
+    }
+
+    /**
+     * Store a full stereo measurement on a track feature. length is written to
+     * the canonical fishLength (VIAME CSV length column) and to a 'length'
+     * attribute; the remaining standard measurements (midpoint x/y/z, range,
+     * RMS) are stored as detection attributes.
+     */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    function applyStereoMeasurement(track: any, frameNum: number, measurement: any) {
+      if (!track || !measurement) return;
+      const round2 = (v: number) => Math.round(v * 100) / 100;
+      const [feature] = track.getFeature(frameNum);
+      // A length the user locked (length_method === 'user_set') is never
+      // overwritten; the other measurements still track the shifting geometry.
+      const lengthLocked = feature?.attributes?.[STEREO_LENGTH_METHOD_ATTR] === 'user_set';
+      const { length } = measurement;
+      if (!lengthLocked && length !== undefined && Number.isFinite(length)) {
+        if (feature && feature.keyframe) {
+          // Merge fishLength without disturbing existing geometry/bounds
+          track.setFeature({ frame: frameNum, fishLength: round2(length) });
+          track.setFeatureAttribute(frameNum, STEREO_LENGTH_METHOD_ATTR, 'stereo');
+        }
+      }
+      STEREO_MEASUREMENT_ATTRS.forEach((name) => {
+        if (name === 'length' && lengthLocked) return;
+        const v = measurement[name];
+        if (v !== undefined && Number.isFinite(v)) {
+          track.setFeatureAttribute(frameNum, name, round2(v));
+        }
+      });
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    function reportStereoMeasurement(measurement: any) {
+      if (!measurement || !Number.isFinite(measurement.length)) return;
+      const round2 = (v: number) => Math.round(v * 100) / 100;
+      const parts = [`Stereo length: ${round2(measurement.length)}`];
+      if (Number.isFinite(measurement.midpoint_range)) {
+        parts.push(`range: ${round2(measurement.midpoint_range)}`);
+      }
+      stereoLengthMessage.value = parts.join('  •  ');
+      stereoLengthSnackbar.value = true;
+    }
+
+    /**
+     * Triangulate and store the stereo measurement for one frame of a track that
+     * has a 2-point line on both cameras. Returns the measurement, or null if
+     * either side lacks a line (or the service fails).
+     */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    async function measureStereoLineAtFrame(cameraStore: any, trackId: number, frameNum: number) {
+      const cameras = Object.keys(stereoImagePathGetters.value);
+      if (cameras.length < 2) return null;
+      const [leftCamera, rightCamera] = cameras;
+      const leftTrack = cameraStore.getPossibleTrack(trackId, leftCamera);
+      const rightTrack = cameraStore.getPossibleTrack(trackId, rightCamera);
+      const leftLine = getStereoLineEndpoints(leftTrack, frameNum);
+      const rightLine = getStereoLineEndpoints(rightTrack, frameNum);
+      if (!leftLine || !rightLine) return null;
+
+      const response = await stereoMeasureLine({ leftLine, rightLine });
+      if (response.success && response.measurement) {
+        ensureMeasurementAttributes();
+        applyStereoMeasurement(leftTrack, frameNum, response.measurement);
+        applyStereoMeasurement(rightTrack, frameNum, response.measurement);
+        return response.measurement;
+      }
+      return null;
+    }
+
+    /**
+     * Recompute the stereo measurement for a line annotation that exists on both
+     * cameras (e.g. after the user edited or drew one side) and update both tracks.
+     */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    async function autoUpdateStereoLength(cameraStore: any, trackId: number, frameNum: number) {
+      const measurement = await measureStereoLineAtFrame(cameraStore, trackId, frameNum);
+      if (measurement) {
+        reportStereoMeasurement(measurement);
+        await updateStereoTrackAverages(cameraStore, trackId);
+      }
+    }
+
+    /**
+     * Handle two detections being linked across cameras (multicam link tool).
+     * Recompute the stereo measurement for every frame where both the left and
+     * right tracks now have a 2-point line.
+     */
+    async function handleStereoTrackLinked(trackId: number) {
+      if (!stereoEnabled.value) return;
+      // Linking a pair across cameras only (re)computes their stereo lengths.
+      if (!clientSettings.stereoSettings.updateLengthsOnModify) return;
+      const viewer = viewerRef.value;
+      if (!viewer) return;
+      const { cameraStore, multiCamList } = viewer;
+      if (multiCamList.length < 2) return;
+      const cameras = Object.keys(stereoImagePathGetters.value);
+      if (cameras.length < 2) return;
+
+      const [leftCamera, rightCamera] = cameras;
+      const leftTrack = cameraStore.getPossibleTrack(trackId, leftCamera);
+      const rightTrack = cameraStore.getPossibleTrack(trackId, rightCamera);
+      if (!leftTrack || !rightTrack) return;
+
+      // Frames present in either track (each frame's line presence is re-checked
+      // inside measureStereoLineAtFrame).
+      const frames = Array.from(new Set<number>([
+        ...(leftTrack.featureIndex || []),
+        ...(rightTrack.featureIndex || []),
+      ]));
+
+      let lastMeasurement = null;
+      for (let i = 0; i < frames.length; i += 1) {
+        try {
+          // eslint-disable-next-line no-await-in-loop
+          const measurement = await measureStereoLineAtFrame(cameraStore, trackId, frames[i]);
+          if (measurement) lastMeasurement = measurement;
+        } catch (err) {
+          console.warn('[Stereo] Link measurement failed:', err);
+        }
+      }
+      if (lastMeasurement) {
+        reportStereoMeasurement(lastMeasurement);
+        await updateStereoTrackAverages(cameraStore, trackId);
+      }
+    }
+
+    /**
+     * Handle stereo annotation complete event from Viewer
+     * Warps annotation from source camera to the other camera
+     */
+    async function handleStereoAnnotationComplete(params: StereoAnnotationCompleteParams) {
+      if (!stereoEnabled.value) return;
+
+      const viewer = viewerRef.value;
+      if (!viewer) return;
+
+      const { cameraStore, multiCamList } = viewer;
+      if (multiCamList.length < 2) return;
+
+      // Determine the other camera
+      const otherCamera = multiCamList.find((c: string) => c !== params.camera);
+      if (!otherCamera) return;
+
+      const otherTrack = cameraStore.getPossibleTrack(params.trackId, otherCamera);
+      const [otherFeature] = otherTrack ? otherTrack.getFeature(params.frameNum) : [null];
+      const otherHasFeature = otherFeature !== null;
+
+      // Two independent stereo behaviors gate this handler:
+      //  - updateLengths: recompute the stereo measurement when both cameras
+      //    already have the detection and a line is modified.
+      //  - autoCompute: warp the annotation to the other camera when it has no
+      //    detection for it yet (or its line is still machine-generated).
+      const updateLengths = clientSettings.stereoSettings.updateLengthsOnModify;
+      const autoCompute = clientSettings.stereoSettings.autoComputeOtherCamera;
+
+      if (params.type === 'line') {
+        // This handler only fires on human edits — the stereo warp writes geometry
+        // directly, bypassing the annotation-complete event — so the camera the
+        // user just drew/edited is now human-authored. Mark it so the opposite
+        // side's warp can never overwrite it later.
+        const sourceTrack = cameraStore.getPossibleTrack(params.trackId, params.camera);
+        sourceTrack?.setFeatureAttribute(params.frameNum, STEREO_USER_LINE_ATTR, true);
+
+        const otherIsHuman = otherHasFeature
+          && otherFeature?.attributes?.[STEREO_USER_LINE_ATTR] === true;
+        if (otherIsHuman || !autoCompute) {
+          // Keep the other side's geometry as-is — either it was authored by the
+          // user (never overwrite it) or cross-camera auto-compute is disabled.
+          // If both cameras now have a line, just refresh the measurement.
+          if (updateLengths && otherHasFeature) {
+            try {
+              await autoUpdateStereoLength(cameraStore, params.trackId, params.frameNum);
+            } catch (err) {
+              console.warn('[Stereo] Measurement update failed:', err);
+            }
+          }
+          return;
+        }
+        // Otherwise (auto-compute on, other side absent or still machine-generated)
+        // fall through and (re)warp source -> other so the auto-generated line
+        // keeps tracking edits.
+      } else if (otherHasFeature) {
+        // Box / polygon / segmentation: warp only once; leave existing untouched.
+        return;
+      } else if (!autoCompute) {
+        // Creating geometry on the other camera is gated by auto-compute.
+        return;
+      }
+
+      // Show loading indicator while waiting for stereo transfer
+      stereoLoadingMessage.value = 'Computing stereo correspondence...';
+      stereoLoadingError.value = '';
+      stereoLoadingDialog.value = true;
+
+      // Guarantee the backend has this frame's images before transferring. The
+      // proactive watcher only fires on frame-number changes, so a draw on the
+      // frame where stereo was enabled would otherwise stall in the backend's
+      // deferred disparity wait.
+      await ensureStereoFrame(params.frameNum);
+
+      try {
+        if (params.type === 'line') {
+          const response = await stereoTransferLine({ line: params.line });
+          if (!response.success || !response.transferredLine) {
+            throw new Error(response.error || 'Line transfer returned no result');
+          }
+
+          // Get or create the track on the other camera and set the warped line
+          const track = getOrCreateStereoTrack(cameraStore, params.trackId, params.camera, otherCamera, params.frameNum);
+          if (track) {
+            const [p1, p2] = response.transferredLine;
+            // Preserve the source line's key and include head/tail Point markers
+            // so the warped line is a standard, line-mode-editable annotation.
+            const lineGeometry: GeoJSON.Feature[] = [
+              {
+                type: 'Feature',
+                geometry: { type: 'LineString', coordinates: response.transferredLine },
+                properties: { key: params.key },
+              },
+              {
+                type: 'Feature',
+                geometry: { type: 'Point', coordinates: [p1[0], p1[1]] },
+                properties: { key: HeadPointKey },
+              },
+              {
+                type: 'Feature',
+                geometry: { type: 'Point', coordinates: [p2[0], p2[1]] },
+                properties: { key: TailPointKey },
+              },
+            ];
+
+            // Compute bounds from the transferred line with 10% expansion to
+            // match the expansion applied on the source camera side (headtail.ts).
+            const minX = Math.min(p1[0], p2[0]);
+            const minY = Math.min(p1[1], p2[1]);
+            const maxX = Math.max(p1[0], p2[0]);
+            const maxY = Math.max(p1[1], p2[1]);
+            const width = maxX - minX;
+            const height = maxY - minY;
+            const padX = width * 0.10 || height * 0.10;
+            const padY = height * 0.10 || width * 0.10;
+            let bx0 = minX - padX;
+            let bx1 = maxX + padX;
+            let by0 = minY - padY;
+            let by1 = maxY + padY;
+            // Cap the aspect ratio so a near-axis-aligned warped line doesn't make
+            // a razor-thin box (matches headtail.ts MAX_BOX_ASPECT_RATIO).
+            const MAX_BOX_ASPECT_RATIO = 6;
+            const bw = bx1 - bx0;
+            const bh = by1 - by0;
+            if (bw > 0 && bh > 0) {
+              if (bw / bh > MAX_BOX_ASPECT_RATIO) {
+                const grow = (bw / MAX_BOX_ASPECT_RATIO - bh) / 2;
+                by0 -= grow;
+                by1 += grow;
+              } else if (bh / bw > MAX_BOX_ASPECT_RATIO) {
+                const grow = (bh / MAX_BOX_ASPECT_RATIO - bw) / 2;
+                bx0 -= grow;
+                bx1 += grow;
+              }
+            }
+            const bounds = [bx0, by0, bx1, by1] as [number, number, number, number];
+
+            track.setFeature({
+              frame: params.frameNum,
+              flick: 0,
+              bounds,
+              keyframe: true,
+              interpolate: false,
+            }, lineGeometry);
+
+            // Report and store the full stereo measurement on both cameras
+            // (length attributes are gated by the length-update feature).
+            if (response.measurement && updateLengths) {
+              ensureMeasurementAttributes();
+              const sourceTrack = cameraStore.getPossibleTrack(params.trackId, params.camera);
+              applyStereoMeasurement(sourceTrack, params.frameNum, response.measurement);
+              applyStereoMeasurement(track, params.frameNum, response.measurement);
+              reportStereoMeasurement(response.measurement);
+              await updateStereoTrackAverages(cameraStore, params.trackId);
+            }
+          }
+        } else if (params.type === 'box') {
+          // Convert box bounds to 4 corner points
+          const [x1, y1, x2, y2] = params.bounds;
+          const corners: [number, number][] = [
+            [x1, y1], [x2, y1], [x2, y2], [x1, y2],
+          ];
+
+          const response = await stereoTransferPoints({ points: corners });
+          if (!response.success || !response.transferredPoints) {
+            throw new Error(response.error || 'Box transfer returned no result');
+          }
+
+          // Compute new bounds from warped corners
+          const txs = response.transferredPoints.map((p) => p[0]);
+          const tys = response.transferredPoints.map((p) => p[1]);
+          const newBounds = [
+            Math.min(...txs), Math.min(...tys),
+            Math.max(...txs), Math.max(...tys),
+          ] as [number, number, number, number];
+
+          const track = getOrCreateStereoTrack(cameraStore, params.trackId, params.camera, otherCamera, params.frameNum);
+          if (track) {
+            track.setFeature({
+              frame: params.frameNum,
+              flick: 0,
+              bounds: newBounds,
+              keyframe: true,
+              interpolate: false,
+            });
+          }
+        } else if (params.type === 'polygon') {
+          const response = await stereoTransferPoints({ points: params.polygon });
+          if (!response.success || !response.transferredPoints) {
+            throw new Error(response.error || 'Polygon transfer returned no result');
+          }
+
+          // Close the warped polygon
+          const warpedPolygon = [...response.transferredPoints];
+          if (warpedPolygon.length > 0) {
+            const first = warpedPolygon[0];
+            const last = warpedPolygon[warpedPolygon.length - 1];
+            if (first[0] !== last[0] || first[1] !== last[1]) {
+              warpedPolygon.push([...first] as [number, number]);
+            }
+          }
+
+          const polyGeometry: GeoJSON.Feature[] = [{
+            type: 'Feature',
+            geometry: {
+              type: 'Polygon',
+              coordinates: [warpedPolygon],
+            },
+            properties: { key: params.key },
+          }];
+
+          // Compute bounds from warped polygon
+          const pxs = response.transferredPoints.map((p) => p[0]);
+          const pys = response.transferredPoints.map((p) => p[1]);
+          const polyBounds = [
+            Math.min(...pxs), Math.min(...pys),
+            Math.max(...pxs), Math.max(...pys),
+          ] as [number, number, number, number];
+
+          const track = getOrCreateStereoTrack(cameraStore, params.trackId, params.camera, otherCamera, params.frameNum);
+          if (track) {
+            track.setFeature({
+              frame: params.frameNum,
+              flick: 0,
+              bounds: polyBounds,
+              keyframe: true,
+              interpolate: false,
+            }, polyGeometry);
+          }
+        } else if (params.type === 'segmentation') {
+          savePreStereoSegmentationState(
+            params.trackId,
+            params.frameNum,
+            params.camera,
+            otherCamera,
+            cameraStore,
+          );
+          // Single round-trip to the segmentation service: it warps the seed to
+          // the other camera (configured stereo backend, with median sampling
+          // when enabled), segments there, and optionally derives head/tail lines
+          // on both cameras plus the measurement.
+          const sourceTrack = cameraStore.getPossibleTrack(params.trackId, params.camera);
+          const sourcePolygon = getStereoPolygon(sourceTrack, params.frameNum);
+          const sourceImagePath = stereoImagePathGetters.value[params.camera]?.(params.frameNum);
+          const otherImagePath = stereoImagePathGetters.value[otherCamera]?.(params.frameNum);
+          if (!sourceImagePath || !otherImagePath) {
+            throw new Error('No image path for one of the stereo cameras');
+          }
+          // Both stereo cameras share one fps: per-camera -> dataset -> any camera.
+          const segFps = stereoCameraFps.value[params.camera]
+            || stereoDatasetFps
+            || Object.values(stereoCameraFps.value)[0];
+          const segFrameTime = segFps ? params.frameNum / segFps : undefined;
+
+          const response = await segmentationStereoSegment({
+            polygon: sourcePolygon || undefined,
+            points: params.points,
+            pointLabels: params.labels,
+            sourceImagePath,
+            otherImagePath,
+            calibrationFile: stereoCalibrationFile,
+            frameTime: segFrameTime,
+          });
+          if (!response.success) {
+            throw new Error(response.error || 'Stereo segmentation returned no result');
+          }
+
+          // Draw the segmented polygon on the other camera.
+          const track = getOrCreateStereoTrack(cameraStore, params.trackId, params.camera, otherCamera, params.frameNum);
+          if (track && response.polygon && response.polygon.length >= 3) {
+            const closedPolygon = [...response.polygon];
+            const first = closedPolygon[0];
+            const last = closedPolygon[closedPolygon.length - 1];
+            if (first[0] !== last[0] || first[1] !== last[1]) {
+              closedPolygon.push([...first] as [number, number]);
+            }
+            const segGeometry: GeoJSON.Feature[] = [{
+              type: 'Feature',
+              geometry: { type: 'Polygon', coordinates: [closedPolygon] },
+              properties: { key: '' },
+            }];
+            const segBounds = response.bounds || [
+              Math.min(...response.polygon.map((p: [number, number]) => p[0])),
+              Math.min(...response.polygon.map((p: [number, number]) => p[1])),
+              Math.max(...response.polygon.map((p: [number, number]) => p[0])),
+              Math.max(...response.polygon.map((p: [number, number]) => p[1])),
+            ] as [number, number, number, number];
+            track.setFeature({
+              frame: params.frameNum,
+              flick: 0,
+              bounds: segBounds,
+              keyframe: true,
+              interpolate: false,
+            }, segGeometry);
+          }
+
+          // Optionally add a head/tail line to each camera and store the
+          // length/measurement attributes (as the line-transfer flow does).
+          if (response.generateLine) {
+            if (response.lineSource) applyStereoLine(sourceTrack, params.frameNum, response.lineSource);
+            if (track && response.lineOther) applyStereoLine(track, params.frameNum, response.lineOther);
+            if (response.measurement && updateLengths) {
+              ensureMeasurementAttributes();
+              applyStereoMeasurement(sourceTrack, params.frameNum, response.measurement);
+              applyStereoMeasurement(track, params.frameNum, response.measurement);
+              reportStereoMeasurement(response.measurement);
+              await updateStereoTrackAverages(cameraStore, params.trackId);
+            }
+          }
+        }
+        // Success — hide loading dialog
+        stereoLoadingDialog.value = false;
+      } catch (err) {
+        stereoLoadingDialog.value = false;
+        const message = err instanceof Error ? err.message : String(err);
+        await prompt({
+          title: 'Stereo Transfer Error',
+          text: [
+            'Failed to transfer annotation to the other camera.',
+            message,
+          ],
+        });
+      }
+    }
+
+    /**
+     * Undo stereo side effects from interactive segmentation on reset.
+     * Restores the other camera and clears saved undo state for the frame.
+     */
+    async function handleStereoAnnotationReset(params: StereoAnnotationResetParams) {
+      const key = `${params.trackId}:${params.frameNum}`;
+      const saved = preStereoSegmentationState.get(key);
+      if (!saved) return;
+
+      const viewer = viewerRef.value;
+      if (!viewer) return;
+
+      const { cameraStore, multiCamList } = viewer;
+      if (multiCamList.length < 2) return;
+
+      const otherCamera = multiCamList.find((c: string) => c !== params.sourceCamera);
+      if (otherCamera && saved[otherCamera]) {
+        restoreStereoCameraState(
+          cameraStore,
+          params.trackId,
+          otherCamera,
+          params.frameNum,
+          saved[otherCamera],
+        );
+      }
+
+      preStereoSegmentationState.delete(key);
+
+      if (clientSettings.stereoSettings.updateLengthsOnModify) {
+        try {
+          await updateStereoTrackAverages(cameraStore, params.trackId);
+        } catch (err) {
+          console.warn('[Stereo] Failed to update track averages after reset:', err);
+        }
+      }
+    }
+
+    function handleStereoSegmentationFinalize(params?: StereoSegmentationFinalizeParams) {
+      if (!params) {
+        clearPreStereoSegmentationState();
+        return;
+      }
+      params.frameNums.forEach((frameNum) => {
+        preStereoSegmentationState.delete(`${params.trackId}:${frameNum}`);
+      });
+    }
+
     return {
       datasets,
       viewerRef,
@@ -131,68 +1284,148 @@ export default defineComponent({
       runningPipelines,
       largeImageWarning,
       timeFilter,
+      /* Stereo */
+      stereoLoadingDialog,
+      stereoLoadingMessage,
+      stereoLoadingError,
+      stereoLengthSnackbar,
+      stereoLengthMessage,
+      closeStereoLoadingDialog,
+      handleStereoAnnotationComplete,
+      handleStereoAnnotationReset,
+      handleStereoSegmentationFinalize,
+      handleStereoTrackLinked,
     };
   },
 });
 </script>
 
 <template>
-  <Viewer
-    :id.sync="id"
-    ref="viewerRef"
-    :read-only-mode="readOnlyMode || runningPipelines.length > 0"
-    @change-camera="changeCamera"
-    @large-image-warning="largeImageWarning()"
-  >
-    <template #title>
-      <v-tabs
-        icons-and-text
-        hide-slider
-        style="flex-basis:0; flex-grow:0;"
-      >
-        <v-tab :to="{ name: 'recent' }">
-          Library
-          <v-icon>mdi-folder-open</v-icon>
-        </v-tab>
-        <job-tab />
-        <v-tab :to="{ name: 'training' }">
-          Training<v-icon>mdi-brain</v-icon>
-        </v-tab>
-        <v-tab :to="{ name: 'settings' }">
-          Settings<v-icon>mdi-cog</v-icon>
-        </v-tab>
-      </v-tabs>
-    </template>
-    <template #title-right>
-      <RunPipelineMenu
-        :selected-dataset-ids="[modifiedId]"
-        :sub-type-list="subTypeList"
-        :camera-numbers="camNumbers"
-        :running-pipelines="runningPipelines"
-        :read-only-mode="readOnlyMode"
-        :time-filter="timeFilter"
-        v-bind="{ buttonOptions, menuOptions }"
-      />
-      <ImportAnnotations
-        :dataset-id="modifiedId"
-        v-bind="{ buttonOptions, menuOptions, readOnlyMode }"
-        block-on-unsaved
-      />
-      <Export
-        v-if="datasets[id]"
-        :id="modifiedId"
-        :button-options="buttonOptions"
-      />
-    </template>
-    <template #right-sidebar="{ sidebarMode }">
-      <SidebarContext :sidebar-mode="sidebarMode">
-        <template #default="{ name, subCategory }">
-          <component
-            :is="name"
-            :sub-category="subCategory"
-          />
-        </template>
-      </SidebarContext>
-    </template>
-  </Viewer>
+  <div class="viewer-loader-wrapper">
+    <Viewer
+      :id.sync="id"
+      ref="viewerRef"
+      :read-only-mode="readOnlyMode || runningPipelines.length > 0"
+      @change-camera="changeCamera"
+      @large-image-warning="largeImageWarning()"
+      @stereo-annotation-complete="handleStereoAnnotationComplete"
+      @stereo-annotation-reset="handleStereoAnnotationReset"
+      @stereo-segmentation-finalize="handleStereoSegmentationFinalize"
+      @stereo-track-linked="handleStereoTrackLinked"
+    >
+      <template #title>
+        <v-tabs
+          icons-and-text
+          hide-slider
+          style="flex-basis:0; flex-grow:0;"
+        >
+          <v-tab :to="{ name: 'recent' }">
+            Library
+            <v-icon>mdi-folder-open</v-icon>
+          </v-tab>
+          <job-tab />
+          <v-tab :to="{ name: 'training' }">
+            Training<v-icon>mdi-brain</v-icon>
+          </v-tab>
+          <v-tab :to="{ name: 'settings' }">
+            Settings<v-icon>mdi-cog</v-icon>
+          </v-tab>
+        </v-tabs>
+      </template>
+      <template #title-right>
+        <RunPipelineMenu
+          :selected-dataset-ids="[modifiedId]"
+          :sub-type-list="subTypeList"
+          :camera-numbers="camNumbers"
+          :running-pipelines="runningPipelines"
+          :read-only-mode="readOnlyMode"
+          :time-filter="timeFilter"
+          v-bind="{ buttonOptions, menuOptions }"
+        />
+        <ImportAnnotations
+          :dataset-id="modifiedId"
+          v-bind="{ buttonOptions, menuOptions, readOnlyMode }"
+          block-on-unsaved
+        />
+        <Export
+          v-if="datasets[id]"
+          :id="modifiedId"
+          :button-options="buttonOptions"
+        />
+      </template>
+      <template #right-sidebar="{ sidebarMode }">
+        <SidebarContext :sidebar-mode="sidebarMode">
+          <template #default="{ name, subCategory }">
+            <component
+              :is="name"
+              :sub-category="subCategory"
+            />
+          </template>
+        </SidebarContext>
+      </template>
+    </Viewer>
+    <v-dialog
+      :value="stereoLoadingDialog"
+      persistent
+      max-width="560"
+    >
+      <v-card>
+        <v-card-title>{{ stereoLoadingError ? 'Stereo Service Error' : 'Stereo Service' }}</v-card-title>
+        <v-card-text>
+          <div
+            v-if="!stereoLoadingError"
+            class="d-flex align-center"
+          >
+            <v-progress-circular
+              indeterminate
+              color="primary"
+              class="mr-3"
+            />
+            {{ stereoLoadingMessage }}
+          </div>
+          <v-alert
+            v-else
+            type="error"
+            dense
+            class="stereo-loading-error"
+          >
+            {{ stereoLoadingError }}
+          </v-alert>
+        </v-card-text>
+        <v-card-actions v-if="stereoLoadingError">
+          <v-spacer />
+          <v-btn
+            text
+            @click="closeStereoLoadingDialog"
+          >
+            Close
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+    <v-snackbar
+      v-model="stereoLengthSnackbar"
+      :timeout="4000"
+      bottom
+      right
+    >
+      {{ stereoLengthMessage }}
+    </v-snackbar>
+  </div>
 </template>
+
+<style scoped>
+.viewer-loader-wrapper {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+}
+
+.stereo-loading-error {
+  white-space: pre-wrap;
+  word-break: break-word;
+  max-height: 320px;
+  overflow-y: auto;
+}
+</style>
diff --git a/client/src/components/LayerManager.vue b/client/src/components/LayerManager.vue
index 3679efcae..53654db0d 100644
--- a/client/src/components/LayerManager.vue
+++ b/client/src/components/LayerManager.vue
@@ -41,7 +41,9 @@ import {
   useAttributes,
   useComparisonSets,
   useLassoModeContext,
+  useSegmentationPoints,
 } from '../provides';
+import SegmentationPointsLayer from '../layers/AnnotationLayers/SegmentationPointsLayer';
 
 /** LayerManager is a component intended to be used as a child of an Annotator.
  *  It provides logic for switching which layers are visible, but more importantly
@@ -170,6 +172,20 @@ export default defineComponent({
       setLassoDrawing,
     );
 
+    // Segmentation points layer for displaying prompt points during point-click segmentation
+    const segmentationPointsRef = useSegmentationPoints();
+    const segmentationPointsLayer = new SegmentationPointsLayer(annotator);
+
+    // Watch for segmentation points updates - only show points for current frame
+    watch([segmentationPointsRef, frameNumberRef], ([newPoints, currentFrame]) => {
+      // Only display points if they belong to the current frame
+      if (newPoints.points.length > 0 && newPoints.frameNum === currentFrame) {
+        segmentationPointsLayer.updatePoints(newPoints.points, newPoints.labels);
+      } else {
+        segmentationPointsLayer.clear();
+      }
+    }, { deep: true });
+
     const updateAttributes = () => {
       const newList = attributes.value.filter((item) => item.render).sort((a, b) => {
         if (a.render && b.render) {
@@ -192,6 +208,16 @@ 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.
+    function isCreatingNewDetection(frame: number, trackId: AnnotationId | null): boolean {
+      if (trackId === null) return false;
+      const t = cameraStore.getPossibleTrack(trackId, selectedCamera.value);
+      if (!t) return false;
+      return t.getFeature(frame)[0] == null;
+    }
+
     function updateLayers(
       frame: number,
       editingTrack: false | EditAnnotationTypes,
@@ -366,6 +392,15 @@ export default defineComponent({
             editAnnotationLayer.setKey(selectedKey);
             editAnnotationLayer.changeData(editingTracks);
           }
+        } else if (editingTrack && props.camera !== selectedCamera.value
+          && isCreatingNewDetection(frame, selectedTrackId)) {
+          // Seamless multicam creation: keep the creation cursor live on every
+          // camera (not just the selected one) so a brand-new detection can be
+          // drawn on whichever camera the user starts on. The draw is routed to
+          // the drawn-on camera in the update:geojson handler below.
+          editAnnotationLayer.setType(editingTrack);
+          editAnnotationLayer.setKey(selectedKey);
+          editAnnotationLayer.changeData([]);
         } else {
           editAnnotationLayer.disable();
         }
@@ -404,6 +439,7 @@ export default defineComponent({
         typeStylingRef,
         toRef(props, 'colorBy'),
         selectedCamera,
+        selectedKeyRef,
       ],
       () => {
         updateLayers(
@@ -468,28 +504,151 @@ export default defineComponent({
       },
     );
 
+    // Set briefly when a draw finalizes so the same click — e.g. the 2nd line
+    // vertex / rectangle corner landing on an overlapping existing detection —
+    // doesn't also select that detection. Cleared on the next macrotask, so only
+    // the click that completed the draw is suppressed.
+    let justFinalizedCreation = false;
+
     const Clicked = (trackId: number, editing: boolean, modifiers?: {ctrl: boolean}) => {
-      // If the camera isn't selected yet we ignore the click
+      // The click that just finalized a new detection should not also select an
+      // existing detection underneath the final vertex.
+      if (justFinalizedCreation) {
+        return;
+      }
+      // Clicking a detection in a camera that isn't selected yet: switch to that
+      // camera AND act on the detection in the same click — left-click selects,
+      // right-click edits — instead of requiring a separate click to switch first.
       if (selectedCamera.value !== props.camera) {
+        // Mid new-detection creation, a left-click on this camera is the start of
+        // a draw (handled by the creation layer + update routing) — don't let it
+        // select an existing detection under the first corner. Right-click still
+        // switches to editing the clicked detection.
+        if (editAnnotationLayer.getMode() === 'creation' && !editing) {
+          return;
+        }
+        if (trackId !== null) {
+          handler.selectCamera(props.camera, false);
+          // selectCamera switches synchronously in the normal path; bail if a mode
+          // (e.g. linking) blocked the switch so we don't act on the wrong camera.
+          if (selectedCamera.value === props.camera) {
+            handler.trackSelect(trackId, false, modifiers);
+            if (editing) {
+              handler.trackEdit(trackId);
+            }
+          }
+        }
         return;
       }
       //So we only want to pass the click whjen not in creation mode or editing mode for features
       if (editAnnotationLayer.getMode() !== 'creation') {
         editAnnotationLayer.disable();
-        handler.trackSelect(trackId, editing, modifiers);
+        // When entering editing mode (right-click), use trackEdit so the
+        // geometry type is auto-detected (e.g. LineString vs rectangle).
+        if (editing && trackId !== null) {
+          handler.trackEdit(trackId);
+        } else {
+          handler.trackSelect(trackId, editing, modifiers);
+        }
+      } else if (editing && trackId !== null) {
+        // Right-click on another detection while in creation mode:
+        // cancel creation and switch to editing the clicked detection
+        editAnnotationLayer.disable();
+        handler.trackEdit(trackId);
       }
     };
 
     //Sync of internal geoJS state with the application
-    editAnnotationLayer.bus.$on('editing-annotation-sync', (editing: boolean) => {
-      handler.trackSelect(selectedTrackIdRef.value, editing);
+    editAnnotationLayer.bus.$on('editing-annotation-sync', (editing: boolean, deselect?: boolean) => {
+      if (deselect) {
+        handler.trackSelect(null, false);
+      } else {
+        handler.trackSelect(selectedTrackIdRef.value, editing);
+      }
+    });
+    // Handle right-click to confirm/lock annotation in Point mode (segmentation)
+    editAnnotationLayer.bus.$on('confirm-annotation', () => {
+      handler.confirmRecipe();
+    });
+    // Register callback so pressing 'n' (new detection) finalizes in-progress shapes
+    handler.registerFinalizeCreation(() => {
+      editAnnotationLayer.finalizeInProgress();
     });
     rectAnnotationLayer.bus.$on('annotation-clicked', Clicked);
     rectAnnotationLayer.bus.$on('annotation-right-clicked', Clicked);
     rectAnnotationLayer.bus.$on('annotation-ctrl-clicked', Clicked);
     polyAnnotationLayer.bus.$on('annotation-clicked', Clicked);
     polyAnnotationLayer.bus.$on('annotation-right-clicked', Clicked);
+    // Handle right-click polygon selection for multi-polygon support
+    polyAnnotationLayer.bus.$on('polygon-right-clicked', (_trackId: number, polygonKey: string) => {
+      // If in creation mode, cancel it first so we can select the polygon
+      if (editAnnotationLayer.getMode() === 'creation') {
+        handler.cancelCreation();
+      }
+      // Set the polygon key for the right-clicked polygon
+      handler.selectFeatureHandle(-1, polygonKey);
+      // Force layer update to load the selected polygon
+      // 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,
+        );
+      }, 0);
+    });
     polyAnnotationLayer.bus.$on('annotation-ctrl-clicked', Clicked);
+    lineLayer.bus.$on('annotation-clicked', Clicked);
+    lineLayer.bus.$on('annotation-right-clicked', Clicked);
+    // Handle polygon selection for multi-polygon support
+    polyAnnotationLayer.bus.$on('polygon-clicked', (_trackId: number, polygonKey: string) => {
+      // If in creation mode, don't interrupt - let the edit layer handle clicks for placing points
+      // This is important for hole drawing where left-clicks place hole vertices
+      if (editAnnotationLayer.getMode() === 'creation') {
+        return;
+      }
+      handler.selectFeatureHandle(-1, polygonKey);
+      // 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,
+        );
+      }, 0);
+    });
+    // Handle right-click outside polygons to finalize/cancel creation
+    polyAnnotationLayer.bus.$on('polygon-right-clicked-outside', () => {
+      if (editAnnotationLayer.getMode() === 'creation') {
+        // Cancel creation and go back to editing the default polygon
+        handler.cancelCreation();
+        handler.selectFeatureHandle(-1, '');
+        window.setTimeout(() => {
+          updateLayers(
+            frameNumberRef.value,
+            editingModeRef.value,
+            selectedTrackIdRef.value,
+            multiSeletListRef.value,
+            enabledTracksRef.value,
+            visibleModesRef.value,
+            selectedKeyRef.value,
+            props.colorBy,
+          );
+        }, 0);
+      }
+    });
     editAnnotationLayer.bus.$on('update:geojson', (
       mode: 'in-progress' | 'editing',
       geometryCompleteEvent: boolean,
@@ -498,6 +657,17 @@ export default defineComponent({
       key = '',
       cb: () => void = () => (undefined),
     ) => {
+      // Seamless multicam creation: a draw that lands on a camera that isn't the
+      // selected one must commit on THIS camera. Switch to it and start a fresh
+      // detection here (the empty origin track is auto-cleaned on camera switch)
+      // so the geometry is applied to the camera the user actually drew on.
+      if (props.camera !== selectedCamera.value
+        && isCreatingNewDetection(frameNumberRef.value, selectedTrackIdRef.value)) {
+        handler.selectCamera(props.camera, false);
+        if (selectedCamera.value === props.camera) {
+          handler.trackAdd();
+        }
+      }
       if (type === 'rectangle') {
         const bounds = geojsonToBound(data as GeoJSON.Feature<GeoJSON.Polygon>);
         // Extract rotation from properties if it exists
@@ -511,6 +681,9 @@ export default defineComponent({
       }
       // Jump into edit mode if we completed a new shape
       if (geometryCompleteEvent) {
+        // Suppress the select that rides along with this same finalizing click.
+        justFinalizedCreation = true;
+        window.setTimeout(() => { justFinalizedCreation = false; }, 0);
         updateLayers(
           frameNumberRef.value,
           editingModeRef.value,
@@ -525,8 +698,59 @@ export default defineComponent({
     });
     editAnnotationLayer.bus.$on(
       'update:selectedIndex',
-      (index: number, _type: EditAnnotationTypes, key = '') => handler.selectFeatureHandle(index, key),
+      (index: number, _type: EditAnnotationTypes, key?: string) => {
+        // When deselecting (index -1), don't change the key - it may have been
+        // set by polygon-right-clicked/polygon-clicked for multi-polygon selection
+        if (index >= 0 && key !== undefined) {
+          handler.selectFeatureHandle(index, key);
+        } else {
+          // Just update the handle index, preserve the current key
+          handler.selectFeatureHandle(index, selectedKeyRef.value);
+        }
+      },
     );
+    // Handle clicks outside the edit polygon to allow selecting other polygons
+    editAnnotationLayer.bus.$on('click-outside-edit', (geo: { x: number; y: number }) => {
+      // Check which polygon was clicked by iterating through formatted data
+      const point: [number, number] = [geo.x, geo.y];
+      const polygonData = polyAnnotationLayer.formattedData;
+
+      // Find the polygon that contains the click point
+      const clickedPolygon = polygonData.find((data) => {
+        const coords = data.polygon.coordinates[0] as [number, number][];
+        // Ray casting algorithm
+        let inside = false;
+        for (let i = 0, j = coords.length - 1; i < coords.length; j = i, i += 1) {
+          const xi = coords[i][0];
+          const yi = coords[i][1];
+          const xj = coords[j][0];
+          const yj = coords[j][1];
+          const intersect = ((yi > point[1]) !== (yj > point[1]))
+            && (point[0] < ((xj - xi) * (point[1] - yi)) / (yj - yi) + xi);
+          if (intersect) inside = !inside;
+        }
+        return inside;
+      });
+
+      if (clickedPolygon) {
+        const polygonKey = clickedPolygon.polygonKey || '';
+        // Select the clicked polygon
+        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,
+          );
+        }, 0);
+      }
+    });
     const annotationHoverTooltip = (
       found: {
           styleType: [string, number];
diff --git a/client/src/components/annotators/AnnotatorImageCursor.vue b/client/src/components/annotators/AnnotatorImageCursor.vue
new file mode 100644
index 000000000..6844ffef9
--- /dev/null
+++ b/client/src/components/annotators/AnnotatorImageCursor.vue
@@ -0,0 +1,73 @@
+<script lang="ts">
+import { defineComponent, toRef } from 'vue';
+
+import useAnnotatorImageCursor from './useAnnotatorImageCursor';
+
+export default defineComponent({
+  name: 'AnnotatorImageCursor',
+  props: {
+    imageCursor: {
+      type: String,
+      default: '',
+    },
+    imageCursorEditing: {
+      type: Boolean,
+      default: false,
+    },
+    cursor: {
+      type: String,
+      default: 'default',
+    },
+  },
+  setup(props) {
+    const {
+      displayImageCursor,
+      segmentationCursorLoading,
+      showEditBadge,
+    } = useAnnotatorImageCursor(
+      toRef(props, 'imageCursor'),
+      toRef(props, 'cursor'),
+      toRef(props, 'imageCursorEditing'),
+    );
+
+    return {
+      displayImageCursor,
+      segmentationCursorLoading,
+      showEditBadge,
+    };
+  },
+});
+</script>
+
+<template>
+  <span class="annotator-image-cursor">
+    <v-icon :class="{ 'mdi-spin': segmentationCursorLoading }">
+      {{ displayImageCursor }}
+    </v-icon>
+    <v-icon
+      v-if="showEditBadge"
+      class="annotator-image-cursor__badge"
+      small
+    >
+      mdi-pencil
+    </v-icon>
+  </span>
+</template>
+
+<style lang="scss" scoped>
+.annotator-image-cursor {
+  position: relative;
+  display: inline-flex;
+  line-height: 1;
+}
+
+.annotator-image-cursor__badge {
+  position: absolute;
+  right: -10px;
+  bottom: -8px;
+  font-size: 11px !important;
+  width: 11px;
+  height: 11px;
+  background: transparent;
+}
+</style>
diff --git a/client/src/components/annotators/ImageAnnotator.vue b/client/src/components/annotators/ImageAnnotator.vue
index c81fd3849..bb9e50630 100644
--- a/client/src/components/annotators/ImageAnnotator.vue
+++ b/client/src/components/annotators/ImageAnnotator.vue
@@ -4,6 +4,8 @@ import {
 } from 'vue';
 import { ImageEnhancementOutputs } from 'vue-media-annotator/use/useImageEnhancements';
 import { SetTimeFunc } from '../../use/useTimeObserver';
+import AnnotatorImageCursor from './AnnotatorImageCursor.vue';
+import useAnnotatorImageCursor from './useAnnotatorImageCursor';
 import { injectCameraInitializer } from './useMediaController';
 
 export interface ImageDataItem {
@@ -22,6 +24,7 @@ function loadImageFunc(imageDataItem: ImageDataItem, img: HTMLImageElement) {
 }
 export default defineComponent({
   name: 'ImageAnnotator',
+  components: { AnnotatorImageCursor },
   props: {
     imageData: {
       type: Array as PropType<ImageDataItem[]>,
@@ -74,6 +77,11 @@ export default defineComponent({
       // eslint-disable-next-line @typescript-eslint/no-use-before-define
       seek, pause, play, setVolume: unimplemented, setSpeed: unimplemented,
     });
+    const { playbackCursor } = useAnnotatorImageCursor(
+      toRef(data, 'imageCursor'),
+      toRef(data, 'cursor'),
+      toRef(data, 'imageCursorEditing'),
+    );
     data.maxFrame = props.imageData.length - 1;
     // Below are configuration settings we can set until we decide on good numbers to utilize.
     let local = {
@@ -392,6 +400,7 @@ export default defineComponent({
       data,
       loadingVideo,
       loadingImage,
+      playbackCursor,
       imageCursorRef: imageCursor,
       containerRef: container,
       cursorHandler,
@@ -466,12 +475,16 @@ export default defineComponent({
       ref="imageCursorRef"
       class="imageCursor"
     >
-      <v-icon> {{ data.imageCursor }} </v-icon>
+      <AnnotatorImageCursor
+        :image-cursor="data.imageCursor"
+        :image-cursor-editing="data.imageCursorEditing"
+        :cursor="data.cursor"
+      />
     </div>
     <div
       ref="containerRef"
       class="playback-container"
-      :style="{ cursor: data.cursor }"
+      :style="{ cursor: playbackCursor }"
       @mousemove="cursorHandler.handleMouseMove"
       @mouseleave="cursorHandler.handleMouseLeave"
       @mouseover="cursorHandler.handleMouseEnter"
diff --git a/client/src/components/annotators/LargeImageAnnotator.vue b/client/src/components/annotators/LargeImageAnnotator.vue
index 14fee2f9a..1f2d10cad 100644
--- a/client/src/components/annotators/LargeImageAnnotator.vue
+++ b/client/src/components/annotators/LargeImageAnnotator.vue
@@ -5,6 +5,8 @@ import {
 import geo from 'geojs';
 import { ImageEnhancementOutputs } from 'vue-media-annotator/use/useImageEnhancements';
 import { SetTimeFunc } from '../../use/useTimeObserver';
+import AnnotatorImageCursor from './AnnotatorImageCursor.vue';
+import useAnnotatorImageCursor from './useAnnotatorImageCursor';
 import { injectCameraInitializer } from './useMediaController';
 
 export interface LargeImageDataItem {
@@ -39,6 +41,7 @@ function buildOutputFilename(inputFilename: string): string {
 
 export default defineComponent({
   name: 'LargeImageAnnotator',
+  components: { AnnotatorImageCursor },
   props: {
     imageData: {
       type: Array as PropType<LargeImageDataItem[]>,
@@ -124,6 +127,11 @@ export default defineComponent({
       // eslint-disable-next-line @typescript-eslint/no-use-before-define
       seek, pause, play, setVolume: unimplemented, setSpeed: unimplemented,
     });
+    const { playbackCursor } = useAnnotatorImageCursor(
+      toRef(data, 'imageCursor'),
+      toRef(data, 'cursor'),
+      toRef(data, 'imageCursorEditing'),
+    );
     const updateTileLoadErrorWidth = () => {
       const containerWidth = container.value?.getBoundingClientRect().width;
       tileLoadErrorWidth.value = typeof containerWidth === 'number'
@@ -510,6 +518,7 @@ export default defineComponent({
       data,
       loadingVideo,
       loadingImage,
+      playbackCursor,
       tileLoadError,
       tileLoadErrorStyle,
       conversionInputFilename,
@@ -592,12 +601,16 @@ export default defineComponent({
       ref="imageCursorRef"
       class="imageCursor"
     >
-      <v-icon> {{ data.imageCursor }} </v-icon>
+      <AnnotatorImageCursor
+        :image-cursor="data.imageCursor"
+        :image-cursor-editing="data.imageCursorEditing"
+        :cursor="data.cursor"
+      />
     </div>
     <div
       ref="containerRef"
       class="playback-container"
-      :style="{ cursor: data.cursor }"
+      :style="{ cursor: playbackCursor }"
       @mousemove="cursorHandler.handleMouseMove"
       @mouseleave="cursorHandler.handleMouseLeave"
       @mouseover="cursorHandler.handleMouseEnter"
diff --git a/client/src/components/annotators/VideoAnnotator.vue b/client/src/components/annotators/VideoAnnotator.vue
index 94687b542..02125937e 100644
--- a/client/src/components/annotators/VideoAnnotator.vue
+++ b/client/src/components/annotators/VideoAnnotator.vue
@@ -1,9 +1,11 @@
 <script lang="ts">
 import {
-  defineComponent, onBeforeUnmount, PropType, watch,
+  defineComponent, onBeforeUnmount, PropType, watch, toRef,
 } from 'vue';
 import { ImageEnhancementOutputs } from 'vue-media-annotator/use/useImageEnhancements';
 import { Flick, SetTimeFunc } from '../../use/useTimeObserver';
+import AnnotatorImageCursor from './AnnotatorImageCursor.vue';
+import useAnnotatorImageCursor from './useAnnotatorImageCursor';
 import { injectCameraInitializer } from './useMediaController';
 /**
  * For MPEG codecs, the PTS (Presentation Timestamp)
@@ -65,6 +67,7 @@ function kwiverSeek(frame: number, frameRate: number, originalFps: number) {
 }
 export default defineComponent({
   name: 'VideoAnnotator',
+  components: { AnnotatorImageCursor },
   props: {
     videoUrl: {
       type: String,
@@ -123,6 +126,11 @@ export default defineComponent({
       setVolume,
       setSpeed,
     });
+    const { playbackCursor } = useAnnotatorImageCursor(
+      toRef(data, 'imageCursor'),
+      toRef(data, 'cursor'),
+      toRef(data, 'imageCursorEditing'),
+    );
     function makeVideo() {
       const video = document.createElement('video');
       video.preload = 'auto';
@@ -269,6 +277,7 @@ export default defineComponent({
     video.addEventListener('error', logError);
     return {
       data,
+      playbackCursor,
       imageCursorRef: imageCursor,
       containerRef: container,
       cursorHandler,
@@ -336,12 +345,20 @@ export default defineComponent({
         </filter>
       </defs>
     </svg>
-    <div ref="imageCursorRef" class="imageCursor">
-      <v-icon> {{ data.imageCursor }} </v-icon>
+    <div
+      ref="imageCursorRef"
+      class="imageCursor"
+    >
+      <AnnotatorImageCursor
+        :image-cursor="data.imageCursor"
+        :image-cursor-editing="data.imageCursorEditing"
+        :cursor="data.cursor"
+      />
     </div>
     <div
       ref="containerRef"
       class="playback-container"
+      :style="{ cursor: playbackCursor }"
       @mousemove="cursorHandler.handleMouseMove"
       @mouseleave="cursorHandler.handleMouseLeave"
       @mouseover="cursorHandler.handleMouseEnter"
diff --git a/client/src/components/annotators/mediaControllerType.ts b/client/src/components/annotators/mediaControllerType.ts
index a9a5379ec..27a955ef1 100644
--- a/client/src/components/annotators/mediaControllerType.ts
+++ b/client/src/components/annotators/mediaControllerType.ts
@@ -46,7 +46,7 @@ export interface MediaController extends AggregateMediaController {
 
   centerOn(coords: { x: number; y: number; z: number }): void;
   transition(coords: { x: number; y:number}, duration: number, zoom?: number): void;
-  setCursor(camera: string): void;
-  setImageCursor(camera: string): void;
+  setCursor(cursor: string): void;
+  setImageCursor(icon: string, editing?: boolean): void;
   resetMapDimensions(width: number, height: number, isMap?: boolean, margin?: number): void;
 }
diff --git a/client/src/components/annotators/useAnnotatorImageCursor.ts b/client/src/components/annotators/useAnnotatorImageCursor.ts
new file mode 100644
index 000000000..e1b7d0fef
--- /dev/null
+++ b/client/src/components/annotators/useAnnotatorImageCursor.ts
@@ -0,0 +1,27 @@
+import { computed, Ref } from 'vue';
+
+import { useSegmentationCursorLoading } from '../../provides';
+
+export default function useAnnotatorImageCursor(
+  imageCursor: Ref<string>,
+  cursor: Ref<string>,
+  imageCursorEditing: Ref<boolean>,
+) {
+  const segmentationCursorLoading = useSegmentationCursorLoading();
+  const displayImageCursor = computed(
+    () => (segmentationCursorLoading.value ? 'mdi-loading' : imageCursor.value),
+  );
+  const showEditBadge = computed(
+    () => !segmentationCursorLoading.value && imageCursorEditing.value && !!imageCursor.value,
+  );
+  const playbackCursor = computed(
+    () => (segmentationCursorLoading.value ? 'none' : cursor.value),
+  );
+
+  return {
+    displayImageCursor,
+    playbackCursor,
+    segmentationCursorLoading,
+    showEditBadge,
+  };
+}
diff --git a/client/src/components/annotators/useMediaController.ts b/client/src/components/annotators/useMediaController.ts
index 8cb69254b..4a6b68b34 100644
--- a/client/src/components/annotators/useMediaController.ts
+++ b/client/src/components/annotators/useMediaController.ts
@@ -31,6 +31,7 @@ interface MediaControllerReactiveData {
   syncedFrame: number;
   cursor: string;
   imageCursor: string;
+  imageCursorEditing: boolean;
   originalBounds: {
     left: number;
     top: number;
@@ -221,6 +222,7 @@ export function useMediaController() {
       syncedFrame: 0,
       cursor: 'default',
       imageCursor: '',
+      imageCursorEditing: false,
       originalBounds: {
         left: 0,
         top: 0,
@@ -235,9 +237,10 @@ export function useMediaController() {
       }
     }
 
-    function setImageCursor(newCursor: string) {
+    function setImageCursor(newCursor: string, editing = false) {
       if (state[camera]) {
         state[camera].imageCursor = `${newCursor}`;
+        state[camera].imageCursorEditing = editing;
       }
     }
 
diff --git a/client/src/components/index.ts b/client/src/components/index.ts
index 2769d7139..ec4d30a9a 100644
--- a/client/src/components/index.ts
+++ b/client/src/components/index.ts
@@ -5,6 +5,7 @@
 import ImageAnnotator from './annotators/ImageAnnotator.vue';
 import VideoAnnotator from './annotators/VideoAnnotator.vue';
 import LargeImageAnnotator from './annotators/LargeImageAnnotator.vue';
+import AnnotatorImageCursor from './annotators/AnnotatorImageCursor.vue';
 
 import Controls from './controls/Controls.vue';
 import EventChart from './controls/EventChart.vue';
@@ -26,8 +27,10 @@ import TypeItem from './TypeItem.vue';
 import TypePicker from './TypePicker.vue';
 
 export * from './annotators/useMediaController';
+export { default as useAnnotatorImageCursor } from './annotators/useAnnotatorImageCursor';
 export {
   /* Annotators */
+  AnnotatorImageCursor,
   ImageAnnotator,
   VideoAnnotator,
   LargeImageAnnotator,
diff --git a/client/src/layers/AnnotationLayers/LineLayer.ts b/client/src/layers/AnnotationLayers/LineLayer.ts
index d4c2516fa..610f79eea 100644
--- a/client/src/layers/AnnotationLayers/LineLayer.ts
+++ b/client/src/layers/AnnotationLayers/LineLayer.ts
@@ -1,4 +1,5 @@
 /* eslint-disable class-methods-use-this */
+import geo, { GeoEvent } from 'geojs';
 import { cloneDeep } from 'lodash';
 
 import BaseLayer, { LayerStyle, BaseLayerParams } from '../BaseLayer';
@@ -24,7 +25,23 @@ export default class LineLayer extends BaseLayer<LineGeoJSData> {
     const layer = this.annotator.geoViewerRef.value.createLayer('feature', {
       features: ['point', 'line'],
     });
-    this.featureLayer = layer.createFeature('line');
+    this.featureLayer = layer
+      .createFeature('line', { selectionAPI: true })
+      .geoOn(geo.event.feature.mouseclick, (e: GeoEvent) => {
+        if (e.mouse.buttonsDown.left) {
+          if (!e.data.editing || (e.data.editing && !e.data.selected)) {
+            this.bus.$emit('annotation-clicked', e.data.trackId, false);
+          }
+        } else if (e.mouse.buttonsDown.right) {
+          if (!e.data.editing || (e.data.editing && !e.data.selected)) {
+            this.bus.$emit('annotation-right-clicked', e.data.trackId, true);
+          }
+        }
+      });
+    this.featureLayer.geoOn(
+      geo.event.feature.mouseclick_order,
+      this.featureLayer.mouseOverOrderHighestIndex,
+    );
     super.initialize();
   }
 
diff --git a/client/src/layers/AnnotationLayers/PolygonLayer.ts b/client/src/layers/AnnotationLayers/PolygonLayer.ts
index 302c030b7..79fe0043a 100644
--- a/client/src/layers/AnnotationLayers/PolygonLayer.ts
+++ b/client/src/layers/AnnotationLayers/PolygonLayer.ts
@@ -10,7 +10,28 @@ interface PolyGeoJSData{
   editing: boolean | string;
   styleType: [string, number] | null;
   polygon: GeoJSON.Polygon;
+  polygonKey: string;
   set?: string;
+  isHole?: boolean; // True if this is a hole polygon (for styling)
+}
+
+/**
+ * Darken a hex color by a given factor (0-1, where 0 = black, 1 = original)
+ */
+function darkenColor(color: string, factor: number): string {
+  // Handle hex colors
+  if (color.startsWith('#')) {
+    const hex = color.slice(1);
+    const r = parseInt(hex.slice(0, 2), 16);
+    const g = parseInt(hex.slice(2, 4), 16);
+    const b = parseInt(hex.slice(4, 6), 16);
+    const newR = Math.round(r * factor);
+    const newG = Math.round(g * factor);
+    const newB = Math.round(b * factor);
+    return `#${newR.toString(16).padStart(2, '0')}${newG.toString(16).padStart(2, '0')}${newB.toString(16).padStart(2, '0')}`;
+  }
+  // For non-hex colors, return as-is (could extend to support rgb(), etc.)
+  return color;
 }
 
 export default class PolygonLayer extends BaseLayer<PolyGeoJSData> {
@@ -35,19 +56,36 @@ export default class PolygonLayer extends BaseLayer<PolyGeoJSData> {
       .geoOn(geo.event.feature.mouseclick, (e: GeoEvent) => {
         /**
          * Handle clicking on individual annotations, if DrawingOther is true we use the
-         * Rectangle type if only the polygon is visible we use the polygon bounds
+         * Rectangle type for track selection. However, polygon key events are always
+         * emitted so that multi-polygon selection works regardless of drawingOther.
          * */
-        if (e.mouse.buttonsDown.left && !this.drawingOther) {
-          if (!e.data.editing || (e.data.editing && !e.data.selected)) {
-            if (e.mouse.modifiers.ctrl) {
-              this.bus.$emit('annotation-ctrl-clicked', e.data.trackId, false, { ctrl: true });
-            } else {
-              this.bus.$emit('annotation-clicked', e.data.trackId, false);
+        if (e.mouse.buttonsDown.left) {
+          // Always emit polygon-clicked for multi-polygon support, regardless of drawingOther
+          const polygonKey = e.data.polygonKey || '';
+          if (e.data.selected) {
+            // Already selected track - user may be selecting a different polygon
+            this.bus.$emit('polygon-clicked', e.data.trackId, polygonKey);
+          }
+          // Track-level events only when not drawingOther (rectangle layer handles those)
+          if (!this.drawingOther) {
+            if (!e.data.editing || (e.data.editing && !e.data.selected)) {
+              if (e.mouse.modifiers.ctrl) {
+                this.bus.$emit('annotation-ctrl-clicked', e.data.trackId, false, { ctrl: true });
+              } else {
+                this.bus.$emit('polygon-clicked', e.data.trackId, polygonKey);
+                this.bus.$emit('annotation-clicked', e.data.trackId, false);
+              }
             }
           }
-        } else if (e.mouse.buttonsDown.right && !this.drawingOther) {
-          if (!e.data.editing || (e.data.editing && !e.data.selected)) {
-            this.bus.$emit('annotation-right-clicked', e.data.trackId, true);
+        } else if (e.mouse.buttonsDown.right) {
+          // Always emit polygon key for right-click so the correct polygon can be selected
+          const polygonKey = e.data.polygonKey || '';
+          this.bus.$emit('polygon-right-clicked', e.data.trackId, polygonKey);
+          // Track-level events only when not drawingOther
+          if (!this.drawingOther) {
+            if (!e.data.editing || (e.data.editing && !e.data.selected)) {
+              this.bus.$emit('annotation-right-clicked', e.data.trackId, true);
+            }
           }
         }
       });
@@ -58,7 +96,12 @@ export default class PolygonLayer extends BaseLayer<PolyGeoJSData> {
     this.featureLayer.geoOn(geo.event.mouseclick, (e: GeoEvent) => {
       // If we aren't clicking on an annotation we can deselect the current track
       if (this.featureLayer.pointSearch(e.geo).found.length === 0 && !this.drawingOther) {
-        this.bus.$emit('annotation-clicked', null, false);
+        if (e.mouse.buttonsDown.left) {
+          this.bus.$emit('annotation-clicked', null, false);
+        } else if (e.mouse.buttonsDown.right) {
+          // Right-click outside polygons - emit event to finalize/cancel creation
+          this.bus.$emit('polygon-right-clicked-outside');
+        }
       }
     });
     super.initialize();
@@ -106,15 +149,41 @@ export default class PolygonLayer extends BaseLayer<PolyGeoJSData> {
           frameData.features.geometry.features.forEach((feature) => {
             if (feature.geometry && feature.geometry.type === 'Polygon') {
               const polygon = feature.geometry;
+              const polygonKey = feature.properties?.key || '';
               const annotation: PolyGeoJSData = {
                 trackId: frameData.track.id,
                 selected: frameData.selected,
                 editing: frameData.editing,
                 styleType: frameData.styleType,
                 polygon,
+                polygonKey,
                 set: frameData.set,
+                isHole: false,
               };
               arr.push(annotation);
+
+              // Also add holes as separate polygon entries for distinct styling
+              const coords = polygon.coordinates as GeoJSON.Position[][];
+              if (coords.length > 1) {
+                // coords[0] is outer ring, coords[1..n] are holes
+                for (let i = 1; i < coords.length; i += 1) {
+                  const holePolygon: GeoJSON.Polygon = {
+                    type: 'Polygon',
+                    coordinates: [coords[i]], // Hole as its own polygon
+                  };
+                  const holeAnnotation: PolyGeoJSData = {
+                    trackId: frameData.track.id,
+                    selected: frameData.selected,
+                    editing: frameData.editing,
+                    styleType: frameData.styleType,
+                    polygon: holePolygon,
+                    polygonKey, // Same key as parent polygon
+                    set: frameData.set,
+                    isHole: true,
+                  };
+                  arr.push(holeAnnotation);
+                }
+              }
             }
           });
         }
@@ -126,7 +195,17 @@ export default class PolygonLayer extends BaseLayer<PolyGeoJSData> {
   redraw() {
     this.featureLayer
       .data(this.formattedData)
-      .polygon((d: PolyGeoJSData) => d.polygon.coordinates[0])
+      .polygon((d: PolyGeoJSData) => {
+        // GeoJS expects outer ring as array of points for simple polygons
+        // For polygons with holes, return object with outer/inner properties
+        if (d.polygon.coordinates.length > 1) {
+          return {
+            outer: d.polygon.coordinates[0],
+            inner: d.polygon.coordinates.slice(1),
+          };
+        }
+        return d.polygon.coordinates[0];
+      })
       .draw();
   }
 
@@ -142,15 +221,22 @@ export default class PolygonLayer extends BaseLayer<PolyGeoJSData> {
       // Style conversion to get array objects to work in geoJS
       position: (point) => ({ x: point[0], y: point[1] }),
       strokeColor: (_point, _index, data) => {
+        let color: string;
         if (data.selected) {
-          return this.stateStyling.selected.color;
-        }
-        if (data.styleType) {
-          return this.typeStyling.value.color(data.styleType[0]);
+          color = this.stateStyling.selected.color;
+        } else if (data.styleType) {
+          color = this.typeStyling.value.color(data.styleType[0]);
+        } else {
+          color = this.typeStyling.value.color('');
         }
-        return this.typeStyling.value.color('');
+        // Darken color for holes
+        return data.isHole ? darkenColor(color, 0.5) : color;
       },
       fill: (data) => {
+        // Holes should always be filled to show the darker color
+        if (data.isHole) {
+          return true;
+        }
         if (data.set) {
           return this.typeStyling.value.fill(data.set);
         }
@@ -160,12 +246,20 @@ export default class PolygonLayer extends BaseLayer<PolyGeoJSData> {
         return this.stateStyling.standard.fill;
       },
       fillColor: (_point, _index, data) => {
+        let color: string;
         if (data.styleType) {
-          return this.typeStyling.value.color(data.styleType[0]);
+          color = this.typeStyling.value.color(data.styleType[0]);
+        } else {
+          color = this.typeStyling.value.color('');
         }
-        return this.typeStyling.value.color('');
+        // Darken color for holes
+        return data.isHole ? darkenColor(color, 0.5) : color;
       },
       fillOpacity: (_point, _index, data) => {
+        // Holes get higher opacity to stand out
+        if (data.isHole) {
+          return 0.5;
+        }
         if (data.set) {
           return this.typeStyling.value.opacity(data.set);
         }
diff --git a/client/src/layers/AnnotationLayers/SegmentationPointsLayer.ts b/client/src/layers/AnnotationLayers/SegmentationPointsLayer.ts
new file mode 100644
index 000000000..09db4c186
--- /dev/null
+++ b/client/src/layers/AnnotationLayers/SegmentationPointsLayer.ts
@@ -0,0 +1,76 @@
+import { MediaController } from '../../components/annotators/mediaControllerType';
+
+interface SegmentationPointData {
+  x: number;
+  y: number;
+  label: number; // 1=foreground, 0=background
+}
+
+/**
+ * Layer for displaying segmentation prompt points (green=foreground, red=background)
+ * This is a simple layer that doesn't follow the BaseLayer pattern since it's
+ * not tied to track data - it's UI feedback during the segmentation process.
+ */
+export default class SegmentationPointsLayer {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  private featureLayer: any;
+
+  private annotator: MediaController;
+
+  private points: SegmentationPointData[] = [];
+
+  constructor(annotator: MediaController) {
+    this.annotator = annotator;
+    this.initialize();
+  }
+
+  private initialize() {
+    const layer = this.annotator.geoViewerRef.value.createLayer('feature', {
+      features: ['point'],
+    });
+    this.featureLayer = layer.createFeature('point');
+    this.featureLayer.style({
+      radius: 8,
+      strokeWidth: 2,
+      strokeColor: (data: SegmentationPointData) => (data.label === 1 ? '#00FF00' : '#FF0000'),
+      fillColor: (data: SegmentationPointData) => (data.label === 1 ? '#00FF00' : '#FF0000'),
+      fillOpacity: 0.6,
+      strokeOpacity: 1,
+    });
+    this.featureLayer.position((data: SegmentationPointData) => ({
+      x: data.x,
+      y: data.y,
+    }));
+  }
+
+  /**
+   * Update the displayed points
+   * @param points - Array of [x, y] coordinates
+   * @param labels - Array of labels (1=foreground, 0=background)
+   */
+  updatePoints(points: [number, number][], labels: number[]) {
+    this.points = points.map((p, i) => ({
+      x: p[0],
+      y: p[1],
+      label: labels[i] ?? 1,
+    }));
+    this.redraw();
+  }
+
+  /**
+   * Clear all displayed points
+   */
+  clear() {
+    this.points = [];
+    this.redraw();
+  }
+
+  private redraw() {
+    this.featureLayer.data(this.points).draw();
+  }
+
+  disable() {
+    this.points = [];
+    this.featureLayer.data([]).draw();
+  }
+}
diff --git a/client/src/layers/EditAnnotationLayer.ts b/client/src/layers/EditAnnotationLayer.ts
index 4c1204a1a..7aaeb00e8 100644
--- a/client/src/layers/EditAnnotationLayer.ts
+++ b/client/src/layers/EditAnnotationLayer.ts
@@ -69,6 +69,8 @@ export default class EditAnnotationLayer extends BaseLayer<GeoJSON.Feature> {
 
   selectedKey?: string;
 
+  selectedPolygonIndex: number;
+
   selectedHandleIndex: number;
 
   hoverHandleIndex: number;
@@ -80,6 +82,17 @@ export default class EditAnnotationLayer extends BaseLayer<GeoJSON.Feature> {
   /* in-progress events only emitted for lines and polygons */
   shapeInProgress: GeoJSON.LineString | GeoJSON.Polygon | null;
 
+  /* Track if the last click was a right-click or shift-click for Point mode */
+  lastClickWasBackground: boolean;
+
+  /* Track shift key state from native DOM events (more reliable than GeoJS events) */
+  lastShiftKeyState: boolean;
+
+  /* Bound event handlers for cleanup */
+  private boundTrackShiftKey: ((e: MouseEvent) => void) | null = null;
+
+  private boundHandleContextMenu: ((e: MouseEvent) => void) | null = null;
+
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   arrowFeatureLayer: any;
 
@@ -90,18 +103,91 @@ export default class EditAnnotationLayer extends BaseLayer<GeoJSON.Feature> {
     this.skipNextExternalUpdate = false;
     this._mode = 'editing';
     this.selectedKey = '';
+    this.selectedPolygonIndex = 0;
     this.type = params.type;
     this.selectedHandleIndex = -1;
     this.hoverHandleIndex = -1;
     this.shapeInProgress = null;
     this.disableModeSync = false;
     this.leftButtonCheckTimeout = -1;
+    this.lastClickWasBackground = false;
+    this.lastShiftKeyState = false;
     this.unrotatedGeoJSONCoords = null;
 
+    // Bind event handlers once (listeners are added/removed dynamically based on type)
+    this.boundTrackShiftKey = this.trackShiftKey.bind(this);
+    this.boundHandleContextMenu = this.handleContextMenu.bind(this);
+
+    // Add listeners if starting in Point mode
+    if (this.type === 'Point') {
+      this.addPointModeListeners();
+    }
+
     //Only initialize once, prevents recreating Layer each edit
     this.initialize();
   }
 
+  /**
+   * Add event listeners needed for Point mode (segmentation).
+   */
+  private addPointModeListeners() {
+    if (this.boundTrackShiftKey) {
+      document.addEventListener('mousedown', this.boundTrackShiftKey, true);
+    }
+    if (this.boundHandleContextMenu) {
+      document.addEventListener('contextmenu', this.boundHandleContextMenu, true);
+    }
+  }
+
+  /**
+   * Remove event listeners used for Point mode.
+   */
+  private removePointModeListeners() {
+    if (this.boundTrackShiftKey) {
+      document.removeEventListener('mousedown', this.boundTrackShiftKey, true);
+    }
+    if (this.boundHandleContextMenu) {
+      document.removeEventListener('contextmenu', this.boundHandleContextMenu, true);
+    }
+  }
+
+  /**
+   * Track shift key state from native DOM mousedown events.
+   * This is more reliable than GeoJS events for detecting shift+click.
+   */
+  trackShiftKey(e: MouseEvent) {
+    this.lastShiftKeyState = e.shiftKey;
+    // Also track middle-click (button 1) from native events for background points
+    if (e.button === 1 && this.type === 'Point' && this.getMode() === 'creation') {
+      this.lastClickWasBackground = true;
+    }
+  }
+
+  /**
+   * Handle right-click context menu in Point mode.
+   * In segmentation mode, right-click confirms/locks the annotation.
+   * Prevents browser context menu.
+   */
+  handleContextMenu(e: MouseEvent) {
+    if (this.type === 'Point' && this.getMode() === 'creation') {
+      e.preventDefault();
+      e.stopPropagation();
+
+      // Native contextmenu is used because GeoJS mouseclick may not fire for
+      // right-button on Windows/Electron.
+      this.bus.$emit('confirm-annotation');
+    }
+  }
+
+  /**
+   * Clean up event listeners when the layer is destroyed.
+   */
+  destroy() {
+    this.removePointModeListeners();
+    this.boundTrackShiftKey = null;
+    this.boundHandleContextMenu = null;
+  }
+
   /**
    * Initialization of the layer should only be done once for edit layers
    * Handlers for edit_action and state which will emit data when necessary
@@ -130,6 +216,13 @@ export default class EditAnnotationLayer extends BaseLayer<GeoJSON.Feature> {
         (e: GeoEvent) => this.hoverEditHandle(e),
       );
       this.featureLayer.geoOn(geo.event.mouseclick, (e: GeoEvent) => {
+        // Right-click in creation mode (non-Point): cancel and fully deselect.
+        // Point mode has its own right-click handler (handleContextMenu).
+        if (e.buttonsDown.right && this.getMode() === 'creation' && this.type !== 'Point') {
+          this.shapeInProgress = null;
+          this.bus.$emit('editing-annotation-sync', false, true);
+          return;
+        }
         //Used to sync clicks that kick out of editing mode with application
         //This prevents that pseudo Edit state when left clicking on a object in edit mode
         if (!this.disableModeSync && (e.buttonsDown.left)
@@ -137,6 +230,35 @@ export default class EditAnnotationLayer extends BaseLayer<GeoJSON.Feature> {
           this.bus.$emit('editing-annotation-sync', false);
         } else if (e.buttonsDown.left) {
           const newIndex = this.hoverHandleIndex;
+          // If not hovering over an edit handle and not on the edit polygon,
+          // emit event so other layers can handle the click (e.g., selecting different polygon)
+          if (newIndex < 0 && this.type === 'Polygon') {
+            const annotations = this.featureLayer.annotations();
+            if (annotations.length > 0) {
+              const annotation = annotations[0];
+              const geojson = annotation.geojson();
+              if (geojson && geojson.geometry && geojson.geometry.type === 'Polygon') {
+                const coords = geojson.geometry.coordinates[0] as [number, number][];
+                const point: [number, number] = [e.geo.x, e.geo.y];
+                // Ray casting algorithm to check if point is inside polygon
+                let inside = false;
+                for (let i = 0, j = coords.length - 1; i < coords.length; j = i, i += 1) {
+                  const xi = coords[i][0];
+                  const yi = coords[i][1];
+                  const xj = coords[j][0];
+                  const yj = coords[j][1];
+                  const intersect = ((yi > point[1]) !== (yj > point[1]))
+                    && (point[0] < ((xj - xi) * (point[1] - yi)) / (yj - yi) + xi);
+                  if (intersect) inside = !inside;
+                }
+                if (!inside) {
+                  // Click is outside the current edit polygon - emit passthrough event
+                  this.bus.$emit('click-outside-edit', e.geo);
+                  return;
+                }
+              }
+            }
+          }
           // Click features like a toggle: unselect if it's clicked twice.
           if (newIndex === this.selectedHandleIndex) {
             this.selectedHandleIndex = -1;
@@ -184,10 +306,56 @@ export default class EditAnnotationLayer extends BaseLayer<GeoJSON.Feature> {
    * shape that GeoJS is keeps internally.  Emit the shape as update:in-progress-geojson
    */
   setShapeInProgress(e: GeoEvent) {
-    // Allow middle click movement when placing points
-    if (e.mouse.buttons.middle && !e.propogated) {
+    // Allow middle click movement when placing points (except in Point mode where it creates background points)
+    if (e.mouse.buttons.middle && !e.propogated && this.type !== 'Point') {
+      return;
+    }
+    // Right-click should never add vertices - cancel/confirm is handled by
+    // mouseclick (line/polygon cancel) and contextmenu (Point confirm)
+    if (e.mouse.buttons.right) {
+      return;
+    }
+
+    // Track if this is a background point (shift+click or middle-click) for Point mode
+    // Check both GeoJS event modifiers and our native DOM event tracking for reliability
+    // Preserve the value if it was already set to true by trackShiftKey (native event)
+    if (this.type === 'Point' && this.getMode() === 'creation') {
+      this.lastClickWasBackground = this.lastClickWasBackground
+        || e.mouse.buttons.middle
+        || e.mouse.modifiers.shift
+        || this.lastShiftKeyState;
+    }
+
+    // Handle middle-click in Point mode - GeoJS doesn't create points on middle-click,
+    // so we need to manually create the point and emit the event
+    if (this.type === 'Point' && this.getMode() === 'creation' && e.mouse.buttons.middle) {
+      const pointGeojson: GeoJSON.Feature<GeoJSON.Point> = {
+        type: 'Feature',
+        geometry: {
+          type: 'Point',
+          coordinates: [Math.round(e.mouse.geo.x), Math.round(e.mouse.geo.y)],
+        },
+        properties: {
+          background: true,
+        },
+      };
+
+      // Emit the point creation event directly
+      this.bus.$emit(
+        'update:geojson',
+        'editing',
+        true, // geometryCompleteEvent - point is complete
+        pointGeojson,
+        this.type,
+        this.selectedKey,
+        this.skipNextFunc(),
+      );
+
+      // Reset background flag for next point
+      this.lastClickWasBackground = false;
       return;
     }
+
     if (this.getMode() === 'creation' && ['LineString', 'Polygon'].includes(this.type)) {
       if (this.shapeInProgress === null) {
         // Initialize a new in-progress shape
@@ -205,6 +373,25 @@ export default class EditAnnotationLayer extends BaseLayer<GeoJSON.Feature> {
       } else {
         const coords = this.shapeInProgress?.coordinates as GeoJSON.Position[];
         coords.push(newPoint);
+        // Auto-complete LineString after 2 points (simple line with 2 endpoints)
+        if (coords.length >= 2) {
+          const feature: GeoJSON.Feature = {
+            type: 'Feature',
+            geometry: this.shapeInProgress!,
+            properties: {},
+          };
+          this.shapeInProgress = null;
+          this.disableModeSync = true;
+          this.bus.$emit(
+            'update:geojson',
+            'editing',
+            true, // geometryCompleteEvent - line is complete
+            feature,
+            this.type,
+            this.selectedKey,
+          );
+          return;
+        }
       }
       this.bus.$emit(
         'update:geojson',
@@ -281,9 +468,19 @@ export default class EditAnnotationLayer extends BaseLayer<GeoJSON.Feature> {
 
   /**
    * Set the current Editing type for switching between editing polygons or rects.
-   * */
+   * Also manages event listeners that are only needed for Point mode (segmentation).
+   */
   setType(type: EditAnnotationTypes) {
+    const wasPoint = this.type === 'Point';
+    const isPoint = type === 'Point';
     this.type = type;
+
+    // Add or remove Point mode listeners based on type change
+    if (!wasPoint && isPoint) {
+      this.addPointModeListeners();
+    } else if (wasPoint && !isPoint) {
+      this.removePointModeListeners();
+    }
   }
 
   setKey(key: string) {
@@ -329,12 +526,91 @@ export default class EditAnnotationLayer extends BaseLayer<GeoJSON.Feature> {
   }
 
   calculateCursorImage() {
-    if (this.getMode() === 'creation') {
-      // TODO:  we may want to make this more generic or utilize the icons from editMenu
-      this.annotator.setImageCursor(`mdi-vector-${typeMapper.get(this.type)}`);
+    const mode = this.getMode();
+    if (mode === 'creation' || mode === 'editing') {
+      this.annotator.setImageCursor(
+        `mdi-vector-${typeMapper.get(this.type)}`,
+        mode === 'editing',
+      );
     }
   }
 
+  /**
+   * Attempt to finalize any in-progress annotation before switching tracks.
+   * Handles:
+   * - Polygon with 3+ vertices tracked in shapeInProgress
+   * - GeoJS-managed annotations (rectangles) in creation/done state
+   * - Discards invalid partial shapes (polygon < 3 vertices, line with 1 point)
+   * Returns true if a shape was finalized.
+   */
+  finalizeInProgress(): boolean {
+    // Handle shapeInProgress (polygon/line tracked manually)
+    if (this.shapeInProgress && this.getMode() === 'creation') {
+      if (this.shapeInProgress.type === 'Polygon') {
+        const coords = this.shapeInProgress.coordinates as GeoJSON.Position[][];
+        if (coords[0] && coords[0].length >= 3) {
+          const ring = coords[0];
+          const first = ring[0];
+          const last = ring[ring.length - 1];
+          if (first[0] !== last[0] || first[1] !== last[1]) {
+            ring.push([...first]);
+          }
+          const feature: GeoJSON.Feature = {
+            type: 'Feature',
+            geometry: this.shapeInProgress,
+            properties: {},
+          };
+          this.disableModeSync = true;
+          this.bus.$emit(
+            'update:geojson',
+            'editing',
+            true,
+            feature,
+            this.type,
+            this.selectedKey,
+            this.skipNextFunc(),
+          );
+          this.shapeInProgress = null;
+          return true;
+        }
+      }
+      // Discard invalid partial shapes (polygon < 3 vertices, line with 1 point)
+      this.shapeInProgress = null;
+      return false;
+    }
+
+    // Handle GeoJS-managed annotations (rectangles, completed shapes)
+    // Skip Point mode — segmentation manages its own polygon via the recipe,
+    // not through the edit layer's GeoJS annotation.
+    if (this.featureLayer && this.type !== 'Point') {
+      const annotations = this.featureLayer.annotations();
+      if (annotations.length > 0) {
+        const annotation = annotations[0];
+        const geoJSONData = annotation.geojson();
+        if (geoJSONData && geoJSONData.geometry) {
+          if (this.type === 'rectangle') {
+            geoJSONData.geometry.coordinates[0] = reOrdergeoJSON(
+              geoJSONData.geometry.coordinates[0] as GeoJSON.Position[],
+            );
+          }
+          this.disableModeSync = true;
+          this.bus.$emit(
+            'update:geojson',
+            'editing',
+            true,
+            geoJSONData,
+            this.type,
+            this.selectedKey,
+            this.skipNextFunc(),
+          );
+          return true;
+        }
+      }
+    }
+
+    return false;
+  }
+
   /**
    * Removes the current annotation and resets the mode when completed editing
    */
@@ -359,25 +635,52 @@ export default class EditAnnotationLayer extends BaseLayer<GeoJSON.Feature> {
 
   /**
    * retrieves geoJSON data based on the key and type
-   * @param frameData
+   * @param track
+   * @param polygonIndex optional index to get a specific polygon when multiple exist
    */
-  getGeoJSONData(track: FrameDataTrack) {
-    let geoJSONData;
+  getGeoJSONData(
+    track: FrameDataTrack,
+    polygonIndex?: number,
+  ): GeoJSON.Point | GeoJSON.Polygon | GeoJSON.LineString | undefined {
+    let geoJSONData: GeoJSON.Point | GeoJSON.Polygon | GeoJSON.LineString | undefined;
     if (track && track.features && track.features.geometry) {
+      const matchingFeatures: (GeoJSON.Point | GeoJSON.Polygon | GeoJSON.LineString)[] = [];
       track.features.geometry.features.forEach((feature) => {
         if (feature.geometry
             && feature.geometry.type.toLowerCase() === this.type.toLowerCase()) {
-          if (feature.properties && feature.properties.key !== 'undefined') {
-            if (feature.properties.key === this.selectedKey) {
-              geoJSONData = feature.geometry;
-            }
+          // Get the feature key, defaulting to '' for undefined/null keys
+          const featureKey = feature.properties?.key ?? '';
+          if (featureKey === this.selectedKey) {
+            matchingFeatures.push(
+              feature.geometry as GeoJSON.Point | GeoJSON.Polygon | GeoJSON.LineString,
+            );
           }
         }
       });
+      // If polygonIndex is specified and valid, use it; otherwise use first match
+      if (polygonIndex !== undefined && polygonIndex >= 0 && polygonIndex < matchingFeatures.length) {
+        geoJSONData = matchingFeatures[polygonIndex];
+      } else if (matchingFeatures.length > 0) {
+        [geoJSONData] = matchingFeatures;
+      }
     }
     return geoJSONData;
   }
 
+  /**
+   * Set which polygon index to edit when multiple polygons exist
+   */
+  setPolygonIndex(index: number) {
+    this.selectedPolygonIndex = index;
+  }
+
+  /**
+   * Get the currently selected polygon index
+   */
+  getPolygonIndex() {
+    return this.selectedPolygonIndex;
+  }
+
   /** overrides default function to disable and clear anotations before drawing again */
   async changeData(frameData: FrameDataTrack[]) {
     if (this.skipNextExternalUpdate === false) {
@@ -477,6 +780,19 @@ export default class EditAnnotationLayer extends BaseLayer<GeoJSON.Feature> {
       // Only calls this once on completion of an annotation
       if (e.annotation.state() === 'done' && this.getMode() === 'creation') {
         const geoJSONData = [e.annotation.geojson()];
+        if (this.type === 'rectangle') {
+          geoJSONData[0].geometry.coordinates[0] = reOrdergeoJSON(
+            geoJSONData[0].geometry.coordinates[0] as GeoJSON.Position[],
+          );
+        }
+        // For Point mode, add background property if it was a right-click or shift-click
+        if (this.type === 'Point' && this.lastClickWasBackground) {
+          geoJSONData[0].properties = {
+            ...geoJSONData[0].properties,
+            background: true,
+          };
+          this.lastClickWasBackground = false; // Reset for next point
+        }
 
         this.unrotatedGeoJSONCoords = geoJSONData[0].geometry.coordinates[0] as GeoJSON.Position[];
         this.formattedData = geoJSONData;
diff --git a/client/src/provides.ts b/client/src/provides.ts
index 1ee7e1a7d..b59635968 100644
--- a/client/src/provides.ts
+++ b/client/src/provides.ts
@@ -8,6 +8,7 @@ import type { EditAnnotationTypes } from './layers/EditAnnotationLayer';
 import type { AnnotationId, StringKeyObject } from './BaseAnnotation';
 import type { VisibleAnnotationTypes } from './layers';
 import type { RectBounds } from './utils';
+import type { TrackSupportedFeature } from './track';
 import type {
   Attribute,
   AttributeFilter,
@@ -54,6 +55,12 @@ type EditingModeType = Readonly<Ref<false | EditAnnotationTypes>>;
 const MultiSelectSymbol = Symbol('multiSelect');
 type MultiSelectType = Readonly<Ref<readonly AnnotationId[]>>;
 
+const SegmentationPointsSymbol = Symbol('segmentationPoints');
+type SegmentationPointsType = Readonly<Ref<{ points: [number, number][]; labels: number[]; frameNum: number }>>;
+
+const SegmentationCursorLoadingSymbol = Symbol('segmentationCursorLoading');
+type SegmentationCursorLoadingType = Readonly<Ref<boolean>>;
+
 const PendingSaveCountSymbol = Symbol('pendingSaveCount');
 type pendingSaveCountType = Readonly<Ref<number>>;
 
@@ -126,6 +133,8 @@ export interface Handler {
   seekFrame(frame: number): void;
   /* Toggle editing mode for track */
   trackEdit(AnnotationId: AnnotationId): void;
+  /* Confirm/lock the current annotation for active recipes */
+  confirmRecipe(): void;
   /* toggle selection mode for track */
   trackSelect(AnnotationId: AnnotationId | null, edit: boolean, modifiers?: { ctrl: boolean }): void;
   /* select tracks enclosed by a lasso polygon */
@@ -143,6 +152,13 @@ export interface Handler {
     bounds: RectBounds,
     rotation?: number,
   ): void;
+  /* Set a feature on the selected track with proper interpolation handling */
+  setTrackFeature(
+    frameNum: number,
+    bounds: RectBounds,
+    geometry: GeoJSON.Feature<TrackSupportedFeature>[],
+    runAfterLogic?: boolean,
+  ): void;
   /* update geojson for track */
   updateGeoJSON(
     eventType: 'in-progress' | 'editing',
@@ -194,6 +210,14 @@ export interface Handler {
   startLinking(camera: string): void;
   stopLinking(): void;
   setChange(set: string): void;
+  /* Add a hole to the current polygon */
+  addHole(): void;
+  /* Add a new separate polygon */
+  addPolygon(): void;
+  /* Cancel any in-progress creation mode (hole or polygon addition) */
+  cancelCreation(): void;
+  /* Register callback to finalize in-progress shapes (used by LayerManager) */
+  registerFinalizeCreation(cb: () => void): void;
 
 }
 const HandlerSymbol = Symbol('handler');
@@ -209,12 +233,14 @@ function dummyHandler(handle: (name: string, args: unknown[]) => void): Handler
     trackSeek(...args) { handle('trackSeek', args); },
     seekFrame(...args) { handle('seekFrame', args); },
     trackEdit(...args) { handle('trackEdit', args); },
+    confirmRecipe(...args) { handle('confirmRecipe', args); },
     trackSelect(...args) { handle('trackSelect', args); },
     lassoSelect(...args) { handle('lassoSelect', args); },
     trackSelectNext(...args) { handle('trackSelectNext', args); },
     trackSplit(...args) { handle('trackSplit', args); },
     trackAdd(...args) { handle('trackAdd', args); return 0; },
     updateRectBounds(...args) { handle('updateRectBounds', args); },
+    setTrackFeature(...args) { handle('setTrackFeature', args); },
     updateGeoJSON(...args) { handle('updateGeoJSON', args); },
     removeTrack(...args) { handle('removeTrack', args); },
     removeGroup(...args) { handle('removeGroup', args); },
@@ -237,6 +263,10 @@ function dummyHandler(handle: (name: string, args: unknown[]) => void): Handler
     startLinking(...args) { handle('startLinking', args); },
     stopLinking(...args) { handle('stopLinking', args); },
     setChange(...args) { handle('setChange', args); },
+    addHole(...args) { handle('addHole', args); },
+    addPolygon(...args) { handle('addPolygon', args); },
+    cancelCreation(...args) { handle('cancelCreation', args); },
+    registerFinalizeCreation(...args) { handle('registerFinalizeCreation', args); },
   };
 }
 
@@ -262,6 +292,8 @@ export interface State {
   annotationSet: AnnotationSetType;
   annotationSets: AnnotationSetsType;
   comparisonSets: ComparisonSetsType;
+  segmentationPoints: SegmentationPointsType;
+  segmentationCursorLoading: SegmentationCursorLoadingType;
   selectedCamera: SelectedCameraType;
   selectedKey: SelectedKeyType;
   selectedTrackId: SelectedTrackIdType;
@@ -328,6 +360,8 @@ function dummyState(): State {
     comparisonSets: ref([]),
     groupFilters: groupFilterControls,
     groupStyleManager: new StyleManager({ markChangesPending }),
+    segmentationPoints: ref({ points: [], labels: [], frameNum: -1 }),
+    segmentationCursorLoading: ref(false),
     selectedCamera: ref('singleCam'),
     selectedKey: ref(''),
     selectedTrackId: ref(null),
@@ -377,6 +411,8 @@ function provideAnnotator(state: State, handler: Handler, attributesFilters: Att
   provide(AnnotationSetSymbol, state.annotationSet);
   provide(AnnotationSetsSymbol, state.annotationSets);
   provide(ComparisonSetsSymbol, state.comparisonSets);
+  provide(SegmentationPointsSymbol, state.segmentationPoints);
+  provide(SegmentationCursorLoadingSymbol, state.segmentationCursorLoading);
   provide(TrackFilterControlsSymbol, state.trackFilters);
   provide(TrackStyleManagerSymbol, state.trackStyleManager);
   provide(SelectedCameraSymbol, state.selectedCamera);
@@ -513,6 +549,14 @@ function useImageEnhancements() {
   return use<ImageEnhancementsType>(ImageEnhancementsSymbol);
 }
 
+function useSegmentationPoints() {
+  return use<SegmentationPointsType>(SegmentationPointsSymbol);
+}
+
+function useSegmentationCursorLoading() {
+  return use<SegmentationCursorLoadingType>(SegmentationCursorLoadingSymbol);
+}
+
 export {
   LassoModeSymbol,
   dummyHandler,
@@ -547,4 +591,6 @@ export {
   useReadOnlyMode,
   useImageEnhancements,
   useAttributesFilters,
+  useSegmentationPoints,
+  useSegmentationCursorLoading,
 };
diff --git a/client/src/recipe.ts b/client/src/recipe.ts
index efd5635b7..bd259fa08 100644
--- a/client/src/recipe.ts
+++ b/client/src/recipe.ts
@@ -28,6 +28,8 @@ interface Recipe {
   icon: Ref<string>;
   active: Ref<boolean>;
   toggleable: Ref<boolean>;
+  /** Whether the recipe is currently loading (e.g., initializing models) */
+  loading?: Ref<boolean>;
   bus: Vue;
   update: (
     mode: 'in-progress' | 'editing',
@@ -52,6 +54,8 @@ interface Recipe {
   activate: () => unknown;
   mousetrap: () => Mousetrap[];
   deactivate: () => void;
+  /** Optional method to confirm/lock the current annotation (e.g., for segmentation) */
+  confirm?: () => void;
 }
 
 export default Recipe;
diff --git a/client/src/track.ts b/client/src/track.ts
index e28d63516..667d7548c 100644
--- a/client/src/track.ts
+++ b/client/src/track.ts
@@ -311,7 +311,10 @@ export default class Track extends BaseAnnotation {
     geometry.forEach((geo) => {
       const i = fg.features
         .findIndex((item) => {
-          const keyMatch = !geo.properties?.key || item.properties?.key === geo.properties?.key;
+          // Compare keys directly, treating undefined/null as empty string
+          const geoKey = geo.properties?.key ?? '';
+          const itemKey = item.properties?.key ?? '';
+          const keyMatch = geoKey === itemKey;
           const typeMatch = item.geometry.type === geo.geometry.type;
           return keyMatch && typeMatch;
         });
@@ -349,7 +352,9 @@ export default class Track extends BaseAnnotation {
       return [];
     }
     return feature.geometry.features.filter((item) => {
-      const matchesKey = !key || item.properties?.key === key;
+      // Check key match: undefined means match all, otherwise compare (treating undefined/null as '')
+      const matchesKey = key === undefined
+        || (item.properties?.key ?? '') === key;
       const matchesType = !type || item.geometry.type === type;
       return matchesKey && matchesType;
     });
@@ -362,7 +367,9 @@ export default class Track extends BaseAnnotation {
       return false;
     }
     const index = feature.geometry.features.findIndex((item) => {
-      const matchesKey = !key || item.properties?.key === key;
+      // Check key match: undefined means match all, otherwise compare (treating undefined/null as '')
+      const matchesKey = key === undefined
+        || (item.properties?.key ?? '') === key;
       const matchesType = !type || item.geometry.type === type;
       return matchesKey && matchesType;
     });
@@ -391,6 +398,116 @@ export default class Track extends BaseAnnotation {
     }
   }
 
+  /**
+   * Get all polygon features for a frame
+   * @returns Array of polygon GeoJSON features with their keys
+   */
+  getPolygonFeatures(frame: number): Array<{
+    key: string;
+    geometry: GeoJSON.Polygon;
+    hasHoles: boolean;
+    holeCount: number;
+  }> {
+    const feature = this.features[frame];
+    if (!feature?.geometry) {
+      return [];
+    }
+    const polygons: Array<{
+      key: string;
+      geometry: GeoJSON.Polygon;
+      hasHoles: boolean;
+      holeCount: number;
+    }> = [];
+    feature.geometry.features.forEach((item) => {
+      if (item.geometry.type === 'Polygon') {
+        const coords = item.geometry.coordinates as GeoJSON.Position[][];
+        polygons.push({
+          key: item.properties?.key || '',
+          geometry: item.geometry,
+          hasHoles: coords.length > 1,
+          holeCount: Math.max(0, coords.length - 1),
+        });
+      }
+    });
+    return polygons;
+  }
+
+  /**
+   * Add a hole to an existing polygon
+   * @param frame frame number
+   * @param key polygon key to add hole to
+   * @param holeCoords coordinates of the hole (array of [x,y] positions)
+   * @returns true if hole was added successfully
+   */
+  addHoleToPolygon(frame: number, key: string, holeCoords: GeoJSON.Position[]): boolean {
+    const feature = this.features[frame];
+    if (!feature?.geometry) {
+      return false;
+    }
+    const polygonFeature = feature.geometry.features.find(
+      (item) => item.geometry.type === 'Polygon' && (item.properties?.key ?? '') === key,
+    );
+    if (polygonFeature && polygonFeature.geometry.type === 'Polygon') {
+      (polygonFeature.geometry.coordinates as GeoJSON.Position[][]).push(holeCoords);
+      this.notify('feature', feature);
+      return true;
+    }
+    return false;
+  }
+
+  /**
+   * Remove a hole from a polygon
+   * @param frame frame number
+   * @param key polygon key
+   * @param holeIndex index of the hole to remove (0 = first hole, which is coordinates[1])
+   * @returns true if hole was removed successfully
+   */
+  removeHoleFromPolygon(frame: number, key: string, holeIndex: number): boolean {
+    const feature = this.features[frame];
+    if (!feature?.geometry) {
+      return false;
+    }
+    const polygonFeature = feature.geometry.features.find(
+      (item) => item.geometry.type === 'Polygon' && (item.properties?.key ?? '') === key,
+    );
+    if (polygonFeature && polygonFeature.geometry.type === 'Polygon') {
+      const coords = polygonFeature.geometry.coordinates as GeoJSON.Position[][];
+      // holeIndex 0 corresponds to coords[1], holeIndex 1 to coords[2], etc.
+      const actualIndex = holeIndex + 1;
+      if (actualIndex > 0 && actualIndex < coords.length) {
+        coords.splice(actualIndex, 1);
+        this.notify('feature', feature);
+        return true;
+      }
+    }
+    return false;
+  }
+
+  /**
+   * Get the next available polygon key for this frame
+   * @param frame frame number
+   * @returns next available key (e.g., "1", "2", etc.)
+   */
+  getNextPolygonKey(frame: number): string {
+    const polygons = this.getPolygonFeatures(frame);
+    if (polygons.length === 0) {
+      return '';
+    }
+    // Find the highest numeric key and increment
+    let maxKey = 0;
+    polygons.forEach((p) => {
+      if (p.key === '') {
+        maxKey = Math.max(maxKey, 0);
+      } else {
+        const numKey = parseInt(p.key, 10);
+        if (!Number.isNaN(numKey)) {
+          maxKey = Math.max(maxKey, numKey);
+        }
+      }
+    });
+    return String(maxKey + 1);
+  }
+
   setFeatureAttribute(frame: number, name: string, value: unknown, user: null | string = null) {
     if (this.features[frame]) {
       if (user !== null) {
diff --git a/server/dive_utils/models.py b/server/dive_utils/models.py
index 7f3e93377..d82e68066 100644
--- a/server/dive_utils/models.py
+++ b/server/dive_utils/models.py
@@ -29,7 +29,8 @@ class GeoJSONGeometry(BaseModel):
 class GeoJSONFeature(BaseModel):
     type: str
     geometry: GeoJSONGeometry
-    properties: Dict[str, Union[bool, float, str]]
+    # str first in the Union to keep numeric strings like "1" from coercing to bool/float
+    properties: Dict[str, Union[str, float, bool]]
 
 
 class GeoJSONFeatureCollection(BaseModel):
diff --git a/server/dive_utils/serializers/viame.py b/server/dive_utils/serializers/viame.py
index bcd3a6889..ff8e34540 100644
--- a/server/dive_utils/serializers/viame.py
+++ b/server/dive_utils/serializers/viame.py
@@ -63,6 +63,28 @@ def row_info(row: List[str]) -> Tuple[int, str, int, List[int], float]:
     return trackId, filename, frame, bounds, fish_length
 
 
+def _resolve_detection_length(
+    attributes: Optional[Dict[str, Any]],
+    fish_length_from_column: float,
+) -> Tuple[Dict[str, Any], Optional[float]]:
+    """Resolve length from attributes.length or the VIAME length column."""
+    attr_length: Optional[float] = None
+    if attributes and 'length' in attributes:
+        try:
+            candidate = float(attributes['length'])
+            if candidate == candidate:  # not NaN
+                attr_length = candidate
+        except (TypeError, ValueError):
+            attr_length = None
+
+    column_length = fish_length_from_column if fish_length_from_column > 0 else None
+    resolved = attr_length if attr_length is not None else column_length
+    if resolved is None:
+        return attributes or {}, None
+
+    return {**(attributes or {}), 'length': resolved}, resolved
+
+
 def _deduceType(value: Any) -> Union[bool, float, str, None]:
     if isinstance(value, dict) or isinstance(value, list):
         return None
@@ -80,11 +102,28 @@ def _deduceType(value: Any) -> Union[bool, float, str, None]:
         return value
 
 
-def create_geoJSONFeature(features: Dict[str, Any], type: str, coords: List[Any], key=''):
+def get_next_polygon_key(features: Dict[str, Any]) -> str:
+    """Get the next available polygon key for a feature."""
+    if "geometry" not in features or not features["geometry"]["features"]:
+        return ''
+    # Count existing polygons to determine the next key
+    polygon_count = sum(
+        1 for f in features["geometry"]["features"]
+        if f["geometry"]["type"] == "Polygon"
+    )
+    return str(polygon_count) if polygon_count > 0 else ''
+
+
+def create_geoJSONFeature(features: Dict[str, Any], type: str, coords: List[Any], key='', auto_key=False):
     feature = {}
     if "geometry" not in features:
         features["geometry"] = {"type": "FeatureCollection", "features": []}
-    else:  # check for existing type/key pairs
+
+    # For polygons with auto_key, always create a new feature with a unique key
+    if type == 'Polygon' and auto_key:
+        key = get_next_polygon_key(features)
+    elif not auto_key:
+        # Check for existing type/key pairs (for non-polygon or explicit key)
         if features["geometry"]["features"]:
             for subfeature in features["geometry"]["features"]:
                 if (
@@ -93,18 +132,34 @@ def create_geoJSONFeature(features: Dict[str, Any], type: str, coords: List[Any]
                 ):
                     feature = subfeature
                     break
+
     if "geometry" not in feature:
         feature = {
             "type": "Feature",
             "properties": {"key": key},
             "geometry": {"type": type},
         }
+        features['geometry']['features'].append(feature)
     if type == 'Polygon':
         feature["geometry"]['coordinates'] = [coords]
     elif type in ["LineString", "Point"]:
         feature['geometry']['coordinates'] = coords
 
-    features['geometry']['features'].append(feature)
+    return key  # Return the key used (useful for auto-generated keys)
+
+
+def add_hole_to_polygon(features: Dict[str, Any], coords: List[Any], key=''):
+    """Add a hole to an existing polygon feature with the given key."""
+    if "geometry" not in features or not features["geometry"]["features"]:
+        return
+    for subfeature in features["geometry"]["features"]:
+        if (
+            subfeature["geometry"]["type"] == 'Polygon'
+            and subfeature["properties"]["key"] == key
+        ):
+            # Add hole as additional ring to the polygon coordinates
+            subfeature["geometry"]["coordinates"].append(coords)
+            break
 
 
 def _parse_row(row: List[str]) -> Tuple[Dict, Dict, Dict, List, List]:
@@ -149,12 +204,32 @@ def _parse_row(row: List[str]) -> Tuple[Dict, Dict, Dict, List, List]:
         if trk_regex:
             track_attributes[trk_regex[1]] = _deduceType(trk_regex[2])
 
-        # (poly) x1 y1 x2 y2 ...
-        poly_regex = re.match(r"^(\(poly\)) ((?:-?[0-9]+\.*-?[0-9]*\s*)+)", row[j])
+        # (poly) x1 y1 x2 y2 ... - polygon (multiple allowed, auto-keyed internally)
+        # (hole) x1 y1 x2 y2 ... - hole in the most recent polygon
+        poly_regex = re.match(
+            r"^\(poly\)\s*((?:-?[0-9]+\.*-?[0-9]*\s*)+)",
+            row[j]
+        )
         if poly_regex:
-            temp = [float(x) for x in poly_regex[2].split()]
-            coords = list(zip(temp[::2], temp[1::2]))
-            create_geoJSONFeature(features, 'Polygon', coords)
+            temp = [float(x) for x in poly_regex.group(1).split()]
+            coords = [[temp[i], temp[i + 1]] for i in range(0, len(temp), 2)]
+            # Create new polygon with auto-generated key
+            create_geoJSONFeature(features, 'Polygon', coords, auto_key=True)
+
+        # (hole) x1 y1 x2 y2 ... - hole in the most recent polygon
+        hole_regex = re.match(
+            r"^\(hole\)\s*((?:-?[0-9]+\.*-?[0-9]*\s*)+)",
+            row[j]
+        )
+        if hole_regex:
+            temp = [float(x) for x in hole_regex.group(1).split()]
+            coords = [[temp[i], temp[i + 1]] for i in range(0, len(temp), 2)]
+            # Add hole to the most recent polygon (last one added)
+            if "geometry" in features and features["geometry"]["features"]:
+                polygons = [f for f in features["geometry"]["features"] if f["geometry"]["type"] == "Polygon"]
+                if polygons:
+                    last_poly_key = polygons[-1]["properties"]["key"]
+                    add_hole_to_polygon(features, coords, last_poly_key)
 
         # (note) text
         note_regex = re.match(r"^\(note\)\s*(.+)", row[j])
@@ -182,11 +257,13 @@ def _parse_row_for_tracks(row: List[str]) -> Tuple[Feature, Dict, Dict, List]:
     head_tail_feature, attributes, track_attributes, confidence_pairs, notes = _parse_row(row)
     _, _, frame, bounds, fishLength = row_info(row)
 
+    attributes, resolved_length = _resolve_detection_length(attributes, fishLength)
+
     feature = Feature(
         frame=frame,
         bounds=bounds,
         attributes=attributes or None,
-        fishLength=fishLength if fishLength > 0 else None,
+        fishLength=resolved_length,
         notes=notes if notes else None,
         **head_tail_feature,
     )
@@ -564,13 +641,33 @@ def export_tracks_as_csv(
                     features = interpolate(keyframe, nextKeyframe)
 
                 for feature in features:
+                    attributes = dict(feature.attributes or {})
+                    attr_length: Optional[float] = None
+                    if 'length' in attributes:
+                        try:
+                            candidate = float(attributes['length'])
+                            if candidate == candidate:
+                                attr_length = candidate
+                        except (TypeError, ValueError):
+                            attr_length = None
+                    resolved_length = (
+                        attr_length
+                        if attr_length is not None
+                        else feature.fishLength
+                    )
+                    export_length = (
+                        resolved_length
+                        if resolved_length is not None and resolved_length == resolved_length
+                        else -1
+                    )
+
                     columns = [
                         track.id,
                         "",
                         feature.frame,
                         *feature.bounds,
                         sorted_confidence_pairs[0][1],
-                        feature.fishLength or -1,
+                        export_length,
                     ]
 
                     # If FPS is set, column 2 will be video timestamp
@@ -583,8 +680,11 @@ def export_tracks_as_csv(
                     for pair in sorted_confidence_pairs:
                         columns.extend(list(pair))
 
-                    if feature.attributes:
-                        for key, val in feature.attributes.items():
+                    if resolved_length is not None and resolved_length == resolved_length:
+                        attributes['length'] = resolved_length
+
+                    if attributes:
+                        for key, val in attributes.items():
                             columns.append(f"(atr) {key} {valueToString(val)}")
 
                     if track.attributes:
@@ -594,25 +694,35 @@ def export_tracks_as_csv(
                     if feature.geometry and "FeatureCollection" == feature.geometry.type:
                         for geoJSONFeature in feature.geometry.features:
                             if 'Polygon' == geoJSONFeature.geometry.type:
-                                # Coordinates need to be flattened out from their list of tuples
-                                coordinates = [
-                                    item
-                                    for sublist in geoJSONFeature.geometry.coordinates[
-                                        0
-                                    ]  # type: ignore
-                                    for item in sublist  # type: ignore
-                                ]
-                                columns.append(
-                                    f"(poly) {' '.join(map(lambda x: str(round(x)), coordinates))}"
-                                )
+                                all_rings = geoJSONFeature.geometry.coordinates  # type: ignore
+
+                                # Write outer ring (first ring)
+                                if len(all_rings) > 0:
+                                    outer_coords = [
+                                        item
+                                        for sublist in all_rings[0]
+                                        for item in sublist  # type: ignore
+                                    ]
+                                    columns.append(
+                                        f"(poly) {' '.join(map(lambda x: str(round(x)), outer_coords))}"
+                                    )
+
+                                    # Write holes (additional rings)
+                                    for hole_ring in all_rings[1:]:
+                                        hole_coords = [
+                                            item
+                                            for sublist in hole_ring
+                                            for item in sublist  # type: ignore
+                                        ]
+                                        columns.append(
+                                            f"(hole) {' '.join(map(lambda x: str(round(x)), hole_coords))}"
+                                        )
                             if 'Point' == geoJSONFeature.geometry.type:
                                 coordinates = geoJSONFeature.geometry.coordinates  # type: ignore
                                 columns.append(
                                     f"(kp) {geoJSONFeature.properties['key']} "
                                     f"{round(coordinates[0])} {round(coordinates[1])}"
                                 )
-                            # TODO: support for multiple GeoJSON Objects of the same type
-                            # once the CSV supports it
 
                     writer.writerow(columns)
                     yield csvFile.getvalue()
diff --git a/server/tests/test_serialize_viame_csv.py b/server/tests/test_serialize_viame_csv.py
index 7b8b584ed..ea647f0ec 100644
--- a/server/tests/test_serialize_viame_csv.py
+++ b/server/tests/test_serialize_viame_csv.py
@@ -195,6 +195,129 @@
         ],
         [],
     ),
+    # Testing multi-polygon with different keys
+    (
+        {
+            "0": {
+                "id": 0,
+                "attributes": {},
+                "confidencePairs": [["fish", 1.0]],
+                "features": [
+                    {
+                        "frame": 0,
+                        "bounds": [100, 100, 500, 500],
+                        "geometry": {
+                            "type": "FeatureCollection",
+                            "features": [
+                                {
+                                    "type": "Feature",
+                                    "properties": {"key": ""},
+                                    "geometry": {
+                                        "type": "Polygon",
+                                        "coordinates": [[[100, 100], [200, 100], [200, 200], [100, 200]]],
+                                    },
+                                },
+                                {
+                                    "type": "Feature",
+                                    "properties": {"key": "1"},
+                                    "geometry": {
+                                        "type": "Polygon",
+                                        "coordinates": [[[300, 300], [400, 300], [400, 400], [300, 400]]],
+                                    },
+                                },
+                            ],
+                        },
+                    },
+                ],
+                "begin": 0,
+                "end": 0,
+            },
+        },
+        [
+            "0,1.png,0,100,100,500,500,1.0,-1,fish,1.0,(poly) 100 100 200 100 200 200 100 200,(poly) 300 300 400 300 400 400 300 400",
+            "",
+        ],
+        [],
+    ),
+    # Testing polygon with hole
+    (
+        {
+            "0": {
+                "id": 0,
+                "attributes": {},
+                "confidencePairs": [["object", 1.0]],
+                "features": [
+                    {
+                        "frame": 0,
+                        "bounds": [100, 100, 500, 500],
+                        "geometry": {
+                            "type": "FeatureCollection",
+                            "features": [
+                                {
+                                    "type": "Feature",
+                                    "properties": {"key": ""},
+                                    "geometry": {
+                                        "type": "Polygon",
+                                        "coordinates": [
+                                            [[100, 100], [500, 100], [500, 500], [100, 500]],
+                                            [[200, 200], [400, 200], [400, 400], [200, 400]],
+                                        ],
+                                    },
+                                },
+                            ],
+                        },
+                    },
+                ],
+                "begin": 0,
+                "end": 0,
+            },
+        },
+        [
+            "0,1.png,0,100,100,500,500,1.0,-1,object,1.0,(poly) 100 100 500 100 500 500 100 500,(hole) 200 200 400 200 400 400 200 400",
+            "",
+        ],
+        [],
+    ),
+    # Testing keyed polygon with hole
+    (
+        {
+            "0": {
+                "id": 0,
+                "attributes": {},
+                "confidencePairs": [["region", 1.0]],
+                "features": [
+                    {
+                        "frame": 0,
+                        "bounds": [0, 0, 1000, 1000],
+                        "geometry": {
+                            "type": "FeatureCollection",
+                            "features": [
+                                {
+                                    "type": "Feature",
+                                    "properties": {"key": "2"},
+                                    "geometry": {
+                                        "type": "Polygon",
+                                        "coordinates": [
+                                            [[0, 0], [1000, 0], [1000, 1000], [0, 1000]],
+                                            [[100, 100], [200, 100], [200, 200], [100, 200]],
+                                            [[300, 300], [400, 300], [400, 400], [300, 400]],
+                                        ],
+                                    },
+                                },
+                            ],
+                        },
+                    },
+                ],
+                "begin": 0,
+                "end": 0,
+            },
+        },
+        [
+            "0,1.png,0,0,0,1000,1000,1.0,-1,region,1.0,(poly) 0 0 1000 0 1000 1000 0 1000,(hole) 100 100 200 100 200 200 100 200,(hole) 300 300 400 300 400 400 300 400",
+            "",
+        ],
+        [],
+    ),
     # Testing type filter
     (
         {
diff --git a/testutils/viame.spec.json b/testutils/viame.spec.json
index 2a71ee623..571582389 100644
--- a/testutils/viame.spec.json
+++ b/testutils/viame.spec.json
@@ -675,5 +675,202 @@
             }
         },
         {}
+    ],
+    [
+        [
+            "0,1.png,0,100,100,500,500,1.0,-1,fish,1.0,(poly) 100 100 200 100 200 200 100 200,(poly) 300 300 400 300 400 400 300 400",
+            ""
+        ],
+        {
+            "0": {
+                "id": 0,
+                "attributes": {},
+                "confidencePairs": [
+                    [
+                        "fish",
+                        1.0
+                    ]
+                ],
+                "features": [
+                    {
+                        "frame": 0,
+                        "bounds": [
+                            100,
+                            100,
+                            500,
+                            500
+                        ],
+                        "geometry": {
+                            "type": "FeatureCollection",
+                            "features": [
+                                {
+                                    "type": "Feature",
+                                    "properties": {
+                                        "key": ""
+                                    },
+                                    "geometry": {
+                                        "type": "Polygon",
+                                        "coordinates": [
+                                            [
+                                                [100.0, 100.0],
+                                                [200.0, 100.0],
+                                                [200.0, 200.0],
+                                                [100.0, 200.0]
+                                            ]
+                                        ]
+                                    }
+                                },
+                                {
+                                    "type": "Feature",
+                                    "properties": {
+                                        "key": "1"
+                                    },
+                                    "geometry": {
+                                        "type": "Polygon",
+                                        "coordinates": [
+                                            [
+                                                [300.0, 300.0],
+                                                [400.0, 300.0],
+                                                [400.0, 400.0],
+                                                [300.0, 400.0]
+                                            ]
+                                        ]
+                                    }
+                                }
+                            ]
+                        }
+                    }
+                ],
+                "begin": 0,
+                "end": 0
+            }
+        },
+        {}
+    ],
+    [
+        [
+            "0,1.png,0,100,100,500,500,1.0,-1,object,1.0,(poly) 100 100 500 100 500 500 100 500,(hole) 200 200 400 200 400 400 200 400",
+            ""
+        ],
+        {
+            "0": {
+                "id": 0,
+                "attributes": {},
+                "confidencePairs": [
+                    [
+                        "object",
+                        1.0
+                    ]
+                ],
+                "features": [
+                    {
+                        "frame": 0,
+                        "bounds": [
+                            100,
+                            100,
+                            500,
+                            500
+                        ],
+                        "geometry": {
+                            "type": "FeatureCollection",
+                            "features": [
+                                {
+                                    "type": "Feature",
+                                    "properties": {
+                                        "key": ""
+                                    },
+                                    "geometry": {
+                                        "type": "Polygon",
+                                        "coordinates": [
+                                            [
+                                                [100.0, 100.0],
+                                                [500.0, 100.0],
+                                                [500.0, 500.0],
+                                                [100.0, 500.0]
+                                            ],
+                                            [
+                                                [200.0, 200.0],
+                                                [400.0, 200.0],
+                                                [400.0, 400.0],
+                                                [200.0, 400.0]
+                                            ]
+                                        ]
+                                    }
+                                }
+                            ]
+                        }
+                    }
+                ],
+                "begin": 0,
+                "end": 0
+            }
+        },
+        {}
+    ],
+    [
+        [
+            "0,1.png,0,0,0,1000,1000,1.0,-1,region,1.0,(poly) 0 0 1000 0 1000 1000 0 1000,(hole) 100 100 200 100 200 200 100 200,(hole) 300 300 400 300 400 400 300 400",
+            ""
+        ],
+        {
+            "0": {
+                "id": 0,
+                "attributes": {},
+                "confidencePairs": [
+                    [
+                        "region",
+                        1.0
+                    ]
+                ],
+                "features": [
+                    {
+                        "frame": 0,
+                        "bounds": [
+                            0,
+                            0,
+                            1000,
+                            1000
+                        ],
+                        "geometry": {
+                            "type": "FeatureCollection",
+                            "features": [
+                                {
+                                    "type": "Feature",
+                                    "properties": {
+                                        "key": ""
+                                    },
+                                    "geometry": {
+                                        "type": "Polygon",
+                                        "coordinates": [
+                                            [
+                                                [0.0, 0.0],
+                                                [1000.0, 0.0],
+                                                [1000.0, 1000.0],
+                                                [0.0, 1000.0]
+                                            ],
+                                            [
+                                                [100.0, 100.0],
+                                                [200.0, 100.0],
+                                                [200.0, 200.0],
+                                                [100.0, 200.0]
+                                            ],
+                                            [
+                                                [300.0, 300.0],
+                                                [400.0, 300.0],
+                                                [400.0, 400.0],
+                                                [300.0, 400.0]
+                                            ]
+                                        ]
+                                    }
+                                }
+                            ]
+                        }
+                    }
+                ],
+                "begin": 0,
+                "end": 0
+            }
+        },
+        {}
     ]
 ]