@morscherlab/mint-sdk 1.0.43 → 1.0.45

package/src/components/AutoGroupModal.vue

@@ -1,24 +1,35 @@
 <script setup lang="ts">
-/** Wizard modal that auto-groups samples by parsing naming patterns or an uploaded CSV file. */
-import { ref, computed, watch, nextTick } from 'vue'
+/**
+ * Smart Group modal. Parses sample naming patterns into candidate grouping
+ * fields (auto / "Field Recipe") or lets you assign cohorts by hand (manual),
+ * staying wired to the `useAutoGroup` engine. The UI is the Smart Group design
+ * (`SmartGroupFieldRecipe` / `SmartGroupManual`) driven in controlled mode; this
+ * component is the adapter that maps engine state ↔ that UI and emits the
+ * resulting `AutoGroupResult`. Public props/emits are unchanged so existing
+ * consumers (`SampleSelector`, template catalog) keep working.
+ */
+import { ref, computed, watch } from 'vue'
 import BaseModal from './BaseModal.vue'
-import BaseButton from './BaseButton.vue'
-import BaseInput from './BaseInput.vue'
-import StepWizard from './StepWizard.vue'
-import LoadingSpinner from './LoadingSpinner.vue'
 import AlertBox from './AlertBox.vue'
-import SampleHierarchyTree from './SampleHierarchyTree.vue'
+import SmartGroupFieldRecipe from './SmartGroupFieldRecipe.vue'
+import SmartGroupManual from './SmartGroupManual.vue'
 import { useAutoGroup, parseCSV } from '../composables/useAutoGroup'
-import { classKey } from '../composables/autoGroup'
 import { useApi } from '../composables/useApi'
-import { useTextSearch } from '../composables/useTextSearch'
-import { useSampleGroups } from '../composables/useSampleGroups'
+import { readFileAsText } from '../composables/useFileImport'
 import {
-  createSampleGroup,
-  SAMPLE_GROUP_COLOR_OPTIONS,
-} from './SampleSelector.colors'
-import type { WizardStep } from '../types/components'
-import type { AutoGroupResult, MergeSuggestion, ColumnRole } from '../types/auto-group'
+  candidateColumnIndices,
+  engineFieldsToCards,
+  engineGroupsToRail,
+  engineToQcRoute,
+  manualSamplesToResult,
+  qcRouteToEngine,
+  seedFromGroups,
+} from './AutoGroupModal.adapter'
+import { SAMPLE_GROUP_COLOR_OPTIONS } from './SampleSelector.colors'
+import type { QcRoute } from './SmartGroupFieldRecipe.groups'
+import type { ManualSample } from './SmartGroupManual.cohorts'
+import type { ManualPaletteEntry } from './SmartGroup.types'
+import type { AutoGroupResult } from '../types/auto-group'
 import type { SampleGroup } from '../types'
 
 type GroupingWorkflow = 'auto' | 'manual'
