@morscherlab/mint-sdk 1.1.0 → 1.1.1

package/src/__tests__/stores/experiment.test.ts

@@ -0,0 +1,300 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { createPinia, setActivePinia } from 'pinia'
+import axios, { type AxiosRequestConfig } from 'axios'
+
+import { useExperimentStore } from '../../stores/experiment'
+import type { ExperimentSummary } from '../../types'
+
+let fakeResponse: ExperimentSummary
+let fakeError: (Error & { response?: { status: number } }) | null = null
+let recordedUrls: string[] = []
+
+// Lets a test hold individual requests open so responses can be landed out of
+// the order they were issued.
+type Deferred = { settle: (experiment: ExperimentSummary) => void }
+let deferreds: Map<number, Deferred>
+let deferResponses = false
+
+function idFromUrl(url: string): number {
+  return Number(/\/experiments\/(\d+)/.exec(url)?.[1])
+}
+
+function landResponse(id: number, experiment: ExperimentSummary): void {
+  const deferred = deferreds.get(id)
+  if (!deferred) throw new Error(`No request in flight for experiment ${id}`)
+  deferred.settle(experiment)
+}
+
+function experiment(id: number, overrides: Partial<ExperimentSummary> = {}): ExperimentSummary {
+  return {
+    id,
+    name: 'Hexokinase knockout run',
+    experiment_code: `EXP-${String(id).padStart(3, '0')}`,
+    status: 'ongoing',
+    experiment_type: 'screen',
+    created_at: '2026-07-01T08:00:00Z',
+    updated_at: '2026-07-01T08:00:00Z',
+    has_design_data: false,
+    ...overrides,
+  }
+}
+
+function installLocalStorage() {
+  const storage: Record<string, string> = {}
+  vi.stubGlobal('localStorage', {
+    getItem: vi.fn((key: string) => storage[key] ?? null),
+    setItem: vi.fn((key: string, value: string) => {
+      storage[key] = value
+    }),
+    removeItem: vi.fn((key: string) => {
+      delete storage[key]
+    }),
+    clear: vi.fn(() => {
+      for (const key of Object.keys(storage)) delete storage[key]
+    }),
+  } as unknown as Storage)
+}
+
+describe('useExperimentStore', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia())
+    installLocalStorage()
+    fakeResponse = experiment(42)
+    fakeError = null
+    recordedUrls = []
+    deferreds = new Map()
+    deferResponses = false
+    vi.spyOn(axios.Axios.prototype, 'get').mockImplementation(async function (
+      this: unknown,
+      url: string,
+      _config?: AxiosRequestConfig,
+    ) {
+      recordedUrls.push(url)
+      if (fakeError) throw fakeError
+      if (deferResponses) {
+        return await new Promise(resolve => {
+          deferreds.set(idFromUrl(url), {
+            settle: experiment => resolve({ data: experiment }),
+          })
+        })
+      }
+      return { data: fakeResponse }
+    })
+  })
+
+  afterEach(() => {
+    vi.restoreAllMocks()
+    vi.unstubAllGlobals()
+  })
+
+  describe('selectById', () => {
+    it('should fetch the record from the platform when given only an id', async () => {
+      const store = useExperimentStore()
+
+      await store.selectById(42)
+
+      expect(recordedUrls.some(url => url.includes('/experiments/42'))).toBe(true)
+    })
+
+    it('should expose the server-provided name when resolution succeeds', async () => {
+      const store = useExperimentStore()
+
+      await store.selectById(42)
+
+      expect(store.current?.name).toBe('Hexokinase knockout run')
+    })
+
+    it('should expose the server-provided experiment code when resolution succeeds', async () => {
+      const store = useExperimentStore()
+
+      await store.selectById(42)
+
+      expect(store.current?.experiment_code).toBe('EXP-042')
+    })
+
+    it('should leave the current experiment null when resolution fails', async () => {
+      fakeError = Object.assign(new Error('Not found'), { response: { status: 404 } })
+      const store = useExperimentStore()
+
+      await store.selectById(42)
+
+      expect(store.current).toBeNull()
+    })
+
+    it('should never synthesise a name from the id when resolution fails', async () => {
+      fakeError = Object.assign(new Error('Forbidden'), { response: { status: 403 } })
+      const store = useExperimentStore()
+
+      await store.selectById(42)
+
+      expect(store.current?.name).not.toBe('Experiment 42')
+    })
+
+    it('should record an error message when resolution fails', async () => {
+      fakeError = Object.assign(new Error('Not found'), { response: { status: 404 } })
+      const store = useExperimentStore()
+
+      await store.selectById(42)
+
+      expect(store.error).not.toBeNull()
+    })
+
+    it('should report the bound id even while the record is still resolving', async () => {
+      const store = useExperimentStore()
+
+      const pending = store.selectById(42)
+
+      expect(store.currentId).toBe(42)
+      await pending
+    })
+
+    it('should clear the previous record while a different id is resolving', async () => {
+      const store = useExperimentStore()
+      store.select(experiment(7))
+
+      const pending = store.selectById(42)
+
+      expect(store.current).toBeNull()
+      await pending
+    })
+
+    it('should issue a single request when the same id is resolved concurrently', async () => {
+      const store = useExperimentStore()
+
+      await Promise.all([store.selectById(42), store.selectById(42), store.selectById(42)])
+
+      expect(recordedUrls.filter(url => url.includes('/experiments/42'))).toHaveLength(1)
+    })
+
+    it('should return the resolved record to every caller resolving the same id', async () => {
+      const store = useExperimentStore()
+
+      const results = await Promise.all([
+        store.selectById(42),
+        store.selectById(42),
+        store.selectById(42),
+      ])
+
+      expect(results.map(result => result?.id)).toEqual([42, 42, 42])
+    })
+
+    it('should retry after a failure rather than caching the rejection', async () => {
+      const store = useExperimentStore()
+      fakeError = Object.assign(new Error('Boom'), { response: { status: 503 } })
+      await store.selectById(42)
+      fakeError = null
+
+      await store.selectById(42)
+
+      expect(store.current?.name).toBe('Hexokinase knockout run')
+    })
+  })
+
+  // A late response overwriting a newer selection shows the user a name that
+  // belongs to a different experiment — the same visible failure this store
+  // exists to prevent, reached by a different route.
+  describe('out-of-order resolution', () => {
+    beforeEach(() => {
+      deferResponses = true
+    })
+
+    it('should keep the modal selection when an earlier deep-link resolve lands late', async () => {
+      const store = useExperimentStore()
+      const pending = store.selectById(1)
+      store.select(experiment(2, { name: 'Chosen from the modal' }))
+
+      landResponse(1, experiment(1, { name: 'Stale deep-link record' }))
+      await pending
+
+      expect(store.current?.name).toBe('Chosen from the modal')
+    })
+
+    it('should keep the modal id when an earlier resolve lands late', async () => {
+      const store = useExperimentStore()
+      const pending = store.selectById(1)
+      store.select(experiment(2, { name: 'Chosen from the modal' }))
+
+      landResponse(1, experiment(1, { name: 'Stale deep-link record' }))
+      await pending
+
+      expect(store.currentId).toBe(2)
+    })
+
+    it('should show the newest experiment when two resolves settle in reverse order', async () => {
+      const store = useExperimentStore()
+      const first = store.selectById(1)
+      const second = store.selectById(2)
+
+      landResponse(2, experiment(2, { name: 'Second' }))
+      await second
+      landResponse(1, experiment(1, { name: 'First' }))
+      await first
+
+      expect(store.current?.name).toBe('Second')
+    })
+
+    it('should still be resolving when a superseded request settles first', async () => {
+      const store = useExperimentStore()
+      const first = store.selectById(1)
+      store.selectById(2)
+
+      landResponse(1, experiment(1, { name: 'First' }))
+      await first
+
+      expect(store.isResolving).toBe(true)
+    })
+  })
+
+  describe('select', () => {
+    it('should adopt a record the platform already returned without refetching', () => {
+      const store = useExperimentStore()
+
+      store.select(experiment(7, { name: 'Glutamine tracing' }))
+
+      expect(recordedUrls).toHaveLength(0)
+    })
+
+    it('should expose the adopted record as the current experiment', () => {
+      const store = useExperimentStore()
+
+      store.select(experiment(7, { name: 'Glutamine tracing' }))
+
+      expect(store.current?.name).toBe('Glutamine tracing')
+    })
+  })
+
+  describe('shared state', () => {
+    it('should share the current experiment across separate store instances', () => {
+      useExperimentStore().select(experiment(7, { name: 'Glutamine tracing' }))
+
+      expect(useExperimentStore().current?.name).toBe('Glutamine tracing')
+    })
+  })
+
+  describe('browser storage isolation', () => {
+    it('should not persist a modal selection', () => {
+      const store = useExperimentStore()
+
+      store.select(experiment(7, { name: 'Glutamine tracing' }))
+
+      expect(localStorage.setItem).not.toHaveBeenCalled()
+    })
+
+    it('should not persist an explicitly resolved deep link', async () => {
+      const store = useExperimentStore()
+
+      await store.selectById(42)
+
+      expect(localStorage.setItem).not.toHaveBeenCalled()
+    })
+
+    it('should not touch browser storage when detached', () => {
+      const store = useExperimentStore()
+      store.select(experiment(7))
+
+      store.clear()
+
+      expect(localStorage.removeItem).not.toHaveBeenCalled()
+    })
+  })
+})

