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

package/src/components/JobsStatusTray.vue

@@ -1,34 +1,45 @@
 <script setup lang="ts">
 /**
- * Floating, source-driven job status tray for plugin and platform workflows.
+ * Compact, non-modal job panel under the top bar, driven by a job center the parent owns.
+ *
+ * The parent passes the center's `topBarJob`, `completedCount` and `handleTopBarClick`
+ * to `AppTopBar`; its run slot opens this panel. `PluginWorkspaceView` does this for you
+ * when its spec sets `jobs`.
  *
  * @example Recommended
  * ```vue
- * <JobsStatusTray :source="jobs" />
+ * <AppTopBar :job="center.topBarJob.value" :jobs-done="center.completedCount.value"
+ *   @job-click="center.handleTopBarClick(openResult)" />
+ * <JobsStatusTray :center="center" @select="openResult" />
  * ```
  */
-import { computed, nextTick, ref, toRef, useId } from 'vue'
-
+import { computed, nextTick, onBeforeUnmount, ref, watch, type Component } from 'vue'
 import {
-  jobStatusLabel,
-  normalizeJobPercent,
-} from '../jobs'
-import {
-  useJobCenter,
-  type PluginJobCenterSource,
-} from '../composables/useJobCenter'
-import type { JobState } from '../types/jobs'
+  CircleAlert,
+  CircleCheck,
+  CircleSlash,
+  CircleX,
+  Clock,
+  LoaderCircle,
+  RefreshCw,
+  Square,
+  Trash2,
+  X,
+} from 'lucide-vue-next'
+
+import { isActiveJobStatus, jobStatusLabel, normalizeJobPercent } from '../jobs'
+import type { UseJobCenterReturn } from '../composables/useJobCenter'
+import type { JobState, JobStatus } from '../types/jobs'
 
 interface Props {
-  source?: PluginJobCenterSource
-  loadOnMount?: boolean
+  /** Job center from `useJobCenter()`; the parent owns it and opens the panel through it. */
+  center: UseJobCenterReturn
   title?: string
   teleportTo?: string | HTMLElement | false
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  loadOnMount: true,
-  title: 'Analysis jobs',
+  title: 'Jobs',
   teleportTo: 'body',
 })
 
