@morscherlab/mint-sdk 1.4.0-beta.12 → 1.4.0-beta.14

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

@@ -12,6 +12,7 @@ import { defineControlModel, defineControls } from '../../composables/useControl
 import ThemeToggle from '../../components/ThemeToggle.vue'
 import SettingsModal from '../../components/SettingsModal.vue'
 import type { TopBarSettingsConfig } from '../../types/components'
+import type { TopBarJob } from '../../types/jobs'
 
 // Mock the usePlatform composable
 vi.mock('../../composables/usePlatform', () => ({
@@ -908,7 +909,7 @@ describe('AppTopBar', () => {
       const imageIcons = wrapper.findAll('.mint-plugin-icon__img')
       expect(imageIcons).toHaveLength(1)
       expect(imageIcons[0].attributes('src')).toBe(pngIcon)
-      expect(wrapper.find('.mint-page-selector__item-hint').exists()).toBe(false)
+      expect(wrapper.get('.mint-page-selector__item-hint').text()).toBe('Overview')
     })
   })
 
@@ -1237,6 +1238,26 @@ describe('AppTopBar', () => {
         expect(wrapper.find('.mint-topbar__plugin-name').exists()).toBe(false)
       })
 
+      it.each([
+        { case: 'integrated with display_name', integrated: true, plugin: { ...integratedPlugin, display_name: 'LC-MS Peak Review' }, props: { title: 'Ignored' }, seed: false, expected: 'LC-MS Peak Review' },
+        { case: 'integrated without display_name', integrated: true, plugin: integratedPlugin, props: {}, seed: false, expected: 'LC-MS Analysis' },
+        { case: 'standalone with a title', integrated: false, plugin: undefined, props: { title: 'Planner Dev' }, seed: true, expected: 'Planner Dev' },
+        { case: 'standalone seeded', integrated: false, plugin: undefined, props: {}, seed: true, expected: 'MS Planner' },
+        { case: 'standalone without a name', integrated: false, plugin: undefined, props: {}, seed: false, expected: null },
+      ])('should put the plugin name in the page selector crumb when $case', ({ integrated, plugin, props, seed, expected }) => {
+        mockPlatformCtx({ isIntegrated: integrated, plugin })
+        if (seed) providePluginIdentity({ plugin: { name: 'ms-planner', displayName: 'MS Planner' } })
+
+        try {
+          const wrapper = createWrapper({ ...props, pageSelector: pages, currentPageSelectorId: 'peaks' })
+
+          const name = wrapper.find('.mint-page-selector__plugin')
+          expect(name.exists() ? name.text() : null).toBe(expected)
+        } finally {
+          providePluginIdentity({ plugin: { name: '' } })
+        }
+      })
+
       it('should hide the plugin name when a page selector is shown', () => {
         mockPlatformCtx({ isIntegrated: true, plugin: integratedPlugin })
 
@@ -1483,4 +1504,157 @@ describe('AppTopBar', () => {
       expect(removeListener).toHaveBeenCalledWith('scroll', expect.any(Function), expect.objectContaining({ capture: true }))
     })
   })
+  describe('run slot', () => {
+    function mountRunSlot(job: TopBarJob | null | undefined, { experiment }: { experiment: boolean }) {
+      vi.mocked(usePlatform).mockReturnValueOnce({
+        integrated: computed(() => experiment),
+        isAdmin: computed(() => true),
+        can: () => true,
+        plugin: computed(() => undefined),
+        user: computed(() => undefined),
+        theme: computed(() => 'system' as const),
+        features: computed(() => undefined),
+      })
+      const appExperiment = {
+        popover: computed(() => ({ experimentName: 'Serine tracing', experimentCode: 'EXP-0142', showSave: true })),
+        selectorModal: computed(() => ({ open: false })),
+        openModal: vi.fn(),
+        closeModal: vi.fn(),
+        handleSave: vi.fn(),
+        handleDetach: vi.fn(),
+      } as unknown as AppExperimentState
+      return mount(AppTopBar, {
+        props: job === undefined ? { title: 'LEAF' } : { title: 'LEAF', job },
+        global: {
+          plugins: [createPinia()],
+          provide: { [APP_EXPERIMENT_KEY as symbol]: appExperiment },
+          stubs: { 'router-link': { template: '<a><slot /></a>' }, BaseModal: { template: '<div><slot /></div>' }, transition: false },
+        },
+      })
+    }
+
+    const running: TopBarJob = { status: 'running', label: 'Extracting', percent: 40 }
+
+    it.each([
+      ['no job prop, experiment', undefined, true, { popover: true, chip: false, idle: false, joined: false }],
+      ['idle, experiment', null, true, { popover: true, chip: true, idle: true, joined: false }],
+      ['running, experiment', running, true, { popover: true, chip: true, idle: false, joined: true }],
+      ['idle, standalone', null, false, { popover: false, chip: true, idle: true, joined: false }],
+      ['running, standalone', running, false, { popover: false, chip: true, idle: false, joined: true }],
+    ] as const)('should render the run slot for %s', async (_case, job, experiment, expected) => {
+      const wrapper = mountRunSlot(job, { experiment })
+      await waitForAsyncComponents(wrapper)
+
+      const chip = wrapper.find('.mint-topbar__job')
+      expect({
+        popover: wrapper.findComponent(ExperimentPopover).exists(),
+        chip: chip.exists(),
+        idle: chip.exists() && chip.classes('mint-topbar__job--idle'),
+        joined: wrapper.find('.mint-topbar__run-slot--joined').exists(),
+      }).toEqual(expected)
+    })
+
+    it.each([
+      [undefined, true],
+      [null, true],
+      [running, false],
+    ])('should pass showSave to the experiment chip when the job is %s', async (job, showSave) => {
+      const wrapper = mountRunSlot(job, { experiment: true })
+      await waitForAsyncComponents(wrapper)
+
+      expect(wrapper.findComponent(ExperimentPopover).props('showSave')).toBe(showSave)
+    })
+
+    it('should keep the slot joined until the job has left, then show the idle button', async () => {
+      const wrapper = mountRunSlot(running, { experiment: true })
+      await waitForAsyncComponents(wrapper)
+      const joined = () => wrapper.find('.mint-topbar__run-slot--joined').exists()
+
+      await wrapper.setProps({ job: null })
+      expect(joined()).toBe(true)
+      await vi.waitFor(() => expect(wrapper.find('.mint-topbar__job--idle').exists()).toBe(true))
+      expect(joined()).toBe(false)
+
+      await wrapper.setProps({ job: running })
+      await vi.waitFor(() => expect(wrapper.find('.mint-topbar__job--primary').exists()).toBe(true))
+      expect(joined()).toBe(true)
+
+      await wrapper.setProps({ job: undefined })
+      await vi.waitFor(() => expect(wrapper.find('.mint-topbar__job').exists()).toBe(false))
+      expect(joined()).toBe(false)
+    })
+
+    it('should join the slot when the job and the slot mount together', async () => {
+      const wrapper = mountRunSlot(undefined, { experiment: false })
+      await waitForAsyncComponents(wrapper)
+
+      await wrapper.setProps({ job: running })
+
+      await vi.waitFor(() => expect(wrapper.find('.mint-topbar__run-slot--joined').exists()).toBe(true))
+    })
+
+    it.each([
+      [120, '100%', 'Extracting 100%'],
+      [-5, '0%', 'Extracting 0%'],
+    ])('should clamp percent %s to %s', async (percent, width, name) => {
+      const wrapper = mountRunSlot({ ...running, percent }, { experiment: false })
+      await waitForAsyncComponents(wrapper)
+
+      const chip = wrapper.get('.mint-topbar__job')
+      expect(chip.get('.mint-topbar__job-bar > span').attributes('style')).toContain(`width: ${width}`)
+      expect(chip.attributes('aria-label')).toBe(name)
+    })
+
+    it.each([
+      [running, 'Job running'],
+      [{ status: 'awaiting_input', label: 'Decoding' } as TopBarJob, 'Job needs input'],
+      [{ status: 'failed', label: '1 failed' } as TopBarJob, 'Job failed'],
+      [null, ''],
+    ])('should announce the status of %o as %s', async (job, text) => {
+      const wrapper = mountRunSlot(job, { experiment: false })
+      await waitForAsyncComponents(wrapper)
+
+      const live = wrapper.get('.mint-topbar__job-status')
+      expect(live.attributes('aria-live')).toBe('polite')
+      expect(live.text()).toBe(text)
+    })
+
+    it.each([
+      ['queued', 'primary'],
+      ['running', 'primary'],
+      ['awaiting_input', 'warning'],
+      ['completed', 'success'],
+      ['failed', 'error'],
+      ['cancelled', 'neutral'],
+    ] as const)('should tone a %s job as %s', async (status, tone) => {
+      const wrapper = mountRunSlot({ status, label: 'Job' }, { experiment: false })
+      await waitForAsyncComponents(wrapper)
+
+      expect(wrapper.get('.mint-topbar__job').classes()).toContain(`mint-topbar__job--${tone}`)
+    })
+
+    it.each([
+      [running, 'Extracting 40%', true],
+      [{ status: 'completed', label: 'Saved to EXP-0142' } as TopBarJob, 'Saved to EXP-0142', false],
+    ])('should show only the status for %o and name it %s', async (job, name, bar) => {
+      const wrapper = mountRunSlot(job, { experiment: false })
+      await waitForAsyncComponents(wrapper)
+
+      const chip = wrapper.get('.mint-topbar__job')
+      expect(chip.text()).toBe('')
+      expect(chip.attributes('aria-label')).toBe(name)
+      expect(chip.attributes('title')).toBe(name)
+      expect(chip.find('.mint-topbar__job-bar').exists()).toBe(bar)
+      if (bar) expect(chip.get('.mint-topbar__job-bar > span').attributes('style')).toContain('width: 40%')
+    })
+
+    it.each([null, running])('should emit job-click when the job control is %s', async (job) => {
+      const wrapper = mountRunSlot(job, { experiment: false })
+      await waitForAsyncComponents(wrapper)
+
+      await wrapper.get('.mint-topbar__job').trigger('click')
+
+      expect(wrapper.emitted('job-click')).toEqual([[]])
+    })
+  })
 })

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

