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

package/src/components/JobsStatusTray.vue

@@ -1,35 +1,52 @@
 <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 {
-  jobStatusLabel,
-  normalizeJobPercent,
-} from '../jobs'
+import { computed, nextTick, onBeforeUnmount, ref, watch, type Component } from 'vue'
 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 } from '../jobs'
+import type { UseJobCenterReturn } from '../composables/useJobCenter'
+import type { JobState, JobStatus } from '../types/jobs'
+import ConfirmDialog from './ConfirmDialog.vue'
+
+type ConfirmAction = 'cancel' | 'delete' | 'clear'
 
 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
+  /** Ask before Cancel, Delete and Clear (`true`), or before the named ones only. Default off. */
+  confirm?: boolean | Partial<Record<ConfirmAction, boolean>>
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  loadOnMount: true,
-  title: 'Analysis jobs',
+  title: 'Jobs',
   teleportTo: 'body',
+  confirm: false,
 })
 
 const emit = defineEmits<{
@@ -40,107 +57,187 @@ 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,
+const tray = props.center
+const titleId = `${tray.panelId}-title`
+const rows = (jobs: JobState[]) => jobs.map(job => ({ job, view: tray.rowView(job) }))
+// A job waiting for input is the only one that needs a person: pin it first.
+const activeRows = computed(() => {
+  const active = rows(tray.activeJobs.value)
+  return [
+    ...active.filter(row => row.view.status === 'awaiting_input'),
+    ...active.filter(row => row.view.status !== 'awaiting_input'),
+  ]
 })
-// 2f: 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', rows: activeRows.value },
+  { key: 'finished', title: 'Finished', rows: rows(tray.historyJobs.value) },
+].filter(section => section.rows.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.
+// An Escape that an inner control handled, or that belongs to a modal dialog
+// above the tray (its own confirm dialog too), leaves the tray open.
+let opener: HTMLElement | null = null
+function onDocumentKeydown(event: KeyboardEvent): void {
+  if (event.key !== 'Escape' || event.defaultPrevented || confirmOpen.value) return
+  if (event.target instanceof Element && event.target.closest('[aria-modal="true"]')) return
+  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> {
+// A focused row that leaves the list (an action or a refresh) drops focus to body:
+// note the focused element before the update and keep focus in the panel after it.
+let focusedInPanel: Element | null = null
+watch(tray.jobs, () => {
+  const focused = document.activeElement
+  focusedInPanel = focused && panelRef.value?.contains(focused) ? focused : null
+}, { flush: 'pre' })
+watch(tray.jobs, () => {
+  if (tray.isOpen.value && focusedInPanel && !focusedInPanel.isConnected) panelRef.value?.focus()
+  focusedInPanel = null
+}, { flush: 'post' })
+
+function closeTray(): void {
   tray.close()
-  await nextTick()
-  triggerRef.value?.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 formatTime(value: string | null): string {
+  if (!value) return ''
+  const date = new Date(value)
+  return Number.isNaN(date.getTime())
+    ? ''
+    : date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
 }
 
-async function toggleTray(): Promise<void> {
-  if (tray.isOpen.value) await closeTray()
-  else await openTray()
+/** Right-hand value: the percent while a job moves, else when it ended or started. */
+function jobValue(job: JobState, percent: number | null): string {
+  if (percent != null) return `${percent}%`
+  return formatTime(job.completed_at || job.started_at || job.created_at)
 }
 
-function onPanelKeydown(event: KeyboardEvent): void {
-  if (event.key === 'Escape') {
-    void closeTray()
-    return
+// Confirmation: the action waits for the dialog; it runs on the live job.
+// `ids`: the finished jobs that the user confirmed to clear.
+const pending = ref<{ action: ConfirmAction; job?: JobState; ids?: string[] } | null>(null)
+const confirmOpen = ref(false)
+// Set on request and kept, so the dialog text stays while it fades out.
+const confirmText = ref<{ title: string; message: string; confirmLabel: string; cancelLabel: string } | null>(null)
+const confirmEnabled = computed(() => props.confirm === true
+  || (typeof props.confirm === 'object' && Object.values(props.confirm).some(Boolean)))
+
+function textFor(action: ConfirmAction, job?: JobState) {
+  if (action === 'clear') {
+    const count = tray.deletableJobs.value.length
+    return {
+      title: 'Clear finished jobs?',
+      message: `${count} finished ${count === 1 ? 'job' : 'jobs'} and their stored results are deleted.`,
+      confirmLabel: 'Clear jobs',
+      cancelLabel: 'Cancel',
+    }
   }
-  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 action === 'cancel'
+    ? { title: 'Cancel job?', message: `${job?.name} stops. Its partial results are lost.`, confirmLabel: 'Cancel job', cancelLabel: 'Keep running' }
+    : { title: 'Delete job?', message: `${job?.name} and its stored result are deleted.`, confirmLabel: 'Delete job', cancelLabel: 'Cancel' }
+}
+
+function needsConfirm(action: ConfirmAction): boolean {
+  return props.confirm === true || (typeof props.confirm === 'object' && props.confirm[action] === true)
+}
+
+function request(action: ConfirmAction, job?: JobState): void {
+  if (!needsConfirm(action)) {
+    void run(action, job)
     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()
-  }
+  pending.value = { action, job, ids: action === 'clear' ? deletableIds() : undefined }
+  confirmText.value = textFor(action, job)
+  confirmOpen.value = true
 }
 
-function progressText(job: JobState): string {
-  if (job.status === 'awaiting_input') {
-    return job.progress.message || 'Waiting for external input'
-  }
-  if (job.status === 'queued' && job.queue_position > 0) {
-    return `Queue position ${job.queue_position}`
-  }
-  return job.progress.message || job.progress.stage || jobStatusLabel(job.status)
+function deletableIds(): string[] {
+  return tray.deletableJobs.value.map(job => job.job_id).sort()
 }
 
-function formatTimestamp(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)
+// A new source is a new job list: the confirmed target is gone.
+watch(tray.source, () => onConfirmOpen(false))
+
+function onConfirmOpen(open: boolean): void {
+  confirmOpen.value = open
+  if (!open) pending.value = null
 }
 
-function statusClass(job: JobState): string {
-  return `mint-jobs-tray__status--${job.status.replace('_', '-')}`
+async function confirmPending(): Promise<void> {
+  // A second Confirm click while the dialog fades out does nothing.
+  const current = pending.value
+  if (!confirmOpen.value || !current) return
+  if (current.action === 'clear') {
+    // Polling changed the finished jobs: ask again with the new count.
+    const ids = deletableIds()
+    if (ids.join() !== current.ids?.join()) {
+      pending.value = { ...current, ids }
+      confirmText.value = textFor('clear')
+      return
+    }
+  }
+  confirmOpen.value = false
+  pending.value = null
+  if (current.action === 'clear') return clearFinished()
+  // Polling can end or remove the job while the dialog is open: then do nothing.
+  const live = tray.jobs.value.find(job => job.job_id === current.job?.job_id)
+  const allowed = live && (current.action === 'cancel'
+    ? isActiveJobStatus(live.status) && live.can_cancel
+    : live.can_delete)
+  if (allowed) await run(current.action, live)
 }
 
-function jobPercent(job: JobState): number {
-  return Math.round(normalizeJobPercent(job.progress.percent))
+function run(action: ConfirmAction, job?: JobState): Promise<void> {
+  if (action === 'clear') return clearFinished()
+  return action === 'cancel' ? cancelJob(job!) : deleteJob(job!)
 }
 
 async function cancelJob(job: JobState): Promise<void> {
@@ -162,249 +259,149 @@ 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">{{ 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.rows.length }}</span>
+                <button
+                  v-if="section.key === 'finished' && canClear"
+                  type="button"
+                  class="mint-jobs-tray__section-action"
+                  @click="request('clear')"
+                >
+                  Clear
+                </button>
+              </div>
+
+              <div
+                v-for="{ job, view } in section.rows"
                 :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': view.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>
+                <!-- data-status is the real job status; the row view only changes how it looks. -->
+                <component
+                  :is="STATUS_ICONS[view.status]"
+                  :size="15"
+                  :class="['mint-jobs-tray__status', `mint-jobs-tray__status--${view.status.replace('_', '-')}`]"
+                  role="img"
+                  :aria-label="jobStatusLabel(view.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, view.percent) }}</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="request('cancel', 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="request('delete', job)"
+                  >
+                    <Trash2 :size="14" aria-hidden="true" />
+                  </button>
+                </span>
                 <div
-                  v-if="job.status === 'running'"
+                  v-if="view.percent != null"
                   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)"
+                  :aria-valuenow="view.percent"
                 >
-                  <span :style="{ width: `${jobPercent(job)}%` }" />
+                  <span :style="{ width: `${view.percent}%` }" />
                 </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">{{ view.message }}</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>
       </Transition>
+
+      <ConfirmDialog
+        v-if="confirmEnabled"
+        :open="confirmOpen"
+        tone="error"
+        :title="confirmText?.title"
+        :confirm-label="confirmText?.confirmLabel"
+        :cancel-label="confirmText?.cancelLabel"
+        @update:open="onConfirmOpen"
+        @confirm="confirmPending"
+      >
+        <!-- The marker class lifts the dialog above the tray (jobs-status-tray.css). -->
+        <p class="mint-confirm__message mint-jobs-tray__confirm">{{ confirmText?.message }}</p>
+      </ConfirmDialog>
     </div>
   </Teleport>
 </template>