@morscherlab/mint-sdk 1.5.0-beta.1 → 1.5.0-beta.11

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

@@ -0,0 +1,65 @@
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { ref } from 'vue'
+import { trackTopBarCompact } from '../../components/AppTopBar.compact'
+
+let resize: () => void = () => {}
+vi.stubGlobal('ResizeObserver', class {
+  constructor(callback: () => void) { resize = callback }
+  observe() {}
+  disconnect() {}
+})
+
+function size(el: Element, box: { width?: number; client?: number; scroll?: number }) {
+  if (box.width !== undefined) el.getBoundingClientRect = () => ({ width: box.width }) as DOMRect
+  if (box.client !== undefined) Object.defineProperty(el, 'clientWidth', { configurable: true, value: box.client })
+  if (box.scroll !== undefined) Object.defineProperty(el, 'scrollWidth', { configurable: true, value: box.scroll })
+}
+
+function topBar() {
+  const header = document.createElement('header')
+  header.innerHTML = `
+    <button class="mint-experiment-popover__trigger"><span class="mint-experiment-popover__trigger-text"></span></button>
+    <span class="mint-experiment-popover__save-label">Save</span>`
+  const [chip, text, label] = ['__trigger', '__trigger-text', '__save-label']
+    .map(part => header.querySelector(`.mint-experiment-popover${part}`)!)
+  size(label, { width: 40 })
+  return { header, chip, text }
+}
+
+afterEach(() => { resize = () => {} })
+
+describe('trackTopBarCompact', () => {
+  it('should compact when the chip is squeezed and expand once the bar has grown by the label width', () => {
+    const { header, chip, text } = topBar()
+    const compact = ref(false)
+    trackTopBarCompact(header, compact)
+
+    size(header, { client: 800 })
+    size(chip, { width: 150 })
+    size(text, { client: 60, scroll: 120 })
+    resize()
+    const squeezed = compact.value
+
+    size(header, { client: 830 })
+    resize()
+    const belowLabelWidth = compact.value
+
+    size(header, { client: 840 })
+    resize()
+
+    expect([squeezed, belowLabelWidth, compact.value]).toEqual([true, true, false])
+  })
+
+  it('should keep the labels when a short name leaves the chip narrow', () => {
+    const { header, chip, text } = topBar()
+    const compact = ref(false)
+    trackTopBarCompact(header, compact)
+
+    size(header, { client: 800 })
+    size(chip, { width: 150 })
+    size(text, { client: 60, scroll: 60 })
+    resize()
+
+    expect(compact.value).toBe(false)
+  })
+})

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

