diff --git a/client/bundle.css b/client/bundle.css
new file mode 100644
index 000000000..b2f0abd65
--- /dev/null
+++ b/client/bundle.css
@@ -0,0 +1,477 @@
+.event-chart {
+  position: relative;
+  height: calc(100% - 10px);
+  margin: 5px 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+.event-chart .tooltip {
+  position: absolute;
+  background: black;
+  border: 1px solid white;
+  padding: 0px 5px;
+  font-size: 14px;
+  z-index: 2;
+}
+
+.controls {
+  position: absolute;
+}
+
+.video-annotator {
+  position: relative;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  z-index: 0;
+  display: flex;
+  flex-direction: column;
+}
+.video-annotator .geojs-map {
+  margin: 2px;
+}
+.video-annotator .geojs-map.geojs-map:focus {
+  outline: none;
+}
+.video-annotator .playback-container {
+  flex: 1;
+}
+.video-annotator .loadingSpinnerContainer {
+  z-index: 20;
+  margin: 0;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -ms-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+}
+.video-annotator .geojs-map.annotation-input {
+  cursor: inherit;
+}
+
+.selected-camera {
+  box-sizing: content-box;
+}
+.selected-camera .geojs-map {
+  outline: 3px cyan dashed;
+}
+.selected-camera .geojs-map.geojs-map:focus {
+  outline: 3px cyan dashed;
+}
+
+.imageCursor {
+  z-index: 10;
+  position: fixed;
+  backface-visibility: hidden;
+  top: 0;
+  left: 0;
+  pointer-events: none;
+}
+
+.controls {
+  bottom: 0;
+}
+
+.controls {
+  position: absolute;
+}
+
+.video-annotator {
+  position: relative;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  z-index: 0;
+  display: flex;
+  flex-direction: column;
+}
+.video-annotator .geojs-map {
+  margin: 2px;
+}
+.video-annotator .geojs-map.geojs-map:focus {
+  outline: none;
+}
+.video-annotator .playback-container {
+  flex: 1;
+}
+.video-annotator .loadingSpinnerContainer {
+  z-index: 20;
+  margin: 0;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -ms-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+}
+.video-annotator .geojs-map.annotation-input {
+  cursor: inherit;
+}
+
+.selected-camera {
+  box-sizing: content-box;
+}
+.selected-camera .geojs-map {
+  outline: 3px cyan dashed;
+}
+.selected-camera .geojs-map.geojs-map:focus {
+  outline: 3px cyan dashed;
+}
+
+.imageCursor {
+  z-index: 10;
+  position: fixed;
+  backface-visibility: hidden;
+  top: 0;
+  left: 0;
+  pointer-events: none;
+}
+
+.controls {
+  bottom: 0;
+}
+
+.border-radius[data-v-77dee125] {
+  border: 1px solid #888888;
+  padding: 2px 5px;
+  border-radius: 5px;
+}
+
+.line-chart {
+  height: 100%;
+}
+.line-chart .line {
+  fill: none;
+  stroke-width: 1.5px;
+}
+.line-chart .axis-y {
+  font-size: 12px;
+}
+.line-chart .axis-y g:first-of-type,
+.line-chart .axis-y g:last-of-type {
+  display: none;
+}
+.line-chart .tooltip {
+  position: absolute;
+  background: black;
+  border: 1px solid white;
+  padding: 0px 5px;
+  font-size: 14px;
+}
+
+.timeline .tick {
+  shape-rendering: crispEdges;
+  font-size: 12px;
+  stroke-opacity: 0.5;
+  stroke-dasharray: 2, 2;
+}
+
+.timeline[data-v-0d0fe2ba] {
+  min-height: 175px;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+}
+.timeline[data-v-0d0fe2ba] .work-area[data-v-0d0fe2ba] {
+  flex: 1;
+  position: relative;
+  overflow: hidden;
+}
+.timeline[data-v-0d0fe2ba] .work-area[data-v-0d0fe2ba] .hand[data-v-0d0fe2ba] {
+  position: absolute;
+  top: 0;
+  width: 0;
+  height: 100%;
+  border-left: 1px solid #299be3;
+  z-index: 10;
+}
+.timeline[data-v-0d0fe2ba] .work-area[data-v-0d0fe2ba] .time-filter-line[data-v-0d0fe2ba] {
+  position: absolute;
+  top: 0;
+  width: 0;
+  height: 100%;
+  z-index: 2;
+  cursor: col-resize;
+  pointer-events: auto;
+}
+.timeline[data-v-0d0fe2ba] .work-area[data-v-0d0fe2ba] .time-filter-tooltip[data-v-0d0fe2ba] {
+  position: absolute;
+  top: 30px;
+  transform: translateX(-50%);
+  background-color: rgba(0, 0, 0, 0.8);
+  color: white;
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  white-space: nowrap;
+  pointer-events: none;
+  z-index: 20;
+}
+.timeline[data-v-0d0fe2ba] .work-area[data-v-0d0fe2ba] .time-filter-start-line[data-v-0d0fe2ba] {
+  border-left: 3px solid #4caf50;
+}
+.timeline[data-v-0d0fe2ba] .work-area[data-v-0d0fe2ba] .time-filter-end-line[data-v-0d0fe2ba] {
+  border-left: 3px solid #f44336;
+}
+.timeline[data-v-0d0fe2ba] .work-area[data-v-0d0fe2ba] .time-filter-dimming[data-v-0d0fe2ba] {
+  position: absolute;
+  top: 0;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.3);
+  pointer-events: none;
+  z-index: 1;
+}
+.timeline[data-v-0d0fe2ba] .work-area[data-v-0d0fe2ba] .child[data-v-0d0fe2ba] {
+  position: absolute;
+  top: 0;
+  bottom: 17px;
+  left: 0;
+  right: 0;
+  z-index: 0;
+}
+.timeline[data-v-0d0fe2ba] .minimap[data-v-0d0fe2ba] {
+  height: 10px;
+}
+.timeline[data-v-0d0fe2ba] .minimap[data-v-0d0fe2ba] .fill[data-v-0d0fe2ba] {
+  position: relative;
+  height: 100%;
+  background-color: #80c6e8;
+}
+
+.controls {
+  position: absolute;
+}
+
+.video-annotator {
+  position: relative;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  z-index: 0;
+  display: flex;
+  flex-direction: column;
+}
+.video-annotator .geojs-map {
+  margin: 2px;
+}
+.video-annotator .geojs-map.geojs-map:focus {
+  outline: none;
+}
+.video-annotator .playback-container {
+  flex: 1;
+}
+.video-annotator .loadingSpinnerContainer {
+  z-index: 20;
+  margin: 0;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -ms-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+}
+.video-annotator .geojs-map.annotation-input {
+  cursor: inherit;
+}
+
+.selected-camera {
+  box-sizing: content-box;
+}
+.selected-camera .geojs-map {
+  outline: 3px cyan dashed;
+}
+.selected-camera .geojs-map.geojs-map:focus {
+  outline: 3px cyan dashed;
+}
+
+.imageCursor {
+  z-index: 10;
+  position: fixed;
+  backface-visibility: hidden;
+  top: 0;
+  left: 0;
+  pointer-events: none;
+}
+
+.controls {
+  bottom: 0;
+}
+
+.input-box {
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  border-radius: 4px;
+  padding: 0 6px;
+  color: white;
+}
+
+.trackNumber {
+  font-family: monospace;
+  max-width: 80px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.trackNumber:hover {
+  cursor: pointer;
+  font-weight: bolder;
+  text-decoration: underline;
+}
+
+.border-highlight[data-v-0d46f934] {
+  border-bottom: 1px solid gray;
+}
+
+.type-checkbox[data-v-0d46f934] {
+  max-width: 80%;
+  overflow-wrap: anywhere;
+}
+
+.hover-show-parent[data-v-0d46f934] .hover-show-child[data-v-0d46f934] {
+  display: none;
+}
+.hover-show-parent[data-v-0d46f934][data-v-0d46f934]:hover .hover-show-child[data-v-0d46f934] {
+  display: inherit;
+}
+
+.outlined[data-v-0d46f934] {
+  background-color: gray;
+  color: #222;
+  font-weight: 600;
+  border-radius: 6px;
+  padding: 0 5px;
+  font-size: 12px;
+}
+
+.input-box {
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  border-radius: 4px;
+  padding: 0 6px;
+  color: white;
+}
+
+.trackNumber {
+  font-family: monospace;
+  max-width: 80px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.trackNumber:hover {
+  cursor: pointer;
+  font-weight: bolder;
+  text-decoration: underline;
+}
+
+.freeform-input[data-v-d679c59c] {
+  width: 150px;
+}
+
+.groups[data-v-c26ed586] {
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.input-box {
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  border-radius: 4px;
+  padding: 0 6px;
+  color: white;
+}
+
+.trackNumber {
+  font-family: monospace;
+  max-width: 80px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.trackNumber:hover {
+  cursor: pointer;
+  font-weight: bolder;
+  text-decoration: underline;
+}
+
+.track-item[data-v-7a688bfe] {
+  border-radius: inherit;
+}
+.track-item[data-v-7a688bfe] .item-row[data-v-7a688bfe] {
+  width: 100%;
+}
+.track-item[data-v-7a688bfe] .type-color-box[data-v-7a688bfe] {
+  margin: 7px;
+  margin-top: 4px;
+  min-width: 15px;
+  max-width: 15px;
+  min-height: 15px;
+  max-height: 15px;
+}
+
+.strcoller {
+  height: 100%;
+}
+
+.trackHeader {
+  height: auto;
+}
+
+.tracks {
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+.tracks .v-input--checkbox label {
+  white-space: pre-wrap;
+}
+
+.nowrap[data-v-a4da19c6] {
+  white-space: nowrap;
+  overflow: hidden;
+  max-width: var(--content-width);
+  text-overflow: ellipsis;
+}
+
+.hover-show-parent[data-v-a4da19c6] .hover-show-child[data-v-a4da19c6] {
+  display: none;
+}
+.hover-show-parent[data-v-a4da19c6][data-v-a4da19c6]:hover .hover-show-child[data-v-a4da19c6] {
+  display: inherit;
+}
+
+.outlined[data-v-a4da19c6] {
+  background-color: gray;
+  color: #222;
+  font-weight: 600;
+  border-radius: 6px;
+  padding: 0 5px;
+  font-size: 12px;
+}
+
+.input-box {
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  border-radius: 4px;
+  padding: 0 6px;
+  color: white;
+}
+
+.trackNumber {
+  font-family: monospace;
+  max-width: 80px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.trackNumber:hover {
+  cursor: pointer;
+  font-weight: bolder;
+  text-decoration: underline;
+}
+
+.freeform-input[data-v-07a75698] {
+  width: 135px;
+}
+
+.select-input[data-v-07a75698] {
+  width: 120px;
+  background-color: #1e1e1e;
+  appearance: menulist;
+}
\ No newline at end of file
diff --git a/client/dive-common/apispec.ts b/client/dive-common/apispec.ts
index e6e412077..dc8649663 100644
--- a/client/dive-common/apispec.ts
+++ b/client/dive-common/apispec.ts
@@ -266,6 +266,167 @@ 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;
+}
+
+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 {
+  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;
+}
+
+/**
+ * Text Query Types for open-vocabulary detection/segmentation
+ */
+
+/** A single detection returned from a text query */
+export interface TextQueryDetection {
+  /** Bounding box [x1, y1, x2, y2] */
+  box: [number, number, number, number];
+  /** Polygon coordinates as [x, y] pairs */
+  polygon?: [number, number][];
+  /** Confidence score */
+  score: number;
+  /** Label/class name (often the query text) */
+  label: string;
+  /** Low-res mask for refinement (optional) */
+  lowResMask?: number[][];
+}
+
+export interface TextQueryRequest {
+  /** Path to the image file */
+  imagePath: string;
+  /** Text query describing what to find (e.g., "fish", "person swimming") */
+  text: string;
+  /** Confidence threshold for detections (default: 0.3) */
+  boxThreshold?: number;
+  /** Maximum number of detections to return (default: 10) */
+  maxDetections?: number;
+  /** Optional boxes to refine [x1, y1, x2, y2][] */
+  boxes?: [number, number, number, number][];
+  /** Optional keypoints for refinement [x, y][] */
+  points?: [number, number][];
+  /** Labels for points: 1 for foreground, 0 for background */
+  pointLabels?: number[];
+  /** Optional masks to refine */
+  masks?: number[][][];
+}
+
+export interface TextQueryResponse {
+  /** Whether the query succeeded */
+  success: boolean;
+  /** Error message if failed */
+  error?: string;
+  /** List of detections found */
+  detections?: TextQueryDetection[];
+  /** The original query text */
+  query?: string;
+  /** Whether fallback method was used (no native text support) */
+  fallback?: boolean;
+}
+
+export interface RefineDetectionsRequest {
+  /** Path to the image file */
+  imagePath: string;
+  /** Detections to refine */
+  detections: TextQueryDetection[];
+  /** Optional additional keypoints for refinement [x, y][] */
+  points?: [number, number][];
+  /** Labels for additional points: 1 for foreground, 0 for background */
+  pointLabels?: number[];
+  /** Whether to include refined masks in response */
+  refineMasks?: boolean;
+}
+
+export interface RefineDetectionsResponse {
+  /** Whether the refinement succeeded */
+  success: boolean;
+  /** Error message if failed */
+  error?: string;
+  /** Refined detections */
+  detections?: TextQueryDetection[];
+}
+
 export {
   provideApi,
   useApi,
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..f29e6a6f7 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,14 @@ 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',
+    'text-query-init',
+    'text-query',
+    'text-query-all-frames',
+  ],
   setup(props, { emit }) {
     const toolTimeTimeout = ref<number | null>(null);
     const STORAGE_KEY = 'editorMenu.editButtonsExpanded';
@@ -93,6 +102,59 @@ export default defineComponent({
       localStorage.setItem(STORAGE_KEY, String(value));
     });
 
+    // Text query state
+    const textQueryDialogOpen = ref(false);
+    const textQueryInput = ref('');
+    const textQueryLoading = ref(false);
+    const textQueryThreshold = ref(0.3);
+    const textQueryInitializing = ref(false);
+    const textQueryServiceError = ref('');
+    const textQueryAllFrames = ref(false);
+
+    const openTextQueryDialog = () => {
+      textQueryDialogOpen.value = true;
+      textQueryInput.value = '';
+      textQueryServiceError.value = '';
+      textQueryAllFrames.value = false;
+      textQueryInitializing.value = true;
+      emit('text-query-init');
+    };
+
+    const closeTextQueryDialog = () => {
+      textQueryDialogOpen.value = false;
+      textQueryInput.value = '';
+      textQueryServiceError.value = '';
+      textQueryInitializing.value = false;
+      textQueryAllFrames.value = false;
+    };
+
+    const onTextQueryServiceReady = (success: boolean, error?: string) => {
+      textQueryInitializing.value = false;
+      if (!success) {
+        textQueryServiceError.value = error || 'Text query service is not available';
+      }
+    };
+
+    const submitTextQuery = () => {
+      if (!textQueryInput.value.trim()) {
+        return;
+      }
+      textQueryLoading.value = true;
+      if (textQueryAllFrames.value) {
+        emit('text-query-all-frames', {
+          text: textQueryInput.value.trim(),
+          boxThreshold: textQueryThreshold.value,
+        });
+      } else {
+        emit('text-query', {
+          text: textQueryInput.value.trim(),
+          boxThreshold: textQueryThreshold.value,
+        });
+      }
+      closeTextQueryDialog();
+      textQueryLoading.value = false;
+    };
+
     const modeToolTips = {
       Creating: {
         rectangle: 'Drag to draw rectangle. Press ESC to exit.',
@@ -129,6 +191,7 @@ export default defineComponent({
           id: r.name,
           icon: r.icon.value || 'mdi-pencil',
           active: props.editingTrack && r.active.value,
+          loading: r.loading?.value ?? false,
           description: r.name,
           click: () => r.activate(),
           mousetrap: [
@@ -142,7 +205,13 @@ 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 || [])),
+      {
+        bind: 't',
+        handler: () => openTextQueryDialog(),
+      },
+    ]);
 
     const activeEditButton = computed(() => editButtons.value.find((b) => b.active) || editButtons.value[0]);
 
@@ -175,6 +244,13 @@ 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 editingTooltip = computed(() => {
       if (props.editingDetails === 'disabled' || !props.editingMode || typeof props.editingMode !== 'string') {
         return '';
@@ -208,6 +284,19 @@ export default defineComponent({
       toggleEditButtonsExpanded,
       activeEditButton,
       editButtonsMenuKey,
+      activeSegmentationRecipe,
+      // Text query
+      textQueryDialogOpen,
+      textQueryInput,
+      textQueryLoading,
+      textQueryThreshold,
+      textQueryInitializing,
+      textQueryServiceError,
+      textQueryAllFrames,
+      openTextQueryDialog,
+      closeTextQueryDialog,
+      onTextQueryServiceReady,
+      submitTextQuery,
     };
   },
 });
@@ -265,7 +354,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 +362,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 +384,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 +392,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 +425,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 +433,45 @@ 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>
+      <!-- Text Query button -->
+      <v-btn
+        outlined
+        class="mx-1"
+        small
+        @click="openTextQueryDialog"
+      >
+        <pre>T:</pre>
+        <v-icon>mdi-text-search</v-icon>
+      </v-btn>
+      <!-- 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()"
+          @click="activeSegmentationRecipe.resetPoints()"
+        >
+          <v-icon left>
+            mdi-close
+          </v-icon>
+          Reset
         </v-btn>
       </template>
-      <slot name="delete-controls" />
+      <!-- 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" />
@@ -357,6 +485,103 @@ export default defineComponent({
         @update:show-user-created-icon="$emit('update:show-user-created-icon', $event)"
       />
     </div>
+
+    <!-- Text Query Dialog -->
+    <v-dialog
+      v-model="textQueryDialogOpen"
+      max-width="500"
+    >
+      <v-card>
+        <v-card-title class="text-h6">
+          <v-icon left>
+            mdi-text-search
+          </v-icon>
+          Text Query
+        </v-card-title>
+        <v-card-text>
+          <!-- Loading state while initializing service -->
+          <div
+            v-if="textQueryInitializing"
+            class="text-center py-4"
+          >
+            <v-progress-circular
+              indeterminate
+              color="primary"
+              size="48"
+            />
+            <p class="text-body-2 mt-3">
+              Loading text query model...
+            </p>
+          </div>
+          <!-- Error state if service failed to initialize -->
+          <div
+            v-else-if="textQueryServiceError"
+            class="text-center py-4"
+          >
+            <v-icon
+              color="error"
+              size="48"
+            >
+              mdi-alert-circle
+            </v-icon>
+            <p class="text-body-2 mt-3 error--text">
+              {{ textQueryServiceError }}
+            </p>
+          </div>
+          <!-- Normal input form when service is ready -->
+          <template v-else>
+            <p class="text-body-2 mb-3">
+              Enter a description of objects to find in the current frame.
+            </p>
+            <v-text-field
+              v-model="textQueryInput"
+              label="Object description"
+              placeholder="e.g., fish swimming near coral"
+              outlined
+              dense
+              autofocus
+              :disabled="textQueryLoading"
+              @keyup.enter="submitTextQuery"
+            />
+            <v-slider
+              v-model="textQueryThreshold"
+              label="Confidence threshold"
+              min="0.1"
+              max="0.9"
+              step="0.05"
+              thumb-label
+              :disabled="textQueryLoading"
+            />
+            <v-checkbox
+              v-model="textQueryAllFrames"
+              label="Apply to all frames"
+              hint="Run across all frames instead of only the current (this will run as a job)"
+              persistent-hint
+              :disabled="textQueryLoading"
+            />
+          </template>
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer />
+          <v-btn
+            text
+            :disabled="textQueryLoading"
+            @click="closeTextQueryDialog"
+          >
+            {{ textQueryServiceError ? 'Close' : 'Cancel' }}
+          </v-btn>
+          <v-btn
+            v-if="!textQueryInitializing && !textQueryServiceError"
+            color="primary"
+            :loading="textQueryLoading"
+            :disabled="!textQueryInput.trim() || textQueryLoading"
+            @click="submitTextQuery"
+          >
+            Search
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
   </v-row>
 </template>
 
diff --git a/client/dive-common/components/Sidebar.vue b/client/dive-common/components/Sidebar.vue
index aeeb45802..aa28551ba 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>
@@ -466,6 +472,73 @@ export default defineComponent({
   overflow: visible !important;
 }
 
+.horizontal-types-panel {
+  overflow-y: auto;
+  overflow-x: hidden;
+
+  /* Always show scrollbar */
+  &::-webkit-scrollbar {
+    width: 8px;
+  }
+  &::-webkit-scrollbar-track {
+    background: #1e1e1e;
+  }
+  &::-webkit-scrollbar-thumb {
+    background: #555;
+    border-radius: 4px;
+  }
+  &::-webkit-scrollbar-thumb:hover {
+    background: #666;
+  }
+}
+
+.horizontal-sidebar {
+  position: relative;
+  border-right: 1px solid #444;
+  flex-shrink: 0;
+  background-color: #1e1e1e;
+}
+
+.swap-button-horizontal {
+  position: absolute;
+  top: 4px;
+  right: 8px;
+  z-index: 1;
+}
+
+.confidence-row {
+  background-color: #1e1e1e;
+  border-bottom: 1px solid #444;
+  flex-shrink: 0;
+}
+
+.horizontal-details-panel {
+  flex: 1;
+  overflow-y: auto;
+  overflow-x: hidden;
+  height: 100%;
+
+  /* Always show scrollbar */
+  &::-webkit-scrollbar {
+    width: 8px;
+  }
+  &::-webkit-scrollbar-track {
+    background: #1e1e1e;
+  }
+  &::-webkit-scrollbar-thumb {
+    background: #555;
+    border-radius: 4px;
+  }
+  &::-webkit-scrollbar-thumb:hover {
+    background: #666;
+  }
+}
+
+/* Override overflow-hidden on TrackDetailsPanel when in horizontal mode */
+.details-panel-scrollable {
+  overflow: visible !important;
+}
+
 .horizontal-types-panel {
   overflow-y: auto;
   overflow-x: hidden;
diff --git a/client/dive-common/components/TrackSettingsPanel.vue b/client/dive-common/components/TrackSettingsPanel.vue
index 90ed67ed9..1ae98bbd1 100644
--- a/client/dive-common/components/TrackSettingsPanel.vue
+++ b/client/dive-common/components/TrackSettingsPanel.vue
@@ -16,6 +16,10 @@ export default defineComponent({
       type: Array as PropType<Array<string>>,
       required: true,
     },
+    isStereoDataset: {
+      type: Boolean,
+      default: false,
+    },
   },
 
   setup(props) {
@@ -32,6 +36,8 @@ 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',
+      stereoInteractiveMode: 'When enabled, annotations created on one camera are automatically warped to the other camera using stereo disparity. Line annotations also get a stereo measurement (length, midpoint, range, RMS) that is recomputed whenever the line is drawn, edited, or linked across cameras.',
     });
     const modes = ref(['Track', 'Detection']);
     // Add unknown as the default type to the typeList
@@ -322,6 +328,86 @@ 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">
+        <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.interactiveModeEnabled"
+              class="my-0 ml-1 pt-0"
+              dense
+              label="Interactive Mode"
+              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.stereoInteractiveMode }}</span>
+            </v-tooltip>
+          </v-col>
+        </v-row>
+      </template>
     </v-card>
   </div>
 </template>
diff --git a/client/dive-common/components/Viewer.vue b/client/dive-common/components/Viewer.vue
index 4b60ed02d..8f6bacaf0 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,6 +54,7 @@ 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 type { StereoAnnotationCompleteParams } from 'dive-common/use/useModeManager';
 import clientSettingsSetup, { clientSettings } from 'dive-common/store/settings';
 import { useApi, FrameImage, DatasetType } from 'dive-common/apispec';
 import { orderedMultiCamCameraNames } from 'dive-common/multicamDisplay';
@@ -145,6 +147,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 +166,19 @@ export default defineComponent({
     const controlsRef = ref();
     const controlsHeight = ref(0);
     const controlsCollapsed = ref(false);
+    const editorMenuRef = ref();
+
+    /**
+     * Forward text query service ready status to EditorMenu
+     * Called by ViewerLoader when text query service initialization completes
+     */
+    function onTextQueryServiceReady(success: boolean, error?: string) {
+      if (editorMenuRef.value?.onTextQueryServiceReady) {
+        editorMenuRef.value.onTextQueryServiceReady(success, error);
+      }
+    }
+
+    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 +272,11 @@ export default defineComponent({
       setSVGFilters,
     } = useImageEnhancements();
 
+    const segmentationRecipe = new SegmentationPointClick();
     const recipes = [
       new PolygonBase(),
       new HeadTail(),
+      segmentationRecipe,
     ];
 
     const vuetify = inject('vuetify') as Vuetify;
@@ -325,6 +343,7 @@ export default defineComponent({
       selectedKey,
       selectedCamera,
       editingTrack,
+      segmentationPoints,
     } = useModeManager({
       recipes,
       trackFilterControls: trackFilters,
@@ -332,6 +351,9 @@ export default defineComponent({
       cameraStore,
       aggregateController,
       readonlyState,
+      onStereoAnnotationComplete: (params: StereoAnnotationCompleteParams) => {
+        emit('stereo-annotation-complete', params);
+      },
     });
 
     const {
@@ -491,6 +513,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 (clientSettings.stereoSettings.interactiveModeEnabled) {
+        emit('stereo-track-linked', baseTrack);
+      }
     }
     watch(linkingTrack, () => {
       if (linkingTrack.value !== null && selectedTrackId.value !== null) {
@@ -758,6 +788,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 +954,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 +1026,7 @@ export default defineComponent({
         annotationSet: toRef(props, 'currentSet'),
         annotationSets: sets,
         comparisonSets: toRef(props, 'comparisonSets'),
+        segmentationPoints,
         selectedCamera,
         selectedKey,
         selectedTrackId,
@@ -1164,6 +1200,9 @@ export default defineComponent({
       controlsRef,
       controlsHeight,
       controlsCollapsed,
+      sideBarCollapsed,
+      editorMenuRef,
+      onTextQueryServiceReady,
       sidebarMode,
       cycleSidebarMode,
       sidebarModeIcon,
@@ -1174,6 +1213,7 @@ export default defineComponent({
       clientSettings,
       datasetName,
       datasetType,
+      subType,
       editingTrack,
       editingMode,
       editingDetails,
@@ -1192,6 +1232,7 @@ export default defineComponent({
       showUserSettingsDialog,
       playbackComponent,
       recipes,
+      segmentationRecipe,
       selectedFeatureHandle,
       selectedTrackId,
       editingGroupId,
@@ -1344,6 +1385,7 @@ export default defineComponent({
         </v-tooltip>
 
         <EditorMenu
+          ref="editorMenuRef"
           v-bind="{
             editingMode,
             visibleModes,
@@ -1359,6 +1401,9 @@ export default defineComponent({
           :show-user-created-icon.sync="clientSettings.annotatorPreferences.showUserCreatedIcon"
           @set-annotation-state="handler.setAnnotationState"
           @exit-edit="handler.trackAbort"
+          @text-query-init="$emit('text-query-init')"
+          @text-query="$emit('text-query', $event)"
+          @text-query-all-frames="$emit('text-query-all-frames', $event)"
         >
           <template slot="delete-controls">
             <delete-controls
@@ -1366,6 +1411,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 +1531,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 +1582,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"
diff --git a/client/dive-common/recipes/headtail.ts b/client/dive-common/recipes/headtail.ts
index 3e26686d2..6b48b944a 100644
--- a/client/dive-common/recipes/headtail.ts
+++ b/client/dive-common/recipes/headtail.ts
@@ -35,6 +35,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 +47,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 +106,37 @@ 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;
+    return [{
+      type: 'Polygon',
+      coordinates: [[
+        [minX - padX, minY - padY],
+        [minX - padX, maxY + padY],
+        [maxX + padX, maxY + padY],
+        [maxX + padX, minY - padY],
+        [minX - padX, minY - padY],
+      ]],
+    }];
+  }
+
   private static makeGeom(ls: GeoJSON.LineString, startWithHead: boolean) {
     const firstFeature: GeoJSON.Feature<GeoJSON.Point> = {
       type: 'Feature',
@@ -187,14 +222,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 +246,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 +267,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..4b158ba6f
--- /dev/null
+++ b/client/dive-common/recipes/segmentationpointclick.ts
@@ -0,0 +1,767 @@
+/**
+ * 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';
+
+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 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 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;
+
+  /** Whether a prediction is currently in progress */
+  private isPredicting: 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';
+    this.toggleable = ref(true);
+    this.icon = ref('mdi-auto-fix');
+    this.loading = ref(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.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.isPredicting = false;
+    this.frameData.clear();
+    // Clear visual feedback for points
+    this.bus.$emit('points-updated', { points: [], labels: [], frameNum: this.currentFrame });
+  }
+
+  /**
+   * 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.isPredicting = true;
+
+    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
+      };
+
+      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.isPredicting = false;
+    }
+  }
+
+  /**
+   * 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.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.reset();
+    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.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..706298b52 100644
--- a/client/dive-common/store/settings.ts
+++ b/client/dive-common/store/settings.ts
@@ -67,6 +67,11 @@ interface AnnotationSettings {
     enabled: boolean;
     delaySeconds: number;
   };
+  stereoSettings: {
+    interactiveModeEnabled: boolean;
+    loading: boolean;
+    loadingMessage: string;
+  };
 }
 
 const defaultSettings: AnnotationSettings = {
@@ -142,6 +147,11 @@ const defaultSettings: AnnotationSettings = {
     enabled: false, // Disabled by default for backward compatibility
     delaySeconds: 60,
   },
+  stereoSettings: {
+    interactiveModeEnabled: false,
+    loading: false,
+    loadingMessage: '',
+  },
 };
 const MIN_AUTO_SAVE_DELAY_SECONDS = 10;
 
@@ -162,7 +172,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);
diff --git a/client/dive-common/use/useModeManager.ts b/client/dive-common/use/useModeManager.ts
index 47f632a9a..91f54e778 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, { TrackId, TrackSupportedFeature } from 'vue-media-annotator/track';
 import {
   RectBounds,
   updateBounds,
@@ -21,6 +21,10 @@ import { clientSettings } 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, {
+  SegmentationPredictionResult,
+  MultiFrameSegmentationResult,
+} from 'dive-common/recipes/segmentationpointclick';
 
 type SupportedFeature = GeoJSON.Feature<GeoJSON.Point | GeoJSON.Polygon | GeoJSON.LineString>;
 
@@ -55,6 +59,16 @@ interface SetAnnotationStateArgs {
   key?: string;
   recipeName?: string;
 }
+
+export type StereoAnnotationCompleteParams =
+  | { type: 'line'; camera: string; trackId: number; frameNum: number;
+      line: [[number, number], [number, number]]; }
+  | { 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[]; };
 /**
  * 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 +83,7 @@ export default function useModeManager({
   aggregateController,
   readonlyState,
   recipes,
+  onStereoAnnotationComplete,
 }: {
     cameraStore: CameraStore;
     trackFilterControls: TrackFilterControls;
@@ -76,6 +91,7 @@ export default function useModeManager({
     aggregateController: Ref<AggregateMediaController>;
     readonlyState: Readonly<Ref<boolean>>;
     recipes: Recipe[];
+    onStereoAnnotationComplete?: (params: StereoAnnotationCompleteParams) => void;
 }) {
   let creating = false;
   const { prompt } = usePrompt();
@@ -130,6 +146,15 @@ export default function useModeManager({
   const selectNextGroup = (delta = 1) => selectNext(_filteredGroups.value, editingGroupId.value, delta);
 
   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();
+        }
+      });
+    }
     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 +186,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';
         }
@@ -461,6 +491,48 @@ export default function useModeManager({
           track.setFeatureAttribute(frameNum, 'userModified', true);
         }
         newTrackSettingsAfterLogic(track);
+
+        // Stereo: emit box annotation complete
+        if (onStereoAnnotationComplete && clientSettings.stereoSettings.interactiveModeEnabled) {
+          onStereoAnnotationComplete({
+            type: 'box',
+            camera: selectedCamera.value,
+            trackId: selectedTrackId.value as number,
+            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 +611,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) {
@@ -587,6 +661,44 @@ export default function useModeManager({
           // Or none of the recieps reported that they were unfinished.
           if (eventType === 'editing' || update.done.every((v) => v !== false)) {
             newTrackSettingsAfterLogic(track);
+
+            // Stereo: emit line or polygon annotation complete
+            if (onStereoAnnotationComplete && clientSettings.stereoSettings.interactiveModeEnabled
+                && selectedTrackId.value !== 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: selectedTrackId.value as number,
+                  frameNum,
+                  line: [coords[0], coords[1]],
+                });
+              }
+              // 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: selectedTrackId.value as number,
+                        frameNum,
+                        polygon: polyCoords,
+                        key: geoKey,
+                      });
+                    }
+                  });
+                });
+              }
+            }
           }
         }
       } else {
@@ -625,11 +737,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();
       }
     }
@@ -717,6 +850,20 @@ 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 || '';
+          }
+        }
+      }
       handleSelectTrack(trackId, editing);
     } else if (cameraStore.getAnyTrack(trackId) !== undefined) {
       //track exists in other cameras we create in the current map using override
@@ -766,6 +913,28 @@ 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() {
+    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();
+    // 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 +1029,315 @@ 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[];
+  }>();
+
+  /**
+   * 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) {
+    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: '' },
+      }];
+
+      // 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);
+        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,
+          });
+        } else {
+          preSegmentationFeatures.set(targetFrame, { hadFeature: false });
+        }
+      }
+
+      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 && clientSettings.stereoSettings.interactiveModeEnabled
+          && 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,
+        });
+      }
+    }
+  }
+
+  /**
+   * 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);
+  }
+
+  /**
+   * 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: '' },
+        }];
+
+        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.
+      }
+    });
+
+    _nudgeEditingCanary();
+  }
+
+  /**
+   * 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 the segmentation-derived polygon
+      track.removeFeatureGeometry(data.frameNum, { key: '', type: 'Polygon' });
+      // Find original default polygon if there was one
+      const origDefaultPolygon = saved.geometryFeatures?.find(
+        (f) => f.geometry.type === 'Polygon' && (f.properties?.key ?? '') === '',
+      );
+      // Restore original bounds and geometry
+      track.setFeature({
+        frame: data.frameNum,
+        flick: 0,
+        bounds: saved.bounds,
+        keyframe: true,
+        interpolate: saved.interpolate ?? false,
+      }, origDefaultPolygon
+        ? [origDefaultPolygon as GeoJSON.Feature<TrackSupportedFeature>]
+        : []);
+    }
+
+    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();
+    }
+  }
+
   /* 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', handleSegmentationPredictionReady);
+      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', handleSegmentationPredictionReady);
+        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 +1357,10 @@ export default function useModeManager({
     selectedKey,
     selectedCamera,
     selectNextTrack,
+    segmentationPoints,
     handler: {
       commitMerge: handleCommitMerge,
+      confirmRecipe: handleConfirmRecipe,
       groupAdd: handleAddGroup,
       deleteSelectedTracks: handleDeleteSelectedTracks,
       groupEdit: handleGroupEdit,
@@ -897,6 +1372,7 @@ export default function useModeManager({
       trackSelect: handleSelectTrack,
       lassoSelect: handleLassoSelect,
       trackSelectNext: handleSelectNext,
+      setTrackFeature: handleSetTrackFeature,
       updateRectBounds: handleUpdateRectBounds,
       updateGeoJSON: handleUpdateGeoJSON,
       removeTrack: handleRemoveTrack,
@@ -909,6 +1385,9 @@ export default function useModeManager({
       startLinking: handleStartLinking,
       stopLinking: handleStopLinking,
       seekFrame,
+      addHole: handleAddHole,
+      addPolygon: handleAddPolygon,
+      cancelCreation: handleCancelCreation,
     },
   };
 }
diff --git a/client/platform/desktop/backend/ipcService.ts b/client/platform/desktop/backend/ipcService.ts
index d8c7c0e16..0f1e7c213 100644
--- a/client/platform/desktop/backend/ipcService.ts
+++ b/client/platform/desktop/backend/ipcService.ts
@@ -24,6 +24,22 @@ import * as common from './native/common';
 import beginMultiCamImport from './native/multiCamImport';
 import settings from './state/settings';
 import { listen } from './server';
+import {
+  getInteractiveServiceManager,
+  shutdownInteractiveService,
+} 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;
@@ -242,4 +258,205 @@ 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 () => {
+    await shutdownInteractiveService();
+    return { success: true };
+  });
+
+  ipcMain.handle('segmentation-is-ready', () => {
+    const segService = getInteractiveServiceManager();
+    return { ready: segService.isSegmentationReady() };
+  });
+
+  ipcMain.handle('segmentation-text-query', async (_, args: {
+    imagePath: string;
+    text: string;
+    boxThreshold?: number;
+    maxDetections?: number;
+    boxes?: [number, number, number, number][];
+    points?: [number, number][];
+    pointLabels?: number[];
+  }) => {
+    const segService = getInteractiveServiceManager();
+
+    // Auto-initialize if not ready
+    if (!segService.isSegmentationReady()) {
+      await segService.initialize(settings.get());
+    }
+
+    const response = await segService.textQuery(args);
+    return response;
+  });
+
+  ipcMain.handle('segmentation-refine', async (_, args: {
+    imagePath: string;
+    detections: {
+      box: [number, number, number, number];
+      polygon?: [number, number][];
+      score: number;
+      label: string;
+    }[];
+    points?: [number, number][];
+    pointLabels?: number[];
+    refineMasks?: boolean;
+  }) => {
+    const segService = getInteractiveServiceManager();
+
+    // Auto-initialize if not ready
+    if (!segService.isSegmentationReady()) {
+      await segService.initialize(settings.get());
+    }
+
+    const response = await segService.refineDetections(args);
+    return response;
+  });
+
+  /**
+   * 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);
+    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 () => {
+    await shutdownInteractiveService();
+    return { success: true };
+  });
+
+  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..881af7c28
--- /dev/null
+++ b/client/platform/desktop/backend/native/interactive.ts
@@ -0,0 +1,608 @@
+/**
+ * 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 {
+  SegmentationStereoSegmentRequest,
+  SegmentationStereoSegmentResponse,
+  SegmentationPredictRequest,
+  SegmentationPredictResponse,
+} from './segmentation';
+import {
+  StereoCalibration,
+  StereoSetFrameRequest,
+  StereoSetFrameResponse,
+  StereoTransferLineRequest,
+  StereoTransferLineResponse,
+  StereoMeasureLineRequest,
+  StereoMeasureLineResponse,
+  StereoAggregateLengthsRequest,
+  StereoAggregateLengthsResponse,
+  StereoTransferPointsRequest,
+  StereoTransferPointsResponse,
+  StereoStatusResponse,
+  StereoMeasurement,
+} from './stereo';
+
+/** Error message shown to users when the interactive service fails to load. */
+export const INTERACTIVE_LOAD_ERROR_MESSAGE = 'Unable to load the interactive service.';
+
+/** 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();
+
+    return new Promise((resolve, reject) => {
+      const isWin32 = OS.platform() === 'win32';
+      const viameSetup = npath.join(
+        settings.viamePath,
+        isWin32 ? 'setup_viame.bat' : 'setup_viame.sh',
+      );
+      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');
+
+      const pyCommand = [
+        'python -m viame.core.interactive_service',
+        `--segmentation-config "${segConfig}"`,
+        `--stereo-config "${stereoConfig}"`,
+      ].join(' ');
+
+      let command: string;
+      let shellOption: string | boolean;
+      if (isWin32) {
+        command = [`"${viameSetup}"`, '&&', pyCommand].join(' ');
+        shellOption = true;
+      } else {
+        command = [`. "${viameSetup}"`, '&&', pyCommand].join(' ');
+        shellOption = '/bin/bash';
+      }
+
+      console.log('[Interactive] Starting interactive service...');
+      console.log(`[Interactive] Command: ${command}`);
+
+      this.process = observeChild(spawn(command, {
+        shell: shellOption,
+        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));
+      }
+
+      if (this.process.stderr) {
+        this.process.stderr.on('data', (data: Buffer) => {
+          const message = data.toString().trim();
+          if (message) {
+            console.log(`[Interactive] ${message}`);
+            // 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')) {
+              resolve();
+            }
+          }
+        });
+      }
+
+      this.process.on('exit', (code, signal) => {
+        console.log(`[Interactive] Process exited with code ${code}, signal ${signal}`);
+        this.cleanup();
+        if (this.isStarting) {
+          reject(new Error(INTERACTIVE_LOAD_ERROR_MESSAGE));
+        }
+      });
+
+      this.process.on('error', (err) => {
+        console.error('[Interactive] Process error:', err);
+        this.cleanup();
+        if (this.isStarting) {
+          reject(new Error(INTERACTIVE_LOAD_ERROR_MESSAGE));
+        }
+      });
+
+      // Startup covers plugin loading only (~tens of seconds), not models.
+      setTimeout(() => {
+        if (this.isStarting) {
+          reject(new Error(INTERACTIVE_LOAD_ERROR_MESSAGE));
+        }
+      }, 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) {
+      await this.sendRequest({ command: 'init_segmentation' }, 'Segmentation init');
+      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');
+  }
+
+  async textQuery(request: {
+    imagePath: string;
+    text: string;
+    boxThreshold?: number;
+    maxDetections?: number;
+    boxes?: [number, number, number, number][];
+    points?: [number, number][];
+    pointLabels?: number[];
+    frameTime?: number;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  }): Promise<any> {
+    return this.sendRequest({
+      command: 'text_query',
+      image_path: request.imagePath,
+      text: request.text,
+      box_threshold: request.boxThreshold ?? 0.3,
+      max_detections: request.maxDetections ?? 10,
+      boxes: request.boxes,
+      points: request.points,
+      point_labels: request.pointLabels,
+      frame_time: request.frameTime,
+    }, 'Text query');
+  }
+
+  async refineDetections(request: {
+    imagePath: string;
+    detections: {
+      box: [number, number, number, number];
+      polygon?: [number, number][];
+      score: number;
+      label: string;
+    }[];
+    points?: [number, number][];
+    pointLabels?: number[];
+    refineMasks?: boolean;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  }): Promise<any> {
+    return this.sendRequest({
+      command: 'refine',
+      image_path: request.imagePath,
+      detections: request.detections,
+      points: request.points,
+      point_labels: request.pointLabels,
+      refine_masks: request.refineMasks ?? true,
+    }, 'Refine');
+  }
+
+  // ----------------------------------------------------------- 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: response.error || 'Failed to enable stereo service' };
+    } 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/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/serializers/viame.ts b/client/platform/desktop/backend/serializers/viame.ts
index 5f3201aab..5d33cadd3 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;
@@ -154,6 +157,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 +200,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 +278,13 @@ 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 = poly[2].split(' ');
+      const polyList = coordString.split(' ');
       polyList.forEach((coord, j) => {
         if (j % 2 === 0) {
           // Filter out ODDs
@@ -254,7 +293,32 @@ function _parseRow(row: string[]) {
           }
         }
       });
-      geoFeatureCollection.features.push(_createGeoJsonFeature('Polygon', coords));
+      // 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 = 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])]);
+          }
+        }
+      });
+      // 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,12 +352,19 @@ 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;
   }
+  // Surface the VIAME length column (col 8) as a 'length' detection attribute so
+  // stereo length measurements are visible/editable in the Attributes panel.
+  // The attribute is the canonical source on export (see serialize), so this
+  // round-trips through the length column rather than an (atr) column.
+  if (feature.fishLength !== undefined) {
+    feature.attributes = { ...(feature.attributes || {}), length: feature.fishLength };
+  }
   if (rowData.geoFeatureCollection.features.length > 0) {
     feature.geometry = rowData.geoFeatureCollection;
   }
@@ -638,18 +709,30 @@ async function serialize(
               column2 = moment.utc((feature.frame / meta.fps) * 1000).format('HH:mm:ss.SSSSSS');
             }
 
+            // The 'length' detection attribute is the editable source of truth
+            // for the VIAME length column (col 8); fall back to fishLength.
+            const lengthAttr = feature.attributes?.length;
+            const lengthValue = (lengthAttr !== undefined && lengthAttr !== null)
+              ? Number(lengthAttr)
+              : feature.fishLength;
+
             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]) => {
+              // 'length' is written to the dedicated length column above; don't
+              // duplicate it as an (atr) column.
+              if (key === 'length') {
+                return;
+              }
               row.push(`${AtrToken} ${key} ${val}`);
             });
             /* Track Attributes */
@@ -661,8 +744,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 +766,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 e30976aa2..50bd91934 100644
--- a/client/platform/desktop/frontend/api.ts
+++ b/client/platform/desktop/frontend/api.ts
@@ -4,6 +4,9 @@ import type {
   DatasetMetaMutable, DatasetType, MultiCamImportArgs,
   Pipe, Pipelines, PipelineParams, SaveAttributeArgs,
   SaveAttributeTrackFilterArgs, SaveDetectionsArgs, TrainingConfigs,
+  SegmentationPredictRequest, SegmentationPredictResponse, SegmentationStatusResponse,
+  SegmentationStereoSegmentRequest, SegmentationStereoSegmentResponse,
+  TextQueryRequest, TextQueryResponse, RefineDetectionsRequest, RefineDetectionsResponse,
 } from 'dive-common/apispec';
 
 import {
@@ -262,6 +265,238 @@ async function cancelJob(job: DesktopJob): Promise<void> {
   return window.diveDesktop.invoke('cancel-job', job);
 }
 
+/**
+ * Interactive Segmentation API
+ */
+
+async function segmentationInitialize(): Promise<{ success: 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');
+}
+
+/**
+ * Text Query API
+ * Allows open-vocabulary detection and segmentation using text prompts
+ */
+
+async function textQuery(request: TextQueryRequest): Promise<TextQueryResponse> {
+  return window.diveDesktop.invoke('segmentation-text-query', request);
+}
+
+async function refineDetections(request: RefineDetectionsRequest): Promise<RefineDetectionsResponse> {
+  return window.diveDesktop.invoke('segmentation-refine', request);
+}
+
+/**
+ * Run text query pipeline on all frames
+ */
+async function runTextQueryPipeline(
+  datasetId: string,
+  queryText: string,
+  threshold?: number,
+): Promise<void> {
+  const pipeline: Pipe = {
+    name: 'Text Query',
+    pipe: 'utility_text_query.pipe',
+    type: 'utility',
+  };
+
+  const pipelineParams: Record<string, string> = {
+    'track_refiner:refiner:text_query': queryText,
+  };
+
+  if (threshold !== undefined) {
+    pipelineParams['track_refiner:refiner:detection_threshold'] = threshold.toString();
+  }
+
+  const args: RunPipeline = {
+    type: JobType.RunPipeline,
+    pipeline,
+    datasetId,
+    pipelineParams,
+  };
+  gpuJobQueue.enqueue(args);
+}
+
+/**
+ * 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
  */
@@ -386,4 +621,29 @@ export {
   cancelJob,
   getLastCalibration,
   saveCalibration,
+  /* Segmentation APIs */
+  segmentationInitialize,
+  segmentationPredict,
+  segmentationStereoSegment,
+  segmentationSetImage,
+  segmentationClearImage,
+  segmentationShutdown,
+  segmentationIsReady,
+  /* Text Query APIs */
+  textQuery,
+  refineDetections,
+  runTextQueryPipeline,
+  /* 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..5884e12bc 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,34 @@ 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 } from 'dive-common/use/useModeManager';
+import {
+  segmentationPredict, segmentationStereoSegment, segmentationInitialize, segmentationIsReady,
+  loadMetadata, textQuery,
+  runTextQueryPipeline,
+  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 +139,1057 @@ 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;
+            }
+            await segmentationInitialize();
+          },
+        });
+      } catch {
+        // Segmentation initialization failed - recipe will not be available
+      }
+    }
+
+    // Store metadata for text query image path resolution
+    let cachedMeta: {
+      originalBasePath: string;
+      originalImageFiles: string[];
+      type: string;
+      originalVideoFile?: string;
+    } | null = null;
+
+    /**
+     * Get image path for a given frame number
+     */
+    function getImagePathForFrame(frameNum: number): string {
+      if (!cachedMeta) {
+        return '';
+      }
+      const { originalBasePath, originalImageFiles, type } = cachedMeta;
+      if (type === 'video') {
+        // Video datasets require frame extraction - not yet supported
+        return npath.join(originalBasePath, cachedMeta.originalVideoFile || '');
+      }
+      if (originalImageFiles && originalImageFiles[frameNum]) {
+        const imagePath = originalImageFiles[frameNum];
+        if (npath.isAbsolute(imagePath)) {
+          return imagePath;
+        }
+        return npath.join(originalBasePath, imagePath);
+      }
+      return '';
+    }
+
+    /**
+     * Handle text query submission from Viewer
+     */
+    async function handleTextQuerySubmit(params: {
+      text: string;
+      boxThreshold: number;
+      frameNum: number;
+    }) {
+      const { text, boxThreshold, frameNum } = params;
+
+      // Ensure metadata is loaded
+      if (!cachedMeta) {
+        try {
+          const meta = await loadMetadata(props.id);
+          cachedMeta = {
+            originalBasePath: meta.originalBasePath,
+            originalImageFiles: meta.originalImageFiles,
+            type: meta.type,
+            originalVideoFile: meta.originalVideoFile,
+          };
+        } catch {
+          await prompt({
+            title: 'Text Query Error',
+            text: ['Failed to load dataset metadata for text query.'],
+          });
+          return;
+        }
+      }
+
+      const imagePath = getImagePathForFrame(frameNum);
+      if (!imagePath) {
+        await prompt({
+          title: 'Text Query Error',
+          text: ['Could not determine image path for current frame.'],
+        });
+        return;
+      }
+
+      try {
+        const response = await textQuery({
+          imagePath,
+          text,
+          boxThreshold,
+          maxDetections: 10,
+        });
+
+        if (!response.success) {
+          throw new Error(response.error || 'Text query failed');
+        }
+
+        const detections = response.detections || [];
+
+        if (detections.length === 0) {
+          await prompt({
+            title: 'Text Query Results',
+            text: [`No objects matching "${text}" were found in the current frame.`],
+          });
+          return;
+        }
+
+        // Create tracks from detections
+        if (viewerRef.value) {
+          const { cameraStore } = viewerRef.value;
+          const selectedCamera = viewerRef.value.selectedCamera || 'singleCam';
+          const trackStore = cameraStore.camMap.value.get(selectedCamera)?.trackStore;
+
+          if (!trackStore) {
+            await prompt({
+              title: 'Text Query Error',
+              text: ['Could not create tracks - trackStore not found.'],
+            });
+            return;
+          }
+
+          detections.forEach((det) => {
+            // Get a new unique track ID
+            const newTrackId = cameraStore.getNewTrackId();
+
+            // Create a new track with the detection label as its type
+            const newTrack = trackStore.add(
+              frameNum,
+              det.label, // Use the detection label as the track type
+              undefined, // No parent track
+              newTrackId, // Use the new track ID
+            );
+
+            // Calculate bounds from box [x1, y1, x2, y2]
+            const [x1, y1, x2, y2] = det.box;
+            const bounds = [x1, y1, x2, y2] as [number, number, number, number];
+
+            // Create GeoJSON features array for polygon if available
+            const geoJsonFeatures: GeoJSON.Feature[] = [];
+            if (det.polygon && det.polygon.length >= 3) {
+              // Ensure polygon is closed (first point = last point for GeoJSON)
+              const closedPolygon = [...det.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 polygonFeature: GeoJSON.Feature = {
+                type: 'Feature',
+                geometry: {
+                  type: 'Polygon',
+                  coordinates: [closedPolygon],
+                },
+                properties: { key: '' },
+              };
+              geoJsonFeatures.push(polygonFeature);
+            }
+
+            // Set the feature with bounds and optional polygon
+            newTrack.setFeature({
+              frame: frameNum,
+              flick: 0,
+              keyframe: true,
+              bounds,
+              interpolate: false, // Single detection, no interpolation
+            }, geoJsonFeatures.length > 0 ? geoJsonFeatures : undefined);
+          });
+
+          await prompt({
+            title: 'Text Query Results',
+            text: [`Created ${detections.length} tracks for objects matching "${text}".`],
+          });
+        }
+      } catch (error) {
+        await prompt({
+          title: 'Text Query Error',
+          text: [`Failed to execute text query: ${error}`],
+        });
+      }
+    }
+
+    // Initialize segmentation when component is mounted
+    onMounted(() => {
+      initializeSegmentation();
+    });
+
+    /**
+     * Handle text query service initialization request
+     * Called when user opens the text query dialog
+     */
+    async function handleTextQueryInit() {
+      try {
+        // Check if the service is already ready
+        const status = await segmentationIsReady();
+        if (status.ready) {
+          viewerRef.value?.onTextQueryServiceReady(true);
+          return;
+        }
+
+        // Try to initialize the service
+        await segmentationInitialize();
+        viewerRef.value?.onTextQueryServiceReady(true);
+      } catch (error) {
+        // Provide text-query specific error message instead of generic segmentation error
+        const rawMessage = error instanceof Error ? error.message : '';
+        const errorMessage = rawMessage.toLowerCase().includes('segmentation')
+          ? 'Unable to load text query model. Please ensure the service is properly configured.'
+          : (rawMessage || 'Text query model is not available. Please ensure the service is properly configured.');
+        viewerRef.value?.onTextQueryServiceReady(false, errorMessage);
+      }
+    }
+
+    /**
+     * Handle text query on all frames - runs as a pipeline job
+     */
+    async function handleTextQueryAllFrames(params: {
+      text: string;
+      boxThreshold: number;
+    }) {
+      const { text, boxThreshold } = params;
+
+      try {
+        await runTextQueryPipeline(props.id, text, boxThreshold);
+        await prompt({
+          title: 'Text Query Pipeline Started',
+          text: [
+            `A pipeline job has been started to search for "${text}" in all frames.`,
+            'You will be notified when the job completes.',
+          ],
+        });
+      } catch (error) {
+        await prompt({
+          title: 'Text Query Pipeline Error',
+          text: [`Failed to start text query pipeline: ${error}`],
+        });
+      }
+    }
+
+    /**
+     * 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>);
+
+    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 npath.join(originalBasePath, originalVideoFile || '');
+            }
+            if (originalImageFiles && originalImageFiles[frameNum]) {
+              const imagePath = originalImageFiles[frameNum];
+              if (npath.isAbsolute(imagePath)) {
+                return imagePath;
+              }
+              return npath.join(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;
+
+    // Watch stereo toggle (immediate so a remembered setting enables on load)
+    watch(() => clientSettings.stereoSettings.interactiveModeEnabled, async (enabled) => {
+      if (enabled) {
+        stereoLoadingDialog.value = true;
+        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; just reset the toggle.
+            stereoEnabled.value = false;
+            clientSettings.stereoSettings.interactiveModeEnabled = 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 -- it can be retried on
+          // the next frame change -- so swallow it with a warning of its own.
+          try {
+            const viewer = viewerRef.value;
+            const frameNum = viewer?.aggregateController?.frame?.value;
+            if (frameNum !== undefined) {
+              const cameras = Object.keys(stereoImagePathGetters.value);
+              if (cameras.length >= 2) {
+                const leftPath = stereoImagePathGetters.value[cameras[0]]?.(frameNum) || '';
+                const rightPath = stereoImagePathGetters.value[cameras[1]]?.(frameNum) || '';
+                if (leftPath && rightPath) {
+                  lastStereoFrame = frameNum;
+                  const fps0 = stereoCameraFps.value[cameras[0]]
+                    || stereoDatasetFps || Object.values(stereoCameraFps.value)[0];
+                  const ft = fps0 ? frameNum / fps0 : undefined;
+                  stereoSetFrame({ leftImagePath: leftPath, rightImagePath: rightPath, frameTime: ft }).catch((err) => {
+                    console.warn('[Stereo] Failed to set initial frame:', err);
+                  });
+                }
+              }
+            }
+          } catch (err) {
+            console.warn('[Stereo] Failed to kick off initial disparity:', err);
+          }
+        } catch (err) {
+          stereoEnabled.value = false;
+          clientSettings.stereoSettings.interactiveModeEnabled = false;
+          stereoLoadingError.value = err instanceof Error ? err.message : String(err);
+          // Surface the failure: log it and keep the dialog open so it is visible.
+          console.error('[Stereo] Failed to enable interactive stereo:', err);
+          stereoLoadingDialog.value = true;
+        }
+      } else {
+        try {
+          await stereoDisable();
+        } catch {
+          // Ignore errors on disable
+        }
+        stereoEnabled.value = false;
+      }
+    }, { immediate: true });
+
+    // Watch frame changes to proactively compute disparity
+    watch(() => viewerRef.value?.aggregateController?.frame?.value, (frameNum) => {
+      if (frameNum === undefined || frameNum === lastStereoFrame || !stereoEnabled.value) return;
+      lastStereoFrame = frameNum;
+
+      const cameras = Object.keys(stereoImagePathGetters.value);
+      if (cameras.length < 2) return;
+
+      const leftPath = stereoImagePathGetters.value[cameras[0]]?.(frameNum) || '';
+      const rightPath = stereoImagePathGetters.value[cameras[1]]?.(frameNum) || '';
+
+      if (leftPath && rightPath) {
+        const fps0 = stereoCameraFps.value[cameras[0]]
+          || stereoDatasetFps || Object.values(stereoCameraFps.value)[0];
+        const ft = fps0 ? frameNum / fps0 : undefined;
+        stereoSetFrame({ leftImagePath: leftPath, rightImagePath: rightPath, frameTime: ft }).catch((err) => {
+          console.warn('[Stereo] Failed to set frame:', err);
+        });
+      }
+    });
+
+    // 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: '' } },
+        { 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);
+    }
+
+    // Detection attribute names for the standard VIAME stereo measurement,
+    // matching the keys produced by the interactive stereo service. 'length' is
+    // additionally stored in the VIAME CSV length column (feature.fishLength).
+    const STEREO_MEASUREMENT_ATTRS = [
+      'length', 'midpoint_x', 'midpoint_y', 'midpoint_z', 'midpoint_range', 'stereo_rms',
+    ];
+
+    /**
+     * 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}`,
+            },
+          });
+        }
+      });
+      // 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]];
+        if (feature && Number.isFinite(feature.fishLength)) {
+          lengths.push(feature.fishLength);
+        }
+      }
+      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 { length } = measurement;
+      if (length !== undefined && Number.isFinite(length)) {
+        const [feature] = track.getFeature(frameNum);
+        if (feature && feature.keyframe) {
+          // Merge fishLength without disturbing existing geometry/bounds
+          track.setFeature({ frame: frameNum, fishLength: round2(length) });
+        }
+      }
+      STEREO_MEASUREMENT_ATTRS.forEach((name) => {
+        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;
+      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;
+
+      // Skip transfer if the other camera already has a feature for this track+frame.
+      // This ensures the initial warp happens only once — after that, both cameras
+      // are independently editable without overwriting the user's corrections.
+      const existingTrack = cameraStore.getPossibleTrack(params.trackId, otherCamera);
+      if (existingTrack) {
+        const [feature] = existingTrack.getFeature(params.frameNum);
+        if (feature !== null) {
+          // Both cameras already have this annotation. Recompute the stereo
+          // measurement from the current (possibly edited) left+right lines
+          // instead of re-warping, preserving the user's manual corrections on
+          // both sides. Enabled whenever interactive stereo mode is on.
+          if (params.type === 'line') {
+            try {
+              await autoUpdateStereoLength(cameraStore, params.trackId, params.frameNum);
+            } catch (err) {
+              console.warn('[Stereo] Measurement update failed:', err);
+            }
+          }
+          return;
+        }
+      }
+
+      // Show loading indicator while waiting for stereo transfer
+      stereoLoadingMessage.value = 'Computing stereo correspondence...';
+      stereoLoadingError.value = '';
+      stereoLoadingDialog.value = true;
+
+      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 lineGeometry: GeoJSON.Feature[] = [{
+              type: 'Feature',
+              geometry: {
+                type: 'LineString',
+                coordinates: response.transferredLine,
+              },
+              properties: { key: '' },
+            }];
+
+            // Compute bounds from the transferred line
+            const xs = response.transferredLine.map((p: [number, number]) => p[0]);
+            const ys = response.transferredLine.map((p: [number, number]) => p[1]);
+            const bounds = [
+              Math.min(...xs), Math.min(...ys),
+              Math.max(...xs), Math.max(...ys),
+            ] 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
+            if (response.measurement) {
+              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') {
+          // 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) {
+              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,
+          ],
+        });
+      }
+    }
+
     return {
       datasets,
       viewerRef,
@@ -131,68 +1204,142 @@ export default defineComponent({
       runningPipelines,
       largeImageWarning,
       timeFilter,
+      handleTextQuerySubmit,
+      handleTextQueryInit,
+      handleTextQueryAllFrames,
+      /* Stereo */
+      stereoLoadingDialog,
+      stereoLoadingMessage,
+      stereoLoadingError,
+      stereoLengthSnackbar,
+      stereoLengthMessage,
+      closeStereoLoadingDialog,
+      handleStereoAnnotationComplete,
+      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()"
+      @text-query-submit="handleTextQuerySubmit"
+      @text-query-init="handleTextQueryInit"
+      @text-query-all-frames="handleTextQueryAllFrames"
+      @stereo-annotation-complete="handleStereoAnnotationComplete"
+      @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="400"
+    >
+      <v-card>
+        <v-card-title>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
+          >
+            {{ 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%;
+}
+</style>
diff --git a/client/src/components/LayerManager.vue b/client/src/components/LayerManager.vue
index 3679efcae..da3c57b53 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) {
@@ -404,6 +420,7 @@ export default defineComponent({
         typeStylingRef,
         toRef(props, 'colorBy'),
         selectedCamera,
+        selectedKeyRef,
       ],
       () => {
         updateLayers(
@@ -476,20 +493,108 @@ export default defineComponent({
       //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();
     });
     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,
@@ -525,8 +630,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/layers/AnnotationLayers/LineLayer.ts b/client/src/layers/AnnotationLayers/LineLayer.ts
index d4c2516fa..8f814003b 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.mouseOverOrderClosestBorder,
+    );
     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..e12de9f37 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,93 @@ 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();
+
+      // Emit right-click event with screen coordinates so LayerManager can
+      // check if an annotation is under the cursor and select it.
+      // On Windows/Electron, GeoJS mouseclick may not fire for right-button,
+      // so this provides a reliable fallback for annotation selection.
+      this.bus.$emit('right-click-point-mode', { x: e.clientX, y: e.clientY });
+    }
+  }
+
+  /**
+   * 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 +218,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 +232,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 +308,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 +375,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 +470,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) {
@@ -335,6 +534,82 @@ export default class EditAnnotationLayer extends BaseLayer<GeoJSON.Feature> {
     }
   }
 
+  /**
+   * 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 +634,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 +779,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..9b0dc18ee 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,9 @@ 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 PendingSaveCountSymbol = Symbol('pendingSaveCount');
 type pendingSaveCountType = Readonly<Ref<number>>;
 
@@ -126,6 +130,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 +149,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 +207,12 @@ 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;
 
 }
 const HandlerSymbol = Symbol('handler');
@@ -209,12 +228,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 +258,9 @@ 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); },
   };
 }
 
@@ -262,6 +286,7 @@ export interface State {
   annotationSet: AnnotationSetType;
   annotationSets: AnnotationSetsType;
   comparisonSets: ComparisonSetsType;
+  segmentationPoints: SegmentationPointsType;
   selectedCamera: SelectedCameraType;
   selectedKey: SelectedKeyType;
   selectedTrackId: SelectedTrackIdType;
@@ -328,6 +353,7 @@ function dummyState(): State {
     comparisonSets: ref([]),
     groupFilters: groupFilterControls,
     groupStyleManager: new StyleManager({ markChangesPending }),
+    segmentationPoints: ref({ points: [], labels: [], frameNum: -1 }),
     selectedCamera: ref('singleCam'),
     selectedKey: ref(''),
     selectedTrackId: ref(null),
@@ -377,6 +403,7 @@ 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(TrackFilterControlsSymbol, state.trackFilters);
   provide(TrackStyleManagerSymbol, state.trackStyleManager);
   provide(SelectedCameraSymbol, state.selectedCamera);
@@ -513,6 +540,10 @@ function useImageEnhancements() {
   return use<ImageEnhancementsType>(ImageEnhancementsSymbol);
 }
 
+function useSegmentationPoints() {
+  return use<SegmentationPointsType>(SegmentationPointsSymbol);
+}
+
 export {
   LassoModeSymbol,
   dummyHandler,
@@ -547,4 +578,5 @@ export {
   useReadOnlyMode,
   useImageEnhancements,
   useAttributesFilters,
+  useSegmentationPoints,
 };
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..413f4dc3d 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..5173f9240 100644
--- a/server/dive_utils/serializers/viame.py
+++ b/server/dive_utils/serializers/viame.py
@@ -80,11 +80,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 +110,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 +182,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])
@@ -594,25 +647,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
+            }
+        },
+        {}
     ]
 ]