@@ -40,84 +51,78 @@ const emit = defineEmits<{
 defineSlots<{
   /** Extra per-row actions, rendered before the built-in Cancel / Delete. */
   'job-actions'?: (props: { job: JobState }) => unknown
+  /** Row title. Default: the job name. */
+  'job-title'?: (props: { job: JobState }) => unknown
+  /** Detail line under the title. Default: the error, progress message or status. */
+  'job-detail'?: (props: { job: JobState }) => unknown
 }>()
 
-const panelId = `mint-jobs-tray-${useId().replace(/:/g, '')}`
-const titleId = `${panelId}-title`
-const triggerRef = ref<HTMLButtonElement | null>(null)
+const STATUS_ICONS: Record<JobStatus, Component> = {
+  running: LoaderCircle,
+  awaiting_input: CircleAlert,
+  queued: Clock,
+  completed: CircleCheck,
+  failed: CircleX,
+  cancelled: CircleSlash,
+}
+
 const panelRef = ref<HTMLElement | null>(null)
 const teleportTarget = computed(() => props.teleportTo || 'body')
-const tray = useJobCenter({
-  source: toRef(props, 'source'),
-  loadOnMount: props.loadOnMount,
-})
-// 2f: a job waiting for input is the only one that needs a person — pin it first.
+const tray = props.center
+const titleId = `${tray.panelId}-title`
+// A job waiting for input is the only one that needs a person: pin it first.
 const activeRows = computed(() => [
   ...tray.activeJobs.value.filter(job => job.status === 'awaiting_input'),
   ...tray.activeJobs.value.filter(job => job.status !== 'awaiting_input'),
 ])
-const subtitle = computed(() => {
-  const count = (status: JobState['status']) => tray.activeJobs.value.filter(job => job.status === status).length
+const sections = computed(() => [
+  { key: 'active', title: 'Active', jobs: activeRows.value },
+  { key: 'finished', title: 'Finished', jobs: tray.historyJobs.value },
+].filter(section => section.jobs.length > 0))
+const headCount = computed(() => {
   const parts = [
-    [count('running'), 'running'],
-    [count('queued'), 'queued'],
-    [count('awaiting_input'), 'waiting'],
+    [tray.activeJobs.value.length, 'active'],
+    [tray.completedCount.value, 'done'],
+    [tray.historyJobs.value.filter(job => job.status === 'failed').length, 'failed'],
   ].filter(([n]) => n).map(([n, word]) => `${n} ${word}`)
-  return parts.length ? parts.join(' · ') : `${tray.jobs.value.length} total`
+  return parts.length ? parts.join(' · ') : 'No jobs'
 })
 const canClear = computed(() => (
   tray.deletableJobs.value.length > 0
   && tray.canClearFinished.value
 ))
 
-async function openTray(): Promise<void> {
-  tray.open()
+// Escape returns focus to the element that opened the panel (the top-bar chip).
+// The panel is non-modal, so Escape is heard on the document while it is open.
+let opener: HTMLElement | null = null
+function onDocumentKeydown(event: KeyboardEvent): void {
+  if (event.key === 'Escape') closeTray()
+}
+watch(tray.isOpen, async (open) => {
+  if (!open) {
+    document.removeEventListener('keydown', onDocumentKeydown)
+    return
+  }
+  opener = document.activeElement instanceof HTMLElement ? document.activeElement : null
+  document.addEventListener('keydown', onDocumentKeydown)
   await nextTick()
   panelRef.value?.focus()
-}
+}, { flush: 'sync' })
+onBeforeUnmount(() => document.removeEventListener('keydown', onDocumentKeydown))
 
-async function closeTray(): Promise<void> {
+function closeTray(): void {
   tray.close()
-  await nextTick()
-  triggerRef.value?.focus()
-}
-
-async function toggleTray(): Promise<void> {
-  if (tray.isOpen.value) await closeTray()
-  else await openTray()
-}
-
-function onPanelKeydown(event: KeyboardEvent): void {
-  if (event.key === 'Escape') {
-    void closeTray()
-    return
-  }
-  if (event.key !== 'Tab' || !panelRef.value) return
-  const focusable = Array.from(panelRef.value.querySelectorAll<HTMLElement>(
-    'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])',
-  ))
-  if (focusable.length === 0) {
-    event.preventDefault()
-    panelRef.value.focus()
-    return
-  }
-  const first = focusable[0]
-  const last = focusable[focusable.length - 1]
-  const activeElement = document.activeElement as HTMLElement | null
-  if (!activeElement || !focusable.includes(activeElement)) {
-    event.preventDefault()
-    if (event.shiftKey) last?.focus()
-    else first?.focus()
-  } else if (event.shiftKey && activeElement === first) {
-    event.preventDefault()
-    last?.focus()
-  } else if (!event.shiftKey && activeElement === last) {
-    event.preventDefault()
-    first?.focus()
-  }
+  // Safari leaves a clicked button unfocused (opener = body), and the chip node is
+  // replaced when it switches between job chip and idle button: fall back to the
+  // top-bar jobs control.
+  const target = opener?.isConnected && opener !== document.body
+    ? opener
+    : document.querySelector<HTMLElement>('.mint-topbar__job')
+  target?.focus()
 }
 
 function progressText(job: JobState): string {
+  if (job.error) return job.error
   if (job.status === 'awaiting_input') {
     return job.progress.message || 'Waiting for external input'
   }
@@ -127,22 +132,24 @@ function progressText(job: JobState): string {
   return job.progress.message || job.progress.stage || jobStatusLabel(job.status)
 }
 
-function formatTimestamp(value: string | null): string {
+function formatTime(value: string | null): string {
   if (!value) return ''
   const date = new Date(value)
   return Number.isNaN(date.getTime())
     ? ''
-    : new Intl.DateTimeFormat(undefined, { dateStyle: 'medium', timeStyle: 'short' }).format(date)
-}
-
-function statusClass(job: JobState): string {
-  return `mint-jobs-tray__status--${job.status.replace('_', '-')}`
+    : date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
 }
 
 function jobPercent(job: JobState): number {
   return Math.round(normalizeJobPercent(job.progress.percent))
 }
 
+/** Right-hand value: the percent while a job runs, else when it ended or started. */
+function jobValue(job: JobState): string {
+  if (job.status === 'running') return `${jobPercent(job)}%`
+  return formatTime(job.completed_at || job.started_at || job.created_at)
+}
+
 async function cancelJob(job: JobState): Promise<void> {
   const succeeded = await tray.cancelJob(job)
   if (!succeeded && tray.error.value) emit('error', tray.error.value)
@@ -162,245 +169,130 @@ async function clearFinished(): Promise<void> {
 <template>
   <Teleport :to="teleportTarget" :disabled="teleportTo === false">
     <div class="mint-jobs-tray">
-      <button
-        ref="triggerRef"
-        type="button"
-        class="mint-jobs-tray__trigger"
-        aria-haspopup="dialog"
-        :aria-expanded="tray.isOpen.value"
-        :aria-controls="panelId"
-        @click="toggleTray"
-      >
-        <svg
-          class="mint-jobs-tray__trigger-icon"
-          :class="{ 'mint-jobs-tray__trigger-icon--active': tray.activeJobs.value.length > 0 }"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          aria-hidden="true"
-        >
-          <path d="M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2" />
-          <path d="M9 5a3 3 0 0 1 6 0v2H9V5Z" />
-        </svg>
-        <span class="mint-jobs-tray__trigger-label">
-          {{ tray.featuredJob.value ? jobStatusLabel(tray.featuredJob.value.status) : 'Jobs' }}
-        </span>
-        <span
-          v-if="tray.activeJobs.value.length > 0"
-          class="mint-jobs-tray__count"
-          aria-live="polite"
-        >
-          {{ tray.activeJobs.value.length }}
-        </span>
-      </button>
+      <!-- Clicks outside close the panel; the page is not dimmed. -->
+      <div
+        v-if="tray.isOpen.value"
+        class="mint-jobs-tray__scrim"
+        aria-hidden="true"
+        @click="tray.close()"
+      />
 
       <Transition name="mint-jobs-tray-fade">
-        <div
-          v-if="tray.isOpen.value"
-          class="mint-jobs-tray__backdrop"
-          aria-hidden="true"
-          @click="closeTray"
-        />
-      </Transition>
-
-      <Transition name="mint-jobs-tray-slide">
         <section
           v-if="tray.isOpen.value"
-          :id="panelId"
+          :id="tray.panelId"
           ref="panelRef"
           class="mint-jobs-tray__panel"
-          role="dialog"
-          aria-modal="true"
           :aria-labelledby="titleId"
           tabindex="-1"
-          @keydown="onPanelKeydown"
         >
-          <header class="mint-jobs-tray__header">
-            <div>
-              <h2 :id="titleId" class="mint-jobs-tray__title">{{ title }}</h2>
-              <p class="mint-jobs-tray__subtitle" :title="subtitle">{{ subtitle }}</p>
-            </div>
-            <div class="mint-jobs-tray__header-actions">
-              <button
-                v-if="tray.canRefresh.value"
-                type="button"
-                class="mint-jobs-tray__icon-button"
-                aria-label="Refresh jobs"
-                :disabled="tray.isLoading.value"
-                @click="tray.refresh"
-              >
-                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true">
-                  <path d="M20 6v5h-5M4 18v-5h5" />
-                  <path d="M18.4 9A7 7 0 0 0 6.1 6.1L4 8m2 7a7 7 0 0 0 11.9 2.9L20 16" />
-                </svg>
-              </button>
-              <button
-                type="button"
-                class="mint-jobs-tray__icon-button"
-                aria-label="Close jobs"
-                @click="closeTray"
-              >
-                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true">
-                  <path d="m6 6 12 12M18 6 6 18" />
-                </svg>
-              </button>
-            </div>
-          </header>
-
-          <div class="mint-jobs-tray__tabs" role="tablist" aria-label="Job groups">
+          <header class="mint-jobs-tray__head">
+            <h2 :id="titleId" class="mint-jobs-tray__title">{{ title }}</h2>
+            <span class="mint-jobs-tray__head-count">{{ headCount }}</span>
             <button
+              v-if="tray.canRefresh.value"
               type="button"
-              role="tab"
-              data-tab="active"
-              class="mint-jobs-tray__tab"
-              :class="{ 'mint-jobs-tray__tab--active': tray.activeTab.value === 'active' }"
-              :aria-selected="tray.activeTab.value === 'active'"
-              @click="tray.activeTab.value = 'active'"
+              class="mint-jobs-tray__icon-button"
+              aria-label="Refresh jobs"
+              title="Refresh jobs"
+              :disabled="tray.isLoading.value"
+              @click="tray.refresh"
             >
-              Active
-              <span class="mint-jobs-tray__tab-count">{{ tray.activeJobs.value.length }}</span>
+              <RefreshCw :size="14" aria-hidden="true" />
             </button>
             <button
               type="button"
-              role="tab"
-              data-tab="history"
-              class="mint-jobs-tray__tab"
-              :class="{ 'mint-jobs-tray__tab--active': tray.activeTab.value === 'history' }"
-              :aria-selected="tray.activeTab.value === 'history'"
-              @click="tray.activeTab.value = 'history'"
+              class="mint-jobs-tray__icon-button"
+              aria-label="Close jobs"
+              title="Close"
+              @click="closeTray"
             >
-              History
-              <span class="mint-jobs-tray__tab-count">{{ tray.historyJobs.value.length }}</span>
+              <X :size="14" aria-hidden="true" />
             </button>
-          </div>
+          </header>
 
           <p v-if="tray.error.value" class="mint-jobs-tray__error" role="alert">
             {{ tray.error.value }}
           </p>
 
           <div class="mint-jobs-tray__body">
-            <template v-if="tray.activeTab.value === 'active'">
-              <p v-if="tray.activeJobs.value.length === 0" class="mint-jobs-tray__empty">
-                No active jobs
-              </p>
-              <article
-                v-for="job in activeRows"
+            <p v-if="sections.length === 0" class="mint-jobs-tray__empty">No jobs yet</p>
+
+            <template v-for="section in sections" :key="section.key">
+              <div class="mint-jobs-tray__section" :data-section="section.key">
+                {{ section.title }}
+                <span class="mint-jobs-tray__section-count">· {{ section.jobs.length }}</span>
+                <button
+                  v-if="section.key === 'finished' && canClear"
+                  type="button"
+                  class="mint-jobs-tray__section-action"
+                  @click="clearFinished"
+                >
+                  Clear
+                </button>
+              </div>
+
+              <div
+                v-for="job in section.jobs"
                 :key="job.job_id"
-                class="mint-jobs-tray__job"
-                :class="{ 'mint-jobs-tray__job--awaiting-input': job.status === 'awaiting_input' }"
+                class="mint-jobs-tray__row"
+                :class="{ 'mint-jobs-tray__row--awaiting-input': job.status === 'awaiting_input' }"
+                :data-status="job.status"
               >
-                <div class="mint-jobs-tray__job-heading">
-                  <div class="mint-jobs-tray__job-identity">
-                    <button
-                      type="button"
-                      class="mint-jobs-tray__job-select"
-                      @click="emit('select', job)"
-                    >
-                      {{ job.name }}
-                    </button>
-                    <span class="mint-jobs-tray__kind">{{ job.kind }}</span>
-                  </div>
-                  <span class="mint-jobs-tray__status" :class="statusClass(job)">
-                    <span class="mint-jobs-tray__status-dot" aria-hidden="true" />
-                    {{ jobStatusLabel(job.status) }}
-                  </span>
-                  <span v-if="job.status === 'running'" class="mint-jobs-tray__percent">{{ jobPercent(job) }}%</span>
-                </div>
+                <component
+                  :is="STATUS_ICONS[job.status]"
+                  :size="15"
+                  :class="['mint-jobs-tray__status', `mint-jobs-tray__status--${job.status.replace('_', '-')}`]"
+                  role="img"
+                  :aria-label="jobStatusLabel(job.status)"
+                />
+                <button type="button" class="mint-jobs-tray__row-title" @click="emit('select', job)">
+                  <slot name="job-title" :job="job">{{ job.name }}</slot>
+                </button>
+                <span class="mint-jobs-tray__tools">
+                  <span class="mint-jobs-tray__value">{{ jobValue(job) }}</span>
+                  <slot name="job-actions" :job="job" />
+                  <button
+                    v-if="isActiveJobStatus(job.status) && job.can_cancel && tray.canCancel.value"
+                    type="button"
+                    class="mint-jobs-tray__icon-button mint-jobs-tray__icon-button--danger"
+                    :aria-label="`Cancel ${job.name}`"
+                    title="Cancel"
+                    :disabled="tray.isPending(job)"
+                    @click="cancelJob(job)"
+                  >
+                    <Square :size="12" aria-hidden="true" />
+                  </button>
+                  <button
+                    v-if="job.can_delete && tray.canDelete.value"
+                    type="button"
+                    class="mint-jobs-tray__icon-button"
+                    :aria-label="`Delete ${job.name}`"
+                    title="Delete"
+                    :disabled="tray.isPending(job)"
+                    @click="deleteJob(job)"
+                  >
+                    <Trash2 :size="14" aria-hidden="true" />
+                  </button>
+                </span>
                 <div
                   v-if="job.status === 'running'"
                   class="mint-jobs-tray__progress"
                   role="progressbar"
-                  aria-label="Job progress"
+                  :aria-label="`${job.name} progress`"
                   aria-valuemin="0"
                   aria-valuemax="100"
                   :aria-valuenow="jobPercent(job)"
                 >
                   <span :style="{ width: `${jobPercent(job)}%` }" />
                 </div>
-                <div class="mint-jobs-tray__job-footer">
-                  <span>{{ progressText(job) }}</span>
-                  <div class="mint-jobs-tray__job-actions">
-                    <slot name="job-actions" :job="job" />
-                    <button
-                      v-if="job.can_cancel && tray.canCancel.value"
-                      type="button"
-                      class="mint-jobs-tray__action mint-jobs-tray__action--danger"
-                      aria-label="Cancel job"
-                      :disabled="tray.isPending(job)"
-                      @click="cancelJob(job)"
-                    >
-                      Cancel
-                    </button>
-                    <button
-                      v-if="job.can_delete && tray.canDelete.value"
-                      type="button"
-                      class="mint-jobs-tray__icon-button mint-jobs-tray__icon-button--danger"
-                      aria-label="Delete job"
-                      :disabled="tray.isPending(job)"
-                      @click="deleteJob(job)"
-                    >
-                      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true">
-                        <path d="M4 7h16M9 7V4h6v3m-8 0 1 13h8l1-13M10 11v5M14 11v5" />
-                      </svg>
-                    </button>
-                  </div>
-                </div>
-              </article>
-            </template>
-
-            <template v-else>
-              <div v-if="canClear" class="mint-jobs-tray__clear-row">
-                <button
-                  type="button"
-                  class="mint-jobs-tray__action mint-jobs-tray__action--danger"
-                  @click="clearFinished"
+                <span
+                  class="mint-jobs-tray__detail"
+                  :class="{ 'mint-jobs-tray__detail--error': job.status === 'failed' }"
                 >
-                  Clear finished
-                </button>
+                  <slot name="job-detail" :job="job">{{ progressText(job) }}</slot>
+                </span>
               </div>
-              <p v-if="tray.historyJobs.value.length === 0" class="mint-jobs-tray__empty">
-                No job history
-              </p>
-              <article
-                v-for="job in tray.historyJobs.value"
-                :key="job.job_id"
-                class="mint-jobs-tray__job"
-              >
-                <div class="mint-jobs-tray__job-heading">
-                  <div class="mint-jobs-tray__job-identity">
-                    <button
-                      type="button"
-                      class="mint-jobs-tray__job-select"
-                      @click="emit('select', job)"
-                    >
-                      {{ job.name }}
-                    </button>
-                    <span class="mint-jobs-tray__kind">{{ job.kind }}</span>
-                  </div>
-                  <span class="mint-jobs-tray__status" :class="statusClass(job)">
-                    <span class="mint-jobs-tray__status-dot" aria-hidden="true" />
-                    {{ jobStatusLabel(job.status) }}
-                  </span>
-                </div>
-                <div class="mint-jobs-tray__job-footer">
-                  <span>{{ formatTimestamp(job.completed_at || job.created_at) }}</span>
-                  <div class="mint-jobs-tray__job-actions">
-                    <slot name="job-actions" :job="job" />
-                    <button
-                      v-if="job.can_delete && tray.canDelete.value"
-                      type="button"
-                      class="mint-jobs-tray__icon-button mint-jobs-tray__icon-button--danger"
-                      aria-label="Delete job"
-                      :disabled="tray.isPending(job)"
-                      @click="deleteJob(job)"
-                    >
-                      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true">
-                        <path d="M4 7h16M9 7V4h6v3m-8 0 1 13h8l1-13M10 11v5M14 11v5" />
-                      </svg>
-                    </button>
-                  </div>
-                </div>
-              </article>
             </template>
           </div>
         </section>

package/src/components/PluginWorkspaceView.props.ts

@@ -4,6 +4,7 @@ import type {
   PillNavOption,
   PluginWorkspaceViewSpec,
 } from '../types'
+import type { JobState } from '../types/jobs'
 import type {
   ControlComponentBinding,
   ControlComponentBindingsById,
@@ -46,6 +47,8 @@ export interface PluginWorkspaceViewEmits {
   'section-action': [sectionId: string, actionId: string]
   'form-submit': [sectionId: string, values: Record<string, unknown>]
   'form-cancel': [sectionId: string]
+  /** A job row in the jobs tray, or the just-completed job on the top-bar chip, was chosen. */
+  'job-select': [job: JobState]
 }
 
 /** Typed `emit` function shape produced by `defineEmits<PluginWorkspaceViewEmits>()`. */

package/src/components/PluginWorkspaceView.vue

@@ -20,9 +20,12 @@ import type {
   PillNavItem,
   PillNavOption,
 } from '../types'
+import type { JobState } from '../types/jobs'
 import { useAppExperiment } from '../composables/useAppExperiment'
+import { useJobCenter } from '../composables/useJobCenter'
 import { usePluginWorkspace } from '../composables/usePluginWorkspace'
 import AppToastContainer from './AppToastContainer.vue'
+import JobsStatusTray from './JobsStatusTray.vue'
 import WorkspaceControlsInternal from './internal/WorkspaceControlsInternal.vue'
 import WorkspaceShellInternal from './internal/WorkspaceShellInternal.vue'
 import WorkspaceSidebarInternal from './internal/WorkspaceSidebarInternal.vue'
@@ -76,6 +79,14 @@ if (props.spec.experiment) {
   })
 }
 
+// The job center is setup-time structure too: no `jobs`, no jobs control.
+const jobs = props.spec.jobs
+const jobCenter = jobs ? useJobCenter({ source: jobs }) : null
+
+function handleJobSelect(job: JobState) {
+  emit('job-select', job)
+}
+
 const {
   shell,
   sidebar,
@@ -105,6 +116,11 @@ function handleFormCancel(sectionId: string) {
 <template>
   <WorkspaceShellInternal
     :shell="shell"
+    :job="jobCenter ? jobCenter.topBarJob.value : undefined"
+    :jobs-done="jobCenter?.completedCount.value"
+    :jobs-open="jobCenter?.isOpen.value"
+    :jobs-panel-id="jobCenter?.panelId"
+    @job-click="jobCenter?.handleTopBarClick(handleJobSelect)"
     @pill-select="handlePillSelect"
     @pill-option-select="(option: PillNavOption, item: PillNavItem) => emit('pill-option-select', option, item)"
     @settings-values-change="emit('settings-values-change', $event)"
@@ -158,6 +174,7 @@ function handleFormCancel(sectionId: string) {
         </template>
       </WorkspaceControlsInternal>
       <AppToastContainer v-if="spec.toasts !== false" />
+      <JobsStatusTray v-if="jobCenter" :center="jobCenter" @select="handleJobSelect" />
     </template>
   </WorkspaceShellInternal>
 </template>

package/src/components/internal/WorkspaceShellInternal.vue

@@ -12,15 +12,22 @@ import type {
 import AppLayout from '../AppLayout.vue'
 import AppTopBar from '../AppTopBar.vue'
 import type { PluginWorkspaceShellModel } from '../../composables/pluginWorkspaceModel'
+import type { TopBarJob } from '../../types/jobs'
 
 defineProps<{
   shell: PluginWorkspaceShellModel
+  /** Passed to AppTopBar; undefined means no jobs control. */
+  job?: TopBarJob | null
+  jobsDone?: number
+  jobsOpen?: boolean
+  jobsPanelId?: string
 }>()
 
 const emit = defineEmits<{
   'pill-select': [item: PillNavItem]
   'pill-option-select': [option: PillNavOption, item: PillNavItem]
   'settings-values-change': [data: Record<string, unknown>]
+  'job-click': []
 }>()
 
 function handlePillOptionSelect(option: PillNavOption, item: PillNavItem) {
@@ -58,6 +65,11 @@ defineSlots<{
           :subtitle="shell.subtitle"
           :spec="shell.topBar"
           :pill="shell.pill"
+          :job="job"
+          :jobs-done="jobsDone"
+          :jobs-open="jobsOpen"
+          :jobs-panel-id="jobsPanelId"
+          @job-click="emit('job-click')"
           @pill-select="emit('pill-select', $event)"
           @pill-option-select="handlePillOptionSelect"
           @settings-values-change="emit('settings-values-change', $event)"