@morscherlab/mint-sdk 1.0.39 → 1.0.42

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

@@ -12,9 +12,12 @@ import {
   resolvePluginBaseUrl,
   uploadPluginEndpoint,
   useCurrentExperiment,
+  usePluginEventStream,
   usePluginClient,
+  usePluginSettings,
   type PluginContract,
 } from '../../composables/usePluginClient'
+import { useAuthStore } from '../../stores/auth'
 
 const contract: PluginContract = {
   schemaVersion: 1,
@@ -32,6 +35,8 @@ describe('usePluginClient', () => {
   let requestBodies: unknown[] = []
   let nextGetError: Error | null = null
   let nextGetData: unknown
+  let nextPatchData: unknown
+  let nextPutData: unknown
 
   beforeEach(() => {
     setActivePinia(createPinia())
@@ -39,6 +44,8 @@ describe('usePluginClient', () => {
     requestBodies = []
     nextGetError = null
     nextGetData = undefined
+    nextPatchData = undefined
+    nextPutData = undefined
     vi.spyOn(axios.Axios.prototype, 'get').mockImplementation(async function (
       this: unknown,
       url: string,
@@ -58,6 +65,26 @@ describe('usePluginClient', () => {
       requestBodies.push(data)
       return { data: { called: url } }
     })
+    vi.spyOn(axios.Axios.prototype, 'patch').mockImplementation(async function (
+      this: unknown,
+      url: string,
+      data?: unknown,
+      config?: AxiosRequestConfig,
+    ) {
+      requestConfigs.push({ url, ...config })
+      requestBodies.push(data)
+      return { data: nextPatchData ?? { called: url } }
+    })
+    vi.spyOn(axios.Axios.prototype, 'put').mockImplementation(async function (
+      this: unknown,
+      url: string,
+      data?: unknown,
+      config?: AxiosRequestConfig,
+    ) {
+      requestConfigs.push({ url, ...config })
+      requestBodies.push(data)
+      return { data: nextPutData ?? { called: url } }
+    })
     vi.spyOn(axios.Axios.prototype, 'delete').mockImplementation(async function (
       this: unknown,
       url: string,
@@ -353,21 +380,18 @@ describe('usePluginClient', () => {
         label: 'Dashboard',
         to: '/',
         icon: 'DASHBOARD_ICON',
-        hint: 'Overview',
       },
       {
         id: 'dose-design',
         label: 'Dose Design',
         to: '/dose-design',
         icon: 'PLUGIN_ICON',
-        hint: 'Dose Designer',
       },
       {
         id: 'qc-review',
         label: 'QC Review',
         to: '/qc/review',
         icon: 'QC_ICON',
-        hint: 'Dose Designer',
       },
     ])
     expect(requestConfigs).toHaveLength(0)
@@ -396,6 +420,108 @@ describe('usePluginClient', () => {
     expect(requestConfigs).toHaveLength(0)
   })
 
+  it('loads and saves plugin settings through the integrated platform config endpoint', async () => {
+    ;(window as unknown as { __MINT_PLATFORM__?: unknown }).__MINT_PLATFORM__ = {
+      isIntegrated: true,
+      theme: 'light',
+      platformApiUrl: '/api',
+      plugin: {
+        id: 'drp',
+        name: 'drp',
+        version: '1.0.0',
+        route_prefix: '/drp',
+        api_prefix: '/api/drp',
+      },
+    }
+    nextGetData = { plugin_name: 'drp', config: { nasBasePath: '/data' } }
+    nextPatchData = { plugin_name: 'drp', config: { nasBasePath: '/mnt' } }
+
+    const settings = usePluginSettings<{ nasBasePath?: string }>({ pluginName: 'drp' })
+    await settings.load()
+
+    expect(requestConfigs[0]!.baseURL).toBe('/api')
+    expect(requestConfigs[0]!.url).toBe('/plugins/drp/config')
+    expect(settings.values.value).toEqual({ nasBasePath: '/data' })
+    expect(settings.settings.value).toEqual({ nasBasePath: '/data' })
+    expect(settings.isDirty.value).toBe(false)
+
+    settings.setValues({ nasBasePath: '/mnt' })
+    expect(settings.isDirty.value).toBe(true)
+    const ok = await settings.save()
+
+    expect(ok).toBe(true)
+    expect(requestConfigs[1]!.baseURL).toBe('/api')
+    expect(requestConfigs[1]!.url).toBe('/plugins/drp/config')
+    expect(requestBodies[0]).toEqual({ config: { nasBasePath: '/mnt' } })
+    expect(settings.values.value).toEqual({ nasBasePath: '/mnt' })
+    expect(settings.isDirty.value).toBe(false)
+  })
+
+  it('loads and saves plugin settings through the standalone settings router', async () => {
+    nextGetData = { settings: { nas_base_path: '/data' }, mode: 'standalone' }
+    nextPutData = { settings: { nas_base_path: '/mnt' }, mode: 'standalone' }
+
+    const settings = usePluginSettings<{ nas_base_path?: string }>({
+      apiBaseUrl: '/api/drp',
+      loadOnMount: false,
+    })
+    await settings.load()
+    const ok = await settings.save({ nas_base_path: '/mnt' })
+
+    expect(ok).toBe(true)
+    expect(requestConfigs[0]!.baseURL).toBe('/api/drp')
+    expect(requestConfigs[0]!.url).toBe('/settings')
+    expect(requestConfigs[1]!.baseURL).toBe('/api/drp')
+    expect(requestConfigs[1]!.url).toBe('/settings')
+    expect(requestBodies[0]).toEqual({ nas_base_path: '/mnt' })
+    expect(settings.settingsConfig.value.values).toEqual({ nas_base_path: '/mnt' })
+  })
+
+  it('streams plugin events with auth headers and SSE parsing', async () => {
+    const authStore = useAuthStore()
+    authStore.setToken('stream-token', 3600)
+    const onMessage = vi.fn()
+    const streamBody = new ReadableStream({
+      start(controller) {
+        controller.enqueue(new TextEncoder().encode('event: progress\nid: 7\ndata: {"pct":50}\n\n'))
+        controller.close()
+      },
+    })
+    const fetchMock = vi.fn(async (_url: RequestInfo | URL, _init?: RequestInit) =>
+      new Response(streamBody, { status: 200 }),
+    )
+    vi.stubGlobal('fetch', fetchMock)
+
+    const stream = usePluginEventStream<{ pct: number }>(
+      contract,
+      { method: 'get', path: '/downloads/events' },
+      {
+        parseJson: true,
+        reconnect: false,
+        onMessage,
+      },
+    )
+
+    await vi.waitFor(() => {
+      expect(onMessage).toHaveBeenCalledOnce()
+    })
+
+    expect(fetchMock).toHaveBeenCalledOnce()
+    const [url, init] = fetchMock.mock.calls[0]!
+    expect(url).toBe('/api/drp/downloads/events')
+    expect((init?.headers as Headers).get('Authorization')).toBe('Bearer stream-token')
+    expect((init?.headers as Headers).get('Accept')).toBe('text/event-stream')
+    expect(onMessage).toHaveBeenCalledWith({
+      event: 'progress',
+      data: { pct: 50 },
+      id: '7',
+      retry: undefined,
+      raw: 'event: progress\nid: 7\ndata: {"pct":50}',
+    })
+    expect(stream.lastMessage.value?.data).toEqual({ pct: 50 })
+    expect(stream.lastEventId.value).toBe('7')
+  })
+
   it('can build path-only endpoint URLs with inferred experiment ids', () => {
     window.history.replaceState({}, '', '/experiments/42/plugins/drp')
 

package/src/components/AppTopBar.navigation.ts

@@ -3,7 +3,6 @@ import type { PluginNavItem } from '../types/platform'
 
 export interface PluginNavPageSelectorOptions {
   pluginIcon?: string
-  pluginName?: string
 }
 
 export function normalizeNavPath(path?: string): string {
@@ -29,7 +28,6 @@ export function pluginNavItemToPageSelectorItem(
     label: item.label,
     to: path,
     icon: item.icon || options.pluginIcon,
-    hint: item.description || options.pluginName,
   }
 }
 

package/src/components/AppTopBar.story.vue

@@ -18,11 +18,11 @@ const samplePillNav: PillNavItem[] = [
 ]
 
 const samplePageSelector: PageSelectorItem[] = [
-  { id: 'workspace', label: 'Workspace', hint: 'Home' },
-  { id: 'experiments', label: 'Experiments', hint: '28 mine · 142 total' },
-  { id: 'projects', label: 'Projects', hint: '12 projects' },
-  { id: 'plugins', label: 'Plugins', hint: '4 installed' },
-  { id: 'admin', label: 'Admin', hint: 'Platform settings' },
+  { id: 'workspace', label: 'Workspace' },
+  { id: 'experiments', label: 'Experiments' },
+  { id: 'projects', label: 'Projects' },
+  { id: 'plugins', label: 'Plugins' },
+  { id: 'admin', label: 'Admin' },
 ]
 
 // Theme is now surfaced as a top-level icon button (show-theme-toggle),

package/src/components/AppTopBar.vue

@@ -160,7 +160,6 @@ const platformPageSelector = computed<PageSelectorItem[]>(() =>
     ? plugin.value?.nav_items?.map((item, index) =>
       pluginNavItemToPageSelectorItem(item, index, {
         pluginIcon: plugin.value?.icon,
-        pluginName: plugin.value?.name,
       })
     ) ?? []
     : [],

package/src/components/AutoGroupModal.vue

@@ -7,6 +7,7 @@ import BaseInput from './BaseInput.vue'
 import StepWizard from './StepWizard.vue'
 import LoadingSpinner from './LoadingSpinner.vue'
 import AlertBox from './AlertBox.vue'
+import SampleHierarchyTree from './SampleHierarchyTree.vue'
 import { useAutoGroup, parseCSV } from '../composables/useAutoGroup'
 import { classKey } from '../composables/autoGroup'
 import { useApi } from '../composables/useApi'
@@ -113,6 +114,12 @@ const totalQc = computed(() =>
   (autoGroup.qcGroups.value ?? []).reduce((acc, g) => acc + g.samples.length, 0),
 )
 
+// Nested experimental hierarchy (class → groupBy layers → sample leaves) for the
+// collapsible Preview tree. Expand the class roots by default so the first
+// grouping level is visible without overwhelming the panel with every sample.
+const groupTree = computed(() => autoGroup.result.value.groupTree ?? [])
+const defaultExpandedTreeIds = computed(() => groupTree.value.map(n => n.id))
+
 function cloneGroups(groups: SampleGroup[]): SampleGroup[] {
   return groups.map(group => ({
     ...group,
@@ -744,6 +751,7 @@ const isFirstStep = computed(() => currentStep.value === 0)
                 class="mint-auto-group__textarea"
                 rows="12"
                 placeholder="Paste sample names, one per line..."
+                aria-label="Sample names"
               />
               <div v-if="autoGroup.samples.value.length > 0" class="mint-auto-group__sample-count">
                 {{ autoGroup.samples.value.length }} samples
@@ -765,6 +773,7 @@ const isFirstStep = computed(() => currentStep.value === 0)
                   type="file"
                   accept=".csv,.tsv"
                   class="mint-auto-group__file-input"
+                  aria-label="Upload CSV or TSV file"
                   @change="handleFileInput"
                 />
                 <svg class="mint-auto-group__upload-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -922,6 +931,8 @@ const isFirstStep = computed(() => currentStep.value === 0)
                   :key="col.index"
                   type="button"
                   role="row"
+                  :aria-expanded="openPopoverIdx === col.index"
+                  aria-haspopup="dialog"
                   :class="[
                     'mint-auto-group__token-row',
                     openPopoverIdx === col.index ? 'mint-auto-group__token-row--active' : '',
@@ -960,12 +971,14 @@ const isFirstStep = computed(() => currentStep.value === 0)
             <div
               v-if="openPopoverIdx !== null && activeColumn"
               class="mint-auto-group__popover"
+              role="dialog"
+              :aria-label="`${activeColumn.displayName ?? activeColumn.name} column options`"
               @click.stop
             >
               <div class="mint-auto-group__popover-head">
                 <strong>{{ activeColumn.displayName ?? activeColumn.name }}</strong>
                 <span class="mono">{{ activeColumn.cardinality }} unique</span>
-                <button type="button" class="mint-auto-group__popover-close" @click="openPopoverIdx = null">×</button>
+                <button type="button" class="mint-auto-group__popover-close" aria-label="Close" @click="openPopoverIdx = null">×</button>
               </div>
 
               <div class="mint-auto-group__popover-section">
@@ -1044,24 +1057,15 @@ const isFirstStep = computed(() => currentStep.value === 0)
             <div class="mint-auto-group__preview-grid">
               <div class="mint-auto-group__preview-panel">
                 <h4>Experimental groups</h4>
-                <details
-                  v-for="group in (autoGroup.result.value.experimentalGroups ?? [])"
-                  :key="group.name"
-                  class="mint-auto-group__preview-group"
-                >
-                  <summary>
-                    <span class="mint-auto-group__preview-dot" :style="{ background: group.color }" />
-                    <span>{{ group.name }}</span>
-                    <span class="mint-auto-group__preview-count">{{ group.samples.length }}</span>
-                  </summary>
-                  <div class="mint-auto-group__preview-samples">
-                    <span
-                      v-for="s in group.samples"
-                      :key="s"
-                      class="mint-auto-group__preview-sample"
-                    >{{ s }}</span>
-                  </div>
-                </details>
+                <SampleHierarchyTree
+                  v-if="groupTree.length"
+                  :nodes="groupTree"
+                  :default-expanded-ids="defaultExpandedTreeIds"
+                  :show-icons="false"
+                  size="sm"
+                  class="mint-auto-group__preview-tree"
+                />
+                <p v-else class="mint-auto-group__preview-empty">No experimental groups.</p>
               </div>
 
               <div class="mint-auto-group__preview-panel">

package/src/components/BaseModal.story.vue

@@ -171,13 +171,9 @@ const sheetOpen = ref(false)
     </Variant>
     <Variant title="Drawer variant — right-edge detail panel">
       <div style="padding: 2rem;">
-        <button
-          type="button"
-          style="padding: 0.5rem 1rem; border-radius: 0.375rem; background: var(--color-primary); color: white; border: none; cursor: pointer;"
-          @click="drawerOpen = true"
-        >
+        <BaseButton variant="primary" @click="drawerOpen = true">
           Open drawer
-        </button>
+        </BaseButton>
         <p style="margin: 1rem 0 0; font-size: 0.8125rem; color: var(--text-muted);">
           Slides in from the right edge. Fills viewport height. For detail panels that shouldn't take over the page.
         </p>
@@ -203,20 +199,16 @@ const sheetOpen = ref(false)
           </div>
         </div>
         <template #footer>
-          <button type="button" style="padding: 0.375rem 0.875rem; border-radius: 0.375rem; background: var(--color-primary); color: white; border: none; cursor: pointer;" @click="drawerOpen = false">Close</button>
+          <BaseButton variant="primary" @click="drawerOpen = false">Close</BaseButton>
         </template>
       </BaseModal>
     </Variant>
 
     <Variant title="Sheet variant — mobile-friendly bottom sheet">
       <div style="padding: 2rem;">
-        <button
-          type="button"
-          style="padding: 0.5rem 1rem; border-radius: 0.375rem; background: var(--color-primary); color: white; border: none; cursor: pointer;"
-          @click="sheetOpen = true"
-        >
+        <BaseButton variant="primary" @click="sheetOpen = true">
           Open sheet
-        </button>
+        </BaseButton>
         <p style="margin: 1rem 0 0; font-size: 0.8125rem; color: var(--text-muted);">
           Slides up from the bottom. Top corners rounded. Grab-hint bar at top. Auto-used on &lt;768px viewports regardless of caller's variant.
         </p>
@@ -228,8 +220,8 @@ const sheetOpen = ref(false)
           <strong>Compound X · 10 µM · 24h</strong>. The change applies immediately and can be undone within 10 seconds.
         </p>
         <template #footer>
-          <button type="button" style="padding: 0.375rem 0.875rem; border-radius: 0.375rem; background: var(--bg-secondary); color: var(--text-primary); border: 1px solid var(--border-color); cursor: pointer;" @click="sheetOpen = false">Cancel</button>
-          <button type="button" style="padding: 0.375rem 0.875rem; border-radius: 0.375rem; background: var(--color-primary); color: white; border: none; cursor: pointer;" @click="sheetOpen = false">Apply</button>
+          <BaseButton variant="secondary" @click="sheetOpen = false">Cancel</BaseButton>
+          <BaseButton variant="primary" @click="sheetOpen = false">Apply</BaseButton>
         </template>
       </BaseModal>
     </Variant>

package/src/components/ExperimentDataViewer.vue

@@ -238,6 +238,7 @@ function handleDownloadCsv() {
                   :searchable="item.rows.length > 10"
                   :sortable="true"
                   :striped="true"
+                  :bordered="false"
                   size="sm"
                 />
               </div>

package/src/components/ExperimentPopover.vue

@@ -102,10 +102,11 @@ onUnmounted(() => {
           { 'mint-experiment-popover__trigger--empty': !experimentCode && !experimentName },
         ]"
         :title="experimentName || experimentCode || undefined"
+        :aria-expanded="isOpen"
         @click.stop="toggle"
       >
         <!-- Flask icon -->
-        <svg class="mint-experiment-popover__trigger-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <svg class="mint-experiment-popover__trigger-icon" aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24">
           <path
             stroke-linecap="round"
             stroke-linejoin="round"
@@ -118,7 +119,7 @@ onUnmounted(() => {
         <span v-else-if="experimentCode" class="mint-experiment-popover__trigger-code">{{ experimentCode }}</span>
         <span v-else class="mint-experiment-popover__trigger-text">No experiment</span>
         <!-- Chevron -->
-        <svg class="mint-experiment-popover__trigger-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <svg class="mint-experiment-popover__trigger-chevron" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
           <path d="m6 9 6 6 6-6" />
         </svg>
       </button>
@@ -135,16 +136,17 @@ onUnmounted(() => {
         ]"
         :disabled="saveDisabled && !showSuccess"
         :title="saveDisabled && saveDisabledMessage ? saveDisabledMessage : showSuccess && saveSuccessMessage ? saveSuccessMessage : 'Save to Experiment'"
+        aria-label="Save to experiment"
         @click.stop="handleSave"
       >
         <!-- Loading spinner -->
         <span v-if="saveLoading" class="mint-experiment-popover__spinner--inline" />
         <!-- Success check -->
-        <svg v-else-if="showSuccess" class="mint-experiment-popover__save-trigger-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <svg v-else-if="showSuccess" class="mint-experiment-popover__save-trigger-icon" aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24">
           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7" />
         </svg>
         <!-- Save icon -->
-        <svg v-else class="mint-experiment-popover__save-trigger-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <svg v-else class="mint-experiment-popover__save-trigger-icon" aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24">
           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4" />
         </svg>
       </button>

package/src/components/ExperimentSelectorModal.vue

@@ -91,6 +91,19 @@ const flatExperiments = computed(() => {
   return groupedByProject.value.flatMap(([, exps]) => exps)
 })
 
+// Stable ids so the search field (role="combobox") can expose the currently
+// arrow-highlighted row to assistive tech via aria-activedescendant. This
+// surfaces the existing keyboard model to screen readers without changing it.
+const LISTBOX_ID = 'mint-experiment-selector-listbox'
+function optionId(experiment: ExperimentSummary): string {
+  return `mint-experiment-option-${experiment.id}`
+}
+const activeDescendantId = computed(() => {
+  const exp = flatExperiments.value[activeIndex.value]
+  return activeIndex.value >= 0 && exp ? optionId(exp) : undefined
+})
+const hasResults = computed(() => !isLoading.value && !error.value && experiments.value.length > 0)
+
 function setFilter<K extends keyof ExperimentFilters>(key: K, value: string | number) {
   ;(filters as Record<string, unknown>)[key] = String(value) || undefined
 }
@@ -196,6 +209,11 @@ watch(
             placeholder="Search experiments..."
             size="sm"
             type="search"
+            role="combobox"
+            aria-label="Search experiments"
+            :aria-expanded="hasResults"
+            :aria-controls="LISTBOX_ID"
+            :aria-activedescendant="activeDescendantId"
           />
         </div>
         <div class="mint-experiment-selector__filter-select">
@@ -218,9 +236,10 @@ watch(
           class="mint-experiment-selector__filters-toggle"
           :class="{ 'mint-experiment-selector__filters-toggle--active': hasActiveAdvancedFilters }"
           type="button"
+          :aria-expanded="showAdvanced"
           @click="showAdvanced = !showAdvanced"
         >
-          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <svg aria-hidden="true" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
             <line x1="4" y1="6" x2="20" y2="6" /><line x1="8" y1="12" x2="20" y2="12" /><line x1="12" y1="18" x2="20" y2="18" />
             <circle cx="6" cy="12" r="2" /><circle cx="10" cy="18" r="2" /><circle cx="6" cy="6" r="2" />
           </svg>
@@ -290,16 +309,18 @@ watch(
       />
 
       <!-- Experiment list: grouped mode -->
-      <div v-else-if="groupToggle" ref="listRef" class="mint-experiment-selector__list">
+      <div v-else-if="groupToggle" :id="LISTBOX_ID" ref="listRef" class="mint-experiment-selector__list" role="listbox" aria-label="Experiments">
         <template v-for="([groupName, groupExps]) in groupedByProject" :key="groupName">
           <button
             type="button"
             class="mint-experiment-selector__group-header"
+            :aria-expanded="!collapsedGroups.has(groupName)"
             @click="toggleGroup(groupName)"
           >
             <svg
               class="mint-experiment-selector__group-chevron"
               :class="{ 'mint-experiment-selector__group-chevron--collapsed': collapsedGroups.has(groupName) }"
+              aria-hidden="true"
               width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
             >
               <polyline points="6 9 12 15 18 9" />
@@ -310,8 +331,11 @@ watch(
           <template v-if="!collapsedGroups.has(groupName)">
             <div
               v-for="exp in groupExps"
+              :id="optionId(exp)"
               :key="exp.id"
               class="mint-experiment-selector__row"
+              role="option"
+              :aria-selected="exp.id === currentExperimentId"
               :class="{
                 'mint-experiment-selector__row--active': exp.id === currentExperimentId,
                 'mint-experiment-selector__row--focused': getFlatIndex(exp) === activeIndex,
@@ -342,11 +366,14 @@ watch(
       </div>
 
       <!-- Experiment list: flat mode -->
-      <div v-else ref="listRef" class="mint-experiment-selector__list">
+      <div v-else :id="LISTBOX_ID" ref="listRef" class="mint-experiment-selector__list" role="listbox" aria-label="Experiments">
         <div
           v-for="(exp, idx) in experiments"
+          :id="optionId(exp)"
           :key="exp.id"
           class="mint-experiment-selector__row"
+          role="option"
+          :aria-selected="exp.id === currentExperimentId"
           :class="{
             'mint-experiment-selector__row--active': exp.id === currentExperimentId,
             'mint-experiment-selector__row--focused': idx === activeIndex,

package/src/components/IconButton.story.vue

@@ -113,6 +113,11 @@ function handleClick() {
             <line x1="12" y1="15" x2="12" y2="3" />
           </svg>
         </IconButton>
+        <IconButton label="AI" variant="ghost" @click="handleClick">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M12 3 14 10 21 12 14 14 12 21 10 14 3 12 10 10Z" />
+          </svg>
+        </IconButton>
       </div>
     </Variant>
 

package/src/components/PluginWorkspaceView.vue

@@ -208,6 +208,10 @@ 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,
@@ -270,7 +274,7 @@ function handleFormCancel(sectionId: string) {
           :variant="topBarVariant"
           :home-path="homePath"
           :show-logo="showLogo"
-          :page-selector="pageSelector"
+          :page-selector="visiblePageSelector"
           :current-page-selector-id="resolvedCurrentPageSelectorId"
           :plugin-switcher="pluginSwitcher"
           :pill-nav="resolvedPillNav"

package/src/components/SampleSelector.vue

@@ -301,12 +301,12 @@ defineExpose({ handleSmartGroupApply })
       <div class="mint-sample-selector__groups-header">
         <span class="mint-sample-selector__groups-title">Groups ({{ internalGroups.length }})</span>
         <div class="mint-sample-selector__groups-controls">
-          <button type="button" class="mint-sample-selector__expand-btn" @click="expandAllGroups" title="Expand all">
+          <button type="button" class="mint-sample-selector__expand-btn" @click="expandAllGroups" title="Expand all" aria-label="Expand all groups">
             <svg class="mint-sample-selector__expand-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
             </svg>
           </button>
-          <button type="button" class="mint-sample-selector__expand-btn" @click="collapseAllGroups" title="Collapse all">
+          <button type="button" class="mint-sample-selector__expand-btn" @click="collapseAllGroups" title="Collapse all" aria-label="Collapse all groups">
             <svg class="mint-sample-selector__expand-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
             </svg>
@@ -704,6 +704,7 @@ defineExpose({ handleSmartGroupApply })
             type="checkbox"
             :checked="modelValue.includes(sample)"
             class="mint-sample-selector__checkbox"
+            :aria-label="`Select ${sample}`"
             @change="toggleSample(sample)"
           />
           <span class="mint-sample-selector__flat-name">{{ sample }}</span>

package/src/components/SampleSelectorSampleRow.vue

@@ -40,7 +40,7 @@ const checkboxClasses = computed(() => [
     :aria-label="`Sample: ${sample}`"
     draggable="true"
   >
-    <svg class="mint-sample-selector__drag-handle" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+    <svg class="mint-sample-selector__drag-handle" aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24">
       <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8h16M4 16h16" />
     </svg>
     <input
@@ -48,6 +48,7 @@ const checkboxClasses = computed(() => [
       :checked="selected"
       :class="checkboxClasses"
       :style="accentColor ? { accentColor } : undefined"
+      :aria-label="`Select sample ${sample}`"
       @change="emit('toggle')"
     />
     <span class="mint-sample-selector__sample-name">{{ sample }}</span>
@@ -56,9 +57,10 @@ const checkboxClasses = computed(() => [
       type="button"
       class="mint-sample-selector__remove-btn"
       title="Remove from group"
+      aria-label="Remove from group"
       @click="emit('remove')"
     >
-      <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <svg aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24">
         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4" />
       </svg>
     </button>

package/src/components/internal/AppTopBarPageSelectorInternal.vue

@@ -117,7 +117,6 @@ function handleSelect(page: PageSelectorItem) {
           </slot>
         </span>
         <span class="mint-page-selector__item-label">{{ page.label }}</span>
-        <span v-if="page.hint" class="mint-page-selector__item-hint">{{ page.hint }}</span>
       </ActionItemInternal>
     </div>
   </div>

package/src/composables/autoGroup/classKey.ts

@@ -1,5 +1,8 @@
 import type { SampleClass } from '../../types/auto-group'
 
-export function classKey(c: Pick<SampleClass, 'kind'> & { subKind?: string }): string {
-  return c.subKind ? `${c.kind}:${c.subKind}` : c.kind
+export function classKey(
+  c: Pick<SampleClass, 'kind'> & { subKind?: string; tokenLength?: number },
+): string {
+  const base = c.subKind ? `${c.kind}:${c.subKind}` : c.kind
+  return c.tokenLength != null ? `${base}#${c.tokenLength}` : base
 }

package/src/composables/autoGroup/columns.ts

@@ -135,8 +135,8 @@ function inferColumnName(
   // Date-like all-digits tokens (YYMMDD or YYYYMMDD).
   if (values.every(v => /^\d{6}$/.test(v) || /^\d{8}$/.test(v))) return 'Date'
 
-  // Run-order column already has the right semantic role.
-  if (role === 'run-order') return 'Run Order'
+  // Run-order column = the trailing injection / acquisition sequence number.
+  if (role === 'run-order') return 'Injection #'
 
   // Polarity tokens (POS/NEG/positive/negative).
   if (values.every(v => /^(pos|neg|positive|negative)$/i.test(v))) return 'Polarity'