@morscherlab/mint-sdk 1.4.0-beta.7 → 1.4.0-beta.9

package/src/components/ExperimentSelectorModal.vue

@@ -7,18 +7,15 @@
  * <ExperimentSelectorModal v-model:open="open" :allowed-experiment-types="['mass-spectrometry']" />
  * ```
  */
-import { ref, computed, watch } from 'vue'
-import type { ModalSize, ExperimentSummary, ExperimentFilters } from '../types'
+import { ref, computed, watch, type Component } from 'vue'
+import { ChevronDown, CircleDot, Folder, Shapes, User } from 'lucide-vue-next'
+import type { ModalSize, ExperimentSummary, ExperimentFilters, ActionMenuItem, Tone } from '../types'
 import { useExperimentSelector } from '../composables/useExperimentSelector'
 import { useExperimentStore } from '../stores/experiment'
-import {
-  formatExperimentDate,
-  DATE_PRESET_OPTIONS,
-  SORT_OPTIONS,
-} from '../composables/experiment-utils'
+import { formatExperimentDate } from '../composables/experiment-utils'
 import * as experimentStatus from '../utils/experimentStatus'
 import BaseModal from './BaseModal.vue'
-import BaseSelect from './BaseSelect.vue'
+import ActionMenu from './ActionMenu.vue'
 import ResourcePickerListInternal from './internal/ResourcePickerListInternal.vue'
 
 interface Props {
@@ -28,16 +25,12 @@ interface Props {
   currentExperimentId?: number | null
   title?: string
   size?: ModalSize
-  groupByProject?: boolean
-  showFilters?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
   currentExperimentId: null,
   title: 'Select Experiment',
-  size: 'full',
-  groupByProject: false,
-  showFilters: false,
+  size: 'lg',
 })
 
 // Selection is committed to the shared experiment store rather than emitted.
@@ -54,55 +47,102 @@ const {
   filters,
   isLoading,
   error,
-  sortKey,
   experimentTypes,
   projects,
-  groupedByProject,
+  statusCounts,
   fetch: fetchExperiments,
   fetchFilterOptions,
+  fetchStatusCounts,
 } = useExperimentSelector({
   experimentType: props.experimentType,
   allowedExperimentTypes: props.allowedExperimentTypes,
+  withStatusCounts: true,
 })
 
-const showAdvanced = ref(props.showFilters)
-const groupToggle = ref(props.groupByProject)
-// Re-mounting the list on open clears its collapsed groups and keyboard highlight.
+// Re-mounting the list on open clears its keyboard highlight.
 const openCount = ref(0)
 
-// Track whether any advanced filter is active (for badge dot)
-const hasActiveAdvancedFilters = computed(() =>
-  !!(filters.project || filters.experimentType || filters.datePreset || sortKey.value !== 'created_at:desc'),
-)
+const STATUS_ORDER = ['ongoing', 'planned', 'completed', 'cancelled'] as const
 
-// Build type filter options from fetched experiment types
-const typeFilterOptions = computed(() => [
-  { value: '', label: 'All types' },
-  ...experimentTypes.value.map(t => ({ value: t.value, label: t.label })),
-])
 const canChooseExperimentType = computed(() =>
-  !props.experimentType && typeFilterOptions.value.length > 2,
+  !props.experimentType && experimentTypes.value.length > 1,
 )
 
-// Build project filter options from fetched projects
-const projectFilterOptions = computed(() => [
-  { value: '', label: 'All projects' },
-  ...projects.value,
-])
+type FilterKey = 'status' | 'project' | 'experimentType'
+
+interface FilterMenu {
+  key: FilterKey
+  label: string
+  icon: Component
+  items: ActionMenuItem[]
+  /** Trigger text while the filter is set. */
+  activeLabel?: string
+  dotTone?: Tone
+}
+
+/** Every item carries `checked`, so ActionMenu renders a single-choice menu. */
+function choiceItems(key: FilterKey, anyLabel: string, options: { value: string; label: string }[]): ActionMenuItem[] {
+  const current = filters[key] ?? ''
+  return [{ value: '', label: anyLabel }, ...options].map(option => ({
+    id: option.value,
+    label: option.label,
+    checked: option.value === current,
+  }))
+}
+
+const filterMenus = computed<FilterMenu[]>(() => {
+  const menus: FilterMenu[] = [{
+    key: 'status',
+    label: 'Status',
+    icon: CircleDot,
+    items: choiceItems('status', 'Any status', STATUS_ORDER.map(status => {
+      const count = statusCounts.value[status]
+      const label = experimentStatus.format(status)
+      return { value: status, label: count === undefined ? label : `${label} · ${count}` }
+    })),
+    activeLabel: filters.status ? experimentStatus.format(filters.status) : undefined,
+    dotTone: filters.status ? experimentStatus.tone(filters.status) : undefined,
+  }]
+  if (projects.value.length) {
+    menus.push({
+      key: 'project',
+      label: 'Project',
+      icon: Folder,
+      items: choiceItems('project', 'Any project', projects.value),
+      activeLabel: filters.project ?? undefined,
+    })
+  }
+  if (canChooseExperimentType.value) {
+    menus.push({
+      key: 'experimentType',
+      label: 'Type',
+      icon: Shapes,
+      items: choiceItems('experimentType', 'Any type', experimentTypes.value),
+      activeLabel: experimentTypes.value.find(t => t.value === filters.experimentType)?.label
+        ?? filters.experimentType ?? undefined,
+    })
+  }
+  return menus
+})
 
-const groups = computed(() =>
-  groupToggle.value
-    ? groupedByProject.value.map(([label, items]) => ({ label, items }))
-    : null,
+const activeFilterCount = computed(() =>
+  [filters.status, filters.project, filters.experimentType, filters.mine].filter(Boolean).length,
 )
 
+function clearFilters() {
+  filters.status = undefined
+  filters.project = undefined
+  filters.experimentType = undefined
+  filters.mine = undefined
+}
+
 function describe(experiment: ExperimentSummary) {
   const owner = experiment.created_by_user
   return {
     code: experiment.experiment_code,
     title: experiment.name,
     meta: [
-      ...(groupToggle.value ? [] : [experiment.project_name || experiment.project || '']),
+      experiment.project_name || experiment.project || '',
       owner ? [owner.first_name, owner.last_name].filter(Boolean).join(' ') || owner.username : '',
     ].filter(Boolean),
     status: experiment.status
@@ -116,10 +156,6 @@ function setFilter<K extends keyof ExperimentFilters>(key: K, value: string | nu
   ;(filters as Record<string, unknown>)[key] = String(value) || undefined
 }
 
-function handleSortChange(value: string | number) {
-  sortKey.value = String(value) || 'created_at:desc'
-}
-
 function handleSelect(experiment: ExperimentSummary) {
   experimentStore.select(experiment)
   emit('update:open', false)
@@ -138,6 +174,7 @@ watch(
       openCount.value++
       fetchFilterOptions()
       fetchExperiments()
+      fetchStatusCounts()
     }
   },
   { immediate: true },
@@ -155,10 +192,10 @@ watch(
       :key="openCount"
       :search="filters.search ?? ''"
       class="mint-experiment-selector"
+      autofocus-search
       label="Experiments"
       placeholder="Search experiments…"
       :items="experiments"
-      :groups="groups"
       :item-key="(experiment) => experiment.id"
       :describe="describe"
       :selected-key="currentExperimentId"
@@ -169,77 +206,54 @@ watch(
       @select="handleSelect"
     >
       <template #filters>
-        <div class="mint-experiment-selector__filter-select">
-          <BaseSelect
-            :model-value="filters.status ?? ''"
-            :options="experimentStatus.OPTIONS"
-            size="sm"
-            aria-label="Filter by status"
-            @update:model-value="v => setFilter('status', v)"
-          />
-        </div>
-        <div v-if="canChooseExperimentType" class="mint-experiment-selector__filter-select">
-          <BaseSelect
-            :model-value="filters.experimentType ?? ''"
-            :options="typeFilterOptions"
-            size="sm"
-            aria-label="Filter by type"
-            @update:model-value="v => setFilter('experimentType', v)"
-          />
-        </div>
+        <ActionMenu
+          v-for="menu in filterMenus"
+          :key="menu.key"
+          :label="menu.label"
+          :items="menu.items"
+          @select="item => setFilter(menu.key, item.id)"
+        >
+          <template #trigger="{ open: menuOpen, toggle, keydown }">
+            <button
+              type="button"
+              class="mint-experiment-selector__toggle"
+              :class="{ 'mint-experiment-selector__toggle--active': menu.activeLabel }"
+              :aria-label="`${menu.label}: ${menu.activeLabel ?? menu.items[0].label}`"
+              aria-haspopup="menu"
+              :aria-expanded="menuOpen"
+              @click="toggle"
+              @keydown="keydown"
+            >
+              <span
+                v-if="menu.dotTone"
+                class="mint-experiment-selector__dot"
+                :class="`mint-experiment-selector__dot--${menu.dotTone}`"
+                aria-hidden="true"
+              />
+              <component :is="menu.icon" v-else :size="13" aria-hidden="true" />
+              <span class="mint-experiment-selector__toggle-label">{{ menu.activeLabel ?? menu.label }}</span>
+              <ChevronDown :size="12" aria-hidden="true" />
+            </button>
+          </template>
+        </ActionMenu>
         <button
-          class="mint-experiment-selector__filters-toggle"
-          :class="{ 'mint-experiment-selector__filters-toggle--active': hasActiveAdvancedFilters }"
           type="button"
-          :aria-expanded="showAdvanced"
-          @click="showAdvanced = !showAdvanced"
+          class="mint-experiment-selector__toggle"
+          :class="{ 'mint-experiment-selector__toggle--active': filters.mine }"
+          :aria-pressed="!!filters.mine"
+          @click="filters.mine = filters.mine ? undefined : true"
         >
-          <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>
-          Filters
-          <span v-if="hasActiveAdvancedFilters" class="mint-experiment-selector__filters-dot" />
+          <User :size="13" aria-hidden="true" />
+          Mine
+        </button>
+        <button
+          v-if="activeFilterCount"
+          type="button"
+          class="mint-experiment-selector__clear-filters"
+          @click="clearFilters"
+        >
+          Clear {{ activeFilterCount }}
         </button>
-      </template>
-      <template #advanced>
-        <div v-if="showAdvanced" class="mint-experiment-selector__filters-advanced">
-          <div v-if="projectFilterOptions.length > 1" class="mint-experiment-selector__filter-select">
-            <BaseSelect
-              :model-value="filters.project ?? ''"
-              :options="projectFilterOptions"
-              size="sm"
-              aria-label="Filter by project"
-              @update:model-value="v => setFilter('project', v)"
-            />
-          </div>
-          <div class="mint-experiment-selector__filter-select">
-            <BaseSelect
-              :model-value="filters.datePreset ?? ''"
-              :options="DATE_PRESET_OPTIONS"
-              size="sm"
-              aria-label="Filter by date"
-              @update:model-value="v => setFilter('datePreset', v)"
-            />
-          </div>
-          <div class="mint-experiment-selector__filter-select">
-            <BaseSelect
-              :model-value="sortKey"
-              :options="SORT_OPTIONS"
-              size="sm"
-              aria-label="Sort"
-              @update:model-value="handleSortChange"
-            />
-          </div>
-          <label class="mint-experiment-selector__group-toggle">
-            <input
-              v-model="groupToggle"
-              type="checkbox"
-              class="mint-experiment-selector__group-checkbox"
-            />
-            Group by project
-          </label>
-        </div>
       </template>
     </ResourcePickerListInternal>
 

package/src/components/FormField.story.vue

@@ -15,12 +15,7 @@ import BaseInput from './BaseInput.vue'
             :required="state.required"
             :html-for="state.htmlFor"
           >
-            <input
-              :id="state.htmlFor"
-              type="text"
-              placeholder="Enter value..."
-              style="width: 100%; padding: 0.5rem 0.75rem; border: 1px solid var(--border-color, #e2e8f0); border-radius: 0.375rem; font-size: 0.875rem; background: var(--bg-primary, #fff); color: var(--text-primary, #1e293b); box-sizing: border-box;"
-            />
+            <BaseInput :id="state.htmlFor" placeholder="Enter value..." />
           </FormField>
         </div>
       </template>
@@ -39,12 +34,7 @@ import BaseInput from './BaseInput.vue'
     <Variant title="With Label">
       <div style="padding: 2rem; max-width: 400px; margin: 0 auto;">
         <FormField label="Sample Name" html-for="sample-name">
-          <input
-            id="sample-name"
-            type="text"
-            placeholder="e.g., SAMPLE-001"
-            style="width: 100%; padding: 0.5rem 0.75rem; border: 1px solid var(--border-color, #e2e8f0); border-radius: 0.375rem; font-size: 0.875rem; background: var(--bg-primary, #fff); color: var(--text-primary, #1e293b); box-sizing: border-box;"
-          />
+          <BaseInput id="sample-name" placeholder="e.g., SAMPLE-001" />
         </FormField>
       </div>
     </Variant>
@@ -52,12 +42,7 @@ import BaseInput from './BaseInput.vue'
     <Variant title="Required Field">
       <div style="padding: 2rem; max-width: 400px; margin: 0 auto;">
         <FormField label="Experiment ID" :required="true" html-for="exp-id">
-          <input
-            id="exp-id"
-            type="text"
-            placeholder="Required field"
-            style="width: 100%; padding: 0.5rem 0.75rem; border: 1px solid var(--border-color, #e2e8f0); border-radius: 0.375rem; font-size: 0.875rem; background: var(--bg-primary, #fff); color: var(--text-primary, #1e293b); box-sizing: border-box;"
-          />
+          <BaseInput id="exp-id" placeholder="Required field" />
         </FormField>
       </div>
     </Variant>
@@ -65,12 +50,7 @@ import BaseInput from './BaseInput.vue'
     <Variant title="With Hint">
       <div style="padding: 2rem; max-width: 400px; margin: 0 auto;">
         <FormField label="Concentration" hint="Enter value in micromolar (uM)" html-for="conc">
-          <input
-            id="conc"
-            type="number"
-            placeholder="0.00"
-            style="width: 100%; padding: 0.5rem 0.75rem; border: 1px solid var(--border-color, #e2e8f0); border-radius: 0.375rem; font-size: 0.875rem; background: var(--bg-primary, #fff); color: var(--text-primary, #1e293b); box-sizing: border-box;"
-          />
+          <BaseInput id="conc" inputmode="decimal" placeholder="0.00" />
         </FormField>
       </div>
     </Variant>
@@ -78,12 +58,7 @@ import BaseInput from './BaseInput.vue'
     <Variant title="With Error">
       <div style="padding: 2rem; max-width: 400px; margin: 0 auto;">
         <FormField label="Plate Barcode" error="Barcode format is invalid. Expected: PLT-XXXX-XXXX" html-for="barcode">
-          <input
-            id="barcode"
-            type="text"
-            value="invalid"
-            style="width: 100%; padding: 0.5rem 0.75rem; border: 1px solid #ef4444; border-radius: 0.375rem; font-size: 0.875rem; background: var(--bg-primary, #fff); color: var(--text-primary, #1e293b); box-sizing: border-box;"
-          />
+          <BaseInput id="barcode" model-value="invalid" invalid />
         </FormField>
       </div>
     </Variant>
@@ -91,28 +66,13 @@ import BaseInput from './BaseInput.vue'
     <Variant title="Form Example">
       <div style="padding: 2rem; max-width: 400px; margin: 0 auto; display: flex; flex-direction: column; gap: 1rem;">
         <FormField label="Experiment Name" :required="true" html-for="form-name">
-          <input
-            id="form-name"
-            type="text"
-            placeholder="Enter experiment name"
-            style="width: 100%; padding: 0.5rem 0.75rem; border: 1px solid var(--border-color, #e2e8f0); border-radius: 0.375rem; font-size: 0.875rem; background: var(--bg-primary, #fff); color: var(--text-primary, #1e293b); box-sizing: border-box;"
-          />
+          <BaseInput id="form-name" placeholder="Enter experiment name" />
         </FormField>
         <FormField label="Description" hint="Optional description for this experiment" html-for="form-desc">
-          <textarea
-            id="form-desc"
-            placeholder="Describe the experiment..."
-            rows="3"
-            style="width: 100%; padding: 0.5rem 0.75rem; border: 1px solid var(--border-color, #e2e8f0); border-radius: 0.375rem; font-size: 0.875rem; background: var(--bg-primary, #fff); color: var(--text-primary, #1e293b); resize: vertical; box-sizing: border-box;"
-          />
+          <BaseInput id="form-desc" type="textarea" placeholder="Describe the experiment..." :rows="3" />
         </FormField>
         <FormField label="Plate Count" :required="true" error="Must be between 1 and 50" html-for="form-count">
-          <input
-            id="form-count"
-            type="number"
-            value="100"
-            style="width: 100%; padding: 0.5rem 0.75rem; border: 1px solid #ef4444; border-radius: 0.375rem; font-size: 0.875rem; background: var(--bg-primary, #fff); color: var(--text-primary, #1e293b); box-sizing: border-box;"
-          />
+          <BaseInput id="form-count" inputmode="numeric" model-value="100" invalid />
         </FormField>
       </div>
     </Variant>

package/src/components/GeneratedPluginView.vue

@@ -29,6 +29,7 @@ import LoadingSpinner from './LoadingSpinner.vue'
 import PluginWorkspaceView from './PluginWorkspaceView.vue'
 import { GENERATED_JOBS_API_KEY } from './internal/generatedJobsApi'
 import { definePluginWorkspaceView } from '../composables/componentSpecs'
+import { providePluginIdentity } from '../composables/pluginIdentity'
 
 interface Props {
   baseUrl: string
@@ -74,7 +75,7 @@ const forms = computed<Record<string, FormSchema>>(() => Object.fromEntries(
 
 const workspace = computed(() => definePluginWorkspaceView({
   title: generated.manifest.value?.ui.title ?? 'Analysis',
-  subtitle: generated.manifest.value?.ui.description,
+  subtitle: generated.manifest.value?.ui.subtitle || generated.manifest.value?.ui.description,
   // The platform shell renders the toasts around this view.
   toasts: false,
   topBar: {
@@ -85,6 +86,11 @@ const workspace = computed(() => definePluginWorkspaceView({
   sidebar: { title: 'Parameters', panels: panels.value, forms: forms.value },
 }))
 
+// Seeds the standalone top bar icon; the title and subtitle above win over the seeded text.
+watch(() => generated.manifest.value?.ui, (ui) => {
+  if (ui) providePluginIdentity({ plugin: { name: ui.title, subtitle: ui.subtitle, description: ui.description, icon: ui.icon } })
+}, { immediate: true })
+
 const currentValues = computed(() => valuesByDefinition[activeDefinitionId.value] ?? {})
 const currentJob = computed(() => {
   const currentSessionId = generated.session.value?.id

package/src/components/InstrumentStateBadge.vue

@@ -15,7 +15,7 @@ const props = withDefaults(defineProps<Props>(), {
 })
 
 const stateConfig: Record<InstrumentBadgeState, { label: string; tone: string }> = {
-  running: { label: 'Running', tone: 'info' },
+  running: { label: 'Running', tone: 'success' },
   standby: { label: 'Standby', tone: 'warning' },
   idle: { label: 'Idle', tone: 'muted' },
   error: { label: 'Error', tone: 'error' },

package/src/components/JobsStatusTray.vue

@@ -218,7 +218,7 @@ async function clearFinished(): Promise<void> {
           <header class="mint-jobs-tray__header">
             <div>
               <h2 :id="titleId" class="mint-jobs-tray__title">{{ title }}</h2>
-              <p class="mint-jobs-tray__subtitle">{{ subtitle }}</p>
+              <p class="mint-jobs-tray__subtitle" :title="subtitle">{{ subtitle }}</p>
             </div>
             <div class="mint-jobs-tray__header-actions">
               <button

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

@@ -135,7 +135,7 @@ function handleSmartGroup(result: AutoGroupResult, state: { groups: SampleGroup[
       </div>
     </Variant>
 
-    <Variant title="Narrow Action Bar">
+    <Variant title="Narrow Header">
       <div style="padding: 2rem; width: 320px;">
         <SampleSelector
           :model-value="['Control_Rep1']"