@morscherlab/mint-sdk 1.0.0-rc.2 → 1.0.0-rc.5

package/src/components/AutoGroupModal.vue

@@ -8,9 +8,10 @@ import StepWizard from './StepWizard.vue'
 import LoadingSpinner from './LoadingSpinner.vue'
 import AlertBox from './AlertBox.vue'
 import { useAutoGroup, parseCSV } from '../composables/useAutoGroup'
+import { classKey } from '../composables/autoGroup'
 import { useApi } from '../composables/useApi'
 import type { WizardStep } from '../types/components'
-import type { AutoGroupResult } from '../types/auto-group'
+import type { AutoGroupResult, MergeSuggestion, ColumnRole } from '../types/auto-group'
 
 export interface Props {
   modelValue: boolean
@@ -41,7 +42,162 @@ const experimentLoading = ref(false)
 const experimentError = ref<string | null>(null)
 const csvError = ref<string | null>(null)
 
-// Pre-fill from props
+// Workspace step refs
+const openPopoverIdx = ref<number | null>(null)
+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),
+)
+
+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'
+  autoGroup.setClassDispositions(
+    c => c.kind !== 'biological' && c.kind !== 'unknown',
+    value === 'exclude' ? 'exclude' : value === 'overlay' ? 'overlay' : 'group',
+  )
+}
+
+// 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)
+}
+
+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 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 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
+}
+
+// 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) {
     autoGroup.reset()
@@ -51,26 +207,28 @@ watch(() => props.modelValue, (open) => {
     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 })
 
-// Dynamic steps: skip outlier step when no outliers
+// Wizard steps: three steps, unconditional
 const allSteps: WizardStep[] = [
   { id: 'input', label: 'Input' },
-  { id: 'outliers', label: 'Outliers' },
-  { id: 'fields', label: 'Fields' },
+  { id: 'workspace', label: 'Workspace' },
   { id: 'preview', label: 'Preview' },
 ]
 
