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

package/src/composables/useJobCenter.ts

@@ -5,20 +5,25 @@ import {
   ref,
   shallowRef,
   toValue,
+  useId,
+  watch,
   type ComputedRef,
   type MaybeRefOrGetter,
   type Ref,
   type ShallowRef,
 } from 'vue'
 
-import { isActiveJobStatus, normalizeJobState } from '../jobs'
+import { isActiveJobStatus, jobStatusLabel, normalizeJobPercent, normalizeJobState } from '../jobs'
 import type {
   JobListPayload,
   JobState,
   JobStateInput,
+  TopBarJob,
 } from '../types/jobs'
+import { usePlatform } from './usePlatform'
 
-export type JobsStatusTrayTab = 'active' | 'history'
+/** How long a job that just completed stays in the top-bar run slot. */
+const FINISHED_HOLD_MS = 6000
 
 /**
  * The canonical owner of a collection of plugin jobs.
@@ -143,6 +148,8 @@ 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. */
+  topBarJob?: (job: JobState) => TopBarJob | null
 }
 
 export interface UseJobCenterReturn {
@@ -155,14 +162,21 @@ export interface UseJobCenterReturn {
   canCancel: ComputedRef<boolean>
   canDelete: ComputedRef<boolean>
   canClearFinished: ComputedRef<boolean>
+  /** DOM id of the JobsStatusTray panel, for `AppTopBar`'s `jobsPanelId` prop. */
+  panelId: string
+  /** 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. */
+  completedCount: ComputedRef<number>
   isOpen: Ref<boolean>
-  activeTab: Ref<JobsStatusTrayTab>
   isLoading: Ref<boolean>
   error: ShallowRef<string | null>
   pendingJobIds: Ref<Set<string>>
   open: () => void
   close: () => void
   toggle: () => void
+  /** The top-bar chip: with the tray closed and none of the viewer's jobs active, selects the held just-completed job; else toggles. */
+  handleTopBarClick: (onSelect: (job: JobState) => void) => void
   refresh: () => Promise<boolean>
   cancelJob: (job: JobState) => Promise<boolean>
   deleteJob: (job: JobState) => Promise<boolean>
@@ -170,6 +184,24 @@ export interface UseJobCenterReturn {
   isPending: (job: JobState) => boolean
 }
 
+/** The stored seen failures, or null when nothing is stored or storage is blocked. */
+function readSeenFailed(key: string): Set<string> | null {
+  try {
+    const parsed: unknown = JSON.parse(globalThis.localStorage?.getItem(key) ?? 'null')
+    return Array.isArray(parsed) ? new Set(parsed.filter((id): id is string => typeof id === 'string')) : null
+  } catch {
+    return null
+  }
+}
+
+function writeSeenFailed(key: string, seen: Set<string>): void {
+  try {
+    globalThis.localStorage?.setItem(key, JSON.stringify([...seen]))
+  } catch {
+    // Private windows and full storage: the state lasts until reload.
+  }
+}
+
 function errorMessage(error: unknown, fallback: string): string {
   return error instanceof Error ? error.message : fallback
 }
@@ -184,7 +216,6 @@ export function useJobCenter(
   options: UseJobCenterOptions = {},
 ): UseJobCenterReturn {
   const isOpen = ref(false)
-  const activeTab = ref<JobsStatusTrayTab>('active')
   const isLoading = ref(false)
   const error = shallowRef<string | null>(null)
   const pendingJobIds = ref(new Set<string>())
@@ -200,6 +231,88 @@ export function useJobCenter(
   const historyJobs = computed(() => jobs.value.filter(job => !isActiveJobStatus(job.status)))
   const deletableJobs = computed(() => historyJobs.value.filter(job => job.can_delete))
   const featuredJob = computed(() => activeJobs.value[0] ?? historyJobs.value[0] ?? null)
+  const completedCount = computed(() => jobs.value.filter(job => job.status === 'completed').length)
+
+  // Top-bar run slot: the viewer's own jobs only. Standalone or with auth off
+  // (no signed-in user), every job is the viewer's.
+  const { integrated, user, plugin, isAdmin } = usePlatform()
+  const isOwnJob = (job: JobState) => {
+    if (!integrated.value) return true
+    // With no user, isAdmin is true only with auth off.
+    if (user.value == null) return isAdmin.value
+    return (job.owner_user_id ?? job.user_id) === String(user.value.id)
+  }
+  const ownActiveJobs = computed(() => activeJobs.value.filter(isOwnJob))
+  const justFinished = shallowRef<JobState | null>(null)
+  // The live held job; it drops out once the job leaves the list.
+  const heldJob = computed(() => {
+    const held = justFinished.value
+    return held ? jobs.value.find(job => job.job_id === held.job_id) ?? null : null
+  })
+  let finishedTimer: ReturnType<typeof setTimeout> | undefined
+  // Compare active jobs within one source only: a replaced source starts over.
+  watch([source, ownActiveJobs], ([currentSource, now], [previousSource, before]) => {
+    if (currentSource !== previousSource) {
+      justFinished.value = null
+      return
+    }
+    const nowIds = new Set(now.map(job => job.job_id))
+    const left = new Set(before.filter(job => !nowIds.has(job.job_id)).map(job => job.job_id))
+    const finished = jobs.value.find(job => left.has(job.job_id) && job.status === 'completed')
+    if (!finished) return
+    justFinished.value = finished
+    clearTimeout(finishedTimer)
+    finishedTimer = setTimeout(() => { justFinished.value = null }, FINISHED_HOLD_MS)
+  })
+  // ponytail: the seen set only grows; prune to listed jobs if the stored array ever matters.
+  const seenFailedKey = `mint.jobs.${plugin.value?.id ?? 'standalone'}.seen-failed`
+  const storedSeenFailed = readSeenFailed(seenFailedKey)
+  const seenFailed = shallowRef(storedSeenFailed ?? new Set<string>())
+  const unseenFailedJobs = computed(() => historyJobs.value.filter(job => (
+    job.status === 'failed' && isOwnJob(job) && !seenFailed.value.has(job.job_id)
+  )))
+  function markFailedSeen(): void {
+    seenFailed.value = new Set([...seenFailed.value, ...unseenFailedJobs.value.map(job => job.job_id)])
+    writeSeenFailed(seenFailedKey, seenFailed.value)
+  }
+  // Nothing stored (new browser, cleared or blocked storage): the failures at the
+  // initial load are the baseline, so only later failures alert. Without a load
+  // step, the first non-empty list stands in for it.
+  let hasBaseline = storedSeenFailed !== null
+  let awaitingLoad = options.loadOnMount !== false && Boolean(source.value?.refresh)
+  function takeBaseline(): void {
+    if (hasBaseline || !active) return
+    hasBaseline = true
+    markFailedSeen()
+  }
+  watch(jobs, (list) => {
+    if (!awaitingLoad && list.length > 0) takeBaseline()
+  }, { immediate: true })
+  // The open tray shows every failure, including one that happens while it is open.
+  watch([isOpen, unseenFailedJobs], ([open, unseen]) => {
+    if (open && unseen.length > 0) markFailedSeen()
+  })
+  const topBarJob = computed<TopBarJob | null>(() => {
+    const own = ownActiveJobs.value
+    const shown = own.find(job => job.status === 'awaiting_input') ?? own[0]
+    if (shown) {
+      return options.topBarJob?.(shown) ?? {
+        status: shown.status,
+        label: shown.progress.message || `${shown.name} ${jobStatusLabel(shown.status).toLowerCase()}`,
+        percent: shown.status === 'running' ? normalizeJobPercent(shown.progress.percent) : null,
+      }
+    }
+    if (heldJob.value) return { status: 'completed', label: `${heldJob.value.name} completed` }
+    const failed = unseenFailedJobs.value.length
+    return failed > 0 ? { status: 'failed', label: `${failed} failed` } : null
+  })
+
+  function handleTopBarClick(onSelect: (job: JobState) => void): void {
+    const finished = heldJob.value
+    if (!isOpen.value && ownActiveJobs.value.length === 0 && finished) onSelect(finished)
+    else isOpen.value = !isOpen.value
+  }
+
   const canRefresh = computed(() => Boolean(source.value?.refresh))
   const canCancel = computed(() => Boolean(source.value?.cancel))
   const canDelete = computed(() => Boolean(source.value?.delete))
@@ -290,11 +403,16 @@ export function useJobCenter(
   }
 
   onMounted(() => {
-    if (options.loadOnMount !== false) void refresh()
+    if (options.loadOnMount === false) return
+    void refresh().then((loaded) => {
+      awaitingLoad = false
+      if (loaded || jobs.value.length > 0) takeBaseline()
+    })
   })
   onUnmounted(() => {
     active = false
     requestGeneration += 1
+    clearTimeout(finishedTimer)
   })
 
   return {
@@ -307,14 +425,17 @@ export function useJobCenter(
     canCancel,
     canDelete,
     canClearFinished,
+    panelId: `mint-jobs-tray-${useId()}`,
+    topBarJob,
+    completedCount,
     isOpen,
-    activeTab,
     isLoading,
     error,
     pendingJobIds,
     open: () => { isOpen.value = true },
     close: () => { isOpen.value = false },
     toggle: () => { isOpen.value = !isOpen.value },
+    handleTopBarClick,
     refresh,
     cancelJob,
     deleteJob,

package/src/runtime.ts

@@ -77,7 +77,6 @@ export {
   combinePluginJobSources,
   useJobCenter,
   type CombinedPluginJobCenterSource,
-  type JobsStatusTrayTab,
   type PluginJobCenterSource,
   type UseJobCenterOptions,
   type UseJobCenterReturn,

package/src/styles/components/app-top-bar.css

@@ -338,6 +338,13 @@
   flex-shrink: 0;
 }
 
+.mint-topbar__job-count {
+  color: var(--text-muted);
+  font-family: var(--font-mono);
+  font-size: 0.6875rem;
+  font-variant-numeric: tabular-nums;
+}
+
 .mint-topbar__job-icon--spin {
   animation: mint-topbar-job-spin 1s linear infinite;
 }