@morscherlab/mint-sdk 1.4.5 → 1.4.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@morscherlab/mint-sdk",
-  "version": "1.4.5",
+  "version": "1.4.7",
   "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",
@@ -51,7 +51,10 @@
       "types": "./dist/types/index.d.ts",
       "import": "./dist/types/index.js"
     },
-    "./styles": "./dist/styles.css"
+    "./styles": {
+      "types": "./dist/styles.d.ts",
+      "default": "./dist/styles.css"
+    }
   },
   "files": [
     "dist",

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

@@ -178,4 +178,37 @@ describe('SectionCard', () => {
       expect(withoutFooter.find('.mint-section-card__footer').exists()).toBe(false)
     })
   })
+
+  describe('collapsible', () => {
+    it('should hide the body and emit the collapsed state when a collapsible header is clicked', async () => {
+      const wrapper = mount(SectionCard, {
+        props: { title: 'Alerts', count: 3, collapsible: true },
+        slots: { default: '<p class="body-probe">rows</p>', actions: '<button class="action-probe">Export</button>' },
+        attachTo: document.body,
+      })
+      const toggle = wrapper.find('button.mint-section-card__toggle')
+      expect(toggle.attributes('aria-expanded')).toBe('true')
+      expect(wrapper.find('h2.mint-section-card__title > button').element).toBe(toggle.element)
+      expect(toggle.text()).toContain('Alerts')
+      expect(toggle.find('.action-probe').exists()).toBe(false)
+
+      await toggle.trigger('click')
+
+      expect(toggle.attributes('aria-expanded')).toBe('false')
+      expect(wrapper.find('.mint-section-card__body').isVisible()).toBe(false)
+      expect(wrapper.emitted('update:collapsed')).toEqual([[true]])
+      wrapper.unmount()
+    })
+
+    it('should keep the body visible with no toggle when collapsed is set without collapsible', () => {
+      const wrapper = mount(SectionCard, {
+        props: { title: 'Alerts', collapsed: true },
+        slots: { default: '<p class="body-probe">rows</p>' },
+        attachTo: document.body,
+      })
+      expect(wrapper.find('.mint-section-card__toggle').exists()).toBe(false)
+      expect(wrapper.find('.mint-section-card__body').isVisible()).toBe(true)
+      wrapper.unmount()
+    })
+  })
 })

package/src/__tests__/composables/useJobsEndpoint.test.ts

@@ -1595,6 +1595,56 @@ describe('useJobsEndpoint', () => {
     }
   })
 
