@morscherlab/mint-sdk 1.0.38 → 1.0.41

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@morscherlab/mint-sdk",
-  "version": "1.0.38",
+  "version": "1.0.41",
   "description": "MINT Platform SDK — Vue 3 components, composables, and types for plugin development. MINT = Mass-spec INtegrated Toolkit.",
   "type": "module",
   "main": "./dist/index.js",

package/src/__tests__/components/AutoGroupModal.preview.test.ts

@@ -0,0 +1,46 @@
+import { describe, it, expect } from 'vitest'
+import { mount, flushPromises } from '@vue/test-utils'
+import { createPinia } from 'pinia'
+import AutoGroupModal from '../../components/AutoGroupModal.vue'
+import SampleHierarchyTree from '../../components/SampleHierarchyTree.vue'
+
+const SAMPLES = [
+  'study_Tissues_Kidney_M1_001',
+  'study_Tissues_Kidney_M2_002',
+  'study_Tissues_Liver_M1_003',
+  'study_Tissues_Liver_M2_004',
+]
+
+async function openAtPreview() {
+  const wrapper = mount(AutoGroupModal, {
+    props: { modelValue: false, samples: SAMPLES },
+    attachTo: document.body,
+    global: { plugins: [createPinia()] },
+  })
+  // The open watcher (not immediate) runs parseInput and lands on Workspace.
+  await wrapper.setProps({ modelValue: true })
+  await flushPromises()
+  // Advance Workspace → Preview via the wizard's Next button.
+  for (let i = 0; i < 3; i++) {
+    const next = wrapper.findAll('button').find(b => b.text().trim() === 'Next')
+    if (!next) break
+    await next.trigger('click')
+    await flushPromises()
+  }
+  return wrapper
+}
+
+describe('AutoGroupModal preview hierarchy', () => {
+  it('renders the experimental groups as a collapsible SampleHierarchyTree', async () => {
+    const wrapper = await openAtPreview()
+    const tree = wrapper.findComponent(SampleHierarchyTree)
+    expect(tree.exists()).toBe(true)
+    const nodes = tree.props('nodes') as Array<{ label: string; badge?: unknown; children?: unknown[] }>
+    expect(nodes.length).toBeGreaterThan(0)
+    // Top node is the class; it carries a sample-count badge and nested children.
+    const root = nodes[0]
+    expect(root.children && (root.children as unknown[]).length).toBeGreaterThan(0)
+    expect(typeof root.badge).toBe('number')
+    wrapper.unmount()
+  })
+})

package/src/__tests__/composables/autoGroup/classKey.test.ts

@@ -0,0 +1,25 @@
+import { describe, it, expect } from 'vitest'
+import { classKey } from '../../../composables/autoGroup/classKey'
+
+describe('classKey', () => {
+  it('should key by kind alone when there is no subKind', () => {
+    expect(classKey({ kind: 'unknown' })).toBe('unknown')
+  })
+
+  it('should key by kind:subKind when a subKind is present', () => {
+    expect(classKey({ kind: 'biological', subKind: 'Plasma' })).toBe('biological:Plasma')
+  })
+
+  it('should append the token length so length-split classes get distinct keys', () => {
+    expect(classKey({ kind: 'biological', subKind: 'Plasma', tokenLength: 7 })).toBe(
+      'biological:Plasma#7',
+    )
+    expect(classKey({ kind: 'biological', subKind: 'Plasma', tokenLength: 8 })).toBe(
+      'biological:Plasma#8',
+    )
+  })
+
+  it('should append the token length even without a subKind', () => {
+    expect(classKey({ kind: 'unknown', tokenLength: 3 })).toBe('unknown#3')
+  })
+})

package/src/__tests__/composables/autoGroup/fingerprint.test.ts

@@ -47,4 +47,76 @@ describe('fingerprint round-trip', () => {
     ]
     expect(() => restoreFingerprint(fp, mismatched)).toThrow(/column count/i)
   })