@@ -1,4 +1,5 @@
 import { mount } from '@vue/test-utils'
+import { nextTick } from 'vue'
 import { describe, expect, it } from 'vitest'
 import AppTopBarPageSelectorInternal from '../../components/internal/AppTopBarPageSelectorInternal.vue'
 
@@ -24,26 +25,139 @@ describe('AppTopBarPageSelectorInternal', () => {
     expect(wrapper.emitted('select')).toEqual([[{ id: 'Results', label: 'Results' }]])
   })
 
-  it('omits page hints from the menu for compact scanning', async () => {
+  it('should show each page hint under its label when the page has one', async () => {
     const wrapper = mount(AppTopBarPageSelectorInternal, {
       props: {
         currentPageId: 'downloads',
         pages: [
           { id: 'downloads', label: 'Downloads', hint: 'Paste links and queue downloads' },
-          { id: 'settings', label: 'Settings', hint: 'Credentials and destination' },
+          { id: 'settings', label: 'Settings' },
         ],
       },
     })
 
     await wrapper.get('.mint-page-selector__trigger').trigger('click')
 
-    expect(wrapper.findAll('.mint-page-selector__item-label').map(item => item.text())).toEqual([
-      'Downloads',
-      'Settings',
+    const rows = wrapper.findAll('.mint-page-selector__item')
+    expect(rows.map(row => row.find('.mint-page-selector__item-hint').exists() ? row.get('.mint-page-selector__item-hint').text() : null)).toEqual([
+      'Paste links and queue downloads',
+      null,
     ])
-    expect(wrapper.find('.mint-page-selector__item-hint').exists()).toBe(false)
-    expect(wrapper.text()).not.toContain('Paste links')
-    expect(wrapper.text()).not.toContain('Credentials')
+  })
+
+  it.each([
+    { pluginName: 'LEAF', crumb: ['LEAF', '/'], title: 'LEAF pages' },
+    { pluginName: undefined, crumb: [], title: 'Pages' },
+  ])('should name the menu after the plugin when pluginName is $pluginName', async ({ pluginName, crumb, title }) => {
+    const wrapper = mount(AppTopBarPageSelectorInternal, {
+      props: { pluginName, currentPageId: 'Extract', pages: ['Extract', 'Analysis'] },
+    })
+
+    expect(wrapper.findAll('.mint-page-selector__plugin, .mint-page-selector__slash').map(el => el.text())).toEqual(crumb)
+
+    await wrapper.get('.mint-page-selector__trigger').trigger('click')
+
+    expect(wrapper.get('.mint-page-selector__menu-title').text()).toBe(title)
+    expect(wrapper.get('[role="menu"]').attributes('aria-label')).toBe(title)
+  })
+
+  it('should show number keys for the first nine pages only', async () => {
+    const pages = Array.from({ length: 10 }, (_, i) => `Page ${i + 1}`)
+    const wrapper = mount(AppTopBarPageSelectorInternal, { props: { pages } })
+
+    await wrapper.get('.mint-page-selector__trigger').trigger('click')
+
+    expect(wrapper.findAll('.mint-page-selector__item').map(row => row.find('.mint-page-selector__item-key').exists() ? row.get('.mint-page-selector__item-key').text() : null)).toEqual(
+      ['1', '2', '3', '4', '5', '6', '7', '8', '9', null],
+    )
+  })
+
+  describe('keyboard', () => {
+    const pages = [
+      { id: 'check', label: 'Quick check' },
+      { id: 'extract', label: 'Extract' },
+      { id: 'locked', label: 'Locked', disabled: true },
+      { id: 'analysis', label: 'Analysis' },
+    ]
+    const focusedLabel = () => document.activeElement?.querySelector('.mint-page-selector__item-label')?.textContent
+
+    function mountAttached() {
+      return mount(AppTopBarPageSelectorInternal, {
+        props: { pages, currentPageId: 'extract' },
+        attachTo: document.body,
+      })
+    }
+
+    it.each(['ArrowDown', 'Enter', ' '])('should open the menu on the current row when %j is pressed on the trigger', async (key) => {
+      const wrapper = mountAttached()
+
+      await wrapper.get('.mint-page-selector__trigger').trigger('keydown', { key })
+      await nextTick()
+
+      expect(wrapper.find('.mint-page-selector__menu').exists()).toBe(true)
+      expect(focusedLabel()).toBe('Extract')
+      wrapper.unmount()
+    })
+
+    it('should move between enabled rows with arrows, Home and End', async () => {
+      const wrapper = mountAttached()
+      await wrapper.get('.mint-page-selector__trigger').trigger('keydown', { key: 'ArrowDown' })
+      await nextTick()
+      const menu = wrapper.get('.mint-page-selector__menu')
+
+      const visited: Array<string | null | undefined> = []
+      for (const key of ['ArrowDown', 'ArrowDown', 'ArrowUp', 'Home', 'ArrowUp', 'End']) {
+        await menu.trigger('keydown', { key })
+        visited.push(focusedLabel())
+      }
+
+      expect(visited).toEqual(['Analysis', 'Quick check', 'Analysis', 'Quick check', 'Analysis', 'Analysis'])
+      wrapper.unmount()
+    })
+
+    it.each(['Enter', ' '])('should activate the focused row and refocus the trigger when %j is pressed', async (key) => {
+      const wrapper = mountAttached()
+      await wrapper.get('.mint-page-selector__trigger').trigger('keydown', { key: 'ArrowDown' })
+      await nextTick()
+      const menu = wrapper.get('.mint-page-selector__menu')
+
+      await menu.trigger('keydown', { key: 'ArrowDown' })
+      await menu.trigger('keydown', { key })
+
+      expect(wrapper.emitted('select')).toEqual([[pages[3]]])
+      expect(wrapper.find('.mint-page-selector__menu').exists()).toBe(false)
+      expect(document.activeElement).toBe(wrapper.get('.mint-page-selector__trigger').element)
+      wrapper.unmount()
+    })
+
+    it.each([
+      { key: '4', emitted: [[pages[3]]], open: false },
+      { key: '3', emitted: undefined, open: true },
+      { key: '9', emitted: undefined, open: true },
+    ])('should handle digit $key as a jump to that page', async ({ key, emitted, open }) => {
+      const wrapper = mountAttached()
+      await wrapper.get('.mint-page-selector__trigger').trigger('keydown', { key: 'ArrowDown' })
+      await nextTick()
+
+      await wrapper.get('.mint-page-selector__menu').trigger('keydown', { key })
+
+      expect(wrapper.emitted('select')).toEqual(emitted)
+      expect(wrapper.find('.mint-page-selector__menu').exists()).toBe(open)
+      wrapper.unmount()
+    })
+
+    it('should close on Escape and return focus to the trigger', async () => {
+      const wrapper = mountAttached()
+      await wrapper.get('.mint-page-selector__trigger').trigger('keydown', { key: 'ArrowDown' })
+      await nextTick()
+
+      await wrapper.get('.mint-page-selector__menu').trigger('keydown', { key: 'Escape' })
+      await nextTick()
+
+      expect(wrapper.find('.mint-page-selector__menu').exists()).toBe(false)
+      expect(document.activeElement).toBe(wrapper.get('.mint-page-selector__trigger').element)
+      wrapper.unmount()
+    })
   })
 
   it('closes linked page actions without emitting select', async () => {
@@ -171,6 +285,8 @@ describe('AppTopBarPageSelectorInternal', () => {
 
     await wrapper.get('.mint-page-selector__trigger').trigger('click')
 
-    expect(wrapper.findAll('.mint-page-selector__item')[0].classes()).toContain('mint-page-selector__item--active')
+    const rows = wrapper.findAll('.mint-page-selector__item')
+    expect(rows[0].classes()).toContain('mint-page-selector__item--active')
+    expect(rows.map(row => row.attributes('aria-current'))).toEqual(['page', undefined])
   })
 })

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

@@ -35,6 +35,25 @@ describe('BaseButton icon', () => {
   })
 })
 
+// Text-only labels get a span so the stylesheet can trim the text box to the cap
+// height (Geist sits ~1.6px high in a flex-centred button otherwise). Element
+// children keep their flex layout, so they are not wrapped.
+describe('BaseButton label', () => {
+  it.each([
+    ['plain text', 'Cancel', 'Cancel'],
+    ['element children', '<svg /><span>Export</span>', null],
+  ])('should wrap the label in a span only for a %s slot', (_case, slot, label) => {
+    const wrapper = mount(BaseButton, { slots: { default: slot } })
+    const span = wrapper.find('.mint-button__label')
+    expect(span.exists() ? span.text() : null).toBe(label)
+  })
+
+  it('should trim the label text box to the cap height', () => {
+    const css = readFileSync(resolve(__dirname, '../../styles/components/button.css'), 'utf8')
+    expect(css).toMatch(/\.mint-button__label \{\s*text-box: trim-both cap alphabetic;\s*\}/)
+  })
+})
+
 // jsdom has no layout, so this pins the stylesheet contract instead: a bare
 // <svg> rendered by an icon-only BaseButton must be sized by the icon box, otherwise it
 // collapses to zero width as a flex item (FilePicker source toggles, beta.14).

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

@@ -64,9 +64,10 @@ interface ModalProps {
   currentExperimentId?: number | null
 }
 
-function mountModal(props: ModalProps) {
+function mountModal(props: ModalProps, slots: Record<string, string> = {}) {
   return mount(ExperimentSelectorModal, {
     props,
+    slots,
     global: {
       stubs: {
         BaseModal: {
@@ -202,6 +203,38 @@ describe('ExperimentSelectorModal', () => {
     expect(wrapper.emitted('update:open')).toEqual([[false]])
   })
 
+  it('should show the description slot above the experiment list', () => {
+    const wrapper = mountModal({ open: true }, { description: '<p class="why">Keep the result with its samples.</p>' })
+
+    const description = wrapper.get('.mint-experiment-selector__description')
+    expect(description.find('.why').text()).toBe('Keep the result with its samples.')
+    expect(description.element.compareDocumentPosition(wrapper.get('.mint-experiment-selector').element))
+      .toBe(Node.DOCUMENT_POSITION_FOLLOWING)
+  })
+
+  it.each([
+    [null, false],
+    [7, true],
+  ])('should render the footer slot when the current experiment is %s, with the clear button %s', (currentExperimentId, hasClear) => {
+    const wrapper = mountModal({ open: true, currentExperimentId }, { footer: '<span class="extra">Skip</span>' })
+
+    const footer = wrapper.get('.mint-experiment-selector__footer')
+    expect(footer.find('.extra').exists()).toBe(true)
+    expect(footer.find('.mint-experiment-selector__clear-btn').exists()).toBe(hasClear)
+  })
+
+  it('should close without touching the store from the footer slot close()', async () => {
+    const store = useExperimentStore()
+    const wrapper = mountModal({ open: true }, {
+      footer: '<template #footer="{ close }"><button class="skip" @click="close">Skip</button></template>',
+    })
+
+    await wrapper.get('.skip').trigger('click')
+
+    expect(wrapper.emitted('update:open')).toEqual([[false]])
+    expect(store.current).toBeNull()
+  })
+
   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'

package/src/__tests__/styles/menusShellRefresh.test.ts

@@ -30,8 +30,14 @@ describe('menus and app shell styles', () => {
     expect(css('app-pill-nav.css')).toMatch(/\.mint-pill-nav__item\s*\{[^}]*height:\s*1\.625rem;/)
   })
 
-  it('should size the page selector trigger to the 36px identity tile', () => {
-    expect(css('app-page-selector.css')).toMatch(/\.mint-page-selector__trigger\s*\{[^}]*height:\s*2\.25rem;/)
+  // Design v2 option C: the page switcher sits in the crumb at the 32px top-bar control height.
+  it('should size the page selector trigger to the 32px top-bar control height', () => {
+    expect(css('app-page-selector.css')).toMatch(/\.mint-page-selector__trigger\s*\{[^}]*height:\s*2rem;/)
+  })
+
+  // A content-box menu measured 310px, and the platform's <a> rows (100% + padding) overflowed it.
+  it.each(['menu', 'item'])('should size the page selector %s as border-box', (part) => {
+    expect(css('app-page-selector.css')).toMatch(new RegExp(`\\.mint-page-selector__${part}\\s*\\{[^}]*box-sizing:\\s*border-box;`))
   })
 
   // Shrinking the tile beside the identity also shrank structured icons inside their solid chip, drawing a ring.

package/src/components/AppTopBar.story.vue

@@ -4,14 +4,26 @@ import Avatar from './Avatar.vue'
 import PluginIcon from './PluginIcon.vue'
 import { ExperimentProvider } from '../__stories__/experiment-helpers'
 import { providePluginIdentity } from '../composables/pluginIdentity'
-import type { App } from 'vue'
+import { ref, type App } from 'vue'
 import type {
   TopBarVariant,
   PillNavItem,
   PageSelectorItem,
   PluginInfo,
+  TopBarJob,
 } from '../types'
 
+const runSlotJobs: { label: string; job: TopBarJob | null }[] = [
+  { label: 'Idle', job: null },
+  { label: 'Running', job: { status: 'running', label: 'Extracting', percent: 40 } },
+  { label: 'Needs input', job: { status: 'awaiting_input', label: 'Decoding', percent: 62 } },
+  { label: 'Saved', job: { status: 'completed', label: 'Saved to EXP-0142' } },
+  { label: 'Failed', job: { status: 'failed', label: '1 failed' } },
+]
+
+// An index, not the job object: Histoire merges object state across updates.
+const liveRow = ref(0)
+
 const variants: TopBarVariant[] = ['card', 'default']
 
 const samplePillNav: PillNavItem[] = [
@@ -43,10 +55,12 @@ const samplePageSelector: PageSelectorItem[] = [
   { id: 'admin', label: 'Admin' },
 ]
 
+// The menu shows each hint as a second line; a page without one stays a single line.
 const samplePluginPages: PageSelectorItem[] = [
-  { id: 'peaks', label: 'Peak integration' },
-  { id: 'calibration', label: 'Calibration' },
-  { id: 'report', label: 'Report' },
+  { id: 'peaks', label: 'Peak integration', hint: 'Integrate peaks and review the fits per sample' },
+  { id: 'calibration', label: 'Calibration', hint: 'Fit standard curves and check their residuals' },
+  { id: 'report', label: 'Report', hint: 'Export concentrations for the experiment' },
+  { id: 'settings', label: 'Settings' },
 ]
 
 const samplePlugin: PluginInfo = {
@@ -147,6 +161,47 @@ function seedIdentity({ app }: { app: App }) {
       </div>
     </Variant>
 
+    <Variant title="Run slot · Experiment and job">
+      <!-- The plugin picks the viewer's own job; the bar joins it to the experiment chip. Like LEAF Extract: no Save. -->
+      <div style="padding: 2rem; background: var(--bg-primary); display: grid; gap: 0.75rem;">
+        <ExperimentProvider :plugin="samplePlugin" :save="false">
+          <AppTopBar
+            v-for="row in runSlotJobs"
+            :key="row.label"
+            :spec="{ themeToggle: true, homePath: '' }"
+            :page-selector="samplePluginPages"
+            current-page-selector-id="peaks"
+            :job="row.job"
+          />
+        </ExperimentProvider>
+      </div>
+    </Variant>
+
+    <Variant title="Run slot · Animation">
+      <div style="padding: 2rem; background: var(--bg-primary); display: grid; gap: 0.75rem;">
+        <div style="display: flex; gap: 0.5rem;">
+          <button
+            v-for="(row, index) in runSlotJobs"
+            :key="row.label"
+            type="button"
+            data-run-slot-state
+            style="padding: 0.25rem 0.75rem; border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--bg-card); color: var(--text-primary); cursor: pointer;"
+            @click="liveRow = index"
+          >
+            {{ row.label }}
+          </button>
+        </div>
+        <ExperimentProvider :plugin="samplePlugin" :save="false">
+          <AppTopBar
+            :spec="{ themeToggle: true, homePath: '' }"
+            :page-selector="samplePluginPages"
+            current-page-selector-id="peaks"
+            :job="runSlotJobs[liveRow].job"
+          />
+        </ExperimentProvider>
+      </div>
+    </Variant>
+
     <Variant title="Refresh · Admin">
       <div style="padding: 2rem; background: var(--bg-primary); min-height: 12rem;">
         <AppTopBar