+  it.each([
+    { name: 'resolves when the server still has the job', answers: [() => response(completedJob('submitted-job'))], outcome: 'completed' },
+    { name: 'rejects when the server no longer has the job', answers: [() => response({ detail: 'Job not found' }, 404)], outcome: 'Job submitted-job is no longer available' },
+    { name: 'checks again on the next snapshot after a retryable error', answers: [() => response({ detail: 'Busy' }, 503), () => response(completedJob('submitted-job'))], outcome: 'completed' },
+  ])('should check a waited job that a stale stream snapshot omits and $name', async ({ answers, outcome }) => {
+    const encoder = new TextEncoder()
+    let pushFrame!: (frame: string) => void
+    const stream = new ReadableStream<Uint8Array>({
+      start(controller) { pushFrame = frame => controller.enqueue(encoder.encode(frame)) },
+    })
+    let lookups = 0
+    const transport = vi.fn<GeneratedAnalysisTransport>(async (input, init) => {
+      const url = String(input)
+      if (url.endsWith('/jobs/sessions') && init?.method === 'GET') return response({ sessions: [] })
+      if (url.endsWith('/jobs/sessions')) {
+        return response({ id: 'session-1', tab_id: 'tab-1', created_at: '', last_seen_at: '', active_job_ids: [] })
+      }
+      if (url.endsWith('/jobs/events')) return new Response(stream, { headers: { 'Content-Type': 'text/event-stream' } })
+      if (url.endsWith('/jobs') && init?.method === 'POST') return response(activeJob('submitted-job'))
+      if (url.endsWith('/jobs')) return response({ jobs: [] })
+      if (url.endsWith('/jobs/submitted-job')) {
+        lookups += 1
+        return lookups === 1 ? response(activeJob('submitted-job', 'running')) : answers[lookups - 2]!()
+      }
+      throw new Error(`Unexpected request: ${url}`)
+    })
+    const scope = effectScope()
+    const generated = scope.run(() => useJobsEndpoint({
+      baseUrl: '/api/demo',
+      transport,
+      storage: memoryStorage(),
+      createId: () => 'tab-1',
+      streamReconnectDelay: 60_000,
+    }))!
+
+    try {
+      const waiting = generated.wait(await generated.submit('run', {}))
+        .then(job => job.status, (cause: Error) => cause.message)
+      // Each snapshot was built before the submit reached the server.
+      for (const [index] of answers.entries()) {
+        await vi.waitFor(() => expect(lookups).toBe(index + 1))
+        pushFrame(`event: snapshot\ndata: ${JSON.stringify({ jobs: [] })}\n\n`)
+      }
+
+      expect(await waiting).toBe(outcome)
+    } finally {
+      scope.stop()
+    }
+  })
+
   it('rejects pending waiters when their job is deleted or the runtime is disposed', async () => {
     const queued = activeJob('delete-wait-job')
     const disposeJobRequest = deferred<Response>()

package/src/components/InstrumentStatusPanels.vue

@@ -105,11 +105,11 @@ function formatValue(value: string | number | boolean | null): string {
 </template>
 
 <style scoped>
-.mint-status-panels__tabs { padding: 0 1rem; }
-.mint-status-panels__body { padding: 0.75rem 1rem; }
+.mint-status-panels__tabs { padding: 0 var(--mint-section-card-inset); }
+.mint-status-panels__body { padding: 0.75rem var(--mint-section-card-inset); }
 .mint-status-panels__bar { display: flex; flex-direction: column; gap: 0.5rem; }
 .mint-status-panels__series { align-self: flex-end; }
-.mint-status-panels__kv { margin: 0; padding: 0.25rem 1rem 0.5rem; }
+.mint-status-panels__kv { margin: 0; padding: 0.25rem var(--mint-section-card-inset) 0.5rem; }
 .mint-status-panels__kv-row {
   display: flex;
   align-items: baseline;

package/src/components/SectionCard.vue

@@ -2,7 +2,7 @@
 /** One-card page region from the MINT 1.1 card system: 12px radius, the
  * single --card-shadow token, a header strip (icon chip, title, mono count,
  * actions), and hairline-separated content — no card-in-card. */
-import { computed } from 'vue'
+import { computed, useId } from 'vue'
 import type { SectionCardAccent, SectionCardDivider } from '../types'
 
 interface Props {
@@ -23,6 +23,8 @@ interface Props {
    * definite height (a flex or grid track).
    */
   fill?: boolean
+  /** The title toggles the body; bind `v-model:collapsed` to control or keep the state. */
+  collapsible?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -32,8 +34,14 @@ const props = withDefaults(defineProps<Props>(), {
   uppercase: false,
   divider: 'strong',
   fill: false,
+  collapsible: false,
 })
 
+const collapsed = defineModel<boolean>('collapsed', { default: false })
+const bodyId = useId()
+/** `collapsed` hides content only on a card that also shows the toggle to open it again. */
+const hidden = computed(() => props.collapsible && collapsed.value)
+
 const iconPaths = computed(() =>
   props.icon === undefined ? [] : Array.isArray(props.icon) ? props.icon : [props.icon],
 )
@@ -41,6 +49,7 @@ const iconPaths = computed(() =>
 const headerClasses = computed(() => [
   'mint-section-card__header',
   props.divider === 'light' ? 'mint-section-card__header--divider-light' : '',
+  hidden.value ? 'mint-section-card__header--collapsed' : '',
 ])
 
 const titleClasses = computed(() => [
@@ -51,6 +60,7 @@ const titleClasses = computed(() => [
 const cardClasses = computed(() => [
   'mint-section-card',
   props.fill ? 'mint-section-card--fill' : '',
+  hidden.value ? 'mint-section-card--collapsed' : '',
 ])
 </script>
 
@@ -74,20 +84,46 @@ const cardClasses = computed(() => [
           <path v-for="(d, i) in iconPaths" :key="i" :d="d" />
         </svg>
       </span>
-      <h2 :class="titleClasses">{{ title }}</h2>
-      <span v-if="count !== undefined" class="mint-section-card__count">{{ count }}</span>
+      <!-- Disclosure pattern: the button sits inside the heading, never the reverse. -->
+      <h2 :class="titleClasses">
+        <button
+          v-if="collapsible"
+          type="button"
+          class="mint-section-card__toggle"
+          :aria-expanded="!collapsed"
+          :aria-controls="bodyId"
+          @click="collapsed = !collapsed"
+        >
+          {{ title }}
+          <span v-if="count !== undefined" class="mint-section-card__count">{{ count }}</span>
+          <svg
+            class="mint-section-card__chevron"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            aria-hidden="true"
+          >
+            <path d="m6 9 6 6 6-6" />
+          </svg>
+        </button>
+        <template v-else>{{ title }}</template>
+      </h2>
+      <span v-if="count !== undefined && !collapsible" class="mint-section-card__count">{{ count }}</span>
       <div class="mint-section-card__spacer"></div>
       <slot name="actions" />
     </div>
     <!-- Controls belong to the card's chrome, so they sit outside the body and
          stay put while the body scrolls. -->
-    <div v-if="$slots.toolbar" class="mint-section-card__toolbar">
+    <div v-if="$slots.toolbar" v-show="!hidden" class="mint-section-card__toolbar">
       <slot name="toolbar" />
     </div>
-    <div class="mint-section-card__body">
+    <div :id="bodyId" v-show="!hidden" class="mint-section-card__body">
       <slot />
     </div>
-    <div v-if="$slots.footer" class="mint-section-card__footer">
+    <div v-if="$slots.footer" v-show="!hidden" class="mint-section-card__footer">
       <slot name="footer" />
     </div>
   </section>

package/src/composables/useJobsEndpoint.ts

@@ -677,16 +677,27 @@ export function useJobsEndpoint(
     ]))
     jobs.value = nextJobs
     for (const job of nextJobs) settleJobWaiters(job)
-    for (const jobId of previousJobIds) {
-      if (!nextJobIds.has(jobId)) {
-        rejectJobWaiters(jobId, new Error(`Job ${jobId} is no longer available`))
-      }
+    for (const jobId of [...jobWaiters.keys()]) {
+      if (!nextJobIds.has(jobId)) void confirmMissingJob(jobId)
     }
     pruneResultState()
     pruneJobRevisions()
     return nextJobs
   }
 
+  /**
+   * A stream snapshot built before a submit can arrive after the submit reply,
+   * so a waited job missing from it is gone only once the server says so.
+   */
+  async function confirmMissingJob(jobId: string): Promise<void> {
+    try {
+      await getJob(jobId)
+    } catch (cause) {
+      if (isRetryableJobLookupError(cause)) return
+      rejectJobWaiters(jobId, new Error(`Job ${jobId} is no longer available`))
+    }
+  }
+
   function upsertJob(
     input: GeneratedAnalysisJobInput,
     fallbackDefinitionId?: string,

package/src/styles/components/section-card.css

@@ -27,6 +27,11 @@
   min-height: 0;
 }
 
+/* A collapsed fill card gives its track back to its siblings. */
+.mint-section-card--fill.mint-section-card--collapsed {
+  flex: none;
+}
+
 .mint-section-card--fill .mint-section-card__body {
   flex: 1;
   min-height: 0;
@@ -41,7 +46,7 @@
   min-height: 2.5rem;
   /* 4px block padding: a 28px header control plus padding plus the 1px rule
      stays inside the 40px strip (6px made it 41px). */
-  padding: 0.25rem 0.625rem 0.25rem 0.75rem;
+  padding: 0.25rem 0.625rem 0.25rem var(--mint-section-card-inset);
   border-bottom: 1px solid var(--border-color);
   flex-shrink: 0;
 }
@@ -50,6 +55,45 @@
   border-bottom-color: var(--border-light);
 }
 
+/* A collapsed card is its header alone: no rule under it. */
+.mint-section-card__header--collapsed {
+  border-bottom-color: transparent;
+}
+
+.mint-section-card__toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--mint-section-card-gap);
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: none;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+}
+
+.mint-section-card__toggle:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring-offset);
+  border-radius: var(--radius-sm);
+}
+
+.mint-section-card__chevron {
+  width: 0.875rem;
+  height: 0.875rem;
+  color: var(--text-muted);
+  transition: transform var(--mint-transition);
+}
+
+.mint-section-card__toggle[aria-expanded="false"] .mint-section-card__chevron {
+  transform: rotate(-90deg);
+}
+
+.mint-section-card__toggle:hover .mint-section-card__chevron {
+  color: var(--text-secondary);
+}
+
 /* Muted icon, no tinted chip: every accent renders the same. */
 .mint-section-card__icon-chip {
   display: inline-flex;
@@ -97,7 +141,8 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 0.5rem 1rem;
+  /* Text starts on the card inset; controls end where the header's do. */
+  padding: 0.5rem 0.625rem 0.5rem var(--mint-section-card-inset);
   border-top: 1px solid var(--border-color);
   background: var(--bg-primary);
   font-size: 0.75rem;
@@ -118,7 +163,7 @@
   display: flex;
   align-items: center;
   gap: var(--mint-section-card-gap);
-  padding: 0.375rem 0.75rem;
+  padding: 0.375rem var(--mint-section-card-inset);
   background: var(--bg-secondary);
   transition: background-color var(--mint-transition);
 }
@@ -153,12 +198,26 @@ button.mint-section-card__row:hover {
 /* Comfortable density gives the header and rows back their height. */
 [data-density="comfortable"] .mint-section-card__header {
   min-height: 2.75rem;
-  padding: 0.25rem 0.75rem 0.25rem 0.875rem;
+  padding-right: 0.75rem;
+}
+
+[data-density="comfortable"] .mint-section-card__footer {
+  padding-right: 0.75rem;
 }
 
 [data-density="comfortable"] .mint-section-card__row {
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
-  /* Same left inset as the header, so row content lines up under the header. */
-  padding-left: 0.875rem;
+}
+
+/* A table that is the card body's own child starts and ends on the card's text
+   inset, so its first column lines up under the header title. A table inside a
+   padded wrapper keeps its padding, and the checkbox and actions columns stay
+   centred controls. The table's size padding uses !important, so this must too. */
+.mint-section-card__body > .mint-dataframe :is(.mint-dataframe__th, .mint-dataframe__td):first-child:not(.mint-dataframe__th--checkbox, .mint-dataframe__td--checkbox) {
+  padding-left: var(--mint-section-card-inset) !important;
+}
+
+.mint-section-card__body > .mint-dataframe :is(.mint-dataframe__th, .mint-dataframe__td):last-child:not(.mint-dataframe__th--actions, .mint-dataframe__td--actions) {
+  padding-right: var(--mint-section-card-inset) !important;
 }

package/src/styles/variables.css

@@ -134,6 +134,9 @@
   --mint-gutter: 0.5rem;
   /* Distance from the outermost cards to the window edge, in every density. */
   --mint-page-inset: 1rem;
+  /* Text inset of a SectionCard: its title, row text and table edge columns
+     start here, and page chrome over a card (breadcrumbs) can line up with it. */
+  --mint-section-card-inset: 0.75rem;
 
   /* Semantic colors */
   --mint-success: #10B981;
@@ -377,6 +380,7 @@ html.dark [data-palette="forest"] {
 /* Comfortable density (html[data-density], written by the settings store):
    the pre-v2 control heights and a wider gutter. */
 [data-density="comfortable"] {
+  --mint-section-card-inset: 0.875rem;
   --form-height-sm: 2rem;
   --form-height-md: 2.25rem;
   --form-height-lg: 3rem;