From 0552fcfc4c4a673b288d81308f5c8a1633b55c91 Mon Sep 17 00:00:00 2001
From: Paul Elliott <paul@vizworkshop.com>
Date: Sat, 27 Jun 2026 14:12:02 -0400
Subject: [PATCH 1/3] feat(paint): add fill holes segmentation process

Fill Holes fills enclosed background regions in a segment group on a slice.

Options select current-slice vs whole-volume and all-segments vs the selected segment.

Only background voxels are filled, so existing segments are never overwritten.

Fill Holes is the default process.
---
 src/components/FillHolesParameterControls.vue |  96 ++++++++
 .../GaussianSmoothParameterControls.vue       |   2 +-
 src/components/PaintControls.vue              |  19 +-
 src/components/ProcessControls.vue            |  35 ++-
 src/components/ProcessTypeSelector.vue        |  31 +--
 src/components/ProcessWorkflow.vue            |  21 +-
 src/components/processes.ts                   |  56 +++++
 src/components/tools/paint/PaintTool.vue      |   3 +-
 src/components/tools/paint/PaintWidget2D.vue  |   3 +-
 .../tools/paint/__tests__/fillHoles.spec.ts   | 209 ++++++++++++++++++
 src/core/tools/paint/fillHoles.ts             | 182 +++++++++++++++
 src/core/tools/paint/fillHoles.worker.ts      |  14 ++
 src/store/__tests__/fillHoles.spec.ts         | 174 +++++++++++++++
 src/store/__tests__/paintProcess.spec.ts      | 159 +++++++++++++
 src/store/tools/fillHoles.ts                  | 134 +++++++++++
 src/store/tools/paint.ts                      |  39 ++++
 src/store/tools/paintProcess.ts               | 122 +++++++---
 tests/pageobjects/volview.page.ts             |  81 +++++++
 tests/specs/paint-fill-holes.e2e.ts           |  76 +++++++
 wdio.shared.conf.ts                           |   2 +-
 20 files changed, 1353 insertions(+), 105 deletions(-)
 create mode 100644 src/components/FillHolesParameterControls.vue
 create mode 100644 src/components/processes.ts
 create mode 100644 src/core/tools/paint/__tests__/fillHoles.spec.ts
 create mode 100644 src/core/tools/paint/fillHoles.ts
 create mode 100644 src/core/tools/paint/fillHoles.worker.ts
 create mode 100644 src/store/__tests__/fillHoles.spec.ts
 create mode 100644 src/store/__tests__/paintProcess.spec.ts
 create mode 100644 src/store/tools/fillHoles.ts
 create mode 100644 tests/specs/paint-fill-holes.e2e.ts

diff --git a/src/components/FillHolesParameterControls.vue b/src/components/FillHolesParameterControls.vue
new file mode 100644
index 000000000..d44de6afa
--- /dev/null
+++ b/src/components/FillHolesParameterControls.vue
@@ -0,0 +1,96 @@
+<template>
+  <div class="d-flex align-center">
+    <mini-expansion-panel>
+      <template #title
+        >Fill enclosed holes in the segmentation on the axis of the selected
+        view.</template
+      >
+      <ul>
+        <li>Finds background regions fully enclosed by segments on a slice.</li>
+        <li>
+          Fills holes on the current slice by default, or every slice of the
+          active view's axis.
+        </li>
+        <li>
+          All-segments mode fills each hole with the surrounding segment's
+          label; selected-segment mode fills only the active segment's holes.
+        </li>
+      </ul>
+    </mini-expansion-panel>
+  </div>
+
+  <div
+    v-for="scope in scopes"
+    :key="scope.label"
+    class="w-100 px-4 mb-4 d-flex flex-column align-center"
+  >
+    <div class="text-caption mb-1">{{ scope.label }}</div>
+    <v-btn-toggle
+      :model-value="scope.value"
+      density="compact"
+      variant="outlined"
+      divided
+      mandatory
+      :disabled="isDisabled"
+      @update:model-value="scope.onChange"
+    >
+      <v-btn
+        v-for="option in scope.options"
+        :key="option.value"
+        :value="option.value"
+        size="small"
+      >
+        {{ option.label }}
+      </v-btn>
+    </v-btn-toggle>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import {
+  useFillHolesStore,
+  FillHolesSliceScope,
+  FillHolesSegmentScope,
+} from '@/src/store/tools/fillHoles';
+import { usePaintProcessStore } from '@/src/store/tools/paintProcess';
+import MiniExpansionPanel from './MiniExpansionPanel.vue';
+
+const fillHolesStore = useFillHolesStore();
+const processStore = usePaintProcessStore();
+
+const isDisabled = computed(() => processStore.processStep !== 'start');
+
+type ScopeControl = {
+  label: string;
+  value: string;
+  onChange: (value: string) => void;
+  options: { value: string; label: string }[];
+};
+
+const scopes = computed<ScopeControl[]>(() => [
+  {
+    label: 'Slices',
+    value: fillHolesStore.sliceScope,
+    onChange: (value) =>
+      fillHolesStore.setSliceScope(value as FillHolesSliceScope),
+    options: [
+      { value: FillHolesSliceScope.CurrentSlice, label: 'Current slice' },
+      { value: FillHolesSliceScope.WholeVolume, label: 'All slices' },
+    ],
+  },
+  {
+    label: 'Segments',
+    value: fillHolesStore.segmentScope,
+    onChange: (value) =>
+      fillHolesStore.setSegmentScope(value as FillHolesSegmentScope),
+    options: [
+      { value: FillHolesSegmentScope.AllSegments, label: 'All segments' },
+      {
+        value: FillHolesSegmentScope.SelectedSegment,
+        label: 'Selected segment',
+      },
+    ],
+  },
+]);
+</script>
diff --git a/src/components/GaussianSmoothParameterControls.vue b/src/components/GaussianSmoothParameterControls.vue
index e76426b98..3e1882b94 100644
--- a/src/components/GaussianSmoothParameterControls.vue
+++ b/src/components/GaussianSmoothParameterControls.vue
@@ -46,6 +46,6 @@ const gaussianSmoothStore = useGaussianSmoothStore();
 const processStore = usePaintProcessStore();
 
 const sigma = computed(() => gaussianSmoothStore.sigma);
-const isDisabled = computed(() => processStore.processStep === 'previewing');
+const isDisabled = computed(() => processStore.processStep !== 'start');
 const { setSigma } = gaussianSmoothStore;
 </script>
diff --git a/src/components/PaintControls.vue b/src/components/PaintControls.vue
index 8bb591622..5576e8870 100644
--- a/src/components/PaintControls.vue
+++ b/src/components/PaintControls.vue
@@ -2,7 +2,7 @@
   <v-container>
     <v-row no-gutters align="center" justify="center" class="mb-4">
       <v-item-group
-        v-model="mode"
+        v-model="controlsMode"
         mandatory
         selected-class="selected"
         class="d-flex align-center justify-center"
@@ -48,7 +48,12 @@
         </v-item>
       </v-item-group>
     </v-row>
-    <template v-if="mode === PaintMode.CirclePaint || mode === PaintMode.Erase">
+    <template
+      v-if="
+        controlsMode === PaintMode.CirclePaint ||
+        controlsMode === PaintMode.Erase
+      "
+    >
       <v-row no-gutters align="center" class="mb-2">
         <span class="mr-2">Sync Views</span>
         <v-switch
@@ -126,7 +131,7 @@
         </v-range-slider>
       </v-row>
     </template>
-    <template v-if="mode === PaintMode.Process">
+    <template v-if="controlsMode === PaintMode.Process">
       <v-row no-gutters align="center">
         <ProcessControls />
       </v-row>
@@ -145,7 +150,7 @@ import { useImageStatsStore } from '@/src/store/image-stats';
 
 const paintStore = usePaintToolStore();
 const imageStatsStore = useImageStatsStore();
-const { brushSize, activeMode, thresholdRange, crossPlaneSync } =
+const { brushSize, activeControlsMode, thresholdRange, crossPlaneSync } =
   storeToRefs(paintStore);
 const { currentImageID } = useCurrentImage();
 
@@ -177,10 +182,10 @@ const setBrushSize = (size: number) => {
   paintStore.setBrushSize(Number(size));
 };
 