+
+  it('matches a pre-token-length snapshot to the schema with the same column count', () => {
+    // An OLD fingerprint (saved before token-length splitting) has no tokenLength.
+    const oldFp = {
+      version: 1 as const,
+      classes: [
+        {
+          kind: 'biological' as const,
+          subKind: 'Plasma',
+          columns: [
+            { name: 'A', role: 'factor' as const, sourceIndices: [0] },
+          ],
+          groupBy: [0],
+        },
+      ],
+    }
+    // Current data split into two Plasma schemas; the 2-column one is listed FIRST.
+    const current: ClassSchema[] = [
+      {
+        classKind: 'biological', subKind: 'Plasma', tokenLength: 5,
+        columns: [
+          { index: 0, name: 'A', sourceIndices: [0], uniqueValues: ['x'], cardinality: 1, role: 'factor' },
+          { index: 1, name: 'B', sourceIndices: [1], uniqueValues: ['y'], cardinality: 1, role: 'factor' },
+        ],
+        groupBy: [0, 1],
+      },
+      {
+        classKind: 'biological', subKind: 'Plasma', tokenLength: 4,
+        columns: [
+          { index: 0, name: 'A', sourceIndices: [0], uniqueValues: ['x'], cardinality: 1, role: 'factor' },
+        ],
+        groupBy: [0],
+      },
+    ]
+    // Must match the 1-column schema (same column count) rather than throwing on the 2-column first hit.
+    const restored = restoreFingerprint(oldFp, current)
+    expect(restored).toHaveLength(1)
+    expect(restored[0].columns).toHaveLength(1)
+  })
+
+  it('disambiguates schemas that share kind/subKind but differ in token length', () => {
+    const ragged: ClassSchema[] = [
+      {
+        classKind: 'biological',
+        subKind: 'Plasma',
+        tokenLength: 4,
+        columns: [
+          { index: 0, name: 'A', sourceIndices: [0], uniqueValues: ['x'], cardinality: 1, role: 'factor' },
+        ],
+        groupBy: [0],
+      },
+      {
+        classKind: 'biological',
+        subKind: 'Plasma',
+        tokenLength: 5,
+        columns: [
+          { index: 0, name: 'A', sourceIndices: [0], uniqueValues: ['x'], cardinality: 1, role: 'factor' },
+          { index: 1, name: 'B', sourceIndices: [1], uniqueValues: ['y'], cardinality: 1, role: 'factor' },
+        ],
+        groupBy: [0, 1],
+      },
+    ]
+    const fp = serializeFingerprint(ragged)
+    // Restore against the SAME schemas in reversed order: each snapshot must
+    // match its same-token-length schema, not collide on kind/subKind (which
+    // would mis-apply columns or throw on a column-count mismatch).
+    const restored = restoreFingerprint(fp, [ragged[1], ragged[0]])
+    const four = restored.find(s => s.tokenLength === 4)
+    const five = restored.find(s => s.tokenLength === 5)
+    expect(four?.columns).toHaveLength(1)
+    expect(five?.columns).toHaveLength(2)
+  })
 })

package/src/__tests__/composables/autoGroup/groupTree.test.ts

