@morscherlab/mint-sdk 1.0.0-alpha.2

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

@@ -0,0 +1,116 @@
+import { beforeEach, afterEach, describe, expect, it, vi } from 'vitest'
+
+const unmountedCallbacks: Array<() => void> = []
+
+type MessageHandler = (event: MessageEvent) => void
+let messageHandler: MessageHandler | null = null
+
+vi.mock('vue', async () => {
+  const actual = await vi.importActual<typeof import('vue')>('vue')
+  return {
+    ...actual,
+    onMounted: vi.fn((cb: () => void) => cb()),
+    onUnmounted: vi.fn((cb: () => void) => {
+      unmountedCallbacks.push(cb)
+    }),
+  }
+})
+
+import { usePlatformContext } from '../../composables/usePlatformContext'
+
+function sendThemeMessage(origin: string, theme: 'light' | 'dark' | 'system'): void {
+  if (!messageHandler) {
+    throw new Error('Message handler was not registered')
+  }
+
+  messageHandler({
+    source: window.parent,
+    origin,
+    data: {
+      type: 'mld:theme-changed',
+      payload: theme,
+    },
+  } as MessageEvent)
+}
+
+describe('usePlatformContext', () => {
+  beforeEach(() => {
+    unmountedCallbacks.length = 0
+    messageHandler = null
+
+    vi.spyOn(window, 'addEventListener').mockImplementation((type, listener) => {
+      if (type === 'message') {
+        messageHandler = listener as MessageHandler
+      }
+    })
+    vi.spyOn(window, 'removeEventListener').mockImplementation(() => {})
+  })
+
+  afterEach(() => {
+    while (unmountedCallbacks.length > 0) {
+      const callback = unmountedCallbacks.pop()
+      callback?.()
+    }
+    vi.restoreAllMocks()
+  })
+
+  it('clears allowAnyOrigin policy after last consumer unmounts', () => {
+    const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
+
+    const first = usePlatformContext({ allowAnyOrigin: true })
+    sendThemeMessage('https://evil.example', 'dark')
+    expect(first.theme.value).toBe('dark')
+
+    expect(unmountedCallbacks).toHaveLength(1)
+    unmountedCallbacks[0]!()
+    unmountedCallbacks.length = 0
+
+    const second = usePlatformContext()
+    sendThemeMessage('https://evil.example', 'light')
+    expect(second.theme.value).toBe('system')
+    expect(
+      warnSpy.mock.calls.some(([msg]) => String(msg).includes('Rejected postMessage')),
+    ).toBe(true)
+  })
+
+  it('does not leak explicit allowed origins to new consumers', () => {
+    const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
+
+    const first = usePlatformContext({ allowedOrigins: ['https://trusted.example'] })
+    sendThemeMessage('https://trusted.example', 'dark')
+    expect(first.theme.value).toBe('dark')
+
+    expect(unmountedCallbacks).toHaveLength(1)
+    unmountedCallbacks[0]!()
+    unmountedCallbacks.length = 0
+
+    const second = usePlatformContext()
+    sendThemeMessage('https://trusted.example', 'light')
+    expect(second.theme.value).toBe('system')
+    expect(
+      warnSpy.mock.calls.some(([msg]) => String(msg).includes('Rejected postMessage')),
+    ).toBe(true)
+  })
+
+  it('removes allowAnyOrigin scope when that consumer unmounts while others remain', () => {
+    const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
+
+    usePlatformContext({ allowAnyOrigin: true })
+    const second = usePlatformContext()
+
+    sendThemeMessage('https://evil.example', 'dark')
+    expect(second.theme.value).toBe('dark')
+
+    expect(unmountedCallbacks).toHaveLength(2)
+    unmountedCallbacks[0]!()
+
+    sendThemeMessage('https://evil.example', 'light')
+    expect(second.theme.value).toBe('dark')
+    expect(
+      warnSpy.mock.calls.some(([msg]) => String(msg).includes('Rejected postMessage')),
+    ).toBe(true)
+
+    unmountedCallbacks[1]!()
+    unmountedCallbacks.length = 0
+  })
+})

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

