@morscherlab/mint-sdk 1.4.0-beta.2 → 1.4.0-beta.21

package/src/components/FormField.story.vue

@@ -15,12 +15,7 @@ import BaseInput from './BaseInput.vue'
             :required="state.required"
             :html-for="state.htmlFor"
           >
-            <input
-              :id="state.htmlFor"
-              type="text"
-              placeholder="Enter value..."
-              style="width: 100%; padding: 0.5rem 0.75rem; border: 1px solid var(--border-color, #e2e8f0); border-radius: 0.375rem; font-size: 0.875rem; background: var(--bg-primary, #fff); color: var(--text-primary, #1e293b); box-sizing: border-box;"
-            />
+            <BaseInput :id="state.htmlFor" placeholder="Enter value..." />
           </FormField>
         </div>
       </template>
@@ -39,12 +34,7 @@ import BaseInput from './BaseInput.vue'
     <Variant title="With Label">
       <div style="padding: 2rem; max-width: 400px; margin: 0 auto;">
         <FormField label="Sample Name" html-for="sample-name">
-          <input
-            id="sample-name"
-            type="text"
-            placeholder="e.g., SAMPLE-001"
-            style="width: 100%; padding: 0.5rem 0.75rem; border: 1px solid var(--border-color, #e2e8f0); border-radius: 0.375rem; font-size: 0.875rem; background: var(--bg-primary, #fff); color: var(--text-primary, #1e293b); box-sizing: border-box;"
-          />
+          <BaseInput id="sample-name" placeholder="e.g., SAMPLE-001" />
         </FormField>
       </div>
     </Variant>
@@ -52,12 +42,7 @@ import BaseInput from './BaseInput.vue'
     <Variant title="Required Field">
       <div style="padding: 2rem; max-width: 400px; margin: 0 auto;">
         <FormField label="Experiment ID" :required="true" html-for="exp-id">
-          <input
-            id="exp-id"
-            type="text"
-            placeholder="Required field"
-            style="width: 100%; padding: 0.5rem 0.75rem; border: 1px solid var(--border-color, #e2e8f0); border-radius: 0.375rem; font-size: 0.875rem; background: var(--bg-primary, #fff); color: var(--text-primary, #1e293b); box-sizing: border-box;"
-          />
+          <BaseInput id="exp-id" placeholder="Required field" />
         </FormField>
       </div>
     </Variant>
@@ -65,12 +50,7 @@ import BaseInput from './BaseInput.vue'
     <Variant title="With Hint">
       <div style="padding: 2rem; max-width: 400px; margin: 0 auto;">
         <FormField label="Concentration" hint="Enter value in micromolar (uM)" html-for="conc">
-          <input
-            id="conc"
-            type="number"
-            placeholder="0.00"
-            style="width: 100%; padding: 0.5rem 0.75rem; border: 1px solid var(--border-color, #e2e8f0); border-radius: 0.375rem; font-size: 0.875rem; background: var(--bg-primary, #fff); color: var(--text-primary, #1e293b); box-sizing: border-box;"
-          />
+          <BaseInput id="conc" inputmode="decimal" placeholder="0.00" />
         </FormField>
       </div>
     </Variant>
@@ -78,12 +58,7 @@ import BaseInput from './BaseInput.vue'
     <Variant title="With Error">
       <div style="padding: 2rem; max-width: 400px; margin: 0 auto;">
         <FormField label="Plate Barcode" error="Barcode format is invalid. Expected: PLT-XXXX-XXXX" html-for="barcode">
-          <input
-            id="barcode"
-            type="text"
-            value="invalid"
-            style="width: 100%; padding: 0.5rem 0.75rem; border: 1px solid #ef4444; border-radius: 0.375rem; font-size: 0.875rem; background: var(--bg-primary, #fff); color: var(--text-primary, #1e293b); box-sizing: border-box;"
-          />
+          <BaseInput id="barcode" model-value="invalid" invalid />
         </FormField>
       </div>
     </Variant>