@@ -48,284 +59,20 @@ const emit = defineEmits<{
 
 const autoGroup = useAutoGroup()
 const api = useApi()
-const wizardRef = ref<InstanceType<typeof StepWizard> | null>(null)
-const currentStep = ref(0)
-const isDragOver = ref(false)
-const csvFileName = ref('')
-const experimentLoading = ref(false)
+const activeWorkflow = ref<GroupingWorkflow>(props.initialMode)
 const experimentError = ref<string | null>(null)
-const csvError = ref<string | null>(null)
-const activeWorkflow = ref<GroupingWorkflow>('auto')
-const manualDraftGroups = ref<SampleGroup[]>([])
-const manualSearchQuery = ref('')
-const manualUngroupedOnly = ref(true)
-const manualSelectedSamples = ref<string[]>([])
-const manualGroupName = ref('')
-const manualSubGroupName = ref('')
-const manualColorOptions = SAMPLE_GROUP_COLOR_OPTIONS
-const manualSelectedColor = ref(manualColorOptions[0])
+const experimentLoading = ref(false)
 
-// Workspace step refs
-const openPopoverIdx = ref<number | null>(null)
+// QC routing — a 3-way state stored as two booleans so downstream engine
+// dispositions stay stable; the UI presents it as overlay / exclude / mix.
 const qcAsOverlay = ref(true)
 const excludeQc = ref(false)
-
-function roleLabel(role?: ColumnRole): string {
-  if (!role) return 'Factor'
-  const labels: Record<ColumnRole, string> = {
-    'constant': 'Constant',
-    'factor': 'Factor',
-    'replicate': 'Replicate',
-    'run-order': 'Run',
-    'numeric': 'Numeric',
-    'class-tag': 'Class tag',
-    'ignore': 'Ignore',
-  }
-  return labels[role]
-}
-
-const activeSchemaLabel = computed(() => {
-  const cls = autoGroup.classes.value.find(c => classKey(c) === autoGroup.activeClassKey.value)
-  return cls?.label ?? '—'
-})
-
-const activeMemberCount = computed(() => {
-  const cls = autoGroup.classes.value.find(c => classKey(c) === autoGroup.activeClassKey.value)
-  return cls?.members.length ?? 0
-})
-
-const activeColumnCount = computed(() => autoGroup.activeSchema.value?.columns.length ?? 0)
-
-const groupKeyNames = computed<string[]>(() => {
-  const schema = autoGroup.activeSchema.value
-  if (!schema) return []
-  return schema.groupBy
-    .map(idx => {
-      const col = schema.columns.find(c => c.index === idx)
-      return col?.displayName ?? col?.name ?? ''
-    })
-    .filter((s): s is string => s.length > 0)
-})
-
-const totalGrouped = computed(() =>
-  (autoGroup.result.value.experimentalGroups ?? []).reduce((acc, g) => acc + g.samples.length, 0),
-)
-const totalQc = computed(() =>
-  (autoGroup.qcGroups.value ?? []).reduce((acc, g) => acc + g.samples.length, 0),
-)
-
-// Nested experimental hierarchy (class → groupBy layers → sample leaves) for the
-// collapsible Preview tree. Expand the class roots by default so the first
-// grouping level is visible without overwhelming the panel with every sample.
-const groupTree = computed(() => autoGroup.result.value.groupTree ?? [])
-const defaultExpandedTreeIds = computed(() => groupTree.value.map(n => n.id))
-
-function cloneGroups(groups: SampleGroup[]): SampleGroup[] {
-  return groups.map(group => ({
-    ...group,
-    samples: [...group.samples],
-  }))
-}
-
-function manualResetSelection() {
-  manualSearchQuery.value = ''
-  manualUngroupedOnly.value = true
-  manualSelectedSamples.value = []
-  manualGroupName.value = ''
-  manualSubGroupName.value = ''
-  manualSelectedColor.value = manualColorOptions[0]
-}
-
-function manualToggleSample(sample: string) {
-  if (manualSelectedSet.value.has(sample)) {
-    manualSelectedSamples.value = manualSelectedSamples.value.filter(item => item !== sample)
-  } else {
-    manualSelectedSamples.value = [...manualSelectedSamples.value, sample]
-  }
-}
-
-function manualSelectVisibleSamples() {
-  const next = new Set(manualSelectedSamples.value)
-  for (const sample of manualFilteredSamples.value) {
-    next.add(sample)
-  }
-  manualSelectedSamples.value = [...next]
-}
-
-function manualClearSamples() {
-  manualSelectedSamples.value = []
-}
-
-function manualToggleVisibleSamples() {
-  if (manualAllVisibleSelected.value) {
-    manualSelectedSamples.value = manualSelectedSamples.value
-      .filter(sample => !manualVisibleSet.value.has(sample))
-    return
-  }
-
-  manualSelectVisibleSamples()
-}
-
-function manualGetSampleGroup(sample: string): SampleGroup | undefined {
-  return manualDraftGroups.value.find(group => group.samples.includes(sample))
-}
-
-function manualGetSampleStatus(sample: string): string {
-  return manualGetSampleGroup(sample)?.name.replace('/', ' · ') || 'unassigned'
-}
-
-function manualGetGroupPrimaryName(name: string): string {
-  return name.split('/')[0]
-}
-
-function manualGetGroupSecondaryName(name: string): string | null {
-  const separatorIndex = name.indexOf('/')
-  return separatorIndex === -1 ? null : name.slice(separatorIndex + 1)
-}
-
-function manualChooseColor(color: string) {
-  manualSelectedColor.value = color
-}
-
-function manualUseExistingGroupAsTarget(name: string) {
-  const existingGroup = manualDraftGroups.value.find(group => group.name === name)
-  if (existingGroup) {
-    manualSelectedColor.value = existingGroup.color
-  }
-
-  const separatorIndex = name.indexOf('/')
-  if (separatorIndex === -1) {
-    manualGroupName.value = name
-    manualSubGroupName.value = ''
-    return
-  }
-
-  manualGroupName.value = name.slice(0, separatorIndex)
-  manualSubGroupName.value = name.slice(separatorIndex + 1)
-}
-
-function manualAssignSamplesToGroup() {
-  const target = manualTargetGroupName.value
-  if (!manualCanAssign.value || !target) return
-
-  const selected = manualAssignableSamples.value
-  const selectedSet = new Set(selected)
-  if (selectedSet.size === 0) return
-
-  let nextGroups = manualDraftGroups.value.map(group => ({
-    ...group,
-    samples: group.samples.filter(sample => !selectedSet.has(sample)),
-  }))
-
-  const targetIndex = nextGroups.findIndex(group => group.name === target)
-  if (targetIndex === -1) {
-    const newGroup = createSampleGroup(target, nextGroups, manualSelectedColor.value)
-    if (!newGroup) return
-    nextGroups = [...nextGroups, { ...newGroup, samples: selected }]
-  } else {
-    const group = nextGroups[targetIndex]
-    nextGroups[targetIndex] = {
-      ...group,
-      color: manualSelectedColor.value,
-      samples: [...group.samples, ...selected.filter(sample => !group.samples.includes(sample))],
-    }
-  }
-
-  manualDraftGroups.value = nextGroups
-  manualSelectedSamples.value = []
-}
-
-const manualSamples = computed(() =>
-  props.samples.length > 0 ? props.samples : autoGroup.samples.value,
-)
-
-const manualGroupsModel = computed({
-  get: () => manualDraftGroups.value,
-  set: (value: SampleGroup[]) => {
-    manualDraftGroups.value = value
-  },
-})
-
-const manualSampleGroups = useSampleGroups({
-  samples: () => manualSamples.value,
-  groups: manualGroupsModel,
-})
-
-const manualHierarchicalGroups = manualSampleGroups.hierarchicalGroups
-const manualShowHierarchy = manualSampleGroups.showHierarchy
-const manualUngroupedSamples = manualSampleGroups.ungroupedSamples
-const manualSamplePool = computed(() =>
-  manualUngroupedOnly.value ? manualUngroupedSamples.value : manualSamples.value,
-)
-const manualSampleSearch = useTextSearch({
-  items: () => manualSamplePool.value,
-  query: manualSearchQuery,
-  getText: sample => sample,
-})
-const manualFilteredSamples = manualSampleSearch.filteredItems
-const manualSelectedSet = computed(() => new Set(manualSelectedSamples.value))
-const manualVisibleSet = computed(() => new Set(manualFilteredSamples.value))
-const manualAllVisibleSelected = computed(() =>
-  manualFilteredSamples.value.length > 0
-  && manualFilteredSamples.value.every(sample => manualSelectedSet.value.has(sample)),
-)
-const manualSomeVisibleSelected = computed(() =>
-  manualFilteredSamples.value.some(sample => manualSelectedSet.value.has(sample))
-  && !manualAllVisibleSelected.value,
-)
-const manualAssignableSamples = computed(() =>
-  manualSelectedSamples.value.filter(sample => manualSamples.value.includes(sample)),
-)
-const manualTargetGroupName = computed(() => {
-  const major = manualGroupName.value.trim()
-  const sub = manualSubGroupName.value.trim()
-  if (!major) return ''
-  return sub ? `${major}/${sub}` : major
-})
-const manualCanAssign = computed(() =>
-  manualAssignableSamples.value.length > 0 && manualTargetGroupName.value.length > 0,
-)
-const manualGroupedSamples = computed(() => {
-  const validSamples = new Set(manualSamples.value)
-  return new Set(
-    manualDraftGroups.value
-      .flatMap(group => group.samples)
-      .filter(sample => validSamples.has(sample)),
-  )
-})
-const manualGroupedCount = computed(() => manualGroupedSamples.value.size)
-const manualUngroupedCount = computed(() =>
-  Math.max(manualSamples.value.length - manualGroupedCount.value, 0),
-)
-const manualResult = computed<AutoGroupResult>(() => {
-  const groups = cloneGroups(manualDraftGroups.value)
-  return {
-    groups,
-    experimentalGroups: groups,
-    qcGroups: [],
-    metadata: [],
-    excludedSamples: [],
-  }
-})
-
-function acceptSuggestion(s: MergeSuggestion) {
-  autoGroup.mergeColumns(autoGroup.activeClassKey.value, s.columnIndices)
-}
-
-function dismissSuggestion(_: MergeSuggestion) {
-  // Suggestions are derived; "dismiss" is a no-op in MVP (it will re-appear on schema reset).
-}
-
-// QC routing: a 3-way state replaces the two former booleans. Internally we
-// still store qcAsOverlay + excludeQc (so downstream watchers stay stable),
-// but the UI presents the choice as one radio group: overlay / exclude / mix.
 type QcRouting = 'overlay' | 'exclude' | 'mix'
 const qcRouting = computed<QcRouting>(() => {
   if (excludeQc.value) return 'exclude'
   if (qcAsOverlay.value) return 'overlay'
   return 'mix'
 })
-
 function setQcRouting(value: QcRouting) {
   qcAsOverlay.value = value === 'overlay'
   excludeQc.value = value === 'exclude'
@@ -335,219 +82,119 @@ function setQcRouting(value: QcRouting) {
   )
 }
 
-// Group statistics for the 3-stat strip — scoped to the ACTIVE class so the
-// numbers correspond to what the user sees in the schema panel below.
-// (The Preview step shows global totals across all classes.)
-const groupStats = computed(() => {
-  const cls = autoGroup.classes.value.find(c => classKey(c) === autoGroup.activeClassKey.value)
-  if (!cls) return { count: 0, samples: 0, avg: 0, min: 0, max: 0 }
-  const schema = autoGroup.activeSchema.value
-  const total = cls.members.length
-  const buckets = new Map<string, number>()
-  if (!schema || schema.groupBy.length === 0) {
-    // No factor columns selected → one group containing everyone.
-    if (total > 0) buckets.set('__all__', total)
-  } else {
-    for (const m of cls.members) {
-      const tokens = autoGroup.tokenized.value[m]
-      const key = schema.groupBy.map(idx => tokens[idx] ?? '').join(' / ')
-      buckets.set(key, (buckets.get(key) ?? 0) + 1)
-    }
-  }
-  const sizes = [...buckets.values()]
-  return {
-    count: sizes.length,
-    samples: total,
-    avg: sizes.length > 0 ? Math.round((total / sizes.length) * 10) / 10 : 0,
-    min: sizes.length > 0 ? Math.min(...sizes) : 0,
-    max: sizes.length > 0 ? Math.max(...sizes) : 0,
-  }
-})
-
-const activeColumn = computed(() => {
-  if (openPopoverIdx.value === null) return null
-  return autoGroup.activeSchema.value?.columns.find(c => c.index === openPopoverIdx.value) ?? null
-})
-
-function renameActive(name: string) {
-  const col = activeColumn.value
-  if (!col) return
-  autoGroup.setColumnName(autoGroup.activeClassKey.value, col.index, name)
-}
+// ── Auto mode (Field Recipe) ─────────────────────────────────────────
+const fieldCards = computed(() => engineFieldsToCards(autoGroup.fields.value, autoGroup.enabledFields.value))
+const cardColumnIndices = computed(() =>
+  candidateColumnIndices(autoGroup.fields.value, autoGroup.enabledFields.value),
+)
+const railGroups = computed(() =>
+  engineGroupsToRail(autoGroup.result.value.experimentalGroups ?? autoGroup.groups.value),
+)
+const qcSampleCount = computed(() =>
+  autoGroup.classes.value
+    .filter(c => c.kind !== 'biological' && c.kind !== 'unknown')
+    .reduce((acc, c) => acc + c.members.length, 0),
+)
+const qcChip = computed(() =>
+  qcRouting.value !== 'mix' && qcSampleCount.value > 0
+    ? { name: 'QC_Pool', count: qcSampleCount.value }
+    : null,
+)
+const fieldRecipeRoute = computed<QcRoute>(() => engineToQcRoute(qcRouting.value))
+const headerCount = computed(() => autoGroup.samples.value.length)
 
-function setAlias(src: string, dst: string) {
-  const col = activeColumn.value
-  if (!col) return
-  const next = { ...(col.ops?.alias ?? {}) }
-  if (dst === src) delete next[src]
-  else next[src] = dst
-  autoGroup.setValueOps(autoGroup.activeClassKey.value, col.index, {
-    ...col.ops,
-    alias: next,
-  })
+function onToggleField(cardIndex: number) {
+  const columnIndex = cardColumnIndices.value[cardIndex]
+  if (columnIndex === undefined) return
+  autoGroup.toggleGroupBy(autoGroup.activeClassKey.value, columnIndex)
 }
-
-function toggleExclude(value: string) {
-  const col = activeColumn.value
-  if (!col) return
-  const list = new Set(col.ops?.exclude ?? [])
-  if (list.has(value)) list.delete(value)
-  else list.add(value)
-  autoGroup.setValueOps(autoGroup.activeClassKey.value, col.index, {
-    ...col.ops,
-    exclude: [...list],
-  })
+function onRouteChange(route: QcRoute) {
+  setQcRouting(qcRouteToEngine(route))
 }
-
-function mergeWithNext() {
-  const col = activeColumn.value
-  if (!col) return
-  const schema = autoGroup.activeSchema.value
-  const next = schema?.columns.find(c => c.index === col.index + 1)
-  if (!next) return
-  autoGroup.mergeColumns(autoGroup.activeClassKey.value, [col.index, next.index])
-  openPopoverIdx.value = null
+function applyAuto() {
+  emit('apply', autoGroup.result.value)
+  close()
 }
 
-// Pre-fill from props.
-// When samples or experiment data are already known we auto-skip the Input
-// step entirely and land on Workspace — there's nothing for the user to
-// paste or upload. The wizard becomes a clean 2-step (Workspace → Preview)
-// in the common case. Input still exists for cold opens (no samples, no
-// experiment) where users paste their own sample list or upload a CSV.
-watch(() => props.modelValue, (open) => {
-  if (open) {
-    activeWorkflow.value = props.initialMode
-    manualDraftGroups.value = cloneGroups(props.groups)
-    manualResetSelection()
-    autoGroup.reset()
-    currentStep.value = 0
-    csvFileName.value = ''
-    experimentError.value = null
-    csvError.value = null
-    if (props.experimentId || props.designData) {
-      fetchExperimentData()
-      currentStep.value = 1
-    } else if (props.samples.length > 0) {
-      autoGroup.rawText.value = props.samples.join('\n')
-      autoGroup.inputMode.value = 'paste'
-      autoGroup.parseInput()
-      currentStep.value = 1
-    } else {
-      // Cold open: default to Paste so users can type their own sample
-      // list immediately. CSV upload is one click away in the mode toggle.
-      autoGroup.inputMode.value = 'paste'
-    }
-  }
-}, { immediate: true })
-
-watch(manualSamples, (samples) => {
-  manualSelectedSamples.value = manualSelectedSamples.value.filter(sample => samples.includes(sample))
-})
-
-watch(manualTargetGroupName, (target) => {
-  if (!target) return
-  const existingGroup = manualDraftGroups.value.find(group => group.name === target)
-  if (!existingGroup) return
-  manualSelectedColor.value = existingGroup.color
-})
-
-// Wizard steps: three steps, unconditional
-const allSteps: WizardStep[] = [
-  { id: 'input', label: 'Input' },
-  { id: 'workspace', label: 'Workspace' },
-  { id: 'preview', label: 'Preview' },
-]
-
-const dynamicSteps = computed<WizardStep[]>(() => allSteps)
-
-// Map current step index to step ID
-const currentStepId = computed(() => {
-  const step = dynamicSteps.value[currentStep.value]
-  return step?.id ?? 'input'
-})
-
-// Clamp step when dynamic steps change
-watch(() => dynamicSteps.value.length, (newLen) => {
-  if (currentStep.value >= newLen) {
-    currentStep.value = newLen - 1
-  }
-})
-
-// Step validity
-const inputValid = computed(() => autoGroup.samples.value.length > 0)
-const workspaceValid = computed(() => true) // empty groupBy is allowed; warning is shown in Preview.
-
-watch([inputValid, workspaceValid, dynamicSteps], () => {
-  if (!wizardRef.value) return
-  const steps = dynamicSteps.value
-  for (let i = 0; i < steps.length; i++) {
-    const id = steps[i].id
-    if (id === 'input') wizardRef.value.setStepValid(i, inputValid.value)
-    else if (id === 'workspace') wizardRef.value.setStepValid(i, workspaceValid.value)
-    else wizardRef.value.setStepValid(i, true)
-  }
-}, { immediate: true })
-
-// Navigation
-function handleNext() {
-  if (currentStepId.value === 'input') {
+// CSV upload from the Field Recipe header: parse the file into the engine's CSV
+// path. `samples` derives reactively from csvData and `parseInput()` builds the
+// classes/fields/groups; re-apply the current QC routing like the open watcher.
+async function onCsvFile(file: File) {
+  experimentError.value = null
+  try {
+    // Parse BEFORE mutating engine state so a malformed/empty/header-only CSV
+    // (parseCSV throws) leaves the engine untouched instead of half-set.
+    const text = await readFileAsText(file)
+    const parsed = parseCSV(text)
+    autoGroup.csvData.value = parsed
+    autoGroup.inputMode.value = 'csv'
     autoGroup.parseInput()
+    setQcRouting(qcRouting.value)
+  } catch (e) {
+    experimentError.value = e instanceof Error ? e.message : 'Could not read that CSV file.'
   }
-  // StepWizard handles the actual navigation via v-model
-}
-
-function handleApply() {
-  emit('apply', autoGroup.result.value)
-  emit('update:modelValue', false)
 }
 
-function handleManualApply() {
-  emit('apply', manualResult.value)
-  emit('update:modelValue', false)
+// Template downloads via the engine. `downloadTemplate(mode, format)` defaults to
+// ('prefilled', 'csv'); pass the explicit mode for each menu action.
+function onDownloadTemplate() {
+  autoGroup.downloadTemplate('blank', 'csv')
+}
+function onDownloadPrefilled() {
+  autoGroup.downloadTemplate('prefilled', 'csv')
+}
+
+// ── Manual mode ──────────────────────────────────────────────────────
+// Hex swatches (the SDK's existing manual palette) rather than SmartGroupManual's
+// var(--grp-*) story default: SampleSelector tints group colours via hex8 string
+// concatenation (`group.color + '20'`), so an emitted cohort colour must be a
+// concrete hex value — matching the colours the previous manual modal produced.
+const MANUAL_SWATCH_LABELS = ['Blue', 'Green', 'Amber', 'Red', 'Violet']
+const manualPalette: ManualPaletteEntry[] = SAMPLE_GROUP_COLOR_OPTIONS.map((c, i) => ({
+  c,
+  k: MANUAL_SWATCH_LABELS[i] ?? c,
+}))
+// Source from the engine once input is parsed (paste of props.samples, an
+// experiment fetch, OR an uploaded CSV) so CSV-loaded samples reach manual mode
+// too; fall back to the raw prop before the engine has parsed anything.
+const manualSampleNames = computed(() =>
+  autoGroup.samples.value.length > 0 ? autoGroup.samples.value : props.samples,
+)
+const manualSeed = computed(() => seedFromGroups(props.groups))
+// Remount the manual builder when the sample set changes so it re-seeds from
+// freshly-loaded experiment data rather than a stale snapshot.
+const manualKey = computed(() => manualSampleNames.value.join('\n'))
+function applyManual(payload: { samples: ManualSample[] }) {
+  emit('apply', manualSamplesToResult(payload.samples, props.groups))
+  close()
 }
 
-function handleCancel() {
+function close() {
   emit('update:modelValue', false)
 }
 
-// Experiment data fetching
 async function fetchExperimentData() {
   if (!props.experimentId && !props.designData) return
-
   autoGroup.inputMode.value = 'experiment'
-  experimentLoading.value = true
   experimentError.value = null
-
+  experimentLoading.value = true
   try {
     let pluginData: Record<string, unknown> | undefined
-
     if (props.designData) {
       pluginData = props.designData
     } else {
-      const result = await api.get<Record<string, unknown>>(
-        `/experiments/${props.experimentId}/data`,
-      )
+      const result = await api.get<Record<string, unknown>>(`/experiments/${props.experimentId}/data`)
       pluginData = result.data as Record<string, unknown> | undefined
     }
-
     if (!pluginData || typeof pluginData !== 'object') {
       experimentError.value = 'No design data found for this experiment'
       return
     }
-
-    const success = autoGroup.loadExperimentData(pluginData, { samples: props.samples })
-    if (!success) {
+    if (!autoGroup.loadExperimentData(pluginData, { samples: props.samples })) {
       experimentError.value = 'No sample metadata found in this experiment'
       return
     }
-
-    // Auto-advance to Workspace step
-    await nextTick()
-    const workspaceIdx = dynamicSteps.value.findIndex(s => s.id === 'workspace')
-    if (workspaceIdx >= 0) {
-      currentStep.value = workspaceIdx
-    }
+    setQcRouting(qcRouting.value)
   } catch (e) {
     experimentError.value = e instanceof Error ? e.message : 'Failed to fetch experiment data'
   } finally {
@@ -555,875 +202,83 @@ async function fetchExperimentData() {
   }
 }
 
-// CSV file handling
-function handleFileDrop(event: DragEvent) {
-  event.preventDefault()
-  isDragOver.value = false
-  const files = event.dataTransfer?.files
-  if (files && files.length > 0) {
-    processFile(files[0])
-  }
-}
-
-function handleFileInput(event: Event) {
-  const target = event.target as HTMLInputElement
-  if (target.files && target.files.length > 0) {
-    processFile(target.files[0])
-  }
-}
-
-async function processFile(file: File) {
-  if (!file.name.endsWith('.csv') && !file.name.endsWith('.tsv')) return
-
-  csvError.value = null
-  try {
-    const text = await file.text()
-    const parsed = parseCSV(text)
-    autoGroup.inputMode.value = 'csv'
-    autoGroup.csvData.value = parsed
-    csvFileName.value = file.name
-  } catch (e) {
-    csvError.value = e instanceof Error ? e.message : 'Failed to parse file'
-  }
-}
-
-function clearCsvFile() {
-  autoGroup.csvData.value = null
-  // Stay in CSV mode after a clear so the user can pick another file
-  // without re-clicking the CSV tab. They can switch to Paste manually.
-  autoGroup.inputMode.value = 'csv'
-  csvFileName.value = ''
-}
-
-function switchToPasteMode() {
-  autoGroup.inputMode.value = 'paste'
-  autoGroup.csvData.value = null
-  autoGroup.sampleTypeHints.value = []
-  csvFileName.value = ''
-  csvError.value = null
-}
-
-// Experiment metadata field names (for display in experiment mode)
-const experimentFieldNames = computed(() =>
-  autoGroup.csvData.value?.columns.filter(c => c !== 'sample_name') ?? [],
+// Populate the engine from props when the modal opens. Sample ingestion still
+// comes from the `samples` / `designData` / `experimentId` props exactly as
+// before — the redesign just drops the multi-step input/schema/merge UI.
+watch(
+  () => props.modelValue,
+  (open) => {
+    if (!open) return
+    activeWorkflow.value = props.initialMode
+    experimentError.value = null
+    qcAsOverlay.value = true
+    excludeQc.value = false
+    autoGroup.reset()
+    if (props.experimentId || props.designData) {
+      fetchExperimentData()
+    } else if (props.samples.length > 0) {
+      autoGroup.rawText.value = props.samples.join('\n')
+      autoGroup.inputMode.value = 'paste'
+      autoGroup.parseInput()
+      setQcRouting(qcRouting.value)
+    } else {
+      autoGroup.inputMode.value = 'paste'
+    }
+  },
+  { immediate: true },
 )
-
-// Last step check
-const isLastStep = computed(() => currentStep.value === dynamicSteps.value.length - 1)
-const isFirstStep = computed(() => currentStep.value === 0)
 </script>
 
 <template>
   <BaseModal
+    class="sg-host"
     :model-value="modelValue"
-    title="Group Samples"
-    :size="activeWorkflow === 'manual' ? 'xl' : 'lg'"
+    :closable="false"
     :close-on-overlay="false"
     :close-on-escape="false"
+    size="lg"
     @update:model-value="emit('update:modelValue', $event)"
-    @close="handleCancel"
   >
-    <div class="mint-auto-group">
-      <div
-        :class="[
-          'mint-auto-group__workflow-bar',
-          activeWorkflow === 'manual' ? 'mint-auto-group__workflow-bar--manual' : '',
-        ]"
-      >
-        <div class="mint-auto-group__workflow-tabs" role="tablist" aria-label="Grouping workflow">
-          <button
-            type="button"
-            :class="[
-              'mint-auto-group__workflow-tab',
-              activeWorkflow === 'auto' ? 'mint-auto-group__workflow-tab--active' : '',
-            ]"
-            role="tab"
-            :aria-selected="activeWorkflow === 'auto'"
-            @click="activeWorkflow = 'auto'"
-          >
-            Auto
-          </button>
-          <button
-            type="button"
-            :class="[
-              'mint-auto-group__workflow-tab',
-              activeWorkflow === 'manual' ? 'mint-auto-group__workflow-tab--active' : '',
-            ]"
-            role="tab"
-            :aria-selected="activeWorkflow === 'manual'"
-            @click="activeWorkflow = 'manual'"
-          >
-            Manual
-          </button>
-        </div>
-
-        <div v-if="activeWorkflow === 'manual'" class="mint-auto-group__manual-summary">
-          <div class="mint-auto-group__manual-summary-text">
-            <span class="mint-auto-group__manual-eyebrow">Manual workflow</span>
-            <strong>Assign selected samples to cohorts</strong>
-          </div>
-          <div class="mint-auto-group__manual-stats" aria-label="Manual grouping status">
-            <span><strong>{{ manualGroupedCount }}</strong> grouped</span>
-            <span><strong>{{ manualUngroupedCount }}</strong> unassigned</span>
-            <span><strong>{{ manualDraftGroups.length }}</strong> cohorts</span>
-          </div>
-        </div>
-      </div>
-
-      <StepWizard
-        v-if="activeWorkflow === 'auto'"
-        ref="wizardRef"
-        v-model="currentStep"
-        :steps="dynamicSteps"
-        :linear="true"
-        size="sm"
-      >
-        <!-- Step: Input -->
-        <template #step-input>
-          <div class="mint-auto-group__input-step">
-            <!-- Mode toggle. Paste is the self-designed path (type your
-                 own sample list); CSV is the structured-upload path; the
-                 Experiment tab only appears when the parent component
-                 owns an experimentId / designData. -->
-            <div class="mint-auto-group__mode-toggle">
-              <BaseButton
-                v-if="experimentId || designData"
-                :variant="autoGroup.inputMode.value === 'experiment' ? 'primary' : 'secondary'"
-                size="sm"
-                :disabled="experimentLoading"
-                @click="fetchExperimentData"
-              >
-                Experiment
-              </BaseButton>
-              <BaseButton
-                :variant="autoGroup.inputMode.value === 'paste' ? 'primary' : 'secondary'"
-                size="sm"
-                @click="switchToPasteMode"
-              >
-                Paste
-              </BaseButton>
-              <BaseButton
-                :variant="autoGroup.inputMode.value === 'csv' ? 'primary' : 'secondary'"
-                size="sm"
-                @click="autoGroup.inputMode.value = 'csv'"
-              >
-                CSV
-              </BaseButton>
-            </div>
-
-            <!-- Experiment mode -->
-            <div v-if="autoGroup.inputMode.value === 'experiment'" class="mint-auto-group__experiment">
-              <div v-if="experimentLoading" class="mint-auto-group__experiment-loading">
-                <LoadingSpinner size="sm" />
-                <span>Loading experiment metadata…</span>
-              </div>
-              <div v-else-if="experimentError" class="mint-auto-group__experiment-error">
-                <p>{{ experimentError }}</p>
-                <p>
-                  Switch to <button type="button" class="mint-auto-group__link-btn" @click="switchToPasteMode">Paste</button>
-                  or <button type="button" class="mint-auto-group__link-btn" @click="autoGroup.inputMode.value = 'csv'">CSV</button> mode instead.
-                </p>
-              </div>
-              <div v-else-if="autoGroup.csvData.value" class="mint-auto-group__experiment-loaded">
-                <div class="mint-auto-group__experiment-summary">
-                  <span class="mint-auto-group__experiment-stat">
-                    <strong>{{ autoGroup.csvData.value.rows.length }}</strong> samples
-                  </span>
-                  <span class="mint-auto-group__experiment-stat">
-                    <strong>{{ experimentFieldNames.length }}</strong> metadata fields
-                  </span>
-                </div>
-                <div class="mint-auto-group__experiment-fields">
-                  <span
-                    v-for="col in experimentFieldNames"
-                    :key="col"
-                    class="mint-auto-group__field-value"
-                  >{{ col }}</span>
-                </div>
-              </div>
-            </div>
-
-            <!-- Paste mode: free-form textarea for users to type or paste
-                 their own sample list (the "self-designed data" path). -->
-            <div v-if="autoGroup.inputMode.value === 'paste'" class="mint-auto-group__paste">
-              <textarea
-                v-model="autoGroup.rawText.value"
-                class="mint-auto-group__textarea"
-                rows="12"
-                placeholder="Paste sample names, one per line..."
-                aria-label="Sample names"
-              />
-              <div v-if="autoGroup.samples.value.length > 0" class="mint-auto-group__sample-count">
-                {{ autoGroup.samples.value.length }} samples
-              </div>
-            </div>
-
-            <!-- CSV mode -->
-            <div v-if="autoGroup.inputMode.value === 'csv'" class="mint-auto-group__csv">
-              <div v-if="!autoGroup.csvData.value"
-                :class="[
-                  'mint-auto-group__dropzone',
-                  isDragOver ? 'mint-auto-group__dropzone--dragover' : '',
-                ]"
-                @drop="handleFileDrop"
-                @dragover.prevent="isDragOver = true"
-                @dragleave="isDragOver = false"
-              >
-                <input
-                  type="file"
-                  accept=".csv,.tsv"
-                  class="mint-auto-group__file-input"
-                  aria-label="Upload CSV or TSV file"
-                  @change="handleFileInput"
-                />
-                <svg class="mint-auto-group__upload-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
-                </svg>
-                <p class="mint-auto-group__upload-text">
-                  <span class="mint-auto-group__upload-highlight">Click to upload</span>
-                  or drag and drop a CSV file
-                </p>
-                <p class="mint-auto-group__upload-hint">
-                  CSV or TSV with a header row. First column or column named
-                  "Sample" / "File Name" is used as sample identifier.
-                  Other columns become grouping fields.
-                </p>
-              </div>
-
-              <div v-if="csvError && !autoGroup.csvData.value" class="mint-auto-group__csv-error">
-                {{ csvError }}
-              </div>
-
-              <div v-if="autoGroup.csvData.value" class="mint-auto-group__file-info">
-                <svg class="mint-auto-group__file-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
-                </svg>
-                <span class="mint-auto-group__file-name">{{ csvFileName }}</span>
-                <span class="mint-auto-group__file-rows">{{ autoGroup.csvData.value.rows.length }} rows</span>
-                <button type="button" class="mint-auto-group__file-clear" @click="clearCsvFile">
-                  Change file
-                </button>
-              </div>
-            </div>
-
-            <div class="mint-auto-group__template" v-if="autoGroup.canDownloadTemplate.value">
-              <div class="mint-auto-group__template-label">Or hand-edit in Excel:</div>
-              <div class="mint-auto-group__template-actions">
-                <BaseButton size="sm" variant="ghost" @click="autoGroup.downloadTemplate('prefilled', 'csv')">
-                  Download pre-filled CSV
-                </BaseButton>
-                <BaseButton size="sm" variant="ghost" @click="autoGroup.downloadTemplate('blank', 'csv')">
-                  Download blank CSV
-                </BaseButton>
-              </div>
-            </div>
-          </div>
-        </template>
-
-        <!-- Step: Workspace -->
-        <template #step-workspace>
-          <div class="mint-auto-group__workspace">
-            <aside class="mint-auto-group__classes" aria-label="Detected sample classes">
-              <h3>Detected classes</h3>
-              <button
-                v-for="cls in autoGroup.classes.value"
-                :key="classKey(cls)"
-                type="button"
-                :class="[
-                  'mint-auto-group__class',
-                  autoGroup.activeClassKey.value === classKey(cls) ? 'mint-auto-group__class--active' : '',
-                  cls.kind !== 'biological' && cls.kind !== 'unknown' ? 'mint-auto-group__class--qc' : '',
-                ]"
-                @click="autoGroup.activeClassKey.value = classKey(cls)"
-              >
-                <span class="mint-auto-group__class-dot" />
-                <span class="mint-auto-group__class-label">{{ cls.label }}</span>
-                <span class="mint-auto-group__class-count">{{ cls.members.length }}</span>
-              </button>
-
-              <div class="mint-auto-group__routing">
-                <h4 class="mint-auto-group__routing-head">QC routing</h4>
-                <label class="mint-auto-group__routing-radio">
-                  <input
-                    type="radio"
-                    name="qc-routing"
-                    :checked="qcRouting === 'overlay'"
-                    @change="setQcRouting('overlay')"
-                  />
-                  <span>Overlay <small>preview only</small></span>
-                </label>
-                <label class="mint-auto-group__routing-radio">
-                  <input
-                    type="radio"
-                    name="qc-routing"
-                    :checked="qcRouting === 'exclude'"
-                    @change="setQcRouting('exclude')"
-                  />
-                  <span>Exclude entirely</span>
-                </label>
-                <label class="mint-auto-group__routing-radio">
-                  <input
-                    type="radio"
-                    name="qc-routing"
-                    :checked="qcRouting === 'mix'"
-                    @change="setQcRouting('mix')"
-                  />
-                  <span>Mix into groups</span>
-                </label>
-              </div>
-            </aside>
-
-            <section class="mint-auto-group__schema" aria-label="Schema editor">
-              <div class="mint-auto-group__stats">
-                <div class="mint-auto-group__stat mint-auto-group__stat--primary">
-                  <div class="mint-auto-group__stat-v">{{ groupStats.count }}</div>
-                  <div class="mint-auto-group__stat-l">Groups</div>
-                  <div class="mint-auto-group__stat-sub">
-                    <span v-if="groupKeyNames.length === 0" class="mint-auto-group__stat-empty">Toggle <strong>Use</strong> on a column to start splitting</span>
-                    <template v-else>
-                      <span
-                        v-for="name in groupKeyNames"
-                        :key="name"
-                        class="mint-auto-group__group-chip"
-                      >{{ name }}</span>
-                    </template>
-                  </div>
-                </div>
-                <div class="mint-auto-group__stat">
-                  <div class="mint-auto-group__stat-v">{{ activeMemberCount }}</div>
-                  <div class="mint-auto-group__stat-l">Samples</div>
-                  <div class="mint-auto-group__stat-sub mint-auto-group__stat-sub--muted">{{ activeSchemaLabel }} · {{ activeColumnCount }} token positions</div>
-                </div>
-                <div class="mint-auto-group__stat">
-                  <div class="mint-auto-group__stat-v">{{ groupStats.avg }}</div>
-                  <div class="mint-auto-group__stat-l">Avg / group</div>
-                  <div class="mint-auto-group__stat-sub mint-auto-group__stat-sub--muted">
-                    <template v-if="groupStats.count > 0">Min {{ groupStats.min }} · Max {{ groupStats.max }}</template>
-                    <template v-else>—</template>
-                  </div>
-                </div>
-              </div>
-
-              <div v-if="autoGroup.suggestions.value.length > 0" class="mint-auto-group__suggest">
-                <strong>Suggested merge:</strong>
-                columns {{ autoGroup.suggestions.value[0].columnIndices.map((i: number) => i + 1).join(' + ') }}
-                always co-occur — combine into <code>{{ autoGroup.suggestions.value[0].proposedName }}</code>?
-                <button type="button" class="mint-auto-group__suggest-btn" @click="acceptSuggestion(autoGroup.suggestions.value[0])">
-                  Accept · merge
-                </button>
-                <button type="button" class="mint-auto-group__suggest-btn mint-auto-group__suggest-btn--ghost" @click="dismissSuggestion(autoGroup.suggestions.value[0])">
-                  Dismiss
-                </button>
-              </div>
-
-              <div class="mint-auto-group__token-table" role="table" aria-label="Token positions">
-                <div class="mint-auto-group__token-row mint-auto-group__token-row--head" role="row">
-                  <span role="columnheader" aria-label="Token number">#</span>
-                  <span role="columnheader">Name</span>
-                  <span role="columnheader">Role</span>
-                  <span role="columnheader" class="mint-auto-group__token-num" aria-label="Unique value count">Unique</span>
-                  <span role="columnheader">Preview</span>
-                  <span role="columnheader" class="mint-auto-group__token-use-head">Use</span>
-                  <span role="columnheader" aria-label="More actions" />
-                </div>
-                <button
-                  v-for="col in (autoGroup.activeSchema.value?.columns ?? [])"
-                  :key="col.index"
-                  type="button"
-                  role="row"
-                  :aria-expanded="openPopoverIdx === col.index"
-                  aria-haspopup="dialog"
-                  :class="[
-                    'mint-auto-group__token-row',
-                    openPopoverIdx === col.index ? 'mint-auto-group__token-row--active' : '',
-                  ]"
-                  @click="openPopoverIdx = col.index"
-                >
-                  <span class="mint-auto-group__token-ix" role="cell">{{ col.index + 1 }}</span>
-                  <span class="mint-auto-group__token-nm" role="cell">{{ col.displayName ?? col.name }}</span>
-                  <span
-                    :class="['mint-auto-group__role', `mint-auto-group__role--${col.role}`]"
-                    role="cell"
-                  >{{ roleLabel(col.role) }}</span>
-                  <span class="mint-auto-group__token-unique" role="cell">{{ col.cardinality }}</span>
-                  <span class="mint-auto-group__token-preview" role="cell">
-                    {{ col.uniqueValues.slice(0, 4).join(', ') }}<span
-                      v-if="col.uniqueValues.length > 4"
-                      class="mint-auto-group__token-more"
-                    > +{{ col.uniqueValues.length - 4 }} more</span>
-                  </span>
-                  <label
-                    class="mint-auto-group__token-use"
-                    role="cell"
-                    @click.stop
-                  >
-                    <input
-                      type="checkbox"
-                      :checked="(autoGroup.activeSchema.value?.groupBy ?? []).includes(col.index)"
-                      @change="autoGroup.toggleGroupBy(autoGroup.activeClassKey.value, col.index)"
-                    />
-                  </label>
-                  <span class="mint-auto-group__token-trigger" role="cell" aria-hidden="true">⋯</span>
-                </button>
-              </div>
-            </section>
-
-            <div
-              v-if="openPopoverIdx !== null && activeColumn"
-              class="mint-auto-group__popover"
-              role="dialog"
-              :aria-label="`${activeColumn.displayName ?? activeColumn.name} column options`"
-              @click.stop
-            >
-              <div class="mint-auto-group__popover-head">
-                <strong>{{ activeColumn.displayName ?? activeColumn.name }}</strong>
-                <span class="mono">{{ activeColumn.cardinality }} unique</span>
-                <button type="button" class="mint-auto-group__popover-close" aria-label="Close" @click="openPopoverIdx = null">×</button>
-              </div>
-
-              <div class="mint-auto-group__popover-section">
-                <div class="mint-auto-group__popover-label">Role</div>
-                <div class="mint-auto-group__pills">
-                  <button
-                    v-for="r in (['factor','replicate','run-order','numeric','constant','ignore'] as ColumnRole[])"
-                    :key="r"
-                    type="button"
-                    :class="['mint-auto-group__pill-btn', activeColumn.role === r ? 'mint-auto-group__pill-btn--on' : '']"
-                    @click="autoGroup.setRole(autoGroup.activeClassKey.value, activeColumn.index, r)"
-                  >{{ roleLabel(r) }}</button>
-                </div>
-              </div>
-
-              <div class="mint-auto-group__popover-section">
-                <div class="mint-auto-group__popover-label">Rename</div>
-                <BaseInput
-                  :model-value="activeColumn.displayName ?? activeColumn.name"
-                  @update:model-value="renameActive(String($event ?? ''))"
-                />
-              </div>
-
-              <div class="mint-auto-group__popover-section">
-                <div class="mint-auto-group__popover-label">Values ({{ activeColumn.uniqueValues.length }})</div>
-                <div class="mint-auto-group__values-list">
-                  <div
-                    v-for="v in activeColumn.uniqueValues"
-                    :key="v"
-                    class="mint-auto-group__value-row"
-                  >
-                    <span class="mint-auto-group__value-src">{{ v }} →</span>
-                    <input
-                      class="mint-auto-group__value-input"
-                      :value="activeColumn.ops?.alias?.[v] ?? v"
-                      @change="setAlias(v, ($event.target as HTMLInputElement).value)"
-                    />
-                    <label class="mint-auto-group__value-excl">
-                      <input
-                        type="checkbox"
-                        :checked="activeColumn.ops?.exclude?.includes(v) ?? false"
-                        @change="toggleExclude(v)"
-                      />
-                      excl
-                    </label>
-                  </div>
-                </div>
-              </div>
-
-              <div class="mint-auto-group__popover-section">
-                <button type="button" class="mint-auto-group__link" @click="mergeWithNext">▸ Merge with next column</button>
-              </div>
-            </div>
-          </div>
-        </template>
-
-        <!-- Step: Preview -->
-        <template #step-preview>
-          <div class="mint-auto-group__preview">
-            <div class="mint-auto-group__preview-summary">
-              <strong>{{ autoGroup.groups.value.length }}</strong> groups ·
-              <strong>{{ totalGrouped }}</strong> samples ·
-              <strong>{{ totalQc }}</strong> QC kept aside ·
-              <strong>{{ autoGroup.excludedSamples.value.length }}</strong> excluded
-            </div>
-
-            <AlertBox
-              v-if="autoGroup.allSingletons.value"
-              type="warning"
-              title="Each group has only one sample"
-            >
-              Group key produced a unique key per row. Go back and disable any column whose
-              values are unique per sample.
-            </AlertBox>
-
-            <div class="mint-auto-group__preview-grid">
-              <div class="mint-auto-group__preview-panel">
-                <h4>Experimental groups</h4>
-                <SampleHierarchyTree
-                  v-if="groupTree.length"
-                  :nodes="groupTree"
-                  :default-expanded-ids="defaultExpandedTreeIds"
-                  :show-icons="false"
-                  size="sm"
-                  class="mint-auto-group__preview-tree"
-                />
-                <p v-else class="mint-auto-group__preview-empty">No experimental groups.</p>
-              </div>
-
-              <div class="mint-auto-group__preview-panel">
-                <h4>QC kept aside (overlay)</h4>
-                <div class="mint-auto-group__qc-chips">
-                  <span
-                    v-for="g in (autoGroup.qcGroups.value ?? [])"
-                    :key="g.name"
-                    class="mint-auto-group__qc-chip"
-                  >
-                    {{ g.name }} <code>×{{ g.samples.length }}</code>
-                  </span>
-                </div>
-                <details class="mint-auto-group__fingerprint">
-                  <summary>Schema fingerprint</summary>
-                  <pre>{{ JSON.stringify(autoGroup.fingerprint.value, null, 2) }}</pre>
-                </details>
-              </div>
-            </div>
-          </div>
-        </template>
-
-        <!-- Custom navigation -->
-        <template #navigation="{ goBack, goNext, canProceed }">
-          <div class="mint-auto-group__nav">
-            <BaseButton variant="secondary" @click="handleCancel">
-              Cancel
-            </BaseButton>
-            <div class="mint-auto-group__nav-spacer" />
-            <BaseButton
-              v-if="!isFirstStep"
-              variant="secondary"
-              @click="goBack"
-            >
-              Back
-            </BaseButton>
-            <BaseButton
-              v-if="!isLastStep"
-              variant="primary"
-              :disabled="!canProceed"
-              @click="() => { handleNext(); goNext() }"
-            >
-              Next
-            </BaseButton>
-            <BaseButton
-              v-if="isLastStep"
-              variant="primary"
-              @click="handleApply"
-            >
-              Apply
-            </BaseButton>
-          </div>
-        </template>
-      </StepWizard>
-
-      <div v-else class="mint-auto-group__manual-mode">
-        <div class="mint-auto-group__manual-grid">
-          <section class="mint-auto-group__manual-panel" aria-label="Manual sample selection">
-            <div class="mint-auto-group__manual-panel-head">
-              <div>
-                <span class="mint-auto-group__manual-step">1</span>
-                <h3>Samples</h3>
-              </div>
-              <div class="mint-auto-group__manual-panel-meta">
-                <span>{{ manualFilteredSamples.length }} of {{ manualSamplePool.length }}</span>
-                <label class="mint-auto-group__manual-filter">
-                  <input
-                    v-model="manualUngroupedOnly"
-                    type="checkbox"
-                    class="mint-auto-group__manual-checkbox"
-                  />
-                  <span>Ungrouped only</span>
-                </label>
-              </div>
-            </div>
-
-            <div class="mint-auto-group__manual-search">
-              <svg class="mint-auto-group__manual-search-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
-              </svg>
-              <input
-                v-model="manualSearchQuery"
-                type="text"
-                aria-label="Search samples for manual grouping"
-                placeholder="Search sample keyword..."
-                class="mint-auto-group__manual-search-input"
-              />
-            </div>
-
-            <label class="mint-auto-group__manual-selectbar">
-              <input
-                type="checkbox"
-                :checked="manualAllVisibleSelected"
-                :indeterminate="manualSomeVisibleSelected"
-                :disabled="manualFilteredSamples.length === 0"
-                class="mint-auto-group__manual-checkbox"
-                @change="manualToggleVisibleSamples"
-              />
-              <span>Select all matching</span>
-              <span class="mint-auto-group__manual-selectbar-count">
-                {{ manualFilteredSamples.length }} shown
-              </span>
-            </label>
-
-            <div class="mint-auto-group__manual-list">
-              <label
-                v-for="sample in manualFilteredSamples"
-                :key="sample"
-                :class="[
-                  'mint-auto-group__manual-sample',
-                  manualSelectedSet.has(sample) ? 'mint-auto-group__manual-sample--selected' : '',
-                ]"
-                :title="sample"
-              >
-                <input
-                  type="checkbox"
-                  :checked="manualSelectedSet.has(sample)"
-                  class="mint-auto-group__manual-checkbox"
-                  @change="manualToggleSample(sample)"
-                />
-                <span class="mint-auto-group__manual-sample-name">{{ sample }}</span>
-                <span
-                  :class="[
-                    'mint-auto-group__manual-status',
-                    manualGetSampleGroup(sample) ? '' : 'mint-auto-group__manual-status--empty',
-                  ]"
-                >
-                  <span
-                    v-if="manualGetSampleGroup(sample)"
-                    class="mint-auto-group__manual-dot"
-                    :style="{ backgroundColor: manualGetSampleGroup(sample)?.color }"
-                    aria-hidden="true"
-                  />
-                  {{ manualGetSampleStatus(sample) }}
-                </span>
-                <span class="mint-auto-group__manual-tooltip">{{ sample }}</span>
-              </label>
-
-              <div v-if="manualFilteredSamples.length === 0" class="mint-auto-group__manual-empty">
-                No samples
-              </div>
-            </div>
-
-            <div class="mint-auto-group__manual-selection-footer">
-              <span><strong>{{ manualSelectedSamples.length }}</strong> selected</span>
-              <button
-                type="button"
-                class="mint-auto-group__manual-link"
-                :disabled="manualSelectedSamples.length === 0"
-                @click="manualClearSamples"
-              >
-                Clear
-              </button>
-            </div>
-          </section>
-
-          <section class="mint-auto-group__manual-panel" aria-label="Manual cohort assignment">
-            <div class="mint-auto-group__manual-panel-head">
-              <div>
-                <span class="mint-auto-group__manual-step">2</span>
-                <h3>Cohort target</h3>
-              </div>
-            </div>
-
-            <div
-              :class="[
-                'mint-auto-group__manual-assignment',
-                manualSelectedSamples.length === 0 ? 'mint-auto-group__manual-assignment--empty' : '',
-              ]"
-            >
-              <div class="mint-auto-group__manual-selected-summary">
-                <span
-                  class="mint-auto-group__manual-dot"
-                  :style="{ backgroundColor: manualSelectedColor }"
-                  aria-hidden="true"
-                />
-                <span>
-                  {{ manualSelectedSamples.length > 0
-                    ? `${manualSelectedSamples.length} selected`
-                    : 'No sample selected' }}
-                </span>
-              </div>
-
-              <div class="mint-auto-group__manual-fields">
-                <label class="mint-auto-group__manual-field">
-                  <span>Group</span>
-                  <div class="mint-auto-group__manual-combo">
-                    <span
-                      class="mint-auto-group__manual-dot"
-                      :style="{ backgroundColor: manualSelectedColor }"
-                      aria-hidden="true"
-                    />
-                    <BaseInput
-                      v-model="manualGroupName"
-                      list="mint-auto-group-manual-groups"
-                      placeholder="Type or pick..."
-                      size="sm"
-                      class="mint-auto-group__manual-combo-input"
-                    />
-                    <svg class="mint-auto-group__manual-combo-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 9l6 6 6-6" />
-                    </svg>
-                    <datalist id="mint-auto-group-manual-groups">
-                      <option
-                        v-for="group in manualDraftGroups"
-                        :key="`manual-group-option-${group.name}`"
-                        :value="manualGetGroupPrimaryName(group.name)"
-                      />
-                    </datalist>
-                  </div>
-                </label>
-
-                <label class="mint-auto-group__manual-field">
-                  <span>Subgroup <small>optional</small></span>
-                  <div class="mint-auto-group__manual-combo">
-                    <BaseInput
-                      v-model="manualSubGroupName"
-                      list="mint-auto-group-manual-subgroups"
-                      placeholder="e.g. Day 7"
-                      size="sm"
-                      class="mint-auto-group__manual-combo-input"
-                    />
-                    <svg class="mint-auto-group__manual-combo-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 9l6 6 6-6" />
-                    </svg>
-                    <datalist id="mint-auto-group-manual-subgroups">
-                      <option
-                        v-for="group in manualDraftGroups"
-                        :key="`manual-subgroup-option-${group.name}`"
-                        :value="manualGetGroupSecondaryName(group.name) || group.name"
-                      />
-                    </datalist>
-                  </div>
-                </label>
-              </div>
-
-              <div class="mint-auto-group__manual-field">
-                <span>Color</span>
-                <div class="mint-auto-group__manual-swatches">
-                  <button
-                    v-for="color in manualColorOptions"
-                    :key="color"
-                    type="button"
-                    :class="[
-                      'mint-auto-group__manual-swatch',
-                      manualSelectedColor === color ? 'mint-auto-group__manual-swatch--active' : '',
-                    ]"
-                    :style="{ backgroundColor: color }"
-                    :aria-label="`Use color ${color}`"
-                    @click="manualChooseColor(color)"
-                  />
-                </div>
-              </div>
-
-              <div class="mint-auto-group__manual-target">
-                <span>Target cohort</span>
-                <code>{{ manualTargetGroupName || 'Group/Subgroup' }}</code>
-              </div>
-
-              <BaseButton
-                variant="primary"
-                size="sm"
-                class="mint-auto-group__manual-assign"
-                :disabled="!manualCanAssign"
-                @click="manualAssignSamplesToGroup"
-              >
-                <svg class="mint-auto-group__manual-btn-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14m-6-6 6 6-6 6" />
-                </svg>
-                Assign
-              </BaseButton>
-            </div>
-
-            <div class="mint-auto-group__manual-cohorts">
-              <div class="mint-auto-group__manual-cohorts-head">
-                <span>Cohorts so far</span>
-                <span>{{ manualDraftGroups.length }} groups</span>
-              </div>
-
-              <template v-if="manualShowHierarchy">
-                <template
-                  v-for="majorGroup in manualHierarchicalGroups"
-                  :key="`manual-major-${majorGroup.name}`"
-                >
-                  <button
-                    type="button"
-                    class="mint-auto-group__manual-chip mint-auto-group__manual-chip--major"
-                    :title="majorGroup.name"
-                    @click="manualUseExistingGroupAsTarget(majorGroup.subGroups[0]?.name || majorGroup.name)"
-                  >
-                    <span
-                      class="mint-auto-group__manual-chip-dot"
-                      :style="{ backgroundColor: majorGroup.color }"
-                      aria-hidden="true"
-                    />
-                    <span class="mint-auto-group__manual-chip-main">{{ majorGroup.name }}</span>
-                    <span class="mint-auto-group__manual-chip-count">{{ majorGroup.allSamples.length }}</span>
-                  </button>
-
-                  <button
-                    v-for="subGroup in majorGroup.subGroups"
-                    :key="`manual-sub-${subGroup.name}`"
-                    type="button"
-                    class="mint-auto-group__manual-chip mint-auto-group__manual-chip--sub"
-                    :title="subGroup.name"
-                    @click="manualUseExistingGroupAsTarget(subGroup.name)"
-                  >
-                    <span class="mint-auto-group__manual-chip-sub">
-                      {{ manualGetGroupSecondaryName(subGroup.name) || subGroup.name }}
-                    </span>
-                    <span class="mint-auto-group__manual-chip-count">{{ subGroup.samples.length }}</span>
-                  </button>
-                </template>
-              </template>
-
-              <template v-else>
-                <button
-                  v-for="group in manualDraftGroups"
-                  :key="group.name"
-                  type="button"
-                  class="mint-auto-group__manual-chip"
-                  :title="group.name"
-                  @click="manualUseExistingGroupAsTarget(group.name)"
-                >
-                  <span
-                    class="mint-auto-group__manual-chip-dot"
-                    :style="{ backgroundColor: group.color }"
-                    aria-hidden="true"
-                  />
-                  <span class="mint-auto-group__manual-chip-main">{{ group.name }}</span>
-                  <span class="mint-auto-group__manual-chip-count">{{ group.samples.length }}</span>
-                </button>
-              </template>
-
-              <div v-if="manualDraftGroups.length === 0" class="mint-auto-group__manual-empty">
-                No cohorts yet
-              </div>
-            </div>
-          </section>
-        </div>
-
-      </div>
-    </div>
-
-    <template v-if="activeWorkflow === 'manual'" #footer>
-      <div class="mint-auto-group__nav mint-auto-group__nav--manual">
-        <BaseButton variant="secondary" @click="handleCancel">
-          Cancel
-        </BaseButton>
-        <div class="mint-auto-group__nav-spacer" />
-        <BaseButton variant="primary" @click="handleManualApply">
-          Apply
-        </BaseButton>
-      </div>
-    </template>
+    <AlertBox v-if="experimentError" type="error" class="sg-host__error">
+      {{ experimentError }}
+    </AlertBox>
+
+    <SmartGroupFieldRecipe
+      v-if="activeWorkflow === 'auto'"
+      :fields="fieldCards.fields"
+      :enabled="fieldCards.enabled"
+      :groups="railGroups"
+      :qc-chip="qcChip"
+      :route="fieldRecipeRoute"
+      :header-count="headerCount"
+      :qc-count="qcSampleCount"
+      :can-download-template="autoGroup.canDownloadTemplate.value"
+      :loading="experimentLoading"
+      experiment-label=""
+      @toggle="onToggleField"
+      @update:route="onRouteChange"
+      @csv-file="onCsvFile"
+      @download-template="onDownloadTemplate"
+      @download-prefilled="onDownloadPrefilled"
+      @apply="applyAuto"
+      @manual="activeWorkflow = 'manual'"
+      @cancel="close"
+      @close="close"
+    />
+    <SmartGroupManual
+      v-else
+      :key="manualKey"
+      :sample-names="manualSampleNames"
+      :seed="manualSeed"
+      :palette="manualPalette"
+      @done="applyManual"
+      @auto="activeWorkflow = 'auto'"
+      @cancel="close"
+      @close="close"
+    />
   </BaseModal>
 </template>
 
 <style>
-@import '../styles/components/auto-group-modal.css';
+@import '../styles/components/smart-group.css';
 </style>