-const mode = computed({
-  get: () => activeMode.value,
+const controlsMode = computed({
+  get: () => activeControlsMode.value,
   set: (m) => {
-    paintStore.setMode(m);
+    paintStore.setControlsMode(m);
   },
 });
 </script>
diff --git a/src/components/ProcessControls.vue b/src/components/ProcessControls.vue
index a1b40b660..7a587a923 100644
--- a/src/components/ProcessControls.vue
+++ b/src/components/ProcessControls.vue
@@ -2,37 +2,28 @@
   <div class="d-flex flex-column align-center w-100">
     <ProcessTypeSelector />
 
-    <template v-if="activeProcessType === ProcessType.FillBetween">
-      <FillBetweenParameterControls />
-      <ProcessWorkflow :algorithm="fillBetweenAlgorithm" />
-    </template>
-
-    <template v-if="activeProcessType === ProcessType.GaussianSmooth">
-      <GaussianSmoothParameterControls />
-      <ProcessWorkflow :algorithm="gaussianSmoothAlgorithm" />
+    <template v-if="activeDefinition">
+      <component :is="activeDefinition.controls" />
+      <ProcessWorkflow
+        :algorithm="activeDefinition.getAlgorithm()"
+        :requires-active-segment="
+          activeDefinition.requiresActiveSegment?.() ?? true
+        "
+      />
     </template>
   </div>
 </template>
 
 <script setup lang="ts">
 import { computed } from 'vue';
-import {
-  ProcessType,
-  usePaintProcessStore,
-} from '@/src/store/tools/paintProcess';
+import { usePaintProcessStore } from '@/src/store/tools/paintProcess';
 import ProcessTypeSelector from './ProcessTypeSelector.vue';
 import ProcessWorkflow from './ProcessWorkflow.vue';
-import FillBetweenParameterControls from './FillBetweenParameterControls.vue';
-import GaussianSmoothParameterControls from './GaussianSmoothParameterControls.vue';
-import { useFillBetweenStore } from '../store/tools/fillBetween';
-import { useGaussianSmoothStore } from '../store/tools/gaussianSmooth';
+import { PROCESS_DEFINITIONS } from './processes';
 
 const processStore = usePaintProcessStore();
-const fillBetweenStore = useFillBetweenStore();
-const gaussianSmoothStore = useGaussianSmoothStore();
-
-const activeProcessType = computed(() => processStore.activeProcessType);
 
-const fillBetweenAlgorithm = fillBetweenStore.computeAlgorithm;
-const gaussianSmoothAlgorithm = gaussianSmoothStore.computeAlgorithm;
+const activeDefinition = computed(() =>
+  PROCESS_DEFINITIONS.find((def) => def.type === processStore.activeProcessType)
+);
 </script>
diff --git a/src/components/ProcessTypeSelector.vue b/src/components/ProcessTypeSelector.vue
index 49cd5ecba..8c7837bd4 100644
--- a/src/components/ProcessTypeSelector.vue
+++ b/src/components/ProcessTypeSelector.vue
@@ -4,10 +4,12 @@
       v-model="activeProcessType"
       mandatory
       selected-class="selected"
-      class="d-flex align-center justify-center"
+      class="d-flex align-center justify-center flex-wrap"
     >
       <v-item
-        :value="ProcessType.FillBetween"
+        v-for="definition in PROCESS_DEFINITIONS"
+        :key="definition.type"
+        :value="definition.type"
         v-slot="{ selectedClass, toggle }"
       >
         <v-btn
@@ -17,23 +19,8 @@
           :class="['process-button', 'mx-2', selectedClass]"
           @click.stop="toggle"
         >
-          <v-icon>mdi-layers-triple</v-icon>
-          <span class="text-caption">Fill Between</span>
-        </v-btn>
-      </v-item>
-      <v-item
-        :value="ProcessType.GaussianSmooth"
-        v-slot="{ selectedClass, toggle }"
-      >
-        <v-btn
-          variant="tonal"
-          rounded="8"
-          stacked
-          :class="['process-button', 'mx-2', selectedClass]"
-          @click.stop="toggle"
-        >
-          <v-icon>mdi-blur</v-icon>
-          <span class="text-caption">Smooth</span>
+          <v-icon>{{ definition.icon }}</v-icon>
+          <span class="text-caption">{{ definition.label }}</span>
         </v-btn>
       </v-item>
     </v-item-group>
@@ -42,10 +29,8 @@
 
 <script setup lang="ts">
 import { computed } from 'vue';
-import {
-  ProcessType,
-  usePaintProcessStore,
-} from '@/src/store/tools/paintProcess';
+import { usePaintProcessStore } from '@/src/store/tools/paintProcess';
+import { PROCESS_DEFINITIONS } from './processes';
 
 const processStore = usePaintProcessStore();
 
diff --git a/src/components/ProcessWorkflow.vue b/src/components/ProcessWorkflow.vue
index 25c802ee7..69bf55d87 100644
--- a/src/components/ProcessWorkflow.vue
+++ b/src/components/ProcessWorkflow.vue
@@ -16,17 +16,16 @@
       <v-btn-toggle
         v-if="processStep === 'previewing'"
         :model-value="showingOriginal ? 0 : 1"
-        @update:model-value="handleToggleChange"
         mandatory
         variant="outlined"
         divided
         density="compact"
       >
-        <v-btn :value="0" size="small">
+        <v-btn :value="0" size="small" @click="processStore.togglePreview()">
           <v-icon start size="small">mdi-eye-outline</v-icon>
           Original
         </v-btn>
-        <v-btn :value="1" size="small">
+        <v-btn :value="1" size="small" @click="processStore.togglePreview()">
           <v-icon start size="small">mdi-eye-settings</v-icon>
           Processed
         </v-btn>
@@ -60,9 +59,12 @@ import {
 
 interface Props {
   algorithm: ProcessAlgorithm;
+  requiresActiveSegment?: boolean;
 }
 
-const props = defineProps<Props>();
+const props = withDefaults(defineProps<Props>(), {
+  requiresActiveSegment: true,
+});
 
 const processStore = usePaintProcessStore();
 const paintStore = usePaintToolStore();
@@ -73,14 +75,9 @@ const showingOriginal = computed(() => processStore.showingOriginal);
 function startCompute() {
   const id = paintStore.activeSegmentGroupID;
   if (!id) return;
-  processStore.startProcess(id, props.algorithm);
-}
-
-function handleToggleChange(value: number) {
-  const shouldShowOriginal = value === 0;
-  if (shouldShowOriginal !== showingOriginal.value) {
-    processStore.togglePreview();
-  }
+  processStore.startProcess(id, props.algorithm, {
+    requiresActiveSegment: props.requiresActiveSegment,
+  });
 }
 
 function handleCancel() {
diff --git a/src/components/processes.ts b/src/components/processes.ts
new file mode 100644
index 000000000..d16aff121
--- /dev/null
+++ b/src/components/processes.ts
@@ -0,0 +1,56 @@
+import type { Component } from 'vue';
+import {
+  ProcessType,
+  type ProcessAlgorithm,
+} from '@/src/store/tools/paintProcess';
+import {
+  useFillHolesStore,
+  FillHolesSegmentScope,
+} from '@/src/store/tools/fillHoles';
+import { useFillBetweenStore } from '@/src/store/tools/fillBetween';
+import { useGaussianSmoothStore } from '@/src/store/tools/gaussianSmooth';
+import FillHolesParameterControls from './FillHolesParameterControls.vue';
+import FillBetweenParameterControls from './FillBetweenParameterControls.vue';
+import GaussianSmoothParameterControls from './GaussianSmoothParameterControls.vue';
+
+export type ProcessDefinition = {
+  type: ProcessType;
+  label: string;
+  icon: string;
+  controls: Component;
+  // Resolved lazily so each call reads the live store (Pinia singletons).
+  getAlgorithm: () => ProcessAlgorithm;
+  // Whether the process needs the active segment. Defaults to true; processes
+  // that act on every segment opt out. Resolved lazily for reactivity.
+  requiresActiveSegment?: () => boolean;
+};
+
+// Single source of truth for the paint processes. Adding a process is one
+// entry here instead of synchronized edits across the selector, the controls,
+// and the type enum.
+export const PROCESS_DEFINITIONS: ProcessDefinition[] = [
+  {
+    type: ProcessType.FillHoles,
+    label: 'Fill Holes',
+    icon: 'mdi-format-color-fill',
+    controls: FillHolesParameterControls,
+    getAlgorithm: () => useFillHolesStore().computeAlgorithm,
+    requiresActiveSegment: () =>
+      useFillHolesStore().segmentScope ===
+      FillHolesSegmentScope.SelectedSegment,
+  },
+  {
+    type: ProcessType.FillBetween,
+    label: 'Fill Between',
+    icon: 'mdi-layers-triple',
+    controls: FillBetweenParameterControls,
+    getAlgorithm: () => useFillBetweenStore().computeAlgorithm,
+  },
+  {
+    type: ProcessType.GaussianSmooth,
+    label: 'Smooth',
+    icon: 'mdi-blur',
+    controls: GaussianSmoothParameterControls,
+    getAlgorithm: () => useGaussianSmoothStore().computeAlgorithm,
+  },
+];
diff --git a/src/components/tools/paint/PaintTool.vue b/src/components/tools/paint/PaintTool.vue
index e76896fca..cb283121c 100644
--- a/src/components/tools/paint/PaintTool.vue
+++ b/src/components/tools/paint/PaintTool.vue
@@ -12,7 +12,6 @@
 <script lang="ts">
 import { computed, defineComponent, PropType } from 'vue';
 import { usePaintToolStore } from '@/src/store/tools/paint';
-import { PaintMode } from '@/src/core/tools/paint';
 import { LPSAxisDir } from '@/src/types/lps';
 import { Maybe } from '@/src/types';
 import PaintWidget2D from './PaintWidget2D.vue';
@@ -36,7 +35,7 @@ export default defineComponent({
   setup() {
     const paintStore = usePaintToolStore();
     const active = computed(
-      () => paintStore.isActive && paintStore.activeMode !== PaintMode.Process
+      () => paintStore.isActive && paintStore.isPaintingModeActive
     );
 
     return {
diff --git a/src/components/tools/paint/PaintWidget2D.vue b/src/components/tools/paint/PaintWidget2D.vue
index 368d9723d..0d94d08b7 100644
--- a/src/components/tools/paint/PaintWidget2D.vue
+++ b/src/components/tools/paint/PaintWidget2D.vue
@@ -24,7 +24,6 @@ import { onVTKEvent } from '@/src/composables/onVTKEvent';
 import { useSliceInfo } from '@/src/composables/useSliceInfo';
 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';
 
 export default defineComponent({
@@ -169,7 +168,7 @@ export default defineComponent({
     });
 
     watchEffect(() => {
-      widget.setEnabled(paintStore.activeMode !== PaintMode.Process);
+      widget.setEnabled(paintStore.isPaintingModeActive);
     });
 
     // Brush size scroll wheel control with customizable modifier key
diff --git a/src/core/tools/paint/__tests__/fillHoles.spec.ts b/src/core/tools/paint/__tests__/fillHoles.spec.ts
new file mode 100644
index 000000000..1f77280bd
--- /dev/null
+++ b/src/core/tools/paint/__tests__/fillHoles.spec.ts
@@ -0,0 +1,209 @@
+import { describe, it, expect } from 'vitest';
+import { fillHoles } from '../fillHoles';
+
+// Build a flat single-slice label map (axis 2, k=0) from a 2D grid.
+// grid[j][i] maps to flat index i + j*dimI.
+function flatFromGrid(grid: number[][]) {
+  const dimI = grid[0].length;
+  const dimJ = grid.length;
+  const data = new Uint8Array(grid.flat());
+  return { data, dimensions: [dimI, dimJ, 1] as [number, number, number] };
+}
+
+describe('fillHoles', () => {
+  it('fills a background hole enclosed by a single segment', () => {
+    const { data, dimensions } = flatFromGrid([
+      [1, 1, 1],
+      [1, 0, 1],
+      [1, 1, 1],
+    ]);
+    const out = fillHoles({ data, dimensions, axis: 2, sliceIndex: 0 });
+    expect(Array.from(out)).toEqual(
+      Array.from(
+        flatFromGrid([
+          [1, 1, 1],
+          [1, 1, 1],
+          [1, 1, 1],
+        ]).data
+      )
+    );
+  });
+
+  it('leaves border-connected background untouched', () => {
+    const { data, dimensions } = flatFromGrid([
+      [0, 1, 1],
+      [1, 0, 1],
+      [1, 1, 1],
+    ]);
+    const out = fillHoles({ data, dimensions, axis: 2, sliceIndex: 0 });
+    // The top-left 0 reaches the border, so it stays 0; the center is enclosed.
+    expect(Array.from(out)).toEqual(
+      Array.from(
+        flatFromGrid([
+          [0, 1, 1],
+          [1, 1, 1],
+          [1, 1, 1],
+        ]).data
+      )
+    );
+  });
+
+  it('does not mutate the input array', () => {
+    const { data, dimensions } = flatFromGrid([
+      [1, 1, 1],
+      [1, 0, 1],
+      [1, 1, 1],
+    ]);
+    const before = Array.from(data);
+    fillHoles({ data, dimensions, axis: 2, sliceIndex: 0 });
+    expect(Array.from(data)).toEqual(before);
+  });
+
+  it('all-segments: fills a hole with the majority bordering label', () => {
+    const { data, dimensions } = flatFromGrid([
+      [5, 5, 5],
+      [7, 0, 5],
+      [5, 5, 5],
+    ]);
+    // The center 0 borders three 5s and one 7, so the majority is 5.
+    const out = fillHoles({ data, dimensions, axis: 2, sliceIndex: 0 });
+    expect(out[1 + 1 * 3]).toBe(5);
+  });
+
+  it('selected-segment: fills enclosed background but preserves encircled segments', () => {
+    // 7 wide x 5 tall. Left block is a ring of 1 enclosing 0s and 2s; a stray
+    // 2 sits outside the ring on the right border.
+    const { data, dimensions } = flatFromGrid([
+      [1, 1, 1, 1, 1, 0, 2],
+      [1, 0, 2, 0, 1, 0, 0],
+      [1, 2, 2, 2, 1, 0, 0],
+      [1, 0, 2, 0, 1, 0, 0],
+      [1, 1, 1, 1, 1, 0, 0],
+    ]);
+    const out = fillHoles({
+      data,
+      dimensions,
+      axis: 2,
+      sliceIndex: 0,
+      label: 1,
+    });
+    // Enclosed background (0) becomes 1; the enclosed 2s stay 2.
+    expect(Array.from(out)).toEqual(
+      Array.from(
+        flatFromGrid([
+          [1, 1, 1, 1, 1, 0, 2],
+          [1, 1, 2, 1, 1, 0, 0],
+          [1, 2, 2, 2, 1, 0, 0],
+          [1, 1, 2, 1, 1, 0, 0],
+          [1, 1, 1, 1, 1, 0, 0],
+        ]).data
+      )
+    );
+  });
+
+  it('selected-segment: does not override a segment it fully encircles', () => {
+    // Segment 1 forms a ring around segment 2 with a background gap between.
+    const { data, dimensions } = flatFromGrid([
+      [1, 1, 1, 1, 1],
+      [1, 0, 0, 0, 1],
+      [1, 0, 2, 0, 1],
+      [1, 0, 0, 0, 1],
+      [1, 1, 1, 1, 1],
+    ]);
+    const out = fillHoles({
+      data,
+      dimensions,
+      axis: 2,
+      sliceIndex: 0,
+      label: 1,
+    });
+    // The background gap fills with 1; the encircled 2 is untouched.
+    expect(Array.from(out)).toEqual(
+      Array.from(
+        flatFromGrid([
+          [1, 1, 1, 1, 1],
+          [1, 1, 1, 1, 1],
+          [1, 1, 2, 1, 1],
+          [1, 1, 1, 1, 1],
+          [1, 1, 1, 1, 1],
+        ]).data
+      )
+    );
+  });
+
+  it('whole-volume on a non-default axis fills every slice', () => {
+    // dims [3,3,3], slicing along axis 0: each i-plane is the (j,k) plane.
+    // Every i-plane is a ring of 1 around a 0 at (j=1, k=1).
+    const dimensions: [number, number, number] = [3, 3, 3];
+    const data = new Uint8Array(27).fill(1);
+    const holeOffset = (i: number) => i + 1 * 3 + 1 * 9; // j=1, k=1
+    for (let i = 0; i < 3; i += 1) data[holeOffset(i)] = 0;
+    // A border voxel that must stay 0 (corner of the i=0 plane).
+    data[0] = 0;
+
+    const out = fillHoles({ data, dimensions, axis: 0 });
+    for (let i = 0; i < 3; i += 1) {
+      expect(out[holeOffset(i)]).toBe(1);
+    }
+    expect(out[0]).toBe(0);
+  });
+
+  it('only fills the requested slice when sliceIndex is given', () => {
+    const dimensions: [number, number, number] = [3, 3, 3];
+    const data = new Uint8Array(27).fill(1);
+    const holeOffset = (i: number) => i + 1 * 3 + 1 * 9;
+    for (let i = 0; i < 3; i += 1) data[holeOffset(i)] = 0;
+
+    const out = fillHoles({ data, dimensions, axis: 0, sliceIndex: 1 });
+    expect(out[holeOffset(0)]).toBe(0);
+    expect(out[holeOffset(1)]).toBe(1);
+    expect(out[holeOffset(2)]).toBe(0);
+  });
+
+  it('all-segments: breaks majority ties by the lowest label', () => {
+    // The center borders two 8s (reached first by the flood) and two 3s. The
+    // lower label must win regardless of traversal order, so this fails if ties
+    // fall back to insertion order.
+    const { data, dimensions } = flatFromGrid([
+      [8, 8, 3],
+      [8, 0, 3],
+      [8, 3, 3],
+    ]);
+    const out = fillHoles({ data, dimensions, axis: 2, sliceIndex: 0 });
+    expect(out[1 + 1 * 3]).toBe(3);
+  });
+
+  it('all-segments: does not grow a locked segment into a hole', () => {
+    const { data, dimensions } = flatFromGrid([
+      [5, 5, 5],
+      [5, 0, 5],
+      [5, 5, 5],
+    ]);
+    // 5 is locked, so its enclosed hole is left as background.
+    const out = fillHoles({
+      data,
+      dimensions,
+      axis: 2,
+      sliceIndex: 0,
+      lockedLabels: [5],
+    });
+    expect(out[1 + 1 * 3]).toBe(0);
+  });
+
+  it('all-segments: fills with the unlocked majority even when a locked label borders', () => {
+    const { data, dimensions } = flatFromGrid([
+      [5, 5, 5],
+      [7, 0, 5],
+      [5, 5, 5],
+    ]);
+    // Majority 5 (unlocked) wins over the single locked 7 neighbor.
+    const out = fillHoles({
+      data,
+      dimensions,
+      axis: 2,
+      sliceIndex: 0,
+      lockedLabels: [7],
+    });
+    expect(out[1 + 1 * 3]).toBe(5);
+  });
+});
diff --git a/src/core/tools/paint/fillHoles.ts b/src/core/tools/paint/fillHoles.ts
new file mode 100644
index 000000000..5ccb8e8c0
--- /dev/null
+++ b/src/core/tools/paint/fillHoles.ts
@@ -0,0 +1,182 @@
+import { TypedArray } from '@kitware/vtk.js/types';
+
+// 4-connected neighbor offsets, shared so the flood-fill loops never allocate
+// a neighbor array per visited voxel.
+const NEIGHBOR_DU = [-1, 1, 0, 0];
+const NEIGHBOR_DV = [0, 0, -1, 1];
+
+export type FillHolesOptions = {
+  // Flat label-map scalar array, indexed as i + j*dimI + k*dimI*dimJ.
+  data: TypedArray | number[];
+  // Label-map IJK dimensions [dimI, dimJ, dimK].
+  dimensions: [number, number, number];
+  // IJK axis perpendicular to the fill plane (the slice axis).
+  axis: 0 | 1 | 2;
+  // When set, only this slice index along `axis` is processed.
+  // When omitted, every slice along `axis` is processed.
+  sliceIndex?: number;
+  // When set, only this label is treated as foreground (selected-segment mode)
+  // and enclosed background is filled with it. When omitted, every non-zero
+  // voxel is foreground (all-segments mode) and enclosed background is filled
+  // with the majority bordering label. In both modes only background (0)
+  // voxels are filled, so existing segments are never overwritten.
+  label?: number;
+  // All-segments mode only: labels that must not be grown. A hole whose
+  // majority bordering label is locked is left unfilled rather than expanding a
+  // locked segment.
+  lockedLabels?: number[];
+};
+
+// Fills enclosed background regions ("holes") on 2D slices of a label map.
+// A hole is background that does not connect to the slice border. Only
+// background (0) voxels are filled; other segments are never overwritten, even
+// when enclosed by the foreground. Returns a copy of `data`; the input is left
+// untouched.
+export function fillHoles(opts: FillHolesOptions) {
+  const { data, dimensions, axis, sliceIndex, label, lockedLabels } = opts;
+  const out = data.slice();
+  const lockedSet = lockedLabels?.length ? new Set(lockedLabels) : null;
+
+  const strides = [1, dimensions[0], dimensions[0] * dimensions[1]];
+  const sliceStride = strides[axis];
+  const sliceCount = dimensions[axis];
+
+  // The two in-plane axes (everything that isn't the slice axis).
+  const [uAxis, vAxis] = [0, 1, 2].filter((a) => a !== axis);
+  const uDim = dimensions[uAxis];
+  const vDim = dimensions[vAxis];
+  const uStride = strides[uAxis];
+  const vStride = strides[vAxis];
+  const planeSize = uDim * vDim;
+
+  const isForeground =
+    label === undefined
+      ? (value: number) => value !== 0
+      : (value: number) => value === label;
+  // Only all-segments mode needs to tally each hole's bordering labels.
+  const trackBorders = label === undefined;
+
+  // 0 = unvisited, 1 = outside (border-connected non-foreground), 2 = hole.
+  const visited = new Uint8Array(planeSize);
+  const stack: number[] = [];
+
+  const firstSlice = sliceIndex ?? 0;
+  const lastSlice = sliceIndex ?? sliceCount - 1;
+
+  for (let slice = firstSlice; slice <= lastSlice; slice++) {
+    const base = slice * sliceStride;
+    visited.fill(0);
+
+    const planeOffset = (u: number, v: number) =>
+      base + u * uStride + v * vStride;
+
+    // Drain `stack`, expanding the region into unvisited non-foreground
+    // neighbors (each marked with `mark`). `collect`, when given, receives the
+    // flat offset of every region cell; `onBorder`, when given, is called with
+    // each bordering foreground label.
+    const drain = (
+      mark: number,
+      collect?: number[],
+      onBorder?: (value: number) => void
+    ) => {
+      while (stack.length) {
+        const p = stack.pop()!;
+        const u = p % uDim;
+        const v = (p - u) / uDim;
+        if (collect) collect.push(planeOffset(u, v));
+        for (let n = 0; n < 4; n++) {
+          const nu = u + NEIGHBOR_DU[n];
+          const nv = v + NEIGHBOR_DV[n];
+          if (nu < 0 || nu >= uDim || nv < 0 || nv >= vDim) continue;
+          const np = nu + nv * uDim;
+          const nValue = out[planeOffset(nu, nv)];
+          if (isForeground(nValue)) {
+            onBorder?.(nValue);
+          } else if (visited[np] === 0) {
+            visited[np] = mark;
+            stack.push(np);
+          }
+        }
+      }
+    };
+
+    // Flood non-foreground cells reachable from the slice border ("outside").
+    const seedOutside = (u: number, v: number) => {
+      const p = u + v * uDim;
+      if (visited[p] === 0 && !isForeground(out[planeOffset(u, v)])) {
+        visited[p] = 1;
+        stack.push(p);
+      }
+    };
+    for (let u = 0; u < uDim; u++) {
+      seedOutside(u, 0);
+      seedOutside(u, vDim - 1);
+    }
+    for (let v = 0; v < vDim; v++) {
+      seedOutside(0, v);
+      seedOutside(uDim - 1, v);
+    }
+    drain(1);
+
+    // Any non-foreground cell not marked "outside" is part of a hole. Group
+    // each hole into a connected component and fill it.
+    for (let v = 0; v < vDim; v++) {
+      for (let u = 0; u < uDim; u++) {
+        const p = u + v * uDim;
+        if (visited[p] !== 0 || isForeground(out[planeOffset(u, v)])) continue;
+
+        const holeCells: number[] = [];
+        const borderLabelCounts = trackBorders
+          ? new Map<number, number>()
+          : null;
+        visited[p] = 2;
+        stack.push(p);
+        drain(
+          2,
+          holeCells,
+          borderLabelCounts
+            ? (value) =>
+                borderLabelCounts.set(
+                  value,
+                  (borderLabelCounts.get(value) ?? 0) + 1
+                )
+            : undefined
+        );
+
+        let fillValue = label;
+        if (fillValue === undefined && borderLabelCounts) {
+          // All-segments mode: fill with the majority bordering label, breaking
+          // ties by lowest label so the result is deterministic. Never fill
+          // with a locked label, which would grow a locked segment.
+          let bestCount = 0;
+          let bestLabel = -1;
+          borderLabelCounts.forEach((count, value) => {
+            if (
+              count > bestCount ||
+              (count === bestCount && value < bestLabel)
+            ) {
+              bestCount = count;
+              bestLabel = value;
+            }
+          });
+          if (bestLabel !== -1 && !lockedSet?.has(bestLabel)) {
+            fillValue = bestLabel;
+          }
+        }
+        // fillValue stays undefined only when the hole had no fillable border
+        // (no foreground neighbors, or every bordering label is locked).
+        if (fillValue !== undefined) {
+          for (let c = 0; c < holeCells.length; c++) {
+            // Only fill background; never overwrite another segment, even when
+            // it is enclosed by the foreground.
+            if (out[holeCells[c]] === 0) {
+              out[holeCells[c]] = fillValue;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  return out;
+}
diff --git a/src/core/tools/paint/fillHoles.worker.ts b/src/core/tools/paint/fillHoles.worker.ts
new file mode 100644
index 000000000..6e3f30995
--- /dev/null
+++ b/src/core/tools/paint/fillHoles.worker.ts
@@ -0,0 +1,14 @@
+import * as Comlink from 'comlink';
+import { fillHoles, FillHolesOptions } from '@/src/core/tools/paint/fillHoles';
+
+// Runs the pure flood-fill off the main thread so whole-volume fills do not
+// freeze the UI, mirroring gaussianSmooth.worker.ts.
+export function fillHolesWorker(input: FillHolesOptions) {
+  return fillHoles(input);
+}
+
+const workerApi = {
+  fillHolesWorker,
+};
+
+Comlink.expose(workerApi);
diff --git a/src/store/__tests__/fillHoles.spec.ts b/src/store/__tests__/fillHoles.spec.ts
new file mode 100644
index 000000000..4368c5422
--- /dev/null
+++ b/src/store/__tests__/fillHoles.spec.ts
@@ -0,0 +1,174 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { setActivePinia, createPinia } from 'pinia';
+import { nextTick } from 'vue';
+import vtkDataArray from '@kitware/vtk.js/Common/Core/DataArray';
+import vtkImageData from '@kitware/vtk.js/Common/DataModel/ImageData';
+import vtkLabelMap from '@/src/vtk/LabelMap';
+import { useFillHolesStore } from '@/src/store/tools/fillHoles';
+import { useImageCacheStore } from '@/src/store/image-cache';
+import { usePaintToolStore } from '@/src/store/tools/paint';
+import { useSegmentGroupStore } from '@/src/store/segmentGroups';
+import { useViewSliceStore } from '@/src/store/view-configs/slicing';
+import { useViewStore } from '@/src/store/views';
+
+const fillHolesWorkerMock = vi.hoisted(() => vi.fn(async (input) => input));
+
+vi.mock('comlink', () => ({
+  wrap: () => ({
+    fillHolesWorker: fillHolesWorkerMock,
+  }),
+}));
+
+vi.mock('@/src/store/image-stats', () => ({
+  useImageStatsStore: () => ({ stats: {} }),
+}));
+
+function addScalars(image: vtkImageData, values: Uint8Array) {
+  image.getPointData().setScalars(
+    vtkDataArray.newInstance({
+      numberOfComponents: 1,
+      values,
+    })
+  );
+}
+
+type Vector3 = [number, number, number];
+type Matrix3 = [
+  number,
+  number,
+  number,
+  number,
+  number,
+  number,
+  number,
+  number,
+  number,
+];
+
+function makeImage(dimensions: Vector3, spacing: Vector3, direction: Matrix3) {
+  const image = vtkImageData.newInstance({ spacing, direction });
+  image.setDimensions(dimensions);
+  addScalars(
+    image,
+    new Uint8Array(dimensions[0] * dimensions[1] * dimensions[2])
+  );
+  image.computeTransforms();
+  return image;
+}
+
+function makeLabelMap(
+  dimensions: Vector3,
+  spacing: Vector3,
+  direction: Matrix3
+) {
+  const labelMap = vtkLabelMap.newInstance({ spacing, direction });
+  labelMap.setDimensions(dimensions);
+  addScalars(
+    labelMap,
+    new Uint8Array(dimensions[0] * dimensions[1] * dimensions[2])
+  );
+  labelMap.computeTransforms();
+  return labelMap;
+}
+
+describe('Fill Holes store', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia());
+    fillHolesWorkerMock.mockClear();
+    vi.stubGlobal(
+      'Worker',
+      class {
+        terminate() {}
+      }
+    );
+  });
+
+  async function setupFillHolesRun(labelMap: vtkLabelMap, parentSlice: number) {
+    const imageCacheStore = useImageCacheStore();
+    const segmentGroupStore = useSegmentGroupStore();
+    const viewStore = useViewStore();
+    const viewSliceStore = useViewSliceStore();
+    const paintStore = usePaintToolStore();
+    const fillHolesStore = useFillHolesStore();
+
+    const parentImageID = 'parent-image';
+    const parentImage = makeImage(
+      [10, 10, 10],
+      [1, 1, 1],
+      [1, 0, 0, 0, 1, 0, 0, 0, 1]
+    );
+    imageCacheStore.addVTKImageData(parentImage, 'Parent', {
+      id: parentImageID,
+    });
+    await nextTick();
+
+    const groupId = segmentGroupStore.addLabelmap(labelMap, {
+      name: 'Test group',
+      parentImage: parentImageID,
+      segments: {
+        order: [1],
+        byValue: {
+          1: {
+            value: 1,
+            name: 'Segment 1',
+            color: [255, 0, 0, 255],
+            visible: true,
+            locked: false,
+          },
+        },
+      },
+    });
+
+    const axialView = viewStore.visibleViews.find(
+      (view) => view.type === '2D' && view.options.orientation === 'Axial'
+    );
+    expect(axialView).toBeDefined();
+    viewStore.setDataForView(axialView!.id, parentImageID);
+    viewStore.setActiveView(axialView!.id);
+    viewSliceStore.updateConfig(axialView!.id, parentImageID, {
+      slice: parentSlice,
+    });
+
+    paintStore.activeSegmentGroupID = groupId;
+    paintStore.activeSegment = 1;
+
+    return { fillHolesStore };
+  }
+
+  it('uses the label-map axis for the active parent view axis', async () => {
+    // Label-map I points along parent/world axial, so an active Axial view must
+    // be sent to the worker as axis 0 rather than the parent image's axis 2.
+    const labelMap = makeLabelMap(
+      [5, 10, 10],
+      [1, 1, 1],
+      [0, 0, 1, 0, 1, 0, 1, 0, 0]
+    );
+    const { fillHolesStore } = await setupFillHolesRun(labelMap, 0);
+
+    await fillHolesStore.computeAlgorithm(labelMap, 1);
+
+    expect(fillHolesWorkerMock).toHaveBeenCalledTimes(1);
+    expect(fillHolesWorkerMock.mock.calls[0][0]).toMatchObject({
+      axis: 0,
+    });
+  });
+
+  it('converts the active parent slice into label-map slice space', async () => {
+    // Same orientation, different axial spacing: parent slice 4 is world z=4,
+    // which lands on label-map slice 2 when label-map z spacing is 2.
+    const labelMap = makeLabelMap(
+      [10, 10, 5],
+      [1, 1, 2],
+      [1, 0, 0, 0, 1, 0, 0, 0, 1]
+    );
+    const { fillHolesStore } = await setupFillHolesRun(labelMap, 4);
+
+    await fillHolesStore.computeAlgorithm(labelMap, 1);
+
+    expect(fillHolesWorkerMock).toHaveBeenCalledTimes(1);
+    expect(fillHolesWorkerMock.mock.calls[0][0]).toMatchObject({
+      axis: 2,
+      sliceIndex: 2,
+    });
+  });
+});
diff --git a/src/store/__tests__/paintProcess.spec.ts b/src/store/__tests__/paintProcess.spec.ts
new file mode 100644
index 000000000..2dc676fb4
--- /dev/null
+++ b/src/store/__tests__/paintProcess.spec.ts
@@ -0,0 +1,159 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { setActivePinia, createPinia } from 'pinia';
+import { createApp } from 'vue';
+import vtkDataArray from '@kitware/vtk.js/Common/Core/DataArray';
+import vtkLabelMap from '@/src/vtk/LabelMap';
+import { PaintMode } from '@/src/core/tools/paint';
+import { CorePiniaProviderPlugin } from '@/src/core/provider';
+import { useSegmentGroupStore } from '@/src/store/segmentGroups';
+import { usePaintToolStore } from '@/src/store/tools/paint';
+import { usePaintProcessStore } from '@/src/store/tools/paintProcess';
+
+function makeLabelMap(values: Uint8Array) {
+  const labelMap = vtkLabelMap.newInstance();
+  labelMap.setDimensions([values.length, 1, 1]);
+  labelMap.getPointData().setScalars(
+    vtkDataArray.newInstance({
+      numberOfComponents: 1,
+      values,
+    })
+  );
+  labelMap.computeTransforms();
+  return labelMap;
+}
+
+function getScalars(labelMap: vtkLabelMap) {
+  return Array.from(labelMap.getPointData().getScalars().getData());
+}
+
+function deferred<T>() {
+  let resolve!: (value: T) => void;
+  let reject!: (error: unknown) => void;
+  const promise = new Promise<T>((res, rej) => {
+    resolve = res;
+    reject = rej;
+  });
+  return { promise, resolve, reject };
+}
+
+function addTestSegmentGroup(values = new Uint8Array([0, 0])) {
+  const segmentGroupStore = useSegmentGroupStore();
+  const labelMap = makeLabelMap(values);
+  const groupId = segmentGroupStore.addLabelmap(labelMap, {
+    name: 'Test group',
+    parentImage: 'image-1',
+    segments: {
+      order: [1],
+      byValue: {
+        1: {
+          value: 1,
+          name: 'Segment 1',
+          color: [255, 0, 0, 255],
+          visible: true,
+          locked: false,
+        },
+      },
+    },
+  });
+
+  return { groupId, labelMap };
+}
+
+describe('Paint process store', () => {
+  beforeEach(() => {
+    const pinia = createPinia().use(CorePiniaProviderPlugin());
+    createApp({}).use(pinia);
+    setActivePinia(pinia);
+  });
+
+  it('opens process controls without changing the paint interaction mode', () => {
+    const paintStore = usePaintToolStore();
+
+    paintStore.setMode(PaintMode.Erase);
+    paintStore.setControlsMode(PaintMode.Process);
+
+    expect(paintStore.activeControlsMode).toBe(PaintMode.Process);
+    expect(paintStore.activeMode).toBe(PaintMode.Erase);
+    expect(paintStore.isPaintingModeActive).toBe(true);
+  });
+
+  it('uses process interaction mode only while previewing', async () => {
+    const paintStore = usePaintToolStore();
+    const processStore = usePaintProcessStore();
+    const { groupId, labelMap } = addTestSegmentGroup();
+
+    paintStore.setMode(PaintMode.Erase);
+    paintStore.setControlsMode(PaintMode.Process);
+    paintStore.activeSegmentGroupID = groupId;
+    paintStore.activeSegment = 1;
+
+    await processStore.startProcess(
+      groupId,
+      async () => new Uint8Array([2, 2])
+    );
+
+    expect(processStore.processState.step).toBe('previewing');
+    expect(paintStore.activeControlsMode).toBe(PaintMode.Process);
+    expect(paintStore.activeMode).toBe(PaintMode.Process);
+    expect(paintStore.isPaintingModeActive).toBe(false);
+    expect(getScalars(labelMap)).toEqual([2, 2]);
+
+    processStore.confirmProcess();
+
+    expect(processStore.processState.step).toBe('start');
+    expect(paintStore.activeControlsMode).toBe(PaintMode.Process);
+    expect(paintStore.activeMode).toBe(PaintMode.Erase);
+    expect(paintStore.isPaintingModeActive).toBe(true);
+  });
+
+  it('restores the paint interaction mode when preview is canceled', async () => {
+    const paintStore = usePaintToolStore();
+    const processStore = usePaintProcessStore();
+    const { groupId, labelMap } = addTestSegmentGroup();
+
+    paintStore.setMode(PaintMode.CirclePaint);
+    paintStore.setControlsMode(PaintMode.Process);
+    paintStore.activeSegmentGroupID = groupId;
+    paintStore.activeSegment = 1;
+
+    await processStore.startProcess(
+      groupId,
+      async () => new Uint8Array([3, 3])
+    );
+
+    processStore.cancelProcess();
+
+    expect(processStore.processState.step).toBe('start');
+    expect(paintStore.activeControlsMode).toBe(PaintMode.Process);
+    expect(paintStore.activeMode).toBe(PaintMode.CirclePaint);
+    expect(paintStore.isPaintingModeActive).toBe(true);
+    expect(getScalars(labelMap)).toEqual([0, 0]);
+  });
+
+  it('ignores stale async results after a newer process starts', async () => {
+    const paintStore = usePaintToolStore();
+    const { groupId, labelMap } = addTestSegmentGroup();
+
+    paintStore.activeSegmentGroupID = groupId;
+    paintStore.activeSegment = 1;
+    paintStore.activeMode = PaintMode.Process;
+    const processStore = usePaintProcessStore();
+
+    const first = deferred<Uint8Array>();
+    const second = deferred<Uint8Array>();
+    const firstRun = processStore.startProcess(groupId, () => first.promise);
+    const secondRun = processStore.startProcess(groupId, () => second.promise);
+
+    first.resolve(new Uint8Array([9, 9]));
+    await firstRun;
+
+    expect(processStore.processState.step).toBe('computing');
+    expect(getScalars(labelMap)).toEqual([0, 0]);
+
+    second.resolve(new Uint8Array([2, 2]));
+    await secondRun;
+
+    expect(processStore.processState.step).toBe('previewing');
+    expect(getScalars(labelMap)).toEqual([2, 2]);
+  });
+});
diff --git a/src/store/tools/fillHoles.ts b/src/store/tools/fillHoles.ts
new file mode 100644
index 000000000..d6c123cee
--- /dev/null
+++ b/src/store/tools/fillHoles.ts
@@ -0,0 +1,134 @@
+import { defineStore } from 'pinia';
+import { ref } from 'vue';
+import * as Comlink from 'comlink';
+import vtkLabelMap from '@/src/vtk/LabelMap';
+import { useViewStore } from '@/src/store/views';
+import { useViewSliceStore } from '@/src/store/view-configs/slicing';
+import { usePaintToolStore } from '@/src/store/tools/paint';
+import { useSegmentGroupStore } from '@/src/store/segmentGroups';
+import { getImageMetadata } from '@/src/composables/useCurrentImage';
+import { getEffectiveView } from '@/src/core/views/effectiveView';
+import { fillHolesWorker } from '@/src/core/tools/paint/fillHoles.worker';
+import { convertSliceIndex } from '@/src/utils/imageSpace';
+import { getLPSDirections } from '@/src/utils/lps';
+
+export enum FillHolesSliceScope {
+  CurrentSlice = 'currentSlice',
+  WholeVolume = 'wholeVolume',
+}
+
+export enum FillHolesSegmentScope {
+  AllSegments = 'allSegments',
+  SelectedSegment = 'selectedSegment',
+}
+
+type WorkerApi = {
+  fillHolesWorker: typeof fillHolesWorker;
+};
+
+let workerInstance: Comlink.Remote<WorkerApi> | null = null;
+
+async function getWorker() {
+  if (!workerInstance) {
+    const worker = new Worker(
+      new URL('@/src/core/tools/paint/fillHoles.worker.ts', import.meta.url),
+      { type: 'module' }
+    );
+    workerInstance = Comlink.wrap<WorkerApi>(worker);
+  }
+  return workerInstance;
+}
+
+export const useFillHolesStore = defineStore('fillHoles', () => {
+  const sliceScope = ref(FillHolesSliceScope.CurrentSlice);
+  const segmentScope = ref(FillHolesSegmentScope.AllSegments);
+
+  function setSliceScope(value: FillHolesSliceScope) {
+    sliceScope.value = value;
+  }
+
+  function setSegmentScope(value: FillHolesSegmentScope) {
+    segmentScope.value = value;
+  }
+
+  async function computeAlgorithm(
+    segImage: vtkLabelMap,
+    activeSegment: number
+  ) {
+    const viewStore = useViewStore();
+    const viewSliceStore = useViewSliceStore();
+    const paintStore = usePaintToolStore();
+    const segmentGroupStore = useSegmentGroupStore();
+
+    // Fill Holes works on the slice plane of the 2D view the user is on, so a
+    // 2D view must be active to know which axis (and slice) to operate on.
+    const effectiveView = getEffectiveView(viewStore.activeView);
+    if (effectiveView?.kind !== 'volume2D') {
+      throw new Error(
+        'Fill Holes needs an active 2D slice view. Click a 2D view, then try again.'
+      );
+    }
+
+    const groupId = paintStore.activeSegmentGroupID;
+    if (!groupId) {
+      throw new Error('No active segment group');
+    }
+    const metadata = segmentGroupStore.metadataByID[groupId];
+
+    const parentMetadata = getImageMetadata(metadata.parentImage);
+    const labelMapLpsOrientation = getLPSDirections(segImage.getDirection());
+    const axis = labelMapLpsOrientation[effectiveView.axis];
+
+    const dimensions = segImage.getDimensions() as [number, number, number];
+    const data = segImage.getPointData().getScalars().getData();
+
+    let sliceIndex: number | undefined;
+    if (sliceScope.value === FillHolesSliceScope.CurrentSlice) {
+      const sliceConfig = viewSliceStore.getConfig(
+        effectiveView.viewInfo.id,
+        metadata.parentImage
+      );
+      const parentAxis = parentMetadata.lpsOrientation[effectiveView.axis];
+      const parentSlice =
+        sliceConfig?.slice ??
+        Math.floor(parentMetadata.dimensions[parentAxis] / 2);
+      sliceIndex = convertSliceIndex(
+        parentSlice,
+        parentMetadata.lpsOrientation,
+        parentMetadata.indexToWorld,
+        segImage,
+        effectiveView.axis
+      );
+    }
+
+    const selectedSegment =
+      segmentScope.value === FillHolesSegmentScope.SelectedSegment;
+    const label = selectedSegment ? activeSegment : undefined;
+    // All-segments mode can fill a hole with any bordering label, so guard
+    // locked segments from being grown. Selected-segment mode only writes the
+    // active segment, whose lock is already enforced before the process starts.
+    const lockedLabels = selectedSegment
+      ? undefined
+      : Object.values(metadata.segments.byValue)
+          .filter((segment) => segment.locked)
+          .map((segment) => segment.value);
+
+    const worker = await getWorker();
+    return worker.fillHolesWorker({
+      data,
+      dimensions,
+      axis,
+      sliceIndex,
+      label,
+      lockedLabels,
+    });
+  }
+
+  return {
+    sliceScope,
+    segmentScope,
+    setSliceScope,
+    setSegmentScope,
+    computeAlgorithm,
+  };
+});
diff --git a/src/store/tools/paint.ts b/src/store/tools/paint.ts
index 97fac071c..84b8c76dc 100644
--- a/src/store/tools/paint.ts
+++ b/src/store/tools/paint.ts
@@ -27,6 +27,8 @@ export const usePaintToolStore = defineStore('paint', () => {
   type _This = ReturnType<typeof usePaintToolStore>;
 
   const activeMode = ref(PaintMode.CirclePaint);
+  const activeControlsMode = ref(PaintMode.CirclePaint);
+  const modeBeforeProcess = ref(PaintMode.CirclePaint);
   const activeSegmentGroupID = ref<Maybe<string>>(null);
   const activeSegment = ref<Maybe<number>>(null);
   const brushSize = ref(DEFAULT_BRUSH_SIZE);
@@ -50,6 +52,12 @@ export const usePaintToolStore = defineStore('paint', () => {
 
   const segmentGroupStore = useSegmentGroupStore();
 
+  const isPaintingModeActive = computed(
+    () =>
+      activeMode.value === PaintMode.CirclePaint ||
+      activeMode.value === PaintMode.Erase
+  );
+
   const currentViewIDs = computed(() => {
     const imageID = unref(currentImageID);
     if (imageID) {
@@ -68,9 +76,35 @@ export const usePaintToolStore = defineStore('paint', () => {
    */
   function setMode(this: _This, mode: PaintMode) {
     activeMode.value = mode;
+    activeControlsMode.value = mode;
+    if (mode !== PaintMode.Process) {
+      modeBeforeProcess.value = mode;
+    }
     this.$paint.setMode(mode);
   }
 
+  function setControlsMode(this: _This, mode: PaintMode) {
+    activeControlsMode.value = mode;
+    if (mode !== PaintMode.Process) {
+      setMode.call(this, mode);
+    }
+  }
+
+  function enterProcessMode(this: _This) {
+    if (activeMode.value !== PaintMode.Process) {
+      modeBeforeProcess.value = activeMode.value;
+    }
+    activeMode.value = PaintMode.Process;
+    activeControlsMode.value = PaintMode.Process;
+    this.$paint.setMode(PaintMode.Process);
+  }
+
+  function restoreModeAfterProcess(this: _This) {
+    if (activeMode.value !== PaintMode.Process) return;
+    activeMode.value = modeBeforeProcess.value;
+    this.$paint.setMode(modeBeforeProcess.value);
+  }
+
   /**
    * Sets the active labelmap.
    */
@@ -410,11 +444,13 @@ export const usePaintToolStore = defineStore('paint', () => {
 
   return {
     activeMode,
+    activeControlsMode,
     activeSegmentGroupID,
     activeSegment,
     brushSize,
     strokePoints,
     isActive,
+    isPaintingModeActive,
     thresholdRange,
     crossPlaneSync,
 
@@ -424,6 +460,9 @@ export const usePaintToolStore = defineStore('paint', () => {
     deactivateTool,
 
     setMode,
+    setControlsMode,
+    enterProcessMode,
+    restoreModeAfterProcess,
     setActiveSegmentGroup,
     setActiveSegment,
     setBrushSize,
diff --git a/src/store/tools/paintProcess.ts b/src/store/tools/paintProcess.ts
index 66269dae1..8220d4615 100644
--- a/src/store/tools/paintProcess.ts
+++ b/src/store/tools/paintProcess.ts
@@ -1,7 +1,6 @@
 import { defineStore, storeToRefs } from 'pinia';
 import { ref, computed, watch } from 'vue';
 import { TypedArray } from '@kitware/vtk.js/types';
-import { whenever } from '@vueuse/core';
 import vtkLabelMap from '@/src/vtk/LabelMap';
 import { usePaintToolStore } from '@/src/store/tools/paint';
 import { PaintMode } from '@/src/core/tools/paint';
@@ -10,6 +9,7 @@ import { useCurrentImage } from '@/src/composables/useCurrentImage';
 import { useSegmentGroupStore } from '../segmentGroups';
 
 export enum ProcessType {
+  FillHoles = 'fillHoles',
   FillBetween = 'fillBetween',
   GaussianSmooth = 'gaussianSmooth',
 }
@@ -21,12 +21,14 @@ type StartState = {
 type ComputingState = {
   step: 'computing';
   activeParentImageID: string | null;
+  activeSegmentGroupID: string;
   processType: ProcessType;
 };
 
 type PreviewingState = {
   step: 'previewing';
   activeParentImageID: string | null;
+  activeSegmentGroupID: string;
   processType: ProcessType;
   segImage: vtkLabelMap;
   originalScalars: TypedArray | number[];
@@ -43,7 +45,8 @@ export type ProcessAlgorithm = (
 
 export const usePaintProcessStore = defineStore('paintProcess', () => {
   const processState = ref<ProcessState>({ step: 'start' });
-  const activeProcessType = ref<ProcessType>(ProcessType.FillBetween);
+  const activeProcessType = ref<ProcessType>(ProcessType.FillHoles);
+  let activeProcessRunId = 0;
 
   const processStep = computed(() => processState.value.step);
 
@@ -57,7 +60,19 @@ export const usePaintProcessStore = defineStore('paintProcess', () => {
   }
 
   function confirmProcess() {
+    const state = processState.value;
+    // Apply commits the processed result. When the user is viewing the
+    // original, the image currently holds originalScalars, so restore the
+    // processed scalars before finishing or the result is silently discarded.
+    if (state.step === 'previewing' && state.showingOriginal) {
+      state.segImage
+        .getPointData()
+        .getScalars()
+        .setData(state.processedScalars);
+      state.segImage.modified();
+    }
     resetState();
+    paintStore.restoreModeAfterProcess();
   }
 
   const segmentGroupStore = useSegmentGroupStore();
@@ -81,6 +96,7 @@ export const usePaintProcessStore = defineStore('paintProcess', () => {
       rollbackPreview(state.segImage, state.originalScalars);
     }
     resetState();
+    paintStore.restoreModeAfterProcess();
   }
 
   function setActiveProcessType(processType: ProcessType) {
@@ -89,23 +105,35 @@ export const usePaintProcessStore = defineStore('paintProcess', () => {
     activeProcessType.value = processType;
   }
 
-  async function startProcess(groupId: string, algorithm: ProcessAlgorithm) {
-    if (!paintStore.activeSegment) {
-      messageStore.addError('No active segment selected');
-      return;
-    }
+  async function startProcess(
+    groupId: string,
+    algorithm: ProcessAlgorithm,
+    options?: { requiresActiveSegment?: boolean }
+  ) {
+    const activeSegment = paintStore.activeSegment;
+    // Most processes operate on the active segment; all-segments processes opt
+    // out so they are not blocked by (or limited to) a single active segment.
+    const requiresActiveSegment = options?.requiresActiveSegment ?? true;
+
+    if (requiresActiveSegment) {
+      if (!activeSegment) {
+        messageStore.addError('No active segment selected');
+        return;
+      }
 
-    // Check if the active segment is locked
-    const segment = segmentGroupStore.getSegment(
-      groupId,
-      paintStore.activeSegment
-    );
-    if (segment?.locked) {
-      messageStore.addError('Cannot process locked segment');
-      return;
+      // Check if the active segment is locked
+      const segment = segmentGroupStore.getSegment(groupId, activeSegment);
+      if (segment?.locked) {
+        messageStore.addError('Cannot process locked segment');
+        return;
+      }
     }
 
     const segImage = segmentGroupStore.dataIndex[groupId];
+    const activeParentImageID =
+      segmentGroupStore.metadataByID[groupId].parentImage;
+    const processType = activeProcessType.value;
+    const processRunId = ++activeProcessRunId;
 
     const originalScalars = segImage
       .getPointData()
@@ -113,18 +141,23 @@ export const usePaintProcessStore = defineStore('paintProcess', () => {
       .getData()
       .slice();
 
+    paintStore.enterProcessMode();
     processState.value = {
       step: 'computing',
-      activeParentImageID: segmentGroupStore.metadataByID[groupId].parentImage,
-      processType: activeProcessType.value,
+      activeParentImageID,
+      activeSegmentGroupID: groupId,
+      processType,
     };
 
     try {
-      const outputScalars = await algorithm(segImage, paintStore.activeSegment);
-
-      // If the state changed during the async operation, stop processing
-      if (processState.value.step !== 'computing') {
-        return; // cancelProcess handled the state change
+      const outputScalars = await algorithm(segImage, activeSegment ?? 0);
+
+      // If the state changed during the async operation, stop processing.
+      if (
+        processRunId !== activeProcessRunId ||
+        processState.value.step !== 'computing'
+      ) {
+        return;
       }
 
       const scalars = segImage.getPointData().getScalars();
@@ -133,22 +166,28 @@ export const usePaintProcessStore = defineStore('paintProcess', () => {
 
       processState.value = {
         step: 'previewing',
-        activeParentImageID:
-          segmentGroupStore.metadataByID[groupId].parentImage,
-        processType: activeProcessType.value,
+        activeParentImageID,
+        activeSegmentGroupID: groupId,
+        processType,
         segImage,
         originalScalars,
         processedScalars: outputScalars,
         showingOriginal: false,
       };
     } catch (error) {
-      messageStore.addError(`${activeProcessType.value} Operation Failed`, {
+      if (
+        processRunId !== activeProcessRunId ||
+        processState.value.step !== 'computing'
+      ) {
+        return;
+      }
+
+      messageStore.addError(`${processType} Operation Failed`, {
         error: error as Error,
       });
-      if (processState.value.step === 'computing') {
-        rollbackPreview(segImage, originalScalars);
-        resetState();
-      }
+      rollbackPreview(segImage, originalScalars);
+      resetState();
+      paintStore.restoreModeAfterProcess();
     }
   }
 
@@ -171,16 +210,29 @@ export const usePaintProcessStore = defineStore('paintProcess', () => {
     }
   }
 
-  // Cancel process when switching away from Process mode
-  whenever(
-    () => paintStore.activeMode !== PaintMode.Process,
-    () => {
+  watch(
+    () => paintStore.activeMode,
+    (mode, previousMode) => {
+      if (previousMode !== PaintMode.Process || mode === PaintMode.Process) {
+        return;
+      }
+      const state = processState.value;
+      if (state.step !== 'computing' && state.step !== 'previewing') {
+        return;
+      }
       cancelProcess();
     }
   );
 
   // Cancel process when active segment group changes
-  watch(activeSegmentGroupID, () => {
+  watch(activeSegmentGroupID, (groupId) => {
+    const state = processState.value;
+    if (state.step !== 'computing' && state.step !== 'previewing') {
+      return;
+    }
+    if (state.activeSegmentGroupID === groupId) {
+      return;
+    }
     cancelProcess();
   });
 
diff --git a/tests/pageobjects/volview.page.ts b/tests/pageobjects/volview.page.ts
index 7aebc7984..c69b9e814 100644
--- a/tests/pageobjects/volview.page.ts
+++ b/tests/pageobjects/volview.page.ts
@@ -114,6 +114,87 @@ class VolViewPage extends Page {
     await button.click();
   }
 
+  // Paint "Process" mode and the Fill Holes process workflow.
+  get processModeButton() {
+    return $('button*=Process');
+  }
+
+  get fillHolesProcessButton() {
+    return $('button*=Fill Holes');
+  }
+
+  get fillHolesWholeVolumeButton() {
+    return $('button*=All slices');
+  }
+
+  get fillHolesSelectedSegmentButton() {
+    return $('button*=Selected segment');
+  }
+
+  get processPreviewButton() {
+    return $('button*=Preview');
+  }
+
+  get processApplyButton() {
+    return $('button*=Apply');
+  }
+
+  get processOriginalButton() {
+    return $('button*=Original');
+  }
+
+  get processProcessedButton() {
+    return $('button*=Processed');
+  }
+
+  // The selected button in a Vuetify v-btn-toggle carries v-btn--active.
+  async isPreviewToggleActive(button: ChainablePromiseElement) {
+    const classes = await button.getAttribute('class');
+    return (classes ?? '').includes('v-btn--active');
+  }
+
+  async paintStrokeOnView(view: ChainablePromiseElement) {
+    const canvas = await view.$('canvas');
+    const location = await canvas.getLocation();
+    const size = await canvas.getSize();
+    const centerX = Math.round(location.x + size.width / 2);
+    const centerY = Math.round(location.y + size.height / 2);
+
+    await browser
+      .action('pointer')
+      .move({ x: centerX, y: centerY })
+      .down()
+      .move({ x: centerX + 40, y: centerY })
+      .move({ x: centerX + 40, y: centerY + 40 })
+      .move({ x: centerX, y: centerY + 40 })
+      .move({ x: centerX, y: centerY })
+      .up()
+      .perform();
+  }
+
+  async runFillHoles() {
+    await this.processModeButton.waitForClickable();
+    await this.processModeButton.click();
+
+    const fillHoles = this.fillHolesProcessButton;
+    await fillHoles.waitForClickable();
+    await fillHoles.click();
+
+    const preview = this.processPreviewButton;
+    await preview.waitForClickable();
+    await preview.click();
+
+    // Reaching the "previewing" state (Apply appears) only happens after the
+    // algorithm runs successfully on the label map.
+    const apply = this.processApplyButton;
+    await apply.waitForDisplayed();
+    await apply.waitForClickable();
+    await apply.click();
+
+    // Applying returns the workflow to its start state (Preview reappears).
+    await this.processPreviewButton.waitForDisplayed();
+  }
+
   get viewTwoContainer() {
     return $('div[data-testid~="two-view-container"]');
   }
diff --git a/tests/specs/paint-fill-holes.e2e.ts b/tests/specs/paint-fill-holes.e2e.ts
new file mode 100644
index 000000000..1a1471d8d
--- /dev/null
+++ b/tests/specs/paint-fill-holes.e2e.ts
@@ -0,0 +1,76 @@
+import AppPage from '../pageobjects/volview.page';
+
+describe('Fill Holes paint process', () => {
+  beforeEach(async () => {
+    await AppPage.open();
+    await AppPage.downloadProstateSample();
+    await AppPage.waitForViews();
+
+    const views2D = await AppPage.getViews2D();
+    const axialView = views2D[0];
+
+    await AppPage.activatePaint();
+    // Paint a shape so the label map has data for the algorithm to process.
+    await AppPage.paintStrokeOnView(axialView);
+  });
+
+  it('runs the Fill Holes workflow to completion on a painted segment', async () => {
+    // Default options: current slice, all segments.
+    await AppPage.runFillHoles();
+
+    // The Preview button is back, meaning the process applied without error.
+    await expect(AppPage.processPreviewButton).toBeDisplayed();
+  });
+
+  it('runs Fill Holes with whole-volume and selected-segment options', async () => {
+    await AppPage.processModeButton.waitForClickable();
+    await AppPage.processModeButton.click();
+    await AppPage.fillHolesProcessButton.waitForClickable();
+    await AppPage.fillHolesProcessButton.click();
+
+    // Switch both option toggles away from their defaults.
+    await AppPage.fillHolesWholeVolumeButton.waitForClickable();
+    await AppPage.fillHolesWholeVolumeButton.click();
+    await AppPage.fillHolesSelectedSegmentButton.waitForClickable();
+    await AppPage.fillHolesSelectedSegmentButton.click();
+
+    await AppPage.processPreviewButton.waitForClickable();
+    await AppPage.processPreviewButton.click();
+
+    const apply = AppPage.processApplyButton;
+    await apply.waitForDisplayed();
+    await apply.waitForClickable();
+    await apply.click();
+
+    await expect(AppPage.processPreviewButton).toBeDisplayed();
+  });
+
+  it('toggles the preview in place between processed and original', async () => {
+    await AppPage.processModeButton.waitForClickable();
+    await AppPage.processModeButton.click();
+    await AppPage.fillHolesProcessButton.waitForClickable();
+    await AppPage.fillHolesProcessButton.click();
+
+    await AppPage.processPreviewButton.waitForClickable();
+    await AppPage.processPreviewButton.click();
+
+    // Previewing starts on the processed result.
+    await AppPage.processProcessedButton.waitForDisplayed();
+    await browser.waitUntil(() =>
+      AppPage.isPreviewToggleActive(AppPage.processProcessedButton)
+    );
+    expect(
+      await AppPage.isPreviewToggleActive(AppPage.processOriginalButton)
+    ).toBe(false);
+
+    // Clicking the already-active button flips the preview in place, without
+    // moving the pointer to the other button.
+    await AppPage.processProcessedButton.click();
+    await browser.waitUntil(() =>
+      AppPage.isPreviewToggleActive(AppPage.processOriginalButton)
+    );
+    expect(
+      await AppPage.isPreviewToggleActive(AppPage.processProcessedButton)
+    ).toBe(false);
+  });
+});
diff --git a/wdio.shared.conf.ts b/wdio.shared.conf.ts
index ee5406499..08f31c7a7 100644
--- a/wdio.shared.conf.ts
+++ b/wdio.shared.conf.ts
@@ -108,7 +108,7 @@ export const config: Options.Testrunner = {
   reporters: ['spec', 'html-nice'],
   mochaOpts: {
     ui: 'bdd',
-    timeout: 60000,
+    timeout: 90_000,
   },
 
   //

From b048b7d951b3205f110ac612f9152c186103511c Mon Sep 17 00:00:00 2001
From: Paul Elliott <paul@vizworkshop.com>
Date: Mon, 29 Jun 2026 11:39:46 -0400
Subject: [PATCH 2/3] fix(ui): refine paint process and sidebar controls

Group process-control layout cleanup with annotation sidebar alignment and panel tab width fixes.
---
 src/components/AnnotationsModule.vue          |  10 +-
 src/components/DataBrowser.vue                |   3 +-
 .../FillBetweenParameterControls.vue          |   2 +-
 src/components/FillHolesParameterControls.vue |   6 +-
 .../GaussianSmoothParameterControls.vue       |   3 +-
 src/components/MiniExpansionPanel.vue         |   2 +-
 src/components/ModulePanel.vue                |  20 +-
 src/components/PaintControls.vue              | 312 ++++++++++--------
 src/components/ProcessControls.vue            |   2 +-
 src/components/ProcessTypeSelector.vue        |  56 ++--
 src/components/ProcessWorkflow.vue            |  25 +-
 src/components/RenderingModule.vue            |   2 +-
 src/components/SegmentGroupControls.vue       |  26 +-
 src/components/SegmentList.vue                | 170 +++++-----
 src/components/ServerModule.vue               |   2 +-
 src/components/ToolControls.vue               |  83 ++++-
 src/store/__tests__/paintProcess.spec.ts      |  19 +-
 src/store/tools/paint.ts                      |  24 +-
 tests/pageobjects/volview.page.ts             |   2 +-
 19 files changed, 442 insertions(+), 327 deletions(-)

diff --git a/src/components/AnnotationsModule.vue b/src/components/AnnotationsModule.vue
index 1f3adb556..ec1456493 100644
--- a/src/components/AnnotationsModule.vue
+++ b/src/components/AnnotationsModule.vue
@@ -54,10 +54,9 @@ watch(
 </script>
 
 <template>
-  <div class="overflow-y-auto mx-2 fill-height">
+  <div>
     <tool-controls />
-    <v-divider thickness="4" />
-    <v-tabs v-model="tab" align-tabs="center" density="compact" class="my-1">
+    <v-tabs v-model="tab" density="compact" grow class="annotation-tabs my-1">
       <v-tab value="segmentGroups" class="tab-header">Segment Groups</v-tab>
       <v-tab value="measurements" class="tab-header">Measurements</v-tab>
     </v-tabs>
@@ -73,6 +72,11 @@ watch(
 </template>
 
 <style scoped>
+.annotation-tabs :deep(.v-tab.v-tab) {
+  flex: 1 1 0;
+  min-width: 0;
+}
+
 .tab-header {
   font-size: 0.8rem;
 }
diff --git a/src/components/DataBrowser.vue b/src/components/DataBrowser.vue
index 3c90dc50b..881db15d5 100644
--- a/src/components/DataBrowser.vue
+++ b/src/components/DataBrowser.vue
@@ -117,7 +117,7 @@ export default defineComponent({
 </script>
 
 <template>
-  <div id="data-module" class="mx-1 fill-height">
+  <div id="data-module">
     <div id="data-panels">
       <v-expansion-panels
         v-model="panels"
@@ -209,7 +209,6 @@ export default defineComponent({
 
 #data-panels {
   flex: 2;
-  overflow-y: auto;
 }
 
 .collection-header-icon {
diff --git a/src/components/FillBetweenParameterControls.vue b/src/components/FillBetweenParameterControls.vue
index 3078b0bfc..2c22e72d1 100644
--- a/src/components/FillBetweenParameterControls.vue
+++ b/src/components/FillBetweenParameterControls.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="d-flex align-center">
+  <div class="d-flex align-start w-100">
     <mini-expansion-panel>
       <template #title> Interpolate segmentation between slices. </template>
       <ul>
diff --git a/src/components/FillHolesParameterControls.vue b/src/components/FillHolesParameterControls.vue
index d44de6afa..55d437988 100644
--- a/src/components/FillHolesParameterControls.vue
+++ b/src/components/FillHolesParameterControls.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="d-flex align-center">
+  <div class="d-flex align-start w-100">
     <mini-expansion-panel>
       <template #title
         >Fill enclosed holes in the segmentation on the axis of the selected
@@ -22,11 +22,11 @@
   <div
     v-for="scope in scopes"
     :key="scope.label"
-    class="w-100 px-4 mb-4 d-flex flex-column align-center"
+    class="w-100 mb-4 d-flex flex-column align-start"
   >
-    <div class="text-caption mb-1">{{ scope.label }}</div>
     <v-btn-toggle
       :model-value="scope.value"
+      :aria-label="scope.label"
       density="compact"
       variant="outlined"
       divided
diff --git a/src/components/GaussianSmoothParameterControls.vue b/src/components/GaussianSmoothParameterControls.vue
index 3e1882b94..46cbd9d14 100644
--- a/src/components/GaussianSmoothParameterControls.vue
+++ b/src/components/GaussianSmoothParameterControls.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="d-flex align-center">
+  <div class="d-flex align-start w-100">
     <mini-expansion-panel>
       <template #title>Gaussian smooth selected segment.</template>
       <ul>
@@ -17,7 +17,6 @@
 
   <div class="w-100 mb-4">
     <v-slider
-      class="mx-4"
       label="Smoothing Strength (σ)"
       :min="MIN_SIGMA"
       :max="MAX_SIGMA"
diff --git a/src/components/MiniExpansionPanel.vue b/src/components/MiniExpansionPanel.vue
index 1c747804d..42004f993 100644
--- a/src/components/MiniExpansionPanel.vue
+++ b/src/components/MiniExpansionPanel.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="w-100 mb-4">
     <div class="d-flex align-center justify-space-between">
       <div class="d-flex">
         <slot name="title"> </slot>
diff --git a/src/components/ModulePanel.vue b/src/components/ModulePanel.vue
index a5fe429d3..11dfe5e8a 100644
--- a/src/components/ModulePanel.vue
+++ b/src/components/ModulePanel.vue
@@ -4,6 +4,7 @@
       <v-tabs
         id="module-switcher-tabs"
         v-model="selectedModuleIndex"
+        grow
         icons-and-text
         show-arrows
       >
@@ -21,11 +22,11 @@
       </v-tabs>
     </div>
     <div id="module-container">
-      <v-window v-model="selectedModuleIndex" touchless class="fill-height">
+      <v-window v-model="selectedModuleIndex" touchless class="module-window">
         <v-window-item
           v-for="mod in modules"
           :key="mod.name"
-          class="fill-height"
+          class="module-window-item"
         >
           <component
             :key="mod.name"
@@ -148,8 +149,14 @@ export default defineComponent({
 #module-container {
   position: relative;
   flex: 2;
-  overflow: auto;
-  scrollbar-gutter: stable;
+  min-height: 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.module-window,
+.module-window-item {
+  min-height: 100%;
 }
 
 .module-text {
@@ -165,8 +172,9 @@ export default defineComponent({
   align-items: center;
 }
 
-#module-switcher-tabs :deep(.v-slide-group__content) {
-  justify-content: center;
+#module-switcher-tabs :deep(.v-tab.v-tab) {
+  flex: 1 1 0;
+  min-width: 0;
 }
 
 #module-switcher-tabs
diff --git a/src/components/PaintControls.vue b/src/components/PaintControls.vue
index 5576e8870..f385b7a22 100644
--- a/src/components/PaintControls.vue
+++ b/src/components/PaintControls.vue
@@ -1,157 +1,176 @@
 <template>
-  <v-container>
-    <v-row no-gutters align="center" justify="center" class="mb-4">
-      <v-item-group
-        v-model="controlsMode"
-        mandatory
-        selected-class="selected"
-        class="d-flex align-center justify-center"
-      >
-        <v-item
-          :value="PaintMode.CirclePaint"
-          v-slot="{ selectedClass, toggle }"
-        >
-          <v-btn
-            variant="tonal"
-            rounded="8"
-            stacked
-            :class="['mode-button', 'mx-2', selectedClass]"
-            @click.stop="toggle"
-          >
-            <v-icon>mdi-brush</v-icon>
-            <span class="text-caption">Paint</span>
-          </v-btn>
-        </v-item>
-        <v-item :value="PaintMode.Erase" v-slot="{ selectedClass, toggle }">
-          <v-btn
-            variant="tonal"
-            rounded="8"
-            stacked
-            :class="['mode-button', 'mx-2', selectedClass]"
-            @click.stop="toggle"
-          >
-            <v-icon>mdi-eraser</v-icon>
-            <span class="text-caption">Eraser</span>
-          </v-btn>
-        </v-item>
-        <v-item :value="PaintMode.Process" v-slot="{ selectedClass, toggle }">
-          <v-btn
-            variant="tonal"
-            rounded="8"
-            stacked
-            :class="['mode-button', 'mx-2', selectedClass]"
-            @click.stop="toggle"
-          >
-            <v-icon>mdi-cogs</v-icon>
-            <span class="text-caption">Process</span>
-          </v-btn>
-        </v-item>
-      </v-item-group>
-    </v-row>
-    <template
-      v-if="
-        controlsMode === PaintMode.CirclePaint ||
-        controlsMode === PaintMode.Erase
-      "
+  <v-container class="pa-0">
+    <v-expansion-panels
+      v-model="controlPanels"
+      multiple
+      variant="accordion"
+      class="paint-process-panels"
     >
-      <v-row no-gutters align="center" class="mb-2">
-        <span class="mr-2">Sync Views</span>
-        <v-switch
-          v-model="crossPlaneSync"
-          color="primary"
-          density="compact"
-          hide-details
-          class="ml-3"
-        ></v-switch>
-      </v-row>
-      <v-row no-gutters>Size (pixels)</v-row>
-      <v-row no-gutters align="center">
-        <v-slider
-          :model-value="brushSize"
-          @update:model-value="setBrushSize"
-          density="compact"
-          hide-details
-          min="1"
-          max="50"
-        >
-          <template v-slot:append>
-            <v-text-field
+      <v-expansion-panel :value="PAINT_PANEL">
+        <v-expansion-panel-title>
+          <v-icon class="flex-grow-0 mr-4">mdi-brush</v-icon>
+          Paint
+        </v-expansion-panel-title>
+        <v-expansion-panel-text class="control-panel-body">
+          <v-row no-gutters align="center" justify="start" class="mb-4">
+            <v-item-group
+              v-model="interactionMode"
+              mandatory
+              selected-class="selected"
+              class="d-flex align-center justify-start ga-4"
+            >
+              <v-item
+                :value="PaintMode.CirclePaint"
+                v-slot="{ selectedClass, toggle }"
+              >
+                <v-btn
+                  variant="tonal"
+                  rounded="8"
+                  stacked
+                  :class="['mode-button', selectedClass]"
+                  :disabled="!isPaintingModeActive"
+                  @click.stop="toggle"
+                >
+                  <v-icon>mdi-brush</v-icon>
+                  <span class="text-caption">Paint</span>
+                </v-btn>
+              </v-item>
+              <v-item
+                :value="PaintMode.Erase"
+                v-slot="{ selectedClass, toggle }"
+              >
+                <v-btn
+                  variant="tonal"
+                  rounded="8"
+                  stacked
+                  :class="['mode-button', selectedClass]"
+                  :disabled="!isPaintingModeActive"
+                  @click.stop="toggle"
+                >
+                  <v-icon>mdi-eraser</v-icon>
+                  <span class="text-caption">Eraser</span>
+                </v-btn>
+              </v-item>
+            </v-item-group>
+          </v-row>
+
+          <v-row no-gutters align="center" class="mb-2">
+            <span class="mr-2">Sync Views</span>
+            <v-switch
+              v-model="crossPlaneSync"
+              color="primary"
+              density="compact"
+              hide-details
+              class="ml-3"
+            ></v-switch>
+          </v-row>
+          <v-row no-gutters>Size (pixels)</v-row>
+          <v-row no-gutters align="center">
+            <v-slider
               :model-value="brushSize"
-              @input="setBrushSize"
-              variant="underlined"
-              class="mt-n3 pt-0 pl-2 opacity-70"
-              style="width: 60px"
+              @update:model-value="setBrushSize"
               density="compact"
               hide-details
-              type="number"
               min="1"
               max="50"
-            />
-          </template>
-        </v-slider>
-      </v-row>
-      <v-row no-gutters class="mb-1">Threshold </v-row>
-      <v-row v-if="currentImageStats" no-gutters align="center">
-        <v-range-slider
-          v-model="threshold"
-          :min="currentImageStats.scalarMin"
-          :max="currentImageStats.scalarMax"
-          :step="thresholdStepGranularity"
-        >
-          <template #prepend>
-            <v-text-field
-              :model-value="thresholdRange[0].toFixed(2)"
-              @input="setMinThreshold($event.target.value)"
-              variant="underlined"
-              class="mt-n3 pt-0 pl-2 opacity-70"
-              style="width: 80px"
-              density="compact"
-              hide-details
-              type="number"
-              precision="2"
+            >
+              <template v-slot:append>
+                <v-text-field
+                  :model-value="brushSize"
+                  @input="setBrushSize"
+                  variant="underlined"
+                  class="mt-n3 pt-0 pl-2 opacity-70"
+                  style="width: 60px"
+                  density="compact"
+                  hide-details
+                  type="number"
+                  min="1"
+                  max="50"
+                />
+              </template>
+            </v-slider>
+          </v-row>
+          <v-row no-gutters class="mb-1">Threshold </v-row>
+          <v-row v-if="currentImageStats" no-gutters align="center">
+            <v-range-slider
+              v-model="threshold"
               :min="currentImageStats.scalarMin"
-              :max="thresholdRange[1]"
-            />
-          </template>
-          <template #append>
-            <v-text-field
-              :model-value="thresholdRange[1].toFixed(2)"
-              @input="setMaxThreshold($event.target.value)"
-              variant="underlined"
-              class="mt-n3 pt-0 pl-2 opacity-70"
-              style="width: 80px"
-              density="compact"
-              hide-details
-              type="number"
-              precision="2"
-              :min="thresholdRange[0]"
               :max="currentImageStats.scalarMax"
-            />
-          </template>
-        </v-range-slider>
-      </v-row>
-    </template>
-    <template v-if="controlsMode === PaintMode.Process">
-      <v-row no-gutters align="center">
-        <ProcessControls />
-      </v-row>
-    </template>
+              :step="thresholdStepGranularity"
+            >
+              <template #prepend>
+                <v-text-field
+                  :model-value="thresholdRange[0].toFixed(2)"
+                  @input="setMinThreshold($event.target.value)"
+                  variant="underlined"
+                  class="mt-n3 pt-0 pl-2 opacity-70"
+                  style="width: 80px"
+                  density="compact"
+                  hide-details
+                  type="number"
+                  precision="2"
+                  :min="currentImageStats.scalarMin"
+                  :max="thresholdRange[1]"
+                />
+              </template>
+              <template #append>
+                <v-text-field
+                  :model-value="thresholdRange[1].toFixed(2)"
+                  @input="setMaxThreshold($event.target.value)"
+                  variant="underlined"
+                  class="mt-n3 pt-0 pl-2 opacity-70"
+                  style="width: 80px"
+                  density="compact"
+                  hide-details
+                  type="number"
+                  precision="2"
+                  :min="thresholdRange[0]"
+                  :max="currentImageStats.scalarMax"
+                />
+              </template>
+            </v-range-slider>
+          </v-row>
+        </v-expansion-panel-text>
+      </v-expansion-panel>
+
+      <v-expansion-panel :value="PROCESS_PANEL">
+        <v-expansion-panel-title>
+          <v-icon class="flex-grow-0 mr-4">mdi-cogs</v-icon>
+          Process
+        </v-expansion-panel-title>
+        <v-expansion-panel-text class="control-panel-body">
+          <ProcessControls />
+        </v-expansion-panel-text>
+      </v-expansion-panel>
+    </v-expansion-panels>
   </v-container>
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed, ref } from 'vue';
 import { storeToRefs } from 'pinia';
 import { PaintMode } from '@/src/core/tools/paint';
 import { usePaintToolStore } from '@/src/store/tools/paint';
+import { usePaintProcessStore } from '@/src/store/tools/paintProcess';
 import ProcessControls from '@/src/components/ProcessControls.vue';
 import { useCurrentImage } from '@/src/composables/useCurrentImage';
 import { useImageStatsStore } from '@/src/store/image-stats';
 
 const paintStore = usePaintToolStore();
+const processStore = usePaintProcessStore();
 const imageStatsStore = useImageStatsStore();
-const { brushSize, activeControlsMode, thresholdRange, crossPlaneSync } =
-  storeToRefs(paintStore);
+const PAINT_PANEL = 'paint';
+const PROCESS_PANEL = 'process';
+const paintControlsOpen = ref(true);
+const { setProcessControlsOpen } = paintStore;
+const {
+  brushSize,
+  activePaintMode,
+  processControlsOpen,
+  isPaintingModeActive,
+  thresholdRange,
+  crossPlaneSync,
+} = storeToRefs(paintStore);
 const { currentImageID } = useCurrentImage();
 
 const currentImageStats = computed(() => {
@@ -163,6 +182,7 @@ const thresholdStepGranularity = computed(() => {
   const { scalarMin, scalarMax } = currentImageStats.value;
   return Math.min(1, (scalarMax - scalarMin) / 256);
 });
+const isProcessActive = computed(() => processStore.processStep !== 'start');
 const threshold = computed({
   get: () => thresholdRange.value,
   set: (range) => {
@@ -182,10 +202,24 @@ const setBrushSize = (size: number) => {
   paintStore.setBrushSize(Number(size));
 };
 
-const controlsMode = computed({
-  get: () => activeControlsMode.value,
+const interactionMode = computed({
+  get: () => activePaintMode.value,
   set: (m) => {
-    paintStore.setControlsMode(m);
+    paintStore.setMode(m);
+  },
+});
+const controlPanels = computed({
+  get: () => [
+    ...(paintControlsOpen.value ? [PAINT_PANEL] : []),
+    ...(processControlsOpen.value ? [PROCESS_PANEL] : []),
+  ],
+  set: (panels) => {
+    paintControlsOpen.value = panels.includes(PAINT_PANEL);
+    if (isProcessActive.value) {
+      setProcessControlsOpen(true);
+      return;
+    }
+    setProcessControlsOpen(panels.includes(PROCESS_PANEL));
   },
 });
 </script>
@@ -202,4 +236,12 @@ const controlsMode = computed({
   height: 56px;
   width: 110px;
 }
+
+.paint-process-panels {
+  width: 100%;
+}
+
+.control-panel-body :deep(.v-expansion-panel-text__wrapper) {
+  padding: 12px 14px 16px;
+}
 </style>
diff --git a/src/components/ProcessControls.vue b/src/components/ProcessControls.vue
index 7a587a923..804d1829f 100644
--- a/src/components/ProcessControls.vue
+++ b/src/components/ProcessControls.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="d-flex flex-column align-center w-100">
+  <div class="d-flex flex-column align-start w-100">
     <ProcessTypeSelector />
 
     <template v-if="activeDefinition">
diff --git a/src/components/ProcessTypeSelector.vue b/src/components/ProcessTypeSelector.vue
index 8c7837bd4..858811353 100644
--- a/src/components/ProcessTypeSelector.vue
+++ b/src/components/ProcessTypeSelector.vue
@@ -1,29 +1,22 @@
 <template>
-  <v-row no-gutters align="center" justify="center" class="mb-4">
-    <v-item-group
-      v-model="activeProcessType"
-      mandatory
-      selected-class="selected"
-      class="d-flex align-center justify-center flex-wrap"
-    >
-      <v-item
+  <v-row no-gutters class="mb-4 w-100">
+    <v-list density="compact" nav class="process-type-list">
+      <v-list-item
         v-for="definition in PROCESS_DEFINITIONS"
         :key="definition.type"
-        :value="definition.type"
-        v-slot="{ selectedClass, toggle }"
+        :active="processStore.activeProcessType === definition.type"
+        :disabled="isDisabled"
+        :data-testid="`process-type-${definition.type}`"
+        color="primary"
+        rounded="8"
+        @click="processStore.setActiveProcessType(definition.type)"
       >
-        <v-btn
-          variant="tonal"
-          rounded="8"
-          stacked
-          :class="['process-button', 'mx-2', selectedClass]"
-          @click.stop="toggle"
-        >
+        <template #prepend>
           <v-icon>{{ definition.icon }}</v-icon>
-          <span class="text-caption">{{ definition.label }}</span>
-        </v-btn>
-      </v-item>
-    </v-item-group>
+        </template>
+        <v-list-item-title>{{ definition.label }}</v-list-item-title>
+      </v-list-item>
+    </v-list>
   </v-row>
 </template>
 
@@ -34,24 +27,17 @@ import { PROCESS_DEFINITIONS } from './processes';
 
 const processStore = usePaintProcessStore();
 
-const activeProcessType = computed({
-  get: () => processStore.activeProcessType,
-  set: (type) => {
-    processStore.setActiveProcessType(type);
-  },
-});
+const isDisabled = computed(() => processStore.processStep !== 'start');
 </script>
 
 <style scoped>
-.selected {
-  background-color: rgb(var(--v-theme-selection-bg-color));
-  border-color: rgb(var(--v-theme-selection-border-color));
+.process-type-list {
+  width: 100%;
+  background: transparent;
+  padding: 0;
 }
 
-.process-button {
-  min-height: 56px;
-  min-width: 110px;
-  height: 56px;
-  width: 110px;
+.process-type-list :deep(.v-list-item) {
+  margin-inline: 0;
 }
 </style>
diff --git a/src/components/ProcessWorkflow.vue b/src/components/ProcessWorkflow.vue
index 69bf55d87..743437caa 100644
--- a/src/components/ProcessWorkflow.vue
+++ b/src/components/ProcessWorkflow.vue
@@ -1,6 +1,14 @@
 <template>
-  <div class="d-flex flex-column align-center">
-    <v-row justify="center" no-gutters class="align-center ga-2">
+  <div class="d-flex flex-column align-start w-100">
+    <v-row
+      justify="start"
+      no-gutters
+      :class="[
+        'align-center',
+        'ga-2',
+        { 'mb-4': processStep === 'previewing' },
+      ]"
+    >
       <v-btn
         v-if="processStep === 'start' || processStep === 'computing'"
         variant="tonal"
@@ -8,7 +16,6 @@
         @click="startCompute"
         :loading="processStep === 'computing'"
         :disabled="processStep === 'computing'"
-        size="small"
       >
         Preview
       </v-btn>
@@ -21,12 +28,12 @@
         divided
         density="compact"
       >
-        <v-btn :value="0" size="small" @click="processStore.togglePreview()">
-          <v-icon start size="small">mdi-eye-outline</v-icon>
+        <v-btn :value="0" @click="processStore.togglePreview()">
+          <v-icon start>mdi-eye-outline</v-icon>
           Original
         </v-btn>
-        <v-btn :value="1" size="small" @click="processStore.togglePreview()">
-          <v-icon start size="small">mdi-eye-settings</v-icon>
+        <v-btn :value="1" @click="processStore.togglePreview()">
+          <v-icon start>mdi-eye-settings</v-icon>
           Processed
         </v-btn>
       </v-btn-toggle>
@@ -34,9 +41,9 @@
 
     <v-row
       v-if="processStep === 'previewing'"
-      justify="center"
+      justify="start"
       no-gutters
-      class="align-center ga-2 mt-2"
+      class="align-center ga-2"
     >
       <v-btn prepend-icon="mdi-close" variant="tonal" @click="handleCancel">
         Cancel
diff --git a/src/components/RenderingModule.vue b/src/components/RenderingModule.vue
index df9fe5385..2180bc8af 100644
--- a/src/components/RenderingModule.vue
+++ b/src/components/RenderingModule.vue
@@ -58,7 +58,7 @@ export default defineComponent({
 </script>
 
 <template>
-  <div class="overflow-y-auto mx-2 mt-1 fill-height">
+  <div class="mx-2 mt-1">
     <template v-if="hasCurrentImage">
       <template v-if="canShow3DControls">
         <v-skeleton-loader v-if="isImageLoading" type="image">
diff --git a/src/components/SegmentGroupControls.vue b/src/components/SegmentGroupControls.vue
index 75ce3387b..fc9606b12 100644
--- a/src/components/SegmentGroupControls.vue
+++ b/src/components/SegmentGroupControls.vue
@@ -224,29 +224,27 @@ function deleteSelected() {
 </script>
 
 <template>
-  <div class="mt-2" v-if="currentImageID">
+  <div class="mt-2 px-3" v-if="currentImageID">
     <div
-      class="text-grey text-subtitle-2 d-flex align-center justify-space-evenly mb-2"
+      class="text-grey text-subtitle-2 d-flex align-center justify-start ga-4 mb-2"
     >
       <v-btn
-        variant="tonal"
-        color="secondary"
-        density="compact"
+        class="my-1"
         :disabled="isCurrentImageCine"
         @click.stop="createSegmentGroup"
       >
-        <v-icon class="mr-1">mdi-plus</v-icon> New Group
+        <template #prepend>
+          <v-icon>mdi-plus</v-icon>
+        </template>
+        New Group
       </v-btn>
       <v-menu location="bottom">
         <template v-slot:activator="{ props }">
-          <v-btn
-            variant="tonal"
-            color="secondary"
-            density="compact"
-            :disabled="isCurrentImageCine"
-            v-bind="props"
-          >
-            <v-icon class="mr-1">mdi-chevron-down</v-icon>From Image
+          <v-btn class="my-1" :disabled="isCurrentImageCine" v-bind="props">
+            <template #prepend>
+              <v-icon>mdi-chevron-down</v-icon>
+            </template>
+            From Image
           </v-btn>
         </template>
         <v-list v-if="segmentGroupConvertibles.length !== 0">
diff --git a/src/components/SegmentList.vue b/src/components/SegmentList.vue
index 21505e2df..d277bf0df 100644
--- a/src/components/SegmentList.vue
+++ b/src/components/SegmentList.vue
@@ -167,99 +167,101 @@ const toggleLock = (value: number) => {
 </script>
 
 <template>
-  <div class="d-flex justify-space-evenly">
-    <v-btn @click.stop="toggleGlobalVisible" class="my-1">
-      Toggle Segments
-      <slot name="append">
-        <v-icon v-if="allVisible" class="pl-2">mdi-eye</v-icon>
-        <v-icon v-else class="pl-2">mdi-eye-off</v-icon>
+  <div class="px-3">
+    <div class="d-flex justify-start ga-4">
+      <v-btn @click.stop="toggleGlobalVisible" class="my-1">
+        <template #prepend>
+          <v-icon v-if="allVisible">mdi-eye</v-icon>
+          <v-icon v-else>mdi-eye-off</v-icon>
+        </template>
+        Toggle Segments
         <v-tooltip location="top" activator="parent">{{
           allVisible ? 'Hide' : 'Show'
         }}</v-tooltip>
-      </slot>
-    </v-btn>
+      </v-btn>
 
-    <v-btn @click.stop="toggleGlobalLocked" class="my-1">
-      Toggle Locks
-      <slot name="append">
-        <v-icon v-if="allLocked" class="pl-2" color="red">mdi-lock</v-icon>
-        <v-icon v-else class="pl-2">mdi-lock-open</v-icon>
+      <v-btn @click.stop="toggleGlobalLocked" class="my-1">
+        <template #prepend>
+          <v-icon v-if="allLocked" color="red">mdi-lock</v-icon>
+          <v-icon v-else>mdi-lock-open</v-icon>
+        </template>
+        Toggle Locks
         <v-tooltip location="top" activator="parent">{{
           allLocked ? 'Unlock All' : 'Lock All'
         }}</v-tooltip>
-      </slot>
-    </v-btn>
-  </div>
-
-  <editable-chip-list
-    v-model="selectedSegment"
-    :items="segments"
-    item-key="value"
-    item-title="name"
-    create-label-text="New segment"
-    @create="addNewSegment"
-    class="my-4"
-  >
-    <template #item-prepend="{ item }">
-      <!-- dot container keeps overflowing name from squishing dot width  -->
-      <div class="dot-container mr-3">
-        <ColorDot :color="item.color" />
-      </div>
-    </template>
-    <template #item-append="{ key, item }">
-      <!-- Lock/unlock segment button -->
-      <v-btn
-        icon
-        size="small"
-        density="compact"
-        class="mr-1"
-        variant="plain"
-        @click.stop="toggleLock(key as number)"
-        :color="item.locked ? 'error' : undefined"
-      >
-        <v-icon>{{ item.locked ? 'mdi-lock' : 'mdi-lock-open' }}</v-icon>
-        <v-tooltip location="left" activator="parent">{{
-          item.locked ? 'Unlock' : 'Lock'
-        }}</v-tooltip>
       </v-btn>
-      <v-btn
-        icon
-        size="small"
-        density="compact"
-        class="ml-auto mr-1"
-        variant="plain"
-        @click.stop="toggleVisible(key as number)"
-      >
-        <v-icon v-if="item.visible" style="pointer-events: none"
-          >mdi-eye</v-icon
+    </div>
+
+    <editable-chip-list
+      v-model="selectedSegment"
+      :items="segments"
+      item-key="value"
+      item-title="name"
+      create-label-text="New segment"
+      @create="addNewSegment"
+      class="my-4"
+    >
+      <template #item-prepend="{ item }">
+        <!-- dot container keeps overflowing name from squishing dot width  -->
+        <div class="dot-container mr-3">
+          <ColorDot :color="item.color" />
+        </div>
+      </template>
+      <template #item-append="{ key, item }">
+        <!-- Lock/unlock segment button -->
+        <v-btn
+          icon
+          size="small"
+          density="compact"
+          class="mr-1"
+          variant="plain"
+          @click.stop="toggleLock(key as number)"
+          :color="item.locked ? 'error' : undefined"
         >
-        <v-icon v-else style="pointer-events: none">mdi-eye-off</v-icon>
-        <v-tooltip location="left" activator="parent">{{
-          item.visible ? 'Hide' : 'Show'
-        }}</v-tooltip>
-      </v-btn>
-      <!-- Edit segment button (disabled when locked) -->
-      <v-btn
-        icon="mdi-pencil"
-        size="small"
-        density="compact"
-        class="mr-1"
-        variant="plain"
-        @click.stop="startEditing(key as number)"
-        :disabled="item.locked"
-      />
-      <!-- Delete segment button (disabled when locked) -->
-      <v-btn
-        icon="mdi-delete"
-        size="small"
-        density="compact"
-        class="ml-auto"
-        variant="plain"
-        @click.stop="deleteSegment(key as number)"
-        :disabled="item.locked"
-      />
-    </template>
-  </editable-chip-list>
+          <v-icon>{{ item.locked ? 'mdi-lock' : 'mdi-lock-open' }}</v-icon>
+          <v-tooltip location="left" activator="parent">{{
+            item.locked ? 'Unlock' : 'Lock'
+          }}</v-tooltip>
+        </v-btn>
+        <v-btn
+          icon
+          size="small"
+          density="compact"
+          class="ml-auto mr-1"
+          variant="plain"
+          @click.stop="toggleVisible(key as number)"
+        >
+          <v-icon v-if="item.visible" style="pointer-events: none"
+            >mdi-eye</v-icon
+          >
+          <v-icon v-else style="pointer-events: none">mdi-eye-off</v-icon>
+          <v-tooltip location="left" activator="parent">{{
+            item.visible ? 'Hide' : 'Show'
+          }}</v-tooltip>
+        </v-btn>
+        <!-- Edit segment button (disabled when locked) -->
+        <v-btn
+          icon="mdi-pencil"
+          size="small"
+          density="compact"
+          class="mr-1"
+          variant="plain"
+          @click.stop="startEditing(key as number)"
+          :disabled="item.locked"
+        />
+        <!-- Delete segment button (disabled when locked) -->
+        <v-btn
+          icon="mdi-delete"
+          size="small"
+          density="compact"
+          class="ml-auto"
+          variant="plain"
+          @click.stop="deleteSegment(key as number)"
+          :disabled="item.locked"
+        />
+      </template>
+    </editable-chip-list>
+  </div>
 
   <isolated-dialog v-model="editDialog" @keydown.stop max-width="800px">
     <segment-editor
diff --git a/src/components/ServerModule.vue b/src/components/ServerModule.vue
index 1f95ae78a..916e6663c 100644
--- a/src/components/ServerModule.vue
+++ b/src/components/ServerModule.vue
@@ -86,7 +86,7 @@ const hasCurrentImage = computed(() => !!currentImageID.value);
 </script>
 
 <template>
-  <div class="overflow-y-auto overflow-x-hidden ma-2 fill-height">
+  <div class="ma-2">
     <v-alert v-if="!ready" color="info">Not connected to the server.</v-alert>
     <v-divider />
     <v-list-subheader>Add numbers</v-list-subheader>
diff --git a/src/components/ToolControls.vue b/src/components/ToolControls.vue
index 0c9223bfe..01aac8195 100644
--- a/src/components/ToolControls.vue
+++ b/src/components/ToolControls.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed, ref, watch } from 'vue';
 import PaintControls from '@/src/components/PaintControls.vue';
 import { useToolStore } from '../store/tools';
 import { Tools } from '../store/tools/types';
@@ -8,24 +8,87 @@ import RulerControls from './RulerControls.vue';
 import PolygonControls from './PolygonControls.vue';
 
 const toolStore = useToolStore();
+const TOOL_PANEL = 'tool';
+const activePanels = ref([TOOL_PANEL]);
 
 const tools = new Map([
-  [Tools.Rectangle, { component: RectangleControls, label: 'Rectangle' }],
-  [Tools.Ruler, { component: RulerControls, label: 'Ruler' }],
-  [Tools.Polygon, { component: PolygonControls, label: 'Polygon' }],
-  [Tools.Paint, { component: PaintControls, label: 'Paint' }],
+  [
+    Tools.Rectangle,
+    {
+      component: RectangleControls,
+      label: 'Rectangle',
+      icon: 'mdi-vector-square',
+      wrapInPanel: true,
+    },
+  ],
+  [
+    Tools.Ruler,
+    {
+      component: RulerControls,
+      label: 'Ruler',
+      icon: 'mdi-ruler',
+      wrapInPanel: true,
+    },
+  ],
+  [
+    Tools.Polygon,
+    {
+      component: PolygonControls,
+      label: 'Polygon',
+      icon: 'mdi-vector-polygon',
+      wrapInPanel: true,
+    },
+  ],
+  [
+    Tools.Paint,
+    {
+      component: PaintControls,
+      label: 'Paint',
+      icon: 'mdi-brush',
+      wrapInPanel: false,
+    },
+  ],
 ]);
 
 const tool = computed(() => tools.get(toolStore.currentTool));
+
+watch(
+  () => toolStore.currentTool,
+  () => {
+    activePanels.value = [TOOL_PANEL];
+  }
+);
 </script>
 
 <template>
   <div v-if="tool">
-    <div class="header">{{ tool.label }}</div>
-    <div class="content">
-      <component :is="tool.component" />
-    </div>
+    <v-expansion-panels
+      v-if="tool.wrapInPanel"
+      v-model="activePanels"
+      multiple
+      variant="accordion"
+      class="tool-control-panels"
+    >
+      <v-expansion-panel :value="TOOL_PANEL">
+        <v-expansion-panel-title>
+          <v-icon class="flex-grow-0 mr-4">{{ tool.icon }}</v-icon>
+          {{ tool.label }}
+        </v-expansion-panel-title>
+        <v-expansion-panel-text class="control-panel-body">
+          <component :is="tool.component" />
+        </v-expansion-panel-text>
+      </v-expansion-panel>
+    </v-expansion-panels>
+    <component v-else :is="tool.component" />
   </div>
 </template>
 
-<style scoped src="./styles/annotations.css"></style>
+<style scoped>
+.tool-control-panels {
+  width: 100%;
+}
+
+.control-panel-body :deep(.v-expansion-panel-text__wrapper) {
+  padding: 12px 14px 16px;
+}
+</style>
diff --git a/src/store/__tests__/paintProcess.spec.ts b/src/store/__tests__/paintProcess.spec.ts
index 2dc676fb4..b40d0053f 100644
--- a/src/store/__tests__/paintProcess.spec.ts
+++ b/src/store/__tests__/paintProcess.spec.ts
@@ -70,10 +70,11 @@ describe('Paint process store', () => {
     const paintStore = usePaintToolStore();
 
     paintStore.setMode(PaintMode.Erase);
-    paintStore.setControlsMode(PaintMode.Process);
+    paintStore.setProcessControlsOpen(true);
 
-    expect(paintStore.activeControlsMode).toBe(PaintMode.Process);
+    expect(paintStore.processControlsOpen).toBe(true);
     expect(paintStore.activeMode).toBe(PaintMode.Erase);
+    expect(paintStore.activePaintMode).toBe(PaintMode.Erase);
     expect(paintStore.isPaintingModeActive).toBe(true);
   });
 
@@ -83,26 +84,29 @@ describe('Paint process store', () => {
     const { groupId, labelMap } = addTestSegmentGroup();
 
     paintStore.setMode(PaintMode.Erase);
-    paintStore.setControlsMode(PaintMode.Process);
     paintStore.activeSegmentGroupID = groupId;
     paintStore.activeSegment = 1;
 
+    expect(paintStore.processControlsOpen).toBe(false);
+
     await processStore.startProcess(
       groupId,
       async () => new Uint8Array([2, 2])
     );
 
     expect(processStore.processState.step).toBe('previewing');
-    expect(paintStore.activeControlsMode).toBe(PaintMode.Process);
+    expect(paintStore.processControlsOpen).toBe(true);
     expect(paintStore.activeMode).toBe(PaintMode.Process);
+    expect(paintStore.activePaintMode).toBe(PaintMode.Erase);
     expect(paintStore.isPaintingModeActive).toBe(false);
     expect(getScalars(labelMap)).toEqual([2, 2]);
 
     processStore.confirmProcess();
 
     expect(processStore.processState.step).toBe('start');
-    expect(paintStore.activeControlsMode).toBe(PaintMode.Process);
+    expect(paintStore.processControlsOpen).toBe(true);
     expect(paintStore.activeMode).toBe(PaintMode.Erase);
+    expect(paintStore.activePaintMode).toBe(PaintMode.Erase);
     expect(paintStore.isPaintingModeActive).toBe(true);
   });
 
@@ -112,7 +116,7 @@ describe('Paint process store', () => {
     const { groupId, labelMap } = addTestSegmentGroup();
 
     paintStore.setMode(PaintMode.CirclePaint);
-    paintStore.setControlsMode(PaintMode.Process);
+    paintStore.setProcessControlsOpen(true);
     paintStore.activeSegmentGroupID = groupId;
     paintStore.activeSegment = 1;
 
@@ -124,8 +128,9 @@ describe('Paint process store', () => {
     processStore.cancelProcess();
 
     expect(processStore.processState.step).toBe('start');
-    expect(paintStore.activeControlsMode).toBe(PaintMode.Process);
+    expect(paintStore.processControlsOpen).toBe(true);
     expect(paintStore.activeMode).toBe(PaintMode.CirclePaint);
+    expect(paintStore.activePaintMode).toBe(PaintMode.CirclePaint);
     expect(paintStore.isPaintingModeActive).toBe(true);
     expect(getScalars(labelMap)).toEqual([0, 0]);
   });
diff --git a/src/store/tools/paint.ts b/src/store/tools/paint.ts
index 84b8c76dc..85204c0b0 100644
--- a/src/store/tools/paint.ts
+++ b/src/store/tools/paint.ts
@@ -27,8 +27,8 @@ export const usePaintToolStore = defineStore('paint', () => {
   type _This = ReturnType<typeof usePaintToolStore>;
 
   const activeMode = ref(PaintMode.CirclePaint);
-  const activeControlsMode = ref(PaintMode.CirclePaint);
   const modeBeforeProcess = ref(PaintMode.CirclePaint);
+  const processControlsOpen = ref(false);
   const activeSegmentGroupID = ref<Maybe<string>>(null);
   const activeSegment = ref<Maybe<number>>(null);
   const brushSize = ref(DEFAULT_BRUSH_SIZE);
@@ -57,6 +57,9 @@ export const usePaintToolStore = defineStore('paint', () => {
       activeMode.value === PaintMode.CirclePaint ||
       activeMode.value === PaintMode.Erase
   );
+  const activePaintMode = computed(() =>
+    isPaintingModeActive.value ? activeMode.value : modeBeforeProcess.value
+  );
 
   const currentViewIDs = computed(() => {
     const imageID = unref(currentImageID);
@@ -76,18 +79,16 @@ export const usePaintToolStore = defineStore('paint', () => {
    */
   function setMode(this: _This, mode: PaintMode) {
     activeMode.value = mode;
-    activeControlsMode.value = mode;
-    if (mode !== PaintMode.Process) {
+    if (mode === PaintMode.Process) {
+      processControlsOpen.value = true;
+    } else {
       modeBeforeProcess.value = mode;
     }
     this.$paint.setMode(mode);
   }
 
-  function setControlsMode(this: _This, mode: PaintMode) {
-    activeControlsMode.value = mode;
-    if (mode !== PaintMode.Process) {
-      setMode.call(this, mode);
-    }
+  function setProcessControlsOpen(open: boolean) {
+    processControlsOpen.value = open;
   }
 
   function enterProcessMode(this: _This) {
@@ -95,7 +96,7 @@ export const usePaintToolStore = defineStore('paint', () => {
       modeBeforeProcess.value = activeMode.value;
     }
     activeMode.value = PaintMode.Process;
-    activeControlsMode.value = PaintMode.Process;
+    processControlsOpen.value = true;
     this.$paint.setMode(PaintMode.Process);
   }
 
@@ -444,7 +445,8 @@ export const usePaintToolStore = defineStore('paint', () => {
 
   return {
     activeMode,
-    activeControlsMode,
+    activePaintMode,
+    processControlsOpen,
     activeSegmentGroupID,
     activeSegment,
     brushSize,
@@ -460,7 +462,7 @@ export const usePaintToolStore = defineStore('paint', () => {
     deactivateTool,
 
     setMode,
-    setControlsMode,
+    setProcessControlsOpen,
     enterProcessMode,
     restoreModeAfterProcess,
     setActiveSegmentGroup,
diff --git a/tests/pageobjects/volview.page.ts b/tests/pageobjects/volview.page.ts
index c69b9e814..2c825510b 100644
--- a/tests/pageobjects/volview.page.ts
+++ b/tests/pageobjects/volview.page.ts
@@ -120,7 +120,7 @@ class VolViewPage extends Page {
   }
 
   get fillHolesProcessButton() {
-    return $('button*=Fill Holes');
+    return $('[data-testid="process-type-fillHoles"]');
   }
 
   get fillHolesWholeVolumeButton() {

From b9054c2bca3b8d58b139d5023f3f86e2385d767e Mon Sep 17 00:00:00 2001
From: Paul Elliott <paul@vizworkshop.com>
Date: Mon, 29 Jun 2026 14:38:29 -0400
Subject: [PATCH 3/3] fix(tools): ignore non-annotation widget selections

---
 .github/workflows/e2e.yml           |  2 +-
 src/components/tools/SelectTool.vue | 29 +++++++++++++++++++++++++----
 2 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/.github/workflows/e2e.yml b/.github/workflows/e2e.yml
index 9c8b8333b..2a1cca366 100644
--- a/.github/workflows/e2e.yml
+++ b/.github/workflows/e2e.yml
@@ -11,7 +11,7 @@ jobs:
     name: E2E Testing on ${{ matrix.os }}
     runs-on: ${{ matrix.os }}
     env:
-      DOWNLOAD_TIMEOUT: 60000
+      DOWNLOAD_TIMEOUT: 90000
       VITE_SHOW_SAMPLE_DATA: true
     steps:
       - uses: actions/checkout@v4
diff --git a/src/components/tools/SelectTool.vue b/src/components/tools/SelectTool.vue
index 61bd80b33..597dedc21 100644
--- a/src/components/tools/SelectTool.vue
+++ b/src/components/tools/SelectTool.vue
@@ -4,7 +4,10 @@ import { WIDGET_PRIORITY } from '@kitware/vtk.js/Widgets/Core/AbstractWidget/Con
 import { useToolSelectionStore } from '@/src/store/tools/toolSelection';
 import { useToolStore } from '@/src/store/tools';
 import { Tools } from '@/src/store/tools/types';
-import { vtkAnnotationToolWidget } from '@/src/vtk/ToolWidgetUtils/types';
+import type {
+  vtkAnnotationToolWidget,
+  vtkAnnotationWidgetState,
+} from '@/src/vtk/ToolWidgetUtils/types';
 import { inject } from 'vue';
 import { VtkViewContext } from '@/src/components/vtk/context';
 
@@ -16,6 +19,17 @@ const toolStore = useToolStore();
 
 const PLACING_TOOLS = [Tools.Ruler, Tools.Rectangle, Tools.Polygon];
 
+const isAnnotationWidgetState = (
+  widgetState: unknown
+): widgetState is vtkAnnotationWidgetState => {
+  const candidate = widgetState as Partial<vtkAnnotationWidgetState> | null;
+  return (
+    !!candidate &&
+    typeof candidate.getId === 'function' &&
+    typeof candidate.getToolType === 'function'
+  );
+};
+
 onVTKEvent(
   view.interactor,
   'onLeftButtonPress',
@@ -28,9 +42,16 @@ onVTKEvent(
     const withModifiers = !!(event.shiftKey || event.controlKey);
     const selectedData = view.widgetManager.getSelectedData();
     if ('widget' in selectedData) {
-      // clicked in empty space.
-      const widget = selectedData.widget as vtkAnnotationToolWidget;
-      const widgetState = widget.getWidgetState();
+      const widget =
+        selectedData.widget as Partial<vtkAnnotationToolWidget> | null;
+      const widgetState = widget?.getWidgetState?.();
+      if (!isAnnotationWidgetState(widgetState)) {
+        if (!withModifiers) {
+          selectionStore.clearSelection();
+        }
+        return;
+      }
+
       const id = widgetState.getId();
       const type = widgetState.getToolType();
       // preserve if we've used shift or ctrl