@morscherlab/mint-sdk 1.4.0-beta.7 → 1.4.0-beta.9

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

@@ -196,4 +196,39 @@ describe('AppTopBarPillNavInternal', () => {
 
     expect(wrapper.find('.mint-pill-nav__item').text()).toBe('Records')
   })
+  const SIX = ['One', 'Two', 'Three', 'Four', 'Five', { id: 'grp', label: 'Group', children: ['Six'] }]
+
+  it('should fold the items after the fourth into a More dropdown', async () => {
+    const wrapper = mount(AppTopBarPillNavInternal, { props: { currentItemId: 'One', items: SIX } })
+
+    expect(wrapper.findAll('.mint-pill-nav__item').map(item => item.text())).toEqual([
+      'One', 'Two', 'Three', 'Four', 'More',
+    ])
+    await wrapper.findAll('.mint-pill-nav__item')[4].trigger('click')
+    expect(wrapper.findAll('.mint-pill-nav__dropdown-label').map(option => option.text())).toEqual(['Five', 'Six'])
+  })
+
+  it('should emit the original item or group when a folded entry is chosen', async () => {
+    const wrapper = mount(AppTopBarPillNavInternal, { props: { currentItemId: 'One', items: SIX } })
+
+    await wrapper.findAll('.mint-pill-nav__item')[4].trigger('click')
+    await wrapper.findAll('.mint-pill-nav__dropdown-item')[0].trigger('click')
+    await wrapper.findAll('.mint-pill-nav__item')[4].trigger('click')
+    await wrapper.findAll('.mint-pill-nav__dropdown-item')[1].trigger('click')
+
+    expect(wrapper.emitted('select')).toEqual([[{ id: 'Five', label: 'Five' }]])
+    expect(wrapper.emitted('option-select')?.[0]).toEqual([
+      { id: 'Six', label: 'Six' },
+      { id: 'grp', label: 'Group', children: [{ id: 'Six', label: 'Six' }] },
+    ])
+  })
+
+  it('should label the More pill with a folded item when that item is current', () => {
+    const wrapper = mount(AppTopBarPillNavInternal, { props: { currentItemId: 'Five', items: SIX } })
+
+    const more = wrapper.findAll('.mint-pill-nav__item')[4]
+    expect(more.text()).toBe('Five')
+    expect(more.find('.mint-pill-nav__chevron').exists()).toBe(true)
+    expect(more.classes()).toContain('mint-pill-nav__item--active')
+  })
 })

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

@@ -565,4 +565,82 @@ describe('ArtifactSaveDialog', () => {
       expect(wrapper.find('.mint-artifact-save-dialog__error').exists()).toBe(true)
     })
   })