-const dynamicSteps = computed<WizardStep[]>(() => {
-  if (autoGroup.hasOutliers.value) {
-    return allSteps
-  }
-  return allSteps.filter(s => s.id !== 'outliers')
-})
+const dynamicSteps = computed<WizardStep[]>(() => allSteps)
 
 // Map current step index to step ID
 const currentStepId = computed(() => {
@@ -87,17 +245,16 @@ watch(() => dynamicSteps.value.length, (newLen) => {
 
 // Step validity
 const inputValid = computed(() => autoGroup.samples.value.length > 0)
-const fieldsValid = computed(() => autoGroup.enabledFields.value.size > 0)
+const workspaceValid = computed(() => true) // empty groupBy is allowed; warning is shown in Preview.
 
-watch([inputValid, fieldsValid, dynamicSteps], () => {
+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 === 'outliers') wizardRef.value.setStepValid(i, true)
-    else if (id === 'fields') wizardRef.value.setStepValid(i, fieldsValid.value)
-    else if (id === 'preview') wizardRef.value.setStepValid(i, true)
+    else if (id === 'workspace') wizardRef.value.setStepValid(i, workspaceValid.value)
+    else wizardRef.value.setStepValid(i, true)
   }
 }, { immediate: true })
 
@@ -149,11 +306,11 @@ async function fetchExperimentData() {
       return
     }
 
-    // Auto-advance to Fields step
+    // Auto-advance to Workspace step
     await nextTick()
-    const fieldsIdx = dynamicSteps.value.findIndex(s => s.id === 'fields')
-    if (fieldsIdx >= 0) {
-      currentStep.value = fieldsIdx
+    const workspaceIdx = dynamicSteps.value.findIndex(s => s.id === 'workspace')
+    if (workspaceIdx >= 0) {
+      currentStep.value = workspaceIdx
     }
   } catch (e) {
     experimentError.value = e instanceof Error ? e.message : 'Failed to fetch experiment data'
@@ -196,8 +353,18 @@ async function processFile(file: 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)
@@ -215,6 +382,8 @@ const isFirstStep = computed(() => currentStep.value === 0)
     :model-value="modelValue"
     title="Smart Group"
     size="lg"
+    :close-on-overlay="false"
+    :close-on-escape="false"
     @update:model-value="emit('update:modelValue', $event)"
     @close="handleCancel"
   >
@@ -229,7 +398,10 @@ const isFirstStep = computed(() => currentStep.value === 0)
         <!-- Step: Input -->
         <template #step-input>
           <div class="mint-auto-group__input-step">
-            <!-- Mode toggle -->
+            <!-- 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"
@@ -243,7 +415,7 @@ const isFirstStep = computed(() => currentStep.value === 0)
               <BaseButton
                 :variant="autoGroup.inputMode.value === 'paste' ? 'primary' : 'secondary'"
                 size="sm"
-                @click="autoGroup.inputMode.value = 'paste'"
+                @click="switchToPasteMode"
               >
                 Paste
               </BaseButton>
@@ -265,7 +437,7 @@ const isFirstStep = computed(() => currentStep.value === 0)
               <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="autoGroup.inputMode.value = 'paste'">Paste</button>
+                  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>
@@ -288,7 +460,8 @@ const isFirstStep = computed(() => currentStep.value === 0)
               </div>
             </div>
 
-            <!-- Paste mode -->
+            <!-- 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"
@@ -347,134 +520,240 @@ const isFirstStep = computed(() => currentStep.value === 0)
                 </button>
               </div>
             </div>
-          </div>
-        </template>
 
-        <!-- Step: Outliers -->
-        <template #step-outliers>
-          <div class="mint-auto-group__outlier-step">
-            <div class="mint-auto-group__outlier-banner">
-              {{ autoGroup.outliers.value.length }} of {{ autoGroup.samples.value.length }}
-              samples have irregular structure
-              (fewer than {{ autoGroup.dominantFieldCount.value }} fields, delimiter
-              <code>{{ autoGroup.delimiter.value }}</code>)
-            </div>
-
-            <div class="mint-auto-group__outlier-batch">
-              <BaseButton size="sm" variant="secondary" @click="autoGroup.setAllOutlierActions('include')">
-                Include All
-              </BaseButton>
-              <BaseButton size="sm" variant="secondary" @click="autoGroup.setAllOutlierActions('exclude')">
-                Exclude All
-              </BaseButton>
-            </div>
-
-            <div class="mint-auto-group__outlier-list">
-              <div
-                v-for="outlier in autoGroup.outliers.value"
-                :key="outlier.index"
-                class="mint-auto-group__outlier-item"
-              >
-                <div class="mint-auto-group__outlier-info">
-                  <code class="mint-auto-group__outlier-name">{{ outlier.sample }}</code>
-                  <span class="mint-auto-group__outlier-badge">{{ outlier.fieldCount }} fields</span>
-                </div>
-                <div class="mint-auto-group__outlier-actions">
-                  <button
-                    type="button"
-                    :class="['mint-auto-group__action-btn', outlier.action === 'include' ? 'mint-auto-group__action-btn--active' : '']"
-                    @click="autoGroup.setOutlierAction(outlier.index, 'include')"
-                  >Include</button>
-                  <button
-                    type="button"
-                    :class="['mint-auto-group__action-btn', outlier.action === 'exclude' ? 'mint-auto-group__action-btn--active mint-auto-group__action-btn--exclude' : '']"
-                    @click="autoGroup.setOutlierAction(outlier.index, 'exclude')"
-                  >Exclude</button>
-                  <button
-                    type="button"
-                    :class="['mint-auto-group__action-btn', outlier.action === 'qc' ? 'mint-auto-group__action-btn--active mint-auto-group__action-btn--qc' : '']"
-                    @click="autoGroup.setOutlierAction(outlier.index, 'qc')"
-                  >QC</button>
-                </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: Fields -->
-        <template #step-fields>
-          <div class="mint-auto-group__field-step">
-            <div class="mint-auto-group__field-grid">
-              <div
-                v-for="col in autoGroup.effectiveColumns.value"
-                :key="col.index"
+        <!-- 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__field-card',
-                  autoGroup.enabledFields.value.has(col.index) ? 'mint-auto-group__field-card--enabled' : '',
+                  '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)"
               >
-                <div class="mint-auto-group__field-header">
-                  <label class="mint-auto-group__field-toggle">
+                <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"
+                  :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.enabledFields.value.has(col.index)"
-                      @change="autoGroup.toggleField(col.index)"
+                      :checked="(autoGroup.activeSchema.value?.groupBy ?? []).includes(col.index)"
+                      @change="autoGroup.toggleGroupBy(autoGroup.activeClassKey.value, col.index)"
                     />
-                    <span class="mint-auto-group__field-toggle-label">Group by</span>
                   </label>
-                  <span class="mint-auto-group__field-cardinality">{{ col.cardinality }} unique</span>
+                  <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"
+              @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" @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="col.name"
-                  placeholder="Field name..."
-                  class="mint-auto-group__field-name-input"
-                  @update:model-value="autoGroup.renameField(col.index, String($event ?? ''))"
+                  :model-value="activeColumn.displayName ?? activeColumn.name"
+                  @update:model-value="renameActive(String($event ?? ''))"
                 />
+              </div>
 
-                <div class="mint-auto-group__field-values">
-                  <span
-                    v-for="val in col.uniqueValues.slice(0, 5)"
-                    :key="val"
-                    class="mint-auto-group__field-value"
-                  >{{ val }}</span>
-                  <span
-                    v-if="col.uniqueValues.length > 5"
-                    class="mint-auto-group__field-more"
-                  >+{{ col.uniqueValues.length - 5 }} more</span>
+              <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>
-
-            <div v-if="autoGroup.enabledFields.value.size > 0" class="mint-auto-group__field-summary">
-              Grouping by:
-              <strong>{{
-                autoGroup.effectiveColumns.value
-                  .filter(c => autoGroup.enabledFields.value.has(c.index))
-                  .map(c => c.name)
-                  .join(' / ')
-              }}</strong>
-            </div>
 
-            <div v-if="autoGroup.enabledFields.value.size === 0" class="mint-auto-group__field-warning">
-              Select at least one field for grouping
+              <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-step">
+          <div class="mint-auto-group__preview">
             <div class="mint-auto-group__preview-summary">
-              <span class="mint-auto-group__preview-stat">
-                <strong>{{ autoGroup.groups.value.length }}</strong> groups
-              </span>
-              <span class="mint-auto-group__preview-stat">
-                <strong>{{ autoGroup.groups.value.reduce((sum, g) => sum + g.samples.length, 0) }}</strong> samples
-              </span>
-              <span v-if="autoGroup.excludedSamples.value.length > 0" class="mint-auto-group__preview-stat mint-auto-group__preview-stat--excluded">
-                <strong>{{ autoGroup.excludedSamples.value.length }}</strong> excluded
-              </span>
+              <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
@@ -482,44 +761,48 @@ const isFirstStep = computed(() => currentStep.value === 0)
               type="warning"
               title="Each group has only one sample"
             >
-              Your enabled fields produce a unique key for every row, so no aggregation is happening. Go back to <em>Fields</em> and disable any column whose values are unique per 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-groups">
-              <details
-                v-for="group in autoGroup.groups.value"
-                :key="group.name"
-                class="mint-auto-group__preview-group"
-              >
-                <summary class="mint-auto-group__preview-group-header">
-                  <span
-                    class="mint-auto-group__preview-dot"
-                    :style="{ backgroundColor: group.color }"
-                  />
-                  <span class="mint-auto-group__preview-group-name">{{ group.name }}</span>
-                  <span
-                    class="mint-auto-group__preview-group-count"
-                    :style="{ backgroundColor: group.color + '20', color: group.color }"
-                  >{{ group.samples.length }}</span>
-                </summary>
-                <div class="mint-auto-group__preview-samples">
+            <div class="mint-auto-group__preview-grid">
+              <div class="mint-auto-group__preview-panel">
+                <h4>Experimental groups</h4>
+                <details
+                  v-for="group in (autoGroup.result.value.experimentalGroups ?? [])"
+                  :key="group.name"
+                  class="mint-auto-group__preview-group"
+                >
+                  <summary>
+                    <span class="mint-auto-group__preview-dot" :style="{ background: group.color }" />
+                    <span>{{ group.name }}</span>
+                    <span class="mint-auto-group__preview-count">{{ group.samples.length }}</span>
+                  </summary>
+                  <div class="mint-auto-group__preview-samples">
+                    <span
+                      v-for="s in group.samples"
+                      :key="s"
+                      class="mint-auto-group__preview-sample"
+                    >{{ s }}</span>
+                  </div>
+                </details>
+              </div>
+
+              <div class="mint-auto-group__preview-panel">
+                <h4>QC kept aside (overlay)</h4>
+                <div class="mint-auto-group__qc-chips">
                   <span
-                    v-for="sample in group.samples"
-                    :key="sample"
-                    class="mint-auto-group__preview-sample"
-                  >{{ sample }}</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>
-            </div>
-
-            <div v-if="autoGroup.excludedSamples.value.length > 0" class="mint-auto-group__preview-excluded">
-              <div class="mint-auto-group__preview-excluded-title">Excluded Samples</div>
-              <div class="mint-auto-group__preview-excluded-list">
-                <span
-                  v-for="sample in autoGroup.excludedSamples.value"
-                  :key="sample"
-                  class="mint-auto-group__preview-sample mint-auto-group__preview-sample--excluded"
-                >{{ sample }}</span>
+                <details class="mint-auto-group__fingerprint">
+                  <summary>Schema fingerprint</summary>
+                  <pre>{{ JSON.stringify(autoGroup.fingerprint.value, null, 2) }}</pre>
+                </details>
               </div>
             </div>
           </div>