From 11f70648698a76ec6cc389b6138a0c747cd8ad3b Mon Sep 17 00:00:00 2001
From: Bryon Lewis <Bryon.Lewis@kitware.com>
Date: Thu, 3 Sep 2026 14:50:52 -0400
Subject: [PATCH 1/4] add editing/new track icons

---
 client/src/components/LayerManager.vue        |  8 ++-
 .../annotators/AnnotatorImageCursor.vue       | 65 +++++++++++++++++++
 .../components/annotators/ImageAnnotator.vue  | 21 +++++-
 .../components/annotators/VideoAnnotator.vue  | 25 +++++--
 .../src/components/annotators/annotator.scss  |  4 ++
 .../annotators/mediaControllerType.ts         |  4 +-
 .../annotators/useAnnotatorImageCursor.ts     | 23 +++++++
 .../annotators/useMediaController.ts          |  7 +-
 client/src/components/index.ts                |  3 +
 client/src/layers/EditAnnotationLayer.ts      | 10 ++-
 .../src/layers/MediaLayers/maskEditorLayer.ts | 17 +++++
 client/src/layers/UILayers/ToolTipLayer.ts    | 33 +++++++---
 client/src/layers/UILayers/ToolTipWidget.vue  | 13 ++--
 .../src/layers/UILayers/mountGeoJsWidget.ts   | 16 +++++
 14 files changed, 219 insertions(+), 30 deletions(-)
 create mode 100644 client/src/components/annotators/AnnotatorImageCursor.vue
 create mode 100644 client/src/components/annotators/useAnnotatorImageCursor.ts
 create mode 100644 client/src/layers/UILayers/mountGeoJsWidget.ts