@@ -91,28 +66,13 @@ import BaseInput from './BaseInput.vue'
     <Variant title="Form Example">
       <div style="padding: 2rem; max-width: 400px; margin: 0 auto; display: flex; flex-direction: column; gap: 1rem;">
         <FormField label="Experiment Name" :required="true" html-for="form-name">
-          <input
-            id="form-name"
-            type="text"
-            placeholder="Enter experiment name"
-            style="width: 100%; padding: 0.5rem 0.75rem; border: 1px solid var(--border-color, #e2e8f0); border-radius: 0.375rem; font-size: 0.875rem; background: var(--bg-primary, #fff); color: var(--text-primary, #1e293b); box-sizing: border-box;"
-          />
+          <BaseInput id="form-name" placeholder="Enter experiment name" />
         </FormField>
         <FormField label="Description" hint="Optional description for this experiment" html-for="form-desc">
-          <textarea
-            id="form-desc"
-            placeholder="Describe the experiment..."
-            rows="3"
-            style="width: 100%; padding: 0.5rem 0.75rem; border: 1px solid var(--border-color, #e2e8f0); border-radius: 0.375rem; font-size: 0.875rem; background: var(--bg-primary, #fff); color: var(--text-primary, #1e293b); resize: vertical; box-sizing: border-box;"
-          />
+          <BaseInput id="form-desc" type="textarea" placeholder="Describe the experiment..." :rows="3" />
         </FormField>
         <FormField label="Plate Count" :required="true" error="Must be between 1 and 50" html-for="form-count">
-          <input
-            id="form-count"
-            type="number"
-            value="100"
-            style="width: 100%; padding: 0.5rem 0.75rem; border: 1px solid #ef4444; border-radius: 0.375rem; font-size: 0.875rem; background: var(--bg-primary, #fff); color: var(--text-primary, #1e293b); box-sizing: border-box;"
-          />
+          <BaseInput id="form-count" inputmode="numeric" model-value="100" invalid />
         </FormField>
       </div>
     </Variant>

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,11 +24,11 @@ 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'
 import { definePluginWorkspaceView } from '../composables/componentSpecs'
