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

package/src/components/JobsStatusTray.vue

@@ -27,20 +27,26 @@ import {
   X,
 } from 'lucide-vue-next'
 
-import { isActiveJobStatus, jobStatusLabel, normalizeJobPercent } from '../jobs'
+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 {
   /** 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>(), {
   title: 'Jobs',
   teleportTo: 'body',
+  confirm: false,
 })
 
 const emit = defineEmits<{
@@ -70,15 +76,19 @@ const panelRef = ref<HTMLElement | null>(null)
 const teleportTarget = computed(() => props.teleportTo || 'body')
 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(() => [
-  ...tray.activeJobs.value.filter(job => job.status === 'awaiting_input'),
-  ...tray.activeJobs.value.filter(job => job.status !== 'awaiting_input'),
-])
+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'),
+  ]
+})
 const sections = computed(() => [
-  { key: 'active', title: 'Active', jobs: activeRows.value },
-  { key: 'finished', title: 'Finished', jobs: tray.historyJobs.value },
-].filter(section => section.jobs.length > 0))
+  { 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 = [
     [tray.activeJobs.value.length, 'active'],
@@ -94,9 +104,13 @@ const canClear = computed(() => (
 
 // 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') closeTray()
+  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) {
@@ -110,6 +124,18 @@ watch(tray.isOpen, async (open) => {
 }, { flush: 'sync' })
 onBeforeUnmount(() => document.removeEventListener('keydown', onDocumentKeydown))
 
+// 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()
   // Safari leaves a clicked button unfocused (opener = body), and the chip node is
@@ -121,17 +147,6 @@ function closeTray(): void {
   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'
-  }
-  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 formatTime(value: string | null): string {
   if (!value) return ''
   const date = new Date(value)
@@ -140,14 +155,89 @@ function formatTime(value: string | null): string {
     : 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 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)
 }
 
-/** 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)
+// 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',
+    }
+  }
+  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
+  }
+  pending.value = { action, job, ids: action === 'clear' ? deletableIds() : undefined }
+  confirmText.value = textFor(action, job)
+  confirmOpen.value = true
+}
+
+function deletableIds(): string[] {
+  return tray.deletableJobs.value.map(job => job.job_id).sort()
+}
+
+// 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
+}
+
+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 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> {
@@ -221,36 +311,37 @@ async function clearFinished(): Promise<void> {
             <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>
+                <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="clearFinished"
+                  @click="request('clear')"
                 >
                   Clear
                 </button>
               </div>
 
               <div
-                v-for="job in section.jobs"
+                v-for="{ job, view } in section.rows"
                 :key="job.job_id"
                 class="mint-jobs-tray__row"
-                :class="{ 'mint-jobs-tray__row--awaiting-input': job.status === 'awaiting_input' }"
+                :class="{ 'mint-jobs-tray__row--awaiting-input': view.status === 'awaiting_input' }"
                 :data-status="job.status"
               >
+                <!-- data-status is the real job status; the row view only changes how it looks. -->
                 <component
-                  :is="STATUS_ICONS[job.status]"
+                  :is="STATUS_ICONS[view.status]"
                   :size="15"
-                  :class="['mint-jobs-tray__status', `mint-jobs-tray__status--${job.status.replace('_', '-')}`]"
+                  :class="['mint-jobs-tray__status', `mint-jobs-tray__status--${view.status.replace('_', '-')}`]"
                   role="img"
-                  :aria-label="jobStatusLabel(job.status)"
+                  :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) }}</span>
+                  <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"
@@ -259,7 +350,7 @@ async function clearFinished(): Promise<void> {
                     :aria-label="`Cancel ${job.name}`"
                     title="Cancel"
                     :disabled="tray.isPending(job)"
-                    @click="cancelJob(job)"
+                    @click="request('cancel', job)"
                   >
                     <Square :size="12" aria-hidden="true" />
                   </button>
@@ -270,33 +361,47 @@ async function clearFinished(): Promise<void> {
                     :aria-label="`Delete ${job.name}`"
                     title="Delete"
                     :disabled="tray.isPending(job)"
-                    @click="deleteJob(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.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>
                 <span
                   class="mint-jobs-tray__detail"
                   :class="{ 'mint-jobs-tray__detail--error': job.status === 'failed' }"
                 >
-                  <slot name="job-detail" :job="job">{{ progressText(job) }}</slot>
+                  <slot name="job-detail" :job="job">{{ view.message }}</slot>
                 </span>
               </div>
             </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>

package/src/composables/useJobCenter.ts

@@ -18,6 +18,7 @@ import type {
   JobListPayload,
   JobState,
   JobStateInput,
+  JobStatus,
   TopBarJob,
 } from '../types/jobs'
 import { usePlatform } from './usePlatform'
@@ -148,11 +149,41 @@ function duplicatePluginJobId(jobId: string): Error {
 export interface UseJobCenterOptions {
   source?: MaybeRefOrGetter<PluginJobCenterSource | undefined>
   loadOnMount?: boolean
-  /** Maps the chosen own active job to the top-bar chip; `null` keeps the default mapping. */
+  /**
+   * Maps the job that the top-bar chip shows. It is called for the chosen own
+   * active job AND for the held just-completed job, so check `job.status`.
+   * `null` keeps the default mapping.
+   */
   topBarJob?: (job: JobState) => TopBarJob | null
+  /**
+   * Overrides how a tray row looks: `status` (icon, awaiting-input tint and
+   * pinning), `percent` (progress bar and value) and `message` (detail line).
+   * A missing or `undefined` field, or a `null` status or message, keeps the
+   * job's own; `percent: null` hides the bar and shows the time, and a status
+   * alone keeps the job's own percent. The job's section, actions and counts
+   * do not change.
+   */
+  rowJob?: (job: JobState) => JobRowOverride | null
+}
+
+/** A `rowJob` result; see `UseJobCenterOptions.rowJob`. */
+export interface JobRowOverride {
+  status?: JobStatus | null
+  percent?: number | null
+  message?: string | null
+}
+
+/** How a tray row shows a job; see `UseJobCenterReturn.rowView`. */
+export interface JobRowView {
+  status: JobStatus
+  /** 0-100, rounded; `null` hides the progress bar and shows the time instead. */
+  percent: number | null
+  message: string
 }
 
 export interface UseJobCenterReturn {
+  /** The current source; a new identity is a new job list. */
+  source: ComputedRef<PluginJobCenterSource | undefined>
   jobs: ComputedRef<JobState[]>
   activeJobs: ComputedRef<JobState[]>
   historyJobs: ComputedRef<JobState[]>
@@ -164,6 +195,8 @@ export interface UseJobCenterReturn {
   canClearFinished: ComputedRef<boolean>
   /** DOM id of the JobsStatusTray panel, for `AppTopBar`'s `jobsPanelId` prop. */
   panelId: string
+  /** The row view of a job, with the `rowJob` option applied. */
+  rowView: (job: JobState) => JobRowView
   /** The viewer's own job for `AppTopBar`'s `job` prop. */
   topBarJob: ComputedRef<TopBarJob | null>
   /** Jobs in the list with status `completed`, for `AppTopBar`'s `jobsDone` prop. */
@@ -202,6 +235,17 @@ function writeSeenFailed(key: string, seen: Set<string>): void {
   }
 }
 
+function jobMessage(job: JobState): string {
+  if (job.error) return job.error
+  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 errorMessage(error: unknown, fallback: string): string {
   return error instanceof Error ? error.message : fallback
 }
@@ -302,11 +346,26 @@ export function useJobCenter(
         percent: shown.status === 'running' ? normalizeJobPercent(shown.progress.percent) : null,
       }
     }
-    if (heldJob.value) return { status: 'completed', label: `${heldJob.value.name} completed` }
+    const held = heldJob.value
+    if (held) return options.topBarJob?.(held) ?? { status: 'completed', label: `${held.name} completed` }
     const failed = unseenFailedJobs.value.length
     return failed > 0 ? { status: 'failed', label: `${failed} failed` } : null
   })
 
