@morscherlab/mint-sdk 1.3.11 → 1.4.0-beta.10

package/src/__tests__/components/DataStates.test.ts

@@ -2,8 +2,6 @@ import { describe, expect, it } from 'vitest'
 import { mount } from '@vue/test-utils'
 import AuditTrail from '../../components/AuditTrail.vue'
 import BatchProgressList from '../../components/BatchProgressList.vue'
-import ExperimentTimeline from '../../components/ExperimentTimeline.vue'
-import ReagentList from '../../components/ReagentList.vue'
 import SampleHierarchyTree from '../../components/SampleHierarchyTree.vue'
 import ScheduleCalendar from '../../components/ScheduleCalendar.vue'
 import WellPlate from '../../components/WellPlate.vue'
@@ -31,20 +29,6 @@ const cases = [
     filledProps: { items: [{ id: '1', label: 'One', status: 'pending' }] },
     contentSelector: '.mint-batch-progress__list',
   },
-  {
-    name: 'ExperimentTimeline',
-    component: ExperimentTimeline,
-    emptyProps: { modelValue: [] },
-    filledProps: { modelValue: [{ id: 's1', name: 'Step 1', order: 1, type: 'incubation' }] },
-    contentSelector: '.mint-timeline__step',
-  },
-  {
-    name: 'ReagentList',
-    component: ReagentList,
-    emptyProps: { modelValue: [] },
-    filledProps: { modelValue: [{ id: 'r1', name: 'Water' }] },
-    contentSelector: '.mint-reagent-list__table',
-  },
   {
     name: 'SampleHierarchyTree',
     component: SampleHierarchyTree,
@@ -111,16 +95,16 @@ describe('shared data component states', () => {
   })
 
   describe('opt-in empty states', () => {
-    it('keeps the WellPlate grid when no emptyMessage is given', () => {
+    it('keeps the WellPlate grid when no emptyText is given', () => {
       const wrapper = mount(WellPlate, { props: { wells: {} } })
 
       expect(wrapper.find('.mint-well-plate__scroll').exists()).toBe(true)
       expect(wrapper.find('[data-state]').exists()).toBe(false)
     })
 
-    it('replaces the WellPlate grid once an emptyMessage is given', () => {
+    it('replaces the WellPlate grid once an emptyText is given', () => {
       const wrapper = mount(WellPlate, {
-        props: { wells: {}, emptyMessage: 'No plate loaded' },
+        props: { wells: {}, emptyText: 'No plate loaded' },
       })
 
       expect(wrapper.find('[data-state="empty"]').exists()).toBe(true)
@@ -134,16 +118,16 @@ describe('shared data component states', () => {
       expect(wrapper.find('.mint-well-plate__scroll').exists()).toBe(false)
     })
 
-    it('keeps the ScheduleCalendar grid when no emptyMessage is given', () => {
+    it('keeps the ScheduleCalendar grid when no emptyText is given', () => {
       const wrapper = mount(ScheduleCalendar, { props: { events: [] } })
 
       expect(wrapper.find('.mint-schedule__body').exists()).toBe(true)
       expect(wrapper.find('[data-state]').exists()).toBe(false)
     })
 
-    it('replaces the ScheduleCalendar grid once an emptyMessage is given', () => {
+    it('replaces the ScheduleCalendar grid once an emptyText is given', () => {
       const wrapper = mount(ScheduleCalendar, {
-        props: { events: [], emptyMessage: 'Nothing scheduled' },
+        props: { events: [], emptyText: 'Nothing scheduled' },
       })
 
       expect(wrapper.find('[data-state="empty"]').exists()).toBe(true)

package/src/__tests__/components/{DateTimePicker.test.ts → DatePicker.datetime.test.ts}

@@ -2,12 +2,13 @@ import { mount } from '@vue/test-utils'
 import { nextTick } from 'vue'
 import { describe, expect, it } from 'vitest'
 import CalendarGridPanelInternal from '../../components/internal/CalendarGridPanelInternal.vue'
-import DateTimePicker from '../../components/DateTimePicker.vue'
+import DatePicker from '../../components/DatePicker.vue'
 
-describe('DateTimePicker', () => {
+describe('DatePicker type="datetime"', () => {
   it('uses the shared calendar panel and keeps time selection working', async () => {
-    const wrapper = mount(DateTimePicker, {
+    const wrapper = mount(DatePicker, {
       props: {
+        type: 'datetime',
         modelValue: '2026-04-22T14:30',
       },
     })
@@ -27,9 +28,16 @@ describe('DateTimePicker', () => {
     expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual(['2026-04-22T09:00'])
   })
 
+  it('should show the date as ISO YYYY-MM-DD when a value is set', () => {
+    const wrapper = mount(DatePicker, { props: { type: 'datetime', modelValue: '2026-04-22T14:30' } })
+
+    expect((wrapper.get('input').element as HTMLInputElement).value).toBe('2026-04-22 14:30')
+  })
+
   it('uses shared dropdown state for Escape close behavior', async () => {
-    const wrapper = mount(DateTimePicker, {
+    const wrapper = mount(DatePicker, {
       props: {
+        type: 'datetime',
         modelValue: '2026-04-22T14:30',
       },
       attachTo: document.body,
@@ -47,8 +55,8 @@ describe('DateTimePicker', () => {
   })
 
   it('opens from the keyboard, focuses the calendar, and restores focus on close', async () => {
-    const wrapper = mount(DateTimePicker, {
-      props: { modelValue: '2026-04-22T14:30' },
+    const wrapper = mount(DatePicker, {
+      props: { type: 'datetime', modelValue: '2026-04-22T14:30' },
       attachTo: document.body,
     })
     const input = wrapper.get<HTMLInputElement>('input').element
@@ -71,7 +79,7 @@ describe('DateTimePicker', () => {
   })
 
   it('marks the panel as a non-modal dialog', async () => {
-    const wrapper = mount(DateTimePicker, { attachTo: document.body })
+    const wrapper = mount(DatePicker, { props: { type: 'datetime' }, attachTo: document.body })
 
     await wrapper.get('input').trigger('click')
 

package/src/__tests__/components/DatePicker.test.ts

@@ -43,6 +43,27 @@ describe('DatePicker', () => {
     wrapper.unmount()
   })
 
+  it('should show the bound date as ISO YYYY-MM-DD when a value is set', () => {
+    const wrapper = mount(DatePicker, { props: { modelValue: '2026-02-10' } })
+
+    expect((wrapper.get('input').element as HTMLInputElement).value).toBe('2026-02-10')
+  })
+
+  it('should clear the value from the field button when clearable', async () => {
+    const wrapper = mount(DatePicker, { props: { modelValue: '2026-02-10' } })
+
+    await wrapper.get('[aria-label="Clear date"]').trigger('click')
+
+    expect(wrapper.emitted('update:modelValue')).toEqual([[undefined]])
+    expect(dropdown()).toBeNull()
+  })
+
+  it('should hide the clear button when the field is disabled', () => {
+    const wrapper = mount(DatePicker, { props: { modelValue: '2026-02-10', disabled: true } })
+
+    expect(wrapper.find('[aria-label="Clear date"]').exists()).toBe(false)
+  })
+
   it('opens from the input with Enter, Space and ArrowDown', async () => {
     const wrapper = mount(DatePicker, { attachTo: document.body })
 

package/src/__tests__/components/{TimePicker.test.ts → DatePicker.time.test.ts}

@@ -1,10 +1,10 @@
 import { mount } from '@vue/test-utils'
 import { describe, expect, it } from 'vitest'
-import TimePicker from '../../components/TimePicker.vue'
+import DatePicker from '../../components/DatePicker.vue'
 
-describe('TimePicker', () => {
+describe('DatePicker type="time"', () => {
   it('opens from keyboard disclosure shortcuts', async () => {
-    const wrapper = mount(TimePicker)
+    const wrapper = mount(DatePicker, { props: { type: 'time' } })
 
     await wrapper.get('.mint-time-picker').trigger('keydown', { key: 'ArrowDown' })
 
@@ -12,8 +12,9 @@ describe('TimePicker', () => {
   })
 
   it('uses shared dropdown state for Escape and outside-click close behavior', async () => {
-    const wrapper = mount(TimePicker, {
+    const wrapper = mount(DatePicker, {
       props: {
+        type: 'time',
         modelValue: '14:30',
       },
       attachTo: document.body,
@@ -37,8 +38,8 @@ describe('TimePicker', () => {
   })
 
   it('publishes the highlighted slot through aria-activedescendant', async () => {
-    const wrapper = mount(TimePicker, {
-      props: { modelValue: '14:30' },
+    const wrapper = mount(DatePicker, {
+      props: { type: 'time', modelValue: '14:30' },
       attachTo: document.body,
     })
 
@@ -59,8 +60,8 @@ describe('TimePicker', () => {
   })
 
   it('jumps to the first and last selectable slot with Home and End', async () => {
-    const wrapper = mount(TimePicker, {
-      props: { min: '09:00', max: '10:00', step: 30 },
+    const wrapper = mount(DatePicker, {
+      props: { type: 'time', min: '09:00', max: '10:00', step: 30 },
       attachTo: document.body,
     })
 
@@ -81,7 +82,7 @@ describe('TimePicker', () => {
   })
 
   it('returns focus to the input when Escape closes the list', async () => {
-    const wrapper = mount(TimePicker, { attachTo: document.body })
+    const wrapper = mount(DatePicker, { props: { type: 'time' }, attachTo: document.body })
     const input = wrapper.get<HTMLInputElement>('input').element
 
     await wrapper.get('.mint-time-picker').trigger('keydown', { key: 'ArrowDown' })
@@ -98,7 +99,7 @@ describe('TimePicker', () => {
   })
 
   it('should render the dropdown on the shared popover surface when opened', async () => {
-    const wrapper = mount(TimePicker)
+    const wrapper = mount(DatePicker, { props: { type: 'time' } })
 
     await wrapper.get('input').trigger('click')
 
@@ -106,23 +107,23 @@ describe('TimePicker', () => {
   })
 
   it('should mark the selected slot as a selected menu item when opened', async () => {
-    const wrapper = mount(TimePicker, { props: { modelValue: '00:15' } })
+    const wrapper = mount(DatePicker, { props: { type: 'time', modelValue: '00:15' } })
 
     await wrapper.get('input').trigger('click')
 
     expect(wrapper.findAll('.mint-time-picker__slot')[1].classes()).toContain('mint-menu-item--selected')
   })
 
-  it('should reserve the check column on unselected slots when opened', async () => {
-    const wrapper = mount(TimePicker, { props: { modelValue: '00:15' } })
+  it('should mark the selected slot without a check icon when opened', async () => {
+    const wrapper = mount(DatePicker, { props: { type: 'time', modelValue: '00:15' } })
 
     await wrapper.get('input').trigger('click')
 
-    expect(wrapper.findAll('.mint-time-picker__slot')[0].find('.mint-menu-item__check').exists()).toBe(true)
+    expect(wrapper.findAll('.mint-time-picker__slot')[1].find('.mint-menu-item__check').exists()).toBe(false)
   })
 
   it('should mark a slot unavailable when disabledSlots returns a reason', async () => {
-    const wrapper = mount(TimePicker, { props: { disabledSlots: (time: string) => time === '00:15' && 'Booked · HPLC-02' } })
+    const wrapper = mount(DatePicker, { props: { type: 'time', disabledSlots: (time: string) => time === '00:15' && 'Booked · HPLC-02' } })
 
     await wrapper.get('input').trigger('click')
 
@@ -130,7 +131,7 @@ describe('TimePicker', () => {
   })
 
   it('should render the reason inline when a slot is unavailable', async () => {
-    const wrapper = mount(TimePicker, { props: { disabledSlots: (time: string) => time === '00:15' && 'Booked · HPLC-02' } })
+    const wrapper = mount(DatePicker, { props: { type: 'time', disabledSlots: (time: string) => time === '00:15' && 'Booked · HPLC-02' } })
 
     await wrapper.get('input').trigger('click')
 
@@ -138,7 +139,7 @@ describe('TimePicker', () => {
   })
 
   it('should not render a reason when disabledSlots returns true', async () => {
-    const wrapper = mount(TimePicker, { props: { disabledSlots: (time: string) => time === '00:15' } })
+    const wrapper = mount(DatePicker, { props: { type: 'time', disabledSlots: (time: string) => time === '00:15' } })
 
     await wrapper.get('input').trigger('click')
 
@@ -146,7 +147,7 @@ describe('TimePicker', () => {
   })
 
   it('should not emit a value when an unavailable slot is clicked', async () => {
-    const wrapper = mount(TimePicker, { props: { disabledSlots: (time: string) => time === '00:15' && 'Maintenance' } })
+    const wrapper = mount(DatePicker, { props: { type: 'time', disabledSlots: (time: string) => time === '00:15' && 'Maintenance' } })
 
     await wrapper.get('input').trigger('click')
     await wrapper.findAll('.mint-time-picker__slot')[1].trigger('click')
@@ -155,7 +156,7 @@ describe('TimePicker', () => {
   })
 
   it('should skip unavailable slots when moving the highlight with ArrowDown', async () => {
-    const wrapper = mount(TimePicker, { props: { disabledSlots: (time: string) => time === '00:15' && 'Maintenance' } })
+    const wrapper = mount(DatePicker, { props: { type: 'time', disabledSlots: (time: string) => time === '00:15' && 'Maintenance' } })
 
     await wrapper.get('input').trigger('click')
     await wrapper.get('.mint-time-picker').trigger('keydown', { key: 'ArrowDown' })

package/src/__tests__/components/DoseCalculator.test.ts

@@ -2,9 +2,14 @@ import { mount } from '@vue/test-utils'
 import { describe, expect, it } from 'vitest'
 import { nextTick } from 'vue'
 import BaseButton from '../../components/BaseButton.vue'
-import BaseInput from '../../components/BaseInput.vue'
+import NumberInput from '../../components/NumberInput.vue'
 import DoseCalculator from '../../components/DoseCalculator.vue'
 
+/** The serial row's own number fields; the volume fields are NumberInputs with `units`. */
+function serialInputs(wrapper: Awaited<ReturnType<typeof mountSerial>>) {
+  return wrapper.findAllComponents(NumberInput).filter((i) => !i.props('units'))
+}
+
 async function mountSerial(props: Record<string, unknown> = {}) {
   const wrapper = mount(DoseCalculator, { props: { mode: 'serial', ...props } })
   await nextTick()
@@ -12,22 +17,22 @@ async function mountSerial(props: Record<string, unknown> = {}) {
 }
 
 describe('DoseCalculator (6c)', () => {
-  it('should enter the dilution factor in a BaseInput with a × suffix', async () => {
+  it('should enter the dilution factor in a NumberInput with a × unit', async () => {
     const wrapper = await mountSerial()
 
-    expect(wrapper.findAll('.mint-input-group__suffix').map((s) => s.text())).toContain('×')
+    expect(serialInputs(wrapper).map((i) => i.props('unit'))).toContain('×')
   })
 
-  it('should enter the number of dilutions in a BaseInput', async () => {
+  it('should enter the number of dilutions in a NumberInput', async () => {
     const wrapper = await mountSerial()
 
-    expect(wrapper.findAllComponents(BaseInput).map((i) => i.props('modelValue'))).toContain(8)
+    expect(serialInputs(wrapper).map((i) => i.props('modelValue'))).toContain(8)
   })
 
   it('should recalculate when the dilution factor changes', async () => {
     const wrapper = await mountSerial()
 
-    wrapper.findAllComponents(BaseInput).find((i) => i.props('modelValue') === 3)!.vm.$emit('update:modelValue', 2)
+    serialInputs(wrapper).find((i) => i.props('modelValue') === 3)!.vm.$emit('update:modelValue', 2)
     await nextTick()
 
     expect(wrapper.emitted('calculate')?.at(-1)?.[0]).toMatchObject({ steps: expect.any(Array) })
@@ -42,6 +47,6 @@ describe('DoseCalculator (6c)', () => {
   it('should size the serial row fields to the 32px control height', async () => {
     const wrapper = await mountSerial()
 
-    expect(wrapper.findAllComponents(BaseInput).map((i) => i.props('size'))).toEqual(['sm', 'sm'])
+    expect(serialInputs(wrapper).map((i) => i.props('size'))).toEqual(['sm', 'sm'])
   })
 })

package/src/__tests__/components/DoseCalculatorVolumeField.test.ts

@@ -2,8 +2,8 @@ import { mount } from '@vue/test-utils'
 import { describe, expect, it } from 'vitest'
 import DoseCalculatorVolumeField from '../../components/DoseCalculatorVolumeField.vue'
 import FormField from '../../components/FormField.vue'
-import UnitInput from '../../components/UnitInput.vue'
-import type { VolumeUnit } from '../../composables/useDoseCalculator'
+import NumberInput from '../../components/NumberInput.vue'
+import type { VolumeUnit } from '../../utils/dose'
 
 const units: VolumeUnit[] = ['µL', 'mL', 'L']
 
@@ -23,7 +23,7 @@ describe('DoseCalculatorVolumeField', () => {
   it('should emit unit updates while preserving the current value', () => {
     const wrapper = mountField({ value: 100, unit: 'µL' })
 
-    wrapper.findComponent(UnitInput).vm.$emit('update:unit', 'mL')
+    wrapper.findComponent(NumberInput).vm.$emit('update:unit', 'mL')
 
     expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual([{ value: 100, unit: 'mL' }])
   })
@@ -36,10 +36,10 @@ describe('DoseCalculatorVolumeField', () => {
     expect(wrapper.emitted('update:modelValue')).toBeUndefined()
   })
 
-  it('should offer every volume unit in the UnitInput segment (6c)', () => {
+  it('should offer every volume unit in the NumberInput unit segment (6c)', () => {
     const wrapper = mountField()
 
-    expect(wrapper.findComponent(UnitInput).props('units').map((u: { value: string }) => u.value)).toEqual(units)
+    expect(wrapper.findComponent(NumberInput).props('units')!.map((u: { value: string }) => u.value)).toEqual(units)
   })
 
   it('should lay the field out as a FormField row (6c)', () => {
@@ -51,6 +51,6 @@ describe('DoseCalculatorVolumeField', () => {
   it('should size the volume field to the 32px control height', () => {
     const wrapper = mountField()
 
-    expect(wrapper.findComponent(UnitInput).props('size')).toBe('sm')
+    expect(wrapper.findComponent(NumberInput).props('size')).toBe('sm')
   })
 })

package/src/__tests__/components/EmptyState.test.ts

@@ -13,7 +13,7 @@ describe('EmptyState', () => {
 
     const button = wrapper.find('.mint-button')
     expect(button.exists()).toBe(true)
-    expect(button.classes()).toContain('mint-button--secondary')
+    expect(button.classes()).toEqual(expect.arrayContaining(['mint-button--secondary', 'mint-button--sm']))
     expect(button.text()).toBe('Create experiment')
 
     await button.trigger('click')

package/src/__tests__/components/ExperimentPopover.test.ts

@@ -1,5 +1,5 @@
-import { mount } from '@vue/test-utils'
-import { afterEach, describe, expect, it } from 'vitest'
+import { flushPromises, mount } from '@vue/test-utils'
+import { afterEach, describe, expect, it, vi } from 'vitest'
 import ExperimentPopover from '../../components/ExperimentPopover.vue'
 
 function mountPopover(props = {}) {
@@ -16,15 +16,25 @@ function mountPopover(props = {}) {
   })
 }
 
+function findOption(wrapper: ReturnType<typeof mountPopover>, label: string) {
+  return wrapper.findAll('.mint-experiment-popover__option').find(option => option.text().includes(label))
+}
+
 describe('ExperimentPopover', () => {
   afterEach(() => {
     document.body.innerHTML = ''
+    vi.useRealTimers()
+    vi.restoreAllMocks()
   })
 
   it('requests experiment selection on the first click when no experiment is selected', async () => {
     const wrapper = mountPopover()
 
-    await wrapper.find('.mint-experiment-popover__trigger').trigger('click')
+    const trigger = wrapper.find('.mint-experiment-popover__trigger')
+    expect(trigger.classes()).toContain('mint-experiment-popover__trigger--empty')
+    expect(trigger.text()).toContain('Attach experiment')
+
+    await trigger.trigger('click')
 
     expect(wrapper.emitted('select')).toHaveLength(1)
     expect(wrapper.find('.mint-experiment-popover__panel').exists()).toBe(false)
@@ -51,15 +61,18 @@ describe('ExperimentPopover', () => {
     wrapper.unmount()
   })
 
-  it('prefers the experiment name in the trigger when both name and code are available', () => {
+  it('shows the code badge and the truncated name in the trigger, with both in its title', () => {
     const wrapper = mountPopover({
       experimentName: 'Dose response run',
       experimentCode: 'EXP-001',
+      maxNameWidth: 120,
     })
 
     const trigger = wrapper.find('.mint-experiment-popover__trigger')
-    expect(trigger.text()).toContain('Dose response run')
-    expect(trigger.text()).not.toContain('EXP-001')
+    expect(trigger.find('.mint-exp-code').text()).toBe('EXP-001')
+    expect(trigger.find('.mint-experiment-popover__trigger-text').text()).toBe('Dose response run')
+    expect(trigger.find('.mint-experiment-popover__trigger-text').attributes('style')).toContain('max-width: 120px')
+    expect(trigger.attributes('title')).toBe('EXP-001 · Dose response run')
 
     wrapper.unmount()
   })
@@ -92,31 +105,48 @@ describe('ExperimentPopover', () => {
     wrapper.unmount()
   })
 
-  it('shows a placeholder instead of "No experiment" while the record resolves', () => {
+  it.each([
+    { panelRight: 900, alignedEnd: false },
+    { panelRight: 1100, alignedEnd: true },
+  ])('should align the panel to the right edge only when it would overflow the viewport (right $panelRight)', async ({ panelRight, alignedEnd }) => {
+    vi.spyOn(document.documentElement, 'clientWidth', 'get').mockReturnValue(1024)
+    vi.spyOn(HTMLElement.prototype, 'getBoundingClientRect').mockReturnValue({ right: panelRight } as DOMRect)
+    const wrapper = mountPopover({ experimentName: 'Dose response run', experimentCode: 'EXP-001' })
+
+    await wrapper.find('.mint-experiment-popover__trigger').trigger('click')
+    await flushPromises()
+
+    expect(wrapper.get('.mint-experiment-popover__panel').classes('mint-experiment-popover__panel--end')).toBe(alignedEnd)
+    wrapper.unmount()
+  })
+
+  it('shows a placeholder instead of the empty label while the record resolves', () => {
     const wrapper = mountPopover({ isResolving: true, showDetach: true })
 
     const trigger = wrapper.find('.mint-experiment-popover__trigger')
     expect(trigger.find('.mint-experiment-popover__trigger-skeleton').exists()).toBe(true)
-    expect(trigger.text()).not.toContain('No experiment')
+    expect(trigger.text()).not.toContain('Attach experiment')
     expect(trigger.attributes('aria-busy')).toBe('true')
 
     wrapper.unmount()
   })
 
-  it('never renders the bound id as a stand-in name while resolving', () => {
-    const wrapper = mountPopover({ isResolving: true, showDetach: true })
+  it('never renders the bound id as a stand-in name while resolving', async () => {
+    const wrapper = mountPopover({ isResolving: true, showDetach: true, experimentId: 12 })
+
+    await wrapper.find('.mint-experiment-popover__trigger').trigger('click')
 
     expect(wrapper.text()).not.toMatch(/\d/)
 
     wrapper.unmount()
   })
 
-  it('shows the resolution failure instead of "No experiment"', () => {
+  it('shows the resolution failure instead of the empty label', () => {
     const wrapper = mountPopover({ error: 'Experiment not found', showDetach: true })
 
     const trigger = wrapper.find('.mint-experiment-popover__trigger')
     expect(trigger.text()).toContain('Experiment unavailable')
-    expect(trigger.text()).not.toContain('No experiment')
+    expect(trigger.text()).not.toContain('Attach experiment')
     expect(trigger.classes()).toContain('mint-experiment-popover__trigger--error')
 
     wrapper.unmount()
@@ -130,7 +160,7 @@ describe('ExperimentPopover', () => {
     const panel = wrapper.find('.mint-experiment-popover__panel')
     expect(panel.text()).toContain('Experiment not found')
 
-    await wrapper.find('.mint-experiment-popover__detach-btn').trigger('click')
+    await findOption(wrapper, 'Detach')!.trigger('click')
     expect(wrapper.emitted('detach')).toHaveLength(1)
 
     wrapper.unmount()
@@ -143,7 +173,7 @@ describe('ExperimentPopover', () => {
 
     const panel = wrapper.find('.mint-experiment-popover__panel')
     expect(panel.findAll('.mint-experiment-popover__skeleton-line').length).toBeGreaterThan(0)
-    expect(panel.find('.mint-experiment-popover__select-btn').exists()).toBe(false)
+    expect(panel.find('.mint-experiment-popover__meta').exists()).toBe(false)
 
     wrapper.unmount()
   })
@@ -151,7 +181,8 @@ describe('ExperimentPopover', () => {
   it('hides the inline save action while no resolved experiment exists', () => {
     const wrapper = mountPopover({ isResolving: true, showSave: true })
 
-    expect(wrapper.find('.mint-experiment-popover__save-trigger').exists()).toBe(false)
+    expect(wrapper.find('.mint-experiment-popover__save').exists()).toBe(false)
+    expect(wrapper.find('.mint-experiment-popover--save').exists()).toBe(false)
 
     wrapper.unmount()
   })
@@ -163,11 +194,89 @@ describe('ExperimentPopover', () => {
     })
 
     await wrapper.find('.mint-experiment-popover__trigger').trigger('click')
-    await wrapper.find('.mint-experiment-popover__change-btn').trigger('click')
+    await findOption(wrapper, 'Change experiment')!.trigger('click')
 
     expect(wrapper.emitted('select')).toHaveLength(1)
     expect(wrapper.find('.mint-experiment-popover__panel').exists()).toBe(false)
 
     wrapper.unmount()
   })
+
+  it('lists project, status, owner and relative update time in the panel', async () => {
+    vi.useFakeTimers({ toFake: ['Date'] })
+    vi.setSystemTime(new Date('2026-10-28T12:00:00Z'))
+    const wrapper = mountPopover({
+      experimentName: 'Dose response run',
+      experimentCode: 'EXP-001',
+      experimentStatus: 'ongoing',
+      experimentProject: 'Hypoxia atlas',
+      experimentOwner: 'J. Doe',
+      experimentUpdatedAt: '2026-10-28T10:00:00Z',
+    })
+
+    await wrapper.find('.mint-experiment-popover__trigger').trigger('click')
+
+    const rows = wrapper.findAll('.mint-experiment-popover__meta dt').map(dt => [dt.text(), dt.element.nextElementSibling?.textContent])
+    expect(rows).toEqual([
+      ['Project', 'Hypoxia atlas'],
+      ['Status', 'Ongoing'],
+      ['Owner', 'J. Doe'],
+      ['Updated', '2 hours ago'],
+    ])
+    expect(wrapper.find('.mint-experiment-popover__panel button:not(.mint-experiment-popover__option)').exists()).toBe(false)
+    expect(findOption(wrapper, 'Detach')).toBeUndefined()
+
+    wrapper.unmount()
+  })
+
+  it.each([
+    { experimentId: 12, href: '/experiments/12' },
+    { experimentId: null, href: undefined },
+  ])('links "Open in MINT" to the experiment in a new tab for id $experimentId', async ({ experimentId, href }) => {
+    const wrapper = mountPopover({ experimentName: 'Dose response run', experimentId })
+
+    await wrapper.find('.mint-experiment-popover__trigger').trigger('click')
+
+    const link = findOption(wrapper, 'Open in MINT')
+    expect(link?.attributes('href')).toBe(href)
+    if (link) {
+      expect(link.attributes('target')).toBe('_blank')
+      expect(link.attributes('rel')).toBe('noopener')
+    }
+
+    wrapper.unmount()
+  })
+
+  it('saves at once from the joined Save button when confirmation is off', async () => {
+    const wrapper = mountPopover({
+      experimentName: 'Dose response run',
+      showSave: true,
+      confirmSave: false,
+      saveLabel: 'Push',
+    })
+
+    expect(wrapper.find('.mint-experiment-popover--save').exists()).toBe(true)
+    const save = wrapper.find('.mint-experiment-popover__save')
+    expect(save.text()).toBe('Push')
+
+    await save.trigger('click')
+
+    expect(wrapper.emitted('save')).toHaveLength(1)
+
+    wrapper.unmount()
+  })
+
+  it.each([
+    { saveLoading: false, dirty: true, label: 'Save', disabled: false, dot: true },
+    { saveLoading: true, dirty: true, label: 'Saving…', disabled: true, dot: false },
+  ])('renders Save as "$label" with the dirty dot $dot', ({ saveLoading, dirty, label, disabled, dot }) => {
+    const wrapper = mountPopover({ experimentName: 'Dose response run', showSave: true, saveLoading, dirty })
+
+    const save = wrapper.find('.mint-experiment-popover__save')
+    expect(save.text()).toBe(label)
+    expect(save.attributes('disabled') !== undefined).toBe(disabled)
+    expect(save.find('.mint-experiment-popover__dirty').exists()).toBe(dot)
+
+    wrapper.unmount()
+  })
 })