+
+  // -------------------------------------------------------------------------
+  // Save mode (replace vs new) and experiment strip
+  // -------------------------------------------------------------------------
+
+  describe('save mode', () => {
+    it.each([
+      [null, false],
+      [makeDetail(), true],
+    ])('should offer the replace/new cards only when an artifact can be replaced (%#)', (existingArtifact, shown) => {
+      const { wrapper } = mountDialog({ result: { x: 1 }, existingArtifact })
+
+      expect(wrapper.find('.mint-artifact-save-dialog__modes').exists()).toBe(shown)
+    })
+
+    it('should send a create payload when save as new is picked over an existing artifact', async () => {
+      const { wrapper, saveHandler } = mountDialog({ mode: 'json', result: { x: 1 }, existingArtifact: makeDetail() })
+      expect(wrapper.get('.mint-artifact-save-dialog__submit').text()).toBe('Replace result')
+
+      await wrapper.findAll('.mint-artifact-save-dialog__mode')[1].trigger('click')
+      expect(wrapper.find('.mint-artifact-save-dialog__name').exists()).toBe(true)
+      expect(wrapper.get('.mint-artifact-save-dialog__submit').text()).toBe('Save result')
+      await submit(wrapper)
+
+      expect(saveHandler.mock.calls[0][0]).toMatchObject({ kind: 'json', mode: 'create', artifactKey: 'default' })
+    })
+
+    // An explicit "new result" must never upsert over an existing JSON artifact.
+    it.each(['fit', 'other'])('should block a json save as new when the key %s exists', async (key) => {
+      const { wrapper, saveHandler } = mountDialog({
+        mode: 'json',
+        result: { x: 1 },
+        existingArtifact: makeDetail(),
+        existingArtifactKeys: ['other'],
+      })
+
+      await wrapper.findAll('.mint-artifact-save-dialog__mode')[1].trigger('click')
+      await wrapper.get('.mint-artifact-save-dialog__key input').setValue(key)
+      await submit(wrapper)
+
+      expect(saveHandler).not.toHaveBeenCalled()
+      expect(wrapper.get('.mint-artifact-save-dialog__submit').attributes('disabled')).toBeDefined()
+      expect(wrapper.get('.mint-artifact-save-dialog__key').text()).toContain('already used')
+    })
+
+    it('should show the experiment strip with code and name when the experiment is known', () => {
+      const { wrapper } = mountDialog({
+        experiment: { id: 42, experiment_code: 'EXP-042', name: 'Dose response' },
+      })
+
+      expect(wrapper.get('.mint-artifact-save-dialog__experiment').text()).toContain('EXP-042')
+      expect(wrapper.get('.mint-artifact-save-dialog__experiment-name').text()).toBe('Dose response')
+    })
+
+    it.each([
+      [false, false],
+      [true, true],
+    ])('should show the Change link only when a change-experiment listener is bound (%s)', (bound, shown) => {
+      const listener = vi.fn()
+      const { wrapper } = mountDialog({
+        experiment: { id: 42, name: 'Dose response' },
+        ...(bound ? { onChangeExperiment: listener } : {}),
+      })
+
+      expect(wrapper.find('.mint-artifact-save-dialog__change').exists()).toBe(shown)
+    })
+
+    it('should emit change-experiment when Change is clicked', async () => {
+      const { wrapper } = mountDialog({
+        experiment: { id: 42, name: 'Dose response' },
+        onChangeExperiment: vi.fn(),
+      })
+
+      await wrapper.get('.mint-artifact-save-dialog__change').trigger('click')
+
+      expect(wrapper.emitted('change-experiment')).toHaveLength(1)
+    })
+  })
 })

package/src/__tests__/components/BaseSelect.multiple.test.ts

@@ -8,56 +8,111 @@ const options = [
   { value: 'c', label: 'C' },
 ]
 