+  function rowView(job: JobState): JobRowView {
+    const override = options.rowJob?.(job) ?? {}
+    const status = override.status ?? job.status
+    // Only an explicit percent changes the bar; a status override keeps the job's own.
+    const percent = override.percent !== undefined
+      ? override.percent
+      : job.status === 'running' ? job.progress.percent : null
+    return {
+      status,
+      percent: percent == null ? null : Math.round(normalizeJobPercent(percent)),
+      message: override.message ?? jobMessage(job),
+    }
+  }
+
   function handleTopBarClick(onSelect: (job: JobState) => void): void {
     const finished = heldJob.value
     if (!isOpen.value && ownActiveJobs.value.length === 0 && finished) onSelect(finished)
@@ -416,6 +475,7 @@ export function useJobCenter(
   })
 
   return {
+    source,
     jobs,
     activeJobs,
     historyJobs,
@@ -426,6 +486,7 @@ export function useJobCenter(
     canDelete,
     canClearFinished,
     panelId: `mint-jobs-tray-${useId()}`,
+    rowView,
     topBarJob,
     completedCount,
     isOpen,

package/src/runtime.ts

@@ -77,6 +77,8 @@ export {
   combinePluginJobSources,
   useJobCenter,
   type CombinedPluginJobCenterSource,
+  type JobRowOverride,
+  type JobRowView,
   type PluginJobCenterSource,
   type UseJobCenterOptions,
   type UseJobCenterReturn,

package/src/styles/components/jobs-status-tray.css

@@ -278,3 +278,8 @@
     transition-duration: 0.01ms !important;
   }
 }
+
+/* The tray's confirm dialog sits above the tray and its scrim (BaseModal drops class fallthrough). */
+.mint-modal:has(.mint-jobs-tray__confirm) {
+  z-index: 1001;
+}