@morscherlab/mint-sdk 1.4.0-beta.16 → 1.4.0-beta.18

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,223 @@ 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('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)
+  })
+})

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

@@ -266,13 +266,12 @@ 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',
       'teleportTo',
       'title',
     ])
@@ -375,6 +374,7 @@ describe('frontend docs catalog coverage', () => {
       'usePluginJobs',
       'useGeneratedAnalysis',
       'usePluginJobCenter',
+      'JobsStatusTrayTab',
       'useRequestSyncState',
       'useAnalysisArtifacts',
       'useTimeUtils',

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

@@ -20,6 +20,14 @@ function rule(text: string, selector: string): string {
 const rem = (value: string): number => Number(value.replace('rem', '')) * 16
 
 describe('v2 audit style rules', () => {
+  it('should stop the page bounce in a tab vertically and in a PWA on both axes', () => {
+    const variables = css('variables.css')
+    expect(rule(variables, 'html,\nbody')).toMatch(/overscroll-behavior-y:\s*none/)
+    expect(variables).toMatch(
+      /@media \(display-mode: standalone\)\s*\{\s*html,\s*body\s*\{\s*overscroll-behavior:\s*none;\s*\}/,
+    )
+  })
+
   it('should keep the outermost cards at least 16px from the window edge', () => {
     const inset = /--mint-page-inset:\s*([\d.]+rem)/.exec(css('variables.css'))?.[1] ?? '0rem'
     expect(rem(inset)).toBeGreaterThanOrEqual(16)

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,108 @@ 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,
+  },
+  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 },
+    })
+    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, 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,
   }
 }
 </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"
+          />
         </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" />
       </template>
     </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>