@morscherlab/mld-sdk 0.10.0 → 0.10.1

package/src/__stories__/experiment-helpers.ts

@@ -0,0 +1,78 @@
+/**
+ * Shared helpers for story files that need experiment selector integration.
+ * Provides mock data, API interceptors, and a provider wrapper component.
+ */
+import { defineComponent, onUnmounted } from 'vue'
+import { useAppExperiment } from '../composables/useAppExperiment'
+import { useApi } from '../composables/useApi'
+import type { ExperimentSummary } from '../types'
+
+export const mockExperiments: ExperimentSummary[] = [
+  { id: 1, experiment_code: 'DR-HeLa-DOX-001', name: 'Doxorubicin dose-response in HeLa cells', status: 'completed', experiment_type: 'dose_response', project: 'Oncology Screen Q1', project_name: 'Oncology Screen Q1', created_at: '2026-02-28T14:30:00Z', updated_at: '2026-03-01T09:15:00Z', has_design_data: true },
+  { id: 2, experiment_code: 'CV-MCF7-24H-002', name: 'MCF-7 cell viability 24h time course', status: 'completed', experiment_type: 'cell_viability', project: 'Oncology Screen Q1', project_name: 'Oncology Screen Q1', created_at: '2026-02-25T10:00:00Z', updated_at: '2026-02-26T16:45:00Z', has_design_data: true },
+  { id: 3, experiment_code: 'DR-PANC1-GEM-003', name: 'Gemcitabine IC50 in PANC-1', status: 'ongoing', experiment_type: 'dose_response', project: 'Pancreatic Cancer', project_name: 'Pancreatic Cancer', created_at: '2026-03-01T08:00:00Z', updated_at: '2026-03-02T11:30:00Z', has_design_data: true },
+  { id: 4, experiment_code: 'CV-A549-CIS-004', name: 'Cisplatin cytotoxicity A549 lung', status: 'ongoing', experiment_type: 'cell_viability', project: 'Lung Cancer Panel', project_name: 'Lung Cancer Panel', created_at: '2026-03-01T13:00:00Z', updated_at: '2026-03-02T08:00:00Z', has_design_data: false },
+  { id: 5, experiment_code: 'DR-HEK293-CTRL-005', name: 'HEK-293T control viability baseline', status: 'completed', experiment_type: 'dose_response', project: 'Toxicity Controls', project_name: 'Toxicity Controls', created_at: '2026-02-20T09:00:00Z', updated_at: '2026-02-22T17:00:00Z', has_design_data: true },
+]
+
+const mockExperimentTypes = [
+  { name: 'dose_response', color: '#3b82f6' },
+  { name: 'cell_viability', color: '#10b981' },
+]
+
+const mockProjects = [
+  { id: 1, name: 'Oncology Screen Q1' },
+  { id: 2, name: 'Pancreatic Cancer' },
+  { id: 3, name: 'Lung Cancer Panel' },
+  { id: 4, name: 'Toxicity Controls' },
+]
+
+export function installMockInterceptor() {
+  const { client } = useApi()
+  client.interceptors.request.use((config) => {
+    const url = config.url ?? ''
+    if (url.includes('/experiments/experiment-types')) {
+      config.adapter = () => Promise.resolve({ data: mockExperimentTypes, status: 200, statusText: 'OK', headers: {}, config })
+      return config
+    }
+    if (url.includes('/projects')) {
+      config.adapter = () => Promise.resolve({ data: mockProjects, status: 200, statusText: 'OK', headers: {}, config })
+      return config
+    }
+    if (url.startsWith('/api/experiments')) {
+      const params = new URLSearchParams(url.split('?')[1] ?? '')
+      const skip = Number(params.get('skip') ?? 0)
+      const limit = Number(params.get('limit') ?? 100)
+      let filtered = [...mockExperiments]
+      const status = params.get('status')
+      const search = params.get('search')?.toLowerCase()
+      if (status) filtered = filtered.filter(e => e.status === status)
+      if (search) filtered = filtered.filter(e => e.name.toLowerCase().includes(search) || e.experiment_code?.toLowerCase().includes(search))
+      config.adapter = () => Promise.resolve({ data: { experiments: filtered.slice(skip, skip + limit), total: filtered.length }, status: 200, statusText: 'OK', headers: {}, config })
+    }
+    return config
+  })
+}
+
+/**
+ * Wrapper component that fakes integrated mode and provides useAppExperiment context.
+ * Use in story files to demonstrate experiment selector integration.
+ *
+ * Props:
+ *   preselect (boolean, default true) - pre-select the first mock experiment
+ */
+export const ExperimentProvider = defineComponent({
+  props: { preselect: { type: Boolean, default: true } },
+  setup(props, { slots }) {
+    ;(window as any).__MLD_PLATFORM__ = { isIntegrated: true, theme: 'system' }
+    installMockInterceptor()
+    const { set } = useAppExperiment({
+      onSave: async () => 'Saved!',
+    })
+    if (props.preselect) {
+      set({ id: 1, name: 'Doxorubicin dose-response in HeLa cells', status: 'completed' })
+    }
+    onUnmounted(() => { delete (window as any).__MLD_PLATFORM__ })
+    return () => slots.default?.()
+  },
+})

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

