@morscherlab/mld-sdk 0.9.4 → 0.9.6

package/src/composables/useExperimentSelector.ts

@@ -1,6 +1,15 @@
 import { ref, reactive, computed, watch, onScopeDispose, type Ref, type ComputedRef } from 'vue'
 import { useApi } from './useApi'
-import type { ExperimentSummary, ExperimentListResponse, ExperimentFilters, PlatformContext } from '../types'
+import { datePresetToISO } from './experiment-utils'
+import type {
+  ExperimentSummary,
+  ExperimentListResponse,
+  ExperimentFilters,
+  ExperimentTypeOption,
+  ExperimentSortField,
+  PlatformContext,
+  SelectOption,
+} from '../types'
 
 function getPlatformContext(): PlatformContext | undefined {
   if (typeof window === 'undefined') return undefined
@@ -27,11 +36,20 @@ export interface UseExperimentSelectorReturn {
   error: Ref<string | null>
   page: Ref<number>
   hasMore: ComputedRef<boolean>
+  // Sort
+  sortKey: Ref<string>
+  // Filter options
+  experimentTypes: Ref<ExperimentTypeOption[]>
+  projects: Ref<SelectOption<string>[]>
+  // Grouped view
+  groupedByProject: ComputedRef<[string, ExperimentSummary[]][]>
+  // Methods
   fetch: () => Promise<void>
   loadMore: () => Promise<void>
   reset: () => void
   select: (experiment: ExperimentSummary) => void
   clear: () => void
+  fetchFilterOptions: () => Promise<void>
 }
 
 export function useExperimentSelector(
@@ -48,26 +66,62 @@ export function useExperimentSelector(
   const error = ref<string | null>(null)
   const page = ref(0)
 
+  // Sort: combined key like "created_at:desc"
+  const sortKey = ref<string>('created_at:desc')
+
+  // Filter option data (fetched once, cached)
+  const experimentTypes = ref<ExperimentTypeOption[]>([])
+  const projects = ref<SelectOption<string>[]>([])
+  let filterOptionsFetched = false
+
   const hasMore = computed(() => experiments.value.length < total.value)
 
+  const filters: ExperimentFilters = reactive({
+    search: undefined,
+    status: undefined,
+    project: undefined,
+    experimentType: undefined,
+    datePreset: undefined,
+  })
+
+  function parseSortKey(): { sortBy: ExperimentSortField; sortOrder: 'asc' | 'desc' } {
+    const [field, order] = sortKey.value.split(':')
+    return {
+      sortBy: (field || 'created_at') as ExperimentSortField,
+      sortOrder: (order || 'desc') as 'asc' | 'desc',
+    }
+  }
+
   async function fetchExperiments(): Promise<void> {
     isLoading.value = true
     error.value = null
     try {
       const params = new URLSearchParams()
-      // Priority: explicit option > platform context (single type) > no filter
+      // Priority: explicit option > platform context (single type) > filter dropdown > no filter
       const allowedTypes = getPlatformContext()?.allowedExperimentTypes
       const effectiveType = experimentType
         ?? (allowedTypes?.length === 1 ? allowedTypes[0] : undefined)
+        ?? filters.experimentType
+        ?? undefined
       if (effectiveType) params.set('experiment_type', effectiveType)
       if (filters.status) params.set('status', filters.status)
       if (filters.search) params.set('search', filters.search)
       if (filters.project) params.set('project', filters.project)
+
+      // Sort params
+      const { sortBy, sortOrder } = parseSortKey()
+      params.set('sort_by', sortBy)
+      params.set('sort_order', sortOrder)
+
+      // Date preset → created_after
+      if (filters.datePreset) {
+        params.set('created_after', datePresetToISO(filters.datePreset))
+      }
+
       params.set('limit', String(limit))
       params.set('skip', String(page.value * limit))
 
       const query = params.toString()
-      // Use absolute platform URL in integrated mode to bypass plugin's baseURL
       const base = platformBase ?? '/api'
       const url = `${base}/experiments${query ? `?${query}` : ''}`
       const data = await api.get<ExperimentListResponse>(url)
@@ -84,7 +138,19 @@ export function useExperimentSelector(
       } else {
         experiments.value = [...experiments.value, ...filtered]
       }
-      total.value = effectiveType || !allowedTypes?.length ? data.total : filtered.length
+      // When client-side filtering is active (multiple allowedTypes), we can't
+      // use data.total since it counts all types. Check if server has more pages.
+      if (!effectiveType && allowedTypes && allowedTypes.length > 1) {
+        if (data.experiments.length < limit) {
+          // Server returned less than a full page — no more data
+          total.value = experiments.value.length
+        } else {
+          // Might be more pages on the server
+          total.value = experiments.value.length + 1
+        }
+      } else {
+        total.value = data.total
+      }
     } catch (e) {
       error.value = e instanceof Error ? e.message : 'Failed to fetch experiments'
       if (page.value === 0) {
@@ -96,6 +162,32 @@ export function useExperimentSelector(
     }
   }
 
+  async function fetchFilterOptions(): Promise<void> {
+    if (filterOptionsFetched) return
+    filterOptionsFetched = true
+
+    const base = platformBase ?? '/api'
+    const [typesRes, projectsRes] = await Promise.allSettled([
+      api.get<Array<{ value: string; label: string; color?: string }>>(`${base}/experiments/experiment-types`),
+      api.get<{ projects: Array<{ id: number; name: string }>; total: number }>(`${base}/projects`),
+    ])
+
+    if (typesRes.status === 'fulfilled' && Array.isArray(typesRes.value)) {
+      experimentTypes.value = typesRes.value.map(t => ({
+        value: t.value,
+        label: t.label,
+        color: t.color,
+      }))
+    }
+
+    if (projectsRes.status === 'fulfilled' && projectsRes.value?.projects && Array.isArray(projectsRes.value.projects)) {
+      projects.value = projectsRes.value.projects.map(p => ({
+        value: p.name,
+        label: p.name,
+      }))
+    }
+  }
+
   async function loadMore(): Promise<void> {
     if (!hasMore.value || isLoading.value) return
     page.value++
@@ -118,13 +210,30 @@ export function useExperimentSelector(
     filters.search = undefined
     filters.status = undefined
     filters.project = undefined
+    filters.experimentType = undefined
+    filters.datePreset = undefined
+    sortKey.value = 'created_at:desc'
     page.value = 0
   }
 
-  const filters: ExperimentFilters = reactive({
-    search: undefined,
-    status: undefined,
-    project: undefined,
+  // Group experiments by project (client-side)
+  const groupedByProject = computed<[string, ExperimentSummary[]][]>(() => {
+    const groups = new Map<string, ExperimentSummary[]>()
+    for (const exp of experiments.value) {
+      const key = exp.project_name ?? exp.project ?? 'No project'
+      const list = groups.get(key)
+      if (list) {
+        list.push(exp)
+      } else {
+        groups.set(key, [exp])
+      }
+    }
+    // Sort alphabetically, "No project" last
+    return [...groups.entries()].sort(([a], [b]) => {
+      if (a === 'No project') return 1
+      if (b === 'No project') return -1
+      return a.localeCompare(b)
+    })
   })
 
   // Debounced watch on search filter
@@ -140,10 +249,12 @@ export function useExperimentSelector(
     },
   )
 
-  // Immediate watch on status/project filters (no debounce needed)
+  // Immediate watch on discrete filters and sort (cancel any pending search debounce)
   watch(
-    () => [filters.status, filters.project],
+    () => [filters.status, filters.project, filters.experimentType, filters.datePreset, sortKey.value],
     () => {
+      if (debounceTimer) clearTimeout(debounceTimer)
+      debounceTimer = null
       page.value = 0
       fetchExperiments()
     },
@@ -166,10 +277,15 @@ export function useExperimentSelector(
     error,
     page,
     hasMore,
+    sortKey,
+    experimentTypes,
+    projects,
+    groupedByProject,
     fetch: fetchExperiments,
     loadMore,
     reset,
     select,
     clear,
+    fetchFilterOptions,
   }
 }

package/src/composables/useForm.ts

@@ -155,11 +155,11 @@ export function useForm<T extends Record<string, unknown>>(
   initialValues: T,
   rules: Partial<Record<keyof T, FieldRules>> = {}
 ): UseFormReturn<T> {
-  // Store initial values for reset
-  const _initialValues = { ...initialValues }
+  // Deep copy initial values so nested objects are not shared
+  const _initialValues = structuredClone(initialValues)
 
   // Reactive form data
-  const data = reactive({ ...initialValues }) as T
+  const data = reactive(structuredClone(initialValues)) as T
 
   // Field state - use simple Record types for better TS compatibility
   const errors = reactive<Record<string, string | null>>(

package/src/composables/usePlatformContext.ts

@@ -10,6 +10,8 @@ const platformContext = ref<PlatformContext>({
 let allowedOrigins: Set<string> = new Set()
 let allowAnyOrigin = false
 let initialized = false
+let listenerCount = 0
+let currentHandler: ((event: MessageEvent) => void) | null = null
 
 /**
  * Derive origin from URL (protocol + host)
@@ -203,13 +205,21 @@ export function usePlatformContext(options: PlatformContextOptions = {}) {
   onMounted(() => {
     if (!initialized) {
       detectPlatform()
+      currentHandler = handlePlatformMessage
       window.addEventListener('message', handlePlatformMessage)
       initialized = true
     }
+    listenerCount++
   })
 
   onUnmounted(() => {
-    // Don't remove listener as other components may still need it
+    listenerCount--
+    if (listenerCount <= 0 && currentHandler) {
+      window.removeEventListener('message', currentHandler)
+      currentHandler = null
+      initialized = false
+      listenerCount = 0
+    }
   })
 
   const isIntegrated = computed(() => platformContext.value.isIntegrated)

package/src/index.ts

@@ -153,9 +153,12 @@ export {
   type UseExperimentSelectorReturn,
   // Experiment utilities
   formatExperimentDate,
+  datePresetToISO,
   EXPERIMENT_STATUS_OPTIONS,
   EXPERIMENT_STATUS_VARIANT_MAP,
   EXPERIMENT_STATUS_LABELS,
+  DATE_PRESET_OPTIONS,
+  SORT_OPTIONS,
   // Experiment data
   useExperimentData,
   type UseExperimentDataOptions,

package/src/stores/auth.ts

@@ -5,6 +5,8 @@ import type { AuthConfig, UserInfo } from '../types'
 const AUTH_TOKEN_KEY = 'mld-auth-token'
 const AUTH_EXPIRES_KEY = 'mld-auth-expires'
 
+const hasLocalStorage = typeof localStorage !== 'undefined' && typeof localStorage.getItem === 'function'
+
 export const useAuthStore = defineStore('mld-auth', () => {
   // State
   const token = ref<string | null>(null)
@@ -50,18 +52,20 @@ export const useAuthStore = defineStore('mld-auth', () => {
 
   // Actions
   function initialize() {
-    const storedToken = localStorage.getItem(AUTH_TOKEN_KEY)
-    const storedExpires = localStorage.getItem(AUTH_EXPIRES_KEY)
-
-    if (storedToken) {
-      token.value = storedToken
-
-      if (storedExpires) {
-        const expires = new Date(storedExpires)
-        if (expires > new Date()) {
-          tokenExpires.value = expires
-        } else {
-          clearToken()
+    if (hasLocalStorage) {
+      const storedToken = localStorage.getItem(AUTH_TOKEN_KEY)
+      const storedExpires = localStorage.getItem(AUTH_EXPIRES_KEY)
+
+      if (storedToken) {
+        token.value = storedToken
+
+        if (storedExpires) {
+          const expires = new Date(storedExpires)
+          if (expires > new Date()) {
+            tokenExpires.value = expires
+          } else {
+            clearToken()
+          }
         }
       }
     }
@@ -74,8 +78,10 @@ export const useAuthStore = defineStore('mld-auth', () => {
     const expires = new Date(Date.now() + expiresIn * 1000)
     tokenExpires.value = expires
 
-    localStorage.setItem(AUTH_TOKEN_KEY, accessToken)
-    localStorage.setItem(AUTH_EXPIRES_KEY, expires.toISOString())
+    if (hasLocalStorage) {
+      localStorage.setItem(AUTH_TOKEN_KEY, accessToken)
+      localStorage.setItem(AUTH_EXPIRES_KEY, expires.toISOString())
+    }
   }
 
   function clearToken() {
@@ -84,8 +90,10 @@ export const useAuthStore = defineStore('mld-auth', () => {
     username.value = null
     userInfo.value = null
 
-    localStorage.removeItem(AUTH_TOKEN_KEY)
-    localStorage.removeItem(AUTH_EXPIRES_KEY)
+    if (hasLocalStorage) {
+      localStorage.removeItem(AUTH_TOKEN_KEY)
+      localStorage.removeItem(AUTH_EXPIRES_KEY)
+    }
   }
 
   function setUserInfo(info: UserInfo) {

package/src/styles/components/experiment-popover.css

@@ -9,17 +9,18 @@
   display: inline-flex;
   align-items: center;
   gap: 0.375rem;
-  padding: 0.3125rem 0.625rem;
-  border: 1px solid var(--border-color, var(--mld-border, #e5e7eb));
+  padding: 0.0625rem 0.5625rem;
+  border: 1px solid var(--border-color, var(--mld-border, #e2e8f0));
   background: var(--bg-secondary, var(--mld-bg-card, #ffffff));
-  border-radius: var(--mld-radius, 0.5rem);
-  color: var(--text-primary, var(--mld-text-primary, #111827));
+  border-radius: 0.375rem;
+  color: var(--text-primary, var(--mld-text-primary, #1e293b));
   font-size: 0.8125rem;
   font-weight: 500;
   cursor: pointer;
-  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
   white-space: nowrap;
   max-width: 220px;
+  height: 1.75rem;
 }
 
 .mld-experiment-popover__trigger:hover {
@@ -28,12 +29,12 @@
 
 .mld-experiment-popover__trigger--active {
   border-color: var(--color-primary, #6366F1);
-  box-shadow: 0 0 0 1px var(--color-primary, #6366F1);
+  background: rgba(99, 102, 241, 0.12);
+  color: var(--color-primary, #6366F1);
 }
 
 .mld-experiment-popover__trigger--empty {
-  border-style: dashed;
-  color: var(--text-secondary, var(--mld-text-secondary, #6b7280));
+  color: var(--text-muted, var(--mld-text-muted, #94a3b8));
 }
 
 .mld-experiment-popover__trigger-icon {
@@ -44,7 +45,11 @@
 }
 
 .mld-experiment-popover__trigger--empty .mld-experiment-popover__trigger-icon {
-  color: var(--text-muted, var(--mld-text-muted, #9ca3af));
+  color: var(--text-muted, var(--mld-text-muted, #94a3b8));
+}
+
+.mld-experiment-popover__trigger--active .mld-experiment-popover__trigger-icon {
+  color: var(--color-primary, #6366F1);
 }
 
 .mld-experiment-popover__trigger-text {
@@ -54,15 +59,16 @@
 }
 
 .mld-experiment-popover__trigger-chevron {
-  width: 0.875rem;
-  height: 0.875rem;
+  width: 0.75rem;
+  height: 0.75rem;
   flex-shrink: 0;
-  color: var(--text-muted, var(--mld-text-muted, #9ca3af));
+  color: var(--text-muted, var(--mld-text-muted, #94a3b8));
   transition: transform 0.15s ease;
 }
 
 .mld-experiment-popover__trigger--active .mld-experiment-popover__trigger-chevron {
   transform: rotate(180deg);
+  color: var(--color-primary, #6366F1);
 }
 
 /* Popover panel */
@@ -72,31 +78,41 @@
   right: 0;
   width: 280px;
   background: var(--bg-secondary, var(--mld-bg-card, #ffffff));
-  border: 1px solid var(--border-color, var(--mld-border, #e5e7eb));
-  border-radius: var(--mld-radius, 0.5rem);
-  box-shadow: var(--mld-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05));
+  border: 1px solid var(--border-color, var(--mld-border, #e2e8f0));
+  border-radius: 0.75rem;
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
   z-index: 50;
   overflow: hidden;
 }
 
 /* Header */
 .mld-experiment-popover__header {
-  padding: 0.75rem 1rem 0.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+  padding: 0.75rem 1rem 0;
+  border-bottom: 1px solid var(--border-color, var(--mld-border, #e2e8f0));
+  padding-bottom: 0.5rem;
 }
 
 .mld-experiment-popover__title {
-  font-size: 0.75rem;
+  font-size: 0.8125rem;
   font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  color: var(--text-muted, var(--mld-text-muted, #9ca3af));
+  color: var(--text-primary, var(--mld-text-primary, #1e293b));
 }
 
-/* Empty state */
-.mld-experiment-popover__empty {
-  padding: 0 1rem 0.75rem;
+.mld-experiment-popover__subtitle {
+  font-size: 0.6875rem;
+  font-weight: 400;
+  color: var(--text-muted, var(--mld-text-muted, #94a3b8));
 }
 
+/* Body (content area below header) */
+.mld-experiment-popover__body {
+  padding: 0.75rem 1rem;
+}
+
+/* Select experiment button (no experiment state) */
 .mld-experiment-popover__select-btn {
   display: flex;
   align-items: center;
@@ -104,43 +120,46 @@
   gap: 0.375rem;
   width: 100%;
   padding: 0.5rem;
-  border: 1.5px dashed var(--color-primary, #6366F1);
-  background: var(--color-primary-soft, rgba(99, 102, 241, 0.06));
-  border-radius: var(--mld-radius-sm, 0.375rem);
+  border: 1px solid var(--color-primary, #6366F1);
+  background: rgba(99, 102, 241, 0.12);
+  border-radius: 0.375rem;
   color: var(--color-primary, #6366F1);
   font-size: 0.8125rem;
   font-weight: 500;
   cursor: pointer;
   transition: background-color 0.15s ease;
+  height: 2.125rem;
 }
 
 .mld-experiment-popover__select-btn:hover {
-  background: var(--color-primary-soft, rgba(99, 102, 241, 0.12));
+  background: rgba(99, 102, 241, 0.18);
 }
 
 /* Experiment card */
 .mld-experiment-popover__card {
   display: flex;
   align-items: center;
-  gap: 0.625rem;
-  padding: 0 1rem 0.75rem;
+  gap: 0.5rem;
+  padding: 0.625rem;
+  background: var(--bg-tertiary, #f1f5f9);
+  border-radius: 0.375rem;
 }
 
 .mld-experiment-popover__card-icon {
-  width: 2rem;
-  height: 2rem;
+  width: 1.75rem;
+  height: 1.75rem;
   flex-shrink: 0;
-  border-radius: var(--mld-radius-sm, 0.375rem);
-  background: rgba(139, 92, 246, 0.12);
+  border-radius: 0.375rem;
+  background: rgba(139, 92, 246, 0.15);
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
 .mld-experiment-popover__card-icon svg {
-  width: 1.125rem;
-  height: 1.125rem;
-  color: #8B5CF6;
+  width: 1rem;
+  height: 1rem;
+  color: #6366F1;
 }
 
 .mld-experiment-popover__card-info {
@@ -151,7 +170,7 @@
 .mld-experiment-popover__card-name {
   font-size: 0.8125rem;
   font-weight: 500;
-  color: var(--text-primary, var(--mld-text-primary, #111827));
+  color: var(--text-primary, var(--mld-text-primary, #1e293b));
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -159,15 +178,15 @@
 
 .mld-experiment-popover__card-status {
   font-size: 0.6875rem;
-  color: var(--text-muted, var(--mld-text-muted, #9ca3af));
+  color: var(--text-muted, var(--mld-text-muted, #94a3b8));
 }
 
 .mld-experiment-popover__change-btn {
   flex-shrink: 0;
-  padding: 0.25rem 0.5rem;
+  padding: 0.25rem 0.375rem;
   border: none;
   background: transparent;
-  border-radius: var(--mld-radius-sm, 0.25rem);
+  border-radius: 0.25rem;
   color: var(--color-primary, #6366F1);
   font-size: 0.75rem;
   font-weight: 500;
@@ -176,13 +195,13 @@
 }
 
 .mld-experiment-popover__change-btn:hover {
-  background: var(--color-primary-soft, rgba(99, 102, 241, 0.08));
+  background: rgba(99, 102, 241, 0.08);
 }
 
 /* Divider */
 .mld-experiment-popover__divider {
   height: 1px;
-  background: var(--border-color, var(--mld-border, #e5e7eb));
+  background: var(--border-color, var(--mld-border, #e2e8f0));
   margin: 0;
 }
 
@@ -200,12 +219,13 @@
   padding: 0.4375rem 0.75rem;
   border: none;
   background: var(--color-primary, #6366F1);
-  border-radius: var(--mld-radius-sm, 0.375rem);
+  border-radius: 0.375rem;
   color: white;
   font-size: 0.8125rem;
   font-weight: 500;
   cursor: pointer;
   transition: background-color 0.15s ease, opacity 0.15s ease;
+  height: 2rem;
 }
 
 .mld-experiment-popover__save-btn:hover:not(:disabled) {
@@ -213,7 +233,7 @@
 }
 
 .mld-experiment-popover__save-btn:disabled {
-  opacity: 0.5;
+  opacity: 0.45;
   cursor: not-allowed;
 }
 
@@ -222,13 +242,29 @@
   pointer-events: none;
 }
 
-/* Save success state */
+/* Save icon */
+.mld-experiment-popover__save-icon {
+  width: 1rem;
+  height: 1rem;
+}
+
+/* Save success state - outlined green */
 .mld-experiment-popover__save-btn--success {
-  background: var(--mld-success-bg, #059669);
+  background: rgba(16, 185, 129, 0.12);
+  border: 1px solid rgba(16, 185, 129, 0.3);
+  color: #10b981;
 }
 
 .mld-experiment-popover__save-btn--success:hover {
-  background: var(--mld-success-bg, #059669);
+  background: rgba(16, 185, 129, 0.18);
+}
+
+/* Save hint text */
+.mld-experiment-popover__save-hint {
+  font-size: 0.6875rem;
+  color: var(--text-muted, var(--mld-text-muted, #94a3b8));
+  text-align: center;
+  margin-top: 0.5rem;
 }
 
 /* Spinner */
@@ -247,6 +283,6 @@
 
 /* Check icon for success */
 .mld-experiment-popover__check-icon {
-  width: 0.875rem;
-  height: 0.875rem;
+  width: 1rem;
+  height: 1rem;
 }