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 6aa73861d..2ecdc8279 100644
--- a/client/dive-common/apispec.ts
+++ b/client/dive-common/apispec.ts
@@ -207,6 +207,122 @@ 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][];
+}
+
+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..f6022ac8a 100644
--- a/client/dive-common/components/DeleteControls.vue
+++ b/client/dive-common/components/DeleteControls.vue
@@ -24,6 +24,9 @@ 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;
     },
   },
diff --git a/client/dive-common/components/EditorMenu.vue b/client/dive-common/components/EditorMenu.vue
index 13b74443a..1f7642332 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;
@@ -63,7 +65,7 @@ export default defineComponent({
       default: () => ({ before: 20, after: 10 }),
     },
   },
-  emits: ['set-annotation-state', 'update:tail-settings'],
+  emits: ['set-annotation-state', 'update:tail-settings', 'text-query-init', 'text-query', 'text-query-all-frames'],
   setup(props, { emit }) {
     const toolTimeTimeout = ref<number | null>(null);
     const STORAGE_KEY = 'editorMenu.editButtonsExpanded';
@@ -81,6 +83,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.',
@@ -117,6 +172,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: [
@@ -130,7 +186,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]);
 
@@ -157,6 +219,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 '';
@@ -190,6 +259,19 @@ export default defineComponent({
       toggleEditButtonsExpanded,
       activeEditButton,
       editButtonsMenuKey,
+      activeSegmentationRecipe,
+      // Text query
+      textQueryDialogOpen,
+      textQueryInput,
+      textQueryLoading,
+      textQueryThreshold,
+      textQueryInitializing,
+      textQueryServiceError,
+      textQueryAllFrames,
+      openTextQueryDialog,
+      closeTextQueryDialog,
+      onTextQueryServiceReady,
+      submitTextQuery,
     };
   },
 });
@@ -240,7 +322,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"
@@ -248,7 +330,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
@@ -268,7 +352,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"
@@ -276,7 +360,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>
@@ -307,7 +393,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"
@@ -315,10 +401,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"
+      />
       <v-spacer />
       <slot name="multicam-controls" />
       <v-spacer />
