@morscherlab/mint-sdk 1.0.63 → 1.1.0-beta.10

package/src/components/GeneratedPluginView.vue

@@ -0,0 +1,279 @@
+<script setup lang="ts">
+import { computed, onMounted, 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 {
+  useGeneratedAnalysis,
+  type GeneratedAnalysisTransport,
+} from '../composables/useGeneratedAnalysis'
+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'
+
+const props = withDefaults(defineProps<{
+  baseUrl: string
+  showStandaloneLabel?: boolean
+  transport?: GeneratedAnalysisTransport
+}>(), {
+  showStandaloneLabel: false,
+})
+
+const generated = useGeneratedAnalysis({
+  baseUrl: props.baseUrl,
+  transport: props.transport,
+})
+const activeDefinitionId = ref('')
+const selectedJobId = ref('')
+const valuesByDefinition = reactive<Record<string, Record<string, unknown>>>({})
+const definitions = computed(() => generated.manifest.value?.jobs ?? [])
+const activeDefinition = computed(() => (
+  definitions.value.find(definition => definition.id === activeDefinitionId.value) ?? null
+))
+
+const pillNav = computed<PillNavItem[]>(() => definitions.value.map(definition => ({
+  id: definition.id,
+  label: definition.title,
+})))
+
+const panels = computed<Record<string, SidebarToolSection[]>>(() => Object.fromEntries(
+  definitions.value.map(definition => [definition.id, [{
+    id: definition.id,
+    label: 'Parameters',
+    subtitle: resourceSummary(definition),
+    defaultOpen: true,
+  }]]),
+))
+
+const forms = computed<Record<string, FormSchema>>(() => Object.fromEntries(
+  definitions.value.map(definition => [definition.id, generatedJobFormSchema(definition)]),
+))
+
+const currentValues = computed(() => valuesByDefinition[activeDefinitionId.value] ?? {})
+const currentJob = computed(() => {
+  const currentSessionId = generated.session.value?.id
+  const currentDefinitionId = activeDefinitionId.value
+  const selected = generated.jobs.value.find(candidate => (
+    candidate.job_id === selectedJobId.value
+    && candidate.status === 'completed'
+    && candidate.metadata.definition_id === currentDefinitionId
+    && candidate.metadata.has_result === true
+  ))
+  return selected ?? generated.jobs.value.find(candidate => (
+    candidate.session_id === currentSessionId
+    && candidate.status === 'completed'
+    && candidate.metadata.definition_id === currentDefinitionId
+    && candidate.metadata.has_result === true
+  ))
+})
+const currentResult = computed<GeneratedAnalysisResult | null>(() => (
+  currentJob.value ? generated.resultForJob(currentJob.value.job_id) : null
+))
+
+watch(definitions, (nextDefinitions) => {
+  for (const definition of nextDefinitions) {
+    valuesByDefinition[definition.id] ??= generatedJobDefaults(definition)
+  }
+  if (!nextDefinitions.some(definition => definition.id === activeDefinitionId.value)) {
+    activeDefinitionId.value = nextDefinitions[0]?.id ?? ''
+  }
+}, { immediate: true })
+
+watch(currentJob, (job) => {
+  if (job) void generated.loadResult(job)
+}, { immediate: true })
+
+function updateValues(values: Record<string, unknown>): void {
+  if (activeDefinitionId.value) valuesByDefinition[activeDefinitionId.value] = { ...values }
+}
+
+async function submitJob(sectionId: string, values: Record<string, unknown>): Promise<void> {
+  const definition = definitions.value.find(candidate => candidate.id === sectionId)
+  if (!definition) return
+  selectedJobId.value = ''
+  valuesByDefinition[definition.id] = { ...values }
+  await generated.submit(definition.id, normalizeGeneratedJobInput(definition, values))
+}
+
+function selectJob(job: GeneratedAnalysisJob): void {
+  selectedJobId.value = job.job_id
+  activeDefinitionId.value = String(job.metadata.definition_id ?? activeDefinitionId.value)
+}
+
+function resourceSummary(definition: GeneratedJobDefinition): string {
+  if (definition.lifecycle === 'service' || definition.profile?.kind === 'service') {
+    return 'Host service'
+  }
+  if (definition.lifecycle === 'staged' || definition.profile?.kind === 'staged') {
+    return 'Staged upload'
+  }
+  return `Up to ${definition.cpu} CPU`
+}
+
+onMounted(() => {
+  void generated.initialize().catch(() => undefined)
+})
+</script>
+
+<template>
+  <PluginWorkspaceView
+    :title="generated.manifest.value?.ui.title ?? 'Analysis'"
+    :subtitle="generated.manifest.value?.ui.description"
+    :show-standalone-label="showStandaloneLabel"
+    :show-settings="false"
+    :pill-nav="pillNav"
+    :active-view="activeDefinitionId"
+    :panels="panels"
+    :forms="forms"
+    sidebar-title="Parameters"
+    sidebar-position="left"
+    :values="currentValues"
+    :show-form-actions="true"
+    :form-loading="generated.isSubmitting.value"
+    :form-disabled="generated.isSubmitting.value"
+    @update:active-view="activeDefinitionId = $event"
+    @update:values="updateValues"
+    @form-submit="submitJob"
+  >
+    <main class="mint-generated-workspace">
+      <div v-if="generated.isLoading.value" class="mint-generated-workspace__loading">
+        <LoadingSpinner size="lg" />
+        <span>Loading analysis workspace</span>
+      </div>
+
+      <template v-else>
+        <AlertBox
+          v-if="generated.error.value"
+          type="error"
+          :message="generated.error.value"
+        />
+
+        <header v-if="activeDefinition" class="mint-generated-workspace__header">
+          <div>
+            <p class="mint-generated-workspace__eyebrow">Analysis result</p>
+            <h1>{{ activeDefinition.title }}</h1>
+            <p v-if="activeDefinition.description">{{ activeDefinition.description }}</p>
+          </div>
+          <div class="mint-generated-workspace__resources" aria-label="Job resource requirements">
+            <span>{{ resourceSummary(activeDefinition) }}</span>
+          </div>
+        </header>
+
+        <section class="mint-generated-workspace__result">
+          <GeneratedResultRenderer
+            v-if="currentResult"
+            :result="currentResult"
+          />
+          <EmptyState
+            v-else
+            title="No result yet"
+            description="Set the parameters and run the analysis. Jobs continue independently if you switch tabs."
+            size="md"
+          />
+        </section>
+      </template>
+
+      <JobsStatusTray
+        :source="generated"
+        :teleport-to="false"
+        @select="selectJob"
+      />
+    </main>
+  </PluginWorkspaceView>
+</template>
+
+<style scoped>
+.mint-generated-workspace {
+  position: relative;
+  min-width: 0;
+  min-height: calc(100vh - 5rem);
+  padding: clamp(1rem, 2.5vw, 2.5rem);
+  background: var(--color-bg-primary);
+}
+
+.mint-generated-workspace__loading {
+  display: flex;
+  min-height: 24rem;
+  align-items: center;
+  justify-content: center;
+  gap: 0.75rem;
+  color: var(--color-text-secondary);
+}
+
+.mint-generated-workspace__header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 1.5rem;
+  max-width: 76rem;
+  margin: 0 auto 1.25rem;
+}
+
+.mint-generated-workspace__header h1 {
+  margin: 0;
+  color: var(--color-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);
+}
+
+.mint-generated-workspace__eyebrow {
+  margin: 0 0 0.35rem;
+  color: var(--color-text-muted);
+  font-size: 0.72rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.mint-generated-workspace__resources {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 0.4rem;
+}
+
+.mint-generated-workspace__resources span {
+  padding: 0.3rem 0.55rem;
+  border: 1px solid var(--color-border);
+  border-radius: 999px;
+  background: var(--color-bg-secondary);
+  color: var(--color-text-secondary);
+  font-size: 0.75rem;
+  font-weight: 600;
+}
+
+.mint-generated-workspace__result {
+  max-width: 76rem;
+  min-height: 24rem;
+  margin: 0 auto;
+  padding: clamp(1rem, 2vw, 1.75rem);
+  border: 1px solid var(--color-border);
+  border-radius: 1rem;
+  background: var(--color-bg-secondary);
+  box-shadow: var(--shadow-sm);
+}
+
+@media (max-width: 640px) {
+  .mint-generated-workspace__header {
+    flex-direction: column;
+  }
+
+  .mint-generated-workspace__resources {
+    justify-content: flex-start;
+  }
+}
+</style>

package/src/components/GeneratedResultRenderer.vue

@@ -0,0 +1,137 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import type { DataFrameColumn } from '../types'
+import type { GeneratedAnalysisResult } from '../types/generated-ui'
+import ChartContainer from './ChartContainer.vue'
+import DataFrame from './DataFrame.vue'
+import GeneratedPlotlyResult from './GeneratedPlotlyResult.vue'
+
+const props = defineProps<{
+  result: GeneratedAnalysisResult
+}>()
+
+const tableColumns = computed<DataFrameColumn[]>(() => {
+  if (props.result.kind !== 'table') return []
+  return props.result.columns.map(key => ({
+    key,
+    label: humanize(key),
+    sortable: true,
+  }))
+})
+
+const formattedJson = computed(() => (
+  props.result.kind === 'json'
+    ? JSON.stringify(props.result.value, null, 2)
+    : ''
+))
+
+const artifactHref = computed(() => {
+  if (props.result.kind !== 'artifact') return ''
+  if (props.result.download_url) return props.result.download_url
+  return props.result.data
+    ? `data:${props.result.media_type};base64,${props.result.data}`
+    : ''
+})
+
+function humanize(value: string): string {
+  return value.replace(/[_-]+/g, ' ').replace(/^\w/, character => character.toUpperCase())
+}
+</script>
+
+<template>
+  <article class="mint-generated-result" aria-live="polite">
+    <p v-if="result.kind === 'text'" class="mint-generated-result__text">
+      {{ result.text }}
+    </p>
+
+    <pre v-else-if="result.kind === 'json'" class="mint-generated-result__json">{{ formattedJson }}</pre>
+
+    <DataFrame
+      v-else-if="result.kind === 'table'"
+      :data="result.rows"
+      :columns="tableColumns"
+      sortable
+      searchable
+      sticky-header
+      max-height="32rem"
+    />
+
+    <ChartContainer v-else-if="result.kind === 'image'" title="Analysis chart">
+      <img
+        class="mint-generated-result__image"
+        :src="`data:${result.media_type};base64,${result.data}`"
+        :alt="result.alt"
+      >
+    </ChartContainer>
+
+    <GeneratedPlotlyResult
+      v-else-if="result.kind === 'plotly'"
+      :spec="result.spec"
+      :fallback="result.fallback"
+    />
+
+    <a
+      v-else
+      class="mint-generated-result__artifact"
+      :href="artifactHref"
+      :download="result.name"
+    >
+      <span>{{ result.name }}</span>
+      <small>{{ result.media_type }}</small>
+    </a>
+  </article>
+</template>
+
+<style scoped>
+.mint-generated-result {
+  width: 100%;
+}
+
+.mint-generated-result__text,
+.mint-generated-result__json {
+  margin: 0;
+  color: var(--color-text-primary);
+}
+
+.mint-generated-result__text {
+  max-width: 72ch;
+  white-space: pre-wrap;
+  line-height: 1.65;
+}
+
+.mint-generated-result__json {
+  overflow: auto;
+  padding: 1rem;
+  border: 1px solid var(--color-border);
+  border-radius: 0.75rem;
+  background: var(--color-bg-secondary);
+  font-size: 0.8125rem;
+  line-height: 1.55;
+  white-space: pre-wrap;
+}
+
+.mint-generated-result__image {
+  display: block;
+  max-width: 100%;
+  height: auto;
+  margin: 0 auto;
+}
+
+.mint-generated-result__plotly {
+  width: 100%;
+  min-height: 24rem;
+}
+
+.mint-generated-result__artifact {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 1rem;
+  border: 1px solid var(--color-border);
+  border-radius: 0.75rem;
+  color: var(--color-primary);
+  text-decoration: none;
+}
+</style>

package/src/components/InstrumentAlertLog.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-/** Filterable instrument alert/event list with optional acknowledge actions. */
+/** Filterable instrument alert/event list keyed by each alert's required stable event_key. */
 import { computed, ref } from 'vue'
 import type { InstrumentAlert, InstrumentAlertLevel } from '../types'
 
@@ -146,7 +146,7 @@ function alertDetail(alert: InstrumentAlert): string {
     <TransitionGroup name="mint-instrument-alert" tag="div" class="mint-instrument-alert-log__list">
       <div
         v-for="alert in filteredAlerts"
-        :key="alert.id ?? `${alert.instrument_id}-${alert.rule ?? alert.message}-${alert.timestamp ?? ''}`"
+        :key="alert.event_key"
         class="mint-instrument-alert"
         :class="[
           levelConfig[alert.level]?.cssClass,

package/src/components/JobsStatusTray.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-/** Floating, adapter-driven job status tray for plugin and platform workflows. */
+/** Floating, source-driven job status tray for plugin and platform workflows. */
 import { computed, nextTick, ref, toRef, useId } from 'vue'
 
 import {
@@ -7,8 +7,9 @@ import {
   normalizeJobPercent,
 } from '../jobs'
 import {
-  useJobsStatusTray,
+  usePluginJobCenter,
   type JobsStatusTrayAdapter,
+  type PluginJobCenterSource,
 } from '../composables/useJobsStatusTray'
 import type { UsePluginEventStreamReturn } from '../composables/usePluginClient'
 import type {
@@ -18,8 +19,12 @@ import type {
 } 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
@@ -42,7 +47,8 @@ const titleId = `${panelId}-title`
 const triggerRef = ref<HTMLButtonElement | null>(null)
 const panelRef = ref<HTMLElement | null>(null)
 const teleportTarget = computed(() => props.teleportTo || 'body')
-const tray = useJobsStatusTray({
+const tray = usePluginJobCenter({
+  source: toRef(props, 'source'),
   jobs: toRef(props, 'jobs'),
   adapter: toRef(props, 'adapter'),
   eventStream: toRef(props, 'eventStream'),
@@ -50,7 +56,7 @@ const tray = useJobsStatusTray({
 })
 const canClear = computed(() => (
   tray.deletableJobs.value.length > 0
-  && Boolean(props.adapter?.clearFinishedJobs || props.adapter?.deleteJob)
+  && tray.canClearFinished.value
 ))
 
 async function openTray(): Promise<void> {
@@ -201,7 +207,7 @@ async function clearFinished(): Promise<void> {
             </div>
             <div class="mint-jobs-tray__header-actions">
               <button
-                v-if="adapter?.listJobs"
+                v-if="tray.canRefresh.value"
                 type="button"
                 class="mint-jobs-tray__icon-button"
                 aria-label="Refresh jobs"
@@ -297,7 +303,7 @@ async function clearFinished(): Promise<void> {
                   <span>{{ progressText(job) }}</span>
                   <div class="mint-jobs-tray__job-actions">
                     <button
-                      v-if="job.can_cancel && adapter?.cancelJob"
+                      v-if="job.can_cancel && tray.canCancel.value"
                       type="button"
                       class="mint-jobs-tray__action mint-jobs-tray__action--danger"
                       aria-label="Cancel job"
@@ -307,7 +313,7 @@ async function clearFinished(): Promise<void> {
                       Cancel
                     </button>
                     <button
-                      v-if="job.can_delete && adapter?.deleteJob"
+                      v-if="job.can_delete && tray.canDelete.value"
                       type="button"
                       class="mint-jobs-tray__icon-button mint-jobs-tray__icon-button--danger"
                       aria-label="Delete job"
@@ -359,7 +365,7 @@ async function clearFinished(): Promise<void> {
                 <div class="mint-jobs-tray__job-footer">
                   <span>{{ formatTimestamp(job.completed_at || job.created_at) }}</span>
                   <button
-                    v-if="job.can_delete && adapter?.deleteJob"
+                    v-if="job.can_delete && tray.canDelete.value"
                     type="button"
                     class="mint-jobs-tray__icon-button mint-jobs-tray__icon-button--danger"
                     aria-label="Delete job"

package/src/components/PluginWorkspaceView.props.ts

@@ -34,7 +34,7 @@ export interface PluginWorkspaceViewProps {
   homePath?: string
   /** Show the default MINT logo when no icon/logo slot is provided. */
   showLogo?: boolean
-  /** Preferred route-level page selector entries. */
+  /** Preferred route-level page selector entries. Pass [] to suppress integrated platform fallback. */
   pageSelector?: PageSelectorItemInput[]
   /** Active page selector id. Defaults to activeView. */
   currentPageSelectorId?: string

package/src/components/PluginWorkspaceView.vue

@@ -208,10 +208,6 @@ const {
   emitPillSelect: (item) => emit('pill-select', item),
 })
 
-const visiblePageSelector = computed(() =>
-  (props.pageSelector?.length ?? 0) > 1 ? props.pageSelector : undefined,
-)
-
 const hasSidebarSurface = computed(() => {
   return hasPluginWorkspaceSidebarSurface({
     showSidebar: props.showSidebar,
@@ -274,7 +270,7 @@ function handleFormCancel(sectionId: string) {
           :variant="topBarVariant"
           :home-path="homePath"
           :show-logo="showLogo"
-          :page-selector="visiblePageSelector"
+          :page-selector="pageSelector"
           :current-page-selector-id="resolvedCurrentPageSelectorId"
           :plugin-switcher="pluginSwitcher"
           :pill-nav="resolvedPillNav"