@morscherlab/mint-sdk 1.2.0-beta.1 → 1.2.0-beta.11

package/src/components/GeneratedPlotlyResult.story.vue

@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import GeneratedPlotlyResult from './GeneratedPlotlyResult.vue'
+
+const scatterSpec: Record<string, unknown> = {
+  data: [
+    {
+      type: 'scatter',
+      mode: 'markers',
+      name: 'Control',
+      x: [1.2, 2.4, 3.1, 4.8, 5.5, 6.9],
+      y: [0.9, 1.8, 2.6, 3.9, 4.4, 5.8],
+      marker: { size: 9 },
+    },
+    {
+      type: 'scatter',
+      mode: 'markers',
+      name: 'Treated',
+      x: [1.1, 2.2, 3.4, 4.5, 5.9, 6.4],
+      y: [2.1, 3.4, 3.9, 5.2, 6.4, 7.1],
+      marker: { size: 9 },
+    },
+  ],
+  layout: {
+    margin: { t: 24, r: 16, b: 40, l: 48 },
+    xaxis: { title: 'log2 intensity (control)' },
+    yaxis: { title: 'log2 intensity (treated)' },
+  },
+}
+
+const barSpec: Record<string, unknown> = {
+  data: [
+    {
+      type: 'bar',
+      x: ['Glycolysis', 'TCA', 'PPP', 'Urea cycle'],
+      y: [12, 27, 8, 4],
+    },
+  ],
+  layout: { margin: { t: 24, r: 16, b: 40, l: 48 } },
+}
+
+// Not a valid Plotly spec — exercises the static-image fallback branch.
+const brokenSpec: Record<string, unknown> = { data: 'not-an-array' }
+
+const PIXEL_PNG
+  = 'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8BQDwAEhQGAhKmMIQAAAABJRU5ErkJggg=='
+
+function initState() {
+  return { chart: 'scatter' as 'scatter' | 'bar' }
+}
+</script>
+
+<template>
+  <Story title="Workflow/GeneratedPlotlyResult">
+    <Variant title="Playground" :init-state="initState">
+      <template #default="{ state }">
+        <div style="padding: 2rem; max-width: 720px;">
+          <GeneratedPlotlyResult :spec="state.chart === 'bar' ? barSpec : scatterSpec" />
+        </div>
+      </template>
+
+      <template #controls="{ state }">
+        <HstSelect
+          v-model="state.chart"
+          title="Chart"
+          :options="[
+            { label: 'scatter', value: 'scatter' },
+            { label: 'bar', value: 'bar' },
+          ]"
+        />
+      </template>
+    </Variant>
+
+    <Variant title="Scatter">
+      <div style="padding: 2rem; max-width: 720px;">
+        <GeneratedPlotlyResult :spec="scatterSpec" />
+      </div>
+    </Variant>
+
+    <Variant title="Bar">
+      <div style="padding: 2rem; max-width: 720px;">
+        <GeneratedPlotlyResult :spec="barSpec" />
+      </div>
+    </Variant>
+
+    <Variant title="Render failure → PNG fallback">
+      <!-- When Plotly cannot render the spec the component swaps in the
+           server-rendered static image, if the job supplied one. -->
+      <div style="padding: 2rem; max-width: 720px;">
+        <GeneratedPlotlyResult
+          :spec="brokenSpec"
+          :fallback="{ media_type: 'image/png', data: PIXEL_PNG }"
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>

package/src/components/GeneratedPlotlyResult.vue