@@ -0,0 +1,81 @@
+/**
+ * Tests for usePluginApi.
+ *
+ * Exercises the baseUrl resolution priority that every plugin relies on:
+ *   1. VITE_API_PREFIX (build-time env override)
+ *   2. fallbackPrefix option (plugin's route prefix)
+ *   3. '/api' default
+ *
+ * The SDK-wide axios client is a singleton, so these tests stub axios
+ * with a MockAdapter-style approach via vi.spyOn to observe the
+ * baseURL actually used at request time.
+ */
+
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { createPinia, setActivePinia } from 'pinia'
+import axios, { type AxiosRequestConfig } from 'axios'
+
+import { usePluginApi } from '../../composables/usePluginApi'
+
+// Spy on axios create so each test starts with a fresh instance hook
+// and we can observe request configs.
+describe('usePluginApi', () => {
+  let requestConfigs: AxiosRequestConfig[] = []
+
+  beforeEach(() => {
+    setActivePinia(createPinia())
+    requestConfigs = []
+    // Intercept axios.get on the shared instance
+    vi.spyOn(axios.Axios.prototype, 'get').mockImplementation(async function (
+      this: unknown,
+      url: string,
+      config?: AxiosRequestConfig,
+    ) {
+      requestConfigs.push({ url, ...config })
+      return { data: { called: url, baseURL: config?.baseURL } }
+    })
+  })
+
+  afterEach(() => {
+    vi.restoreAllMocks()
+    vi.unstubAllEnvs()
+  })
+
+  it('uses fallbackPrefix when no env override', async () => {
+    const api = usePluginApi({ fallbackPrefix: '/api/drp' })
+    await api.get('/sessions')
+    expect(requestConfigs).toHaveLength(1)
+    expect(requestConfigs[0]!.baseURL).toBe('/api/drp')
+  })
+
+  it('falls back to /api when neither env nor fallback provided', async () => {
+    const api = usePluginApi()
+    await api.get('/health')
+    expect(requestConfigs[0]!.baseURL).toBe('/api')
+  })
+
+  it('VITE_API_PREFIX env var overrides fallbackPrefix', async () => {
+    vi.stubEnv('VITE_API_PREFIX', '/api/override')
+    const api = usePluginApi({ fallbackPrefix: '/api/drp' })
+    await api.get('/check')
+    expect(requestConfigs[0]!.baseURL).toBe('/api/override')
+  })
+
+  it('empty VITE_API_PREFIX env var falls through to fallback', async () => {
+    vi.stubEnv('VITE_API_PREFIX', '')
+    const api = usePluginApi({ fallbackPrefix: '/api/drp' })
+    await api.get('/check')
+    expect(requestConfigs[0]!.baseURL).toBe('/api/drp')
+  })
+
+  it('returns a client with all CRUD methods', () => {
+    const api = usePluginApi({ fallbackPrefix: '/api/drp' })
+    expect(typeof api.get).toBe('function')
+    expect(typeof api.post).toBe('function')
+    expect(typeof api.put).toBe('function')
+    expect(typeof api.patch).toBe('function')
+    expect(typeof api.delete).toBe('function')
+    expect(typeof api.upload).toBe('function')
+    expect(typeof api.buildUrl).toBe('function')
+  })
+})

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

