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

package/src/components/ActionMenu.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 /** Compact overflow actions with an icon-only BaseButton trigger and a viewport-safe teleported menu. */
-import { computePosition, flip, offset, shift } from '@floating-ui/dom'
 import { Check, Ellipsis } from 'lucide-vue-next'
-import { nextTick, onMounted, ref, watch } from 'vue'
+import { nextTick, onMounted, ref } from 'vue'
 import { useDropdownState } from '../composables/useDropdownState'
+import { useFloatingPanel } from '../composables/useFloatingPanel'
 import { useMenuKeyboard } from '../composables/useMenuKeyboard'
 import type { ActionMenuItem } from '../types/components'
 import BaseButton from './BaseButton.vue'
@@ -30,19 +30,15 @@ defineSlots<{
 }>()
 
 const panelRef = ref<HTMLElement | null>(null)
-const panelStyle = ref<Record<string, string>>({ visibility: 'hidden' })
 
-// Disclosure state (outside-click, Escape, scroll/resize closing, focus return)
-// comes from the shared composable; only floating-ui placement stays local.
+// Disclosure state (outside-click, Escape, focus return) and placement come from
+// the shared composables; the open menu follows its trigger on scroll.
 const { isOpen, rootRef, triggerRef, open, close } = useDropdownState({
-  closeOnScroll: true,
   insideRefs: [panelRef],
-  onOpen: () => {
-    panelStyle.value = { visibility: 'hidden' }
-    emit('open')
-  },
+  onOpen: () => emit('open'),
   onClose: () => emit('close'),
 })
+const { style: panelStyle } = useFloatingPanel(triggerRef, panelRef, isOpen, { placement: 'bottom-end' })
 
 // BaseButton owns the actual <button>, so the trigger element is resolved from
 // the wrapper once mounted rather than bound with a template ref.
@@ -57,27 +53,6 @@ function menuItems(): HTMLElement[] {
   )
 }
 