@@ -5,13 +5,18 @@ import axios from 'axios'
 vi.mock('axios')
 const mockedAxios = vi.mocked(axios, true)
 
+const unmountedCallbacks: Array<() => void> = []
+
 // Mock vue lifecycle hooks since we're not in a component
 vi.mock('vue', async () => {
-  const actual = await vi.importActual('vue')
+  const actual = await vi.importActual<typeof import('vue')>('vue')
   return {
     ...actual,
+    getCurrentInstance: vi.fn(() => ({})),
     onMounted: vi.fn((cb: () => void) => cb()),
-    onUnmounted: vi.fn(),
+    onUnmounted: vi.fn((cb: () => void) => {
+      unmountedCallbacks.push(cb)
+    }),
   }
 })
 
@@ -23,6 +28,7 @@ describe('useAuth', () => {
   beforeEach(() => {
     setActivePinia(createPinia())
     vi.useFakeTimers()
+    unmountedCallbacks.length = 0
 
     // Mock settings store
     const settingsStore = useSettingsStore()
@@ -118,6 +124,45 @@ describe('useAuth', () => {
     })
   })
 
+  describe('refreshToken - lifecycle behavior', () => {
+    it('keeps scheduled refresh when one of multiple consumers unmounts', async () => {
+      mockedAxios.post.mockImplementation((url: string) => {
+        if (url.endsWith('/auth/login')) {
+          return Promise.resolve({
+            data: { access_token: 'test-token', expires_in: 301, token_type: 'bearer' },
+          })
+        }
+        if (url.endsWith('/auth/refresh')) {
+          return Promise.resolve({
+            data: { access_token: 'refreshed-token', expires_in: 3600, token_type: 'bearer' },
+          })
+        }
+        throw new Error(`Unexpected POST ${url}`)
+      })
+      mockedAxios.get.mockResolvedValue({
+        data: { id: '1', username: 'test', shortname: null, email: null, role: 'user', is_active: true },
+      })
+
+      const authA = useAuth()
+      useAuth()
+
+      await authA.login('test', 'password')
+
+      expect(unmountedCallbacks).toHaveLength(2)
+      unmountedCallbacks[0]!()
+
+      vi.advanceTimersByTime(2_000)
+      await Promise.resolve()
+
+      const refreshCalls = mockedAxios.post.mock.calls.filter(
+        ([url]) => typeof url === 'string' && url.endsWith('/auth/refresh'),
+      )
+      expect(refreshCalls).toHaveLength(1)
+
+      unmountedCallbacks[1]!()
+    })
+  })
+
   describe('verifyToken', () => {
     it('should return false when no token', async () => {
       const { verifyToken } = useAuth()

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/components/AppLayout.story.vue

@@ -7,6 +7,7 @@ import BaseSlider from './BaseSlider.vue'
 import BaseSelect from './BaseSelect.vue'
 import BaseToggle from './BaseToggle.vue'
 import BaseButton from './BaseButton.vue'
+import { ExperimentProvider } from '../__stories__/experiment-helpers'
 import type { SidebarToolSection, TopBarTab } from '../types'
 
 const activeTab = ref('analysis')
@@ -214,5 +215,78 @@ const logScale = ref(false)
         </AppLayout>
       </div>
     </Variant>
+
+    <Variant title="With Experiment Selector">
+      <ExperimentProvider>
+        <div style="height: 600px;">
+          <AppLayout :floating="true" sidebar-width="280px">
+            <template #topbar>
+              <AppTopBar
+                plugin-name="IC50 Calculator"
+                title="Analysis"
+                :tabs="tabs"
+                :current-tab-id="activeTab"
+                :show-theme-toggle="true"
+                home-path=""
+                @tab-select="t => activeTab = t.id"
+              />
+            </template>
+            <template #sidebar>
+              <AppSidebar
+                :panels="toolPanels"
+                :active-view="activeTab"
+                :floating="false"
+              >
+                <template #section-parameters>
+                  <BaseSlider v-model="threshold" label="Threshold" :min="0" :max="100" />
+                  <BaseSelect v-model="method" label="Method" :options="methods" />
+                </template>
+                <template #section-filters>
+                  <BaseToggle v-model="showOutliers" label="Exclude outliers" />
+                </template>
+                <template #section-display>
+                  <BaseToggle v-model="showOutliers" label="Show outliers" />
+                  <BaseToggle v-model="logScale" label="Log scale" />
+                </template>
+                <template #section-export>
+                  <BaseButton size="sm" variant="secondary">Export CSV</BaseButton>
+                </template>
+              </AppSidebar>
+            </template>
+            <div style="padding: 2rem;">
+              <h2 style="margin: 0 0 1rem; color: var(--text-primary, #1e293b);">
+                {{ activeTab.charAt(0).toUpperCase() + activeTab.slice(1) }}
+              </h2>
+              <p style="color: var(--text-muted, #94a3b8);">
+                Full layout with experiment selector in the top bar.
+                Click the flask icon to open the experiment popover and selector modal.
+              </p>
+            </div>
+          </AppLayout>
+        </div>
+      </ExperimentProvider>
+    </Variant>
+
+    <Variant title="With Experiment Selector (No Selection)">
+      <ExperimentProvider :preselect="false">
+        <div style="height: 600px;">
+          <AppLayout :floating="true">
+            <template #topbar>
+              <AppTopBar
+                plugin-name="Plate Analyzer"
+                title="Dashboard"
+                :show-theme-toggle="true"
+                home-path=""
+              />
+            </template>
+            <div style="padding: 2rem;">
+              <p style="color: var(--text-muted, #94a3b8);">
+                No experiment selected yet. Click the flask icon in the top bar to select one.
+              </p>
+            </div>
+          </AppLayout>
+        </div>
+      </ExperimentProvider>
+    </Variant>
   </Story>
 </template>

package/src/components/AppTopBar.story.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import AppTopBar from './AppTopBar.vue'
+import { ExperimentProvider } from '../__stories__/experiment-helpers'
 import type { TopBarVariant, TopBarPage, TopBarTab } from '../types'
 
 const variants: TopBarVariant[] = ['card', 'default']
@@ -108,5 +109,33 @@ const sampleTabs: TopBarTab[] = [
         <AppTopBar :show-logo="true" home-path="/" />
       </div>
     </Variant>
+
+    <Variant title="With Experiment Selector">
+      <div style="padding: 2rem;">
+        <ExperimentProvider>
+          <AppTopBar
+            plugin-name="IC50 Calculator"
+            title="Analysis"
+            variant="card"
+            :show-theme-toggle="true"
+            home-path=""
+          />
+        </ExperimentProvider>
+      </div>
+    </Variant>
+
+    <Variant title="With Experiment Selector (Empty)">
+      <div style="padding: 2rem;">
+        <ExperimentProvider :preselect="false">
+          <AppTopBar
+            plugin-name="Plate Analyzer"
+            title="Dashboard"
+            variant="card"
+            :show-theme-toggle="true"
+            home-path=""
+          />
+        </ExperimentProvider>
+      </div>
+    </Variant>
   </Story>
 </template>

package/src/components/ExperimentPopover.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref, watch, onMounted, onUnmounted } from 'vue'
+import ConfirmDialog from './ConfirmDialog.vue'
 
 interface Props {
   experimentName?: string
@@ -10,6 +11,9 @@ interface Props {
   saveLoading?: boolean
   saveSuccessMessage?: string
   saveDisabledMessage?: string
+  confirmSave?: boolean
+  confirmTitle?: string
+  confirmMessage?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -17,6 +21,7 @@ const props = withDefaults(defineProps<Props>(), {
   showDetach: false,
   saveDisabled: false,
   saveLoading: false,
+  confirmSave: true,
 })
 
 const emit = defineEmits<{
@@ -28,6 +33,7 @@ const emit = defineEmits<{
 const isOpen = ref(false)
 const popoverRef = ref<HTMLElement | null>(null)
 const showSuccess = ref(false)
+const showConfirm = ref(false)
 
 function toggle() {
   isOpen.value = !isOpen.value
@@ -44,6 +50,15 @@ function handleSelect() {
 
 function handleSave() {
   if (props.saveDisabled || props.saveLoading) return
+  if (props.confirmSave) {
+    showConfirm.value = true
+  } else {
+    emit('save')
+  }
+}
+
+function handleConfirmSave() {
+  showConfirm.value = false
   emit('save')
 }
 
@@ -58,12 +73,16 @@ function handleClickOutside(event: MouseEvent) {
   }
 }
 
+let successTimer: ReturnType<typeof setTimeout> | null = null
+
 // Show success state when saveSuccessMessage changes from empty to a value
 watch(() => props.saveSuccessMessage, (msg) => {
+  if (successTimer) clearTimeout(successTimer)
   if (msg) {
     showSuccess.value = true
-    setTimeout(() => {
+    successTimer = setTimeout(() => {
       showSuccess.value = false
+      successTimer = null
     }, 3000)
   }
 })
@@ -74,6 +93,7 @@ onMounted(() => {
 
 onUnmounted(() => {
   document.removeEventListener('click', handleClickOutside)
+  if (successTimer) clearTimeout(successTimer)
 })
 
 // Format status for display (e.g., "ready_to_extract" -> "Ready to extract")
@@ -84,33 +104,67 @@ function formatStatus(status: string): string {
 
 <template>
   <div ref="popoverRef" class="mld-experiment-popover">
-    <!-- Trigger button -->
-    <button
-      type="button"
+    <!-- Split trigger: experiment pill + inline save -->
+    <div
       :class="[
-        'mld-experiment-popover__trigger',
-        { 'mld-experiment-popover__trigger--active': isOpen },
-        { 'mld-experiment-popover__trigger--empty': !experimentName },
+        'mld-experiment-popover__split',
+        { 'mld-experiment-popover__split--with-save': showSave && experimentName },
       ]"
-      @click.stop="toggle"
     >
-      <!-- Flask icon -->
-      <svg class="mld-experiment-popover__trigger-icon" 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>
-      <span class="mld-experiment-popover__trigger-text">
-        {{ experimentName || 'No experiment' }}
-      </span>
-      <!-- Chevron -->
-      <svg class="mld-experiment-popover__trigger-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-        <path d="m6 9 6 6 6-6" />
-      </svg>
-    </button>
+      <!-- Left: experiment trigger (opens popover) -->
+      <button
+        type="button"
+        :class="[
+          'mld-experiment-popover__trigger',
+          { 'mld-experiment-popover__trigger--active': isOpen },
+          { 'mld-experiment-popover__trigger--empty': !experimentName },
+        ]"
+        @click.stop="toggle"
+      >
+        <!-- Flask icon -->
+        <svg class="mld-experiment-popover__trigger-icon" 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>
+        <span class="mld-experiment-popover__trigger-text">
+          {{ experimentName || 'No experiment' }}
+        </span>
+        <!-- Chevron -->
+        <svg class="mld-experiment-popover__trigger-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="m6 9 6 6 6-6" />
+        </svg>
+      </button>
+
+      <!-- Right: inline save button (direct action) -->
+      <button
+        v-if="showSave && experimentName"
+        type="button"
+        :class="[
+          'mld-experiment-popover__save-trigger',
+          { 'mld-experiment-popover__save-trigger--loading': saveLoading },
+          { 'mld-experiment-popover__save-trigger--success': showSuccess },
+          { 'mld-experiment-popover__save-trigger--disabled': saveDisabled && !showSuccess },
+        ]"
+        :disabled="saveDisabled && !showSuccess"
+        :title="saveDisabled && saveDisabledMessage ? saveDisabledMessage : showSuccess && saveSuccessMessage ? saveSuccessMessage : 'Save to Experiment'"
+        @click.stop="handleSave"
+      >
+        <!-- Loading spinner -->
+        <span v-if="saveLoading" class="mld-experiment-popover__spinner--inline" />
+        <!-- Success check -->
+        <svg v-else-if="showSuccess" class="mld-experiment-popover__save-trigger-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7" />
+        </svg>
+        <!-- Save icon -->
+        <svg v-else class="mld-experiment-popover__save-trigger-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4" />
+        </svg>
+      </button>
+    </div>
 
     <!-- Popover panel -->
     <div v-if="isOpen" class="mld-experiment-popover__panel">
@@ -161,40 +215,18 @@ function formatStatus(status: string): string {
           </div>
         </div>
       </div>
-
-      <!-- Save section -->
-      <template v-if="showSave">
-        <div class="mld-experiment-popover__divider" />
-        <div class="mld-experiment-popover__footer">
-          <button
-            type="button"
-            :class="[
-              'mld-experiment-popover__save-btn',
-              { 'mld-experiment-popover__save-btn--loading': saveLoading },
-              { 'mld-experiment-popover__save-btn--success': showSuccess },
-            ]"
-            :disabled="saveDisabled && !showSuccess"
-            @click="handleSave"
-          >
-            <!-- Loading spinner -->
-            <span v-if="saveLoading" class="mld-experiment-popover__spinner" />
-            <!-- Success check -->
-            <svg v-else-if="showSuccess" class="mld-experiment-popover__check-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
-            </svg>
-            <!-- Save icon -->
-            <svg v-else class="mld-experiment-popover__save-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4" />
-            </svg>
-            <!-- Label -->
-            <span>{{ showSuccess && saveSuccessMessage ? saveSuccessMessage : 'Save to Experiment' }}</span>
-          </button>
-          <div v-if="saveDisabled && saveDisabledMessage && !showSuccess" class="mld-experiment-popover__save-hint">
-            {{ saveDisabledMessage }}
-          </div>
-        </div>
-      </template>
     </div>
+
+    <!-- Save confirmation dialog -->
+    <ConfirmDialog
+      v-model="showConfirm"
+      :title="confirmTitle ?? 'Save to Experiment'"
+      :message="confirmMessage ?? `Save current data to ${experimentName}?`"
+      variant="info"
+      confirm-label="Save"
+      :loading="saveLoading"
+      @confirm="handleConfirmSave"
+    />
   </div>
 </template>
 

package/src/composables/useAuth.ts

@@ -61,6 +61,7 @@ export interface UseAuthReturn {
 // across multiple useAuth() instances
 let _refreshPromise: Promise<boolean> | null = null
 let _refreshTimerId: number | null = null
+let _mountedConsumerCount = 0
 
 export function useAuth(): UseAuthReturn {
   const authStore = useAuthStore()
@@ -385,15 +386,20 @@ export function useAuth(): UseAuthReturn {
 
   if (getCurrentInstance()) {
     onMounted(() => {
+      _mountedConsumerCount += 1
       checkInterval = window.setInterval(checkAndRefreshIfNeeded, TOKEN_REFRESH_CHECK_INTERVAL_MS)
     })
 
     onUnmounted(() => {
-      stopTokenRefresh()
       if (checkInterval !== null) {
         window.clearInterval(checkInterval)
         checkInterval = null
       }
+
+      _mountedConsumerCount = Math.max(0, _mountedConsumerCount - 1)
+      if (_mountedConsumerCount === 0) {
+        stopTokenRefresh()
+      }
     })
 
     // Watch for token changes to reschedule refresh