@@ -0,0 +1,176 @@
+/**
+ * Tests for usePluginConfig.
+ *
+ * Covers the plugin settings life-cycle used by every plugin's
+ * settings pane:
+ *
+ * - resolvedName prefers explicit pluginName, falls back to platform plugin
+ * - load() populates config + savedConfig from /plugins/{name}/config
+ * - save() PATCHes the endpoint, updates savedConfig, returns true
+ * - isDirty reflects user edits vs last saved state
+ * - reset() restores config to savedConfig and clears error
+ * - error messages bubble up from network failures
+ */
+
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { createPinia, setActivePinia } from 'pinia'
+import axios, { type AxiosRequestConfig } from 'axios'
+import { nextTick } from 'vue'
+
+// usePluginConfig calls onMounted(load); happy-dom doesn't run Vue's
+// lifecycle outside a component, so we stub onMounted to call the
+// callback synchronously if and only if the test opts in.
+let autoLoadOnMount = false
+vi.mock('vue', async () => {
+  const actual = await vi.importActual<typeof import('vue')>('vue')
+  return {
+    ...actual,
+    onMounted: vi.fn((cb: () => void) => {
+      if (autoLoadOnMount) cb()
+    }),
+  }
+})
+
+import { usePluginConfig } from '../../composables/usePluginConfig'
+
+type FakeResponse = Record<string, unknown>
+
+let getResponse: FakeResponse = { plugin_name: 'drp', config: {} }
+let patchResponse: FakeResponse = { plugin_name: 'drp', config: {} }
+let getError: Error | null = null
+let patchError: Error | null = null
+let recordedCalls: { method: string; url: string; data?: unknown }[] = []
+
+function mockAxios() {
+  vi.spyOn(axios.Axios.prototype, 'get').mockImplementation(async function (
+    this: unknown,
+    url: string,
+    _config?: AxiosRequestConfig,
+  ) {
+    recordedCalls.push({ method: 'GET', url })
+    if (getError) throw getError
+    return { data: getResponse }
+  })
+  vi.spyOn(axios.Axios.prototype, 'patch').mockImplementation(async function (
+    this: unknown,
+    url: string,
+    data?: unknown,
+    _config?: AxiosRequestConfig,
+  ) {
+    recordedCalls.push({ method: 'PATCH', url, data })
+    if (patchError) throw patchError
+    return { data: patchResponse }
+  })
+}
+
+describe('usePluginConfig', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia())
+    autoLoadOnMount = false
+    getResponse = { plugin_name: 'drp', config: {} }
+    patchResponse = { plugin_name: 'drp', config: {} }
+    getError = null
+    patchError = null
+    recordedCalls = []
+    mockAxios()
+  })
+
+  afterEach(() => {
+    vi.restoreAllMocks()
+  })
+
+  it('load fetches config from correct endpoint and populates state', async () => {
+    getResponse = {
+      plugin_name: 'drp',
+      config: { raw_files_path: '/data/rfa', threshold: 0.5 },
+    }
+    const hook = usePluginConfig('drp')
+    await hook.load()
+
+    expect(recordedCalls).toEqual([
+      { method: 'GET', url: '/plugins/drp/config' },
+    ])
+    expect(hook.config.value).toEqual({
+      raw_files_path: '/data/rfa',
+      threshold: 0.5,
+    })
+    expect(hook.isDirty.value).toBe(false)
+    expect(hook.error.value).toBeNull()
+  })
+
+  it('encodes special characters in plugin name', async () => {
+    const hook = usePluginConfig('my/plugin')
+    await hook.load()
+    expect(recordedCalls[0]!.url).toBe('/plugins/my%2Fplugin/config')
+  })
+
+  it('save PATCHes the plugin config endpoint', async () => {
+    getResponse = { plugin_name: 'drp', config: { n: 1 } }
+    patchResponse = { plugin_name: 'drp', config: { n: 2 } }
+    const hook = usePluginConfig('drp')
+    await hook.load()
+    hook.config.value = { n: 2 }
+    await nextTick()
+    expect(hook.isDirty.value).toBe(true)
+
+    const ok = await hook.save()
+    expect(ok).toBe(true)
+    const patchCall = recordedCalls.find((c) => c.method === 'PATCH')!
+    expect(patchCall.url).toBe('/plugins/drp/config')
+    expect(patchCall.data).toEqual({ config: { n: 2 } })
+    expect(hook.config.value).toEqual({ n: 2 })
+    expect(hook.isDirty.value).toBe(false)
+  })
+
+  it('isDirty reflects edits vs last saved snapshot', async () => {
+    getResponse = { plugin_name: 'drp', config: { k: 'v' } }
+    const hook = usePluginConfig('drp')
+    await hook.load()
+    expect(hook.isDirty.value).toBe(false)
+
+    hook.config.value = { k: 'changed' }
+    await nextTick()
+    expect(hook.isDirty.value).toBe(true)
+
+    hook.config.value = { k: 'v' }
+    await nextTick()
+    expect(hook.isDirty.value).toBe(false)
+  })
+
+  it('reset restores saved config and clears error', async () => {
+    getResponse = { plugin_name: 'drp', config: { k: 'v' } }
+    const hook = usePluginConfig('drp')
+    await hook.load()
+    hook.config.value = { k: 'edited' }
+    hook.error.value = 'something'
+
+    hook.reset()
+    expect(hook.config.value).toEqual({ k: 'v' })
+    expect(hook.error.value).toBeNull()
+  })
+
+  it('load surfaces network error message', async () => {
+    getError = new Error('network down')
+    const hook = usePluginConfig('drp')
+    await hook.load()
+    expect(hook.error.value).toBe('network down')
+    expect(hook.isLoading.value).toBe(false)
+  })
+
+  it('save returns false and records error on failure', async () => {
+    patchError = new Error('403')
+    const hook = usePluginConfig('drp')
+    await hook.load()
+    hook.config.value = { x: 1 }
+    const ok = await hook.save()
+    expect(ok).toBe(false)
+    expect(hook.error.value).toBe('403')
+  })
+
+  it('empty plugin name produces a noop load', async () => {
+    const hook = usePluginConfig('')
+    await hook.load()
+    expect(recordedCalls).toEqual([])
+    expect(hook.error.value).toBeNull()
+  })
+})