+import { providePluginIdentity } from '../composables/pluginIdentity'
 
 interface Props {
   baseUrl: string
@@ -74,7 +74,7 @@ const forms = computed<Record<string, FormSchema>>(() => Object.fromEntries(
 
 const workspace = computed(() => definePluginWorkspaceView({
   title: generated.manifest.value?.ui.title ?? 'Analysis',
-  subtitle: generated.manifest.value?.ui.description,
+  subtitle: generated.manifest.value?.ui.subtitle || generated.manifest.value?.ui.description,
   // The platform shell renders the toasts around this view.
   toasts: false,
   topBar: {
@@ -83,8 +83,14 @@ 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.
+watch(() => generated.manifest.value?.ui, (ui) => {
+  if (ui) providePluginIdentity({ plugin: { name: ui.title, subtitle: ui.subtitle, description: ui.description, icon: ui.icon } })
+}, { immediate: true })
+
 const currentValues = computed(() => valuesByDefinition[activeDefinitionId.value] ?? {})
 const currentJob = computed(() => {
   const currentSessionId = generated.session.value?.id
@@ -131,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)
 }
@@ -160,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">
@@ -194,12 +201,6 @@ onMounted(() => {
           />
         </section>
       </template>
-
-      <JobsStatusTray
-        :source="generated"
-        :teleport-to="false"
-        @select="selectJob"
-      />
     </main>
   </PluginWorkspaceView>
 </template>

package/src/components/GeneratedResultRenderer.vue

@@ -130,10 +130,9 @@ function humanize(value: string): string {
 
 .mint-generated-result__json {
   overflow: auto;
-  padding: 1rem;
-  border: 1px solid var(--border-color);
-  border-radius: 0.75rem;
-  background: var(--bg-secondary);
+  padding: 0.75rem 1rem;
+  border-radius: var(--radius-md);
+  background: var(--bg-tertiary);
   font-size: 0.8125rem;
   line-height: 1.55;
   white-space: pre-wrap;

package/src/components/InstrumentStateBadge.vue

@@ -15,7 +15,7 @@ const props = withDefaults(defineProps<Props>(), {
 })
 
 const stateConfig: Record<InstrumentBadgeState, { label: string; tone: string }> = {
-  running: { label: 'Running', tone: 'info' },
+  running: { label: 'Running', tone: 'success' },
   standby: { label: 'Standby', tone: 'warning' },
   idle: { label: 'Idle', tone: 'muted' },
   error: { label: 'Error', tone: 'error' },

package/src/components/JobsStatusTray.story.vue

@@ -1,6 +1,9 @@
 <script setup lang="ts">
+import { defineComponent, h, onMounted, type PropType } from 'vue'
+import AppTopBar from './AppTopBar.vue'
 import JobsStatusTray from './JobsStatusTray.vue'
-import type { JobStateInput, JobStatus } from '../types/jobs'
+import { useJobCenter } from '../composables/useJobCenter'
+import type { JobState, JobStateInput, JobStatus } from '../types/jobs'
 
 function job(
   status: JobStatus,
@@ -43,13 +46,6 @@ function job(
   }
 }
 
-const mixedJobs = [
-  job('awaiting_input', 'J-104'),
-  job('running', 'J-103'),
-  job('queued', 'J-102'),
-  job('completed', 'J-101'),
-  job('failed', 'J-100'),
-]
 const explicitActionJobs = [
   job('awaiting_input', 'J-201', { can_cancel: true }),
   job('completed', 'J-200', { can_delete: false }),
@@ -57,69 +53,127 @@ const explicitActionJobs = [
 const cancelJob = async () => undefined
 const deleteJob = async () => true
 
-function openJob(jobId: string) {
-  console.info('open', jobId)
+function openJob(selected: JobState) {
+  console.info('open', selected.job_id)
+}
+
+/** The parent owns the job center: it feeds the top-bar chip and the tray. */
+const TrayDemo = defineComponent({
+  props: {
+    jobs: { type: Array as PropType<JobStateInput[]>, required: true },
+    title: { type: String, default: undefined },
+    open: Boolean,
+    confirm: Boolean,
+    /** Show the awaiting-input job as a browser decode, as LEAF does. */
+    decode: Boolean,
+  },
+  setup(props) {
+    // One source object: a new source identity resets the just-completed hold.
+    const center = useJobCenter({
+      source: { jobs: () => props.jobs, cancel: cancelJob, delete: deleteJob },
+      rowJob: row => (props.decode && row.status === 'awaiting_input'
+        ? { status: 'running', percent: 62, message: 'Decoding in the browser · 5/8' }
+        : null),
+      topBarJob: shown => (shown.status === 'completed' ? { status: 'completed', label: `Saved to ${shown.experiment_id}` } : null),
+    })
+    onMounted(() => { if (props.open) center.open() })
+    return () => [
+      h(AppTopBar, {
+        title: 'Peak QC',
+        job: center.topBarJob.value,
+        jobsDone: center.completedCount.value,
+        jobsOpen: center.isOpen.value,
+        jobsPanelId: center.panelId,
+        onJobClick: () => center.handleTopBarClick(openJob),
+      }),
+      h(JobsStatusTray, { center, title: props.title, confirm: props.confirm, onSelect: openJob }, {
+        'job-actions': ({ job: row }: { job: JobState }) => row.status === 'completed'
+          ? h('button', { type: 'button', class: 'mint-jobs-tray__section-action', onClick: () => openJob(row) }, 'Open')
+          : null,
+      }),
+    ]
+  },
+})
+
+function playgroundJobs(percent: number, finished: boolean): JobStateInput[] {
+  const running = finished
+    ? job('completed', 'J-103', { completed_at: '2026-07-14T10:12:00+00:00' })
+    : job('running', 'J-103', {
+        progress: { ...job('running', 'J-103').progress, percent, message: 'Integrating peaks' },
+      })
+  return [
+    job('awaiting_input', 'J-104'),
+    running,
+    job('queued', 'J-102'),
+    job('completed', 'J-101'),
+    job('failed', 'J-100'),
+  ]
 }
 
 function initState() {
   return {
-    title: 'Analysis jobs',
-    jobs: mixedJobs,
+    title: 'Jobs',
+    percent: 37,
+    finished: false,
+    open: true,
+    confirm: false,
+    decode: false,
   }
 }
 </script>
 
 <template>
-  <Story title="Workflow/JobsStatusTray">
+  <Story title="Workflow/JobsStatusTray" :layout="{ type: 'single', iframe: true }">
     <Variant title="Playground" :init-state="initState">
       <template #default="{ state }">
-        <div style="padding: 2rem; min-height: 520px;">
-          <JobsStatusTray
+        <div style="min-height: 560px;">
+          <TrayDemo
+            :key="String(state.open)"
+            :jobs="playgroundJobs(state.percent, state.finished)"
             :title="state.title"
-            :source="{ jobs: state.jobs, cancel: cancelJob, delete: deleteJob }"
-            :load-on-mount="false"
-            :teleport-to="false"
-          >
-            <template #job-actions="{ job }">
-              <button type="button" class="mint-jobs-tray__action" @click="() => openJob(job.job_id)">
-                Open
-              </button>
-            </template>
-          </JobsStatusTray>
+            :open="state.open"
+            :confirm="state.confirm"
+            :decode="state.decode"
+          />
         </div>
       </template>
       <template #controls="{ state }">
         <HstText v-model="state.title" title="Title" />
+        <HstSlider v-model="state.percent" title="Running percent" :min="0" :max="100" />
+        <HstCheckbox v-model="state.finished" title="Running job completed (6 s chip)" />
+        <HstCheckbox v-model="state.open" title="Open on mount" />
+        <HstCheckbox v-model="state.confirm" title="Confirm cancel, delete and clear" />
+        <HstCheckbox v-model="state.decode" title="Row override: J-104 as a browser decode" />
       </template>
     </Variant>
 
+    <Variant title="Confirm and row override">
+      <div style="min-height: 560px;">
+        <TrayDemo :jobs="playgroundJobs(37, false)" open confirm decode />
+      </div>
+    </Variant>
+
     <Variant title="Awaiting input">
-      <div style="padding: 2rem; min-height: 520px;">
-        <JobsStatusTray
-          :source="{ jobs: [job('awaiting_input', 'J-301')] }"
-          :load-on-mount="false"
-          :teleport-to="false"
-        />
+      <div style="min-height: 560px;">
+        <TrayDemo :jobs="[job('awaiting_input', 'J-301')]" open />
       </div>
     </Variant>
 
     <Variant title="Explicit actions">
-      <div style="padding: 2rem; min-height: 520px;">
-        <JobsStatusTray
-          :source="{ jobs: explicitActionJobs, cancel: cancelJob, delete: deleteJob }"
-          :load-on-mount="false"
-          :teleport-to="false"
-        />
+      <div style="min-height: 560px;">
+        <TrayDemo :jobs="explicitActionJobs" open />
+      </div>
+    </Variant>
+
+    <Variant title="Idle with completed jobs">
+      <div style="min-height: 560px;">
+        <TrayDemo :jobs="[job('completed', 'J-401'), job('completed', 'J-402'), job('cancelled', 'J-403')]" />
       </div>
     </Variant>
 
     <Variant title="Empty">
-      <div style="padding: 2rem; min-height: 520px;">
-        <JobsStatusTray
-          :source="{ jobs: [] }"
-          :load-on-mount="false"
-          :teleport-to="false"
-        />
+      <div style="min-height: 560px;">
+        <TrayDemo :jobs="[]" open />
       </div>
     </Variant>
   </Story>