@@ -79,9 +79,9 @@ onBeforeUnmount(() => {
 .mint-generated-result__plotly-error {
   margin: 0;
   padding: 1rem;
-  border: 1px solid var(--color-danger-border, var(--color-border));
+  border: 1px solid var(--mint-error-border);
   border-radius: 0.75rem;
-  background: var(--color-danger-bg, var(--color-bg-secondary));
-  color: var(--color-danger-text, var(--color-text-primary));
+  background: var(--mint-error-bg);
+  color: var(--mint-error);
 }
 </style>

package/src/components/GeneratedPluginView.story.vue

@@ -0,0 +1,145 @@
+<script setup lang="ts">
+import GeneratedPluginView from './GeneratedPluginView.vue'
+import type { GeneratedAnalysisTransport } from '../composables/useGeneratedAnalysis'
+import type { GeneratedAnalysisManifest } from '../types/generated-ui'
+
+const manifest: GeneratedAnalysisManifest = {
+  schema_version: '1',
+  plugin: {
+    name: 'peak-qc',
+    version: '1.2.0',
+    description: 'Peak-picking quality control',
+    routes_prefix: '/api/peak-qc',
+  },
+  ui: {
+    title: 'Peak QC',
+    description: 'Score peak-picking output and flag features that need review.',
+  },
+  jobs: [
+    {
+      id: 'score-features',
+      title: 'Score features',
+      description: 'Compute RSD, blank ratio and detection rate for every feature.',
+      cpu: 4,
+      input_schema: {
+        type: 'object',
+        title: 'Scoring parameters',
+        properties: {
+          rsd_threshold: {
+            type: 'number',
+            title: 'QC RSD threshold',
+            description: 'Features above this relative standard deviation are flagged.',
+            default: 0.3,
+            minimum: 0,
+            maximum: 1,
+          },
+          blank_ratio: {
+            type: 'number',
+            title: 'Minimum blank ratio',
+            default: 3,
+            minimum: 1,
+          },
+          drop_flagged: {
+            type: 'boolean',
+            title: 'Drop flagged features',
+            default: false,
+          },
+        },
+        required: ['rsd_threshold'],
+      },
+      output_schema: { type: 'object' },
+    },
+    {
+      id: 'align-batches',
+      title: 'Align batches',
+      description: 'Retention-time align acquisition batches before merging.',
+      cpu: 8,
+      input_schema: {
+        type: 'object',
+        properties: {
+          tolerance_seconds: { type: 'number', title: 'RT tolerance (s)', default: 6 },
+          reference_batch: { type: 'string', title: 'Reference batch', default: 'batch-1' },
+        },
+      },
+      output_schema: { type: 'object' },
+    },
+  ],
+}
+
+const session = {
+  id: 'sess_story',
+  tab_id: 'tab_story',
+  created_at: new Date().toISOString(),
+  last_seen_at: new Date().toISOString(),
+  active_job_ids: [],
+}
+
+function json(body: unknown): Response {
+  return new Response(JSON.stringify(body), {
+    status: 200,
+    headers: { 'Content-Type': 'application/json' },
+  })
+}
+
+/** Serves the manifest, one session and an empty job list — no network. */
+const readyTransport: GeneratedAnalysisTransport = async (input) => {
+  const url = String(input)
+  if (url.includes('/generated/manifest')) return json(manifest)
+  if (url.includes('/jobs/sessions')) return json({ sessions: [session] })
+  if (url.includes('/jobs')) return json({ jobs: [] })
+  return json({})
+}
+
+/** Never settles, so the workspace stays in its loading state. */
+const loadingTransport: GeneratedAnalysisTransport = () => new Promise<Response>(() => {})
+
+/** Fails the manifest request, so the workspace surfaces its error banner. */
+const failingTransport: GeneratedAnalysisTransport = async () => (
+  new Response(JSON.stringify({ detail: 'Plugin runtime is not reachable' }), {
+    status: 503,
+    headers: { 'Content-Type': 'application/json' },
+  })
+)
+
+function initState() {
+  return { showStandaloneLabel: false }
+}
+</script>
+
+<template>
+  <Story title="Workflow/GeneratedPluginView">
+    <Variant title="Playground" :init-state="initState">
+      <template #default="{ state }">
+        <div style="height: 42rem;">
+          <GeneratedPluginView
+            base-url="/story/peak-qc"
+            :transport="readyTransport"
+            :show-standalone-label="state.showStandaloneLabel"
+          />
+        </div>
+      </template>
+
+      <template #controls="{ state }">
+        <HstCheckbox v-model="state.showStandaloneLabel" title="Standalone label" />
+      </template>
+    </Variant>
+
+    <Variant title="Ready — two job definitions">
+      <div style="height: 42rem;">
+        <GeneratedPluginView base-url="/story/peak-qc" :transport="readyTransport" />
+      </div>
+    </Variant>
+
+    <Variant title="Loading">
+      <div style="height: 42rem;">
+        <GeneratedPluginView base-url="/story/loading" :transport="loadingTransport" />
+      </div>
+    </Variant>
+
+    <Variant title="Runtime unreachable">
+      <div style="height: 42rem;">
+        <GeneratedPluginView base-url="/story/failing" :transport="failingTransport" />
+      </div>
+    </Variant>
+  </Story>
+</template>

package/src/components/GeneratedPluginView.vue

@@ -207,7 +207,7 @@ onMounted(() => {
   min-width: 0;
   min-height: calc(100vh - 5rem);
   padding: clamp(1rem, 2.5vw, 2.5rem);
-  background: var(--color-bg-primary);
+  background: var(--bg-primary);
 }
 
 .mint-generated-workspace__loading {
@@ -216,7 +216,7 @@ onMounted(() => {
   align-items: center;
   justify-content: center;
   gap: 0.75rem;
-  color: var(--color-text-secondary);
+  color: var(--text-secondary);
 }
 
 .mint-generated-workspace__header {
@@ -230,19 +230,19 @@ onMounted(() => {
 
 .mint-generated-workspace__header h1 {
   margin: 0;
-  color: var(--color-text-primary);
+  color: var(--text-primary);
   font-size: clamp(1.35rem, 2vw, 1.8rem);
   line-height: 1.2;
 }
 
 .mint-generated-workspace__header p:not(.mint-generated-workspace__eyebrow) {
   margin: 0.4rem 0 0;
-  color: var(--color-text-secondary);
+  color: var(--text-secondary);
 }
 
 .mint-generated-workspace__eyebrow {
   margin: 0 0 0.35rem;
-  color: var(--color-text-muted);
+  color: var(--text-muted);
   font-size: 0.72rem;
   font-weight: 700;
   letter-spacing: 0.08em;
@@ -258,10 +258,10 @@ onMounted(() => {
 
 .mint-generated-workspace__resources span {
   padding: 0.3rem 0.55rem;
-  border: 1px solid var(--color-border);
+  border: 1px solid var(--border-color);
   border-radius: 999px;
-  background: var(--color-bg-secondary);
-  color: var(--color-text-secondary);
+  background: var(--bg-secondary);
+  color: var(--text-secondary);
   font-size: 0.75rem;
   font-weight: 600;
 }
@@ -271,9 +271,9 @@ onMounted(() => {
   min-height: 24rem;
   margin: 0 auto;
   padding: clamp(1rem, 2vw, 1.75rem);
-  border: 1px solid var(--color-border);
+  border: 1px solid var(--border-color);
   border-radius: 1rem;
-  background: var(--color-bg-secondary);
+  background: var(--bg-secondary);
   box-shadow: var(--shadow-sm);
 }
 

package/src/components/GeneratedResultRenderer.story.vue

@@ -0,0 +1,117 @@
+<script setup lang="ts">
+import GeneratedResultRenderer from './GeneratedResultRenderer.vue'
+import type { GeneratedAnalysisResult } from '../types/generated-ui'
+
+const textResult: GeneratedAnalysisResult = {
+  kind: 'text',
+  text: 'Peak integration finished: 1,284 features across 96 samples, 12 flagged for manual review.',
+}
+
+const jsonResult: GeneratedAnalysisResult = {
+  kind: 'json',
+  value: {
+    method: 'HILIC_neg_12min',
+    features: 1284,
+    qc: { rsd_median: 0.041, blanks_removed: 37 },
+    flagged: ['M241T118', 'M317T204'],
+  },
+}
+
+const tableResult: GeneratedAnalysisResult = {
+  kind: 'table',
+  columns: ['feature_id', 'mz', 'retention_time', 'fold_change', 'p_value'],
+  rows: [
+    { feature_id: 'M180T204', mz: 180.0634, retention_time: 3.42, fold_change: 2.14, p_value: 0.0012 },
+    { feature_id: 'M241T118', mz: 241.0311, retention_time: 1.97, fold_change: -1.83, p_value: 0.0044 },
+    { feature_id: 'M317T204', mz: 317.0521, retention_time: 3.41, fold_change: 1.07, p_value: 0.2310 },
+    { feature_id: 'M146T092', mz: 146.0453, retention_time: 1.53, fold_change: -3.02, p_value: 0.0001 },
+  ],
+}
+
+// 1x1 transparent PNG — enough to exercise the image branch without a fixture.
+const PIXEL_PNG
+  = 'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8BQDwAEhQGAhKmMIQAAAABJRU5ErkJggg=='
+
+const imageResult: GeneratedAnalysisResult = {
+  kind: 'image',
+  media_type: 'image/png',
+  data: PIXEL_PNG,
+  alt: 'Static QC overview rendered by the plugin',
+}
+
+const artifactResult: GeneratedAnalysisResult = {
+  kind: 'artifact',
+  id: 'art_01J9',
+  name: 'peak_table.parquet',
+  media_type: 'application/vnd.apache.parquet',
+  size: 4_812_390,
+  download_url: '#download',
+  managed: true,
+}
+
+type ResultKind = 'text' | 'json' | 'table' | 'image' | 'artifact'
+
+const kinds: ResultKind[] = ['text', 'json', 'table', 'image', 'artifact']
+
+const byKind: Record<ResultKind, GeneratedAnalysisResult> = {
+  text: textResult,
+  json: jsonResult,
+  table: tableResult,
+  image: imageResult,
+  artifact: artifactResult,
+}
+
+function initState() {
+  return { kind: 'table' as ResultKind }
+}
+</script>
+
+<template>
+  <Story title="Workflow/GeneratedResultRenderer">
+    <Variant title="Playground" :init-state="initState">
+      <template #default="{ state }">
+        <div style="padding: 2rem; max-width: 720px;">
+          <GeneratedResultRenderer :result="byKind[state.kind as ResultKind]" />
+        </div>
+      </template>
+
+      <template #controls="{ state }">
+        <HstSelect
+          v-model="state.kind"
+          title="Result kind"
+          :options="kinds.map(k => ({ label: k, value: k }))"
+        />
+      </template>
+    </Variant>
+
+    <Variant title="Text">
+      <div style="padding: 2rem; max-width: 720px;">
+        <GeneratedResultRenderer :result="textResult" />
+      </div>
+    </Variant>
+
+    <Variant title="Table">
+      <div style="padding: 2rem; max-width: 720px;">
+        <GeneratedResultRenderer :result="tableResult" />
+      </div>
+    </Variant>
+
+    <Variant title="JSON">
+      <div style="padding: 2rem; max-width: 720px;">
+        <GeneratedResultRenderer :result="jsonResult" />
+      </div>
+    </Variant>
+
+    <Variant title="Image">
+      <div style="padding: 2rem; max-width: 720px;">
+        <GeneratedResultRenderer :result="imageResult" />
+      </div>
+    </Variant>
+
+    <Variant title="Artifact download">
+      <div style="padding: 2rem; max-width: 720px;">
+        <GeneratedResultRenderer :result="artifactResult" />
+      </div>
+    </Variant>
+  </Story>
+</template>

package/src/components/GeneratedResultRenderer.vue

@@ -101,7 +101,7 @@ function humanize(value: string): string {
 .mint-generated-result__text,
 .mint-generated-result__json {
   margin: 0;
-  color: var(--color-text-primary);
+  color: var(--text-primary);
 }
 
 .mint-generated-result__text {
@@ -113,9 +113,9 @@ function humanize(value: string): string {
 .mint-generated-result__json {
   overflow: auto;
   padding: 1rem;
-  border: 1px solid var(--color-border);
+  border: 1px solid var(--border-color);
   border-radius: 0.75rem;
-  background: var(--color-bg-secondary);
+  background: var(--bg-secondary);
   font-size: 0.8125rem;
   line-height: 1.55;
   white-space: pre-wrap;
@@ -139,7 +139,7 @@ function humanize(value: string): string {
   justify-content: space-between;
   gap: 1rem;
   padding: 1rem;
-  border: 1px solid var(--color-border);
+  border: 1px solid var(--border-color);
   border-radius: 0.75rem;
   color: var(--color-primary);
   text-decoration: none;

package/src/components/GroupAssigner.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
 /** Drag-and-drop two-zone assigner for splitting sample groups into control and treatment arms. */
-import { ref } from 'vue'
+import { nextTick, ref, type ComponentPublicInstance } from 'vue'
 import type { GroupItem } from '../types'
 import { useGroupAssignment, type GroupAssignmentState, type GroupAssignmentZone } from '../composables/useGroupAssignment'
+import { useReorderAnnouncer } from '../composables/useListReorder'
 
 interface Props {
   groups: GroupItem[]
@@ -98,6 +99,56 @@ function emitAssignment(state: GroupAssignmentState) {
   emit('update:group1', state.group1)
   emit('update:group2', state.group2)
 }
+
+// Keyboard alternative to the pointer drag. GroupAssigner moves items between
+// zones rather than reordering one list, so it shares the announcer (and the
+// Alt+Arrow idiom) with useListReorder without its index maths.
+const { announcement, announce, announcerStyle } = useReorderAnnouncer()
+const pillRefs = new Map<string, HTMLElement>()
+
+function setPillRef(name: string, el: Element | ComponentPublicInstance | null) {
+  if (el instanceof HTMLElement) {
+    pillRefs.set(name, el)
+  } else {
+    pillRefs.delete(name)
+  }
+}
+
+function zoneLabel(zone: GroupAssignmentZone | null): string {
+  if (zone === 'zone1') return props.label1
+  if (zone === 'zone2') return props.label2
+  return 'Available Groups'
+}
+
+/** Alt+Left / Alt+Right walk a group through Control → unassigned → Treatment. */
+function handlePillKeydown(event: KeyboardEvent, groupName: string) {
+  if (!event.altKey) return
+  const direction =
+    event.key === 'ArrowLeft' ? -1 : event.key === 'ArrowRight' ? 1 : 0
+  if (direction === 0) return
+
+  event.preventDefault()
+  const order: Array<GroupAssignmentZone | null> = ['zone1', null, 'zone2']
+  const current = order.indexOf(assignment.getZoneForGroup(groupName))
+  const next = order[current + direction]
+  if (current === -1 || next === undefined) return
+
+  if (next === null) {
+    const from = assignment.getZoneForGroup(groupName)
+    if (from) removeFromZone(groupName, from)
+  } else {
+    assignToZone(groupName, next)
+  }
+
+  announce(`${groupName} moved to ${zoneLabel(next)}.`)
+  void nextTick(() => pillRefs.get(groupName)?.focus())
+}
+
+/** Instructions read out with each pill. */
+function pillLabel(group: GroupItem): string {
+  const zone = assignment.getZoneForGroup(group.name)
+  return `${group.name}, ${zoneLabel(zone)}. Press Alt with the left or right arrow keys to move it.`
+}
 </script>
 
 <template>
@@ -125,10 +176,14 @@ function emitAssignment(state: GroupAssignmentState) {
           <div
             v-for="group in zone1Groups"
             :key="group.name"
+            :ref="(el) => setPillRef(group.name, el)"
             class="mint-group-assigner__pill"
             draggable="true"
+            tabindex="0"
+            :aria-label="pillLabel(group)"
             @dragstart="handleDragStart($event, group.name)"
             @dragend="handleDragEnd"
+            @keydown="handlePillKeydown($event, group.name)"
           >
             <span
               class="mint-group-assigner__pill-color"
@@ -174,10 +229,14 @@ function emitAssignment(state: GroupAssignmentState) {
           <div
             v-for="group in zone2Groups"
             :key="group.name"
+            :ref="(el) => setPillRef(group.name, el)"
             class="mint-group-assigner__pill"
             draggable="true"
+            tabindex="0"
+            :aria-label="pillLabel(group)"
             @dragstart="handleDragStart($event, group.name)"
             @dragend="handleDragEnd"
+            @keydown="handlePillKeydown($event, group.name)"
           >
             <span
               class="mint-group-assigner__pill-color"
@@ -221,14 +280,18 @@ function emitAssignment(state: GroupAssignmentState) {
         <div
           v-for="group in unassignedGroups"
           :key="group.name"
+          :ref="(el) => setPillRef(group.name, el)"
           :class="[
             'mint-group-assigner__pill',
             'mint-group-assigner__pill--unassigned',
             draggingGroup === group.name ? 'mint-group-assigner__pill--dragging' : '',
           ]"
           draggable="true"
+          tabindex="0"
+          :aria-label="pillLabel(group)"
           @dragstart="handleDragStart($event, group.name)"
           @dragend="handleDragEnd"
+          @keydown="handlePillKeydown($event, group.name)"
         >
           <span
             class="mint-group-assigner__pill-color"
@@ -240,6 +303,9 @@ function emitAssignment(state: GroupAssignmentState) {
       </div>
     </div>
 
+    <!-- Assignment announcements for screen readers -->
+    <div role="status" aria-live="polite" :style="announcerStyle">{{ announcement }}</div>
+
     <!-- Validation message -->
     <div v-if="validationMessage" class="mint-group-assigner__validation">
       <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
@@ -251,7 +317,3 @@ function emitAssignment(state: GroupAssignmentState) {
     </div>
   </div>
 </template>
-
-<style>
-@import '../styles/components/group-assigner.css';
-</style>

package/src/components/IconButton.vue

@@ -67,7 +67,3 @@ function handleClick(event: MouseEvent) {
     </span>
   </button>
 </template>
-
-<style>
-@import '../styles/components/icon-button.css';
-</style>

package/src/components/InstrumentAlertLog.vue

@@ -185,7 +185,3 @@ function alertDetail(alert: InstrumentAlert): string {
     </TransitionGroup>
   </div>
 </template>
-
-<style>
-@import '../styles/components/instrument-monitor.css';
-</style>

package/src/components/InstrumentStateBadge.vue

@@ -44,7 +44,3 @@ const shouldPulse = computed(() => props.pulseWhenRunning && normalizedState.val
     {{ label ?? config.label }}
   </span>
 </template>
-
-<style>
-@import '../styles/components/instrument-monitor.css';
-</style>

package/src/components/InstrumentStatusCard.vue

@@ -182,7 +182,3 @@ function hasRemaining(progress: SequenceProgress | null | undefined): boolean {
     </template>
   </div>
 </template>
-
-<style>
-@import '../styles/components/instrument-monitor.css';
-</style>

package/src/components/JobsStatusTray.vue

@@ -15,12 +15,24 @@ import {
 } from '../jobs'
 import {
   usePluginJobCenter,
+  type JobsStatusTrayAdapter,
   type PluginJobCenterSource,
 } from '../composables/useJobsStatusTray'
-import type { JobState } from '../types/jobs'
+import type { UsePluginEventStreamReturn } from '../composables/usePluginClient'
+import type {
+  JobState,
+  JobStateInput,
+  JobStreamData,
+} from '../types/jobs'
 
 interface Props {
   source?: PluginJobCenterSource
+  /** @deprecated Pass a source instead. */
+  jobs?: readonly JobStateInput[]
+  /** @deprecated Pass source actions instead. */
+  adapter?: JobsStatusTrayAdapter
+  /** @deprecated Event streams belong to the source runtime. */
+  eventStream?: UsePluginEventStreamReturn<JobStreamData>
   loadOnMount?: boolean
   title?: string
   teleportTo?: string | HTMLElement | false
@@ -49,6 +61,9 @@ const panelRef = ref<HTMLElement | null>(null)
 const teleportTarget = computed(() => props.teleportTo || 'body')
 const tray = usePluginJobCenter({
   source: toRef(props, 'source'),
+  jobs: toRef(props, 'jobs'),
+  adapter: toRef(props, 'adapter'),
+  eventStream: toRef(props, 'eventStream'),
   loadOnMount: props.loadOnMount,
 })
 const canClear = computed(() => (
@@ -386,7 +401,3 @@ async function clearFinished(): Promise<void> {
     </div>
   </Teleport>
 </template>
-
-<style>
-@import '../styles/components/jobs-status-tray.css';
-</style>