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

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

@@ -1,35 +1,45 @@
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 import { mount } from '@vue/test-utils'
 import { createPinia, setActivePinia } from 'pinia'
-import { computed, reactive, ref } from 'vue'
+import { reactive, ref } from 'vue'
 
 import ExperimentSelectorModal from '../../components/ExperimentSelectorModal.vue'
 import { useExperimentSelector } from '../../composables/useExperimentSelector'
 import { useExperimentStore } from '../../stores/experiment'
-import type { ExperimentSummary } from '../../types'
+import type { ExperimentFilters, ExperimentSummary } from '../../types'
 
 const fetchExperiments = vi.fn(async () => undefined)
 const fetchFilterOptions = vi.fn(async () => undefined)
+const fetchStatusCounts = vi.fn(async () => undefined)
 const experiments = ref<ExperimentSummary[]>([])
+const experimentTypes = ref<{ value: string; label: string }[]>([])
+const projects = ref<{ value: string; label: string }[]>([])
+const statusCounts = ref<Record<string, number>>({})
+let filters: ExperimentFilters = newFilters()
+
+function newFilters(): ExperimentFilters {
+  return reactive({
+    search: undefined,
+    status: undefined,
+    project: undefined,
+    experimentType: undefined,
+    datePreset: undefined,
+    mine: undefined,
+  })
+}
 
 vi.mock('../../composables/useExperimentSelector', () => ({
   useExperimentSelector: vi.fn(() => ({
     experiments,
-    filters: reactive({
-      search: undefined,
-      status: undefined,
-      project: undefined,
-      experimentType: undefined,
-      datePreset: undefined,
-    }),
+    filters,
     isLoading: ref(false),
     error: ref(null),
-    sortKey: ref('created_at:desc'),
-    experimentTypes: ref([]),
-    projects: ref([]),
-    groupedByProject: computed(() => []),
+    experimentTypes,
+    projects,
+    statusCounts,
     fetch: fetchExperiments,
     fetchFilterOptions,
+    fetchStatusCounts,
   })),
 }))
 
@@ -49,6 +59,7 @@ function experiment(overrides: Partial<ExperimentSummary> = {}): ExperimentSumma
 
 interface ModalProps {
   open: boolean
+  experimentType?: string
   allowedExperimentTypes?: string[] | null
   currentExperimentId?: number | null
 }
@@ -62,6 +73,15 @@ function mountModal(props: ModalProps) {
           props: ['open', 'title', 'size'],
           template: '<div><slot /></div>',
         },
+        // Renders the trigger and every item inline, without the teleported panel.
+        ActionMenu: {
+          props: ['label', 'items'],
+          emits: ['select'],
+          template: `<div class="menu-stub" :data-label="label">
+            <slot name="trigger" :open="false" :toggle="() => {}" :keydown="() => {}" />
+            <button v-for="item in items" :key="item.id" class="menu-stub__item" :data-checked="item.checked" @click="$emit('select', item)">{{ item.label }}</button>
+          </div>`,
+        },
       },
     },
   })