@@ -0,0 +1,24 @@
+import { describe, expect, it, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { createPinia } from 'pinia'
+import AppTopBar from '../../components/AppTopBar.vue'
+
+const reset = vi.fn()
+vi.mock('../../components/AppTopBar.compact', () => ({
+  trackTopBarCompact: () => ({ reset, stop: () => {} }),
+}))
+
+describe('AppTopBar compact reset', () => {
+  it('should re-measure when a job appears but not when its progress label changes', async () => {
+    const wrapper = mount(AppTopBar, {
+      props: { title: 'Test App', job: null },
+      global: { plugins: [createPinia()] },
+    })
+
+    await wrapper.setProps({ job: { status: 'running', label: 'Extracting 10 files' } })
+    const afterAppear = reset.mock.calls.length
+    await wrapper.setProps({ job: { status: 'running', label: 'Extracting 4 of 10 files' } })
+
+    expect([afterAppear, reset.mock.calls.length]).toEqual([1, 1])
+  })
+})

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

@@ -56,6 +56,16 @@ describe('AppTopBar onboarding', () => {
     if (shown) expect(wrapper.find('.mint-onboarding-help__chip').text()).toContain('0/1')
   })
 
+  it('should hide the checklist chip when its close button is clicked', async () => {
+    const wrapper = mountTopBar(definition)
+
+    await wrapper.get('[aria-label="Hide checklist"]').trigger('click')
+
+    expect(wrapper.find('.mint-onboarding-help__chip').exists()).toBe(false)
+    expect(JSON.parse(localStorage.getItem('mint.onboarding.test.1')!)).toContain('hide:checklist')
+    expect(document.activeElement).toBe(wrapper.get('[data-onboarding="topbar-help"]').element)
+  })
+
   it('should run a tour picked in the Help panel and end it with Escape', async () => {
     const wrapper = mountTopBar(definition)
     await wrapper.get('[data-onboarding="topbar-help"]').trigger('click')

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

@@ -0,0 +1,58 @@
+import { flushPromises, mount } from '@vue/test-utils'
+import { createPinia } from 'pinia'
+import { describe, expect, it, vi } from 'vitest'
+import SmartGroupFieldRecipe from '../../components/SmartGroupFieldRecipe.vue'
+
+const pending = vi.hoisted(() => new Map<string, (data: unknown) => void>())
+
+vi.mock('../../composables/useApi', () => ({
+  useApi: () => ({
+    get: (url: string) => new Promise(resolve => pending.set(url, data => resolve({ data }))),
+  }),
+}))
+
+const { default: AutoGroupModal } = await import('../../components/internal/AutoGroupModalInternal.vue')
+
+const design = (names: string[]) => ({
+  samples: names.map(sample_name => ({ sample_name, sample_type: 'sample', conditions: { Genotype: sample_name } })),
+})
+
+describe('AutoGroupModal experiment load', () => {
+  it('should ignore the response of an earlier open when the modal reopens on another experiment', async () => {
+    const wrapper = mount(AutoGroupModal, {
+      props: { open: true, experimentId: 1 },
+      global: { plugins: [createPinia()], stubs: { Teleport: true } },
+    })
+    await wrapper.setProps({ open: false })
+    await wrapper.setProps({ open: true, experimentId: 2 })
+    const recipe = () => wrapper.findComponent(SmartGroupFieldRecipe)
+
+    pending.get('/experiments/1/data')!(design(['O1', 'O2', 'O3']))
+    await flushPromises()
+    const afterOld = [recipe().props('loading'), recipe().props('headerCount')]
+    pending.get('/experiments/2/data')!(design(['N1', 'N2']))
+    await flushPromises()
+
+    expect({
+      afterOld,
+      afterNew: [recipe().props('loading'), recipe().props('headerCount')],
+    }).toEqual({ afterOld: [true, 0], afterNew: [false, 2] })
+  })
+
+  it('should stop loading and keep the pasted samples when the modal reopens without an experiment during a fetch', async () => {
+    const wrapper = mount(AutoGroupModal, {
+      props: { open: true, experimentId: 3 },
+      global: { plugins: [createPinia()], stubs: { Teleport: true } },
+    })
+    await wrapper.setProps({ open: false })
+    await wrapper.setProps({ open: true, experimentId: undefined, samples: ['WT_1', 'WT_2', 'KO_1', 'KO_2'] })
+
+    pending.get('/experiments/3/data')!(design(['O1', 'O2', 'O3']))
+    await flushPromises()
+    const recipe = wrapper.findComponent(SmartGroupFieldRecipe)
+
+    const anatomy = (recipe.props('anatomy') as { text: string }[]).map(token => token.text)
+
+    expect([recipe.props('loading'), anatomy]).toEqual([false, ['WT', '1']])
+  })
+})

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

@@ -1,6 +1,6 @@
-import { mount } from '@vue/test-utils'
+import { enableAutoUnmount, mount } from '@vue/test-utils'
 import { nextTick } from 'vue'
-import { describe, expect, it } from 'vitest'
+import { afterEach, describe, expect, it } from 'vitest'
 import BaseModal from '../../components/BaseModal.vue'
 import type { ModalTab } from '../../types'
 
@@ -36,6 +36,8 @@ function mountModal(props: Record<string, unknown> = {}, slots: Record<string, s
   })
 }
 
+enableAutoUnmount(afterEach)
+
 describe('BaseModal', () => {
   describe('plain layout', () => {
     it('should not render a tab strip when layout is omitted', () => {
@@ -233,4 +235,33 @@ describe('BaseModal', () => {
       attached.unmount()
     })
   })
+
+  describe('scroll lock', () => {
+    afterEach(() => {
+      document.body.style.overflow = ''
+    })
+
+    it('should keep body scroll locked until the last nested modal closes when modals stack', async () => {
+      document.body.style.overflow = 'scroll'
+      const outer = mountModal()
+      const inner = mountModal({ title: 'Nested' })
+      await inner.setProps({ open: false })
+      expect(document.body.style.overflow).toBe('hidden')
+      await outer.setProps({ open: false })
+      expect(document.body.style.overflow).toBe('scroll')
+    })
+
+    it('should keep body scroll locked when a closed modal unmounts while another is open', async () => {
+      const open = mountModal({ open: false })
+      await open.setProps({ open: true })
+      const closed = mountModal({ open: false })
+      closed.unmount()
+      expect(document.body.style.overflow).toBe('hidden')
+    })
+
+    it('should lock body scroll when the modal mounts open', () => {
+      mountModal()
+      expect(document.body.style.overflow).toBe('hidden')
+    })
+  })
 })

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

@@ -7,8 +7,8 @@ import type { ButtonVariant, Tone } from '../../types'
 describe('ConfirmDialog', () => {
   it.each<[Tone, ButtonVariant]>([
     ['error', 'danger'],
-    ['warning', 'cta'],
-    ['cta', 'cta'],
+    ['warning', 'primary'],
+    ['cta', 'primary'],
     ['success', 'success'],
     ['info', 'primary'],
     ['neutral', 'primary'],

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

@@ -1,5 +1,6 @@
 import { flushPromises, mount } from '@vue/test-utils'
 import { afterEach, describe, expect, it, vi } from 'vitest'
+import ConfirmDialog from '../../components/ConfirmDialog.vue'
 import ExperimentPopover from '../../components/ExperimentPopover.vue'
 
 function mountPopover(props = {}) {
@@ -279,4 +280,35 @@ describe('ExperimentPopover', () => {
 
     wrapper.unmount()
   })
+
+  it('should drop the success indicator when the parent clears saveSuccessMessage', async () => {
+    const wrapper = mountPopover({ experimentName: 'Dose response run', showSave: true })
+    const save = () => wrapper.find('.mint-experiment-popover__save')
+
+    await wrapper.setProps({ saveSuccessMessage: 'Saved' })
+    expect(save().classes()).toContain('mint-experiment-popover__save--success')
+    expect(save().attributes('title')).toBe('Saved')
+
+    await wrapper.setProps({ saveSuccessMessage: undefined, saveDisabled: true })
+    expect(save().classes()).not.toContain('mint-experiment-popover__save--success')
+    expect(save().classes()).toContain('mint-experiment-popover__save--disabled')
+    expect(save().attributes('disabled')).toBeDefined()
+
+    wrapper.unmount()
+  })
+
+  it.each([
+    { saveDisabled: true },
+    { saveLoading: true },
+  ])('should not emit save from the confirm dialog when %o', async (blocked) => {
+    const wrapper = mountPopover({ experimentName: 'Dose response run', showSave: true })
+
+    await wrapper.find('.mint-experiment-popover__save').trigger('click')
+    await wrapper.setProps(blocked)
+    wrapper.findComponent(ConfirmDialog).vm.$emit('confirm')
+
+    expect(wrapper.emitted('save')).toBeUndefined()
+
+    wrapper.unmount()
+  })
 })

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

@@ -96,6 +96,7 @@ describe('ExperimentSelectorModal', () => {
     projects.value = []
     statusCounts.value = {}
     filters = newFilters()
+    localStorage.clear()
     fetchExperiments.mockClear()
     fetchFilterOptions.mockClear()
     fetchStatusCounts.mockClear()
@@ -124,6 +125,7 @@ describe('ExperimentSelectorModal', () => {
       experimentType: undefined,
       allowedExperimentTypes: ['mass_spectrometry'],
       withStatusCounts: true,
+      initialFilters: {},
     })
   })
 
@@ -293,6 +295,20 @@ describe('ExperimentSelectorModal', () => {
     expect(mine.attributes('aria-pressed')).toBe('true')
   })
 
+  it('should reopen with the status, project and mine filters of the last visit but not the search or type', async () => {
+    const first = mountModal({ open: true })
+    Object.assign(filters, { search: 'glu', status: 'ongoing', project: 'Screen', experimentType: 'screen', mine: true })
+    await first.vm.$nextTick()
+    first.unmount()
+
+    vi.mocked(useExperimentSelector).mockClear()
+    filters = newFilters()
+    mountModal({ open: true })
+
+    expect(vi.mocked(useExperimentSelector).mock.calls[0][0]?.initialFilters)
+      .toEqual({ status: 'ongoing', project: 'Screen', mine: 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)

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

@@ -174,7 +174,7 @@ describe('PluginWorkspaceView', () => {
     expect(wrapper.findComponent(AppTopBar).props()).toMatchObject({
       title: 'MS Uploader',
       subtitle: 'Import and visualize',
-      spec: { pills: pillNav, themeToggle: true, settings: {}, standaloneLabel: false },
+      spec: { pills: pillNav, settings: {}, standaloneLabel: false },
       pill: 'data',
     })
     expect(wrapper.findComponent(AppSidebar).props()).toMatchObject({
@@ -392,6 +392,25 @@ describe('PluginWorkspaceView', () => {
     expect(wrapper.get('[data-test="sidebar-footer"]').text()).toBe('Run')
   })
 
+  it.each([
+    { name: 'bound v-model', sidebarCollapsed: true, collapsedWidth: undefined, expected: '3rem' },
+    { name: 'its own state', sidebarCollapsed: undefined, collapsedWidth: '3.5rem', expected: '3.5rem' },
+  ])('should give AppLayout the collapsed width when the sidebar collapses through $name', async ({ sidebarCollapsed, collapsedWidth, expected }) => {
+    const wrapper = mount(PluginWorkspaceView, {
+      props: {
+        sidebarCollapsed,
+        spec: { title: 'Tools', sidebar: { width: '20rem', collapsible: true, collapsedWidth, whenEmpty: true } },
+      },
+      global: globalOptions,
+    })
+    expect(wrapper.findComponent(AppLayout).props('sidebarWidth')).toBe(sidebarCollapsed ? expected : '20rem')
+
+    wrapper.findComponent(AppSidebar).vm.$emit('update:collapsed', true)
+    await nextTick()
+
+    expect(wrapper.findComponent(AppLayout).props('sidebarWidth')).toBe(expected)
+  })
+
   it('can provide AppTopBar experiment selection and save wiring from the shared store', async () => {
     vi.mocked(usePlatform).mockReturnValueOnce({
       integrated: computed(() => true),

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

@@ -178,4 +178,37 @@ describe('SectionCard', () => {
       expect(withoutFooter.find('.mint-section-card__footer').exists()).toBe(false)
     })
   })
+
+  describe('collapsible', () => {
+    it('should hide the body and emit the collapsed state when a collapsible header is clicked', async () => {
+      const wrapper = mount(SectionCard, {
+        props: { title: 'Alerts', count: 3, collapsible: true },
+        slots: { default: '<p class="body-probe">rows</p>', actions: '<button class="action-probe">Export</button>' },
+        attachTo: document.body,
+      })
+      const toggle = wrapper.find('button.mint-section-card__toggle')
+      expect(toggle.attributes('aria-expanded')).toBe('true')
+      expect(wrapper.find('h2.mint-section-card__title > button').element).toBe(toggle.element)
+      expect(toggle.text()).toContain('Alerts')
+      expect(toggle.find('.action-probe').exists()).toBe(false)
+
+      await toggle.trigger('click')
+
+      expect(toggle.attributes('aria-expanded')).toBe('false')
+      expect(wrapper.find('.mint-section-card__body').isVisible()).toBe(false)
+      expect(wrapper.emitted('update:collapsed')).toEqual([[true]])
+      wrapper.unmount()
+    })
+
+    it('should keep the body visible with no toggle when collapsed is set without collapsible', () => {
+      const wrapper = mount(SectionCard, {
+        props: { title: 'Alerts', collapsed: true },
+        slots: { default: '<p class="body-probe">rows</p>' },
+        attachTo: document.body,
+      })
+      expect(wrapper.find('.mint-section-card__toggle').exists()).toBe(false)
+      expect(wrapper.find('.mint-section-card__body').isVisible()).toBe(true)
+      wrapper.unmount()
+    })
+  })
 })

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

@@ -52,13 +52,11 @@ describe('deprecation tags', () => {
 describe('root exports outside L1 and L2', () => {
   const ROOT_MODULES = ['composables/index.ts', 'components/index.ts', 'stores/index.ts', 'types/index.ts', 'apiErrors.ts', 'install.ts']
     .map(file => resolve(SRC, file))
-  const SUBPATHS = ['lab', 'shell', 'data', 'runtime']
-  const DEPRECATION = /^Import from '@morscherlab\/mint-sdk\/(\w+)'\. Removed in MINT 1\.5\.$/
 
-  function deprecatedRootNames(): ts.Symbol[] {
+  function otherRootNames(): string[] {
     const kept = new Set(ROOT_MODULES.flatMap(file => exportsOf(file).map(symbol => symbol.getName())))
     kept.add('MINTSdk').add('default')
-    return exportsOf(ROOT_ENTRY).filter(symbol => !kept.has(symbol.getName()))
+    return exportsOf(ROOT_ENTRY).map(symbol => symbol.getName()).filter(name => !kept.has(name))
   }
 
   it('should keep only the spec 3.3 L1 and L2 composable values in the composables barrel', () => {
@@ -72,19 +70,7 @@ describe('root exports outside L1 and L2', () => {
     ])
   })
 
-  it('should tag each other root name with the subpath that exports it untagged', () => {
-    const symbols = deprecatedRootNames()
-    const problems = symbols.flatMap((symbol) => {
-      const name = symbol.getName()
-      const tag = symbol.getJsDocTags(checker).find(item => item.name === 'deprecated')
-      const subpath = ts.displayPartsToString(tag?.text).match(DEPRECATION)?.[1]
-      if (!subpath || !SUBPATHS.includes(subpath)) return [`${name}: no deprecation tag naming a subpath`]
-      const target = exportsOf(resolve(SRC, `${subpath}.ts`)).find(item => item.getName() === name)
-      if (!target) return [`${name}: not exported from ./${subpath}`]
-      return isDeprecated(target) ? [`${name}: deprecated in ./${subpath}`] : []
-    })
-
-    expect(symbols.length).toBeGreaterThan(0)
-    expect(problems).toEqual([])
+  it('should export no root name outside the L1 and L2 modules', () => {
+    expect(otherRootNames()).toEqual([])
   })
 })

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

@@ -5,6 +5,7 @@ import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import {
   combinePluginJobSources,
   useJobCenter,
+  type PluginJobCenterSource,
   type UseJobCenterOptions,
 } from '../../composables/useJobCenter'
 import type { JobStateInput, JobStatus, TopBarJob } from '../../types/jobs'
@@ -228,6 +229,26 @@ describe('useJobCenter', () => {
     wrapper.unmount()
   })
 
+  it('should refuse a second cancel when the source still reports the job running after the first cancel', async () => {
+    const sourceJobs = shallowRef([job('running', 'fit')])
+    const cancelJob = vi.fn(async () => {})
+    const { tray } = mountComposable({ source: { jobs: sourceJobs, cancel: cancelJob }, loadOnMount: false })
+
+    const first = await tray.cancelJob(tray.jobs.value[0]!)
+    const second = await tray.cancelJob(tray.jobs.value[0]!)
+    const pendingWhileRunning = tray.isPending(tray.jobs.value[0]!)
+    sourceJobs.value = [job('cancelled', 'fit')]
+    await nextTick()
+
+    expect({
+      first,
+      second,
+      calls: cancelJob.mock.calls.length,
+      pendingWhileRunning,
+      pendingAfter: tray.isPending(tray.jobs.value[0]!),
+    }).toEqual({ first: true, second: false, calls: 1, pendingWhileRunning: true, pendingAfter: false })
+  })
+
   it('keeps awaiting input jobs in the active group', () => {
     const { tray } = mountComposable({
       source: { jobs: [job('awaiting_input')] },
@@ -406,6 +427,20 @@ describe('useJobCenter top-bar chip', () => {
     expect(tray.topBarJob.value).toBeNull()
   })
 
+  it('should alert only later failures when a replacement source already lists failures', async () => {
+    const source = shallowRef<PluginJobCenterSource>({ jobs: [job('completed', 'c')] })
+    const { tray } = mountComposable({ source, loadOnMount: false })
+    const replacementJobs = shallowRef([job('failed', 'old')])
+
+    source.value = { jobs: replacementJobs }
+    await nextTick()
+    const replaced = tray.topBarJob.value
+    replacementJobs.value = [job('failed', 'old'), job('failed', 'new')]
+    await nextTick()
+
+    expect([replaced, tray.topBarJob.value]).toEqual([null, { status: 'failed', label: '1 failed' }])
+  })
+
   it('should alert only failures after the first job list when nothing was stored', async () => {
     const jobs = shallowRef<JobStateInput[]>([])
     const { tray } = mountComposable({ source: { jobs }, loadOnMount: false })

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

@@ -1595,6 +1595,56 @@ describe('useJobsEndpoint', () => {
     }
   })
 
+  it.each([
+    { name: 'resolves when the server still has the job', answers: [() => response(completedJob('submitted-job'))], outcome: 'completed' },
+    { name: 'rejects when the server no longer has the job', answers: [() => response({ detail: 'Job not found' }, 404)], outcome: 'Job submitted-job is no longer available' },
+    { name: 'checks again on the next snapshot after a retryable error', answers: [() => response({ detail: 'Busy' }, 503), () => response(completedJob('submitted-job'))], outcome: 'completed' },
+  ])('should check a waited job that a stale stream snapshot omits and $name', async ({ answers, outcome }) => {
+    const encoder = new TextEncoder()
+    let pushFrame!: (frame: string) => void
+    const stream = new ReadableStream<Uint8Array>({
+      start(controller) { pushFrame = frame => controller.enqueue(encoder.encode(frame)) },
+    })
+    let lookups = 0
+    const transport = vi.fn<GeneratedAnalysisTransport>(async (input, init) => {
+      const url = String(input)
+      if (url.endsWith('/jobs/sessions') && init?.method === 'GET') return response({ sessions: [] })
+      if (url.endsWith('/jobs/sessions')) {
+        return response({ id: 'session-1', tab_id: 'tab-1', created_at: '', last_seen_at: '', active_job_ids: [] })
+      }
+      if (url.endsWith('/jobs/events')) return new Response(stream, { headers: { 'Content-Type': 'text/event-stream' } })
+      if (url.endsWith('/jobs') && init?.method === 'POST') return response(activeJob('submitted-job'))
+      if (url.endsWith('/jobs')) return response({ jobs: [] })
+      if (url.endsWith('/jobs/submitted-job')) {
+        lookups += 1
+        return lookups === 1 ? response(activeJob('submitted-job', 'running')) : answers[lookups - 2]!()
+      }
+      throw new Error(`Unexpected request: ${url}`)
+    })
+    const scope = effectScope()
+    const generated = scope.run(() => useJobsEndpoint({
+      baseUrl: '/api/demo',
+      transport,
+      storage: memoryStorage(),
+      createId: () => 'tab-1',
+      streamReconnectDelay: 60_000,
+    }))!
+
+    try {
+      const waiting = generated.wait(await generated.submit('run', {}))
+        .then(job => job.status, (cause: Error) => cause.message)
+      // Each snapshot was built before the submit reached the server.
+      for (const [index] of answers.entries()) {
+        await vi.waitFor(() => expect(lookups).toBe(index + 1))
+        pushFrame(`event: snapshot\ndata: ${JSON.stringify({ jobs: [] })}\n\n`)
+      }
+
+      expect(await waiting).toBe(outcome)
+    } finally {
+      scope.stop()
+    }
+  })
+
   it('rejects pending waiters when their job is deleted or the runtime is disposed', async () => {
     const queued = activeJob('delete-wait-job')
     const disposeJobRequest = deferred<Response>()

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

@@ -98,7 +98,7 @@ describe('provideOnboarding', () => {
     expect(state.active.value).toMatchObject({ step: { id: 'b' }, index: 0, count: 1 })
   })
 
-  it('should mark every step seen on dismiss and not start the tour again', async () => {
+  it('should mark every step of every tour seen on dismiss and not start a tour again', async () => {
     const state = setup()
     await flush()
     state.dismiss()
@@ -107,7 +107,7 @@ describe('provideOnboarding', () => {
     const again = setup()
     await flush()
 
-    expect(stored()).toEqual(expect.arrayContaining(['step:intro/a', 'step:intro/b']))
+    expect(stored()).toEqual(expect.arrayContaining(['step:intro/a', 'step:intro/b', 'step:list/new']))
     expect(again.active.value).toBeNull()
   })
 

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

@@ -1,3 +1,4 @@
+import { flushPromises } from '@vue/test-utils'
 import { effectScope, ref } from 'vue'
 import { afterEach, describe, expect, it, vi } from 'vitest'
 import { MintApiError } from '../../apiErrors'
@@ -95,18 +96,47 @@ describe('useVersionedSave', () => {
     scope.stop()
   })
 
-  it('should keep the conflict and the stale change when the reload brings no fresh record', async () => {
+  it.each([
+    ['the conflict', 'conflict', { version: 17 }],
+    ['the stale change', 'stale', { actors: ['Alice Chen'], fields: ['Notes'], at: '2026-10-23T10:00:00Z' }],
+  ] as const)('should keep %s when the reload brings no fresh record', async (_label, banner, expected) => {
     const { versioned, save, reload, scope } = setup()
-    save.mockRejectedValueOnce(conflictError({ version: 17 }))
-    await versioned.save()
-    emit({ actor_id: '7', fields: ['notes'] })
+    if (banner === 'conflict') {
+      save.mockRejectedValueOnce(conflictError({ version: 17 }))
+      await versioned.save()
+    } else {
+      emit({ actor_id: '7', fields: ['notes'], at: '2026-10-23T10:00:00Z' })
+    }
     const failure = new Error('Could not reload')
     reload.mockRejectedValueOnce(failure)
 
     await expect(versioned.reload()).rejects.toBe(failure)
 
-    expect(versioned.conflict.value).toEqual({ version: 17 })
-    expect(versioned.stale.value?.actors).toEqual(['Alice Chen'])
+    expect(versioned[banner].value).toEqual(expected)
+    scope.stop()
+  })
+
+  it('should show only the conflict when a save is refused after a write by someone else', async () => {
+    const { versioned, save, scope } = setup()
+    emit({ actor_id: '7', fields: ['notes'] })
+    save.mockRejectedValueOnce(conflictError({ version: 17 }))
+
+    await versioned.save()
+    emit({ actor_id: '9', fields: ['status'] })
+
+    expect([versioned.conflict.value, versioned.stale.value]).toEqual([{ version: 17 }, null])
+    scope.stop()
+  })
+
+  it('should send one request when save is called again while a save runs', async () => {
+    const pending: ((value: string) => void)[] = []
+    const { versioned, save, scope } = setup({ save: () => new Promise(resolve => { pending.push(resolve) }) })
+
+    const first = versioned.save()
+    const second = await Promise.race([versioned.save(), Promise.resolve('sent')])
+    pending.forEach(resolve => resolve('saved'))
+
+    expect([await first, second, save.mock.calls.length]).toEqual(['saved', undefined, 1])
     scope.stop()
   })
 
@@ -136,6 +166,41 @@ describe('useVersionedSave', () => {
     scope.stop()
   })
 
+  it('should ask for an automatic reload and show the stale change when the user starts editing during the refetch', async () => {
+    const { versioned, reload, dirty, scope } = setup()
+    dirty.value = false
+    let finish: () => void = () => {}
+    reload.mockImplementationOnce(() => new Promise<void>(resolve => { finish = resolve }))
+
+    emit({ actor_id: '7', fields: ['notes'], at: '2026-10-23T10:00:00Z' })
+    dirty.value = true
+    finish()
+    await flushPromises()
+
+    expect([reload.mock.calls[0], versioned.stale.value]).toEqual([
+      [true],
+      { actors: ['Alice Chen'], fields: ['Notes'], at: '2026-10-23T10:00:00Z' },
+    ])
+    scope.stop()
+  })
+
+  it('should not show the stale change when the topic changes during an automatic reload', async () => {
+    const { versioned, reload, dirty, topic, scope } = setup()
+    dirty.value = false
+    let finish: () => void = () => {}
+    reload.mockImplementationOnce(() => new Promise<void>(resolve => { finish = resolve }))
+
+    emit({ actor_id: '7', fields: ['notes'] })
+    dirty.value = true
+    topic.value = 'experiment:43'
+    await Promise.resolve()
+    finish()
+    await flushPromises()
+
+    expect(versioned.stale.value).toBeNull()
+    scope.stop()
+  })
+
   // A failed background refetch only keeps the clean form as it is; the host reports it.
   it('should not reject when the refetch for an event on a clean form fails', async () => {
     const { versioned, reload, dirty, scope } = setup()