@morscherlab/mint-sdk 1.4.0-beta.9 → 1.4.0

package/src/components/internal/SelectMultipleInternal.vue

@@ -4,6 +4,7 @@ import { computed, nextTick, ref, useAttrs, useId, watch } from 'vue'
 import { Check, ChevronDown, X } from 'lucide-vue-next'
 import type { OptionPrimitive, SelectOption, SelectOptionInput } from '../../types'
 import { useEventListener } from '../../composables/useEventListener'
+import { useFloatingPanel } from '../../composables/useFloatingPanel'
 import { useListSelection } from '../../composables/useListSelection'
 import { normalizeOptionInput } from '../../utils/options'
 
@@ -49,6 +50,7 @@ const listboxId = `mint-multi-select-${id}`
 const root = ref<HTMLElement | null>(null)
 const field = ref<HTMLElement | null>(null)
 const search = ref<HTMLInputElement | null>(null)
+const panel = ref<HTMLElement | null>(null)
 const open = ref(false)
 const query = ref('')
 const activeIndex = ref(-1)
@@ -136,6 +138,9 @@ function handleSearchKeydown(event: KeyboardEvent): void {
   event.preventDefault()
 }
 
+// Fixed next to the field, so a modal body's overflow does not clip it; it stays in place in the DOM.
+const { style: panelStyle } = useFloatingPanel(field, panel, open, { matchWidth: true })
+
 watch(visibleOptions, options => { activeIndex.value = options.length > 0 ? 0 : -1 })
 watch(() => props.disabled, disabled => { if (disabled) void closePanel() })
 useEventListener(() => document, 'pointerdown', event => {
@@ -192,7 +197,7 @@ useEventListener(() => document, 'pointerdown', event => {
       <ChevronDown class="mint-multi-select__icon" :size="14" aria-hidden="true" />
     </div>
 
-    <div v-if="open" class="mint-popover mint-searchable-select__panel">
+    <div v-if="open" ref="panel" class="mint-popover mint-searchable-select__panel" :style="panelStyle">
       <div class="mint-searchable-select__search-wrap">
         <svg viewBox="0 0 20 20" fill="none" stroke="currentColor" aria-hidden="true">
           <circle cx="8.5" cy="8.5" r="5.5" /><path d="m13 13 4 4" />

package/src/components/internal/SelectSearchableInternal.vue

@@ -4,6 +4,7 @@ import { computed, nextTick, ref, useAttrs, useId, watch } from 'vue'
 import { ChevronsUpDown } from 'lucide-vue-next'
 import type { SelectOption, SelectOptionInput } from '../../types'
 import { useEventListener } from '../../composables/useEventListener'
+import { useFloatingPanel } from '../../composables/useFloatingPanel'
 import { normalizeOptionInput } from '../../utils/options'
 
 interface Props {
@@ -53,6 +54,7 @@ const triggerId = `${listboxId}-trigger`
 const root = ref<HTMLElement | null>(null)
 const trigger = ref<HTMLButtonElement | null>(null)
 const search = ref<HTMLInputElement | null>(null)
+const panel = ref<HTMLElement | null>(null)
 const open = ref(false)
 const query = ref('')
 const activeIndex = ref(-1)
@@ -144,6 +146,9 @@ function handleTriggerKeydown(event: KeyboardEvent): void {
   })
 }
 
+// Fixed next to the trigger, so a modal body's overflow does not clip it; it stays in place in the DOM.
+const { style: panelStyle } = useFloatingPanel(trigger, panel, open, { matchWidth: true })
+
 watch(visibleOptions, options => { activeIndex.value = firstEnabledIndex(options) })
 watch(() => props.disabled, disabled => { if (disabled) void closePanel() })
 useEventListener(() => document, 'pointerdown', event => {
@@ -180,7 +185,7 @@ useEventListener(() => document, 'pointerdown', event => {
       <ChevronsUpDown :size="14" aria-hidden="true" />
     </button>
 
-    <div v-if="open" class="mint-popover mint-searchable-select__panel">
+    <div v-if="open" ref="panel" class="mint-popover mint-searchable-select__panel" :style="panelStyle">
       <div class="mint-searchable-select__search-wrap">
         <svg viewBox="0 0 20 20" fill="none" stroke="currentColor" aria-hidden="true">
           <circle cx="8.5" cy="8.5" r="5.5" /><path d="m13 13 4 4" />

package/src/components/internal/WellEditPopupInternal.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 /** Single-well inspector for WellPlate / PlateEditor, composed from SDK fields (3b). */
 import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
-import { computePosition, flip, shift } from '@floating-ui/dom'
 import { ChevronRight, X } from 'lucide-vue-next'
 import type { Well, WellEditData, WellEditField } from '../../types'
+import { useFloatingPanel } from '../../composables/useFloatingPanel'
 import { useFocusTrap } from '../../composables/useFocusTrap'
 import { sampleTypeMarker } from '../../utils/sampleTypeMarker'
 import { DEFAULT_SAMPLE_TYPE_COLORS } from '../WellPlate.colors'
@@ -157,28 +157,18 @@ function handleInlineEnter(event: KeyboardEvent) {
   emit('close')
 }
 
-// Placement: flip and clamp to the viewport. Transparent (not hidden) until
-// placed, so the focus trap can move focus in on mount.
+// Placement at the clicked point: flip and clamp to the viewport. Inline, the
+// inspector stays in place and is not positioned.
 const containerRef = ref<HTMLElement | null>(null)
-const panelStyle = ref<Record<string, string>>({ opacity: '0' })
-
-async function place() {
-  const panel = containerRef.value
-  if (!panel || props.inline) return
+const pointAnchor = () => {
+  if (props.inline) return null
   const { x, y } = props.position
-  const anchor = {
-    getBoundingClientRect: () => ({ x, y, left: x, top: y, right: x, bottom: y, width: 0, height: 0 }),
-  }
-  const placed = await computePosition(anchor, panel, {
-    placement: 'right-start',
-    strategy: 'fixed',
-    middleware: [flip(), shift({ padding: 8 })],
-  })
-  panelStyle.value = { left: `${placed.x}px`, top: `${placed.y}px` }
+  return { getBoundingClientRect: () => ({ x, y, left: x, top: y, right: x, bottom: y, width: 0, height: 0 }) }
 }
-
-watch(() => props.position, place)
-watch(showAdvanced, () => nextTick(place))
+const { style: panelStyle } = useFloatingPanel(pointAnchor, containerRef, computed(() => !props.inline), {
+  placement: 'right-start',
+  offset: 0,
+})
 
 // The parent mounts and unmounts the popup, so the trap follows the lifecycle,
 // the same way BaseModal drives it off `modelValue`.
@@ -200,7 +190,6 @@ watch(() => props.wellId, () => { if (props.inline) focusInline() }, { flush: 'p
 onMounted(() => {
   if (props.inline) return focusInline()
   trapActive.value = true
-  void place()
   // Runs after the trap's own first-element focus: start in the name field.
   void nextTick(() => containerRef.value?.querySelector<HTMLInputElement>('[data-field="label"] input')?.focus())
 })
@@ -223,7 +212,7 @@ onBeforeUnmount(() => {
       :aria-label="`Edit well ${wellId}`"
       :tabindex="inline ? undefined : -1"
       @click="inline || $event.stopPropagation()"
-      @keydown.escape="commit(); emit('close')"
+      @keydown.escape.prevent="commit(); emit('close')"
       @keydown="inline && handleInlineEnter($event)"
       @focusout="handleFocusout"
     >

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)"

package/src/composables/pluginWorkspaceModel.ts

@@ -50,8 +50,8 @@ export interface PluginWorkspaceShellModel {
   sidebarCloseLabel: string
   /** Whether AppLayout should render a `#sidebar` template at all. */
   hasSidebarSurface: boolean
-  /** App or plugin title shown in the top bar. */
-  title: string
+  /** Top bar title. Unset, the top bar shows the plugin identity (`providePluginIdentity` or the platform). */
+  title?: string
   /** Secondary copy shown under the title. */
   subtitle?: string
   /** AppTopBar spec with the workspace defaults applied and the generated pills filled in; `false` removes the top bar. */

package/src/composables/useFileImport.ts

@@ -1,4 +1,5 @@
 import { ref, shallowRef, type Ref, type ShallowRef } from 'vue'
+import type { SheetData } from 'read-excel-file/universal'
 import { readErrorMessage } from '../utils/errors'
 
 export interface DelimitedTable {
@@ -116,6 +117,53 @@ export function readFileAsText(file: File, encoding?: string): Promise<string> {
   })
 }
 
+/**
+ * Read a `.csv`, `.tsv` or `.xlsx` upload as comma-delimited CSV text.
+ * A `.csv` file (or any other extension) comes back unchanged. An `.xlsx`
+ * file gives its first sheet; each cell is its stored value, so number
+ * formats such as leading zeros are not applied. Dates become ISO text.
+ */
+export async function readTableFileAsCsv(file: File): Promise<string> {
+  const name = file.name.toLowerCase()
+  if (name.endsWith('.xlsx')) return rowsToCsv(await readFirstSheet(file))
+  const text = await readFileAsText(file)
+  return name.endsWith('.tsv') ? rowsToCsv(parseDelimitedRows(text, '\t')) : text
+}
+
+async function readFirstSheet(file: File): Promise<string[][]> {
+  // Lazy import: plugins that never read .xlsx do not load the library.
+  const { readSheet } = await import('read-excel-file/universal')
+  let rows: SheetData<string>
+  try {
+    // Keep the stored text: no trim, and no float parse that rounds big numbers.
+    rows = await readSheet(file, { trim: false, parseNumber: text => text })
+  } catch {
+    throw new Error(`${file.name} is not a valid .xlsx workbook.`)
+  }
+  return rows.map(row => row.map(formatCell))
+}
+
+function formatCell(value: unknown): string {
+  if (value === null || value === undefined) return ''
+  if (typeof value === 'boolean') return value ? 'TRUE' : 'FALSE'
+  if (value instanceof Date) {
+    // Excel stores dates as float day counts; round off the float error.
+    const [date, time] = new Date(Math.round(value.getTime() / 1000) * 1000)
+      .toISOString().slice(0, 19).split('T')
+    if (date === '1899-12-30') return time   // a time-only cell
+    return time === '00:00:00' ? date : `${date}T${time}`
+  }
+  return String(value)
+}
+
+function rowsToCsv(rows: readonly (readonly string[])[]): string {
+  return rows.map(row => row.map(quoteCsvField).join(',')).join('\n')
+}
+
+function quoteCsvField(value: string): string {
+  return /[",\r\n]/.test(value) ? `"${value.replace(/"/g, '""')}"` : value
+}
+
 export function parseDelimitedText(
   text: string,
   options: ParseDelimitedTextOptions = {},
@@ -170,8 +218,10 @@ function parseDelimitedRows(text: string, delimiter: string): string[][] {
       if (quoted && next === '"') {
         field += '"'
         index++
-      } else {
+      } else if (quoted || field === '') {
         quoted = !quoted
+      } else {
+        field += '"'   // a quote inside an unquoted field is text
       }
       continue
     }

package/src/composables/useFloatingPanel.ts

@@ -0,0 +1,107 @@
+import {
+  autoUpdate,
+  computePosition,
+  flip,
+  hide,
+  offset,
+  shift,
+  size,
+  type Placement,
+  type ReferenceElement,
+} from '@floating-ui/dom'
+import { onScopeDispose, ref, toValue, watch, type MaybeRefOrGetter, type Ref } from 'vue'
+
+// Internal: not exported from the package entry points.
+
+export interface UseFloatingPanelOptions {
+  /** Default `'bottom-start'`. */
+  placement?: MaybeRefOrGetter<Placement>
+  /** Gap to the reference in px. Default 4. */
+  offset?: number
+  /** At least the reference width, at most 28rem (selects). */
+  matchWidth?: boolean
+  /** Re-place on scroll, resize and layout shift while open. Default `true`. */
+  follow?: boolean
+}
+
+export interface UseFloatingPanelReturn {
+  /** Bind to the panel: `position: fixed`, `left`, `top`, and `visibility: hidden` while the reference is scrolled out of view. */
+  style: Ref<Record<string, string>>
+  /** The placement after flip, for arrows and transitions. */
+  placement: Ref<Placement>
+  update: () => Promise<void>
+}
+
+/**
+ * Places `floating` next to `reference` with fixed positioning (offset, flip,
+ * shift, size, hide). A fixed panel escapes the `overflow` of its ancestors (a
+ * modal body) unless one of them has a transform, so it can stay in the DOM right
+ * after its trigger: Tab order, focus traps and outside-click checks are those of
+ * an in-place panel. The size middleware publishes the free height as
+ * `--mint-floating-available-height`; a panel whose list scrolls caps its
+ * `max-height` with it.
+ */
+export function useFloatingPanel(
+  reference: MaybeRefOrGetter<ReferenceElement | null>,
+  floating: Ref<HTMLElement | null>,
+  open: Ref<boolean>,
+  options: UseFloatingPanelOptions = {},
+): UseFloatingPanelReturn {
+  const style = ref<Record<string, string>>({ position: 'fixed', left: '0px', top: '0px' })
+  const placement = ref<Placement>(toValue(options.placement) ?? 'bottom-start')
+
+  async function update(): Promise<void> {
+    const referenceEl = toValue(reference)
+    const floatingEl = floating.value
+    if (!referenceEl || !floatingEl) return
+    const result = await computePosition(referenceEl, floatingEl, {
+      placement: toValue(options.placement) ?? 'bottom-start',
+      strategy: 'fixed',
+      middleware: [
+        offset(options.offset ?? 4),
+        flip(),
+        shift({ padding: 8 }),
+        size({
+          padding: 8,
+          // Written to the element, not the reactive style: floating-ui measures again right after.
+          apply({ availableHeight, rects, elements }) {
+            const target = elements.floating.style
+            target.setProperty('--mint-floating-available-height', `${Math.max(0, availableHeight)}px`)
+            if (options.matchWidth) {
+              target.minWidth = `${rects.reference.width}px`
+              target.maxWidth = '28rem'
+            }
+          },
+        }),
+        hide(),
+      ],
+    })
+    const next: Record<string, string> = { position: 'fixed', left: `${result.x}px`, top: `${result.y}px` }
+    // The trigger scrolled out of its scroll container: keep the panel open, but not floating detached.
+    if (result.middlewareData.hide?.referenceHidden) next.visibility = 'hidden'
+    // autoUpdate fires on every scroll; re-render only when the panel changes.
+    const current = style.value
+    if (current.left !== next.left || current.top !== next.top || current.visibility !== next.visibility) style.value = next
+    placement.value = result.placement
+  }
+
+  let stop: (() => void) | undefined
+  function release(): void {
+    stop?.()
+    stop = undefined
+  }
+
+  watch(
+    [open, () => toValue(reference), floating],
+    ([isOpen, referenceEl, floatingEl]) => {
+      release()
+      if (!isOpen || !referenceEl || !floatingEl) return
+      if (options.follow ?? true) stop = autoUpdate(referenceEl, floatingEl, () => void update())
+      else void update()
+    },
+    { flush: 'post', immediate: true },
+  )
+  onScopeDispose(release)
+
+  return { style, placement, update }
+}

package/src/composables/useJobCenter.ts

@@ -5,20 +5,26 @@ 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,
+  JobStatus,
+  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,9 +149,41 @@ function duplicatePluginJobId(jobId: string): Error {
 export interface UseJobCenterOptions {
   source?: MaybeRefOrGetter<PluginJobCenterSource | undefined>
   loadOnMount?: boolean
+  /**
+   * 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[]>
@@ -155,14 +193,23 @@ 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 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. */
+  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 +217,35 @@ 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 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
 }
@@ -184,7 +260,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 +275,103 @@ 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,
+      }
+    }
+    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)
+    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,14 +462,20 @@ 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 {
+    source,
     jobs,
     activeJobs,
     historyJobs,
@@ -307,14 +485,18 @@ export function useJobCenter(
     canCancel,
     canDelete,
     canClearFinished,
+    panelId: `mint-jobs-tray-${useId()}`,
+    rowView,
+    topBarJob,
+    completedCount,
     isOpen,
-    activeTab,
     isLoading,
     error,
     pendingJobIds,
     open: () => { isOpen.value = true },
     close: () => { isOpen.value = false },
     toggle: () => { isOpen.value = !isOpen.value },
+    handleTopBarClick,
     refresh,
     cancelJob,
     deleteJob,