@@ -0,0 +1,99 @@
+import { describe, it, expect } from 'vitest'
+import { composeGroups } from '../../../composables/autoGroup/compose'
+import type { ClassSchema, SampleClass } from '../../../types/auto-group'
+import type { TreeNode } from '../../../types'
+
+const tissues: ClassSchema = {
+  classKind: 'biological',
+  subKind: 'Tissues',
+  columns: [
+    { index: 0, name: 'Organ', sourceIndices: [0], uniqueValues: ['Kidney', 'Liver'], cardinality: 2, role: 'factor' },
+    { index: 1, name: 'Subject', sourceIndices: [1], uniqueValues: ['M1', 'M2'], cardinality: 2, role: 'factor' },
+    { index: 2, name: 'Injection #', sourceIndices: [2], uniqueValues: ['001', '002', '003'], cardinality: 3, role: 'run-order' },
+  ],
+  groupBy: [0, 1],
+}
+const tissuesClass: SampleClass = {
+  kind: 'biological',
+  subKind: 'Tissues',
+  label: 'Biological / Tissues',
+  members: [0, 1, 2],
+  classTagPositions: [],
+  disposition: 'group',
+}
+const input = {
+  tokenizedSamples: [
+    ['Kidney', 'M1', '001'],
+    ['Kidney', 'M2', '002'],
+    ['Liver', 'M1', '003'],
+  ],
+  sampleNames: ['k1', 'k2', 'l1'],
+  schemas: { 'biological:Tissues': tissues },
+  classes: [tissuesClass],
+}
+
+function child(node: TreeNode | undefined, label: string): TreeNode | undefined {
+  return node?.children?.find(c => c.label === label)
+}
+
+describe('composeGroups groupTree (nested hierarchy)', () => {
+  it('nests class → layer1 → layer2 → sample leaves with sample-count badges', () => {
+    const tree = composeGroups(input).groupTree!
+    expect(tree).toHaveLength(1)
+    const root = tree[0]
+    expect(root.label).toBe('Biological / Tissues')
+    expect(root.badge).toBe(3) // total samples under the class
+
+    const kidney = child(root, 'Kidney')
+    const liver = child(root, 'Liver')
+    expect(kidney?.badge).toBe(2)
+    expect(liver?.badge).toBe(1)
+
+    const kidneyM1 = child(kidney, 'M1')
+    const kidneyM2 = child(kidney, 'M2')
+    expect(kidneyM1?.badge).toBe(1)
+    expect(kidneyM2?.badge).toBe(1)
+
+    // Leaf = the actual sample; injection number carried as leaf metadata + badge.
+    const leaf = kidneyM1?.children?.[0]
+    expect(leaf?.label).toBe('k1')
+    expect(leaf?.children).toBeUndefined()
+    expect(leaf?.metadata?.injection).toBe('001')
+    expect(leaf?.badge).toBe('001')
+  })
+
+  it('gives every node a stable unique id derived from its path', () => {
+    const tree = composeGroups(input).groupTree!
+    const ids = new Set<string>()
+    const walk = (n: TreeNode) => { ids.add(n.id); n.children?.forEach(walk) }
+    tree.forEach(walk)
+    // class + Kidney + Liver + M1(×2 paths) + M2 + 3 leaves = 9 distinct ids
+    expect(ids.size).toBe(9)
+  })
+
+  it('puts samples directly under the class node when no columns are grouped', () => {
+    const flatSchema: ClassSchema = { ...tissues, groupBy: [] }
+    const tree = composeGroups({ ...input, schemas: { 'biological:Tissues': flatSchema } }).groupTree!
+    const root = tree[0]
+    expect(root.badge).toBe(3)
+    expect(root.children?.map(c => c.label)).toEqual(['k1', 'k2', 'l1'])
+  })
+
+  it('excludes overlay/QC classes from the experimental groupTree', () => {
+    const iqcSchema: ClassSchema = {
+      classKind: 'iqc',
+      columns: [{ index: 0, name: 'IQC', sourceIndices: [0], uniqueValues: ['IQC'], cardinality: 1, role: 'class-tag' }],
+      groupBy: [],
+    }
+    const iqcClass: SampleClass = {
+      kind: 'iqc', label: 'IQC', members: [3], classTagPositions: [0], disposition: 'overlay',
+    }
+    const tree = composeGroups({
+      tokenizedSamples: [...input.tokenizedSamples, ['IQC']],
+      sampleNames: [...input.sampleNames, 'qc1'],
+      schemas: { 'biological:Tissues': tissues, iqc: iqcSchema },
+      classes: [tissuesClass, iqcClass],
+    }).groupTree!
+    expect(tree.map(n => n.label)).toEqual(['Biological / Tissues'])
+  })
+})

package/src/__tests__/composables/autoGroup/tokenLength.test.ts

