@morscherlab/mint-sdk 1.5.0-beta.6 → 1.5.0-beta.8

package/dist/{useRealtime-jOetF2mM.js → useRealtime-BLQEjbuq.js}

@@ -1,5 +1,5 @@
-import { d as isActiveJobStatus, p as jobStatusLabel } from "./records-BAymyHAn.js";
-import { t as ConfirmDialog_default } from "./ConfirmDialog-D9QXFpsy.js";
+import { d as isActiveJobStatus, p as jobStatusLabel } from "./records-GtiVMlTQ.js";
+import { t as ConfirmDialog_default } from "./ConfirmDialog-BjFsOpBe.js";
 import { Fragment, Teleport, Transition, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, getCurrentScope, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, onScopeDispose, openBlock, readonly, ref, renderList, renderSlot, resolveDynamicComponent, toDisplayString, toValue, unref, watch, withCtx } from "vue";
 import { CircleAlert, CircleCheck, CircleSlash, CircleX, Clock, LoaderCircle, RefreshCw, Square, Trash2, X } from "lucide-vue-next";
 //#region src/components/JobsStatusTray.vue?vue&type=script&setup=true&lang.ts
@@ -505,4 +505,4 @@ function subscribeRealtime(topics, handler, withPresence) {
 //#endregion
 export { JobsStatusTray_default as i, subscribeRealtime as n, useRealtime as r, currentPresence as t };
 
-//# sourceMappingURL=useRealtime-jOetF2mM.js.map
+//# sourceMappingURL=useRealtime-BLQEjbuq.js.map

package/dist/{useRealtime-jOetF2mM.js.map → useRealtime-BLQEjbuq.js.map}

@@ -1 +1 @@
-{"version":3,"file":"useRealtime-jOetF2mM.js","names":[],"sources":["../src/components/JobsStatusTray.vue","../src/components/JobsStatusTray.vue","../src/composables/useRealtime.ts"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Compact, non-modal job panel under the top bar, driven by a job center the parent owns.\n *\n * The parent passes the center's `topBarJob`, `completedCount` and `handleTopBarClick`\n * to `AppTopBar`; its run slot opens this panel. `PluginWorkspaceView` does this for you\n * when its spec sets `jobs`.\n *\n * @example Recommended\n * ```vue\n * <AppTopBar :job=\"center.topBarJob.value\" :jobs-done=\"center.completedCount.value\"\n *   @job-click=\"center.handleTopBarClick(openResult)\" />\n * <JobsStatusTray :center=\"center\" @select=\"openResult\" />\n * ```\n */\nimport { computed, nextTick, onBeforeUnmount, ref, watch, type Component } from 'vue'\nimport {\n  CircleAlert,\n  CircleCheck,\n  CircleSlash,\n  CircleX,\n  Clock,\n  LoaderCircle,\n  RefreshCw,\n  Square,\n  Trash2,\n  X,\n} from 'lucide-vue-next'\n\nimport { isActiveJobStatus, jobStatusLabel } from '../jobs'\nimport type { UseJobCenterReturn } from '../composables/useJobCenter'\nimport type { JobState, JobStatus } from '../types/jobs'\nimport ConfirmDialog from './ConfirmDialog.vue'\n\ntype ConfirmAction = 'cancel' | 'delete' | 'clear'\n\ninterface Props {\n  /** Job center from `useJobCenter()`; the parent owns it and opens the panel through it. */\n  center: UseJobCenterReturn\n  title?: string\n  teleportTo?: string | HTMLElement | false\n  /** Ask before Cancel, Delete and Clear (`true`), or before the named ones only. Default off. */\n  confirm?: boolean | Partial<Record<ConfirmAction, boolean>>\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  title: 'Jobs',\n  teleportTo: 'body',\n  confirm: false,\n})\n\nconst emit = defineEmits<{\n  select: [job: JobState]\n  error: [message: string]\n}>()\n\ndefineSlots<{\n  /** Extra per-row actions, rendered before the built-in Cancel / Delete. */\n  'job-actions'?: (props: { job: JobState }) => unknown\n  /** Row title. Default: the job name. */\n  'job-title'?: (props: { job: JobState }) => unknown\n  /** Detail line under the title. Default: the error, progress message or status. */\n  'job-detail'?: (props: { job: JobState }) => unknown\n}>()\n\nconst STATUS_ICONS: Record<JobStatus, Component> = {\n  running: LoaderCircle,\n  awaiting_input: CircleAlert,\n  queued: Clock,\n  completed: CircleCheck,\n  failed: CircleX,\n  cancelled: CircleSlash,\n}\n\nconst panelRef = ref<HTMLElement | null>(null)\nconst teleportTarget = computed(() => props.teleportTo || 'body')\nconst tray = props.center\nconst titleId = `${tray.panelId}-title`\nconst rows = (jobs: JobState[]) => jobs.map(job => ({ job, view: tray.rowView(job) }))\n// A job waiting for input is the only one that needs a person: pin it first.\nconst activeRows = computed(() => {\n  const active = rows(tray.activeJobs.value)\n  return [\n    ...active.filter(row => row.view.status === 'awaiting_input'),\n    ...active.filter(row => row.view.status !== 'awaiting_input'),\n  ]\n})\nconst sections = computed(() => [\n  { key: 'active', title: 'Active', rows: activeRows.value },\n  { key: 'finished', title: 'Finished', rows: rows(tray.historyJobs.value) },\n].filter(section => section.rows.length > 0))\nconst headCount = computed(() => {\n  const parts = [\n    [tray.activeJobs.value.length, 'active'],\n    [tray.completedCount.value, 'done'],\n    [tray.historyJobs.value.filter(job => job.status === 'failed').length, 'failed'],\n  ].filter(([n]) => n).map(([n, word]) => `${n} ${word}`)\n  return parts.length ? parts.join(' · ') : 'No jobs'\n})\nconst canClear = computed(() => (\n  tray.deletableJobs.value.length > 0\n  && tray.canClearFinished.value\n))\n\n// Escape returns focus to the element that opened the panel (the top-bar chip).\n// The panel is non-modal, so Escape is heard on the document while it is open.\n// An Escape that an inner control handled, or that belongs to a modal dialog\n// above the tray (its own confirm dialog too), leaves the tray open.\nlet opener: HTMLElement | null = null\nfunction onDocumentKeydown(event: KeyboardEvent): void {\n  if (event.key !== 'Escape' || event.defaultPrevented || confirmOpen.value) return\n  if (event.target instanceof Element && event.target.closest('[aria-modal=\"true\"]')) return\n  closeTray()\n}\nwatch(tray.isOpen, async (open) => {\n  if (!open) {\n    document.removeEventListener('keydown', onDocumentKeydown)\n    return\n  }\n  opener = document.activeElement instanceof HTMLElement ? document.activeElement : null\n  document.addEventListener('keydown', onDocumentKeydown)\n  await nextTick()\n  panelRef.value?.focus()\n}, { flush: 'sync' })\nonBeforeUnmount(() => document.removeEventListener('keydown', onDocumentKeydown))\n\n// A focused row that leaves the list (an action or a refresh) drops focus to body:\n// note the focused element before the update and keep focus in the panel after it.\nlet focusedInPanel: Element | null = null\nwatch(tray.jobs, () => {\n  const focused = document.activeElement\n  focusedInPanel = focused && panelRef.value?.contains(focused) ? focused : null\n}, { flush: 'pre' })\nwatch(tray.jobs, () => {\n  if (tray.isOpen.value && focusedInPanel && !focusedInPanel.isConnected) panelRef.value?.focus()\n  focusedInPanel = null\n}, { flush: 'post' })\n\nfunction closeTray(): void {\n  tray.close()\n  // Safari leaves a clicked button unfocused (opener = body), and the chip node is\n  // replaced when it switches between job chip and idle button: fall back to the\n  // top-bar jobs control.\n  const target = opener?.isConnected && opener !== document.body\n    ? opener\n    : document.querySelector<HTMLElement>('.mint-topbar__job')\n  target?.focus()\n}\n\nfunction formatTime(value: string | null): string {\n  if (!value) return ''\n  const date = new Date(value)\n  return Number.isNaN(date.getTime())\n    ? ''\n    : date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })\n}\n\n/** Right-hand value: the percent while a job moves, else when it ended or started. */\nfunction jobValue(job: JobState, percent: number | null): string {\n  if (percent != null) return `${percent}%`\n  return formatTime(job.completed_at || job.started_at || job.created_at)\n}\n\n// Confirmation: the action waits for the dialog; it runs on the live job.\n// `ids`: the finished jobs that the user confirmed to clear.\nconst pending = ref<{ action: ConfirmAction; job?: JobState; ids?: string[] } | null>(null)\nconst confirmOpen = ref(false)\n// Set on request and kept, so the dialog text stays while it fades out.\nconst confirmText = ref<{ title: string; message: string; confirmLabel: string; cancelLabel: string } | null>(null)\nconst confirmEnabled = computed(() => props.confirm === true\n  || (typeof props.confirm === 'object' && Object.values(props.confirm).some(Boolean)))\n\nfunction textFor(action: ConfirmAction, job?: JobState) {\n  if (action === 'clear') {\n    const count = tray.deletableJobs.value.length\n    return {\n      title: 'Clear finished jobs?',\n      message: `${count} finished ${count === 1 ? 'job' : 'jobs'} and their stored results are deleted.`,\n      confirmLabel: 'Clear jobs',\n      cancelLabel: 'Cancel',\n    }\n  }\n  return action === 'cancel'\n    ? { title: 'Cancel job?', message: `${job?.name} stops. Its partial results are lost.`, confirmLabel: 'Cancel job', cancelLabel: 'Keep running' }\n    : { title: 'Delete job?', message: `${job?.name} and its stored result are deleted.`, confirmLabel: 'Delete job', cancelLabel: 'Cancel' }\n}\n\nfunction needsConfirm(action: ConfirmAction): boolean {\n  return props.confirm === true || (typeof props.confirm === 'object' && props.confirm[action] === true)\n}\n\nfunction request(action: ConfirmAction, job?: JobState): void {\n  if (!needsConfirm(action)) {\n    void run(action, job)\n    return\n  }\n  pending.value = { action, job, ids: action === 'clear' ? deletableIds() : undefined }\n  confirmText.value = textFor(action, job)\n  confirmOpen.value = true\n}\n\nfunction deletableIds(): string[] {\n  return tray.deletableJobs.value.map(job => job.job_id).sort()\n}\n\n// A new source is a new job list: the confirmed target is gone.\nwatch(tray.source, () => onConfirmOpen(false))\n\nfunction onConfirmOpen(open: boolean): void {\n  confirmOpen.value = open\n  if (!open) pending.value = null\n}\n\nasync function confirmPending(): Promise<void> {\n  // A second Confirm click while the dialog fades out does nothing.\n  const current = pending.value\n  if (!confirmOpen.value || !current) return\n  if (current.action === 'clear') {\n    // Polling changed the finished jobs: ask again with the new count.\n    const ids = deletableIds()\n    if (ids.join() !== current.ids?.join()) {\n      pending.value = { ...current, ids }\n      confirmText.value = textFor('clear')\n      return\n    }\n  }\n  confirmOpen.value = false\n  pending.value = null\n  if (current.action === 'clear') return clearFinished()\n  // Polling can end or remove the job while the dialog is open: then do nothing.\n  const live = tray.jobs.value.find(job => job.job_id === current.job?.job_id)\n  const allowed = live && (current.action === 'cancel'\n    ? isActiveJobStatus(live.status) && live.can_cancel\n    : live.can_delete)\n  if (allowed) await run(current.action, live)\n}\n\nfunction run(action: ConfirmAction, job?: JobState): Promise<void> {\n  if (action === 'clear') return clearFinished()\n  return action === 'cancel' ? cancelJob(job!) : deleteJob(job!)\n}\n\nasync function cancelJob(job: JobState): Promise<void> {\n  const succeeded = await tray.cancelJob(job)\n  if (!succeeded && tray.error.value) emit('error', tray.error.value)\n}\n\nasync function deleteJob(job: JobState): Promise<void> {\n  const succeeded = await tray.deleteJob(job)\n  if (!succeeded && tray.error.value) emit('error', tray.error.value)\n}\n\nasync function clearFinished(): Promise<void> {\n  const succeeded = await tray.clearFinished()\n  if (!succeeded && tray.error.value) emit('error', tray.error.value)\n}\n</script>\n\n<template>\n  <Teleport :to=\"teleportTarget\" :disabled=\"teleportTo === false\">\n    <div class=\"mint-jobs-tray\">\n      <!-- Clicks outside close the panel; the page is not dimmed. -->\n      <div\n        v-if=\"tray.isOpen.value\"\n        class=\"mint-jobs-tray__scrim\"\n        aria-hidden=\"true\"\n        @click=\"tray.close()\"\n      />\n\n      <Transition name=\"mint-jobs-tray-fade\">\n        <section\n          v-if=\"tray.isOpen.value\"\n          :id=\"tray.panelId\"\n          ref=\"panelRef\"\n          class=\"mint-jobs-tray__panel\"\n          :aria-labelledby=\"titleId\"\n          tabindex=\"-1\"\n        >\n          <header class=\"mint-jobs-tray__head\">\n            <h2 :id=\"titleId\" class=\"mint-jobs-tray__title\">{{ title }}</h2>\n            <span class=\"mint-jobs-tray__head-count\">{{ headCount }}</span>\n            <button\n              v-if=\"tray.canRefresh.value\"\n              type=\"button\"\n              class=\"mint-jobs-tray__icon-button\"\n              aria-label=\"Refresh jobs\"\n              title=\"Refresh jobs\"\n              :disabled=\"tray.isLoading.value\"\n              @click=\"tray.refresh\"\n            >\n              <RefreshCw :size=\"14\" aria-hidden=\"true\" />\n            </button>\n            <button\n              type=\"button\"\n              class=\"mint-jobs-tray__icon-button\"\n              aria-label=\"Close jobs\"\n              title=\"Close\"\n              @click=\"closeTray\"\n            >\n              <X :size=\"14\" aria-hidden=\"true\" />\n            </button>\n          </header>\n\n          <p v-if=\"tray.error.value\" class=\"mint-jobs-tray__error\" role=\"alert\">\n            {{ tray.error.value }}\n          </p>\n\n          <div class=\"mint-jobs-tray__body\">\n            <p v-if=\"sections.length === 0\" class=\"mint-jobs-tray__empty\">No jobs yet</p>\n\n            <template v-for=\"section in sections\" :key=\"section.key\">\n              <div class=\"mint-jobs-tray__section\" :data-section=\"section.key\">\n                {{ section.title }}\n                <span class=\"mint-jobs-tray__section-count\">· {{ section.rows.length }}</span>\n                <button\n                  v-if=\"section.key === 'finished' && canClear\"\n                  type=\"button\"\n                  class=\"mint-jobs-tray__section-action\"\n                  @click=\"request('clear')\"\n                >\n                  Clear\n                </button>\n              </div>\n\n              <div\n                v-for=\"{ job, view } in section.rows\"\n                :key=\"job.job_id\"\n                class=\"mint-jobs-tray__row\"\n                :class=\"{ 'mint-jobs-tray__row--awaiting-input': view.status === 'awaiting_input' }\"\n                :data-status=\"job.status\"\n              >\n                <!-- data-status is the real job status; the row view only changes how it looks. -->\n                <component\n                  :is=\"STATUS_ICONS[view.status]\"\n                  :size=\"15\"\n                  :class=\"['mint-jobs-tray__status', `mint-jobs-tray__status--${view.status.replace('_', '-')}`]\"\n                  role=\"img\"\n                  :aria-label=\"jobStatusLabel(view.status)\"\n                />\n                <button type=\"button\" class=\"mint-jobs-tray__row-title\" @click=\"emit('select', job)\">\n                  <slot name=\"job-title\" :job=\"job\">{{ job.name }}</slot>\n                </button>\n                <span class=\"mint-jobs-tray__tools\">\n                  <span class=\"mint-jobs-tray__value\">{{ jobValue(job, view.percent) }}</span>\n                  <slot name=\"job-actions\" :job=\"job\" />\n                  <button\n                    v-if=\"isActiveJobStatus(job.status) && job.can_cancel && tray.canCancel.value\"\n                    type=\"button\"\n                    class=\"mint-jobs-tray__icon-button mint-jobs-tray__icon-button--danger\"\n                    :aria-label=\"`Cancel ${job.name}`\"\n                    title=\"Cancel\"\n                    :disabled=\"tray.isPending(job)\"\n                    @click=\"request('cancel', job)\"\n                  >\n                    <Square :size=\"12\" aria-hidden=\"true\" />\n                  </button>\n                  <button\n                    v-if=\"job.can_delete && tray.canDelete.value\"\n                    type=\"button\"\n                    class=\"mint-jobs-tray__icon-button\"\n                    :aria-label=\"`Delete ${job.name}`\"\n                    title=\"Delete\"\n                    :disabled=\"tray.isPending(job)\"\n                    @click=\"request('delete', job)\"\n                  >\n                    <Trash2 :size=\"14\" aria-hidden=\"true\" />\n                  </button>\n                </span>\n                <div\n                  v-if=\"view.percent != null\"\n                  class=\"mint-jobs-tray__progress\"\n                  role=\"progressbar\"\n                  :aria-label=\"`${job.name} progress`\"\n                  aria-valuemin=\"0\"\n                  aria-valuemax=\"100\"\n                  :aria-valuenow=\"view.percent\"\n                >\n                  <span :style=\"{ width: `${view.percent}%` }\" />\n                </div>\n                <span\n                  class=\"mint-jobs-tray__detail\"\n                  :class=\"{ 'mint-jobs-tray__detail--error': job.status === 'failed' }\"\n                >\n                  <slot name=\"job-detail\" :job=\"job\">{{ view.message }}</slot>\n                </span>\n              </div>\n            </template>\n          </div>\n        </section>\n      </Transition>\n\n      <ConfirmDialog\n        v-if=\"confirmEnabled\"\n        :open=\"confirmOpen\"\n        tone=\"error\"\n        :title=\"confirmText?.title\"\n        :confirm-label=\"confirmText?.confirmLabel\"\n        :cancel-label=\"confirmText?.cancelLabel\"\n        @update:open=\"onConfirmOpen\"\n        @confirm=\"confirmPending\"\n      >\n        <!-- The marker class lifts the dialog above the tray (jobs-status-tray.css). -->\n        <p class=\"mint-confirm__message mint-jobs-tray__confirm\">{{ confirmText?.message }}</p>\n      </ConfirmDialog>\n    </div>\n  </Teleport>\n</template>\n","<script setup lang=\"ts\">\n/**\n * Compact, non-modal job panel under the top bar, driven by a job center the parent owns.\n *\n * The parent passes the center's `topBarJob`, `completedCount` and `handleTopBarClick`\n * to `AppTopBar`; its run slot opens this panel. `PluginWorkspaceView` does this for you\n * when its spec sets `jobs`.\n *\n * @example Recommended\n * ```vue\n * <AppTopBar :job=\"center.topBarJob.value\" :jobs-done=\"center.completedCount.value\"\n *   @job-click=\"center.handleTopBarClick(openResult)\" />\n * <JobsStatusTray :center=\"center\" @select=\"openResult\" />\n * ```\n */\nimport { computed, nextTick, onBeforeUnmount, ref, watch, type Component } from 'vue'\nimport {\n  CircleAlert,\n  CircleCheck,\n  CircleSlash,\n  CircleX,\n  Clock,\n  LoaderCircle,\n  RefreshCw,\n  Square,\n  Trash2,\n  X,\n} from 'lucide-vue-next'\n\nimport { isActiveJobStatus, jobStatusLabel } from '../jobs'\nimport type { UseJobCenterReturn } from '../composables/useJobCenter'\nimport type { JobState, JobStatus } from '../types/jobs'\nimport ConfirmDialog from './ConfirmDialog.vue'\n\ntype ConfirmAction = 'cancel' | 'delete' | 'clear'\n\ninterface Props {\n  /** Job center from `useJobCenter()`; the parent owns it and opens the panel through it. */\n  center: UseJobCenterReturn\n  title?: string\n  teleportTo?: string | HTMLElement | false\n  /** Ask before Cancel, Delete and Clear (`true`), or before the named ones only. Default off. */\n  confirm?: boolean | Partial<Record<ConfirmAction, boolean>>\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  title: 'Jobs',\n  teleportTo: 'body',\n  confirm: false,\n})\n\nconst emit = defineEmits<{\n  select: [job: JobState]\n  error: [message: string]\n}>()\n\ndefineSlots<{\n  /** Extra per-row actions, rendered before the built-in Cancel / Delete. */\n  'job-actions'?: (props: { job: JobState }) => unknown\n  /** Row title. Default: the job name. */\n  'job-title'?: (props: { job: JobState }) => unknown\n  /** Detail line under the title. Default: the error, progress message or status. */\n  'job-detail'?: (props: { job: JobState }) => unknown\n}>()\n\nconst STATUS_ICONS: Record<JobStatus, Component> = {\n  running: LoaderCircle,\n  awaiting_input: CircleAlert,\n  queued: Clock,\n  completed: CircleCheck,\n  failed: CircleX,\n  cancelled: CircleSlash,\n}\n\nconst panelRef = ref<HTMLElement | null>(null)\nconst teleportTarget = computed(() => props.teleportTo || 'body')\nconst tray = props.center\nconst titleId = `${tray.panelId}-title`\nconst rows = (jobs: JobState[]) => jobs.map(job => ({ job, view: tray.rowView(job) }))\n// A job waiting for input is the only one that needs a person: pin it first.\nconst activeRows = computed(() => {\n  const active = rows(tray.activeJobs.value)\n  return [\n    ...active.filter(row => row.view.status === 'awaiting_input'),\n    ...active.filter(row => row.view.status !== 'awaiting_input'),\n  ]\n})\nconst sections = computed(() => [\n  { key: 'active', title: 'Active', rows: activeRows.value },\n  { key: 'finished', title: 'Finished', rows: rows(tray.historyJobs.value) },\n].filter(section => section.rows.length > 0))\nconst headCount = computed(() => {\n  const parts = [\n    [tray.activeJobs.value.length, 'active'],\n    [tray.completedCount.value, 'done'],\n    [tray.historyJobs.value.filter(job => job.status === 'failed').length, 'failed'],\n  ].filter(([n]) => n).map(([n, word]) => `${n} ${word}`)\n  return parts.length ? parts.join(' · ') : 'No jobs'\n})\nconst canClear = computed(() => (\n  tray.deletableJobs.value.length > 0\n  && tray.canClearFinished.value\n))\n\n// Escape returns focus to the element that opened the panel (the top-bar chip).\n// The panel is non-modal, so Escape is heard on the document while it is open.\n// An Escape that an inner control handled, or that belongs to a modal dialog\n// above the tray (its own confirm dialog too), leaves the tray open.\nlet opener: HTMLElement | null = null\nfunction onDocumentKeydown(event: KeyboardEvent): void {\n  if (event.key !== 'Escape' || event.defaultPrevented || confirmOpen.value) return\n  if (event.target instanceof Element && event.target.closest('[aria-modal=\"true\"]')) return\n  closeTray()\n}\nwatch(tray.isOpen, async (open) => {\n  if (!open) {\n    document.removeEventListener('keydown', onDocumentKeydown)\n    return\n  }\n  opener = document.activeElement instanceof HTMLElement ? document.activeElement : null\n  document.addEventListener('keydown', onDocumentKeydown)\n  await nextTick()\n  panelRef.value?.focus()\n}, { flush: 'sync' })\nonBeforeUnmount(() => document.removeEventListener('keydown', onDocumentKeydown))\n\n// A focused row that leaves the list (an action or a refresh) drops focus to body:\n// note the focused element before the update and keep focus in the panel after it.\nlet focusedInPanel: Element | null = null\nwatch(tray.jobs, () => {\n  const focused = document.activeElement\n  focusedInPanel = focused && panelRef.value?.contains(focused) ? focused : null\n}, { flush: 'pre' })\nwatch(tray.jobs, () => {\n  if (tray.isOpen.value && focusedInPanel && !focusedInPanel.isConnected) panelRef.value?.focus()\n  focusedInPanel = null\n}, { flush: 'post' })\n\nfunction closeTray(): void {\n  tray.close()\n  // Safari leaves a clicked button unfocused (opener = body), and the chip node is\n  // replaced when it switches between job chip and idle button: fall back to the\n  // top-bar jobs control.\n  const target = opener?.isConnected && opener !== document.body\n    ? opener\n    : document.querySelector<HTMLElement>('.mint-topbar__job')\n  target?.focus()\n}\n\nfunction formatTime(value: string | null): string {\n  if (!value) return ''\n  const date = new Date(value)\n  return Number.isNaN(date.getTime())\n    ? ''\n    : date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })\n}\n\n/** Right-hand value: the percent while a job moves, else when it ended or started. */\nfunction jobValue(job: JobState, percent: number | null): string {\n  if (percent != null) return `${percent}%`\n  return formatTime(job.completed_at || job.started_at || job.created_at)\n}\n\n// Confirmation: the action waits for the dialog; it runs on the live job.\n// `ids`: the finished jobs that the user confirmed to clear.\nconst pending = ref<{ action: ConfirmAction; job?: JobState; ids?: string[] } | null>(null)\nconst confirmOpen = ref(false)\n// Set on request and kept, so the dialog text stays while it fades out.\nconst confirmText = ref<{ title: string; message: string; confirmLabel: string; cancelLabel: string } | null>(null)\nconst confirmEnabled = computed(() => props.confirm === true\n  || (typeof props.confirm === 'object' && Object.values(props.confirm).some(Boolean)))\n\nfunction textFor(action: ConfirmAction, job?: JobState) {\n  if (action === 'clear') {\n    const count = tray.deletableJobs.value.length\n    return {\n      title: 'Clear finished jobs?',\n      message: `${count} finished ${count === 1 ? 'job' : 'jobs'} and their stored results are deleted.`,\n      confirmLabel: 'Clear jobs',\n      cancelLabel: 'Cancel',\n    }\n  }\n  return action === 'cancel'\n    ? { title: 'Cancel job?', message: `${job?.name} stops. Its partial results are lost.`, confirmLabel: 'Cancel job', cancelLabel: 'Keep running' }\n    : { title: 'Delete job?', message: `${job?.name} and its stored result are deleted.`, confirmLabel: 'Delete job', cancelLabel: 'Cancel' }\n}\n\nfunction needsConfirm(action: ConfirmAction): boolean {\n  return props.confirm === true || (typeof props.confirm === 'object' && props.confirm[action] === true)\n}\n\nfunction request(action: ConfirmAction, job?: JobState): void {\n  if (!needsConfirm(action)) {\n    void run(action, job)\n    return\n  }\n  pending.value = { action, job, ids: action === 'clear' ? deletableIds() : undefined }\n  confirmText.value = textFor(action, job)\n  confirmOpen.value = true\n}\n\nfunction deletableIds(): string[] {\n  return tray.deletableJobs.value.map(job => job.job_id).sort()\n}\n\n// A new source is a new job list: the confirmed target is gone.\nwatch(tray.source, () => onConfirmOpen(false))\n\nfunction onConfirmOpen(open: boolean): void {\n  confirmOpen.value = open\n  if (!open) pending.value = null\n}\n\nasync function confirmPending(): Promise<void> {\n  // A second Confirm click while the dialog fades out does nothing.\n  const current = pending.value\n  if (!confirmOpen.value || !current) return\n  if (current.action === 'clear') {\n    // Polling changed the finished jobs: ask again with the new count.\n    const ids = deletableIds()\n    if (ids.join() !== current.ids?.join()) {\n      pending.value = { ...current, ids }\n      confirmText.value = textFor('clear')\n      return\n    }\n  }\n  confirmOpen.value = false\n  pending.value = null\n  if (current.action === 'clear') return clearFinished()\n  // Polling can end or remove the job while the dialog is open: then do nothing.\n  const live = tray.jobs.value.find(job => job.job_id === current.job?.job_id)\n  const allowed = live && (current.action === 'cancel'\n    ? isActiveJobStatus(live.status) && live.can_cancel\n    : live.can_delete)\n  if (allowed) await run(current.action, live)\n}\n\nfunction run(action: ConfirmAction, job?: JobState): Promise<void> {\n  if (action === 'clear') return clearFinished()\n  return action === 'cancel' ? cancelJob(job!) : deleteJob(job!)\n}\n\nasync function cancelJob(job: JobState): Promise<void> {\n  const succeeded = await tray.cancelJob(job)\n  if (!succeeded && tray.error.value) emit('error', tray.error.value)\n}\n\nasync function deleteJob(job: JobState): Promise<void> {\n  const succeeded = await tray.deleteJob(job)\n  if (!succeeded && tray.error.value) emit('error', tray.error.value)\n}\n\nasync function clearFinished(): Promise<void> {\n  const succeeded = await tray.clearFinished()\n  if (!succeeded && tray.error.value) emit('error', tray.error.value)\n}\n</script>\n\n<template>\n  <Teleport :to=\"teleportTarget\" :disabled=\"teleportTo === false\">\n    <div class=\"mint-jobs-tray\">\n      <!-- Clicks outside close the panel; the page is not dimmed. -->\n      <div\n        v-if=\"tray.isOpen.value\"\n        class=\"mint-jobs-tray__scrim\"\n        aria-hidden=\"true\"\n        @click=\"tray.close()\"\n      />\n\n      <Transition name=\"mint-jobs-tray-fade\">\n        <section\n          v-if=\"tray.isOpen.value\"\n          :id=\"tray.panelId\"\n          ref=\"panelRef\"\n          class=\"mint-jobs-tray__panel\"\n          :aria-labelledby=\"titleId\"\n          tabindex=\"-1\"\n        >\n          <header class=\"mint-jobs-tray__head\">\n            <h2 :id=\"titleId\" class=\"mint-jobs-tray__title\">{{ title }}</h2>\n            <span class=\"mint-jobs-tray__head-count\">{{ headCount }}</span>\n            <button\n              v-if=\"tray.canRefresh.value\"\n              type=\"button\"\n              class=\"mint-jobs-tray__icon-button\"\n              aria-label=\"Refresh jobs\"\n              title=\"Refresh jobs\"\n              :disabled=\"tray.isLoading.value\"\n              @click=\"tray.refresh\"\n            >\n              <RefreshCw :size=\"14\" aria-hidden=\"true\" />\n            </button>\n            <button\n              type=\"button\"\n              class=\"mint-jobs-tray__icon-button\"\n              aria-label=\"Close jobs\"\n              title=\"Close\"\n              @click=\"closeTray\"\n            >\n              <X :size=\"14\" aria-hidden=\"true\" />\n            </button>\n          </header>\n\n          <p v-if=\"tray.error.value\" class=\"mint-jobs-tray__error\" role=\"alert\">\n            {{ tray.error.value }}\n          </p>\n\n          <div class=\"mint-jobs-tray__body\">\n            <p v-if=\"sections.length === 0\" class=\"mint-jobs-tray__empty\">No jobs yet</p>\n\n            <template v-for=\"section in sections\" :key=\"section.key\">\n              <div class=\"mint-jobs-tray__section\" :data-section=\"section.key\">\n                {{ section.title }}\n                <span class=\"mint-jobs-tray__section-count\">· {{ section.rows.length }}</span>\n                <button\n                  v-if=\"section.key === 'finished' && canClear\"\n                  type=\"button\"\n                  class=\"mint-jobs-tray__section-action\"\n                  @click=\"request('clear')\"\n                >\n                  Clear\n                </button>\n              </div>\n\n              <div\n                v-for=\"{ job, view } in section.rows\"\n                :key=\"job.job_id\"\n                class=\"mint-jobs-tray__row\"\n                :class=\"{ 'mint-jobs-tray__row--awaiting-input': view.status === 'awaiting_input' }\"\n                :data-status=\"job.status\"\n              >\n                <!-- data-status is the real job status; the row view only changes how it looks. -->\n                <component\n                  :is=\"STATUS_ICONS[view.status]\"\n                  :size=\"15\"\n                  :class=\"['mint-jobs-tray__status', `mint-jobs-tray__status--${view.status.replace('_', '-')}`]\"\n                  role=\"img\"\n                  :aria-label=\"jobStatusLabel(view.status)\"\n                />\n                <button type=\"button\" class=\"mint-jobs-tray__row-title\" @click=\"emit('select', job)\">\n                  <slot name=\"job-title\" :job=\"job\">{{ job.name }}</slot>\n                </button>\n                <span class=\"mint-jobs-tray__tools\">\n                  <span class=\"mint-jobs-tray__value\">{{ jobValue(job, view.percent) }}</span>\n                  <slot name=\"job-actions\" :job=\"job\" />\n                  <button\n                    v-if=\"isActiveJobStatus(job.status) && job.can_cancel && tray.canCancel.value\"\n                    type=\"button\"\n                    class=\"mint-jobs-tray__icon-button mint-jobs-tray__icon-button--danger\"\n                    :aria-label=\"`Cancel ${job.name}`\"\n                    title=\"Cancel\"\n                    :disabled=\"tray.isPending(job)\"\n                    @click=\"request('cancel', job)\"\n                  >\n                    <Square :size=\"12\" aria-hidden=\"true\" />\n                  </button>\n                  <button\n                    v-if=\"job.can_delete && tray.canDelete.value\"\n                    type=\"button\"\n                    class=\"mint-jobs-tray__icon-button\"\n                    :aria-label=\"`Delete ${job.name}`\"\n                    title=\"Delete\"\n                    :disabled=\"tray.isPending(job)\"\n                    @click=\"request('delete', job)\"\n                  >\n                    <Trash2 :size=\"14\" aria-hidden=\"true\" />\n                  </button>\n                </span>\n                <div\n                  v-if=\"view.percent != null\"\n                  class=\"mint-jobs-tray__progress\"\n                  role=\"progressbar\"\n                  :aria-label=\"`${job.name} progress`\"\n                  aria-valuemin=\"0\"\n                  aria-valuemax=\"100\"\n                  :aria-valuenow=\"view.percent\"\n                >\n                  <span :style=\"{ width: `${view.percent}%` }\" />\n                </div>\n                <span\n                  class=\"mint-jobs-tray__detail\"\n                  :class=\"{ 'mint-jobs-tray__detail--error': job.status === 'failed' }\"\n                >\n                  <slot name=\"job-detail\" :job=\"job\">{{ view.message }}</slot>\n                </span>\n              </div>\n            </template>\n          </div>\n        </section>\n      </Transition>\n\n      <ConfirmDialog\n        v-if=\"confirmEnabled\"\n        :open=\"confirmOpen\"\n        tone=\"error\"\n        :title=\"confirmText?.title\"\n        :confirm-label=\"confirmText?.confirmLabel\"\n        :cancel-label=\"confirmText?.cancelLabel\"\n        @update:open=\"onConfirmOpen\"\n        @confirm=\"confirmPending\"\n      >\n        <!-- The marker class lifts the dialog above the tray (jobs-status-tray.css). -->\n        <p class=\"mint-confirm__message mint-jobs-tray__confirm\">{{ confirmText?.message }}</p>\n      </ConfirmDialog>\n    </div>\n  </Teleport>\n</template>\n","import {\n  getCurrentScope,\n  onScopeDispose,\n  readonly,\n  ref,\n  toValue,\n  watch,\n  type MaybeRefOrGetter,\n  type Ref,\n} from 'vue'\n\n/**\n * One event of the platform's realtime stream (`GET /api/events`).\n *\n * Platform events carry no entity data: refetch the entity through REST.\n * `type` is `resync` (refetch everything you show), the audit action of a\n * committed write, such as `experiment.update` or `analysis.artifact_create`,\n * or the `\"<plugin>.<event>\"` name of a plugin event, which carries `payload`.\n * Only `usePresence` receives `presence.changed`.\n */\nexport interface RealtimeEvent {\n  type: string\n  id?: string\n  /**\n   * `experiment:{id}`, `project:{id}`, `experiments`, `user:{id}`, or a plugin's\n   * `plugin:{name}` / `plugin:{name}:experiment:{id}`; absent on `resync`.\n   */\n  topic?: string\n  /** A plugin event: the JSON payload the plugin published (at most 16 KiB). */\n  payload?: unknown\n  /** Changed fields of an update, when the write names them. */\n  fields?: string[] | null\n  actor_id?: string | null\n  request_id?: string | null\n  at?: string\n  /** `presence.changed`: the topic's viewers (at most 20, `editing` first). */\n  viewers?: { user_id: string, activity: string }[]\n  /** `presence.changed`: the number of viewers, also those beyond `viewers`. */\n  count?: number\n}\n\nexport type RealtimeHandler = (event: RealtimeEvent) => void\n\nexport interface UseRealtimeReturn {\n  /** True while the shared stream is open. */\n  connected: Readonly<Ref<boolean>>\n  /** Unsubscribe; also runs when the calling component or effect scope is disposed. */\n  stop: () => void\n}\n\nconst EVENTS_URL = '/api/events'\nconst RECONNECT_BASE_MS = 1_000\nconst RECONNECT_MAX_MS = 30_000\n/** Merges the subscriptions of components that mount together into one connection. */\nconst TOPIC_DEBOUNCE_MS = 50\nconst RESYNC: RealtimeEvent = { type: 'resync' }\n\ninterface Listener {\n  topics: () => string[]\n  handler: RealtimeHandler\n  /** Receives `presence.changed`; a write listener would refetch on each viewer change. */\n  presence: boolean\n}\n\nconst listeners = new Set<Listener>()\n/** The last `presence.changed` of each topic of the open stream; the server sends one per topic at open. */\nconst presence = new Map<string, RealtimeEvent>()\nconst connected = ref(false)\nlet source: EventSource | null = null\nlet sourceTopics = ''\nlet failures = 0\nlet syncTimer: ReturnType<typeof setTimeout> | null = null\nlet retryTimer: ReturnType<typeof setTimeout> | null = null\n\nfunction dispatch(event: RealtimeEvent): void {\n  const isPresence = event.type === 'presence.changed'\n  if (isPresence && event.topic) presence.set(event.topic, event)\n  for (const listener of [...listeners]) {\n    if (isPresence && !listener.presence) continue\n    if (event.type === 'resync' || (event.topic && listener.topics().includes(event.topic))) {\n      listener.handler(event)\n    }\n  }\n}\n\nfunction close(): void {\n  source?.close()\n  source = null\n  sourceTopics = ''\n  presence.clear()\n  connected.value = false\n}\n\nfunction open(topics: string): void {\n  const stream = new EventSource(`${EVENTS_URL}?topics=${encodeURIComponent(topics)}`)\n  source = stream\n  sourceTopics = topics\n  stream.onopen = () => {\n    connected.value = true\n    // The server subscribes only now: a write between a caller's REST load (or\n    // the close of the previous stream) and this point sent no event, so every caller refetches.\n    dispatch(RESYNC)\n    failures = 0\n  }\n  stream.onmessage = (message) => {\n    dispatch(JSON.parse(message.data) as RealtimeEvent)\n  }\n  stream.onerror = () => {\n    // EventSource retries a dropped connection itself but gives up after an\n    // HTTP error, so one backoff path handles both.\n    if (source !== stream) return\n    close()\n    // A topic change during the wait does not shorten it: the retry reads the topics when it runs.\n    if (syncTimer !== null) clearTimeout(syncTimer)\n    syncTimer = null\n    retryTimer = setTimeout(() => {\n      retryTimer = null\n      sync()\n    }, Math.min(RECONNECT_MAX_MS, RECONNECT_BASE_MS * 2 ** failures))\n    failures += 1\n  }\n}\n\nfunction sync(): void {\n  syncTimer = null\n  const topics = [...new Set([...listeners].flatMap(listener => listener.topics()))].sort().join(',')\n  if (source && topics === sourceTopics) return\n  close()\n  if (topics) open(topics)\n}\n\nfunction schedule(): void {\n  if (retryTimer !== null) return\n  if (syncTimer !== null) clearTimeout(syncTimer)\n  syncTimer = setTimeout(sync, TOPIC_DEBOUNCE_MS)\n}\n\n/**\n * Subscribe to topics of the platform's realtime stream.\n *\n * Every caller in a tab shares one `EventSource`, opened on the union of\n * their topics and reopened when that union changes. `handler` receives the\n * write events of the caller's own topics (not `presence.changed`, which goes\n * to `usePresence`) plus every `resync`: one comes from the\n * server when this tab fell behind, and one follows each open of the stream:\n * the first open, each reconnect (backoff from 1 s to 30 s) and each reopen for\n * a changed topic union. On `resync`, refetch. The union of all callers' topics\n * in a tab may hold at most 50 topics; the platform refuses a larger stream.\n *\n * The stream authenticates with the session cookie, so it works in the\n * platform and in plugin frontends served by it. It exists only when the\n * platform's `realtime` feature flag is on; check that flag first.\n *\n * A plugin topic reaches a caller whose role may use the plugin; an\n * experiment plugin topic also needs a caller who may view the experiment.\n *\n * @example\n * useRealtime(() => [`experiment:${id.value}`], () => refetch())\n * @example\n * useRealtime(['plugin:drp'], (event) => {\n *   if (event.type === 'drp.run.progress') progress.value = event.payload as RunProgress\n * })\n */\nexport function useRealtime(\n  topics: MaybeRefOrGetter<string[]>,\n  handler: RealtimeHandler,\n): UseRealtimeReturn {\n  return subscribeRealtime(topics, handler, false)\n}\n\n/** The last `presence.changed` of `topic` while the open stream views it (for `usePresence`). */\nexport function currentPresence(topic: string): RealtimeEvent | undefined {\n  return presence.get(topic)\n}\n\n/** `useRealtime`, and with `withPresence` also the `presence.changed` events (for `usePresence`). */\nexport function subscribeRealtime(\n  topics: MaybeRefOrGetter<string[]>,\n  handler: RealtimeHandler,\n  withPresence: boolean,\n): UseRealtimeReturn {\n  const listener: Listener = { topics: () => toValue(topics), handler, presence: withPresence }\n  listeners.add(listener)\n  const stopWatch = watch(() => listener.topics().join(','), () => schedule())\n  schedule()\n\n  function stop(): void {\n    stopWatch()\n    if (listeners.delete(listener)) schedule()\n  }\n\n  if (getCurrentScope()) onScopeDispose(stop)\n  return { connected: readonly(connected), stop }\n}\n"],"mappings":"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"}
+{"version":3,"file":"useRealtime-BLQEjbuq.js","names":[],"sources":["../src/components/JobsStatusTray.vue","../src/components/JobsStatusTray.vue","../src/composables/useRealtime.ts"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Compact, non-modal job panel under the top bar, driven by a job center the parent owns.\n *\n * The parent passes the center's `topBarJob`, `completedCount` and `handleTopBarClick`\n * to `AppTopBar`; its run slot opens this panel. `PluginWorkspaceView` does this for you\n * when its spec sets `jobs`.\n *\n * @example Recommended\n * ```vue\n * <AppTopBar :job=\"center.topBarJob.value\" :jobs-done=\"center.completedCount.value\"\n *   @job-click=\"center.handleTopBarClick(openResult)\" />\n * <JobsStatusTray :center=\"center\" @select=\"openResult\" />\n * ```\n */\nimport { computed, nextTick, onBeforeUnmount, ref, watch, type Component } from 'vue'\nimport {\n  CircleAlert,\n  CircleCheck,\n  CircleSlash,\n  CircleX,\n  Clock,\n  LoaderCircle,\n  RefreshCw,\n  Square,\n  Trash2,\n  X,\n} from 'lucide-vue-next'\n\nimport { isActiveJobStatus, jobStatusLabel } from '../jobs'\nimport type { UseJobCenterReturn } from '../composables/useJobCenter'\nimport type { JobState, JobStatus } from '../types/jobs'\nimport ConfirmDialog from './ConfirmDialog.vue'\n\ntype ConfirmAction = 'cancel' | 'delete' | 'clear'\n\ninterface Props {\n  /** Job center from `useJobCenter()`; the parent owns it and opens the panel through it. */\n  center: UseJobCenterReturn\n  title?: string\n  teleportTo?: string | HTMLElement | false\n  /** Ask before Cancel, Delete and Clear (`true`), or before the named ones only. Default off. */\n  confirm?: boolean | Partial<Record<ConfirmAction, boolean>>\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  title: 'Jobs',\n  teleportTo: 'body',\n  confirm: false,\n})\n\nconst emit = defineEmits<{\n  select: [job: JobState]\n  error: [message: string]\n}>()\n\ndefineSlots<{\n  /** Extra per-row actions, rendered before the built-in Cancel / Delete. */\n  'job-actions'?: (props: { job: JobState }) => unknown\n  /** Row title. Default: the job name. */\n  'job-title'?: (props: { job: JobState }) => unknown\n  /** Detail line under the title. Default: the error, progress message or status. */\n  'job-detail'?: (props: { job: JobState }) => unknown\n}>()\n\nconst STATUS_ICONS: Record<JobStatus, Component> = {\n  running: LoaderCircle,\n  awaiting_input: CircleAlert,\n  queued: Clock,\n  completed: CircleCheck,\n  failed: CircleX,\n  cancelled: CircleSlash,\n}\n\nconst panelRef = ref<HTMLElement | null>(null)\nconst teleportTarget = computed(() => props.teleportTo || 'body')\nconst tray = props.center\nconst titleId = `${tray.panelId}-title`\nconst rows = (jobs: JobState[]) => jobs.map(job => ({ job, view: tray.rowView(job) }))\n// A job waiting for input is the only one that needs a person: pin it first.\nconst activeRows = computed(() => {\n  const active = rows(tray.activeJobs.value)\n  return [\n    ...active.filter(row => row.view.status === 'awaiting_input'),\n    ...active.filter(row => row.view.status !== 'awaiting_input'),\n  ]\n})\nconst sections = computed(() => [\n  { key: 'active', title: 'Active', rows: activeRows.value },\n  { key: 'finished', title: 'Finished', rows: rows(tray.historyJobs.value) },\n].filter(section => section.rows.length > 0))\nconst headCount = computed(() => {\n  const parts = [\n    [tray.activeJobs.value.length, 'active'],\n    [tray.completedCount.value, 'done'],\n    [tray.historyJobs.value.filter(job => job.status === 'failed').length, 'failed'],\n  ].filter(([n]) => n).map(([n, word]) => `${n} ${word}`)\n  return parts.length ? parts.join(' · ') : 'No jobs'\n})\nconst canClear = computed(() => (\n  tray.deletableJobs.value.length > 0\n  && tray.canClearFinished.value\n))\n\n// Escape returns focus to the element that opened the panel (the top-bar chip).\n// The panel is non-modal, so Escape is heard on the document while it is open.\n// An Escape that an inner control handled, or that belongs to a modal dialog\n// above the tray (its own confirm dialog too), leaves the tray open.\nlet opener: HTMLElement | null = null\nfunction onDocumentKeydown(event: KeyboardEvent): void {\n  if (event.key !== 'Escape' || event.defaultPrevented || confirmOpen.value) return\n  if (event.target instanceof Element && event.target.closest('[aria-modal=\"true\"]')) return\n  closeTray()\n}\nwatch(tray.isOpen, async (open) => {\n  if (!open) {\n    document.removeEventListener('keydown', onDocumentKeydown)\n    return\n  }\n  opener = document.activeElement instanceof HTMLElement ? document.activeElement : null\n  document.addEventListener('keydown', onDocumentKeydown)\n  await nextTick()\n  panelRef.value?.focus()\n}, { flush: 'sync' })\nonBeforeUnmount(() => document.removeEventListener('keydown', onDocumentKeydown))\n\n// A focused row that leaves the list (an action or a refresh) drops focus to body:\n// note the focused element before the update and keep focus in the panel after it.\nlet focusedInPanel: Element | null = null\nwatch(tray.jobs, () => {\n  const focused = document.activeElement\n  focusedInPanel = focused && panelRef.value?.contains(focused) ? focused : null\n}, { flush: 'pre' })\nwatch(tray.jobs, () => {\n  if (tray.isOpen.value && focusedInPanel && !focusedInPanel.isConnected) panelRef.value?.focus()\n  focusedInPanel = null\n}, { flush: 'post' })\n\nfunction closeTray(): void {\n  tray.close()\n  // Safari leaves a clicked button unfocused (opener = body), and the chip node is\n  // replaced when it switches between job chip and idle button: fall back to the\n  // top-bar jobs control.\n  const target = opener?.isConnected && opener !== document.body\n    ? opener\n    : document.querySelector<HTMLElement>('.mint-topbar__job')\n  target?.focus()\n}\n\nfunction formatTime(value: string | null): string {\n  if (!value) return ''\n  const date = new Date(value)\n  return Number.isNaN(date.getTime())\n    ? ''\n    : date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })\n}\n\n/** Right-hand value: the percent while a job moves, else when it ended or started. */\nfunction jobValue(job: JobState, percent: number | null): string {\n  if (percent != null) return `${percent}%`\n  return formatTime(job.completed_at || job.started_at || job.created_at)\n}\n\n// Confirmation: the action waits for the dialog; it runs on the live job.\n// `ids`: the finished jobs that the user confirmed to clear.\nconst pending = ref<{ action: ConfirmAction; job?: JobState; ids?: string[] } | null>(null)\nconst confirmOpen = ref(false)\n// Set on request and kept, so the dialog text stays while it fades out.\nconst confirmText = ref<{ title: string; message: string; confirmLabel: string; cancelLabel: string } | null>(null)\nconst confirmEnabled = computed(() => props.confirm === true\n  || (typeof props.confirm === 'object' && Object.values(props.confirm).some(Boolean)))\n\nfunction textFor(action: ConfirmAction, job?: JobState) {\n  if (action === 'clear') {\n    const count = tray.deletableJobs.value.length\n    return {\n      title: 'Clear finished jobs?',\n      message: `${count} finished ${count === 1 ? 'job' : 'jobs'} and their stored results are deleted.`,\n      confirmLabel: 'Clear jobs',\n      cancelLabel: 'Cancel',\n    }\n  }\n  return action === 'cancel'\n    ? { title: 'Cancel job?', message: `${job?.name} stops. Its partial results are lost.`, confirmLabel: 'Cancel job', cancelLabel: 'Keep running' }\n    : { title: 'Delete job?', message: `${job?.name} and its stored result are deleted.`, confirmLabel: 'Delete job', cancelLabel: 'Cancel' }\n}\n\nfunction needsConfirm(action: ConfirmAction): boolean {\n  return props.confirm === true || (typeof props.confirm === 'object' && props.confirm[action] === true)\n}\n\nfunction request(action: ConfirmAction, job?: JobState): void {\n  if (!needsConfirm(action)) {\n    void run(action, job)\n    return\n  }\n  pending.value = { action, job, ids: action === 'clear' ? deletableIds() : undefined }\n  confirmText.value = textFor(action, job)\n  confirmOpen.value = true\n}\n\nfunction deletableIds(): string[] {\n  return tray.deletableJobs.value.map(job => job.job_id).sort()\n}\n\n// A new source is a new job list: the confirmed target is gone.\nwatch(tray.source, () => onConfirmOpen(false))\n\nfunction onConfirmOpen(open: boolean): void {\n  confirmOpen.value = open\n  if (!open) pending.value = null\n}\n\nasync function confirmPending(): Promise<void> {\n  // A second Confirm click while the dialog fades out does nothing.\n  const current = pending.value\n  if (!confirmOpen.value || !current) return\n  if (current.action === 'clear') {\n    // Polling changed the finished jobs: ask again with the new count.\n    const ids = deletableIds()\n    if (ids.join() !== current.ids?.join()) {\n      pending.value = { ...current, ids }\n      confirmText.value = textFor('clear')\n      return\n    }\n  }\n  confirmOpen.value = false\n  pending.value = null\n  if (current.action === 'clear') return clearFinished()\n  // Polling can end or remove the job while the dialog is open: then do nothing.\n  const live = tray.jobs.value.find(job => job.job_id === current.job?.job_id)\n  const allowed = live && (current.action === 'cancel'\n    ? isActiveJobStatus(live.status) && live.can_cancel\n    : live.can_delete)\n  if (allowed) await run(current.action, live)\n}\n\nfunction run(action: ConfirmAction, job?: JobState): Promise<void> {\n  if (action === 'clear') return clearFinished()\n  return action === 'cancel' ? cancelJob(job!) : deleteJob(job!)\n}\n\nasync function cancelJob(job: JobState): Promise<void> {\n  const succeeded = await tray.cancelJob(job)\n  if (!succeeded && tray.error.value) emit('error', tray.error.value)\n}\n\nasync function deleteJob(job: JobState): Promise<void> {\n  const succeeded = await tray.deleteJob(job)\n  if (!succeeded && tray.error.value) emit('error', tray.error.value)\n}\n\nasync function clearFinished(): Promise<void> {\n  const succeeded = await tray.clearFinished()\n  if (!succeeded && tray.error.value) emit('error', tray.error.value)\n}\n</script>\n\n<template>\n  <Teleport :to=\"teleportTarget\" :disabled=\"teleportTo === false\">\n    <div class=\"mint-jobs-tray\">\n      <!-- Clicks outside close the panel; the page is not dimmed. -->\n      <div\n        v-if=\"tray.isOpen.value\"\n        class=\"mint-jobs-tray__scrim\"\n        aria-hidden=\"true\"\n        @click=\"tray.close()\"\n      />\n\n      <Transition name=\"mint-jobs-tray-fade\">\n        <section\n          v-if=\"tray.isOpen.value\"\n          :id=\"tray.panelId\"\n          ref=\"panelRef\"\n          class=\"mint-jobs-tray__panel\"\n          :aria-labelledby=\"titleId\"\n          tabindex=\"-1\"\n        >\n          <header class=\"mint-jobs-tray__head\">\n            <h2 :id=\"titleId\" class=\"mint-jobs-tray__title\">{{ title }}</h2>\n            <span class=\"mint-jobs-tray__head-count\">{{ headCount }}</span>\n            <button\n              v-if=\"tray.canRefresh.value\"\n              type=\"button\"\n              class=\"mint-jobs-tray__icon-button\"\n              aria-label=\"Refresh jobs\"\n              title=\"Refresh jobs\"\n              :disabled=\"tray.isLoading.value\"\n              @click=\"tray.refresh\"\n            >\n              <RefreshCw :size=\"14\" aria-hidden=\"true\" />\n            </button>\n            <button\n              type=\"button\"\n              class=\"mint-jobs-tray__icon-button\"\n              aria-label=\"Close jobs\"\n              title=\"Close\"\n              @click=\"closeTray\"\n            >\n              <X :size=\"14\" aria-hidden=\"true\" />\n            </button>\n          </header>\n\n          <p v-if=\"tray.error.value\" class=\"mint-jobs-tray__error\" role=\"alert\">\n            {{ tray.error.value }}\n          </p>\n\n          <div class=\"mint-jobs-tray__body\">\n            <p v-if=\"sections.length === 0\" class=\"mint-jobs-tray__empty\">No jobs yet</p>\n\n            <template v-for=\"section in sections\" :key=\"section.key\">\n              <div class=\"mint-jobs-tray__section\" :data-section=\"section.key\">\n                {{ section.title }}\n                <span class=\"mint-jobs-tray__section-count\">· {{ section.rows.length }}</span>\n                <button\n                  v-if=\"section.key === 'finished' && canClear\"\n                  type=\"button\"\n                  class=\"mint-jobs-tray__section-action\"\n                  @click=\"request('clear')\"\n                >\n                  Clear\n                </button>\n              </div>\n\n              <div\n                v-for=\"{ job, view } in section.rows\"\n                :key=\"job.job_id\"\n                class=\"mint-jobs-tray__row\"\n                :class=\"{ 'mint-jobs-tray__row--awaiting-input': view.status === 'awaiting_input' }\"\n                :data-status=\"job.status\"\n              >\n                <!-- data-status is the real job status; the row view only changes how it looks. -->\n                <component\n                  :is=\"STATUS_ICONS[view.status]\"\n                  :size=\"15\"\n                  :class=\"['mint-jobs-tray__status', `mint-jobs-tray__status--${view.status.replace('_', '-')}`]\"\n                  role=\"img\"\n                  :aria-label=\"jobStatusLabel(view.status)\"\n                />\n                <button type=\"button\" class=\"mint-jobs-tray__row-title\" @click=\"emit('select', job)\">\n                  <slot name=\"job-title\" :job=\"job\">{{ job.name }}</slot>\n                </button>\n                <span class=\"mint-jobs-tray__tools\">\n                  <span class=\"mint-jobs-tray__value\">{{ jobValue(job, view.percent) }}</span>\n                  <slot name=\"job-actions\" :job=\"job\" />\n                  <button\n                    v-if=\"isActiveJobStatus(job.status) && job.can_cancel && tray.canCancel.value\"\n                    type=\"button\"\n                    class=\"mint-jobs-tray__icon-button mint-jobs-tray__icon-button--danger\"\n                    :aria-label=\"`Cancel ${job.name}`\"\n                    title=\"Cancel\"\n                    :disabled=\"tray.isPending(job)\"\n                    @click=\"request('cancel', job)\"\n                  >\n                    <Square :size=\"12\" aria-hidden=\"true\" />\n                  </button>\n                  <button\n                    v-if=\"job.can_delete && tray.canDelete.value\"\n                    type=\"button\"\n                    class=\"mint-jobs-tray__icon-button\"\n                    :aria-label=\"`Delete ${job.name}`\"\n                    title=\"Delete\"\n                    :disabled=\"tray.isPending(job)\"\n                    @click=\"request('delete', job)\"\n                  >\n                    <Trash2 :size=\"14\" aria-hidden=\"true\" />\n                  </button>\n                </span>\n                <div\n                  v-if=\"view.percent != null\"\n                  class=\"mint-jobs-tray__progress\"\n                  role=\"progressbar\"\n                  :aria-label=\"`${job.name} progress`\"\n                  aria-valuemin=\"0\"\n                  aria-valuemax=\"100\"\n                  :aria-valuenow=\"view.percent\"\n                >\n                  <span :style=\"{ width: `${view.percent}%` }\" />\n                </div>\n                <span\n                  class=\"mint-jobs-tray__detail\"\n                  :class=\"{ 'mint-jobs-tray__detail--error': job.status === 'failed' }\"\n                >\n                  <slot name=\"job-detail\" :job=\"job\">{{ view.message }}</slot>\n                </span>\n              </div>\n            </template>\n          </div>\n        </section>\n      </Transition>\n\n      <ConfirmDialog\n        v-if=\"confirmEnabled\"\n        :open=\"confirmOpen\"\n        tone=\"error\"\n        :title=\"confirmText?.title\"\n        :confirm-label=\"confirmText?.confirmLabel\"\n        :cancel-label=\"confirmText?.cancelLabel\"\n        @update:open=\"onConfirmOpen\"\n        @confirm=\"confirmPending\"\n      >\n        <!-- The marker class lifts the dialog above the tray (jobs-status-tray.css). -->\n        <p class=\"mint-confirm__message mint-jobs-tray__confirm\">{{ confirmText?.message }}</p>\n      </ConfirmDialog>\n    </div>\n  </Teleport>\n</template>\n","<script setup lang=\"ts\">\n/**\n * Compact, non-modal job panel under the top bar, driven by a job center the parent owns.\n *\n * The parent passes the center's `topBarJob`, `completedCount` and `handleTopBarClick`\n * to `AppTopBar`; its run slot opens this panel. `PluginWorkspaceView` does this for you\n * when its spec sets `jobs`.\n *\n * @example Recommended\n * ```vue\n * <AppTopBar :job=\"center.topBarJob.value\" :jobs-done=\"center.completedCount.value\"\n *   @job-click=\"center.handleTopBarClick(openResult)\" />\n * <JobsStatusTray :center=\"center\" @select=\"openResult\" />\n * ```\n */\nimport { computed, nextTick, onBeforeUnmount, ref, watch, type Component } from 'vue'\nimport {\n  CircleAlert,\n  CircleCheck,\n  CircleSlash,\n  CircleX,\n  Clock,\n  LoaderCircle,\n  RefreshCw,\n  Square,\n  Trash2,\n  X,\n} from 'lucide-vue-next'\n\nimport { isActiveJobStatus, jobStatusLabel } from '../jobs'\nimport type { UseJobCenterReturn } from '../composables/useJobCenter'\nimport type { JobState, JobStatus } from '../types/jobs'\nimport ConfirmDialog from './ConfirmDialog.vue'\n\ntype ConfirmAction = 'cancel' | 'delete' | 'clear'\n\ninterface Props {\n  /** Job center from `useJobCenter()`; the parent owns it and opens the panel through it. */\n  center: UseJobCenterReturn\n  title?: string\n  teleportTo?: string | HTMLElement | false\n  /** Ask before Cancel, Delete and Clear (`true`), or before the named ones only. Default off. */\n  confirm?: boolean | Partial<Record<ConfirmAction, boolean>>\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  title: 'Jobs',\n  teleportTo: 'body',\n  confirm: false,\n})\n\nconst emit = defineEmits<{\n  select: [job: JobState]\n  error: [message: string]\n}>()\n\ndefineSlots<{\n  /** Extra per-row actions, rendered before the built-in Cancel / Delete. */\n  'job-actions'?: (props: { job: JobState }) => unknown\n  /** Row title. Default: the job name. */\n  'job-title'?: (props: { job: JobState }) => unknown\n  /** Detail line under the title. Default: the error, progress message or status. */\n  'job-detail'?: (props: { job: JobState }) => unknown\n}>()\n\nconst STATUS_ICONS: Record<JobStatus, Component> = {\n  running: LoaderCircle,\n  awaiting_input: CircleAlert,\n  queued: Clock,\n  completed: CircleCheck,\n  failed: CircleX,\n  cancelled: CircleSlash,\n}\n\nconst panelRef = ref<HTMLElement | null>(null)\nconst teleportTarget = computed(() => props.teleportTo || 'body')\nconst tray = props.center\nconst titleId = `${tray.panelId}-title`\nconst rows = (jobs: JobState[]) => jobs.map(job => ({ job, view: tray.rowView(job) }))\n// A job waiting for input is the only one that needs a person: pin it first.\nconst activeRows = computed(() => {\n  const active = rows(tray.activeJobs.value)\n  return [\n    ...active.filter(row => row.view.status === 'awaiting_input'),\n    ...active.filter(row => row.view.status !== 'awaiting_input'),\n  ]\n})\nconst sections = computed(() => [\n  { key: 'active', title: 'Active', rows: activeRows.value },\n  { key: 'finished', title: 'Finished', rows: rows(tray.historyJobs.value) },\n].filter(section => section.rows.length > 0))\nconst headCount = computed(() => {\n  const parts = [\n    [tray.activeJobs.value.length, 'active'],\n    [tray.completedCount.value, 'done'],\n    [tray.historyJobs.value.filter(job => job.status === 'failed').length, 'failed'],\n  ].filter(([n]) => n).map(([n, word]) => `${n} ${word}`)\n  return parts.length ? parts.join(' · ') : 'No jobs'\n})\nconst canClear = computed(() => (\n  tray.deletableJobs.value.length > 0\n  && tray.canClearFinished.value\n))\n\n// Escape returns focus to the element that opened the panel (the top-bar chip).\n// The panel is non-modal, so Escape is heard on the document while it is open.\n// An Escape that an inner control handled, or that belongs to a modal dialog\n// above the tray (its own confirm dialog too), leaves the tray open.\nlet opener: HTMLElement | null = null\nfunction onDocumentKeydown(event: KeyboardEvent): void {\n  if (event.key !== 'Escape' || event.defaultPrevented || confirmOpen.value) return\n  if (event.target instanceof Element && event.target.closest('[aria-modal=\"true\"]')) return\n  closeTray()\n}\nwatch(tray.isOpen, async (open) => {\n  if (!open) {\n    document.removeEventListener('keydown', onDocumentKeydown)\n    return\n  }\n  opener = document.activeElement instanceof HTMLElement ? document.activeElement : null\n  document.addEventListener('keydown', onDocumentKeydown)\n  await nextTick()\n  panelRef.value?.focus()\n}, { flush: 'sync' })\nonBeforeUnmount(() => document.removeEventListener('keydown', onDocumentKeydown))\n\n// A focused row that leaves the list (an action or a refresh) drops focus to body:\n// note the focused element before the update and keep focus in the panel after it.\nlet focusedInPanel: Element | null = null\nwatch(tray.jobs, () => {\n  const focused = document.activeElement\n  focusedInPanel = focused && panelRef.value?.contains(focused) ? focused : null\n}, { flush: 'pre' })\nwatch(tray.jobs, () => {\n  if (tray.isOpen.value && focusedInPanel && !focusedInPanel.isConnected) panelRef.value?.focus()\n  focusedInPanel = null\n}, { flush: 'post' })\n\nfunction closeTray(): void {\n  tray.close()\n  // Safari leaves a clicked button unfocused (opener = body), and the chip node is\n  // replaced when it switches between job chip and idle button: fall back to the\n  // top-bar jobs control.\n  const target = opener?.isConnected && opener !== document.body\n    ? opener\n    : document.querySelector<HTMLElement>('.mint-topbar__job')\n  target?.focus()\n}\n\nfunction formatTime(value: string | null): string {\n  if (!value) return ''\n  const date = new Date(value)\n  return Number.isNaN(date.getTime())\n    ? ''\n    : date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })\n}\n\n/** Right-hand value: the percent while a job moves, else when it ended or started. */\nfunction jobValue(job: JobState, percent: number | null): string {\n  if (percent != null) return `${percent}%`\n  return formatTime(job.completed_at || job.started_at || job.created_at)\n}\n\n// Confirmation: the action waits for the dialog; it runs on the live job.\n// `ids`: the finished jobs that the user confirmed to clear.\nconst pending = ref<{ action: ConfirmAction; job?: JobState; ids?: string[] } | null>(null)\nconst confirmOpen = ref(false)\n// Set on request and kept, so the dialog text stays while it fades out.\nconst confirmText = ref<{ title: string; message: string; confirmLabel: string; cancelLabel: string } | null>(null)\nconst confirmEnabled = computed(() => props.confirm === true\n  || (typeof props.confirm === 'object' && Object.values(props.confirm).some(Boolean)))\n\nfunction textFor(action: ConfirmAction, job?: JobState) {\n  if (action === 'clear') {\n    const count = tray.deletableJobs.value.length\n    return {\n      title: 'Clear finished jobs?',\n      message: `${count} finished ${count === 1 ? 'job' : 'jobs'} and their stored results are deleted.`,\n      confirmLabel: 'Clear jobs',\n      cancelLabel: 'Cancel',\n    }\n  }\n  return action === 'cancel'\n    ? { title: 'Cancel job?', message: `${job?.name} stops. Its partial results are lost.`, confirmLabel: 'Cancel job', cancelLabel: 'Keep running' }\n    : { title: 'Delete job?', message: `${job?.name} and its stored result are deleted.`, confirmLabel: 'Delete job', cancelLabel: 'Cancel' }\n}\n\nfunction needsConfirm(action: ConfirmAction): boolean {\n  return props.confirm === true || (typeof props.confirm === 'object' && props.confirm[action] === true)\n}\n\nfunction request(action: ConfirmAction, job?: JobState): void {\n  if (!needsConfirm(action)) {\n    void run(action, job)\n    return\n  }\n  pending.value = { action, job, ids: action === 'clear' ? deletableIds() : undefined }\n  confirmText.value = textFor(action, job)\n  confirmOpen.value = true\n}\n\nfunction deletableIds(): string[] {\n  return tray.deletableJobs.value.map(job => job.job_id).sort()\n}\n\n// A new source is a new job list: the confirmed target is gone.\nwatch(tray.source, () => onConfirmOpen(false))\n\nfunction onConfirmOpen(open: boolean): void {\n  confirmOpen.value = open\n  if (!open) pending.value = null\n}\n\nasync function confirmPending(): Promise<void> {\n  // A second Confirm click while the dialog fades out does nothing.\n  const current = pending.value\n  if (!confirmOpen.value || !current) return\n  if (current.action === 'clear') {\n    // Polling changed the finished jobs: ask again with the new count.\n    const ids = deletableIds()\n    if (ids.join() !== current.ids?.join()) {\n      pending.value = { ...current, ids }\n      confirmText.value = textFor('clear')\n      return\n    }\n  }\n  confirmOpen.value = false\n  pending.value = null\n  if (current.action === 'clear') return clearFinished()\n  // Polling can end or remove the job while the dialog is open: then do nothing.\n  const live = tray.jobs.value.find(job => job.job_id === current.job?.job_id)\n  const allowed = live && (current.action === 'cancel'\n    ? isActiveJobStatus(live.status) && live.can_cancel\n    : live.can_delete)\n  if (allowed) await run(current.action, live)\n}\n\nfunction run(action: ConfirmAction, job?: JobState): Promise<void> {\n  if (action === 'clear') return clearFinished()\n  return action === 'cancel' ? cancelJob(job!) : deleteJob(job!)\n}\n\nasync function cancelJob(job: JobState): Promise<void> {\n  const succeeded = await tray.cancelJob(job)\n  if (!succeeded && tray.error.value) emit('error', tray.error.value)\n}\n\nasync function deleteJob(job: JobState): Promise<void> {\n  const succeeded = await tray.deleteJob(job)\n  if (!succeeded && tray.error.value) emit('error', tray.error.value)\n}\n\nasync function clearFinished(): Promise<void> {\n  const succeeded = await tray.clearFinished()\n  if (!succeeded && tray.error.value) emit('error', tray.error.value)\n}\n</script>\n\n<template>\n  <Teleport :to=\"teleportTarget\" :disabled=\"teleportTo === false\">\n    <div class=\"mint-jobs-tray\">\n      <!-- Clicks outside close the panel; the page is not dimmed. -->\n      <div\n        v-if=\"tray.isOpen.value\"\n        class=\"mint-jobs-tray__scrim\"\n        aria-hidden=\"true\"\n        @click=\"tray.close()\"\n      />\n\n      <Transition name=\"mint-jobs-tray-fade\">\n        <section\n          v-if=\"tray.isOpen.value\"\n          :id=\"tray.panelId\"\n          ref=\"panelRef\"\n          class=\"mint-jobs-tray__panel\"\n          :aria-labelledby=\"titleId\"\n          tabindex=\"-1\"\n        >\n          <header class=\"mint-jobs-tray__head\">\n            <h2 :id=\"titleId\" class=\"mint-jobs-tray__title\">{{ title }}</h2>\n            <span class=\"mint-jobs-tray__head-count\">{{ headCount }}</span>\n            <button\n              v-if=\"tray.canRefresh.value\"\n              type=\"button\"\n              class=\"mint-jobs-tray__icon-button\"\n              aria-label=\"Refresh jobs\"\n              title=\"Refresh jobs\"\n              :disabled=\"tray.isLoading.value\"\n              @click=\"tray.refresh\"\n            >\n              <RefreshCw :size=\"14\" aria-hidden=\"true\" />\n            </button>\n            <button\n              type=\"button\"\n              class=\"mint-jobs-tray__icon-button\"\n              aria-label=\"Close jobs\"\n              title=\"Close\"\n              @click=\"closeTray\"\n            >\n              <X :size=\"14\" aria-hidden=\"true\" />\n            </button>\n          </header>\n\n          <p v-if=\"tray.error.value\" class=\"mint-jobs-tray__error\" role=\"alert\">\n            {{ tray.error.value }}\n          </p>\n\n          <div class=\"mint-jobs-tray__body\">\n            <p v-if=\"sections.length === 0\" class=\"mint-jobs-tray__empty\">No jobs yet</p>\n\n            <template v-for=\"section in sections\" :key=\"section.key\">\n              <div class=\"mint-jobs-tray__section\" :data-section=\"section.key\">\n                {{ section.title }}\n                <span class=\"mint-jobs-tray__section-count\">· {{ section.rows.length }}</span>\n                <button\n                  v-if=\"section.key === 'finished' && canClear\"\n                  type=\"button\"\n                  class=\"mint-jobs-tray__section-action\"\n                  @click=\"request('clear')\"\n                >\n                  Clear\n                </button>\n              </div>\n\n              <div\n                v-for=\"{ job, view } in section.rows\"\n                :key=\"job.job_id\"\n                class=\"mint-jobs-tray__row\"\n                :class=\"{ 'mint-jobs-tray__row--awaiting-input': view.status === 'awaiting_input' }\"\n                :data-status=\"job.status\"\n              >\n                <!-- data-status is the real job status; the row view only changes how it looks. -->\n                <component\n                  :is=\"STATUS_ICONS[view.status]\"\n                  :size=\"15\"\n                  :class=\"['mint-jobs-tray__status', `mint-jobs-tray__status--${view.status.replace('_', '-')}`]\"\n                  role=\"img\"\n                  :aria-label=\"jobStatusLabel(view.status)\"\n                />\n                <button type=\"button\" class=\"mint-jobs-tray__row-title\" @click=\"emit('select', job)\">\n                  <slot name=\"job-title\" :job=\"job\">{{ job.name }}</slot>\n                </button>\n                <span class=\"mint-jobs-tray__tools\">\n                  <span class=\"mint-jobs-tray__value\">{{ jobValue(job, view.percent) }}</span>\n                  <slot name=\"job-actions\" :job=\"job\" />\n                  <button\n                    v-if=\"isActiveJobStatus(job.status) && job.can_cancel && tray.canCancel.value\"\n                    type=\"button\"\n                    class=\"mint-jobs-tray__icon-button mint-jobs-tray__icon-button--danger\"\n                    :aria-label=\"`Cancel ${job.name}`\"\n                    title=\"Cancel\"\n                    :disabled=\"tray.isPending(job)\"\n                    @click=\"request('cancel', job)\"\n                  >\n                    <Square :size=\"12\" aria-hidden=\"true\" />\n                  </button>\n                  <button\n                    v-if=\"job.can_delete && tray.canDelete.value\"\n                    type=\"button\"\n                    class=\"mint-jobs-tray__icon-button\"\n                    :aria-label=\"`Delete ${job.name}`\"\n                    title=\"Delete\"\n                    :disabled=\"tray.isPending(job)\"\n                    @click=\"request('delete', job)\"\n                  >\n                    <Trash2 :size=\"14\" aria-hidden=\"true\" />\n                  </button>\n                </span>\n                <div\n                  v-if=\"view.percent != null\"\n                  class=\"mint-jobs-tray__progress\"\n                  role=\"progressbar\"\n                  :aria-label=\"`${job.name} progress`\"\n                  aria-valuemin=\"0\"\n                  aria-valuemax=\"100\"\n                  :aria-valuenow=\"view.percent\"\n                >\n                  <span :style=\"{ width: `${view.percent}%` }\" />\n                </div>\n                <span\n                  class=\"mint-jobs-tray__detail\"\n                  :class=\"{ 'mint-jobs-tray__detail--error': job.status === 'failed' }\"\n                >\n                  <slot name=\"job-detail\" :job=\"job\">{{ view.message }}</slot>\n                </span>\n              </div>\n            </template>\n          </div>\n        </section>\n      </Transition>\n\n      <ConfirmDialog\n        v-if=\"confirmEnabled\"\n        :open=\"confirmOpen\"\n        tone=\"error\"\n        :title=\"confirmText?.title\"\n        :confirm-label=\"confirmText?.confirmLabel\"\n        :cancel-label=\"confirmText?.cancelLabel\"\n        @update:open=\"onConfirmOpen\"\n        @confirm=\"confirmPending\"\n      >\n        <!-- The marker class lifts the dialog above the tray (jobs-status-tray.css). -->\n        <p class=\"mint-confirm__message mint-jobs-tray__confirm\">{{ confirmText?.message }}</p>\n      </ConfirmDialog>\n    </div>\n  </Teleport>\n</template>\n","import {\n  getCurrentScope,\n  onScopeDispose,\n  readonly,\n  ref,\n  toValue,\n  watch,\n  type MaybeRefOrGetter,\n  type Ref,\n} from 'vue'\n\n/**\n * One event of the platform's realtime stream (`GET /api/events`).\n *\n * Platform events carry no entity data: refetch the entity through REST.\n * `type` is `resync` (refetch everything you show), the audit action of a\n * committed write, such as `experiment.update` or `analysis.artifact_create`,\n * or the `\"<plugin>.<event>\"` name of a plugin event, which carries `payload`.\n * Only `usePresence` receives `presence.changed`.\n */\nexport interface RealtimeEvent {\n  type: string\n  id?: string\n  /**\n   * `experiment:{id}`, `project:{id}`, `experiments`, `user:{id}`, or a plugin's\n   * `plugin:{name}` / `plugin:{name}:experiment:{id}`; absent on `resync`.\n   */\n  topic?: string\n  /** A plugin event: the JSON payload the plugin published (at most 16 KiB). */\n  payload?: unknown\n  /** Changed fields of an update, when the write names them. */\n  fields?: string[] | null\n  actor_id?: string | null\n  request_id?: string | null\n  at?: string\n  /** `presence.changed`: the topic's viewers (at most 20, `editing` first). */\n  viewers?: { user_id: string, activity: string }[]\n  /** `presence.changed`: the number of viewers, also those beyond `viewers`. */\n  count?: number\n}\n\nexport type RealtimeHandler = (event: RealtimeEvent) => void\n\nexport interface UseRealtimeReturn {\n  /** True while the shared stream is open. */\n  connected: Readonly<Ref<boolean>>\n  /** Unsubscribe; also runs when the calling component or effect scope is disposed. */\n  stop: () => void\n}\n\nconst EVENTS_URL = '/api/events'\nconst RECONNECT_BASE_MS = 1_000\nconst RECONNECT_MAX_MS = 30_000\n/** Merges the subscriptions of components that mount together into one connection. */\nconst TOPIC_DEBOUNCE_MS = 50\nconst RESYNC: RealtimeEvent = { type: 'resync' }\n\ninterface Listener {\n  topics: () => string[]\n  handler: RealtimeHandler\n  /** Receives `presence.changed`; a write listener would refetch on each viewer change. */\n  presence: boolean\n}\n\nconst listeners = new Set<Listener>()\n/** The last `presence.changed` of each topic of the open stream; the server sends one per topic at open. */\nconst presence = new Map<string, RealtimeEvent>()\nconst connected = ref(false)\nlet source: EventSource | null = null\nlet sourceTopics = ''\nlet failures = 0\nlet syncTimer: ReturnType<typeof setTimeout> | null = null\nlet retryTimer: ReturnType<typeof setTimeout> | null = null\n\nfunction dispatch(event: RealtimeEvent): void {\n  const isPresence = event.type === 'presence.changed'\n  if (isPresence && event.topic) presence.set(event.topic, event)\n  for (const listener of [...listeners]) {\n    if (isPresence && !listener.presence) continue\n    if (event.type === 'resync' || (event.topic && listener.topics().includes(event.topic))) {\n      listener.handler(event)\n    }\n  }\n}\n\nfunction close(): void {\n  source?.close()\n  source = null\n  sourceTopics = ''\n  presence.clear()\n  connected.value = false\n}\n\nfunction open(topics: string): void {\n  const stream = new EventSource(`${EVENTS_URL}?topics=${encodeURIComponent(topics)}`)\n  source = stream\n  sourceTopics = topics\n  stream.onopen = () => {\n    connected.value = true\n    // The server subscribes only now: a write between a caller's REST load (or\n    // the close of the previous stream) and this point sent no event, so every caller refetches.\n    dispatch(RESYNC)\n    failures = 0\n  }\n  stream.onmessage = (message) => {\n    dispatch(JSON.parse(message.data) as RealtimeEvent)\n  }\n  stream.onerror = () => {\n    // EventSource retries a dropped connection itself but gives up after an\n    // HTTP error, so one backoff path handles both.\n    if (source !== stream) return\n    close()\n    // A topic change during the wait does not shorten it: the retry reads the topics when it runs.\n    if (syncTimer !== null) clearTimeout(syncTimer)\n    syncTimer = null\n    retryTimer = setTimeout(() => {\n      retryTimer = null\n      sync()\n    }, Math.min(RECONNECT_MAX_MS, RECONNECT_BASE_MS * 2 ** failures))\n    failures += 1\n  }\n}\n\nfunction sync(): void {\n  syncTimer = null\n  const topics = [...new Set([...listeners].flatMap(listener => listener.topics()))].sort().join(',')\n  if (source && topics === sourceTopics) return\n  close()\n  if (topics) open(topics)\n}\n\nfunction schedule(): void {\n  if (retryTimer !== null) return\n  if (syncTimer !== null) clearTimeout(syncTimer)\n  syncTimer = setTimeout(sync, TOPIC_DEBOUNCE_MS)\n}\n\n/**\n * Subscribe to topics of the platform's realtime stream.\n *\n * Every caller in a tab shares one `EventSource`, opened on the union of\n * their topics and reopened when that union changes. `handler` receives the\n * write events of the caller's own topics (not `presence.changed`, which goes\n * to `usePresence`) plus every `resync`: one comes from the\n * server when this tab fell behind, and one follows each open of the stream:\n * the first open, each reconnect (backoff from 1 s to 30 s) and each reopen for\n * a changed topic union. On `resync`, refetch. The union of all callers' topics\n * in a tab may hold at most 50 topics; the platform refuses a larger stream.\n *\n * The stream authenticates with the session cookie, so it works in the\n * platform and in plugin frontends served by it. It exists only when the\n * platform's `realtime` feature flag is on; check that flag first.\n *\n * A plugin topic reaches a caller whose role may use the plugin; an\n * experiment plugin topic also needs a caller who may view the experiment.\n *\n * @example\n * useRealtime(() => [`experiment:${id.value}`], () => refetch())\n * @example\n * useRealtime(['plugin:drp'], (event) => {\n *   if (event.type === 'drp.run.progress') progress.value = event.payload as RunProgress\n * })\n */\nexport function useRealtime(\n  topics: MaybeRefOrGetter<string[]>,\n  handler: RealtimeHandler,\n): UseRealtimeReturn {\n  return subscribeRealtime(topics, handler, false)\n}\n\n/** The last `presence.changed` of `topic` while the open stream views it (for `usePresence`). */\nexport function currentPresence(topic: string): RealtimeEvent | undefined {\n  return presence.get(topic)\n}\n\n/** `useRealtime`, and with `withPresence` also the `presence.changed` events (for `usePresence`). */\nexport function subscribeRealtime(\n  topics: MaybeRefOrGetter<string[]>,\n  handler: RealtimeHandler,\n  withPresence: boolean,\n): UseRealtimeReturn {\n  const listener: Listener = { topics: () => toValue(topics), handler, presence: withPresence }\n  listeners.add(listener)\n  const stopWatch = watch(() => listener.topics().join(','), () => schedule())\n  schedule()\n\n  function stop(): void {\n    stopWatch()\n    if (listeners.delete(listener)) schedule()\n  }\n\n  if (getCurrentScope()) onScopeDispose(stop)\n  return { connected: readonly(connected), stop }\n}\n"],"mappings":"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"}

package/dist/useRequest-CXyPw3eh.js

@@ -0,0 +1,76 @@
+import { r as readErrorMessage } from "./experiment-DyO54FQB.js";
+import { ref } from "vue";
+//#region src/composables/useRequest.ts
+/** Loading, error and timestamp state for one request at a time; `run()` drives it. */
+function useRequest(defaultErrorMessage = "Request failed.") {
+	const isLoading = ref(false);
+	const error = ref(null);
+	const lastLoadedAt = ref(null);
+	const lastSavedAt = ref(null);
+	const lastRunAt = ref(null);
+	function clearError() {
+		error.value = null;
+	}
+	function readErrorMessage$1(value, fallback = defaultErrorMessage) {
+		return readErrorMessage(value, fallback);
+	}
+	function setError(value, fallback) {
+		const message = readErrorMessage$1(value, fallback);
+		error.value = message;
+		return message;
+	}
+	let runToken = 0;
+	let activeController = null;
+	function cancel() {
+		runToken += 1;
+		activeController?.abort();
+		activeController = null;
+		isLoading.value = false;
+	}
+	async function run(operation, options = {}) {
+		if (options.abortPrevious !== false) activeController?.abort();
+		const token = runToken += 1;
+		const controller = new AbortController();
+		activeController = controller;
+		const callerSignal = options.signal;
+		if (callerSignal) {
+			if (callerSignal.aborted) controller.abort(callerSignal.reason);
+			else callerSignal.addEventListener("abort", () => controller.abort(callerSignal.reason), { once: true });
+		}
+		const isCurrent = () => token === runToken;
+		isLoading.value = true;
+		clearError();
+		try {
+			const response = await operation(controller.signal);
+			if (isCurrent() && options.kind) {
+				const settledAt = /* @__PURE__ */ new Date();
+				if (options.kind === "load") lastLoadedAt.value = settledAt;
+				else if (options.kind === "save") lastSavedAt.value = settledAt;
+				else lastRunAt.value = settledAt;
+			}
+			return response;
+		} catch (err) {
+			if (isCurrent()) setError(err, options.errorMessage);
+			throw err;
+		} finally {
+			if (isCurrent()) isLoading.value = false;
+			if (activeController === controller) activeController = null;
+		}
+	}
+	return {
+		isLoading,
+		error,
+		lastLoadedAt,
+		lastSavedAt,
+		lastRunAt,
+		clearError,
+		readErrorMessage: readErrorMessage$1,
+		setError,
+		run,
+		cancel
+	};
+}
+//#endregion
+export { useRequest as t };
+
+//# sourceMappingURL=useRequest-CXyPw3eh.js.map

package/dist/useRequest-CXyPw3eh.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRequest-CXyPw3eh.js","names":[],"sources":["../src/composables/useRequest.ts"],"sourcesContent":["import { ref, type Ref } from 'vue'\nimport { readErrorMessage as readSharedErrorMessage } from '../utils/errors'\n\nexport type RequestKind = 'load' | 'save' | 'run'\n\n/**\n * The unit of work `run()` drives.\n *\n * It receives an `AbortSignal` that fires when the run is superseded by a\n * newer `run()` or by `cancel()`. Zero-argument operations stay valid and\n * simply ignore it.\n */\nexport type RequestOperation<T> = (signal: AbortSignal) => Promise<T>\n\nexport interface RequestRunOptions {\n  /** Which timestamp a successful run moves: `lastLoadedAt`, `lastSavedAt` or `lastRunAt`. */\n  kind?: RequestKind\n  errorMessage?: string\n  /**\n   * Abort the previously started run when this one starts. Default `true`;\n   * pass `false` to let overlapping runs finish their own work (the stale\n   * guard on shared state still applies either way).\n   */\n  abortPrevious?: boolean\n  /** Caller-owned signal; aborting it aborts this run's signal too. */\n  signal?: AbortSignal\n}\n\nexport interface UseRequestReturn {\n  /** Whether a request is in progress. */\n  isLoading: Ref<boolean>\n  /** Message from the last failed request, or null. */\n  error: Ref<string | null>\n  /** Timestamp of the last successful load operation, or null. */\n  lastLoadedAt: Ref<Date | null>\n  /** Timestamp of the last successful save operation, or null. */\n  lastSavedAt: Ref<Date | null>\n  /** Timestamp of the last successful run operation, or null. */\n  lastRunAt: Ref<Date | null>\n  /** Clear the current error without changing loading or timestamps. */\n  clearError: () => void\n  /** Convert thrown values into a developer-facing error message. */\n  readErrorMessage: (value: unknown, fallback?: string) => string\n  /** Store and return a normalized error message. */\n  setError: (value: unknown, fallback?: string) => string\n  /**\n   * Run a request with shared loading/error handling and optional sync marking.\n   *\n   * ## Stale-response semantics\n   *\n   * Every call takes a monotonically increasing token. Starting a run\n   * supersedes any run started before it, and a superseded run writes **no**\n   * shared state when it finally settles: it does not clear `isLoading`, does not\n   * set `error`, and does not move `lastLoadedAt` / `lastSavedAt` / `lastRunAt`.\n   * Only the newest run owns those.\n   *\n   * The caller's own promise is untouched by the guard — a superseded run still\n   * resolves with its value or rejects with its own error, exactly as the\n   * operation did. The guard never invents a rejection, so a caller awaiting\n   * `run()` never sees a \"superseded\" error it did not cause.\n   *\n   * The operation additionally receives an `AbortSignal` that fires when its\n   * run is superseded or `cancel()` is called, so an operation that forwards\n   * the signal (`fetch(url, { signal })`) stops work instead of racing.\n   */\n  run: <T>(operation: RequestOperation<T>, options?: RequestRunOptions) => Promise<T>\n  /**\n   * Abort the in-flight run and drop `isLoading`. The aborted run's completion\n   * is treated as stale and writes no state.\n   */\n  cancel: () => void\n}\n\n/** Loading, error and timestamp state for one request at a time; `run()` drives it. */\nexport function useRequest(\n  defaultErrorMessage = 'Request failed.',\n): UseRequestReturn {\n  const isLoading = ref(false)\n  const error = ref<string | null>(null)\n  const lastLoadedAt = ref<Date | null>(null)\n  const lastSavedAt = ref<Date | null>(null)\n  const lastRunAt = ref<Date | null>(null)\n\n  function clearError(): void {\n    error.value = null\n  }\n\n  function readErrorMessage(value: unknown, fallback = defaultErrorMessage): string {\n    return readSharedErrorMessage(value, fallback)\n  }\n\n  function setError(value: unknown, fallback?: string): string {\n    const message = readErrorMessage(value, fallback)\n    error.value = message\n    return message\n  }\n\n  // Monotonic token guarding every write to the shared loading/error/timestamp\n  // state. Overlapping runs settle in any order, and a superseded one must not\n  // clear a newer run's loading flag or overwrite its error.\n  let runToken = 0\n  let activeController: AbortController | null = null\n\n  function cancel(): void {\n    runToken += 1\n    activeController?.abort()\n    activeController = null\n    isLoading.value = false\n  }\n\n  async function run<T>(\n    operation: RequestOperation<T>,\n    options: RequestRunOptions = {},\n  ): Promise<T> {\n    if (options.abortPrevious !== false) {\n      activeController?.abort()\n    }\n\n    const token = (runToken += 1)\n    const controller = new AbortController()\n    activeController = controller\n\n    const callerSignal = options.signal\n    if (callerSignal) {\n      if (callerSignal.aborted) controller.abort(callerSignal.reason)\n      else callerSignal.addEventListener(\n        'abort',\n        () => controller.abort(callerSignal.reason),\n        { once: true },\n      )\n    }\n\n    const isCurrent = (): boolean => token === runToken\n\n    isLoading.value = true\n    clearError()\n    try {\n      const response = await operation(controller.signal)\n      if (isCurrent() && options.kind) {\n        const settledAt = new Date()\n        if (options.kind === 'load') lastLoadedAt.value = settledAt\n        else if (options.kind === 'save') lastSavedAt.value = settledAt\n        else lastRunAt.value = settledAt\n      }\n      return response\n    } catch (err) {\n      if (isCurrent()) {\n        setError(err, options.errorMessage)\n      }\n      throw err\n    } finally {\n      if (isCurrent()) {\n        isLoading.value = false\n      }\n      if (activeController === controller) {\n        activeController = null\n      }\n    }\n  }\n\n  return {\n    isLoading,\n    error,\n    lastLoadedAt,\n    lastSavedAt,\n    lastRunAt,\n    clearError,\n    readErrorMessage,\n    setError,\n    run,\n    cancel,\n  }\n}\n"],"mappings":";;;;AA0EA,SAAgB,WACd,sBAAsB,mBACJ;CAClB,MAAM,YAAY,IAAI,KAAK;CAC3B,MAAM,QAAQ,IAAmB,IAAI;CACrC,MAAM,eAAe,IAAiB,IAAI;CAC1C,MAAM,cAAc,IAAiB,IAAI;CACzC,MAAM,YAAY,IAAiB,IAAI;CAEvC,SAAS,aAAmB;EAC1B,MAAM,QAAQ;CAChB;CAEA,SAAS,mBAAiB,OAAgB,WAAW,qBAA6B;EAChF,OAAO,iBAAuB,OAAO,QAAQ;CAC/C;CAEA,SAAS,SAAS,OAAgB,UAA2B;EAC3D,MAAM,UAAU,mBAAiB,OAAO,QAAQ;EAChD,MAAM,QAAQ;EACd,OAAO;CACT;CAKA,IAAI,WAAW;CACf,IAAI,mBAA2C;CAE/C,SAAS,SAAe;EACtB,YAAY;EACZ,kBAAkB,MAAM;EACxB,mBAAmB;EACnB,UAAU,QAAQ;CACpB;CAEA,eAAe,IACb,WACA,UAA6B,CAAC,GAClB;EACZ,IAAI,QAAQ,kBAAkB,OAC5B,kBAAkB,MAAM;EAG1B,MAAM,QAAS,YAAY;EAC3B,MAAM,aAAa,IAAI,gBAAgB;EACvC,mBAAmB;EAEnB,MAAM,eAAe,QAAQ;EAC7B,IAAI,cAAc;GAChB,IAAI,aAAa,SAAS,WAAW,MAAM,aAAa,MAAM;QACzD,aAAa,iBAChB,eACM,WAAW,MAAM,aAAa,MAAM,GAC1C,EAAE,MAAM,KAAK,CACf;EACF;EAEA,MAAM,kBAA2B,UAAU;EAE3C,UAAU,QAAQ;EAClB,WAAW;EACX,IAAI;GACF,MAAM,WAAW,MAAM,UAAU,WAAW,MAAM;GAClD,IAAI,UAAU,KAAK,QAAQ,MAAM;IAC/B,MAAM,4BAAY,IAAI,KAAK;IAC3B,IAAI,QAAQ,SAAS,QAAQ,aAAa,QAAQ;SAC7C,IAAI,QAAQ,SAAS,QAAQ,YAAY,QAAQ;SACjD,UAAU,QAAQ;GACzB;GACA,OAAO;EACT,SAAS,KAAK;GACZ,IAAI,UAAU,GACZ,SAAS,KAAK,QAAQ,YAAY;GAEpC,MAAM;EACR,UAAU;GACR,IAAI,UAAU,GACZ,UAAU,QAAQ;GAEpB,IAAI,qBAAqB,YACvB,mBAAmB;EAEvB;CACF;CAEA,OAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA,kBAAA;EACA;EACA;EACA;CACF;AACF"}

package/dist/utils/deprecation.d.ts

@@ -0,0 +1,2 @@
+/** Warn once per page load that a deprecated SDK option or slot is in use. */
+export declare function warnDeprecatedOnce(key: string, message: string): void;

package/dist/utils/lucideIcon.d.ts

@@ -0,0 +1,4 @@
+import { Component } from 'vue';
+export declare function isLucideIconName(value?: string): value is string;
+/** The Lucide component for `name`, or undefined when Lucide has no such icon. */
+export declare function loadLucideIcon(name: string): Promise<Component | undefined>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@morscherlab/mint-sdk",
-  "version": "1.5.0-beta.6",
+  "version": "1.5.0-beta.8",
   "description": "MINT Platform SDK — Vue 3 components, composables, and types for plugin development. MINT = Mass-spec Infrastructure for Next-generation Toolkits.",
   "type": "module",
   "main": "./dist/index.js",

package/src/__tests__/components/AppTopBar.test.ts

@@ -1,8 +1,9 @@
 import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
 import { enableAutoUnmount, flushPromises, mount, type VueWrapper } from '@vue/test-utils'
-import { computed, ref } from 'vue'
+import { computed, h, ref } from 'vue'
 import { createPinia } from 'pinia'
 import AppTopBar from '../../components/AppTopBar.vue'
+import AppLayout from '../../components/AppLayout.vue'
 import ExperimentPopover from '../../components/ExperimentPopover.vue'
 import ExperimentSelectorModal from '../../components/ExperimentSelectorModal.vue'
 import { usePlatform } from '../../composables/usePlatform'
@@ -13,6 +14,7 @@ import ThemeToggle from '../../components/ThemeToggle.vue'
 import SettingsModal from '../../components/SettingsModal.vue'
 import type { TopBarSettingsConfig } from '../../types/components'
 import type { TopBarJob } from '../../types/jobs'
+import { loadLucideIcon } from '../../utils/lucideIcon'
 
 // Mock the usePlatform composable
 vi.mock('../../composables/usePlatform', () => ({
@@ -95,14 +97,17 @@ describe('AppTopBar', () => {
       expect(wrapper.props()).not.toHaveProperty('pluginSwitcher')
     })
 
-    it('should render without ThemeToggle by default', () => {
-      const wrapper = createWrapper({ title: 'Test App' })
-      expect(wrapper.findComponent(ThemeToggle).exists()).toBe(false)
-    })
+    it('should end with the theme toggle, the settings button and the account slot by default', () => {
+      const wrapper = createWrapper(
+        { title: 'Test App', spec: { actions: [{ id: 'export', label: 'Export', onSelect: () => {} }] } },
+        { account: '<span class="account" />' },
+      )
 
-    it('should render without settings button by default', () => {
-      const wrapper = createWrapper({ title: 'Test App' })
-      expect(wrapper.find('.mint-topbar__settings-btn').exists()).toBe(false)
+      const tail = wrapper.get('.mint-topbar__right > :last-child')
+      expect(tail.classes()).toContain('mint-topbar__tail')
+      const [theme, settings, account] = Array.from(tail.element.children)
+      expect([theme === wrapper.findComponent(ThemeToggle).element, settings.className, account.className])
+        .toEqual([true, 'mint-topbar__settings-btn', 'account'])
     })
 
     it('should render without SettingsModal by default', () => {
@@ -118,12 +123,15 @@ describe('AppTopBar', () => {
   })
 
   describe('spec.themeToggle', () => {
-    it('should not render ThemeToggle when spec.themeToggle is false', () => {
+    it('should ignore a deprecated spec.themeToggle false and warn about it', () => {
+      const warn = vi.spyOn(console, 'warn').mockImplementation(() => {})
       const wrapper = createWrapper({
         spec: { themeToggle: false },
         title: 'Test App',
       })
-      expect(wrapper.findComponent(ThemeToggle).exists()).toBe(false)
+      expect(wrapper.findComponent(ThemeToggle).exists()).toBe(true)
+      expect(warn).toHaveBeenCalledWith(expect.stringContaining('spec.themeToggle is ignored'))
+      warn.mockRestore()
     })
 
     it('should render ThemeToggle when spec.themeToggle is true', () => {
@@ -155,12 +163,14 @@ describe('AppTopBar', () => {
   })
 
   describe('spec.settings', () => {
-    it('should not render settings button when spec.settings is false', () => {
+    it('should open an appearance-only modal when spec.settings is false', async () => {
       const wrapper = createWrapper({
         spec: { settings: false },
         title: 'Test App',
       })
-      expect(wrapper.find('.mint-topbar__settings-btn').exists()).toBe(false)
+
+      const settingsModal = await openSettingsModal(wrapper)
+      expect([settingsModal.props('tabs'), settingsModal.props('showAppearance')]).toEqual([[], true])
     })
 
     it('should render settings button when spec.settings is set', () => {
@@ -181,7 +191,8 @@ describe('AppTopBar', () => {
       canConfigure.value = false
       await wrapper.vm.$nextTick()
 
-      expect(wrapper.find('.mint-topbar__settings-btn').exists()).toBe(false)
+      expect(wrapper.find('.mint-topbar__settings-btn').exists()).toBe(true)
+      expect((await openSettingsModal(wrapper)).props('tabs')).toEqual([])
     })
 
     it('should render SettingsModal after settings is opened', async () => {
@@ -782,8 +793,8 @@ describe('AppTopBar', () => {
       })
 
       expect(wrapper.find('.mint-topbar').exists()).toBe(true)
-      expect(wrapper.findComponent(ThemeToggle).exists()).toBe(false)
-      expect(wrapper.find('.mint-topbar__settings-btn').exists()).toBe(false)
+      expect(wrapper.findComponent(ThemeToggle).exists()).toBe(true)
+      expect(wrapper.find('.mint-topbar__settings-btn').exists()).toBe(true)
       // Standalone badge still shows by default in standalone mode
       expect(wrapper.find('.mint-topbar__standalone-badge').exists()).toBe(true)
     })
@@ -1483,16 +1494,17 @@ describe('AppTopBar', () => {
     })
 
     it('should update the toast offset when the top bar resizes', () => {
-      let onResize: (() => void) | undefined
+      // Every observer of the bar hears the resize (toast offset and label fit).
+      const callbacks: (() => void)[] = []
       vi.stubGlobal('ResizeObserver', class {
-        constructor(callback: () => void) { onResize = callback }
+        constructor(callback: () => void) { callbacks.push(callback) }
         observe() {}
         unobserve() {}
         disconnect() {}
       })
       createWrapper({ title: 'Test App' })
       rects['Test App'] = { top: 16, bottom: 120 }
-      onResize?.()
+      callbacks.forEach(callback => callback())
 
       expect(toastOffset()).toBe('calc(120px + 1rem)')
     })
@@ -1654,8 +1666,8 @@ describe('AppTopBar', () => {
     })
 
     it.each([
-      [null, undefined, null, undefined],
-      [null, 0, null, undefined],
+      [null, undefined, null, 'Jobs'],
+      [null, 0, null, 'Jobs'],
       [null, 2, '2', 'Jobs, 2 completed'],
       [running, 2, null, 'Extracting 40%'],
     ])('should show the completed count only on the idle button when the job is %o and jobsDone %s', async (job, jobsDone, count, name) => {
@@ -1688,4 +1700,74 @@ describe('AppTopBar', () => {
       expect(wrapper.emitted('job-click')).toEqual([[]])
     })
   })
+
+  describe('spec.actions', () => {
+    it('should show two actions and fold the rest into the More menu', async () => {
+      const onSelect = vi.fn()
+      const wrapper = createWrapper({
+        title: 'Test App',
+        spec: {
+          actions: [
+            { id: 'status', label: 'Database status', icon: 'database', dot: 'success', onSelect: () => {} },
+            { id: 'export', label: 'Export', onSelect: () => {} },
+            { id: 'reindex', label: 'Reindex', onSelect },
+          ],
+        },
+      })
+
+      const context = wrapper.get('.mint-topbar__context')
+      expect([
+        context.get('[data-action="status"]').attributes('aria-label'),
+        context.find('[data-action="status"] .mint-topbar__icon-btn-dot--success').exists(),
+        context.get('[data-action="export"]').text(),
+        context.find('[data-action="reindex"]').exists(),
+      ]).toEqual(['Database status', true, 'Export', false])
+
+      await context.get('.mint-action-menu button').trigger('click')
+      await flushPromises()
+      await wrapper.findComponent({ name: 'ActionMenu' }).vm.$emit('select', { id: 'reindex', label: 'Reindex' })
+      expect(onSelect).toHaveBeenCalledOnce()
+    })
+  })
+
+  describe('narrow layout', () => {
+    it.each([
+      [{}, false],
+      [{ pills: [{ id: 'a', label: 'A' }] }, true],
+      [{ actions: [{ id: 'export', label: 'Export', onSelect: () => {} }] }, true],
+    ])('should make the bar stackable with spec %o: %s', (spec, stackable) => {
+      const wrapper = createWrapper({ title: 'Test App', spec: { ...spec, standaloneLabel: false } })
+
+      expect(wrapper.get('.mint-topbar__container').classes('mint-topbar__container--stackable')).toBe(stackable)
+    })
+
+    it('should hold the drawer button of a responsive AppLayout with a sidebar', async () => {
+      const wrapper = mount(AppLayout, {
+        props: { responsiveSidebar: true },
+        slots: {
+          topbar: () => h(AppTopBar, { title: 'Test App' }),
+          sidebar: () => h('aside', 'tools'),
+        },
+        global: { plugins: [createPinia()] },
+      })
+
+      const toggle = wrapper.get('.mint-topbar__sidebar-toggle')
+      await toggle.trigger('click')
+
+      expect([toggle.attributes('aria-expanded'), wrapper.classes('mint-layout--sidebar-open')]).toEqual(['true', true])
+    })
+
+    it('should render a Lucide page icon by name', async () => {
+      // Under vitest the icon index loads module by module (about 2 s), longer than waitFor's 1 s.
+      await loadLucideIcon('activity')
+      const wrapper = createWrapper({
+        pageSelector: [
+          { id: 'monitor', label: 'Monitor', icon: 'activity' },
+          { id: 'planner', label: 'Planner' },
+        ],
+        currentPageSelectorId: 'monitor',
+      })
+      await vi.waitFor(() => expect(wrapper.find('.mint-page-selector__trigger svg.lucide-activity-icon, .mint-page-selector__trigger svg.lucide-activity').exists()).toBe(true))
+    }, 30_000)
+  })
 })