@morscherlab/mint-sdk 1.4.0-beta.17 → 1.4.0-beta.19

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

@@ -1,13 +1,13 @@
-import { mount } from '@vue/test-utils'
+import { flushPromises, mount } from '@vue/test-utils'
 import { defineComponent, nextTick, shallowRef } from 'vue'
-import { describe, expect, it, vi } from 'vitest'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
 import {
   combinePluginJobSources,
   useJobCenter,
   type UseJobCenterOptions,
 } from '../../composables/useJobCenter'
-import type { JobStateInput, JobStatus } from '../../types/jobs'
+import type { JobStateInput, JobStatus, TopBarJob } from '../../types/jobs'
 
 function job(status: JobStatus, id: string = status): JobStateInput {
   return {
@@ -281,3 +281,262 @@ describe('useJobCenter', () => {
     expect(tray.deletableJobs.value).toEqual([])
   })
 })
+
+describe('useJobCenter top-bar chip', () => {
+  const platformWindow = window as unknown as { __MINT_PLATFORM__?: unknown }
+  function integrateAs(userId: number, pluginId = 'peak-qc') {
+    platformWindow.__MINT_PLATFORM__ = { user: { id: userId }, plugin: { id: pluginId } }
+  }
+  const owned = (status: JobStatus, id: string, owner: string | null, user = owner): JobStateInput => ({
+    ...job(status, id), owner_user_id: owner, user_id: user,
+  })
+
+  beforeEach(() => localStorage.clear())
+  afterEach(() => {
+    delete platformWindow.__MINT_PLATFORM__
+    vi.useRealTimers()
+  })
+
+  it.each<[string, JobStateInput[], TopBarJob | null]>([
+    ['an awaiting-input job first', [job('running', 'r'), job('awaiting_input', 'a')],
+      { status: 'awaiting_input', label: 'a waiting for input', percent: null }],
+    ['the first active job', [job('queued', 'q'), job('running', 'r')],
+      { status: 'queued', label: 'q queued', percent: null }],
+    ['the progress message and percent of a running job',
+      [{ ...job('running', 'r'), progress: { ...job('running', 'r').progress, message: 'Integrating' } }],
+      { status: 'running', label: 'Integrating', percent: 42 }],
+    ['nothing without active, held or failed jobs', [job('completed', 'c'), job('cancelled', 'x')], null],
+  ])('should show %s when the viewer runs jobs', (_case, jobs, expected) => {
+    const { tray } = mountComposable({ source: { jobs }, loadOnMount: false })
+    expect(tray.topBarJob.value).toEqual(expected)
+  })
+
+  it('should show only the viewer own jobs when the page is integrated', () => {
+    integrateAs(1)
+    const { tray } = mountComposable({
+      source: { jobs: [owned('running', 'theirs', '2'), owned('queued', 'mine', null, '1')] },
+      loadOnMount: false,
+    })
+    expect(tray.topBarJob.value).toMatchObject({ status: 'queued', label: 'mine queued' })
+  })
+
+  it.each([
+    ['auth is off', false, 'running'],
+    ['auth is required', true, undefined],
+  ])('should treat jobs of an integrated page without a signed-in user as own only when %s', (_case, authRequired, status) => {
+    platformWindow.__MINT_PLATFORM__ = { user: null, plugin: { id: 'peak-qc' }, authRequired }
+    const { tray } = mountComposable({ source: { jobs: [owned('running', 'theirs', '2')] }, loadOnMount: false })
+    expect(tray.topBarJob.value?.status).toBe(status)
+  })
+
+  it('should hold a completed job when several jobs leave the active list in one update', async () => {
+    const jobs = shallowRef([job('running', 'a'), job('running', 'b')])
+    const { tray } = mountComposable({ source: { jobs }, loadOnMount: false })
+
+    jobs.value = [job('failed', 'a'), job('completed', 'b')]
+    await nextTick()
+
+    expect(tray.topBarJob.value).toEqual({ status: 'completed', label: 'b completed' })
+  })
+
+  it('should close the open tray instead of selecting the held job when the chip is clicked', async () => {
+    const jobs = shallowRef([job('running', 'r')])
+    const { tray } = mountComposable({ source: { jobs }, loadOnMount: false })
+    const onSelect = vi.fn()
+    jobs.value = [job('completed', 'r')]
+    await nextTick()
+    tray.open()
+
+    tray.handleTopBarClick(onSelect)
+
+    expect([tray.isOpen.value, onSelect.mock.calls.length]).toEqual([false, 0])
+  })
+
+  it('should drop the held job when it leaves the job list', async () => {
+    const jobs = shallowRef([job('running', 'r')])
+    const { tray } = mountComposable({ source: { jobs }, loadOnMount: false })
+    const onSelect = vi.fn()
+    jobs.value = [job('completed', 'r')]
+    await nextTick()
+    jobs.value = []
+    await nextTick()
+
+    tray.handleTopBarClick(onSelect)
+
+    expect([tray.topBarJob.value, onSelect.mock.calls.length, tray.isOpen.value]).toEqual([null, 0, true])
+  })
+
+  it('should mark a failure seen when the job fails while the tray is open', async () => {
+    localStorage.setItem('mint.jobs.standalone.seen-failed', '[]')
+    const jobs = shallowRef([job('running', 'r')])
+    const { tray } = mountComposable({ source: { jobs }, loadOnMount: false })
+    tray.open()
+    await nextTick()
+
+    jobs.value = [job('failed', 'r')]
+    await nextTick()
+    tray.close()
+    await nextTick()
+
+    expect(tray.topBarJob.value).toBeNull()
+  })
+
+  it.each([
+    ['an empty list', [] as JobStateInput[], { status: 'failed', label: '1 failed' }],
+    ['an old failure', [job('failed', 'old')], { status: 'failed', label: '1 failed' }],
+  ])('should take the baseline when the initial load returns %s', async (_case, loaded, later) => {
+    const jobs = shallowRef<JobStateInput[]>([])
+    const { tray } = mountComposable({ source: { jobs, refresh: async () => { jobs.value = loaded } } })
+    await flushPromises()
+    const baseline = tray.topBarJob.value
+
+    jobs.value = [...loaded, job('failed', 'new')]
+    await nextTick()
+
+    expect([baseline, tray.topBarJob.value]).toEqual([null, later])
+  })
+
+  it('should not hold a job when the source is replaced by one where it already completed', async () => {
+    const source = shallowRef({ jobs: [job('running', 'x')] })
+    const { tray } = mountComposable({ source, loadOnMount: false })
+
+    source.value = { jobs: [job('completed', 'x')] }
+    await nextTick()
+
+    expect(tray.topBarJob.value).toBeNull()
+  })
+
+  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 })
+
+    jobs.value = [job('failed', 'old')]
+    await nextTick()
+    const baseline = tray.topBarJob.value
+    jobs.value = [job('failed', 'old'), job('failed', 'new')]
+    await nextTick()
+
+    expect({
+      baseline,
+      later: tray.topBarJob.value,
+      stored: JSON.parse(localStorage.getItem('mint.jobs.standalone.seen-failed') ?? 'null'),
+    }).toEqual({ baseline: null, later: { status: 'failed', label: '1 failed' }, stored: ['old'] })
+  })
+
+  it.each<[string, TopBarJob | null, TopBarJob]>([
+    ['use the override', { status: 'completed', label: 'Saved to the experiment' },
+      { status: 'completed', label: 'Saved to the experiment' }],
+    ['keep the default', null, { status: 'completed', label: 'r completed' }],
+  ])('should %s for the held job when the topBarJob option returns that value', async (_case, override, expected) => {
+    const jobs = shallowRef([job('running', 'r')])
+    const topBarJob = vi.fn((shown: { status: JobStatus }) => (shown.status === 'completed' ? override : null))
+    const { tray } = mountComposable({ source: { jobs }, loadOnMount: false, topBarJob })
+
+    jobs.value = [job('completed', 'r')]
+    await nextTick()
+
+    expect(tray.topBarJob.value).toEqual(expected)
+  })
+
+  it('should hold a just-completed job for 6 s and select it on click when nothing else runs', async () => {
+    vi.useFakeTimers()
+    const jobs = shallowRef([job('running', 'r')])
+    const { tray } = mountComposable({ source: { jobs }, loadOnMount: false })
+    const onSelect = vi.fn()
+
+    jobs.value = [{ ...job('completed', 'r') }]
+    await nextTick()
+    const held = tray.topBarJob.value
+    tray.handleTopBarClick(onSelect)
+    vi.advanceTimersByTime(5999)
+    const stillHeld = tray.topBarJob.value
+    vi.advanceTimersByTime(1)
+    tray.handleTopBarClick(onSelect)
+
+    expect({
+      held,
+      stillHeld: stillHeld?.status,
+      after: tray.topBarJob.value,
+      selected: onSelect.mock.calls.map(([selected]) => selected.job_id),
+      open: tray.isOpen.value,
+    }).toEqual({
+      held: { status: 'completed', label: 'r completed' },
+      stillHeld: 'completed',
+      after: null,
+      selected: ['r'],
+      open: true,
+    })
+  })
+
+  it.each([
+    ['standalone', () => undefined, 'mint.jobs.standalone.seen-failed'],
+    ['integrated', () => integrateAs(1), 'mint.jobs.peak-qc.seen-failed'],
+  ])('should count unseen failures until the tray opens when %s', async (_mode, setup, key) => {
+    setup()
+    localStorage.setItem(key, '[]')
+    const jobs = [owned('failed', 'f1', '1'), owned('failed', 'f2', '1'), owned('failed', 'other', '2')]
+    const { tray } = mountComposable({ source: { jobs }, loadOnMount: false })
+    const before = tray.topBarJob.value
+
+    tray.open()
+    await nextTick()
+    const reopened = mountComposable({ source: { jobs }, loadOnMount: false }).tray
+
+    expect({
+      before,
+      after: tray.topBarJob.value,
+      reopened: reopened.topBarJob.value,
+      stored: JSON.parse(localStorage.getItem(key) ?? 'null'),
+    }).toEqual({
+      before: { status: 'failed', label: _mode === 'standalone' ? '3 failed' : '2 failed' },
+      after: null,
+      reopened: null,
+      stored: _mode === 'standalone' ? ['f1', 'f2', 'other'] : ['f1', 'f2'],
+    })
+  })
+
+  it.each<[string, TopBarJob | null, TopBarJob]>([
+    ['replace the default mapping', { status: 'running', label: 'Decoding in the browser', percent: 10 },
+      { status: 'running', label: 'Decoding in the browser', percent: 10 }],
+    ['keep the default mapping', null, { status: 'awaiting_input', label: 'a waiting for input', percent: null }],
+  ])('should %s when the topBarJob option returns that value', (_case, override, expected) => {
+    const { tray } = mountComposable({
+      source: { jobs: [job('awaiting_input', 'a')] },
+      loadOnMount: false,
+      topBarJob: () => override,
+    })
+    expect(tray.topBarJob.value).toEqual(expected)
+  })
+
+  it('should count only completed jobs when the list holds finished and active jobs', () => {
+    const { tray } = mountComposable({
+      source: { jobs: [job('completed', 'c1'), job('completed', 'c2'), job('failed', 'f'), job('running', 'r')] },
+      loadOnMount: false,
+    })
+    expect(tray.completedCount.value).toBe(2)
+  })
+})
+
+describe('useJobCenter row view', () => {
+  const awaiting = job('awaiting_input', 'a')
+  const running = job('running', 'r')
+
+  it.each<[string, JobStateInput, UseJobCenterOptions['rowJob'], ReturnType<ReturnType<typeof useJobCenter>['rowView']>]>([
+    ['absent', running, undefined, { status: 'running', percent: 42, message: 'running' }],
+    ['null', awaiting, () => null,
+      { status: 'awaiting_input', percent: null, message: 'Waiting for external input' }],
+    ['a status and percent', awaiting, () => ({ status: 'running', percent: 40 }),
+      { status: 'running', percent: 40, message: 'Waiting for external input' }],
+    ['a message only', running, () => ({ message: 'Decoding 3/8' }),
+      { status: 'running', percent: 42, message: 'Decoding 3/8' }],
+    ['undefined and null fields', running, () => ({ status: null, percent: undefined, message: null }),
+      { status: 'running', percent: 42, message: 'running' }],
+    ['a status only', running, () => ({ status: 'awaiting_input' }),
+      { status: 'awaiting_input', percent: 42, message: 'running' }],
+    ['a null percent', running, () => ({ percent: null }),
+      { status: 'running', percent: null, message: 'running' }],
+  ])('should resolve the row view from the job when the row override is %s', (_case, input, rowJob, expected) => {
+    const { tray } = mountComposable({ source: { jobs: [input] }, loadOnMount: false, rowJob })
+    expect(tray.rowView(tray.jobs.value[0]!)).toEqual(expected)
+  })
+})