@@ -0,0 +1,85 @@
+import { describe, it, expect } from 'vitest'
+import { splitByTokenLength } from '../../../composables/autoGroup/tokenLength'
+import type { SampleClass } from '../../../types/auto-group'
+
+function cls(partial: Partial<SampleClass> & Pick<SampleClass, 'members'>): SampleClass {
+  return {
+    kind: 'biological',
+    label: 'Biological / Plasma',
+    subKind: 'Plasma',
+    classTagPositions: [],
+    disposition: 'group',
+    ...partial,
+  }
+}
+
+describe('splitByTokenLength', () => {
+  it('should split a ragged class into one class per token-length, preserving member order', () => {
+    const tokenized = [
+      ['a', 'b', 'c', '01'], // len 4
+      ['a', 'b', 'c', '02'], // len 4
+      ['a', 'b', 'c', 'd', '03'], // len 5
+    ]
+    const out = splitByTokenLength([cls({ members: [0, 1, 2] })], tokenized)
+
+    expect(out).toHaveLength(2)
+    const four = out.find(c => c.tokenLength === 4)
+    const five = out.find(c => c.tokenLength === 5)
+    expect(four?.members).toEqual([0, 1])
+    expect(five?.members).toEqual([2])
+  })
+
+  it('should disambiguate the label with the field count only when a class spans multiple lengths', () => {
+    const tokenized = [
+      ['a', 'b', 'c', '01'],
+      ['a', 'b', 'c', 'd', '02'],
+    ]
+    const out = splitByTokenLength([cls({ members: [0, 1] })], tokenized)
+
+    const labels = out.map(c => c.label).sort()
+    expect(labels).toEqual([
+      'Biological / Plasma · 4 fields',
+      'Biological / Plasma · 5 fields',
+    ])
+  })
+
+  it('should leave the label unchanged but still set tokenLength when a class has a single length', () => {
+    const tokenized = [
+      ['a', 'b', 'c'],
+      ['a', 'b', 'c'],
+    ]
+    const out = splitByTokenLength([cls({ members: [0, 1] })], tokenized)
+
+    expect(out).toHaveLength(1)
+    expect(out[0].label).toBe('Biological / Plasma')
+    expect(out[0].tokenLength).toBe(3)
+  })
+
+  it('should clamp classTagPositions to the split token-length', () => {
+    const tokenized = [
+      ['a', 'b', 'c'], // len 3
+      ['a', 'b', 'c', 'd', 'e'], // len 5
+    ]
+    const out = splitByTokenLength(
+      [cls({ members: [0, 1], classTagPositions: [1, 4] })],
+      tokenized,
+    )
+
+    const short = out.find(c => c.tokenLength === 3)
+    const long = out.find(c => c.tokenLength === 5)
+    expect(short?.classTagPositions).toEqual([1])
+    expect(long?.classTagPositions).toEqual([1, 4])
+  })
+
+  it('should keep distinct input classes separate and ordered', () => {
+    const tokenized = [
+      ['x', '01'], // class A, len 2
+      ['y', 'z', '02'], // class B, len 3
+    ]
+    const a = cls({ kind: 'unknown', subKind: undefined, label: 'Unknown', members: [0] })
+    const b = cls({ members: [1] })
+    const out = splitByTokenLength([a, b], tokenized)
+
+    expect(out.map(c => c.label)).toEqual(['Unknown', 'Biological / Plasma'])
+  })
+})

package/src/__tests__/composables/useAutoGroup.test.ts

@@ -4,6 +4,7 @@ import {
   extractSamplesFromDesignData,
   useAutoGroup,
 } from '../../composables/useAutoGroup'