package/src/__tests__/utils/color.test.ts

@@ -0,0 +1,96 @@
+import { describe, it, expect } from 'vitest'
+import { hexToHsl, hslToHex, deriveShade } from '../../utils/color'
+
+describe('hexToHsl', () => {
+  it('parses 6-digit hex', () => {
+    const hsl = hexToHsl('#3B82F6')
+    expect(hsl.h).toBeGreaterThan(200)
+    expect(hsl.h).toBeLessThan(230)
+    expect(hsl.s).toBeGreaterThan(80)
+    expect(hsl.l).toBeGreaterThan(45)
+    expect(hsl.l).toBeLessThan(65)
+  })
+
+  it('parses 3-digit hex', () => {
+    const a = hexToHsl('#39F')
+    const b = hexToHsl('#3399FF')
+    expect(Math.abs(a.h - b.h)).toBeLessThan(1)
+    expect(Math.abs(a.s - b.s)).toBeLessThan(1)
+    expect(Math.abs(a.l - b.l)).toBeLessThan(1)
+  })
+
+  it('handles missing # prefix', () => {
+    const a = hexToHsl('3B82F6')
+    const b = hexToHsl('#3B82F6')
+    expect(a).toEqual(b)
+  })
+
+  it('returns neutral gray for invalid input', () => {
+    const hsl = hexToHsl('not-a-hex')
+    expect(hsl.h).toBe(0)
+    expect(hsl.s).toBe(0)
+    expect(hsl.l).toBe(50)
+  })
+})
+
+describe('hslToHex round-trip', () => {
+  it('round-trips common colors within 1% lightness and 1° hue', () => {
+    const samples = ['#3B82F6', '#10B981', '#F59E0B', '#EF4444', '#8B5CF6']
+    for (const hex of samples) {
+      const hsl = hexToHsl(hex)
+      const back = hexToHsl(hslToHex(hsl.h, hsl.s, hsl.l))
+      expect(Math.abs(back.l - hsl.l)).toBeLessThan(1)
+      // Shortest angular distance between input and output hue
+      const dh = Math.abs(((back.h - hsl.h + 540) % 360) - 180)
+      const hueDelta = Math.min(dh, 360 - dh)
+      expect(hueDelta).toBeLessThan(1)
+    }
+  })
+})
+
+describe('deriveShade', () => {
+  it('returns the parent unchanged when total <= 1', () => {
+    expect(deriveShade('#3B82F6', 0, 1)).toBe('#3B82F6')
+    expect(deriveShade('#10B981', 0, 0)).toBe('#10B981')
+  })
+
+  it('produces children that share the parent hue', () => {
+    const parent = '#3B82F6'
+    const parentH = hexToHsl(parent).h
+
+    const shades = [0, 1, 2, 3].map(i => deriveShade(parent, i, 4))
+    for (const child of shades) {
+      const ch = hexToHsl(child).h
+      expect(Math.abs(ch - parentH)).toBeLessThan(2) // hue locked
+    }
+  })
+
+  it('produces a monotonically darkening progression', () => {
+    const shades = [0, 1, 2, 3, 4].map(i => deriveShade('#3B82F6', i, 5))
+    const lightnesses = shades.map(s => hexToHsl(s).l)
+    for (let i = 1; i < lightnesses.length; i++) {
+      expect(lightnesses[i]).toBeLessThan(lightnesses[i - 1])
+    }
+  })
+
+  it('clamps lightness within readable [35, 75] band', () => {
+    const lightParent = '#FFFFFF'
+    const darkParent = '#000000'
+    for (const parent of [lightParent, darkParent]) {
+      for (let i = 0; i < 4; i++) {
+        const child = deriveShade(parent, i, 4)
+        const { l } = hexToHsl(child)
+        expect(l).toBeGreaterThanOrEqual(34)
+        expect(l).toBeLessThanOrEqual(76)
+      }
+    }
+  })
+
+  it('keeps minimum saturation so colors do not turn grey', () => {
+    const shades = [0, 1, 2].map(i => deriveShade('#3B82F6', i, 3))
+    for (const c of shades) {
+      const { s } = hexToHsl(c)
+      expect(s).toBeGreaterThanOrEqual(35)
+    }
+  })
+})