+function mountMultiple(props: Record<string, unknown> = {}) {
+  return mount(BaseSelect, { props: { multiple: true, modelValue: ['a'], options, ...props } })
+}
+
+async function openPanel(wrapper: ReturnType<typeof mountMultiple>) {
+  await wrapper.find('.mint-multi-select__field').trigger('click')
+  return wrapper
+}
+
 describe('BaseSelect multiple', () => {
-  it('should render the chip list when multiple is a bare template attribute', () => {
+  it('should render the chip field when multiple is a bare template attribute', () => {
     // A compiled `<BaseSelect multiple>` passes '' because `multiple` has no runtime Boolean type.
     const wrapper = mount(BaseSelect, { props: { multiple: '' as unknown as true, modelValue: [], options } })
 
-    expect(wrapper.find('.mint-multi-select').exists()).toBe(true)
+    expect(wrapper.find('.mint-multi-select__field').exists()).toBe(true)
   })
 
   it('accepts string and number shorthand options', async () => {
-    const wrapper = mount(BaseSelect, {
-      props: {
-        multiple: true,
-        modelValue: ['glucose', 2],
-        options: ['glucose', 2, { value: 'dox', label: 'Doxorubicin' }],
-      },
-    })
+    const wrapper = await openPanel(mountMultiple({
+      modelValue: ['glucose', 2],
+      options: ['glucose', 2, { value: 'dox', label: 'Doxorubicin' }],
+    }))
 
-    expect(wrapper.findAll('button').map(button => button.text())).toEqual([
-      'glucose',
-      '2',
-      'Doxorubicin',
-    ])
-    expect(wrapper.find('.mint-multi-select__summary').text()).toBe('glucose, 2')
+    expect(wrapper.findAll('.mint-multi-select__chip').map(chip => chip.text())).toEqual(['glucose', '2'])
+    expect(wrapper.findAll('[role="option"]').map(row => row.text())).toEqual(['glucose', '2', 'Doxorubicin'])
 
-    await wrapper.findAll('button')[2].trigger('click')
+    await wrapper.findAll('[role="option"]')[2].trigger('click')
 
-    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([
-      ['glucose', 2, 'dox'],
-    ])
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([['glucose', 2, 'dox']])
   })
 
   it('uses the shared selection limit for max', async () => {
-    const wrapper = mount(BaseSelect, {
-      props: {
-        multiple: true,
-        modelValue: ['a'],
-        options,
-        max: 1,
-      },
-    })
+    const wrapper = await openPanel(mountMultiple({ max: 1 }))
 
-    await wrapper.findAll('button')[1].trigger('click')
+    await wrapper.findAll('[role="option"]')[1].trigger('click')
 
     expect(wrapper.emitted('update:modelValue')).toBeUndefined()
-    expect(wrapper.findAll('button')[1].attributes('disabled')).toBeDefined()
+    expect(wrapper.findAll('[role="option"]')[1].attributes('aria-disabled')).toBe('true')
+  })
+
+  it('should reserve the check box on every row when only one is selected', async () => {
+    const wrapper = await openPanel(mountMultiple())
+
+    expect(wrapper.findAll('.mint-multi-select__check')).toHaveLength(3)
+    expect(wrapper.findAll('.mint-multi-select__check--on')).toHaveLength(1)
+  })
+
+  it.each(['Enter', ' ', 'ArrowDown'])('should open the listbox when %j is pressed on the field', async (key) => {
+    const wrapper = mountMultiple()
+
+    await wrapper.find('.mint-multi-select__field').trigger('keydown', { key })
+
+    expect(wrapper.find('[role="listbox"]').exists()).toBe(true)
+    expect(wrapper.find('.mint-multi-select__field').attributes('aria-expanded')).toBe('true')
+  })
+
+  it('should close the listbox when the field is clicked while it is open', async () => {
+    const wrapper = await openPanel(mountMultiple())
+
+    await wrapper.find('.mint-multi-select__field').trigger('click')
+
+    expect(wrapper.find('[role="listbox"]').exists()).toBe(false)
+    expect(wrapper.find('.mint-multi-select__field').attributes('aria-expanded')).toBe('false')
+  })
+
+  it('should close the listbox when Escape is pressed in the filter', async () => {
+    const wrapper = await openPanel(mountMultiple())
+
+    await wrapper.find('input[type="search"]').trigger('keydown', { key: 'Escape' })
+
+    expect(wrapper.find('[role="listbox"]').exists()).toBe(false)
+  })
+
+  it('should remove the last chip when Backspace is pressed in an empty filter', async () => {
+    const wrapper = await openPanel(mountMultiple({ modelValue: ['a', 'b'] }))
+
+    await wrapper.find('input[type="search"]').trigger('keydown', { key: 'Backspace' })
+
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([['a']])
+  })
+
+  it('should remove a chip without opening the listbox when its remove button is clicked', async () => {
+    const wrapper = mountMultiple({ modelValue: ['a', 'b'] })
+
+    await wrapper.find('button[aria-label="Remove A"]').trigger('click')
+
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([['b']])
+    expect(wrapper.find('[role="listbox"]').exists()).toBe(false)
+  })
+
+  it('should narrow the rows and toggle the active row with Enter when the filter has text', async () => {
+    const wrapper = await openPanel(mountMultiple())
+    const filter = wrapper.find('input[type="search"]')
+
+    await filter.setValue('c')
+    await filter.trigger('keydown', { key: 'Enter' })
+
+    expect(wrapper.findAll('[role="option"]').map(row => row.text())).toEqual(['C'])
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([['a', 'c']])
   })
 
-  it('should reserve the check slot on every chip when only one is selected', () => {
-    const wrapper = mount(BaseSelect, { props: { multiple: true, modelValue: ['a'], options } })
+  it('should neither open nor offer chip removal when disabled', async () => {
+    const wrapper = await openPanel(mountMultiple({ disabled: true }))
 
-    expect(wrapper.findAll('.mint-multi-select__chip-check')).toHaveLength(3)
+    expect(wrapper.find('[role="listbox"]').exists()).toBe(false)
+    expect(wrapper.find('.mint-multi-select__chip-remove').exists()).toBe(false)
   })
 })

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

@@ -58,7 +58,8 @@ describe('BaseSelect', () => {
   it.each([
     ['aria-labelledby', 'native', {}, 'select'],
     ['aria-describedby', 'searchable', { searchable: true }, '.mint-searchable-select__trigger'],
-    ['aria-describedby', 'multiple', { multiple: true, modelValue: [] as string[] }, null],
+    ['aria-describedby', 'multiple', { multiple: true, modelValue: [] as string[] }, '.mint-multi-select__field'],
+    ['aria-labelledby', 'multiple', { multiple: true, modelValue: [] as string[] }, '.mint-multi-select__field'],
   ] as const)('should forward %s when the select is %s', (attr, _, extra, selector) => {
     const wrapper = mount(BaseSelect, { props: { options: ['linear'], ...extra }, attrs: { [attr]: 'hint' } })
     const target = selector ? wrapper.get(selector) : wrapper

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

@@ -57,4 +57,20 @@ describe('BatchProgressList', () => {
     await wrapper.get('.mint-batch-progress__completed-toggle').trigger('click')
     expect(wrapper.findAll('.mint-batch-progress__item')).toHaveLength(3)
   })
+
+  it.each([
+    ['completed', undefined, '100%', '100%'],
+    ['processing', 40, '40%', '40%'],
+    ['pending', undefined, 'Queued', '0%'],
+    ['error', undefined, 'Failed', '0%'],
+    ['skipped', undefined, 'Skipped', '0%'],
+  ] as const)('should show %s rows with their status text and bar width', async (status, progress, text, width) => {
+    const wrapper = mount(BatchProgressList, {
+      props: { items: [{ id: 'x', label: 'X', status, progress }], autoScroll: false },
+    })
+    if (status === 'completed') await wrapper.get('.mint-batch-progress__completed-toggle').trigger('click')
+
+    expect(wrapper.get('.mint-batch-progress__item-status').text()).toBe(text)
+    expect(wrapper.get('.mint-batch-progress__item-progress-bar').attributes('style')).toContain(`width: ${width}`)
+  })
 })

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

@@ -13,7 +13,7 @@ describe('CalendarGridPanelInternal', () => {
   it('renders calendar state and emits navigation and selection events', async () => {
     const wrapper = mount(CalendarGridPanelInternal, {
       props: {
-        weekDays: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
+        weekDays: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'],
         monthYear: 'April 2026',
         days,
         selectedDate: days[1].date,
@@ -38,7 +38,7 @@ describe('CalendarGridPanelInternal', () => {
     const today = new Date()
     const wrapper = mount(CalendarGridPanelInternal, {
       props: {
-        weekDays: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
+        weekDays: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'],
         monthYear: 'Today',
         days: [{ date: today, isCurrentMonth: true, isDisabled: false }],
         selectedDate: today,

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

@@ -21,6 +21,17 @@ describe('ChartContainer', () => {
     expect(wrapper.text()).toContain('Chart')
     expect(wrapper.get('.mint-chart__footer').text()).toBe('Footer')
   })
+
+  it.each([
+    [undefined, 'No data'],
+    ['Pick samples to draw the distribution.', 'No dataPick samples to draw the distribution.'],
+  ])('should render the empty title and hint %s when empty', (emptyHint, text) => {
+    const wrapper = mount(ChartContainer, { props: { empty: true, emptyText: 'No data', emptyHint } })
+
+    const empty = wrapper.get('.mint-chart__empty')
+    expect(empty.text()).toBe(text)
+    expect(empty.find('.mint-chart__empty-hint').exists()).toBe(emptyHint !== undefined)
+  })
 })
 
 describe('ChartContainer header legend (9a)', () => {

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

@@ -25,9 +25,12 @@ describe('ChemicalFormula', () => {
     expect(mount(ChemicalFormula, { props: { emptyText: 'Unknown' } }).text()).toBe('Unknown')
   })
 
-  it('supports standalone sans-serif adduct labels', () => {
-    expect(mount(AdductText, { props: { value: '[M-H]-', font: 'sans' } }).classes())
-      .toContain('mint-adduct-text--sans')
+  it.each([
+    [undefined, 'sans'],
+    ['mono', 'mono'],
+  ] as const)('should use the %s font prop as the %s adduct font', (font, cls) => {
+    expect(mount(AdductText, { props: { value: '[M-H]-', font } }).classes())
+      .toContain(`mint-adduct-text--${cls}`)
   })
 
   it('should render a trailing adduct charge as a superscript when the value is bracketed', () => {

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

@@ -28,6 +28,12 @@ describe('DatePicker type="datetime"', () => {
     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(DatePicker, {
       props: {

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/DatePicker.time.test.ts

@@ -114,12 +114,12 @@ describe('DatePicker type="time"', () => {
     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 () => {
+  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 () => {

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()
+  })
 })