+import { classKey } from '../../composables/autoGroup/classKey'
 
 describe('parseCSV', () => {
   it('should parse simple CSV with headers', () => {
@@ -284,12 +285,10 @@ describe('useAutoGroup CSV structured hierarchy', () => {
 })
 
 describe('useAutoGroup auto-disable degenerate columns', () => {
-  it('collapses unique-per-row injection numbers via replicate pre-grouping', () => {
-    // The replicate pre-grouping pass strips the trailing 3-digit run-order
-    // tokens before tokenisation, so 5 inputs collapse to 2 base names
-    // (Ctrl_WT and Treat_WT). This supersedes the old "auto-disable
-    // unique-per-row column" mechanism — there IS no unique-per-row column
-    // for the schema to see, because pre-grouping already absorbed it.
+  it('collapses unique-per-row injection numbers into one group per condition', () => {
+    // The trailing injection number is detected as a run-order column and kept
+    // OUT of the default group key, so the 5 samples collapse to two condition
+    // groups (Ctrl, Treat) even though every injection number is distinct.
     const auto = useAutoGroup()
     auto.rawText.value = [
       'Ctrl_WT_001',
@@ -301,8 +300,6 @@ describe('useAutoGroup auto-disable degenerate columns', () => {
     auto.parseInput()
 
     expect(auto.groups.value).toHaveLength(2)
-    // Ctrl has 3 samples, Treat has 2 — replicates expanded back from the
-    // base names by expandGroupsWithReplicates in the result computed.
     const ctrl = auto.groups.value.find(g => g.name === 'Ctrl')
     const treat = auto.groups.value.find(g => g.name === 'Treat')
     expect(ctrl?.samples).toHaveLength(3)
@@ -310,10 +307,11 @@ describe('useAutoGroup auto-disable degenerate columns', () => {
     expect(auto.groups.value.every(g => g.samples.length > 1)).toBe(true)
   })
 
-  it('the schema never sees a degenerate unique-per-row column', () => {
-    // Same setup, asserting the contract from the other side: after the
-    // pre-grouping pass, the active schema's columns reflect the BASE
-    // tokens only. There's no column with cardinality === sample-count.
+  it('surfaces the injection number as a non-grouping run-order column', () => {
+    // The trailing 3-digit injection number is now SURFACED as a column rather
+    // than silently stripped: it appears in the active schema with role
+    // 'run-order' and a high cardinality, but is excluded from the default
+    // group key so it never fragments groups into singletons.
     const auto = useAutoGroup()
     auto.rawText.value = [
       'Ctrl_WT_001',
@@ -324,11 +322,18 @@ describe('useAutoGroup auto-disable degenerate columns', () => {
     ].join('\n')
     auto.parseInput()
 
-    // 5 originals → 2 base names → 2 schema columns: condition (Ctrl/Treat)
-    // and the constant WT. Neither has cardinality 5.
     const schema = auto.activeSchema.value
     expect(schema).toBeTruthy()
-    expect(schema!.columns.every(c => c.cardinality < 5)).toBe(true)
+    const injection = schema!.columns.find(c => c.role === 'run-order')
+    expect(injection).toBeDefined()
+    expect(injection!.cardinality).toBe(5)
+    expect(injection!.name).toBe('Injection #')
+    // Detected but NOT used for grouping.
+    expect(auto.enabledFields.value.has(injection!.index)).toBe(false)
+    // The Ctrl/Treat condition column IS used for grouping.
+    const condition = schema!.columns.find(c => c.role === 'factor')
+    expect(condition).toBeDefined()
+    expect(auto.enabledFields.value.has(condition!.index)).toBe(true)
   })
 
   it('keeps useful columns (cardinality between 2 and N-1) enabled', () => {
@@ -360,6 +365,32 @@ describe('useAutoGroup auto-disable degenerate columns', () => {
   })
 })
 
+describe('useAutoGroup token-length grouping', () => {
+  it('separates same-type samples with different token-lengths into distinct classes and groups', () => {
+    const auto = useAutoGroup()
+    // All Plasma, but the first pair has 4 tokens and the second pair has 5.
+    auto.rawText.value = [
+      'study_Plasma_5min_001',
+      'study_Plasma_5min_002',
+      'study_Plasma_WT_10min_003',
+      'study_Plasma_WT_10min_004',
+    ].join('\n')
+    auto.parseInput()
+
+    // One class per token-length, each tagged with its field count.
+    const lengths = auto.classes.value.map(c => c.tokenLength).sort()
+    expect(lengths).toEqual([4, 5])
+    expect(auto.classes.value.every(c => c.label.includes('fields'))).toBe(true)
+
+    // Samples of different token-length never land in the same group.
+    expect(auto.groups.value).toHaveLength(2)
+    for (const g of auto.groups.value) {
+      const tokenCounts = new Set(g.samples.map(s => s.split('_').length))
+      expect(tokenCounts.size).toBe(1)
+    }
+  })
+})
+
 describe('useAutoGroup — class-first orchestration', () => {
   it('detects classes after parseInput runs', async () => {
     const ag = useAutoGroup()
@@ -382,9 +413,7 @@ describe('useAutoGroup — class-first orchestration', () => {
       'c_IQC_003',
     ].join('\n')
     ag.parseInput()
-    const firstKey = ag.classes.value[0].subKind
-      ? `${ag.classes.value[0].kind}:${ag.classes.value[0].subKind}`
-      : ag.classes.value[0].kind
+    const firstKey = classKey(ag.classes.value[0])
     ag.activeClassKey.value = firstKey
     expect(ag.activeSchema.value!.classKind).toBe(ag.classes.value[0].kind)
   })
@@ -397,7 +426,8 @@ describe('useAutoGroup — class-first orchestration', () => {
       'exp_IQC_003',
     ].join('\n')
     ag.parseInput()
-    ag.setClassDisposition('iqc', 'group')
+    const iqcKey = classKey(ag.classes.value.find(c => c.kind === 'iqc')!)
+    ag.setClassDisposition(iqcKey, 'group')
     expect(ag.classes.value.find(c => c.kind === 'iqc')!.disposition).toBe('group')
   })
 
@@ -430,3 +460,65 @@ describe('useAutoGroup — class-first orchestration', () => {
     expect(content.split('\n')[0]).toContain('sample_name')
   })
 })
+
+describe('useAutoGroup — regressions from token-length classKey change', () => {
+  const raggedPlasma = [
+    'study_Plasma_5min_001',
+    'study_Plasma_5min_002',
+    'study_Plasma_WT_10min_003',
+    'study_Plasma_WT_10min_004',
+  ].join('\n')
+
+  it('round-trips a fingerprint of length-split schemas without dropping groups', () => {
+    const auto = useAutoGroup()
+    auto.rawText.value = raggedPlasma
+    auto.parseInput()
+    const before = auto.groups.value.length
+    expect(before).toBeGreaterThan(0)
+    auto.loadFingerprint(auto.fingerprint.value)
+    expect(auto.groups.value.length).toBe(before)
+  })
+
+  it('fills prefilled-template schema-column cells for length-split classes', () => {
+    const auto = useAutoGroup()
+    auto.rawText.value = raggedPlasma
+    auto.parseInput()
+    const { content } = auto.composeTemplateForTest({ mode: 'prefilled', format: 'csv' })
+    const lines = content.trim().split('\n')
+    const header = lines[0].split(',')
+    // Columns live between 'class' (index 1) and the trailing 'group','notes'.
+    const colStart = 2
+    const colEnd = header.length - 2
+    const dataRows = lines.slice(1).map(l => l.split(','))
+    // With the old key mismatch every schema-column cell was blank; the fix fills them.
+    const anyFilled = dataRows.some(r =>
+      r.slice(colStart, colEnd).some(c => (c ?? '').trim().length > 0),
+    )
+    expect(anyFilled).toBe(true)
+  })
+
+  it('expands groupTree replicate base names back to original samples', () => {
+    const auto = useAutoGroup()
+    auto.rawText.value = [
+      'study_Ctrl_Rep1',
+      'study_Ctrl_Rep2',
+      'study_Treat_Rep1',
+      'study_Treat_Rep2',
+    ].join('\n')
+    auto.parseInput()
+    const tree = auto.result.value.groupTree ?? []
+    const leaves: string[] = []
+    const walk = (n: { label: string; children?: unknown[] }) => {
+      const kids = n.children as Array<typeof n> | undefined
+      if (kids && kids.length) kids.forEach(walk)
+      else leaves.push(n.label)
+    }
+    tree.forEach(walk)
+    expect(leaves.sort()).toEqual([
+      'study_Ctrl_Rep1',
+      'study_Ctrl_Rep2',
+      'study_Treat_Rep1',
+      'study_Treat_Rep2',
+    ])
+  })
+})

package/src/components/AutoGroupModal.vue

@@ -7,6 +7,7 @@ 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 { useAutoGroup, parseCSV } from '../composables/useAutoGroup'
 import { classKey } from '../composables/autoGroup'
 import { useApi } from '../composables/useApi'
@@ -113,6 +114,12 @@ 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,
@@ -744,6 +751,7 @@ const isFirstStep = computed(() => currentStep.value === 0)
                 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
@@ -765,6 +773,7 @@ const isFirstStep = computed(() => currentStep.value === 0)
                   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">
@@ -922,6 +931,8 @@ const isFirstStep = computed(() => currentStep.value === 0)
                   :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' : '',
@@ -960,12 +971,14 @@ const isFirstStep = computed(() => currentStep.value === 0)
             <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" @click="openPopoverIdx = null">×</button>
+                <button type="button" class="mint-auto-group__popover-close" aria-label="Close" @click="openPopoverIdx = null">×</button>
               </div>
 
               <div class="mint-auto-group__popover-section">
@@ -1044,24 +1057,15 @@ const isFirstStep = computed(() => currentStep.value === 0)
             <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>
+                <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">