From 7f6f3a861890c5c4fc807c503c06e028cdf36712 Mon Sep 17 00:00:00 2001
From: Paul Elliott <paul@vizworkshop.com>
Date: Sun, 17 May 2026 17:22:24 -0400
Subject: [PATCH 01/12] feat(cine): add multi-frame DICOM playback foundation

---
 package-lock.json                             |   8 +
 package.json                                  |   1 +
 src/components/PatientStudyVolumeBrowser.vue  |  10 +-
 src/components/PlayControls.vue               | 141 ++++++++
 src/components/SliceViewer.vue                |  24 +-
 src/components/SliceViewerOverlay.vue         |  19 +-
 .../tools/polygon/PolygonWidget2D.vue         |   4 +-
 .../tools/rectangle/RectangleWidget2D.vue     |   4 +-
 src/components/tools/ruler/RulerWidget2D.vue  |   4 +-
 .../vtk/VtkBaseSliceRepresentation.vue        | 151 ++++++++-
 .../vtk/VtkSliceViewSlicingKeyManipulator.vue |  12 +-
 .../vtk/VtkSliceViewSlicingManipulator.vue    |  12 +-
 src/core/cine/DicomCineImage.ts               | 289 +++++++++++++++++
 .../cine/__tests__/parseCineDicom.spec.ts     | 253 +++++++++++++++
 src/core/cine/frameCache.ts                   | 184 +++++++++++
 src/core/cine/getRenderSlice.ts               |  17 +
 src/core/cine/isCineImage.ts                  |  14 +
 src/core/cine/parseCineDicom.ts               | 307 ++++++++++++++++++
 src/core/dicomTags.ts                         |  27 +-
 src/core/progressiveImage.ts                  |   8 +
 src/core/streaming/chunkImage.ts              |   5 -
 src/core/streaming/dicomChunkImage.ts         |   8 +-
 .../vtk/useMouseRangeManipulatorListener.ts   |   8 +-
 src/store/datasets-dicom.ts                   |  97 +++++-
 src/store/image-cache.ts                      |   5 +
 src/store/image-stats.ts                      |   5 +
 src/store/segmentGroups.ts                    |   7 +-
 src/store/tools/useAnnotationTool.ts          |   5 +-
 src/store/view-configs/slicing.ts             |  14 +
 tests/specs/cine-rendering.e2e.ts             |  38 +++
 tests/specs/configTestUtils.ts                |   7 +
 tests/specs/reveal-slice.e2e.ts               | 169 ++++++++++
 wdio.shared.conf.ts                           |   4 +
 33 files changed, 1806 insertions(+), 55 deletions(-)
 create mode 100644 src/components/PlayControls.vue
 create mode 100644 src/core/cine/DicomCineImage.ts
 create mode 100644 src/core/cine/__tests__/parseCineDicom.spec.ts
 create mode 100644 src/core/cine/frameCache.ts
 create mode 100644 src/core/cine/getRenderSlice.ts
 create mode 100644 src/core/cine/isCineImage.ts
 create mode 100644 src/core/cine/parseCineDicom.ts
 create mode 100644 tests/specs/cine-rendering.e2e.ts
 create mode 100644 tests/specs/reveal-slice.e2e.ts

diff --git a/package-lock.json b/package-lock.json
index 9573fada4..448150066 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -43,6 +43,7 @@
         "cors": "^2.8.5",
         "cross-env": "^10.1.0",
         "deep-equal": "^2.2.3",
+        "dicom-parser": "^1.8.21",
         "dicomweb-client-typed": "^0.8.6",
         "eslint": "^9.39.1",
         "eslint-config-prettier": "^10.1.8",
@@ -11938,6 +11939,13 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/dicom-parser": {
+      "version": "1.8.21",
+      "resolved": "https://registry.npmjs.org/dicom-parser/-/dicom-parser-1.8.21.tgz",
+      "integrity": "sha512-lYCweHQDsC8UFpXErPlg86Px2A8bay0HiUY+wzoG3xv5GzgqVHU3lziwSc/Gzn7VV7y2KeP072SzCviuOoU02w==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/dicomweb-client-typed": {
       "version": "0.8.6",
       "resolved": "https://registry.npmjs.org/dicomweb-client-typed/-/dicomweb-client-typed-0.8.6.tgz",
diff --git a/package.json b/package.json
index 6822ffe4e..0715c9995 100644
--- a/package.json
+++ b/package.json
@@ -66,6 +66,7 @@
     "cors": "^2.8.5",
     "cross-env": "^10.1.0",
     "deep-equal": "^2.2.3",
+    "dicom-parser": "^1.8.21",
     "dicomweb-client-typed": "^0.8.6",
     "eslint": "^9.39.1",
     "eslint-config-prettier": "^10.1.8",
diff --git a/src/components/PatientStudyVolumeBrowser.vue b/src/components/PatientStudyVolumeBrowser.vue
index 2a640a3cb..519457eae 100644
--- a/src/components/PatientStudyVolumeBrowser.vue
+++ b/src/components/PatientStudyVolumeBrowser.vue
@@ -3,9 +3,7 @@ import { computed, defineComponent, reactive, toRefs, watch } from 'vue';
 import type { PropType } from 'vue';
 import GroupableItem from '@/src/components/GroupableItem.vue';
 import { DataSelection, isDicomImage } from '@/src/utils/dataSelection';
-import { ThumbnailStrategy } from '@/src/core/streaming/chunkImage';
 import { useImageCacheStore } from '@/src/store/image-cache';
-import DicomChunkImage from '@/src/core/streaming/dicomChunkImage';
 import { getDisplayName, useDICOMStore } from '@/src/store/datasets-dicom';
 import { useDatasetStore } from '@/src/store/datasets';
 import { useMultiSelection } from '@/src/composables/useMultiSelection';
@@ -100,13 +98,11 @@ export default defineComponent({
           }
 
           const image = imageCacheStore.imageById[key];
-          if (!image || !(image instanceof DicomChunkImage)) return;
+          if (!image) return;
 
           try {
-            const thumb = await image.getThumbnail(
-              ThumbnailStrategy.MiddleSlice
-            );
-            if (thumb !== null) {
+            const thumb = await image.getThumbnail();
+            if (thumb) {
               thumbnailCache[cacheKey] = { kind: 'image', value: thumb };
             } else {
               thumbnailCache[cacheKey] = {
diff --git a/src/components/PlayControls.vue b/src/components/PlayControls.vue
new file mode 100644
index 000000000..0ccfeb53e
--- /dev/null
+++ b/src/components/PlayControls.vue
@@ -0,0 +1,141 @@
+<script setup lang="ts">
+import { computed, ref, toRefs, watch } from 'vue';
+import { useIntervalFn } from '@vueuse/core';
+import { Maybe } from '@/src/types';
+import { useSliceConfig } from '@/src/composables/useSliceConfig';
+import { getCineImage } from '@/src/core/cine/isCineImage';
+
+type Props = {
+  viewId: string;
+  imageId: Maybe<string>;
+};
+
+const props = defineProps<Props>();
+const { imageId, viewId } = toRefs(props);
+
+const cine = computed(() => getCineImage(imageId.value));
+const { slice, range } = useSliceConfig(viewId, imageId);
+
+const playing = ref(false);
+const fps = ref(0);
+
+watch(
+  cine,
+  (image) => {
+    if (!image) {
+      fps.value = 0;
+      return;
+    }
+    const frameTime = image.header.frameTimeMs;
+    fps.value = frameTime && frameTime > 0 ? Math.round(1000 / frameTime) : 24;
+  },
+  { immediate: true }
+);
+
+const period = computed(() =>
+  fps.value > 0 ? Math.max(1, Math.round(1000 / fps.value)) : 1000
+);
+
+const { pause, resume } = useIntervalFn(
+  () => {
+    const [min, max] = range.value;
+    if (max <= min) return;
+    const next = (slice.value ?? min) + 1;
+    slice.value = next > max ? min : next;
+  },
+  period,
+  { immediate: false, immediateCallback: false }
+);
+
+watch(playing, (isPlaying) => {
+  if (isPlaying) resume();
+  else pause();
+});
+
+// Pause when the cine clip changes (or is removed).
+watch(imageId, () => {
+  playing.value = false;
+});
+
+const MIN_FPS = 1;
+const MAX_FPS = 120;
+
+function togglePlay() {
+  playing.value = !playing.value;
+}
+
+function clampFps() {
+  if (!Number.isFinite(fps.value) || fps.value < MIN_FPS) fps.value = MIN_FPS;
+  else if (fps.value > MAX_FPS) fps.value = MAX_FPS;
+  else fps.value = Math.round(fps.value);
+}
+</script>
+
+<template>
+  <div v-if="cine" class="play-controls pointer-events-all">
+    <button
+      type="button"
+      class="play-btn"
+      :title="playing ? 'Pause' : 'Play'"
+      @click="togglePlay"
+    >
+      <v-icon size="14">{{ playing ? 'mdi-pause' : 'mdi-play' }}</v-icon>
+    </button>
+    <input
+      v-model.number="fps"
+      type="number"
+      :min="MIN_FPS"
+      :max="MAX_FPS"
+      class="fps-input"
+      title="Frames per second"
+      @change="clampFps"
+    />
+    <span class="fps-suffix">fps</span>
+  </div>
+</template>
+
+<style scoped>
+.play-controls {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  color: #fff;
+  font-size: 0.8125rem;
+  line-height: 1;
+}
+
+.play-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  padding: 0;
+  background: transparent;
+  border: none;
+  color: inherit;
+  cursor: pointer;
+}
+
+.play-btn:hover {
+  color: rgba(255, 255, 255, 0.8);
+}
+
+.fps-input {
+  width: 44px;
+  background: transparent;
+  color: inherit;
+  border: none;
+  padding: 0 4px;
+  text-align: right;
+  font-size: inherit;
+}
+
+.fps-input:focus {
+  outline: 1px solid rgba(255, 255, 255, 0.3);
+}
+
+.fps-suffix {
+  opacity: 0.7;
+}
+</style>
diff --git a/src/components/SliceViewer.vue b/src/components/SliceViewer.vue
index d2a07dbc2..5d704177e 100644
--- a/src/components/SliceViewer.vue
+++ b/src/components/SliceViewer.vue
@@ -146,6 +146,7 @@
             <bounding-rectangle :points="selectionPoints" />
           </svg>
           <scalar-probe
+            v-if="!isCine"
             :base-rep="baseSliceRep"
             :layer-reps="layerSliceReps"
             :segment-groups-reps="segSliceReps"
@@ -158,9 +159,10 @@
 </template>
 
 <script setup lang="ts">
-import { ref, toRefs, computed } from 'vue';
+import { ref, toRefs, computed, watch } from 'vue';
 import { storeToRefs } from 'pinia';
 import { useCurrentImage } from '@/src/composables/useCurrentImage';
+import { useProbeStore } from '@/src/store/probe';
 import { getLPSAxisFromDir } from '@/src/utils/lps';
 import VtkSliceView from '@/src/components/vtk/VtkSliceView.vue';
 import { VtkViewApi } from '@/src/types/vtk-types';
@@ -186,6 +188,7 @@ import { useAnnotationToolStore, useToolStore } from '@/src/store/tools';
 import { doesToolFrameMatchViewAxis } from '@/src/composables/annotationTool';
 import { useWebGLWatchdog } from '@/src/composables/useWebGLWatchdog';
 import { useSliceConfig } from '@/src/composables/useSliceConfig';
+import { isCineImage } from '@/src/core/cine/isCineImage';
 import VtkSliceViewWindowManipulator from '@/src/components/vtk/VtkSliceViewWindowManipulator.vue';
 import VtkSliceViewSlicingManipulator from '@/src/components/vtk/VtkSliceViewSlicingManipulator.vue';
 import VtkSliceViewSlicingKeyManipulator from '@/src/components/vtk/VtkSliceViewSlicingKeyManipulator.vue';
@@ -240,9 +243,6 @@ useViewAnimationListener(vtkView, viewId, '2D');
 
 // active tool
 const { currentTool } = storeToRefs(useToolStore());
-const windowingManipulatorProps = computed(() =>
-  currentTool.value === Tools.WindowLevel ? { button: 1 } : { button: -1 }
-);
 
 // base image
 const {
@@ -257,6 +257,22 @@ const { slice: currentSlice, range: sliceRange } = useSliceConfig(
   currentImageID
 );
 
+const windowingManipulatorProps = computed(() => {
+  // W/L is meaningless for 8-bit display-encoded cine; keep the manipulator
+  // off so dragging doesn't crush colors.
+  if (currentTool.value !== Tools.WindowLevel) return { button: -1 };
+  if (isCineImage(currentImageID.value)) return { button: -1 };
+  return { button: 1 };
+});
+
+// Scalar probe samples the canonical image; for cine that's frame-0-only.
+// Unmount it for cine views and clear any stale probe data on switch.
+const isCine = computed(() => isCineImage(currentImageID.value));
+const probeStore = useProbeStore();
+watch(isCine, (cine) => {
+  if (cine) probeStore.clearProbeData();
+});
+
 onVTKEvent(currentImageData, 'onModified', () => {
   vtkView.value?.requestRender();
 });
diff --git a/src/components/SliceViewerOverlay.vue b/src/components/SliceViewerOverlay.vue
index 5fb910bae..bc29430ae 100644
--- a/src/components/SliceViewerOverlay.vue
+++ b/src/components/SliceViewerOverlay.vue
@@ -9,6 +9,9 @@ import { useOrientationLabels } from '@/src/composables/useOrientationLabels';
 import DicomQuickInfoButton from '@/src/components/DicomQuickInfoButton.vue';
 import ViewTypeSwitcher from '@/src/components/ViewTypeSwitcher.vue';
 import { useImage } from '@/src/composables/useCurrentImage';
+import { isCineImage } from '@/src/core/cine/isCineImage';
+import PlayControls from '@/src/components/PlayControls.vue';
+import { computed } from 'vue';
 
 interface Props {
   viewId: string;
@@ -34,6 +37,8 @@ const {
   level: windowLevel,
 } = useWindowingConfig(viewId, imageId);
 const { metadata } = useImage(imageId);
+
+const isCine = computed(() => isCineImage(imageId.value));
 </script>
 
 <template>
@@ -56,13 +61,23 @@ const { metadata } = useImage(imageId);
     <template v-slot:bottom-left>
       <div class="annotation-cell">
         <div v-if="sliceConfig">
-          Slice: {{ slice + 1 }}/{{ sliceRange[1] + 1 }}
+          <span v-if="isCine" class="frame-label">
+            Frame: {{ slice + 1 }} / {{ sliceRange[1] + 1 }}
+          </span>
+          <span v-else class="slice-label">
+            Slice: {{ slice + 1 }}/{{ sliceRange[1] + 1 }}
+          </span>
         </div>
-        <div v-if="wlConfig">
+        <div v-if="wlConfig && !isCine">
           W/L: {{ windowWidth.toFixed(2) }} / {{ windowLevel.toFixed(2) }}
         </div>
       </div>
     </template>
+    <template v-slot:bottom-center>
+      <div v-if="isCine" class="annotation-cell" @click.stop>
+        <play-controls :view-id="viewId" :image-id="imageId" />
+      </div>
+    </template>
     <template v-slot:top-right>
       <div class="annotation-cell">
         <dicom-quick-info-button :image-id="imageId"></dicom-quick-info-button>
diff --git a/src/components/tools/polygon/PolygonWidget2D.vue b/src/components/tools/polygon/PolygonWidget2D.vue
index da252fc3c..28311eb4d 100644
--- a/src/components/tools/polygon/PolygonWidget2D.vue
+++ b/src/components/tools/polygon/PolygonWidget2D.vue
@@ -30,6 +30,7 @@ import type { Vector3 } from '@kitware/vtk.js/types';
 import { ToolID } from '@/src/types/annotation-tool';
 import { VtkViewContext } from '@/src/components/vtk/context';
 import { useSliceInfo } from '@/src/composables/useSliceInfo';
+import { getRenderSlice } from '@/src/core/cine/getRenderSlice';
 import SVG2DComponent from './PolygonSVG2D.vue';
 
 export default defineComponent({
@@ -134,10 +135,11 @@ export default defineComponent({
     widget.setManipulator(manipulator);
 
     watchEffect(() => {
+      const semantic = tool.value?.slice ?? slice.value ?? 0;
       updatePlaneManipulatorFor2DView(
         manipulator,
         viewDirection.value,
-        tool.value?.slice ?? slice.value ?? 0,
+        getRenderSlice(imageId.value, semantic),
         imageMetadata.value
       );
     });
diff --git a/src/components/tools/rectangle/RectangleWidget2D.vue b/src/components/tools/rectangle/RectangleWidget2D.vue
index a41f28b54..320f1c83d 100644
--- a/src/components/tools/rectangle/RectangleWidget2D.vue
+++ b/src/components/tools/rectangle/RectangleWidget2D.vue
@@ -32,6 +32,7 @@ import { VtkViewContext } from '@/src/components/vtk/context';
 import { useSliceInfo } from '@/src/composables/useSliceInfo';
 import { Maybe } from '@/src/types';
 import { whenever } from '@vueuse/core';
+import { getRenderSlice } from '@/src/core/cine/getRenderSlice';
 
 const useStore = useRectangleStore;
 const vtkWidgetFactory = vtkRectangleWidget;
@@ -122,10 +123,11 @@ export default defineComponent({
     widget.setManipulator(manipulator);
 
     watchEffect(() => {
+      const semantic = tool.value?.slice ?? slice.value;
       updatePlaneManipulatorFor2DView(
         manipulator,
         viewDirection.value,
-        tool.value?.slice ?? slice.value,
+        getRenderSlice(imageId.value, semantic),
         imageMetadata.value
       );
     });
diff --git a/src/components/tools/ruler/RulerWidget2D.vue b/src/components/tools/ruler/RulerWidget2D.vue
index b24b8d976..ae42ab7c9 100644
--- a/src/components/tools/ruler/RulerWidget2D.vue
+++ b/src/components/tools/ruler/RulerWidget2D.vue
@@ -33,6 +33,7 @@ import { Maybe } from '@/src/types';
 import { useSliceInfo } from '@/src/composables/useSliceInfo';
 import { VtkViewContext } from '@/src/components/vtk/context';
 import { whenever } from '@vueuse/core';
+import { getRenderSlice } from '@/src/core/cine/getRenderSlice';
 
 export default defineComponent({
   name: 'RulerWidget2D',
@@ -121,10 +122,11 @@ export default defineComponent({
     widget.setManipulator(manipulator);
 
     watchEffect(() => {
+      const semantic = ruler.value?.slice ?? slice.value;
       updatePlaneManipulatorFor2DView(
         manipulator,
         viewDirection.value,
-        ruler.value?.slice ?? slice.value,
+        getRenderSlice(imageId.value, semantic),
         imageMetadata.value
       );
     });
diff --git a/src/components/vtk/VtkBaseSliceRepresentation.vue b/src/components/vtk/VtkBaseSliceRepresentation.vue
index b8c63569c..0a89d4503 100644
--- a/src/components/vtk/VtkBaseSliceRepresentation.vue
+++ b/src/components/vtk/VtkBaseSliceRepresentation.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
-import { toRefs, watchEffect, inject } from 'vue';
+import { computed, toRefs, watchEffect, watch, inject, shallowRef } from 'vue';
+import vtkImageData from '@kitware/vtk.js/Common/DataModel/ImageData';
+import vtkDataArray from '@kitware/vtk.js/Common/Core/DataArray';
 import { useImage } from '@/src/composables/useCurrentImage';
 import { useSliceRepresentation } from '@/src/core/vtk/useSliceRepresentation';
 import { useSliceConfig } from '@/src/composables/useSliceConfig';
@@ -10,6 +12,9 @@ import { vtkFieldRef } from '@/src/core/vtk/vtkFieldRef';
 import { SlicingMode } from '@kitware/vtk.js/Rendering/Core/ImageMapper/Constants';
 import { Maybe } from '@/src/types';
 import { VtkViewContext } from '@/src/components/vtk/context';
+import { getCineImage, isCineImage } from '@/src/core/cine/isCineImage';
+import type DicomCineImage from '@/src/core/cine/DicomCineImage';
+import type { DecodedFrame } from '@/src/core/cine/frameCache';
 
 interface Props {
   viewId: string;
@@ -17,6 +22,61 @@ interface Props {
   axis: LPSAxis;
 }
 
+type CineRenderImage = {
+  imageData: vtkImageData;
+  dataArray: vtkDataArray;
+  rgbBuffer: Uint8Array;
+};
+
+function createCineRenderImage(cineImage: DicomCineImage): CineRenderImage {
+  const source = cineImage.getVtkImageData();
+  if (!source) {
+    throw new Error('Cine image has no canonical vtkImageData');
+  }
+  const extent = source.getExtent();
+  const spacing = source.getSpacing();
+  const origin = source.getOrigin();
+  const direction = source.getDirection();
+  const cols = extent[1] - extent[0] + 1;
+  const rows = extent[3] - extent[2] + 1;
+
+  const imageData = vtkImageData.newInstance();
+  imageData.setExtent(extent);
+  imageData.setSpacing(spacing);
+  imageData.setOrigin(origin);
+  imageData.setDirection(direction);
+
+  const rgbBuffer = new Uint8Array(cols * rows * 3);
+  const dataArray = vtkDataArray.newInstance({
+    numberOfComponents: 3,
+    values: rgbBuffer,
+  });
+  dataArray.setRange({ min: 0, max: 255 }, 0);
+  dataArray.setRange({ min: 0, max: 255 }, 1);
+  dataArray.setRange({ min: 0, max: 255 }, 2);
+  imageData.getPointData().setScalars(dataArray);
+
+  return { imageData, dataArray, rgbBuffer };
+}
+
+function copyDecodedFrameToRgb(
+  frame: DecodedFrame,
+  target: CineRenderImage
+): boolean {
+  const { rgba } = frame;
+  const out = target.rgbBuffer;
+  const expectedPixels = out.length / 3;
+  if (rgba.length !== expectedPixels * 4) return false;
+  for (let i = 0; i < expectedPixels; i++) {
+    const src = i * 4;
+    const dst = i * 3;
+    out[dst] = rgba[src];
+    out[dst + 1] = rgba[src + 1];
+    out[dst + 2] = rgba[src + 2];
+  }
+  return true;
+}
+
 const props = defineProps<Props>();
 const { viewId: viewID, imageId: imageID, axis } = toRefs(props);
 
@@ -29,8 +89,35 @@ const { metadata: imageMetadata, imageData } = useImage(imageID);
 const sliceConfig = useSliceConfig(viewID, imageID);
 const wlConfig = useWindowingConfig(viewID, imageID);
 
+const cine = computed(() => getCineImage(imageID.value));
+
+// Per-view render buffer for cine. Built from the canonical cine image's
+// geometry; the mapper renders from this local image so two views can show
+// different frames without overwriting each other's pixels.
+const cineRender = shallowRef<CineRenderImage | null>(null);
+
+watchEffect((onCleanup) => {
+  const cineImage = cine.value;
+  if (!cineImage) return;
+  const local = createCineRenderImage(cineImage);
+  cineRender.value = local;
+  onCleanup(() => {
+    local.imageData.delete();
+    if (cineRender.value === local) {
+      cineRender.value = null;
+    }
+  });
+});
+
+// Mapper input — when cine, use the per-view buffer (or null until decoded
+// so we don't briefly show frame 0 from the canonical image).
+const mapperInput = computed(() => {
+  if (cine.value) return cineRender.value?.imageData ?? null;
+  return imageData.value;
+});
+
 // setup base image
-const sliceRep = useSliceRepresentation(view, imageData);
+const sliceRep = useSliceRepresentation(view, mapperInput);
 
 // set slice ordering to be in the back
 sliceRep.mapper.setResolveCoincidentTopologyToPolygonOffset();
@@ -45,14 +132,68 @@ watchEffect(() => {
 });
 
 // sync slicing
+// For cine, the semantic slice (frame index) is decoupled from the VTK
+// render slice — the per-view cine image is a single 2D plane, so the mapper
+// always renders slice 0. The frame index drives the local-buffer watcher
+// below.
 const slice = vtkFieldRef(sliceRep.mapper, 'slice');
-syncRefs(sliceConfig.slice, slice, { immediate: true });
+const renderSlice = computed(() => (cine.value ? 0 : sliceConfig.slice.value));
+syncRefs(renderSlice, slice, { immediate: true });
+
+// Decode the requested frame and copy it into the per-view buffer. A local
+// token guards against stale async work after rapid scrubs or cine-image
+// changes.
+let frameToken = 0;
+watch(
+  [() => sliceConfig.slice.value, cine, cineRender],
+  ([frame, cineImage, target]) => {
+    if (!cineImage || !target) return;
+    const myToken = ++frameToken;
+    cineImage
+      .getFrame(frame)
+      .then((decoded) => {
+        if (myToken !== frameToken) return;
+        if (cineRender.value !== target) return;
+        if (!copyDecodedFrameToRgb(decoded, target)) return;
+        target.dataArray.modified();
+        target.imageData.modified();
+        view.requestRender();
+      })
+      .catch(() => {
+        // getFrame already routed the error through reportError.
+      });
+  },
+  { immediate: true }
+);
 
 // sync windowing
+// For cine, the pixels are 8-bit display-encoded — the volume W/L pipeline is
+// meaningless. Pin the property to a full-byte pass-through and skip the
+// bidirectional wlConfig sync, which otherwise overwrites these values with
+// the uninitialized defaults (width=1, level=2^32-1) on first paint and again
+// any time wlConfig changes for an adjacent volume in the same session.
 const colorLevel = vtkFieldRef(sliceRep.property, 'colorLevel');
 const colorWindow = vtkFieldRef(sliceRep.property, 'colorWindow');
-syncRefs(wlConfig.level, colorLevel, { immediate: true });
-syncRefs(wlConfig.width, colorWindow, { immediate: true });
+
+watch(
+  () => isCineImage(imageID.value),
+  (cineNow, _prev, onCleanup) => {
+    if (cineNow) {
+      colorWindow.value = 255;
+      colorLevel.value = 127.5;
+      return;
+    }
+    const stopLevel = syncRefs(wlConfig.level, colorLevel, { immediate: true });
+    const stopWidth = syncRefs(wlConfig.width, colorWindow, {
+      immediate: true,
+    });
+    onCleanup(() => {
+      stopLevel();
+      stopWidth();
+    });
+  },
+  { immediate: true }
+);
 
 defineExpose(sliceRep);
 </script>
diff --git a/src/components/vtk/VtkSliceViewSlicingKeyManipulator.vue b/src/components/vtk/VtkSliceViewSlicingKeyManipulator.vue
index b7cfa8797..848bd32c4 100644
--- a/src/components/vtk/VtkSliceViewSlicingKeyManipulator.vue
+++ b/src/components/vtk/VtkSliceViewSlicingKeyManipulator.vue
@@ -67,16 +67,14 @@ const scroll = useMouseRangeManipulatorListener(
   sliceConfig.range,
   1,
   sliceConfig.slice.value,
-  -1
+  -1,
+  // Set the scrolled view as the active view — only on real user input.
+  () => {
+    useViewStore().setActiveView(unref(viewId));
+  }
 );
 
 syncRef(scroll, sliceConfig.slice, { immediate: true });
-
-// set just scrolled view as active view
-watch(scroll, () => {
-  const viewStore = useViewStore();
-  viewStore.setActiveView(unref(viewId));
-});
 </script>
 
 <template><slot></slot></template>
diff --git a/src/components/vtk/VtkSliceViewSlicingManipulator.vue b/src/components/vtk/VtkSliceViewSlicingManipulator.vue
index a7f92f089..b389bc408 100644
--- a/src/components/vtk/VtkSliceViewSlicingManipulator.vue
+++ b/src/components/vtk/VtkSliceViewSlicingManipulator.vue
@@ -10,7 +10,7 @@ import vtkMouseRangeManipulator, {
 } from '@kitware/vtk.js/Interaction/Manipulators/MouseRangeManipulator';
 import vtkInteractorStyleManipulator from '@kitware/vtk.js/Interaction/Style/InteractorStyleManipulator';
 import { syncRef } from '@vueuse/core';
-import { inject, toRefs, unref, watch, computed } from 'vue';
+import { inject, toRefs, unref, computed } from 'vue';
 import { useViewStore } from '@/src/store/views';
 
 interface Props {
@@ -55,14 +55,12 @@ const scroll = useMouseRangeManipulatorListener(
   sliceConfig.range,
   1,
   sliceConfig.slice.value,
-  -1 // Invert scroll: scroll down = decrease slice for anatomical consistency
+  -1, // Invert scroll: scroll down = decrease slice for anatomical consistency
+  () => {
+    useViewStore().setActiveView(unref(viewId));
+  }
 );
 
-watch(scroll, () => {
-  const viewStore = useViewStore();
-  viewStore.setActiveView(unref(viewId));
-});
-
 syncRef(scroll, sliceConfig.slice, { immediate: true });
 </script>
 
diff --git a/src/core/cine/DicomCineImage.ts b/src/core/cine/DicomCineImage.ts
new file mode 100644
index 000000000..776101504
--- /dev/null
+++ b/src/core/cine/DicomCineImage.ts
@@ -0,0 +1,289 @@
+// DicomCineImage — backing image for multi-frame ultrasound DICOM clips.
+//
+// Treats the clip as a normal VolView image selection: extends BaseProgressiveImage,
+// owns a single 2D vtkImageData (extent [0, cols-1, 0, rows-1, 0, 0], 3-component
+// RGB uint8 scalars), and swaps the scalars in-place whenever the selected frame
+// changes. The original compressed frame bytes live in this object too, so we never
+// hold all decoded frames at once — only the LRU's worth.
+
+import vtkImageData from '@kitware/vtk.js/Common/DataModel/ImageData';
+import vtkDataArray from '@kitware/vtk.js/Common/Core/DataArray';
+import mitt, { Emitter } from 'mitt';
+import { computed } from 'vue';
+
+import {
+  BaseProgressiveImage,
+  ProgressiveImageEvents,
+} from '@/src/core/progressiveImage';
+import {
+  CineHeader,
+  CineParseResult,
+  isNativeTransferSyntax,
+  isSupportedCineTransferSyntax,
+} from './parseCineDicom';
+import {
+  DecodedFrame,
+  FrameCache,
+  decodeJpegFrame,
+  decodeNativeFrame,
+} from './frameCache';
+
+// DICOM PhysicalUnits code 3 = centimetres. Other codes (dB, %, m/s, ...) are
+// used for Doppler regions and aren't a length we can express as VTK spacing.
+const PHYSICAL_UNITS_CM = 3;
+
+function pickPixelSpacing(header: CineHeader): [number, number] {
+  const region = header.regions[0];
+  if (!region) return [1, 1];
+  if (
+    region.physicalUnitsX !== PHYSICAL_UNITS_CM ||
+    region.physicalUnitsY !== PHYSICAL_UNITS_CM
+  ) {
+    return [1, 1];
+  }
+  const dx = region.physicalDeltaX;
+  const dy = region.physicalDeltaY;
+  if (!dx || !dy || !Number.isFinite(dx) || !Number.isFinite(dy)) {
+    return [1, 1];
+  }
+  // Convert centimetres-per-pixel to millimetres-per-pixel.
+  return [Math.abs(dx) * 10, Math.abs(dy) * 10];
+}
+
+// Convert RGBA (from createImageBitmap or our native decoder) to a 3-component
+// RGB Uint8Array suitable for VTK scalar swap.
+function rgbaToRgb(rgba: Uint8ClampedArray, out: Uint8Array): void {
+  const pixels = rgba.length >> 2;
+  for (let i = 0; i < pixels; i++) {
+    const src = i * 4;
+    const dst = i * 3;
+    out[dst] = rgba[src];
+    out[dst + 1] = rgba[src + 1];
+    out[dst + 2] = rgba[src + 2];
+  }
+}
+
+export default class DicomCineImage extends BaseProgressiveImage {
+  public readonly header: CineHeader;
+
+  private readonly frames: Uint8Array[];
+  private readonly encapsulated: boolean;
+  private readonly cache: FrameCache;
+  private readonly inFlightFrames: Map<number, Promise<DecodedFrame>>;
+  private readonly events: Emitter<ProgressiveImageEvents>;
+  private readonly scalarBuffer: Uint8Array;
+
+  private disposed = false;
+
+  constructor(init: CineParseResult) {
+    super();
+
+    const { header, frames, encapsulated } = init;
+    this.header = header;
+    this.frames = frames;
+    this.encapsulated = encapsulated;
+    this.cache = new FrameCache();
+    this.inFlightFrames = new Map();
+    this.events = mitt();
+
+    // Build the single 2D vtkImageData. 3-component RGB uint8.
+    const cols = header.cols;
+    const rows = header.rows;
+    if (!cols || !rows) {
+      throw new Error('Cine DICOM has invalid Rows/Columns');
+    }
+    this.scalarBuffer = new Uint8Array(cols * rows * 3);
+    const imageData = vtkImageData.newInstance();
+    imageData.setExtent([0, cols - 1, 0, rows - 1, 0, 0]);
+    // Region calibration — DICOM C.8.5.5.1: PhysicalUnits=3 means cm. We only
+    // apply spacing when both axes report cm, so length measurements come out
+    // in millimetres. Anything else (missing region, percent, dB, m/s, mixed
+    // units) leaves spacing at 1 — the ruler then reports pixels, which is
+    // the documented v1 behavior.
+    const [spacingX, spacingY] = pickPixelSpacing(header);
+    imageData.setSpacing([spacingX, spacingY, 1]);
+    imageData.setOrigin([0, 0, 0]);
+    imageData.setDirection([1, 0, 0, 0, 1, 0, 0, 0, 1]);
+
+    const scalars = vtkDataArray.newInstance({
+      numberOfComponents: 3,
+      values: this.scalarBuffer,
+    });
+    scalars.setRange({ min: 0, max: 255 }, 0);
+    scalars.setRange({ min: 0, max: 255 }, 1);
+    scalars.setRange({ min: 0, max: 255 }, 2);
+    imageData.getPointData().setScalars(scalars);
+
+    this.vtkImageData.value = imageData;
+
+    // The cine clip has all metadata up-front, so it is "complete" once the
+    // first frame is decoded. Volume views still see status='incomplete' until
+    // we kick off the initial decode in startLoad().
+    this.status.value = 'incomplete';
+    this.loaded = computed(
+      () => !this.loading.value && this.status.value === 'complete'
+    );
+
+    this.events.on('loading', (loading) => {
+      this.loading.value = loading;
+    });
+    this.events.on('status', (status) => {
+      this.status.value = status;
+    });
+  }
+
+  addEventListener<T extends keyof ProgressiveImageEvents>(
+    type: T,
+    callback: (info: ProgressiveImageEvents[T]) => void
+  ): void {
+    this.events.on(type, callback);
+  }
+
+  removeEventListener<T extends keyof ProgressiveImageEvents>(
+    type: T,
+    callback: (info: ProgressiveImageEvents[T]) => void
+  ): void {
+    this.events.off(type, callback);
+  }
+
+  startLoad(): void {
+    // No streaming step — the compressed bytes are already in memory. We
+    // decode the first frame so the canonical compatibility image has valid
+    // scalars for older consumers (thumbnail, getVtkImageData, metadata).
+    if (this.disposed) return;
+    if (!isSupportedCineTransferSyntax(this.header.transferSyntaxUID)) {
+      this.reportError(
+        new Error(
+          `Unsupported cine transfer syntax: ${this.header.transferSyntaxUID}`
+        )
+      );
+      return;
+    }
+    this.events.emit('loading', true);
+    this.getFrame(0)
+      .then((frame) => {
+        if (this.disposed) return;
+        this.applyDecodedFrame(frame.rgba);
+        this.markComplete();
+      })
+      .catch(() => {
+        // getFrame already routed the error through reportError.
+      });
+  }
+
+  stopLoad(): void {
+    // Nothing to interrupt — frames are decoded one at a time on demand.
+  }
+
+  dispose(): void {
+    if (this.disposed) return;
+    this.disposed = true;
+    super.dispose();
+    this.events.all.clear();
+    this.cache.clear();
+    this.inFlightFrames.clear();
+    // Clear the compressed-frame views; we don't own the underlying buffer
+    // (it was sliced from the original ArrayBuffer), but null'ing the array
+    // lets GC reclaim the wrapper objects.
+    this.frames.length = 0;
+    this.vtkImageData.value.delete();
+  }
+
+  getNumberOfFrames(): number {
+    return this.header.numberOfFrames;
+  }
+
+  // Decoded-frame access for per-view render buffers. Concurrent requests
+  // for the same uncached frame share a single decode via inFlightFrames.
+  async getFrame(frameIndex: number): Promise<DecodedFrame> {
+    if (this.disposed) {
+      throw new Error('DicomCineImage is disposed');
+    }
+    const clamped = Math.max(
+      0,
+      Math.min(this.header.numberOfFrames - 1, frameIndex | 0)
+    );
+
+    const cached = this.cache.get(clamped);
+    if (cached) return cached;
+
+    const inFlight = this.inFlightFrames.get(clamped);
+    if (inFlight) return inFlight;
+
+    const decodePromise = (async () => {
+      try {
+        const decoded = await this.decode(clamped);
+        if (this.disposed) {
+          throw new Error('DicomCineImage is disposed');
+        }
+        this.cache.set(clamped, decoded);
+        return decoded;
+      } catch (err) {
+        // Disposal isn't a decode failure; don't emit a user-visible error.
+        if (!this.disposed) {
+          this.reportError(err);
+        }
+        throw err;
+      } finally {
+        this.inFlightFrames.delete(clamped);
+      }
+    })();
+
+    this.inFlightFrames.set(clamped, decodePromise);
+    return decodePromise;
+  }
+
+  // Emit an error and clear the loading flag — otherwise consumers stay stuck
+  // on the spinner forever after a bad first-frame decode.
+  private reportError(err: unknown): void {
+    const error = err instanceof Error ? err : new Error(String(err));
+    this.events.emit('error', error);
+    if (this.loading.value) {
+      this.events.emit('loading', false);
+    }
+  }
+
+  private async decode(frameIndex: number) {
+    const bytes = this.frames[frameIndex];
+    if (!bytes) throw new Error(`Frame ${frameIndex} is missing`);
+    if (this.encapsulated) {
+      return decodeJpegFrame(bytes, this.header.cols, this.header.rows);
+    }
+    return decodeNativeFrame(bytes, {
+      width: this.header.cols,
+      height: this.header.rows,
+      samplesPerPixel: this.header.samplesPerPixel,
+      photometric: this.header.photometricInterpretation,
+      planarConfiguration: this.header.planarConfiguration,
+    });
+  }
+
+  private applyDecodedFrame(rgba: Uint8ClampedArray): void {
+    rgbaToRgb(rgba, this.scalarBuffer);
+    const scalars = this.vtkImageData.value.getPointData().getScalars();
+    scalars.modified();
+    this.vtkImageData.value.modified();
+  }
+
+  private markComplete(): void {
+    if (this.status.value !== 'complete') {
+      this.events.emit('status', 'complete');
+    }
+    if (this.loading.value) {
+      this.events.emit('loading', false);
+    }
+  }
+
+  // Helper used by import routing to decide whether the file is cine-renderable.
+  static isSupported(header: CineHeader): boolean {
+    if (!isSupportedCineTransferSyntax(header.transferSyntaxUID)) return false;
+    if (isNativeTransferSyntax(header.transferSyntaxUID)) {
+      // Native pixel data: only support 8-bit RGB or grayscale for v1.
+      if (header.bitsAllocated !== 8) return false;
+      if (header.samplesPerPixel !== 1 && header.samplesPerPixel !== 3) {
+        return false;
+      }
+    }
+    return true;
+  }
+}
diff --git a/src/core/cine/__tests__/parseCineDicom.spec.ts b/src/core/cine/__tests__/parseCineDicom.spec.ts
new file mode 100644
index 000000000..8441b59d0
--- /dev/null
+++ b/src/core/cine/__tests__/parseCineDicom.spec.ts
@@ -0,0 +1,253 @@
+import { describe, it, expect } from 'vitest';
+import { parseCineDicom } from '../parseCineDicom';
+
+// =================================================================
+// Synthetic DICOM builder (Explicit VR LE)
+// =================================================================
+//
+// Lets the parser smoke tests run anywhere without committing real ultrasound
+// fixtures. Produces the minimum byte layout the parser cares about: 128-byte
+// preamble, DICM magic, a TransferSyntaxUID file-meta element, and a hand-
+// rolled dataset.
+
+const TS_EXPLICIT_VR_LE = '1.2.840.10008.1.2.1';
+const TS_JPEG_BASELINE = '1.2.840.10008.1.2.4.50';
+
+function ascii(s: string): Uint8Array {
+  const out = new Uint8Array(s.length);
+  for (let i = 0; i < s.length; i++) out[i] = s.charCodeAt(i);
+  return out;
+}
+
+function evenPad(bytes: Uint8Array): Uint8Array {
+  if (bytes.byteLength % 2 === 0) return bytes;
+  const out = new Uint8Array(bytes.byteLength + 1);
+  out.set(bytes);
+  out[bytes.byteLength] = 0x20;
+  return out;
+}
+
+function concat(parts: Uint8Array[]): Uint8Array {
+  const total = parts.reduce((s, p) => s + p.byteLength, 0);
+  const out = new Uint8Array(total);
+  let off = 0;
+  for (const p of parts) {
+    out.set(p, off);
+    off += p.byteLength;
+  }
+  return out;
+}
+
+const VR4 = new Set([
+  'OB',
+  'OW',
+  'OF',
+  'OD',
+  'OL',
+  'SQ',
+  'UC',
+  'UR',
+  'UT',
+  'UN',
+]);
+
+function elementShort(
+  group: number,
+  element: number,
+  vr: string,
+  value: Uint8Array
+): Uint8Array {
+  const padded = evenPad(value);
+  const header = new Uint8Array(8);
+  const dv = new DataView(header.buffer);
+  dv.setUint16(0, group, true);
+  dv.setUint16(2, element, true);
+  header[4] = vr.charCodeAt(0);
+  header[5] = vr.charCodeAt(1);
+  dv.setUint16(6, padded.byteLength, true);
+  return concat([header, padded]);
+}
+
+function elementLong(
+  group: number,
+  element: number,
+  vr: string,
+  value: Uint8Array
+): Uint8Array {
+  if (!VR4.has(vr)) throw new Error(`VR ${vr} is not 4-byte length`);
+  const header = new Uint8Array(12);
+  const dv = new DataView(header.buffer);
+  dv.setUint16(0, group, true);
+  dv.setUint16(2, element, true);
+  header[4] = vr.charCodeAt(0);
+  header[5] = vr.charCodeAt(1);
+  // header[6..8] reserved zero
+  dv.setUint32(8, value.byteLength, true);
+  return concat([header, value]);
+}
+
+function u16Bytes(value: number): Uint8Array {
+  const out = new Uint8Array(2);
+  new DataView(out.buffer).setUint16(0, value, true);
+  return out;
+}
+
+function fileMeta(transferSyntaxUID: string): Uint8Array {
+  return elementShort(0x0002, 0x0010, 'UI', ascii(transferSyntaxUID));
+}
+
+const COMMON_TAGS = (numberOfFrames: number, rows: number, cols: number) =>
+  concat([
+    elementShort(0x0008, 0x0016, 'UI', ascii('1.2.840.10008.5.1.4.1.1.3.1')),
+    elementShort(0x0008, 0x0018, 'UI', ascii('1.2.3.4.5.6.7.8.9')),
+    elementShort(0x0008, 0x0060, 'CS', ascii('US')),
+    elementShort(0x0020, 0x000d, 'UI', ascii('1.2.3.4.5.6.7.8.9.1')),
+    elementShort(0x0020, 0x000e, 'UI', ascii('1.2.3.4.5.6.7.8.9.2')),
+    elementShort(0x0028, 0x0002, 'US', u16Bytes(1)),
+    elementShort(0x0028, 0x0004, 'CS', ascii('MONOCHROME2')),
+    elementShort(0x0028, 0x0008, 'IS', ascii(String(numberOfFrames))),
+    elementShort(0x0028, 0x0010, 'US', u16Bytes(rows)),
+    elementShort(0x0028, 0x0011, 'US', u16Bytes(cols)),
+    elementShort(0x0028, 0x0100, 'US', u16Bytes(8)),
+    elementShort(0x0028, 0x0101, 'US', u16Bytes(8)),
+  ]);
+
+function buildNativeDicom(opts: {
+  numberOfFrames: number;
+  rows: number;
+  cols: number;
+  fillByte?: number;
+}): Uint8Array {
+  const { numberOfFrames, rows, cols, fillByte = 0x42 } = opts;
+  const preamble = new Uint8Array(128);
+  const dicm = ascii('DICM');
+  const meta = fileMeta(TS_EXPLICIT_VR_LE);
+  const dataset = COMMON_TAGS(numberOfFrames, rows, cols);
+
+  const pixelBytes = new Uint8Array(numberOfFrames * rows * cols);
+  pixelBytes.fill(fillByte);
+  const pixelData = elementLong(0x7fe0, 0x0010, 'OB', pixelBytes);
+
+  return concat([preamble, dicm, meta, dataset, pixelData]);
+}
+
+function buildEncapsulatedDicom(opts: {
+  rows: number;
+  cols: number;
+  frameJpegBytes: Uint8Array[];
+  populateBot: boolean;
+}): Uint8Array {
+  const { rows, cols, frameJpegBytes, populateBot } = opts;
+  const preamble = new Uint8Array(128);
+  const dicm = ascii('DICM');
+  const meta = fileMeta(TS_JPEG_BASELINE);
+  const dataset = COMMON_TAGS(frameJpegBytes.length, rows, cols);
+
+  // Build the encapsulated PixelData: undefined length (0xFFFFFFFF), BOT item,
+  // one fragment item per frame, sequence delimitation item.
+  const fragmentItems = frameJpegBytes.map((bytes) => {
+    const padded = evenPad(bytes);
+    const header = new Uint8Array(8);
+    const dv = new DataView(header.buffer);
+    dv.setUint16(0, 0xfffe, true);
+    dv.setUint16(2, 0xe000, true);
+    dv.setUint32(4, padded.byteLength, true);
+    return concat([header, padded]);
+  });
+
+  const botEntries = new Uint8Array(
+    populateBot ? frameJpegBytes.length * 4 : 0
+  );
+  if (populateBot) {
+    const dv = new DataView(botEntries.buffer);
+    let relOffset = 0;
+    frameJpegBytes.forEach((bytes, i) => {
+      dv.setUint32(i * 4, relOffset, true);
+      relOffset += 8 + evenPad(bytes).byteLength;
+    });
+  }
+  const botHeader = new Uint8Array(8);
+  const botDv = new DataView(botHeader.buffer);
+  botDv.setUint16(0, 0xfffe, true);
+  botDv.setUint16(2, 0xe000, true);
+  botDv.setUint32(4, botEntries.byteLength, true);
+  const botItem = concat([botHeader, botEntries]);
+
+  const seqDelim = new Uint8Array(8);
+  const sdv = new DataView(seqDelim.buffer);
+  sdv.setUint16(0, 0xfffe, true);
+  sdv.setUint16(2, 0xe0dd, true);
+  sdv.setUint32(4, 0, true);
+
+  const pdHeader = new Uint8Array(12);
+  const pdDv = new DataView(pdHeader.buffer);
+  pdDv.setUint16(0, 0x7fe0, true);
+  pdDv.setUint16(2, 0x0010, true);
+  pdHeader[4] = 'O'.charCodeAt(0);
+  pdHeader[5] = 'B'.charCodeAt(0);
+  pdDv.setUint32(8, 0xffffffff, true);
+
+  const pdBody = concat([botItem, ...fragmentItems, seqDelim]);
+  return concat([preamble, dicm, meta, dataset, pdHeader, pdBody]);
+}
+
+// Marker bytes that look like a JPEG SOI/EOI. The parser doesn't actually
+// decode them, so any payload with the right framing works.
+const fakeJpegFrame = (n: number): Uint8Array =>
+  Uint8Array.from([0xff, 0xd8, 0xff, 0xe0, n & 0xff, 0xff, 0xd9]);
+
+// =================================================================
+// In-test (synthetic) fixtures — run everywhere
+// =================================================================
+
+describe('parseCineDicom on synthetic fixtures', () => {
+  it('parses Explicit VR LE native multi-frame', () => {
+    const bytes = buildNativeDicom({
+      numberOfFrames: 5,
+      rows: 4,
+      cols: 3,
+      fillByte: 0x7f,
+    });
+    const { header, frames, encapsulated } = parseCineDicom(bytes);
+    expect(encapsulated).toBe(false);
+    expect(header.numberOfFrames).toBe(5);
+    expect(header.rows).toBe(4);
+    expect(header.cols).toBe(3);
+    expect(header.transferSyntaxUID).toBe(TS_EXPLICIT_VR_LE);
+    expect(header.photometricInterpretation).toBe('MONOCHROME2');
+    expect(frames.length).toBe(5);
+    expect(frames[0].byteLength).toBe(4 * 3);
+    expect(frames[0][0]).toBe(0x7f);
+  });
+
+  it('parses encapsulated PixelData with a populated BOT', () => {
+    const frameBytes = [fakeJpegFrame(1), fakeJpegFrame(2), fakeJpegFrame(3)];
+    const bytes = buildEncapsulatedDicom({
+      rows: 2,
+      cols: 2,
+      frameJpegBytes: frameBytes,
+      populateBot: true,
+    });
+    const { header, frames, encapsulated } = parseCineDicom(bytes);
+    expect(encapsulated).toBe(true);
+    expect(header.numberOfFrames).toBe(3);
+    expect(frames.length).toBe(3);
+    expect(frames[0][0]).toBe(0xff);
+    expect(frames[0][1]).toBe(0xd8);
+    expect(frames[2][4]).toBe(3); // payload byte from fakeJpegFrame(3)
+  });
+
+  it('parses encapsulated PixelData with an empty BOT (1-fragment-per-frame)', () => {
+    const frameBytes = [fakeJpegFrame(10), fakeJpegFrame(20)];
+    const bytes = buildEncapsulatedDicom({
+      rows: 2,
+      cols: 2,
+      frameJpegBytes: frameBytes,
+      populateBot: false,
+    });
+    const { header, frames } = parseCineDicom(bytes);
+    expect(header.numberOfFrames).toBe(2);
+    expect(frames.length).toBe(2);
+    expect(frames[1][4]).toBe(20);
+  });
+});
diff --git a/src/core/cine/frameCache.ts b/src/core/cine/frameCache.ts
new file mode 100644
index 000000000..48860f199
--- /dev/null
+++ b/src/core/cine/frameCache.ts
@@ -0,0 +1,184 @@
+// Decoded-frame cache for cine playback.
+//
+// Holds CPU-visible RGBA bytes (not ImageBitmaps) because VTK's scalar buffer
+// needs to copy them in. Bounded by a byte budget; LRU eviction. Per-image
+// instance — disposed alongside the DicomCineImage that owns it.
+
+export type DecodedFrame = {
+  width: number;
+  height: number;
+  // RGBA, 8-bit per channel, row-major (matches OffscreenCanvas getImageData).
+  rgba: Uint8ClampedArray;
+};
+
+const DEFAULT_BUDGET_BYTES = 256 * 1024 * 1024;
+
+export class FrameCache {
+  private readonly budgetBytes: number;
+  private bytesInUse: number;
+  // Insertion-ordered Map gives O(1) LRU behavior.
+  private readonly entries: Map<number, DecodedFrame>;
+
+  constructor(budgetBytes: number = DEFAULT_BUDGET_BYTES) {
+    this.budgetBytes = budgetBytes;
+    this.bytesInUse = 0;
+    this.entries = new Map();
+  }
+
+  get(frameIndex: number): DecodedFrame | null {
+    const entry = this.entries.get(frameIndex);
+    if (!entry) return null;
+    // Move to "most recent" by re-inserting.
+    this.entries.delete(frameIndex);
+    this.entries.set(frameIndex, entry);
+    return entry;
+  }
+
+  set(frameIndex: number, frame: DecodedFrame): void {
+    const existing = this.entries.get(frameIndex);
+    if (existing) {
+      this.bytesInUse -= existing.rgba.byteLength;
+      this.entries.delete(frameIndex);
+    }
+    this.entries.set(frameIndex, frame);
+    this.bytesInUse += frame.rgba.byteLength;
+    this.evictUntilUnderBudget();
+  }
+
+  has(frameIndex: number): boolean {
+    return this.entries.has(frameIndex);
+  }
+
+  clear(): void {
+    this.entries.clear();
+    this.bytesInUse = 0;
+  }
+
+  size(): number {
+    return this.entries.size;
+  }
+
+  getBytesInUse(): number {
+    return this.bytesInUse;
+  }
+
+  private evictUntilUnderBudget(): void {
+    if (this.bytesInUse <= this.budgetBytes) return;
+    // Map iteration order is insertion order; the oldest entry is the first.
+    for (const key of this.entries.keys()) {
+      if (this.bytesInUse <= this.budgetBytes) break;
+      const entry = this.entries.get(key)!;
+      this.bytesInUse -= entry.rgba.byteLength;
+      this.entries.delete(key);
+    }
+  }
+}
+
+// =================================================================
+// Decoders
+// =================================================================
+
+// Decode a single JPEG-Baseline compressed frame to RGBA using the browser's
+// native JPEG decoder. Returns the decoded pixel bytes that can be copied
+// directly into a VTK scalar buffer.
+export async function decodeJpegFrame(
+  bytes: Uint8Array,
+  expectedWidth: number,
+  expectedHeight: number
+): Promise<DecodedFrame> {
+  // The Uint8Array is a view into the original DICOM ArrayBuffer; the cast
+  // satisfies the lib.dom typing of BlobPart (which excludes SharedArrayBuffer-
+  // backed views) without forcing a buffer copy.
+  const blob = new Blob([bytes as BlobPart], { type: 'image/jpeg' });
+  const bitmap = await createImageBitmap(blob);
+  try {
+    const canvas = new OffscreenCanvas(bitmap.width, bitmap.height);
+    const ctx = canvas.getContext('2d');
+    if (!ctx) throw new Error('OffscreenCanvas 2D context unavailable');
+    ctx.drawImage(bitmap, 0, 0);
+    const imageData = ctx.getImageData(0, 0, bitmap.width, bitmap.height);
+    if (
+      (expectedWidth && bitmap.width !== expectedWidth) ||
+      (expectedHeight && bitmap.height !== expectedHeight)
+    ) {
+      // Mismatch is unusual for valid DICOM US clips. Keep the data but flag
+      // it in the console — the caller will still copy whatever it returns.
+      console.warn(
+        `JPEG frame size ${bitmap.width}x${bitmap.height} does not match DICOM-declared ${expectedWidth}x${expectedHeight}`
+      );
+    }
+    return {
+      width: bitmap.width,
+      height: bitmap.height,
+      rgba: imageData.data,
+    };
+  } finally {
+    bitmap.close();
+  }
+}
+
+type NativeFrameLayout = {
+  width: number;
+  height: number;
+  samplesPerPixel: number;
+  photometric: string;
+  // DICOM PlanarConfiguration (0028,0006): 0 = pixel-interleaved (RGBRGB...),
+  // 1 = plane-interleaved (RRR...GGG...BBB...).
+  planarConfiguration: number;
+};
+
+// Convert a raw uncompressed frame to RGBA. Supports the two photometric
+// interpretations our sample corpus shows in the native PixelData path:
+// - 'RGB' with samplesPerPixel=3 (interleaved RGB)
+// - 'MONOCHROME2' with samplesPerPixel=1 (grayscale, replicated to RGB)
+export function decodeNativeFrame(
+  bytes: Uint8Array,
+  layout: NativeFrameLayout
+): DecodedFrame {
+  const { width, height, samplesPerPixel, photometric, planarConfiguration } =
+    layout;
+  const pixelCount = width * height;
+  const out = new Uint8ClampedArray(pixelCount * 4);
+
+  if (samplesPerPixel === 1) {
+    // Grayscale — replicate luminance to R, G, B; alpha = 255.
+    for (let i = 0; i < pixelCount; i++) {
+      const v = bytes[i] ?? 0;
+      const j = i * 4;
+      out[j] = v;
+      out[j + 1] = v;
+      out[j + 2] = v;
+      out[j + 3] = 255;
+    }
+  } else if (
+    samplesPerPixel === 3 &&
+    (photometric === 'RGB' || photometric === 'PALETTE COLOR')
+  ) {
+    if (planarConfiguration === 1) {
+      // RRRR...GGGG...BBBB...
+      const plane = pixelCount;
+      for (let i = 0; i < pixelCount; i++) {
+        const j = i * 4;
+        out[j] = bytes[i] ?? 0;
+        out[j + 1] = bytes[plane + i] ?? 0;
+        out[j + 2] = bytes[2 * plane + i] ?? 0;
+        out[j + 3] = 255;
+      }
+    } else {
+      for (let i = 0; i < pixelCount; i++) {
+        const k = i * 3;
+        const j = i * 4;
+        out[j] = bytes[k] ?? 0;
+        out[j + 1] = bytes[k + 1] ?? 0;
+        out[j + 2] = bytes[k + 2] ?? 0;
+        out[j + 3] = 255;
+      }
+    }
+  } else {
+    throw new Error(
+      `Unsupported native frame format: ${photometric} samplesPerPixel=${samplesPerPixel}`
+    );
+  }
+
+  return { width, height, rgba: out };
+}
diff --git a/src/core/cine/getRenderSlice.ts b/src/core/cine/getRenderSlice.ts
new file mode 100644
index 000000000..64e9908f2
--- /dev/null
+++ b/src/core/cine/getRenderSlice.ts
@@ -0,0 +1,17 @@
+import { Maybe } from '@/src/types';
+import { isCineImage } from './isCineImage';
+
+// VTK render-slice index versus VolView's semantic slice value.
+//
+// For a normal 3D volume the two are identical.
+//
+// For a cine image, the semantic slice is the frame cursor and ranges over
+// [0, numberOfFrames-1], but the underlying vtkImageData has only one Z slice
+// at index 0. Anything that pokes a VTK slice mapper or 2D widget plane needs
+// the render slice (always 0 for cine).
+export function getRenderSlice(
+  imageID: Maybe<string>,
+  semanticSlice: number
+): number {
+  return isCineImage(imageID) ? 0 : semanticSlice;
+}
diff --git a/src/core/cine/isCineImage.ts b/src/core/cine/isCineImage.ts
new file mode 100644
index 000000000..526529747
--- /dev/null
+++ b/src/core/cine/isCineImage.ts
@@ -0,0 +1,14 @@
+import { Maybe } from '@/src/types';
+import { useImageCacheStore } from '@/src/store/image-cache';
+import { useDICOMStore } from '@/src/store/datasets-dicom';
+import type DicomCineImage from './DicomCineImage';
+
+export function isCineImage(imageID: Maybe<string>): boolean {
+  if (!imageID) return false;
+  return useDICOMStore().volumeInfo[imageID]?.kind === 'cine';
+}
+
+export function getCineImage(imageID: Maybe<string>): DicomCineImage | null {
+  if (!isCineImage(imageID)) return null;
+  return (useImageCacheStore().imageById[imageID!] as DicomCineImage) ?? null;
+}
diff --git a/src/core/cine/parseCineDicom.ts b/src/core/cine/parseCineDicom.ts
new file mode 100644
index 000000000..315688972
--- /dev/null
+++ b/src/core/cine/parseCineDicom.ts
@@ -0,0 +1,307 @@
+import dicomParser, { DataSet, Element } from 'dicom-parser';
+
+// =================================================================
+// Tag constants (dicom-parser format: 'xGGGGEEEE', lowercase hex)
+// =================================================================
+
+const TAG_PIXEL_DATA = 'x7fe00010';
+const TAG_SOP_CLASS_UID = 'x00080016';
+const TAG_SOP_INSTANCE_UID = 'x00080018';
+const TAG_PATIENT_NAME = 'x00100010';
+const TAG_PATIENT_ID = 'x00100020';
+const TAG_PATIENT_BIRTH_DATE = 'x00100030';
+const TAG_PATIENT_SEX = 'x00100040';
+const TAG_STUDY_INSTANCE_UID = 'x0020000d';
+const TAG_STUDY_DATE = 'x00080020';
+const TAG_STUDY_TIME = 'x00080030';
+const TAG_STUDY_ID = 'x00200010';
+const TAG_ACCESSION_NUMBER = 'x00080050';
+const TAG_STUDY_DESCRIPTION = 'x00081030';
+const TAG_MODALITY = 'x00080060';
+const TAG_SERIES_INSTANCE_UID = 'x0020000e';
+const TAG_SERIES_NUMBER = 'x00200011';
+const TAG_SERIES_DESCRIPTION = 'x0008103e';
+const TAG_NUMBER_OF_FRAMES = 'x00280008';
+const TAG_ROWS = 'x00280010';
+const TAG_COLUMNS = 'x00280011';
+const TAG_BITS_ALLOCATED = 'x00280100';
+const TAG_SAMPLES_PER_PIXEL = 'x00280002';
+const TAG_PHOTOMETRIC = 'x00280004';
+const TAG_FRAME_TIME = 'x00181063';
+const TAG_SEQUENCE_OF_ULTRASOUND_REGIONS = 'x00186011';
+const TAG_PLANAR_CONFIGURATION = 'x00280006';
+
+const TAG_REGION_LOCATION_MIN_X0 = 'x00186018';
+const TAG_REGION_LOCATION_MIN_Y0 = 'x0018601a';
+const TAG_REGION_LOCATION_MAX_X1 = 'x0018601c';
+const TAG_REGION_LOCATION_MAX_Y1 = 'x0018601e';
+const TAG_PHYSICAL_UNITS_X = 'x00186024';
+const TAG_PHYSICAL_UNITS_Y = 'x00186026';
+const TAG_PHYSICAL_DELTA_X = 'x0018602c';
+const TAG_PHYSICAL_DELTA_Y = 'x0018602e';
+
+const TAG_TRANSFER_SYNTAX_UID = 'x00020010';
+
+// =================================================================
+// Public types
+// =================================================================
+
+type CineUltrasoundRegion = {
+  minX0: number;
+  minY0: number;
+  maxX1: number;
+  maxY1: number;
+  physicalDeltaX: number | null;
+  physicalDeltaY: number | null;
+  physicalUnitsX: number | null;
+  physicalUnitsY: number | null;
+};
+
+type CinePatientInfo = {
+  PatientID: string;
+  PatientName: string;
+  PatientBirthDate: string;
+  PatientSex: string;
+};
+
+type CineStudyInfo = {
+  StudyID: string;
+  StudyInstanceUID: string;
+  StudyDate: string;
+  StudyTime: string;
+  AccessionNumber: string;
+  StudyDescription: string;
+};
+
+type CineSeriesInfo = {
+  SeriesInstanceUID: string;
+  SeriesNumber: string;
+  SeriesDescription: string;
+  Modality: string;
+  SOPInstanceUID: string;
+  SOPClassUID: string;
+};
+
+export type CineHeader = {
+  transferSyntaxUID: string;
+  rows: number;
+  cols: number;
+  numberOfFrames: number;
+  samplesPerPixel: number;
+  bitsAllocated: number;
+  planarConfiguration: number;
+  photometricInterpretation: string;
+  frameTimeMs: number | null;
+  patient: CinePatientInfo;
+  study: CineStudyInfo;
+  series: CineSeriesInfo;
+  regions: CineUltrasoundRegion[];
+};
+
+export type CineParseResult = {
+  header: CineHeader;
+  // Native: zero-copy view into the source buffer. Encapsulated: bytes for
+  // one frame, possibly assembled from multiple fragments.
+  frames: Uint8Array[];
+  encapsulated: boolean;
+};
+
+// =================================================================
+// Tag readers
+// =================================================================
+
+const str = (ds: DataSet, tag: string): string => (ds.string(tag) ?? '').trim();
+
+const intStr = (ds: DataSet, tag: string): number => ds.intString(tag) ?? 0;
+
+const u16 = (ds: DataSet, tag: string): number => ds.uint16(tag) ?? 0;
+
+// VR=FD (PhysicalDeltaX/Y in ultrasound regions)
+const readDouble = (ds: DataSet, tag: string): number | null => {
+  const v = ds.double(tag);
+  return v !== undefined && Number.isFinite(v) ? v : null;
+};
+
+// VR=DS (FrameTime, decimal string)
+const readDecimalString = (ds: DataSet, tag: string): number | null => {
+  const v = ds.floatString(tag);
+  return v !== undefined && Number.isFinite(v) ? v : null;
+};
+
+function buildRegion(item: DataSet): CineUltrasoundRegion {
+  return {
+    minX0: u16(item, TAG_REGION_LOCATION_MIN_X0),
+    minY0: u16(item, TAG_REGION_LOCATION_MIN_Y0),
+    maxX1: u16(item, TAG_REGION_LOCATION_MAX_X1),
+    maxY1: u16(item, TAG_REGION_LOCATION_MAX_Y1),
+    physicalDeltaX: readDouble(item, TAG_PHYSICAL_DELTA_X),
+    physicalDeltaY: readDouble(item, TAG_PHYSICAL_DELTA_Y),
+    physicalUnitsX: u16(item, TAG_PHYSICAL_UNITS_X) || null,
+    physicalUnitsY: u16(item, TAG_PHYSICAL_UNITS_Y) || null,
+  };
+}
+
+// =================================================================
+// PixelData extraction
+// =================================================================
+
+function extractEncapsulatedFrames(
+  ds: DataSet,
+  pd: Element,
+  numberOfFrames: number
+): Uint8Array[] {
+  const bot = pd.basicOffsetTable ?? [];
+  const fragments = pd.fragments ?? [];
+
+  let offsets: number[];
+  if (bot.length === numberOfFrames) {
+    offsets = bot;
+  } else if (fragments.length === numberOfFrames) {
+    offsets = fragments.map((f) => f.offset);
+  } else {
+    // Empty BOT and fragments don't map 1:1 — scan for JPEG SOI markers.
+    offsets = dicomParser.createJPEGBasicOffsetTable(ds, pd);
+  }
+
+  const frames: Uint8Array[] = [];
+  for (let i = 0; i < numberOfFrames; i++) {
+    // ByteArray = Uint8Array | Buffer in the TS shim; in browser it's always Uint8Array.
+    frames.push(
+      dicomParser.readEncapsulatedImageFrame(
+        ds,
+        pd,
+        i,
+        offsets,
+        fragments
+      ) as Uint8Array
+    );
+  }
+  return frames;
+}
+
+function extractNativeFrames(
+  ds: DataSet,
+  pd: Element,
+  numberOfFrames: number,
+  frameBytes: number
+): Uint8Array[] {
+  const byteArray = ds.byteArray;
+  const frames: Uint8Array[] = [];
+  for (let i = 0; i < numberOfFrames; i++) {
+    frames.push(
+      new Uint8Array(
+        byteArray.buffer,
+        byteArray.byteOffset + pd.dataOffset + i * frameBytes,
+        frameBytes
+      )
+    );
+  }
+  return frames;
+}
+
+// =================================================================
+// Public entry point
+// =================================================================
+
+export function parseCineDicom(
+  input: ArrayBuffer | Uint8Array
+): CineParseResult {
+  const u8 =
+    input instanceof Uint8Array ? input : new Uint8Array(input as ArrayBuffer);
+  const ds = dicomParser.parseDicom(u8);
+
+  const pd = ds.elements[TAG_PIXEL_DATA];
+  if (!pd) {
+    throw new Error('PixelData (7FE0,0010) not found in DICOM file');
+  }
+
+  const numberOfFrames = intStr(ds, TAG_NUMBER_OF_FRAMES) || 1;
+  const rows = u16(ds, TAG_ROWS);
+  const cols = u16(ds, TAG_COLUMNS);
+  const samplesPerPixel = u16(ds, TAG_SAMPLES_PER_PIXEL) || 1;
+  const bitsAllocated = u16(ds, TAG_BITS_ALLOCATED) || 8;
+  const planarConfiguration = u16(ds, TAG_PLANAR_CONFIGURATION);
+  const transferSyntaxUID = str(ds, TAG_TRANSFER_SYNTAX_UID);
+
+  const regionItems =
+    ds.elements[TAG_SEQUENCE_OF_ULTRASOUND_REGIONS]?.items ?? [];
+  const regions = regionItems
+    .map((item) => item.dataSet)
+    .filter((d): d is DataSet => !!d)
+    .map(buildRegion);
+
+  const header: CineHeader = {
+    transferSyntaxUID,
+    rows,
+    cols,
+    numberOfFrames,
+    samplesPerPixel,
+    bitsAllocated,
+    planarConfiguration,
+    photometricInterpretation: str(ds, TAG_PHOTOMETRIC),
+    frameTimeMs: readDecimalString(ds, TAG_FRAME_TIME),
+    patient: {
+      PatientID: str(ds, TAG_PATIENT_ID),
+      PatientName: str(ds, TAG_PATIENT_NAME),
+      PatientBirthDate: str(ds, TAG_PATIENT_BIRTH_DATE),
+      PatientSex: str(ds, TAG_PATIENT_SEX),
+    },
+    study: {
+      StudyID: str(ds, TAG_STUDY_ID),
+      StudyInstanceUID: str(ds, TAG_STUDY_INSTANCE_UID),
+      StudyDate: str(ds, TAG_STUDY_DATE),
+      StudyTime: str(ds, TAG_STUDY_TIME),
+      AccessionNumber: str(ds, TAG_ACCESSION_NUMBER),
+      StudyDescription: str(ds, TAG_STUDY_DESCRIPTION),
+    },
+    series: {
+      SeriesInstanceUID: str(ds, TAG_SERIES_INSTANCE_UID),
+      SeriesNumber: str(ds, TAG_SERIES_NUMBER),
+      SeriesDescription: str(ds, TAG_SERIES_DESCRIPTION),
+      Modality: str(ds, TAG_MODALITY),
+      SOPInstanceUID: str(ds, TAG_SOP_INSTANCE_UID),
+      SOPClassUID: str(ds, TAG_SOP_CLASS_UID),
+    },
+    regions,
+  };
+
+  const encapsulated = !!pd.encapsulatedPixelData;
+  const frames = encapsulated
+    ? extractEncapsulatedFrames(ds, pd, numberOfFrames)
+    : extractNativeFrames(
+        ds,
+        pd,
+        numberOfFrames,
+        rows * cols * samplesPerPixel * Math.ceil(bitsAllocated / 8)
+      );
+
+  return { header, frames, encapsulated };
+}
+
+// =================================================================
+// Supported transfer syntaxes
+// =================================================================
+
+const TRANSFER_SYNTAX_IMPLICIT_VR_LE = '1.2.840.10008.1.2';
+const TRANSFER_SYNTAX_EXPLICIT_VR_LE = '1.2.840.10008.1.2.1';
+const TRANSFER_SYNTAX_JPEG_BASELINE_1 = '1.2.840.10008.1.2.4.50';
+const TRANSFER_SYNTAX_JPEG_BASELINE_2_4 = '1.2.840.10008.1.2.4.51';
+
+const NATIVE_TRANSFER_SYNTAXES = new Set([
+  TRANSFER_SYNTAX_IMPLICIT_VR_LE,
+  TRANSFER_SYNTAX_EXPLICIT_VR_LE,
+]);
+
+const SUPPORTED_TRANSFER_SYNTAXES = new Set([
+  ...NATIVE_TRANSFER_SYNTAXES,
+  TRANSFER_SYNTAX_JPEG_BASELINE_1,
+  TRANSFER_SYNTAX_JPEG_BASELINE_2_4,
+]);
+
+export function isNativeTransferSyntax(uid: string): boolean {
+  return NATIVE_TRANSFER_SYNTAXES.has(uid);
+}
+
+export function isSupportedCineTransferSyntax(uid: string): boolean {
+  return SUPPORTED_TRANSFER_SYNTAXES.has(uid);
+}
diff --git a/src/core/dicomTags.ts b/src/core/dicomTags.ts
index 7f599f262..a22bf98d8 100644
--- a/src/core/dicomTags.ts
+++ b/src/core/dicomTags.ts
@@ -33,13 +33,36 @@ const tags: Tag[] = [
   { name: 'RescaleIntercept', tag: '0028|1052' },
   { name: 'RescaleSlope', tag: '0028|1053' },
   { name: 'NumberOfFrames', tag: '0028|0008' },
+  { name: 'SOPClassUID', tag: '0008|0016' },
+  { name: 'PhotometricInterpretation', tag: '0028|0004' },
+  { name: 'FrameTime', tag: '0018|1063' },
   { name: 'SequenceOfUltrasoundRegions', tag: '0018|6011' },
-  { name: 'PhysicalDeltaX', tag: '0018|602c' },
-  { name: 'PhysicalDeltaY', tag: '0018|602e' },
+  { name: 'RegionLocationMinX0', tag: '0018|6018' },
+  { name: 'RegionLocationMinY0', tag: '0018|601a' },
+  { name: 'RegionLocationMaxX1', tag: '0018|601c' },
+  { name: 'RegionLocationMaxY1', tag: '0018|601e' },
   { name: 'PhysicalUnitsXDirection', tag: '0018|6024' },
   { name: 'PhysicalUnitsYDirection', tag: '0018|6026' },
+  { name: 'PhysicalDeltaX', tag: '0018|602c' },
+  { name: 'PhysicalDeltaY', tag: '0018|602e' },
 ];
 
+// DICOM SOP Class UIDs for Ultrasound Multi-frame Image Storage. The current
+// identifier is .4.1.1.3.1; the retired pre-1993 identifier is .4.1.1.3.
+// Some legacy clinical archives and well-known test corpora (e.g. GDCM's
+// US-MONO2-8-8x-execho) still emit the retired UID.
+export const SOP_CLASS_ULTRASOUND_MULTIFRAME = '1.2.840.10008.5.1.4.1.1.3.1';
+export const SOP_CLASS_ULTRASOUND_MULTIFRAME_RETIRED =
+  '1.2.840.10008.5.1.4.1.1.3';
+
+export function isUltrasoundMultiframeSopClass(uid: string): boolean {
+  const trimmed = uid.trim();
+  return (
+    trimmed === SOP_CLASS_ULTRASOUND_MULTIFRAME ||
+    trimmed === SOP_CLASS_ULTRASOUND_MULTIFRAME_RETIRED
+  );
+}
+
 export const TAG_TO_NAME = new Map(tags.map((t) => [t.tag, t.name]));
 export const NAME_TO_TAG = new Map(tags.map((t) => [t.name, t.tag]));
 export const Tags = Object.fromEntries(tags.map((t) => [t.name, t.tag]));
diff --git a/src/core/progressiveImage.ts b/src/core/progressiveImage.ts
index 59f7c3755..757a7e1d9 100644
--- a/src/core/progressiveImage.ts
+++ b/src/core/progressiveImage.ts
@@ -27,6 +27,10 @@ export interface ProgressiveImage {
   getStatus(): ProgressiveImageStatus;
   isLoading(): boolean;
   isLoaded(): boolean;
+  // Returns a data-URI thumbnail, or null if this image has no thumbnail.
+  // The base implementation returns null so consumers can call this on any
+  // ProgressiveImage without type-narrowing.
+  getThumbnail(): Promise<string | null>;
   addEventListener<T extends keyof ProgressiveImageEvents>(
     type: T,
     callback: (info: ProgressiveImageEvents[T]) => void
@@ -162,6 +166,10 @@ export abstract class BaseProgressiveImage implements ProgressiveImage {
     this.cleanupListeners();
   }
 
+  getThumbnail(): Promise<string | null> {
+    return Promise.resolve(null);
+  }
+
   abstract startLoad(): void;
 
   abstract stopLoad(): void;
diff --git a/src/core/streaming/chunkImage.ts b/src/core/streaming/chunkImage.ts
index 8cedce1ba..bd180e2ff 100644
--- a/src/core/streaming/chunkImage.ts
+++ b/src/core/streaming/chunkImage.ts
@@ -5,10 +5,6 @@ import {
 import { Chunk } from '@/src/core/streaming/chunk';
 import { Extent } from '@kitware/vtk.js/types';
 
-export enum ThumbnailStrategy {
-  MiddleSlice,
-}
-
 export enum ChunkStatus {
   NotLoaded,
   Loading,
@@ -33,7 +29,6 @@ export type ChunkImageEvents = {
 
 export interface ChunkImage extends ProgressiveImage {
   addChunks(chunks: Chunk[]): void;
-  getThumbnail(strategy: ThumbnailStrategy): Promise<string>;
   addEventListener<T extends keyof ChunkImageEvents>(
     type: T,
     callback: (info: ChunkImageEvents[T]) => void
diff --git a/src/core/streaming/dicomChunkImage.ts b/src/core/streaming/dicomChunkImage.ts
index a49d176e4..16fbef9a3 100644
--- a/src/core/streaming/dicomChunkImage.ts
+++ b/src/core/streaming/dicomChunkImage.ts
@@ -14,7 +14,6 @@ import vtkDataArray from '@kitware/vtk.js/Common/Core/DataArray';
 import { ChunkState } from '@/src/core/streaming/chunkStateMachine';
 import {
   type ChunkImage,
-  ThumbnailStrategy,
   ChunkStatus,
   ChunkImageEvents,
 } from '@/src/core/streaming/chunkImage';
@@ -78,7 +77,7 @@ export default class DicomChunkImage
 {
   protected chunks: Chunk[];
   private chunkListeners: Array<() => void>;
-  private thumbnailCache: WeakMap<Chunk, Promise<unknown>>;
+  private thumbnailCache: WeakMap<Chunk, Promise<string>>;
   private events: Emitter<ChunkImageEvents>;
   private chunkStatus: ChunkStatus[];
 
@@ -220,10 +219,7 @@ export default class DicomChunkImage
     }
   }
 
-  getThumbnail(strategy: ThumbnailStrategy): Promise<any> {
-    if (strategy !== ThumbnailStrategy.MiddleSlice)
-      throw new Error('Can only handle MiddleSlice thumbnailing strategy');
-
+  getThumbnail(): Promise<string | null> {
     const middle = Math.floor(this.chunks.length / 2);
     const chunk = this.chunks[middle];
 
diff --git a/src/core/vtk/useMouseRangeManipulatorListener.ts b/src/core/vtk/useMouseRangeManipulatorListener.ts
index fa5c39cce..80db2ef74 100644
--- a/src/core/vtk/useMouseRangeManipulatorListener.ts
+++ b/src/core/vtk/useMouseRangeManipulatorListener.ts
@@ -15,7 +15,12 @@ export function useMouseRangeManipulatorListener(
   range: MaybeRef<Maybe<[number, number]>>,
   step: MaybeRef<Maybe<number>>,
   initialValue?: number,
-  scale: number = 1 // Negative scale inverts scroll direction
+  scale: number = 1, // Negative scale inverts scroll direction
+  // Fires only on real wheel/drag input — not on programmatic writes that
+  // come back through a bidirectional sync. Use this to drive side effects
+  // like setActiveView so they don't fire during cine playback or other
+  // programmatic slice updates.
+  onUserInput?: () => void
 ) {
   const internalValue = ref(initialValue ?? 0);
 
@@ -38,6 +43,7 @@ export function useMouseRangeManipulatorListener(
         () => internalValue.value,
         (val) => {
           internalValue.value = val;
+          onUserInput?.();
         },
         scale
       );
diff --git a/src/store/datasets-dicom.ts b/src/store/datasets-dicom.ts
index 6ba636310..94de879fa 100644
--- a/src/store/datasets-dicom.ts
+++ b/src/store/datasets-dicom.ts
@@ -4,7 +4,9 @@ import * as DICOM from '@/src/io/dicom';
 import { Chunk } from '@/src/core/streaming/chunk';
 import { useImageCacheStore } from '@/src/store/image-cache';
 import DicomChunkImage from '@/src/core/streaming/dicomChunkImage';
-import { Tags } from '@/src/core/dicomTags';
+import DicomCineImage from '@/src/core/cine/DicomCineImage';
+import { parseCineDicom } from '@/src/core/cine/parseCineDicom';
+import { isUltrasoundMultiframeSopClass, Tags } from '@/src/core/dicomTags';
 import { removeFromArray } from '../utils';
 
 export const ANONYMOUS_PATIENT = 'Anonymous';
@@ -45,6 +47,10 @@ export interface VolumeInfo {
   SeriesDescription: string;
   WindowLevel: string;
   WindowWidth: string;
+  // 'cine' marks an ultrasound multi-frame image whose NumberOfSlices is the
+  // number of cine frames (not Z-axis slices). Absent/undefined means a normal
+  // 3D volume.
+  kind?: 'volume' | 'cine';
 }
 
 interface State {
@@ -90,6 +96,19 @@ export const getDisplayName = (info: VolumeInfo) => {
   );
 };
 
+function isCineChunkGroup(chunks: Chunk[]): boolean {
+  if (chunks.length !== 1) return false;
+  const meta = chunks[0].metadata;
+  if (!meta) return false;
+  const lookup = Object.fromEntries(meta);
+  const sopClass = lookup[Tags.SOPClassUID] ?? '';
+  const numberOfFrames = parseInt(
+    (lookup[Tags.NumberOfFrames] ?? '0').trim(),
+    10
+  );
+  return isUltrasoundMultiframeSopClass(sopClass) && numberOfFrames > 1;
+}
+
 export const getWindowLevels = (info: VolumeInfo) => {
   const { WindowWidth, WindowLevel } = info;
   if (
@@ -141,11 +160,19 @@ export const useDICOMStore = defineStore('dicom', {
 
       await Promise.all(
         Object.entries(chunksByVolume).map(async ([id, sortedChunks]) => {
-          const image = imageCacheStore.imageById[id] ?? new DicomChunkImage();
-          if (!(image instanceof DicomChunkImage)) {
-            throw new Error('image is not a DicomChunkImage');
+          if (isCineChunkGroup(sortedChunks)) {
+            await this._importCineChunk(id, sortedChunks[0]);
+            return;
           }
 
+          if (this.volumeInfo[id]?.kind === 'cine') {
+            throw new Error(
+              `Volume ${id} is already loaded as a cine clip; cannot re-import as a chunk volume.`
+            );
+          }
+          const image = (imageCacheStore.imageById[id] ??
+            new DicomChunkImage()) as DicomChunkImage;
+
           await image.addChunks(sortedChunks);
           imageCacheStore.addProgressiveImage(image, { id });
 
@@ -191,6 +218,68 @@ export const useDICOMStore = defineStore('dicom', {
       return chunksByVolume;
     },
 
+    async _importCineChunk(id: string, chunk: Chunk) {
+      const imageCacheStore = useImageCacheStore();
+
+      // If we already created this cine image (state-file reload), bail.
+      if (this.volumeInfo[id]?.kind === 'cine') {
+        return;
+      }
+
+      await chunk.loadData();
+      const blob = chunk.dataBlob;
+      if (!blob) throw new Error('Cine DICOM chunk has no data');
+      const buffer = await blob.arrayBuffer();
+      const parsed = parseCineDicom(buffer);
+
+      if (!DicomCineImage.isSupported(parsed.header)) {
+        throw new Error(
+          `Unsupported cine transfer syntax / pixel format: ` +
+            `${parsed.header.transferSyntaxUID} (` +
+            `${parsed.header.bitsAllocated}-bit, ` +
+            `${parsed.header.samplesPerPixel}-sample ` +
+            `${parsed.header.photometricInterpretation})`
+        );
+      }
+
+      const image = new DicomCineImage(parsed);
+      imageCacheStore.addProgressiveImage(image, { id });
+
+      const { patient, study, series } = parsed.header;
+
+      const patientInfo: PatientInfo = {
+        PatientID: patient.PatientID,
+        PatientName: patient.PatientName,
+        PatientBirthDate: patient.PatientBirthDate,
+        PatientSex: patient.PatientSex,
+      };
+
+      const studyInfo: StudyInfo = {
+        StudyID: study.StudyID,
+        StudyInstanceUID: study.StudyInstanceUID,
+        StudyDate: study.StudyDate,
+        StudyTime: study.StudyTime,
+        AccessionNumber: study.AccessionNumber,
+        StudyDescription: study.StudyDescription,
+      };
+
+      const volumeInfo: VolumeInfo = {
+        NumberOfSlices: parsed.header.numberOfFrames,
+        VolumeID: id,
+        Modality: series.Modality,
+        SeriesInstanceUID: series.SeriesInstanceUID,
+        SeriesNumber: series.SeriesNumber,
+        SeriesDescription: series.SeriesDescription,
+        WindowLevel: '',
+        WindowWidth: '',
+        kind: 'cine',
+      };
+
+      this._updateDatabase(patientInfo, studyInfo, volumeInfo);
+
+      image.setName(getDisplayName(volumeInfo));
+    },
+
     _updateDatabase(
       patient: PatientInfo,
       study: StudyInfo,
diff --git a/src/store/image-cache.ts b/src/store/image-cache.ts
index 278339c0f..916c69488 100644
--- a/src/store/image-cache.ts
+++ b/src/store/image-cache.ts
@@ -110,6 +110,11 @@ export const useImageCacheStore = defineStore('image-cache', () => {
     if (!(id in imageById)) return;
     unregisterListeners(id);
 
+    // Release vtk data and any per-image caches (e.g. cine compressed frames
+    // and decoded-frame LRU). Without this, removing a dataset leaks all of
+    // its memory until the page reloads.
+    imageById[id].dispose();
+
     const idx = imageIds.value.indexOf(id);
     if (idx > -1) imageIds.value.splice(idx, 1);
     delete imageById[id];
diff --git a/src/store/image-stats.ts b/src/store/image-stats.ts
index def7fa68a..b80e2b33b 100644
--- a/src/store/image-stats.ts
+++ b/src/store/image-stats.ts
@@ -19,6 +19,7 @@ import { useImage } from '@/src/composables/useCurrentImage';
 import { ensureError } from '@/src/utils';
 import { useImageCacheStore } from './image-cache';
 import { useMessageStore } from './messages';
+import { isCineImage } from '@/src/core/cine/isCineImage';
 
 export type ImageStats = {
   scalarMin: number;
@@ -127,6 +128,10 @@ export const useImageStatsStore = defineStore('image-stats', () => {
   };
 
   const setupImageWatchers = (id: string) => {
+    // Cine images are 8-bit display-encoded; histograms and auto-range are
+    // meaningless and would allocate a huge Float64Array. Skip them.
+    if (isCineImage(id)) return;
+
     const { imageData, isLoading: isImageLoading } = useImage(
       computed(() => id)
     );
diff --git a/src/store/segmentGroups.ts b/src/store/segmentGroups.ts
index 14ba4dc3d..3b345dbda 100644
--- a/src/store/segmentGroups.ts
+++ b/src/store/segmentGroups.ts
@@ -19,6 +19,7 @@ import {
 import vtkImageExtractComponents from '@/src/utils/imageExtractComponentsFilter';
 import { useImageCacheStore } from '@/src/store/image-cache';
 import DicomChunkImage from '@/src/core/streaming/dicomChunkImage';
+import { useDICOMStore } from '@/src/store/datasets-dicom';
 import vtkLabelMap from '../vtk/LabelMap';
 import {
   StateFile,
@@ -266,7 +267,11 @@ export const useSegmentGroupStore = defineStore('segmentGroup', () => {
     image: vtkLabelMap,
     component = 0
   ) {
-    if (!isRegularImage(imageId)) {
+    const dicomStore = useDICOMStore();
+    if (
+      !isRegularImage(imageId) &&
+      dicomStore.volumeInfo[imageId]?.kind !== 'cine'
+    ) {
       await untilLoaded(imageId);
 
       const chunkImage = imageCacheStore.imageById[imageId] as DicomChunkImage;
diff --git a/src/store/tools/useAnnotationTool.ts b/src/store/tools/useAnnotationTool.ts
index 842c23c61..41f65fe51 100644
--- a/src/store/tools/useAnnotationTool.ts
+++ b/src/store/tools/useAnnotationTool.ts
@@ -134,9 +134,12 @@ export const useAnnotationTool = <
     const imageID = currentImageID.value;
     if (!imageID || tool.imageID !== imageID) return;
 
+    // Cine images report dimensions [cols, rows, 1] but tools may live on
+    // any frame; allow out-of-bounds so we still resolve the axis.
     const toolImageFrame = frameOfReferenceToImageSliceAndAxis(
       tool.frameOfReference,
-      currentImageMetadata.value
+      currentImageMetadata.value,
+      { allowOutOfBoundsSlice: true }
     );
 
     if (!toolImageFrame) return;
diff --git a/src/store/view-configs/slicing.ts b/src/store/view-configs/slicing.ts
index 2849699ac..0431e27ae 100644
--- a/src/store/view-configs/slicing.ts
+++ b/src/store/view-configs/slicing.ts
@@ -14,6 +14,7 @@ import { ViewConfig } from '@/src/io/state-file/schema';
 import { SliceConfig } from '@/src/store/view-configs/types';
 import { useImageStore } from '@/src/store/datasets-images';
 import { useViewStore } from '@/src/store/views';
+import { getCineImage } from '@/src/core/cine/isCineImage';
 
 export const defaultSliceConfig = (): SliceConfig => ({
   slice: 0,
@@ -36,6 +37,19 @@ export const useViewSliceStore = defineStore('viewSlice', () => {
     const view = viewStore.getView(viewID);
     if (view?.type !== '2D') return defaultSliceConfig();
 
+    // Cine images report dimensions [cols, rows, 1] but the slice axis is the
+    // frame index, so override using the cine clip's frame count.
+    const cine = getCineImage(imageID);
+    if (cine) {
+      const max = Math.max(0, cine.getNumberOfFrames() - 1);
+      return {
+        min: 0,
+        slice: 0,
+        max,
+        syncState: false,
+      };
+    }
+
     const { orientation } = view.options;
     const { metadata } = useImage(imageID);
     const { lpsOrientation, dimensions } = metadata.value;
diff --git a/tests/specs/cine-rendering.e2e.ts b/tests/specs/cine-rendering.e2e.ts
new file mode 100644
index 000000000..9f85321b5
--- /dev/null
+++ b/tests/specs/cine-rendering.e2e.ts
@@ -0,0 +1,38 @@
+import { Key } from 'webdriverio';
+import { volViewPage } from '../pageobjects/volview.page';
+import { CINE_US_DATASET } from './configTestUtils';
+import { openUrls } from './utils';
+
+const PLAY_CONTROLS = '.play-controls';
+const FRAME_LABEL = '.view-annotations .frame-label';
+
+describe('VolView cine playback', () => {
+  it('loads a multi-frame ultrasound and scrubs frames', async () => {
+    await openUrls([CINE_US_DATASET]);
+
+    const playControls = $(PLAY_CONTROLS);
+    await playControls.waitForDisplayed({ timeout: 10000 });
+
+    const frameLabel = await $(FRAME_LABEL);
+    const initialText = (await frameLabel.getText()).trim();
+    // GDCM US-MONO2-8-8x-execho is 8 frames.
+    expect(initialText).toBe('Frame: 1 / 8');
+
+    // Scrub one frame forward via arrow key and verify the counter advances.
+    // Cine starts at frame 1, so ArrowUp is the direction with headroom.
+    await volViewPage.focusFirst2DView();
+    await browser.keys([Key.ArrowUp]);
+    await browser.waitUntil(
+      async () => (await frameLabel.getText()).trim() !== initialText,
+      {
+        timeout: 5000,
+        timeoutMsg: 'Expected cine frame counter to change after arrow key',
+      }
+    );
+
+    // The new label should still be "Frame: N / 8" with N in [1, 8].
+    const after = (await frameLabel.getText()).trim();
+    expect(after).toMatch(/^Frame: [1-8] \/ 8$/);
+    expect(after).not.toBe(initialText);
+  });
+});
diff --git a/tests/specs/configTestUtils.ts b/tests/specs/configTestUtils.ts
index 6e045dfb2..07002d2d0 100644
--- a/tests/specs/configTestUtils.ts
+++ b/tests/specs/configTestUtils.ts
@@ -81,6 +81,13 @@ export const US_MULTIFRAME_DICOM = {
   name: 'US_multiframe_30frames.dcm',
 } as const;
 
+// 8-frame echocardiogram from the BSD-licensed GDCM test corpus. Native
+// Explicit VR LE, MONOCHROME2, retired Ultrasound Multi-frame SOP UID.
+export const CINE_US_DATASET = {
+  url: 'https://sourceforge.net/p/gdcm/gdcmdata/ci/master/tree/US-MONO2-8-8x-execho.dcm?format=raw',
+  name: 'US-MONO2-8-8x-echo.dcm',
+} as const;
+
 export type DatasetResource = {
   url: string;
   name?: string;
diff --git a/tests/specs/reveal-slice.e2e.ts b/tests/specs/reveal-slice.e2e.ts
new file mode 100644
index 000000000..414f85940
--- /dev/null
+++ b/tests/specs/reveal-slice.e2e.ts
@@ -0,0 +1,169 @@
+import { Key } from 'webdriverio';
+import { CINE_US_DATASET, PROSTATEX_DATASET } from './configTestUtils';
+import { downloadFile, openUrls } from './utils';
+import { volViewPage } from '../pageobjects/volview.page';
+
+const openMeasurementsTab = async () => {
+  const annotationsTab = await $(
+    'button[data-testid="module-tab-Annotations"]'
+  );
+  await annotationsTab.click();
+
+  const measurementsTab = await $('button.v-tab*=Measurements');
+  await measurementsTab.waitForClickable();
+  await measurementsTab.click();
+};
+
+const waitForToolEntry = async (iconClass: string) => {
+  await browser.waitUntil(
+    async () => {
+      const entries = await $$(`.v-list-item i.${iconClass}.tool-icon`);
+      return (await entries.length) >= 1;
+    },
+    { timeoutMsg: `Tool entry with icon ${iconClass} not found` }
+  );
+};
+
+const clickRevealSliceButton = async () => {
+  // The reveal-slice button is the v-btn wrapping the mdi-target icon
+  // inside the measurement tool list entry.
+  const button = await $('.v-list-item button .mdi-target');
+  await button.waitForClickable();
+  await button.click();
+};
+
+const getCanvasCenter = async () => {
+  const views2D = await volViewPage.getViews2D();
+  const view = views2D[0];
+  const canvas = await view.$('canvas');
+  const location = await canvas.getLocation();
+  const size = await canvas.getSize();
+  return {
+    centerX: location.x + size.width / 2,
+    centerY: location.y + size.height / 2,
+  };
+};
+
+const clickAt = async (x: number, y: number) => {
+  await browser
+    .action('pointer')
+    .move({ x: Math.round(x), y: Math.round(y) })
+    .down()
+    .up()
+    .perform();
+};
+
+const placeRulerAtCanvasCenter = async () => {
+  const rulerToolButton = await $('button span i[class~=mdi-ruler]');
+  await rulerToolButton.click();
+
+  const { centerX, centerY } = await getCanvasCenter();
+  await clickAt(centerX - 40, centerY);
+  await clickAt(centerX + 40, centerY);
+};
+
+// --- normal volume image ----------------------------------------------
+
+const waitForSliceOverlay = async () => {
+  await browser.waitUntil(
+    async () => (await volViewPage.getFirst2DSlice()) !== null,
+    { timeoutMsg: 'Slice overlay never appeared' }
+  );
+};
+
+const waitForSlice = async (expectedSlice1Indexed: number) => {
+  await browser.waitUntil(
+    async () => {
+      const slice = await volViewPage.getFirst2DSlice();
+      return slice === expectedSlice1Indexed;
+    },
+    { timeoutMsg: `Expected view slice to reach ${expectedSlice1Indexed}` }
+  );
+};
+
+describe('Reveal Slice on a volume image', () => {
+  it('ruler Reveal Slice jumps the view back to the placed slice', async () => {
+    await downloadFile(PROSTATEX_DATASET.url, PROSTATEX_DATASET.name);
+    await openUrls([PROSTATEX_DATASET]);
+
+    await volViewPage.focusFirst2DView();
+    await waitForSliceOverlay();
+    const placementSlice = await volViewPage.getFirst2DSlice();
+    expect(placementSlice).not.toBeNull();
+
+    await placeRulerAtCanvasCenter();
+
+    // Advance to a different slice so reveal has somewhere to jump back to.
+    await volViewPage.advanceSliceAndWait();
+    await volViewPage.advanceSliceAndWait();
+    const movedSlice = await volViewPage.getFirst2DSlice();
+    expect(movedSlice).not.toBe(placementSlice);
+
+    await openMeasurementsTab();
+    await waitForToolEntry('mdi-ruler');
+
+    await clickRevealSliceButton();
+    await waitForSlice(placementSlice!);
+  });
+});
+
+// --- cine ultrasound --------------------------------------------------
+
+const FRAME_LABEL_SELECTOR = '.view-annotations .frame-label';
+
+const getCineFrame = async () => {
+  const frameLabel = await $(FRAME_LABEL_SELECTOR);
+  const text = (await frameLabel.getText()).trim();
+  const match = text.match(/^Frame:\s*(\d+)\s*\/\s*\d+/);
+  return match ? parseInt(match[1], 10) : null;
+};
+
+const waitForFrame = async (expected: number) => {
+  await browser.waitUntil(async () => (await getCineFrame()) === expected, {
+    timeoutMsg: `Expected cine frame to reach ${expected}`,
+  });
+};
+
+const advanceCineFrame = async () => {
+  const before = await getCineFrame();
+  await browser.keys([Key.ArrowUp]);
+  await browser.waitUntil(
+    async () => {
+      const now = await getCineFrame();
+      return now !== null && now !== before;
+    },
+    { timeoutMsg: 'Cine frame counter did not advance' }
+  );
+};
+
+describe('Reveal Slice on cine ultrasound', () => {
+  it('ruler Reveal Slice jumps to the cine frame the ruler was placed on', async () => {
+    await openUrls([CINE_US_DATASET]);
+
+    const playControls = $('.play-controls');
+    await playControls.waitForDisplayed();
+    await waitForFrame(1);
+
+    await volViewPage.focusFirst2DView();
+
+    // Cine images report dimensions [cols, rows, 1]; placing the tool past
+    // frame 1 (slice index > 0) is what exercises the reveal-slice bug.
+    await advanceCineFrame();
+    await advanceCineFrame();
+    const placementFrame = await getCineFrame();
+    expect(placementFrame).not.toBe(1);
+
+    await placeRulerAtCanvasCenter();
+
+    await advanceCineFrame();
+    await advanceCineFrame();
+    const movedFrame = await getCineFrame();
+    expect(movedFrame).not.toBe(placementFrame);
+
+    await openMeasurementsTab();
+    await waitForToolEntry('mdi-ruler');
+
+    await clickRevealSliceButton();
+    await waitForFrame(placementFrame!);
+  });
+});
diff --git a/wdio.shared.conf.ts b/wdio.shared.conf.ts
index 1dfb43a02..e11f9183d 100644
--- a/wdio.shared.conf.ts
+++ b/wdio.shared.conf.ts
@@ -24,6 +24,10 @@ const TEST_DATASETS = [
     url: 'https://data.kitware.com/api/v1/item/635679c311dab8142820a4f4/download',
     name: 'fetus.zip',
   },
+  {
+    url: 'https://sourceforge.net/p/gdcm/gdcmdata/ci/master/tree/US-MONO2-8-8x-execho.dcm?format=raw',
+    name: 'US-MONO2-8-8x-echo.dcm',
+  },
 ];
 
 export const WINDOW_SIZE = [1200, 800] as const;

From 58f5fb1083054080ea3509681f97dd9ecf663412 Mon Sep 17 00:00:00 2001
From: Paul Elliott <paul@vizworkshop.com>
Date: Sun, 17 May 2026 17:22:41 -0400
Subject: [PATCH 02/12] feat(cine): add playback controls and import hardening

---
 src/components/LayoutGridItem.vue             |   2 +-
 src/components/PlayControls.vue               | 125 ++++++--
 src/components/__tests__/PlayControls.spec.ts | 106 +++++++
 .../tools/crosshairs/CrosshairsWidget2D.vue   |   3 +-
 src/components/tools/paint/PaintWidget2D.vue  |   3 +-
 .../vtk/VtkBaseSliceRepresentation.vue        |  37 ++-
 src/core/cine/DicomCineImage.ts               |  19 +-
 .../cine/__tests__/DicomCineImage.spec.ts     | 163 +++++++++++
 src/core/cine/__tests__/frameCache.spec.ts    |  75 +++++
 .../cine/__tests__/parseCineDicom.spec.ts     |  66 ++++-
 src/core/cine/frameCache.ts                   |  13 +-
 src/core/dicomTags.ts                         |   4 -
 .../__tests__/datasets-dicom-cine.spec.ts     | 270 ++++++++++++++++++
 src/store/__tests__/views.spec.ts             | 100 +++++++
 src/store/datasets-dicom.ts                   |  43 +--
 src/store/image-cache.ts                      |   1 +
 src/store/view-configs.ts                     |   4 +
 src/store/view-configs/cine-playback.ts       |  90 ++++++
 src/store/views.ts                            |  32 ++-
 tests/specs/ultrasound-spacing.e2e.ts         |  28 +-
 20 files changed, 1074 insertions(+), 110 deletions(-)
 create mode 100644 src/components/__tests__/PlayControls.spec.ts
 create mode 100644 src/core/cine/__tests__/DicomCineImage.spec.ts
 create mode 100644 src/core/cine/__tests__/frameCache.spec.ts
 create mode 100644 src/store/__tests__/datasets-dicom-cine.spec.ts
 create mode 100644 src/store/__tests__/views.spec.ts
 create mode 100644 src/store/view-configs/cine-playback.ts

diff --git a/src/components/LayoutGridItem.vue b/src/components/LayoutGridItem.vue
index 37ea098e3..e31c86461 100644
--- a/src/components/LayoutGridItem.vue
+++ b/src/components/LayoutGridItem.vue
@@ -60,8 +60,8 @@ function onDrop(event: DragEvent) {
 
   const droppedImageID = event.dataTransfer?.getData(IMAGE_DRAG_MEDIA_TYPE);
   if (droppedImageID) {
-    viewStore.setDataForView(props.viewId, droppedImageID);
     viewStore.setActiveView(props.viewId);
+    viewStore.setDataForView(props.viewId, droppedImageID);
   }
 }
 </script>
diff --git a/src/components/PlayControls.vue b/src/components/PlayControls.vue
index 0ccfeb53e..ca408dbc6 100644
--- a/src/components/PlayControls.vue
+++ b/src/components/PlayControls.vue
@@ -4,6 +4,12 @@ import { useIntervalFn } from '@vueuse/core';
 import { Maybe } from '@/src/types';
 import { useSliceConfig } from '@/src/composables/useSliceConfig';
 import { getCineImage } from '@/src/core/cine/isCineImage';
+import {
+  clampCineFps,
+  MAX_CINE_FPS,
+  MIN_CINE_FPS,
+  useCinePlaybackStore,
+} from '@/src/store/view-configs/cine-playback';
 
 type Props = {
   viewId: string;
@@ -15,19 +21,48 @@ const { imageId, viewId } = toRefs(props);
 
 const cine = computed(() => getCineImage(imageId.value));
 const { slice, range } = useSliceConfig(viewId, imageId);
+const playbackStore = useCinePlaybackStore();
 
-const playing = ref(false);
-const fps = ref(0);
+const fpsInput = ref('');
+
+const playbackConfig = computed(() =>
+  playbackStore.getConfig(
+    viewId.value,
+    imageId.value,
+    cine.value?.header.frameTimeMs
+  )
+);
+
+function updatePlayback(
+  patch: Parameters<typeof playbackStore.updateConfig>[2]
+) {
+  if (!viewId.value || !imageId.value) return;
+  playbackStore.updateConfig(
+    viewId.value,
+    imageId.value,
+    patch,
+    cine.value?.header.frameTimeMs
+  );
+}
+
+const playing = computed({
+  get: () => playbackConfig.value.playing,
+  set: (value: boolean) => {
+    updatePlayback({ playing: value });
+  },
+});
+
+const fps = computed({
+  get: () => playbackConfig.value.fps,
+  set: (value: number) => {
+    updatePlayback({ fps: value });
+  },
+});
 
 watch(
-  cine,
-  (image) => {
-    if (!image) {
-      fps.value = 0;
-      return;
-    }
-    const frameTime = image.header.frameTimeMs;
-    fps.value = frameTime && frameTime > 0 ? Math.round(1000 / frameTime) : 24;
+  fps,
+  (value) => {
+    fpsInput.value = String(value);
   },
   { immediate: true }
 );
@@ -47,48 +82,82 @@ const { pause, resume } = useIntervalFn(
   { immediate: false, immediateCallback: false }
 );
 
-watch(playing, (isPlaying) => {
-  if (isPlaying) resume();
-  else pause();
-});
+watch(
+  playing,
+  (isPlaying) => {
+    if (isPlaying) resume();
+    else pause();
+  },
+  { immediate: true }
+);
 
 // Pause when the cine clip changes (or is removed).
-watch(imageId, () => {
-  playing.value = false;
+watch(imageId, (nextImageId, previousImageId) => {
+  if (previousImageId && previousImageId !== nextImageId && viewId.value) {
+    playbackStore.updateConfig(
+      viewId.value,
+      previousImageId,
+      {
+        playing: false,
+      },
+      getCineImage(previousImageId)?.header.frameTimeMs
+    );
+  }
+
+  if (nextImageId && previousImageId !== nextImageId && viewId.value) {
+    updatePlayback({ playing: false });
+  }
 });
 
-const MIN_FPS = 1;
-const MAX_FPS = 120;
-
 function togglePlay() {
   playing.value = !playing.value;
 }
 
-function clampFps() {
-  if (!Number.isFinite(fps.value) || fps.value < MIN_FPS) fps.value = MIN_FPS;
-  else if (fps.value > MAX_FPS) fps.value = MAX_FPS;
-  else fps.value = Math.round(fps.value);
+function clampFpsValue(value: string | number) {
+  return clampCineFps(value);
+}
+
+function clampFpsInput(event: Event) {
+  const input = event.target as HTMLInputElement;
+  fpsInput.value = input.value;
+  if (fpsInput.value.trim() === '') return;
+
+  const clamped = clampFpsValue(fpsInput.value);
+  if (clamped == null) return;
+  fps.value = clamped;
+  fpsInput.value = String(clamped);
+  input.value = fpsInput.value;
+}
+
+function commitFpsInput() {
+  const clamped = clampFpsValue(fpsInput.value);
+  const value = clamped ?? fps.value;
+  fps.value = value;
+  fpsInput.value = String(value);
 }
 </script>
 
 <template>
-  <div v-if="cine" class="play-controls pointer-events-all">
+  <div v-if="cine" class="play-controls pointer-events-all" @dblclick.stop>
     <button
       type="button"
       class="play-btn"
       :title="playing ? 'Pause' : 'Play'"
+      :aria-pressed="playing"
+      :aria-label="playing ? 'Pause cine playback' : 'Play cine playback'"
       @click="togglePlay"
     >
       <v-icon size="14">{{ playing ? 'mdi-pause' : 'mdi-play' }}</v-icon>
     </button>
     <input
-      v-model.number="fps"
+      :value="fpsInput"
       type="number"
-      :min="MIN_FPS"
-      :max="MAX_FPS"
+      :min="MIN_CINE_FPS"
+      :max="MAX_CINE_FPS"
       class="fps-input"
       title="Frames per second"
-      @change="clampFps"
+      @input="clampFpsInput"
+      @blur="commitFpsInput"
     />
     <span class="fps-suffix">fps</span>
   </div>
diff --git a/src/components/__tests__/PlayControls.spec.ts b/src/components/__tests__/PlayControls.spec.ts
new file mode 100644
index 000000000..8a6a930e4
--- /dev/null
+++ b/src/components/__tests__/PlayControls.spec.ts
@@ -0,0 +1,106 @@
+import { mount, VueWrapper } from '@vue/test-utils';
+import { createPinia, setActivePinia } from 'pinia';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { ComponentPublicInstance, nextTick, ref } from 'vue';
+import PlayControls from '@/src/components/PlayControls.vue';
+
+type PlayControlsProps = { viewId: string; imageId: string | null };
+type PlayControlsWrapper = VueWrapper<
+  ComponentPublicInstance<PlayControlsProps>
+>;
+
+vi.mock('@/src/core/cine/isCineImage', () => ({
+  getCineImage: (imageId: string | null) => {
+    const frameTimesByImageId: Record<string, number> = {
+      'image-1': 50,
+      'image-2': 25,
+    };
+
+    return imageId
+      ? {
+          header: {
+            frameTimeMs: frameTimesByImageId[imageId] ?? 40,
+          },
+        }
+      : null;
+  },
+}));
+
+vi.mock('@/src/composables/useSliceConfig', () => ({
+  useSliceConfig: () => ({
+    slice: ref(0),
+    range: ref([0, 2]),
+  }),
+}));
+
+describe('PlayControls', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia());
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it('preserves playback state when the controls remount', async () => {
+    const props = {
+      viewId: 'view-1',
+      imageId: 'image-1',
+    };
+    const mountControls = () =>
+      mount(PlayControls, {
+        props,
+        global: {
+          stubs: {
+            'v-icon': true,
+          },
+        },
+      });
+
+    const wrapper = mountControls();
+    await wrapper.get('button').trigger('click');
+    await wrapper.get('input').setValue('17');
+
+    expect(wrapper.get('button').attributes('aria-pressed')).toBe('true');
+    expect((wrapper.get('input').element as HTMLInputElement).value).toBe('17');
+
+    wrapper.unmount();
+
+    const remounted = mountControls();
+    await nextTick();
+
+    expect(remounted.get('button').attributes('aria-pressed')).toBe('true');
+    expect((remounted.get('input').element as HTMLInputElement).value).toBe(
+      '17'
+    );
+
+    remounted.unmount();
+  });
+
+  it('preserves frame-time-derived FPS defaults when switching images', async () => {
+    const wrapper = mount(PlayControls, {
+      props: {
+        viewId: 'view-1',
+        imageId: 'image-1',
+      },
+      global: {
+        stubs: {
+          'v-icon': true,
+        },
+      },
+    }) as unknown as PlayControlsWrapper;
+
+    expect((wrapper.get('input').element as HTMLInputElement).value).toBe('20');
+
+    await wrapper.setProps({ imageId: 'image-2' });
+
+    expect((wrapper.get('input').element as HTMLInputElement).value).toBe('40');
+
+    await wrapper.setProps({ imageId: 'image-1' });
+
+    expect((wrapper.get('input').element as HTMLInputElement).value).toBe('20');
+
+    wrapper.unmount();
+  });
+});
diff --git a/src/components/tools/crosshairs/CrosshairsWidget2D.vue b/src/components/tools/crosshairs/CrosshairsWidget2D.vue
index 435c37149..dc8cf2665 100644
--- a/src/components/tools/crosshairs/CrosshairsWidget2D.vue
+++ b/src/components/tools/crosshairs/CrosshairsWidget2D.vue
@@ -18,6 +18,7 @@ import { useCrosshairsToolStore } from '@/src/store/tools/crosshairs';
 import { Maybe } from '@/src/types';
 import { VtkViewContext } from '@/src/components/vtk/context';
 import { useSliceInfo } from '@/src/composables/useSliceInfo';
+import { getRenderSlice } from '@/src/core/cine/getRenderSlice';
 
 export default defineComponent({
   name: 'CrosshairsWidget2D',
@@ -64,7 +65,7 @@ export default defineComponent({
       updatePlaneManipulatorFor2DView(
         manipulator,
         viewDirection.value,
-        slice.value,
+        getRenderSlice(imageId.value, slice.value),
         imageMetadata.value
       );
     });
diff --git a/src/components/tools/paint/PaintWidget2D.vue b/src/components/tools/paint/PaintWidget2D.vue
index 368d9723d..004716da0 100644
--- a/src/components/tools/paint/PaintWidget2D.vue
+++ b/src/components/tools/paint/PaintWidget2D.vue
@@ -26,6 +26,7 @@ import { VtkViewContext } from '@/src/components/vtk/context';
 import { Maybe } from '@/src/types';
 import { PaintMode } from '@/src/core/tools/paint';
 import { actionToKey } from '@/src/composables/useKeyboardShortcuts';
+import { getRenderSlice } from '@/src/core/cine/getRenderSlice';
 
 export default defineComponent({
   name: 'PaintWidget2D',
@@ -138,7 +139,7 @@ export default defineComponent({
       updatePlaneManipulatorFor2DView(
         manipulator,
         viewDirection.value,
-        slice.value,
+        getRenderSlice(imageId.value, slice.value),
         imageMetadata.value
       );
     });
diff --git a/src/components/vtk/VtkBaseSliceRepresentation.vue b/src/components/vtk/VtkBaseSliceRepresentation.vue
index 0a89d4503..a62ed6d6a 100644
--- a/src/components/vtk/VtkBaseSliceRepresentation.vue
+++ b/src/components/vtk/VtkBaseSliceRepresentation.vue
@@ -1,5 +1,13 @@
 <script setup lang="ts">
-import { computed, toRefs, watchEffect, watch, inject, shallowRef } from 'vue';
+import {
+  computed,
+  toRefs,
+  watchEffect,
+  watch,
+  inject,
+  shallowRef,
+  nextTick,
+} from 'vue';
 import vtkImageData from '@kitware/vtk.js/Common/DataModel/ImageData';
 import vtkDataArray from '@kitware/vtk.js/Common/Core/DataArray';
 import { useImage } from '@/src/composables/useCurrentImage';
@@ -95,24 +103,33 @@ const cine = computed(() => getCineImage(imageID.value));
 // geometry; the mapper renders from this local image so two views can show
 // different frames without overwriting each other's pixels.
 const cineRender = shallowRef<CineRenderImage | null>(null);
+// Pending per-view buffer. Published to cineRender only after decoded pixels land.
+let localCineRender: CineRenderImage | null = null;
 
 watchEffect((onCleanup) => {
   const cineImage = cine.value;
   if (!cineImage) return;
   const local = createCineRenderImage(cineImage);
-  cineRender.value = local;
+  localCineRender = local;
+  cineRender.value = null;
   onCleanup(() => {
-    local.imageData.delete();
+    if (localCineRender === local) {
+      localCineRender = null;
+    }
     if (cineRender.value === local) {
       cineRender.value = null;
     }
+    // Defer the VTK free to nextTick so the mapper flushes its new input
+    // (driven by the cineRender.value change above) before we destroy the
+    // old vtkImageData. Otherwise the mapper briefly holds a deleted ref.
+    nextTick(() => {
+      local.imageData.delete();
+    });
   });
 });
 
-// Mapper input — when cine, use the per-view buffer (or null until decoded
-// so we don't briefly show frame 0 from the canonical image).
 const mapperInput = computed(() => {
-  if (cine.value) return cineRender.value?.imageData ?? null;
+  if (cine.value) return cineRender.value?.imageData;
   return imageData.value;
 });
 
@@ -145,18 +162,20 @@ syncRefs(renderSlice, slice, { immediate: true });
 // changes.
 let frameToken = 0;
 watch(
-  [() => sliceConfig.slice.value, cine, cineRender],
-  ([frame, cineImage, target]) => {
+  [() => sliceConfig.slice.value, cine],
+  ([frame, cineImage]) => {
+    const target = localCineRender;
     if (!cineImage || !target) return;
     const myToken = ++frameToken;
     cineImage
       .getFrame(frame)
       .then((decoded) => {
         if (myToken !== frameToken) return;
-        if (cineRender.value !== target) return;
+        if (localCineRender !== target) return;
         if (!copyDecodedFrameToRgb(decoded, target)) return;
         target.dataArray.modified();
         target.imageData.modified();
+        cineRender.value = target;
         view.requestRender();
       })
       .catch(() => {
diff --git a/src/core/cine/DicomCineImage.ts b/src/core/cine/DicomCineImage.ts
index 776101504..8207ad63f 100644
--- a/src/core/cine/DicomCineImage.ts
+++ b/src/core/cine/DicomCineImage.ts
@@ -33,14 +33,12 @@ import {
 const PHYSICAL_UNITS_CM = 3;
 
 function pickPixelSpacing(header: CineHeader): [number, number] {
-  const region = header.regions[0];
+  const region = header.regions.find(
+    (candidate) =>
+      candidate.physicalUnitsX === PHYSICAL_UNITS_CM &&
+      candidate.physicalUnitsY === PHYSICAL_UNITS_CM
+  );
   if (!region) return [1, 1];
-  if (
-    region.physicalUnitsX !== PHYSICAL_UNITS_CM ||
-    region.physicalUnitsY !== PHYSICAL_UNITS_CM
-  ) {
-    return [1, 1];
-  }
   const dx = region.physicalDeltaX;
   const dy = region.physicalDeltaY;
   if (!dx || !dy || !Number.isFinite(dx) || !Number.isFinite(dy)) {
@@ -280,9 +278,10 @@ export default class DicomCineImage extends BaseProgressiveImage {
     if (isNativeTransferSyntax(header.transferSyntaxUID)) {
       // Native pixel data: only support 8-bit RGB or grayscale for v1.
       if (header.bitsAllocated !== 8) return false;
-      if (header.samplesPerPixel !== 1 && header.samplesPerPixel !== 3) {
-        return false;
-      }
+      const photometric = header.photometricInterpretation.trim();
+      if (header.samplesPerPixel === 1) return photometric === 'MONOCHROME2';
+      if (header.samplesPerPixel === 3) return photometric === 'RGB';
+      return false;
     }
     return true;
   }
diff --git a/src/core/cine/__tests__/DicomCineImage.spec.ts b/src/core/cine/__tests__/DicomCineImage.spec.ts
new file mode 100644
index 000000000..a396b4f7d
--- /dev/null
+++ b/src/core/cine/__tests__/DicomCineImage.spec.ts
@@ -0,0 +1,163 @@
+import { describe, expect, it } from 'vitest';
+
+import DicomCineImage from '../DicomCineImage';
+import type { CineHeader, CineParseResult } from '../parseCineDicom';
+
+const TS_EXPLICIT_VR_LE = '1.2.840.10008.1.2.1';
+const TS_JPEG_BASELINE = '1.2.840.10008.1.2.4.50';
+const TS_UNSUPPORTED = '1.2.840.10008.1.2.5';
+
+function cineHeader(overrides: Partial<CineHeader> = {}): CineHeader {
+  return {
+    transferSyntaxUID: TS_EXPLICIT_VR_LE,
+    rows: 2,
+    cols: 2,
+    numberOfFrames: 2,
+    samplesPerPixel: 1,
+    bitsAllocated: 8,
+    planarConfiguration: 0,
+    photometricInterpretation: 'MONOCHROME2',
+    frameTimeMs: null,
+    patient: {
+      PatientID: 'patient-1',
+      PatientName: 'Test Patient',
+      PatientBirthDate: '',
+      PatientSex: '',
+    },
+    study: {
+      StudyID: 'study-1',
+      StudyInstanceUID: 'study-uid',
+      StudyDate: '',
+      StudyTime: '',
+      AccessionNumber: '',
+      StudyDescription: '',
+    },
+    series: {
+      SeriesInstanceUID: 'series-uid',
+      SeriesNumber: '1',
+      SeriesDescription: 'Cine',
+      Modality: 'US',
+      SOPInstanceUID: 'sop-uid',
+      SOPClassUID: '1.2.840.10008.5.1.4.1.1.3.1',
+    },
+    regions: [],
+    ...overrides,
+  };
+}
+
+function parseResult(header: CineHeader): CineParseResult {
+  return {
+    header,
+    frames: [new Uint8Array(4), new Uint8Array(4)],
+    encapsulated: false,
+  };
+}
+
+describe('DicomCineImage.isSupported', () => {
+  it('accepts only MONOCHROME2 for native one-sample 8-bit pixels', () => {
+    expect(DicomCineImage.isSupported(cineHeader())).toBe(true);
+
+    ['MONOCHROME1', 'PALETTE COLOR', 'RGB', 'YBR_FULL', 'YBR_FULL_422'].forEach(
+      (photometricInterpretation) => {
+        expect(
+          DicomCineImage.isSupported(cineHeader({ photometricInterpretation }))
+        ).toBe(false);
+      }
+    );
+  });
+
+  it('accepts only RGB for native three-sample 8-bit pixels', () => {
+    expect(
+      DicomCineImage.isSupported(
+        cineHeader({
+          samplesPerPixel: 3,
+          photometricInterpretation: 'RGB',
+        })
+      )
+    ).toBe(true);
+
+    [
+      'MONOCHROME2',
+      'MONOCHROME1',
+      'PALETTE COLOR',
+      'YBR_FULL',
+      'YBR_FULL_422',
+    ].forEach((photometricInterpretation) => {
+      expect(
+        DicomCineImage.isSupported(
+          cineHeader({
+            samplesPerPixel: 3,
+            photometricInterpretation,
+          })
+        )
+      ).toBe(false);
+    });
+  });
+
+  it('rejects native pixels unless BitsAllocated is 8', () => {
+    expect(DicomCineImage.isSupported(cineHeader({ bitsAllocated: 16 }))).toBe(
+      false
+    );
+  });
+
+  it('keeps encapsulated support scoped to transfer syntax acceptance', () => {
+    expect(
+      DicomCineImage.isSupported(
+        cineHeader({
+          transferSyntaxUID: TS_JPEG_BASELINE,
+          bitsAllocated: 16,
+          samplesPerPixel: 3,
+          photometricInterpretation: 'YBR_FULL_422',
+        })
+      )
+    ).toBe(true);
+
+    expect(
+      DicomCineImage.isSupported(
+        cineHeader({
+          transferSyntaxUID: TS_UNSUPPORTED,
+          photometricInterpretation: 'RGB',
+        })
+      )
+    ).toBe(false);
+  });
+});
+
+describe('DicomCineImage spacing', () => {
+  it('uses the first spatial 2D ultrasound region instead of the first region overall', () => {
+    const image = new DicomCineImage(
+      parseResult(
+        cineHeader({
+          regions: [
+            {
+              minX0: 0,
+              minY0: 0,
+              maxX1: 1,
+              maxY1: 1,
+              physicalDeltaX: 10,
+              physicalDeltaY: 10,
+              physicalUnitsX: 1,
+              physicalUnitsY: 3,
+            },
+            {
+              minX0: 0,
+              minY0: 0,
+              maxX1: 1,
+              maxY1: 1,
+              physicalDeltaX: -0.05,
+              physicalDeltaY: 0.125,
+              physicalUnitsX: 3,
+              physicalUnitsY: 3,
+            },
+          ],
+        })
+      )
+    );
+
+    expect(Array.from(image.getVtkImageData().getSpacing())).toEqual([
+      0.5, 1.25, 1,
+    ]);
+
+    image.dispose();
+  });
+});
diff --git a/src/core/cine/__tests__/frameCache.spec.ts b/src/core/cine/__tests__/frameCache.spec.ts
new file mode 100644
index 000000000..d903d1d8c
--- /dev/null
+++ b/src/core/cine/__tests__/frameCache.spec.ts
@@ -0,0 +1,75 @@
+import { describe, expect, it } from 'vitest';
+import {
+  decodeNativeFrame,
+  FrameCache,
+  type DecodedFrame,
+} from '../frameCache';
+
+const MiB = 1024 * 1024;
+
+function frame(byteLength: number): DecodedFrame {
+  return {
+    width: 1,
+    height: 1,
+    rgba: { byteLength } as Uint8ClampedArray,
+  };
+}
+
+describe('FrameCache', () => {
+  it('defaults to a 64 MiB budget', () => {
+    const cache = new FrameCache();
+
+    cache.set(0, frame(32 * MiB));
+    cache.set(1, frame(32 * MiB));
+
+    expect(cache.has(0)).toBe(true);
+    expect(cache.has(1)).toBe(true);
+    expect(cache.getBytesInUse()).toBe(64 * MiB);
+
+    cache.set(2, frame(1));
+
+    expect(cache.has(0)).toBe(false);
+    expect(cache.has(1)).toBe(true);
+    expect(cache.has(2)).toBe(true);
+    expect(cache.getBytesInUse()).toBe(32 * MiB + 1);
+  });
+
+  it('refreshes entries on get before LRU eviction', () => {
+    const cache = new FrameCache(10);
+
+    cache.set(0, frame(4));
+    cache.set(1, frame(4));
+    expect(cache.get(0)).not.toBeNull();
+    cache.set(2, frame(4));
+
+    expect(cache.has(0)).toBe(true);
+    expect(cache.has(1)).toBe(false);
+    expect(cache.has(2)).toBe(true);
+  });
+});
+
+describe('decodeNativeFrame', () => {
+  it('decodes pixel-interleaved native RGB frames', () => {
+    const decoded = decodeNativeFrame(Uint8Array.from([1, 2, 3, 4, 5, 6]), {
+      width: 2,
+      height: 1,
+      samplesPerPixel: 3,
+      photometric: 'RGB',
+      planarConfiguration: 0,
+    });
+
+    expect(Array.from(decoded.rgba)).toEqual([1, 2, 3, 255, 4, 5, 6, 255]);
+  });
+
+  it('decodes plane-interleaved native RGB frames', () => {
+    const decoded = decodeNativeFrame(Uint8Array.from([1, 4, 2, 5, 3, 6]), {
+      width: 2,
+      height: 1,
+      samplesPerPixel: 3,
+      photometric: 'RGB',
+      planarConfiguration: 1,
+    });
+
+    expect(Array.from(decoded.rgba)).toEqual([1, 2, 3, 255, 4, 5, 6, 255]);
+  });
+});
diff --git a/src/core/cine/__tests__/parseCineDicom.spec.ts b/src/core/cine/__tests__/parseCineDicom.spec.ts
index 8441b59d0..a292c853b 100644
--- a/src/core/cine/__tests__/parseCineDicom.spec.ts
+++ b/src/core/cine/__tests__/parseCineDicom.spec.ts
@@ -96,35 +96,70 @@ function fileMeta(transferSyntaxUID: string): Uint8Array {
   return elementShort(0x0002, 0x0010, 'UI', ascii(transferSyntaxUID));
 }
 
-const COMMON_TAGS = (numberOfFrames: number, rows: number, cols: number) =>
-  concat([
+const COMMON_TAGS = (
+  numberOfFrames: number,
+  rows: number,
+  cols: number,
+  options: {
+    samplesPerPixel?: number;
+    photometricInterpretation?: string;
+    planarConfiguration?: number;
+  } = {}
+) => {
+  const samplesPerPixel = options.samplesPerPixel ?? 1;
+  const photometricInterpretation =
+    options.photometricInterpretation ?? 'MONOCHROME2';
+
+  return concat([
     elementShort(0x0008, 0x0016, 'UI', ascii('1.2.840.10008.5.1.4.1.1.3.1')),
     elementShort(0x0008, 0x0018, 'UI', ascii('1.2.3.4.5.6.7.8.9')),
     elementShort(0x0008, 0x0060, 'CS', ascii('US')),
     elementShort(0x0020, 0x000d, 'UI', ascii('1.2.3.4.5.6.7.8.9.1')),
     elementShort(0x0020, 0x000e, 'UI', ascii('1.2.3.4.5.6.7.8.9.2')),
-    elementShort(0x0028, 0x0002, 'US', u16Bytes(1)),
-    elementShort(0x0028, 0x0004, 'CS', ascii('MONOCHROME2')),
+    elementShort(0x0028, 0x0002, 'US', u16Bytes(samplesPerPixel)),
+    elementShort(0x0028, 0x0004, 'CS', ascii(photometricInterpretation)),
+    ...(options.planarConfiguration == null
+      ? []
+      : [
+          elementShort(
+            0x0028,
+            0x0006,
+            'US',
+            u16Bytes(options.planarConfiguration)
+          ),
+        ]),
     elementShort(0x0028, 0x0008, 'IS', ascii(String(numberOfFrames))),
     elementShort(0x0028, 0x0010, 'US', u16Bytes(rows)),
     elementShort(0x0028, 0x0011, 'US', u16Bytes(cols)),
     elementShort(0x0028, 0x0100, 'US', u16Bytes(8)),
     elementShort(0x0028, 0x0101, 'US', u16Bytes(8)),
   ]);
+};
 
 function buildNativeDicom(opts: {
   numberOfFrames: number;
   rows: number;
   cols: number;
   fillByte?: number;
+  samplesPerPixel?: number;
+  photometricInterpretation?: string;
+  planarConfiguration?: number;
 }): Uint8Array {
-  const { numberOfFrames, rows, cols, fillByte = 0x42 } = opts;
+  const {
+    numberOfFrames,
+    rows,
+    cols,
+    fillByte = 0x42,
+    samplesPerPixel = 1,
+  } = opts;
   const preamble = new Uint8Array(128);
   const dicm = ascii('DICM');
   const meta = fileMeta(TS_EXPLICIT_VR_LE);
-  const dataset = COMMON_TAGS(numberOfFrames, rows, cols);
+  const dataset = COMMON_TAGS(numberOfFrames, rows, cols, opts);
 
-  const pixelBytes = new Uint8Array(numberOfFrames * rows * cols);
+  const pixelBytes = new Uint8Array(
+    numberOfFrames * rows * cols * samplesPerPixel
+  );
   pixelBytes.fill(fillByte);
   const pixelData = elementLong(0x7fe0, 0x0010, 'OB', pixelBytes);
 
@@ -220,6 +255,23 @@ describe('parseCineDicom on synthetic fixtures', () => {
     expect(frames[0][0]).toBe(0x7f);
   });
 
+  it('parses native RGB planar-configuration metadata', () => {
+    const bytes = buildNativeDicom({
+      numberOfFrames: 2,
+      rows: 1,
+      cols: 2,
+      samplesPerPixel: 3,
+      photometricInterpretation: 'RGB',
+      planarConfiguration: 1,
+    });
+    const { header, frames } = parseCineDicom(bytes);
+
+    expect(header.samplesPerPixel).toBe(3);
+    expect(header.photometricInterpretation).toBe('RGB');
+    expect(header.planarConfiguration).toBe(1);
+    expect(frames[0].byteLength).toBe(1 * 2 * 3);
+  });
+
   it('parses encapsulated PixelData with a populated BOT', () => {
     const frameBytes = [fakeJpegFrame(1), fakeJpegFrame(2), fakeJpegFrame(3)];
     const bytes = buildEncapsulatedDicom({
diff --git a/src/core/cine/frameCache.ts b/src/core/cine/frameCache.ts
index 48860f199..3f66eb3da 100644
--- a/src/core/cine/frameCache.ts
+++ b/src/core/cine/frameCache.ts
@@ -11,7 +11,7 @@ export type DecodedFrame = {
   rgba: Uint8ClampedArray;
 };
 
-const DEFAULT_BUDGET_BYTES = 256 * 1024 * 1024;
+const DEFAULT_BUDGET_BYTES = 64 * 1024 * 1024;
 
 export class FrameCache {
   private readonly budgetBytes: number;
@@ -95,18 +95,19 @@ export async function decodeJpegFrame(
     const canvas = new OffscreenCanvas(bitmap.width, bitmap.height);
     const ctx = canvas.getContext('2d');
     if (!ctx) throw new Error('OffscreenCanvas 2D context unavailable');
-    ctx.drawImage(bitmap, 0, 0);
-    const imageData = ctx.getImageData(0, 0, bitmap.width, bitmap.height);
     if (
       (expectedWidth && bitmap.width !== expectedWidth) ||
       (expectedHeight && bitmap.height !== expectedHeight)
     ) {
-      // Mismatch is unusual for valid DICOM US clips. Keep the data but flag
-      // it in the console — the caller will still copy whatever it returns.
-      console.warn(
+      // The per-view RGB buffer is sized from DICOM Rows/Columns; a JPEG that
+      // disagrees can never be copied into it. Surface as a real error so the
+      // user sees a toast instead of a silently-black frame.
+      throw new Error(
         `JPEG frame size ${bitmap.width}x${bitmap.height} does not match DICOM-declared ${expectedWidth}x${expectedHeight}`
       );
     }
+    ctx.drawImage(bitmap, 0, 0);
+    const imageData = ctx.getImageData(0, 0, bitmap.width, bitmap.height);
     return {
       width: bitmap.width,
       height: bitmap.height,
diff --git a/src/core/dicomTags.ts b/src/core/dicomTags.ts
index a22bf98d8..3a48de7d1 100644
--- a/src/core/dicomTags.ts
+++ b/src/core/dicomTags.ts
@@ -37,10 +37,6 @@ const tags: Tag[] = [
   { name: 'PhotometricInterpretation', tag: '0028|0004' },
   { name: 'FrameTime', tag: '0018|1063' },
   { name: 'SequenceOfUltrasoundRegions', tag: '0018|6011' },
-  { name: 'RegionLocationMinX0', tag: '0018|6018' },
-  { name: 'RegionLocationMinY0', tag: '0018|601a' },
-  { name: 'RegionLocationMaxX1', tag: '0018|601c' },
-  { name: 'RegionLocationMaxY1', tag: '0018|601e' },
   { name: 'PhysicalUnitsXDirection', tag: '0018|6024' },
   { name: 'PhysicalUnitsYDirection', tag: '0018|6026' },
   { name: 'PhysicalDeltaX', tag: '0018|602c' },
diff --git a/src/store/__tests__/datasets-dicom-cine.spec.ts b/src/store/__tests__/datasets-dicom-cine.spec.ts
new file mode 100644
index 000000000..94d51304e
--- /dev/null
+++ b/src/store/__tests__/datasets-dicom-cine.spec.ts
@@ -0,0 +1,270 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { createPinia, setActivePinia } from 'pinia';
+
+import type { Chunk } from '@/src/core/streaming/chunk';
+import {
+  SOP_CLASS_ULTRASOUND_MULTIFRAME,
+  SOP_CLASS_ULTRASOUND_MULTIFRAME_RETIRED,
+  Tags,
+} from '@/src/core/dicomTags';
+import type {
+  CineHeader,
+  CineParseResult,
+} from '@/src/core/cine/parseCineDicom';
+import { useImageCacheStore } from '@/src/store/image-cache';
+import { isCineChunkGroup, useDICOMStore } from '@/src/store/datasets-dicom';
+
+const mocks = vi.hoisted(() => {
+  const chunkImages: MockDicomChunkImage[] = [];
+
+  class MockDicomChunkImage {
+    chunks: Chunk[] = [];
+    name = '';
+
+    constructor() {
+      chunkImages.push(this);
+    }
+
+    async addChunks(chunks: Chunk[]) {
+      this.chunks = chunks;
+    }
+
+    getDicomMetadata() {
+      return this.chunks[0].metadata;
+    }
+
+    getChunks() {
+      return this.chunks.slice();
+    }
+
+    setName(name: string) {
+      this.name = name;
+    }
+
+    getStatus() {
+      return 'complete';
+    }
+
+    isLoading() {
+      return false;
+    }
+
+    addEventListener() {}
+
+    removeEventListener() {}
+
+    startLoad() {}
+
+    dispose() {}
+  }
+
+  return {
+    splitAndSort: vi.fn(),
+    parseCineDicom: vi.fn(),
+    chunkImages,
+    MockDicomChunkImage,
+  };
+});
+
+vi.mock('@/src/io/dicom', () => ({
+  splitAndSort: mocks.splitAndSort,
+}));
+
+vi.mock('@/src/core/cine/parseCineDicom', async (importOriginal) => {
+  const actual =
+    await importOriginal<typeof import('@/src/core/cine/parseCineDicom')>();
+  return {
+    ...actual,
+    parseCineDicom: mocks.parseCineDicom,
+  };
+});
+
+vi.mock('@/src/core/streaming/dicomChunkImage', () => ({
+  default: mocks.MockDicomChunkImage,
+}));
+
+function metadata(overrides: Record<string, string> = {}) {
+  return (
+    [
+      [Tags.SOPClassUID, SOP_CLASS_ULTRASOUND_MULTIFRAME],
+      [Tags.NumberOfFrames, '2'],
+      [Tags.SOPInstanceUID, 'sop-uid'],
+      [Tags.PatientID, 'patient-1'],
+      [Tags.PatientName, 'Test Patient'],
+      [Tags.PatientBirthDate, ''],
+      [Tags.PatientSex, ''],
+      [Tags.StudyID, 'study-1'],
+      [Tags.StudyInstanceUID, 'study-uid'],
+      [Tags.StudyDate, ''],
+      [Tags.StudyTime, ''],
+      [Tags.AccessionNumber, ''],
+      [Tags.StudyDescription, ''],
+      [Tags.Modality, 'US'],
+      [Tags.SeriesInstanceUID, 'series-uid'],
+      [Tags.SeriesNumber, '7'],
+      [Tags.SeriesDescription, 'Unsupported native cine'],
+      [Tags.WindowLevel, ''],
+      [Tags.WindowWidth, ''],
+    ] as [string, string][]
+  ).map(([tag, value]) => [tag, overrides[tag] ?? value]) as [string, string][];
+}
+
+function cineHeader(overrides: Partial<CineHeader> = {}): CineHeader {
+  return {
+    transferSyntaxUID: '1.2.840.10008.1.2.1',
+    rows: 2,
+    cols: 2,
+    numberOfFrames: 2,
+    samplesPerPixel: 1,
+    bitsAllocated: 8,
+    planarConfiguration: 0,
+    photometricInterpretation: 'MONOCHROME1',
+    frameTimeMs: null,
+    patient: {
+      PatientID: 'patient-1',
+      PatientName: 'Test Patient',
+      PatientBirthDate: '',
+      PatientSex: '',
+    },
+    study: {
+      StudyID: 'study-1',
+      StudyInstanceUID: 'study-uid',
+      StudyDate: '',
+      StudyTime: '',
+      AccessionNumber: '',
+      StudyDescription: '',
+    },
+    series: {
+      SeriesInstanceUID: 'series-uid',
+      SeriesNumber: '7',
+      SeriesDescription: 'Unsupported native cine',
+      Modality: 'US',
+      SOPInstanceUID: 'sop-uid',
+      SOPClassUID: SOP_CLASS_ULTRASOUND_MULTIFRAME,
+    },
+    regions: [],
+    ...overrides,
+  };
+}
+
+function parseResult(header: CineHeader): CineParseResult {
+  return {
+    header,
+    frames: [new Uint8Array([1, 2, 3, 4]), new Uint8Array([5, 6, 7, 8])],
+    encapsulated: false,
+  };
+}
+
+function chunk(meta = metadata()) {
+  return {
+    metadata: meta,
+    metaBlob: new Blob([new Uint8Array([1])]),
+    dataBlob: new Blob([new Uint8Array([2])]),
+    loadData: vi.fn().mockResolvedValue(undefined),
+  } as unknown as Chunk;
+}
+
+describe('isCineChunkGroup', () => {
+  it('accepts a single current ultrasound multi-frame image with more than one frame', () => {
+    expect(isCineChunkGroup([chunk()])).toBe(true);
+  });
+
+  it('accepts the retired ultrasound multi-frame SOP class UID', () => {
+    expect(
+      isCineChunkGroup([
+        chunk(
+          metadata({
+            [Tags.SOPClassUID]: SOP_CLASS_ULTRASOUND_MULTIFRAME_RETIRED,
+          })
+        ),
+      ])
+    ).toBe(true);
+  });
+
+  it('rejects multi-chunk groups', () => {
+    expect(isCineChunkGroup([chunk(), chunk()])).toBe(false);
+  });
+
+  it('rejects non-ultrasound SOP classes', () => {
+    expect(
+      isCineChunkGroup([
+        chunk(
+          metadata({
+            [Tags.SOPClassUID]: '1.2.840.10008.5.1.4.1.1.2',
+          })
+        ),
+      ])
+    ).toBe(false);
+  });
+
+  it('rejects single-frame images', () => {
+    expect(
+      isCineChunkGroup([
+        chunk(
+          metadata({
+            [Tags.NumberOfFrames]: '1',
+          })
+        ),
+      ])
+    ).toBe(false);
+  });
+});
+
+describe('DICOM store cine routing', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia());
+    mocks.splitAndSort.mockReset();
+    mocks.parseCineDicom.mockReset();
+    mocks.chunkImages.length = 0;
+  });
+
+  it('falls back to chunk import for unsupported parsed cine headers', async () => {
+    const unsupportedCineChunk = chunk();
+    const chunksByVolume = { 'volume-1': [unsupportedCineChunk] };
+    mocks.splitAndSort.mockResolvedValue(chunksByVolume);
+    mocks.parseCineDicom.mockReturnValue(parseResult(cineHeader()));
+
+    const store = useDICOMStore();
+    await expect(store.importChunks([unsupportedCineChunk])).resolves.toBe(
+      chunksByVolume
+    );
+
+    expect(unsupportedCineChunk.loadData).toHaveBeenCalledOnce();
+    expect(mocks.parseCineDicom).toHaveBeenCalledOnce();
+    expect(mocks.chunkImages).toHaveLength(1);
+    expect(mocks.chunkImages[0].chunks).toEqual([unsupportedCineChunk]);
+
+    const imageCacheStore = useImageCacheStore();
+    expect(imageCacheStore.imageById['volume-1']).toBe(mocks.chunkImages[0]);
+    expect(store.volumeInfo['volume-1']).toMatchObject({
+      NumberOfSlices: 1,
+      VolumeID: 'volume-1',
+      Modality: 'US',
+      SeriesInstanceUID: 'series-uid',
+      SeriesNumber: '7',
+      SeriesDescription: 'Unsupported native cine',
+    });
+    expect(store.volumeInfo['volume-1'].kind).toBe('volume');
+  });
+
+  it('rejects cached non-chunk images before chunk-volume reuse', async () => {
+    const normalChunk = chunk(
+      metadata({
+        [Tags.SOPClassUID]: '1.2.840.10008.5.1.4.1.1.2',
+        [Tags.NumberOfFrames]: '1',
+      })
+    );
+    const chunksByVolume = { 'volume-1': [normalChunk] };
+    mocks.splitAndSort.mockResolvedValue(chunksByVolume);
+
+    const imageCacheStore = useImageCacheStore();
+    imageCacheStore.imageById['volume-1'] =
+      {} as (typeof imageCacheStore.imageById)[string];
+
+    const store = useDICOMStore();
+    await expect(store.importChunks([normalChunk])).rejects.toThrow(
+      /non-chunk progressive image/
+    );
+    expect(mocks.chunkImages).toHaveLength(0);
+  });
+});
diff --git a/src/store/__tests__/views.spec.ts b/src/store/__tests__/views.spec.ts
new file mode 100644
index 000000000..7bed0c535
--- /dev/null
+++ b/src/store/__tests__/views.spec.ts
@@ -0,0 +1,100 @@
+import { describe, it, beforeEach, expect, vi } from 'vitest';
+import { setActivePinia, createPinia } from 'pinia';
+import { useViewStore } from '@/src/store/views';
+import type { Manifest } from '@/src/io/state-file/schema';
+
+vi.mock('@/src/core/cine/isCineImage', () => ({
+  isCineImage: (imageID: string | null) => imageID === 'cine-image',
+}));
+
+describe('View store', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia());
+  });
+
+  it('selects the first initial visible view', () => {
+    const store = useViewStore();
+
+    expect(store.activeView).toBe(store.visibleViews[0].id);
+  });
+
+  it('selects a visible view when data is attached to the default layout', () => {
+    const store = useViewStore();
+
+    store.setActiveView(null);
+    store.setDataForAllViews('image-1');
+
+    expect(store.activeView).toBe(store.visibleViews[0].id);
+  });
+
+  it('replaces non-2D views with axial views when cine data is attached', () => {
+    const store = useViewStore();
+
+    store.setDataForAllViews('cine-image');
+
+    expect(store.visibleViews).toHaveLength(4);
+    store.visibleViews.forEach((view) => {
+      expect(view.type).toBe('2D');
+      expect(view.dataID).toBe('cine-image');
+    });
+
+    expect(store.visibleViews[3]).toMatchObject({
+      type: '2D',
+      name: 'Axial',
+      options: {
+        orientation: 'Axial',
+      },
+    });
+  });
+
+  it('keeps the active view on cine replacement', () => {
+    const store = useViewStore();
+    const volumeView = store.visibleViews.find((view) => view.type === '3D')!;
+
+    store.setActiveView(volumeView.id);
+    store.setDataForView(volumeView.id, 'cine-image');
+
+    expect(store.getView(volumeView.id)).toBeNull();
+    expect(store.activeView).not.toBe(volumeView.id);
+    expect(store.getView(store.activeView)).toMatchObject({
+      type: '2D',
+      dataID: 'cine-image',
+      options: {
+        orientation: 'Axial',
+      },
+    });
+  });
+
+  it('selects a visible view when session data IDs are rebound', () => {
+    const store = useViewStore();
+    const manifest: Manifest = {
+      version: '6.1.0',
+      dataSources: [],
+      activeView: null,
+      layout: {
+        direction: 'column',
+        items: [{ type: 'slot', slotIndex: 0 }],
+      },
+      layoutSlots: ['view-1'],
+      viewByID: {
+        'view-1': {
+          id: 'view-1',
+          type: '2D',
+          dataID: 'state-image',
+          name: 'Axial',
+          options: {
+            orientation: 'Axial',
+          },
+        },
+      },
+    };
+
+    store.deserializeLayout(manifest);
+    expect(store.activeView).toBeNull();
+
+    store.bindViewsToData('state-image', 'loaded-image', manifest);
+
+    expect(store.activeView).toBe('view-1');
+    expect(store.viewByID['view-1'].dataID).toBe('loaded-image');
+  });
+});
diff --git a/src/store/datasets-dicom.ts b/src/store/datasets-dicom.ts
index 94de879fa..4fda10959 100644
--- a/src/store/datasets-dicom.ts
+++ b/src/store/datasets-dicom.ts
@@ -48,8 +48,8 @@ export interface VolumeInfo {
   WindowLevel: string;
   WindowWidth: string;
   // 'cine' marks an ultrasound multi-frame image whose NumberOfSlices is the
-  // number of cine frames (not Z-axis slices). Absent/undefined means a normal
-  // 3D volume.
+  // number of cine frames (not Z-axis slices). 'volume' means a normal 3D
+  // DICOM volume. Older saved state may omit this field for normal volumes.
   kind?: 'volume' | 'cine';
 }
 
@@ -96,7 +96,7 @@ export const getDisplayName = (info: VolumeInfo) => {
   );
 };
 
-function isCineChunkGroup(chunks: Chunk[]): boolean {
+export function isCineChunkGroup(chunks: Chunk[]): boolean {
   if (chunks.length !== 1) return false;
   const meta = chunks[0].metadata;
   if (!meta) return false;
@@ -161,8 +161,11 @@ export const useDICOMStore = defineStore('dicom', {
       await Promise.all(
         Object.entries(chunksByVolume).map(async ([id, sortedChunks]) => {
           if (isCineChunkGroup(sortedChunks)) {
-            await this._importCineChunk(id, sortedChunks[0]);
-            return;
+            const importedAsCine = await this._importCineChunk(
+              id,
+              sortedChunks[0]
+            );
+            if (importedAsCine) return;
           }
 
           if (this.volumeInfo[id]?.kind === 'cine') {
@@ -170,8 +173,13 @@ export const useDICOMStore = defineStore('dicom', {
               `Volume ${id} is already loaded as a cine clip; cannot re-import as a chunk volume.`
             );
           }
-          const image = (imageCacheStore.imageById[id] ??
-            new DicomChunkImage()) as DicomChunkImage;
+          const cachedImage = imageCacheStore.imageById[id];
+          if (cachedImage && !(cachedImage instanceof DicomChunkImage)) {
+            throw new Error(
+              `Volume ${id} is already loaded as a non-chunk progressive image; cannot re-import as a chunk volume.`
+            );
+          }
+          const image = cachedImage ?? new DicomChunkImage();
 
           await image.addChunks(sortedChunks);
           imageCacheStore.addProgressiveImage(image, { id });
@@ -206,6 +214,7 @@ export const useDICOMStore = defineStore('dicom', {
             SeriesDescription: metadata[Tags.SeriesDescription],
             WindowLevel: metadata[Tags.WindowLevel],
             WindowWidth: metadata[Tags.WindowWidth],
+            kind: 'volume',
           };
 
           this._updateDatabase(patientInfo, studyInfo, volumeInfo);
@@ -218,12 +227,19 @@ export const useDICOMStore = defineStore('dicom', {
       return chunksByVolume;
     },
 
-    async _importCineChunk(id: string, chunk: Chunk) {
+    async _importCineChunk(id: string, chunk: Chunk): Promise<boolean> {
       const imageCacheStore = useImageCacheStore();
 
       // If we already created this cine image (state-file reload), bail.
       if (this.volumeInfo[id]?.kind === 'cine') {
-        return;
+        return true;
+      }
+
+      const cachedImage = imageCacheStore.imageById[id];
+      if (cachedImage && !(cachedImage instanceof DicomCineImage)) {
+        throw new Error(
+          `Volume ${id} is already loaded as a non-cine progressive image; cannot re-import as a cine clip.`
+        );
       }
 
       await chunk.loadData();
@@ -233,13 +249,7 @@ export const useDICOMStore = defineStore('dicom', {
       const parsed = parseCineDicom(buffer);
 
       if (!DicomCineImage.isSupported(parsed.header)) {
-        throw new Error(
-          `Unsupported cine transfer syntax / pixel format: ` +
-            `${parsed.header.transferSyntaxUID} (` +
-            `${parsed.header.bitsAllocated}-bit, ` +
-            `${parsed.header.samplesPerPixel}-sample ` +
-            `${parsed.header.photometricInterpretation})`
-        );
+        return false;
       }
 
       const image = new DicomCineImage(parsed);
@@ -278,6 +288,7 @@ export const useDICOMStore = defineStore('dicom', {
       this._updateDatabase(patientInfo, studyInfo, volumeInfo);
 
       image.setName(getDisplayName(volumeInfo));
+      return true;
     },
 
     _updateDatabase(
diff --git a/src/store/image-cache.ts b/src/store/image-cache.ts
index 916c69488..ed864b5ec 100644
--- a/src/store/image-cache.ts
+++ b/src/store/image-cache.ts
@@ -120,6 +120,7 @@ export const useImageCacheStore = defineStore('image-cache', () => {
     delete imageById[id];
     delete imageStatus[id];
     delete imageLoading[id];
+    delete imageErrors[id];
   }
 
   /**
diff --git a/src/store/view-configs.ts b/src/store/view-configs.ts
index 81b6eb239..b2c990316 100644
--- a/src/store/view-configs.ts
+++ b/src/store/view-configs.ts
@@ -5,6 +5,7 @@ import { useWindowingStore } from './view-configs/windowing';
 import useLayerColoringStore from './view-configs/layers';
 import useViewCameraStore from './view-configs/camera';
 import useVolumeColoringStore from './view-configs/volume-coloring';
+import useCinePlaybackStore from './view-configs/cine-playback';
 import { useViewStore } from './views';
 import { StateFile, ViewConfig } from '../io/state-file/schema';
 
@@ -18,6 +19,7 @@ export const useViewConfigStore = defineStore('viewConfig', () => {
   const layerColoringStore = useLayerColoringStore();
   const viewCameraStore = useViewCameraStore();
   const volumeColoringStore = useVolumeColoringStore();
+  const cinePlaybackStore = useCinePlaybackStore();
   const viewStore = useViewStore();
 
   const removeView = (viewID: string) => {
@@ -26,6 +28,7 @@ export const useViewConfigStore = defineStore('viewConfig', () => {
     layerColoringStore.removeView(viewID);
     viewCameraStore.removeView(viewID);
     volumeColoringStore.removeView(viewID);
+    cinePlaybackStore.removeView(viewID);
   };
 
   const removeData = (dataID: string, viewID?: string) => {
@@ -34,6 +37,7 @@ export const useViewConfigStore = defineStore('viewConfig', () => {
     layerColoringStore.removeData(dataID, viewID);
     viewCameraStore.removeData(dataID, viewID);
     volumeColoringStore.removeData(dataID, viewID);
+    cinePlaybackStore.removeData(dataID, viewID);
   };
 
   const serialize = (stateFile: StateFile) => {
diff --git a/src/store/view-configs/cine-playback.ts b/src/store/view-configs/cine-playback.ts
new file mode 100644
index 000000000..2d1dec364
--- /dev/null
+++ b/src/store/view-configs/cine-playback.ts
@@ -0,0 +1,90 @@
+import { defineStore } from 'pinia';
+import { reactive } from 'vue';
+import { Maybe } from '@/src/types';
+import { clampValue } from '@/src/utils';
+import {
+  DoubleKeyRecord,
+  deleteSecondKey,
+  getDoubleKeyRecord,
+  patchDoubleKeyRecord,
+} from '@/src/utils/doubleKeyRecord';
+
+export const MIN_CINE_FPS = 1;
+export const MAX_CINE_FPS = 120;
+export const DEFAULT_CINE_FPS = 24;
+
+export interface CinePlaybackConfig {
+  playing: boolean;
+  fps: number;
+}
+
+export function clampCineFps(value: string | number) {
+  const parsed = Number(value);
+  if (!Number.isFinite(parsed)) return null;
+  return clampValue(Math.round(parsed), MIN_CINE_FPS, MAX_CINE_FPS);
+}
+
+export function defaultCinePlaybackConfig(
+  frameTimeMs?: Maybe<number>
+): CinePlaybackConfig {
+  const fps =
+    frameTimeMs && frameTimeMs > 0
+      ? Math.round(1000 / frameTimeMs)
+      : DEFAULT_CINE_FPS;
+
+  return {
+    playing: false,
+    fps: clampValue(fps, MIN_CINE_FPS, MAX_CINE_FPS),
+  };
+}
+
+export const useCinePlaybackStore = defineStore('cinePlayback', () => {
+  const configs = reactive<DoubleKeyRecord<CinePlaybackConfig>>({});
+
+  const getConfig = (
+    viewID: Maybe<string>,
+    dataID: Maybe<string>,
+    frameTimeMs?: Maybe<number>
+  ) => ({
+    ...defaultCinePlaybackConfig(frameTimeMs),
+    ...getDoubleKeyRecord(configs, viewID, dataID),
+  });
+
+  const updateConfig = (
+    viewID: string,
+    dataID: string,
+    patch: Partial<CinePlaybackConfig>,
+    frameTimeMs?: Maybe<number>
+  ) => {
+    const current = getConfig(viewID, dataID, frameTimeMs);
+    const fps = patch.fps === undefined ? current.fps : clampCineFps(patch.fps);
+
+    patchDoubleKeyRecord(configs, viewID, dataID, {
+      ...current,
+      ...patch,
+      fps: fps ?? current.fps,
+    });
+  };
+
+  const removeView = (viewID: string) => {
+    delete configs[viewID];
+  };
+
+  const removeData = (dataID: string, viewID?: string) => {
+    if (viewID) {
+      delete configs[viewID]?.[dataID];
+    } else {
+      deleteSecondKey(configs, dataID);
+    }
+  };
+
+  return {
+    configs,
+    getConfig,
+    updateConfig,
+    removeView,
+    removeData,
+  };
+});
+
+export default useCinePlaybackStore;
diff --git a/src/store/views.ts b/src/store/views.ts
index e6825d480..92ebc2030 100644
--- a/src/store/views.ts
+++ b/src/store/views.ts
@@ -10,6 +10,7 @@ import {
   parseNamedLayouts,
   type LayoutConfig,
 } from '@/src/utils/layoutParsing';
+import { isCineImage } from '@/src/core/cine/isCineImage';
 import type { Manifest, StateFile } from '../io/state-file/schema';
 
 const DEFAULT_VIEW_INIT: ViewInfoInit = {
@@ -147,13 +148,14 @@ export const useViewStore = defineStore('view', () => {
   }
 
   function ensureActiveViewIsVisible() {
-    if (!visibleViews.value.length) {
+    const views = visibleViews.value;
+    if (!views.length) {
       setActiveView(null);
       return;
     }
 
-    if (!visibleViews.value.find((view) => view.id === activeView.value)) {
-      setActiveView(visibleViews.value[0].id);
+    if (!views.find((view) => view.id === activeView.value)) {
+      setActiveView(views[0].id);
     }
   }
 
@@ -260,9 +262,20 @@ export const useViewStore = defineStore('view', () => {
   }
 
   function setDataForView(viewID: string, dataID: Maybe<string>) {
-    if (!(viewID in viewByID)) return;
-    viewByID[viewID].dataID = dataID;
+    const view = viewByID[viewID];
+    if (!view) return;
+
+    if (dataID && isCineImage(dataID) && view.type !== '2D') {
+      replaceView(viewID, { ...DEFAULT_VIEW_INIT, dataID });
+      // Global tools resolve their image through activeView.
+      ensureActiveViewIsVisible();
+      return;
+    }
+
+    view.dataID = dataID;
     ViewDataChangeEvent.trigger(viewID, dataID);
+    // Global tools resolve their image through activeView.
+    ensureActiveViewIsVisible();
   }
 
   function setDataForActiveView(dataID: Maybe<string>) {
@@ -342,8 +355,7 @@ export const useViewStore = defineStore('view', () => {
 
     Object.entries(manifest.viewByID).forEach(([id, view]) => {
       if (view.dataID === stateID && viewByID[id]) {
-        viewByID[id].dataID = storeID;
-        ViewDataChangeEvent.trigger(id, storeID);
+        setDataForView(id, storeID);
       }
     });
   }
@@ -351,7 +363,11 @@ export const useViewStore = defineStore('view', () => {
   // initialization
 
   firstLayout.views.forEach((viewInit) => {
-    layoutSlots.value.push(addView(viewInit));
+    const viewId = addView(viewInit);
+    layoutSlots.value.push(viewId);
+    if (!activeView.value) {
+      setActiveView(viewId);
+    }
   });
 
   watch(disabledViewTypes, () => {
diff --git a/tests/specs/ultrasound-spacing.e2e.ts b/tests/specs/ultrasound-spacing.e2e.ts
index 8253ebc4e..2b9fe46e4 100644
--- a/tests/specs/ultrasound-spacing.e2e.ts
+++ b/tests/specs/ultrasound-spacing.e2e.ts
@@ -2,19 +2,12 @@ import { US_MULTIFRAME_DICOM } from './configTestUtils';
 import { openUrls } from './utils';
 import { volViewPage } from '../pageobjects/volview.page';
 
-// Vertical ruler in canvas pixels. The reported length in mm depends on
-// canvas size, image-fit zoom, and the applied spacing. With the fix the
-// VTK spacing comes from SequenceOfUltrasoundRegions (~0.5105 mm/image-px);
-// without the fix it falls back to 1 mm/image-px and the ruler reports
-// roughly 1.96× the with-fix value.
+// The exact ruler length depends on platform-specific viewport geometry, but
+// the unspaced fallback is roughly twice as large because the DICOM fixture's
+// PhysicalDeltaX/Y is 0.5104970559 mm/pixel.
 const CLICK_DY = 100;
-
-// At the shared viewport (1200×800), with the fix active the ruler reports
-// about 49 mm. Without the fix the same ruler reports about 97 mm. A wide
-// tolerance lets the assertion absorb minor canvas-size jitter between
-// runners while still excluding the 1 mm fallback.
-const EXPECTED_LENGTH_MM = 49;
-const LENGTH_TOLERANCE_MM = 8;
+const MIN_SPACED_LENGTH_MM = 30;
+const MAX_SPACED_LENGTH_MM = 80;
 
 describe('Ultrasound image spacing', () => {
   it('ruler length reflects physical spacing from SequenceOfUltrasoundRegions', async () => {
@@ -27,15 +20,12 @@ describe('Ultrasound image spacing', () => {
 
     // element.click({ x, y }) offsets are measured from the element's center,
     // so x:0 / y:0 is the canvas center.
-    const views = await volViewPage.views;
-    const canvas = views[0];
+    const canvas = await $('div[data-testid="vtk-view vtk-two-view"] canvas');
 
     await canvas.click({ x: 0, y: -CLICK_DY / 2 });
     await canvas.click({ x: 0, y: CLICK_DY / 2 });
 
-    const annotationsTab = await $(
-      'button[data-testid="module-tab-Annotations"]'
-    );
+    const annotationsTab = await volViewPage.annotationsModuleTab;
     await annotationsTab.click();
 
     const measurementsTab = await $('button.v-tab*=Measurements');
@@ -64,7 +54,7 @@ describe('Ultrasound image spacing', () => {
 
     console.log(`[ultrasound-spacing] measured ruler length: ${lengthMm} mm`);
 
-    expect(lengthMm).toBeGreaterThan(EXPECTED_LENGTH_MM - LENGTH_TOLERANCE_MM);
-    expect(lengthMm).toBeLessThan(EXPECTED_LENGTH_MM + LENGTH_TOLERANCE_MM);
+    expect(lengthMm).toBeGreaterThan(MIN_SPACED_LENGTH_MM);
+    expect(lengthMm).toBeLessThan(MAX_SPACED_LENGTH_MM);
   });
 });

From 4877a5020cea29990329f1b62378441981655af3 Mon Sep 17 00:00:00 2001
From: Paul Elliott <paul@vizworkshop.com>
Date: Sun, 17 May 2026 17:23:09 -0400
Subject: [PATCH 03/12] fix(cine): stabilize controls tools and import edges

---
 src/components/PlayControls.vue               | 119 ++++----
 src/components/SliceViewer.vue                |  23 +-
 src/components/SliceViewerOverlay.vue         |  24 +-
 .../tools/polygon/PolygonWidget2D.vue         |   3 +-
 .../tools/rectangle/RectangleWidget2D.vue     |   3 +-
 src/components/tools/ruler/RulerWidget2D.vue  |   3 +-
 src/core/cine/DicomCineImage.ts               |  59 ++--
 .../cine/__tests__/DicomCineImage.spec.ts     |  10 +
 src/core/cine/getRenderSlice.ts               |   9 +-
 src/core/cine/parseCineDicom.ts               |   2 -
 .../__tests__/datasets-dicom-cine.spec.ts     |  28 ++
 src/store/datasets-dicom.ts                   |  11 +-
 tests/specs/cine-rendering.e2e.ts             | 262 +++++++++++++++++-
 tests/specs/configTestUtils.ts                |   7 +
 14 files changed, 437 insertions(+), 126 deletions(-)

diff --git a/src/components/PlayControls.vue b/src/components/PlayControls.vue
index ca408dbc6..dcb8ef00b 100644
--- a/src/components/PlayControls.vue
+++ b/src/components/PlayControls.vue
@@ -23,8 +23,6 @@ const cine = computed(() => getCineImage(imageId.value));
 const { slice, range } = useSliceConfig(viewId, imageId);
 const playbackStore = useCinePlaybackStore();
 
-const fpsInput = ref('');
-
 const playbackConfig = computed(() =>
   playbackStore.getConfig(
     viewId.value,
@@ -33,43 +31,30 @@ const playbackConfig = computed(() =>
   )
 );
 
-function updatePlayback(
+function patchConfig(
+  clipId: Maybe<string>,
   patch: Parameters<typeof playbackStore.updateConfig>[2]
 ) {
-  if (!viewId.value || !imageId.value) return;
+  if (!clipId) return;
   playbackStore.updateConfig(
     viewId.value,
-    imageId.value,
+    clipId,
     patch,
-    cine.value?.header.frameTimeMs
+    getCineImage(clipId)?.header.frameTimeMs
   );
 }
 
 const playing = computed({
   get: () => playbackConfig.value.playing,
-  set: (value: boolean) => {
-    updatePlayback({ playing: value });
-  },
+  set: (value: boolean) => patchConfig(imageId.value, { playing: value }),
 });
 
 const fps = computed({
   get: () => playbackConfig.value.fps,
-  set: (value: number) => {
-    updatePlayback({ fps: value });
-  },
+  set: (value: number) => patchConfig(imageId.value, { fps: value }),
 });
 
-watch(
-  fps,
-  (value) => {
-    fpsInput.value = String(value);
-  },
-  { immediate: true }
-);
-
-const period = computed(() =>
-  fps.value > 0 ? Math.max(1, Math.round(1000 / fps.value)) : 1000
-);
+const period = computed(() => Math.round(1000 / fps.value));
 
 const { pause, resume } = useIntervalFn(
   () => {
@@ -91,38 +76,25 @@ watch(
   { immediate: true }
 );
 
-// Pause when the cine clip changes (or is removed).
+// Pause both sides on clip switch so an incoming clip with stored playing=true
+// doesn't auto-resume.
 watch(imageId, (nextImageId, previousImageId) => {
-  if (previousImageId && previousImageId !== nextImageId && viewId.value) {
-    playbackStore.updateConfig(
-      viewId.value,
-      previousImageId,
-      {
-        playing: false,
-      },
-      getCineImage(previousImageId)?.header.frameTimeMs
-    );
-  }
-
-  if (nextImageId && previousImageId !== nextImageId && viewId.value) {
-    updatePlayback({ playing: false });
-  }
+  if (nextImageId === previousImageId) return;
+  patchConfig(previousImageId, { playing: false });
+  patchConfig(nextImageId, { playing: false });
 });
 
-function togglePlay() {
-  playing.value = !playing.value;
-}
-
-function clampFpsValue(value: string | number) {
-  return clampCineFps(value);
-}
+const fpsInput = ref(String(fps.value));
+watch(fps, (value) => {
+  fpsInput.value = String(value);
+});
 
 function clampFpsInput(event: Event) {
   const input = event.target as HTMLInputElement;
   fpsInput.value = input.value;
   if (fpsInput.value.trim() === '') return;
 
-  const clamped = clampFpsValue(fpsInput.value);
+  const clamped = clampCineFps(fpsInput.value);
   if (clamped == null) return;
   fps.value = clamped;
   fpsInput.value = String(clamped);
@@ -130,10 +102,13 @@ function clampFpsInput(event: Event) {
 }
 
 function commitFpsInput() {
-  const clamped = clampFpsValue(fpsInput.value);
-  const value = clamped ?? fps.value;
-  fps.value = value;
-  fpsInput.value = String(value);
+  const clamped = clampCineFps(fpsInput.value) ?? fps.value;
+  fps.value = clamped;
+  fpsInput.value = String(clamped);
+}
+
+function togglePlay() {
+  playing.value = !playing.value;
 }
 </script>
 
@@ -149,17 +124,19 @@ function commitFpsInput() {
     >
       <v-icon size="14">{{ playing ? 'mdi-pause' : 'mdi-play' }}</v-icon>
     </button>
-    <input
-      :value="fpsInput"
-      type="number"
-      :min="MIN_CINE_FPS"
-      :max="MAX_CINE_FPS"
-      class="fps-input"
-      title="Frames per second"
-      @input="clampFpsInput"
-      @blur="commitFpsInput"
-    />
-    <span class="fps-suffix">fps</span>
+    <span class="fps-control">
+      <input
+        :value="fpsInput"
+        type="number"
+        :min="MIN_CINE_FPS"
+        :max="MAX_CINE_FPS"
+        class="fps-input"
+        title="Frames per second"
+        @input="clampFpsInput"
+        @blur="commitFpsInput"
+      />
+      <span class="fps-suffix">FPS</span>
+    </span>
   </div>
 </template>
 
@@ -169,8 +146,8 @@ function commitFpsInput() {
   align-items: center;
   gap: 4px;
   color: #fff;
-  font-size: 0.8125rem;
-  line-height: 1;
+  font-size: inherit;
+  line-height: inherit;
 }
 
 .play-btn {
@@ -184,12 +161,23 @@ function commitFpsInput() {
   border: none;
   color: inherit;
   cursor: pointer;
+  opacity: 1;
+}
+
+.play-btn :deep(.v-icon) {
+  opacity: 1;
 }
 
 .play-btn:hover {
   color: rgba(255, 255, 255, 0.8);
 }
 
+.fps-control {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+
 .fps-input {
   width: 44px;
   background: transparent;
@@ -197,7 +185,8 @@ function commitFpsInput() {
   border: none;
   padding: 0 4px;
   text-align: right;
-  font-size: inherit;
+  font: inherit;
+  opacity: 1;
 }
 
 .fps-input:focus {
@@ -205,6 +194,6 @@ function commitFpsInput() {
 }
 
 .fps-suffix {
-  opacity: 0.7;
+  opacity: 1;
 }
 </style>
diff --git a/src/components/SliceViewer.vue b/src/components/SliceViewer.vue
index 5d704177e..4616e5e37 100644
--- a/src/components/SliceViewer.vue
+++ b/src/components/SliceViewer.vue
@@ -223,8 +223,18 @@ const viewOptions = computed(
   () => viewInfo.value.options as SliceViewerOptions
 );
 
+// base image
+const {
+  currentImageID,
+  currentLayers,
+  currentImageMetadata,
+  currentImageData,
+  isImageLoading,
+} = useCurrentImage();
+
+const isCine = computed(() => isCineImage(currentImageID.value));
 const viewingVectors = computed(() =>
-  get2DViewingVectors(viewOptions.value.orientation)
+  get2DViewingVectors(isCine.value ? 'Axial' : viewOptions.value.orientation)
 );
 const viewDirection = computed(() => viewingVectors.value.viewDirection);
 const viewUp = computed(() => viewingVectors.value.viewUp);
@@ -244,14 +254,6 @@ useViewAnimationListener(vtkView, viewId, '2D');
 // active tool
 const { currentTool } = storeToRefs(useToolStore());
 
-// base image
-const {
-  currentImageID,
-  currentLayers,
-  currentImageMetadata,
-  currentImageData,
-  isImageLoading,
-} = useCurrentImage();
 const { slice: currentSlice, range: sliceRange } = useSliceConfig(
   viewId,
   currentImageID
@@ -261,13 +263,12 @@ const windowingManipulatorProps = computed(() => {
   // W/L is meaningless for 8-bit display-encoded cine; keep the manipulator
   // off so dragging doesn't crush colors.
   if (currentTool.value !== Tools.WindowLevel) return { button: -1 };
-  if (isCineImage(currentImageID.value)) return { button: -1 };
+  if (isCine.value) return { button: -1 };
   return { button: 1 };
 });
 
 // Scalar probe samples the canonical image; for cine that's frame-0-only.
 // Unmount it for cine views and clear any stale probe data on switch.
-const isCine = computed(() => isCineImage(currentImageID.value));
 const probeStore = useProbeStore();
 watch(isCine, (cine) => {
   if (cine) probeStore.clearProbeData();
diff --git a/src/components/SliceViewerOverlay.vue b/src/components/SliceViewerOverlay.vue
index bc29430ae..95860f482 100644
--- a/src/components/SliceViewerOverlay.vue
+++ b/src/components/SliceViewerOverlay.vue
@@ -39,6 +39,15 @@ const {
 const { metadata } = useImage(imageId);
 
 const isCine = computed(() => isCineImage(imageId.value));
+const LOCKED_ORIENTATION_SUFFIXES = [
+  '-coronal',
+  '-sagittal',
+  '-axial',
+  '-multi-oblique',
+];
+const isLockedOrientationView = computed(() =>
+  LOCKED_ORIENTATION_SUFFIXES.some((suffix) => viewId.value.includes(suffix))
+);
 </script>
 
 <template>
@@ -73,11 +82,6 @@ const isCine = computed(() => isCineImage(imageId.value));
         </div>
       </div>
     </template>
-    <template v-slot:bottom-center>
-      <div v-if="isCine" class="annotation-cell" @click.stop>
-        <play-controls :view-id="viewId" :image-id="imageId" />
-      </div>
-    </template>
     <template v-slot:top-right>
       <div class="annotation-cell">
         <dicom-quick-info-button :image-id="imageId"></dicom-quick-info-button>
@@ -85,16 +89,12 @@ const isCine = computed(() => isCineImage(imageId.value));
     </template>
     <template #bottom-right>
       <div
-        v-if="
-          !viewId.includes('-coronal') &&
-          !viewId.includes('-sagittal') &&
-          !viewId.includes('-axial') &&
-          !viewId.includes('-multi-oblique')
-        "
+        v-if="isCine || !isLockedOrientationView"
         class="annotation-cell"
         @click.stop
       >
-        <ViewTypeSwitcher :view-id="viewId" :image-id="imageId" />
+        <play-controls v-if="isCine" :view-id="viewId" :image-id="imageId" />
+        <ViewTypeSwitcher v-else :view-id="viewId" :image-id="imageId" />
       </div>
     </template>
   </view-overlay-grid>
diff --git a/src/components/tools/polygon/PolygonWidget2D.vue b/src/components/tools/polygon/PolygonWidget2D.vue
index 28311eb4d..45d8607c3 100644
--- a/src/components/tools/polygon/PolygonWidget2D.vue
+++ b/src/components/tools/polygon/PolygonWidget2D.vue
@@ -135,11 +135,10 @@ export default defineComponent({
     widget.setManipulator(manipulator);
 
     watchEffect(() => {
-      const semantic = tool.value?.slice ?? slice.value ?? 0;
       updatePlaneManipulatorFor2DView(
         manipulator,
         viewDirection.value,
-        getRenderSlice(imageId.value, semantic),
+        getRenderSlice(imageId.value, slice.value, tool.value?.slice),
         imageMetadata.value
       );
     });
diff --git a/src/components/tools/rectangle/RectangleWidget2D.vue b/src/components/tools/rectangle/RectangleWidget2D.vue
index 320f1c83d..f4289ae40 100644
--- a/src/components/tools/rectangle/RectangleWidget2D.vue
+++ b/src/components/tools/rectangle/RectangleWidget2D.vue
@@ -123,11 +123,10 @@ export default defineComponent({
     widget.setManipulator(manipulator);
 
     watchEffect(() => {
-      const semantic = tool.value?.slice ?? slice.value;
       updatePlaneManipulatorFor2DView(
         manipulator,
         viewDirection.value,
-        getRenderSlice(imageId.value, semantic),
+        getRenderSlice(imageId.value, slice.value, tool.value?.slice),
         imageMetadata.value
       );
     });
diff --git a/src/components/tools/ruler/RulerWidget2D.vue b/src/components/tools/ruler/RulerWidget2D.vue
index ae42ab7c9..bcc38effa 100644
--- a/src/components/tools/ruler/RulerWidget2D.vue
+++ b/src/components/tools/ruler/RulerWidget2D.vue
@@ -122,11 +122,10 @@ export default defineComponent({
     widget.setManipulator(manipulator);
 
     watchEffect(() => {
-      const semantic = ruler.value?.slice ?? slice.value;
       updatePlaneManipulatorFor2DView(
         manipulator,
         viewDirection.value,
-        getRenderSlice(imageId.value, semantic),
+        getRenderSlice(imageId.value, slice.value, ruler.value?.slice),
         imageMetadata.value
       );
     });
diff --git a/src/core/cine/DicomCineImage.ts b/src/core/cine/DicomCineImage.ts
index 8207ad63f..7bee80399 100644
--- a/src/core/cine/DicomCineImage.ts
+++ b/src/core/cine/DicomCineImage.ts
@@ -34,13 +34,12 @@ const PHYSICAL_UNITS_CM = 3;
 
 function pickPixelSpacing(header: CineHeader): [number, number] {
   const region = header.regions.find(
-    (candidate) =>
-      candidate.physicalUnitsX === PHYSICAL_UNITS_CM &&
-      candidate.physicalUnitsY === PHYSICAL_UNITS_CM
+    (r) =>
+      r.physicalUnitsX === PHYSICAL_UNITS_CM &&
+      r.physicalUnitsY === PHYSICAL_UNITS_CM
   );
   if (!region) return [1, 1];
-  const dx = region.physicalDeltaX;
-  const dy = region.physicalDeltaY;
+  const { physicalDeltaX: dx, physicalDeltaY: dy } = region;
   if (!dx || !dy || !Number.isFinite(dx) || !Number.isFinite(dy)) {
     return [1, 1];
   }
@@ -71,6 +70,7 @@ export default class DicomCineImage extends BaseProgressiveImage {
   private readonly events: Emitter<ProgressiveImageEvents>;
   private readonly scalarBuffer: Uint8Array;
 
+  private thumbnailPromise: Promise<string | null> | null = null;
   private disposed = false;
 
   constructor(init: CineParseResult) {
@@ -85,8 +85,7 @@ export default class DicomCineImage extends BaseProgressiveImage {
     this.events = mitt();
 
     // Build the single 2D vtkImageData. 3-component RGB uint8.
-    const cols = header.cols;
-    const rows = header.rows;
+    const { cols, rows } = header;
     if (!cols || !rows) {
       throw new Error('Cine DICOM has invalid Rows/Columns');
     }
@@ -161,8 +160,11 @@ export default class DicomCineImage extends BaseProgressiveImage {
     this.getFrame(0)
       .then((frame) => {
         if (this.disposed) return;
-        this.applyDecodedFrame(frame.rgba);
-        this.markComplete();
+        rgbaToRgb(frame.rgba, this.scalarBuffer);
+        this.vtkImageData.value.getPointData().getScalars().modified();
+        this.vtkImageData.value.modified();
+        this.events.emit('status', 'complete');
+        this.events.emit('loading', false);
       })
       .catch(() => {
         // getFrame already routed the error through reportError.
@@ -191,6 +193,29 @@ export default class DicomCineImage extends BaseProgressiveImage {
     return this.header.numberOfFrames;
   }
 
+  getThumbnail(): Promise<string | null> {
+    if (this.disposed) return Promise.resolve(null);
+    if (this.thumbnailPromise) return this.thumbnailPromise;
+    this.thumbnailPromise = (async () => {
+      try {
+        const frame = await this.getFrame(0);
+        const { cols, rows } = this.header;
+        const canvas = document.createElement('canvas');
+        canvas.width = cols;
+        canvas.height = rows;
+        const ctx = canvas.getContext('2d');
+        if (!ctx) return null;
+        const imageData = ctx.createImageData(cols, rows);
+        imageData.data.set(frame.rgba);
+        ctx.putImageData(imageData, 0, 0);
+        return canvas.toDataURL('image/png');
+      } catch {
+        return null;
+      }
+    })();
+    return this.thumbnailPromise;
+  }
+
   // Decoded-frame access for per-view render buffers. Concurrent requests
   // for the same uncached frame share a single decode via inFlightFrames.
   async getFrame(frameIndex: number): Promise<DecodedFrame> {
@@ -256,22 +281,6 @@ export default class DicomCineImage extends BaseProgressiveImage {
     });
   }
 
-  private applyDecodedFrame(rgba: Uint8ClampedArray): void {
-    rgbaToRgb(rgba, this.scalarBuffer);
-    const scalars = this.vtkImageData.value.getPointData().getScalars();
-    scalars.modified();
-    this.vtkImageData.value.modified();
-  }
-
-  private markComplete(): void {
-    if (this.status.value !== 'complete') {
-      this.events.emit('status', 'complete');
-    }
-    if (this.loading.value) {
-      this.events.emit('loading', false);
-    }
-  }
-
   // Helper used by import routing to decide whether the file is cine-renderable.
   static isSupported(header: CineHeader): boolean {
     if (!isSupportedCineTransferSyntax(header.transferSyntaxUID)) return false;
diff --git a/src/core/cine/__tests__/DicomCineImage.spec.ts b/src/core/cine/__tests__/DicomCineImage.spec.ts
index a396b4f7d..5a1e7220b 100644
--- a/src/core/cine/__tests__/DicomCineImage.spec.ts
+++ b/src/core/cine/__tests__/DicomCineImage.spec.ts
@@ -5,6 +5,7 @@ import type { CineHeader, CineParseResult } from '../parseCineDicom';
 
 const TS_EXPLICIT_VR_LE = '1.2.840.10008.1.2.1';
 const TS_JPEG_BASELINE = '1.2.840.10008.1.2.4.50';
+const TS_JPEG_EXTENDED = '1.2.840.10008.1.2.4.51';
 const TS_UNSUPPORTED = '1.2.840.10008.1.2.5';
 
 function cineHeader(overrides: Partial<CineHeader> = {}): CineHeader {
@@ -120,6 +121,15 @@ describe('DicomCineImage.isSupported', () => {
         })
       )
     ).toBe(false);
+
+    expect(
+      DicomCineImage.isSupported(
+        cineHeader({
+          transferSyntaxUID: TS_JPEG_EXTENDED,
+          photometricInterpretation: 'YBR_FULL_422',
+        })
+      )
+    ).toBe(false);
   });
 });
 
diff --git a/src/core/cine/getRenderSlice.ts b/src/core/cine/getRenderSlice.ts
index 64e9908f2..4dafd4d6f 100644
--- a/src/core/cine/getRenderSlice.ts
+++ b/src/core/cine/getRenderSlice.ts
@@ -9,9 +9,14 @@ import { isCineImage } from './isCineImage';
 // [0, numberOfFrames-1], but the underlying vtkImageData has only one Z slice
 // at index 0. Anything that pokes a VTK slice mapper or 2D widget plane needs
 // the render slice (always 0 for cine).
+//
+// `toolSlice` is an optional per-tool override (e.g. a ruler pinned to a
+// specific slice) — when defined it wins over the view's current slice.
 export function getRenderSlice(
   imageID: Maybe<string>,
-  semanticSlice: number
+  viewSlice: Maybe<number>,
+  toolSlice?: Maybe<number>
 ): number {
-  return isCineImage(imageID) ? 0 : semanticSlice;
+  if (isCineImage(imageID)) return 0;
+  return toolSlice ?? viewSlice ?? 0;
 }
diff --git a/src/core/cine/parseCineDicom.ts b/src/core/cine/parseCineDicom.ts
index 315688972..8380f763f 100644
--- a/src/core/cine/parseCineDicom.ts
+++ b/src/core/cine/parseCineDicom.ts
@@ -285,7 +285,6 @@ export function parseCineDicom(
 const TRANSFER_SYNTAX_IMPLICIT_VR_LE = '1.2.840.10008.1.2';
 const TRANSFER_SYNTAX_EXPLICIT_VR_LE = '1.2.840.10008.1.2.1';
 const TRANSFER_SYNTAX_JPEG_BASELINE_1 = '1.2.840.10008.1.2.4.50';
-const TRANSFER_SYNTAX_JPEG_BASELINE_2_4 = '1.2.840.10008.1.2.4.51';
 
 const NATIVE_TRANSFER_SYNTAXES = new Set([
   TRANSFER_SYNTAX_IMPLICIT_VR_LE,
@@ -295,7 +294,6 @@ const NATIVE_TRANSFER_SYNTAXES = new Set([
 const SUPPORTED_TRANSFER_SYNTAXES = new Set([
   ...NATIVE_TRANSFER_SYNTAXES,
   TRANSFER_SYNTAX_JPEG_BASELINE_1,
-  TRANSFER_SYNTAX_JPEG_BASELINE_2_4,
 ]);
 
 export function isNativeTransferSyntax(uid: string): boolean {
diff --git a/src/store/__tests__/datasets-dicom-cine.spec.ts b/src/store/__tests__/datasets-dicom-cine.spec.ts
index 94d51304e..10ee4af24 100644
--- a/src/store/__tests__/datasets-dicom-cine.spec.ts
+++ b/src/store/__tests__/datasets-dicom-cine.spec.ts
@@ -247,6 +247,34 @@ describe('DICOM store cine routing', () => {
     expect(store.volumeInfo['volume-1'].kind).toBe('volume');
   });
 
+  it('falls back to chunk import when cine parsing throws', async () => {
+    const malformedCineChunk = chunk();
+    const chunksByVolume = { 'volume-1': [malformedCineChunk] };
+    mocks.splitAndSort.mockResolvedValue(chunksByVolume);
+    mocks.parseCineDicom.mockImplementation(() => {
+      throw new Error('unsupported encapsulated frame layout');
+    });
+
+    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    try {
+      const store = useDICOMStore();
+      await expect(store.importChunks([malformedCineChunk])).resolves.toBe(
+        chunksByVolume
+      );
+    } finally {
+      warn.mockRestore();
+    }
+
+    expect(malformedCineChunk.loadData).toHaveBeenCalledOnce();
+    expect(mocks.parseCineDicom).toHaveBeenCalledOnce();
+    expect(mocks.chunkImages).toHaveLength(1);
+    expect(mocks.chunkImages[0].chunks).toEqual([malformedCineChunk]);
+
+    const imageCacheStore = useImageCacheStore();
+    expect(imageCacheStore.imageById['volume-1']).toBe(mocks.chunkImages[0]);
+    expect(useDICOMStore().volumeInfo['volume-1'].kind).toBe('volume');
+  });
+
   it('rejects cached non-chunk images before chunk-volume reuse', async () => {
     const normalChunk = chunk(
       metadata({
diff --git a/src/store/datasets-dicom.ts b/src/store/datasets-dicom.ts
index 4fda10959..c8ec96db2 100644
--- a/src/store/datasets-dicom.ts
+++ b/src/store/datasets-dicom.ts
@@ -246,7 +246,16 @@ export const useDICOMStore = defineStore('dicom', {
       const blob = chunk.dataBlob;
       if (!blob) throw new Error('Cine DICOM chunk has no data');
       const buffer = await blob.arrayBuffer();
-      const parsed = parseCineDicom(buffer);
+      let parsed: ReturnType<typeof parseCineDicom>;
+      try {
+        parsed = parseCineDicom(buffer);
+      } catch (err) {
+        console.warn(
+          'Failed to parse cine DICOM; falling back to volume import',
+          err
+        );
+        return false;
+      }
 
       if (!DicomCineImage.isSupported(parsed.header)) {
         return false;
diff --git a/tests/specs/cine-rendering.e2e.ts b/tests/specs/cine-rendering.e2e.ts
index 9f85321b5..2a25f932a 100644
--- a/tests/specs/cine-rendering.e2e.ts
+++ b/tests/specs/cine-rendering.e2e.ts
@@ -1,12 +1,180 @@
 import { Key } from 'webdriverio';
 import { volViewPage } from '../pageobjects/volview.page';
-import { CINE_US_DATASET } from './configTestUtils';
-import { openUrls } from './utils';
+import {
+  CINE_US_DATASET,
+  COLOR3D_JPEG_BASELINE_DICOM,
+} from './configTestUtils';
+import { downloadFile, openUrls, writeManifestToFile } from './utils';
 
 const PLAY_CONTROLS = '.play-controls';
 const FRAME_LABEL = '.view-annotations .frame-label';
+const VIEW_SELECTOR = 'div[data-testid="vtk-view vtk-two-view"]';
+
+function parseFrameLabel(text: string) {
+  const match = text.trim().match(/^Frame:\s*(\d+)\s*\/\s*(\d+)$/);
+  if (!match) return null;
+  return {
+    current: parseInt(match[1], 10),
+    total: parseInt(match[2], 10),
+  };
+}
+
+async function getCineFrameLabelText(index = 0) {
+  const labels = await $$(FRAME_LABEL);
+  if ((await labels.length) <= index) return null;
+  return (await labels[index].getText()).trim();
+}
+
+async function getCineFrame(index = 0) {
+  const text = await getCineFrameLabelText(index);
+  return text ? parseFrameLabel(text) : null;
+}
+
+async function waitForCineFrameLabel(index = 0) {
+  await browser.waitUntil(
+    async () => {
+      const frame = await getCineFrame(index);
+      return !!frame;
+    },
+    {
+      timeout: 10000,
+      timeoutMsg: `Expected cine frame label ${index} to appear`,
+    }
+  );
+}
+
+async function waitForCineFrameChange(index: number, previousText: string) {
+  await browser.waitUntil(
+    async () => {
+      const text = await getCineFrameLabelText(index);
+      return !!text && text !== previousText;
+    },
+    {
+      timeout: 5000,
+      timeoutMsg: `Expected cine frame counter ${index} to change`,
+    }
+  );
+}
+
+async function openCineDatasetWithConfig(config: unknown, configName: string) {
+  await downloadFile(CINE_US_DATASET.url, CINE_US_DATASET.name);
+  const configFileName = `${configName}-${Date.now()}.json`;
+  await writeManifestToFile(config, configFileName);
+  await volViewPage.open(
+    `?config=[tmp/${configFileName}]&urls=[tmp/${CINE_US_DATASET.name}]`
+  );
+  await volViewPage.waitForViews();
+  const notifications = await volViewPage.getNotificationsCount();
+  expect(notifications).toEqual(0);
+}
+
+async function getActiveCineViewIndex() {
+  return browser.execute((selector: string) => {
+    const activeBorderColor = 'rgb(60, 179, 113)'; // CSS mediumseagreen
+    const views = Array.from(document.querySelectorAll(selector));
+
+    return views.findIndex((view) => {
+      const gridItem = view.closest('.grid-item') as HTMLElement | null;
+      if (!gridItem) return false;
+
+      const style = getComputedStyle(gridItem);
+      return (
+        style.borderColor === activeBorderColor ||
+        gridItem.style.border.includes('mediumseagreen')
+      );
+    });
+  }, VIEW_SELECTOR);
+}
+
+async function sampleActiveCineViewIndexes(
+  durationMs: number,
+  intervalMs = 25
+) {
+  const samples: number[] = [];
+  const deadline = Date.now() + durationMs;
+
+  while (Date.now() < deadline) {
+    samples.push(await getActiveCineViewIndex());
+    await browser.pause(intervalMs);
+  }
+
+  return samples;
+}
+
+async function getFirstCineCanvasStats() {
+  return browser.execute((selector: string) => {
+    const views = Array.from(document.querySelectorAll(selector)).filter(
+      (view) => {
+        const rect = view.getBoundingClientRect();
+        return rect.width > 10 && rect.height > 10;
+      }
+    );
+    const canvas = views[0]?.querySelector(
+      'canvas'
+    ) as HTMLCanvasElement | null;
+    if (!canvas) return null;
+
+    const context = canvas.getContext('2d');
+    if (!context) return null;
+
+    const { width, height } = canvas;
+    if (width < 2 || height < 2) return { width, height, nonBlack: 0 };
+
+    const pixels = context.getImageData(0, 0, width, height).data;
+    let nonBlack = 0;
+    const stride = Math.max(4, Math.floor(pixels.length / 4000 / 4) * 4);
+
+    for (let i = 0; i < pixels.length; i += stride) {
+      if (pixels[i] > 5 || pixels[i + 1] > 5 || pixels[i + 2] > 5) {
+        nonBlack++;
+      }
+    }
+
+    return { width, height, nonBlack };
+  }, VIEW_SELECTOR);
+}
+
+async function waitForFirstCineCanvasToRender(timeout = 5000) {
+  await browser.waitUntil(
+    async () => {
+      const stats = await getFirstCineCanvasStats();
+      return (
+        !!stats && stats.width > 10 && stats.height > 10 && stats.nonBlack > 0
+      );
+    },
+    {
+      timeout,
+      interval: 50,
+      timeoutMsg: 'Expected cine canvas to stay non-black',
+    }
+  );
+}
 
 describe('VolView cine playback', () => {
+  it('shows a frame 0 thumbnail in the patient browser', async () => {
+    await openUrls([CINE_US_DATASET]);
+
+    const playControls = $(PLAY_CONTROLS);
+    await playControls.waitForDisplayed({ timeout: 10000 });
+
+    const card = $('.volume-card');
+    await card.waitForExist({ timeout: 10000 });
+
+    const thumbnail = card.$('img.v-img__img');
+    await browser.waitUntil(
+      async () => {
+        if (!(await thumbnail.isExisting())) return false;
+        const src = await thumbnail.getAttribute('src');
+        return !!src && src.startsWith('data:image/');
+      },
+      {
+        timeout: 10000,
+        timeoutMsg:
+          'Expected cine volume card to render a data-URL thumbnail instead of the modality fallback',
+      }
+    );
+  });
+
   it('loads a multi-frame ultrasound and scrubs frames', async () => {
     await openUrls([CINE_US_DATASET]);
 
@@ -35,4 +203,94 @@ describe('VolView cine playback', () => {
     expect(after).toMatch(/^Frame: [1-8] \/ 8$/);
     expect(after).not.toBe(initialText);
   });
+
+  it('advances the frame counter while playing and stops after pause', async () => {
+    await openUrls([CINE_US_DATASET]);
+
+    const playButton = $(`${PLAY_CONTROLS} .play-btn`);
+    await playButton.waitForDisplayed({ timeout: 10000 });
+    await waitForCineFrameLabel();
+
+    const initialText = (await getCineFrameLabelText())!;
+    await playButton.click();
+    await waitForCineFrameChange(0, initialText);
+
+    const changedText = (await getCineFrameLabelText())!;
+    expect(changedText).not.toBe(initialText);
+    expect(parseFrameLabel(changedText)?.total).toBe(8);
+
+    await playButton.click();
+    await browser.waitUntil(
+      async () => (await playButton.getAttribute('aria-pressed')) === 'false',
+      {
+        timeout: 1000,
+        timeoutMsg: 'Expected play button to enter paused state',
+      }
+    );
+
+    const pausedText = (await getCineFrameLabelText())!;
+    await browser.pause(500);
+    expect(await getCineFrameLabelText()).toBe(pausedText);
+  });
+
+  it('keeps the active-view ring stable while two cine views play', async () => {
+    await openCineDatasetWithConfig(
+      {
+        layouts: {
+          'Two cine views': [['axial'], ['axial']],
+        },
+      },
+      'two-cine-active-view'
+    );
+    await volViewPage.waitForViewCounts(2, false);
+
+    const playButtons = await $$(`${PLAY_CONTROLS} .play-btn`);
+    expect(await playButtons.length).toBe(2);
+    await waitForCineFrameLabel(0);
+    await waitForCineFrameLabel(1);
+    const initialFirstFrame = (await getCineFrameLabelText(0))!;
+    const initialSecondFrame = (await getCineFrameLabelText(1))!;
+
+    await playButtons[0].click();
+    await playButtons[1].click();
+    await waitForCineFrameChange(0, initialFirstFrame);
+    await waitForCineFrameChange(1, initialSecondFrame);
+
+    const views = await $$(VIEW_SELECTOR);
+    const secondCanvas = await views[1].$('canvas');
+    await secondCanvas.click();
+
+    await browser.waitUntil(
+      async () => (await getActiveCineViewIndex()) === 1,
+      {
+        timeout: 2000,
+        timeoutMsg: 'Expected second cine view to be active',
+      }
+    );
+
+    const samples = await sampleActiveCineViewIndexes(1200);
+    const unexpectedSamples = samples.filter((index) => index !== 1);
+    expect(unexpectedSamples).toEqual([]);
+  });
+
+  it('keeps rendering after repeated maximize toggles during playback', async () => {
+    await openUrls([COLOR3D_JPEG_BASELINE_DICOM]);
+
+    const playButton = $(`${PLAY_CONTROLS} .play-btn`);
+    await playButton.waitForDisplayed({ timeout: 10000 });
+    await playButton.click();
+
+    await $(VIEW_SELECTOR).waitForDisplayed({
+      timeout: 10000,
+    });
+    await waitForFirstCineCanvasToRender();
+
+    for (let i = 0; i < 12; i++) {
+      const firstView = $(VIEW_SELECTOR);
+      await firstView.waitForDisplayed({ timeout: 5000 });
+      await firstView.doubleClick();
+      await browser.pause(50);
+      await waitForFirstCineCanvasToRender(1500);
+    }
+  });
 });
diff --git a/tests/specs/configTestUtils.ts b/tests/specs/configTestUtils.ts
index 07002d2d0..296d7769c 100644
--- a/tests/specs/configTestUtils.ts
+++ b/tests/specs/configTestUtils.ts
@@ -88,6 +88,13 @@ export const CINE_US_DATASET = {
   name: 'US-MONO2-8-8x-echo.dcm',
 } as const;
 
+// 120-frame RGB ultrasound cine encoded as JPEG Baseline. Exercises the async
+// browser JPEG decode path used by common compressed ultrasound clips.
+export const COLOR3D_JPEG_BASELINE_DICOM = {
+  url: 'https://raw.githubusercontent.com/pydicom/pydicom-data/master/data_store/data/color3d_jpeg_baseline.dcm',
+  name: 'color3d_jpeg_baseline.dcm',
+} as const;
+
 export type DatasetResource = {
   url: string;
   name?: string;

From 744c60b2b3ee1e45cdf3892af25f2ac207acccc1 Mon Sep 17 00:00:00 2001
From: Paul Elliott <paul@vizworkshop.com>
Date: Sun, 17 May 2026 17:23:20 -0400
Subject: [PATCH 04/12] fix(cine): stabilize view axis and remount behavior

---
 src/components/SliceViewer.vue                | 19 ++---
 .../vtk/VtkBaseSliceRepresentation.vue        | 66 ++++-----------
 src/components/vtk/VtkSliceView.vue           |  9 +-
 src/composables/useSliceInfo.ts               |  7 +-
 src/core/cine/DicomCineImage.ts               | 77 +++++------------
 src/core/cine/frameCache.ts                   | 20 +++++
 src/core/cine/getEffectiveViewAxis.ts         | 14 ++++
 src/core/cine/getRenderSlice.ts               | 14 +---
 .../vtk/useMouseRangeManipulatorListener.ts   |  5 +-
 src/core/vtk/useVtkView.ts                    | 18 ++++
 src/store/datasets-dicom.ts                   | 24 +-----
 src/store/image-stats.ts                      |  3 +-
 src/store/tools/crosshairs.ts                 |  7 +-
 src/store/tools/paint.ts                      |  6 +-
 src/store/tools/useAnnotationTool.ts          | 12 ++-
 src/store/view-configs/cine-playback.ts       |  9 +-
 src/store/view-configs/slicing.ts             | 17 +++-
 src/store/views.ts                            | 10 +--
 tests/specs/segment-group-download.e2e.ts     |  7 +-
 tests/specs/state-manifest.e2e.ts             |  4 +-
 tests/specs/vtk-interactor-lifecycle.e2e.ts   | 83 +++++++++++++++++++
 21 files changed, 241 insertions(+), 190 deletions(-)
 create mode 100644 src/core/cine/getEffectiveViewAxis.ts
 create mode 100644 tests/specs/vtk-interactor-lifecycle.e2e.ts

diff --git a/src/components/SliceViewer.vue b/src/components/SliceViewer.vue
index 4616e5e37..a798ad156 100644
--- a/src/components/SliceViewer.vue
+++ b/src/components/SliceViewer.vue
@@ -163,7 +163,7 @@ import { ref, toRefs, computed, watch } from 'vue';
 import { storeToRefs } from 'pinia';
 import { useCurrentImage } from '@/src/composables/useCurrentImage';
 import { useProbeStore } from '@/src/store/probe';
-import { getLPSAxisFromDir } from '@/src/utils/lps';
+import { getEffectiveViewAxis } from '@/src/core/cine/getEffectiveViewAxis';
 import VtkSliceView from '@/src/components/vtk/VtkSliceView.vue';
 import { VtkViewApi } from '@/src/types/vtk-types';
 import { Tools } from '@/src/store/tools/types';
@@ -198,17 +198,13 @@ import vtkMouseCameraTrackballZoomToMouseManipulator from '@kitware/vtk.js/Inter
 import { useResetViewsEvents } from '@/src/components/tools/ResetViews.vue';
 import { onVTKEvent } from '@/src/composables/onVTKEvent';
 import { useViewStore } from '@/src/store/views';
-import { LPSAxis } from '@/src/types/lps';
+import { ViewInfo2D } from '@/src/types/views';
 import { get2DViewingVectors } from '@/src/utils/getViewingVectors';
 
 interface Props {
   viewId: string;
 }
 
-interface SliceViewerOptions {
-  orientation: LPSAxis;
-}
-
 const vtkView = ref<VtkViewApi>();
 const baseSliceRep = ref();
 const layerSliceReps = ref([]);
@@ -218,10 +214,7 @@ const props = defineProps<Props>();
 const { viewId } = toRefs(props);
 
 const viewStore = useViewStore();
-const viewInfo = computed(() => viewStore.getView(viewId.value)!);
-const viewOptions = computed(
-  () => viewInfo.value.options as SliceViewerOptions
-);
+const viewInfo = computed(() => viewStore.getView(viewId.value) as ViewInfo2D);
 
 // base image
 const {
@@ -233,12 +226,12 @@ const {
 } = useCurrentImage();
 
 const isCine = computed(() => isCineImage(currentImageID.value));
-const viewingVectors = computed(() =>
-  get2DViewingVectors(isCine.value ? 'Axial' : viewOptions.value.orientation)
+const viewAxis = computed(() =>
+  getEffectiveViewAxis(viewInfo.value, currentImageID.value)
 );
+const viewingVectors = computed(() => get2DViewingVectors(viewAxis.value));
 const viewDirection = computed(() => viewingVectors.value.viewDirection);
 const viewUp = computed(() => viewingVectors.value.viewUp);
-const viewAxis = computed(() => getLPSAxisFromDir(viewDirection.value));
 
 const hover = ref(false);
 
diff --git a/src/components/vtk/VtkBaseSliceRepresentation.vue b/src/components/vtk/VtkBaseSliceRepresentation.vue
index a62ed6d6a..d60411de7 100644
--- a/src/components/vtk/VtkBaseSliceRepresentation.vue
+++ b/src/components/vtk/VtkBaseSliceRepresentation.vue
@@ -22,7 +22,7 @@ import { Maybe } from '@/src/types';
 import { VtkViewContext } from '@/src/components/vtk/context';
 import { getCineImage, isCineImage } from '@/src/core/cine/isCineImage';
 import type DicomCineImage from '@/src/core/cine/DicomCineImage';
-import type { DecodedFrame } from '@/src/core/cine/frameCache';
+import { copyDecodedFrameToRgb } from '@/src/core/cine/frameCache';
 
 interface Props {
   viewId: string;
@@ -42,17 +42,14 @@ function createCineRenderImage(cineImage: DicomCineImage): CineRenderImage {
     throw new Error('Cine image has no canonical vtkImageData');
   }
   const extent = source.getExtent();
-  const spacing = source.getSpacing();
-  const origin = source.getOrigin();
-  const direction = source.getDirection();
   const cols = extent[1] - extent[0] + 1;
   const rows = extent[3] - extent[2] + 1;
 
   const imageData = vtkImageData.newInstance();
   imageData.setExtent(extent);
-  imageData.setSpacing(spacing);
-  imageData.setOrigin(origin);
-  imageData.setDirection(direction);
+  imageData.setSpacing(source.getSpacing());
+  imageData.setOrigin(source.getOrigin());
+  imageData.setDirection(source.getDirection());
 
   const rgbBuffer = new Uint8Array(cols * rows * 3);
   const dataArray = vtkDataArray.newInstance({
@@ -67,24 +64,6 @@ function createCineRenderImage(cineImage: DicomCineImage): CineRenderImage {
   return { imageData, dataArray, rgbBuffer };
 }
 
-function copyDecodedFrameToRgb(
-  frame: DecodedFrame,
-  target: CineRenderImage
-): boolean {
-  const { rgba } = frame;
-  const out = target.rgbBuffer;
-  const expectedPixels = out.length / 3;
-  if (rgba.length !== expectedPixels * 4) return false;
-  for (let i = 0; i < expectedPixels; i++) {
-    const src = i * 4;
-    const dst = i * 3;
-    out[dst] = rgba[src];
-    out[dst + 1] = rgba[src + 1];
-    out[dst + 2] = rgba[src + 2];
-  }
-  return true;
-}
-
 const props = defineProps<Props>();
 const { viewId: viewID, imageId: imageID, axis } = toRefs(props);
 
@@ -99,11 +78,10 @@ const wlConfig = useWindowingConfig(viewID, imageID);
 
 const cine = computed(() => getCineImage(imageID.value));
 
-// Per-view render buffer for cine. Built from the canonical cine image's
-// geometry; the mapper renders from this local image so two views can show
-// different frames without overwriting each other's pixels.
+// Per-view render buffer for cine so two views can show different frames
+// without fighting over a single shared scalar buffer. Published to
+// `cineRender` only after the first decoded pixels land.
 const cineRender = shallowRef<CineRenderImage | null>(null);
-// Pending per-view buffer. Published to cineRender only after decoded pixels land.
 let localCineRender: CineRenderImage | null = null;
 
 watchEffect((onCleanup) => {
@@ -119,9 +97,7 @@ watchEffect((onCleanup) => {
     if (cineRender.value === local) {
       cineRender.value = null;
     }
-    // Defer the VTK free to nextTick so the mapper flushes its new input
-    // (driven by the cineRender.value change above) before we destroy the
-    // old vtkImageData. Otherwise the mapper briefly holds a deleted ref.
+    // Let the mapper flush before we delete the vtkImageData it still holds.
     nextTick(() => {
       local.imageData.delete();
     });
@@ -148,18 +124,13 @@ watchEffect(() => {
   sliceRep.mapper.setSlicingMode(mode);
 });
 
-// sync slicing
-// For cine, the semantic slice (frame index) is decoupled from the VTK
-// render slice — the per-view cine image is a single 2D plane, so the mapper
-// always renders slice 0. The frame index drives the local-buffer watcher
-// below.
+// Cine: the per-view image is a single 2D plane (mapper slice is always 0).
+// The frame index drives the local-buffer watcher below instead.
 const slice = vtkFieldRef(sliceRep.mapper, 'slice');
 const renderSlice = computed(() => (cine.value ? 0 : sliceConfig.slice.value));
 syncRefs(renderSlice, slice, { immediate: true });
 
-// Decode the requested frame and copy it into the per-view buffer. A local
-// token guards against stale async work after rapid scrubs or cine-image
-// changes.
+// A token guards against stale decodes when scrubbing rapidly.
 let frameToken = 0;
 watch(
   [() => sliceConfig.slice.value, cine],
@@ -172,10 +143,12 @@ watch(
       .then((decoded) => {
         if (myToken !== frameToken) return;
         if (localCineRender !== target) return;
-        if (!copyDecodedFrameToRgb(decoded, target)) return;
+        if (!copyDecodedFrameToRgb(decoded, target.rgbBuffer)) return;
         target.dataArray.modified();
         target.imageData.modified();
-        cineRender.value = target;
+        if (cineRender.value !== target) {
+          cineRender.value = target;
+        }
         view.requestRender();
       })
       .catch(() => {
@@ -185,12 +158,9 @@ watch(
   { immediate: true }
 );
 
-// sync windowing
-// For cine, the pixels are 8-bit display-encoded — the volume W/L pipeline is
-// meaningless. Pin the property to a full-byte pass-through and skip the
-// bidirectional wlConfig sync, which otherwise overwrites these values with
-// the uninitialized defaults (width=1, level=2^32-1) on first paint and again
-// any time wlConfig changes for an adjacent volume in the same session.
+// Cine pixels are 8-bit display-encoded — pin W/L to a full-byte pass-through
+// and skip the bidirectional wlConfig sync, which would otherwise overwrite
+// these with uninitialized defaults on first paint.
 const colorLevel = vtkFieldRef(sliceRep.property, 'colorLevel');
 const colorWindow = vtkFieldRef(sliceRep.property, 'colorWindow');
 
diff --git a/src/components/vtk/VtkSliceView.vue b/src/components/vtk/VtkSliceView.vue
index 0cb922157..436590ca9 100644
--- a/src/components/vtk/VtkSliceView.vue
+++ b/src/components/vtk/VtkSliceView.vue
@@ -101,6 +101,12 @@ watchImmediate(
   }
 );
 
+// Must run before the clipping-range watcher below: resetCameraClippingRange
+// computes near/far from the camera's current position, so on remount the
+// saved position must be syncRef'd back first or the slice falls outside
+// the clip volume and the canvas goes black.
+usePersistCameraConfig(viewID, imageID, view.renderer.getActiveCamera());
+
 watchImmediate([imageMetadata, disableCameraAutoReset], () => {
   if (!imageMetadata.value) return;
   if (
@@ -111,9 +117,6 @@ watchImmediate([imageMetadata, disableCameraAutoReset], () => {
   }
 });
 
-// persistent camera config
-usePersistCameraConfig(viewID, imageID, view.renderer.getActiveCamera());
-
 // exposed API
 const api: VtkViewApi = markRaw({
   ...view,
diff --git a/src/composables/useSliceInfo.ts b/src/composables/useSliceInfo.ts
index 49da56f00..4657763c1 100644
--- a/src/composables/useSliceInfo.ts
+++ b/src/composables/useSliceInfo.ts
@@ -1,12 +1,12 @@
 import type { Vector3 } from '@kitware/vtk.js/types';
 import type { MaybeRef } from 'vue';
 import { computed, unref } from 'vue';
-import { getLPSAxisFromDir } from '@/src/utils/lps';
 import { useImage } from '@/src/composables/useCurrentImage';
 import { Maybe } from '@/src/types';
 import { useSliceConfig } from '@/src/composables/useSliceConfig';
 import { useViewStore } from '@/src/store/views';
 import { get2DViewingVectors } from '@/src/utils/getViewingVectors';
+import { getEffectiveViewAxis } from '@/src/core/cine/getEffectiveViewAxis';
 
 /**
  * Returns information about the current slice.
@@ -29,10 +29,9 @@ export function useSliceInfo(
   return computed(() => {
     if (!view.value || view.value.type !== '2D') return null;
 
-    const { orientation } = view.value.options;
-    const { viewDirection } = get2DViewingVectors(orientation);
+    const axis = getEffectiveViewAxis(view.value, unref(imageID));
+    const { viewDirection } = get2DViewingVectors(axis);
     const { lpsOrientation } = imageMetadata.value;
-    const axis = getLPSAxisFromDir(viewDirection);
     const planeOrigin = [0, 0, 0] as Vector3;
     planeOrigin[lpsOrientation[axis]] = slice.value;
     return {
diff --git a/src/core/cine/DicomCineImage.ts b/src/core/cine/DicomCineImage.ts
index 7bee80399..0f66335cd 100644
--- a/src/core/cine/DicomCineImage.ts
+++ b/src/core/cine/DicomCineImage.ts
@@ -1,10 +1,6 @@
-// DicomCineImage — backing image for multi-frame ultrasound DICOM clips.
-//
-// Treats the clip as a normal VolView image selection: extends BaseProgressiveImage,
-// owns a single 2D vtkImageData (extent [0, cols-1, 0, rows-1, 0, 0], 3-component
-// RGB uint8 scalars), and swaps the scalars in-place whenever the selected frame
-// changes. The original compressed frame bytes live in this object too, so we never
-// hold all decoded frames at once — only the LRU's worth.
+// Backing image for multi-frame ultrasound DICOM clips. Owns a single 2D
+// vtkImageData with 3-component RGB scalars; the per-frame compressed bytes
+// stay in this object and decoded frames live in an LRU cache.
 
 import vtkImageData from '@kitware/vtk.js/Common/DataModel/ImageData';
 import vtkDataArray from '@kitware/vtk.js/Common/Core/DataArray';
@@ -24,40 +20,22 @@ import {
 import {
   DecodedFrame,
   FrameCache,
+  copyDecodedFrameToRgb,
   decodeJpegFrame,
   decodeNativeFrame,
 } from './frameCache';
-
-// DICOM PhysicalUnits code 3 = centimetres. Other codes (dB, %, m/s, ...) are
-// used for Doppler regions and aren't a length we can express as VTK spacing.
-const PHYSICAL_UNITS_CM = 3;
+import { unitToMm } from '@/src/core/streaming/dicom/ultrasoundRegion';
 
 function pickPixelSpacing(header: CineHeader): [number, number] {
-  const region = header.regions.find(
-    (r) =>
-      r.physicalUnitsX === PHYSICAL_UNITS_CM &&
-      r.physicalUnitsY === PHYSICAL_UNITS_CM
-  );
-  if (!region) return [1, 1];
-  const { physicalDeltaX: dx, physicalDeltaY: dy } = region;
-  if (!dx || !dy || !Number.isFinite(dx) || !Number.isFinite(dy)) {
-    return [1, 1];
-  }
-  // Convert centimetres-per-pixel to millimetres-per-pixel.
-  return [Math.abs(dx) * 10, Math.abs(dy) * 10];
-}
-
-// Convert RGBA (from createImageBitmap or our native decoder) to a 3-component
-// RGB Uint8Array suitable for VTK scalar swap.
-function rgbaToRgb(rgba: Uint8ClampedArray, out: Uint8Array): void {
-  const pixels = rgba.length >> 2;
-  for (let i = 0; i < pixels; i++) {
-    const src = i * 4;
-    const dst = i * 3;
-    out[dst] = rgba[src];
-    out[dst + 1] = rgba[src + 1];
-    out[dst + 2] = rgba[src + 2];
+  for (const r of header.regions) {
+    const sx = r.physicalUnitsX != null ? unitToMm(r.physicalUnitsX) : null;
+    const sy = r.physicalUnitsY != null ? unitToMm(r.physicalUnitsY) : null;
+    if (sx == null || sy == null) continue;
+    const { physicalDeltaX: dx, physicalDeltaY: dy } = r;
+    if (!dx || !dy || !Number.isFinite(dx) || !Number.isFinite(dy)) continue;
+    return [Math.abs(dx) * sx, Math.abs(dy) * sy];
   }
+  return [1, 1];
 }
 
 export default class DicomCineImage extends BaseProgressiveImage {
@@ -92,11 +70,8 @@ export default class DicomCineImage extends BaseProgressiveImage {
     this.scalarBuffer = new Uint8Array(cols * rows * 3);
     const imageData = vtkImageData.newInstance();
     imageData.setExtent([0, cols - 1, 0, rows - 1, 0, 0]);
-    // Region calibration — DICOM C.8.5.5.1: PhysicalUnits=3 means cm. We only
-    // apply spacing when both axes report cm, so length measurements come out
-    // in millimetres. Anything else (missing region, percent, dB, m/s, mixed
-    // units) leaves spacing at 1 — the ruler then reports pixels, which is
-    // the documented v1 behavior.
+    // Spacing falls back to 1 when no region declares a spatial unit, so
+    // rulers report pixels (documented v1 behavior).
     const [spacingX, spacingY] = pickPixelSpacing(header);
     imageData.setSpacing([spacingX, spacingY, 1]);
     imageData.setOrigin([0, 0, 0]);
@@ -113,9 +88,7 @@ export default class DicomCineImage extends BaseProgressiveImage {
 
     this.vtkImageData.value = imageData;
 
-    // The cine clip has all metadata up-front, so it is "complete" once the
-    // first frame is decoded. Volume views still see status='incomplete' until
-    // we kick off the initial decode in startLoad().
+    // Status flips to 'complete' once the first frame is decoded in startLoad().
     this.status.value = 'incomplete';
     this.loaded = computed(
       () => !this.loading.value && this.status.value === 'complete'
@@ -144,9 +117,8 @@ export default class DicomCineImage extends BaseProgressiveImage {
   }
 
   startLoad(): void {
-    // No streaming step — the compressed bytes are already in memory. We
-    // decode the first frame so the canonical compatibility image has valid
-    // scalars for older consumers (thumbnail, getVtkImageData, metadata).
+    // Decode frame 0 so the canonical vtkImageData has valid scalars for
+    // consumers that read it synchronously (thumbnail, getVtkImageData).
     if (this.disposed) return;
     if (!isSupportedCineTransferSyntax(this.header.transferSyntaxUID)) {
       this.reportError(
@@ -160,7 +132,7 @@ export default class DicomCineImage extends BaseProgressiveImage {
     this.getFrame(0)
       .then((frame) => {
         if (this.disposed) return;
-        rgbaToRgb(frame.rgba, this.scalarBuffer);
+        copyDecodedFrameToRgb(frame, this.scalarBuffer);
         this.vtkImageData.value.getPointData().getScalars().modified();
         this.vtkImageData.value.modified();
         this.events.emit('status', 'complete');
@@ -182,9 +154,6 @@ export default class DicomCineImage extends BaseProgressiveImage {
     this.events.all.clear();
     this.cache.clear();
     this.inFlightFrames.clear();
-    // Clear the compressed-frame views; we don't own the underlying buffer
-    // (it was sliced from the original ArrayBuffer), but null'ing the array
-    // lets GC reclaim the wrapper objects.
     this.frames.length = 0;
     this.vtkImageData.value.delete();
   }
@@ -216,8 +185,7 @@ export default class DicomCineImage extends BaseProgressiveImage {
     return this.thumbnailPromise;
   }
 
-  // Decoded-frame access for per-view render buffers. Concurrent requests
-  // for the same uncached frame share a single decode via inFlightFrames.
+  // Concurrent requests for the same uncached frame share a single decode.
   async getFrame(frameIndex: number): Promise<DecodedFrame> {
     if (this.disposed) {
       throw new Error('DicomCineImage is disposed');
@@ -256,8 +224,8 @@ export default class DicomCineImage extends BaseProgressiveImage {
     return decodePromise;
   }
 
-  // Emit an error and clear the loading flag — otherwise consumers stay stuck
-  // on the spinner forever after a bad first-frame decode.
+  // Clear the loading flag too — otherwise the spinner persists past a bad
+  // first-frame decode.
   private reportError(err: unknown): void {
     const error = err instanceof Error ? err : new Error(String(err));
     this.events.emit('error', error);
@@ -281,7 +249,6 @@ export default class DicomCineImage extends BaseProgressiveImage {
     });
   }
 
-  // Helper used by import routing to decide whether the file is cine-renderable.
   static isSupported(header: CineHeader): boolean {
     if (!isSupportedCineTransferSyntax(header.transferSyntaxUID)) return false;
     if (isNativeTransferSyntax(header.transferSyntaxUID)) {
diff --git a/src/core/cine/frameCache.ts b/src/core/cine/frameCache.ts
index 3f66eb3da..6604678c9 100644
--- a/src/core/cine/frameCache.ts
+++ b/src/core/cine/frameCache.ts
@@ -11,6 +11,26 @@ export type DecodedFrame = {
   rgba: Uint8ClampedArray;
 };
 
+// Copy a decoded RGBA frame into a 3-component RGB buffer (VTK scalar shape).
+// Returns false when the buffers disagree on pixel count, so callers can skip
+// the publish step instead of rendering a partial frame.
+export function copyDecodedFrameToRgb(
+  frame: DecodedFrame,
+  out: Uint8Array
+): boolean {
+  const { rgba } = frame;
+  const pixels = out.length / 3;
+  if (rgba.length !== pixels * 4) return false;
+  for (let i = 0; i < pixels; i++) {
+    const src = i * 4;
+    const dst = i * 3;
+    out[dst] = rgba[src];
+    out[dst + 1] = rgba[src + 1];
+    out[dst + 2] = rgba[src + 2];
+  }
+  return true;
+}
+
 const DEFAULT_BUDGET_BYTES = 64 * 1024 * 1024;
 
 export class FrameCache {
diff --git a/src/core/cine/getEffectiveViewAxis.ts b/src/core/cine/getEffectiveViewAxis.ts
new file mode 100644
index 000000000..3e757c414
--- /dev/null
+++ b/src/core/cine/getEffectiveViewAxis.ts
@@ -0,0 +1,14 @@
+import { Maybe } from '@/src/types';
+import { LPSAxis } from '@/src/types/lps';
+import { ViewInfo2D } from '@/src/types/views';
+import { isCineImage } from './isCineImage';
+
+// Cine renders every 2D view as Axial regardless of view.options.orientation,
+// so code outside SliceViewer must go through this helper to stay in sync.
+export function getEffectiveViewAxis(
+  view: ViewInfo2D,
+  imageID: Maybe<string>
+): LPSAxis {
+  if (isCineImage(imageID)) return 'Axial';
+  return view.options.orientation;
+}
diff --git a/src/core/cine/getRenderSlice.ts b/src/core/cine/getRenderSlice.ts
index 4dafd4d6f..341094d8e 100644
--- a/src/core/cine/getRenderSlice.ts
+++ b/src/core/cine/getRenderSlice.ts
@@ -1,17 +1,9 @@
 import { Maybe } from '@/src/types';
 import { isCineImage } from './isCineImage';
 
-// VTK render-slice index versus VolView's semantic slice value.
-//
-// For a normal 3D volume the two are identical.
-//
-// For a cine image, the semantic slice is the frame cursor and ranges over
-// [0, numberOfFrames-1], but the underlying vtkImageData has only one Z slice
-// at index 0. Anything that pokes a VTK slice mapper or 2D widget plane needs
-// the render slice (always 0 for cine).
-//
-// `toolSlice` is an optional per-tool override (e.g. a ruler pinned to a
-// specific slice) — when defined it wins over the view's current slice.
+// VTK render-slice index for a 2D mapper or widget plane. Cine images always
+// render at z=0 (frame index lives elsewhere). For volumes, an explicit
+// `toolSlice` (e.g. a ruler pinned to its own slice) wins over the view's.
 export function getRenderSlice(
   imageID: Maybe<string>,
   viewSlice: Maybe<number>,
diff --git a/src/core/vtk/useMouseRangeManipulatorListener.ts b/src/core/vtk/useMouseRangeManipulatorListener.ts
index 80db2ef74..d08aa8fd4 100644
--- a/src/core/vtk/useMouseRangeManipulatorListener.ts
+++ b/src/core/vtk/useMouseRangeManipulatorListener.ts
@@ -16,10 +16,7 @@ export function useMouseRangeManipulatorListener(
   step: MaybeRef<Maybe<number>>,
   initialValue?: number,
   scale: number = 1, // Negative scale inverts scroll direction
-  // Fires only on real wheel/drag input — not on programmatic writes that
-  // come back through a bidirectional sync. Use this to drive side effects
-  // like setActiveView so they don't fire during cine playback or other
-  // programmatic slice updates.
+  // Fires on real wheel/drag input only, not on programmatic writes.
   onUserInput?: () => void
 ) {
   const internalValue = ref(initialValue ?? 0);
diff --git a/src/core/vtk/useVtkView.ts b/src/core/vtk/useVtkView.ts
index 0fda87ffe..3ff4e6aea 100644
--- a/src/core/vtk/useVtkView.ts
+++ b/src/core/vtk/useVtkView.ts
@@ -19,6 +19,23 @@ import {
   watchPostEffect,
 } from 'vue';
 
+// vtk.js' public interactor.cancelAnimation() is a no-op while the
+// post-wheel extension window is still open (model._animationExtendedEnd),
+// so on dispose during that window a pending rAF survives and fires against
+// the deleted interactor. Reach into the private animationRequest field to
+// cancel it directly.
+function cancelPendingInteractorAnimationFrame(
+  interactor: vtkRenderWindowInteractor
+) {
+  const model = (
+    interactor as unknown as { get(): { animationRequest?: number | null } }
+  ).get();
+  if (model.animationRequest == null) return;
+
+  cancelAnimationFrame(model.animationRequest);
+  model.animationRequest = null;
+}
+
 export function useWebGLRenderWindow(
   renderWindow: vtkRenderWindow,
   container: MaybeRef<Maybe<HTMLElement>>,
@@ -163,6 +180,7 @@ export function useVtkView(container: MaybeRef<Maybe<HTMLElement>>): View {
 
     renderer.delete();
     renderWindow.delete();
+    cancelPendingInteractorAnimationFrame(interactor);
     interactor.delete();
   });
 
diff --git a/src/store/datasets-dicom.ts b/src/store/datasets-dicom.ts
index c8ec96db2..dfe391d70 100644
--- a/src/store/datasets-dicom.ts
+++ b/src/store/datasets-dicom.ts
@@ -47,9 +47,8 @@ export interface VolumeInfo {
   SeriesDescription: string;
   WindowLevel: string;
   WindowWidth: string;
-  // 'cine' marks an ultrasound multi-frame image whose NumberOfSlices is the
-  // number of cine frames (not Z-axis slices). 'volume' means a normal 3D
-  // DICOM volume. Older saved state may omit this field for normal volumes.
+  // For 'cine', NumberOfSlices is the frame count. Optional for back-compat
+  // with saved state that predates the field.
   kind?: 'volume' | 'cine';
 }
 
@@ -265,23 +264,6 @@ export const useDICOMStore = defineStore('dicom', {
       imageCacheStore.addProgressiveImage(image, { id });
 
       const { patient, study, series } = parsed.header;
-
-      const patientInfo: PatientInfo = {
-        PatientID: patient.PatientID,
-        PatientName: patient.PatientName,
-        PatientBirthDate: patient.PatientBirthDate,
-        PatientSex: patient.PatientSex,
-      };
-
-      const studyInfo: StudyInfo = {
-        StudyID: study.StudyID,
-        StudyInstanceUID: study.StudyInstanceUID,
-        StudyDate: study.StudyDate,
-        StudyTime: study.StudyTime,
-        AccessionNumber: study.AccessionNumber,
-        StudyDescription: study.StudyDescription,
-      };
-
       const volumeInfo: VolumeInfo = {
         NumberOfSlices: parsed.header.numberOfFrames,
         VolumeID: id,
@@ -294,7 +276,7 @@ export const useDICOMStore = defineStore('dicom', {
         kind: 'cine',
       };
 
-      this._updateDatabase(patientInfo, studyInfo, volumeInfo);
+      this._updateDatabase(patient, study, volumeInfo);
 
       image.setName(getDisplayName(volumeInfo));
       return true;
diff --git a/src/store/image-stats.ts b/src/store/image-stats.ts
index b80e2b33b..b00cddd40 100644
--- a/src/store/image-stats.ts
+++ b/src/store/image-stats.ts
@@ -128,8 +128,7 @@ export const useImageStatsStore = defineStore('image-stats', () => {
   };
 
   const setupImageWatchers = (id: string) => {
-    // Cine images are 8-bit display-encoded; histograms and auto-range are
-    // meaningless and would allocate a huge Float64Array. Skip them.
+    // Cine: 8-bit display-encoded, no histogram.
     if (isCineImage(id)) return;
 
     const { imageData, isLoading: isImageLoading } = useImage(
diff --git a/src/store/tools/crosshairs.ts b/src/store/tools/crosshairs.ts
index 6c6c861bc..f33a491f7 100644
--- a/src/store/tools/crosshairs.ts
+++ b/src/store/tools/crosshairs.ts
@@ -5,12 +5,11 @@ import vtkBoundingBox from '@kitware/vtk.js/Common/DataModel/BoundingBox';
 import { computed, ref, unref, watch } from 'vue';
 import { vec3 } from 'gl-matrix';
 import { defineStore } from 'pinia';
-import { getLPSAxisFromDir } from '@/src/utils/lps';
 import { Manifest, StateFile } from '@/src/io/state-file/schema';
 import { useViewStore } from '@/src/store/views';
 import useViewSliceStore from '@/src/store/view-configs/slicing';
 import { ViewInfo2D } from '@/src/types/views';
-import { get2DViewingVectors } from '@/src/utils/getViewingVectors';
+import { getEffectiveViewAxis } from '@/src/core/cine/getEffectiveViewAxis';
 
 export const useCrosshairsToolStore = defineStore('crosshairs', () => {
   type _This = ReturnType<typeof useCrosshairsToolStore>;
@@ -64,9 +63,7 @@ export const useCrosshairsToolStore = defineStore('crosshairs', () => {
     const { lpsOrientation } = unref(currentImageMetadata);
 
     otherViews.value.forEach((view) => {
-      const { orientation } = view.options;
-      const { viewDirection } = get2DViewingVectors(orientation);
-      const axis = getLPSAxisFromDir(viewDirection);
+      const axis = getEffectiveViewAxis(view, imageID);
       const index = lpsOrientation[axis];
       const slice = Math.round(indexPos[index]);
       viewSliceStore.updateConfig(view.id, imageID, { slice });
diff --git a/src/store/tools/paint.ts b/src/store/tools/paint.ts
index 22070873e..a1621ff5c 100644
--- a/src/store/tools/paint.ts
+++ b/src/store/tools/paint.ts
@@ -8,8 +8,7 @@ import { watchImmediate } from '@vueuse/core';
 import { vec3 } from 'gl-matrix';
 import { defineStore } from 'pinia';
 import { PaintMode } from '@/src/core/tools/paint';
-import { getLPSAxisFromDir } from '@/src/utils/lps';
-import { get2DViewingVectors } from '@/src/utils/getViewingVectors';
+import { getEffectiveViewAxis } from '@/src/core/cine/getEffectiveViewAxis';
 import { worldPointToIndex } from '@/src/utils/imageSpace';
 import { Tools } from './types';
 import { useSegmentGroupStore } from '../segmentGroups';
@@ -353,8 +352,7 @@ export const usePaintToolStore = defineStore('paint', () => {
       if (!view || view.type !== '2D') return;
 
       // Update slice position
-      const { viewDirection } = get2DViewingVectors(view.options.orientation);
-      const axis = getLPSAxisFromDir(viewDirection);
+      const axis = getEffectiveViewAxis(view, imageID);
       const index = lpsOrientation[axis];
       const slice = Math.round(indexPos[index]);
       if (slice !== sliceConfig.slice) {
diff --git a/src/store/tools/useAnnotationTool.ts b/src/store/tools/useAnnotationTool.ts
index 41f65fe51..57d07a500 100644
--- a/src/store/tools/useAnnotationTool.ts
+++ b/src/store/tools/useAnnotationTool.ts
@@ -13,6 +13,8 @@ import { AnnotationTool, ToolID } from '@/src/types/annotation-tool';
 import { useIdStore } from '@/src/store/id';
 import { useToolSelectionStore } from '@/src/store/tools/toolSelection';
 import type { IToolStore } from '@/src/store/tools/types';
+import { getEffectiveViewAxis } from '@/src/core/cine/getEffectiveViewAxis';
+import { isCineImage } from '@/src/core/cine/isCineImage';
 import useViewSliceStore from '../view-configs/slicing';
 import { useLabels, type Labels } from './useLabels';
 
@@ -145,10 +147,16 @@ export const useAnnotationTool = <
     if (!toolImageFrame) return;
 
     const viewStore = useViewStore();
+    // Cine collapses every 2D view to Axial, so without the active-view gate
+    // every cine view would jump to the same frame.
+    const restrictToActiveView = isCineImage(imageID);
     const relevantViews = viewStore.getAllViews().filter((view) => {
       if (view.type !== '2D') return false;
-      const axis = view.options.orientation;
-      return axis === toolImageFrame.axis;
+      if (getEffectiveViewAxis(view, imageID) !== toolImageFrame.axis)
+        return false;
+      if (restrictToActiveView && view.id !== viewStore.activeView)
+        return false;
+      return true;
     });
 
     const viewSliceStore = useViewSliceStore();
diff --git a/src/store/view-configs/cine-playback.ts b/src/store/view-configs/cine-playback.ts
index 2d1dec364..385d38b45 100644
--- a/src/store/view-configs/cine-playback.ts
+++ b/src/store/view-configs/cine-playback.ts
@@ -58,12 +58,15 @@ export const useCinePlaybackStore = defineStore('cinePlayback', () => {
   ) => {
     const current = getConfig(viewID, dataID, frameTimeMs);
     const fps = patch.fps === undefined ? current.fps : clampCineFps(patch.fps);
-
-    patchDoubleKeyRecord(configs, viewID, dataID, {
+    const next = {
       ...current,
       ...patch,
       fps: fps ?? current.fps,
-    });
+    };
+
+    if (next.playing === current.playing && next.fps === current.fps) return;
+
+    patchDoubleKeyRecord(configs, viewID, dataID, next);
   };
 
   const removeView = (viewID: string) => {
diff --git a/src/store/view-configs/slicing.ts b/src/store/view-configs/slicing.ts
index 0431e27ae..4d3b0b8ee 100644
--- a/src/store/view-configs/slicing.ts
+++ b/src/store/view-configs/slicing.ts
@@ -73,14 +73,23 @@ export const useViewSliceStore = defineStore('viewSlice', () => {
     dataID: string,
     patch: Partial<SliceConfig>
   ) => {
-    const config = {
+    const current = {
       ...defaultSliceConfig(),
       ...getConfig(viewID, dataID),
-      ...patch,
     };
+    const next = { ...current, ...patch };
+    next.slice = clampValue(next.slice, next.min, next.max);
+
+    if (
+      next.slice === current.slice &&
+      next.min === current.min &&
+      next.max === current.max &&
+      next.syncState === current.syncState
+    ) {
+      return;
+    }
 
-    config.slice = clampValue(config.slice, config.min, config.max);
-    patchDoubleKeyRecord(configs, viewID, dataID, config);
+    patchDoubleKeyRecord(configs, viewID, dataID, next);
   };
 
   const resetSlice = (viewID: string, dataID: string) => {
diff --git a/src/store/views.ts b/src/store/views.ts
index 92ebc2030..2cf2821e4 100644
--- a/src/store/views.ts
+++ b/src/store/views.ts
@@ -139,6 +139,7 @@ export const useViewStore = defineStore('view', () => {
   }
 
   function setActiveView(id: Maybe<string>) {
+    if (activeView.value === id) return;
     activeView.value = id;
   }
 
@@ -267,13 +268,10 @@ export const useViewStore = defineStore('view', () => {
 
     if (dataID && isCineImage(dataID) && view.type !== '2D') {
       replaceView(viewID, { ...DEFAULT_VIEW_INIT, dataID });
-      // Global tools resolve their image through activeView.
-      ensureActiveViewIsVisible();
-      return;
+    } else {
+      view.dataID = dataID;
+      ViewDataChangeEvent.trigger(viewID, dataID);
     }
-
-    view.dataID = dataID;
-    ViewDataChangeEvent.trigger(viewID, dataID);
     // Global tools resolve their image through activeView.
     ensureActiveViewIsVisible();
   }
diff --git a/tests/specs/segment-group-download.e2e.ts b/tests/specs/segment-group-download.e2e.ts
index 0a35456bc..33f6b094e 100644
--- a/tests/specs/segment-group-download.e2e.ts
+++ b/tests/specs/segment-group-download.e2e.ts
@@ -1,16 +1,15 @@
 import * as path from 'path';
 import * as fs from 'fs';
 import { cleanuptotal } from 'wdio-cleanuptotal-service';
-import { waitForFileExists } from './utils';
+import { openUrls, waitForFileExists } from './utils';
 import { volViewPage } from '../pageobjects/volview.page';
 import { TEMP_DIR } from '../../wdio.shared.conf';
+import { PROSTATEX_DATASET } from './configTestUtils';
 
 const SAVE_TIMEOUT = 40000;
 
 const loadSampleWithSegmentGroup = async (name: string) => {
-  await volViewPage.open();
-  await volViewPage.downloadProstateSample();
-  await volViewPage.waitForViews();
+  await openUrls([PROSTATEX_DATASET]);
   await volViewPage.createSegmentGroup(name);
 };
 
diff --git a/tests/specs/state-manifest.e2e.ts b/tests/specs/state-manifest.e2e.ts
index 78d953e5b..483c3707c 100644
--- a/tests/specs/state-manifest.e2e.ts
+++ b/tests/specs/state-manifest.e2e.ts
@@ -3,7 +3,9 @@ import { FIXTURES, WINDOW_SIZE } from '../../wdio.shared.conf';
 import { volViewPage } from '../pageobjects/volview.page';
 import { openVolViewPage, writeManifestToZip } from './utils';
 
-describe('State file manifest.json code', () => {
+describe('State file manifest.json code', function () {
+  this.timeout(120_000);
+
   it('has no errors loading version 5.0.1 manifest.json file ', async () => {
     const manifestPath = path.join(
       FIXTURES,
diff --git a/tests/specs/vtk-interactor-lifecycle.e2e.ts b/tests/specs/vtk-interactor-lifecycle.e2e.ts
new file mode 100644
index 000000000..2331949e6
--- /dev/null
+++ b/tests/specs/vtk-interactor-lifecycle.e2e.ts
@@ -0,0 +1,83 @@
+import { COLOR3D_JPEG_BASELINE_DICOM } from './configTestUtils';
+import { openUrls } from './utils';
+
+const VIEW_SELECTOR = 'div[data-testid="vtk-view vtk-two-view"]';
+const DELETED_INSTANCE_ERROR = 'instance deleted - cannot call any method';
+
+type BrowserLogEntry = { text: string | null };
+
+async function captureBrowserConsoleLogsDuring(action: () => Promise<void>) {
+  const logs: BrowserLogEntry[] = [];
+  const handler = (entry: BrowserLogEntry) => {
+    logs.push(entry);
+  };
+
+  await (browser as any).sessionSubscribe({ events: ['log.entryAdded'] });
+  browser.on('log.entryAdded', handler);
+
+  try {
+    await action();
+    await browser.pause(250);
+  } finally {
+    browser.off('log.entryAdded', handler);
+  }
+
+  return logs;
+}
+
+async function wheelFirstCineView() {
+  return browser.execute((selector: string) => {
+    const view = document.querySelector(selector) as HTMLElement | null;
+    const container = view?.querySelector('.view') as HTMLElement | null;
+
+    if (!view || !container) {
+      return {
+        ok: false,
+        defaultPrevented: false,
+        reason: 'missing first cine view or VTK container',
+      };
+    }
+
+    const rect = container.getBoundingClientRect();
+    const defaultWasNotPrevented = container.dispatchEvent(
+      new WheelEvent('wheel', {
+        bubbles: true,
+        cancelable: true,
+        deltaMode: WheelEvent.DOM_DELTA_PIXEL,
+        deltaY: 120,
+        clientX: rect.left + rect.width / 2,
+        clientY: rect.top + rect.height / 2,
+      })
+    );
+
+    return {
+      ok: true,
+      defaultPrevented: !defaultWasNotPrevented,
+    };
+  }, VIEW_SELECTOR);
+}
+
+describe('VTK interactor lifecycle', () => {
+  it('does not log a deleted interactor error when maximizing after wheel scroll', async () => {
+    await openUrls([COLOR3D_JPEG_BASELINE_DICOM]);
+
+    const firstView = $(VIEW_SELECTOR);
+    await firstView.waitForDisplayed({ timeout: 10000 });
+
+    const wheelState = await wheelFirstCineView();
+    expect(wheelState.ok).toBe(true);
+    expect(wheelState.defaultPrevented).toBe(true);
+
+    const logs = await captureBrowserConsoleLogsDuring(async () => {
+      // vtk.js debounces wheel end by 200ms, then extends animation for 600ms.
+      await browser.pause(260);
+      await firstView.doubleClick();
+    });
+
+    const deletedInteractorErrors = logs
+      .map((entry) => entry.text ?? '')
+      .filter((message) => message.includes(DELETED_INSTANCE_ERROR));
+
+    expect(deletedInteractorErrors).toEqual([]);
+  });
+});

From 60eaaaea80b64a19f0683620f4a78f6f28a07b85 Mon Sep 17 00:00:00 2001
From: Paul Elliott <paul@vizworkshop.com>
Date: Sun, 17 May 2026 17:23:35 -0400
Subject: [PATCH 05/12] perf(cine): decode JPEG frames in a worker

---
 src/core/cine/DicomCineImage.ts            | 38 +++++++--
 src/core/cine/__tests__/frameCache.spec.ts |  6 +-
 src/core/cine/frameCache.ts                | 94 ++++++----------------
 src/core/cine/jpegDecode.worker.ts         | 53 ++++++++++++
 src/core/cine/jpegDecodePool.ts            | 44 ++++++++++
 5 files changed, 155 insertions(+), 80 deletions(-)
 create mode 100644 src/core/cine/jpegDecode.worker.ts
 create mode 100644 src/core/cine/jpegDecodePool.ts

diff --git a/src/core/cine/DicomCineImage.ts b/src/core/cine/DicomCineImage.ts
index 0f66335cd..2b8aa9c84 100644
--- a/src/core/cine/DicomCineImage.ts
+++ b/src/core/cine/DicomCineImage.ts
@@ -175,7 +175,17 @@ export default class DicomCineImage extends BaseProgressiveImage {
         const ctx = canvas.getContext('2d');
         if (!ctx) return null;
         const imageData = ctx.createImageData(cols, rows);
-        imageData.data.set(frame.rgba);
+        const dst = imageData.data;
+        const { rgb } = frame;
+        const pixels = cols * rows;
+        for (let i = 0; i < pixels; i++) {
+          const s = i * 3;
+          const d = i * 4;
+          dst[d] = rgb[s];
+          dst[d + 1] = rgb[s + 1];
+          dst[d + 2] = rgb[s + 2];
+          dst[d + 3] = 255;
+        }
         ctx.putImageData(imageData, 0, 0);
         return canvas.toDataURL('image/png');
       } catch {
@@ -195,32 +205,46 @@ export default class DicomCineImage extends BaseProgressiveImage {
       Math.min(this.header.numberOfFrames - 1, frameIndex | 0)
     );
 
+    // Keep cache warm during forward playback when the clip exceeds the cache budget.
+    this.prefetchNext(clamped);
+
     const cached = this.cache.get(clamped);
     if (cached) return cached;
 
-    const inFlight = this.inFlightFrames.get(clamped);
+    return this.scheduleDecode(clamped);
+  }
+
+  private prefetchNext(currentFrame: number): void {
+    const total = this.header.numberOfFrames;
+    if (total <= 1) return;
+    const next = (currentFrame + 1) % total;
+    if (this.cache.has(next) || this.inFlightFrames.has(next)) return;
+    this.scheduleDecode(next).catch(() => {});
+  }
+
+  private scheduleDecode(frameIndex: number): Promise<DecodedFrame> {
+    const inFlight = this.inFlightFrames.get(frameIndex);
     if (inFlight) return inFlight;
 
     const decodePromise = (async () => {
       try {
-        const decoded = await this.decode(clamped);
+        const decoded = await this.decode(frameIndex);
         if (this.disposed) {
           throw new Error('DicomCineImage is disposed');
         }
-        this.cache.set(clamped, decoded);
+        this.cache.set(frameIndex, decoded);
         return decoded;
       } catch (err) {
-        // Disposal isn't a decode failure; don't emit a user-visible error.
         if (!this.disposed) {
           this.reportError(err);
         }
         throw err;
       } finally {
-        this.inFlightFrames.delete(clamped);
+        this.inFlightFrames.delete(frameIndex);
       }
     })();
 
-    this.inFlightFrames.set(clamped, decodePromise);
+    this.inFlightFrames.set(frameIndex, decodePromise);
     return decodePromise;
   }
 
diff --git a/src/core/cine/__tests__/frameCache.spec.ts b/src/core/cine/__tests__/frameCache.spec.ts
index d903d1d8c..1060a0722 100644
--- a/src/core/cine/__tests__/frameCache.spec.ts
+++ b/src/core/cine/__tests__/frameCache.spec.ts
@@ -11,7 +11,7 @@ function frame(byteLength: number): DecodedFrame {
   return {
     width: 1,
     height: 1,
-    rgba: { byteLength } as Uint8ClampedArray,
+    rgb: { byteLength } as unknown as Uint8Array,
   };
 }
 
@@ -58,7 +58,7 @@ describe('decodeNativeFrame', () => {
       planarConfiguration: 0,
     });
 
-    expect(Array.from(decoded.rgba)).toEqual([1, 2, 3, 255, 4, 5, 6, 255]);
+    expect(Array.from(decoded.rgb)).toEqual([1, 2, 3, 4, 5, 6]);
   });
 
   it('decodes plane-interleaved native RGB frames', () => {
@@ -70,6 +70,6 @@ describe('decodeNativeFrame', () => {
       planarConfiguration: 1,
     });
 
-    expect(Array.from(decoded.rgba)).toEqual([1, 2, 3, 255, 4, 5, 6, 255]);
+    expect(Array.from(decoded.rgb)).toEqual([1, 2, 3, 4, 5, 6]);
   });
 });
diff --git a/src/core/cine/frameCache.ts b/src/core/cine/frameCache.ts
index 6604678c9..6db660d8b 100644
--- a/src/core/cine/frameCache.ts
+++ b/src/core/cine/frameCache.ts
@@ -1,33 +1,27 @@
 // Decoded-frame cache for cine playback.
 //
-// Holds CPU-visible RGBA bytes (not ImageBitmaps) because VTK's scalar buffer
-// needs to copy them in. Bounded by a byte budget; LRU eviction. Per-image
-// instance — disposed alongside the DicomCineImage that owns it.
+// Holds CPU-visible RGB bytes packed for direct copy into VTK's 3-component
+// scalar buffer. Bounded by a byte budget; LRU eviction. Per-image instance —
+// disposed alongside the DicomCineImage that owns it.
+
+import { decodeJpegInWorker } from './jpegDecodePool';
 
 export type DecodedFrame = {
   width: number;
   height: number;
-  // RGBA, 8-bit per channel, row-major (matches OffscreenCanvas getImageData).
-  rgba: Uint8ClampedArray;
+  // RGB, 8-bit per channel, row-major. Packed in the decoder (worker for JPEG)
+  // so the main thread can publish frames with a single buffer copy.
+  rgb: Uint8Array;
 };
 
-// Copy a decoded RGBA frame into a 3-component RGB buffer (VTK scalar shape).
 // Returns false when the buffers disagree on pixel count, so callers can skip
 // the publish step instead of rendering a partial frame.
 export function copyDecodedFrameToRgb(
   frame: DecodedFrame,
   out: Uint8Array
 ): boolean {
-  const { rgba } = frame;
-  const pixels = out.length / 3;
-  if (rgba.length !== pixels * 4) return false;
-  for (let i = 0; i < pixels; i++) {
-    const src = i * 4;
-    const dst = i * 3;
-    out[dst] = rgba[src];
-    out[dst + 1] = rgba[src + 1];
-    out[dst + 2] = rgba[src + 2];
-  }
+  if (frame.rgb.length !== out.length) return false;
+  out.set(frame.rgb);
   return true;
 }
 
@@ -57,11 +51,11 @@ export class FrameCache {
   set(frameIndex: number, frame: DecodedFrame): void {
     const existing = this.entries.get(frameIndex);
     if (existing) {
-      this.bytesInUse -= existing.rgba.byteLength;
+      this.bytesInUse -= existing.rgb.byteLength;
       this.entries.delete(frameIndex);
     }
     this.entries.set(frameIndex, frame);
-    this.bytesInUse += frame.rgba.byteLength;
+    this.bytesInUse += frame.rgb.byteLength;
     this.evictUntilUnderBudget();
   }
 
@@ -88,54 +82,18 @@ export class FrameCache {
     for (const key of this.entries.keys()) {
       if (this.bytesInUse <= this.budgetBytes) break;
       const entry = this.entries.get(key)!;
-      this.bytesInUse -= entry.rgba.byteLength;
+      this.bytesInUse -= entry.rgb.byteLength;
       this.entries.delete(key);
     }
   }
 }
 
-// =================================================================
-// Decoders
-// =================================================================
-
-// Decode a single JPEG-Baseline compressed frame to RGBA using the browser's
-// native JPEG decoder. Returns the decoded pixel bytes that can be copied
-// directly into a VTK scalar buffer.
-export async function decodeJpegFrame(
+export function decodeJpegFrame(
   bytes: Uint8Array,
   expectedWidth: number,
   expectedHeight: number
 ): Promise<DecodedFrame> {
-  // The Uint8Array is a view into the original DICOM ArrayBuffer; the cast
-  // satisfies the lib.dom typing of BlobPart (which excludes SharedArrayBuffer-
-  // backed views) without forcing a buffer copy.
-  const blob = new Blob([bytes as BlobPart], { type: 'image/jpeg' });
-  const bitmap = await createImageBitmap(blob);
-  try {
-    const canvas = new OffscreenCanvas(bitmap.width, bitmap.height);
-    const ctx = canvas.getContext('2d');
-    if (!ctx) throw new Error('OffscreenCanvas 2D context unavailable');
-    if (
-      (expectedWidth && bitmap.width !== expectedWidth) ||
-      (expectedHeight && bitmap.height !== expectedHeight)
-    ) {
-      // The per-view RGB buffer is sized from DICOM Rows/Columns; a JPEG that
-      // disagrees can never be copied into it. Surface as a real error so the
-      // user sees a toast instead of a silently-black frame.
-      throw new Error(
-        `JPEG frame size ${bitmap.width}x${bitmap.height} does not match DICOM-declared ${expectedWidth}x${expectedHeight}`
-      );
-    }
-    ctx.drawImage(bitmap, 0, 0);
-    const imageData = ctx.getImageData(0, 0, bitmap.width, bitmap.height);
-    return {
-      width: bitmap.width,
-      height: bitmap.height,
-      rgba: imageData.data,
-    };
-  } finally {
-    bitmap.close();
-  }
+  return decodeJpegInWorker(bytes, expectedWidth, expectedHeight);
 }
 
 type NativeFrameLayout = {
@@ -148,7 +106,7 @@ type NativeFrameLayout = {
   planarConfiguration: number;
 };
 
-// Convert a raw uncompressed frame to RGBA. Supports the two photometric
+// Convert a raw uncompressed frame to packed RGB. Supports the two photometric
 // interpretations our sample corpus shows in the native PixelData path:
 // - 'RGB' with samplesPerPixel=3 (interleaved RGB)
 // - 'MONOCHROME2' with samplesPerPixel=1 (grayscale, replicated to RGB)
@@ -159,17 +117,16 @@ export function decodeNativeFrame(
   const { width, height, samplesPerPixel, photometric, planarConfiguration } =
     layout;
   const pixelCount = width * height;
-  const out = new Uint8ClampedArray(pixelCount * 4);
+  const out = new Uint8Array(pixelCount * 3);
 
   if (samplesPerPixel === 1) {
-    // Grayscale — replicate luminance to R, G, B; alpha = 255.
+    // Grayscale — replicate luminance to R, G, B.
     for (let i = 0; i < pixelCount; i++) {
       const v = bytes[i] ?? 0;
-      const j = i * 4;
+      const j = i * 3;
       out[j] = v;
       out[j + 1] = v;
       out[j + 2] = v;
-      out[j + 3] = 255;
     }
   } else if (
     samplesPerPixel === 3 &&
@@ -179,20 +136,17 @@ export function decodeNativeFrame(
       // RRRR...GGGG...BBBB...
       const plane = pixelCount;
       for (let i = 0; i < pixelCount; i++) {
-        const j = i * 4;
+        const j = i * 3;
         out[j] = bytes[i] ?? 0;
         out[j + 1] = bytes[plane + i] ?? 0;
         out[j + 2] = bytes[2 * plane + i] ?? 0;
-        out[j + 3] = 255;
       }
     } else {
       for (let i = 0; i < pixelCount; i++) {
         const k = i * 3;
-        const j = i * 4;
-        out[j] = bytes[k] ?? 0;
-        out[j + 1] = bytes[k + 1] ?? 0;
-        out[j + 2] = bytes[k + 2] ?? 0;
-        out[j + 3] = 255;
+        out[k] = bytes[k] ?? 0;
+        out[k + 1] = bytes[k + 1] ?? 0;
+        out[k + 2] = bytes[k + 2] ?? 0;
       }
     }
   } else {
@@ -201,5 +155,5 @@ export function decodeNativeFrame(
     );
   }
 
-  return { width, height, rgba: out };
+  return { width, height, rgb: out };
 }
diff --git a/src/core/cine/jpegDecode.worker.ts b/src/core/cine/jpegDecode.worker.ts
new file mode 100644
index 000000000..4742de458
--- /dev/null
+++ b/src/core/cine/jpegDecode.worker.ts
@@ -0,0 +1,53 @@
+import * as Comlink from 'comlink';
+import type { DecodedFrame } from './frameCache';
+
+async function decodeJpeg(
+  bytes: Uint8Array,
+  expectedWidth: number,
+  expectedHeight: number
+): Promise<DecodedFrame> {
+  const blob = new Blob([bytes as BlobPart], { type: 'image/jpeg' });
+  const bitmap = await createImageBitmap(blob);
+  try {
+    if (
+      (expectedWidth && bitmap.width !== expectedWidth) ||
+      (expectedHeight && bitmap.height !== expectedHeight)
+    ) {
+      // Per-view RGB buffer is sized from DICOM Rows/Columns; a mismatched JPEG
+      // can never be copied into it, so fail loudly instead of rendering black.
+      throw new Error(
+        `JPEG frame size ${bitmap.width}x${bitmap.height} does not match DICOM-declared ${expectedWidth}x${expectedHeight}`
+      );
+    }
+    const canvas = new OffscreenCanvas(bitmap.width, bitmap.height);
+    const ctx = canvas.getContext('2d');
+    if (!ctx) throw new Error('OffscreenCanvas 2D context unavailable');
+    ctx.drawImage(bitmap, 0, 0);
+    const { data: rgba } = ctx.getImageData(0, 0, bitmap.width, bitmap.height);
+    // Pack RGBA→RGB in-worker so the main thread only does a single
+    // typed-array copy when publishing the frame.
+    const pixels = bitmap.width * bitmap.height;
+    const rgb = new Uint8Array(pixels * 3);
+    for (let i = 0; i < pixels; i++) {
+      const s = i * 4;
+      const d = i * 3;
+      rgb[d] = rgba[s];
+      rgb[d + 1] = rgba[s + 1];
+      rgb[d + 2] = rgba[s + 2];
+    }
+    const result: DecodedFrame = {
+      width: bitmap.width,
+      height: bitmap.height,
+      rgb,
+    };
+    return Comlink.transfer(result, [rgb.buffer]);
+  } finally {
+    bitmap.close();
+  }
+}
+
+export interface JpegDecoderWorker {
+  decodeJpeg: typeof decodeJpeg;
+}
+
+Comlink.expose({ decodeJpeg });
diff --git a/src/core/cine/jpegDecodePool.ts b/src/core/cine/jpegDecodePool.ts
new file mode 100644
index 000000000..8eab26d76
--- /dev/null
+++ b/src/core/cine/jpegDecodePool.ts
@@ -0,0 +1,44 @@
+import * as Comlink from 'comlink';
+import type { DecodedFrame } from './frameCache';
+import type { JpegDecoderWorker } from './jpegDecode.worker';
+
+// 2 workers is enough: createImageBitmap is async inside each worker, so the
+// browser's JPEG thread pool can already pipeline decodes within a single one.
+const MAX_WORKERS = 2;
+
+let proxies: Comlink.Remote<JpegDecoderWorker>[] | null = null;
+let nextWorkerIndex = 0;
+
+function ensureWorkers(): Comlink.Remote<JpegDecoderWorker>[] {
+  if (proxies) return proxies;
+  const count = Math.min(
+    MAX_WORKERS,
+    Math.max(1, Math.floor((navigator.hardwareConcurrency || 4) / 2))
+  );
+  proxies = Array.from({ length: count }, () =>
+    Comlink.wrap<JpegDecoderWorker>(
+      new Worker(new URL('./jpegDecode.worker.ts', import.meta.url), {
+        type: 'module',
+      })
+    )
+  );
+  return proxies;
+}
+
+export function decodeJpegInWorker(
+  bytes: Uint8Array,
+  expectedWidth: number,
+  expectedHeight: number
+): Promise<DecodedFrame> {
+  const pool = ensureWorkers();
+  // Bytes are a view into the parent DICOM buffer; slice copies them into a
+  // standalone ArrayBuffer that can be transferred without detaching the shared buffer.
+  const standalone = bytes.slice();
+  const proxy = pool[nextWorkerIndex];
+  nextWorkerIndex = (nextWorkerIndex + 1) % pool.length;
+  return proxy.decodeJpeg(
+    Comlink.transfer(standalone, [standalone.buffer]),
+    expectedWidth,
+    expectedHeight
+  );
+}

From fc0c1d902d290e658a65369f8df98f2c888597dc Mon Sep 17 00:00:00 2001
From: Paul Elliott <paul@vizworkshop.com>
Date: Sun, 17 May 2026 17:23:48 -0400
Subject: [PATCH 06/12] refactor(cine): introduce effective cine viewer layer

---
 src/components/CineViewer.vue                 | 205 ++++++++++++++++++
 src/components/CineViewerOverlay.vue          |  52 +++++
 src/components/ControlsStripTools.vue         |  38 +++-
 src/components/LayoutGridItem.vue             |  20 +-
 src/components/PlayControls.vue               |  23 +-
 src/components/SliceViewer.vue                |  21 +-
 src/components/SliceViewerOverlay.vue         |  19 +-
 .../tools/crosshairs/CrosshairsWidget2D.vue   |   3 +-
 src/components/tools/paint/PaintWidget2D.vue  |   3 +-
 src/components/tools/polygon/PolygonTool.vue  |  19 +-
 .../tools/polygon/PolygonWidget2D.vue         |  12 +-
 .../tools/rectangle/RectangleTool.vue         |  21 +-
 .../tools/rectangle/RectangleWidget2D.vue     |  12 +-
 src/components/tools/ruler/RulerTool.vue      |  21 +-
 src/components/tools/ruler/RulerWidget2D.vue  |  12 +-
 .../vtk/VtkBaseSliceRepresentation.vue        | 158 +++-----------
 .../vtk/VtkCineScrubKeyManipulator.vue        |  75 +++++++
 .../vtk/VtkCineScrubManipulator.vue           |  65 ++++++
 src/composables/actions.ts                    |  16 +-
 src/composables/annotationTool.ts             |   9 +-
 src/composables/useCineFrame.ts               |  35 +++
 src/composables/useCineRendering.ts           | 121 +++++++++++
 src/composables/useEffectiveView.ts           |   6 +
 src/composables/useSliceInfo.ts               |  26 ++-
 src/composables/useViewLocator.ts             |  38 ++++
 .../annotations/__tests__/locator.spec.ts     |  57 +++++
 src/core/annotations/locator.ts               | 154 +++++++++++++
 src/core/cine/getEffectiveViewAxis.ts         |  14 --
 src/core/cine/getRenderSlice.ts               |  14 --
 src/core/viewTypes.ts                         |  43 +++-
 .../views/__tests__/effectiveView.spec.ts     |  72 ++++++
 src/core/views/effectiveView.ts               |  49 +++++
 src/io/state-file/schema.ts                   |   1 +
 src/store/__tests__/rulers.spec.ts            |   9 +-
 src/store/__tests__/views.spec.ts             |  34 ++-
 src/store/tools/crosshairs.ts                 |   7 +-
 src/store/tools/index.ts                      |  50 ++++-
 src/store/tools/paint.ts                      |   8 +-
 src/store/tools/polygons.ts                   |   1 +
 src/store/tools/useAnnotationTool.ts          |  38 +---
 src/store/view-configs/cine-playback.ts       |  51 +++--
 src/store/view-configs/slicing.ts             |  14 --
 src/store/views.ts                            |   9 +-
 src/types/annotation-tool.ts                  |   3 +
 src/utils/frameOfReference.ts                 |   7 +
 tests/pageobjects/volview.page.ts             |  12 +-
 tests/specs/cine-drag-onto-slot.e2e.ts        | 109 ++++++++++
 tests/specs/cine-rendering.e2e.ts             |   2 +-
 tests/specs/cine-ruler-mid-placement.e2e.ts   |  59 +++++
 tests/specs/cine-ruler-session.e2e.ts         |  96 ++++++++
 tests/specs/cineTestUtils.ts                  |  56 +++++
 tests/specs/reveal-slice.e2e.ts               |  46 ++--
 tests/specs/ultrasound-spacing.e2e.ts         |   2 +-
 tests/specs/vtk-interactor-lifecycle.e2e.ts   |   2 +-
 54 files changed, 1596 insertions(+), 453 deletions(-)
 create mode 100644 src/components/CineViewer.vue
 create mode 100644 src/components/CineViewerOverlay.vue
 create mode 100644 src/components/vtk/VtkCineScrubKeyManipulator.vue
 create mode 100644 src/components/vtk/VtkCineScrubManipulator.vue
 create mode 100644 src/composables/useCineFrame.ts
 create mode 100644 src/composables/useCineRendering.ts
 create mode 100644 src/composables/useEffectiveView.ts
 create mode 100644 src/composables/useViewLocator.ts
 create mode 100644 src/core/annotations/__tests__/locator.spec.ts
 create mode 100644 src/core/annotations/locator.ts
 delete mode 100644 src/core/cine/getEffectiveViewAxis.ts
 delete mode 100644 src/core/cine/getRenderSlice.ts
 create mode 100644 src/core/views/__tests__/effectiveView.spec.ts
 create mode 100644 src/core/views/effectiveView.ts
 create mode 100644 tests/specs/cine-drag-onto-slot.e2e.ts
 create mode 100644 tests/specs/cine-ruler-mid-placement.e2e.ts
 create mode 100644 tests/specs/cine-ruler-session.e2e.ts
 create mode 100644 tests/specs/cineTestUtils.ts

diff --git a/src/components/CineViewer.vue b/src/components/CineViewer.vue
new file mode 100644
index 000000000..5a198271b
--- /dev/null
+++ b/src/components/CineViewer.vue
@@ -0,0 +1,205 @@
+<template>
+  <div
+    class="vtk-container-wrapper"
+    tabindex="0"
+    @pointerenter="hover = true"
+    @pointerleave="hover = false"
+    @focusin="hover = true"
+    @focusout="hover = false"
+  >
+    <div class="vtk-gutter mt-1">
+      <v-btn dark icon size="medium" variant="text" @click="resetCamera">
+        <v-icon size="medium" class="py-1">mdi-camera-flip-outline</v-icon>
+        <v-tooltip
+          location="right"
+          activator="parent"
+          transition="slide-x-transition"
+        >
+          Reset Camera
+        </v-tooltip>
+      </v-btn>
+      <slice-slider
+        v-model="currentFrame"
+        class="slice-slider"
+        :min="frameRange[0]"
+        :max="frameRange[1]"
+        :step="1"
+        :handle-height="20"
+      />
+    </div>
+    <div class="vtk-container" data-testid="two-view-container">
+      <v-progress-linear
+        v-if="isImageLoading"
+        indeterminate
+        class="loading-indicator"
+        height="2"
+        color="grey"
+      />
+      <div class="vtk-sub-container">
+        <vtk-slice-view
+          class="vtk-view"
+          ref="vtkView"
+          data-testid="vtk-view vtk-cine-view"
+          :view-id="viewId"
+          :image-id="currentImageID"
+          :view-direction="VIEW_DIRECTION"
+          :view-up="VIEW_UP"
+        >
+          <vtk-mouse-interaction-manipulator
+            v-if="currentTool === Tools.Pan"
+            :manipulator-constructor="vtkMouseCameraTrackballPanManipulator"
+            :manipulator-props="{ button: 1 }"
+          ></vtk-mouse-interaction-manipulator>
+          <vtk-mouse-interaction-manipulator
+            :manipulator-constructor="vtkMouseCameraTrackballPanManipulator"
+            :manipulator-props="{ button: 1, shift: true }"
+          ></vtk-mouse-interaction-manipulator>
+          <vtk-mouse-interaction-manipulator
+            :manipulator-constructor="vtkMouseCameraTrackballPanManipulator"
+            :manipulator-props="{ button: 2 }"
+          ></vtk-mouse-interaction-manipulator>
+          <vtk-mouse-interaction-manipulator
+            v-if="currentTool === Tools.Zoom"
+            :manipulator-constructor="
+              vtkMouseCameraTrackballZoomToMouseManipulator
+            "
+            :manipulator-props="{ button: 1 }"
+          ></vtk-mouse-interaction-manipulator>
+          <vtk-mouse-interaction-manipulator
+            :manipulator-constructor="
+              vtkMouseCameraTrackballZoomToMouseManipulator
+            "
+            :manipulator-props="{ button: 3 }"
+          ></vtk-mouse-interaction-manipulator>
+          <vtk-cine-scrub-manipulator
+            :view-id="viewId"
+            :image-id="currentImageID"
+          ></vtk-cine-scrub-manipulator>
+          <vtk-cine-scrub-key-manipulator
+            :view-id="viewId"
+            :image-id="currentImageID"
+          ></vtk-cine-scrub-key-manipulator>
+          <cine-viewer-overlay
+            :view-id="viewId"
+            :image-id="currentImageID"
+          ></cine-viewer-overlay>
+          <vtk-base-slice-representation
+            ref="baseSliceRep"
+            :view-id="viewId"
+            :image-id="currentImageID"
+            :axis="VIEW_AXIS"
+            :frame="currentFrame"
+          ></vtk-base-slice-representation>
+          <polygon-tool
+            :view-id="viewId"
+            :image-id="currentImageID"
+            :view-direction="VIEW_DIRECTION"
+          />
+          <ruler-tool
+            :view-id="viewId"
+            :image-id="currentImageID"
+            :view-direction="VIEW_DIRECTION"
+          />
+          <rectangle-tool
+            :view-id="viewId"
+            :image-id="currentImageID"
+            :view-direction="VIEW_DIRECTION"
+          />
+          <select-tool />
+          <svg class="overlay-no-events">
+            <bounding-rectangle :points="selectionPoints" />
+          </svg>
+          <slot></slot>
+        </vtk-slice-view>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, toRefs, computed } from 'vue';
+import { storeToRefs } from 'pinia';
+import { useCurrentImage } from '@/src/composables/useCurrentImage';
+import VtkSliceView from '@/src/components/vtk/VtkSliceView.vue';
+import { VtkViewApi } from '@/src/types/vtk-types';
+import { Tools } from '@/src/store/tools/types';
+import VtkBaseSliceRepresentation from '@/src/components/vtk/VtkBaseSliceRepresentation.vue';
+import { useViewAnimationListener } from '@/src/composables/useViewAnimationListener';
+import PolygonTool from '@/src/components/tools/polygon/PolygonTool.vue';
+import RulerTool from '@/src/components/tools/ruler/RulerTool.vue';
+import RectangleTool from '@/src/components/tools/rectangle/RectangleTool.vue';
+import SelectTool from '@/src/components/tools/SelectTool.vue';
+import BoundingRectangle from '@/src/components/tools/BoundingRectangle.vue';
+import SliceSlider from '@/src/components/SliceSlider.vue';
+import CineViewerOverlay from '@/src/components/CineViewerOverlay.vue';
+import { useToolSelectionStore } from '@/src/store/tools/toolSelection';
+import { useAnnotationToolStore, useToolStore } from '@/src/store/tools';
+import { useWebGLWatchdog } from '@/src/composables/useWebGLWatchdog';
+import { useCineFrame } from '@/src/composables/useCineFrame';
+import VtkCineScrubManipulator from '@/src/components/vtk/VtkCineScrubManipulator.vue';
+import VtkCineScrubKeyManipulator from '@/src/components/vtk/VtkCineScrubKeyManipulator.vue';
+import VtkMouseInteractionManipulator from '@/src/components/vtk/VtkMouseInteractionManipulator.vue';
+import vtkMouseCameraTrackballPanManipulator from '@kitware/vtk.js/Interaction/Manipulators/MouseCameraTrackballPanManipulator';
+import vtkMouseCameraTrackballZoomToMouseManipulator from '@kitware/vtk.js/Interaction/Manipulators/MouseCameraTrackballZoomToMouseManipulator';
+import { useResetViewsEvents } from '@/src/components/tools/ResetViews.vue';
+import { onVTKEvent } from '@/src/composables/onVTKEvent';
+import { get2DViewingVectors } from '@/src/utils/getViewingVectors';
+import type { LPSAxis } from '@/src/types/lps';
+
+type Props = {
+  viewId: string;
+};
+
+const VIEW_AXIS: LPSAxis = 'Axial';
+const { viewDirection: VIEW_DIRECTION, viewUp: VIEW_UP } =
+  get2DViewingVectors(VIEW_AXIS);
+
+const vtkView = ref<VtkViewApi>();
+const baseSliceRep = ref();
+
+const props = defineProps<Props>();
+const { viewId } = toRefs(props);
+
+const { currentImageID, currentImageData, isImageLoading } = useCurrentImage();
+
+const hover = ref(false);
+
+function resetCamera() {
+  vtkView.value?.resetCamera();
+}
+
+useResetViewsEvents().onClick(resetCamera);
+
+useWebGLWatchdog(vtkView);
+useViewAnimationListener(vtkView, viewId, '2D');
+
+const { currentTool } = storeToRefs(useToolStore());
+
+const { frame: currentFrame, frameRange } = useCineFrame(
+  viewId,
+  currentImageID
+);
+
+onVTKEvent(currentImageData, 'onModified', () => {
+  vtkView.value?.requestRender();
+});
+
+const selectionStore = useToolSelectionStore();
+const selectionPoints = computed(() => {
+  return selectionStore.selection
+    .map((sel) => {
+      const store = useAnnotationToolStore(sel.type);
+      return { store, tool: store.toolByID[sel.id] };
+    })
+    .filter(
+      ({ tool }) =>
+        tool.imageID === currentImageID.value &&
+        tool.frame === currentFrame.value &&
+        !tool.hidden
+    )
+    .flatMap(({ store, tool }) => store.getPoints(tool.id));
+});
+</script>
+
+<style scoped src="@/src/components/styles/vtk-view.css"></style>
+<style scoped src="@/src/components/styles/utils.css"></style>
diff --git a/src/components/CineViewerOverlay.vue b/src/components/CineViewerOverlay.vue
new file mode 100644
index 000000000..e808581b7
--- /dev/null
+++ b/src/components/CineViewerOverlay.vue
@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { toRefs, computed } from 'vue';
+import ViewOverlayGrid from '@/src/components/ViewOverlayGrid.vue';
+import { Maybe } from '@/src/types';
+import { useCineFrame } from '@/src/composables/useCineFrame';
+import DicomQuickInfoButton from '@/src/components/DicomQuickInfoButton.vue';
+import { useImage } from '@/src/composables/useCurrentImage';
+import PlayControls from '@/src/components/PlayControls.vue';
+
+type Props = {
+  viewId: string;
+  imageId: Maybe<string>;
+};
+
+const props = defineProps<Props>();
+const { viewId, imageId } = toRefs(props);
+
+const { metadata } = useImage(imageId);
+const { frame, frameRange } = useCineFrame(viewId, imageId);
+const frameCount = computed(() => frameRange.value[1] + 1);
+</script>
+
+<template>
+  <view-overlay-grid class="overlay-no-events view-annotations">
+    <template v-slot:top-left>
+      <div class="annotation-cell">
+        <span>{{ metadata.name }}</span>
+      </div>
+    </template>
+    <template v-slot:bottom-left>
+      <div class="annotation-cell">
+        <div>
+          <span class="frame-label">
+            Frame: {{ frame + 1 }} / {{ frameCount }}
+          </span>
+        </div>
+      </div>
+    </template>
+    <template v-slot:top-right>
+      <div class="annotation-cell">
+        <dicom-quick-info-button :image-id="imageId"></dicom-quick-info-button>
+      </div>
+    </template>
+    <template #bottom-right>
+      <div class="annotation-cell" @click.stop>
+        <play-controls :view-id="viewId" :image-id="imageId" />
+      </div>
+    </template>
+  </view-overlay-grid>
+</template>
+
+<style scoped src="@/src/components/styles/vtk-view.css"></style>
diff --git a/src/components/ControlsStripTools.vue b/src/components/ControlsStripTools.vue
index f9f3ff9fc..2287ccbe1 100644
--- a/src/components/ControlsStripTools.vue
+++ b/src/components/ControlsStripTools.vue
@@ -45,7 +45,11 @@
         icon="mdi-crosshairs"
         :name="`Crosshairs [${nameToShortcut['Crosshairs']}]`"
         :buttonClass="['tool-btn', active ? 'tool-btn-selected' : '']"
-        :disabled="noCurrentImage || isObliqueLayout"
+        :disabled="
+          noCurrentImage ||
+          isObliqueLayout ||
+          isDisallowedOnCine(Tools.Crosshairs)
+        "
         @click="toggle"
       />
     </groupable-item>
@@ -64,7 +68,9 @@
         icon="mdi-brush"
         :name="`Paint [${nameToShortcut['Paint']}]`"
         :buttonClass="['tool-btn', active ? 'tool-btn-selected' : '']"
-        :disabled="noCurrentImage || isObliqueLayout"
+        :disabled="
+          noCurrentImage || isObliqueLayout || isDisallowedOnCine(Tools.Paint)
+        "
         @click="toggle"
       ></control-button>
     </groupable-item>
@@ -114,7 +120,9 @@
         icon="mdi-crop"
         :name="`Crop [${nameToShortcut['Crop']}]`"
         :active="active"
-        :disabled="noCurrentImage || isObliqueLayout"
+        :disabled="
+          noCurrentImage || isObliqueLayout || isDisallowedOnCine(Tools.Crop)
+        "
         @click="toggle"
       >
         <crop-controls />
@@ -132,7 +140,9 @@ import { Tools } from '@/src/store/tools/types';
 import ControlButton from '@/src/components/ControlButton.vue';
 import ItemGroup from '@/src/components/ItemGroup.vue';
 import GroupableItem from '@/src/components/GroupableItem.vue';
-import { useToolStore } from '@/src/store/tools';
+import { useToolStore, isToolAllowedFor } from '@/src/store/tools';
+import { useEffectiveView } from '@/src/composables/useEffectiveView';
+import { toRef } from 'vue';
 import MenuControlButton from '@/src/components/MenuControlButton.vue';
 import CropControls from '@/src/components/tools/crop/CropControls.vue';
 import ResetViews from '@/src/components/tools/ResetViews.vue';
@@ -164,11 +174,20 @@ export default defineComponent({
     const { currentImageID } = useCurrentImage();
     const noCurrentImage = computed(() => !currentImageID.value);
     const currentTool = computed(() => toolStore.currentTool);
-    const isObliqueLayout = computed(() => {
-      if (!viewStore.activeView) return false;
-      const view = viewStore.viewByID[viewStore.activeView];
-      return view.type === 'Oblique';
-    });
+
+    const activeViewRef = toRef(viewStore, 'activeView');
+    const activeEffective = useEffectiveView(
+      computed(() => activeViewRef.value ?? '')
+    );
+    // The rendered viewer is decided by effective kind, not stored slot type:
+    // a cine clip dropped into an Oblique slot still renders as cine, so the
+    // toolbar should treat it as cine, not Oblique.
+    const isObliqueLayout = computed(
+      () => activeEffective.value?.kind === 'oblique'
+    );
+    const isCineActive = computed(() => activeEffective.value?.kind === 'cine');
+    const isDisallowedOnCine = (tool: Tools) =>
+      isCineActive.value && !isToolAllowedFor(tool, activeEffective.value);
 
     const paintMenu = ref(false);
     const cropMenu = ref(false);
@@ -211,6 +230,7 @@ export default defineComponent({
       setCurrentTool: toolStore.setCurrentTool,
       noCurrentImage,
       isObliqueLayout,
+      isDisallowedOnCine,
       Tools,
       paintMenu,
       cropMenu,
diff --git a/src/components/LayoutGridItem.vue b/src/components/LayoutGridItem.vue
index e31c86461..f8adb33c4 100644
--- a/src/components/LayoutGridItem.vue
+++ b/src/components/LayoutGridItem.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import CurrentImageProvider from '@/src/components/CurrentImageProvider.vue';
 import { IMAGE_DRAG_MEDIA_TYPE } from '@/src/constants';
-import { getComponentFromViewInfo } from '@/src/core/viewTypes';
+import { resolveSlotRendering } from '@/src/core/viewTypes';
 import { useViewStore } from '@/src/store/views';
 import { computed, ref } from 'vue';
 
@@ -11,10 +11,9 @@ const viewStore = useViewStore();
 const dragCounter = ref(0);
 const showDropTarget = computed(() => dragCounter.value > 0);
 
-const ItemComponent = computed(() => {
-  const viewInfo = viewStore.viewByID[props.viewId];
-  return getComponentFromViewInfo(viewInfo);
-});
+const rendering = computed(() =>
+  resolveSlotRendering(viewStore.viewByID[props.viewId])
+);
 
 const activeStyles = computed(() => {
   if (showDropTarget.value) {
@@ -32,11 +31,6 @@ const activeStyles = computed(() => {
   };
 });
 
-const imageID = computed(() => {
-  const viewInfo = viewStore.viewByID[props.viewId];
-  return viewInfo.dataID;
-});
-
 function isValidDragEvent(event: DragEvent) {
   return event.dataTransfer?.types.includes(IMAGE_DRAG_MEDIA_TYPE);
 }
@@ -74,11 +68,11 @@ function onDrop(event: DragEvent) {
     @dragleave="onDragLeave"
     @drop="onDrop"
   >
-    <div v-show="!imageID" class="overlay">
+    <div v-show="!rendering.renderImageID" class="overlay">
       <v-icon color="grey-darken-3" size="x-large">mdi-image-off</v-icon>
     </div>
-    <CurrentImageProvider :image-id="imageID">
-      <ItemComponent :view-id="viewId" />
+    <CurrentImageProvider :image-id="rendering.renderImageID">
+      <component :is="rendering.component" :view-id="viewId" />
     </CurrentImageProvider>
   </div>
 </template>
diff --git a/src/components/PlayControls.vue b/src/components/PlayControls.vue
index dcb8ef00b..72ef2cf8e 100644
--- a/src/components/PlayControls.vue
+++ b/src/components/PlayControls.vue
@@ -2,7 +2,7 @@
 import { computed, ref, toRefs, watch } from 'vue';
 import { useIntervalFn } from '@vueuse/core';
 import { Maybe } from '@/src/types';
-import { useSliceConfig } from '@/src/composables/useSliceConfig';
+import { useCineFrame } from '@/src/composables/useCineFrame';
 import { getCineImage } from '@/src/core/cine/isCineImage';
 import {
   clampCineFps,
@@ -20,15 +20,11 @@ const props = defineProps<Props>();
 const { imageId, viewId } = toRefs(props);
 
 const cine = computed(() => getCineImage(imageId.value));
-const { slice, range } = useSliceConfig(viewId, imageId);
+const { frame, frameRange, setFrame } = useCineFrame(viewId, imageId);
 const playbackStore = useCinePlaybackStore();
 
 const playbackConfig = computed(() =>
-  playbackStore.getConfig(
-    viewId.value,
-    imageId.value,
-    cine.value?.header.frameTimeMs
-  )
+  playbackStore.getConfig(viewId.value, imageId.value)
 );
 
 function patchConfig(
@@ -36,12 +32,7 @@ function patchConfig(
   patch: Parameters<typeof playbackStore.updateConfig>[2]
 ) {
   if (!clipId) return;
-  playbackStore.updateConfig(
-    viewId.value,
-    clipId,
-    patch,
-    getCineImage(clipId)?.header.frameTimeMs
-  );
+  playbackStore.updateConfig(viewId.value, clipId, patch);
 }
 
 const playing = computed({
@@ -58,10 +49,10 @@ const period = computed(() => Math.round(1000 / fps.value));
 
 const { pause, resume } = useIntervalFn(
   () => {
-    const [min, max] = range.value;
+    const [min, max] = frameRange.value;
     if (max <= min) return;
-    const next = (slice.value ?? min) + 1;
-    slice.value = next > max ? min : next;
+    const next = frame.value + 1;
+    setFrame(next > max ? min : next);
   },
   period,
   { immediate: false, immediateCallback: false }
diff --git a/src/components/SliceViewer.vue b/src/components/SliceViewer.vue
index a798ad156..9ba126002 100644
--- a/src/components/SliceViewer.vue
+++ b/src/components/SliceViewer.vue
@@ -146,7 +146,6 @@
             <bounding-rectangle :points="selectionPoints" />
           </svg>
           <scalar-probe
-            v-if="!isCine"
             :base-rep="baseSliceRep"
             :layer-reps="layerSliceReps"
             :segment-groups-reps="segSliceReps"
@@ -159,11 +158,9 @@
 </template>
 
 <script setup lang="ts">
-import { ref, toRefs, computed, watch } from 'vue';
+import { ref, toRefs, computed } from 'vue';
 import { storeToRefs } from 'pinia';
 import { useCurrentImage } from '@/src/composables/useCurrentImage';
-import { useProbeStore } from '@/src/store/probe';
-import { getEffectiveViewAxis } from '@/src/core/cine/getEffectiveViewAxis';
 import VtkSliceView from '@/src/components/vtk/VtkSliceView.vue';
 import { VtkViewApi } from '@/src/types/vtk-types';
 import { Tools } from '@/src/store/tools/types';
@@ -188,7 +185,6 @@ import { useAnnotationToolStore, useToolStore } from '@/src/store/tools';
 import { doesToolFrameMatchViewAxis } from '@/src/composables/annotationTool';
 import { useWebGLWatchdog } from '@/src/composables/useWebGLWatchdog';
 import { useSliceConfig } from '@/src/composables/useSliceConfig';
-import { isCineImage } from '@/src/core/cine/isCineImage';
 import VtkSliceViewWindowManipulator from '@/src/components/vtk/VtkSliceViewWindowManipulator.vue';
 import VtkSliceViewSlicingManipulator from '@/src/components/vtk/VtkSliceViewSlicingManipulator.vue';
 import VtkSliceViewSlicingKeyManipulator from '@/src/components/vtk/VtkSliceViewSlicingKeyManipulator.vue';
@@ -225,10 +221,7 @@ const {
   isImageLoading,
 } = useCurrentImage();
 
-const isCine = computed(() => isCineImage(currentImageID.value));
-const viewAxis = computed(() =>
-  getEffectiveViewAxis(viewInfo.value, currentImageID.value)
-);
+const viewAxis = computed(() => viewInfo.value.options.orientation);
 const viewingVectors = computed(() => get2DViewingVectors(viewAxis.value));
 const viewDirection = computed(() => viewingVectors.value.viewDirection);
 const viewUp = computed(() => viewingVectors.value.viewUp);
@@ -253,20 +246,10 @@ const { slice: currentSlice, range: sliceRange } = useSliceConfig(
 );
 
 const windowingManipulatorProps = computed(() => {
-  // W/L is meaningless for 8-bit display-encoded cine; keep the manipulator
-  // off so dragging doesn't crush colors.
   if (currentTool.value !== Tools.WindowLevel) return { button: -1 };
-  if (isCine.value) return { button: -1 };
   return { button: 1 };
 });
 
-// Scalar probe samples the canonical image; for cine that's frame-0-only.
-// Unmount it for cine views and clear any stale probe data on switch.
-const probeStore = useProbeStore();
-watch(isCine, (cine) => {
-  if (cine) probeStore.clearProbeData();
-});
-
 onVTKEvent(currentImageData, 'onModified', () => {
   vtkView.value?.requestRender();
 });
diff --git a/src/components/SliceViewerOverlay.vue b/src/components/SliceViewerOverlay.vue
index 95860f482..7165e8160 100644
--- a/src/components/SliceViewerOverlay.vue
+++ b/src/components/SliceViewerOverlay.vue
@@ -9,8 +9,6 @@ import { useOrientationLabels } from '@/src/composables/useOrientationLabels';
 import DicomQuickInfoButton from '@/src/components/DicomQuickInfoButton.vue';
 import ViewTypeSwitcher from '@/src/components/ViewTypeSwitcher.vue';
 import { useImage } from '@/src/composables/useCurrentImage';
-import { isCineImage } from '@/src/core/cine/isCineImage';
-import PlayControls from '@/src/components/PlayControls.vue';
 import { computed } from 'vue';
 
 interface Props {
@@ -38,7 +36,6 @@ const {
 } = useWindowingConfig(viewId, imageId);
 const { metadata } = useImage(imageId);
 
-const isCine = computed(() => isCineImage(imageId.value));
 const LOCKED_ORIENTATION_SUFFIXES = [
   '-coronal',
   '-sagittal',
@@ -70,14 +67,11 @@ const isLockedOrientationView = computed(() =>
     <template v-slot:bottom-left>
       <div class="annotation-cell">
         <div v-if="sliceConfig">
-          <span v-if="isCine" class="frame-label">
-            Frame: {{ slice + 1 }} / {{ sliceRange[1] + 1 }}
-          </span>
-          <span v-else class="slice-label">
+          <span class="slice-label">
             Slice: {{ slice + 1 }}/{{ sliceRange[1] + 1 }}
           </span>
         </div>
-        <div v-if="wlConfig && !isCine">
+        <div v-if="wlConfig">
           W/L: {{ windowWidth.toFixed(2) }} / {{ windowLevel.toFixed(2) }}
         </div>
       </div>
@@ -88,13 +82,8 @@ const isLockedOrientationView = computed(() =>
       </div>
     </template>
     <template #bottom-right>
-      <div
-        v-if="isCine || !isLockedOrientationView"
-        class="annotation-cell"
-        @click.stop
-      >
-        <play-controls v-if="isCine" :view-id="viewId" :image-id="imageId" />
-        <ViewTypeSwitcher v-else :view-id="viewId" :image-id="imageId" />
+      <div v-if="!isLockedOrientationView" class="annotation-cell" @click.stop>
+        <ViewTypeSwitcher :view-id="viewId" :image-id="imageId" />
       </div>
     </template>
   </view-overlay-grid>
diff --git a/src/components/tools/crosshairs/CrosshairsWidget2D.vue b/src/components/tools/crosshairs/CrosshairsWidget2D.vue
index dc8cf2665..435c37149 100644
--- a/src/components/tools/crosshairs/CrosshairsWidget2D.vue
+++ b/src/components/tools/crosshairs/CrosshairsWidget2D.vue
@@ -18,7 +18,6 @@ import { useCrosshairsToolStore } from '@/src/store/tools/crosshairs';
 import { Maybe } from '@/src/types';
 import { VtkViewContext } from '@/src/components/vtk/context';
 import { useSliceInfo } from '@/src/composables/useSliceInfo';
-import { getRenderSlice } from '@/src/core/cine/getRenderSlice';
 
 export default defineComponent({
   name: 'CrosshairsWidget2D',
@@ -65,7 +64,7 @@ export default defineComponent({
       updatePlaneManipulatorFor2DView(
         manipulator,
         viewDirection.value,
-        getRenderSlice(imageId.value, slice.value),
+        slice.value,
         imageMetadata.value
       );
     });
diff --git a/src/components/tools/paint/PaintWidget2D.vue b/src/components/tools/paint/PaintWidget2D.vue
index 004716da0..368d9723d 100644
--- a/src/components/tools/paint/PaintWidget2D.vue
+++ b/src/components/tools/paint/PaintWidget2D.vue
@@ -26,7 +26,6 @@ import { VtkViewContext } from '@/src/components/vtk/context';
 import { Maybe } from '@/src/types';
 import { PaintMode } from '@/src/core/tools/paint';
 import { actionToKey } from '@/src/composables/useKeyboardShortcuts';
-import { getRenderSlice } from '@/src/core/cine/getRenderSlice';
 
 export default defineComponent({
   name: 'PaintWidget2D',
@@ -139,7 +138,7 @@ export default defineComponent({
       updatePlaneManipulatorFor2DView(
         manipulator,
         viewDirection.value,
-        getRenderSlice(imageId.value, slice.value),
+        slice.value,
         imageMetadata.value
       );
     });
diff --git a/src/components/tools/polygon/PolygonTool.vue b/src/components/tools/polygon/PolygonTool.vue
index 14cbc7f20..709ca38ea 100644
--- a/src/components/tools/polygon/PolygonTool.vue
+++ b/src/components/tools/polygon/PolygonTool.vue
@@ -101,10 +101,10 @@ import {
 } from '@/src/composables/annotationTool';
 import AnnotationContextMenu from '@/src/components/tools/AnnotationContextMenu.vue';
 import AnnotationInfo from '@/src/components/tools/AnnotationInfo.vue';
-import { useFrameOfReference } from '@/src/composables/useFrameOfReference';
 import { actionToKey } from '@/src/composables/useKeyboardShortcuts';
 import { Maybe } from '@/src/types';
-import { useSliceInfo } from '@/src/composables/useSliceInfo';
+import { useViewLocator } from '@/src/composables/useViewLocator';
+import { locatorPatch } from '@/src/core/annotations/locator';
 import { useMagicKeys, watchImmediate } from '@vueuse/core';
 import { fillPoly } from '@thi.ng/rasterize';
 import type { IGrid2D } from '@thi.ng/api';
@@ -178,8 +178,7 @@ export default defineComponent({
     const activeToolStore = useActiveToolStore();
     const { activeLabel } = storeToRefs(activeToolStore);
 
-    const sliceInfo = useSliceInfo(viewId, imageId);
-    const slice = computed(() => sliceInfo.value?.slice ?? 0);
+    const { locator, frame, slice } = useViewLocator(viewId, imageId);
 
     const { metadata: imageMetadata } = useImage(imageId);
     const isToolActive = computed(() => toolStore.currentTool === toolType);
@@ -187,20 +186,13 @@ export default defineComponent({
 
     // --- active tool management --- //
 
-    const frameOfReference = useFrameOfReference(
-      viewDirection,
-      slice,
-      imageMetadata
-    );
-
     const placingTool = usePlacingAnnotationTool(
       activeToolStore,
       computed(() => {
         if (!imageId.value) return {};
         return {
           imageID: imageId.value,
-          frameOfReference: frameOfReference.value,
-          slice: slice.value,
+          ...locatorPatch(locator.value),
           label: activeLabel.value,
           ...(activeLabel.value && activeToolStore.labels[activeLabel.value]),
         };
@@ -259,7 +251,8 @@ export default defineComponent({
     const currentTools = useCurrentTools(
       activeToolStore,
       viewAxis,
-      computed(() => (placingTool.id.value ? [placingTool.id.value] : []))
+      computed(() => (placingTool.id.value ? [placingTool.id.value] : [])),
+      frame
     );
 
     const { onHover: baseOnHover, overlayInfo } = useHover(currentTools, slice);
diff --git a/src/components/tools/polygon/PolygonWidget2D.vue b/src/components/tools/polygon/PolygonWidget2D.vue
index 45d8607c3..c5b5d2470 100644
--- a/src/components/tools/polygon/PolygonWidget2D.vue
+++ b/src/components/tools/polygon/PolygonWidget2D.vue
@@ -30,7 +30,8 @@ import type { Vector3 } from '@kitware/vtk.js/types';
 import { ToolID } from '@/src/types/annotation-tool';
 import { VtkViewContext } from '@/src/components/vtk/context';
 import { useSliceInfo } from '@/src/composables/useSliceInfo';
-import { getRenderSlice } from '@/src/core/cine/getRenderSlice';
+import { useCineFrame } from '@/src/composables/useCineFrame';
+import { toolRenderSlice } from '@/src/core/annotations/locator';
 import SVG2DComponent from './PolygonSVG2D.vue';
 
 export default defineComponent({
@@ -66,6 +67,7 @@ export default defineComponent({
 
     const sliceInfo = useSliceInfo(viewId, imageId);
     const slice = computed(() => sliceInfo.value?.slice);
+    const { frame: cineFrame } = useCineFrame(viewId, imageId);
 
     const toolStore = useStore();
     const tool = computed(() => toolStore.toolByID[toolId.value]);
@@ -81,9 +83,9 @@ export default defineComponent({
       widgetFactory.delete();
     });
 
-    // --- reset on slice/image changes --- //
-
-    watch([slice, imageId], () => {
+    // Reset unfinished placement when the view's cursor moves: slice for
+    // volume views, frame for cine.
+    watch([slice, cineFrame, imageId], () => {
       if (isPlacing.value) {
         widget.resetInteractions();
         widget.getWidgetState().clearHandles();
@@ -138,7 +140,7 @@ export default defineComponent({
       updatePlaneManipulatorFor2DView(
         manipulator,
         viewDirection.value,
-        getRenderSlice(imageId.value, slice.value, tool.value?.slice),
+        toolRenderSlice(tool.value, slice.value),
         imageMetadata.value
       );
     });
diff --git a/src/components/tools/rectangle/RectangleTool.vue b/src/components/tools/rectangle/RectangleTool.vue
index e0b5464c8..f2aba901d 100644
--- a/src/components/tools/rectangle/RectangleTool.vue
+++ b/src/components/tools/rectangle/RectangleTool.vue
@@ -37,9 +37,9 @@ import {
 } from '@/src/composables/annotationTool';
 import AnnotationContextMenu from '@/src/components/tools/AnnotationContextMenu.vue';
 import AnnotationInfo from '@/src/components/tools/AnnotationInfo.vue';
-import { useFrameOfReference } from '@/src/composables/useFrameOfReference';
 import { Maybe } from '@/src/types';
-import { useSliceInfo } from '@/src/composables/useSliceInfo';
+import { useViewLocator } from '@/src/composables/useViewLocator';
+import { locatorPatch } from '@/src/core/annotations/locator';
 import { ToolID } from '@/src/types/annotation-tool';
 import { watchImmediate } from '@vueuse/core';
 import RectangleWidget2D from './RectangleWidget2D.vue';
@@ -71,29 +71,21 @@ export default defineComponent({
     const activeToolStore = useActiveToolStore();
     const { activeLabel } = storeToRefs(activeToolStore);
 
-    const sliceInfo = useSliceInfo(viewId, imageId);
-    const slice = computed(() => sliceInfo.value?.slice ?? 0);
+    const { locator, frame, slice } = useViewLocator(viewId, imageId);
 
-    const { currentImageID, currentImageMetadata } = useCurrentImage();
+    const { currentImageID } = useCurrentImage();
     const isToolActive = computed(() => toolStore.currentTool === toolType);
     const viewAxis = computed(() => getLPSAxisFromDir(viewDirection.value));
 
     // --- active tool management --- //
 
-    const frameOfReference = useFrameOfReference(
-      viewDirection,
-      slice,
-      currentImageMetadata
-    );
-
     const placingTool = usePlacingAnnotationTool(
       activeToolStore,
       computed(() => {
         if (!currentImageID.value) return {};
         return {
           imageID: currentImageID.value,
-          frameOfReference: frameOfReference.value,
-          slice: slice.value,
+          ...locatorPatch(locator.value),
           label: activeLabel.value,
           ...(activeLabel.value && activeToolStore.labels[activeLabel.value]),
         };
@@ -133,7 +125,8 @@ export default defineComponent({
       computed(() => {
         if (placingTool.id.value) return [placingTool.id.value];
         return [];
-      })
+      }),
+      frame
     );
 
     const { onHover: baseOnHover, overlayInfo } = useHover(currentTools, slice);
diff --git a/src/components/tools/rectangle/RectangleWidget2D.vue b/src/components/tools/rectangle/RectangleWidget2D.vue
index f4289ae40..f48a568ab 100644
--- a/src/components/tools/rectangle/RectangleWidget2D.vue
+++ b/src/components/tools/rectangle/RectangleWidget2D.vue
@@ -30,9 +30,10 @@ import { vtkRulerWidgetState } from '@/src/vtk/RulerWidget';
 import { ToolID } from '@/src/types/annotation-tool';
 import { VtkViewContext } from '@/src/components/vtk/context';
 import { useSliceInfo } from '@/src/composables/useSliceInfo';
+import { useCineFrame } from '@/src/composables/useCineFrame';
 import { Maybe } from '@/src/types';
 import { whenever } from '@vueuse/core';
-import { getRenderSlice } from '@/src/core/cine/getRenderSlice';
+import { toolRenderSlice } from '@/src/core/annotations/locator';
 
 const useStore = useRectangleStore;
 const vtkWidgetFactory = vtkRectangleWidget;
@@ -72,6 +73,7 @@ export default defineComponent({
 
     const sliceInfo = useSliceInfo(viewId, imageId);
     const slice = computed(() => sliceInfo.value?.slice);
+    const { frame: cineFrame } = useCineFrame(viewId, imageId);
 
     const toolStore = useStore();
     const tool = computed(() => toolStore.toolByID[toolId.value]);
@@ -97,9 +99,9 @@ export default defineComponent({
       { immediate: true }
     );
 
-    // --- reset on slice/image changes --- //
-
-    watch([slice, imageId], () => {
+    // Reset unfinished placement when the view's cursor moves: slice for
+    // volume views, frame for cine.
+    watch([slice, cineFrame, imageId], () => {
       const isPlaced = widget.getWidgetState().getIsPlaced();
       if (!isPlaced) {
         widget.resetInteractions();
@@ -126,7 +128,7 @@ export default defineComponent({
       updatePlaneManipulatorFor2DView(
         manipulator,
         viewDirection.value,
-        getRenderSlice(imageId.value, slice.value, tool.value?.slice),
+        toolRenderSlice(tool.value, slice.value),
         imageMetadata.value
       );
     });
diff --git a/src/components/tools/ruler/RulerTool.vue b/src/components/tools/ruler/RulerTool.vue
index 8998bc00d..591e46eda 100644
--- a/src/components/tools/ruler/RulerTool.vue
+++ b/src/components/tools/ruler/RulerTool.vue
@@ -37,9 +37,9 @@ import {
 } from '@/src/composables/annotationTool';
 import AnnotationContextMenu from '@/src/components/tools/AnnotationContextMenu.vue';
 import AnnotationInfo from '@/src/components/tools/AnnotationInfo.vue';
-import { useFrameOfReference } from '@/src/composables/useFrameOfReference';
 import { Maybe } from '@/src/types';
-import { useSliceInfo } from '@/src/composables/useSliceInfo';
+import { useViewLocator } from '@/src/composables/useViewLocator';
+import { locatorPatch } from '@/src/core/annotations/locator';
 import { watchImmediate } from '@vueuse/core';
 
 export default defineComponent({
@@ -66,29 +66,21 @@ export default defineComponent({
     const rulerStore = useRulerStore();
     const { activeLabel } = storeToRefs(rulerStore);
 
-    const sliceInfo = useSliceInfo(viewId, imageId);
-    const slice = computed(() => sliceInfo.value?.slice ?? 0);
+    const { locator, frame, slice } = useViewLocator(viewId, imageId);
 
-    const { metadata: imageMetadata } = useImage(imageId);
+    useImage(imageId);
     const isToolActive = computed(() => toolStore.currentTool === Tools.Ruler);
     const viewAxis = computed(() => getLPSAxisFromDir(viewDirection.value));
 
     // --- active ruler management --- //
 
-    const frameOfReference = useFrameOfReference(
-      viewDirection,
-      slice,
-      imageMetadata
-    );
-
     const placingTool = usePlacingAnnotationTool(
       rulerStore,
       computed(() => {
         if (!imageId.value) return {};
         return {
           imageID: imageId.value,
-          frameOfReference: frameOfReference.value,
-          slice: slice.value,
+          ...locatorPatch(locator.value),
           label: activeLabel.value,
           ...(activeLabel.value && rulerStore.labels[activeLabel.value]),
         };
@@ -126,7 +118,8 @@ export default defineComponent({
       computed(() => {
         if (placingTool.id.value) return [placingTool.id.value];
         return [];
-      })
+      }),
+      frame
     );
 
     const currentRulers = computed(() => {
diff --git a/src/components/tools/ruler/RulerWidget2D.vue b/src/components/tools/ruler/RulerWidget2D.vue
index bcc38effa..8d146c63d 100644
--- a/src/components/tools/ruler/RulerWidget2D.vue
+++ b/src/components/tools/ruler/RulerWidget2D.vue
@@ -31,9 +31,10 @@ import {
 import { ToolID } from '@/src/types/annotation-tool';
 import { Maybe } from '@/src/types';
 import { useSliceInfo } from '@/src/composables/useSliceInfo';
+import { useCineFrame } from '@/src/composables/useCineFrame';
 import { VtkViewContext } from '@/src/components/vtk/context';
 import { whenever } from '@vueuse/core';
-import { getRenderSlice } from '@/src/core/cine/getRenderSlice';
+import { toolRenderSlice } from '@/src/core/annotations/locator';
 
 export default defineComponent({
   name: 'RulerWidget2D',
@@ -68,6 +69,7 @@ export default defineComponent({
 
     const sliceInfo = useSliceInfo(viewId, imageId);
     const slice = computed(() => sliceInfo.value?.slice ?? 0);
+    const { frame: cineFrame } = useCineFrame(viewId, imageId);
 
     const rulerStore = useRulerStore();
     const ruler = computed(() => rulerStore.rulerByID[toolId.value]);
@@ -94,9 +96,9 @@ export default defineComponent({
       { immediate: true }
     );
 
-    // --- reset on slice/image changes --- //
-
-    watch([slice, imageId], () => {
+    // Reset unfinished placement when the view's cursor moves: slice for
+    // volume views, frame for cine.
+    watch([slice, cineFrame, imageId], () => {
       const isPlaced = widget.getWidgetState().getIsPlaced();
       if (!isPlaced) {
         widget.resetInteractions();
@@ -125,7 +127,7 @@ export default defineComponent({
       updatePlaneManipulatorFor2DView(
         manipulator,
         viewDirection.value,
-        getRenderSlice(imageId.value, slice.value, ruler.value?.slice),
+        toolRenderSlice(ruler.value, slice.value),
         imageMetadata.value
       );
     });
diff --git a/src/components/vtk/VtkBaseSliceRepresentation.vue b/src/components/vtk/VtkBaseSliceRepresentation.vue
index d60411de7..11de7e378 100644
--- a/src/components/vtk/VtkBaseSliceRepresentation.vue
+++ b/src/components/vtk/VtkBaseSliceRepresentation.vue
@@ -1,69 +1,24 @@
 <script setup lang="ts">
-import {
-  computed,
-  toRefs,
-  watchEffect,
-  watch,
-  inject,
-  shallowRef,
-  nextTick,
-} from 'vue';
-import vtkImageData from '@kitware/vtk.js/Common/DataModel/ImageData';
-import vtkDataArray from '@kitware/vtk.js/Common/Core/DataArray';
+import { computed, toRefs, watchEffect, inject } from 'vue';
 import { useImage } from '@/src/composables/useCurrentImage';
 import { useSliceRepresentation } from '@/src/core/vtk/useSliceRepresentation';
 import { useSliceConfig } from '@/src/composables/useSliceConfig';
 import { useWindowingConfig } from '@/src/composables/useWindowingConfig';
+import { useCineRendering } from '@/src/composables/useCineRendering';
 import { LPSAxis } from '@/src/types/lps';
 import { syncRefs } from '@vueuse/core';
 import { vtkFieldRef } from '@/src/core/vtk/vtkFieldRef';
 import { SlicingMode } from '@kitware/vtk.js/Rendering/Core/ImageMapper/Constants';
 import { Maybe } from '@/src/types';
 import { VtkViewContext } from '@/src/components/vtk/context';
-import { getCineImage, isCineImage } from '@/src/core/cine/isCineImage';
-import type DicomCineImage from '@/src/core/cine/DicomCineImage';
-import { copyDecodedFrameToRgb } from '@/src/core/cine/frameCache';
 
-interface Props {
+type Props = {
   viewId: string;
   imageId: Maybe<string>;
   axis: LPSAxis;
-}
-
-type CineRenderImage = {
-  imageData: vtkImageData;
-  dataArray: vtkDataArray;
-  rgbBuffer: Uint8Array;
+  frame?: number;
 };
 
-function createCineRenderImage(cineImage: DicomCineImage): CineRenderImage {
-  const source = cineImage.getVtkImageData();
-  if (!source) {
-    throw new Error('Cine image has no canonical vtkImageData');
-  }
-  const extent = source.getExtent();
-  const cols = extent[1] - extent[0] + 1;
-  const rows = extent[3] - extent[2] + 1;
-
-  const imageData = vtkImageData.newInstance();
-  imageData.setExtent(extent);
-  imageData.setSpacing(source.getSpacing());
-  imageData.setOrigin(source.getOrigin());
-  imageData.setDirection(source.getDirection());
-
-  const rgbBuffer = new Uint8Array(cols * rows * 3);
-  const dataArray = vtkDataArray.newInstance({
-    numberOfComponents: 3,
-    values: rgbBuffer,
-  });
-  dataArray.setRange({ min: 0, max: 255 }, 0);
-  dataArray.setRange({ min: 0, max: 255 }, 1);
-  dataArray.setRange({ min: 0, max: 255 }, 2);
-  imageData.getPointData().setScalars(dataArray);
-
-  return { imageData, dataArray, rgbBuffer };
-}
-
 const props = defineProps<Props>();
 const { viewId: viewID, imageId: imageID, axis } = toRefs(props);
 
@@ -72,51 +27,22 @@ if (!view) throw new Error('No VtkView');
 
 const { metadata: imageMetadata, imageData } = useImage(imageID);
 
-// bind slice and window configs
 const sliceConfig = useSliceConfig(viewID, imageID);
 const wlConfig = useWindowingConfig(viewID, imageID);
 
-const cine = computed(() => getCineImage(imageID.value));
-
-// Per-view render buffer for cine so two views can show different frames
-// without fighting over a single shared scalar buffer. Published to
-// `cineRender` only after the first decoded pixels land.
-const cineRender = shallowRef<CineRenderImage | null>(null);
-let localCineRender: CineRenderImage | null = null;
-
-watchEffect((onCleanup) => {
-  const cineImage = cine.value;
-  if (!cineImage) return;
-  const local = createCineRenderImage(cineImage);
-  localCineRender = local;
-  cineRender.value = null;
-  onCleanup(() => {
-    if (localCineRender === local) {
-      localCineRender = null;
-    }
-    if (cineRender.value === local) {
-      cineRender.value = null;
-    }
-    // Let the mapper flush before we delete the vtkImageData it still holds.
-    nextTick(() => {
-      local.imageData.delete();
-    });
-  });
-});
-
-const mapperInput = computed(() => {
-  if (cine.value) return cineRender.value?.imageData;
-  return imageData.value;
-});
+const { cine, mapperInput } = useCineRendering(
+  view,
+  imageID,
+  imageData,
+  () => props.frame
+);
 
-// setup base image
 const sliceRep = useSliceRepresentation(view, mapperInput);
 
-// set slice ordering to be in the back
+// Push the base image behind layers/segmentations.
 sliceRep.mapper.setResolveCoincidentTopologyToPolygonOffset();
 sliceRep.mapper.setRelativeCoincidentTopologyPolygonOffsetParameters(1, 1);
 
-// set slicing mode
 watchEffect(() => {
   const { lpsOrientation } = imageMetadata.value;
   const ijkIndex = lpsOrientation[axis.value];
@@ -125,64 +51,30 @@ watchEffect(() => {
 });
 
 // Cine: the per-view image is a single 2D plane (mapper slice is always 0).
-// The frame index drives the local-buffer watcher below instead.
+// The frame index drives the cine render buffer instead.
 const slice = vtkFieldRef(sliceRep.mapper, 'slice');
 const renderSlice = computed(() => (cine.value ? 0 : sliceConfig.slice.value));
 syncRefs(renderSlice, slice, { immediate: true });
 
-// A token guards against stale decodes when scrubbing rapidly.
-let frameToken = 0;
-watch(
-  [() => sliceConfig.slice.value, cine],
-  ([frame, cineImage]) => {
-    const target = localCineRender;
-    if (!cineImage || !target) return;
-    const myToken = ++frameToken;
-    cineImage
-      .getFrame(frame)
-      .then((decoded) => {
-        if (myToken !== frameToken) return;
-        if (localCineRender !== target) return;
-        if (!copyDecodedFrameToRgb(decoded, target.rgbBuffer)) return;
-        target.dataArray.modified();
-        target.imageData.modified();
-        if (cineRender.value !== target) {
-          cineRender.value = target;
-        }
-        view.requestRender();
-      })
-      .catch(() => {
-        // getFrame already routed the error through reportError.
-      });
-  },
-  { immediate: true }
-);
-
 // Cine pixels are 8-bit display-encoded — pin W/L to a full-byte pass-through
 // and skip the bidirectional wlConfig sync, which would otherwise overwrite
 // these with uninitialized defaults on first paint.
 const colorLevel = vtkFieldRef(sliceRep.property, 'colorLevel');
 const colorWindow = vtkFieldRef(sliceRep.property, 'colorWindow');
 
-watch(
-  () => isCineImage(imageID.value),
-  (cineNow, _prev, onCleanup) => {
-    if (cineNow) {
-      colorWindow.value = 255;
-      colorLevel.value = 127.5;
-      return;
-    }
-    const stopLevel = syncRefs(wlConfig.level, colorLevel, { immediate: true });
-    const stopWidth = syncRefs(wlConfig.width, colorWindow, {
-      immediate: true,
-    });
-    onCleanup(() => {
-      stopLevel();
-      stopWidth();
-    });
-  },
-  { immediate: true }
-);
+watchEffect((onCleanup) => {
+  if (cine.value) {
+    colorWindow.value = 255;
+    colorLevel.value = 127.5;
+    return;
+  }
+  const stopLevel = syncRefs(wlConfig.level, colorLevel, { immediate: true });
+  const stopWidth = syncRefs(wlConfig.width, colorWindow, { immediate: true });
+  onCleanup(() => {
+    stopLevel();
+    stopWidth();
+  });
+});
 
 defineExpose(sliceRep);
 </script>
diff --git a/src/components/vtk/VtkCineScrubKeyManipulator.vue b/src/components/vtk/VtkCineScrubKeyManipulator.vue
new file mode 100644
index 000000000..abca10eb7
--- /dev/null
+++ b/src/components/vtk/VtkCineScrubKeyManipulator.vue
@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import { VtkViewContext } from '@/src/components/vtk/context';
+import { useCineFrame } from '@/src/composables/useCineFrame';
+import { useMouseRangeManipulatorListener } from '@/src/core/vtk/useMouseRangeManipulatorListener';
+import { useVtkInteractionManipulator } from '@/src/core/vtk/useVtkInteractionManipulator';
+import { Maybe } from '@/src/types';
+import vtkGatedMouseRangeManipulator from '@/src/vtk/GatedMouseRangeManipulator';
+import { IMouseRangeManipulatorInitialValues } from '@kitware/vtk.js/Interaction/Manipulators/MouseRangeManipulator';
+import vtkInteractorStyleManipulator from '@kitware/vtk.js/Interaction/Style/InteractorStyleManipulator';
+import { syncRef, useMagicKeys } from '@vueuse/core';
+import { inject, toRefs, unref, watch, computed } from 'vue';
+import { useViewStore } from '@/src/store/views';
+import { actionToKey } from '@/src/composables/useKeyboardShortcuts';
+
+type Props = {
+  viewId: string;
+  imageId: Maybe<string>;
+  manipulatorConfig?: IMouseRangeManipulatorInitialValues;
+};
+
+const props = defineProps<Props>();
+const { viewId, imageId, manipulatorConfig } = toRefs(props);
+
+const view = inject(VtkViewContext);
+if (!view) throw new Error('No VtkView');
+
+const interactorStyle =
+  view.interactorStyle as Maybe<vtkInteractorStyleManipulator>;
+if (!interactorStyle?.isA('vtkInteractorStyleManipulator')) {
+  throw new Error('No vtkInteractorStyleManipulator');
+}
+
+const config = computed(() => ({
+  button: -1,
+  dragEnabled: false,
+  scrollEnabled: false,
+  ...manipulatorConfig?.value,
+}));
+
+const { instance: rangeManipulator } = useVtkInteractionManipulator(
+  interactorStyle,
+  vtkGatedMouseRangeManipulator,
+  config
+);
+
+rangeManipulator.value.setupMouseMove(view.interactor);
+
+const keys = useMagicKeys();
+const enableGrabSlice = computed(() => keys[actionToKey.value.grabSlice].value);
+watch(
+  enableGrabSlice,
+  (value) => {
+    rangeManipulator.value.setGateEnabled(value);
+  },
+  { immediate: true }
+);
+
+const { frame, frameRange } = useCineFrame(viewId, imageId);
+
+const scroll = useMouseRangeManipulatorListener(
+  rangeManipulator,
+  'vertical',
+  frameRange,
+  1,
+  frame.value,
+  -1,
+  () => {
+    useViewStore().setActiveView(unref(viewId));
+  }
+);
+
+syncRef(scroll, frame);
+</script>
+
+<template><slot></slot></template>
diff --git a/src/components/vtk/VtkCineScrubManipulator.vue b/src/components/vtk/VtkCineScrubManipulator.vue
new file mode 100644
index 000000000..cd92c8c3d
--- /dev/null
+++ b/src/components/vtk/VtkCineScrubManipulator.vue
@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { VtkViewContext } from '@/src/components/vtk/context';
+import { useCineFrame } from '@/src/composables/useCineFrame';
+import { useMouseRangeManipulatorListener } from '@/src/core/vtk/useMouseRangeManipulatorListener';
+import { useVtkInteractionManipulator } from '@/src/core/vtk/useVtkInteractionManipulator';
+import { Maybe } from '@/src/types';
+import vtkMouseRangeManipulator, {
+  IMouseRangeManipulatorInitialValues,
+} from '@kitware/vtk.js/Interaction/Manipulators/MouseRangeManipulator';
+import vtkInteractorStyleManipulator from '@kitware/vtk.js/Interaction/Style/InteractorStyleManipulator';
+import { syncRef } from '@vueuse/core';
+import { inject, toRefs, unref, computed } from 'vue';
+import { useViewStore } from '@/src/store/views';
+
+type Props = {
+  viewId: string;
+  imageId: Maybe<string>;
+  manipulatorConfig?: IMouseRangeManipulatorInitialValues;
+};
+
+const props = defineProps<Props>();
+const { viewId, imageId, manipulatorConfig } = toRefs(props);
+
+const view = inject(VtkViewContext);
+if (!view) throw new Error('No VtkView');
+
+const interactorStyle =
+  view.interactorStyle as Maybe<vtkInteractorStyleManipulator>;
+if (!interactorStyle?.isA('vtkInteractorStyleManipulator')) {
+  throw new Error('No vtkInteractorStyleManipulator');
+}
+
+const config = computed(() => ({
+  button: 1,
+  dragEnabled: false,
+  scrollEnabled: true,
+  ...manipulatorConfig?.value,
+}));
+
+const { instance: rangeManipulator } = useVtkInteractionManipulator(
+  interactorStyle,
+  vtkMouseRangeManipulator,
+  config
+);
+
+const { frame, frameRange } = useCineFrame(viewId, imageId);
+
+const scroll = useMouseRangeManipulatorListener(
+  rangeManipulator,
+  'scroll',
+  frameRange,
+  1,
+  frame.value,
+  -1,
+  () => {
+    useViewStore().setActiveView(unref(viewId));
+  }
+);
+
+// scroll is initialized with frame.value; bidirectional syncRef keeps them
+// aligned thereafter without paying for an immediate redundant write.
+syncRef(scroll, frame);
+</script>
+
+<template><slot></slot></template>
diff --git a/src/composables/actions.ts b/src/composables/actions.ts
index 8c4d7970f..1836a072c 100644
--- a/src/composables/actions.ts
+++ b/src/composables/actions.ts
@@ -8,9 +8,11 @@ import { Action, NOOP } from '../constants';
 import { useKeyboardShortcutsStore } from '../store/keyboard-shortcuts';
 import { useCurrentImage } from './useCurrentImage';
 import { useSliceConfig } from './useSliceConfig';
+import { useCineFrame } from './useCineFrame';
 import { useDatasetStore } from '../store/datasets';
 import { usePaintToolStore } from '../store/tools/paint';
 import { PaintMode } from '../core/tools/paint';
+import { computeEffectiveView } from '../core/views/effectiveView';
 
 const applyLabelOffset = (offset: number) => () => {
   const toolToStore = {
@@ -49,7 +51,19 @@ const showKeyboardShortcuts = () => {
 
 const changeSlice = (offset: number) => () => {
   const { currentImageID } = useCurrentImage();
-  const { activeView } = useViewStore();
+  const viewStore = useViewStore();
+  const { activeView } = viewStore;
+  if (!activeView) return;
+
+  const view = viewStore.getView(activeView);
+  if (!view) return;
+
+  const effective = computeEffectiveView(view, currentImageID.value);
+  if (effective.kind === 'cine') {
+    const { frame, setFrame } = useCineFrame(activeView, currentImageID);
+    setFrame(frame.value + offset);
+    return;
+  }
 
   const { slice: currentSlice } = useSliceConfig(activeView, currentImageID);
   currentSlice.value += offset;
diff --git a/src/composables/annotationTool.ts b/src/composables/annotationTool.ts
index 616dff996..d19368baf 100644
--- a/src/composables/annotationTool.ts
+++ b/src/composables/annotationTool.ts
@@ -54,11 +54,15 @@ export const doesToolFrameMatchViewAxis = <Tool extends AnnotationTool>(
 export const useCurrentTools = <S extends AnnotationToolStore>(
   toolStore: S,
   viewAxis: Ref<LPSAxis>,
-  placingToolWhitelist: Ref<Array<ToolID>>
+  placingToolWhitelist: Ref<Array<ToolID>>,
+  // For cine: the current frame. A tool matches when its own frame matches
+  // or is unset (volume tools have no frame). Pass undefined on volume views.
+  viewFrame?: MaybeRef<Maybe<number>>
 ) => {
   const { currentImageID, currentImageMetadata } = useCurrentImage();
   return computed(() => {
     const curImageID = currentImageID.value;
+    const frame = unref(viewFrame);
 
     type ToolType = S['tools'][number];
     return (toolStore.tools as Array<ToolType>).filter((tool) => {
@@ -66,6 +70,9 @@ export const useCurrentTools = <S extends AnnotationToolStore>(
       if (tool.placing && !placingToolWhitelist.value.includes(tool.id))
         return false;
 
+      if (frame != null && tool.frame != null && tool.frame !== frame)
+        return false;
+
       // only show tools for the current image,
       // current view axis and not hidden
       return (
diff --git a/src/composables/useCineFrame.ts b/src/composables/useCineFrame.ts
new file mode 100644
index 000000000..e38934280
--- /dev/null
+++ b/src/composables/useCineFrame.ts
@@ -0,0 +1,35 @@
+import { computed, MaybeRef, unref } from 'vue';
+import { clampValue } from '@/src/utils';
+import { Maybe } from '@/src/types';
+import { getCineImage } from '@/src/core/cine/isCineImage';
+import { useCinePlaybackStore } from '@/src/store/view-configs/cine-playback';
+
+export function useCineFrame(
+  viewID: MaybeRef<Maybe<string>>,
+  dataID: MaybeRef<Maybe<string>>
+) {
+  const playback = useCinePlaybackStore();
+  const cine = computed(() => getCineImage(unref(dataID)));
+  const frameMax = computed(() =>
+    Math.max(0, (cine.value?.getNumberOfFrames() ?? 1) - 1)
+  );
+  const frameRange = computed<[number, number]>(() => [0, frameMax.value]);
+  function setFrame(next: number) {
+    const v = unref(viewID);
+    const d = unref(dataID);
+    if (!v || !d) return;
+    playback.updateConfig(v, d, {
+      frame: clampValue(next, 0, frameMax.value),
+    });
+  }
+  const frame = computed({
+    get: () =>
+      clampValue(
+        playback.getConfig(unref(viewID), unref(dataID)).frame,
+        0,
+        frameMax.value
+      ),
+    set: (value: number) => setFrame(value),
+  });
+  return { frame, frameRange, setFrame };
+}
diff --git a/src/composables/useCineRendering.ts b/src/composables/useCineRendering.ts
new file mode 100644
index 000000000..3f873632c
--- /dev/null
+++ b/src/composables/useCineRendering.ts
@@ -0,0 +1,121 @@
+import {
+  computed,
+  MaybeRefOrGetter,
+  nextTick,
+  Ref,
+  shallowRef,
+  toValue,
+  watch,
+  watchEffect,
+} from 'vue';
+import vtkImageData from '@kitware/vtk.js/Common/DataModel/ImageData';
+import vtkDataArray from '@kitware/vtk.js/Common/Core/DataArray';
+import { Maybe } from '@/src/types';
+import { VtkViewApi } from '@/src/types/vtk-types';
+import { getCineImage } from '@/src/core/cine/isCineImage';
+import type DicomCineImage from '@/src/core/cine/DicomCineImage';
+import { copyDecodedFrameToRgb } from '@/src/core/cine/frameCache';
+
+type CineRenderImage = {
+  imageData: vtkImageData;
+  dataArray: vtkDataArray;
+  rgbBuffer: Uint8Array;
+};
+
+function createCineRenderImage(cineImage: DicomCineImage): CineRenderImage {
+  const source = cineImage.getVtkImageData();
+  if (!source) {
+    throw new Error('Cine image has no canonical vtkImageData');
+  }
+  const extent = source.getExtent();
+  const cols = extent[1] - extent[0] + 1;
+  const rows = extent[3] - extent[2] + 1;
+
+  const imageData = vtkImageData.newInstance();
+  imageData.setExtent(extent);
+  imageData.setSpacing(source.getSpacing());
+  imageData.setOrigin(source.getOrigin());
+  imageData.setDirection(source.getDirection());
+
+  const rgbBuffer = new Uint8Array(cols * rows * 3);
+  const dataArray = vtkDataArray.newInstance({
+    numberOfComponents: 3,
+    values: rgbBuffer,
+  });
+  dataArray.setRange({ min: 0, max: 255 }, 0);
+  dataArray.setRange({ min: 0, max: 255 }, 1);
+  dataArray.setRange({ min: 0, max: 255 }, 2);
+  imageData.getPointData().setScalars(dataArray);
+
+  return { imageData, dataArray, rgbBuffer };
+}
+
+export function useCineRendering(
+  view: VtkViewApi,
+  imageID: Ref<Maybe<string>>,
+  imageData: Ref<Maybe<vtkImageData>>,
+  frame: MaybeRefOrGetter<number | undefined>
+) {
+  const cine = computed(() => getCineImage(imageID.value));
+
+  // Per-view render buffer so two views can show different frames without
+  // fighting over a single shared scalar buffer. Published to `cineRender`
+  // only after the first decoded pixels land.
+  const cineRender = shallowRef<CineRenderImage | null>(null);
+  let localCineRender: CineRenderImage | null = null;
+
+  watchEffect((onCleanup) => {
+    const cineImage = cine.value;
+    if (!cineImage) return;
+    const local = createCineRenderImage(cineImage);
+    localCineRender = local;
+    cineRender.value = null;
+    onCleanup(() => {
+      if (localCineRender === local) {
+        localCineRender = null;
+      }
+      if (cineRender.value === local) {
+        cineRender.value = null;
+      }
+      // Let the mapper flush before we delete the vtkImageData it still holds.
+      nextTick(() => {
+        local.imageData.delete();
+      });
+    });
+  });
+
+  // A token guards against stale decodes when scrubbing rapidly.
+  let frameToken = 0;
+  watch(
+    [() => toValue(frame) ?? 0, cine],
+    ([frameIndex, cineImage]) => {
+      const target = localCineRender;
+      if (!cineImage || !target) return;
+      const myToken = ++frameToken;
+      cineImage
+        .getFrame(frameIndex)
+        .then((decoded) => {
+          if (myToken !== frameToken) return;
+          if (localCineRender !== target) return;
+          if (!copyDecodedFrameToRgb(decoded, target.rgbBuffer)) return;
+          target.dataArray.modified();
+          target.imageData.modified();
+          if (cineRender.value !== target) {
+            cineRender.value = target;
+          }
+          view.requestRender();
+        })
+        .catch(() => {
+          // getFrame already routed the error through reportError.
+        });
+    },
+    { immediate: true }
+  );
+
+  const mapperInput = computed(() => {
+    if (cine.value) return cineRender.value?.imageData;
+    return imageData.value;
+  });
+
+  return { cine, mapperInput };
+}
diff --git a/src/composables/useEffectiveView.ts b/src/composables/useEffectiveView.ts
new file mode 100644
index 000000000..780dd87dc
--- /dev/null
+++ b/src/composables/useEffectiveView.ts
@@ -0,0 +1,6 @@
+import { computed, MaybeRef, unref } from 'vue';
+import { getEffectiveView } from '@/src/core/views/effectiveView';
+
+export function useEffectiveView(viewID: MaybeRef<string>) {
+  return computed(() => getEffectiveView(unref(viewID)));
+}
diff --git a/src/composables/useSliceInfo.ts b/src/composables/useSliceInfo.ts
index 4657763c1..18a50cb4d 100644
--- a/src/composables/useSliceInfo.ts
+++ b/src/composables/useSliceInfo.ts
@@ -1,12 +1,12 @@
 import type { Vector3 } from '@kitware/vtk.js/types';
 import type { MaybeRef } from 'vue';
-import { computed, unref } from 'vue';
+import { computed } from 'vue';
 import { useImage } from '@/src/composables/useCurrentImage';
 import { Maybe } from '@/src/types';
 import { useSliceConfig } from '@/src/composables/useSliceConfig';
-import { useViewStore } from '@/src/store/views';
+import { useEffectiveView } from '@/src/composables/useEffectiveView';
+import { AXIAL_FRAME_OF_REFERENCE } from '@/src/utils/frameOfReference';
 import { get2DViewingVectors } from '@/src/utils/getViewingVectors';
-import { getEffectiveViewAxis } from '@/src/core/cine/getEffectiveViewAxis';
 
 /**
  * Returns information about the current slice.
@@ -22,14 +22,26 @@ export function useSliceInfo(
   viewID: MaybeRef<string>,
   imageID: MaybeRef<Maybe<string>>
 ) {
-  const viewStore = useViewStore();
+  const effective = useEffectiveView(viewID);
   const { metadata: imageMetadata } = useImage(imageID);
-  const view = computed(() => viewStore.getView(unref(viewID)));
   const { slice } = useSliceConfig(viewID, imageID);
   return computed(() => {
-    if (!view.value || view.value.type !== '2D') return null;
+    const eff = effective.value;
+    if (!eff) return null;
 
-    const axis = getEffectiveViewAxis(view.value, unref(imageID));
+    if (eff.kind === 'cine') {
+      return {
+        axisName: 'Axial' as const,
+        axisIndex: 2,
+        slice: 0,
+        planeNormal: AXIAL_FRAME_OF_REFERENCE.planeNormal,
+        planeOrigin: AXIAL_FRAME_OF_REFERENCE.planeOrigin,
+      };
+    }
+
+    if (eff.kind !== 'volume2D') return null;
+
+    const { axis } = eff;
     const { viewDirection } = get2DViewingVectors(axis);
     const { lpsOrientation } = imageMetadata.value;
     const planeOrigin = [0, 0, 0] as Vector3;
diff --git a/src/composables/useViewLocator.ts b/src/composables/useViewLocator.ts
new file mode 100644
index 000000000..16416ccc7
--- /dev/null
+++ b/src/composables/useViewLocator.ts
@@ -0,0 +1,38 @@
+import { computed, MaybeRef } from 'vue';
+import { Maybe } from '@/src/types';
+import { useEffectiveView } from '@/src/composables/useEffectiveView';
+import { useImage } from '@/src/composables/useCurrentImage';
+import { useSliceInfo } from '@/src/composables/useSliceInfo';
+import { useCineFrame } from '@/src/composables/useCineFrame';
+import { useFrameOfReference } from '@/src/composables/useFrameOfReference';
+import { get2DViewingVectors } from '@/src/utils/getViewingVectors';
+import { viewLocator } from '@/src/core/annotations/locator';
+
+export function useViewLocator(
+  viewID: MaybeRef<string>,
+  imageID: MaybeRef<Maybe<string>>
+) {
+  const effective = useEffectiveView(viewID);
+  const { metadata } = useImage(imageID);
+  const sliceInfo = useSliceInfo(viewID, imageID);
+  const { frame } = useCineFrame(viewID, imageID);
+
+  const slice = computed(() => sliceInfo.value?.slice ?? 0);
+  const axis = computed(() => sliceInfo.value?.axisName);
+  const viewDirection = computed(() =>
+    axis.value ? get2DViewingVectors(axis.value).viewDirection : 'Superior'
+  );
+
+  const frameOfReference = useFrameOfReference(viewDirection, slice, metadata);
+
+  const locator = computed(() =>
+    viewLocator(effective.value, {
+      slice: slice.value,
+      axis: axis.value ?? undefined,
+      frameOfReference: frameOfReference.value,
+      frame: frame.value,
+    })
+  );
+
+  return { locator, frame, slice };
+}
diff --git a/src/core/annotations/__tests__/locator.spec.ts b/src/core/annotations/__tests__/locator.spec.ts
new file mode 100644
index 000000000..838017bf4
--- /dev/null
+++ b/src/core/annotations/__tests__/locator.spec.ts
@@ -0,0 +1,57 @@
+import { describe, it, expect } from 'vitest';
+import { locatorMatches, type Locator } from '@/src/core/annotations/locator';
+import type { AnnotationTool } from '@/src/types/annotation-tool';
+import { AXIAL_FRAME_OF_REFERENCE } from '@/src/utils/frameOfReference';
+
+const baseTool = {
+  id: 'tool-1' as AnnotationTool['id'],
+  imageID: 'img-1',
+  name: 'tool',
+  color: '#fff',
+  frameOfReference: AXIAL_FRAME_OF_REFERENCE,
+};
+
+const spatialTool: AnnotationTool = {
+  ...baseTool,
+  slice: 5,
+};
+const temporalTool: AnnotationTool = {
+  ...baseTool,
+  slice: 0,
+  frame: 3,
+};
+
+const spatialHere: Locator = {
+  kind: 'spatial',
+  slice: 5,
+  axis: 'Axial',
+  frameOfReference: spatialTool.frameOfReference,
+};
+const temporalHere: Locator = { kind: 'temporal', frame: 3 };
+
+describe('locatorMatches', () => {
+  it('matches spatial tool on the same slice', () => {
+    expect(locatorMatches(spatialTool, spatialHere)).toBe(true);
+  });
+
+  it('does not match spatial tool on a different slice', () => {
+    expect(locatorMatches(spatialTool, { ...spatialHere, slice: 6 })).toBe(
+      false
+    );
+  });
+
+  it('matches temporal tool on the same frame', () => {
+    expect(locatorMatches(temporalTool, temporalHere)).toBe(true);
+  });
+
+  it('does not match temporal tool on a different frame', () => {
+    expect(locatorMatches(temporalTool, { kind: 'temporal', frame: 4 })).toBe(
+      false
+    );
+  });
+
+  it('returns false for the none locator', () => {
+    expect(locatorMatches(spatialTool, { kind: 'none' })).toBe(false);
+    expect(locatorMatches(temporalTool, { kind: 'none' })).toBe(false);
+  });
+});
diff --git a/src/core/annotations/locator.ts b/src/core/annotations/locator.ts
new file mode 100644
index 000000000..0c28d15c0
--- /dev/null
+++ b/src/core/annotations/locator.ts
@@ -0,0 +1,154 @@
+import type { Vector3 } from '@kitware/vtk.js/types';
+import type { LPSAxis } from '@/src/types/lps';
+import type { AnnotationTool } from '@/src/types/annotation-tool';
+import type { FrameOfReference } from '@/src/utils/frameOfReference';
+import {
+  AXIAL_FRAME_OF_REFERENCE,
+  frameOfReferenceToImageSliceAndAxis,
+} from '@/src/utils/frameOfReference';
+import { Maybe } from '@/src/types';
+import { useImage } from '@/src/composables/useCurrentImage';
+import { useViewStore } from '@/src/store/views';
+import useViewSliceStore from '@/src/store/view-configs/slicing';
+import useCinePlaybackStore from '@/src/store/view-configs/cine-playback';
+import {
+  computeEffectiveView,
+  EffectiveView,
+} from '@/src/core/views/effectiveView';
+
+export type Locator =
+  | { kind: 'none' }
+  | {
+      kind: 'spatial';
+      slice: number;
+      axis: LPSAxis;
+      frameOfReference: FrameOfReference;
+    }
+  | { kind: 'temporal'; frame: number }
+  | {
+      kind: 'spatiotemporal';
+      slice: number;
+      axis: LPSAxis;
+      frameOfReference: FrameOfReference;
+      frame: number;
+    };
+
+export type LocatorFields = Pick<
+  AnnotationTool,
+  'slice' | 'frameOfReference' | 'frame'
+>;
+
+export interface ViewCursors {
+  slice?: number;
+  axis?: LPSAxis;
+  frameOfReference?: FrameOfReference;
+  frame?: number;
+}
+
+export function viewLocator(
+  effective: EffectiveView | null,
+  cursors: ViewCursors
+): Locator {
+  if (!effective) return { kind: 'none' };
+  if (effective.kind === 'cine') {
+    if (cursors.frame == null) return { kind: 'none' };
+    return { kind: 'temporal', frame: cursors.frame };
+  }
+  if (effective.kind === 'volume2D') {
+    if (cursors.slice == null || !cursors.axis || !cursors.frameOfReference)
+      return { kind: 'none' };
+    return {
+      kind: 'spatial',
+      slice: cursors.slice,
+      axis: cursors.axis,
+      frameOfReference: cursors.frameOfReference,
+    };
+  }
+  return { kind: 'none' };
+}
+
+// Axis match is enforced separately by `doesToolFrameMatchViewAxis` (it needs
+// per-image metadata, which the locator deliberately does not).
+export function locatorMatches(tool: AnnotationTool, here: Locator) {
+  switch (here.kind) {
+    case 'none':
+      return false;
+    case 'temporal':
+      return tool.frame === here.frame;
+    case 'spatial':
+      return tool.slice === here.slice && !!tool.frameOfReference;
+    case 'spatiotemporal':
+      return tool.frame === here.frame && tool.slice === here.slice;
+    default:
+      return false;
+  }
+}
+
+export function locatorPatch(here: Locator): LocatorFields {
+  switch (here.kind) {
+    case 'spatial':
+      return { slice: here.slice, frameOfReference: here.frameOfReference };
+    case 'temporal':
+      return {
+        slice: 0,
+        frameOfReference: AXIAL_FRAME_OF_REFERENCE,
+        frame: here.frame,
+      };
+    case 'spatiotemporal':
+      return {
+        slice: here.slice,
+        frameOfReference: here.frameOfReference,
+        frame: here.frame,
+      };
+    case 'none':
+    default:
+      return {
+        slice: -1,
+        frameOfReference: {
+          planeOrigin: [0, 0, 0] as Vector3,
+          planeNormal: [1, 0, 0] as Vector3,
+        },
+      };
+  }
+}
+
+// Render-plane slice for a widget's plane manipulator. Cine annotations render
+// on the single 2D frame at z=0; volume annotations may pin to their own
+// slice, otherwise follow the view.
+export function toolRenderSlice(
+  tool: Maybe<Pick<AnnotationTool, 'slice' | 'frame'>>,
+  viewSlice: Maybe<number>
+): number {
+  if (!tool) return viewSlice ?? 0;
+  if (tool.frame != null) return 0;
+  return tool.slice ?? viewSlice ?? 0;
+}
+
+export function applyLocator(imageID: string, tool: AnnotationTool) {
+  const viewStore = useViewStore();
+
+  if (tool.frame != null) {
+    const activeView = viewStore.activeView;
+    if (!activeView) return;
+    useCinePlaybackStore().updateConfig(activeView, imageID, {
+      frame: tool.frame,
+    });
+    return;
+  }
+
+  const { metadata } = useImage(imageID);
+  const toolImageFrame = frameOfReferenceToImageSliceAndAxis(
+    tool.frameOfReference,
+    metadata.value,
+    { allowOutOfBoundsSlice: true }
+  );
+  if (!toolImageFrame) return;
+
+  const viewSliceStore = useViewSliceStore();
+  viewStore.getAllViews().forEach((view) => {
+    const effective = computeEffectiveView(view, imageID);
+    if (effective.kind !== 'volume2D') return;
+    if (effective.axis !== toolImageFrame.axis) return;
+    viewSliceStore.updateConfig(view.id, imageID, { slice: tool.slice });
+  });
+}
diff --git a/src/core/cine/getEffectiveViewAxis.ts b/src/core/cine/getEffectiveViewAxis.ts
deleted file mode 100644
index 3e757c414..000000000
--- a/src/core/cine/getEffectiveViewAxis.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { Maybe } from '@/src/types';
-import { LPSAxis } from '@/src/types/lps';
-import { ViewInfo2D } from '@/src/types/views';
-import { isCineImage } from './isCineImage';
-
-// Cine renders every 2D view as Axial regardless of view.options.orientation,
-// so code outside SliceViewer must go through this helper to stay in sync.
-export function getEffectiveViewAxis(
-  view: ViewInfo2D,
-  imageID: Maybe<string>
-): LPSAxis {
-  if (isCineImage(imageID)) return 'Axial';
-  return view.options.orientation;
-}
diff --git a/src/core/cine/getRenderSlice.ts b/src/core/cine/getRenderSlice.ts
deleted file mode 100644
index 341094d8e..000000000
--- a/src/core/cine/getRenderSlice.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { Maybe } from '@/src/types';
-import { isCineImage } from './isCineImage';
-
-// VTK render-slice index for a 2D mapper or widget plane. Cine images always
-// render at z=0 (frame index lives elsewhere). For volumes, an explicit
-// `toolSlice` (e.g. a ruler pinned to its own slice) wins over the view's.
-export function getRenderSlice(
-  imageID: Maybe<string>,
-  viewSlice: Maybe<number>,
-  toolSlice?: Maybe<number>
-): number {
-  if (isCineImage(imageID)) return 0;
-  return toolSlice ?? viewSlice ?? 0;
-}
diff --git a/src/core/viewTypes.ts b/src/core/viewTypes.ts
index 4d4b0bc38..b3dd99a28 100644
--- a/src/core/viewTypes.ts
+++ b/src/core/viewTypes.ts
@@ -1,23 +1,50 @@
 import SliceViewer from '@/src/components/SliceViewer.vue';
 import VolumeViewer from '@/src/components/VolumeViewer.vue';
-import { ViewInfo } from '@/src/types/views';
-import { Maybe } from '@/src/types';
 import ObliqueViewer from '@/src/components/ObliqueViewer.vue';
+import CineViewer from '@/src/components/CineViewer.vue';
+import { ViewInfo, ViewType } from '@/src/types/views';
+import { Maybe } from '@/src/types';
+import {
+  computeEffectiveView,
+  EffectiveView,
+} from '@/src/core/views/effectiveView';
 
 type ViewComponent =
   | typeof SliceViewer
   | typeof VolumeViewer
-  | typeof ObliqueViewer;
+  | typeof ObliqueViewer
+  | typeof CineViewer;
 
-export function getComponentFromViewInfo(info: ViewInfo): Maybe<ViewComponent> {
-  switch (info.type) {
-    case '2D':
+function pickComponent(kind: EffectiveView['kind'], fallbackType: ViewType) {
+  switch (kind) {
+    case 'cine':
+      return CineViewer;
+    case 'volume2D':
       return SliceViewer;
-    case '3D':
+    case 'volume3D':
       return VolumeViewer;
-    case 'Oblique':
+    case 'oblique':
+      return ObliqueViewer;
+    case 'empty':
+      if (fallbackType === '2D') return SliceViewer;
+      if (fallbackType === '3D') return VolumeViewer;
       return ObliqueViewer;
     default:
       return null;
   }
 }
+
+export function resolveSlotRendering(viewInfo: ViewInfo): {
+  component: Maybe<ViewComponent>;
+  renderImageID: Maybe<string>;
+} {
+  const effective = computeEffectiveView(viewInfo, viewInfo.dataID);
+  return {
+    component: pickComponent(effective.kind, effective.viewInfo.type),
+    renderImageID: effective.renderDataID,
+  };
+}
+
+export function getComponentFromViewInfo(info: ViewInfo) {
+  return resolveSlotRendering(info).component;
+}
diff --git a/src/core/views/__tests__/effectiveView.spec.ts b/src/core/views/__tests__/effectiveView.spec.ts
new file mode 100644
index 000000000..e55d35e54
--- /dev/null
+++ b/src/core/views/__tests__/effectiveView.spec.ts
@@ -0,0 +1,72 @@
+import { describe, it, expect, vi } from 'vitest';
+import { computeEffectiveView } from '@/src/core/views/effectiveView';
+import type {
+  ViewInfo2D,
+  ViewInfo3D,
+  ViewInfoOblique,
+} from '@/src/types/views';
+
+vi.mock('@/src/core/cine/isCineImage', () => ({
+  isCineImage: (id: string | null | undefined) => id === 'cine-image',
+  getCineImage: () => null,
+}));
+
+const view2D: ViewInfo2D = {
+  id: 'v-2d',
+  type: '2D',
+  dataID: null,
+  name: 'Axial',
+  options: { orientation: 'Axial' },
+};
+
+const view3D: ViewInfo3D = {
+  id: 'v-3d',
+  type: '3D',
+  dataID: null,
+  name: 'Volume',
+  options: { viewDirection: 'Posterior', viewUp: 'Superior' },
+};
+
+const viewOblique: ViewInfoOblique = {
+  id: 'v-ob',
+  type: 'Oblique',
+  dataID: null,
+  name: 'Oblique',
+  options: {},
+};
+
+describe('computeEffectiveView', () => {
+  it('returns empty when dataID is missing', () => {
+    expect(computeEffectiveView(view2D, null).kind).toBe('empty');
+    expect(computeEffectiveView(view3D, undefined).kind).toBe('empty');
+  });
+
+  it('returns volume2D for a 2D slot bound to a volume image', () => {
+    const eff = computeEffectiveView(view2D, 'volume-image');
+    expect(eff.kind).toBe('volume2D');
+    if (eff.kind === 'volume2D') {
+      expect(eff.axis).toBe('Axial');
+      expect(eff.renderDataID).toBe('volume-image');
+    }
+  });
+
+  it('returns volume3D for a 3D slot bound to a volume image', () => {
+    const eff = computeEffectiveView(view3D, 'volume-image');
+    expect(eff.kind).toBe('volume3D');
+  });
+
+  it('returns oblique for an Oblique slot bound to a volume image', () => {
+    const eff = computeEffectiveView(viewOblique, 'volume-image');
+    expect(eff.kind).toBe('oblique');
+  });
+
+  it('returns cine when a 2D slot is bound to a cine image', () => {
+    const eff = computeEffectiveView(view2D, 'cine-image');
+    expect(eff.kind).toBe('cine');
+  });
+
+  it('returns cine when a 3D slot is bound to a cine image (data wins)', () => {
+    const eff = computeEffectiveView(view3D, 'cine-image');
+    expect(eff.kind).toBe('cine');
+  });
+});
diff --git a/src/core/views/effectiveView.ts b/src/core/views/effectiveView.ts
new file mode 100644
index 000000000..48e2adfa0
--- /dev/null
+++ b/src/core/views/effectiveView.ts
@@ -0,0 +1,49 @@
+import type { LPSAxis } from '@/src/types/lps';
+import type {
+  ViewInfo,
+  ViewInfo2D,
+  ViewInfo3D,
+  ViewInfoOblique,
+} from '@/src/types/views';
+import type { Maybe } from '@/src/types';
+import { isCineImage } from '@/src/core/cine/isCineImage';
+import { useViewStore } from '@/src/store/views';
+
+export type EffectiveView =
+  | { kind: 'empty'; viewInfo: ViewInfo; renderDataID: null }
+  | {
+      kind: 'volume2D';
+      viewInfo: ViewInfo2D;
+      renderDataID: string;
+      axis: LPSAxis;
+    }
+  | { kind: 'volume3D'; viewInfo: ViewInfo3D; renderDataID: string }
+  | { kind: 'oblique'; viewInfo: ViewInfoOblique; renderDataID: string }
+  | { kind: 'cine'; viewInfo: ViewInfo; renderDataID: string };
+
+export function computeEffectiveView(
+  viewInfo: ViewInfo,
+  dataID: Maybe<string>
+): EffectiveView {
+  if (!dataID) return { kind: 'empty', viewInfo, renderDataID: null };
+  if (isCineImage(dataID))
+    return { kind: 'cine', viewInfo, renderDataID: dataID };
+  if (viewInfo.type === '2D') {
+    return {
+      kind: 'volume2D',
+      viewInfo,
+      renderDataID: dataID,
+      axis: viewInfo.options.orientation,
+    };
+  }
+  if (viewInfo.type === '3D')
+    return { kind: 'volume3D', viewInfo, renderDataID: dataID };
+  return { kind: 'oblique', viewInfo, renderDataID: dataID };
+}
+
+export function getEffectiveView(viewID: Maybe<string>): EffectiveView | null {
+  if (!viewID) return null;
+  const view = useViewStore().getView(viewID);
+  if (!view) return null;
+  return computeEffectiveView(view, view.dataID);
+}
diff --git a/src/io/state-file/schema.ts b/src/io/state-file/schema.ts
index ef20aac44..b36079084 100644
--- a/src/io/state-file/schema.ts
+++ b/src/io/state-file/schema.ts
@@ -341,6 +341,7 @@ const annotationTool = z.object({
   imageID: z.string(),
   frameOfReference: FrameOfReference,
   slice: z.number(),
+  frame: z.number().optional(),
   id: z.string().optional() as unknown as z.ZodType<ToolID | undefined>,
   name: z.string().optional(),
   color: z.string().optional(),
diff --git a/src/store/__tests__/rulers.spec.ts b/src/store/__tests__/rulers.spec.ts
index 95c343f27..fe4001271 100644
--- a/src/store/__tests__/rulers.spec.ts
+++ b/src/store/__tests__/rulers.spec.ts
@@ -8,7 +8,14 @@ import { ToolID } from '@/src/types/annotation-tool';
 
 function createRuler(): RequiredWithPartial<
   Ruler,
-  'id' | 'color' | 'strokeWidth' | 'label' | 'labelName' | 'hidden' | 'metadata'
+  | 'id'
+  | 'color'
+  | 'strokeWidth'
+  | 'label'
+  | 'labelName'
+  | 'hidden'
+  | 'metadata'
+  | 'frame'
 > {
   return {
     firstPoint: [1, 1, 1],
diff --git a/src/store/__tests__/views.spec.ts b/src/store/__tests__/views.spec.ts
index 7bed0c535..00fc49df0 100644
--- a/src/store/__tests__/views.spec.ts
+++ b/src/store/__tests__/views.spec.ts
@@ -1,10 +1,12 @@
 import { describe, it, beforeEach, expect, vi } from 'vitest';
 import { setActivePinia, createPinia } from 'pinia';
 import { useViewStore } from '@/src/store/views';
+import { computeEffectiveView } from '@/src/core/views/effectiveView';
 import type { Manifest } from '@/src/io/state-file/schema';
 
 vi.mock('@/src/core/cine/isCineImage', () => ({
   isCineImage: (imageID: string | null) => imageID === 'cine-image',
+  getCineImage: () => null,
 }));
 
 describe('View store', () => {
@@ -27,42 +29,32 @@ describe('View store', () => {
     expect(store.activeView).toBe(store.visibleViews[0].id);
   });
 
-  it('replaces non-2D views with axial views when cine data is attached', () => {
+  it('preserves stored view types when cine data is attached', () => {
     const store = useViewStore();
 
+    const storedTypes = store.visibleViews.map((view) => view.type);
     store.setDataForAllViews('cine-image');
 
     expect(store.visibleViews).toHaveLength(4);
-    store.visibleViews.forEach((view) => {
-      expect(view.type).toBe('2D');
+    store.visibleViews.forEach((view, idx) => {
+      expect(view.type).toBe(storedTypes[idx]);
       expect(view.dataID).toBe('cine-image');
-    });
-
-    expect(store.visibleViews[3]).toMatchObject({
-      type: '2D',
-      name: 'Axial',
-      options: {
-        orientation: 'Axial',
-      },
+      expect(computeEffectiveView(view, view.dataID).kind).toBe('cine');
     });
   });
 
-  it('keeps the active view on cine replacement', () => {
+  it('keeps the original view when cine binds to a 3D slot', () => {
     const store = useViewStore();
     const volumeView = store.visibleViews.find((view) => view.type === '3D')!;
 
     store.setActiveView(volumeView.id);
     store.setDataForView(volumeView.id, 'cine-image');
 
-    expect(store.getView(volumeView.id)).toBeNull();
-    expect(store.activeView).not.toBe(volumeView.id);
-    expect(store.getView(store.activeView)).toMatchObject({
-      type: '2D',
-      dataID: 'cine-image',
-      options: {
-        orientation: 'Axial',
-      },
-    });
+    const preserved = store.getView(volumeView.id)!;
+    expect(preserved.type).toBe('3D');
+    expect(preserved.dataID).toBe('cine-image');
+    expect(computeEffectiveView(preserved, preserved.dataID).kind).toBe('cine');
+    expect(store.activeView).toBe(volumeView.id);
   });
 
   it('selects a visible view when session data IDs are rebound', () => {
diff --git a/src/store/tools/crosshairs.ts b/src/store/tools/crosshairs.ts
index f33a491f7..01b31d549 100644
--- a/src/store/tools/crosshairs.ts
+++ b/src/store/tools/crosshairs.ts
@@ -9,7 +9,7 @@ import { Manifest, StateFile } from '@/src/io/state-file/schema';
 import { useViewStore } from '@/src/store/views';
 import useViewSliceStore from '@/src/store/view-configs/slicing';
 import { ViewInfo2D } from '@/src/types/views';
-import { getEffectiveViewAxis } from '@/src/core/cine/getEffectiveViewAxis';
+import { computeEffectiveView } from '@/src/core/views/effectiveView';
 
 export const useCrosshairsToolStore = defineStore('crosshairs', () => {
   type _This = ReturnType<typeof useCrosshairsToolStore>;
@@ -63,8 +63,9 @@ export const useCrosshairsToolStore = defineStore('crosshairs', () => {
     const { lpsOrientation } = unref(currentImageMetadata);
 
     otherViews.value.forEach((view) => {
-      const axis = getEffectiveViewAxis(view, imageID);
-      const index = lpsOrientation[axis];
+      const effective = computeEffectiveView(view, imageID);
+      if (effective.kind !== 'volume2D') return;
+      const index = lpsOrientation[effective.axis];
       const slice = Math.round(indexPos[index]);
       viewSliceStore.updateConfig(view.id, imageID, { slice });
     });
diff --git a/src/store/tools/index.ts b/src/store/tools/index.ts
index 0a95073b0..daf7071bc 100644
--- a/src/store/tools/index.ts
+++ b/src/store/tools/index.ts
@@ -2,7 +2,7 @@ import { Manifest, StateFile } from '@/src/io/state-file/schema';
 import { Maybe } from '@/src/types';
 import type { AnnotationToolStore } from '@/src/store/tools/useAnnotationTool';
 import { defineStore } from 'pinia';
-import { ref } from 'vue';
+import { ref, watch } from 'vue';
 import { useCropStore } from './crop';
 import { useCrosshairsToolStore } from './crosshairs';
 import { usePaintToolStore } from './paint';
@@ -10,6 +10,29 @@ import { useRulerStore } from './rulers';
 import { useRectangleStore } from './rectangles';
 import { AnnotationToolType, IToolStore, Tools } from './types';
 import { usePolygonStore } from './polygons';
+import { useViewStore } from '@/src/store/views';
+import {
+  EffectiveView,
+  getEffectiveView,
+} from '@/src/core/views/effectiveView';
+
+const CINE_DISALLOWED_TOOLS = new Set([
+  Tools.Paint,
+  Tools.Crop,
+  Tools.Crosshairs,
+]);
+
+export function isToolAllowedFor(tool: Tools, effective: EffectiveView | null) {
+  if (effective?.kind === 'cine' && CINE_DISALLOWED_TOOLS.has(tool))
+    return false;
+  return true;
+}
+
+const activeEffectiveView = () => getEffectiveView(useViewStore().activeView);
+
+function coerceForEffective(tool: Tools, effective: EffectiveView | null) {
+  return isToolAllowedFor(tool, effective) ? tool : Tools.Select;
+}
 
 // TODO move these types out
 export const AnnotationToolStoreMap: Record<
@@ -66,17 +89,19 @@ export const useToolStore = defineStore('tool', () => {
   const toolBeforeTemporaryCrosshairs = ref<Tools>(currentTool.value);
 
   function setCurrentTool(tool: Tools) {
-    if (currentTool.value === tool) {
+    const coerced = coerceForEffective(tool, activeEffectiveView());
+    if (currentTool.value === coerced) {
       return;
     }
-    if (!setupTool(tool)) {
+    if (!setupTool(coerced)) {
       return;
     }
     teardownTool(currentTool.value);
-    currentTool.value = tool;
+    currentTool.value = coerced;
   }
 
   function activateTemporaryCrosshairs() {
+    if (!isToolAllowedFor(Tools.Crosshairs, activeEffectiveView())) return;
     toolBeforeTemporaryCrosshairs.value = currentTool.value;
     setCurrentTool(Tools.Crosshairs);
     useCrosshairsToolStore().setDragging(true);
@@ -87,6 +112,18 @@ export const useToolStore = defineStore('tool', () => {
     setCurrentTool(toolBeforeTemporaryCrosshairs.value);
   }
 
+  watch(
+    () => activeEffectiveView()?.kind ?? null,
+    () => {
+      const eff = activeEffectiveView();
+      const coerced = coerceForEffective(currentTool.value, eff);
+      if (coerced !== currentTool.value) {
+        teardownTool(currentTool.value);
+        currentTool.value = coerced;
+      }
+    }
+  );
+
   function serialize(state: StateFile) {
     const { tools } = state.manifest;
     if (!tools) return;
@@ -118,7 +155,10 @@ export const useToolStore = defineStore('tool', () => {
       });
 
     if (manifest.tools?.current) {
-      currentTool.value = manifest.tools.current;
+      currentTool.value = coerceForEffective(
+        manifest.tools.current,
+        activeEffectiveView()
+      );
     }
   }
 
diff --git a/src/store/tools/paint.ts b/src/store/tools/paint.ts
index a1621ff5c..97fac071c 100644
--- a/src/store/tools/paint.ts
+++ b/src/store/tools/paint.ts
@@ -8,7 +8,7 @@ import { watchImmediate } from '@vueuse/core';
 import { vec3 } from 'gl-matrix';
 import { defineStore } from 'pinia';
 import { PaintMode } from '@/src/core/tools/paint';
-import { getEffectiveViewAxis } from '@/src/core/cine/getEffectiveViewAxis';
+import { computeEffectiveView } from '@/src/core/views/effectiveView';
 import { worldPointToIndex } from '@/src/utils/imageSpace';
 import { Tools } from './types';
 import { useSegmentGroupStore } from '../segmentGroups';
@@ -351,9 +351,11 @@ export const usePaintToolStore = defineStore('paint', () => {
       const view = viewStore.getView(viewID);
       if (!view || view.type !== '2D') return;
 
+      const effective = computeEffectiveView(view, imageID);
+      if (effective.kind !== 'volume2D') return;
+
       // Update slice position
-      const axis = getEffectiveViewAxis(view, imageID);
-      const index = lpsOrientation[axis];
+      const index = lpsOrientation[effective.axis];
       const slice = Math.round(indexPos[index]);
       if (slice !== sliceConfig.slice) {
         viewSliceStore.updateConfig(viewID, imageID, { slice });
diff --git a/src/store/tools/polygons.ts b/src/store/tools/polygons.ts
index 813d17e9c..574577282 100644
--- a/src/store/tools/polygons.ts
+++ b/src/store/tools/polygons.ts
@@ -127,6 +127,7 @@ export const usePolygonStore = defineAnnotationToolStore('polygon', () => {
   const sameSliceAndLabel = (a: Tool, b: Tool) =>
     a.label === b.label &&
     a.slice === b.slice &&
+    a.frame === b.frame &&
     a.frameOfReference === b.frameOfReference;
 
   const mergable = (a: Tool, b: Tool) => {
diff --git a/src/store/tools/useAnnotationTool.ts b/src/store/tools/useAnnotationTool.ts
index 57d07a500..7215a8aee 100644
--- a/src/store/tools/useAnnotationTool.ts
+++ b/src/store/tools/useAnnotationTool.ts
@@ -7,15 +7,11 @@ import {
 } from '@/src/config';
 import { removeFromArray } from '@/src/utils';
 import { useCurrentImage } from '@/src/composables/useCurrentImage';
-import { frameOfReferenceToImageSliceAndAxis } from '@/src/utils/frameOfReference';
-import { useViewStore } from '@/src/store/views';
 import { AnnotationTool, ToolID } from '@/src/types/annotation-tool';
 import { useIdStore } from '@/src/store/id';
 import { useToolSelectionStore } from '@/src/store/tools/toolSelection';
 import type { IToolStore } from '@/src/store/tools/types';
-import { getEffectiveViewAxis } from '@/src/core/cine/getEffectiveViewAxis';
-import { isCineImage } from '@/src/core/cine/isCineImage';
-import useViewSliceStore from '../view-configs/slicing';
+import { applyLocator } from '@/src/core/annotations/locator';
 import { useLabels, type Labels } from './useLabels';
 
 const annotationToolLabelDefault = Object.freeze({
@@ -128,7 +124,7 @@ export const useAnnotationTool = <
     });
   });
 
-  const { currentImageID, currentImageMetadata } = useCurrentImage('global');
+  const { currentImageID } = useCurrentImage('global');
 
   function jumpToTool(toolID: ToolID) {
     const tool = toolByID.value[toolID];
@@ -136,35 +132,7 @@ export const useAnnotationTool = <
     const imageID = currentImageID.value;
     if (!imageID || tool.imageID !== imageID) return;
 
-    // Cine images report dimensions [cols, rows, 1] but tools may live on
-    // any frame; allow out-of-bounds so we still resolve the axis.
-    const toolImageFrame = frameOfReferenceToImageSliceAndAxis(
-      tool.frameOfReference,
-      currentImageMetadata.value,
-      { allowOutOfBoundsSlice: true }
-    );
-
-    if (!toolImageFrame) return;
-
-    const viewStore = useViewStore();
-    // Cine collapses every 2D view to Axial, so without the active-view gate
-    // every cine view would jump to the same frame.
-    const restrictToActiveView = isCineImage(imageID);
-    const relevantViews = viewStore.getAllViews().filter((view) => {
-      if (view.type !== '2D') return false;
-      if (getEffectiveViewAxis(view, imageID) !== toolImageFrame.axis)
-        return false;
-      if (restrictToActiveView && view.id !== viewStore.activeView)
-        return false;
-      return true;
-    });
-
-    const viewSliceStore = useViewSliceStore();
-    relevantViews.forEach((view) => {
-      viewSliceStore.updateConfig(view.id, imageID, {
-        slice: tool.slice!,
-      });
-    });
+    applyLocator(imageID, tool);
   }
 
   const serializeTools = () => {
diff --git a/src/store/view-configs/cine-playback.ts b/src/store/view-configs/cine-playback.ts
index 385d38b45..cc7fd5bf1 100644
--- a/src/store/view-configs/cine-playback.ts
+++ b/src/store/view-configs/cine-playback.ts
@@ -8,6 +8,7 @@ import {
   getDoubleKeyRecord,
   patchDoubleKeyRecord,
 } from '@/src/utils/doubleKeyRecord';
+import { getCineImage } from '@/src/core/cine/isCineImage';
 
 export const MIN_CINE_FPS = 1;
 export const MAX_CINE_FPS = 120;
@@ -16,6 +17,7 @@ export const DEFAULT_CINE_FPS = 24;
 export interface CinePlaybackConfig {
   playing: boolean;
   fps: number;
+  frame: number;
 }
 
 export function clampCineFps(value: string | number) {
@@ -35,38 +37,49 @@ export function defaultCinePlaybackConfig(
   return {
     playing: false,
     fps: clampValue(fps, MIN_CINE_FPS, MAX_CINE_FPS),
+    frame: 0,
   };
 }
 
 export const useCinePlaybackStore = defineStore('cinePlayback', () => {
   const configs = reactive<DoubleKeyRecord<CinePlaybackConfig>>({});
 
-  const getConfig = (
-    viewID: Maybe<string>,
-    dataID: Maybe<string>,
-    frameTimeMs?: Maybe<number>
-  ) => ({
-    ...defaultCinePlaybackConfig(frameTimeMs),
-    ...getDoubleKeyRecord(configs, viewID, dataID),
-  });
+  const getConfig = (viewID: Maybe<string>, dataID: Maybe<string>) => {
+    const frameTimeMs = getCineImage(dataID)?.header.frameTimeMs;
+    return {
+      ...defaultCinePlaybackConfig(frameTimeMs),
+      ...getDoubleKeyRecord(configs, viewID, dataID),
+    };
+  };
 
+  // Hot path: playback fires at FPS rate, scrub fires per scroll tick. Detect
+  // no-op writes before materializing the merged config.
   const updateConfig = (
     viewID: string,
     dataID: string,
-    patch: Partial<CinePlaybackConfig>,
-    frameTimeMs?: Maybe<number>
+    patch: Partial<CinePlaybackConfig>
   ) => {
-    const current = getConfig(viewID, dataID, frameTimeMs);
-    const fps = patch.fps === undefined ? current.fps : clampCineFps(patch.fps);
-    const next = {
-      ...current,
-      ...patch,
-      fps: fps ?? current.fps,
-    };
+    const stored = getDoubleKeyRecord(configs, viewID, dataID);
+    const nextFps =
+      patch.fps === undefined
+        ? undefined
+        : (clampCineFps(patch.fps) ?? undefined);
 
-    if (next.playing === current.playing && next.fps === current.fps) return;
+    if (stored) {
+      const playingSame =
+        patch.playing === undefined || patch.playing === stored.playing;
+      const fpsSame = nextFps === undefined || nextFps === stored.fps;
+      const frameSame =
+        patch.frame === undefined || patch.frame === stored.frame;
+      if (playingSame && fpsSame && frameSame) return;
+    }
 
-    patchDoubleKeyRecord(configs, viewID, dataID, next);
+    const current = stored ?? getConfig(viewID, dataID);
+    patchDoubleKeyRecord(configs, viewID, dataID, {
+      ...current,
+      ...patch,
+      fps: nextFps ?? current.fps,
+    });
   };
 
   const removeView = (viewID: string) => {
diff --git a/src/store/view-configs/slicing.ts b/src/store/view-configs/slicing.ts
index 4d3b0b8ee..e87242bf1 100644
--- a/src/store/view-configs/slicing.ts
+++ b/src/store/view-configs/slicing.ts
@@ -14,7 +14,6 @@ import { ViewConfig } from '@/src/io/state-file/schema';
 import { SliceConfig } from '@/src/store/view-configs/types';
 import { useImageStore } from '@/src/store/datasets-images';
 import { useViewStore } from '@/src/store/views';
-import { getCineImage } from '@/src/core/cine/isCineImage';
 
 export const defaultSliceConfig = (): SliceConfig => ({
   slice: 0,
@@ -37,19 +36,6 @@ export const useViewSliceStore = defineStore('viewSlice', () => {
     const view = viewStore.getView(viewID);
     if (view?.type !== '2D') return defaultSliceConfig();
 
-    // Cine images report dimensions [cols, rows, 1] but the slice axis is the
-    // frame index, so override using the cine clip's frame count.
-    const cine = getCineImage(imageID);
-    if (cine) {
-      const max = Math.max(0, cine.getNumberOfFrames() - 1);
-      return {
-        min: 0,
-        slice: 0,
-        max,
-        syncState: false,
-      };
-    }
-
     const { orientation } = view.options;
     const { metadata } = useImage(imageID);
     const { lpsOrientation, dimensions } = metadata.value;
diff --git a/src/store/views.ts b/src/store/views.ts
index 2cf2821e4..f27cc71bc 100644
--- a/src/store/views.ts
+++ b/src/store/views.ts
@@ -10,7 +10,6 @@ import {
   parseNamedLayouts,
   type LayoutConfig,
 } from '@/src/utils/layoutParsing';
-import { isCineImage } from '@/src/core/cine/isCineImage';
 import type { Manifest, StateFile } from '../io/state-file/schema';
 
 const DEFAULT_VIEW_INIT: ViewInfoInit = {
@@ -266,12 +265,8 @@ export const useViewStore = defineStore('view', () => {
     const view = viewByID[viewID];
     if (!view) return;
 
-    if (dataID && isCineImage(dataID) && view.type !== '2D') {
-      replaceView(viewID, { ...DEFAULT_VIEW_INIT, dataID });
-    } else {
-      view.dataID = dataID;
-      ViewDataChangeEvent.trigger(viewID, dataID);
-    }
+    view.dataID = dataID;
+    ViewDataChangeEvent.trigger(viewID, dataID);
     // Global tools resolve their image through activeView.
     ensureActiveViewIsVisible();
   }
diff --git a/src/types/annotation-tool.ts b/src/types/annotation-tool.ts
index 61a78b584..dc2095018 100644
--- a/src/types/annotation-tool.ts
+++ b/src/types/annotation-tool.ts
@@ -14,6 +14,9 @@ export type AnnotationTool = {
   slice: number;
   frameOfReference: FrameOfReference;
 
+  // Temporal cursor. Present iff the bound image has a time axis (cine).
+  frame?: number;
+
   /**
    * Is this tool unfinished?
    */
diff --git a/src/utils/frameOfReference.ts b/src/utils/frameOfReference.ts
index fb9cc5cde..71c4a39b5 100644
--- a/src/utils/frameOfReference.ts
+++ b/src/utils/frameOfReference.ts
@@ -17,6 +17,13 @@ export interface FrameOfReference {
   planeOrigin: Vector3;
 }
 
+// Identity-axial plane used by cine annotations whose true geometry is a
+// single 2D frame: they live at z=0 with a +Z normal.
+export const AXIAL_FRAME_OF_REFERENCE: FrameOfReference = Object.freeze({
+  planeOrigin: [0, 0, 0] as Vector3,
+  planeNormal: [0, 0, 1] as Vector3,
+});
+
 export interface FrameOfReferenceToImageSliceAndAxisOptions {
   epsilon?: number;
   allowNonIntegralSlice?: boolean;
diff --git a/tests/pageobjects/volview.page.ts b/tests/pageobjects/volview.page.ts
index 7ae2653d2..7aebc7984 100644
--- a/tests/pageobjects/volview.page.ts
+++ b/tests/pageobjects/volview.page.ts
@@ -248,13 +248,17 @@ class VolViewPage extends Page {
   }
 
   async getView2D() {
-    const view2D = $('div[data-testid="vtk-view vtk-two-view"]');
+    const view2D = $(
+      'div[data-testid~="vtk-two-view"], div[data-testid~="vtk-cine-view"]'
+    );
     const exists = await view2D.isExisting();
     return exists ? view2D : null;
   }
 
   async getViews2D() {
-    const views2D = $$('div[data-testid="vtk-view vtk-two-view"]');
+    const views2D = $$(
+      'div[data-testid~="vtk-two-view"], div[data-testid~="vtk-cine-view"]'
+    );
     return views2D;
   }
 
@@ -267,7 +271,7 @@ class VolViewPage extends Page {
       async () => {
         const counts = await browser.execute(() => ({
           view2DCount: document.querySelectorAll(
-            'div[data-testid="vtk-view vtk-two-view"]'
+            'div[data-testid~="vtk-two-view"], div[data-testid~="vtk-cine-view"]'
           ).length,
           view3DExists:
             document.querySelector(
@@ -356,7 +360,7 @@ class VolViewPage extends Page {
       const overlayText = views[0].textContent;
       const match = overlayText?.match(/Slice:\s*(\d+)/);
       return match ? parseInt(match[1], 10) : null;
-    }, 'div[data-testid="vtk-view vtk-two-view"]');
+    }, 'div[data-testid~="vtk-two-view"], div[data-testid~="vtk-cine-view"]');
   }
 
   async waitForSliceDecrease(initialSlice: number | null) {
diff --git a/tests/specs/cine-drag-onto-slot.e2e.ts b/tests/specs/cine-drag-onto-slot.e2e.ts
new file mode 100644
index 000000000..66e57f192
--- /dev/null
+++ b/tests/specs/cine-drag-onto-slot.e2e.ts
@@ -0,0 +1,109 @@
+// Validates the effective-view round-trip: the default 2x2 layout's 4th slot
+// stores a 3D viewInfo. When cine binds to it, the slot renders as
+// CineViewer (data wins over slot type). Dragging a volume onto that same
+// slot reverts it to VolumeViewer because viewInfo was never mutated.
+import { CINE_US_DATASET, PROSTATEX_DATASET } from './configTestUtils';
+import { downloadFile, openUrls } from './utils';
+import { volViewPage } from '../pageobjects/volview.page';
+
+const IMAGE_DRAG_MEDIA_TYPE = 'application/x-volview-image-id';
+
+// Dispatches a real dragstart on the source card (so the app's own handler
+// stamps the imageID into the dataTransfer), then synthesizes drop on the
+// target grid-item. Stays on the user-facing path (DOM only).
+async function dragCardOntoGridItem(
+  sourceCardSelector: string,
+  targetGridItemIndex: number
+): Promise<boolean> {
+  return browser.execute(
+    (cardSelector: string, gridItemIdx: number, mediaType: string) => {
+      const card = document.querySelector(cardSelector) as HTMLElement | null;
+      if (!card) return false;
+
+      const gridItems = document.querySelectorAll('.grid-item');
+      const gridItem = gridItems[gridItemIdx] as HTMLElement | undefined;
+      if (!gridItem) return false;
+
+      const data = new DataTransfer();
+      card.dispatchEvent(
+        new DragEvent('dragstart', { bubbles: true, dataTransfer: data })
+      );
+      if (!data.getData(mediaType)) return false;
+
+      gridItem.dispatchEvent(
+        new DragEvent('dragenter', { bubbles: true, dataTransfer: data })
+      );
+      gridItem.dispatchEvent(
+        new DragEvent('drop', { bubbles: true, dataTransfer: data })
+      );
+      return true;
+    },
+    sourceCardSelector,
+    targetGridItemIndex,
+    IMAGE_DRAG_MEDIA_TYPE
+  );
+}
+
+// Returns one of 'cine' | 'volume' | 'two' | 'empty' for a given grid-item.
+async function gridItemKind(index: number) {
+  return browser.execute((idx: number) => {
+    const item = document.querySelectorAll('.grid-item')[idx] as
+      | HTMLElement
+      | undefined;
+    if (!item) return 'missing';
+    if (item.querySelector('[data-testid~="vtk-cine-view"]')) return 'cine';
+    if (item.querySelector('[data-testid~="vtk-volume-view"]')) return 'volume';
+    if (item.querySelector('[data-testid~="vtk-two-view"]')) return 'two';
+    return 'empty';
+  }, index);
+}
+
+describe('Drag cine onto a non-2D slot', () => {
+  it('cine renders in the 3D slot; dropping a volume reverts the slot to 3D', async () => {
+    await downloadFile(PROSTATEX_DATASET.url, PROSTATEX_DATASET.name);
+    await openUrls([PROSTATEX_DATASET, CINE_US_DATASET]);
+    await volViewPage.waitForViews();
+    await browser.waitUntil(
+      async () => (await $$('.volume-card').length) >= 2,
+      { timeout: 30000, timeoutMsg: 'Expected both volume cards to appear' }
+    );
+    // Four Up layout: axial / coronal / sagittal / volume(3D), 4 grid-items.
+    await browser.waitUntil(async () => (await $$('.grid-item').length) === 4, {
+      timeout: 10000,
+      timeoutMsg: 'Expected the Four Up layout (4 slots)',
+    });
+
+    // Cine auto-binds to every slot on initial load, including the 3D-stored
+    // slot — that's the "data wins over slot type" half of the contract.
+    await browser.waitUntil(async () => (await gridItemKind(3)) === 'cine', {
+      timeout: 10000,
+      timeoutMsg: 'Expected the 3D slot to render as cine after load',
+    });
+
+    // Identify the volume card: the one currently NOT mounted to any view.
+    // It's the non-active card in the patient browser. Stamp a unique class
+    // so we can re-query stably.
+    const volumeCardClass = await browser.execute(() => {
+      const cards = Array.from(
+        document.querySelectorAll('.volume-card')
+      ) as HTMLElement[];
+      const volumeCard = cards.find(
+        (c) => !c.classList.contains('volume-card-active')
+      );
+      if (!volumeCard) return null;
+      volumeCard.classList.add('e2e-volume-card');
+      return 'e2e-volume-card';
+    });
+    expect(volumeCardClass).toBe('e2e-volume-card');
+
+    const dropped = await dragCardOntoGridItem('.e2e-volume-card', 3);
+    expect(dropped).toBe(true);
+
+    // The slot's stored 3D viewInfo was never mutated → swap back to volume.
+    await browser.waitUntil(async () => (await gridItemKind(3)) === 'volume', {
+      timeout: 10000,
+      timeoutMsg:
+        'Expected the slot to revert to VolumeViewer after the volume drop',
+    });
+  });
+});
diff --git a/tests/specs/cine-rendering.e2e.ts b/tests/specs/cine-rendering.e2e.ts
index 2a25f932a..fe98e69d0 100644
--- a/tests/specs/cine-rendering.e2e.ts
+++ b/tests/specs/cine-rendering.e2e.ts
@@ -8,7 +8,7 @@ import { downloadFile, openUrls, writeManifestToFile } from './utils';
 
 const PLAY_CONTROLS = '.play-controls';
 const FRAME_LABEL = '.view-annotations .frame-label';
-const VIEW_SELECTOR = 'div[data-testid="vtk-view vtk-two-view"]';
+const VIEW_SELECTOR = 'div[data-testid="vtk-view vtk-cine-view"]';
 
 function parseFrameLabel(text: string) {
   const match = text.trim().match(/^Frame:\s*(\d+)\s*\/\s*(\d+)$/);
diff --git a/tests/specs/cine-ruler-mid-placement.e2e.ts b/tests/specs/cine-ruler-mid-placement.e2e.ts
new file mode 100644
index 000000000..2be86f8c7
--- /dev/null
+++ b/tests/specs/cine-ruler-mid-placement.e2e.ts
@@ -0,0 +1,59 @@
+// A placing widget must reset when the cine frame cursor moves mid-placement.
+// Otherwise the user can click the first point on frame N, scroll to frame M,
+// click again, and commit a ruler whose two endpoints were drawn on different
+// frames but whose tool.frame is M — silently wrong geometry.
+//
+// Distinguishing a *committed* ruler from a degenerate placing-tool point at
+// click time is fragile (both render an svg <line>), so we scrub off the
+// click frame and back. A committed (buggy) ruler persists; an unfinished
+// placing tool is wiped by the reset on the second scroll.
+import { CINE_US_DATASET } from './configTestUtils';
+import { openUrls } from './utils';
+import { volViewPage } from '../pageobjects/volview.page';
+import {
+  advanceCineFrame,
+  clickAt,
+  countCineRulerLines,
+  getCineCanvasCenter,
+  getCineFrame,
+  retreatCineFrame,
+  waitForFrame,
+} from './cineTestUtils';
+
+describe('Cine placing widget resets on frame change', () => {
+  it('does not commit a ruler whose clicks span two cine frames', async () => {
+    await openUrls([CINE_US_DATASET]);
+    await $('.play-controls').waitForDisplayed();
+    await waitForFrame(1);
+
+    await volViewPage.focusFirst2DView();
+    await advanceCineFrame();
+    await advanceCineFrame();
+    const firstClickFrame = (await getCineFrame())!;
+    expect(firstClickFrame).toBeGreaterThan(1);
+
+    const rulerToolButton = await $('button span i[class~=mdi-ruler]');
+    await rulerToolButton.click();
+
+    const { cx, cy } = await getCineCanvasCenter();
+    await clickAt(cx - 40, cy);
+
+    await advanceCineFrame();
+    await advanceCineFrame();
+    const secondClickFrame = (await getCineFrame())!;
+    expect(secondClickFrame).not.toBe(firstClickFrame);
+
+    await clickAt(cx + 40, cy);
+
+    // Scroll off the click frame and back. This wipes any unfinished
+    // placement (which would render a degenerate <line>) and leaves only
+    // *committed* rulers. A correctly-reset placement contributes nothing
+    // here; a buggy cross-frame commit shows up as a 1-line ruler on the
+    // click frame.
+    await advanceCineFrame();
+    await retreatCineFrame();
+    expect(await getCineFrame()).toBe(secondClickFrame);
+
+    expect(await countCineRulerLines()).toBe(0);
+  });
+});
diff --git a/tests/specs/cine-ruler-session.e2e.ts b/tests/specs/cine-ruler-session.e2e.ts
new file mode 100644
index 000000000..a68ee09f6
--- /dev/null
+++ b/tests/specs/cine-ruler-session.e2e.ts
@@ -0,0 +1,96 @@
+// Validates that the schema/serializer round-trips the cine annotation
+// `frame` field: a ruler placed on cine frame N reloads visible only at
+// frame N. A regression in either the zod schema or addTool defaults would
+// silently lose the per-frame association.
+import * as path from 'path';
+import { CINE_US_DATASET } from './configTestUtils';
+import { openUrls, waitForFileExists } from './utils';
+import { volViewPage } from '../pageobjects/volview.page';
+import { TEMP_DIR } from '../../wdio.shared.conf';
+import {
+  advanceCineFrame,
+  clickAt,
+  countCineRulerLines,
+  getCineCanvasCenter,
+  getCineFrame,
+  waitForFrame,
+} from './cineTestUtils';
+
+const SESSION_SAVE_TIMEOUT = 40000;
+
+const placeRulerAtCanvasCenter = async () => {
+  const rulerToolButton = await $('button span i[class~=mdi-ruler]');
+  await rulerToolButton.click();
+  const { cx, cy } = await getCineCanvasCenter();
+  await clickAt(cx - 40, cy);
+  await clickAt(cx + 40, cy);
+};
+
+describe('Cine ruler survives save/reload at its placed frame', () => {
+  it('reloads with the ruler hidden on frame 1 and visible on the placed frame', async () => {
+    await openUrls([CINE_US_DATASET]);
+    await $('.play-controls').waitForDisplayed();
+    await waitForFrame(1);
+
+    // Scrub to a non-default frame so a regression dropping `frame` would
+    // pin the ruler to frame 0 — visually indistinguishable from "ruler
+    // attached but tagged with the wrong frame".
+    await volViewPage.focusFirst2DView();
+    await advanceCineFrame();
+    await advanceCineFrame();
+    const placementFrame = (await getCineFrame())!;
+    expect(placementFrame).toBeGreaterThan(1);
+
+    await placeRulerAtCanvasCenter();
+    await browser.waitUntil(async () => (await countCineRulerLines()) >= 1, {
+      timeoutMsg: 'Expected the placed ruler line to render',
+    });
+
+    // Save → wait for the .zip on disk.
+    const sessionFileName = await volViewPage.saveSession();
+    await waitForFileExists(
+      path.join(TEMP_DIR, sessionFileName),
+      SESSION_SAVE_TIMEOUT
+    );
+
+    // Reload from the saved session — opens a fresh app state.
+    await volViewPage.open(`?urls=[tmp/${sessionFileName}]`);
+    await volViewPage.waitForViews();
+    await $('.play-controls').waitForDisplayed({ timeout: 30000 });
+    await waitForFrame(1);
+
+    // Wait for the deserialized ruler to surface in the Measurements list
+    // before asserting it's hidden on the canvas. Without this anchor a
+    // regression that loses `frame` (ruler tagged frame 1 instead) could
+    // race the assertion and pass for the wrong reason; the list entry
+    // proves deserialization has completed.
+    const annotationsTab = await $(
+      'button[data-testid="module-tab-Annotations"]'
+    );
+    await annotationsTab.click();
+    const measurementsTab = await $('button.v-tab*=Measurements');
+    await measurementsTab.waitForClickable();
+    await measurementsTab.click();
+    await browser.waitUntil(
+      async () => (await $$('.v-list-item i.mdi-ruler.tool-icon').length) >= 1,
+      {
+        timeoutMsg:
+          'Expected the deserialized ruler entry to appear in the list',
+      }
+    );
+
+    // On reload the cursor lives at frame 1 (playback frame is not
+    // persisted). The ruler must be hidden here — if `frame` was lost
+    // during serialize/deserialize, it would render at frame 1 instead.
+    expect(await countCineRulerLines()).toBe(0);
+
+    // Scrub forward to the placement frame and the ruler should reappear.
+    await volViewPage.focusFirst2DView();
+    while ((await getCineFrame())! < placementFrame) {
+      await advanceCineFrame();
+    }
+    await browser.waitUntil(async () => (await countCineRulerLines()) >= 1, {
+      timeoutMsg: `Expected the ruler to reappear at the placement frame (${placementFrame}) after reload`,
+    });
+  });
+});
diff --git a/tests/specs/cineTestUtils.ts b/tests/specs/cineTestUtils.ts
new file mode 100644
index 000000000..8f25786f6
--- /dev/null
+++ b/tests/specs/cineTestUtils.ts
@@ -0,0 +1,56 @@
+import { Key } from 'webdriverio';
+
+export const CINE_VIEW_SELECTOR = 'div[data-testid="vtk-view vtk-cine-view"]';
+export const FRAME_LABEL_SELECTOR = '.view-annotations .frame-label';
+
+export const getCineFrame = async () => {
+  const text = (await $(FRAME_LABEL_SELECTOR).getText()).trim();
+  const match = text.match(/^Frame:\s*(\d+)\s*\/\s*\d+/);
+  return match ? parseInt(match[1], 10) : null;
+};
+
+export const waitForFrame = async (expected: number) => {
+  await browser.waitUntil(async () => (await getCineFrame()) === expected, {
+    timeoutMsg: `Expected cine frame to reach ${expected}`,
+  });
+};
+
+const stepCineFrame = (key: string, label: string) => async () => {
+  const before = await getCineFrame();
+  await browser.keys([key]);
+  await browser.waitUntil(
+    async () => {
+      const now = await getCineFrame();
+      return now !== null && now !== before;
+    },
+    { timeoutMsg: `Cine frame counter did not ${label}` }
+  );
+};
+
+export const advanceCineFrame = stepCineFrame(Key.ArrowUp, 'advance');
+export const retreatCineFrame = stepCineFrame(Key.ArrowDown, 'retreat');
+
+export const countCineRulerLines = () =>
+  browser.execute((selector: string) => {
+    const view = document.querySelector(selector);
+    return view ? view.querySelectorAll('svg line').length : -1;
+  }, CINE_VIEW_SELECTOR);
+
+export const getCineCanvasCenter = async () => {
+  const view = await $(CINE_VIEW_SELECTOR);
+  const canvas = await view.$('canvas');
+  const loc = await canvas.getLocation();
+  const size = await canvas.getSize();
+  return {
+    cx: loc.x + size.width / 2,
+    cy: loc.y + size.height / 2,
+  };
+};
+
+export const clickAt = (x: number, y: number) =>
+  browser
+    .action('pointer')
+    .move({ x: Math.round(x), y: Math.round(y) })
+    .down()
+    .up()
+    .perform();
diff --git a/tests/specs/reveal-slice.e2e.ts b/tests/specs/reveal-slice.e2e.ts
index 414f85940..5134dbb91 100644
--- a/tests/specs/reveal-slice.e2e.ts
+++ b/tests/specs/reveal-slice.e2e.ts
@@ -1,7 +1,12 @@
-import { Key } from 'webdriverio';
 import { CINE_US_DATASET, PROSTATEX_DATASET } from './configTestUtils';
 import { downloadFile, openUrls } from './utils';
 import { volViewPage } from '../pageobjects/volview.page';
+import {
+  advanceCineFrame,
+  countCineRulerLines,
+  getCineFrame,
+  waitForFrame,
+} from './cineTestUtils';
 
 const openMeasurementsTab = async () => {
   const annotationsTab = await $(
@@ -109,33 +114,6 @@ describe('Reveal Slice on a volume image', () => {
 
 // --- cine ultrasound --------------------------------------------------
 
-const FRAME_LABEL_SELECTOR = '.view-annotations .frame-label';
-
-const getCineFrame = async () => {
-  const frameLabel = await $(FRAME_LABEL_SELECTOR);
-  const text = (await frameLabel.getText()).trim();
-  const match = text.match(/^Frame:\s*(\d+)\s*\/\s*\d+/);
-  return match ? parseInt(match[1], 10) : null;
-};
-
-const waitForFrame = async (expected: number) => {
-  await browser.waitUntil(async () => (await getCineFrame()) === expected, {
-    timeoutMsg: `Expected cine frame to reach ${expected}`,
-  });
-};
-
-const advanceCineFrame = async () => {
-  const before = await getCineFrame();
-  await browser.keys([Key.ArrowUp]);
-  await browser.waitUntil(
-    async () => {
-      const now = await getCineFrame();
-      return now !== null && now !== before;
-    },
-    { timeoutMsg: 'Cine frame counter did not advance' }
-  );
-};
-
 describe('Reveal Slice on cine ultrasound', () => {
   it('ruler Reveal Slice jumps to the cine frame the ruler was placed on', async () => {
     await openUrls([CINE_US_DATASET]);
@@ -155,11 +133,23 @@ describe('Reveal Slice on cine ultrasound', () => {
 
     await placeRulerAtCanvasCenter();
 
+    // Sanity check: the committed ruler is visible on the frame it was placed.
+    await browser.waitUntil(async () => (await countCineRulerLines()) >= 1, {
+      timeoutMsg: 'Expected the placed ruler line to render on the cine frame',
+    });
+
     await advanceCineFrame();
     await advanceCineFrame();
     const movedFrame = await getCineFrame();
     expect(movedFrame).not.toBe(placementFrame);
 
+    // Off the placement frame: the committed ruler must not render. The
+    // placing-tool stub has no points yet and so contributes no <line>.
+    await browser.waitUntil(async () => (await countCineRulerLines()) === 0, {
+      timeoutMsg:
+        'Expected the placed ruler to be hidden on frames other than the placement frame',
+    });
+
     await openMeasurementsTab();
     await waitForToolEntry('mdi-ruler');
 
diff --git a/tests/specs/ultrasound-spacing.e2e.ts b/tests/specs/ultrasound-spacing.e2e.ts
index 2b9fe46e4..51d7a8677 100644
--- a/tests/specs/ultrasound-spacing.e2e.ts
+++ b/tests/specs/ultrasound-spacing.e2e.ts
@@ -20,7 +20,7 @@ describe('Ultrasound image spacing', () => {
 
     // element.click({ x, y }) offsets are measured from the element's center,
     // so x:0 / y:0 is the canvas center.
-    const canvas = await $('div[data-testid="vtk-view vtk-two-view"] canvas');
+    const canvas = await $('div[data-testid="vtk-view vtk-cine-view"] canvas');
 
     await canvas.click({ x: 0, y: -CLICK_DY / 2 });
     await canvas.click({ x: 0, y: CLICK_DY / 2 });
diff --git a/tests/specs/vtk-interactor-lifecycle.e2e.ts b/tests/specs/vtk-interactor-lifecycle.e2e.ts
index 2331949e6..24fd741cb 100644
--- a/tests/specs/vtk-interactor-lifecycle.e2e.ts
+++ b/tests/specs/vtk-interactor-lifecycle.e2e.ts
@@ -1,7 +1,7 @@
 import { COLOR3D_JPEG_BASELINE_DICOM } from './configTestUtils';
 import { openUrls } from './utils';
 
-const VIEW_SELECTOR = 'div[data-testid="vtk-view vtk-two-view"]';
+const VIEW_SELECTOR = 'div[data-testid="vtk-view vtk-cine-view"]';
 const DELETED_INSTANCE_ERROR = 'instance deleted - cannot call any method';
 
 type BrowserLogEntry = { text: string | null };

From 9f2cf3a4cbd9897deb9659f3e3e79bd7671e5c02 Mon Sep 17 00:00:00 2001
From: Paul Elliott <paul@vizworkshop.com>
Date: Sun, 17 May 2026 17:24:05 -0400
Subject: [PATCH 07/12] refactor(cine): remove dead locator and header fields

---
 .../annotations/__tests__/locator.spec.ts     | 57 -------------------
 src/core/annotations/locator.ts               | 32 ++---------
 .../cine/__tests__/DicomCineImage.spec.ts     | 10 ----
 src/core/cine/parseCineDicom.ts               | 18 ------
 .../__tests__/datasets-dicom-cine.spec.ts     |  2 -
 5 files changed, 6 insertions(+), 113 deletions(-)
 delete mode 100644 src/core/annotations/__tests__/locator.spec.ts

diff --git a/src/core/annotations/__tests__/locator.spec.ts b/src/core/annotations/__tests__/locator.spec.ts
deleted file mode 100644
index 838017bf4..000000000
--- a/src/core/annotations/__tests__/locator.spec.ts
+++ /dev/null
@@ -1,57 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { locatorMatches, type Locator } from '@/src/core/annotations/locator';
-import type { AnnotationTool } from '@/src/types/annotation-tool';
-import { AXIAL_FRAME_OF_REFERENCE } from '@/src/utils/frameOfReference';
-
-const baseTool = {
-  id: 'tool-1' as AnnotationTool['id'],
-  imageID: 'img-1',
-  name: 'tool',
-  color: '#fff',
-  frameOfReference: AXIAL_FRAME_OF_REFERENCE,
-};
-
-const spatialTool: AnnotationTool = {
-  ...baseTool,
-  slice: 5,
-};
-const temporalTool: AnnotationTool = {
-  ...baseTool,
-  slice: 0,
-  frame: 3,
-};
-
-const spatialHere: Locator = {
-  kind: 'spatial',
-  slice: 5,
-  axis: 'Axial',
-  frameOfReference: spatialTool.frameOfReference,
-};
-const temporalHere: Locator = { kind: 'temporal', frame: 3 };
-
-describe('locatorMatches', () => {
-  it('matches spatial tool on the same slice', () => {
-    expect(locatorMatches(spatialTool, spatialHere)).toBe(true);
-  });
-
-  it('does not match spatial tool on a different slice', () => {
-    expect(locatorMatches(spatialTool, { ...spatialHere, slice: 6 })).toBe(
-      false
-    );
-  });
-
-  it('matches temporal tool on the same frame', () => {
-    expect(locatorMatches(temporalTool, temporalHere)).toBe(true);
-  });
-
-  it('does not match temporal tool on a different frame', () => {
-    expect(locatorMatches(temporalTool, { kind: 'temporal', frame: 4 })).toBe(
-      false
-    );
-  });
-
-  it('returns false for the none locator', () => {
-    expect(locatorMatches(spatialTool, { kind: 'none' })).toBe(false);
-    expect(locatorMatches(temporalTool, { kind: 'none' })).toBe(false);
-  });
-});
diff --git a/src/core/annotations/locator.ts b/src/core/annotations/locator.ts
index 0c28d15c0..ee7222783 100644
--- a/src/core/annotations/locator.ts
+++ b/src/core/annotations/locator.ts
@@ -38,16 +38,14 @@ export type LocatorFields = Pick<
   'slice' | 'frameOfReference' | 'frame'
 >;
 
-export interface ViewCursors {
-  slice?: number;
-  axis?: LPSAxis;
-  frameOfReference?: FrameOfReference;
-  frame?: number;
-}
-
 export function viewLocator(
   effective: EffectiveView | null,
-  cursors: ViewCursors
+  cursors: {
+    slice?: number;
+    axis?: LPSAxis;
+    frameOfReference?: FrameOfReference;
+    frame?: number;
+  }
 ): Locator {
   if (!effective) return { kind: 'none' };
   if (effective.kind === 'cine') {
@@ -67,23 +65,6 @@ export function viewLocator(
   return { kind: 'none' };
 }
 
-// Axis match is enforced separately by `doesToolFrameMatchViewAxis` (it needs
-// per-image metadata, which the locator deliberately does not).
-export function locatorMatches(tool: AnnotationTool, here: Locator) {
-  switch (here.kind) {
-    case 'none':
-      return false;
-    case 'temporal':
-      return tool.frame === here.frame;
-    case 'spatial':
-      return tool.slice === here.slice && !!tool.frameOfReference;
-    case 'spatiotemporal':
-      return tool.frame === here.frame && tool.slice === here.slice;
-    default:
-      return false;
-  }
-}
-
 export function locatorPatch(here: Locator): LocatorFields {
   switch (here.kind) {
     case 'spatial':
@@ -101,7 +82,6 @@ export function locatorPatch(here: Locator): LocatorFields {
         frame: here.frame,
       };
     case 'none':
-    default:
       return {
         slice: -1,
         frameOfReference: {
diff --git a/src/core/cine/__tests__/DicomCineImage.spec.ts b/src/core/cine/__tests__/DicomCineImage.spec.ts
index 5a1e7220b..41dffbdad 100644
--- a/src/core/cine/__tests__/DicomCineImage.spec.ts
+++ b/src/core/cine/__tests__/DicomCineImage.spec.ts
@@ -38,8 +38,6 @@ function cineHeader(overrides: Partial<CineHeader> = {}): CineHeader {
       SeriesNumber: '1',
       SeriesDescription: 'Cine',
       Modality: 'US',
-      SOPInstanceUID: 'sop-uid',
-      SOPClassUID: '1.2.840.10008.5.1.4.1.1.3.1',
     },
     regions: [],
     ...overrides,
@@ -140,20 +138,12 @@ describe('DicomCineImage spacing', () => {
         cineHeader({
           regions: [
             {
-              minX0: 0,
-              minY0: 0,
-              maxX1: 1,
-              maxY1: 1,
               physicalDeltaX: 10,
               physicalDeltaY: 10,
               physicalUnitsX: 1,
               physicalUnitsY: 3,
             },
             {
-              minX0: 0,
-              minY0: 0,
-              maxX1: 1,
-              maxY1: 1,
               physicalDeltaX: -0.05,
               physicalDeltaY: 0.125,
               physicalUnitsX: 3,
diff --git a/src/core/cine/parseCineDicom.ts b/src/core/cine/parseCineDicom.ts
index 8380f763f..0ddb5a41f 100644
--- a/src/core/cine/parseCineDicom.ts
+++ b/src/core/cine/parseCineDicom.ts
@@ -5,8 +5,6 @@ import dicomParser, { DataSet, Element } from 'dicom-parser';
 // =================================================================
 
 const TAG_PIXEL_DATA = 'x7fe00010';
-const TAG_SOP_CLASS_UID = 'x00080016';
-const TAG_SOP_INSTANCE_UID = 'x00080018';
 const TAG_PATIENT_NAME = 'x00100010';
 const TAG_PATIENT_ID = 'x00100020';
 const TAG_PATIENT_BIRTH_DATE = 'x00100030';
@@ -31,10 +29,6 @@ const TAG_FRAME_TIME = 'x00181063';
 const TAG_SEQUENCE_OF_ULTRASOUND_REGIONS = 'x00186011';
 const TAG_PLANAR_CONFIGURATION = 'x00280006';
 
-const TAG_REGION_LOCATION_MIN_X0 = 'x00186018';
-const TAG_REGION_LOCATION_MIN_Y0 = 'x0018601a';
-const TAG_REGION_LOCATION_MAX_X1 = 'x0018601c';
-const TAG_REGION_LOCATION_MAX_Y1 = 'x0018601e';
 const TAG_PHYSICAL_UNITS_X = 'x00186024';
 const TAG_PHYSICAL_UNITS_Y = 'x00186026';
 const TAG_PHYSICAL_DELTA_X = 'x0018602c';
@@ -47,10 +41,6 @@ const TAG_TRANSFER_SYNTAX_UID = 'x00020010';
 // =================================================================
 
 type CineUltrasoundRegion = {
-  minX0: number;
-  minY0: number;
-  maxX1: number;
-  maxY1: number;
   physicalDeltaX: number | null;
   physicalDeltaY: number | null;
   physicalUnitsX: number | null;
@@ -78,8 +68,6 @@ type CineSeriesInfo = {
   SeriesNumber: string;
   SeriesDescription: string;
   Modality: string;
-  SOPInstanceUID: string;
-  SOPClassUID: string;
 };
 
 export type CineHeader = {
@@ -130,10 +118,6 @@ const readDecimalString = (ds: DataSet, tag: string): number | null => {
 
 function buildRegion(item: DataSet): CineUltrasoundRegion {
   return {
-    minX0: u16(item, TAG_REGION_LOCATION_MIN_X0),
-    minY0: u16(item, TAG_REGION_LOCATION_MIN_Y0),
-    maxX1: u16(item, TAG_REGION_LOCATION_MAX_X1),
-    maxY1: u16(item, TAG_REGION_LOCATION_MAX_Y1),
     physicalDeltaX: readDouble(item, TAG_PHYSICAL_DELTA_X),
     physicalDeltaY: readDouble(item, TAG_PHYSICAL_DELTA_Y),
     physicalUnitsX: u16(item, TAG_PHYSICAL_UNITS_X) || null,
@@ -259,8 +243,6 @@ export function parseCineDicom(
       SeriesNumber: str(ds, TAG_SERIES_NUMBER),
       SeriesDescription: str(ds, TAG_SERIES_DESCRIPTION),
       Modality: str(ds, TAG_MODALITY),
-      SOPInstanceUID: str(ds, TAG_SOP_INSTANCE_UID),
-      SOPClassUID: str(ds, TAG_SOP_CLASS_UID),
     },
     regions,
   };
diff --git a/src/store/__tests__/datasets-dicom-cine.spec.ts b/src/store/__tests__/datasets-dicom-cine.spec.ts
index 10ee4af24..3ee060b5a 100644
--- a/src/store/__tests__/datasets-dicom-cine.spec.ts
+++ b/src/store/__tests__/datasets-dicom-cine.spec.ts
@@ -139,8 +139,6 @@ function cineHeader(overrides: Partial<CineHeader> = {}): CineHeader {
       SeriesNumber: '7',
       SeriesDescription: 'Unsupported native cine',
       Modality: 'US',
-      SOPInstanceUID: 'sop-uid',
-      SOPClassUID: SOP_CLASS_ULTRASOUND_MULTIFRAME,
     },
     regions: [],
     ...overrides,

From 179cd1f42bfa420b1ab6dc049f286807a89e9442 Mon Sep 17 00:00:00 2001
From: Paul Elliott <paul@vizworkshop.com>
Date: Sun, 17 May 2026 17:26:19 -0400
Subject: [PATCH 08/12] refactor(types): prefer aliases in touched modules

---
 src/components/SliceViewer.vue                |  4 ++--
 src/components/SliceViewerOverlay.vue         |  4 ++--
 src/components/vtk/VtkSliceView.vue           |  4 ++--
 .../vtk/VtkSliceViewSlicingKeyManipulator.vue |  4 ++--
 .../vtk/VtkSliceViewSlicingManipulator.vue    |  4 ++--
 src/core/cine/jpegDecode.worker.ts            |  4 ++--
 src/core/dicomTags.ts                         |  4 ++--
 src/core/progressiveImage.ts                  |  4 ++--
 src/core/streaming/chunkImage.ts              | 12 +++++------
 src/io/state-file/schema.ts                   |  4 ++--
 src/store/datasets-dicom.ts                   | 20 +++++++++----------
 src/store/segmentGroups.ts                    |  4 ++--
 src/store/tools/useAnnotationTool.ts          |  4 ++--
 src/store/view-configs/cine-playback.ts       |  4 ++--
 src/utils/frameOfReference.ts                 |  8 ++++----
 15 files changed, 44 insertions(+), 44 deletions(-)

diff --git a/src/components/SliceViewer.vue b/src/components/SliceViewer.vue
index 9ba126002..132f61ad0 100644
--- a/src/components/SliceViewer.vue
+++ b/src/components/SliceViewer.vue
@@ -197,9 +197,9 @@ import { useViewStore } from '@/src/store/views';
 import { ViewInfo2D } from '@/src/types/views';
 import { get2DViewingVectors } from '@/src/utils/getViewingVectors';
 
-interface Props {
+type Props = {
   viewId: string;
-}
+};
 
 const vtkView = ref<VtkViewApi>();
 const baseSliceRep = ref();
diff --git a/src/components/SliceViewerOverlay.vue b/src/components/SliceViewerOverlay.vue
index 7165e8160..bf851715e 100644
--- a/src/components/SliceViewerOverlay.vue
+++ b/src/components/SliceViewerOverlay.vue
@@ -11,10 +11,10 @@ import ViewTypeSwitcher from '@/src/components/ViewTypeSwitcher.vue';
 import { useImage } from '@/src/composables/useCurrentImage';
 import { computed } from 'vue';
 
-interface Props {
+type Props = {
   viewId: string;
   imageId: Maybe<string>;
-}
+};
 
 const props = defineProps<Props>();
 const { viewId, imageId } = toRefs(props);
diff --git a/src/components/vtk/VtkSliceView.vue b/src/components/vtk/VtkSliceView.vue
index 436590ca9..750bcf2b0 100644
--- a/src/components/vtk/VtkSliceView.vue
+++ b/src/components/vtk/VtkSliceView.vue
@@ -15,12 +15,12 @@ import { VtkViewApi } from '@/src/types/vtk-types';
 import { VtkViewContext } from '@/src/components/vtk/context';
 import { useViewCameraStore } from '@/src/store/view-configs/camera';
 
-interface Props {
+type Props = {
   viewId: string;
   imageId: Maybe<string>;
   viewDirection: LPSAxisDir;
   viewUp: LPSAxisDir;
-}
+};
 
 const props = defineProps<Props>();
 const {
diff --git a/src/components/vtk/VtkSliceViewSlicingKeyManipulator.vue b/src/components/vtk/VtkSliceViewSlicingKeyManipulator.vue
index 848bd32c4..87c916cad 100644
--- a/src/components/vtk/VtkSliceViewSlicingKeyManipulator.vue
+++ b/src/components/vtk/VtkSliceViewSlicingKeyManipulator.vue
@@ -13,12 +13,12 @@ import { inject, toRefs, unref, watch, computed } from 'vue';
 import { useViewStore } from '@/src/store/views';
 import { actionToKey } from '@/src/composables/useKeyboardShortcuts';
 
-interface Props {
+type Props = {
   viewId: string;
   imageId: Maybe<string>;
   viewDirection: LPSAxisDir;
   manipulatorConfig?: IMouseRangeManipulatorInitialValues;
-}
+};
 
 const props = defineProps<Props>();
 const { viewId, imageId, manipulatorConfig } = toRefs(props);
diff --git a/src/components/vtk/VtkSliceViewSlicingManipulator.vue b/src/components/vtk/VtkSliceViewSlicingManipulator.vue
index b389bc408..66253a4f0 100644
--- a/src/components/vtk/VtkSliceViewSlicingManipulator.vue
+++ b/src/components/vtk/VtkSliceViewSlicingManipulator.vue
@@ -13,12 +13,12 @@ import { syncRef } from '@vueuse/core';
 import { inject, toRefs, unref, computed } from 'vue';
 import { useViewStore } from '@/src/store/views';
 
-interface Props {
+type Props = {
   viewId: string;
   imageId: Maybe<string>;
   viewDirection: LPSAxisDir;
   manipulatorConfig?: IMouseRangeManipulatorInitialValues;
-}
+};
 
 const props = defineProps<Props>();
 const { viewId, imageId, manipulatorConfig } = toRefs(props);
diff --git a/src/core/cine/jpegDecode.worker.ts b/src/core/cine/jpegDecode.worker.ts
index 4742de458..de9db0a1a 100644
--- a/src/core/cine/jpegDecode.worker.ts
+++ b/src/core/cine/jpegDecode.worker.ts
@@ -46,8 +46,8 @@ async function decodeJpeg(
   }
 }
 
-export interface JpegDecoderWorker {
+export type JpegDecoderWorker = {
   decodeJpeg: typeof decodeJpeg;
-}
+};
 
 Comlink.expose({ decodeJpeg });
diff --git a/src/core/dicomTags.ts b/src/core/dicomTags.ts
index 3a48de7d1..0a2b26ce1 100644
--- a/src/core/dicomTags.ts
+++ b/src/core/dicomTags.ts
@@ -1,7 +1,7 @@
-interface Tag {
+type Tag = {
   name: string;
   tag: string;
-}
+};
 
 const tags: Tag[] = [
   { name: 'SOPInstanceUID', tag: '0008|0018' },
diff --git a/src/core/progressiveImage.ts b/src/core/progressiveImage.ts
index 757a7e1d9..4828f46aa 100644
--- a/src/core/progressiveImage.ts
+++ b/src/core/progressiveImage.ts
@@ -16,7 +16,7 @@ export type ProgressiveImageEvents = {
   error: Error;
 };
 
-export interface ProgressiveImage {
+export type ProgressiveImage = {
   /**
    * A new vtkImageData may be returned at any time while this image is incomplete.
    */
@@ -49,7 +49,7 @@ export interface ProgressiveImage {
   vtkImageData: Ref<vtkImageData>;
   imageMetadata: Ref<ImageMetadata>;
   name: Ref<string>;
-}
+};
 
 export const defaultImageMetadata = (): ImageMetadata => ({
   name: NO_NAME,
diff --git a/src/core/streaming/chunkImage.ts b/src/core/streaming/chunkImage.ts
index bd180e2ff..4d032aea8 100644
--- a/src/core/streaming/chunkImage.ts
+++ b/src/core/streaming/chunkImage.ts
@@ -12,22 +12,22 @@ export enum ChunkStatus {
   Errored,
 }
 
-export interface ChunkLoadedInfo {
+export type ChunkLoadedInfo = {
   updatedExtent: Extent;
   chunk: Chunk;
-}
+};
 
-export interface ChunkErrorInfo {
+export type ChunkErrorInfo = {
   error: unknown;
   chunk: Chunk;
-}
+};
 
 export type ChunkImageEvents = {
   chunkLoad: ChunkLoadedInfo;
   chunkError: ChunkErrorInfo;
 } & ProgressiveImageEvents;
 
-export interface ChunkImage extends ProgressiveImage {
+export type ChunkImage = ProgressiveImage & {
   addChunks(chunks: Chunk[]): void;
   addEventListener<T extends keyof ChunkImageEvents>(
     type: T,
@@ -38,4 +38,4 @@ export interface ChunkImage extends ProgressiveImage {
     callback: (info: ChunkImageEvents[T]) => void
   ): void;
   getChunkStatuses(): Array<ChunkStatus>;
-}
+};
diff --git a/src/io/state-file/schema.ts b/src/io/state-file/schema.ts
index b36079084..3c7d6ed4b 100644
--- a/src/io/state-file/schema.ts
+++ b/src/io/state-file/schema.ts
@@ -439,7 +439,7 @@ export const ManifestSchema = z.object({
 
 export type Manifest = z.infer<typeof ManifestSchema>;
 
-export interface StateFile {
+export type StateFile = {
   zip: JSZip;
   manifest: Manifest;
-}
+};
diff --git a/src/store/datasets-dicom.ts b/src/store/datasets-dicom.ts
index dfe391d70..aa61bc572 100644
--- a/src/store/datasets-dicom.ts
+++ b/src/store/datasets-dicom.ts
@@ -16,29 +16,29 @@ export function imageCacheMultiKey(offset: number, asThumbnail: boolean) {
   return `${offset}!!${asThumbnail}`;
 }
 
-export interface VolumeKeys {
+export type VolumeKeys = {
   patientKey: string;
   studyKey: string;
   volumeKey: string;
-}
+};
 
-export interface PatientInfo {
+export type PatientInfo = {
   PatientID: string;
   PatientName: string;
   PatientBirthDate: string;
   PatientSex: string;
-}
+};
 
-export interface StudyInfo {
+export type StudyInfo = {
   StudyID: string;
   StudyInstanceUID: string;
   StudyDate: string;
   StudyTime: string;
   AccessionNumber: string;
   StudyDescription: string;
-}
+};
 
-export interface VolumeInfo {
+export type VolumeInfo = {
   NumberOfSlices: number;
   VolumeID: string;
   Modality: string;
@@ -50,9 +50,9 @@ export interface VolumeInfo {
   // For 'cine', NumberOfSlices is the frame count. Optional for back-compat
   // with saved state that predates the field.
   kind?: 'volume' | 'cine';
-}
+};
 
-interface State {
+type State = {
   // volumeKey -> imageCacheMultiKey -> ITKImage
   sliceData: Record<string, Record<string, Image>>;
 
@@ -77,7 +77,7 @@ interface State {
   volumeStudy: Record<string, string>;
   // studyKey -> patientKey
   studyPatient: Record<string, string>;
-}
+};
 
 /**
  * Trims and collapses multiple spaces into one.
diff --git a/src/store/segmentGroups.ts b/src/store/segmentGroups.ts
index 3b345dbda..cb5bed536 100644
--- a/src/store/segmentGroups.ts
+++ b/src/store/segmentGroups.ts
@@ -42,14 +42,14 @@ export const makeDefaultSegmentGroupName = (baseName: string, index: number) =>
   `Segment Group ${index} for ${baseName}`;
 const numberer = (index: number) => (index <= 1 ? '' : `${index}`); // start numbering at 2
 
-export interface SegmentGroupMetadata {
+export type SegmentGroupMetadata = {
   name: string;
   parentImage: string;
   segments: {
     order: number[];
     byValue: Record<number, SegmentMask>;
   };
-}
+};
 
 export function createLabelmapFromImage(imageData: vtkImageData) {
   const points = new LabelmapArrayType(imageData.getNumberOfPoints());
diff --git a/src/store/tools/useAnnotationTool.ts b/src/store/tools/useAnnotationTool.ts
index 7215a8aee..73d314fce 100644
--- a/src/store/tools/useAnnotationTool.ts
+++ b/src/store/tools/useAnnotationTool.ts
@@ -203,5 +203,5 @@ export type AnnotationToolAPI<T extends AnnotationTool> = ReturnType<
   getPoints(id: ToolID): Vector3[];
 };
 
-export interface AnnotationToolStore<T extends AnnotationTool = AnnotationTool>
-  extends UnwrapAll<AnnotationToolAPI<T>>, IToolStore {}
+export type AnnotationToolStore<T extends AnnotationTool = AnnotationTool> =
+  UnwrapAll<AnnotationToolAPI<T>> & IToolStore;
diff --git a/src/store/view-configs/cine-playback.ts b/src/store/view-configs/cine-playback.ts
index cc7fd5bf1..88c17ffd9 100644
--- a/src/store/view-configs/cine-playback.ts
+++ b/src/store/view-configs/cine-playback.ts
@@ -14,11 +14,11 @@ export const MIN_CINE_FPS = 1;
 export const MAX_CINE_FPS = 120;
 export const DEFAULT_CINE_FPS = 24;
 
-export interface CinePlaybackConfig {
+export type CinePlaybackConfig = {
   playing: boolean;
   fps: number;
   frame: number;
-}
+};
 
 export function clampCineFps(value: string | number) {
   const parsed = Number(value);
diff --git a/src/utils/frameOfReference.ts b/src/utils/frameOfReference.ts
index 71c4a39b5..abd5718bd 100644
--- a/src/utils/frameOfReference.ts
+++ b/src/utils/frameOfReference.ts
@@ -12,10 +12,10 @@ const tmp = vec3.create();
 /**
  * Defines a 2D plane used for locating annotations.
  */
-export interface FrameOfReference {
+export type FrameOfReference = {
   planeNormal: Vector3;
   planeOrigin: Vector3;
-}
+};
 
 // Identity-axial plane used by cine annotations whose true geometry is a
 // single 2D frame: they live at z=0 with a +Z normal.
@@ -24,11 +24,11 @@ export const AXIAL_FRAME_OF_REFERENCE: FrameOfReference = Object.freeze({
   planeNormal: [0, 0, 1] as Vector3,
 });
 
-export interface FrameOfReferenceToImageSliceAndAxisOptions {
+export type FrameOfReferenceToImageSliceAndAxisOptions = {
   epsilon?: number;
   allowNonIntegralSlice?: boolean;
   allowOutOfBoundsSlice?: boolean;
-}
+};
 
 /**
  * Returns the image slice and LPS axis for a given frame of reference.

From 465d9e015eb7ba3ff842fc3e42c0230e599ed982 Mon Sep 17 00:00:00 2001
From: Paul Elliott <paul@vizworkshop.com>
Date: Mon, 18 May 2026 11:50:49 -0400
Subject: [PATCH 09/12] refactor(cine): drop dead code left over from the
 effective-view refactor
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- RulerTool.vue: remove orphan useImage(imageId) call (no destructure;
  the metadata it used to provide is now sourced via useViewLocator)
- viewTypes.ts: remove getComponentFromViewInfo wrapper — no consumers
  after LayoutGridItem switched to resolveSlotRendering
---
 src/components/tools/ruler/RulerTool.vue |  2 --
 src/core/annotations/locator.ts          | 19 +++----------------
 src/core/viewTypes.ts                    |  4 ----
 3 files changed, 3 insertions(+), 22 deletions(-)

diff --git a/src/components/tools/ruler/RulerTool.vue b/src/components/tools/ruler/RulerTool.vue
index 591e46eda..54e2cfad9 100644
--- a/src/components/tools/ruler/RulerTool.vue
+++ b/src/components/tools/ruler/RulerTool.vue
@@ -21,7 +21,6 @@
 
 <script lang="ts">
 import { computed, defineComponent, onUnmounted, PropType, toRefs } from 'vue';
-import { useImage } from '@/src/composables/useCurrentImage';
 import { useToolStore } from '@/src/store/tools';
 import { Tools } from '@/src/store/tools/types';
 import { useRulerStore } from '@/src/store/tools/rulers';
@@ -68,7 +67,6 @@ export default defineComponent({
 
     const { locator, frame, slice } = useViewLocator(viewId, imageId);
 
-    useImage(imageId);
     const isToolActive = computed(() => toolStore.currentTool === Tools.Ruler);
     const viewAxis = computed(() => getLPSAxisFromDir(viewDirection.value));
 
diff --git a/src/core/annotations/locator.ts b/src/core/annotations/locator.ts
index ee7222783..a658eb534 100644
--- a/src/core/annotations/locator.ts
+++ b/src/core/annotations/locator.ts
@@ -16,7 +16,7 @@ import {
   EffectiveView,
 } from '@/src/core/views/effectiveView';
 
-export type Locator =
+type Locator =
   | { kind: 'none' }
   | {
       kind: 'spatial';
@@ -24,16 +24,9 @@ export type Locator =
       axis: LPSAxis;
       frameOfReference: FrameOfReference;
     }
-  | { kind: 'temporal'; frame: number }
-  | {
-      kind: 'spatiotemporal';
-      slice: number;
-      axis: LPSAxis;
-      frameOfReference: FrameOfReference;
-      frame: number;
-    };
+  | { kind: 'temporal'; frame: number };
 
-export type LocatorFields = Pick<
+type LocatorFields = Pick<
   AnnotationTool,
   'slice' | 'frameOfReference' | 'frame'
 >;
@@ -75,12 +68,6 @@ export function locatorPatch(here: Locator): LocatorFields {
         frameOfReference: AXIAL_FRAME_OF_REFERENCE,
         frame: here.frame,
       };
-    case 'spatiotemporal':
-      return {
-        slice: here.slice,
-        frameOfReference: here.frameOfReference,
-        frame: here.frame,
-      };
     case 'none':
       return {
         slice: -1,
diff --git a/src/core/viewTypes.ts b/src/core/viewTypes.ts
index b3dd99a28..50f8a44cc 100644
--- a/src/core/viewTypes.ts
+++ b/src/core/viewTypes.ts
@@ -44,7 +44,3 @@ export function resolveSlotRendering(viewInfo: ViewInfo): {
     renderImageID: effective.renderDataID,
   };
 }
-
-export function getComponentFromViewInfo(info: ViewInfo) {
-  return resolveSlotRendering(info).component;
-}

From 48781db0c03b1e7a0e86996202b9038532d7467f Mon Sep 17 00:00:00 2001
From: Paul Elliott <paul@vizworkshop.com>
Date: Mon, 18 May 2026 13:26:41 -0400
Subject: [PATCH 10/12] refactor(tests): drop unrelated state-manifest timeout
 change and centralize SESSION_SAVE_TIMEOUT

---
 src/store/datasets-dicom.ts                | 5 -----
 src/store/views.ts                         | 3 ++-
 tests/specs/cine-ruler-session.e2e.ts      | 4 +---
 tests/specs/session-state-lifecycle.e2e.ts | 9 ++++++---
 tests/specs/state-manifest.e2e.ts          | 4 +---
 tests/specs/utils.ts                       | 2 ++
 6 files changed, 12 insertions(+), 15 deletions(-)

diff --git a/src/store/datasets-dicom.ts b/src/store/datasets-dicom.ts
index aa61bc572..56750f197 100644
--- a/src/store/datasets-dicom.ts
+++ b/src/store/datasets-dicom.ts
@@ -167,11 +167,6 @@ export const useDICOMStore = defineStore('dicom', {
             if (importedAsCine) return;
           }
 
-          if (this.volumeInfo[id]?.kind === 'cine') {
-            throw new Error(
-              `Volume ${id} is already loaded as a cine clip; cannot re-import as a chunk volume.`
-            );
-          }
           const cachedImage = imageCacheStore.imageById[id];
           if (cachedImage && !(cachedImage instanceof DicomChunkImage)) {
             throw new Error(
diff --git a/src/store/views.ts b/src/store/views.ts
index f27cc71bc..5a38b117d 100644
--- a/src/store/views.ts
+++ b/src/store/views.ts
@@ -267,7 +267,8 @@ export const useViewStore = defineStore('view', () => {
 
     view.dataID = dataID;
     ViewDataChangeEvent.trigger(viewID, dataID);
-    // Global tools resolve their image through activeView.
+    // If activeView is null/stale, fall back to a visible view so global
+    // tools (which resolve their image through activeView) have one to read.
     ensureActiveViewIsVisible();
   }
 
diff --git a/tests/specs/cine-ruler-session.e2e.ts b/tests/specs/cine-ruler-session.e2e.ts
index a68ee09f6..49ec8ba88 100644
--- a/tests/specs/cine-ruler-session.e2e.ts
+++ b/tests/specs/cine-ruler-session.e2e.ts
@@ -4,7 +4,7 @@
 // silently lose the per-frame association.
 import * as path from 'path';
 import { CINE_US_DATASET } from './configTestUtils';
-import { openUrls, waitForFileExists } from './utils';
+import { openUrls, SESSION_SAVE_TIMEOUT, waitForFileExists } from './utils';
 import { volViewPage } from '../pageobjects/volview.page';
 import { TEMP_DIR } from '../../wdio.shared.conf';
 import {
@@ -16,8 +16,6 @@ import {
   waitForFrame,
 } from './cineTestUtils';
 
-const SESSION_SAVE_TIMEOUT = 40000;
-
 const placeRulerAtCanvasCenter = async () => {
   const rulerToolButton = await $('button span i[class~=mdi-ruler]');
   await rulerToolButton.click();
diff --git a/tests/specs/session-state-lifecycle.e2e.ts b/tests/specs/session-state-lifecycle.e2e.ts
index 691300b8d..c41faea8b 100644
--- a/tests/specs/session-state-lifecycle.e2e.ts
+++ b/tests/specs/session-state-lifecycle.e2e.ts
@@ -2,12 +2,15 @@ import * as path from 'path';
 import * as fs from 'fs';
 import JSZip from 'jszip';
 import { MINIMAL_501_SESSION, PROSTATEX_DATASET } from './configTestUtils';
-import { downloadFile, openUrls, waitForFileExists } from './utils';
+import {
+  downloadFile,
+  openUrls,
+  SESSION_SAVE_TIMEOUT,
+  waitForFileExists,
+} from './utils';
 import { setValueVueInput, volViewPage } from '../pageobjects/volview.page';
 import { TEMP_DIR } from '../../wdio.shared.conf';
 
-const SESSION_SAVE_TIMEOUT = 40000;
-
 const waitForElementCount = async (selector: string, minCount = 1) => {
   await browser.waitUntil(async () => {
     const count = await browser.execute(
diff --git a/tests/specs/state-manifest.e2e.ts b/tests/specs/state-manifest.e2e.ts
index 483c3707c..78d953e5b 100644
--- a/tests/specs/state-manifest.e2e.ts
+++ b/tests/specs/state-manifest.e2e.ts
@@ -3,9 +3,7 @@ import { FIXTURES, WINDOW_SIZE } from '../../wdio.shared.conf';
 import { volViewPage } from '../pageobjects/volview.page';
 import { openVolViewPage, writeManifestToZip } from './utils';
 
-describe('State file manifest.json code', function () {
-  this.timeout(120_000);
-
+describe('State file manifest.json code', () => {
   it('has no errors loading version 5.0.1 manifest.json file ', async () => {
     const manifestPath = path.join(
       FIXTURES,
diff --git a/tests/specs/utils.ts b/tests/specs/utils.ts
index 2ac51d33e..11c309ac3 100644
--- a/tests/specs/utils.ts
+++ b/tests/specs/utils.ts
@@ -78,6 +78,8 @@ export async function openVolViewPage(fileName: string) {
 
 type RemoteResourceType = z.infer<typeof RemoteResource> & { name: string };
 
+export const SESSION_SAVE_TIMEOUT = 40_000;
+
 export const waitForFileExists = (filePath: string, timeout: number) =>
   new Promise<void>((resolve, reject) => {
     const dir = path.dirname(filePath);

From 5c63cadd56b36bb14ce7400328a506f32c8aed02 Mon Sep 17 00:00:00 2001
From: Paul Elliott <paul@vizworkshop.com>
Date: Mon, 18 May 2026 15:12:04 -0400
Subject: [PATCH 11/12] fix(cine): disable segment group actions

---
 src/components/SegmentGroupControls.vue      | 6 ++++++
 src/components/tools/polygon/PolygonTool.vue | 9 ++++++++-
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/components/SegmentGroupControls.vue b/src/components/SegmentGroupControls.vue
index 35546f0c8..75ce3387b 100644
--- a/src/components/SegmentGroupControls.vue
+++ b/src/components/SegmentGroupControls.vue
@@ -16,12 +16,14 @@ import { usePaintToolStore } from '@/src/store/tools/paint';
 import { Maybe } from '@/src/types';
 import { reactive, ref, computed, watch, toRaw } from 'vue';
 import { useMultiSelection } from '@/src/composables/useMultiSelection';
+import { isCineImage } from '@/src/core/cine/isCineImage';
 
 const UNNAMED_GROUP_NAME = 'Unnamed Segment Group';
 
 const segmentGroupStore = useSegmentGroupStore();
 const { currentImageID } = useCurrentImage();
 const dataStore = useDatasetStore();
+const isCurrentImageCine = computed(() => isCineImage(currentImageID.value));
 
 const currentSegmentGroups = computed(() => {
   if (!currentImageID.value) return [];
@@ -117,6 +119,7 @@ function stopEditing(commit: boolean) {
 function createSegmentGroup() {
   if (!currentImageID.value)
     throw new Error('Cannot create a labelmap without a base image');
+  if (isCurrentImageCine.value) return;
 
   const id = segmentGroupStore.newLabelmapFromImage(currentImageID.value);
   if (!id) throw new Error('Could not create a new labelmap');
@@ -152,6 +155,7 @@ function createSegmentGroupFromImage(selection: DataSelection) {
   if (!primarySelection) {
     throw new Error('No primary selection');
   }
+  if (isCurrentImageCine.value) return;
   segmentGroupStore.convertImageToLabelmap(selection, primarySelection);
 }
 
@@ -228,6 +232,7 @@ function deleteSelected() {
         variant="tonal"
         color="secondary"
         density="compact"
+        :disabled="isCurrentImageCine"
         @click.stop="createSegmentGroup"
       >
         <v-icon class="mr-1">mdi-plus</v-icon> New Group
@@ -238,6 +243,7 @@ function deleteSelected() {
             variant="tonal"
             color="secondary"
             density="compact"
+            :disabled="isCurrentImageCine"
             v-bind="props"
           >
             <v-icon class="mr-1">mdi-chevron-down</v-icon>From Image
diff --git a/src/components/tools/polygon/PolygonTool.vue b/src/components/tools/polygon/PolygonTool.vue
index 709ca38ea..2f5cd61cb 100644
--- a/src/components/tools/polygon/PolygonTool.vue
+++ b/src/components/tools/polygon/PolygonTool.vue
@@ -19,7 +19,7 @@
       :tool-store="activeToolStore"
       v-slot="{ context }"
     >
-      <v-list-item @click.stop>
+      <v-list-item v-if="!isCurrentImageCine" @click.stop>
         <template #prepend>
           <v-icon>mdi-grid</v-icon>
         </template>
@@ -119,6 +119,7 @@ import { usePaintToolStore } from '@/src/store/tools/paint';
 import { useSegmentGroupStore } from '@/src/store/segmentGroups';
 import ColorDot from '@/src/components/ColorDot.vue';
 import { SegmentMask } from '@/src/types/segment';
+import { isCineImage } from '@/src/core/cine/isCineImage';
 
 const useActiveToolStore = usePolygonStore;
 const toolType = Tools.Polygon;
@@ -271,7 +272,9 @@ export default defineComponent({
 
     const segmentGroupStore = useSegmentGroupStore();
     const paintStore = usePaintToolStore();
+    const isCurrentImageCine = computed(() => isCineImage(imageId.value));
     const currentSegmentGroup = computed(() => {
+      if (isCurrentImageCine.value) return null;
       if (!imageId.value) return null;
       const groups = segmentGroupStore.orderByParent[imageId.value];
       if (!groups?.length) return null;
@@ -282,6 +285,9 @@ export default defineComponent({
       if (!imageId.value) {
         throw new Error('No image ID available for rasterization');
       }
+      if (isCurrentImageCine.value) {
+        throw new Error('Rasterization is not supported for cine images');
+      }
 
       const groups = segmentGroupStore.orderByParent[imageId.value];
       if (!groups?.length) {
@@ -346,6 +352,7 @@ export default defineComponent({
       overlayInfo,
       rasterize,
       currentSegmentGroup,
+      isCurrentImageCine,
     };
   },
 });

From 075ae89098f7f10facc0318f01f40c4c837f0e33 Mon Sep 17 00:00:00 2001
From: Paul Elliott <paul@vizworkshop.com>
Date: Mon, 18 May 2026 15:14:59 -0400
Subject: [PATCH 12/12] fix(cine): persist current frame

---
 src/io/state-file/schema.ts             |  6 +++++
 src/io/state-file/serialize.ts          |  2 +-
 src/store/view-configs.ts               |  2 ++
 src/store/view-configs/cine-playback.ts | 24 +++++++++++++++++
 src/store/view-configs/types.ts         |  4 +++
 tests/specs/cine-ruler-session.e2e.ts   | 35 ++++++++++++++-----------
 6 files changed, 57 insertions(+), 16 deletions(-)

diff --git a/src/io/state-file/schema.ts b/src/io/state-file/schema.ts
index 3c7d6ed4b..8c578e1a4 100644
--- a/src/io/state-file/schema.ts
+++ b/src/io/state-file/schema.ts
@@ -22,6 +22,7 @@ import type {
   LayersConfig,
   SegmentGroupConfig,
   VolumeColorConfig,
+  CinePlaybackViewConfig,
 } from '@/src/store/view-configs/types';
 import type { LPSAxis } from '@/src/types/lps';
 import type {
@@ -270,6 +271,10 @@ const SegmentGroupConfig = z.object({
   outlineThickness: z.number(),
 }) satisfies z.ZodType<SegmentGroupConfig>;
 
+const CinePlaybackViewConfig = z.object({
+  frame: z.number(),
+}) satisfies z.ZodType<CinePlaybackViewConfig>;
+
 const ViewConfig = z.object({
   window: WindowLevelConfig.optional(),
   slice: SliceConfig.optional(),
@@ -277,6 +282,7 @@ const ViewConfig = z.object({
   segmentGroup: SegmentGroupConfig.optional(),
   camera: CameraConfig.optional(),
   volumeColorConfig: VolumeColorConfig.optional(),
+  cinePlayback: CinePlaybackViewConfig.optional(),
 });
 
 export type ViewConfig = z.infer<typeof ViewConfig>;
diff --git a/src/io/state-file/serialize.ts b/src/io/state-file/serialize.ts
index b6f8bd774..bf469765d 100644
--- a/src/io/state-file/serialize.ts
+++ b/src/io/state-file/serialize.ts
@@ -13,7 +13,7 @@ import { migrateManifest } from '@/src/io/state-file/migrations';
 import { useViewConfigStore } from '@/src/store/view-configs';
 
 export const MANIFEST = 'manifest.json';
-export const MANIFEST_VERSION = '6.2.0';
+export const MANIFEST_VERSION = '6.3.0';
 
 export async function serialize() {
   const datasetStore = useDatasetStore();
diff --git a/src/store/view-configs.ts b/src/store/view-configs.ts
index b2c990316..e75598ac8 100644
--- a/src/store/view-configs.ts
+++ b/src/store/view-configs.ts
@@ -46,6 +46,7 @@ export const useViewConfigStore = defineStore('viewConfig', () => {
     layerColoringStore.serialize(stateFile);
     viewCameraStore.serialize(stateFile);
     volumeColoringStore.serialize(stateFile);
+    cinePlaybackStore.serialize(stateFile);
   };
 
   const deserialize = (
@@ -65,6 +66,7 @@ export const useViewConfigStore = defineStore('viewConfig', () => {
     layerColoringStore.deserialize(viewID, updatedConfig);
     viewCameraStore.deserialize(viewID, updatedConfig);
     volumeColoringStore.deserialize(viewID, updatedConfig);
+    cinePlaybackStore.deserialize(viewID, updatedConfig);
   };
 
   const deserializeAll = (
diff --git a/src/store/view-configs/cine-playback.ts b/src/store/view-configs/cine-playback.ts
index 88c17ffd9..432237183 100644
--- a/src/store/view-configs/cine-playback.ts
+++ b/src/store/view-configs/cine-playback.ts
@@ -9,6 +9,9 @@ import {
   patchDoubleKeyRecord,
 } from '@/src/utils/doubleKeyRecord';
 import { getCineImage } from '@/src/core/cine/isCineImage';
+import { createViewConfigSerializer } from '@/src/store/view-configs/common';
+import type { StateFile, ViewConfig } from '@/src/io/state-file/schema';
+import type { CinePlaybackViewConfig } from '@/src/store/view-configs/types';
 
 export const MIN_CINE_FPS = 1;
 export const MAX_CINE_FPS = 120;
@@ -94,12 +97,33 @@ export const useCinePlaybackStore = defineStore('cinePlayback', () => {
     }
   };
 
+  const serialize = (stateFile: StateFile) => {
+    const frameConfigs: DoubleKeyRecord<CinePlaybackViewConfig> = {};
+    Object.entries(configs).forEach(([viewID, byDataID]) => {
+      frameConfigs[viewID] = {};
+      Object.entries(byDataID).forEach(([dataID, config]) => {
+        frameConfigs[viewID][dataID] = { frame: config.frame };
+      });
+    });
+    createViewConfigSerializer(frameConfigs, 'cinePlayback')(stateFile);
+  };
+
+  const deserialize = (viewID: string, config: Record<string, ViewConfig>) => {
+    Object.entries(config).forEach(([dataID, viewConfig]) => {
+      if (viewConfig.cinePlayback) {
+        updateConfig(viewID, dataID, { frame: viewConfig.cinePlayback.frame });
+      }
+    });
+  };
+
   return {
     configs,
     getConfig,
     updateConfig,
     removeView,
     removeData,
+    serialize,
+    deserialize,
   };
 });
 
diff --git a/src/store/view-configs/types.ts b/src/store/view-configs/types.ts
index e8d746010..f81d5498e 100644
--- a/src/store/view-configs/types.ts
+++ b/src/store/view-configs/types.ts
@@ -55,3 +55,7 @@ export interface SegmentGroupConfig {
   outlineOpacity: number;
   outlineThickness: number;
 }
+
+export interface CinePlaybackViewConfig {
+  frame: number;
+}
diff --git a/tests/specs/cine-ruler-session.e2e.ts b/tests/specs/cine-ruler-session.e2e.ts
index 49ec8ba88..8bba5ac3b 100644
--- a/tests/specs/cine-ruler-session.e2e.ts
+++ b/tests/specs/cine-ruler-session.e2e.ts
@@ -13,6 +13,7 @@ import {
   countCineRulerLines,
   getCineCanvasCenter,
   getCineFrame,
+  retreatCineFrame,
   waitForFrame,
 } from './cineTestUtils';
 
@@ -25,7 +26,7 @@ const placeRulerAtCanvasCenter = async () => {
 };
 
 describe('Cine ruler survives save/reload at its placed frame', () => {
-  it('reloads with the ruler hidden on frame 1 and visible on the placed frame', async () => {
+  it('reloads at the persisted frame with the ruler visible and hides it on frame 1', async () => {
     await openUrls([CINE_US_DATASET]);
     await $('.play-controls').waitForDisplayed();
     await waitForFrame(1);
@@ -55,13 +56,14 @@ describe('Cine ruler survives save/reload at its placed frame', () => {
     await volViewPage.open(`?urls=[tmp/${sessionFileName}]`);
     await volViewPage.waitForViews();
     await $('.play-controls').waitForDisplayed({ timeout: 30000 });
-    await waitForFrame(1);
+    // The cine frame is persisted, so reload restores the cursor to
+    // placementFrame rather than frame 1.
+    await waitForFrame(placementFrame);
 
     // Wait for the deserialized ruler to surface in the Measurements list
-    // before asserting it's hidden on the canvas. Without this anchor a
-    // regression that loses `frame` (ruler tagged frame 1 instead) could
-    // race the assertion and pass for the wrong reason; the list entry
-    // proves deserialization has completed.
+    // before asserting visibility on the canvas. The list entry proves
+    // deserialization has completed, so the subsequent canvas checks
+    // can't race the load.
     const annotationsTab = await $(
       'button[data-testid="module-tab-Annotations"]'
     );
@@ -77,18 +79,21 @@ describe('Cine ruler survives save/reload at its placed frame', () => {
       }
     );
 
-    // On reload the cursor lives at frame 1 (playback frame is not
-    // persisted). The ruler must be hidden here — if `frame` was lost
-    // during serialize/deserialize, it would render at frame 1 instead.
-    expect(await countCineRulerLines()).toBe(0);
+    // The ruler must be visible at the persisted placement frame — if
+    // `frame` was lost during serialize/deserialize, it would still
+    // render here, so we also need to verify it hides elsewhere.
+    await browser.waitUntil(async () => (await countCineRulerLines()) >= 1, {
+      timeoutMsg: `Expected the ruler to be visible at the persisted placement frame (${placementFrame}) after reload`,
+    });
 
-    // Scrub forward to the placement frame and the ruler should reappear.
+    // Scrub back to frame 1 — the ruler must hide there. A regression
+    // that dropped `frame` would leave it visible on every frame.
     await volViewPage.focusFirst2DView();
-    while ((await getCineFrame())! < placementFrame) {
-      await advanceCineFrame();
+    while ((await getCineFrame())! > 1) {
+      await retreatCineFrame();
     }
-    await browser.waitUntil(async () => (await countCineRulerLines()) >= 1, {
-      timeoutMsg: `Expected the ruler to reappear at the placement frame (${placementFrame}) after reload`,
+    await browser.waitUntil(async () => (await countCineRulerLines()) === 0, {
+      timeoutMsg: 'Expected the ruler to hide on frame 1 after reload',
     });
   });
 });