package/src/__tests__/docs/frontendDocsCatalog.test.ts

@@ -266,13 +266,13 @@ describe('frontend docs catalog coverage', () => {
     })
   })
 
-  it('documents only the source-driven JobsStatusTray props', () => {
+  it('documents only the center-driven JobsStatusTray props', () => {
     const manifest = extractFrontendManifest()
     const jobsStatusTray = manifest.categories.components.find(item => item.name === 'JobsStatusTray')
 
     expect(jobsStatusTray?.props?.map(prop => prop.name).sort()).toEqual([
-      'loadOnMount',
-      'source',
+      'center',
+      'confirm',
       'teleportTo',
       'title',
     ])
@@ -375,6 +375,7 @@ describe('frontend docs catalog coverage', () => {
       'usePluginJobs',
       'useGeneratedAnalysis',
       'usePluginJobCenter',
+      'JobsStatusTrayTab',
       'useRequestSyncState',
       'useAnalysisArtifacts',
       'useTimeUtils',

package/src/components/AppTopBar.vue

@@ -49,10 +49,18 @@ interface Props {
    * `null` shows the idle Jobs button. Both emit `job-click`.
    */
   job?: TopBarJob | null
+  /** Completed jobs, shown as a small count on the idle Jobs button. Hidden when 0. */
+  jobsDone?: number
+  /** Whether the jobs panel is open; `aria-expanded` of the job control. */
+  jobsOpen?: boolean
+  /** DOM id of the jobs panel; `aria-controls` of the job control. */
+  jobsPanelId?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
   spec: () => ({}),
+  // No boolean cast: without a jobs panel the control has no aria-expanded.
+  jobsOpen: undefined,
 })
 
 const config = computed(() => applySpecDefaults({
@@ -377,6 +385,8 @@ const normalizedSettingsTabs = computed<SettingsTab[]>(() =>
               :class="['mint-topbar__job', `mint-topbar__job--${JOB_TONES[job.status]}`]"
               :title="jobName"
               :aria-label="jobName"
+              :aria-expanded="jobsOpen"
+              :aria-controls="jobsPanelId"
               @click="emit('job-click')"
             >
               <component
@@ -394,10 +404,14 @@ const normalizedSettingsTabs = computed<SettingsTab[]>(() =>
               key="idle"
               type="button"
               class="mint-topbar__job mint-topbar__job--idle"
+              :aria-label="jobsDone ? `Jobs, ${jobsDone} completed` : undefined"
+              :aria-expanded="jobsOpen"
+              :aria-controls="jobsPanelId"
               @click="emit('job-click')"
             >
               <ListChecks class="mint-topbar__job-icon" :size="14" aria-hidden="true" />
               <span class="mint-topbar__job-label">Jobs</span>
+              <span v-if="jobsDone" class="mint-topbar__job-count" aria-hidden="true">{{ jobsDone }}</span>
             </button>
           </Transition>
         </div>

package/src/components/GeneratedPluginView.vue

@@ -12,11 +12,11 @@ import { computed, onMounted, provide, reactive, ref, watch } from 'vue'
 import { generatedJobDefaults, generatedJobFormSchema, normalizeGeneratedJobInput } from '../generated/schema'
 import type { FormSchema } from '../types/form-builder'
 import type {
-  GeneratedAnalysisJob,
   GeneratedAnalysisResult,
   GeneratedJobDefinition,
 } from '../types/generated-ui'
 import type { PillNavItem, SidebarToolSection } from '../types'
+import type { JobState } from '../types/jobs'
 import {
   useJobsEndpoint,
   type GeneratedAnalysisTransport,
@@ -24,7 +24,6 @@ import {
 import AlertBox from './AlertBox.vue'
 import EmptyState from './EmptyState.vue'
 import GeneratedResultRenderer from './GeneratedResultRenderer.vue'
-import JobsStatusTray from './JobsStatusTray.vue'
 import LoadingSpinner from './LoadingSpinner.vue'
 import PluginWorkspaceView from './PluginWorkspaceView.vue'
 import { GENERATED_JOBS_API_KEY } from './internal/generatedJobsApi'
@@ -84,6 +83,7 @@ const workspace = computed(() => definePluginWorkspaceView({
     standaloneLabel: props.showStandaloneLabel ? 'Standalone' : false,
   },
   sidebar: { title: 'Parameters', panels: panels.value, forms: forms.value },
+  jobs: generated,
 }))
 
 // Seeds the standalone top bar icon; the title and subtitle above win over the seeded text.
@@ -137,7 +137,7 @@ async function submitJob(sectionId: string, values: Record<string, unknown>): Pr
   await generated.submit(definition.id, normalizeGeneratedJobInput(definition, values))
 }
 
-function selectJob(job: GeneratedAnalysisJob): void {
+function selectJob(job: JobState): void {
   selectedJobId.value = job.job_id
   activeDefinitionId.value = String(job.metadata.definition_id ?? activeDefinitionId.value)
 }
@@ -166,6 +166,7 @@ onMounted(() => {
     :form-disabled="generated.isSubmitting.value"
     @update:values="updateValues"
     @form-submit="submitJob"
+    @job-select="selectJob"
   >
     <main class="mint-generated-workspace">
       <div v-if="generated.isLoading.value" class="mint-generated-workspace__loading">
@@ -200,12 +201,6 @@ onMounted(() => {
           />
         </section>
       </template>
-
-      <JobsStatusTray
-        :source="generated"
-        :teleport-to="false"
-        @select="selectJob"
-      />
     </main>
   </PluginWorkspaceView>
 </template>

package/src/components/JobsStatusTray.story.vue

@@ -1,6 +1,9 @@
 <script setup lang="ts">
+import { defineComponent, h, onMounted, type PropType } from 'vue'
+import AppTopBar from './AppTopBar.vue'
 import JobsStatusTray from './JobsStatusTray.vue'
-import type { JobStateInput, JobStatus } from '../types/jobs'
+import { useJobCenter } from '../composables/useJobCenter'
+import type { JobState, JobStateInput, JobStatus } from '../types/jobs'
 
 function job(
   status: JobStatus,
@@ -43,13 +46,6 @@ function job(
   }
 }
 
-const mixedJobs = [
-  job('awaiting_input', 'J-104'),
-  job('running', 'J-103'),
-  job('queued', 'J-102'),
-  job('completed', 'J-101'),
-  job('failed', 'J-100'),
-]
 const explicitActionJobs = [
   job('awaiting_input', 'J-201', { can_cancel: true }),
   job('completed', 'J-200', { can_delete: false }),
@@ -57,69 +53,127 @@ const explicitActionJobs = [
 const cancelJob = async () => undefined
 const deleteJob = async () => true
 
-function openJob(jobId: string) {
-  console.info('open', jobId)
+function openJob(selected: JobState) {
+  console.info('open', selected.job_id)
+}
+
+/** The parent owns the job center: it feeds the top-bar chip and the tray. */
+const TrayDemo = defineComponent({
+  props: {
+    jobs: { type: Array as PropType<JobStateInput[]>, required: true },
+    title: { type: String, default: undefined },
+    open: Boolean,
+    confirm: Boolean,
+    /** Show the awaiting-input job as a browser decode, as LEAF does. */
+    decode: Boolean,
+  },
+  setup(props) {
+    // One source object: a new source identity resets the just-completed hold.
+    const center = useJobCenter({
+      source: { jobs: () => props.jobs, cancel: cancelJob, delete: deleteJob },
+      rowJob: row => (props.decode && row.status === 'awaiting_input'
+        ? { status: 'running', percent: 62, message: 'Decoding in the browser · 5/8' }
+        : null),
+      topBarJob: shown => (shown.status === 'completed' ? { status: 'completed', label: `Saved to ${shown.experiment_id}` } : null),
+    })
+    onMounted(() => { if (props.open) center.open() })
+    return () => [
+      h(AppTopBar, {
+        title: 'Peak QC',
+        job: center.topBarJob.value,
+        jobsDone: center.completedCount.value,
+        jobsOpen: center.isOpen.value,
+        jobsPanelId: center.panelId,
+        onJobClick: () => center.handleTopBarClick(openJob),
+      }),
+      h(JobsStatusTray, { center, title: props.title, confirm: props.confirm, onSelect: openJob }, {
+        'job-actions': ({ job: row }: { job: JobState }) => row.status === 'completed'
+          ? h('button', { type: 'button', class: 'mint-jobs-tray__section-action', onClick: () => openJob(row) }, 'Open')
+          : null,
+      }),
+    ]
+  },
+})
+
+function playgroundJobs(percent: number, finished: boolean): JobStateInput[] {
+  const running = finished
+    ? job('completed', 'J-103', { completed_at: '2026-07-14T10:12:00+00:00' })
+    : job('running', 'J-103', {
+        progress: { ...job('running', 'J-103').progress, percent, message: 'Integrating peaks' },
+      })
+  return [
+    job('awaiting_input', 'J-104'),
+    running,
+    job('queued', 'J-102'),
+    job('completed', 'J-101'),
+    job('failed', 'J-100'),
+  ]
 }
 
 function initState() {
   return {
-    title: 'Analysis jobs',
-    jobs: mixedJobs,
+    title: 'Jobs',
+    percent: 37,
+    finished: false,
+    open: true,
+    confirm: false,
+    decode: false,
   }
 }
 </script>
 
 <template>
-  <Story title="Workflow/JobsStatusTray">
+  <Story title="Workflow/JobsStatusTray" :layout="{ type: 'single', iframe: true }">
     <Variant title="Playground" :init-state="initState">
       <template #default="{ state }">
-        <div style="padding: 2rem; min-height: 520px;">
-          <JobsStatusTray
+        <div style="min-height: 560px;">
+          <TrayDemo
+            :key="String(state.open)"
+            :jobs="playgroundJobs(state.percent, state.finished)"
             :title="state.title"
-            :source="{ jobs: state.jobs, cancel: cancelJob, delete: deleteJob }"
-            :load-on-mount="false"
-            :teleport-to="false"
-          >
-            <template #job-actions="{ job }">
-              <button type="button" class="mint-jobs-tray__action" @click="() => openJob(job.job_id)">
-                Open
-              </button>
-            </template>
-          </JobsStatusTray>
+            :open="state.open"
+            :confirm="state.confirm"
+            :decode="state.decode"
+          />
         </div>
       </template>
       <template #controls="{ state }">
         <HstText v-model="state.title" title="Title" />
+        <HstSlider v-model="state.percent" title="Running percent" :min="0" :max="100" />
+        <HstCheckbox v-model="state.finished" title="Running job completed (6 s chip)" />
+        <HstCheckbox v-model="state.open" title="Open on mount" />
+        <HstCheckbox v-model="state.confirm" title="Confirm cancel, delete and clear" />
+        <HstCheckbox v-model="state.decode" title="Row override: J-104 as a browser decode" />
       </template>
     </Variant>
 
+    <Variant title="Confirm and row override">
+      <div style="min-height: 560px;">
+        <TrayDemo :jobs="playgroundJobs(37, false)" open confirm decode />
+      </div>
+    </Variant>
+
     <Variant title="Awaiting input">
-      <div style="padding: 2rem; min-height: 520px;">
-        <JobsStatusTray
-          :source="{ jobs: [job('awaiting_input', 'J-301')] }"
-          :load-on-mount="false"
-          :teleport-to="false"
-        />
+      <div style="min-height: 560px;">
+        <TrayDemo :jobs="[job('awaiting_input', 'J-301')]" open />
       </div>
     </Variant>
 
     <Variant title="Explicit actions">
-      <div style="padding: 2rem; min-height: 520px;">
-        <JobsStatusTray
-          :source="{ jobs: explicitActionJobs, cancel: cancelJob, delete: deleteJob }"
-          :load-on-mount="false"
-          :teleport-to="false"
-        />
+      <div style="min-height: 560px;">
+        <TrayDemo :jobs="explicitActionJobs" open />
+      </div>
+    </Variant>
+
+    <Variant title="Idle with completed jobs">
+      <div style="min-height: 560px;">
+        <TrayDemo :jobs="[job('completed', 'J-401'), job('completed', 'J-402'), job('cancelled', 'J-403')]" />
       </div>
     </Variant>
 
     <Variant title="Empty">
-      <div style="padding: 2rem; min-height: 520px;">
-        <JobsStatusTray
-          :source="{ jobs: [] }"
-          :load-on-mount="false"
-          :teleport-to="false"
-        />
+      <div style="min-height: 560px;">
+        <TrayDemo :jobs="[]" open />
       </div>
     </Variant>
   </Story>