package/src/components/AppTopBar.vue

@@ -439,8 +439,6 @@ const effectiveCurrentPageSelectorId = computed(() =>
     v-if="appExperiment && !isStandalone && appExperiment.selectorModal.value.modelValue"
     v-bind="appExperiment.selectorModal.value"
     @update:model-value="$event ? appExperiment.openModal() : appExperiment.closeModal()"
-    @select="appExperiment.handleSelect($event)"
-    @deselect="appExperiment.handleDetach()"
   />
 </template>
 

package/src/components/ExperimentPopover.story.vue

@@ -30,6 +30,8 @@ const STATUSES = ['planned', 'ongoing', 'completed', 'ready_to_extract', 'proces
             :experiment-name="state.experimentName"
             :experiment-code="state.experimentCode"
             :experiment-status="state.experimentStatus"
+            :is-resolving="state.isResolving"
+            :error="state.error"
             :show-save="state.showSave"
             :show-detach="state.showDetach"
             :save-disabled="state.saveDisabled"
@@ -55,6 +57,8 @@ const STATUSES = ['planned', 'ongoing', 'completed', 'ready_to_extract', 'proces
           title="Status"
           :options="STATUSES.map(s => ({ value: s, label: s }))"
         />
+        <HstCheckbox v-model="state.isResolving" title="Resolving (id bound, name pending)" />
+        <HstText v-model="state.error" title="Resolution error message" />
         <HstCheckbox v-model="state.showSave" title="Show save (split mode)" />
         <HstCheckbox v-model="state.showDetach" title="Show detach action" />
         <HstCheckbox v-model="state.saveDisabled" title="Save disabled" />
@@ -79,6 +83,36 @@ const STATUSES = ['planned', 'ongoing', 'completed', 'ready_to_extract', 'proces
       </div>
     </Variant>
 
+    <!-- Bound by id, record still in flight -->
+    <Variant
+      title="Resolving (deep link)"
+      :init-state="() => ({})"
+    >
+      <div style="padding: 3rem; display: flex; align-items: center; justify-content: center;">
+        <ExperimentPopover is-resolving show-detach />
+      </div>
+      <div style="text-align: center; font-size: 0.75rem; color: var(--text-muted); padding: 0 2rem 1rem;">
+        A deep link bound an experiment id and the platform has not returned the record yet. The chip shows a
+        placeholder bar — never "No experiment", and never the numeric id, because a name may only come from the
+        platform. Open the panel to see the matching skeleton card.
+      </div>
+    </Variant>
+
+    <!-- Bound by id, resolution failed -->
+    <Variant
+      title="Resolution failed"
+      :init-state="() => ({})"
+    >
+      <div style="padding: 3rem; display: flex; align-items: center; justify-content: center;">
+        <ExperimentPopover error="Experiment not found (404)" show-detach />
+      </div>
+      <div style="text-align: center; font-size: 0.75rem; color: var(--text-muted); padding: 0 2rem 1rem;">
+        The bound experiment could not be loaded — deleted, or the user lost access. The chip reads
+        "Experiment unavailable" in the error palette; the panel carries the platform's message and keeps
+        <strong>Change</strong> and <strong>Detach</strong> reachable so the user is never stranded.
+      </div>
+    </Variant>
+
     <!-- Selected, no save action -->
     <Variant
       title="Selected (no save)"
@@ -297,6 +331,14 @@ const STATUSES = ['planned', 'ongoing', 'completed', 'ready_to_extract', 'proces
           <ExperimentPopover />
           <span style="font-size: 0.6875rem; color: var(--text-muted); font-family: 'Fira Code', monospace;">empty</span>
         </div>
+        <div style="display: flex; flex-direction: column; align-items: center; gap: 0.625rem;">
+          <ExperimentPopover is-resolving show-detach />
+          <span style="font-size: 0.6875rem; color: var(--text-muted); font-family: 'Fira Code', monospace;">resolving</span>
+        </div>
+        <div style="display: flex; flex-direction: column; align-items: center; gap: 0.625rem;">
+          <ExperimentPopover error="Experiment not found (404)" show-detach />
+          <span style="font-size: 0.6875rem; color: var(--text-muted); font-family: 'Fira Code', monospace;">resolve failed</span>
+        </div>
         <div style="display: flex; flex-direction: column; align-items: center; gap: 0.625rem;">
           <ExperimentPopover
             :experiment-name="EXPERIMENT_NAMES[0]"
@@ -373,6 +415,23 @@ optionally pairs with an inline Save button as a split unit.
 - **Split cohesion** — when save is visible, the `[chip | save]` pair lifts
   together on either-half hover while keeping per-half color feedback.
 
+### Binding states
+
+The chip renders four mutually exclusive states, in this order:
+
+| State | Props | Trigger reads |
+|---|---|---|
+| Resolving | `isResolving` | placeholder bar (`aria-busy`) |
+| Failed | `error` | "Experiment unavailable" |
+| Linked | `experimentName` / `experimentCode` | the platform's name, code as fallback |
+| Empty | none of the above | "No experiment" |
+
+Resolving and failed exist because an experiment can be *bound by id* before its
+record arrives — a deep link, or a restored session. In those states the chip must
+not read "No experiment", and it must never substitute the numeric id for a name:
+**a displayed name only ever comes from the platform.** Detach stays reachable in
+the failed state so a user is never stranded on an experiment that cannot load.
+
 ### Events
 
 | Event | When |

package/src/components/ExperimentPopover.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 /** Floating popover showing the active experiment with save, detach, and select actions. */
-import { ref, watch, onUnmounted } from 'vue'
+import { ref, computed, watch, onUnmounted } from 'vue'
 import { useDropdownState } from '../composables/useDropdownState'
 import { formatExperimentStatus } from '../composables/experiment-utils'
 import ConfirmDialog from './ConfirmDialog.vue'
@@ -9,6 +9,10 @@ interface Props {
   experimentName?: string
   experimentCode?: string
   experimentStatus?: string
+  /** An experiment is bound but the platform has not returned its record yet. */
+  isResolving?: boolean
+  /** Message explaining why the bound experiment could not be resolved. */
+  error?: string
   showSave?: boolean
   showDetach?: boolean
   saveDisabled?: boolean
@@ -21,6 +25,7 @@ interface Props {
 }
 
 const props = withDefaults(defineProps<Props>(), {
+  isResolving: false,
   showSave: false,
   showDetach: false,
   saveDisabled: false,
@@ -28,6 +33,24 @@ const props = withDefaults(defineProps<Props>(), {
   confirmSave: true,
 })
 
+// An experiment is bound but has no name to show — either still resolving or
+// resolution failed. The id is never substituted: a name may only come from the
+// platform, so these states say what is happening instead of inventing a label.
+const isUnresolved = computed(() => props.isResolving || !!props.error)
+const hasExperiment = computed(() => !!props.experimentName || !!props.experimentCode)
+
+const panelSubtitle = computed(() => {
+  if (props.isResolving) return 'Loading experiment…'
+  if (props.error) return 'Could not load this experiment'
+  return hasExperiment.value ? 'Linked experiment context' : 'Link to an MINT experiment'
+})
+
+const triggerLabel = computed(() => {
+  if (props.isResolving) return 'Loading experiment'
+  if (props.error) return 'Experiment unavailable'
+  return props.experimentName || props.experimentCode || 'No experiment'
+})
+
 const emit = defineEmits<{
   select: []
   save: []
@@ -99,9 +122,13 @@ onUnmounted(() => {
         :class="[
           'mint-experiment-popover__trigger',
           { 'mint-experiment-popover__trigger--active': isOpen },
-          { 'mint-experiment-popover__trigger--empty': !experimentCode && !experimentName },
+          { 'mint-experiment-popover__trigger--empty': !isUnresolved && !hasExperiment },
+          { 'mint-experiment-popover__trigger--loading': isResolving },
+          { 'mint-experiment-popover__trigger--error': !isResolving && !!error },
         ]"
-        :title="experimentName || experimentCode || undefined"
+        :title="isUnresolved ? triggerLabel : experimentName || experimentCode || undefined"
+        :aria-label="isUnresolved ? triggerLabel : undefined"
+        :aria-busy="isResolving || undefined"
         :aria-expanded="isOpen"
         @click.stop="toggle"
       >
@@ -114,8 +141,12 @@ onUnmounted(() => {
             d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"
           />
         </svg>
+        <!-- Resolving and error come first: with an experiment bound but no name
+             yet, "No experiment" would be a lie. -->
+        <span v-if="isResolving" class="mint-experiment-popover__trigger-skeleton" aria-hidden="true" />
+        <span v-else-if="error" class="mint-experiment-popover__trigger-text">Experiment unavailable</span>
         <!-- Name preferred, code as fallback, "No experiment" as empty state -->
-        <span v-if="experimentName" class="mint-experiment-popover__trigger-text">{{ experimentName }}</span>
+        <span v-else-if="experimentName" class="mint-experiment-popover__trigger-text">{{ experimentName }}</span>
         <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 -->
@@ -158,12 +189,71 @@ onUnmounted(() => {
       <div class="mint-experiment-popover__header">
         <div class="mint-experiment-popover__title">Experiment</div>
         <div class="mint-experiment-popover__subtitle">
-          {{ experimentName ? 'Linked experiment context' : 'Link to an MINT experiment' }}
+          {{ panelSubtitle }}
+        </div>
+      </div>
+
+      <!-- Bound, still resolving — placeholders stand in for the record the
+           platform has not returned yet. -->
+      <div v-if="isResolving" class="mint-experiment-popover__body">
+        <div class="mint-experiment-popover__card" aria-busy="true">
+          <div class="mint-experiment-popover__card-icon">
+            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="1.75"
+                d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"
+              />
+            </svg>
+          </div>
+          <div class="mint-experiment-popover__card-info">
+            <span class="mint-experiment-popover__skeleton-line mint-experiment-popover__skeleton-line--code" />
+            <span class="mint-experiment-popover__skeleton-line mint-experiment-popover__skeleton-line--name" />
+            <span class="mint-experiment-popover__skeleton-line mint-experiment-popover__skeleton-line--status" />
+          </div>
+        </div>
+        <div class="mint-experiment-popover__card-actions">
+          <button type="button" class="mint-experiment-popover__change-btn" @click="handleSelect">
+            Change
+          </button>
+          <button v-if="showDetach" type="button" class="mint-experiment-popover__detach-btn" @click="handleDetach">
+            Detach
+          </button>
+        </div>
+      </div>
+
+      <!-- Bound, resolution failed — Detach stays reachable so the user is not
+           stuck on an experiment the platform cannot describe. -->
+      <div v-else-if="error" class="mint-experiment-popover__body">
+        <div class="mint-experiment-popover__card mint-experiment-popover__card--error" role="alert">
+          <div class="mint-experiment-popover__card-icon mint-experiment-popover__card-icon--error">
+            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="1.75"
+                d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z"
+              />
+            </svg>
+          </div>
+          <div class="mint-experiment-popover__card-info">
+            <div class="mint-experiment-popover__card-name">Experiment unavailable</div>
+            <div class="mint-experiment-popover__card-message">{{ error }}</div>
+          </div>
+        </div>
+        <div class="mint-experiment-popover__card-actions">
+          <button type="button" class="mint-experiment-popover__change-btn" @click="handleSelect">
+            Change
+          </button>
+          <button v-if="showDetach" type="button" class="mint-experiment-popover__detach-btn" @click="handleDetach">
+            Detach
+          </button>
         </div>
       </div>
 
       <!-- No experiment selected -->
-      <div v-if="!experimentName" class="mint-experiment-popover__body">
+      <div v-else-if="!experimentName" class="mint-experiment-popover__body">
         <button type="button" class="mint-experiment-popover__select-btn" @click="handleSelect">
           <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />

package/src/components/ExperimentSelectorModal.story.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
-import { ref, nextTick, onMounted } from 'vue'
+import { ref, computed, nextTick, onMounted } from 'vue'
 import ExperimentSelectorModal from './ExperimentSelectorModal.vue'
 import ExperimentCodeBadge from './ExperimentCodeBadge.vue'
+import { useExperimentStore } from '../stores/experiment'
 import type { ExperimentSummary, ExperimentStatus, ExperimentSortField } from '../types'
 
 // -- Mock data: realistic cell biology experiments --
@@ -247,15 +248,11 @@ const isOpenEmpty = ref(false)
 const isOpenGrouped = ref(false)
 const isOpenWithSelection = ref(false)
 const isOpenAdvanced = ref(false)
-const selectedExperiment = ref<ExperimentSummary | null>(null)
 
-function handleSelect(experiment: ExperimentSummary) {
-  selectedExperiment.value = experiment
-}
-
-function handleDeselect() {
-  selectedExperiment.value = null
-}
+// The modal commits to the shared store rather than emitting; stories read the
+// selection back from the same place a plugin would.
+const experimentStore = useExperimentStore()
+const selectedExperiment = computed(() => experimentStore.current)
 </script>
 
 <template>
@@ -290,8 +287,6 @@ function handleDeselect() {
             :experiment-type="state.experimentType || undefined"
             :title="state.title"
             :current-experiment-id="selectedExperiment?.id ?? null"
-            @select="handleSelect"
-            @deselect="handleDeselect"
           />
         </div>
       </template>
@@ -319,7 +314,6 @@ function handleDeselect() {
           v-model="isOpenAdvanced"
           title="Select Experiment"
           :show-filters="true"
-          @select="handleSelect"
         />
       </div>
     </Variant>
@@ -340,7 +334,6 @@ function handleDeselect() {
           v-model="isOpenGrouped"
           title="Select Experiment"
           :group-by-project="true"
-          @select="handleSelect"
         />
       </div>
     </Variant>
@@ -361,8 +354,6 @@ function handleDeselect() {
           v-model="isOpenWithSelection"
           title="Select Experiment"
           :current-experiment-id="1"
-          @select="handleSelect"
-          @deselect="handleDeselect"
         />
       </div>
     </Variant>
@@ -383,7 +374,6 @@ function handleDeselect() {
           v-model="isOpenEmpty"
           experiment-type="nonexistent_type"
           title="Select Experiment"
-          @select="handleSelect"
         />
       </div>
     </Variant>

package/src/components/ExperimentSelectorModal.vue

@@ -3,6 +3,7 @@
 import { ref, reactive, computed, watch, nextTick } from 'vue'
 import type { ModalSize, ExperimentSummary, ExperimentFilters } from '../types'
 import { useExperimentSelector } from '../composables/useExperimentSelector'
+import { useExperimentStore } from '../stores/experiment'
 import {
   formatExperimentDate,
   formatExperimentStatus,
@@ -38,12 +39,15 @@ const props = withDefaults(defineProps<Props>(), {
   showFilters: false,
 })
 
+// Selection is committed to the shared experiment store rather than emitted.
+// A single owner of "the current experiment" is what stops callers holding —
+// or inventing — a record of their own.
 const emit = defineEmits<{
   'update:modelValue': [value: boolean]
-  select: [experiment: ExperimentSummary]
-  deselect: []
 }>()
 
+const experimentStore = useExperimentStore()
+
 const {
   experiments,
   filters,
@@ -113,12 +117,12 @@ function handleSortChange(value: string | number) {
 }
 
 function handleSelect(experiment: ExperimentSummary) {
-  emit('select', experiment)
+  experimentStore.select(experiment)
   emit('update:modelValue', false)
 }
 
 function handleDeselect() {
-  emit('deselect')
+  experimentStore.clear()
   emit('update:modelValue', false)
 }