-async function positionPanel() {
-  const trigger = triggerRef.value
-  const panel = panelRef.value
-  if (!trigger || !panel) return
-
-  const position = await computePosition(trigger, panel, {
-    placement: 'bottom-end',
-    strategy: 'fixed',
-    middleware: [
-      offset(4),
-      flip(),
-      shift({ padding: 8 }),
-    ],
-  })
-  panelStyle.value = {
-    left: `${position.x}px`,
-    top: `${position.y}px`,
-    visibility: 'visible',
-  }
-}
-
 /** `focusFirst` is false when the keyboard composable owns the initial focus. */
 function openMenu(focusFirst = true) {
   if (props.disabled || isOpen.value) return
@@ -105,12 +80,6 @@ function handleSelect(item: ActionMenuItem) {
   emit('select', item)
   close()
 }
-
-watch(isOpen, async (opened) => {
-  if (!opened) return
-  await nextTick()
-  await positionPanel()
-})
 </script>
 
 <template>

package/src/components/AppTopBar.onboarding.story.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import { defineComponent, h, ref } from 'vue'
+import AppTopBar from './AppTopBar.vue'
+import BaseButton from './BaseButton.vue'
+import { defineOnboarding, provideOnboarding, useOnboarding } from '../composables/useOnboarding'
+import type { PillNavItem } from '../types'
+
+const pills: PillNavItem[] = [
+  { id: 'home', label: 'Home' },
+  { id: 'experiments', label: 'Experiments' },
+  { id: 'instruments', label: 'Instruments' },
+]
+
+const onboarding = defineOnboarding({
+  tours: [
+    {
+      id: 'intro',
+      title: 'The top bar',
+      steps: [
+        { id: 'pages', anchor: 'topbar-pills', title: 'Move between pages', body: 'Home, Experiments and Instruments are one click away on every page.' },
+        { id: 'new', anchor: 'story-new', title: 'Create an experiment', body: 'Click New experiment to go on.', placement: 'bottom-start', advanceOn: 'click' },
+        { id: 'help', anchor: 'topbar-help', title: 'Help', body: 'Open the checklist, play a tour again, or see what is new.', placement: 'bottom-end' },
+      ],
+    },
+  ],
+  checklist: [
+    { id: 'create', title: 'Create an experiment', action: { label: 'Open', run: () => {} } },
+    { id: 'project', title: 'Create a project', action: { label: 'Open', run: () => {} } },
+    { id: 'theme', title: 'Pick a theme' },
+  ],
+  whatsNew: [
+    { id: 'settings', anchor: 'topbar-settings', title: 'Palettes in Settings', body: 'Pick an accent color in Settings → Appearance.', placement: 'bottom-end' },
+  ],
+})
+
+// The stories are returning users with no state yet, so the news shows too.
+const OnboardingProvider = defineComponent({
+  props: { appId: { type: String, required: true }, news: Boolean },
+  setup(props, { slots }) {
+    const key = `mint.onboarding.${props.appId}.local`
+    if (props.news && localStorage.getItem(key) === null) localStorage.setItem(key, '["task:theme"]')
+    provideOnboarding(onboarding, { appId: props.appId, userId: 'local' })
+    return () => slots.default?.()
+  },
+})
+
+const PageBody = defineComponent({
+  setup() {
+    const state = useOnboarding()
+    return () => h('div', { style: 'padding: 1.5rem; display: flex; gap: 0.5rem' }, [
+      h(BaseButton, { 'data-onboarding': 'story-new', onClick: () => state?.complete('create') }, () => 'New experiment'),
+      h(BaseButton, { variant: 'secondary', onClick: () => { localStorage.clear(); location.reload() } }, () => 'Reset onboarding'),
+    ])
+  },
+})
+
+const pill = ref('home')
+</script>
+
+<template>
+  <Story title="Layout/AppTopBar/Onboarding" :layout="{ type: 'single', iframe: true }">
+    <Variant title="Tour, checklist and news">
+      <OnboardingProvider app-id="story-onboarding" news>
+        <AppTopBar v-model:pill="pill" :spec="{ pills, settings: { tabs: [] }, standaloneLabel: false }" title="MINT" />
+        <PageBody />
+      </OnboardingProvider>
+    </Variant>
+  </Story>
+</template>

package/src/components/AppTopBar.story.vue

@@ -4,14 +4,26 @@ import Avatar from './Avatar.vue'
 import PluginIcon from './PluginIcon.vue'
 import { ExperimentProvider } from '../__stories__/experiment-helpers'
 import { providePluginIdentity } from '../composables/pluginIdentity'
-import type { App } from 'vue'
+import { ref, type App } from 'vue'
 import type {
   TopBarVariant,
   PillNavItem,
   PageSelectorItem,
   PluginInfo,
+  TopBarJob,
 } from '../types'
 
+const runSlotJobs: { label: string; job: TopBarJob | null }[] = [
+  { label: 'Idle', job: null },
+  { label: 'Running', job: { status: 'running', label: 'Extracting', percent: 40 } },
+  { label: 'Needs input', job: { status: 'awaiting_input', label: 'Decoding', percent: 62 } },
+  { label: 'Saved', job: { status: 'completed', label: 'Saved to EXP-0142' } },
+  { label: 'Failed', job: { status: 'failed', label: '1 failed' } },
+]
+
+// An index, not the job object: Histoire merges object state across updates.
+const liveRow = ref(0)
+
 const variants: TopBarVariant[] = ['card', 'default']
 
 const samplePillNav: PillNavItem[] = [
@@ -43,10 +55,12 @@ const samplePageSelector: PageSelectorItem[] = [
   { id: 'admin', label: 'Admin' },
 ]
 
+// The menu shows each hint as a second line; a page without one stays a single line.
 const samplePluginPages: PageSelectorItem[] = [
-  { id: 'peaks', label: 'Peak integration' },
-  { id: 'calibration', label: 'Calibration' },
-  { id: 'report', label: 'Report' },
+  { id: 'peaks', label: 'Peak integration', hint: 'Integrate peaks and review the fits per sample' },
+  { id: 'calibration', label: 'Calibration', hint: 'Fit standard curves and check their residuals' },
+  { id: 'report', label: 'Report', hint: 'Export concentrations for the experiment' },
+  { id: 'settings', label: 'Settings' },
 ]
 
 const samplePlugin: PluginInfo = {
@@ -147,6 +161,47 @@ function seedIdentity({ app }: { app: App }) {
       </div>
     </Variant>
 
+    <Variant title="Run slot · Experiment and job">
+      <!-- The plugin picks the viewer's own job; the bar joins it to the experiment chip. Like LEAF Extract: no Save. -->
+      <div style="padding: 2rem; background: var(--bg-primary); display: grid; gap: 0.75rem;">
+        <ExperimentProvider :plugin="samplePlugin" :save="false">
+          <AppTopBar
+            v-for="row in runSlotJobs"
+            :key="row.label"
+            :spec="{ themeToggle: true, homePath: '' }"
+            :page-selector="samplePluginPages"
+            current-page-selector-id="peaks"
+            :job="row.job"
+          />
+        </ExperimentProvider>
+      </div>
+    </Variant>
+
+    <Variant title="Run slot · Animation">
+      <div style="padding: 2rem; background: var(--bg-primary); display: grid; gap: 0.75rem;">
+        <div style="display: flex; gap: 0.5rem;">
+          <button
+            v-for="(row, index) in runSlotJobs"
+            :key="row.label"
+            type="button"
+            data-run-slot-state
+            style="padding: 0.25rem 0.75rem; border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--bg-card); color: var(--text-primary); cursor: pointer;"
+            @click="liveRow = index"
+          >
+            {{ row.label }}
+          </button>
+        </div>
+        <ExperimentProvider :plugin="samplePlugin" :save="false">
+          <AppTopBar
+            :spec="{ themeToggle: true, homePath: '' }"
+            :page-selector="samplePluginPages"
+            current-page-selector-id="peaks"
+            :job="runSlotJobs[liveRow].job"
+          />
+        </ExperimentProvider>
+      </div>
+    </Variant>
+
     <Variant title="Refresh · Admin">
       <div style="padding: 2rem; background: var(--bg-primary); min-height: 12rem;">
         <AppTopBar

package/src/components/AppTopBar.vue

@@ -4,7 +4,7 @@
  *
  * The `#icon` slot applies in standalone mode only; integrated branding comes from `Metadata.icon`.
  */
-import { ref, computed, inject, defineAsyncComponent, onMounted, onBeforeUnmount, toValue, useSlots, watch } from 'vue'
+import { ref, computed, inject, defineAsyncComponent, onMounted, onBeforeUnmount, toValue, useSlots, watch, type Component } from 'vue'
 import type {
   PillNavOption,
   PillNavItem,
@@ -19,12 +19,17 @@ import { applySpecDefaults } from '../composables/componentSpecs'
 import ThemeToggle from './ThemeToggle.vue'
 import AppTopBarPageSelectorInternal from './internal/AppTopBarPageSelectorInternal.vue'
 import AppTopBarPillNavInternal from './internal/AppTopBarPillNavInternal.vue'
+import AppTopBarOnboardingInternal from './internal/AppTopBarOnboardingInternal.vue'
 import PluginIcon from './PluginIcon.vue'
 import { usePlatform } from '../composables/usePlatform'
 import { APP_EXPERIMENT_KEY } from '../composables/useAppExperiment'
+import { useOnboarding } from '../composables/useOnboarding'
 import { pluginIdentity } from '../composables/pluginIdentity'
 import { integrationHost } from '../utils/integrationHost'
 import { trackTopBarForToasts } from './AppTopBar.toastOffset'
+import { CircleAlert, CircleCheck, CircleX, ListChecks, LoaderCircle } from 'lucide-vue-next'
+import type { JobStatus, TopBarJob } from '../types/jobs'
+import type { Tone } from '../types/components'
 
 interface Props {
   /** App or plugin title shown in the left title group when no page selector is present. */
@@ -39,10 +44,23 @@ interface Props {
   pageSelector?: PageSelectorItemInput[]
   /** Active id of the platform page selector. */
   currentPageSelectorId?: string
+  /**
+   * The viewer's own job, joined to the experiment chip. Omit it for no jobs control;
+   * `null` shows the idle Jobs button. Both emit `job-click`.
+   */
+  job?: TopBarJob | null
+  /** Completed jobs, shown as a small count on the idle Jobs button. Hidden when 0. */
+  jobsDone?: number
+  /** Whether the jobs panel is open; `aria-expanded` of the job control. */
+  jobsOpen?: boolean
+  /** DOM id of the jobs panel; `aria-controls` of the job control. */
+  jobsPanelId?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
   spec: () => ({}),
+  // No boolean cast: without a jobs panel the control has no aria-expanded.
+  jobsOpen: undefined,
 })
 
 const config = computed(() => applySpecDefaults({
@@ -66,6 +84,7 @@ const emit = defineEmits<{
   'pill-select': [item: PillNavItem]
   'pill-option-select': [option: PillNavOption, item: PillNavItem]
   'settings-values-change': [data: Record<string, unknown>]
+  'job-click': []
 }>()
 
 const settingsOpen = ref(false)
@@ -78,7 +97,46 @@ onBeforeUnmount(() => untrackToastOffset?.())
 const { integrated: isIntegrated, plugin } = usePlatform()
 const isStandalone = computed(() => !isIntegrated.value)
 const appExperiment = inject(APP_EXPERIMENT_KEY, null)
+const onboarding = useOnboarding()
 const canBindExperiment = computed(() => plugin.value?.plugin_type !== 'static')
+const showExperiment = computed(() => !!appExperiment && !isStandalone.value && canBindExperiment.value)
+// The border joins only once the job is on screen and stays until it has left,
+// so the name and the job never show at the same time.
+const runSlotJoined = ref(!!props.job)
+const JOB_STATUS_TEXT: Record<JobStatus, string> = {
+  queued: 'Job queued',
+  running: 'Job running',
+  awaiting_input: 'Job needs input',
+  completed: 'Job completed',
+  failed: 'Job failed',
+  cancelled: 'Job cancelled',
+}
+const jobPercent = computed(() =>
+  props.job?.percent == null ? null : Math.min(100, Math.max(0, Math.round(props.job.percent))),
+)
+const jobName = computed(() => props.job
+  ? (jobPercent.value != null ? `${props.job.label} ${jobPercent.value}%` : props.job.label)
+  : undefined)
+function syncRunSlotJoined() {
+  runSlotJoined.value = !!props.job
+}
+
+const JOB_TONES: Record<JobStatus, Tone> = {
+  queued: 'primary',
+  running: 'primary',
+  awaiting_input: 'warning',
+  completed: 'success',
+  failed: 'error',
+  cancelled: 'neutral',
+}
+const JOB_ICONS: Record<JobStatus, Component> = {
+  queued: LoaderCircle,
+  running: LoaderCircle,
+  awaiting_input: CircleAlert,
+  completed: CircleCheck,
+  failed: CircleX,
+  cancelled: CircleX,
+}
 
 const slots = useSlots()
 // Standalone: the seeded identity (providePluginIdentity) stands in for a missing icon and title.
@@ -103,6 +161,10 @@ watch(platformPageSelectorEl, (element, _previous, onCleanup) => {
 const identityName = computed(() =>
   isIntegrated.value && !hasPageSelector.value ? plugin.value?.display_name || plugin.value?.name : undefined,
 )
+/** The page selector crumb reads "<plugin> / <page>". */
+const pageSelectorPluginName = computed(() =>
+  isIntegrated.value ? plugin.value?.display_name || plugin.value?.name : props.title || pluginIdentity.name,
+)
 // Platforms before 1.4 send no subtitle; the description fills line 2.
 const identitySubtitle = computed(() => plugin.value?.subtitle || plugin.value?.description)
 const hasPillNav = computed(() => !!config.value.pills?.length)
@@ -244,11 +306,13 @@ const normalizedSettingsTabs = computed<SettingsTab[]>(() =>
         </span>
 
         <!-- Left: page selector (the platform integration script renders the nav_items one) -->
-        <span v-if="hasPlatformPageSelector" ref="platformPageSelectorEl" class="mint-topbar__platform-page-selector" />
+        <span v-if="hasPlatformPageSelector" ref="platformPageSelectorEl" class="mint-topbar__platform-page-selector" data-onboarding="topbar-page-selector" />
         <AppTopBarPageSelectorInternal
           v-else-if="hasPropPageSelector"
+          data-onboarding="topbar-page-selector"
           :pages="normalizedPageSelector"
           :current-page-id="currentPageSelectorId"
+          :plugin-name="pageSelectorPluginName"
           @select="emit('page-selector-select', $event)"
         >
           <template v-if="$slots['page-selector-icon']" #icon="slotProps">
@@ -272,7 +336,7 @@ const normalizedSettingsTabs = computed<SettingsTab[]>(() =>
       </div>
 
       <!-- Center: pill nav -->
-      <div v-if="hasPillNav || $slots.center" class="mint-topbar__center">
+      <div v-if="hasPillNav || $slots.center" class="mint-topbar__center" data-onboarding="topbar-pills">
         <slot name="center">
           <AppTopBarPillNavInternal
             v-if="hasPillNav"
@@ -290,16 +354,73 @@ const normalizedSettingsTabs = computed<SettingsTab[]>(() =>
           {{ config.standaloneLabel }}
         </span>
 
-        <ExperimentPopover
-          v-if="appExperiment && !isStandalone && canBindExperiment"
-          v-bind="appExperiment.popover.value"
-          @select="appExperiment.openModal()"
-          @save="appExperiment.handleSave()"
-          @detach="appExperiment.handleDetach()"
-        />
+        <!-- Run slot: while a job shows, its progress takes the place of the experiment name and Save:
+             [ EXP-0142 ▾ | job ]. The idle Jobs button stands apart. -->
+        <div
+          v-if="showExperiment || job !== undefined || runSlotJoined"
+          :class="['mint-topbar__run-slot', { 'mint-topbar__run-slot--joined': runSlotJoined }]"
+          data-onboarding="topbar-run"
+        >
+          <ExperimentPopover
+            v-if="showExperiment && appExperiment"
+            v-bind="job ? { ...appExperiment.popover.value, showSave: false } : appExperiment.popover.value"
+            @select="appExperiment.openModal()"
+            @save="appExperiment.handleSave()"
+            @detach="appExperiment.handleDetach()"
+          />
+          <!-- Status words only, so a moving percent does not repeat. -->
+          <span class="mint-topbar__job-status" aria-live="polite">{{ job ? JOB_STATUS_TEXT[job.status] : '' }}</span>
+          <!-- appear: the slot can mount together with its first job; before-enter then joins it. -->
+          <Transition
+            name="mint-topbar-job"
+            mode="out-in"
+            appear
+            @before-enter="syncRunSlotJoined"
+            @after-leave="syncRunSlotJoined"
+          >
+            <button
+              v-if="job"
+              key="run"
+              type="button"
+              :class="['mint-topbar__job', `mint-topbar__job--${JOB_TONES[job.status]}`]"
+              :title="jobName"
+              :aria-label="jobName"
+              :aria-expanded="jobsOpen"
+              :aria-controls="jobsPanelId"
+              @click="emit('job-click')"
+            >
+              <component
+                :is="JOB_ICONS[job.status]"
+                :class="['mint-topbar__job-icon', { 'mint-topbar__job-icon--spin': job.status === 'running' || job.status === 'queued' }]"
+                :size="14"
+                aria-hidden="true"
+              />
+              <span v-if="jobPercent != null" class="mint-topbar__job-bar" aria-hidden="true">
+                <span :style="{ width: `${jobPercent}%` }" />
+              </span>
+            </button>
+            <button
+              v-else-if="job === null"
+              key="idle"
+              type="button"
+              class="mint-topbar__job mint-topbar__job--idle"
+              :aria-label="jobsDone ? `Jobs, ${jobsDone} completed` : undefined"
+              :aria-expanded="jobsOpen"
+              :aria-controls="jobsPanelId"
+              @click="emit('job-click')"
+            >
+              <ListChecks class="mint-topbar__job-icon" :size="14" aria-hidden="true" />
+              <span class="mint-topbar__job-label">Jobs</span>
+              <span v-if="jobsDone" class="mint-topbar__job-count" aria-hidden="true">{{ jobsDone }}</span>
+            </button>
+          </Transition>
+        </div>
 
         <slot name="actions" />
 
+        <!-- Onboarding: checklist chip, Help button and tour layer, when the app provides onboarding -->
+        <AppTopBarOnboardingInternal v-if="onboarding?.enabled.value" :state="onboarding" />
+
         <!-- Theme toggle -->
         <ThemeToggle v-if="config.themeToggle" size="sm" />
 
@@ -309,6 +430,7 @@ const normalizedSettingsTabs = computed<SettingsTab[]>(() =>
           type="button"
           class="mint-topbar__settings-btn"
           aria-label="Open settings"
+          data-onboarding="topbar-settings"
           @click="settingsOpen = true"
         >
           <svg class="mint-topbar__settings-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">

package/src/components/BaseButton.vue

@@ -10,7 +10,7 @@
  * <BaseButton variant="ghost" :icon="Trash2" label="Delete" />
  * ```
  */
-import { computed, useSlots, type Component } from 'vue'
+import { Comment, Fragment, Text, computed, useSlots, type Component, type VNode } from 'vue'
 import type { ButtonVariant, ButtonSize } from '../types'
 
 interface Props {
@@ -45,6 +45,19 @@ const slots = useSlots()
 const iconOnly = computed(() => Boolean(props.icon) && !slots.default)
 const block = computed(() => (iconOnly.value ? 'mint-icon-button' : 'mint-button'))
 
+// A text-only label gets its own span so the stylesheet can centre the cap height.
+// Element children are left as flex items, so their gap and alignment do not change.
+function isTextNode(node: VNode): boolean {
+  if (node.type === Text || node.type === Comment) return true
+  return node.type === Fragment && Array.isArray(node.children)
+    && (node.children as VNode[]).every(isTextNode)
+}
+
+function hasTextLabel(): boolean {
+  const nodes = slots.default?.()
+  return !!nodes && nodes.length > 0 && nodes.every(isTextNode)
+}
+
 function handleClick(event: MouseEvent) {
   if (!props.disabled && !props.loading) {
     emit('click', event)
@@ -93,7 +106,8 @@ function handleClick(event: MouseEvent) {
     <template v-if="!iconOnly">
       <component :is="icon" v-if="icon" class="mint-button__icon" aria-hidden="true" />
       <slot name="icon-left" />
-      <slot />
+      <span v-if="hasTextLabel()" class="mint-button__label"><slot /></span>
+      <slot v-else />
       <slot name="icon-right" />
     </template>
   </button>

package/src/components/BaseModal.vue

@@ -107,8 +107,9 @@ watch(() => props.open, (isOpen) => {
   if (!isOpen && index !== -1) openModals.splice(index, 1)
 }, { immediate: true })
 
+// A control inside the modal that handles Escape (an open select) prevents the default first.
 function handleEscapeKeydown(event: KeyboardEvent) {
-  if (event.key === 'Escape' && props.closeOnEscape && props.open && openModals[openModals.length - 1] === self) {
+  if (event.key === 'Escape' && !event.defaultPrevented && props.closeOnEscape && props.open && openModals[openModals.length - 1] === self) {
     close()
   }
 }

package/src/components/ExperimentSelectorModal.story.vue

@@ -268,6 +268,7 @@ onMounted(async () => {
 
 // -- Story state --
 const isOpen = ref(false)
+const isOpenRun = ref(false)
 const isOpenEmpty = ref(false)
 const isOpenWithSelection = ref(false)
 const isOpenFilters = ref(false)
@@ -363,6 +364,43 @@ const selectedExperiment = computed(() => experimentStore.current)
       </div>
     </Variant>
 
+    <Variant title="Run Destination (slots)">
+      <div style="padding: 2rem;">
+        <p style="font-size: 0.8125rem; color: var(--text-muted, #94a3b8); margin: 0 0 1rem;">
+          A plugin asks where to save a run: the description slot explains why, and the footer slot adds Skip with close().
+        </p>
+        <button
+          style="padding: 0.5rem 1rem; background: var(--color-primary); color: var(--text-on-accent); border: none; border-radius: var(--radius-md); cursor: pointer; font-size: 0.875rem;"
+          @click="isOpenRun = true"
+        >
+          Run extraction
+        </button>
+
+        <ExperimentSelectorModal
+          v-model:open="isOpenRun"
+          title="Save the result to an experiment?"
+        >
+          <template #description>
+            Pick an experiment to save this run as a new artifact in it, next to the samples it belongs to.
+          </template>
+          <template #footer="{ close }">
+            <div style="display: flex; align-items: center; gap: 0.75rem;">
+              <span style="flex: 1; font-size: 0.75rem; color: var(--text-secondary);">
+                Skip: the result stays in the plugin. You can save it to an experiment later.
+              </span>
+              <button
+                type="button"
+                style="height: 2rem; padding: 0 0.75rem; border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--bg-card); color: var(--text-primary); cursor: pointer;"
+                @click="close"
+              >
+                Skip
+              </button>
+            </div>
+          </template>
+        </ExperimentSelectorModal>
+      </div>
+    </Variant>
+
     <Variant title="Empty State">
       <div style="padding: 2rem;">
         <p style="font-size: 0.8125rem; color: var(--text-muted, #94a3b8); margin: 0 0 1rem;">

package/src/components/ExperimentSelectorModal.vue

@@ -40,6 +40,17 @@ const emit = defineEmits<{
   'update:open': [value: boolean]
 }>()
 
+defineSlots<{
+  /** Text above the experiment list: why the caller asks for an experiment. */
+  description?: () => unknown
+  /** Extra footer content, before Clear selection. `close()` closes the modal without a selection. */
+  footer?: (props: { close: () => void }) => unknown
+}>()
+
+function close() {
+  emit('update:open', false)
+}
+
 const experimentStore = useExperimentStore()
 
 const {
@@ -188,6 +199,10 @@ watch(
     :size="size"
     @update:open="emit('update:open', $event)"
   >
+    <div v-if="$slots.description" class="mint-experiment-selector__description">
+      <slot name="description" />
+    </div>
+
     <ResourcePickerListInternal
       :key="openCount"
       :search="filters.search ?? ''"
@@ -257,8 +272,12 @@ watch(
       </template>
     </ResourcePickerListInternal>
 
-    <div v-if="currentExperimentId != null" class="mint-experiment-selector__footer">
+    <div v-if="$slots.footer || currentExperimentId != null" class="mint-experiment-selector__footer">
+      <div v-if="$slots.footer" class="mint-experiment-selector__footer-slot">
+        <slot name="footer" :close="close" />
+      </div>
       <button
+        v-if="currentExperimentId != null"
         type="button"
         class="mint-experiment-selector__clear-btn"
         @click="handleDeselect"

package/src/components/GeneratedPluginView.vue

@@ -12,11 +12,11 @@ import { computed, onMounted, provide, reactive, ref, watch } from 'vue'
 import { generatedJobDefaults, generatedJobFormSchema, normalizeGeneratedJobInput } from '../generated/schema'
 import type { FormSchema } from '../types/form-builder'
 import type {
-  GeneratedAnalysisJob,
   GeneratedAnalysisResult,
   GeneratedJobDefinition,
 } from '../types/generated-ui'
 import type { PillNavItem, SidebarToolSection } from '../types'
+import type { JobState } from '../types/jobs'
 import {
   useJobsEndpoint,
   type GeneratedAnalysisTransport,
@@ -24,7 +24,6 @@ import {
 import AlertBox from './AlertBox.vue'
 import EmptyState from './EmptyState.vue'
 import GeneratedResultRenderer from './GeneratedResultRenderer.vue'
-import JobsStatusTray from './JobsStatusTray.vue'
 import LoadingSpinner from './LoadingSpinner.vue'
 import PluginWorkspaceView from './PluginWorkspaceView.vue'
 import { GENERATED_JOBS_API_KEY } from './internal/generatedJobsApi'
@@ -84,6 +83,7 @@ const workspace = computed(() => definePluginWorkspaceView({
     standaloneLabel: props.showStandaloneLabel ? 'Standalone' : false,
   },
   sidebar: { title: 'Parameters', panels: panels.value, forms: forms.value },
+  jobs: generated,
 }))
 
 // Seeds the standalone top bar icon; the title and subtitle above win over the seeded text.
@@ -137,7 +137,7 @@ async function submitJob(sectionId: string, values: Record<string, unknown>): Pr
   await generated.submit(definition.id, normalizeGeneratedJobInput(definition, values))
 }
 
-function selectJob(job: GeneratedAnalysisJob): void {
+function selectJob(job: JobState): void {
   selectedJobId.value = job.job_id
   activeDefinitionId.value = String(job.metadata.definition_id ?? activeDefinitionId.value)
 }
@@ -166,6 +166,7 @@ onMounted(() => {
     :form-disabled="generated.isSubmitting.value"
     @update:values="updateValues"
     @form-submit="submitJob"
+    @job-select="selectJob"
   >
     <main class="mint-generated-workspace">
       <div v-if="generated.isLoading.value" class="mint-generated-workspace__loading">
@@ -200,12 +201,6 @@ onMounted(() => {
           />
         </section>
       </template>
-
-      <JobsStatusTray
-        :source="generated"
-        :teleport-to="false"
-        @select="selectJob"
-      />
     </main>
   </PluginWorkspaceView>
 </template>