@morscherlab/mint-sdk 1.4.0-beta.2 → 1.4.0-beta.21

package/src/components/LayoutResizeHandle.story.vue

@@ -3,15 +3,20 @@ import { ref } from 'vue'
 import LayoutResizeHandle from './LayoutResizeHandle.vue'
 
 const width = ref(320)
+const gapWidth = ref(320)
+const edgeWidth = ref(280)
+const height = ref(50)
+
+const panel = 'background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 0.75rem;'
+const caption = 'margin: 0 0 0.5rem; font: 0.75rem var(--font-mono); color: var(--text-secondary);'
 </script>
 
 <template>
   <Story title="Layout/LayoutResizeHandle">
     <Variant title="Keyboard splitter">
+      <!-- Directly between two panels, the handle is the gutter. -->
       <div style="display: flex; height: 16rem; padding: 2rem;">
-        <div :style="{ width: `${width}px`, background: 'var(--bg-secondary)', border: '1px solid var(--border-color)' }">
-          Panel width: {{ width }}px
-        </div>
+        <div :style="`${panel} width: ${width}px;`">Panel width: {{ width }}px</div>
         <LayoutResizeHandle
           v-model="width"
           orientation="vertical"
@@ -19,7 +24,63 @@ const width = ref(320)
           :min="240"
           :max="480"
         />
-        <div style="flex: 1; background: var(--bg-tertiary);" />
+        <div :style="`${panel} flex: 1;`" />
+      </div>
+    </Variant>
+
+    <Variant title="Gaps and edge">
+      <div style="display: grid; gap: 1.5rem; padding: 2rem;">
+        <div data-gap="flex-8">
+          <p :style="caption">flex, 8px gutter (compact), handle between the panels</p>
+          <div style="display: flex; height: 8rem; --mint-gutter: 0.5rem;">
+            <div :style="`${panel} width: ${gapWidth}px;`">Left panel</div>
+            <LayoutResizeHandle v-model="gapWidth" orientation="vertical" label="Resize left panel (8px)" :min="200" :max="480" />
+            <div :style="`${panel} flex: 1;`">Right panel</div>
+          </div>
+        </div>
+        <div data-gap="wrapper-12">
+          <p :style="caption">flex, 12px gutter, handle in a gutter-wide wrapper</p>
+          <div style="display: flex; height: 8rem; --mint-gutter: 0.75rem;">
+            <div :style="`${panel} width: ${gapWidth}px;`">Left panel</div>
+            <div style="display: flex; justify-content: center; flex-shrink: 0; width: var(--mint-gutter);">
+              <LayoutResizeHandle v-model="gapWidth" orientation="vertical" label="Resize left panel (12px)" :min="200" :max="480" />
+            </div>
+            <div :style="`${panel} flex: 1;`">Right panel</div>
+          </div>
+        </div>
+        <div data-gap="grid-8">
+          <p :style="caption">grid, 8px track</p>
+          <div :style="`display: grid; grid-template-columns: ${gapWidth}px 0.5rem 1fr; height: 8rem;`">
+            <div :style="panel">Left panel</div>
+            <LayoutResizeHandle
+              v-model="gapWidth"
+              orientation="vertical"
+              label="Resize left panel (grid)"
+              :min="200"
+              :max="480"
+              style="--mint-layout-resize-gap: 0.5rem;"
+            />
+            <div :style="panel">Right panel</div>
+          </div>
+        </div>
+        <div data-gap="edge">
+          <p :style="caption">edge="right", 12px gutter</p>
+          <div style="display: flex; gap: var(--mint-gutter); height: 8rem; --mint-gutter: 0.75rem;">
+            <aside :style="`${panel} position: relative; width: ${edgeWidth}px;`">
+              Sidebar
+              <LayoutResizeHandle v-model="edgeWidth" orientation="vertical" edge="right" label="Resize sidebar" :min="200" :max="480" />
+            </aside>
+            <div :style="`${panel} flex: 1;`">Main</div>
+          </div>
+        </div>
+        <div data-gap="horizontal">
+          <p :style="caption">horizontal, 8px gutter</p>
+          <div style="display: flex; flex-direction: column; height: 14rem; --mint-gutter: 0.5rem;">
+            <div :style="`${panel} flex: 0 0 ${height}%;`">Top panel</div>
+            <LayoutResizeHandle v-model="height" orientation="horizontal" label="Resize top panel" :min="20" :max="80" :step="1" />
+            <div :style="`${panel} flex: 1;`">Bottom panel</div>
+          </div>
+        </div>
       </div>
     </Variant>
   </Story>