package/src/components/AlertBox.story.vue

@@ -0,0 +1,204 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import AlertBox from './AlertBox.vue'
+import type { AlertType } from '../types'
+
+const alertTypes: AlertType[] = ['info', 'success', 'warning', 'error']
+const dismissed = ref(false)
+const actionFired = ref('')
+
+function handleDismiss() {
+  dismissed.value = true
+  setTimeout(() => { dismissed.value = false }, 2000)
+}
+
+function handleAction(label: string) {
+  actionFired.value = label
+  setTimeout(() => { actionFired.value = '' }, 2000)
+}
+</script>
+
+<template>
+  <Story title="Feedback/AlertBox">
+    <Variant title="Playground">
+      <template #default="{ state }">
+        <div style="padding: 2rem; max-width: 600px; margin: 0 auto;">
+          <AlertBox
+            :type="state.type"
+            :title="state.showTitle ? state.title : undefined"
+            :dismissible="state.dismissible"
+            :action-label="state.showAction ? state.actionLabel : undefined"
+            @dismiss="() => console.log('dismissed')"
+            @action="() => handleAction(state.actionLabel)"
+          >
+            {{ state.message }}
+          </AlertBox>
+          <p
+            v-if="actionFired"
+            style="margin-top: 0.75rem; font-size: 0.8rem; color: var(--mint-success, #10B981); font-family: 'Fira Code', monospace;"
+          >
+            Action fired: "{{ actionFired }}"
+          </p>
+        </div>
+      </template>
+
+      <template #controls="{ state }">
+        <HstSelect
+          v-model="state.type"
+          title="Type"
+          :options="alertTypes.map(t => ({ label: t, value: t }))"
+        />
+        <HstCheckbox v-model="state.showTitle" title="Show Title" />
+        <HstText v-model="state.title" title="Title" />
+        <HstText v-model="state.message" title="Message" />
+        <HstCheckbox v-model="state.dismissible" title="Dismissible" />
+        <HstCheckbox v-model="state.showAction" title="Show Action" />
+        <HstText v-model="state.actionLabel" title="Action Label" />
+      </template>
+    </Variant>
+
+    <Variant title="All Types">
+      <div style="padding: 2rem; max-width: 600px; margin: 0 auto; display: flex; flex-direction: column; gap: 1rem;">
+        <AlertBox
+          v-for="type in alertTypes"
+          :key="type"
+          :type="type"
+          :title="`${type.charAt(0).toUpperCase() + type.slice(1)} Alert`"
+        >
+          This is a {{ type }} alert message with supporting details.
+        </AlertBox>
+      </div>
+    </Variant>
+
+    <Variant title="With Action Button">
+      <div style="padding: 2rem; max-width: 600px; margin: 0 auto; display: flex; flex-direction: column; gap: 1rem;">
+        <AlertBox
+          type="error"
+          title="Server connection lost"
+          action-label="Restart Server"
+          @action="handleAction('Restart Server')"
+        >
+          The backend server is not responding. Check your network connection or restart the server.
+        </AlertBox>
+
+        <AlertBox
+          type="warning"
+          title="Experiment incomplete"
+          action-label="Resume"
+          dismissible
+          @action="handleAction('Resume')"
+        >
+          3 wells have missing sample assignments. Resume to continue setup.
+        </AlertBox>
+
+        <AlertBox
+          type="info"
+          title="Update available"
+          action-label="Update Now"
+          @action="handleAction('Update Now')"
+        >
+          MINT Platform v1.0.0 is available with new analysis features.
+        </AlertBox>
+
+        <AlertBox
+          type="success"
+          title="Analysis complete"
+          action-label="View Results"
+          @action="handleAction('View Results')"
+        >
+          Successfully processed 96 wells across 3 plates.
+        </AlertBox>
+
+        <p
+          v-if="actionFired"
+          style="font-size: 0.8rem; color: var(--mint-success, #10B981); font-family: 'Fira Code', monospace;"
+        >
+          Action fired: "{{ actionFired }}"
+        </p>
+      </div>
+    </Variant>
+
+    <Variant title="Custom Actions Slot">
+      <div style="padding: 2rem; max-width: 600px; margin: 0 auto;">
+        <AlertBox type="error" title="Plugin conflict detected">
+          <template #default>
+            mld-plugin-drp requires numpy &gt;=2.0 but the current environment has numpy 1.26.4.
+          </template>
+          <template #actions>
+            <button
+              style="padding: 0.3125rem 0.75rem; font-size: 0.8125rem; font-weight: 500; border-radius: 0.375rem; border: 1px solid var(--mint-error-border); color: var(--mint-error); background: transparent; cursor: pointer; white-space: nowrap;"
+              @click="handleAction('Force Install')"
+            >
+              Force Install
+            </button>
+            <button
+              style="padding: 0.3125rem 0.75rem; font-size: 0.8125rem; font-weight: 500; border-radius: 0.375rem; border: 1px solid var(--border-color); color: var(--text-secondary); background: transparent; cursor: pointer; white-space: nowrap;"
+              @click="handleAction('View Details')"
+            >
+              Details
+            </button>
+          </template>
+        </AlertBox>
+      </div>
+    </Variant>
+
+    <Variant title="Dismissible">
+      <div style="padding: 2rem; max-width: 600px; margin: 0 auto;">
+        <AlertBox
+          v-if="!dismissed"
+          type="warning"
+          title="Experiment incomplete"
+          dismissible
+          @dismiss="handleDismiss"
+        >
+          3 wells have missing sample assignments. Click dismiss to hide this alert (it will reappear after 2 seconds).
+        </AlertBox>
+        <p v-else style="color: var(--text-muted, #94a3b8); font-style: italic;">
+          Alert dismissed. Reappearing shortly...
+        </p>
+      </div>
+    </Variant>
+
+    <Variant title="Without Title">
+      <div style="padding: 2rem; max-width: 600px; margin: 0 auto; display: flex; flex-direction: column; gap: 1rem;">
+        <AlertBox type="info">
+          A simple informational message without a title.
+        </AlertBox>
+        <AlertBox type="error">
+          Something went wrong while processing the sample batch.
+        </AlertBox>
+      </div>
+    </Variant>
+
+    <Variant title="Rich Content">
+      <div style="padding: 2rem; max-width: 600px; margin: 0 auto;">
+        <AlertBox type="success" title="Analysis Complete" action-label="Download Report">
+          <p style="margin: 0 0 0.5rem;">
+            Successfully processed <strong>96 wells</strong> across 3 plates.
+          </p>
+          <ul style="margin: 0; padding-left: 1.25rem;">
+            <li>Peak detection: 1,247 peaks found</li>
+            <li>QC passed: 94/96 wells</li>
+            <li>Outliers flagged: 2 wells (B3, G11)</li>
+          </ul>
+        </AlertBox>
+      </div>
+    </Variant>
+    <Variant title="Centered alignment (default)">
+      <div style="padding: 2rem; max-width: 520px; display: flex; flex-direction: column; gap: 1rem;">
+        <AlertBox type="success" title="Analysis complete" action-label="View results">
+          Dose-response fit converged for all 96 wells.
+        </AlertBox>
+        <AlertBox type="error" title="Upload failed" dismissible>
+          The file exceeded the 50 MB limit.
+        </AlertBox>
+        <AlertBox type="warning" title="Low replicate count">
+          Wells C2, C3, C4 only have 2 replicates — consider additional runs.
+        </AlertBox>
+        <AlertBox type="info" title="New beta release">
+          Version 0.16.0-beta.3 ships a visual refresh for status components.
+        </AlertBox>
+      </div>
+    </Variant>
+  </Story>
+</template>