@@ -71,8 +91,13 @@ describe('ExperimentSelectorModal', () => {
   beforeEach(() => {
     setActivePinia(createPinia())
     experiments.value = []
+    experimentTypes.value = []
+    projects.value = []
+    statusCounts.value = {}
+    filters = newFilters()
     fetchExperiments.mockClear()
     fetchFilterOptions.mockClear()
+    fetchStatusCounts.mockClear()
     vi.mocked(useExperimentSelector).mockClear()
   })
 
@@ -81,6 +106,7 @@ describe('ExperimentSelectorModal', () => {
 
     expect(fetchFilterOptions).toHaveBeenCalledTimes(1)
     expect(fetchExperiments).toHaveBeenCalledTimes(1)
+    expect(fetchStatusCounts).toHaveBeenCalledTimes(1)
   })
 
   it('does not fetch while mounted closed', () => {
@@ -96,6 +122,7 @@ describe('ExperimentSelectorModal', () => {
     expect(useExperimentSelector).toHaveBeenCalledWith({
       experimentType: undefined,
       allowedExperimentTypes: ['mass_spectrometry'],
+      withStatusCounts: true,
     })
   })
 
@@ -129,6 +156,12 @@ describe('ExperimentSelectorModal', () => {
     expect(wrapper.emitted('update:open')).toEqual([[false]])
   })
 
+  it('should mark the search field autofocus when the modal opens', () => {
+    const wrapper = mountModal({ open: true })
+
+    expect(wrapper.get('input[type="search"]').attributes()).toHaveProperty('autofocus')
+  })
+
   it('should show the experiment code as a pill on the second line', () => {
     experiments.value = [experiment()]
     const wrapper = mountModal({ open: true })
@@ -168,4 +201,77 @@ describe('ExperimentSelectorModal', () => {
     expect(store.currentId).toBeNull()
     expect(wrapper.emitted('update:open')).toEqual([[false]])
   })
+
+  it('should list each status with its count and check the current one', async () => {
+    statusCounts.value = { ongoing: 3, planned: 1, completed: 0, cancelled: 2 }
+    filters.status = 'ongoing'
+    const wrapper = mountModal({ open: true })
+
+    const items = wrapper.get('[data-label="Status"]').findAll('.menu-stub__item')
+    expect(items.map(item => item.text())).toEqual([
+      'Any status', 'Ongoing · 3', 'Planned · 1', 'Completed · 0', 'Cancelled · 2',
+    ])
+    expect(items.map(item => item.attributes('data-checked'))).toEqual(['false', 'true', 'false', 'false', 'false'])
+  })
+
+  it('should show the active status with its dot on the trigger and reset it from Any status', async () => {
+    filters.status = 'completed'
+    const wrapper = mountModal({ open: true })
+    const menu = wrapper.get('[data-label="Status"]')
+
+    const trigger = menu.get('.mint-experiment-selector__toggle')
+    expect(trigger.classes()).toContain('mint-experiment-selector__toggle--active')
+    expect(trigger.text()).toBe('Completed')
+    expect(trigger.find('.mint-experiment-selector__dot--success').exists()).toBe(true)
+
+    await menu.findAll('.menu-stub__item')[0].trigger('click')
+
+    expect(filters.status).toBeUndefined()
+  })
+
+  it('should filter by the chosen project', async () => {
+    projects.value = [{ value: 'Screen', label: 'Screen' }]
+    const wrapper = mountModal({ open: true })
+    const menu = wrapper.get('[data-label="Project"]')
+
+    await menu.findAll('.menu-stub__item')[1].trigger('click')
+
+    expect(filters.project).toBe('Screen')
+    expect(menu.get('.mint-experiment-selector__toggle').text()).toBe('Screen')
+  })
+
+  it.each([
+    { experimentType: undefined, shown: true },
+    { experimentType: 'screen', shown: false },
+  ])('should show the type menu only when the type is choosable (experimentType=$experimentType)', ({ experimentType, shown }) => {
+    experimentTypes.value = [{ value: 'screen', label: 'Screen' }, { value: 'lcms', label: 'LC-MS' }]
+    const wrapper = mountModal({ open: true, experimentType })
+
+    expect(wrapper.find('[data-label="Type"]').exists()).toBe(shown)
+  })
+
+  it('should toggle the mine filter from the Mine button', async () => {
+    const wrapper = mountModal({ open: true })
+    const mine = wrapper.get('[aria-pressed]')
+
+    await mine.trigger('click')
+
+    expect(filters.mine).toBe(true)
+    expect(mine.attributes('aria-pressed')).toBe('true')
+  })
+
+  it('should clear status, project and mine but keep the search when Clear N is clicked', async () => {
+    const wrapper = mountModal({ open: true })
+    expect(wrapper.find('.mint-experiment-selector__clear-filters').exists()).toBe(false)
+
+    Object.assign(filters, { search: 'glu', status: 'planned', project: 'Screen', mine: true })
+    await wrapper.vm.$nextTick()
+    const clear = wrapper.get('.mint-experiment-selector__clear-filters')
+    expect(clear.text()).toBe('Clear 3')
+
+    await clear.trigger('click')
+
+    expect(filters).toMatchObject({ search: 'glu', status: undefined, project: undefined, mine: undefined })
+    expect(wrapper.find('.mint-experiment-selector__clear-filters').exists()).toBe(false)
+  })
 })

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

@@ -7,6 +7,7 @@ import GeneratedPluginView from '../../components/GeneratedPluginView.vue'
 import GeneratedResultRenderer from '../../components/GeneratedResultRenderer.vue'
 import JobsStatusTray from '../../components/JobsStatusTray.vue'
 import PluginWorkspaceView from '../../components/PluginWorkspaceView.vue'
+import { pluginIdentity, providePluginIdentity } from '../../composables/pluginIdentity'
 
 const generated = vi.hoisted(() => ({
   refresh: vi.fn(),
@@ -16,6 +17,7 @@ const generated = vi.hoisted(() => ({
   options: undefined as unknown,
   jobs: [] as Array<Record<string, unknown>>,
   error: null as string | null,
+  ui: {} as Record<string, string>,
 }))
 
 vi.mock('../../composables/useJobsEndpoint', async () => {
@@ -30,7 +32,7 @@ vi.mock('../../composables/useJobsEndpoint', async () => {
         plugin: {
           name: 'Demo', version: '1.0.0', description: 'Demo plugin', routes_prefix: '/demo',
         },
-        ui: { title: 'Demo analysis', description: 'Backend-only workspace' },
+        ui: generated.ui,
         jobs: [
           {
             id: 'run',
@@ -120,6 +122,8 @@ describe('GeneratedPluginView', () => {
       { ...baseJob, id: 'job-2', job_id: 'job-2', session_id: 'shared-session' },
     ]
     generated.error = null
+    generated.ui = { title: 'Demo analysis', description: 'Backend-only workspace' }
+    providePluginIdentity({ plugin: { name: '' } })
     generated.refresh.mockResolvedValue(undefined)
     generated.submit.mockResolvedValue(undefined)
     generated.result.mockResolvedValue({ kind: 'text', text: 'complete' })
@@ -159,6 +163,23 @@ describe('GeneratedPluginView', () => {
     })
   })
 
+  it('should seed the top bar identity from the manifest ui subtitle and icon', async () => {
+    generated.ui = {
+      title: 'Demo analysis', subtitle: 'Peak triage', description: 'Backend-only workspace', icon: 'M4 4h16v16H4z',
+    }
+    const wrapper = mount(GeneratedPluginView, {
+      props: { baseUrl: '/api/demo' },
+      global: {
+        plugins: [createPinia()],
+        stubs: { 'router-link': { template: '<a><slot /></a>' }, Teleport: true },
+      },
+    })
+    await flushPromises()
+
+    expect(wrapper.findComponent(PluginWorkspaceView).props('spec')).toMatchObject({ subtitle: 'Peak triage' })
+    expect(pluginIdentity).toMatchObject({ name: 'Demo analysis', subtitle: 'Peak triage', icon: 'M4 4h16v16H4z' })
+  })
+
   it('should show the load error text when the workspace fails to load', async () => {
     generated.error = 'Manifest request failed'
     const wrapper = mount(GeneratedPluginView, {

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

@@ -18,9 +18,9 @@ describe('InstrumentStateBadge', () => {
     expect(wrapper.classes()).toContain('mint-instrument-state--pulse')
   })
 
-  it('should use the info tone when the instrument is running', () => {
+  it('should use the success tone when the instrument is running', () => {
     const wrapper = mount(InstrumentStateBadge, { props: { state: 'running' } })
-    expect(wrapper.classes()).toContain('mint-instrument-state--info')
+    expect(wrapper.classes()).toContain('mint-instrument-state--success')
   })
 
   it('should use the success tone when the instrument is connected', () => {
@@ -28,7 +28,7 @@ describe('InstrumentStateBadge', () => {
     expect(wrapper.classes()).toContain('mint-instrument-state--success')
   })
 
-  it('should use the dash shape when the instrument never reported', () => {
+  it('should use the hollow square shape when the instrument never reported', () => {
     const wrapper = mount(InstrumentStateBadge, { props: { state: 'never' } })
     expect(wrapper.classes()).toContain('mint-instrument-state--never')
   })
@@ -38,7 +38,7 @@ describe('InstrumentStateBadge', () => {
     expect(wrapper.text()).toBe('Never reported')
   })
 
-  it('should use the square shape when the instrument is inactive', () => {
+  it('should use the dash shape when the instrument is inactive', () => {
     const wrapper = mount(InstrumentStateBadge, { props: { state: 'inactive' } })
     expect(wrapper.classes()).toContain('mint-instrument-state--inactive')
   })

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

@@ -131,6 +131,13 @@ function mountIntegratedPageSelectorWorkspace(): VueWrapper {
 }
 
 describe('PluginWorkspaceView', () => {
+  it('should leave the top bar title unset when the spec has no title', () => {
+    // The top bar then shows the plugin identity, not a generic "Workspace".
+    const wrapper = mount(PluginWorkspaceView, { props: { spec: {} }, global: globalOptions })
+
+    expect(wrapper.findComponent(AppTopBar).props('title')).toBeUndefined()
+  })
+
   it('should not forward the retired profile-button prop', () => {
     const wrapper = mount(PluginWorkspaceView, {
       global: globalOptions,

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

@@ -107,17 +107,6 @@ describe('ResourcePickerListInternal', () => {
     expect(wrapper.emitted('update:search')?.[0]).toEqual(['plasma'])
   })
 
-  it('should head each group with its label and a count', () => {
-    const wrapper = setup({ groups: [{ label: 'Recent', items }] })
-    expect(wrapper.get('.mint-resource-picker__group').text()).toBe('Recent2')
-  })
-
-  it('should hide the rows of a collapsed group', async () => {
-    const wrapper = setup({ groups: [{ label: 'Recent', items }] })
-    await wrapper.get('.mint-resource-picker__group').trigger('click')
-    expect(wrapper.findAll('[role="option"]')).toHaveLength(0)
-  })
-
   it('should show skeleton rows while loading', () => {
     expect(setup({ loading: true }).findAll('.mint-resource-picker__skeleton-row')).toHaveLength(4)
   })
@@ -129,13 +118,4 @@ describe('ResourcePickerListInternal', () => {
   it('should show the empty title when there are no items', () => {
     expect(setup({ items: [], emptyTitle: 'Nothing here' }).text()).toContain('Nothing here')
   })
-
-  it('should leave Enter to a group header while a row is highlighted', async () => {
-    const wrapper = setup({ groups: [{ label: 'Recent', items }] })
-    await wrapper.findAll('[role="option"]')[0]!.trigger('mouseenter')
-
-    await wrapper.get('.mint-resource-picker__group').trigger('keydown', { key: 'Enter' })
-
-    expect(wrapper.emitted('select')).toBeUndefined()
-  })
 })

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

@@ -97,7 +97,7 @@ describe('SampleSelector', () => {
       },
     })
 
-    expect(wrapper.find('.mint-sample-selector__select-all-count').text()).toBe('0 / 2')
+    expect(wrapper.find('.mint-sample-selector__select-all-count').text()).toBe('0/2')
     expect(wrapper.findAll('.mint-sample-selector__flat-name').map(item => item.text())).toEqual(['S1', 'S2'])
   })
 
@@ -115,9 +115,9 @@ describe('SampleSelector', () => {
       },
     })
 
-    const labels = wrapper.findAll('.mint-sample-selector__actions-row .mint-sample-selector__action-label')
-    expect(labels.map(label => label.text())).toEqual(['Grouping'])
-    expect(wrapper.findAll('.mint-sample-selector__actions-row > .mint-sample-selector__action-btn')).toHaveLength(2)
+    const buttons = wrapper.findAll('.mint-sample-selector__header-actions > .mint-sample-selector__action-btn')
+    expect(buttons.map(button => button.text())).toEqual(['Smart group'])
+    expect(wrapper.find('.mint-sample-selector__header').text()).toContain('Samples0 selected')
 
     await wrapper.findAllComponents({ name: 'BaseButton' })[0].trigger('click')
 
@@ -140,8 +140,8 @@ describe('SampleSelector', () => {
       },
     })
 
-    const labels = wrapper.findAll('.mint-sample-selector__actions-row .mint-sample-selector__action-label')
-    expect(labels.map(label => label.text())).toEqual(['Grouping'])
+    const buttons = wrapper.findAll('.mint-sample-selector__header-actions > .mint-sample-selector__action-btn')
+    expect(buttons.map(button => button.text())).toEqual(['Group'])
 
     await wrapper.findAllComponents({ name: 'BaseButton' })[0].trigger('click')
 
@@ -472,9 +472,14 @@ describe('SampleSelector checkboxes (7c)', () => {
   }
   const stubs = { global: { stubs: { AutoGroupModalInternal: true } } }
 
-  it('should show the mono selected / total count when some samples are selected', () => {
+  it('should show the mono selected/total count when some samples are selected', () => {
     const wrapper = mount(SampleSelector, { props: grouped, ...stubs })
-    expect(wrapper.find('.mint-sample-selector__select-all-count').text()).toBe('1 / 3')
+    expect(wrapper.find('.mint-sample-selector__select-all-count').text()).toBe('1/3')
+  })
+
+  it('should offer clear-all-groups in the header when groups exist', () => {
+    const wrapper = mount(SampleSelector, { props: { ...grouped, enableGrouping: true }, ...stubs })
+    expect(wrapper.find('.mint-sample-selector__header-actions [aria-label="Clear all groups"]').exists()).toBe(true)
   })
 
   it('should mark the select-all checkbox mixed when some samples are selected', () => {

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

@@ -36,4 +36,16 @@ describe('SequenceProgressBar', () => {
     expect(wrapper.get('.mint-sequence-progress__label').text()).toBe('2 / 4 injections')
     expect(wrapper.find('.mint-sequence-progress__footer').exists()).toBe(false)
   })
+
+  it.each([
+    [0, null],
+    [2, '2 failed'],
+  ])('should show the failed count when %i injections failed', (failed, expected) => {
+    const wrapper = mount(SequenceProgressBar, {
+      props: { failed, progress: { current_sample: 3, total_samples: 6 } },
+    })
+
+    const node = wrapper.find('.mint-sequence-progress__failed')
+    expect(node.exists() ? node.text() : null).toBe(expected)
+  })
 })

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

@@ -73,3 +73,14 @@ describe('StepWizard navigation (2c)', () => {
     expect(wrapper.find('.mint-wizard__counter').text()).toBe('2 / 2')
   })
 })
+
+describe('StepWizard orientation', () => {
+  it.each([
+    ['horizontal', false],
+    ['vertical', true],
+  ] as const)('should toggle the vertical modifier when orientation is %s', (orientation, vertical) => {
+    const wrapper = mount(StepWizard, { props: { steps, orientation } })
+
+    expect(wrapper.classes('mint-wizard--vertical')).toBe(vertical)
+  })
+})

package/src/__tests__/components/WellPlate.decoration.test.ts

@@ -28,15 +28,22 @@ describe('WellPlate per-well decoration', () => {
       .toEqual(['2px', 'solid', 'var(--mint-warning)'])
   })
 
-  it('should render no glyph when a QC well has no label or id', () => {
+  it.each([
+    ['qc', {}, 'Q'],
+    ['iqc', {}, 'i'],
+    ['sample', {}, ''],
+    ['qc', { showWellIds: true }, 'A1'],
+  ] as const)('should render the %s glyph when the well has no label (spec %o)', (sampleType, spec, text) => {
     const wrapper = mount(WellPlate, {
       props: {
-        spec: { format: 6 },
-        wells: { A1: { id: 'A1', row: 0, col: 0, state: 'filled', sampleType: 'qc' } },
+        spec: { format: 6, ...spec },
+        wells: { A1: { id: 'A1', row: 0, col: 0, state: 'filled', sampleType } },
       },
     })
 
-    expect(wrapper.findAll('.mint-well-plate__well')[0].text()).toBe('')
+    const well = wrapper.findAll('.mint-well-plate__well')[0]
+    expect(well.text()).toBe(text)
+    expect(well.find('.mint-well-plate__indicator').exists()).toBe(text === 'Q' || text === 'i')
   })
 
   it('should draw plain legend swatches when the legend is shown', () => {

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

@@ -68,7 +68,7 @@ describe('root exports outside L1 and L2', () => {
 
     expect(values.sort()).toEqual([
       'defineControlModel', 'defineDataFrame', 'definePluginWorkspaceView', 'downloadBlob',
-      'resolvePluginFrontendBase', 'useExperiment', 'usePlatform', 'useRequest', 'useTheme', 'useToast',
+      'providePluginIdentity', 'resolvePluginFrontendBase', 'useExperiment', 'usePlatform', 'useRequest', 'useTheme', 'useToast',
     ])
   })
 

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

@@ -490,6 +490,20 @@ describe('useAppExperiment', () => {
       expect(state.saveLoading.value).toBe(false)
     })
 
+    it('should show the refetched update time after a successful save', async () => {
+      const store = useExperimentStore()
+      useAppExperiment({ onSave: vi.fn().mockResolvedValue('Saved') })
+      const state = getState()
+      store.select(makeExperiment({ updated_at: '2025-01-01T00:00:00Z' }))
+
+      const fetch = stubExperimentFetch()
+      const saving = state.handleSave()
+      fetch.resolveWith(makeExperiment({ updated_at: '2026-10-28T09:30:00Z' }))
+      await saving
+
+      expect(state.popover.value.experimentUpdatedAt).toBe('2026-10-28T09:30:00Z')
+    })
+
     it('should not set saveSuccessMessage when onSave returns null', async () => {
       const onSave = vi.fn().mockResolvedValue(null)
       useAppExperiment({ onSave })
@@ -716,8 +730,9 @@ describe('useAppExperiment', () => {
     it('exposes live ExperimentPopover props from the provided state', async () => {
       const saveDisabled = ref(false)
       const saveDisabledMessage = ref<string | undefined>('Ready to save')
+      const dirty = ref(false)
       const onSave = vi.fn().mockResolvedValue('Saved')
-      useAppExperiment({ onSave, saveDisabled, saveDisabledMessage })
+      useAppExperiment({ onSave, saveDisabled, saveDisabledMessage, dirty })
       const state = getState()
 
       useExperimentStore().select(makeExperiment({
@@ -725,26 +740,37 @@ describe('useAppExperiment', () => {
         name: 'Dose response',
         status: 'ongoing',
         experiment_code: 'EXP-012',
+        project: 'legacy-project',
+        project_name: 'Hypoxia atlas',
+        created_by_user: { id: 3, username: 'jdoe', first_name: 'Jane', last_name: 'Doe' },
+        updated_at: '2026-10-28T10:00:00Z',
       }))
 
       expect(state.popover.value).toMatchObject({
         experimentName: 'Dose response',
         experimentCode: 'EXP-012',
         experimentStatus: 'ongoing',
+        experimentId: 12,
+        experimentProject: 'Hypoxia atlas',
+        experimentOwner: 'Jane Doe',
+        experimentUpdatedAt: '2026-10-28T10:00:00Z',
         isResolving: false,
         showSave: true,
         showDetach: true,
         saveDisabled: false,
         saveDisabledMessage: 'Ready to save',
         saveLoading: false,
+        dirty: false,
       })
       expect(state.popover.value.error).toBeUndefined()
 
       saveDisabled.value = true
       saveDisabledMessage.value = 'Locked'
+      dirty.value = true
 
       expect(state.popover.value.saveDisabled).toBe(true)
       expect(state.popover.value.saveDisabledMessage).toBe('Locked')
+      expect(state.popover.value.dirty).toBe(true)
 
       await state.handleSave()
 

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

@@ -2,14 +2,16 @@ import { describe, expect, it } from 'vitest'
 import { useCalendarGrid } from '../../composables/useCalendarGrid'
 
 describe('useCalendarGrid', () => {
-  it('builds a stable 42-day month grid with previous and next month padding', () => {
+  it('builds a stable Monday-first 42-day month grid with previous and next month padding', () => {
     const calendar = useCalendarGrid()
     calendar.setCurrentMonthFromDate(new Date('2026-05-07T12:00:00'))
 
-    expect(calendar.weekDays).toEqual(['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'])
+    expect(calendar.weekDays).toEqual(['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'])
     expect(calendar.monthYear.value).toBe('May 2026')
     expect(calendar.calendarDays.value).toHaveLength(42)
     expect(calendar.calendarDays.value[0].date.getMonth()).toBe(3)
+    expect(calendar.calendarDays.value[0].date.getDate()).toBe(27)
+    expect(calendar.calendarDays.value[0].date.getDay()).toBe(1)
     expect(calendar.calendarDays.value.some(day => day.isCurrentMonth && day.date.getDate() === 7)).toBe(true)
   })
 

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

@@ -194,6 +194,117 @@ describe('useExperimentSelector', () => {
     ])
   })
 
+  it('should send the scope filters but not status to the stats route when counting', async () => {
+    fakeResponse = { total: 3, by_status: { planned: 1, ongoing: 2, completed: 0, cancelled: 0 } } as never
+    const hook = useExperimentSelector()
+    Object.assign(hook.filters, { search: 'glu', project: 'Screen', mine: true, status: 'planned' })
+
+    await hook.fetchStatusCounts()
+
+    const url = new URL(recordedUrls[0], 'http://mint.test')
+    expect(url.pathname).toBe('/experiments/stats')
+    expect(Object.fromEntries(url.searchParams)).toEqual({ search: 'glu', project: 'Screen', mine: 'true' })
+    expect(hook.statusCounts.value).toEqual({ planned: 1, ongoing: 2, completed: 0, cancelled: 0 })
+  })
+
+  it('should send mine=true on the list request when the mine filter is set', async () => {
+    const hook = useExperimentSelector()
+    hook.filters.mine = true
+
+    await hook.fetch()
+
+    expect(recordedUrls[0]).toContain('mine=true')
+  })
+
+  it('should sum the per-type stats when several experiment types are allowed', async () => {
+    vi.spyOn(useApi().client, 'get').mockImplementation(async (url: string) => {
+      recordedUrls.push(url)
+      const type = new URL(url, 'http://mint.test').searchParams.get('experiment_type')
+      return { data: { total: 2, by_status: { planned: type === 'drug-response' ? 2 : 0, ongoing: type === 'metabolomics' ? 2 : 0 } } }
+    })
+    const hook = useExperimentSelector({ allowedExperimentTypes: ['drug-response', 'metabolomics'] })
+
+    await hook.fetchStatusCounts()
+
+    expect(recordedUrls).toHaveLength(2)
+    expect(hook.statusCounts.value).toEqual({ planned: 2, ongoing: 2 })
+  })
+
+  it('should not query the stats route when the selected type is not allowed', async () => {
+    const hook = useExperimentSelector({ experimentType: 'proteomics', allowedExperimentTypes: ['drug-response'] })
+
+    await hook.fetchStatusCounts()
+
+    expect(recordedUrls).toEqual([])
+    expect(hook.statusCounts.value).toEqual({})
+  })
+
+  it('should refetch status counts with the list when a filter or the search changes and counts are on', async () => {
+    vi.useFakeTimers()
+    const hook = useExperimentSelector({ withStatusCounts: true })
+    const statsUrls = () => recordedUrls.filter(url => url.includes('/experiments/stats'))
+
+    hook.filters.project = 'Screen'
+    await nextTick()
+
+    expect(statsUrls()).toHaveLength(1)
+    expect(recordedUrls.filter(url => url.includes('/experiments?'))).toHaveLength(1)
+
+    hook.filters.search = 'glu'
+    await vi.advanceTimersByTimeAsync(300)
+
+    expect(statsUrls()).toHaveLength(2)
+    expect(statsUrls()[1]).toContain('search=glu')
+  })
+
+  it.each([
+    ['status', (hook: ReturnType<typeof useExperimentSelector>) => { hook.filters.status = 'planned' }, 1],
+    ['sort', (hook: ReturnType<typeof useExperimentSelector>) => { hook.sortKey.value = 'name:asc' }, 1],
+    ['project', (hook: ReturnType<typeof useExperimentSelector>) => { hook.filters.project = 'Screen' }, 2],
+  ] as const)('should refetch status counts on a %s change only when it changes the counts', async (_name, change, statsCalls) => {
+    // One body that serves both routes, so the first stats request succeeds.
+    fakeResponse = { ...fakeResponse, by_status: { planned: 1 } } as never
+    const hook = useExperimentSelector({ withStatusCounts: true })
+    await hook.fetchStatusCounts()
+
+    change(hook)
+    await nextTick()
+
+    expect(recordedUrls.filter(url => url.includes('/experiments/stats'))).toHaveLength(statsCalls)
+  })
+
+  it('should refetch status counts on a status change when the previous stats request failed', async () => {
+    const stats = vi.fn()
+      .mockRejectedValueOnce(new Error('offline'))
+      .mockResolvedValue({ data: { total: 1, by_status: { planned: 1 } } })
+    vi.spyOn(useApi().client, 'get').mockImplementation(async (url: string) =>
+      url.includes('/experiments/stats') ? stats() : { data: fakeResponse })
+    const hook = useExperimentSelector({ withStatusCounts: true })
+    await hook.fetchStatusCounts()
+    expect(hook.statusCounts.value).toEqual({})
+
+    hook.filters.status = 'planned'
+    await nextTick()
+
+    expect(stats).toHaveBeenCalledTimes(2)
+    await vi.waitFor(() => expect(hook.statusCounts.value).toEqual({ planned: 1 }))
+  })
+
+  it('should refetch status counts when a status change flushes a pending search', async () => {
+    vi.useFakeTimers()
+    const hook = useExperimentSelector({ withStatusCounts: true })
+    await hook.fetchStatusCounts()
+    const statsUrls = () => recordedUrls.filter(url => url.includes('/experiments/stats'))
+
+    hook.filters.search = 'glu'
+    await nextTick()
+    hook.filters.status = 'planned'
+    await nextTick()
+
+    expect(statsUrls()).toHaveLength(2)
+    expect(statsUrls()[1]).toContain('search=glu')
+  })
+
   it('loadMore appends the next page', async () => {
     const hook = useExperimentSelector({ limit: 1 })