@morscherlab/mint-sdk 1.5.0-beta.2 → 1.5.0-beta.3

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/__tests__/composables/useOnboarding.test.ts

@@ -98,7 +98,7 @@ describe('provideOnboarding', () => {
     expect(state.active.value).toMatchObject({ step: { id: 'b' }, index: 0, count: 1 })
   })
 
-  it('should mark every step seen on dismiss and not start the tour again', async () => {
+  it('should mark every step of every tour seen on dismiss and not start a tour again', async () => {
     const state = setup()
     await flush()
     state.dismiss()
@@ -107,7 +107,7 @@ describe('provideOnboarding', () => {
     const again = setup()
     await flush()
 
-    expect(stored()).toEqual(expect.arrayContaining(['step:intro/a', 'step:intro/b']))
+    expect(stored()).toEqual(expect.arrayContaining(['step:intro/a', 'step:intro/b', 'step:list/new']))
     expect(again.active.value).toBeNull()
   })
 

package/src/__tests__/docs/frontendDocsCatalog.test.ts

@@ -470,9 +470,9 @@ describe('frontend docs catalog coverage', () => {
       'BaseButton',
       'PluginWorkspaceView',
       'DataFrame',
-      'useForm',
-      'useReagentSeries',
-      'ConcentrationValue',
+      'useExperiment',
+      'useRequest',
+      'UseExperimentReturn',
       'FormSectionSchema',
     ]))
   })

package/src/components/AppSidebar.vue

@@ -208,11 +208,11 @@ function railIconStyle(section: SidebarToolSection): Record<string, string> {
 }
 
 function badgeToneClass(section: SidebarToolSection): string {
-  return `mint-sidebar__rail-badge--${section.badgeTone ?? 'cta'}`
+  return `mint-sidebar__rail-badge--${section.badgeTone ?? 'primary'}`
 }
 
 function tagToneClass(section: SidebarToolSection): string {
-  return `mint-sidebar__tag--${section.badgeTone ?? 'cta'}`
+  return `mint-sidebar__tag--${section.badgeTone ?? 'primary'}`
 }
 
 function actionClasses(action: SidebarToolSectionAction): string[] {

package/src/components/CollapsibleCard.vue

@@ -23,7 +23,7 @@ interface Props {
 
 const props = withDefaults(defineProps<Props>(), {
   badge: undefined,
-  badgeTone: 'cta',
+  badgeTone: 'primary',
   defaultOpen: false,
   disabled: false,
   dense: false,

package/src/components/ConfirmDialog.vue

@@ -41,7 +41,7 @@ function handleConfirm() {
 
 const confirmVariant = computed<ButtonVariant>(() => {
   if (props.tone === 'error') return 'danger'
-  if (props.tone === 'warning' || props.tone === 'cta') return 'cta'
+  if (props.tone === 'warning' || props.tone === 'cta') return 'primary'
   if (props.tone === 'success') return 'success'
   return 'primary'
 })

package/src/components/ExperimentSelectorModal.vue

@@ -53,6 +53,28 @@ function close() {
 
 const experimentStore = useExperimentStore()
 
+// The filter choices (not the search) survive a close or a page reload, so a
+// user who works on their own ongoing experiments does not pick them again.
+// One key for every plugin: all plugin pages share the platform origin. The
+// experiment type is left out, since each plugin allows its own types.
+const FILTERS_STORAGE_KEY = 'mint.experimentSelector.filters'
+const REMEMBERED_FILTERS = ['status', 'project', 'datePreset', 'mine'] as const
+
+function readRememberedFilters(): Partial<ExperimentFilters> {
+  try {
+    const saved: unknown = JSON.parse(globalThis.localStorage?.getItem(FILTERS_STORAGE_KEY) ?? '{}')
+    if (!saved || typeof saved !== 'object') return {}
+    const restored: Record<string, unknown> = {}
+    for (const key of REMEMBERED_FILTERS) {
+      const value = (saved as Record<string, unknown>)[key]
+      if (typeof value === 'string' || value === true) restored[key] = value
+    }
+    return restored as Partial<ExperimentFilters>
+  } catch {
+    return {}
+  }
+}
+
 const {
   experiments,
   filters,
@@ -68,8 +90,21 @@ const {
   experimentType: props.experimentType,
   allowedExperimentTypes: props.allowedExperimentTypes,
   withStatusCounts: true,
+  initialFilters: readRememberedFilters(),
 })
 
+watch(
+  () => REMEMBERED_FILTERS.map(key => filters[key]),
+  () => {
+    const saved = Object.fromEntries(REMEMBERED_FILTERS.filter(key => filters[key]).map(key => [key, filters[key]]))
+    try {
+      globalThis.localStorage?.setItem(FILTERS_STORAGE_KEY, JSON.stringify(saved))
+    } catch {
+      // Storage blocked (private mode): the filters last only while the page is open.
+    }
+  },
+)
+
 // Re-mounting the list on open clears its keyboard highlight.
 const openCount = ref(0)
 

package/src/components/FileUploader.vue

@@ -63,35 +63,8 @@ const maxSizeLabel = computed(() => {
   return `${props.maxSize} bytes`
 })
 
-const fileTypeMap: Record<string, { color: string; label: string }> = {
-  csv: { color: '#10B981', label: 'CSV' },
-  tsv: { color: '#10B981', label: 'TSV' },
-  xlsx: { color: '#10B981', label: 'XLSX' },
-  xls: { color: '#10B981', label: 'XLS' },
-  pdf: { color: '#EF4444', label: 'PDF' },
-  png: { color: '#8B5CF6', label: 'PNG' },
-  jpg: { color: '#8B5CF6', label: 'JPG' },
-  jpeg: { color: '#8B5CF6', label: 'JPEG' },
-  gif: { color: '#8B5CF6', label: 'GIF' },
-  svg: { color: '#8B5CF6', label: 'SVG' },
-  webp: { color: '#8B5CF6', label: 'WEBP' },
-  json: { color: '#F59E0B', label: 'JSON' },
-  xml: { color: '#F59E0B', label: 'XML' },
-  txt: { color: '#64748B', label: 'TXT' },
-  zip: { color: '#6366F1', label: 'ZIP' },
-  gz: { color: '#6366F1', label: 'GZ' },
-  py: { color: '#3B82F6', label: 'PY' },
-  js: { color: '#EAB308', label: 'JS' },
-  ts: { color: '#3B82F6', label: 'TS' },
-  fasta: { color: '#EC4899', label: 'FASTA' },
-  fastq: { color: '#EC4899', label: 'FASTQ' },
-  bam: { color: '#EC4899', label: 'BAM' },
-  vcf: { color: '#EC4899', label: 'VCF' },
-}
-
-function getFileType(filename: string): { color: string; label: string } {
-  const ext = filename.split('.').pop()?.toLowerCase() || ''
-  return fileTypeMap[ext] || { color: '#94A3B8', label: ext.toUpperCase() || 'FILE' }
+function fileTypeLabel(filename: string): string {
+  return filename.split('.').pop()?.toUpperCase() || 'FILE'
 }
 
 function validateFiles(files: FileList | File[]): File[] {
@@ -420,12 +393,7 @@ function formatFileSize(bytes: number): string {
         class="mint-file-uploader__file"
       >
         <div class="mint-file-uploader__file-info">
-          <span
-            class="mint-file-uploader__file-badge"
-            :style="{ '--badge-color': getFileType(file.name).color }"
-          >
-            {{ getFileType(file.name).label }}
-          </span>
+          <span class="mint-file-uploader__file-badge">{{ fileTypeLabel(file.name) }}</span>
           <div class="mint-file-uploader__file-meta">
             <span class="mint-file-uploader__file-name">{{ file.name }}</span>
             <span class="mint-file-uploader__file-size">{{ formatFileSize(file.size) }}</span>

package/src/components/GeneratedPluginView.vue

@@ -22,10 +22,12 @@ import {
   type GeneratedAnalysisTransport,
 } from '../composables/useJobsEndpoint'
 import AlertBox from './AlertBox.vue'
+import AppContainer from './AppContainer.vue'
 import EmptyState from './EmptyState.vue'
 import GeneratedResultRenderer from './GeneratedResultRenderer.vue'
 import LoadingSpinner from './LoadingSpinner.vue'
 import PluginWorkspaceView from './PluginWorkspaceView.vue'
+import SectionCard from './SectionCard.vue'
 import { GENERATED_JOBS_API_KEY } from './internal/generatedJobsApi'
 import { definePluginWorkspaceView } from '../composables/componentSpecs'
 import { providePluginIdentity } from '../composables/pluginIdentity'
@@ -48,6 +50,7 @@ const generated = useJobsEndpoint({
 provide(GENERATED_JOBS_API_KEY, { baseUrl: props.baseUrl, transport: props.transport })
 const activeDefinitionId = ref('')
 const selectedJobId = ref('')
+const sidebarCollapsed = ref(false)
 const valuesByDefinition = reactive<Record<string, Record<string, unknown>>>({})
 const definitions = computed(() => generated.manifest.value?.jobs ?? [])
 const activeDefinition = computed(() => (
@@ -77,12 +80,22 @@ const workspace = computed(() => definePluginWorkspaceView({
   subtitle: generated.manifest.value?.ui.subtitle || generated.manifest.value?.ui.description,
   // The platform shell renders the toasts around this view.
   toasts: false,
+  floating: true,
   topBar: {
+    variant: 'card',
     pills: pillNav.value,
+    themeToggle: true,
     settings: false,
     standaloneLabel: props.showStandaloneLabel ? 'Standalone' : false,
   },
-  sidebar: { title: 'Parameters', panels: panels.value, forms: forms.value },
+  sidebar: {
+    title: 'Parameters',
+    width: '300px',
+    collapsible: true,
+    collapsedWidth: '3rem',
+    panels: panels.value,
+    forms: forms.value,
+  },
   jobs: generated,
 }))
 
@@ -160,6 +173,7 @@ onMounted(() => {
 <template>
   <PluginWorkspaceView
     v-model:view="activeDefinitionId"
+    v-model:sidebar-collapsed="sidebarCollapsed"
     :spec="workspace"
     :values="currentValues"
     :form-loading="generated.isSubmitting.value"
@@ -168,7 +182,7 @@ onMounted(() => {
     @form-submit="submitJob"
     @job-select="selectJob"
   >
-    <main class="mint-generated-workspace">
+    <AppContainer direction="column" gap="var(--mint-gutter)" class="mint-generated-workspace">
       <div v-if="generated.isLoading.value" class="mint-generated-workspace__loading">
         <LoadingSpinner size="lg" />
         <span>Loading analysis workspace</span>
@@ -177,18 +191,15 @@ onMounted(() => {
       <template v-else>
         <AlertBox v-if="generated.error.value" tone="error">{{ generated.error.value }}</AlertBox>
 
-        <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">
+        <SectionCard :title="activeDefinition?.title ?? 'Result'">
+          <template v-if="activeDefinition" #actions>
+            <span class="mint-generated-workspace__resources" aria-label="Job resource requirements">
+              {{ resourceSummary(activeDefinition) }}
+            </span>
+          </template>
+          <p v-if="activeDefinition?.description" class="mint-generated-workspace__description">
+            {{ activeDefinition.description }}
+          </p>
           <GeneratedResultRenderer
             v-if="currentResult"
             :result="currentResult"
@@ -199,93 +210,36 @@ onMounted(() => {
             description="Set the parameters and run the analysis. Jobs continue independently if you switch tabs."
             size="md"
           />
-        </section>
+        </SectionCard>
       </template>
-    </main>
+    </AppContainer>
   </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(--bg-primary);
+  min-height: 0;
+  overflow-y: auto;
 }
 
 .mint-generated-workspace__loading {
   display: flex;
-  min-height: 24rem;
+  flex: 1;
   align-items: center;
   justify-content: center;
   gap: 0.75rem;
   color: var(--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(--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(--text-secondary);
-}
-
-.mint-generated-workspace__eyebrow {
-  margin: 0 0 0.35rem;
-  color: var(--text-secondary);
-  font-size: 0.72rem;
-  font-weight: 700;
-}
-
 .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(--border-color);
-  border-radius: 999px;
-  background: var(--bg-secondary);
-  color: var(--text-secondary);
+  color: var(--text-muted);
+  font-family: var(--font-mono);
   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(--border-color);
-  border-radius: 1rem;
-  background: var(--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;
-  }
+.mint-generated-workspace__description {
+  margin: 0 0 var(--mint-gutter);
+  color: var(--text-secondary);
 }
 </style>

package/src/components/GeneratedResultRenderer.vue

@@ -133,6 +133,7 @@ function humanize(value: string): string {
   padding: 0.75rem 1rem;
   border-radius: var(--radius-md);
   background: var(--bg-tertiary);
+  font-family: var(--font-mono);
   font-size: 0.8125rem;
   line-height: 1.55;
   white-space: pre-wrap;
@@ -152,7 +153,7 @@ function humanize(value: string): string {
   gap: 1rem;
   padding: 1rem;
   border: 1px solid var(--border-color);
-  border-radius: 0.75rem;
+  border-radius: var(--radius-lg);
   color: var(--color-primary);
   text-decoration: none;
 }

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/PlotlyChart.vue

@@ -360,7 +360,7 @@ onBeforeUnmount(() => {
   margin: 0;
   padding: 1rem;
   border: 1px solid var(--mint-error-border);
-  border-radius: 0.75rem;
+  border-radius: var(--radius-lg);
   background: var(--mint-error-bg);
   color: var(--mint-error-hover);
 }

package/src/components/PluginIcon.story.vue

@@ -52,8 +52,8 @@ function initState() {
         <HstText v-model="state.icon" title="icon" />
         <HstSelect v-model="state.size" title="size" :options="['sm', 'md', 'topbar', 'lg']" />
         <HstSelect v-model="state.variant" title="variant" :options="['solid', 'tinted']" />
-        <HstSelect v-model="state.tone" title="tone (deprecated, no effect; removed in 1.5)" :options="['', 'neutral', 'primary', 'cta', 'success', 'warning', 'error', 'info']" />
-        <HstText v-model="state.color" title="color (deprecated, no effect; removed in 1.5)" />
+        <HstSelect v-model="state.tone" title="tone (deprecated, no effect; removed in 2.0)" :options="['', 'neutral', 'primary', 'cta', 'success', 'warning', 'error', 'info']" />
+        <HstText v-model="state.color" title="color (deprecated, no effect; removed in 2.0)" />
       </template>
     </Variant>
 

package/src/components/PluginIcon.vue

@@ -18,9 +18,9 @@ interface Props {
   icon?: string
   size?: 'sm' | 'md' | 'topbar' | 'lg'
   variant?: 'solid' | 'tinted'
-  /** @deprecated v2 design: the tile is always the neutral accent-soft tile, so the tone has no visible effect. Removed in 1.5. */
+  /** @deprecated v2 design: the tile is always the neutral accent-soft tile, so the tone has no visible effect. Removed in 2.0. */
   tone?: Tone
-  /** @deprecated v2 design: the tile is always the neutral accent-soft tile, so the color has no visible effect. Removed in 1.5. */
+  /** @deprecated v2 design: the tile is always the neutral accent-soft tile, so the color has no visible effect. Removed in 2.0. */
   color?: string
 }
 

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/components/internal/AppTopBarOnboardingInternal.vue

@@ -5,7 +5,7 @@
  */
 import { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue'
 import { autoUpdate, computePosition, offset, shift } from '@floating-ui/dom'
-import { Check, CircleHelp, Play } from 'lucide-vue-next'
+import { Check, CircleHelp, Play, X } from 'lucide-vue-next'
 import { useEventListener } from '../../composables/useEventListener'
 import type { OnboardingState } from '../../composables/useOnboarding'
 import OnboardingLayerInternal from './OnboardingLayerInternal.vue'
@@ -50,6 +50,12 @@ watch(open, async (isOpen) => {
 })
 onBeforeUnmount(() => stopAutoUpdate?.())
 
+// The close button removes itself, so focus moves on to Help instead of the page.
+function hideChecklist() {
+  props.state.setChecklistHidden(true)
+  nextTick(() => helpButton.value?.focus())
+}
+
 function run(action: () => void) {
   open.value = false
   action()
@@ -66,19 +72,29 @@ useEventListener(document, 'keydown', (event) => {
 
 <template>
   <div v-if="hasContent" ref="root" class="mint-onboarding-help">
-    <button
-      v-if="state.checklistVisible.value"
-      type="button"
-      class="mint-onboarding-help__chip"
-      :class="{ 'mint-onboarding-help__chip--open': open }"
-      data-onboarding="topbar-checklist"
-      :aria-expanded="open"
-      @click="toggle"
-    >
-      Getting started
-      <span class="mint-onboarding-help__count">{{ state.tasksDone.value }}/{{ state.tasks.value.length }}</span>
-      <span class="mint-onboarding-help__bar" aria-hidden="true"><span :style="{ width: `${progress}%` }" /></span>
-    </button>
+    <span v-if="state.checklistVisible.value" class="mint-onboarding-help__chip-group">
+      <button
+        type="button"
+        class="mint-onboarding-help__chip"
+        :class="{ 'mint-onboarding-help__chip--open': open }"
+        data-onboarding="topbar-checklist"
+        :aria-expanded="open"
+        @click="toggle"
+      >
+        Getting started
+        <span class="mint-onboarding-help__count">{{ state.tasksDone.value }}/{{ state.tasks.value.length }}</span>
+        <span class="mint-onboarding-help__bar" aria-hidden="true"><span :style="{ width: `${progress}%` }" /></span>
+      </button>
+      <button
+        type="button"
+        class="mint-onboarding-help__chip-close"
+        aria-label="Hide checklist"
+        title="Hide checklist (Help can show it again)"
+        @click="hideChecklist"
+      >
+        <X :size="12" aria-hidden="true" />
+      </button>
+    </span>
     <button
       ref="helpButton"
       type="button"