diff --git a/client/src/components/LayerManager.vue b/client/src/components/LayerManager.vue
index efad9d75..09d2f4be 100644
--- a/client/src/components/LayerManager.vue
+++ b/client/src/components/LayerManager.vue
@@ -478,7 +478,7 @@ export default defineComponent({
         visualMaskEditLayer.setType('rectangle');
         visualMaskEditLayer.setKey('');
         visualMaskEditLayer.changeData([visualMaskFrame]);
-        annotator.setImageCursor('mdi-vector-rectangle');
+        annotator.setImageCursor('mdi-vector-rectangle', true);
         rectAnnotationLayer.setDisableClicking(false);
       } else if (selectedTrackId !== null) {
         if ((editingTrack) && !(currentFrameIds || []).includes(selectedTrackId)
@@ -500,13 +500,15 @@ export default defineComponent({
           editingTracks.push(trackFrame);
         }
         if (editingTracks.length && editingTrack !== 'Mask') {
+          // These layers share the annotator cursor. Disable them before the
+          // active edit layer sets its cursor so they cannot clear it afterward.
+          visualMaskEditLayer.disable();
+          maskEditorLayer.disable();
           if (editingTrack) {
             editAnnotationLayer.setType(editingTrack);
             editAnnotationLayer.setKey(selectedKey);
             editAnnotationLayer.changeData(editingTracks);
           }
-          visualMaskEditLayer.disable();
-          maskEditorLayer.disable();
         } else if (editingTracks.length && editingTrack === 'Mask') {
           maskLayer.disable();
           visualMaskEditLayer.disable();
diff --git a/client/src/components/annotators/AnnotatorImageCursor.vue b/client/src/components/annotators/AnnotatorImageCursor.vue
new file mode 100644
index 00000000..b4e879a3
--- /dev/null
+++ b/client/src/components/annotators/AnnotatorImageCursor.vue
@@ -0,0 +1,65 @@
+<script lang="ts">
+import { computed, defineComponent } from 'vue';
+
+export default defineComponent({
+  name: 'AnnotatorImageCursor',
+  props: {
+    imageCursor: {
+      type: String,
+      default: '',
+    },
+    imageCursorEditing: {
+      type: Boolean,
+      default: false,
+    },
+    cursor: {
+      type: String,
+      default: 'default',
+    },
+  },
+  setup(props) {
+    const showEditBadge = computed(
+      () => props.imageCursorEditing && !!props.imageCursor,
+    );
+
+    return {
+      showEditBadge,
+    };
+  },
+});
+</script>
+
+<template>
+  <span
+    class="annotator-image-cursor"
+  >
+    <v-icon :class="imageCursor">
+      {{ imageCursor }}
+    </v-icon>
+    <v-icon
+      v-if="showEditBadge"
+      class="annotator-image-cursor__badge"
+      small
+    >
+      mdi-pencil
+    </v-icon>
+  </span>
+</template>
+
+<style lang="scss" scoped>
+.annotator-image-cursor {
+  position: relative;
+  display: inline-flex;
+  line-height: 1;
+}
+
+.annotator-image-cursor__badge {
+  position: absolute;
+  right: -10px;
+  bottom: -8px;
+  font-size: 11px !important;
+  width: 11px;
+  height: 11px;
+  background: transparent;
+}
+</style>
diff --git a/client/src/components/annotators/ImageAnnotator.vue b/client/src/components/annotators/ImageAnnotator.vue
index 5c17ea68..2ddbafcd 100644
--- a/client/src/components/annotators/ImageAnnotator.vue
+++ b/client/src/components/annotators/ImageAnnotator.vue
@@ -4,6 +4,8 @@ import {
 } from 'vue';
 import { SetTimeFunc } from '../../use/useTimeObserver';
 import { injectCameraInitializer } from './useMediaController';
+import AnnotatorImageCursor from './AnnotatorImageCursor.vue';
+import useAnnotatorImageCursor from './useAnnotatorImageCursor';
 
 export interface ImageDataItem {
   url: string;
@@ -21,6 +23,7 @@ function loadImageFunc(imageDataItem: ImageDataItem, img: HTMLImageElement) {
 }
 export default defineComponent({
   name: 'ImageAnnotator',
+  components: { AnnotatorImageCursor },
   props: {
     imageData: {
       type: Array as PropType<ImageDataItem[]>,
@@ -69,6 +72,13 @@ export default defineComponent({
       // eslint-disable-next-line @typescript-eslint/no-use-before-define
       seek, pause, play, setVolume: unimplemented, setSpeed: unimplemented,
     });
+    const { playbackCursor } = useAnnotatorImageCursor(
+      toRef(data, 'imageCursor'),
+      toRef(data, 'cursor'),
+      toRef(data, 'imageCursorEditing'),
+    );
+    const imageCursorIcon = toRef(data, 'imageCursor');
+    const imageCursorEditing = toRef(data, 'imageCursorEditing');
     data.maxFrame = props.imageData.length - 1;
     // Below are configuration settings we can set until we decide on good numbers to utilize.
     let local = {
@@ -374,6 +384,9 @@ export default defineComponent({
       imageCursorRef: imageCursor,
       containerRef: container,
       cursorHandler,
+      playbackCursor,
+      imageCursorIcon,
+      imageCursorEditing,
     };
   },
 });
@@ -412,12 +425,16 @@ export default defineComponent({
       ref="imageCursorRef"
       class="imageCursor"
     >
-      <v-icon> {{ data.imageCursor }} </v-icon>
+      <AnnotatorImageCursor
+        :image-cursor="imageCursorIcon"
+        :image-cursor-editing="imageCursorEditing"
+        :cursor="data.cursor"
+      />
     </div>
     <div
       ref="containerRef"
       class="playback-container"
-      :style="{ cursor: data.cursor }"
+      :style="{ cursor: playbackCursor }"
       @mousemove="cursorHandler.handleMouseMove"
       @mouseleave="cursorHandler.handleMouseLeave"
       @mouseover="cursorHandler.handleMouseEnter"
diff --git a/client/src/components/annotators/VideoAnnotator.vue b/client/src/components/annotators/VideoAnnotator.vue
index 9b4d6660..cdaca19c 100644
--- a/client/src/components/annotators/VideoAnnotator.vue
+++ b/client/src/components/annotators/VideoAnnotator.vue
@@ -4,6 +4,8 @@ import {
 } from 'vue';
 import { Flick, SetTimeFunc } from '../../use/useTimeObserver';
 import { injectCameraInitializer } from './useMediaController';
+import AnnotatorImageCursor from './AnnotatorImageCursor.vue';
+import useAnnotatorImageCursor from './useAnnotatorImageCursor';
 /**
  * For MPEG codecs, the PTS (Presentation Timestamp)
  * should be forced ahead 1 tick. currentTime has a finite
@@ -66,6 +68,7 @@ function kwiverSeek(frame: number, frameRate: number, originalFps: number) {
 }
 export default defineComponent({
   name: 'VideoAnnotator',
+  components: { AnnotatorImageCursor },
   props: {
     videoUrl: {
       type: String,
@@ -116,6 +119,13 @@ export default defineComponent({
       // eslint-disable-next-line @typescript-eslint/no-use-before-define
       seek, pause, play, setVolume, setSpeed,
     });
+    const { playbackCursor } = useAnnotatorImageCursor(
+      toRef(data, 'imageCursor'),
+      toRef(data, 'cursor'),
+      toRef(data, 'imageCursorEditing'),
+    );
+    const imageCursorIcon = toRef(data, 'imageCursor');
+    const imageCursorEditing = toRef(data, 'imageCursorEditing');
     function makeVideo() {
       const video = document.createElement('video');
       video.preload = 'auto';
@@ -263,16 +273,16 @@ export default defineComponent({
       containerRef: container,
       cursorHandler,
       mediaController,
+      playbackCursor,
+      imageCursorIcon,
+      imageCursorEditing,
     };
   },
 });
 </script>
 
 <template>
-  <div
-    class="video-annotator"
-    :style="{ cursor: data.cursor }"
-  >
+  <div class="video-annotator">
     <svg
       width="0"
       height="0"
@@ -304,11 +314,16 @@ export default defineComponent({
       ref="imageCursorRef"
       class="imageCursor"
     >
-      <v-icon> {{ data.imageCursor }} </v-icon>
+      <AnnotatorImageCursor
+        :image-cursor="imageCursorIcon"
+        :image-cursor-editing="imageCursorEditing"
+        :cursor="data.cursor"
+      />
     </div>
     <div
       ref="containerRef"
       class="playback-container"
+      :style="{ cursor: playbackCursor }"
       @mousemove="cursorHandler.handleMouseMove"
       @mouseleave="cursorHandler.handleMouseLeave"
       @mouseover="cursorHandler.handleMouseEnter"
diff --git a/client/src/components/annotators/annotator.scss b/client/src/components/annotators/annotator.scss
index d74cc08a..9606adf4 100644
--- a/client/src/components/annotators/annotator.scss
+++ b/client/src/components/annotators/annotator.scss
@@ -56,7 +56,11 @@
   backface-visibility: hidden;
   top: 0;
   left: 0;
+  min-width: 24px;
+  min-height: 24px;
+  overflow: visible;
   pointer-events: none;
+  line-height: 1;
 }
 .controls {
   bottom:0;
diff --git a/client/src/components/annotators/mediaControllerType.ts b/client/src/components/annotators/mediaControllerType.ts
index 16b3579a..ff1e7ee0 100644
--- a/client/src/components/annotators/mediaControllerType.ts
+++ b/client/src/components/annotators/mediaControllerType.ts
@@ -53,6 +53,8 @@ export interface MediaController extends AggregateMediaController {
 
   centerOn(coords: { x: number; y: number; z: number }): void;
   setCursor(camera: string): void;
-  setImageCursor(camera: string): void;
+  setImageCursor(icon: string, editing?: boolean): void;
+  imageCursor: Readonly<Ref<string>>;
+  imageCursorEditing: Readonly<Ref<boolean>>;
   resetMapDimensions(width: number, height: number, margin?: number): void;
 }
diff --git a/client/src/components/annotators/useAnnotatorImageCursor.ts b/client/src/components/annotators/useAnnotatorImageCursor.ts
new file mode 100644
index 00000000..4ce2f0af
--- /dev/null
+++ b/client/src/components/annotators/useAnnotatorImageCursor.ts
@@ -0,0 +1,23 @@
+import { computed, Ref } from 'vue';
+
+export default function useAnnotatorImageCursor(
+  imageCursor: Ref<string>,
+  cursor: Ref<string>,
+  imageCursorEditing: Ref<boolean>,
+) {
+  const displayImageCursor = computed(() => imageCursor.value);
+  const showEditBadge = computed(
+    () => imageCursorEditing.value && !!imageCursor.value,
+  );
+  const showCreateBadge = computed(
+    () => !imageCursorEditing.value && !!imageCursor.value,
+  );
+  const playbackCursor = computed(() => cursor.value);
+
+  return {
+    displayImageCursor,
+    playbackCursor,
+    showEditBadge,
+    showCreateBadge,
+  };
+}
diff --git a/client/src/components/annotators/useMediaController.ts b/client/src/components/annotators/useMediaController.ts
index e48d567b..defa90a0 100644
--- a/client/src/components/annotators/useMediaController.ts
+++ b/client/src/components/annotators/useMediaController.ts
@@ -37,6 +37,7 @@ interface MediaControllerReactiveData {
   syncedFrame: number;
   cursor: string;
   imageCursor: string;
+  imageCursorEditing: boolean;
   originalBounds: {
     left: number;
     top: number;
@@ -213,6 +214,7 @@ export function useMediaController() {
       syncedFrame: 0,
       cursor: 'default',
       imageCursor: '',
+      imageCursorEditing: false,
       originalBounds: {
         left: 0,
         top: 0,
@@ -227,9 +229,10 @@ export function useMediaController() {
       }
     }
 
-    function setImageCursor(newCursor: string) {
+    function setImageCursor(newCursor: string, editing = false) {
       if (state[camera]) {
         state[camera].imageCursor = `${newCursor}`;
+        state[camera].imageCursorEditing = editing;
       }
     }
 
@@ -417,6 +420,8 @@ export function useMediaController() {
       centerOn,
       setCursor,
       setImageCursor,
+      imageCursor: toRef(state[camera], 'imageCursor'),
+      imageCursorEditing: toRef(state[camera], 'imageCursorEditing'),
       setVolume: _setVolume,
       setSpeed: _setSpeed,
       getController,
diff --git a/client/src/components/index.ts b/client/src/components/index.ts
index de5c2b31..f345e215 100644
--- a/client/src/components/index.ts
+++ b/client/src/components/index.ts
@@ -6,6 +6,7 @@
 
 import ImageAnnotator from './annotators/ImageAnnotator.vue';
 import VideoAnnotator from './annotators/VideoAnnotator.vue';
+import AnnotatorImageCursor from './annotators/AnnotatorImageCursor.vue';
 
 import Controls from './controls/Controls.vue';
 import EventChart from './controls/EventChart.vue';
@@ -29,8 +30,10 @@ import TypeItem from './TypeItem.vue';
 import TypePicker from './TypePicker.vue';
 
 export * from './annotators/useMediaController';
+export { default as useAnnotatorImageCursor } from './annotators/useAnnotatorImageCursor';
 export {
   /* Annotators */
+  AnnotatorImageCursor,
   ImageAnnotator,
   VideoAnnotator,
   /* Controls */
diff --git a/client/src/layers/EditAnnotationLayer.ts b/client/src/layers/EditAnnotationLayer.ts
index 3b428472..94709210 100644
--- a/client/src/layers/EditAnnotationLayer.ts
+++ b/client/src/layers/EditAnnotationLayer.ts
@@ -304,12 +304,16 @@ export default class EditAnnotationLayer extends BaseLayer<GeoJSON.Feature> {
     } else {
       this.featureLayer.mode(null);
     }
+    this.calculateCursorImage();
   }
 
   calculateCursorImage() {
-    if (this.getMode() === 'creation') {
-      // TODO:  we may want to make this more generic or utilize the icons from editMenu
-      this.annotator.setImageCursor(`${typeIconMapper.get(this.type)}`);
+    const mode = this.getMode();
+    if (mode === 'creation' || mode === 'editing') {
+      const icon = typeIconMapper.get(this.type);
+      if (icon) {
+        this.annotator.setImageCursor(icon, mode === 'editing');
+      }
     }
   }
 
diff --git a/client/src/layers/MediaLayers/maskEditorLayer.ts b/client/src/layers/MediaLayers/maskEditorLayer.ts
index 17432e89..af69e7cb 100644
--- a/client/src/layers/MediaLayers/maskEditorLayer.ts
+++ b/client/src/layers/MediaLayers/maskEditorLayer.ts
@@ -157,6 +157,7 @@ export default class MaskEditorLayer {
           this.color = 'transparent';
         }
       }
+      this.updateImageCursor();
     });
     this.featureLayer.opacity(editorOptions.opacity.value / 100.0);
     watch(editorOptions.opacity, () => {
@@ -293,6 +294,21 @@ export default class MaskEditorLayer {
         this.color = 'transparent';
       }
     }
+    this.updateImageCursor();
+  }
+
+  updateImageCursor() {
+    if (!this.enabled) {
+      return;
+    }
+    const tool = this.editorOptionsRef.toolEnabled.value;
+    if (tool === 'pointer') {
+      this.annotator.setImageCursor('');
+    } else if (tool === 'brush') {
+      this.annotator.setImageCursor('mdi-brush-outline', false);
+    } else if (tool === 'eraser') {
+      this.annotator.setImageCursor('mdi-eraser', true);
+    }
   }
 
   drawBrushIcon(x: number, y: number) {
@@ -363,5 +379,6 @@ export default class MaskEditorLayer {
     this.trackId = null;
     this.frameId = null;
     this.enabled = false;
+    this.annotator.setImageCursor('');
   }
 }
diff --git a/client/src/layers/UILayers/ToolTipLayer.ts b/client/src/layers/UILayers/ToolTipLayer.ts
index 2cd306fc..9c815fc7 100644
--- a/client/src/layers/UILayers/ToolTipLayer.ts
+++ b/client/src/layers/UILayers/ToolTipLayer.ts
@@ -1,6 +1,7 @@
-import Vue from 'vue';
 import geo, { GeoEvent } from 'geojs';
+import getVuetify from 'platform/web-girder/plugins/vuetify';
 import { MediaController } from '../../components/annotators/mediaControllerType';
+import mountGeoJsWidget from './mountGeoJsWidget';
 
 interface WidgetPosition {
   x: number;
@@ -24,26 +25,32 @@ export interface DOMWidget {
  * dereferenced inside of the Vue component to properly update.
  * This will probably change once Vue 3 is adopted and <teleport> can be used
  */
-export default class UILayer {
+export default class ToolTipLayer {
   annotator: MediaController;
 
   widgets: Record<string, DOMWidget>;
 
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  map: any;
+
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   uiLayer: any;
 
+  vuetify = getVuetify(undefined);
+
   constructor(annotator: MediaController) {
     this.annotator = annotator;
     this.widgets = {};
-    this.uiLayer = this.annotator.geoViewerRef.value.createLayer('ui');
-    this.uiLayer.geoOn(geo.event.mousemove, this.updateToolTipPositions);
-    this.uiLayer.geoOn(geo.event.zoom, this.zoomToolTipPosition);
+    this.map = this.annotator.geoViewerRef.value;
+    this.uiLayer = this.map.createLayer('ui');
+    this.map.geoOn(geo.event.mousemove, this.updateToolTipPositions);
+    this.map.geoOn(geo.event.zoom, this.zoomToolTipPosition);
   }
 
   updateWidgetToolTipPosition(mousePos: WidgetPosition, widget: DOMWidget) {
     const tipOffset = widget.toolTipOffset;
-    const newOffset = this.uiLayer.map().gcsToDisplay(mousePos);
-    const finalOffset = this.uiLayer.map().displayToGcs(
+    const newOffset = this.map.gcsToDisplay(mousePos);
+    const finalOffset = this.map.displayToGcs(
       {
         x: newOffset.x + tipOffset.x, y: newOffset.y + tipOffset.y,
       },
@@ -66,6 +73,9 @@ export default class UILayer {
       if (this.widgets[name].toolTip) {
         this.updateWidgetToolTipPosition(mousePos, this.widgets[name]);
         this.widgets[name].lastMousePos = mousePos;
+        this.widgets[name].canvas().style.display = 'block';
+      } else {
+        this.widgets[name].canvas().style.display = 'none';
       }
     });
   };
@@ -81,11 +91,13 @@ export default class UILayer {
     const widget: DOMWidget = this.uiLayer.createWidget('dom', { position });
     widget.canvas().setAttribute('id', name);
     const parent = widget.canvas();
+    parent.style.pointerEvents = 'none';
+    parent.style.overflow = 'visible';
+    parent.style.background = 'transparent';
+    parent.style.display = 'none';
     const div = document.createElement('div');
     const element = parent.appendChild(div);
-    new Vue({
-      render: (h) => h(component, { props }),
-    }).$mount(element);
+    mountGeoJsWidget(element, component, props, this.vuetify);
     widget.toolTipOffset = position;
     widget.toolTip = false;
     widget.lastMousePos = position;
@@ -97,6 +109,7 @@ export default class UILayer {
   setToolTipWidget(name: string, on: boolean) {
     if (this.widgets[name]) {
       this.widgets[name].toolTip = on;
+      this.widgets[name].canvas().style.display = on ? 'block' : 'none';
     }
   }
 }
diff --git a/client/src/layers/UILayers/ToolTipWidget.vue b/client/src/layers/UILayers/ToolTipWidget.vue
index 8559483c..88c338b5 100644
--- a/client/src/layers/UILayers/ToolTipWidget.vue
+++ b/client/src/layers/UILayers/ToolTipWidget.vue
@@ -1,6 +1,6 @@
 <script lang="ts">
 import {
-  defineComponent, PropType, Ref,
+  computed, defineComponent, PropType, Ref,
 } from 'vue';
 import { StateStyles } from '../../StyleManager';
 import { ToolTipWidgetData } from './UILayerTypes';
@@ -9,7 +9,7 @@ import { ToolTipWidgetData } from './UILayerTypes';
   on a GeoJS canvas element.  To ensure reactivity between the main Vue App
   and this element the props are passed in the initalization function instead of on a template.
   This is why reactivate data in this component is utilizing PropType<Ref<data>>.
-  All references to reactive PropType<Ref<data>> need to be dereferenced in the template as well.
+  Ref props must be unwrapped in setup before use in the template.
  */
 export default defineComponent({
   name: 'ToolTipWidget',
@@ -36,13 +36,16 @@ export default defineComponent({
     },
   },
   setup(props) {
+    const items = computed(() => props.dataList.value || []);
+    const selectedTrackId = computed(() => props.selected.value);
     const coloring = (data: ToolTipWidgetData) => {
-      if (data.trackId === props.selected.value) {
+      if (data.trackId === selectedTrackId.value) {
         return props.stateStyling.selected.color;
       }
       return props.color(data.type);
     };
     return {
+      items,
       coloring,
     };
   },
@@ -51,13 +54,13 @@ export default defineComponent({
 
 <template>
   <v-card
-    v-if="dataList.length"
+    v-if="items.length"
     dark
     class="d-inline-flex pa-2"
   >
     <div>
       <div
-        v-for="(item, index) in dataList"
+        v-for="(item, index) in items"
         :key="index"
       >
         <span
diff --git a/client/src/layers/UILayers/mountGeoJsWidget.ts b/client/src/layers/UILayers/mountGeoJsWidget.ts
new file mode 100644
index 00000000..1b2a35c7
--- /dev/null
+++ b/client/src/layers/UILayers/mountGeoJsWidget.ts
@@ -0,0 +1,16 @@
+import Vue from 'vue';
+import type { Vuetify } from 'vuetify';
+
+export default function mountGeoJsWidget(
+  element: HTMLElement,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  component: any,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  props: Record<string, any>,
+  vuetify?: Vuetify,
+) {
+  return new Vue({
+    vuetify,
+    render: (h) => h(component, { props }),
+  }).$mount(element);
+}

From 4e4b5cac976d342f164e91b0d05338126c3f0eb3 Mon Sep 17 00:00:00 2001
From: Bryon Lewis <Bryon.Lewis@kitware.com>
Date: Fri, 4 Sep 2026 15:02:41 -0400
Subject: [PATCH 2/4] add customUI track bar

---
 .../components/CustomUI/CustomUIBase.vue      |  43 +++-
 .../CustomUI/CustomUIEditingStatus.vue        |  62 +++++
 .../components/CustomUI/CustomUITrackList.vue | 191 ++++++++++++++
 .../CustomUI/useCustomUITrackList.ts          | 103 ++++++++
 .../components/CustomUI/useEditingStatus.ts   |  78 ++++++
 client/dive-common/components/EditorMenu.vue  |  33 +--
 .../UISettings/UIContextBar.vue               | 240 +++++++++++++++++-
 .../use/editingModeInstructions.ts            |  73 ++++++
 client/dive-common/use/useModeManager.ts      |  31 +--
 client/src/ConfigurationManager.ts            |  23 ++
 10 files changed, 831 insertions(+), 46 deletions(-)
 create mode 100644 client/dive-common/components/CustomUI/CustomUIEditingStatus.vue
 create mode 100644 client/dive-common/components/CustomUI/CustomUITrackList.vue
 create mode 100644 client/dive-common/components/CustomUI/useCustomUITrackList.ts
 create mode 100644 client/dive-common/components/CustomUI/useEditingStatus.ts
 create mode 100644 client/dive-common/use/editingModeInstructions.ts

diff --git a/client/dive-common/components/CustomUI/CustomUIBase.vue b/client/dive-common/components/CustomUI/CustomUIBase.vue
index 6eba3123..57503b38 100644
--- a/client/dive-common/components/CustomUI/CustomUIBase.vue
+++ b/client/dive-common/components/CustomUI/CustomUIBase.vue
@@ -7,6 +7,8 @@ import {
 
 import StackedVirtualSidebarContainer from 'dive-common/components/StackedVirtualSidebarContainer.vue';
 import CustomUIAttributeValueDisplay from 'dive-common/components/CustomUI/CustomUIAttributeValueDisplay.vue';
+import CustomUITrackList from 'dive-common/components/CustomUI/CustomUITrackList.vue';
+import CustomUIEditingStatus from 'dive-common/components/CustomUI/CustomUIEditingStatus.vue';
 import {
   useAttributes, useCameraStore, useConfiguration, useSelectedTrackId, useTime,
   useHandler, useTrackStyleManager,
@@ -77,6 +79,8 @@ export default defineComponent({
     StackedVirtualSidebarContainer,
     AttributeSubsection,
     CustomUIAttributeValueDisplay,
+    CustomUITrackList,
+    CustomUIEditingStatus,
   },
 
   props: {
@@ -103,6 +107,19 @@ export default defineComponent({
     const title = computed(() => configMan.configuration.value?.customUI?.title || 'Custom Actions');
     const information = computed(() => configMan.configuration.value?.customUI?.information || []);
     const updatedWidth = computed(() => configMan.configuration.value?.customUI?.width || props.width);
+    const trackListSettings = computed(() => configMan.configuration.value?.customUI?.trackList);
+    const trackListEnabled = computed(() => (
+      trackListSettings.value !== undefined && trackListSettings.value.enabled !== false
+    ));
+    const showEditingStatus = computed(() => (
+      trackListEnabled.value && trackListSettings.value?.showEditingStatus !== false
+    ));
+    const editingStatusTitle = computed(() => (
+      trackListSettings.value?.editingStatusTitle || 'Current Mode'
+    ));
+    const trackListAboveActions = computed(() => (
+      trackListSettings.value?.position === 'above'
+    ));
     context.nudgeWidth(updatedWidth.value);
     function getAttributeUser({ name, belongs }: { name: string; belongs: 'track' | 'detection' }) {
       const attribute = attributes.value.find((attr) => attr.name === name && attr.belongs === belongs);
@@ -762,6 +779,11 @@ export default defineComponent({
       getDisplayValueEntry,
       shouldShowDisplayValue,
       LONG_VALUE_EXPAND_THRESHOLD,
+      trackListSettings,
+      trackListEnabled,
+      showEditingStatus,
+      editingStatusTitle,
+      trackListAboveActions,
     };
   },
 });
@@ -775,6 +797,14 @@ export default defineComponent({
           {{ item }}
         </p>
         <v-divider />
+        <template v-if="trackListEnabled && trackListAboveActions">
+          <CustomUIEditingStatus
+            v-if="showEditingStatus"
+            :title="editingStatusTitle"
+          />
+          <CustomUITrackList :settings="trackListSettings" />
+          <v-divider class="my-2" />
+        </template>
         <v-row v-if="actionButtons.length" dense>
           Action Buttons
         </v-row>
@@ -802,10 +832,21 @@ export default defineComponent({
             </v-tooltip>
           </v-col>
         </v-row>
+        <template v-if="trackListEnabled && !trackListAboveActions">
+          <v-divider class="my-2" />
+          <CustomUIEditingStatus
+            v-if="showEditingStatus"
+            :title="editingStatusTitle"
+          />
+          <CustomUITrackList :settings="trackListSettings" />
+        </template>
         <v-divider />
-        <p v-if="attributeButtons.length && selectedTrackIdRef === null">
+        <p v-if="attributeButtons.length && selectedTrackIdRef === null && !trackListEnabled">
           Attribute Action Buttons are disabled because no track is selected
         </p>
+        <p v-else-if="attributeButtons.length && selectedTrackIdRef === null && trackListEnabled">
+          Select a track from the list above to use attribute buttons
+        </p>
         <p v-else>
           Attribute Buttons
         </p>
diff --git a/client/dive-common/components/CustomUI/CustomUIEditingStatus.vue b/client/dive-common/components/CustomUI/CustomUIEditingStatus.vue
new file mode 100644
index 00000000..e39e55bc
--- /dev/null
+++ b/client/dive-common/components/CustomUI/CustomUIEditingStatus.vue
@@ -0,0 +1,62 @@
+<script lang="ts">
+import { defineComponent } from 'vue';
+import useEditingStatus from './useEditingStatus';
+
+export default defineComponent({
+  name: 'CustomUIEditingStatus',
+  props: {
+    title: {
+      type: String,
+      default: 'Current Mode',
+    },
+  },
+  setup() {
+    const {
+      statusHeader,
+      instructionText,
+    } = useEditingStatus();
+
+    return {
+      statusHeader,
+      instructionText,
+    };
+  },
+});
+</script>
+
+<template>
+  <v-card
+    outlined
+    class="custom-ui-editing-status mb-3"
+  >
+    <v-card-text class="py-2 px-3">
+      <div class="custom-ui-editing-status__title text-caption grey--text text--lighten-1 mb-1">
+        {{ title }}
+      </div>
+      <div class="d-flex align-start">
+        <v-icon
+          small
+          class="mr-2 mt-1"
+          :color="statusHeader.color || undefined"
+        >
+          {{ statusHeader.icon }}
+        </v-icon>
+        <div>
+          <div class="custom-ui-editing-status__label text-subtitle-2">
+            {{ statusHeader.text }}
+          </div>
+          <div class="custom-ui-editing-status__instruction text-caption">
+            {{ instructionText }}
+          </div>
+        </div>
+      </div>
+    </v-card-text>
+  </v-card>
+</template>
+
+<style scoped lang="scss">
+.custom-ui-editing-status__instruction {
+  line-height: 1.35;
+  margin-top: 2px;
+}
+</style>
diff --git a/client/dive-common/components/CustomUI/CustomUITrackList.vue b/client/dive-common/components/CustomUI/CustomUITrackList.vue
new file mode 100644
index 00000000..61b9e6da
--- /dev/null
+++ b/client/dive-common/components/CustomUI/CustomUITrackList.vue
@@ -0,0 +1,191 @@
+<script lang="ts">
+import {
+  defineComponent, PropType, ref, toRef, watch,
+} from 'vue';
+import { CustomUITrackListSettings } from 'vue-media-annotator/ConfigurationManager';
+import { AnnotationId } from 'vue-media-annotator/BaseAnnotation';
+import { useTrackStyleManager } from 'vue-media-annotator/provides';
+import useCustomUITrackList from './useCustomUITrackList';
+
+export default defineComponent({
+  name: 'CustomUITrackList',
+  props: {
+    settings: {
+      type: Object as PropType<CustomUITrackListSettings>,
+      default: () => ({}),
+    },
+  },
+  setup(props) {
+    const settingsRef = toRef(props, 'settings');
+    const panelExpanded = ref<number | undefined>(undefined);
+    const typeStylingRef = useTrackStyleManager().typeStyling;
+    const {
+      resolvedSettings,
+      filteredTracks,
+      readOnlyMode,
+      isSelected,
+      isEditing,
+      selectTrack,
+      editTrack,
+      deleteTrack,
+    } = useCustomUITrackList(settingsRef);
+
+    watch(
+      () => resolvedSettings.value.defaultExpanded,
+      (expanded) => {
+        panelExpanded.value = expanded ? 0 : undefined;
+      },
+      { immediate: true },
+    );
+
+    const onRowClick = (trackId: AnnotationId) => {
+      if (resolvedSettings.value.actions.select) {
+        selectTrack(trackId);
+      }
+    };
+
+    return {
+      panelExpanded,
+      resolvedSettings,
+      filteredTracks,
+      readOnlyMode,
+      typeStylingRef,
+      isSelected,
+      isEditing,
+      selectTrack,
+      editTrack,
+      deleteTrack,
+      onRowClick,
+    };
+  },
+});
+</script>
+
+<template>
+  <v-expansion-panels
+    v-model="panelExpanded"
+    flat
+    class="custom-ui-track-list mb-3"
+  >
+    <v-expansion-panel>
+      <v-expansion-panel-header class="py-2">
+        <span>{{ resolvedSettings.title }} ({{ filteredTracks.length }})</span>
+      </v-expansion-panel-header>
+      <v-expansion-panel-content>
+        <p
+          v-if="!resolvedSettings.typeFilter.length"
+          class="text-caption grey--text mb-2"
+        >
+          Configure track types in Custom UI settings to populate this list.
+        </p>
+        <div
+          class="custom-ui-track-list__rows"
+          :style="{ maxHeight: `${resolvedSettings.maxHeight}px` }"
+        >
+          <div
+            v-for="entry in filteredTracks"
+            :key="entry.trackId"
+            class="custom-ui-track-list__row d-flex align-center"
+            :class="{
+              'custom-ui-track-list__row--selected': isSelected(entry.trackId),
+              'custom-ui-track-list__row--editing': isEditing(entry.trackId),
+            }"
+            @click="onRowClick(entry.trackId)"
+          >
+            <div
+              class="custom-ui-track-list__type-color mr-2"
+              :style="{ backgroundColor: typeStylingRef.color(entry.trackType) }"
+            />
+            <div class="custom-ui-track-list__info flex-grow-1 text-truncate">
+              <span
+                v-if="resolvedSettings.display.showTrackId"
+                class="custom-ui-track-list__id mr-2"
+              >
+                {{ entry.trackId }}
+              </span>
+              <span
+                v-if="resolvedSettings.display.showType"
+                class="custom-ui-track-list__type mr-2"
+              >
+                {{ entry.trackType }}
+              </span>
+              <span
+                v-if="resolvedSettings.display.showFrameRange"
+                class="custom-ui-track-list__frames text-caption grey--text"
+              >
+                f:{{ entry.track.begin }}–{{ entry.track.end }}
+              </span>
+            </div>
+            <div
+              class="custom-ui-track-list__actions"
+              @click.stop
+            >
+              <v-btn
+                v-if="resolvedSettings.actions.edit"
+                icon
+                x-small
+                :disabled="readOnlyMode"
+                @click="editTrack(entry.trackId)"
+              >
+                <v-icon small>
+                  mdi-pencil
+                </v-icon>
+              </v-btn>
+              <v-btn
+                v-if="resolvedSettings.actions.delete"
+                icon
+                x-small
+                color="error"
+                :disabled="readOnlyMode"
+                @click="deleteTrack(entry.trackId)"
+              >
+                <v-icon small>
+                  mdi-delete
+                </v-icon>
+              </v-btn>
+            </div>
+          </div>
+        </div>
+      </v-expansion-panel-content>
+    </v-expansion-panel>
+  </v-expansion-panels>
+</template>
+
+<style scoped lang="scss">
+.custom-ui-track-list__rows {
+  overflow-y: auto;
+}
+
+.custom-ui-track-list__row {
+  min-height: 40px;
+  padding: 4px 6px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 4px;
+  margin-bottom: 4px;
+  cursor: pointer;
+
+  &:hover:not(.custom-ui-track-list__row--selected) {
+    background-color: rgba(255, 255, 255, 0.04);
+  }
+}
+
+.custom-ui-track-list__row--selected {
+  background-color: var(--v-accentBackground-base, rgba(255, 255, 255, 0.08));
+}
+
+.custom-ui-track-list__row--editing {
+  border-color: var(--v-primary-base, #1976d2);
+}
+
+.custom-ui-track-list__type-color {
+  width: 10px;
+  height: 10px;
+  border-radius: 2px;
+  flex-shrink: 0;
+}
+
+.custom-ui-track-list__actions {
+  display: flex;
+  flex-shrink: 0;
+}
+</style>
diff --git a/client/dive-common/components/CustomUI/useCustomUITrackList.ts b/client/dive-common/components/CustomUI/useCustomUITrackList.ts
new file mode 100644
index 00000000..5b4aac26
--- /dev/null
+++ b/client/dive-common/components/CustomUI/useCustomUITrackList.ts
@@ -0,0 +1,103 @@
+import { computed, Ref } from 'vue';
+import { intersection } from 'lodash';
+import { CustomUITrackListSettings } from 'vue-media-annotator/ConfigurationManager';
+import { AnnotationId } from 'vue-media-annotator/BaseAnnotation';
+import Track from 'vue-media-annotator/track';
+import {
+  useHandler,
+  useReadOnlyMode,
+  useSelectedTrackId,
+  useTrackFilters,
+  useEditingMode,
+} from 'vue-media-annotator/provides';
+
+export interface CustomUITrackListEntry {
+  track: Track;
+  trackId: AnnotationId;
+  trackType: string;
+}
+
+function trackMatchesTypeFilter(track: Track, typeFilter: string[]): boolean {
+  if (!typeFilter.length) {
+    return false;
+  }
+  const types = track.confidencePairs.map((item) => item[0]);
+  return intersection(types, typeFilter).length > 0;
+}
+
+function resolveSettings(settings: CustomUITrackListSettings | undefined) {
+  return {
+    enabled: settings?.enabled !== false,
+    title: settings?.title || 'Tracks',
+    defaultExpanded: settings?.defaultExpanded ?? false,
+    typeFilter: settings?.typeFilter || [],
+    maxHeight: settings?.maxHeight ?? 240,
+    actions: {
+      select: settings?.actions?.select !== false,
+      edit: settings?.actions?.edit !== false,
+      delete: settings?.actions?.delete !== false,
+    },
+    display: {
+      showType: settings?.display?.showType !== false,
+      showFrameRange: settings?.display?.showFrameRange !== false,
+      showTrackId: settings?.display?.showTrackId !== false,
+    },
+    showEditingStatus: settings?.showEditingStatus !== false,
+    editingStatusTitle: settings?.editingStatusTitle || 'Current Mode',
+  };
+}
+
+export default function useCustomUITrackList(settingsRef: Ref<CustomUITrackListSettings | undefined>) {
+  const trackFilters = useTrackFilters();
+  const handler = useHandler();
+  const selectedTrackIdRef = useSelectedTrackId();
+  const editingModeRef = useEditingMode();
+  const readOnlyMode = useReadOnlyMode();
+  const resolvedSettings = computed(() => resolveSettings(settingsRef.value));
+
+  const filteredTracks = computed((): CustomUITrackListEntry[] => {
+    const { typeFilter } = resolvedSettings.value;
+    if (!typeFilter.length) {
+      return [];
+    }
+    return trackFilters.filteredAnnotations.value
+      .filter((item) => trackMatchesTypeFilter(item.annotation, typeFilter))
+      .map((item) => {
+        const confidencePair = item.annotation.getType(item.context.confidencePairIndex);
+        return {
+          track: item.annotation,
+          trackId: item.annotation.id,
+          trackType: confidencePair[0],
+        };
+      });
+  });
+
+  const isSelected = (trackId: AnnotationId) => selectedTrackIdRef.value === trackId;
+
+  const isEditing = (trackId: AnnotationId) => (
+    isSelected(trackId) && !!editingModeRef.value
+  );
+
+  const selectTrack = (trackId: AnnotationId) => {
+    handler.trackSeek(trackId);
+  };
+
+  const editTrack = (trackId: AnnotationId) => {
+    handler.trackEdit(trackId);
+  };
+
+  const deleteTrack = (trackId: AnnotationId) => {
+    handler.removeTrack([trackId]);
+  };
+
+  return {
+    resolvedSettings,
+    filteredTracks,
+    readOnlyMode,
+    isSelected,
+    isEditing,
+    selectTrack,
+    editTrack,
+    deleteTrack,
+  };
+}
diff --git a/client/dive-common/components/CustomUI/useEditingStatus.ts b/client/dive-common/components/CustomUI/useEditingStatus.ts
new file mode 100644
index 00000000..f02a263e
--- /dev/null
+++ b/client/dive-common/components/CustomUI/useEditingStatus.ts
@@ -0,0 +1,78 @@
+import { computed } from 'vue';
+import {
+  useCameraStore,
+  useEditingGroupId,
+  useEditingMode,
+  useMultiSelectList,
+  useSelectedCamera,
+  useSelectedTrackId,
+  useTime,
+} from 'vue-media-annotator/provides';
+import {
+  computeEditingDetails,
+  getEditingInstruction,
+  GROUP_EDIT_INSTRUCTION,
+  IDLE_INSTRUCTION,
+  MULTI_SELECT_INSTRUCTION,
+} from 'dive-common/use/editingModeInstructions';
+
+export default function useEditingStatus() {
+  const selectedTrackIdRef = useSelectedTrackId();
+  const editingModeRef = useEditingMode();
+  const cameraStore = useCameraStore();
+  const selectedCamera = useSelectedCamera();
+  const { frame } = useTime();
+  const editingGroupIdRef = useEditingGroupId();
+  const multiSelectList = useMultiSelectList();
+
+  const groupEditActive = computed(() => editingGroupIdRef.value !== null);
+  const multiSelectActive = computed(() => multiSelectList.value.length > 0);
+
+  const editingDetails = computed(() => computeEditingDetails(
+    !!editingModeRef.value,
+    selectedTrackIdRef.value,
+    editingModeRef.value,
+    frame.value,
+    (trackId) => cameraStore.getPossibleTrack(trackId, selectedCamera.value),
+  ));
+
+  const statusHeader = computed(() => {
+    if (groupEditActive.value) {
+      return { text: 'Group Edit Mode', icon: 'mdi-group', color: 'primary' };
+    }
+    if (multiSelectActive.value) {
+      return { text: 'Multi-select Mode', icon: 'mdi-call-merge', color: 'error' };
+    }
+    if (editingDetails.value !== 'disabled' && editingModeRef.value) {
+      return {
+        text: `${editingDetails.value} ${editingModeRef.value}`,
+        icon: editingDetails.value === 'Creating' ? 'mdi-pencil-plus' : 'mdi-pencil',
+        color: editingDetails.value === 'Creating' ? 'success' : 'primary',
+      };
+    }
+    return { text: 'Not editing', icon: 'mdi-pencil-off-outline', color: '' };
+  });
+
+  const instructionText = computed(() => {
+    if (groupEditActive.value) {
+      return GROUP_EDIT_INSTRUCTION;
+    }
+    if (multiSelectActive.value) {
+      return MULTI_SELECT_INSTRUCTION;
+    }
+    return getEditingInstruction(editingDetails.value, editingModeRef.value);
+  });
+
+  const isActive = computed(() => (
+    groupEditActive.value
+    || multiSelectActive.value
+    || editingDetails.value !== 'disabled'
+  ));
+
+  return {
+    statusHeader,
+    instructionText,
+    isActive,
+    idleInstruction: IDLE_INSTRUCTION,
+  };
+}
diff --git a/client/dive-common/components/EditorMenu.vue b/client/dive-common/components/EditorMenu.vue
index e45ab595..12ce531b 100644
--- a/client/dive-common/components/EditorMenu.vue
+++ b/client/dive-common/components/EditorMenu.vue
@@ -10,6 +10,12 @@ import { hexToRgb } from 'vue-media-annotator/utils';
 import { useMasks, useConfiguration, useVisualMaskManager } from 'vue-media-annotator/provides';
 import { useStore } from 'platform/web-girder/store/types';
 import MaskTracking from 'dive-common/components/MaskTracking.vue';
+import {
+  EDITING_MODE_INSTRUCTIONS,
+  GROUP_EDIT_INSTRUCTION,
+  IDLE_INSTRUCTION,
+  MULTI_SELECT_INSTRUCTION,
+} from 'dive-common/use/editingModeInstructions';
 
 interface ButtonData {
   id: string;
@@ -91,22 +97,7 @@ export default defineComponent({
       } | null);
       return configMan.isConfigOwnerAdmin(currentUser);
     });
-    const modeToolTips = {
-      Creating: {
-        rectangle: 'Drag to draw rectangle. Press ESC to exit.',
-        Polygon: 'Click to place vertices. Right click to close.',
-        LineString: 'Click to place head/tail points.',
-        Time: 'Automatically creating Time',
-        Mask: 'Create a Segmentation Mask',
-      },
-      Editing: {
-        rectangle: 'Drag vertices to resize the rectangle',
-        Polygon: 'Drag midpoints to create new vertices. Click vertices to select for deletion.',
-        LineString: 'Click endpoints to select for deletion.',
-        Time: 'Use the keyframe indicator to modify the time annotation, Delete to return to rectangle annotations',
-        Mask: 'Edit the Segmentation Mask',
-      },
-    };
+    const modeToolTips = EDITING_MODE_INSTRUCTIONS;
 
     const editBlackColorScale = ref(false);
     const editWhiteColorScale = ref(false);
@@ -408,6 +399,9 @@ export default defineComponent({
       mousetrap,
       editingHeader,
       modeToolTips,
+      groupEditInstruction: GROUP_EDIT_INSTRUCTION,
+      multiSelectInstruction: MULTI_SELECT_INSTRUCTION,
+      idleInstruction: IDLE_INSTRUCTION,
       updateMaskOpacity,
       maskOpacity,
       maskCacheSeconds,
@@ -452,16 +446,15 @@ export default defineComponent({
             style="line-height: 1.22em; font-size: 10px;"
           >
             <span v-if="groupEditActive">
-              Editing group.  Add or remove tracks.  Esc. to exit.
+              {{ groupEditInstruction }}
             </span>
             <span v-else-if="multiSelectActive">
-              Multi-select in progress.  Editing is disabled.
-              Select additional tracks to merge or group.
+              {{ multiSelectInstruction }}
             </span>
             <span v-else-if="editingDetails !== 'disabled'">
               {{ modeToolTips[editingDetails][editingMode] }}
             </span>
-            <span v-else>Right click on an annotation to edit</span>
+            <span v-else>{{ idleInstruction }}</span>
           </div>
         </div>
       </div>
diff --git a/client/dive-common/components/configurationEditors/UISettings/UIContextBar.vue b/client/dive-common/components/configurationEditors/UISettings/UIContextBar.vue
index f98ea2e1..c6f9d5af 100644
--- a/client/dive-common/components/configurationEditors/UISettings/UIContextBar.vue
+++ b/client/dive-common/components/configurationEditors/UISettings/UIContextBar.vue
@@ -1,9 +1,10 @@
 <script lang="ts">
 import {
-  defineComponent, ref, watch, Ref,
+  defineComponent, ref, watch, Ref, computed,
 } from 'vue';
 import draggable from 'vuedraggable';
-import { useAttributes, useConfiguration } from 'vue-media-annotator/provides';
+import { useAttributes, useConfiguration, useTrackFilters } from 'vue-media-annotator/provides';
+import { CustomUITrackListSettings } from 'vue-media-annotator/ConfigurationManager';
 import { shouldShowAttributeInCustomUI } from 'vue-media-annotator/use/attributeCustomUI';
 
 interface AttributeButtonOrderItem {
@@ -19,6 +20,7 @@ export default defineComponent({
   setup() {
     const configMan = useConfiguration();
     const attributes = useAttributes();
+    const allTypesRef = useTrackFilters().allTypes;
     const UIContextBarDefaultNotOpen = ref(configMan.getUISetting('UIContextBarDefaultNotOpen') as boolean);
     const UIContextBarNotStatic = ref(configMan.getUISetting('UIContextBarNotStatic') as boolean);
     const UIThresholdControls = ref(configMan.getUISetting('UIThresholdControls') as boolean);
@@ -36,8 +38,51 @@ export default defineComponent({
     const customUIAttributeButtonOrder = ref<string[]>(
       [...(configMan.configuration.value?.customUI?.attributeButtonOrder || [])],
     );
+    const trackListEnabled = ref(!!configMan.configuration.value?.customUI?.trackList);
+    const trackListTitle = ref(configMan.configuration.value?.customUI?.trackList?.title || 'Tracks');
+    const trackListDefaultExpanded = ref(
+      configMan.configuration.value?.customUI?.trackList?.defaultExpanded ?? false,
+    );
+    const trackListPosition = ref<'above' | 'below'>(
+      configMan.configuration.value?.customUI?.trackList?.position || 'below',
+    );
+    const trackListTypeFilter = ref<string[]>(
+      [...(configMan.configuration.value?.customUI?.trackList?.typeFilter || [])],
+    );
+    const trackListMaxHeight = ref(
+      configMan.configuration.value?.customUI?.trackList?.maxHeight ?? 240,
+    );
+    const trackListActionSelect = ref(
+      configMan.configuration.value?.customUI?.trackList?.actions?.select !== false,
+    );
+    const trackListActionEdit = ref(
+      configMan.configuration.value?.customUI?.trackList?.actions?.edit !== false,
+    );
+    const trackListActionDelete = ref(
+      configMan.configuration.value?.customUI?.trackList?.actions?.delete !== false,
+    );
+    const trackListShowType = ref(
+      configMan.configuration.value?.customUI?.trackList?.display?.showType !== false,
+    );
+    const trackListShowFrameRange = ref(
+      configMan.configuration.value?.customUI?.trackList?.display?.showFrameRange !== false,
+    );
+    const trackListShowTrackId = ref(
+      configMan.configuration.value?.customUI?.trackList?.display?.showTrackId !== false,
+    );
+    const trackListShowEditingStatus = ref(
+      configMan.configuration.value?.customUI?.trackList?.showEditingStatus !== false,
+    );
+    const trackListEditingStatusTitle = ref(
+      configMan.configuration.value?.customUI?.trackList?.editingStatusTitle || 'Current Mode',
+    );
     const attributeButtonOrderList: Ref<AttributeButtonOrderItem[]> = ref([]);
 
+    const trackListTypeSuggestions = computed(() => {
+      const suggestions = new Set([...allTypesRef.value, ...trackListTypeFilter.value]);
+      return Array.from(suggestions).sort();
+    });
+
     watch([UIThresholdControls, UIImageEnhancements,
       UIGroupManager, UIAttributeDetails, UIRevisionHistory, UIDatasetInfo, UIAttributeUserReview, UIContextBarDefaultNotOpen, UIContextBarNotStatic], () => {
       const data = {
@@ -96,11 +141,56 @@ export default defineComponent({
       syncAttributeButtonOrderList();
     }, { deep: true, immediate: true });
 
-    watch([CustomUIEnabled, customUITitle, customUIInformation, customUIWidth, customUIAttributeButtonOrder], () => {
+    watch([
+      CustomUIEnabled,
+      customUITitle,
+      customUIInformation,
+      customUIWidth,
+      customUIAttributeButtonOrder,
+      trackListEnabled,
+      trackListTitle,
+      trackListDefaultExpanded,
+      trackListPosition,
+      trackListTypeFilter,
+      trackListMaxHeight,
+      trackListActionSelect,
+      trackListActionEdit,
+      trackListActionDelete,
+      trackListShowType,
+      trackListShowFrameRange,
+      trackListShowTrackId,
+      trackListShowEditingStatus,
+      trackListEditingStatusTitle,
+    ], () => {
       if (!CustomUIEnabled.value) {
         configMan.setCustomUI(undefined);
         return;
       }
+      let trackList: CustomUITrackListSettings | undefined;
+      if (trackListEnabled.value) {
+        trackList = {
+          enabled: true,
+          title: trackListTitle.value,
+          defaultExpanded: trackListDefaultExpanded.value || undefined,
+          position: trackListPosition.value !== 'below' ? trackListPosition.value : undefined,
+          typeFilter: trackListTypeFilter.value.length ? trackListTypeFilter.value : undefined,
+          maxHeight: trackListMaxHeight.value !== 240 ? trackListMaxHeight.value : undefined,
+          actions: {
+            select: trackListActionSelect.value ? undefined : false,
+            edit: trackListActionEdit.value ? undefined : false,
+            delete: trackListActionDelete.value ? undefined : false,
+          },
+          display: {
+            showType: trackListShowType.value ? undefined : false,
+            showFrameRange: trackListShowFrameRange.value ? undefined : false,
+            showTrackId: trackListShowTrackId.value ? undefined : false,
+          },
+          showEditingStatus: trackListShowEditingStatus.value ? undefined : false,
+          editingStatusTitle: trackListEditingStatusTitle.value !== 'Current Mode'
+            ? trackListEditingStatusTitle.value
+            : undefined,
+        };
+      }
       const data = {
         title: customUITitle.value,
         information: customUIInformation.value,
@@ -108,6 +198,7 @@ export default defineComponent({
         attributeButtonOrder: customUIAttributeButtonOrder.value.length
           ? customUIAttributeButtonOrder.value
           : undefined,
+        trackList,
       };
       configMan.setCustomUI(data);
     }, { deep: true });
@@ -130,6 +221,22 @@ export default defineComponent({
       addNewInformation,
       removeInformation,
       UIAttributeUserReview,
+      trackListEnabled,
+      trackListTitle,
+      trackListDefaultExpanded,
+      trackListPosition,
+      trackListTypeFilter,
+      trackListMaxHeight,
+      trackListActionSelect,
+      trackListActionEdit,
+      trackListActionDelete,
+      trackListShowType,
+      trackListShowFrameRange,
+      trackListShowTrackId,
+      trackListShowEditingStatus,
+      trackListEditingStatusTitle,
+      trackListTypeSuggestions,
+      allTypesRef,
     };
   },
 
@@ -268,6 +375,133 @@ export default defineComponent({
               </v-expansion-panel-content>
             </v-expansion-panel>
           </v-expansion-panels>
+          <v-expansion-panels class="mt-3" flat>
+            <v-expansion-panel>
+              <v-expansion-panel-header>
+                Track list
+              </v-expansion-panel-header>
+              <v-expansion-panel-content>
+                <v-switch
+                  v-model="trackListEnabled"
+                  label="Enable track list"
+                  class="mt-0"
+                />
+                <template v-if="trackListEnabled">
+                  <v-text-field
+                    v-model="trackListTitle"
+                    label="Panel title"
+                    dense
+                    outlined
+                  />
+                  <v-switch
+                    v-model="trackListDefaultExpanded"
+                    label="Expanded by default"
+                  />
+                  <v-select
+                    v-model="trackListPosition"
+                    :items="[
+                      { text: 'Above action buttons', value: 'above' },
+                      { text: 'Below action buttons', value: 'below' },
+                    ]"
+                    item-text="text"
+                    item-value="value"
+                    label="Position relative to action buttons"
+                    dense
+                    outlined
+                  />
+                  <v-combobox
+                    v-model="trackListTypeFilter"
+                    :items="trackListTypeSuggestions"
+                    label="Track types"
+                    multiple
+                    chips
+                    deletable-chips
+                    small-chips
+                    dense
+                    outlined
+                    hint="Select existing types or type a new name and press Enter"
+                    persistent-hint
+                  />
+                  <v-text-field
+                    v-model.number="trackListMaxHeight"
+                    label="Max list height (px)"
+                    type="number"
+                    dense
+                    outlined
+                  />
+                  <p class="text-caption mb-1">
+                    Row actions
+                  </p>
+                  <v-row dense>
+                    <v-col cols="4">
+                      <v-switch
+                        v-model="trackListActionSelect"
+                        label="Select"
+                        dense
+                        hide-details
+                      />
+                    </v-col>
+                    <v-col cols="4">
+                      <v-switch
+                        v-model="trackListActionEdit"
+                        label="Edit"
+                        dense
+                        hide-details
+                      />
+                    </v-col>
+                    <v-col cols="4">
+                      <v-switch
+                        v-model="trackListActionDelete"
+                        label="Delete"
+                        dense
+                        hide-details
+                      />
+                    </v-col>
+                  </v-row>
+                  <p class="text-caption mb-1">
+                    Row display
+                  </p>
+                  <v-row dense>
+                    <v-col cols="4">
+                      <v-switch
+                        v-model="trackListShowTrackId"
+                        label="Track ID"
+                        dense
+                        hide-details
+                      />
+                    </v-col>
+                    <v-col cols="4">
+                      <v-switch
+                        v-model="trackListShowType"
+                        label="Type"
+                        dense
+                        hide-details
+                      />
+                    </v-col>
+                    <v-col cols="4">
+                      <v-switch
+                        v-model="trackListShowFrameRange"
+                        label="Frame range"
+                        dense
+                        hide-details
+                      />
+                    </v-col>
+                  </v-row>
+                  <v-switch
+                    v-model="trackListShowEditingStatus"
+                    label="Show editing status / instructions"
+                  />
+                  <v-text-field
+                    v-if="trackListShowEditingStatus"
+                    v-model="trackListEditingStatusTitle"
+                    label="Editing status title"
+                    dense
+                    outlined
+                  />
+                </template>
+              </v-expansion-panel-content>
+            </v-expansion-panel>
+          </v-expansion-panels>
         </div>
       </div>
     </v-card-text>
diff --git a/client/dive-common/use/editingModeInstructions.ts b/client/dive-common/use/editingModeInstructions.ts
new file mode 100644
index 00000000..3eace7de
--- /dev/null
+++ b/client/dive-common/use/editingModeInstructions.ts
@@ -0,0 +1,73 @@
+import { EditAnnotationTypes } from 'vue-media-annotator/layers';
+import Track from 'vue-media-annotator/track';
+import { AnnotationId } from 'vue-media-annotator/BaseAnnotation';
+
+export type EditingDetailsState = 'disabled' | 'Creating' | 'Editing';
+
+export const EDITING_MODE_INSTRUCTIONS = {
+  Creating: {
+    rectangle: 'Drag to draw rectangle. Press ESC to exit.',
+    Polygon: 'Click to place vertices. Right click to close.',
+    LineString: 'Click to place head/tail points.',
+    Time: 'Automatically creating Time',
+    Mask: 'Create a Segmentation Mask',
+    Point: 'Click to place a point. Press ESC to exit.',
+  },
+  Editing: {
+    rectangle: 'Drag vertices to resize the rectangle',
+    Polygon: 'Drag midpoints to create new vertices. Click vertices to select for deletion.',
+    LineString: 'Click endpoints to select for deletion.',
+    Time: 'Use the keyframe indicator to modify the time annotation, Delete to return to rectangle annotations',
+    Mask: 'Edit the Segmentation Mask',
+    Point: 'Drag to move the point',
+  },
+} as const;
+
+export const IDLE_INSTRUCTION = 'Right click on an annotation to edit';
+export const GROUP_EDIT_INSTRUCTION = 'Editing group. Add or remove tracks. Esc. to exit.';
+export const MULTI_SELECT_INSTRUCTION = 'Multi-select in progress. Editing is disabled. Select additional tracks to merge or group.';
+
+export function computeEditingDetails(
+  isEditingMode: boolean,
+  selectedTrackId: AnnotationId | null,
+  editingType: false | EditAnnotationTypes,
+  frame: number,
+  getTrack: (trackId: AnnotationId) => Track | undefined,
+): EditingDetailsState {
+  if (!isEditingMode || selectedTrackId === null || !editingType) {
+    return 'disabled';
+  }
+  try {
+    const track = getTrack(selectedTrackId);
+    if (!track) {
+      return 'disabled';
+    }
+    const [feature] = track.getFeature(frame);
+    if (feature) {
+      if (!feature?.bounds?.length) {
+        return 'Creating';
+      }
+      if (editingType === 'rectangle' || editingType === 'Time') {
+        return 'Editing';
+      }
+      return (feature.geometry?.features.filter((item) => item.geometry.type === editingType).length
+        ? 'Editing'
+        : 'Creating');
+    }
+    return 'Creating';
+  } catch {
+    return 'disabled';
+  }
+}
+
+export function getEditingInstruction(
+  editingDetails: EditingDetailsState,
+  editingMode: false | EditAnnotationTypes,
+): string {
+  if (editingDetails === 'disabled' || !editingMode) {
+    return IDLE_INSTRUCTION;
+  }
+  const modeInstructions = EDITING_MODE_INSTRUCTIONS[editingDetails];
+  const instruction = modeInstructions[editingMode as keyof typeof modeInstructions];
+  return instruction || `${editingDetails} ${editingMode}`;
+}
diff --git a/client/dive-common/use/useModeManager.ts b/client/dive-common/use/useModeManager.ts
index 259bc617..192689b8 100644
--- a/client/dive-common/use/useModeManager.ts
+++ b/client/dive-common/use/useModeManager.ts
@@ -27,6 +27,7 @@ import {
   DIVEMetadataAction,
 } from 'dive-common/use/useActions';
 import { deleteDiveDatasetMetadataKey, setDiveDatasetMetadataKey } from 'platform/web-girder/api/divemetadata.service';
+import { computeEditingDetails } from 'dive-common/use/editingModeInstructions';
 
 type SupportedFeature = GeoJSON.Feature<GeoJSON.Point | GeoJSON.Polygon | GeoJSON.LineString>;
 
@@ -154,28 +155,14 @@ export default function useModeManager({
   // What is occuring in editing mode
   const editingDetails = computed(() => {
     _depend();
-    if (editingMode.value && selectedTrackId.value !== null) {
-      const { frame } = aggregateController.value;
-      try {
-        const track = cameraStore.getPossibleTrack(selectedTrackId.value, selectedCamera.value);
-        if (track) {
-          const [feature] = track.getFeature(frame.value);
-          if (feature) {
-            if (!feature?.bounds?.length) {
-              return 'Creating';
-            } if (annotationModes.editing === 'rectangle' || annotationModes.editing === 'Time') {
-              return 'Editing';
-            }
-            return (feature.geometry?.features.filter((item) => item.geometry.type === annotationModes.editing).length ? 'Editing' : 'Creating');
-          }
-          return 'Creating';
-        }
-      } catch {
-      // No Track for this camera
-        return 'disabled';
-      }
-    }
-    return 'disabled';
+    const { frame } = aggregateController.value;
+    return computeEditingDetails(
+      !!editingMode.value,
+      selectedTrackId.value,
+      annotationModes.editing,
+      frame.value,
+      (trackId) => cameraStore.getPossibleTrack(trackId, selectedCamera.value),
+    );
   });
 
   let deleteLocalMasks: (((trackId: AnnotationId, frameList: number[]) => void) | null) = null;
diff --git a/client/src/ConfigurationManager.ts b/client/src/ConfigurationManager.ts
index 413a6ce3..ee6eaf75 100644
--- a/client/src/ConfigurationManager.ts
+++ b/client/src/ConfigurationManager.ts
@@ -141,12 +141,35 @@ export interface TimelineConfiguration {
   timelines: TimelineDisplay[];
 }
 
+export interface CustomUITrackListSettings {
+  enabled?: boolean;
+  title?: string;
+  defaultExpanded?: boolean;
+  /** Position relative to DIVE action shortcut buttons */
+  position?: 'above' | 'below';
+  typeFilter?: string[];
+  maxHeight?: number;
+  actions?: {
+    select?: boolean;
+    edit?: boolean;
+    delete?: boolean;
+  };
+  display?: {
+    showType?: boolean;
+    showFrameRange?: boolean;
+    showTrackId?: boolean;
+  };
+  showEditingStatus?: boolean;
+  editingStatusTitle?: string;
+}
+
 export interface CustomUISettings {
   title?: string;
   information?: string[]; // multiple markdown pages of information to be displayed if it exists
   width? : number;
   /** Attribute keys (`${belongs}_${name}`) controlling Custom UI attribute button group order */
   attributeButtonOrder?: string[];
+  trackList?: CustomUITrackListSettings;
   }
 
 export interface ConfigurationUser {

From 03520a61b3194cfbc9e5ad9f325372985119f8c4 Mon Sep 17 00:00:00 2001
From: Bryon Lewis <Bryon.Lewis@kitware.com>
Date: Fri, 4 Sep 2026 15:04:56 -0400
Subject: [PATCH 3/4] caniuse update

---
 client/package-lock.json | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/client/package-lock.json b/client/package-lock.json
index 4dd4ec6e..b5595f7b 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -7782,9 +7782,9 @@
       "license": "MIT"
     },
     "node_modules/baseline-browser-mapping": {
-      "version": "2.10.10",
-      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.10.10.tgz",
-      "integrity": "sha512-sUoJ3IMxx4AyRqO4MLeHlnGDkyXRoUG0/AI9fjK+vS72ekpV0yWVY7O0BVjmBcRtkNcsAO2QDZ4tdKKGoI6YaQ==",
+      "version": "2.11.21",
+      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.11.21.tgz",
+      "integrity": "sha512-uh8vpY/1/YyFkunIDFH/12p7/7VdPKA1hejMVEbdkEaWnUz0Hesvx5EbiU6XxjyHZIOju+ZMbQJkRh+es3/spQ==",
       "license": "Apache-2.0",
       "bin": {
         "baseline-browser-mapping": "dist/cli.cjs"
@@ -8189,9 +8189,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001781",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001781.tgz",
-      "integrity": "sha512-RdwNCyMsNBftLjW6w01z8bKEvT6e/5tpPVEgtn22TiLGlstHOVecsX2KHFkD5e/vRnIE4EGzpuIODb3mtswtkw==",
+      "version": "1.0.30001810",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001810.tgz",
+      "integrity": "sha512-TITQPUkaz+aVk5GL6NhOdwk1aEaNTSDPsGFWrTuhKGtjTF70jL/Oht2W4c6rXUe5fu7Ie19VIahAXHIIiWWNeg==",
       "funding": [
         {
           "type": "opencollective",

From 91d829ccbd1c2d93f70a4cb358c459a266915370 Mon Sep 17 00:00:00 2001
From: Bryon Lewis <Bryon.Lewis@kitware.com>
Date: Fri, 4 Sep 2026 15:33:33 -0400
Subject: [PATCH 4/4] Add create-track after-selection options and fix Custom
 UI track list config persistence

---
 .../components/ActionEditors/ActionEditor.vue |  2 +-
 .../ActionEditors/ActionEditorSettings.vue    |  2 +-
 .../ActionEditors/ActionShortcuts.vue         | 18 ++++--
 .../ActionEditors/CreateTrackActionEditor.vue | 37 +++++++++---
 .../UISettings/UIContextBar.vue               | 39 ++++++++----
 .../configurationEditors/uiSettings.vue       |  2 +-
 client/dive-common/use/useActions.ts          | 36 ++++++++++-
 client/dive-common/use/useModeManager.ts      | 60 +++++++++++++------
 server/dive_utils/models.py                   | 28 ++++++++-
 9 files changed, 175 insertions(+), 49 deletions(-)

diff --git a/client/dive-common/components/ActionEditors/ActionEditor.vue b/client/dive-common/components/ActionEditors/ActionEditor.vue
index 00197519..a374840f 100644
--- a/client/dive-common/components/ActionEditors/ActionEditor.vue
+++ b/client/dive-common/components/ActionEditors/ActionEditor.vue
@@ -75,7 +75,7 @@ export default defineComponent({
             type: 'CreateTrackAction',
             geometryType: 'rectangle',
             editableType: true,
-            selectTrackAfter: false,
+            selectTrackAfter: 'previousTrack',
           },
         };
       }
diff --git a/client/dive-common/components/ActionEditors/ActionEditorSettings.vue b/client/dive-common/components/ActionEditors/ActionEditorSettings.vue
index 830adfc1..0e0a88d4 100644
--- a/client/dive-common/components/ActionEditors/ActionEditorSettings.vue
+++ b/client/dive-common/components/ActionEditors/ActionEditorSettings.vue
@@ -103,7 +103,7 @@ export default defineComponent({
             type: 'CreateTrackAction',
             geometryType: 'rectangle',
             editableType: true,
-            selectTrackAfter: true,
+            selectTrackAfter: 'previousTrack',
           },
         };
       }
diff --git a/client/dive-common/components/ActionEditors/ActionShortcuts.vue b/client/dive-common/components/ActionEditors/ActionShortcuts.vue
index f08b620b..fe0b1261 100644
--- a/client/dive-common/components/ActionEditors/ActionShortcuts.vue
+++ b/client/dive-common/components/ActionEditors/ActionShortcuts.vue
@@ -6,7 +6,7 @@ import {
 } from 'vue';
 import draggable from 'vuedraggable';
 import {
-  DIVEAction, DIVEActionShortcut, TrackSelectAction,
+  DIVEAction, DIVEActionShortcut, TrackSelectAction, getCreateTrackAfterSelectionLabel,
 } from 'dive-common/use/useActions';
 import { ButtonShortcut } from 'vue-media-annotator/use/AttributeTypes';
 import {
@@ -188,6 +188,13 @@ export default defineComponent({
       updateActionList();
     };
 
+    const removeAction = (index: number) => {
+      if (editingShortcut.value) {
+        editingShortcut.value.actions.splice(index, 1);
+        updateActionList();
+      }
+    };
+
     const saveShortcutDisabled = computed(() => {
       if (editingShortcut.value) {
         const { description } = editingShortcut.value;
@@ -217,11 +224,13 @@ export default defineComponent({
       updateActionList,
       addEditActionindex,
       saveAction,
+      removeAction,
       saveShortcutDisabled,
       getShortcutDisplay,
       hasKeyboardShortcut,
       isIconOnlyButton,
       onShortcutOrderEnd,
+      getCreateTrackAfterSelectionLabel,
     };
   },
 
@@ -474,11 +483,8 @@ export default defineComponent({
                   </div>
 
                   <div>
-                    <b class="mr-2">Select Track After:</b><v-icon v-if="item.action.selectTrackAfter" color="success">
-                      mdi-check
-                    </v-icon><v-icon v-else color="error">
-                      mdi-close
-                    </v-icon>
+                    <b class="mr-2">After creation:</b>
+                    <span>{{ getCreateTrackAfterSelectionLabel(item.action.selectTrackAfter) }}</span>
                   </div>
                 </v-col>
                 <v-spacer />
diff --git a/client/dive-common/components/ActionEditors/CreateTrackActionEditor.vue b/client/dive-common/components/ActionEditors/CreateTrackActionEditor.vue
index f6e8d577..9480445a 100644
--- a/client/dive-common/components/ActionEditors/CreateTrackActionEditor.vue
+++ b/client/dive-common/components/ActionEditors/CreateTrackActionEditor.vue
@@ -4,7 +4,11 @@ import {
   watch,
 } from 'vue';
 import { EditAnnotationTypes } from 'vue-media-annotator/layers/';
-import { CreateTrackAction } from 'dive-common/use/useActions';
+import {
+  CreateTrackAction,
+  CREATE_TRACK_AFTER_SELECTION_OPTIONS,
+  normalizeCreateTrackAfterSelection,
+} from 'dive-common/use/useActions';
 
 export default defineComponent({
   name: 'CreateTrackActionEditor',
@@ -17,12 +21,16 @@ export default defineComponent({
   emits: ['update:action', 'cancel'],
   setup(props, { emit }) {
     const geometryTypes: EditAnnotationTypes[] = ['Point', 'rectangle', 'Polygon', 'LineString', 'Time'];
-    const localAction = ref({ ...props.action });
-    const editableTypeListEnabled = ref(false);
-    const editableTypeList: Ref<string> = ref('');
+    const localAction = ref({
+      ...props.action,
+      selectTrackAfter: normalizeCreateTrackAfterSelection(props.action.selectTrackAfter),
+    });
+    const editableTypeListEnabled = ref(!!props.action.editableTypeList?.length);
+    const editableTypeList: Ref<string> = ref((props.action.editableTypeList || []).join(', '));
     watch(editableTypeList, () => {
       localAction.value.editableTypeList = editableTypeList.value.split(',').map((type) => type.trim());
     });
+    const afterSelectionOptions = CREATE_TRACK_AFTER_SELECTION_OPTIONS;
     const cancel = () => {
       emit('cancel');
     };
@@ -34,6 +42,7 @@ export default defineComponent({
       geometryTypes,
       editableTypeList,
       editableTypeListEnabled,
+      afterSelectionOptions,
       cancel,
       save,
     };
@@ -121,12 +130,22 @@ export default defineComponent({
           dense
         />
 
-        <!-- Select Track After -->
-        <v-checkbox
+        <div class="text-subtitle-2 mt-3 mb-1">
+          After track creation
+        </div>
+        <v-radio-group
           v-model="localAction.selectTrackAfter"
-          label="Select Track After"
-          class="mt-2"
-        />
+          dense
+          hide-details
+          class="mt-0"
+        >
+          <v-radio
+            v-for="option in afterSelectionOptions"
+            :key="option.value"
+            :label="option.label"
+            :value="option.value"
+          />
+        </v-radio-group>
       </v-card-text>
       <v-card-actions>
         <v-row dense>
diff --git a/client/dive-common/components/configurationEditors/UISettings/UIContextBar.vue b/client/dive-common/components/configurationEditors/UISettings/UIContextBar.vue
index c6f9d5af..2573bcc7 100644
--- a/client/dive-common/components/configurationEditors/UISettings/UIContextBar.vue
+++ b/client/dive-common/components/configurationEditors/UISettings/UIContextBar.vue
@@ -487,17 +487,34 @@ export default defineComponent({
                       />
                     </v-col>
                   </v-row>
-                  <v-switch
-                    v-model="trackListShowEditingStatus"
-                    label="Show editing status / instructions"
-                  />
-                  <v-text-field
-                    v-if="trackListShowEditingStatus"
-                    v-model="trackListEditingStatusTitle"
-                    label="Editing status title"
-                    dense
-                    outlined
-                  />
+                  <p class="text-caption mb-1 mt-2">
+                    Editing behavior
+                  </p>
+                  <v-row dense>
+                    <v-col cols="12">
+                      <v-switch
+                        v-model="trackListShowEditingStatus"
+                        label="Show editing status / instructions"
+                        dense
+                        hide-details
+                        class="mt-0"
+                      />
+                    </v-col>
+                    <v-col
+                      v-if="trackListShowEditingStatus"
+                      cols="12"
+                      class="pt-0"
+                    >
+                      <v-text-field
+                        v-model="trackListEditingStatusTitle"
+                        label="Editing status title"
+                        dense
+                        outlined
+                        hide-details
+                        class="mt-0"
+                      />
+                    </v-col>
+                  </v-row>
                 </template>
               </v-expansion-panel-content>
             </v-expansion-panel>
diff --git a/client/dive-common/components/configurationEditors/uiSettings.vue b/client/dive-common/components/configurationEditors/uiSettings.vue
index 3c7f9ca2..8a5f5994 100644
--- a/client/dive-common/components/configurationEditors/uiSettings.vue
+++ b/client/dive-common/components/configurationEditors/uiSettings.vue
@@ -73,7 +73,7 @@ export default defineComponent({
 
       };
       configMan.setRootUISettings(data as UISettings);
-      const updatedConfig = { UISettings: data, ...configMan.configuration.value };
+      const updatedConfig = { ...configMan.configuration.value, UISettings: data };
       if (updatedConfig) {
         configMan.saveConfiguration(
           configMan.configurationId.value,
diff --git a/client/dive-common/use/useActions.ts b/client/dive-common/use/useActions.ts
index 2552c47e..112bcce8 100644
--- a/client/dive-common/use/useActions.ts
+++ b/client/dive-common/use/useActions.ts
@@ -43,6 +43,40 @@ export interface GoToFrameAction{
     type: 'GoToFrame';
 }
 
+export type CreateTrackAfterSelection = 'newTrack' | 'previousTrack' | 'none';
+
+export const CREATE_TRACK_AFTER_SELECTION_OPTIONS: {
+  value: CreateTrackAfterSelection;
+  label: string;
+}[] = [
+  { value: 'newTrack', label: 'Keep new track selected' },
+  { value: 'previousTrack', label: 'Restore previously selected track' },
+  { value: 'none', label: 'Clear selection' },
+];
+
+export function normalizeCreateTrackAfterSelection(
+  value: boolean | CreateTrackAfterSelection | undefined,
+): CreateTrackAfterSelection {
+  if (value === 'newTrack' || value === 'previousTrack' || value === 'none') {
+    return value;
+  }
+  if (value === true) {
+    return 'newTrack';
+  }
+  if (value === false) {
+    return 'previousTrack';
+  }
+  return 'previousTrack';
+}
+
+export function getCreateTrackAfterSelectionLabel(
+  value: boolean | CreateTrackAfterSelection | undefined,
+): string {
+  const normalized = normalizeCreateTrackAfterSelection(value);
+  return CREATE_TRACK_AFTER_SELECTION_OPTIONS.find((item) => item.value === normalized)?.label
+    || normalized;
+}
+
 export interface CreateTrackAction {
   type: 'CreateTrackAction'; // trackType
   trackType?: string;
@@ -51,7 +85,7 @@ export interface CreateTrackAction {
   editableTypeList?: string[];
   editableTitle?: string;
   editableText?: string;
-  selectTrackAfter: boolean;
+  selectTrackAfter: boolean | CreateTrackAfterSelection;
 }
 
 export interface CreateFullFrameTrackAction {
diff --git a/client/dive-common/use/useModeManager.ts b/client/dive-common/use/useModeManager.ts
index 192689b8..00ce2ee6 100644
--- a/client/dive-common/use/useModeManager.ts
+++ b/client/dive-common/use/useModeManager.ts
@@ -25,6 +25,7 @@ import {
   CreateTrackAction,
   DIVEAction,
   DIVEMetadataAction,
+  normalizeCreateTrackAfterSelection,
 } from 'dive-common/use/useActions';
 import { deleteDiveDatasetMetadataKey, setDiveDatasetMetadataKey } from 'platform/web-girder/api/divemetadata.service';
 import { computeEditingDetails } from 'dive-common/use/editingModeInstructions';
@@ -133,7 +134,25 @@ export default function useModeManager({
 
   const selectNextGroup = (delta = 1) => selectNext(_filteredGroups.value, editingGroupId.value, delta);
 
-  let afterCreateTrackAction: { selectPreviousTrack?: number } | null = null;
+  type AfterCreateTrackActionState =
+    | { mode: 'previousTrack'; trackId: AnnotationId }
+    | { mode: 'none' }
+    | null;
+
+  let afterCreateTrackAction: AfterCreateTrackActionState = null;
+
+  function applyAfterCreateTrackAction(): boolean {
+    if (!afterCreateTrackAction) {
+      return false;
+    }
+    if (afterCreateTrackAction.mode === 'previousTrack') {
+      selectTrack(afterCreateTrackAction.trackId, false);
+    } else if (afterCreateTrackAction.mode === 'none') {
+      handleSelectTrack(null, false);
+    }
+    afterCreateTrackAction = null;
+    return true;
+  }
 
   function selectTrack(trackId: AnnotationId | null, edit = false) {
     selectedTrackId.value = trackId;
@@ -155,14 +174,21 @@ export default function useModeManager({
   // What is occuring in editing mode
   const editingDetails = computed(() => {
     _depend();
-    const { frame } = aggregateController.value;
-    return computeEditingDetails(
-      !!editingMode.value,
-      selectedTrackId.value,
-      annotationModes.editing,
-      frame.value,
-      (trackId) => cameraStore.getPossibleTrack(trackId, selectedCamera.value),
-    );
+    if (!editingMode.value || selectedTrackId.value === null) {
+      return 'disabled' as const;
+    }
+    try {
+      const { frame } = aggregateController.value;
+      return computeEditingDetails(
+        true,
+        selectedTrackId.value,
+        annotationModes.editing,
+        frame.value,
+        (trackId) => cameraStore.getPossibleTrack(trackId, selectedCamera.value),
+      );
+    } catch {
+      return 'disabled' as const;
+    }
   });
 
   let deleteLocalMasks: (((trackId: AnnotationId, frameList: number[]) => void) | null) = null;
@@ -320,9 +346,7 @@ export default function useModeManager({
     linkingTrack.value = null;
     multiSelectList.value = [];
     handleGroupEdit(null);
-    if (afterCreateTrackAction && afterCreateTrackAction.selectPreviousTrack !== undefined) {
-      selectTrack(afterCreateTrackAction.selectPreviousTrack, false);
-      afterCreateTrackAction = null;
+    if (applyAfterCreateTrackAction()) {
       return;
     }
     handleSelectTrack(null, false);
@@ -363,10 +387,7 @@ export default function useModeManager({
     let newCreatingValue = false; // by default, disable creating at the end of this function
     if (creating) {
       if (addedTrack && afterCreateTrackAction) {
-        if (afterCreateTrackAction.selectPreviousTrack !== undefined) {
-          selectTrack(afterCreateTrackAction.selectPreviousTrack, false);
-        }
-        afterCreateTrackAction = null;
+        applyAfterCreateTrackAction();
       } else if (addedTrack && trackSettings.value.newTrackSettings !== null) {
         if (trackSettings.value.newTrackSettings.mode === 'Track'
         && trackSettings.value.newTrackSettings.modeSettings.Track.autoAdvanceFrame
@@ -878,9 +899,12 @@ export default function useModeManager({
       }
 
       const currentlySelectedTrackId = selectedTrackId.value;
+      const afterSelection = normalizeCreateTrackAfterSelection(createtrackAction.selectTrackAfter);
       handleEscapeMode();
-      if (currentlySelectedTrackId !== null) {
-        afterCreateTrackAction = { selectPreviousTrack: currentlySelectedTrackId };
+      if (afterSelection === 'previousTrack' && currentlySelectedTrackId !== null) {
+        afterCreateTrackAction = { mode: 'previousTrack', trackId: currentlySelectedTrackId };
+      } else if (afterSelection === 'none') {
+        afterCreateTrackAction = { mode: 'none' };
       }
 
       const { frame } = aggregateController.value;
diff --git a/server/dive_utils/models.py b/server/dive_utils/models.py
index 68acf323..56be5629 100644
--- a/server/dive_utils/models.py
+++ b/server/dive_utils/models.py
@@ -492,7 +492,7 @@ class CreateTrackAction(BaseModel):
     editableTitle: Optional[str]
     editableText: Optional[str]
     editableTypeList: Optional[List[str]]
-    selectTrackAfter: bool
+    selectTrackAfter: Union[bool, Literal['newTrack', 'previousTrack', 'none']]
     type: Literal['CreateTrackAction']
 
 
@@ -566,12 +566,38 @@ class TimelineConfiguration(BaseModel):
     timelines: List[TimelineDisplay]
 
 
+class CustomUITrackListActions(BaseModel):
+    select: Optional[bool]
+    edit: Optional[bool]
+    delete: Optional[bool]
+
+
+class CustomUITrackListDisplay(BaseModel):
+    showType: Optional[bool]
+    showFrameRange: Optional[bool]
+    showTrackId: Optional[bool]
+
+
+class CustomUITrackListSettings(BaseModel):
+    enabled: Optional[bool]
+    title: Optional[str]
+    defaultExpanded: Optional[bool]
+    position: Optional[Literal['above', 'below']]
+    typeFilter: Optional[List[str]]
+    maxHeight: Optional[int]
+    actions: Optional[CustomUITrackListActions]
+    display: Optional[CustomUITrackListDisplay]
+    showEditingStatus: Optional[bool]
+    editingStatusTitle: Optional[str]
+
+
 class CustomUISettings(BaseModel):
     title: Optional[str]
     information: Optional[List[str]]
     width: Optional[int]
     # Attribute keys (`{belongs}_{name}`) controlling Custom UI attribute button group order
     attributeButtonOrder: Optional[List[str]]
+    trackList: Optional[CustomUITrackListSettings]
 
 
 class VisualMask(BaseModel):