@@ -329,6 +450,103 @@ export default defineComponent({
         @update:tail-settings="$emit('update:tail-settings', $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 d7b277dc9..7642c1fdd 100644
--- a/client/dive-common/components/Sidebar.vue
+++ b/client/dive-common/components/Sidebar.vue
@@ -18,6 +18,7 @@ import {
 } from 'vue-media-annotator/provides';
 
 import { clientSettings } from 'dive-common/store/settings';
+import ConfidenceFilter from 'dive-common/components/ConfidenceFilter.vue';
 import TrackDetailsPanel from 'dive-common/components/TrackDetailsPanel.vue';
 import TrackSettingsPanel from 'dive-common/components/TrackSettingsPanel.vue';
 import TypeSettingsPanel from 'dive-common/components/TypeSettingsPanel.vue';
@@ -27,6 +28,7 @@ import { usePrompt } from 'dive-common/vue-utilities/prompt-service';
 export default defineComponent({
 
   components: {
+    ConfidenceFilter,
     StackedVirtualSidebarContainer,
     TrackDetailsPanel,
     TrackSettingsPanel,
@@ -43,6 +45,14 @@ export default defineComponent({
       type: Boolean,
       default: true,
     },
+    horizontal: {
+      type: Boolean,
+      default: false,
+    },
+    isStereoDataset: {
+      type: Boolean,
+      default: false,
+    },
   },
 
   setup() {
@@ -63,7 +73,9 @@ export default defineComponent({
     const styleManager = useTrackStyleManager();
 
     const data = reactive({
-      currentTab: 'tracks' as 'tracks' | 'attributes',
+      currentTab: 'tracks' as 'tracks' | 'attributes' | 'types',
+      // For horizontal mode, cycle through 3 tabs
+      horizontalTab: 'tracks' as 'tracks' | 'attributes' | 'types',
     });
 
     function swapTabs() {
@@ -74,6 +86,28 @@ export default defineComponent({
       }
     }
 
+    function cycleHorizontalTabs() {
+      if (data.horizontalTab === 'tracks') {
+        data.horizontalTab = 'attributes';
+      } else if (data.horizontalTab === 'attributes') {
+        data.horizontalTab = 'types';
+      } else {
+        data.horizontalTab = 'tracks';
+      }
+    }
+
+    const horizontalTabIcon = computed(() => {
+      if (data.horizontalTab === 'tracks') return 'mdi-format-list-bulleted';
+      if (data.horizontalTab === 'attributes') return 'mdi-card-text';
+      return 'mdi-filter-variant';
+    });
+
+    const horizontalTabTooltip = computed(() => {
+      if (data.horizontalTab === 'tracks') return 'Detection List (click to cycle)';
+      if (data.horizontalTab === 'attributes') return 'Detection Details (click to cycle)';
+      return 'Type Filters (click to cycle)';
+    });
+
     function doToggleMerge() {
       if (toggleMerge().length) {
         data.currentTab = 'attributes';
@@ -121,17 +155,23 @@ export default defineComponent({
       readOnlyMode,
       styleManager,
       disableAnnotationFilters: trackFilterControls.disableAnnotationFilters,
+      confidenceFilters: trackFilterControls.confidenceFilters,
       visible,
+      horizontalTabIcon,
+      horizontalTabTooltip,
       /* methods */
       doToggleMerge,
       swapTabs,
+      cycleHorizontalTabs,
     };
   },
 });
 </script>
 
 <template>
+  <!-- Vertical layout (default) -->
   <StackedVirtualSidebarContainer
+    v-if="!horizontal"
     :width="width"
     :enable-slot="enableSlot"
   >
@@ -183,6 +223,7 @@ export default defineComponent({
             <template slot="settings">
               <TrackSettingsPanel
                 :all-types="allTypesRef"
+                :is-stereo-dataset="isStereoDataset"
               />
             </template>
           </TrackList>
@@ -203,6 +244,109 @@ export default defineComponent({
       </v-slide-x-transition>
     </template>
   </StackedVirtualSidebarContainer>
+
+  <!-- Horizontal layout (bottom sidebar) -->
+  <div
+    v-else
+    class="horizontal-sidebar d-flex flex-column"
+    :style="{ width: `${width}px`, height: '100%' }"
+  >
+    <v-tooltip bottom>
+      <template #activator="{ on }">
+        <v-btn
+          small
+          icon
+          class="swap-button-horizontal"
+          v-on="on"
+          @click="cycleHorizontalTabs"
+        >
+          <v-icon>{{ horizontalTabIcon }}</v-icon>
+        </v-btn>
+      </template>
+      <span>{{ horizontalTabTooltip }}</span>
+    </v-tooltip>
+    <!-- Detection List Tab -->
+    <div
+      v-if="data.horizontalTab === 'tracks'"
+      class="d-flex flex-column fill-height"
+      style="overflow: hidden; width: 100%;"
+    >
+      <!-- Mini confidence slider at top -->
+      <div class="confidence-row px-2 py-1 pr-10">
+        <ConfidenceFilter
+          :confidence.sync="confidenceFilters.default"
+          :disabled="disableAnnotationFilters"
+          text="Confidence"
+          @end="$emit('save-threshold')"
+        />
+      </div>
+      <!-- Track list takes full width -->
+      <div
+        class="d-flex flex-column flex-grow-1"
+        style="overflow: hidden;"
+      >
+        <TrackList
+          class="fill-height"
+          compact
+          :new-track-mode="trackSettings.newTrackSettings.mode"
+          :new-track-type="trackSettings.newTrackSettings.type"
+          :lock-types="typeSettings.lockTypes"
+          :hotkeys-disabled="visible() || readOnlyMode"
+          :height="180"
+          :disabled="disableAnnotationFilters"
+          @track-seek="$emit('track-seek', $event)"
+        >
+          <template slot="settings">
+            <TrackSettingsPanel
+              :all-types="allTypesRef"
+              :is-stereo-dataset="isStereoDataset"
+            />
+          </template>
+        </TrackList>
+      </div>
+    </div>
+    <!-- Detection Details Tab -->
+    <div
+      v-else-if="data.horizontalTab === 'attributes'"
+      class="horizontal-details-panel"
+    >
+      <track-details-panel
+        :lock-types="typeSettings.lockTypes"
+        :hotkeys-disabled="visible() || readOnlyMode"
+        :width="width"
+        :disabled="disableAnnotationFilters"
+        class="details-panel-scrollable"
+        @track-seek="$emit('track-seek', $event)"
+        @toggle-merge="doToggleMerge"
+        @back="cycleHorizontalTabs"
+        @commit-merge="commitMerge"
+        @create-group="groupAdd"
+        @delete-selected-tracks="handleDeleteSelectedTracks"
+      />
+    </div>
+    <!-- Type Filters Tab -->
+    <div
+      v-else-if="data.horizontalTab === 'types'"
+      class="d-flex flex-column fill-height horizontal-types-panel"
+    >
+      <FilterList
+        :show-empty-types="typeSettings.showEmptyTypes"
+        :height="220"
+        :width="width - 10"
+        :style-manager="styleManager"
+        :filter-controls="trackFilterControls"
+        :disabled="disableAnnotationFilters"
+        class="fill-height"
+      >
+        <template #settings>
+          <TypeSettingsPanel
+            :all-types="allTypesRef"
+            @import-types="$emit('import-types', $event)"
+          />
+        </template>
+      </FilterList>
+    </div>
+  </div>
 </template>
 
 <style scoped>
@@ -222,4 +366,71 @@ export default defineComponent({
   right: 8px;
   z-index: 1;
 }
+
+.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;
+
+  /* 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;
+  }
+}
 </style>
diff --git a/client/dive-common/components/TrackSettingsPanel.vue b/client/dive-common/components/TrackSettingsPanel.vue
index 71b1ec1b2..ba8672680 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) {
@@ -33,6 +37,7 @@ export default defineComponent({
       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',
     });
     const modes = ref(['Track', 'Detection']);
     // Add unknown as the default type to the typeList
@@ -362,6 +367,47 @@ export default defineComponent({
           </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 b3da641be..f2a2896b5 100644
--- a/client/dive-common/components/Viewer.vue
+++ b/client/dive-common/components/Viewer.vue
@@ -1,6 +1,6 @@
 <script lang="ts">
 import {
-  defineComponent, ref, toRef, computed, Ref,
+  defineComponent, defineAsyncComponent, ref, toRef, computed, Ref,
   reactive, watch, inject, nextTick, onBeforeUnmount, PropType,
 } from 'vue';
 import type { Vue } from 'vue/types/vue';
@@ -28,6 +28,8 @@ import {
   LargeImageAnnotator,
   LayerManager,
   useMediaController,
+  TrackList,
+  FilterList,
 } from 'vue-media-annotator/components';
 import type { AnnotationId } from 'vue-media-annotator/BaseAnnotation';
 import { getResponseError } from 'vue-media-annotator/utils';
@@ -35,13 +37,23 @@ 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';
+import TypeSettingsPanel from 'dive-common/components/TypeSettingsPanel.vue';
+import TrackSettingsPanel from 'dive-common/components/TrackSettingsPanel.vue';
+import TrackListColumnSettings from 'dive-common/components/TrackListColumnSettings.vue';
+import TrackDetailsPanel from 'dive-common/components/TrackDetailsPanel.vue';
+import ConfidenceSubsection from 'dive-common/components/ConfidenceSubsection.vue';
+import AttributeSubsection from 'dive-common/components/Attributes/AttributesSubsection.vue';
+import AttributeEditor from 'dive-common/components/Attributes/AttributeEditor.vue';
 import DeleteControls from 'dive-common/components/DeleteControls.vue';
+import type { Attribute } from 'vue-media-annotator/use/AttributeTypes';
 import ControlsContainer from 'dive-common/components/ControlsContainer.vue';
 import Sidebar from 'dive-common/components/Sidebar.vue';
 import { useModeManager, useSave } 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 { usePrompt } from 'dive-common/vue-utilities/prompt-service';
@@ -52,6 +64,12 @@ import MultiCamToolsVue from './MultiCamTools.vue';
 import MultiCamToolbar from './MultiCamToolbar.vue';
 import PrimaryAttributeTrackFilter from './PrimaryAttributeTrackFilter.vue';
 
+// NativeVideoAnnotator uses electron APIs - only load in desktop app
+// The webpackIgnore comment prevents bundling in web builds
+const NativeVideoAnnotator = defineAsyncComponent(
+  () => import(/* webpackIgnore: true */ 'vue-media-annotator/components/annotators/NativeVideoAnnotator.vue'),
+);
+
 export interface ImageDataItem {
   url: string;
   filename: string;
@@ -64,6 +82,7 @@ export default defineComponent({
     Sidebar,
     LayerManager,
     VideoAnnotator,
+    NativeVideoAnnotator,
     ImageAnnotator,
     LargeImageAnnotator,
     ConfidenceFilter,
@@ -71,6 +90,15 @@ export default defineComponent({
     EditorMenu,
     MultiCamToolbar,
     PrimaryAttributeTrackFilter,
+    TrackList,
+    FilterList,
+    TypeSettingsPanel,
+    TrackSettingsPanel,
+    TrackListColumnSettings,
+    TrackDetailsPanel,
+    ConfidenceSubsection,
+    AttributeSubsection,
+    AttributeEditor,
   },
 
   // TODO: remove this in vue 3
@@ -97,7 +125,7 @@ export default defineComponent({
     },
   },
   setup(props, { emit }) {
-    const { prompt } = usePrompt();
+    const { prompt, visible } = usePrompt();
     const loadError = ref('');
     const baseMulticamDatasetId = ref(null as string | null);
     const datasetId = toRef(props, 'id');
@@ -119,8 +147,10 @@ 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 nativeVideoPath: Ref<Record<string, string>> = ref({});
     const {
       loadDetections, loadMetadata, saveMetadata, getTiles, getTileURL,
     } = useApi();
@@ -137,7 +167,48 @@ 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 sidebarMode = ref(clientSettings.layoutSettings.sidebarPosition as 'left' | 'bottom' | 'collapsed');
+    // Right panel view in bottom mode: 'filters' or 'details'
+    const bottomRightPanelView = ref<'filters' | 'details'>('filters');
+    const toggleBottomRightPanel = () => {
+      bottomRightPanelView.value = bottomRightPanelView.value === 'filters' ? 'details' : 'filters';
+    };
+    const cycleSidebarMode = () => {
+      if (sidebarMode.value === 'left') {
+        sidebarMode.value = 'bottom';
+        clientSettings.layoutSettings.sidebarPosition = 'bottom';
+      } else if (sidebarMode.value === 'bottom') {
+        sidebarMode.value = 'collapsed';
+        // Keep setting as 'bottom' when collapsed (collapsed is a temporary state)
+      } else {
+        sidebarMode.value = 'left';
+        clientSettings.layoutSettings.sidebarPosition = 'left';
+      }
+    };
+    const sidebarModeIcon = computed(() => {
+      if (sidebarMode.value === 'left') return 'mdi-page-layout-sidebar-left';
+      if (sidebarMode.value === 'bottom') return 'mdi-page-layout-footer';
+      return 'mdi-checkbox-blank-outline';
+    });
+    const sidebarModeTooltip = computed(() => {
+      if (sidebarMode.value === 'left') return 'Sidebar: Left (click to cycle)';
+      if (sidebarMode.value === 'bottom') return 'Sidebar: Bottom (click to cycle)';
+      return 'Sidebar: Hidden (click to cycle)';
+    });
 
     const progressValue = computed(() => {
       if (progress.total > 0 && (progress.progress !== progress.total)) {
@@ -173,9 +244,11 @@ export default defineComponent({
       setSVGFilters,
     } = useImageEnhancements();
 
+    const segmentationRecipe = new SegmentationPointClick();
     const recipes = [
       new PolygonBase(),
       new HeadTail(),
+      segmentationRecipe,
     ];
 
     const vuetify = inject('vuetify') as Vuetify;
@@ -239,6 +312,7 @@ export default defineComponent({
       selectedKey,
       selectedCamera,
       editingTrack,
+      segmentationPoints,
     } = useModeManager({
       recipes,
       trackFilterControls: trackFilters,
@@ -246,6 +320,9 @@ export default defineComponent({
       cameraStore,
       aggregateController,
       readonlyState,
+      onStereoAnnotationComplete: (params: StereoAnnotationCompleteParams) => {
+        emit('stereo-annotation-complete', params);
+      },
     });
 
     const {
@@ -412,10 +489,11 @@ export default defineComponent({
         handler.stopLinking();
       }
     });
-    async function save(setVal?: string) {
-      // If editing the track, disable editing mode before save
+    async function save(setVal?: string, exitEditingMode = false) {
+      // Only exit editing mode if explicitly requested (e.g., manual save)
+      // Auto-save should NOT disrupt the user's editing session
       saveInProgress.value = true;
-      if (editingTrack.value) {
+      if (exitEditingMode && editingTrack.value) {
         handler.trackSelect(selectedTrackId.value, false);
       }
       const saveSet = setVal === 'default' ? undefined : setVal;
@@ -467,6 +545,32 @@ export default defineComponent({
 
     watch(imageEnhancements, debouncedSaveImageEnhancements, { deep: true });
 
+    // Auto-save annotations when enabled
+    const debouncedAutoSave = debounce(
+      async () => {
+        if (readonlyState.value) return;
+        if (pendingSaveCount.value === 0) return;
+        if (saveInProgress.value) return;
+        await save(props.currentSet);
+      },
+      2000,
+      { trailing: true, leading: false },
+    );
+
+    watch(
+      pendingSaveCount,
+      (newCount, oldCount) => {
+        if (
+          clientSettings.autoSaveSettings.enabled
+          && newCount > oldCount
+          && newCount > 0
+          && !readonlyState.value
+        ) {
+          debouncedAutoSave();
+        }
+      },
+    );
+
     // Navigation Guards used by parent component
     async function warnBrowserExit(event: BeforeUnloadEvent) {
       if (pendingSaveCount.value === 0) return;
@@ -581,6 +685,7 @@ export default defineComponent({
           setImageEnhancements(meta.imageEnhancements);
         }
         datasetName.value = meta.name;
+        subType.value = meta.subType || null;
         initTime({
           frameRate: meta.fps,
           originalFps: meta.originalFps || null,
@@ -599,6 +704,9 @@ export default defineComponent({
           if (subCameraMeta.videoUrl) {
             videoUrl.value[camera] = subCameraMeta.videoUrl;
           }
+          if (subCameraMeta.nativeVideoPath) {
+            nativeVideoPath.value[camera] = subCameraMeta.nativeVideoPath;
+          }
           cameraStore.addCamera(camera);
           addSaveCamera(camera);
           // eslint-disable-next-line no-await-in-loop
@@ -746,6 +854,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) {
@@ -761,11 +873,12 @@ export default defineComponent({
       if (previous) observer.unobserve(previous.$el);
       if (controlsRef.value) observer.observe(controlsRef.value.$el);
     });
-    watch([controlsCollapsed, sideBarCollapsed], async () => {
+    watch([controlsCollapsed, sidebarMode], async () => {
       await nextTick();
       handleResize();
     });
     onBeforeUnmount(() => {
+      debouncedAutoSave.cancel();
       if (controlsRef.value) observer.unobserve(controlsRef.value.$el);
     });
 
@@ -813,6 +926,7 @@ export default defineComponent({
         annotationSet: toRef(props, 'currentSet'),
         annotationSets: sets,
         comparisonSets: toRef(props, 'comparisonSets'),
+        segmentationPoints,
         selectedCamera,
         selectedKey,
         selectedTrackId,
@@ -833,6 +947,116 @@ export default defineComponent({
       trackFilters.disableAnnotationFilters.value
     ));
 
+    // For bottom panel details view
+    const selectedTrackForDetails = computed(() => {
+      if (selectedTrackId.value !== null) {
+        return cameraStore.getAnyTrack(selectedTrackId.value);
+      }
+      return null;
+    });
+
+    // Determine if confidence should be shown first (multiple types) or last (0-1 types)
+    const showConfidenceFirst = computed(() => {
+      if (selectedTrackForDetails.value) {
+        return selectedTrackForDetails.value.confidencePairs.length > 1;
+      }
+      return false;
+    });
+
+    // Check if track has any track-level attributes set
+    const hasTrackAttributes = computed(() => {
+      if (selectedTrackForDetails.value && selectedTrackForDetails.value.attributes) {
+        const attrs = selectedTrackForDetails.value.attributes;
+        // Check if any non-userAttributes keys exist with values
+        return Object.keys(attrs).some(
+          (key) => key !== 'userAttributes' && attrs[key] !== undefined,
+        );
+      }
+      return false;
+    });
+
+    // Determine attribute order: true = track first, false = detection first
+    // If track has attributes, show track first; otherwise show detection first
+    const showTrackAttributesFirst = computed(() => hasTrackAttributes.value);
+
+    // Attribute editing state for bottom panel
+    const editIndividual: Ref<Attribute | null> = ref(null);
+    const editingAttribute: Ref<Attribute | null> = ref(null);
+    const editingError: Ref<string | null> = ref(null);
+
+    function setEditIndividual(attribute: Attribute | null) {
+      editIndividual.value = attribute;
+    }
+
+    function resetEditIndividual(event: MouseEvent) {
+      if (editIndividual.value) {
+        const path = event.composedPath() as HTMLElement[];
+        const inputs = ['INPUT', 'SELECT'];
+        if (
+          path.find(
+            (item: HTMLElement) => (item.classList && item.classList.contains('v-input'))
+              || inputs.includes(item.nodeName),
+          )
+        ) {
+          return;
+        }
+        editIndividual.value = null;
+      }
+    }
+
+    function addAttribute(type: 'Track' | 'Detection') {
+      const belongs = type.toLowerCase() as 'track' | 'detection';
+      editingAttribute.value = {
+        belongs,
+        datatype: 'text',
+        name: `New${type}Attribute`,
+        key: '',
+      };
+    }
+
+    function editAttribute(attribute: Attribute) {
+      editingAttribute.value = attribute;
+    }
+
+    async function closeAttributeEditor() {
+      editingAttribute.value = null;
+      editingError.value = null;
+    }
+
+    async function saveAttributeHandler({ data, oldAttribute, close }: {
+      oldAttribute?: Attribute;
+      data: Attribute;
+      close: boolean;
+    }) {
+      editingError.value = null;
+      if (!oldAttribute && attributes.value.some((attribute) => (
+        attribute.name === data.name
+        && attribute.belongs === data.belongs))) {
+        editingError.value = 'Attribute with that name exists';
+        return;
+      }
+      try {
+        await setAttribute({ data, oldAttribute });
+      } catch (err) {
+        editingError.value = (err as Error).message;
+      }
+      if (!editingError.value && close) {
+        closeAttributeEditor();
+      }
+    }
+
+    async function deleteAttributeHandler(data: Attribute) {
+      editingError.value = null;
+      try {
+        await deleteAttribute({ data });
+      } catch (err) {
+        editingError.value = (err as Error).message;
+      }
+      if (!editingError.value) {
+        closeAttributeEditor();
+      }
+    }
+
     return {
       /* props */
       aggregateController,
@@ -842,10 +1066,19 @@ export default defineComponent({
       controlsHeight,
       controlsCollapsed,
       sideBarCollapsed,
+      editorMenuRef,
+      onTextQueryServiceReady,
+      sidebarMode,
+      cycleSidebarMode,
+      sidebarModeIcon,
+      sidebarModeTooltip,
+      bottomRightPanelView,
+      toggleBottomRightPanel,
       colorBy,
       clientSettings,
       datasetName,
       datasetType,
+      subType,
       editingTrack,
       editingMode,
       editingDetails,
@@ -861,12 +1094,14 @@ export default defineComponent({
       saveInProgress,
       playbackComponent,
       recipes,
+      segmentationRecipe,
       selectedFeatureHandle,
       selectedTrackId,
       editingGroupId,
       selectedKey,
       trackFilters,
       videoUrl,
+      nativeVideoPath,
       visibleModes,
       frameRate: time.frameRate,
       originalFps: time.originalFps,
@@ -875,6 +1110,23 @@ export default defineComponent({
       imageEnhancementOutputs,
       isDefaultImage,
       disableAnnotationFilters,
+      trackStyleManager,
+      visible,
+      selectedTrackForDetails,
+      showConfidenceFirst,
+      showTrackAttributesFirst,
+      attributes,
+      /* Attribute editing for bottom panel */
+      editIndividual,
+      editingAttribute,
+      editingError,
+      setEditIndividual,
+      resetEditIndividual,
+      addAttribute,
+      editAttribute,
+      closeAttributeEditor,
+      saveAttributeHandler,
+      deleteAttributeHandler,
       /* large image methods */
       getTiles,
       getTileURL,
@@ -982,15 +1234,16 @@ export default defineComponent({
           <template #activator="{ on }">
             <v-icon
               v-on="on"
-              @click="sideBarCollapsed = !sideBarCollapsed"
+              @click="cycleSidebarMode"
             >
-              {{ sideBarCollapsed ? 'mdi-chevron-right-box' : 'mdi-chevron-left-box' }}
+              {{ sidebarModeIcon }}
             </v-icon>
           </template>
-          <span>Collapse Side Panel</span>
+          <span>{{ sidebarModeTooltip }}</span>
         </v-tooltip>
 
         <EditorMenu
+          ref="editorMenuRef"
           v-bind="{
             editingMode,
             visibleModes,
@@ -1003,6 +1256,9 @@ export default defineComponent({
           :tail-settings.sync="clientSettings.annotatorPreferences.trackTails"
           @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
@@ -1010,11 +1266,19 @@ export default defineComponent({
               class="mr-2"
               @delete-point="handler.removePoint"
               @delete-annotation="handler.removeAnnotation"
+              @add-hole="handler.addHole"
+              @add-polygon="handler.addPolygon"
             />
           </template>
+          <template
+            v-if="multiCamList.length > 1 && clientSettings.multiCamSettings.showToolbar && selectedCamera === multiCamList[0]"
+            slot="multicam-controls-left"
+          >
+            <multi-cam-toolbar />
+          </template>
           <template
             v-if="multiCamList.length > 1 && clientSettings.multiCamSettings.showToolbar && selectedCamera !== multiCamList[0]"
-            slot="multicam-controls"
+            slot="multicam-controls-right"
           >
             <multi-cam-toolbar />
           </template>
@@ -1041,6 +1305,7 @@ export default defineComponent({
         />
         <v-tooltip
           bottom
+          :z-index="20"
         >
           <template #activator="{ on }">
             <v-icon
@@ -1081,7 +1346,7 @@ export default defineComponent({
                 @click="save(currentSet)"
               >
                 <v-icon>
-                  mdi-content-save
+                  {{ clientSettings.autoSaveSettings.enabled ? 'mdi-content-save-cog' : 'mdi-content-save' }}
                 </v-icon>
               </v-btn>
             </div>
@@ -1091,13 +1356,15 @@ export default defineComponent({
       </v-tooltip>
     </v-app-bar>
 
+    <!-- Left sidebar layout -->
     <v-row
+      v-if="sidebarMode === 'left'"
       no-gutters
       class="fill-height"
       style="min-width: 700px;"
     >
       <sidebar
-        v-if="!sideBarCollapsed"
+        :is-stereo-dataset="subType === 'stereo'"
         @import-types="trackFilters.importTypes($event)"
         @track-seek="aggregateController.seek($event)"
       >
@@ -1148,14 +1415,17 @@ export default defineComponent({
             >
               <component
                 :is="datasetType === 'image-sequence' ? 'image-annotator'
-                  : datasetType === 'video' ? 'video-annotator' : 'large-image-annotator'"
-                v-if="(imageData[camera].length || videoUrl[camera]) && progress.loaded"
+                  : datasetType === 'video'
+                    ? (nativeVideoPath[camera] ? 'native-video-annotator' : 'video-annotator')
+                    : 'large-image-annotator'"
+                v-if="(imageData[camera].length || videoUrl[camera] || nativeVideoPath[camera]) && progress.loaded"
                 ref="subPlaybackComponent"
                 class="fill-height"
                 :class="{ 'selected-camera': selectedCamera === camera && camera !== 'singleCam' }"
                 v-bind="{
                   imageData: imageData[camera],
                   videoUrl: videoUrl[camera],
+                  nativeVideoPath: nativeVideoPath[camera],
                   updateTime,
                   frameRate,
                   originalFps,
@@ -1208,8 +1478,309 @@ export default defineComponent({
           </v-progress-circular>
         </div>
       </v-col>
-      <slot name="right-sidebar" />
+      <slot
+        name="right-sidebar"
+        :sidebar-mode="sidebarMode"
+      />
     </v-row>
+
+    <!-- Bottom sidebar layout or collapsed -->
+    <div
+      v-else
+      class="d-flex flex-column fill-height"
+      style="min-width: 700px;"
+    >
+      <div
+        v-if="progress.loaded"
+        v-mousetrap="[
+          { bind: 'n', handler: () => !readonlyState && handler.trackAdd() },
+          { bind: 'r', handler: () => aggregateController.resetZoom() },
+          { bind: 'esc', handler: () => handler.trackAbort() },
+          { bind: 'e', handler: () => multiCamList.length === 1 && selectedTrackId !== null && handler.trackEdit(selectedTrackId) },
+        ]"
+        class="d-flex flex-column grow"
+        style="min-height: 0;"
+      >
+        <!-- Video/annotator area -->
+        <div class="d-flex grow" style="min-height: 0;">
+          <div
+            v-for="camera in multiCamList"
+            :key="camera"
+            class="d-flex flex-column grow"
+            @mousedown.left="changeCamera(camera, $event)"
+            @mouseup.right="changeCamera(camera, $event)"
+          >
+            <component
+              :is="datasetType === 'image-sequence' ? 'image-annotator'
+                : datasetType === 'video' ? 'video-annotator' : 'large-image-annotator'"
+              v-if="(imageData[camera].length || videoUrl[camera]) && progress.loaded"
+              ref="subPlaybackComponent"
+              class="fill-height"
+              :class="{ 'selected-camera': selectedCamera === camera && camera !== 'singleCam' }"
+              v-bind="{
+                imageData: imageData[camera],
+                videoUrl: videoUrl[camera],
+                updateTime,
+                frameRate,
+                originalFps,
+                camera,
+                imageEnhancementOutputs,
+                isDefaultImage,
+                getTiles,
+                getTileURL,
+              }"
+              @large-image-warning="$emit('large-image-warning', true)"
+            >
+              <LayerManager :camera="camera" />
+            </component>
+          </div>
+        </div>
+        <!-- Bottom panel: timeline, track list, and type filters side by side -->
+        <div
+          class="d-flex flex-shrink-0"
+          :style="{
+            'border-top': '1px solid #444',
+            height: sidebarMode === 'bottom' ? '260px' : 'auto',
+          }"
+        >
+          <!-- Left: Timeline and controls -->
+          <div
+            class="d-flex flex-column bottom-panel-section"
+            :style="{
+              width: sidebarMode === 'bottom' ? '28%' : '100%',
+              'min-width': '0',
+              overflow: 'hidden',
+            }"
+          >
+            <ControlsContainer
+              ref="controlsRef"
+              bottom-layout
+              :collapsed.sync="controlsCollapsed"
+              v-bind="{
+                lineChartData, eventChartData, groupChartData, datasetType, isDefaultImage,
+              }"
+            />
+          </div>
+
+          <!-- Middle: Track list -->
+          <div
+            v-if="sidebarMode === 'bottom'"
+            class="d-flex flex-column bottom-panel-section"
+            :style="{
+              width: '44%',
+              'min-width': '0',
+              overflow: 'hidden',
+            }"
+          >
+            <TrackList
+              class="fill-height"
+              compact
+              :new-track-mode="clientSettings.trackSettings.newTrackSettings.mode"
+              :new-track-type="clientSettings.trackSettings.newTrackSettings.type"
+              :lock-types="clientSettings.typeSettings.lockTypes"
+              :hotkeys-disabled="visible() || readonlyState"
+              :height="220"
+              :fps="frameRate"
+              :disabled="disableAnnotationFilters"
+              @track-seek="aggregateController.seek($event)"
+            >
+              <template slot="settings">
+                <TrackSettingsPanel
+                  :all-types="trackFilters.allTypes"
+                  :is-stereo-dataset="subType === 'stereo'"
+                />
+              </template>
+              <template slot="column-settings">
+                <TrackListColumnSettings
+                  :attributes="attributes"
+                  :fps="frameRate"
+                />
+              </template>
+            </TrackList>
+          </div>
+
+          <!-- Right: Type filters/confidence OR Track details -->
+          <div
+            v-if="sidebarMode === 'bottom'"
+            class="d-flex flex-column bottom-panel-section"
+            :style="{
+              width: '28%',
+              'min-width': '0',
+              overflow: 'hidden',
+            }"
+          >
+            <!-- Header with toggle button -->
+            <div class="right-panel-header d-flex align-center px-2 py-1">
+              <span class="right-panel-title">
+                {{ bottomRightPanelView === 'filters' ? 'Type Filters' : 'Track Details' }}
+              </span>
+              <v-spacer />
+              <v-tooltip bottom>
+                <template #activator="{ on }">
+                  <v-btn
+                    icon
+                    x-small
+                    v-on="on"
+                    @click="toggleBottomRightPanel"
+                  >
+                    <v-icon small>
+                      {{ bottomRightPanelView === 'filters' ? 'mdi-card-text' : 'mdi-filter-variant' }}
+                    </v-icon>
+                  </v-btn>
+                </template>
+                <span>{{ bottomRightPanelView === 'filters' ? 'Switch to Track Details' : 'Switch to Type Filters' }}</span>
+              </v-tooltip>
+            </div>
+
+            <!-- Filters view -->
+            <template v-if="bottomRightPanelView === 'filters'">
+              <!-- Type filters -->
+              <div class="flex-grow-1 bottom-filter-list" style="overflow-y: auto; overflow-x: hidden;">
+                <FilterList
+                  :show-empty-types="clientSettings.typeSettings.showEmptyTypes"
+                  :height="130"
+                  :width="300"
+                  :style-manager="trackStyleManager"
+                  :filter-controls="trackFilters"
+                  :disabled="disableAnnotationFilters"
+                  class="fill-height"
+                >
+                  <template #settings>
+                    <TypeSettingsPanel
+                      :all-types="trackFilters.allTypes"
+                      @import-types="trackFilters.importTypes($event)"
+                    />
+                  </template>
+                </FilterList>
+              </div>
+              <!-- Confidence slider at bottom -->
+              <div class="confidence-row-bottom px-2 py-1">
+                <ConfidenceFilter
+                  :confidence.sync="confidenceFilters.default"
+                  :disabled="disableAnnotationFilters"
+                  text="Confidence"
+                  @end="saveThreshold"
+                />
+              </div>
+            </template>
+
+            <!-- Track details view (simplified for bottom mode) -->
+            <template v-else>
+              <div
+                class="flex-grow-1 bottom-details-panel"
+                style="overflow-y: auto; overflow-x: hidden;"
+                @click="resetEditIndividual"
+              >
+                <div v-if="selectedTrackForDetails" class="pa-2">
+                  <!-- Type classifications (first if multiple types) -->
+                  <ConfidenceSubsection
+                    v-if="showConfidenceFirst"
+                    :confidence-pairs="selectedTrackForDetails.confidencePairs"
+                    :disabled="false"
+                    @set-type="selectedTrackForDetails.setType($event)"
+                  />
+                  <!-- Attributes: Track first if has values, otherwise Detection first -->
+                  <template v-if="showTrackAttributesFirst">
+                    <AttributeSubsection
+                      mode="Track"
+                      :attributes="attributes"
+                      :edit-individual="editIndividual"
+                      @edit-attribute="editAttribute($event)"
+                      @set-edit-individual="setEditIndividual($event)"
+                      @add-attribute="addAttribute"
+                    />
+                    <AttributeSubsection
+                      mode="Detection"
+                      :attributes="attributes"
+                      :edit-individual="editIndividual"
+                      @edit-attribute="editAttribute($event)"
+                      @set-edit-individual="setEditIndividual($event)"
+                      @add-attribute="addAttribute"
+                    />
+                  </template>
+                  <template v-else>
+                    <AttributeSubsection
+                      mode="Detection"
+                      :attributes="attributes"
+                      :edit-individual="editIndividual"
+                      @edit-attribute="editAttribute($event)"
+                      @set-edit-individual="setEditIndividual($event)"
+                      @add-attribute="addAttribute"
+                    />
+                    <AttributeSubsection
+                      mode="Track"
+                      :attributes="attributes"
+                      :edit-individual="editIndividual"
+                      @edit-attribute="editAttribute($event)"
+                      @set-edit-individual="setEditIndividual($event)"
+                      @add-attribute="addAttribute"
+                    />
+                  </template>
+                  <!-- Type classifications (last if 0-1 types) -->
+                  <ConfidenceSubsection
+                    v-if="!showConfidenceFirst"
+                    :confidence-pairs="selectedTrackForDetails.confidencePairs"
+                    :disabled="false"
+                    @set-type="selectedTrackForDetails.setType($event)"
+                  />
+                </div>
+                <div v-else class="pa-3 text-caption grey--text">
+                  No track selected. Select a track to view its type classifications and attributes.
+                </div>
+              </div>
+            </template>
+          </div>
+        </div>
+      </div>
+      <div
+        v-else
+        class="d-flex justify-center align-center fill-height"
+      >
+        <v-alert
+          v-if="loadError"
+          type="error"
+          prominent
+          max-width="60%"
+        >
+          <p class="ma-2">
+            {{ loadError }}
+          </p>
+        </v-alert>
+        <v-progress-circular
+          v-else
+          :indeterminate="progressValue === 0"
+          :value="progressValue"
+          size="100"
+          width="15"
+          color="light-blue"
+          class="main-progress-linear"
+          rotate="-90"
+        >
+          <span v-if="progressValue === 0">Loading</span>
+          <span v-else>{{ progressValue }}%</span>
+        </v-progress-circular>
+      </div>
+      <slot
+        name="right-sidebar"
+        :sidebar-mode="sidebarMode"
+      />
+    </div>
+    <!-- Attribute editor dialog for bottom panel -->
+    <v-dialog
+      :value="editingAttribute != null"
+      max-width="550"
+      @click:outside="closeAttributeEditor"
+      @keydown.esc.stop="closeAttributeEditor"
+    >
+      <AttributeEditor
+        v-if="editingAttribute != null"
+        :selected-attribute="editingAttribute"
+        :error="editingError"
+        @close="closeAttributeEditor"
+        @save="saveAttributeHandler"
+        @delete="deleteAttributeHandler"
+      />
+    </v-dialog>
   </v-main>
 </template>
 
@@ -1236,4 +1807,48 @@ html {
   text-align: center !important;
 }
 
+.bottom-panel-section {
+  background-color: #1e1e1e;
+  border: 1px solid #555;
+  border-radius: 4px;
+  margin: 4px;
+}
+
+.confidence-row-bottom {
+  background-color: #262626;
+  border-top: 1px solid #444;
+  flex-shrink: 0;
+  padding-top: 4px !important;
+  padding-bottom: 4px !important;
+
+  /* Match title styling with Tracks header */
+  .text-body-2 {
+    font-size: 14px !important;
+    font-weight: 600;
+    color: white !important;
+  }
+}
+
+.bottom-filter-list {
+  /* Match title styling with Tracks header */
+  #type-header b {
+    font-size: 14px;
+    font-weight: 600;
+    color: white;
+  }
+}
+
+.right-panel-header {
+  background-color: #262626;
+  border-bottom: 1px solid #444;
+  flex-shrink: 0;
+  min-height: 28px;
+}
+
+.right-panel-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: white;
+}
+
 </style>
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/segmentationpointclick.ts b/client/dive-common/recipes/segmentationpointclick.ts
new file mode 100644
index 000000000..805794f86
--- /dev/null
+++ b/client/dive-common/recipes/segmentationpointclick.ts
@@ -0,0 +1,759 @@
+/**
+ * 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
+        this.bus.$emit('prediction-ready', {
+          polygon: response.polygon,
+          bounds: response.bounds,
+          score: response.score,
+          frameNum,
+          rleMask: response.rleMask,
+          maskShape: response.maskShape,
+        } 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 adab2e24f..058cf5724 100644
--- a/client/dive-common/store/settings.ts
+++ b/client/dive-common/store/settings.ts
@@ -48,6 +48,14 @@ interface AnnotationSettings {
   multiCamSettings: {
     showToolbar: boolean;
   };
+  layoutSettings: {
+    sidebarPosition: 'left' | 'bottom';
+  };
+  stereoSettings: {
+    interactiveModeEnabled: boolean;
+    loading: boolean;
+    loadingMessage: string;
+  };
 }
 
 const defaultSettings: AnnotationSettings = {
@@ -105,6 +113,14 @@ const defaultSettings: AnnotationSettings = {
   multiCamSettings: {
     showToolbar: true,
   },
+  layoutSettings: {
+    sidebarPosition: 'left',
+  },
+  stereoSettings: {
+    interactiveModeEnabled: false,
+    loading: false,
+    loadingMessage: '',
+  },
 };
 
 // Utility to safely load from localStorage
@@ -124,7 +140,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 aaeb0db6a..635771807 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 } from 'vue-media-annotator/utils';
 import { EditAnnotationTypes, VisibleAnnotationTypes } from 'vue-media-annotator/layers';
 import { AggregateMediaController } from 'vue-media-annotator/components/annotators/mediaControllerType';
@@ -16,6 +16,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>;
 
@@ -46,6 +50,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
@@ -60,6 +74,7 @@ export default function useModeManager({
   aggregateController,
   readonlyState,
   recipes,
+  onStereoAnnotationComplete,
 }: {
     cameraStore: CameraStore;
     trackFilterControls: TrackFilterControls;
@@ -67,6 +82,7 @@ export default function useModeManager({
     aggregateController: Ref<AggregateMediaController>;
     readonlyState: Readonly<Ref<boolean>>;
     recipes: Recipe[];
+    onStereoAnnotationComplete?: (params: StereoAnnotationCompleteParams) => void;
 }) {
   let creating = false;
   const { prompt } = usePrompt();
@@ -121,6 +137,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.' });
@@ -410,6 +435,48 @@ export default function useModeManager({
           interpolate: _shouldInterpolate(interpolate),
         });
         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);
+        }
       }
     }
   }
@@ -527,6 +594,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 {
@@ -657,6 +762,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
@@ -703,6 +822,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
    */
@@ -797,11 +938,267 @@ 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();
+    }
+  }
+
+  /**
+   * 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);
+
+        // Stereo: emit segmentation annotation complete for each frame
+        if (onStereoAnnotationComplete && clientSettings.stereoSettings.interactiveModeEnabled
+            && selectedTrackId.value !== null && frameResult.controlPoints) {
+          onStereoAnnotationComplete({
+            type: 'segmentation',
+            camera: selectedCamera.value,
+            trackId: selectedTrackId.value as number,
+            frameNum,
+            points: frameResult.controlPoints.points,
+            labels: frameResult.controlPoints.labels,
+          });
+        }
+      }
+    });
+
+    _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();
+  }
+
   /* 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 {
@@ -821,8 +1218,10 @@ export default function useModeManager({
     selectedKey,
     selectedCamera,
     selectNextTrack,
+    segmentationPoints,
     handler: {
       commitMerge: handleCommitMerge,
+      confirmRecipe: handleConfirmRecipe,
       groupAdd: handleAddGroup,
       deleteSelectedTracks: handleDeleteSelectedTracks,
       groupEdit: handleGroupEdit,
@@ -833,6 +1232,7 @@ export default function useModeManager({
       trackSeek: handleTrackClick,
       trackSelect: handleSelectTrack,
       trackSelectNext: handleSelectNext,
+      setTrackFeature: handleSetTrackFeature,
       updateRectBounds: handleUpdateRectBounds,
       updateGeoJSON: handleUpdateGeoJSON,
       removeTrack: handleRemoveTrack,
diff --git a/client/platform/desktop/backend/ipcService.ts b/client/platform/desktop/backend/ipcService.ts
index 3f11cf3b7..566e82298 100644
--- a/client/platform/desktop/backend/ipcService.ts
+++ b/client/platform/desktop/backend/ipcService.ts
@@ -20,6 +20,19 @@ import * as common from './native/common';
 import beginMultiCamImport from './native/multiCamImport';
 import settings from './state/settings';
 import { listen } from './server';
+import {
+  getSegmentationServiceManager,
+  shutdownSegmentationService,
+  SegmentationPredictRequest,
+} from './native/segmentation';
+import {
+  getStereoServiceManager,
+  shutdownStereoService,
+  StereoCalibration,
+  StereoSetFrameRequest,
+  StereoTransferLineRequest,
+  StereoTransferPointsRequest,
+} from './native/stereo';
 
 // defaults to linux if win32 doesn't exist
 const currentPlatform = OS.platform() === 'win32' ? win32 : linux;
@@ -171,4 +184,164 @@ export default function register() {
     };
     return currentPlatform.train(settings.get(), args, updater);
   });
+
+  /**
+   * Interactive Segmentation Service
+   */
+
+  ipcMain.handle('segmentation-initialize', async () => {
+    const segService = getSegmentationServiceManager();
+    await segService.initialize(settings.get());
+    return { success: true };
+  });
+
+  ipcMain.handle('segmentation-predict', async (_, args: SegmentationPredictRequest) => {
+    const segService = getSegmentationServiceManager();
+
+    // Auto-initialize if not ready
+    if (!segService.isReady()) {
+      await segService.initialize(settings.get());
+    }
+
+    const response = await segService.predict(args);
+    return response;
+  });
+
+  ipcMain.handle('segmentation-set-image', async (_, imagePath: string) => {
+    const segService = getSegmentationServiceManager();
+
+    if (!segService.isReady()) {
+      await segService.initialize(settings.get());
+    }
+
+    await segService.setImage(imagePath);
+    return { success: true };
+  });
+
+  ipcMain.handle('segmentation-clear-image', async () => {
+    const segService = getSegmentationServiceManager();
+
+    if (segService.isReady()) {
+      await segService.clearImage();
+    }
+    return { success: true };
+  });
+
+  ipcMain.handle('segmentation-shutdown', async () => {
+    await shutdownSegmentationService();
+    return { success: true };
+  });
+
+  ipcMain.handle('segmentation-is-ready', () => {
+    const segService = getSegmentationServiceManager();
+    return { ready: segService.isReady() };
+  });
+
+  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 = getSegmentationServiceManager();
+
+    // Auto-initialize if not ready
+    if (!segService.isReady()) {
+      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 = getSegmentationServiceManager();
+
+    // Auto-initialize if not ready
+    if (!segService.isReady()) {
+      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 }) => {
+    const stereoService = getStereoServiceManager();
+
+    // Forward async disparity events to the renderer
+    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 = getStereoServiceManager();
+    const result = await stereoService.disable();
+    return result;
+  });
+
+  ipcMain.handle('stereo-set-frame', async (_, args: StereoSetFrameRequest) => {
+    const stereoService = getStereoServiceManager();
+    const result = await stereoService.setFrame(args);
+    return result;
+  });
+
+  ipcMain.handle('stereo-get-status', async () => {
+    const stereoService = getStereoServiceManager();
+    const result = await stereoService.getStatus();
+    return result;
+  });
+
+  ipcMain.handle('stereo-transfer-line', async (_, args: StereoTransferLineRequest) => {
+    const stereoService = getStereoServiceManager();
+    const result = await stereoService.transferLine(args);
+    return result;
+  });
+
+  ipcMain.handle('stereo-transfer-points', async (_, args: StereoTransferPointsRequest) => {
+    const stereoService = getStereoServiceManager();
+    const result = await stereoService.transferPoints(args);
+    return result;
+  });
+
+  ipcMain.handle('stereo-set-calibration', async (_, args: { calibration: StereoCalibration }) => {
+    const stereoService = getStereoServiceManager();
+    await stereoService.setCalibration(args.calibration);
+    return { success: true };
+  });
+
+  ipcMain.handle('stereo-shutdown', async () => {
+    await shutdownStereoService();
+    return { success: true };
+  });
+
+  ipcMain.handle('stereo-is-enabled', () => {
+    const stereoService = getStereoServiceManager();
+    return { enabled: stereoService.isEnabled() };
+  });
 }
diff --git a/client/platform/desktop/backend/native/segmentation.ts b/client/platform/desktop/backend/native/segmentation.ts
new file mode 100644
index 000000000..eaaf6ac96
--- /dev/null
+++ b/client/platform/desktop/backend/native/segmentation.ts
@@ -0,0 +1,535 @@
+/**
+ * Interactive Segmentation Service Manager for Desktop
+ *
+ * Manages a persistent Python subprocess that keeps the segmentation model loaded in memory
+ * for fast interactive segmentation from point clicks.
+ */
+
+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';
+
+/** Error message shown to users when segmentation fails to load */
+export const SEGMENTATION_LOAD_ERROR_MESSAGE = 'Unable to load segmentation module';
+
+/** Request to the segmentation service */
+export interface SegmentationInternalPredictRequest {
+  /** Unique request ID for correlation */
+  id: string;
+  /** 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;
+}
+
+/** 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 */
+  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];
+}
+
+interface PendingRequest {
+  resolve: (response: SegmentationInternalPredictResponse) => void;
+  reject: (error: Error) => void;
+  timeout: NodeJS.Timeout;
+}
+
+/**
+ * Segmentation Service Manager
+ *
+ * Manages a persistent Python subprocess for interactive segmentation inference.
+ * The service is started on-demand and kept alive for the session.
+ */
+export class SegmentationServiceManager extends EventEmitter {
+  private process: ChildProcess | null = null;
+
+  private readline: readline.Interface | null = null;
+
+  private pendingRequests: Map<string, PendingRequest> = new Map();
+
+  private isInitializing = false;
+
+  private initPromise: Promise<void> | null = null;
+
+  private settings: Settings | null = null;
+
+  private requestCounter = 0;
+
+  private readonly requestTimeoutMs = 30000; // 30 second timeout
+
+  /**
+   * Initialize the segmentation service with the given settings.
+   * This spawns the Python process and loads the segmentation model.
+   * The model stays loaded for the entire session to avoid reload delays.
+   */
+  async initialize(settings: Settings): Promise<void> {
+    // If already initialized and running, return immediately
+    // This keeps the model loaded between activations
+    if (this.isReady()) {
+      console.log('[Segmentation] Service already running, skipping initialization');
+      return undefined;
+    }
+
+    // If currently initializing, wait for it
+    if (this.isInitializing && this.initPromise) {
+      await this.initPromise;
+      return undefined;
+    }
+
+    this.isInitializing = true;
+    this.settings = settings;
+
+    this.initPromise = this._doInitialize(settings);
+    try {
+      await this.initPromise;
+    } finally {
+      this.isInitializing = false;
+    }
+    return undefined;
+  }
+
+  private async _doInitialize(settings: Settings): Promise<void> {
+    // Clean up any existing process
+    await this.shutdown();
+
+    return new Promise((resolve, reject) => {
+      const viameSetup = npath.join(settings.viamePath, 'setup_viame.sh');
+
+      const configPath = npath.join(
+        settings.viamePath, 'configs', 'pipelines', 'interactive_segmenter_default.conf',
+      );
+
+      // Build the command to run the interactive segmentation service
+      const command = [
+        `. "${viameSetup}"`,
+        '&&',
+        'python -m viame.core.interactive_segmentation',
+        `--config "${configPath}"`,
+      ].join(' ');
+
+      console.log('[Segmentation] Starting interactive segmentation service...');
+      console.log(`[Segmentation] Command: ${command}`);
+
+      this.process = observeChild(spawn(command, {
+        shell: '/bin/bash',
+        stdio: ['pipe', 'pipe', 'pipe'],
+      }));
+
+      // Set up readline for stdout (JSON responses)
+      if (this.process.stdout) {
+        this.readline = readline.createInterface({
+          input: this.process.stdout,
+          crlfDelay: Infinity,
+        });
+
+        this.readline.on('line', (line) => {
+          this.handleResponse(line);
+        });
+      }
+
+      // Log stderr (diagnostic messages)
+      if (this.process.stderr) {
+        this.process.stderr.on('data', (data: Buffer) => {
+          const message = data.toString().trim();
+          if (message) {
+            console.log(`[Segmentation] ${message}`);
+            // Detect successful initialization
+            if (message.includes('model initialized successfully')) {
+              resolve();
+            }
+          }
+        });
+      }
+
+      // Handle process exit
+      this.process.on('exit', (code, signal) => {
+        console.log(`[Segmentation] Process exited with code ${code}, signal ${signal}`);
+        this.cleanup();
+        if (this.isInitializing) {
+          reject(new Error(SEGMENTATION_LOAD_ERROR_MESSAGE));
+        }
+      });
+
+      this.process.on('error', (err) => {
+        console.error('[Segmentation] Process error:', err);
+        this.cleanup();
+        if (this.isInitializing) {
+          reject(new Error(SEGMENTATION_LOAD_ERROR_MESSAGE));
+        }
+      });
+
+      // Timeout for initialization (60 seconds for model loading)
+      setTimeout(() => {
+        if (this.isInitializing) {
+          reject(new Error(SEGMENTATION_LOAD_ERROR_MESSAGE));
+        }
+      }, 60000);
+    });
+  }
+
+  /**
+   * Check if the service is ready for requests
+   */
+  isReady(): boolean {
+    return this.process !== null && this.process.exitCode === null;
+  }
+
+  /**
+   * Generate a unique request ID
+   */
+  private generateRequestId(): string {
+    this.requestCounter += 1;
+    return `req_${Date.now()}_${this.requestCounter}`;
+  }
+
+  /**
+   * Handle a response line from the segmentation service
+   */
+  private handleResponse(line: string): void {
+    try {
+      const response = JSON.parse(line) as SegmentationInternalPredictResponse;
+      const pending = this.pendingRequests.get(response.id);
+
+      if (pending) {
+        clearTimeout(pending.timeout);
+        this.pendingRequests.delete(response.id);
+        pending.resolve(response);
+      } else {
+        console.warn(`[Segmentation] Received response for unknown request: ${response.id}`);
+      }
+    } catch (err) {
+      console.error('[Segmentation] Failed to parse response:', line, err);
+    }
+  }
+
+  /**
+   * Send a predict request to the segmentation service
+   */
+  async predict(request: Omit<SegmentationInternalPredictRequest, 'id'>): Promise<SegmentationInternalPredictResponse> {
+    if (!this.isReady()) {
+      throw new Error('Segmentation service is not ready. Call initialize() first.');
+    }
+
+    if (!this.process?.stdin) {
+      throw new Error('Segmentation service stdin is not available');
+    }
+
+    if (!request.imagePath) {
+      throw new Error('imagePath is required for segmentation prediction');
+    }
+
+    const id = this.generateRequestId();
+    const fullRequest = {
+      id,
+      command: 'predict',
+      image_path: request.imagePath,
+      points: request.points,
+      point_labels: request.pointLabels,
+      mask_input: request.maskInput,
+      multimask_output: request.multimaskOutput ?? false,
+    };
+
+    return new Promise((resolve, reject) => {
+      const timeout = setTimeout(() => {
+        this.pendingRequests.delete(id);
+        reject(new Error(`Segmentation predict request timed out after ${this.requestTimeoutMs}ms`));
+      }, this.requestTimeoutMs);
+
+      this.pendingRequests.set(id, { resolve, reject, timeout });
+
+      // Send the request as JSON line
+      const requestLine = `${JSON.stringify(fullRequest)}\n`;
+      this.process!.stdin!.write(requestLine, (err) => {
+        if (err) {
+          clearTimeout(timeout);
+          this.pendingRequests.delete(id);
+          reject(err);
+        }
+      });
+    });
+  }
+
+  /**
+   * Pre-load an image for multiple predictions (optional optimization)
+   */
+  async setImage(imagePath: string): Promise<void> {
+    if (!this.isReady()) {
+      throw new Error('Segmentation service is not ready');
+    }
+
+    const id = this.generateRequestId();
+    const request = {
+      id,
+      command: 'set_image',
+      image_path: imagePath,
+    };
+
+    return new Promise((resolve, reject) => {
+      const timeout = setTimeout(() => {
+        this.pendingRequests.delete(id);
+        reject(new Error('set_image request timed out'));
+      }, this.requestTimeoutMs);
+
+      this.pendingRequests.set(id, {
+        resolve: () => resolve(),
+        reject,
+        timeout,
+      });
+
+      const requestLine = `${JSON.stringify(request)}\n`;
+      this.process!.stdin!.write(requestLine);
+    });
+  }
+
+  /**
+   * Clear the cached image
+   */
+  async clearImage(): Promise<void> {
+    if (!this.isReady()) {
+      return undefined; // Nothing to clear
+    }
+
+    const id = this.generateRequestId();
+    const request = {
+      id,
+      command: 'clear_image',
+    };
+
+    await new Promise<void>((resolve, reject) => {
+      const timeout = setTimeout(() => {
+        this.pendingRequests.delete(id);
+        reject(new Error('clear_image request timed out'));
+      }, this.requestTimeoutMs);
+
+      this.pendingRequests.set(id, {
+        resolve: () => resolve(),
+        reject,
+        timeout,
+      });
+
+      const requestLine = `${JSON.stringify(request)}\n`;
+      this.process!.stdin!.write(requestLine);
+    });
+    return undefined;
+  }
+
+  /**
+   * Send a text query request for open-vocabulary detection/segmentation
+   */
+  async textQuery(request: {
+    imagePath: string;
+    text: string;
+    boxThreshold?: number;
+    maxDetections?: number;
+    boxes?: [number, number, number, number][];
+    points?: [number, number][];
+    pointLabels?: number[];
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  }): Promise<any> {
+    if (!this.isReady()) {
+      throw new Error('Segmentation service is not ready. Call initialize() first.');
+    }
+
+    if (!this.process?.stdin) {
+      throw new Error('Segmentation service stdin is not available');
+    }
+
+    const id = this.generateRequestId();
+    const fullRequest = {
+      id,
+      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,
+    };
+
+    return new Promise((resolve, reject) => {
+      const timeout = setTimeout(() => {
+        this.pendingRequests.delete(id);
+        reject(new Error(`Text query 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);
+        }
+      });
+    });
+  }
+
+  /**
+   * Refine existing detections with additional prompts
+   */
+  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> {
+    if (!this.isReady()) {
+      throw new Error('Segmentation service is not ready. Call initialize() first.');
+    }
+
+    if (!this.process?.stdin) {
+      throw new Error('Segmentation service stdin is not available');
+    }
+
+    const id = this.generateRequestId();
+    const fullRequest = {
+      id,
+      command: 'refine',
+      image_path: request.imagePath,
+      detections: request.detections,
+      points: request.points,
+      point_labels: request.pointLabels,
+      refine_masks: request.refineMasks ?? true,
+    };
+
+    return new Promise((resolve, reject) => {
+      const timeout = setTimeout(() => {
+        this.pendingRequests.delete(id);
+        reject(new Error(`Refine 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);
+        }
+      });
+    });
+  }
+
+  /**
+   * Clean up internal state after process exits
+   */
+  private cleanup(): void {
+    // Reject all pending requests
+    this.pendingRequests.forEach((pending) => {
+      clearTimeout(pending.timeout);
+      pending.reject(new Error('Segmentation service terminated'));
+    });
+    this.pendingRequests.clear();
+
+    if (this.readline) {
+      this.readline.close();
+      this.readline = null;
+    }
+
+    this.process = null;
+    this.emit('shutdown');
+  }
+
+  /**
+   * Gracefully shutdown the segmentation service
+   */
+  async shutdown(): Promise<void> {
+    if (!this.process) {
+      return undefined;
+    }
+
+    console.log('[Segmentation] Shutting down segmentation service...');
+
+    await new Promise<void>((resolve) => {
+      // Send shutdown command
+      const reqId = this.generateRequestId();
+      const request = { id: reqId, command: 'shutdown' };
+
+      if (this.process?.stdin?.writable) {
+        this.process.stdin.write(`${JSON.stringify(request)}\n`);
+      }
+
+      // Wait for process to exit or timeout
+      const timeoutId = setTimeout(() => {
+        if (this.process) {
+          console.log('[Segmentation] Force killing segmentation 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();
+      }
+    });
+    return undefined;
+  }
+}
+
+// Singleton instance
+let serviceManager: SegmentationServiceManager | null = null;
+
+/**
+ * Get the segmentation service manager singleton
+ */
+export function getSegmentationServiceManager(): SegmentationServiceManager {
+  if (!serviceManager) {
+    serviceManager = new SegmentationServiceManager();
+  }
+  return serviceManager;
+}
+
+/**
+ * Shutdown the segmentation service (call on app close)
+ */
+export async function shutdownSegmentationService(): Promise<void> {
+  if (serviceManager) {
+    await serviceManager.shutdown();
+    serviceManager = null;
+  }
+}
+
+// Export type aliases for generic naming
+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..a81b3fce7
--- /dev/null
+++ b/client/platform/desktop/backend/native/stereo.ts
@@ -0,0 +1,668 @@
+/**
+ * Interactive Stereo Service Manager for Desktop
+ *
+ * Manages a persistent Python subprocess that keeps the interactive stereo model loaded
+ * for fast interactive stereo annotation. When enabled, the service proactively computes
+ * disparity maps when the user navigates to new frames, so annotation transfers are instant.
+ */
+
+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';
+
+/** 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;
+}
+
+/** 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]];
+}
+
+/** Response from transfer line request */
+export interface StereoTransferLineResponse {
+  id: string;
+  success: boolean;
+  error?: string;
+  transferredLine?: [[number, number], [number, number]];
+  originalLine?: [[number, number], [number, number]];
+  depthInfo?: {
+    depthPoint1: number | null;
+    depthPoint2: number | null;
+    disparityPoint1: number;
+    disparityPoint2: 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;
+}
+
+// Generic response type for internal use
+interface StereoResponse {
+  id: string;
+  success: boolean;
+  error?: string;
+  message?: string;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  [key: string]: any;
+}
+
+interface PendingRequest {
+  resolve: (response: StereoResponse) => void;
+  reject: (error: Error) => void;
+  timeout: NodeJS.Timeout;
+}
+
+/**
+ * Stereo Service Manager
+ *
+ * Manages a persistent Python subprocess for interactive stereo disparity computation.
+ * The service is started when enabled and kept alive until disabled.
+ */
+export class StereoServiceManager extends EventEmitter {
+  private process: ChildProcess | null = null;
+
+  private readline: readline.Interface | null = null;
+
+  private pendingRequests: Map<string, PendingRequest> = new Map();
+
+  private isInitializing = false;
+
+  private initPromise: Promise<void> | null = null;
+
+  private settings: Settings | null = null;
+
+  private requestCounter = 0;
+
+  private enabled = false;
+
+  private readonly requestTimeoutMs = 60000; // 60 second timeout (disparity can take time)
+
+  /**
+   * Enable the stereo service with the given settings and calibration.
+   * This spawns the Python process and loads the interactive stereo model.
+   */
+  async enable(settings: Settings, calibration?: StereoCalibration): Promise<{ success: boolean; error?: string }> {
+    // If already enabled and running, just update calibration if provided
+    if (this.enabled && this.isReady()) {
+      console.log('[Stereo] Service already running');
+      if (calibration) {
+        await this.setCalibration(calibration);
+      }
+      return { success: true };
+    }
+
+    // If currently initializing, wait for it
+    if (this.isInitializing && this.initPromise) {
+      await this.initPromise;
+      return { success: true };
+    }
+
+    this.isInitializing = true;
+    this.settings = settings;
+
+    try {
+      this.initPromise = this._doInitialize(settings, calibration);
+      await this.initPromise;
+      this.enabled = true;
+      return { success: true };
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : String(err);
+      return { success: false, error: errorMessage };
+    } finally {
+      this.isInitializing = false;
+    }
+  }
+
+  private async _doInitialize(settings: Settings, calibration?: StereoCalibration): Promise<void> {
+    // Clean up any existing process
+    await this.shutdown();
+
+    return new Promise((resolve, reject) => {
+      const viameSetup = npath.join(settings.viamePath, 'setup_viame.sh');
+      const configPath = npath.join(
+        settings.viamePath, 'configs', 'pipelines', 'interactive_stereo_default.conf',
+      );
+
+      // Build the command to run the interactive stereo service
+      const command = [
+        `. "${viameSetup}"`,
+        '&&',
+        'python -m viame.core.interactive_stereo',
+        `--config "${configPath}"`,
+      ].join(' ');
+
+      console.log('[Stereo] Starting interactive stereo service...');
+      console.log(`[Stereo] Command: ${command}`);
+
+      this.process = observeChild(spawn(command, {
+        shell: '/bin/bash',
+        stdio: ['pipe', 'pipe', 'pipe'],
+      }));
+
+      // Set up readline for stdout (JSON responses)
+      if (this.process.stdout) {
+        this.readline = readline.createInterface({
+          input: this.process.stdout,
+          crlfDelay: Infinity,
+        });
+
+        this.readline.on('line', (line) => {
+          this.handleResponse(line);
+        });
+      }
+
+      let initialized = false;
+
+      // Log stderr (diagnostic messages)
+      if (this.process.stderr) {
+        this.process.stderr.on('data', (data: Buffer) => {
+          const message = data.toString().trim();
+          if (message) {
+            console.log(`[Stereo] ${message}`);
+            // Detect successful startup (service is waiting for requests)
+            if (message.includes('Service started, waiting for requests')) {
+              // Now send the enable command with calibration
+              this.sendEnableCommand(calibration)
+                .then(() => {
+                  initialized = true;
+                  resolve();
+                })
+                .catch(reject);
+            }
+          }
+        });
+      }
+
+      // Handle process exit
+      this.process.on('exit', (code, signal) => {
+        console.log(`[Stereo] Process exited with code ${code}, signal ${signal}`);
+        this.cleanup();
+        if (this.isInitializing && !initialized) {
+          reject(new Error(STEREO_LOAD_ERROR_MESSAGE));
+        }
+      });
+
+      this.process.on('error', (err) => {
+        console.error('[Stereo] Process error:', err);
+        this.cleanup();
+        if (this.isInitializing) {
+          reject(new Error(STEREO_LOAD_ERROR_MESSAGE));
+        }
+      });
+
+      // Timeout for initialization (90 seconds for model loading)
+      setTimeout(() => {
+        if (this.isInitializing && !initialized) {
+          reject(new Error(STEREO_LOAD_ERROR_MESSAGE));
+        }
+      }, 90000);
+    });
+  }
+
+  /**
+   * Send the enable command to the Python service
+   */
+  private async sendEnableCommand(calibration?: StereoCalibration): Promise<void> {
+    const id = this.generateRequestId();
+    const request = {
+      id,
+      command: 'enable',
+      calibration,
+    };
+
+    return new Promise((resolve, reject) => {
+      const timeout = setTimeout(() => {
+        this.pendingRequests.delete(id);
+        reject(new Error('Enable command timed out'));
+      }, this.requestTimeoutMs);
+
+      this.pendingRequests.set(id, {
+        resolve: (response) => {
+          if (response.success) {
+            resolve();
+          } else {
+            reject(new Error(response.error || 'Failed to enable stereo service'));
+          }
+        },
+        reject,
+        timeout,
+      });
+
+      const requestLine = `${JSON.stringify(request)}\n`;
+      this.process!.stdin!.write(requestLine);
+    });
+  }
+
+  /**
+   * Disable the stereo service and unload the model
+   */
+  async disable(): Promise<{ success: boolean }> {
+    if (!this.enabled || !this.isReady()) {
+      this.enabled = false;
+      return { success: true };
+    }
+
+    try {
+      const id = this.generateRequestId();
+      const request = { id, command: 'disable' };
+
+      await new Promise<void>((resolve) => {
+        const timeout = setTimeout(() => {
+          this.pendingRequests.delete(id);
+          resolve();
+        }, 5000);
+
+        this.pendingRequests.set(id, {
+          resolve: () => resolve(),
+          reject: () => resolve(),
+          timeout,
+        });
+
+        const requestLine = `${JSON.stringify(request)}\n`;
+        this.process!.stdin!.write(requestLine);
+      });
+
+      await this.shutdown();
+      this.enabled = false;
+      return { success: true };
+    } catch {
+      this.enabled = false;
+      return { success: true };
+    }
+  }
+
+  /**
+   * Check if the service is ready for requests
+   */
+  isReady(): boolean {
+    return this.process !== null && this.process.exitCode === null;
+  }
+
+  /**
+   * Check if the service is enabled
+   */
+  isEnabled(): boolean {
+    return this.enabled && this.isReady();
+  }
+
+  /**
+   * Generate a unique request ID
+   */
+  private generateRequestId(): string {
+    this.requestCounter += 1;
+    return `req_${Date.now()}_${this.requestCounter}`;
+  }
+
+  /**
+   * Handle a response line from the stereo service
+   */
+  private handleResponse(line: string): void {
+    try {
+      const response = JSON.parse(line) as StereoResponse;
+      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') {
+        // Async notification that disparity is ready
+        this.emit('disparity_ready', response);
+      } else if (response.type === 'disparity_error') {
+        this.emit('disparity_error', response);
+      } else {
+        console.warn(`[Stereo] Received response for unknown request: ${response.id}`);
+      }
+    } catch (err) {
+      console.error('[Stereo] Failed to parse response:', line, err);
+    }
+  }
+
+  /**
+   * Set calibration parameters
+   */
+  async setCalibration(calibration: StereoCalibration): Promise<void> {
+    if (!this.isReady()) {
+      throw new Error('Stereo service is not ready');
+    }
+
+    const id = this.generateRequestId();
+    const request = {
+      id,
+      command: 'set_calibration',
+      calibration,
+    };
+
+    return new Promise((resolve, reject) => {
+      const timeout = setTimeout(() => {
+        this.pendingRequests.delete(id);
+        reject(new Error('set_calibration request timed out'));
+      }, this.requestTimeoutMs);
+
+      this.pendingRequests.set(id, {
+        resolve: () => resolve(),
+        reject,
+        timeout,
+      });
+
+      const requestLine = `${JSON.stringify(request)}\n`;
+      this.process!.stdin!.write(requestLine);
+    });
+  }
+
+  /**
+   * Set the current frame and start computing disparity proactively
+   */
+  async setFrame(request: StereoSetFrameRequest): Promise<StereoSetFrameResponse> {
+    if (!this.isEnabled()) {
+      return {
+        id: '',
+        success: false,
+        error: 'Stereo service is not enabled',
+        disparityReady: false,
+      };
+    }
+
+    const id = this.generateRequestId();
+    const fullRequest = {
+      id,
+      command: 'set_frame',
+      left_image_path: request.leftImagePath,
+      right_image_path: request.rightImagePath,
+    };
+
+    return new Promise((resolve, reject) => {
+      const timeout = setTimeout(() => {
+        this.pendingRequests.delete(id);
+        reject(new Error('set_frame request timed out'));
+      }, this.requestTimeoutMs);
+
+      this.pendingRequests.set(id, {
+        resolve: (response) => resolve({
+          id: response.id,
+          success: response.success,
+          error: response.error,
+          disparityReady: response.disparity_ready || false,
+          message: response.message,
+        }),
+        reject,
+        timeout,
+      });
+
+      const requestLine = `${JSON.stringify(fullRequest)}\n`;
+      this.process!.stdin!.write(requestLine);
+    });
+  }
+
+  /**
+   * Get the current status of the stereo service
+   */
+  async getStatus(): Promise<StereoStatusResponse> {
+    if (!this.isReady()) {
+      return {
+        id: '',
+        success: true,
+        enabled: false,
+        disparityReady: false,
+        hasCalibration: false,
+      };
+    }
+
+    const id = this.generateRequestId();
+    const request = { id, command: 'get_status' };
+
+    return new Promise((resolve, reject) => {
+      const timeout = setTimeout(() => {
+        this.pendingRequests.delete(id);
+        reject(new Error('get_status request timed out'));
+      }, this.requestTimeoutMs);
+
+      this.pendingRequests.set(id, {
+        resolve: (response) => resolve({
+          id: response.id,
+          success: response.success,
+          enabled: response.enabled || false,
+          disparityReady: response.disparity_ready || false,
+          computing: response.computing,
+          currentLeftPath: response.current_left_path,
+          currentRightPath: response.current_right_path,
+          hasCalibration: response.has_calibration || false,
+        }),
+        reject,
+        timeout,
+      });
+
+      const requestLine = `${JSON.stringify(request)}\n`;
+      this.process!.stdin!.write(requestLine);
+    });
+  }
+
+  /**
+   * Transfer a line from left image to right image using disparity
+   */
+  async transferLine(request: StereoTransferLineRequest): Promise<StereoTransferLineResponse> {
+    if (!this.isEnabled()) {
+      return {
+        id: '',
+        success: false,
+        error: 'Stereo service is not enabled',
+      };
+    }
+
+    const id = this.generateRequestId();
+    const fullRequest = {
+      id,
+      command: 'transfer_line',
+      line: request.line,
+    };
+
+    return new Promise((resolve, reject) => {
+      const timeout = setTimeout(() => {
+        this.pendingRequests.delete(id);
+        reject(new Error('transfer_line request timed out'));
+      }, this.requestTimeoutMs);
+
+      this.pendingRequests.set(id, {
+        resolve: (response) => resolve({
+          id: response.id,
+          success: response.success,
+          error: response.error,
+          transferredLine: response.transferred_line,
+          originalLine: response.original_line,
+          depthInfo: response.depth_info ? {
+            depthPoint1: response.depth_info.depth_point1,
+            depthPoint2: response.depth_info.depth_point2,
+            disparityPoint1: response.depth_info.disparity_point1,
+            disparityPoint2: response.depth_info.disparity_point2,
+          } : undefined,
+        }),
+        reject,
+        timeout,
+      });
+
+      const requestLine = `${JSON.stringify(fullRequest)}\n`;
+      this.process!.stdin!.write(requestLine);
+    });
+  }
+
+  /**
+   * Transfer multiple points from left image to right image
+   */
+  async transferPoints(request: StereoTransferPointsRequest): Promise<StereoTransferPointsResponse> {
+    if (!this.isEnabled()) {
+      return {
+        id: '',
+        success: false,
+        error: 'Stereo service is not enabled',
+      };
+    }
+
+    const id = this.generateRequestId();
+    const fullRequest = {
+      id,
+      command: 'transfer_points',
+      points: request.points,
+    };
+
+    return new Promise((resolve, reject) => {
+      const timeout = setTimeout(() => {
+        this.pendingRequests.delete(id);
+        reject(new Error('transfer_points request timed out'));
+      }, this.requestTimeoutMs);
+
+      this.pendingRequests.set(id, {
+        resolve: (response) => resolve({
+          id: response.id,
+          success: response.success,
+          error: response.error,
+          transferredPoints: response.transferred_points,
+          originalPoints: response.original_points,
+          disparityValues: response.disparity_values,
+        }),
+        reject,
+        timeout,
+      });
+
+      const requestLine = `${JSON.stringify(fullRequest)}\n`;
+      this.process!.stdin!.write(requestLine);
+    });
+  }
+
+  /**
+   * Clean up internal state after process exits
+   */
+  private cleanup(): void {
+    // Reject all pending requests
+    this.pendingRequests.forEach((pending) => {
+      clearTimeout(pending.timeout);
+      pending.reject(new Error('Stereo service terminated'));
+    });
+    this.pendingRequests.clear();
+
+    if (this.readline) {
+      this.readline.close();
+      this.readline = null;
+    }
+
+    this.process = null;
+    this.enabled = false;
+    this.emit('shutdown');
+  }
+
+  /**
+   * Gracefully shutdown the stereo service
+   */
+  async shutdown(): Promise<void> {
+    if (!this.process) {
+      return undefined;
+    }
+
+    console.log('[Stereo] Shutting down stereo service...');
+
+    await new Promise<void>((resolve) => {
+      // Send shutdown command
+      const reqId = this.generateRequestId();
+      const request = { id: reqId, command: 'shutdown' };
+
+      if (this.process?.stdin?.writable) {
+        this.process.stdin.write(`${JSON.stringify(request)}\n`);
+      }
+
+      // Wait for process to exit or timeout
+      const timeoutId = setTimeout(() => {
+        if (this.process) {
+          console.log('[Stereo] Force killing stereo 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();
+      }
+    });
+    return undefined;
+  }
+}
+
+// Singleton instance
+let serviceManager: StereoServiceManager | null = null;
+
+/**
+ * Get the stereo service manager singleton
+ */
+export function getStereoServiceManager(): StereoServiceManager {
+  if (!serviceManager) {
+    serviceManager = new StereoServiceManager();
+  }
+  return serviceManager;
+}
+
+/**
+ * Shutdown the stereo service (call on app close)
+ */
+export async function shutdownStereoService(): Promise<void> {
+  if (serviceManager) {
+    await serviceManager.shutdown();
+    serviceManager = null;
+  }
+}
diff --git a/client/platform/desktop/backend/native/viame.ts b/client/platform/desktop/backend/native/viame.ts
index 51e5c795b..462d210d7 100644
--- a/client/platform/desktop/backend/native/viame.ts
+++ b/client/platform/desktop/backend/native/viame.ts
@@ -163,6 +163,13 @@ async function runPipeline(
     throw new Error('Attempting to run a multicam pipeline on non multicam data');
   }
 
+  // Add any custom pipeline parameters
+  if (runPipelineArgs.pipelineParams) {
+    Object.entries(runPipelineArgs.pipelineParams).forEach(([key, value]) => {
+      command.push(`-s ${key}="${value}"`);
+    });
+  }
+
   const job = observeChild(spawn(command.join(' '), {
     shell: viameConstants.shell,
     cwd: jobWorkDir,
diff --git a/client/platform/desktop/constants.ts b/client/platform/desktop/constants.ts
index 4f4aab78a..5bc43ddf9 100644
--- a/client/platform/desktop/constants.ts
+++ b/client/platform/desktop/constants.ts
@@ -170,6 +170,8 @@ export interface RunPipeline extends JobArgs {
   type: JobType.RunPipeline;
   datasetId: string;
   pipeline: Pipe;
+  /** Optional parameters to pass to the pipeline via -s flags */
+  pipelineParams?: Record<string, string>;
 }
 
 export interface ExportTrainedPipeline extends JobArgs {
diff --git a/client/platform/desktop/frontend/api.ts b/client/platform/desktop/frontend/api.ts
index fb71cdd3b..a4b3c50e5 100644
--- a/client/platform/desktop/frontend/api.ts
+++ b/client/platform/desktop/frontend/api.ts
@@ -10,6 +10,8 @@ import type {
   DatasetMetaMutable, DatasetType, MultiCamImportArgs,
   Pipe, Pipelines, SaveAttributeArgs,
   SaveAttributeTrackFilterArgs, SaveDetectionsArgs, TrainingConfigs,
+  SegmentationPredictRequest, SegmentationPredictResponse, SegmentationStatusResponse,
+  TextQueryRequest, TextQueryResponse, RefineDetectionsRequest, RefineDetectionsResponse,
 } from 'dive-common/apispec';
 
 import {
@@ -205,6 +207,189 @@ async function cancelJob(job: DesktopJob): Promise<void> {
   return ipcRenderer.invoke('cancel-job', job);
 }
 
+/**
+ * Interactive Segmentation API
+ */
+
+async function segmentationInitialize(): Promise<{ success: boolean }> {
+  return ipcRenderer.invoke('segmentation-initialize');
+}
+
+async function segmentationPredict(request: SegmentationPredictRequest): Promise<SegmentationPredictResponse> {
+  return ipcRenderer.invoke('segmentation-predict', request);
+}
+
+async function segmentationSetImage(imagePath: string): Promise<{ success: boolean }> {
+  return ipcRenderer.invoke('segmentation-set-image', imagePath);
+}
+
+async function segmentationClearImage(): Promise<{ success: boolean }> {
+  return ipcRenderer.invoke('segmentation-clear-image');
+}
+
+async function segmentationShutdown(): Promise<{ success: boolean }> {
+  return ipcRenderer.invoke('segmentation-shutdown');
+}
+
+async function segmentationIsReady(): Promise<SegmentationStatusResponse> {
+  return ipcRenderer.invoke('segmentation-is-ready');
+}
+
+/**
+ * Text Query API
+ * Allows open-vocabulary detection and segmentation using text prompts
+ */
+
+async function textQuery(request: TextQueryRequest): Promise<TextQueryResponse> {
+  return ipcRenderer.invoke('segmentation-text-query', request);
+}
+
+async function refineDetections(request: RefineDetectionsRequest): Promise<RefineDetectionsResponse> {
+  return ipcRenderer.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 StereoTransferLineResponse {
+  id: string;
+  success: boolean;
+  error?: string;
+  transferredLine?: [[number, number], [number, number]];
+  originalLine?: [[number, number], [number, number]];
+  depthInfo?: {
+    depthPoint1: number | null;
+    depthPoint2: number | null;
+    disparityPoint1: number;
+    disparityPoint2: 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): Promise<{ success: boolean; error?: string }> {
+  return ipcRenderer.invoke('stereo-enable', { calibration });
+}
+
+async function stereoDisable(): Promise<{ success: boolean }> {
+  return ipcRenderer.invoke('stereo-disable');
+}
+
+async function stereoSetFrame(request: StereoSetFrameRequest): Promise<StereoSetFrameResponse> {
+  return ipcRenderer.invoke('stereo-set-frame', request);
+}
+
+async function stereoGetStatus(): Promise<StereoStatusResponse> {
+  return ipcRenderer.invoke('stereo-get-status');
+}
+
+async function stereoTransferLine(request: StereoTransferLineRequest): Promise<StereoTransferLineResponse> {
+  return ipcRenderer.invoke('stereo-transfer-line', request);
+}
+
+async function stereoTransferPoints(request: StereoTransferPointsRequest): Promise<StereoTransferPointsResponse> {
+  return ipcRenderer.invoke('stereo-transfer-points', request);
+}
+
+async function stereoSetCalibration(calibration: StereoCalibration): Promise<{ success: boolean }> {
+  return ipcRenderer.invoke('stereo-set-calibration', { calibration });
+}
+
+async function stereoIsEnabled(): Promise<{ enabled: boolean }> {
+  return ipcRenderer.invoke('stereo-is-enabled');
+}
+
+function onStereoDisparityReady(callback: (data: unknown) => void): () => void {
+  const handler = (_event: unknown, data: unknown) => callback(data);
+  ipcRenderer.on('stereo-disparity-ready', handler);
+  return () => ipcRenderer.removeListener('stereo-disparity-ready', handler);
+}
+
+function onStereoDisparityError(callback: (data: unknown) => void): () => void {
+  const handler = (_event: unknown, data: unknown) => callback(data);
+  ipcRenderer.on('stereo-disparity-error', handler);
+  return () => ipcRenderer.removeListener('stereo-disparity-error', handler);
+}
+
 /**
  * REST api for larger-body messages
  */
@@ -277,4 +462,26 @@ export {
   openLink,
   nvidiaSmi,
   cancelJob,
+  /* Segmentation APIs */
+  segmentationInitialize,
+  segmentationPredict,
+  segmentationSetImage,
+  segmentationClearImage,
+  segmentationShutdown,
+  segmentationIsReady,
+  /* Text Query APIs */
+  textQuery,
+  refineDetections,
+  runTextQueryPipeline,
+  /* Stereo APIs */
+  stereoEnable,
+  stereoDisable,
+  stereoSetFrame,
+  stereoGetStatus,
+  stereoTransferLine,
+  stereoTransferPoints,
+  stereoSetCalibration,
+  stereoIsEnabled,
+  onStereoDisparityReady,
+  onStereoDisparityError,
 };
diff --git a/client/platform/desktop/frontend/components/ViewerLoader.vue b/client/platform/desktop/frontend/components/ViewerLoader.vue
index 94ca70d8c..d75436a91 100644
--- a/client/platform/desktop/frontend/components/ViewerLoader.vue
+++ b/client/platform/desktop/frontend/components/ViewerLoader.vue
@@ -1,6 +1,7 @@
 <script lang="ts">
+import npath from 'path';
 import {
-  computed, defineComponent, ref, watch,
+  computed, defineComponent, ref, watch, onMounted, onBeforeUnmount, nextTick,
 } from 'vue';
 import Viewer from 'dive-common/components/Viewer.vue';
 import RunPipelineMenu from 'dive-common/components/RunPipelineMenu.vue';
@@ -8,6 +9,15 @@ 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, segmentationInitialize, segmentationIsReady, loadMetadata, textQuery,
+  runTextQueryPipeline,
+  stereoEnable, stereoDisable, stereoSetFrame, stereoTransferLine, stereoTransferPoints,
+  onStereoDisparityReady, onStereoDisparityError,
+} from 'platform/desktop/frontend/api';
 import Export from './Export.vue';
 import JobTab from './JobTab.vue';
 import { datasets } from '../store/dataset';
@@ -107,6 +117,658 @@ export default defineComponent({
       });
     }
 
+    /**
+     * 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);
+        const { originalBasePath, originalImageFiles, type } = meta;
+
+        // Create image path getter based on dataset type
+        const getImagePath = (frameNum: number): string => {
+          if (type === 'video') {
+            // For video, we need to extract frames - this is more complex
+            // For now, return the video path (segmentation would need frame extraction)
+            return npath.join(originalBasePath, meta.originalVideoFile);
+          }
+          // For image sequences, return the image file path
+          if (originalImageFiles && originalImageFiles[frameNum]) {
+            const imagePath = originalImageFiles[frameNum];
+            // Handle both relative and absolute paths
+            if (npath.isAbsolute(imagePath)) {
+              return imagePath;
+            }
+            return npath.join(originalBasePath, imagePath);
+          }
+          return '';
+        };
+
+        // 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,
+          // 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);
+
+    // 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 = '';
+    }
+
+    /**
+     * Load multicam metadata for both cameras to build image path getters
+     */
+    async function loadStereoMetadata() {
+      try {
+        const meta = await loadMetadata(props.id);
+        if (!meta.multiCamMedia) return;
+
+        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 '';
+          };
+        }
+      } catch (err) {
+        console.error('[Stereo] Failed to load multicam metadata:', err);
+      }
+    }
+
+    // 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 {
+          await loadStereoMetadata();
+          const result = await stereoEnable();
+          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
+          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;
+                stereoSetFrame({ leftImagePath: leftPath, rightImagePath: rightPath }).catch((err) => {
+                  console.warn('[Stereo] Failed to set initial frame:', err);
+                });
+              }
+            }
+          }
+        } catch (err) {
+          stereoEnabled.value = false;
+          clientSettings.stereoSettings.interactiveModeEnabled = false;
+          stereoLoadingError.value = err instanceof Error ? err.message : String(err);
+        }
+      } 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) {
+        stereoSetFrame({ leftImagePath: leftPath, rightImagePath: rightPath }).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;
+    }
+
+    /**
+     * 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) {
+          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);
+          }
+        } 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') {
+          // Transfer control points to the other camera
+          const response = await stereoTransferPoints({ points: params.points });
+          if (!response.success || !response.transferredPoints) {
+            throw new Error(response.error || 'Segmentation point transfer returned no result');
+          }
+
+          // Get the image path for the other camera at this frame
+          const otherImagePath = stereoImagePathGetters.value[otherCamera]?.(params.frameNum);
+          if (!otherImagePath) {
+            throw new Error('No image path for other camera');
+          }
+
+          // Run segmentation prediction with warped control points on the other camera's image
+          try {
+            const segResponse = await segmentationPredict({
+              imagePath: otherImagePath,
+              points: response.transferredPoints,
+              pointLabels: params.labels,
+            });
+
+            if (segResponse.polygon && segResponse.polygon.length >= 3) {
+              // Close polygon if needed
+              const closedPolygon = [...segResponse.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 = segResponse.bounds || [
+                Math.min(...segResponse.polygon.map((p: [number, number]) => p[0])),
+                Math.min(...segResponse.polygon.map((p: [number, number]) => p[1])),
+                Math.max(...segResponse.polygon.map((p: [number, number]) => p[0])),
+                Math.max(...segResponse.polygon.map((p: [number, number]) => p[1])),
+              ] 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: segBounds,
+                  keyframe: true,
+                  interpolate: false,
+                }, segGeometry);
+              }
+            }
+          } catch (segErr) {
+            throw new Error(`Segmentation on other camera failed: ${segErr}`);
+          }
+        }
+        // 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,
@@ -120,67 +782,129 @@ export default defineComponent({
       readOnlyMode,
       runningPipelines,
       largeImageWarning,
+      handleTextQuerySubmit,
+      handleTextQueryInit,
+      handleTextQueryAllFrames,
+      /* Stereo */
+      stereoLoadingDialog,
+      stereoLoadingMessage,
+      stereoLoadingError,
+      closeStereoLoadingDialog,
+      handleStereoAnnotationComplete,
     };
   },
 });
 </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"
-        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>
-      <SidebarContext>
-        <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"
+    >
+      <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"
+          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>
+        <SidebarContext>
+          <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>
+  </div>
 </template>
+
+<style scoped>
+.viewer-loader-wrapper {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+}
+</style>
diff --git a/client/platform/web-girder/api/rpc.service.ts b/client/platform/web-girder/api/rpc.service.ts
index cda1aed53..435a89742 100644
--- a/client/platform/web-girder/api/rpc.service.ts
+++ b/client/platform/web-girder/api/rpc.service.ts
@@ -1,6 +1,9 @@
 import girderRest from 'platform/web-girder/plugins/girder';
 import type { GirderModel } from '@girder/components/src';
-import { Pipe } from 'dive-common/apispec';
+import {
+  Pipe, SegmentationPredictRequest, SegmentationPredictResponse, SegmentationStatusResponse,
+  TextQueryRequest, TextQueryResponse,
+} from 'dive-common/apispec';
 
 function postProcess(folderId: string, skipJobs = false, skipTranscoding = false, additive = false, additivePrepend = '', set: string | undefined = undefined) {
   return girderRest.post<{folder: GirderModel, warnings: string[], job_ids: string[]}>(`dive_rpc/postprocess/${folderId}`, null, {
@@ -56,6 +59,75 @@ function convertLargeImage(folderId: string) {
   return girderRest.post(`dive_rpc/convert_large_image/${folderId}`, null, {});
 }
 
+/**
+ * Interactive Segmentation API
+ */
+
+async function segmentationPredict(
+  folderId: string,
+  frameNumber: number,
+  request: SegmentationPredictRequest,
+): Promise<SegmentationPredictResponse> {
+  const { data } = await girderRest.post<SegmentationPredictResponse>('dive_rpc/segmentation_predict', {
+    points: request.points,
+    pointLabels: request.pointLabels,
+    maskInput: request.maskInput,
+    multimaskOutput: request.multimaskOutput,
+  }, {
+    params: {
+      folderId,
+      frameNumber,
+    },
+  });
+  return data;
+}
+
+async function segmentationStatus(): Promise<SegmentationStatusResponse> {
+  const { data } = await girderRest.get<SegmentationStatusResponse>('dive_rpc/segmentation_status');
+  return data;
+}
+
+/**
+ * Initialize segmentation service by checking availability.
+ * Throws an error if segmentation is not available on the server.
+ */
+async function segmentationInitialize(): Promise<void> {
+  const status = await segmentationStatus();
+  if (!status.available) {
+    throw new Error('Unable to load segmentation module');
+  }
+}
+
+/**
+ * Text Query API for open-vocabulary detection/segmentation
+ */
+
+async function textQuery(
+  folderId: string,
+  frameNumber: number,
+  request: Omit<TextQueryRequest, 'imagePath'>,
+): Promise<TextQueryResponse> {
+  const { data } = await girderRest.post<TextQueryResponse>('dive_rpc/text_query', {
+    text: request.text,
+    boxThreshold: request.boxThreshold,
+    maxDetections: request.maxDetections,
+  }, {
+    params: {
+      folderId,
+      frameNumber,
+    },
+  });
+  return data;
+}
+
+async function textQueryStatus(): Promise<{ available: boolean; grounding_available: boolean }> {
+  const { data } = await girderRest.get<{ available: boolean; loaded: boolean; text_query_available: boolean }>('dive_rpc/segmentation_status');
+  return {
+    available: data.available,
+    grounding_available: data.text_query_available,
+  };
+}
+
 export {
   convertLargeImage,
   postProcess,
@@ -63,4 +135,9 @@ export {
   runTraining,
   deleteTrainedPipeline,
   exportTrainedPipeline,
+  segmentationPredict,
+  segmentationStatus,
+  segmentationInitialize,
+  textQuery,
+  textQueryStatus,
 };
diff --git a/client/platform/web-girder/views/ViewerLoader.vue b/client/platform/web-girder/views/ViewerLoader.vue
index 91544ae1b..84a23054a 100644
--- a/client/platform/web-girder/views/ViewerLoader.vue
+++ b/client/platform/web-girder/views/ViewerLoader.vue
@@ -1,6 +1,6 @@
 <script lang="ts">
 import {
-  computed, defineComponent, onBeforeUnmount, onMounted, ref, toRef, watch, Ref, PropType,
+  computed, defineComponent, onBeforeUnmount, onMounted, ref, toRef, watch, Ref, PropType, nextTick,
 } from 'vue';
 
 import Viewer from 'dive-common/components/Viewer.vue';
@@ -11,8 +11,8 @@ import SidebarContext from 'dive-common/components/SidebarContext.vue';
 import context from 'dive-common/store/context';
 import { useStore } from 'platform/web-girder/store/types';
 import { usePrompt } from 'dive-common/vue-utilities/prompt-service';
-import { useApi } from 'dive-common/apispec';
-import { convertLargeImage } from 'platform/web-girder/api/rpc.service';
+import { useApi, SegmentationPredictRequest } from 'dive-common/apispec';
+import { convertLargeImage, segmentationPredict, segmentationInitialize } from 'platform/web-girder/api/rpc.service';
 import { useRouter } from 'vue-router/composables';
 import JobsTab from './JobsTab.vue';
 import Export from './Export.vue';
@@ -155,6 +155,7 @@ export default defineComponent({
 
     onMounted(() => {
       window.addEventListener('beforeunload', viewerRef.value.warnBrowserExit);
+      initializeSegmentation();
     });
 
     onBeforeUnmount(() => {
@@ -212,6 +213,75 @@ export default defineComponent({
       }
     }
 
+    /**
+     * Initialize segmentation recipe with platform-specific functions
+     */
+    async function initializeSegmentation() {
+      await nextTick(); // Wait for Viewer to be mounted
+      if (!viewerRef.value?.segmentationRecipe) {
+        console.warn('[Segmentation] segmentationRecipe not found on Viewer');
+        return;
+      }
+
+      try {
+        // Initialize the recipe
+        // Web platform uses folderId + frameNum; the backend resolves the actual image path
+        viewerRef.value.segmentationRecipe.initialize({
+          predictFn: (request: SegmentationPredictRequest, frameNum: number) => segmentationPredict(props.id, frameNum, request),
+          getImagePath: () => '', // Not used for web platform - backend resolves paths
+          // Initialize the segmentation service when the recipe is activated (user clicks Segment button)
+          initializeServiceFn: segmentationInitialize,
+        });
+
+        console.log('[Segmentation] Recipe initialized successfully for web');
+      } catch (error) {
+        console.error('[Segmentation] Failed to initialize recipe:', error);
+      }
+    }
+
+    /**
+     * Handle text query service initialization request
+     * Called when user opens the text query dialog
+     */
+    async function handleTextQueryInit() {
+      try {
+        // Try to initialize the segmentation service (which includes text query)
+        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 current frame
+     */
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    async function handleTextQuery(_params: { text: string; boxThreshold: number }) {
+      // Text query for single frame would go here
+      // For now, this is handled by the segmentation service
+      await prompt({
+        title: 'Text Query',
+        text: ['Text query for single frame is not yet implemented on web platform.'],
+      });
+    }
+
+    /**
+     * Handle text query on all frames - runs as a pipeline job
+     */
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    async function handleTextQueryAllFrames(_params: { text: string; boxThreshold: number }) {
+      await prompt({
+        title: 'Text Query',
+        text: ['Text query for all frames is not yet implemented on web platform.'],
+      });
+    }
+
     return {
       buttonOptions,
       brandData,
@@ -226,6 +296,9 @@ export default defineComponent({
       routeSet,
       largeImageWarning,
       typeList,
+      handleTextQueryInit,
+      handleTextQuery,
+      handleTextQueryAllFrames,
     };
   },
 });
@@ -242,6 +315,9 @@ export default defineComponent({
     :comparison-sets="comparisonSets"
     @large-image-warning="largeImageWarning()"
     @update:set="routeSet"
+    @text-query-init="handleTextQueryInit"
+    @text-query="handleTextQuery"
+    @text-query-all-frames="handleTextQueryAllFrames"
   >
     <template #title>
       <ViewerAlert />
diff --git a/client/src/components/LayerManager.vue b/client/src/components/LayerManager.vue
index 8b88d363b..3f91cf3b1 100644
--- a/client/src/components/LayerManager.vue
+++ b/client/src/components/LayerManager.vue
@@ -39,7 +39,9 @@ import {
   useSelectedCamera,
   useAttributes,
   useComparisonSets,
+  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
@@ -89,7 +91,8 @@ export default defineComponent({
       return trackStyleManager.typeStyling.value;
     });
 
-    const annotator = injectAggregateController().value.getController(props.camera);
+    const aggregateController = injectAggregateController();
+    const annotator = aggregateController.value.getController(props.camera);
     const frameNumberRef = annotator.frame;
     const flickNumberRef = annotator.flick;
 
@@ -152,6 +155,20 @@ export default defineComponent({
       type: 'rectangle',
     });
 
+    // 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) {
@@ -386,6 +403,7 @@ export default defineComponent({
         typeStylingRef,
         toRef(props, 'colorBy'),
         selectedCamera,
+        selectedKeyRef,
       ],
       () => {
         updateLayers(
@@ -433,6 +451,23 @@ export default defineComponent({
       );
     });
 
+    /** Watch for resize events to redraw layers after view mode changes */
+    watch(
+      () => aggregateController.value.resizeTrigger.value,
+      () => {
+        updateLayers(
+          frameNumberRef.value,
+          editingModeRef.value,
+          selectedTrackIdRef.value,
+          multiSeletListRef.value,
+          enabledTracksRef.value,
+          visibleModesRef.value,
+          selectedKeyRef.value,
+          props.colorBy,
+        );
+      },
+    );
+
     const Clicked = (trackId: number, editing: boolean, modifiers?: {ctrl: boolean}) => {
       // If the camera isn't selected yet we ignore the click
       if (selectedCamera.value !== props.camera) {
@@ -441,20 +476,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,
@@ -486,8 +609,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/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 d25ed4725..74e9643c6 100644
--- a/client/src/layers/EditAnnotationLayer.ts
+++ b/client/src/layers/EditAnnotationLayer.ts
@@ -69,6 +69,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;
+
   constructor(params: BaseLayerParams & EditAnnotationLayerParams) {
     super(params);
     this.skipNextExternalUpdate = false;
@@ -80,11 +91,83 @@ export default class EditAnnotationLayer extends BaseLayer<GeoJSON.Feature> {
     this.shapeInProgress = null;
     this.disableModeSync = false;
     this.leftButtonCheckTimeout = -1;
+    this.lastClickWasBackground = false;
+    this.lastShiftKeyState = false;
+
+    // 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') {
+      // Prevent the browser context menu
+      e.preventDefault();
+      e.stopPropagation();
+
+      // Emit confirm event to lock the annotation (like other edit modes)
+      this.bus.$emit('confirm-annotation');
+    }
+  }
+
+  /**
+   * Clean up event listeners when the layer is destroyed.
+   */
+  destroy() {
+    this.removePointModeListeners();
+    this.boundTrackShiftKey = null;
+    this.boundHandleContextMenu = null;
+  }
+
   /**
    * Initialization of the layer should only be done once for edit layers
    * Handlers for edit_action and state which will emit data when necessary
@@ -113,6 +196,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)
@@ -155,10 +245,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
@@ -176,6 +312,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',
@@ -248,9 +403,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) {
@@ -433,6 +598,14 @@ export default class EditAnnotationLayer extends BaseLayer<GeoJSON.Feature> {
             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.formattedData = geoJSONData;
         // The new annotation is in a state without styling, so apply local stypes
         this.applyStylesToAnnotations();
diff --git a/client/src/provides.ts b/client/src/provides.ts
index 4cf22ff13..b3acec906 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>>;
 
@@ -119,6 +123,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 next track in the list */
@@ -133,6 +139,13 @@ export interface Handler {
     flickNum: number,
     bounds: RectBounds,
   ): 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',
@@ -199,11 +212,13 @@ 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); },
     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); },
@@ -251,6 +266,7 @@ export interface State {
   annotationSet: AnnotationSetType;
   annotationSets: AnnotationSetsType;
   comparisonSets: ComparisonSetsType;
+  segmentationPoints: SegmentationPointsType;
   selectedCamera: SelectedCameraType;
   selectedKey: SelectedKeyType;
   selectedTrackId: SelectedTrackIdType;
@@ -317,6 +333,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),
@@ -366,6 +383,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);
@@ -498,6 +516,10 @@ function useImageEnhancements() {
   return use<ImageEnhancementsType>(ImageEnhancementsSymbol);
 }
 
+function useSegmentationPoints() {
+  return use<SegmentationPointsType>(SegmentationPointsSymbol);
+}
+
 export {
   dummyHandler,
   dummyState,
@@ -530,4 +552,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/server/dive_server/viame_segmentation_service.py b/server/dive_server/viame_segmentation_service.py
new file mode 100644
index 000000000..af94c223d
--- /dev/null
+++ b/server/dive_server/viame_segmentation_service.py
@@ -0,0 +1,504 @@
+"""
+VIAME Segmentation Service for DIVE Web (Girder)
+
+This service provides interactive segmentation using KWIVER algorithms:
+- SegmentViaPoints: For point-based segmentation
+- PerformTextQuery: For text-based detection/segmentation
+
+Algorithm implementations and model details are determined by the config file
+(interactive_segmenter_default.conf) in the VIAME install directory.
+"""
+
+import logging
+import os
+import threading
+from pathlib import Path
+from typing import Any, Dict, List, Optional, Tuple
+
+import numpy as np
+
+logger = logging.getLogger(__name__)
+
+
+def find_viame_install() -> Optional[Path]:
+    """Find the VIAME installation directory."""
+    if 'VIAME_INSTALL' in os.environ:
+        path = Path(os.environ['VIAME_INSTALL'])
+        if path.exists():
+            return path
+
+    this_file = Path(__file__).resolve()
+    candidates = [
+        this_file.parent.parent.parent.parent.parent.parent / "build" / "install",
+        Path("/opt/noaa/viame"),
+        Path.home() / "viame",
+    ]
+
+    for candidate in candidates:
+        if (candidate / "setup_viame.sh").exists():
+            return candidate
+
+    return None
+
+
+def find_segmentation_config() -> Optional[Path]:
+    """
+    Find the segmentation config file in VIAME install.
+
+    Returns:
+        Path to config file if found, None otherwise
+    """
+    viame_install = find_viame_install()
+    if not viame_install:
+        return None
+
+    pipelines_dir = viame_install / "configs" / "pipelines"
+
+    config_path = pipelines_dir / "interactive_segmenter_default.conf"
+    if config_path.exists():
+        return config_path
+
+    return None
+
+
+def _parse_config_file(config_path: Path) -> Dict[str, str]:
+    """Parse a KWIVER .conf file into key-value pairs."""
+    config = {}
+    with open(config_path) as f:
+        for line in f:
+            line = line.strip()
+            if not line or line.startswith('#'):
+                continue
+            if '=' in line:
+                key, _, value = line.partition('=')
+                config[key.strip()] = value.strip()
+    return config
+
+
+class ViameSegmentationService:
+    """
+    Singleton segmentation service using KWIVER algorithms.
+
+    This service provides:
+    - Point-based segmentation via SegmentViaPoints algorithm
+    - Text-based detection via PerformTextQuery algorithm (optional)
+
+    Algorithm implementations are determined by the VIAME config file.
+    Thread-safe with lazy initialization of algorithms.
+    """
+
+    _instance: Optional['ViameSegmentationService'] = None
+    _lock = threading.Lock()
+
+    def __new__(cls) -> 'ViameSegmentationService':
+        if cls._instance is None:
+            with cls._lock:
+                if cls._instance is None:
+                    cls._instance = super().__new__(cls)
+                    cls._instance._initialized = False
+        return cls._instance
+
+    def __init__(self):
+        if getattr(self, '_initialized', False):
+            return
+
+        self._segment_algo = None
+        self._text_query_algo = None
+        self._algo_lock = threading.Lock()
+        self._current_image_path: Optional[str] = None
+        self._current_image_container = None
+
+        self._config_path = None
+        self.device = os.environ.get('SEGMENTATION_DEVICE', 'cuda')
+        self.hole_policy = "remove"
+        self.multipolygon_policy = "largest"
+        self.max_polygon_points = 25
+
+        self._initialized = True
+
+    def configure(
+        self,
+        config_path: Optional[str] = None,
+        device: Optional[str] = None,
+    ) -> None:
+        """
+        Configure the service before first use.
+
+        Args:
+            config_path: Path to KWIVER config file
+            device: Device to use (cuda, cpu)
+        """
+        if config_path:
+            self._config_path = Path(config_path)
+        if device:
+            self.device = device
+
+    def _ensure_algorithms_loaded(self) -> None:
+        """Load the segmentation algorithms if not already loaded."""
+        if self._segment_algo is not None:
+            return
+
+        with self._algo_lock:
+            if self._segment_algo is not None:
+                return
+
+            logger.info("Loading segmentation algorithms...")
+
+            try:
+                from kwiver.vital.algo import SegmentViaPoints, PerformTextQuery
+                from kwiver.vital.config import config as vital_config
+                from kwiver.vital.modules import modules as vital_modules
+
+                # Load KWIVER modules
+                vital_modules.load_known_modules()
+
+                # Find and parse config file
+                if not self._config_path:
+                    self._config_path = find_segmentation_config()
+                if not self._config_path:
+                    raise RuntimeError(
+                        "Segmentation config file not found. "
+                        "Ensure interactive_segmenter_default.conf is installed."
+                    )
+                logger.info(f"  Config file: {self._config_path}")
+
+                parsed_config = _parse_config_file(self._config_path)
+                algo_type = parsed_config.get("type", "")
+                if not algo_type:
+                    raise RuntimeError(
+                        f"No 'type' specified in config file: {self._config_path}"
+                    )
+                logger.info(f"  Algorithm type: {algo_type}")
+
+                # Create and configure SegmentViaPoints from config
+                self._segment_algo = SegmentViaPoints.create(algo_type)
+                seg_cfg = vital_config.empty_config()
+                prefix = f"{algo_type}:"
+                for key, value in parsed_config.items():
+                    if key.startswith(prefix):
+                        param = key[len(prefix):]
+                        seg_cfg.set_value(param, value)
+                seg_cfg.set_value("device", self.device)
+                self._segment_algo.set_configuration(seg_cfg)
+
+                # Try to create PerformTextQuery from the same config
+                try:
+                    text_algo = PerformTextQuery.create(algo_type)
+                    text_cfg = vital_config.empty_config()
+                    for key, value in parsed_config.items():
+                        if key.startswith(prefix):
+                            param = key[len(prefix):]
+                            text_cfg.set_value(param, value)
+                    text_cfg.set_value("device", self.device)
+                    text_algo.set_configuration(text_cfg)
+                    self._text_query_algo = text_algo
+                except Exception as e:
+                    logger.info(f"  PerformTextQuery not available for this config: {e}")
+                    self._text_query_algo = None
+
+                logger.info("Segmentation algorithms loaded successfully")
+
+            except ImportError as e:
+                logger.error(f"KWIVER not available: {e}")
+                raise RuntimeError(
+                    "KWIVER algorithms not available. "
+                    "Ensure kwiver Python bindings are installed."
+                ) from e
+            except Exception as e:
+                logger.error(f"Failed to load segmentation algorithms: {e}")
+                raise
+
+    def _load_image(self, image_path: str):
+        """Load an image and return a vital ImageContainer."""
+        from kwiver.vital.types.types import ImageContainer, Image
+        from PIL import Image as PILImage
+
+        img = PILImage.open(image_path).convert("RGB")
+        img_array = np.array(img)
+        return ImageContainer(Image(img_array))
+
+    def _mask_to_polygon(
+        self, mask: np.ndarray
+    ) -> Tuple[List[List[float]], List[float]]:
+        """Convert binary mask to polygon coordinates."""
+        from viame.core.segmentation_utils import mask_to_polygon
+
+        polygon, bounds = mask_to_polygon(
+            mask, self.hole_policy, self.multipolygon_policy
+        )
+        return polygon, bounds
+
+    def _adaptive_simplify_polygon(
+        self,
+        polygon: List[List[float]],
+        max_points: int = 25,
+        min_points: int = 4,
+    ) -> List[List[float]]:
+        """Adaptively simplify a polygon based on its shape complexity."""
+        from viame.core.segmentation_utils import adaptive_simplify_polygon
+
+        return adaptive_simplify_polygon(polygon, max_points, min_points)
+
+    def _detections_to_result(self, detected_objects) -> Dict[str, Any]:
+        """Convert DetectedObjectSet to result dictionary."""
+        if len(detected_objects) == 0:
+            return {
+                "success": True,
+                "polygon": [],
+                "bounds": [0, 0, 0, 0],
+                "score": 0.0,
+            }
+
+        # Get the first (best) detection
+        det_obj = next(iter(detected_objects))
+        bbox = det_obj.bounding_box()
+        bounds = [bbox.min_x(), bbox.min_y(), bbox.max_x(), bbox.max_y()]
+        score = det_obj.confidence()
+
+        polygon = []
+        if det_obj.mask is not None:
+            mask = det_obj.mask.image().asarray()
+            if mask is not None and mask.size > 0:
+                if mask.ndim == 3:
+                    mask = mask[:, :, 0]
+                mask = (mask > 0).astype(np.uint8)
+
+                # The mask is cropped to bbox, need to offset coordinates
+                poly_local, _ = self._mask_to_polygon(mask)
+
+                # Offset polygon by bbox origin
+                if poly_local:
+                    x_offset = bounds[0]
+                    y_offset = bounds[1]
+                    polygon = [
+                        [p[0] + x_offset, p[1] + y_offset]
+                        for p in poly_local
+                    ]
+
+                    # Simplify polygon
+                    if len(polygon) > 4:
+                        polygon = self._adaptive_simplify_polygon(
+                            polygon, self.max_polygon_points, min_points=4
+                        )
+
+        return {
+            "success": True,
+            "polygon": polygon,
+            "bounds": bounds,
+            "score": score,
+        }
+
+    def predict(
+        self,
+        image_path: str,
+        points: List[List[float]],
+        point_labels: List[int],
+        mask_input: Optional[List[List[float]]] = None,
+        multimask_output: bool = False,
+    ) -> Dict[str, Any]:
+        """
+        Run point-based segmentation using SegmentViaPoints algorithm.
+
+        Args:
+            image_path: Path to the image file
+            points: List of [x, y] point coordinates
+            point_labels: List of labels (1=foreground, 0=background)
+            mask_input: Optional mask for refinement (not currently used)
+            multimask_output: Whether to return multiple masks (not currently used)
+
+        Returns:
+            Dict with polygon, bounds, score
+        """
+        from kwiver.vital.types import Point2d
+
+        self._ensure_algorithms_loaded()
+
+        if not points:
+            raise ValueError("At least one point is required")
+
+        if len(points) != len(point_labels):
+            raise ValueError("points and point_labels must have same length")
+
+        with self._algo_lock:
+            # Load image if different from cached
+            if self._current_image_path != image_path:
+                logger.debug(f"Loading image: {image_path}")
+                self._current_image_container = self._load_image(image_path)
+                self._current_image_path = image_path
+
+            # Convert points to vital Point2d objects
+            vital_points = [Point2d(float(p[0]), float(p[1])) for p in points]
+            vital_labels = [int(label) for label in point_labels]
+
+            # Run segmentation
+            detected_objects = self._segment_algo.segment(
+                self._current_image_container,
+                vital_points,
+                vital_labels
+            )
+
+        return self._detections_to_result(detected_objects)
+
+    def text_query(
+        self,
+        image_path: str,
+        text: str,
+        box_threshold: float = 0.3,
+        text_threshold: float = 0.25,
+        max_detections: int = 10,
+    ) -> Dict[str, Any]:
+        """
+        Detect objects using text query and segment them.
+
+        Args:
+            image_path: Path to the image file
+            text: Text describing objects to find
+            box_threshold: Detection confidence threshold
+            text_threshold: Text matching threshold
+            max_detections: Maximum number of detections to return
+
+        Returns:
+            Dict with list of detections, each containing polygon, bounds, score, label
+        """
+        from kwiver.vital.types import Timestamp
+
+        self._ensure_algorithms_loaded()
+
+        if self._text_query_algo is None:
+            return {
+                "success": False,
+                "error": "Text query is not supported by the current segmentation config.",
+            }
+
+        with self._algo_lock:
+            # Load image
+            image_container = self._load_image(image_path)
+
+            # Create timestamp
+            timestamp = Timestamp()
+            timestamp.set_frame(0)
+
+            # Run text query
+            track_sets = self._text_query_algo.perform_query(
+                text,
+                [image_container],
+                [timestamp],
+                []
+            )
+
+        # Extract detections from track set
+        detections = []
+        if track_sets and len(track_sets) > 0:
+            track_set = track_sets[0]
+            for track in track_set.tracks():
+                if len(detections) >= max_detections:
+                    break
+
+                for state in track:
+                    det_obj = state.detection()
+                    bbox = det_obj.bounding_box()
+                    box = [bbox.min_x(), bbox.min_y(), bbox.max_x(), bbox.max_y()]
+                    score = det_obj.confidence()
+
+                    detection = {
+                        "box": box,
+                        "bounds": box,
+                        "score": score,
+                        "label": text,
+                    }
+
+                    if det_obj.type() is not None:
+                        detection["label"] = det_obj.type().get_most_likely_class()
+
+                    # Get polygon from mask if available
+                    if det_obj.mask is not None:
+                        mask = det_obj.mask.image().asarray()
+                        if mask is not None and mask.size > 0:
+                            if mask.ndim == 3:
+                                mask = mask[:, :, 0]
+                            mask = (mask > 0).astype(np.uint8)
+                            poly_local, _ = self._mask_to_polygon(mask)
+
+                            if poly_local:
+                                x_offset = box[0]
+                                y_offset = box[1]
+                                polygon = [
+                                    [p[0] + x_offset, p[1] + y_offset]
+                                    for p in poly_local
+                                ]
+                                if len(polygon) > 4:
+                                    polygon = self._adaptive_simplify_polygon(
+                                        polygon, self.max_polygon_points, min_points=4
+                                    )
+                                detection["polygon"] = polygon
+
+                    detections.append(detection)
+                    break  # Only first state per track
+
+        return {
+            "success": True,
+            "detections": detections,
+        }
+
+    def set_image(self, image_path: str) -> None:
+        """Pre-load an image for multiple predictions."""
+        self._ensure_algorithms_loaded()
+
+        with self._algo_lock:
+            logger.debug(f"Pre-loading image: {image_path}")
+            self._current_image_container = self._load_image(image_path)
+            self._current_image_path = image_path
+
+    def clear_image(self) -> None:
+        """Clear the cached image."""
+        with self._algo_lock:
+            self._current_image_container = None
+            self._current_image_path = None
+
+    def is_available(self) -> bool:
+        """Check if segmentation is available."""
+        try:
+            from kwiver.vital.algo import SegmentViaPoints  # noqa: F401
+        except ImportError:
+            return False
+
+        return find_segmentation_config() is not None
+
+    def is_loaded(self) -> bool:
+        """Check if the algorithms are currently loaded."""
+        return self._segment_algo is not None
+
+    def is_text_query_available(self) -> bool:
+        """Check if text query is available."""
+        if self.is_loaded():
+            return self._text_query_algo is not None
+
+        if not self.is_available():
+            return False
+
+        try:
+            from kwiver.vital.algo import PerformTextQuery  # noqa: F401
+            return True
+        except ImportError:
+            return False
+
+    def get_service_info(self) -> Dict[str, Any]:
+        """Get information about the current service configuration."""
+        return {
+            'loaded': self.is_loaded(),
+            'text_query_available': self._text_query_algo is not None,
+            'config_path': str(self._config_path) if self._config_path else None,
+            'device': self.device,
+        }
+
+
+# Singleton accessor
+_service_instance: Optional[ViameSegmentationService] = None
+
+
+def get_viame_segmentation_service() -> ViameSegmentationService:
+    """Get the singleton ViameSegmentationService instance."""
+    global _service_instance
+    if _service_instance is None:
+        _service_instance = ViameSegmentationService()
+    return _service_instance
diff --git a/server/dive_server/views_rpc.py b/server/dive_server/views_rpc.py
index ecc33d6e2..3cad2d56b 100644
--- a/server/dive_server/views_rpc.py
+++ b/server/dive_server/views_rpc.py
@@ -1,3 +1,4 @@
+import logging
 from typing import List, Optional
 
 from girder.api import access
@@ -13,6 +14,9 @@
 from dive_utils.types import PipelineDescription, TrainingModelTuneArgs
 
 from . import crud, crud_rpc
+from .viame_segmentation_service import get_viame_segmentation_service
+
+logger = logging.getLogger(__name__)
 
 
 class RpcResource(Resource):
@@ -30,6 +34,13 @@ def __init__(self, resourceName):
         self.route("POST", ("convert_large_image", ":id"), self.convert_large_image)
         self.route("POST", ("batch_postprocess", ":id"), self.batch_postprocess)
 
+        # Interactive Segmentation
+        self.route("POST", ("segmentation_predict",), self.segmentation_predict)
+        self.route("GET", ("segmentation_status",), self.segmentation_status)
+
+        # Text Query (detection/segmentation via text prompts)
+        self.route("POST", ("text_query",), self.text_query)
+
     @access.user
     @autoDescribeRoute(
         Description("Run viame pipeline")
@@ -53,7 +64,7 @@ def __init__(self, resourceName):
     )
     def run_pipeline_task(self, folder, forceTranscoded, pipeline: PipelineDescription):
         return crud_rpc.run_pipeline(self.getCurrentUser(), folder, pipeline, forceTranscoded)
-    
+
     @access.user
     @autoDescribeRoute(
         Description("Export pipeline to ONNX")
@@ -303,3 +314,290 @@ def batch_postprocess(self, folder, skipJobs, skipTranscoding, limit):
             subFolder['meta']['MarkForPostProcess'] = False
             Folder().save(subFolder)
             crud_rpc.postprocess(self.getCurrentUser(), subFolder, skipJobs, skipTranscoding)
+
+    @access.user
+    @autoDescribeRoute(
+        Description("Run point-based interactive segmentation")
+        .modelParam(
+            "folderId",
+            description="Dataset folder ID",
+            model=Folder,
+            paramType="query",
+            required=True,
+            level=AccessType.READ,
+        )
+        .param(
+            "frameNumber",
+            description="Frame number to segment",
+            paramType="query",
+            dataType="integer",
+            required=True,
+        )
+        .jsonParam(
+            "body",
+            description="JSON object with point prompts",
+            paramType="body",
+            schema={
+                "points": List[List[float]],
+                "pointLabels": List[int],
+                "maskInput": Optional[List[List[float]]],
+                "multimaskOutput": Optional[bool],
+            },
+        )
+    )
+    def segmentation_predict(self, folder, frameNumber, body):
+        """
+        Run segmentation prediction with point prompts.
+
+        Query params:
+            folderId: Dataset folder ID
+            frameNumber: Frame number to segment
+
+        Request body:
+            points: List of [x, y] point coordinates
+            pointLabels: List of labels (1=foreground, 0=background)
+            maskInput: Optional low-res mask for refinement
+            multimaskOutput: Whether to return multiple masks (default: false)
+
+        Returns:
+            polygon: List of [x, y] coordinate pairs
+            bounds: [x_min, y_min, x_max, y_max]
+            score: Quality score
+            lowResMask: Low-res mask for subsequent refinement
+        """
+        from dive_utils import fromMeta
+        from dive_utils.constants import TypeMarker, ImageSequenceType, VideoType
+        from girder.models.file import File
+        from girder.models.item import Item
+        import os
+
+        service = get_viame_segmentation_service()
+
+        if not service.is_available():
+            return {
+                "success": False,
+                "error": "Segmentation is not available. Check your VIAME installation.",
+            }
+
+        try:
+            # Get dataset type and resolve image path
+            dataset_type = fromMeta(folder, TypeMarker)
+            image_path = None
+
+            if dataset_type == ImageSequenceType:
+                # Find image items in the folder, sorted by name
+                items = list(Item().find(
+                    {"folderId": folder["_id"]},
+                    sort=[("name", 1)]
+                ))
+
+                # Filter to only image items
+                image_items = [
+                    item for item in items
+                    if item.get("name", "").lower().endswith(
+                        ('.png', '.jpg', '.jpeg', '.tif', '.tiff', '.bmp')
+                    )
+                ]
+
+                if frameNumber < 0 or frameNumber >= len(image_items):
+                    return {
+                        "success": False,
+                        "error": f"Frame {frameNumber} out of range (0-{len(image_items)-1})",
+                    }
+
+                image_item = image_items[frameNumber]
+                files = list(File().find({"itemId": image_item["_id"]}))
+                if not files:
+                    return {
+                        "success": False,
+                        "error": f"No file found for frame {frameNumber}",
+                    }
+
+                # Get the file path from Girder's assetstore
+                file_doc = files[0]
+                assetstore = File().getAssetstoreAdapter(file_doc)
+                image_path = assetstore.fullPath(file_doc)
+
+            elif dataset_type == VideoType:
+                return {
+                    "success": False,
+                    "error": "Segmentation for video datasets is not yet supported. Use image sequences.",
+                }
+            else:
+                return {
+                    "success": False,
+                    "error": f"Unsupported dataset type: {dataset_type}",
+                }
+
+            if not image_path or not os.path.exists(image_path):
+                return {
+                    "success": False,
+                    "error": f"Image file not found: {image_path}",
+                }
+
+            # Run segmentation prediction
+            result = service.predict(
+                image_path=image_path,
+                points=body.get("points", []),
+                point_labels=body.get("pointLabels", []),
+                mask_input=body.get("maskInput"),
+                multimask_output=body.get("multimaskOutput", False),
+            )
+            return result
+
+        except Exception as e:
+            logger.exception("Segmentation prediction failed")
+            return {
+                "success": False,
+                "error": str(e),
+            }
+
+    @access.user
+    @autoDescribeRoute(Description("Get segmentation service status"))
+    def segmentation_status(self):
+        """Check if segmentation service is available and loaded."""
+        service = get_viame_segmentation_service()
+        service_info = service.get_service_info()
+        return {
+            "available": service.is_available(),
+            "loaded": service.is_loaded(),
+            "text_query_available": service.is_text_query_available(),
+            "device": service_info.get('device'),
+        }
+
+    @access.user
+    @autoDescribeRoute(
+        Description("Run text-based object detection and segmentation")
+        .modelParam(
+            "folderId",
+            description="Dataset folder ID",
+            model=Folder,
+            paramType="query",
+            required=True,
+            level=AccessType.READ,
+        )
+        .param(
+            "frameNumber",
+            description="Frame number to query",
+            paramType="query",
+            dataType="integer",
+            required=True,
+        )
+        .jsonParam(
+            "body",
+            description="JSON object with text query parameters",
+            paramType="body",
+            schema={
+                "text": str,
+                "boxThreshold": Optional[float],
+                "textThreshold": Optional[float],
+                "maxDetections": Optional[int],
+            },
+        )
+    )
+    def text_query(self, folder, frameNumber, body):
+        """
+        Detect objects using text query and segment them.
+
+        Query params:
+            folderId: Dataset folder ID
+            frameNumber: Frame number to query
+
+        Request body:
+            text: Text describing objects to find (e.g., "fish", "coral reef")
+            boxThreshold: Detection confidence threshold (default: 0.3)
+            textThreshold: Text matching threshold (default: 0.25)
+            maxDetections: Maximum detections to return (default: 10)
+
+        Returns:
+            detections: List of objects, each with polygon, bounds, score, label
+        """
+        from dive_utils import fromMeta
+        from dive_utils.constants import TypeMarker, ImageSequenceType, VideoType
+        from girder.models.file import File
+        from girder.models.item import Item
+        import os
+
+        service = get_viame_segmentation_service()
+
+        if not service.is_available():
+            return {
+                "success": False,
+                "error": "Segmentation service is not available.",
+            }
+
+        if not service.is_text_query_available():
+            return {
+                "success": False,
+                "error": "Text query is not supported by the current segmentation config.",
+            }
+
+        try:
+            # Get dataset type and resolve image path
+            dataset_type = fromMeta(folder, TypeMarker)
+            image_path = None
+
+            if dataset_type == ImageSequenceType:
+                items = list(Item().find(
+                    {"folderId": folder["_id"]},
+                    sort=[("name", 1)]
+                ))
+
+                image_items = [
+                    item for item in items
+                    if item.get("name", "").lower().endswith(
+                        ('.png', '.jpg', '.jpeg', '.tif', '.tiff', '.bmp')
+                    )
+                ]
+
+                if frameNumber < 0 or frameNumber >= len(image_items):
+                    return {
+                        "success": False,
+                        "error": f"Frame {frameNumber} out of range (0-{len(image_items)-1})",
+                    }
+
+                image_item = image_items[frameNumber]
+                files = list(File().find({"itemId": image_item["_id"]}))
+                if not files:
+                    return {
+                        "success": False,
+                        "error": f"No file found for frame {frameNumber}",
+                    }
+
+                file_doc = files[0]
+                assetstore = File().getAssetstoreAdapter(file_doc)
+                image_path = assetstore.fullPath(file_doc)
+
+            elif dataset_type == VideoType:
+                return {
+                    "success": False,
+                    "error": "Text query for video datasets is not yet supported.",
+                }
+            else:
+                return {
+                    "success": False,
+                    "error": f"Unsupported dataset type: {dataset_type}",
+                }
+
+            if not image_path or not os.path.exists(image_path):
+                return {
+                    "success": False,
+                    "error": f"Image file not found: {image_path}",
+                }
+
+            # Run text query
+            result = service.text_query(
+                image_path=image_path,
+                text=body.get("text", "object"),
+                box_threshold=body.get("boxThreshold", 0.3),
+                text_threshold=body.get("textThreshold", 0.25),
+                max_detections=body.get("maxDetections", 10),
+            )
+            return result
+
+        except Exception as e:
+            logger.exception("Text query failed")
+            return {
+                "success": False,
+                "error": str(e),
+            }