package/src/components/LoadingSpinner.vue

@@ -40,7 +40,7 @@ withDefaults(defineProps<Props>(), {
       <path
         style="opacity: 0.75"
         fill="currentColor"
-        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
       />
     </svg>
     <span class="mint-spinner__label">{{ label }}</span>

package/src/components/NumberInput.vue

@@ -10,6 +10,7 @@
  * ```
  */
 import { computed, onBeforeUnmount, useAttrs, type StyleValue } from 'vue'
+import { ChevronDown, ChevronUp } from 'lucide-vue-next'
 import type { UnitOption } from '../types'
 import NumberUnitInputInternal from './internal/NumberUnitInputInternal.vue'
 
@@ -287,9 +288,7 @@ function handleScrubStart(event: PointerEvent) {
           class="mint-number-input__stepper mint-number-input__stepper--down"
           @click="decrement"
         >
-          <svg viewBox="0 0 10 10" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round">
-            <path d="M2 5h6" />
-          </svg>
+          <ChevronDown :size="12" :stroke-width="2.25" />
         </button>
         <button
           type="button"
@@ -299,9 +298,7 @@ function handleScrubStart(event: PointerEvent) {
           class="mint-number-input__stepper mint-number-input__stepper--up"
           @click="increment"
         >
-          <svg viewBox="0 0 10 10" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round">
-            <path d="M5 2v6" /><path d="M2 5h6" />
-          </svg>
+          <ChevronUp :size="12" :stroke-width="2.25" />
         </button>
       </div>
     </div>

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" :options="['', 'neutral', 'primary', 'cta', 'success', 'warning', 'error', 'info']" />
-        <HstText v-model="state.color" title="color (CSS color)" />
+        <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)" />
       </template>
     </Variant>
 
@@ -94,13 +94,5 @@ function initState() {
         <PluginIcon :icon="SAMPLE_STRUCTURED" size="lg" />
       </div>
     </Variant>
-
-    <Variant title="Tone overrides">
-      <div style="padding: 2rem; display: flex; gap: 1rem; align-items: center;">
-        <PluginIcon :icon="SAMPLE_PATH" size="lg" variant="solid" color="#0EA5E9" />
-        <PluginIcon :icon="SAMPLE_PATH" size="lg" variant="solid" color="#F97316" />
-        <PluginIcon :icon="SAMPLE_PATH" size="lg" variant="solid" color="#22C55E" />
-      </div>
-    </Variant>
   </Story>
 </template>

package/src/components/PluginIcon.vue

@@ -18,9 +18,9 @@ interface Props {
   icon?: string
   size?: 'sm' | 'md' | 'topbar' | 'lg'
   variant?: 'solid' | 'tinted'
-  /** Semantic color; without it the chip uses the primary color. */
+  /** @deprecated v2 design: the tile is always the neutral accent-soft tile, so the tone has no visible effect. Removed in 1.5. */
   tone?: Tone
-  /** Custom chip color (any CSS color, such as a plugin's manifest color); replaces the tone. */
+  /** @deprecated v2 design: the tile is always the neutral accent-soft tile, so the color has no visible effect. Removed in 1.5. */
   color?: string
 }
 

package/src/components/PluginWorkspaceView.props.ts

@@ -4,6 +4,7 @@ import type {
   PillNavOption,
   PluginWorkspaceViewSpec,
 } from '../types'
+import type { JobState } from '../types/jobs'
 import type {
   ControlComponentBinding,
   ControlComponentBindingsById,
@@ -46,6 +47,8 @@ export interface PluginWorkspaceViewEmits {
   'section-action': [sectionId: string, actionId: string]
   'form-submit': [sectionId: string, values: Record<string, unknown>]
   'form-cancel': [sectionId: string]
+  /** A job row in the jobs tray, or the just-completed job on the top-bar chip, was chosen. */
+  'job-select': [job: JobState]
 }
 
 /** Typed `emit` function shape produced by `defineEmits<PluginWorkspaceViewEmits>()`. */

package/src/components/PluginWorkspaceView.story.vue

@@ -274,7 +274,7 @@ async function saveDoseDesign() {
           </PluginWorkspaceView>
           <p
             v-if="lastExperimentEvent"
-            style="padding: 0.75rem 1rem; margin: 0; font-family: 'Fira Code', monospace; font-size: 0.75rem; color: var(--text-muted);"
+            style="padding: 0.75rem 1rem; margin: 0; font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-muted);"
           >
             Last shell event: {{ lastExperimentEvent }}
           </p>

package/src/components/PluginWorkspaceView.vue

@@ -20,9 +20,12 @@ import type {
   PillNavItem,
   PillNavOption,
 } from '../types'
+import type { JobState } from '../types/jobs'
 import { useAppExperiment } from '../composables/useAppExperiment'
+import { useJobCenter } from '../composables/useJobCenter'
 import { usePluginWorkspace } from '../composables/usePluginWorkspace'
 import AppToastContainer from './AppToastContainer.vue'
+import JobsStatusTray from './JobsStatusTray.vue'
 import WorkspaceControlsInternal from './internal/WorkspaceControlsInternal.vue'
 import WorkspaceShellInternal from './internal/WorkspaceShellInternal.vue'
 import WorkspaceSidebarInternal from './internal/WorkspaceSidebarInternal.vue'
@@ -76,6 +79,14 @@ if (props.spec.experiment) {
   })
 }
 
+// The job center is setup-time structure too: no `jobs`, no jobs control.
+const jobs = props.spec.jobs
+const jobCenter = jobs ? useJobCenter({ source: jobs }) : null
+
+function handleJobSelect(job: JobState) {
+  emit('job-select', job)
+}
+
 const {
   shell,
   sidebar,
@@ -105,6 +116,11 @@ function handleFormCancel(sectionId: string) {
 <template>
   <WorkspaceShellInternal
     :shell="shell"
+    :job="jobCenter ? jobCenter.topBarJob.value : undefined"
+    :jobs-done="jobCenter?.completedCount.value"
+    :jobs-open="jobCenter?.isOpen.value"
+    :jobs-panel-id="jobCenter?.panelId"
+    @job-click="jobCenter?.handleTopBarClick(handleJobSelect)"
     @pill-select="handlePillSelect"
     @pill-option-select="(option: PillNavOption, item: PillNavItem) => emit('pill-option-select', option, item)"
     @settings-values-change="emit('settings-values-change', $event)"
@@ -158,6 +174,7 @@ function handleFormCancel(sectionId: string) {
         </template>
       </WorkspaceControlsInternal>
       <AppToastContainer v-if="spec.toasts !== false" />
+      <JobsStatusTray v-if="jobCenter" :center="jobCenter" @select="handleJobSelect" />
     </template>
   </WorkspaceShellInternal>
 </template>

package/src/components/RuntimeUpdateNotice.vue

@@ -41,7 +41,7 @@ const emit = defineEmits<{
 
 .mint-runtime-update button {
   padding: 5px 9px;
-  color: #fff;
+  color: var(--text-on-accent);
   background: var(--color-primary);
   border: 0;
   border-radius: 6px;

package/src/components/SampleSelector.story.vue

@@ -21,6 +21,13 @@ const mockGroups: SampleGroup[] = [
   { name: 'Vehicle', color: '#F59E0B', samples: ['Vehicle_Rep1', 'Vehicle_Rep2', 'Vehicle_Rep3'] },
 ]
 
+// 1024 selected runs in two groups: the long count must not push the actions out.
+const manyRuns = Array.from({ length: 1024 }, (_, i) => `Run_${String(i + 1).padStart(4, '0')}`)
+const manyGroups: SampleGroup[] = [
+  { name: 'Batch A', color: '#3B82F6', samples: manyRuns.slice(0, 512) },
+  { name: 'Batch B', color: '#10B981', samples: manyRuns.slice(512) },
+]
+
 const manualSamples = [
   'Pt001_TumorA_d7_rep1',
   'Pt001_TumorA_d7_rep1_reseq2024',
@@ -135,13 +142,21 @@ function handleSmartGroup(result: AutoGroupResult, state: { groups: SampleGroup[
       </div>
     </Variant>
 
-    <Variant title="Narrow Action Bar">
-      <div style="padding: 2rem; width: 320px;">
-        <SampleSelector
-          :model-value="['Control_Rep1']"
-          :samples="mockSamples"
-          :groups="mockGroups"
-        />
+    <Variant title="Narrow Header">
+      <!-- At 17.625rem of header content width and below, the grouping button shows only its icon and the count shortens. -->
+      <div style="display: flex; align-items: flex-start; gap: 2rem; padding: 2rem;">
+        <div v-for="width in [220, 300, 340]" :key="width" :data-width="width" :style="{ width: `${width}px` }">
+          <p style="margin: 0 0 0.5rem; font: 0.75rem var(--font-mono); color: var(--text-secondary);">{{ width }}px</p>
+          <SampleSelector
+            :model-value="['Control_Rep1']"
+            :samples="mockSamples"
+            :groups="mockGroups"
+          />
+        </div>
+        <div data-width="320-long" style="width: 320px; height: 22rem;">
+          <p style="margin: 0 0 0.5rem; font: 0.75rem var(--font-mono); color: var(--text-secondary);">320px, 1024 selected</p>
+          <SampleSelector :model-value="manyRuns" :samples="manyRuns" :groups="manyGroups" />
+        </div>
       </div>
     </Variant>
 

package/src/components/SampleSelector.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 /** Interactive sample list with drag-and-drop group assignment, color labeling, and smart-group support. */
 import { ref, computed } from 'vue'
+import { Layers, RotateCcw, WandSparkles } from 'lucide-vue-next'
 import BaseButton from './BaseButton.vue'
 import BaseCheckbox from './BaseCheckbox.vue'
 import BaseInput from './BaseInput.vue'
@@ -255,6 +256,8 @@ function addNewGroup() {
   newGroupName.value = ''
 }
 
+const groupingLabel = computed(() => (props.enableSmartGroup ? 'Smart group' : 'Group'))
+
 /** Selected samples among the resolved list, for the select-all header. */
 const selectedCount = computed(() => resolvedSamples.value.filter(s => props.modelValue.includes(s)).length)
 
@@ -268,6 +271,36 @@ defineExpose({ handleSmartGroupApply })
 
 <template>
   <div class="mint-sample-selector">
+    <div class="mint-sample-selector__header">
+      <span class="mint-sample-selector__title">Samples</span>
+      <!-- A narrow selector shows "N sel."; screen readers keep "N selected". -->
+      <span class="mint-sample-selector__selected">
+        <span class="mint-sample-selector__selected-full">{{ selectedCount }} selected</span>
+        <span class="mint-sample-selector__selected-short" aria-hidden="true">{{ selectedCount }} sel.</span>
+      </span>
+      <div v-if="!isPlaceholderState && enableGrouping" class="mint-sample-selector__header-actions">
+        <BaseButton
+          variant="ghost"
+          size="sm"
+          :icon="enableSmartGroup ? WandSparkles : Layers"
+          :title="groupingLabel"
+          class="mint-sample-selector__action-btn mint-sample-selector__group-btn"
+          @click="openGroupingModal(groupingActionMode)"
+        >
+          {{ groupingLabel }}
+        </BaseButton>
+        <BaseButton
+          v-if="internalGroups.length > 0"
+          variant="ghost"
+          size="sm"
+          :icon="RotateCcw"
+          label="Clear all groups"
+          class="mint-sample-selector__action-btn"
+          @click="clearGroups"
+        />
+      </div>
+    </div>
+
     <div v-if="error" class="mint-sample-selector__state">
       <slot name="error" :error="error">
         <DataStateInternal state="error" size="sm" :title="error" />
@@ -302,43 +335,7 @@ defineExpose({ handleSmartGroupApply })
         @update:model-value="toggleSelectAll"
       />
       <span class="mint-sample-selector__select-all-label">All samples</span>
-      <span class="mint-sample-selector__select-all-count">{{ selectedCount }} / {{ resolvedSamples.length }}</span>
-    </div>
-
-    <!-- Action Buttons Row -->
-    <div v-if="!isPlaceholderState && enableGrouping" class="mint-sample-selector__actions">
-      <div class="mint-sample-selector__actions-row">
-        <!-- Grouping Button -->
-        <BaseButton
-          :variant="enableSmartGroup && groupingEnabled ? 'primary' : 'secondary'"
-          size="sm"
-          :disabled="resolvedSamples.length === 0"
-          class="mint-sample-selector__action-btn"
-          @click="openGroupingModal(groupingActionMode)"
-        >
-          <svg v-if="enableSmartGroup" class="mint-sample-selector__action-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
-          </svg>
-          <svg v-else class="mint-sample-selector__action-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3 3 7.5l9 4.5 9-4.5L12 3ZM3 12l9 4.5 9-4.5M3 16.5l9 4.5 9-4.5" />
-          </svg>
-          <span class="mint-sample-selector__action-label">Grouping</span>
-        </BaseButton>
-
-        <!-- Reset Button -->
-        <BaseButton
-          variant="ghost"
-          size="sm"
-          :disabled="internalGroups.length === 0"
-          class="mint-sample-selector__action-btn mint-sample-selector__action-btn--reset"
-          @click="clearGroups"
-          title="Clear all groups"
-        >
-          <svg class="mint-sample-selector__action-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
-          </svg>
-        </BaseButton>
-      </div>
+      <span class="mint-sample-selector__select-all-count">{{ selectedCount }}/{{ resolvedSamples.length }}</span>
     </div>
 
     <!-- Grouped View -->

package/src/components/SampleSelectorGroupNode.vue

@@ -153,7 +153,7 @@ function onHeaderKeydown(event: KeyboardEvent) {
         :title="node.group?.name ?? node.label"
       >{{ node.label }}</span>
 
-      <span class="mint-sample-selector__count-badge">{{ selectedCount }} / {{ node.allSamples.length }}</span>
+      <span class="mint-sample-selector__count-badge">{{ selectedCount }}/{{ node.allSamples.length }}</span>
 
       <button
         type="button"

package/src/components/SectionCard.story.vue

@@ -46,7 +46,7 @@ function initPlayground() {
               >
                 <span style="flex: 1; min-width: 0">
                   <span style="display: block; font-size: 0.8125rem; font-weight: 500; color: var(--text-primary)">{{ e.name }}</span>
-                  <span style="display: block; font-family: 'Fira Code', monospace; font-size: 0.65625rem; color: var(--text-muted)">{{ e.code }}</span>
+                  <span style="display: block; font-family: var(--font-mono); font-size: 0.65625rem; color: var(--text-muted)">{{ e.code }}</span>
                 </span>
                 <span style="flex-shrink: 0; font-size: 0.71875rem; color: var(--text-muted)">{{ e.updated }}</span>
               </a>
@@ -107,6 +107,39 @@ function initPlayground() {
       </div>
     </Variant>
 
+    <Variant title="Rows with lead">
+      <div style="padding: 2rem; max-width: 600px; display: grid; gap: 1rem;">
+        <SectionCard title="Experiments" count="3 total" :icon="flaskIcon" accent="experiment" uppercase>
+          <div class="mint-section-card__rows">
+            <a v-for="e in experiments" :key="e.code" href="#" class="mint-section-card__row">
+              <span class="mint-section-card__row-lead">
+                <span style="width: 0.375rem; height: 0.375rem; border-radius: 50%; background: var(--mint-success)" />
+              </span>
+              <span style="flex: 1; min-width: 0">
+                <span style="display: block; font-size: 0.8125rem; font-weight: 500; color: var(--text-primary)">{{ e.name }}</span>
+                <span style="display: block; font-family: var(--font-mono); font-size: 0.65625rem; color: var(--text-muted)">{{ e.code }}</span>
+              </span>
+              <span style="flex-shrink: 0; font-size: 0.71875rem; color: var(--text-muted)">{{ e.updated }}</span>
+            </a>
+          </div>
+        </SectionCard>
+        <SectionCard title="Projects" count="2 active" :icon="folderIcon" accent="project" uppercase>
+          <div class="mint-section-card__rows">
+            <a href="#" class="mint-section-card__row">
+              <span class="mint-section-card__row-lead" aria-hidden="true" />
+              <span style="flex: 1; font-size: 0.8125rem; font-weight: 500; color: var(--text-primary)">Hypoxia metabolic rewiring</span>
+              <span style="font-size: 0.71875rem; color: var(--text-muted)">12 experiments</span>
+            </a>
+            <a href="#" class="mint-section-card__row">
+              <span class="mint-section-card__row-lead" aria-hidden="true" />
+              <span style="flex: 1; font-size: 0.8125rem; font-weight: 500; color: var(--text-primary)">Serine one-carbon flux</span>
+              <span style="font-size: 0.71875rem; color: var(--text-muted)">7 experiments</span>
+            </a>
+          </div>
+        </SectionCard>
+      </div>
+    </Variant>
+
     <Variant title="Detail card with footer">
       <div style="padding: 2rem; max-width: 600px;">
         <SectionCard title="Analysis artifacts" :count="4" divider="light">
@@ -139,7 +172,7 @@ function initPlayground() {
           <div class="mint-section-card__rows">
             <div v-for="n in 20" :key="n" class="mint-section-card__row">
               <span style="flex: 1; font-size: 0.8125rem; color: var(--text-primary)">Row {{ n }}</span>
-              <span style="font-family: 'Fira Code', monospace; font-size: 0.71875rem; color: var(--text-muted)">MM-2026-{{ String(n).padStart(3, '0') }}</span>
+              <span style="font-family: var(--font-mono); font-size: 0.71875rem; color: var(--text-muted)">MM-2026-{{ String(n).padStart(3, '0') }}</span>
             </div>
           </div>
           <template #footer>

package/src/components/SequenceProgressBar.story.vue

@@ -40,6 +40,7 @@ function initState() {
     showEta: true,
     showRemaining: true,
     label: 'samples',
+    failed: 0,
   }
 }
 </script>
@@ -60,6 +61,7 @@ function initState() {
             :label="state.label"
             :show-eta="state.showEta"
             :show-remaining="state.showRemaining"
+            :failed="state.failed"
           />
         </div>
       </template>
@@ -69,6 +71,7 @@ function initState() {
         <HstNumber v-model="state.total" title="Total samples" />
         <HstNumber v-model="state.remaining" title="Remaining (s)" />
         <HstText v-model="state.label" title="Unit label" />
+        <HstNumber v-model="state.failed" title="Failed" />
         <HstCheckbox v-model="state.compact" title="Compact" />
         <HstCheckbox v-model="state.showEta" title="Show ETA" />
         <HstCheckbox v-model="state.showRemaining" title="Show remaining" />
@@ -81,6 +84,12 @@ function initState() {
       </div>
     </Variant>
 
+    <Variant title="With failures">
+      <div style="padding: 2rem; max-width: 600px;">
+        <SequenceProgressBar :progress="running" :failed="1" />
+      </div>
+    </Variant>
+
     <Variant title="Compact (no footer)">
       <!-- Compact drops the remaining/ETA row for dense instrument tables. -->
       <div style="padding: 2rem; max-width: 600px;">

package/src/components/SequenceProgressBar.vue

@@ -15,6 +15,8 @@ interface Props {
   label?: string
   showEta?: boolean
   showRemaining?: boolean
+  /** Failed injections so far; shown as "N failed" in the head when above 0. */
+  failed?: number
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -22,6 +24,7 @@ const props = withDefaults(defineProps<Props>(), {
   label: 'samples',
   showEta: true,
   showRemaining: true,
+  failed: 0,
 })
 
 const percent = computed(() => sequenceProgressPercent(props.progress))
@@ -37,8 +40,10 @@ const hasFooter = computed(() => {
   <div class="mint-sequence-progress">
     <div class="mint-sequence-progress__header">
       <span class="mint-sequence-progress__label">
-        {{ progress.current_sample }} / {{ progress.total_samples }} {{ label }}
+        <span class="mint-sequence-progress__count">{{ progress.current_sample }} / {{ progress.total_samples }}</span>
+        {{ label }}
       </span>
+      <span v-if="failed > 0" class="mint-sequence-progress__failed">{{ failed }} failed</span>
       <span class="mint-sequence-progress__percent">{{ percent }}%</span>
     </div>
 

package/src/components/SettingsModal.schema.ts

@@ -17,7 +17,7 @@ export const APPEARANCE_TAB: SettingsTab = {
   // Heroicons "swatch" — the built-in tab sits beside plugin tabs that all
   // carry icons, so it needs one of its own to keep the rail consistent.
   icon: '<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4.098 19.902a3.75 3.75 0 0 0 5.304 0l6.401-6.402M6.75 21A3.75 3.75 0 0 1 3 17.25V4.125C3 3.504 3.504 3 4.125 3h5.25c.621 0 1.125.504 1.125 1.125v4.072M6.75 21a3.75 3.75 0 0 0 3.75-3.75V8.197M6.75 21h13.125c.621 0 1.125-.504 1.125-1.125v-5.25c0-.621-.504-1.125-1.125-1.125h-4.072M10.5 8.197l2.88-2.88c.438-.439 1.15-.439 1.59 0l3.712 3.713c.44.44.44 1.152 0 1.59l-2.879 2.88M6.75 17.25h.008v.008H6.75v-.008Z"></path></svg>',
-  description: 'Theme, color palette, and table density',
+  description: 'Theme, color palette, and density',
 }
 
 // Map settings groups onto the form-builder's flat-section shape.

package/src/components/SettingsModal.vue

@@ -358,13 +358,8 @@ const themeOptions: { value: ThemeMode; label: string; halves: ('light' | 'dark'
   { value: 'system', label: 'System', halves: ['light', 'dark'] },
 ]
 
-/** Five stops along the palette's primary → accent hue arc (shortest way round), as in the board. */
-function paletteSwatches(key: ColorPalette): string[] {
-  const [from, to] = colorPalettes[key].hues
-  const span = ((to - from + 540) % 360) - 180
-  const tone = key === 'pastel' ? '60% 72%' : '65% 48%'
-  return Array.from({ length: 5 }, (_, i) => `hsl(${Math.round(from + (span * i) / 4)} ${tone})`)
-}
+/** Accent tokens a palette swatch shows; `data-palette` on the strip resolves them per palette. */
+const paletteSwatchTokens = ['--color-primary', '--color-primary-hover', '--color-primary-soft', '--color-primary-border']
 
 const densityPreviewRows = [
   ['S-0012', '2.41', '12.5'],
@@ -562,7 +557,7 @@ function canShowForCurrentUser(item: AccessControlled): boolean {
         <div class="mint-settings-modal__setting">
           <div class="mint-settings-modal__setting-text">
             <span class="mint-settings-modal__setting-label">Color palette</span>
-            <span class="mint-settings-modal__setting-hint">Primary and accent hues across the interface</span>
+            <span class="mint-settings-modal__setting-hint">Accent colour across the interface</span>
           </div>
           <div class="mint-settings-modal__palettes">
             <button
@@ -573,12 +568,12 @@ function canShowForCurrentUser(item: AccessControlled): boolean {
               :class="['mint-settings-modal__palette', { 'mint-settings-modal__palette--active': settings.colorPalette === key }]"
               @click="settings.colorPalette = key as ColorPalette"
             >
-              <span class="mint-settings-modal__swatches" aria-hidden="true">
+              <span class="mint-settings-modal__swatches" :data-palette="key" aria-hidden="true">
                 <span
-                  v-for="color in paletteSwatches(key as ColorPalette)"
-                  :key="color"
+                  v-for="token in paletteSwatchTokens"
+                  :key="token"
                   class="mint-settings-modal__swatch"
-                  :style="{ backgroundColor: color }"
+                  :style="{ backgroundColor: `var(${token})` }"
                 />
               </span>
               <span class="mint-settings-modal__palette-name">{{ palette.name }}</span>
@@ -591,8 +586,8 @@ function canShowForCurrentUser(item: AccessControlled): boolean {
 
         <div class="mint-settings-modal__setting mint-settings-modal__setting--inline">
           <div class="mint-settings-modal__setting-text">
-            <span class="mint-settings-modal__setting-label">Table density</span>
-            <span class="mint-settings-modal__setting-hint">Adjusts row height in data tables</span>
+            <span class="mint-settings-modal__setting-label">Density</span>
+            <span class="mint-settings-modal__setting-hint">Adjusts control and table row height</span>
           </div>
           <SegmentedControl
             :model-value="settings.tableDensity"

package/src/components/SmartGroupFieldRecipe.story.vue

@@ -51,7 +51,7 @@ import type { FieldRecipeApplyPayload } from './SmartGroup.types'
 }
 .sg-story__log {
   margin: 0;
-  font-family: 'Fira Code', monospace;
+  font-family: var(--font-mono);
   font-size: 0.8125rem;
   color: var(--text-secondary, #64748b);
 }

package/src/components/SmartGroupManual.story.vue

@@ -48,7 +48,7 @@ import type { ManualDonePayload } from './SmartGroup.types'
 }
 .sg-story__log {
   margin: 0;
-  font-family: 'Fira Code', monospace;
+  font-family: var(--font-mono);
   font-size: 0.8125rem;
   color: var(--text-secondary, #64748b);
 }