@morscherlab/mint-sdk 1.4.0-beta.2 → 1.4.0-beta.21

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

@@ -1,9 +1,15 @@
-import { mount } from '@vue/test-utils'
+import { flushPromises, mount } from '@vue/test-utils'
 import { describe, expect, it, vi } from 'vitest'
-import { h } from 'vue'
+import { defineComponent, h, nextTick, shallowRef } from 'vue'
 
+import BaseModal from '../../components/BaseModal.vue'
 import JobsStatusTray from '../../components/JobsStatusTray.vue'
-import type { PluginJobCenterSource } from '../../composables/useJobCenter'
+import {
+  useJobCenter,
+  type PluginJobCenterSource,
+  type UseJobCenterOptions,
+  type UseJobCenterReturn,
+} from '../../composables/useJobCenter'
 import type { JobState, JobStateInput, JobStatus } from '../../types/jobs'
 
 function job(status: JobStatus, id: string = status): JobStateInput {
@@ -43,33 +49,43 @@ function job(status: JobStatus, id: string = status): JobStateInput {
 async function openTray(options: {
   source: PluginJobCenterSource
   slots?: Record<string, (props: { job: JobState }) => unknown>
+  confirm?: InstanceType<typeof JobsStatusTray>['$props']['confirm']
+  rowJob?: UseJobCenterOptions['rowJob']
+  /** Run real transitions, so a leaving dialog stays in the DOM for a frame. */
+  transitions?: boolean
 }) {
-  const { slots, ...props } = options
-  const wrapper = mount(JobsStatusTray, {
-    attachTo: document.body,
-    props: {
-      ...props,
-      loadOnMount: false,
-      teleportTo: false,
+  const Host = defineComponent({
+    setup() {
+      const center = useJobCenter({ source: options.source, loadOnMount: false, rowJob: options.rowJob })
+      return () => [
+        h('button', { class: 'opener', onClick: center.toggle }, 'Jobs'),
+        h(JobsStatusTray, { center, teleportTo: false, confirm: options.confirm }, options.slots),
+      ]
     },
-    slots,
   })
-  await wrapper.get('.mint-jobs-tray__trigger').trigger('click')
+  const wrapper = mount(Host, {
+    attachTo: document.body,
+    global: options.transitions ? { stubs: { transition: false } } : {},
+  })
+  const opener = wrapper.get('.opener')
+  ;(opener.element as HTMLElement).focus()
+  await opener.trigger('click')
   return wrapper
 }
 
 describe('JobsStatusTray', () => {
-  it('shows awaiting input as active without default actions', async () => {
+  it('should show awaiting input as active without default actions when the job has no capability', async () => {
     const wrapper = await openTray({ source: { jobs: [job('awaiting_input')] } })
 
     expect([
-      wrapper.text().includes('Waiting for input'),
-      wrapper.find('[aria-label="Cancel job"]').exists(),
-      wrapper.find('[aria-label="Delete job"]').exists(),
-    ]).toEqual([true, false, false])
+      wrapper.find('[data-section="active"]').exists(),
+      wrapper.find('[role="img"][aria-label="Waiting for input"]').exists(),
+      wrapper.find('[aria-label="Cancel Job awaiting_input"]').exists(),
+      wrapper.find('[aria-label="Delete Job awaiting_input"]').exists(),
+    ]).toEqual([true, true, false, false])
   })
 
-  it('shows only actions supported by both capability and source', async () => {
+  it('should show only actions supported by both capability and source when rows render', async () => {
     const wrapper = await openTray({
       source: {
         jobs: [
@@ -82,24 +98,9 @@ describe('JobsStatusTray', () => {
     })
 
     expect([
-      wrapper.find('[aria-label="Cancel job"]').exists(),
-      wrapper.find('[aria-label="Delete job"]').exists(),
-    ]).toEqual([true, false])
-
-    await wrapper.get('[role="tab"][data-tab="history"]').trigger('click')
-    expect(wrapper.find('[aria-label="Delete job"]').exists()).toBe(true)
-  })
-
-  it('exposes dialog state and closes on Escape', async () => {
-    const wrapper = await openTray({ source: { jobs: [job('running')] } })
-    const trigger = wrapper.get('.mint-jobs-tray__trigger')
-
-    await wrapper.get('[role="dialog"]').trigger('keydown', { key: 'Escape' })
-
-    expect([trigger.attributes('aria-expanded'), wrapper.find('[role="dialog"]').exists()]).toEqual([
-      'false',
-      false,
-    ])
+      wrapper.find('[data-status="awaiting_input"] [aria-label="Cancel Job input"]').exists(),
+      wrapper.find('[data-status="completed"] [aria-label="Delete Job done"]').exists(),
+    ]).toEqual([true, true])
   })
 
   it('renders an individual delete action for an active capable job', async () => {
@@ -110,83 +111,384 @@ describe('JobsStatusTray', () => {
       },
     })
 
-    expect(wrapper.find('[aria-label="Delete job"]').exists()).toBe(true)
+    expect(wrapper.find('[aria-label="Delete Job awaiting_input"]').exists()).toBe(true)
+  })
+
+  it('should render a non-modal panel that does not trap Tab when open', async () => {
+    const wrapper = await openTray({ source: { jobs: [job('running')] } })
+    const panel = wrapper.get('.mint-jobs-tray__panel')
+    const tab = new KeyboardEvent('keydown', { key: 'Tab', bubbles: true, cancelable: true })
+    panel.element.dispatchEvent(tab)
+
+    expect([
+      panel.attributes('role'),
+      panel.attributes('aria-modal'),
+      tab.defaultPrevented,
+    ]).toEqual([undefined, undefined, false])
   })
 
-  it('traps forward Tab navigation inside the modal dialog', async () => {
+  it('should close and return focus to the opener when Escape is pressed', async () => {
     const wrapper = await openTray({ source: { jobs: [job('running')] } })
-    const focusable = wrapper.findAll('button')
-    const firstInsidePanel = wrapper.get('[aria-label="Close jobs"]')
-    const lastInsidePanel = focusable[focusable.length - 1]!
-    lastInsidePanel.element.focus()
+    expect(document.activeElement).toBe(wrapper.get('.mint-jobs-tray__panel').element)
 
-    await wrapper.get('[role="dialog"]').trigger('keydown', { key: 'Tab' })
+    await wrapper.get('.mint-jobs-tray__panel').trigger('keydown', { key: 'Escape' })
 
-    expect(document.activeElement).toBe(firstInsidePanel.element)
+    expect([
+      wrapper.find('.mint-jobs-tray__panel').exists(),
+      document.activeElement,
+    ]).toEqual([false, wrapper.get('.opener').element])
   })
 
-  it('traps reverse Tab navigation from the dialog container', async () => {
+  it('should close when the page outside the panel is clicked', async () => {
     const wrapper = await openTray({ source: { jobs: [job('running')] } })
-    const panel = wrapper.get('[role="dialog"]')
-    const focusable = panel.findAll('button')
-    const panelElement = panel.element as HTMLElement
-    panelElement.focus()
 
-    await panel.trigger('keydown', { key: 'Tab', shiftKey: true })
+    await wrapper.get('.mint-jobs-tray__scrim').trigger('click')
 
-    expect(document.activeElement).toBe(focusable[focusable.length - 1]!.element)
+    expect(wrapper.find('.mint-jobs-tray__panel').exists()).toBe(false)
   })
 
-  it('exposes job selection through a keyboard-accessible button', async () => {
+  it('should emit select from a keyboard-accessible title button when a row is chosen', async () => {
     const wrapper = await openTray({ source: { jobs: [job('running')] } })
 
-    await wrapper.get('.mint-jobs-tray__job-select').trigger('click')
+    await wrapper.get('.mint-jobs-tray__row-title').trigger('click')
 
-    expect(wrapper.emitted('select')?.[0]?.[0]).toMatchObject({ job_id: 'running' })
+    expect(wrapper.findComponent(JobsStatusTray).emitted('select')?.[0]?.[0]).toMatchObject({ job_id: 'running' })
   })
 
-  it('renders the job-actions slot once per row in both tabs with the row job', async () => {
+  it('should render each row slot once per row with the row job when slots are given', async () => {
     const wrapper = await openTray({
       source: { jobs: [job('running', 'R-1'), job('completed', 'C-1')] },
       slots: {
-        'job-actions': ({ job: row }) =>
-          h('button', { 'data-testid': 'open', 'data-job': row.job_id }, 'Open'),
+        'job-actions': ({ job: row }) => h('button', { 'data-testid': 'open', 'data-job': row.job_id }, 'Open'),
+        'job-title': ({ job: row }) => h('span', { 'data-testid': 'title' }, `Title ${row.job_id}`),
+        'job-detail': ({ job: row }) => h('span', { 'data-testid': 'detail' }, `Detail ${row.job_id}`),
       },
     })
 
-    const active = wrapper.findAll('[data-testid="open"]')
-    expect(active.map((b) => b.attributes('data-job'))).toEqual(['R-1'])
-
-    await wrapper.get('[role="tab"][data-tab="history"]').trigger('click')
-
-    const history = wrapper.findAll('[data-testid="open"]')
-    expect(history.map((b) => b.attributes('data-job'))).toEqual(['C-1'])
+    expect(['open', 'title', 'detail'].map(id => wrapper.findAll(`[data-testid="${id}"]`).map(el => el.attributes('data-job') ?? el.text())))
+      .toEqual([['R-1', 'C-1'], ['Title R-1', 'Title C-1'], ['Detail R-1', 'Detail C-1']])
   })
 
   it('should pin awaiting-input jobs to the top when they arrive after other active jobs', async () => {
     const wrapper = await openTray({
       source: { jobs: [job('running', 'R-1'), job('queued', 'Q-1'), job('awaiting_input', 'A-1')] },
     })
-    expect(wrapper.findAll('.mint-jobs-tray__job-select').map((b) => b.text()))
+    expect(wrapper.findAll('.mint-jobs-tray__row-title').map((b) => b.text()))
       .toEqual(['Job A-1', 'Job R-1', 'Job Q-1'])
   })
 
   it('should tint the awaiting-input row when a job waits for input', async () => {
     const wrapper = await openTray({ source: { jobs: [job('awaiting_input')] } })
-    expect(wrapper.get('.mint-jobs-tray__job').classes()).toContain('mint-jobs-tray__job--awaiting-input')
+    expect(wrapper.get('.mint-jobs-tray__row').classes()).toContain('mint-jobs-tray__row--awaiting-input')
   })
 
-  it('should show a mono percent next to the status when a job is running', async () => {
+  it('should show a mono percent as the row value when a job is running', async () => {
     const running = job('running')
     running.progress = { ...running.progress, percent: 62 }
     const wrapper = await openTray({ source: { jobs: [running] } })
-    expect(wrapper.get('.mint-jobs-tray__percent').text()).toBe('62%')
+    expect([wrapper.get('.mint-jobs-tray__value').text(), wrapper.get('[role="progressbar"]').attributes('aria-label')])
+      .toEqual(['62%', 'Job running progress'])
+  })
+
+  it('should show the error in error ink when a job failed', async () => {
+    const wrapper = await openTray({ source: { jobs: [{ ...job('failed'), error: 'Peaks not found' }] } })
+    const detail = wrapper.get('.mint-jobs-tray__detail')
+    expect([detail.text(), detail.classes()]).toEqual(['Peaks not found', expect.arrayContaining(['mint-jobs-tray__detail--error'])])
+  })
+
+  it.each([
+    [[job('running', 'R-1'), job('queued', 'Q-1'), job('completed', 'C-1')], '2 active · 1 done', ['Active · 2', 'Finished · 1']],
+    [[job('failed', 'F-1'), job('cancelled', 'X-1')], '1 failed', ['Finished · 2']],
+    [[], 'No jobs', []],
+  ])('should count jobs in the header and sections for %#', async (jobs, count, sections) => {
+    const wrapper = await openTray({ source: { jobs } })
+    expect({
+      count: wrapper.get('.mint-jobs-tray__head-count').text(),
+      sections: wrapper.findAll('.mint-jobs-tray__section').map(el => el.text().replace(/\s+/g, ' ')),
+      empty: wrapper.find('.mint-jobs-tray__empty').exists(),
+    }).toEqual({ count, sections, empty: jobs.length === 0 })
+  })
+
+  it('should clear finished jobs from the Finished section when the source can clear', async () => {
+    const clear = vi.fn(async () => 1)
+    const wrapper = await openTray({ source: { jobs: [job('running', 'R-1'), job('completed', 'C-1')], clear } })
+
+    await wrapper.get('[data-section="finished"] .mint-jobs-tray__section-action').trigger('click')
+
+    expect([wrapper.find('[data-section="active"] .mint-jobs-tray__section-action').exists(), clear.mock.calls.length])
+      .toEqual([false, 1])
+  })
+
+  describe('focus and Escape', () => {
+    function mountWithChip() {
+      let center!: UseJobCenterReturn
+      const Host = defineComponent({
+        setup() {
+          center = useJobCenter({ source: { jobs: [job('running')] }, loadOnMount: false })
+          return () => [
+            h('button', { class: 'mint-topbar__job' }, 'Jobs'),
+            h('button', { class: 'outside' }, 'Elsewhere'),
+            h(JobsStatusTray, { center, teleportTo: false }),
+          ]
+        },
+      })
+      return { wrapper: mount(Host, { attachTo: document.body }), center: () => center }
+    }
+
+    it.each([
+      ['the page body', () => (document.activeElement as HTMLElement | null)?.blur()],
+      ['a detached element', () => {
+        const gone = document.body.appendChild(document.createElement('button'))
+        gone.focus()
+        return () => gone.remove()
+      }],
+    ])('should focus the top-bar jobs control on Escape when the opener was %s', async (_case, focusOpener) => {
+      const { wrapper, center } = mountWithChip()
+      const detach = focusOpener()
+      center().open()
+      await nextTick()
+      detach?.()
+
+      await wrapper.get('.mint-jobs-tray__panel').trigger('keydown', { key: 'Escape' })
+
+      expect(document.activeElement).toBe(wrapper.get('.mint-topbar__job').element)
+      wrapper.unmount()
+    })
+
+    it('should close on Escape when focus has left the open panel', async () => {
+      const { wrapper, center } = mountWithChip()
+      center().open()
+      await nextTick()
+      ;(wrapper.get('.outside').element as HTMLElement).focus()
+
+      document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }))
+      await nextTick()
+
+      expect(wrapper.find('.mint-jobs-tray__panel').exists()).toBe(false)
+      wrapper.unmount()
+    })
   })
 
-  it('should summarize active jobs by state in the header when jobs are active', async () => {
+  it('should draw a row from the center row view when a rowJob option overrides it', async () => {
     const wrapper = await openTray({
-      source: { jobs: [job('running', 'R-1'), job('queued', 'Q-1'), job('awaiting_input', 'A-1')] },
+      source: { jobs: [{ ...job('awaiting_input', 'A-1'), can_cancel: true }], cancel: vi.fn(async () => undefined) },
+      rowJob: row => (row.status === 'awaiting_input' ? { status: 'running', percent: 40, message: 'Decoding in the browser' } : null),
+    })
+    const row = wrapper.get('.mint-jobs-tray__row')
+
+    expect({
+      section: wrapper.get('[data-section="active"]').text().replace(/\s+/g, ' '),
+      status: row.attributes('data-status'),
+      tinted: row.classes('mint-jobs-tray__row--awaiting-input'),
+      icon: row.get('[role="img"]').attributes('aria-label'),
+      value: row.get('.mint-jobs-tray__value').text(),
+      progress: row.get('[role="progressbar"]').attributes('aria-valuenow'),
+      detail: row.get('.mint-jobs-tray__detail').text(),
+      cancel: row.find('[aria-label="Cancel Job A-1"]').exists(),
+    }).toEqual({
+      section: 'Active · 1',
+      status: 'awaiting_input',
+      tinted: false,
+      icon: 'Running',
+      value: '40%',
+      progress: '40',
+      detail: 'Decoding in the browser',
+      cancel: true,
+    })
+  })
+
+  it('should mount no confirm dialog when confirm is off', async () => {
+    const wrapper = await openTray({ source: { jobs: [job('completed')], delete: vi.fn(async () => true) } })
+    expect(wrapper.findComponent(BaseModal).exists()).toBe(false)
+    wrapper.unmount()
+  })
+
+  it('should keep the tray open when an inner handler prevents the Escape default', async () => {
+    const wrapper = await openTray({
+      source: { jobs: [job('running', 'R-1')] },
+      slots: {
+        'job-actions': () => h('input', {
+          class: 'inner',
+          onKeydown: (event: KeyboardEvent) => { if (event.key === 'Escape') event.preventDefault() },
+        }),
+      },
+    })
+    const inner = wrapper.get('.inner').element as HTMLElement
+    inner.focus()
+
+    inner.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true, cancelable: true }))
+    await nextTick()
+
+    expect(wrapper.find('.mint-jobs-tray__panel').exists()).toBe(true)
+    wrapper.unmount()
+  })
+
+  it('should leave focus on the page when a job update arrives while nothing in the tray is focused', async () => {
+    const jobs = shallowRef([job('running', 'R-1')])
+    const wrapper = await openTray({ source: { jobs } })
+    ;(document.activeElement as HTMLElement).blur()
+
+    jobs.value = [job('completed', 'R-1')]
+    await nextTick()
+    await nextTick()
+
+    expect(document.activeElement).toBe(document.body)
+    wrapper.unmount()
+  })
+
+  it('should focus the panel when the focused row leaves the list while the tray is open', async () => {
+    const jobs = shallowRef([job('completed', 'C-1'), job('completed', 'C-2')])
+    const wrapper = await openTray({ source: { jobs, delete: vi.fn(async () => true) } })
+    ;(wrapper.get('[aria-label="Delete Job C-1"]').element as HTMLElement).focus()
+
+    jobs.value = [job('completed', 'C-2')]
+    await nextTick()
+    await nextTick()
+
+    expect(document.activeElement).toBe(wrapper.get('.mint-jobs-tray__panel').element)
+    wrapper.unmount()
+  })
+
+  describe('confirmation', () => {
+    const dialog = () => document.body.querySelector<HTMLElement>('.mint-modal [role="dialog"], .mint-modal__container')
+
+    function confirmSource() {
+      return {
+        jobs: [{ ...job('running', 'R-1'), can_cancel: true }, job('completed', 'C-1'), job('failed', 'F-1')],
+        cancel: vi.fn(async () => undefined),
+        delete: vi.fn(async () => true),
+        clear: vi.fn(async () => 2),
+      }
+    }
+    const triggers = {
+      cancel: '[aria-label="Cancel Job R-1"]',
+      delete: '[aria-label="Delete Job C-1"]',
+      clear: '[data-section="finished"] .mint-jobs-tray__section-action',
+    } as const
+
+    it.each([
+      ['cancel', true, 'Job R-1'],
+      ['delete', { delete: true }, 'Job C-1'],
+      ['clear', { clear: true }, '2 finished jobs'],
+    ] as const)('should run %s only after the confirm dialog is confirmed when confirm is %o', async (kind, confirm, named) => {
+      const source = confirmSource()
+      const wrapper = await openTray({ source, confirm })
+
+      await wrapper.get(triggers[kind]).trigger('click')
+      await nextTick()
+      const shown = dialog()
+      const before = source[kind].mock.calls.length
+      const confirmButton = [...shown!.querySelectorAll('button')].at(-1)!
+      confirmButton.click()
+      await flushPromises()
+
+      expect([shown?.textContent?.includes(named), before, source[kind].mock.calls.length]).toEqual([true, 0, 1])
+      wrapper.unmount()
+    })
+
+    it.each([
+      ['off', undefined],
+      ['set for another action', { delete: true }],
+    ] as const)('should cancel at once without a dialog when confirm is %s', async (_case, confirm) => {
+      const source = confirmSource()
+      const wrapper = await openTray({ source, confirm })
+
+      await wrapper.get(triggers.cancel).trigger('click')
+      await flushPromises()
+
+      expect([dialog(), source.cancel.mock.calls.length]).toEqual([null, 1])
+      wrapper.unmount()
+    })
+
+    it('should run the action once when Confirm is clicked twice while the dialog fades out', async () => {
+      const source = confirmSource()
+      const wrapper = await openTray({ source, confirm: true, transitions: true })
+      await wrapper.get(triggers.clear).trigger('click')
+      await nextTick()
+      const confirmButton = [...dialog()!.querySelectorAll('button')].at(-1)!
+
+      confirmButton.click()
+      confirmButton.click()
+      await flushPromises()
+
+      expect([confirmButton.isConnected, source.clear.mock.calls.length]).toEqual([true, 1])
+      await vi.waitFor(() => expect(dialog()).toBeNull())
+      wrapper.unmount()
+    })
+
+    it('should close only the dialog when Escape is pressed in it', async () => {
+      const source = confirmSource()
+      const wrapper = await openTray({ source, confirm: true })
+      await wrapper.get(triggers.delete).trigger('click')
+      await nextTick()
+
+      dialog()!.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }))
+      await flushPromises()
+
+      expect([dialog(), wrapper.find('.mint-jobs-tray__panel').exists(), source.delete.mock.calls.length])
+        .toEqual([null, true, 0])
+      wrapper.unmount()
+    })
+  
+    it('should ask again with the new count when the finished jobs change before Confirm', async () => {
+      const jobs = shallowRef([job('completed', 'C-1'), job('failed', 'F-1')])
+      const clear = vi.fn(async () => 3)
+      const wrapper = await openTray({ source: { jobs, clear }, confirm: true })
+      await wrapper.get(triggers.clear).trigger('click')
+      await nextTick()
+
+      jobs.value = [...jobs.value, job('cancelled', 'X-1')]
+      await nextTick()
+      ;[...dialog()!.querySelectorAll('button')].at(-1)!.click()
+      await flushPromises()
+      const asked = [dialog()?.textContent?.includes('3 finished jobs'), clear.mock.calls.length]
+      ;[...dialog()!.querySelectorAll('button')].at(-1)!.click()
+      await flushPromises()
+
+      expect([...asked, dialog(), clear.mock.calls.length]).toEqual([true, 0, null, 1])
+      wrapper.unmount()
+    })
+
+    it.each([
+      ['delete', 'the job is gone', [] as JobStateInput[]],
+      ['cancel', 'the job finished', [{ ...job('completed', 'R-1'), can_cancel: true }]],
+      ['delete', 'the job is no longer deletable', [{ ...job('completed', 'C-1'), can_delete: false }]],
+    ] as const)('should close the %s dialog without acting when %s before Confirm', async (kind, _case, next) => {
+      const source = { ...confirmSource(), jobs: shallowRef<JobStateInput[]>(confirmSource().jobs) }
+      const wrapper = await openTray({ source, confirm: true })
+      await wrapper.get(triggers[kind]).trigger('click')
+      await nextTick()
+
+      source.jobs.value = [...next]
+      await nextTick()
+      ;[...dialog()!.querySelectorAll('button')].at(-1)!.click()
+      await flushPromises()
+
+      expect([dialog(), source[kind].mock.calls.length]).toEqual([null, 0])
+      wrapper.unmount()
+    })
+
+    it('should drop the pending action when the job source changes while the dialog is open', async () => {
+      const first = confirmSource()
+      const second = confirmSource()
+      const current = shallowRef<PluginJobCenterSource>(first)
+      const Host = defineComponent({
+        setup() {
+          const center = useJobCenter({ source: current, loadOnMount: false })
+          center.open()
+          return () => h(JobsStatusTray, { center, teleportTo: false, confirm: true })
+        },
+      })
+      const wrapper = mount(Host, { attachTo: document.body })
+      await nextTick()
+      await wrapper.get(triggers.delete).trigger('click')
+      await nextTick()
+
+      current.value = second
+      await nextTick()
+
+      expect([dialog(), first.delete.mock.calls.length, second.delete.mock.calls.length]).toEqual([null, 0, 0])
+      wrapper.unmount()
     })
-    expect(wrapper.get('.mint-jobs-tray__subtitle').text()).toBe('1 running · 1 queued · 1 waiting')
   })
 })

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

@@ -1,7 +1,7 @@
 import { flushPromises, mount } from '@vue/test-utils'
 import type { VueWrapper } from '@vue/test-utils'
 import { createPinia, setActivePinia } from 'pinia'
-import { computed, h, nextTick, ref } from 'vue'
+import { computed, h, nextTick, ref, shallowRef } from 'vue'
 import { describe, expect, it, vi } from 'vitest'
 import AppLayout from '../../components/AppLayout.vue'
 import AppSidebar from '../../components/AppSidebar.vue'
@@ -10,6 +10,7 @@ import ExperimentPopover from '../../components/ExperimentPopover.vue'
 import ExperimentSelectorModal from '../../components/ExperimentSelectorModal.vue'
 import PluginWorkspaceView from '../../components/PluginWorkspaceView.vue'
 import AppToastContainer from '../../components/AppToastContainer.vue'
+import JobsStatusTray from '../../components/JobsStatusTray.vue'
 import { defineControlModel, defineDoseDesignControlModel } from '../../composables/useControlSchema'
 import { usePlatform } from '../../composables/usePlatform'
 import { useExperimentStore } from '../../stores/experiment'
@@ -18,6 +19,7 @@ import type {
   PillNavItem,
   SidebarToolSection,
 } from '../../types'
+import type { JobStateInput, JobStatus } from '../../types/jobs'
 
 vi.mock('../../composables/usePlatform', () => ({
   usePlatform: vi.fn(() => ({
@@ -131,6 +133,13 @@ function mountIntegratedPageSelectorWorkspace(): VueWrapper {
 }
 
 describe('PluginWorkspaceView', () => {
+  it('should leave the top bar title unset when the spec has no title', () => {
+    // The top bar then shows the plugin identity, not a generic "Workspace".
+    const wrapper = mount(PluginWorkspaceView, { props: { spec: {} }, global: globalOptions })
+
+    expect(wrapper.findComponent(AppTopBar).props('title')).toBeUndefined()
+  })
+
   it('should not forward the retired profile-button prop', () => {
     const wrapper = mount(PluginWorkspaceView, {
       global: globalOptions,
@@ -736,4 +745,57 @@ describe('PluginWorkspaceView', () => {
       },
     })
   })
+
+  describe('jobs', () => {
+    function workspaceJob(status: JobStatus): JobStateInput {
+      return {
+        id: 'r', job_id: 'r', kind: 'analysis', name: 'Run', status,
+        progress: { current_file: 0, total_files: 0, current_filename: null, percent: 40, message: '', stage: status },
+        queue_position: 0, warnings: [], error: null, output_path: null, save_path: null, session_id: null,
+        folders: [], folder_path: null, user_id: null, owner_user_id: null, experiment_id: null,
+        extraction_result_id: null, metadata: {}, created_at: '', started_at: null, completed_at: null,
+      }
+    }
+    const jobsGlobal = { ...globalOptions, stubs: { ...globalOptions.stubs, Teleport: true } }
+
+    it('should give the top bar no jobs control when spec.jobs is unset', () => {
+      const wrapper = mount(PluginWorkspaceView, { props: { spec: { title: 'Workspace' } }, global: jobsGlobal })
+      expect([wrapper.findComponent(AppTopBar).props('job'), wrapper.findComponent(JobsStatusTray).exists()])
+        .toEqual([undefined, false])
+    })
+
+    it('should open the jobs tray when the top-bar chip of a running job is clicked', async () => {
+      const wrapper = mount(PluginWorkspaceView, {
+        props: { spec: { title: 'Workspace', jobs: { jobs: [workspaceJob('running')] } } },
+        global: jobsGlobal,
+      })
+
+      await wrapper.get('.mint-topbar__job').trigger('click')
+
+      const chip = wrapper.get('.mint-topbar__job')
+      expect([
+        wrapper.findComponent(AppTopBar).props('job'),
+        wrapper.find('.mint-jobs-tray__panel').exists(),
+        chip.attributes('aria-expanded'),
+        chip.attributes('aria-controls') === wrapper.get('.mint-jobs-tray__panel').attributes('id'),
+      ]).toEqual([{ status: 'running', label: 'Run running', percent: 40 }, true, 'true', true])
+    })
+
+    it('should emit job-select with the held job when the chip is clicked after the job completed', async () => {
+      const jobs = shallowRef([workspaceJob('running')])
+      const wrapper = mount(PluginWorkspaceView, {
+        props: { spec: { title: 'Workspace', jobs: { jobs } } },
+        global: jobsGlobal,
+      })
+      jobs.value = [workspaceJob('completed')]
+      await nextTick()
+
+      await wrapper.get('.mint-topbar__job').trigger('click')
+
+      expect([
+        wrapper.emitted<[JobStateInput]>('job-select')?.map(([job]) => job.job_id),
+        wrapper.find('.mint-jobs-tray__panel').exists(),
+      ]).toEqual([['r'], false])
+    })
+  })
 })

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

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