@morscherlab/mint-sdk 1.4.0-beta.1 → 1.4.0-beta.10

package/src/components/ExperimentPopover.vue

@@ -1,14 +1,22 @@
 <script setup lang="ts">
-/** Floating popover showing the active experiment with save, detach, and select actions. */
-import { ref, computed, watch, onUnmounted, useTemplateRef } from 'vue'
+/** Top-bar control for the attached experiment: a trigger joined to an optional Save button, with a summary panel (change, open, detach). */
+import { ref, computed, watch, nextTick, onUnmounted, useTemplateRef } from 'vue'
+import { ArrowLeftRight, Check, ChevronDown, CircleAlert, CloudUpload, ExternalLink, Link, LoaderCircle, Unlink } from 'lucide-vue-next'
 import { useDropdownState } from '../composables/useDropdownState'
 import { format as formatStatus } from '../utils/experimentStatus'
+import { formatRelativeTime } from '../utils/time'
 import ConfirmDialog from './ConfirmDialog.vue'
 
 interface Props {
   experimentName?: string
   experimentCode?: string
   experimentStatus?: string
+  /** Platform id of the bound experiment; enables "Open in MINT". */
+  experimentId?: number | null
+  experimentProject?: string
+  experimentOwner?: string
+  /** ISO timestamp of the last update, shown as relative time. */
+  experimentUpdatedAt?: 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. */
@@ -19,18 +27,30 @@ interface Props {
   saveLoading?: boolean
   saveSuccessMessage?: string
   saveDisabledMessage?: string
+  saveLabel?: string
+  /** Unsaved changes: marks the Save button with a dot. */
+  dirty?: boolean
   confirmSave?: boolean
   confirmTitle?: string
   confirmMessage?: string
+  /** Empty-state trigger label. */
+  placeholder?: string
+  /** The trigger name truncates at this width (px); its title shows code and name in full. */
+  maxNameWidth?: number
 }
 
 const props = withDefaults(defineProps<Props>(), {
+  experimentId: null,
   isResolving: false,
   showSave: false,
   showDetach: false,
   saveDisabled: false,
   saveLoading: false,
+  saveLabel: 'Save',
+  dirty: false,
   confirmSave: true,
+  placeholder: 'Attach experiment',
+  maxNameWidth: 200,
 })
 
 // An experiment is bound but has no name to show — either still resolving or
@@ -38,17 +58,13 @@ const props = withDefaults(defineProps<Props>(), {
 // 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 isEmpty = computed(() => !isUnresolved.value && !hasExperiment.value)
+const hasSave = computed(() => props.showSave && !isUnresolved.value && hasExperiment.value)
 
 const triggerLabel = computed(() => {
   if (props.isResolving) return 'Loading experiment'
   if (props.error) return 'Experiment unavailable'
-  return props.experimentName || props.experimentCode || 'No experiment'
+  return [props.experimentCode, props.experimentName].filter(Boolean).join(' · ') || props.placeholder
 })
 
 const emit = defineEmits<{
@@ -65,9 +81,38 @@ const { isOpen, close, toggle } = useDropdownState({
 const showSuccess = ref(false)
 const showConfirm = ref(false)
 
+// The panel hangs from the group's left edge; when that would cross the
+// viewport's right edge (a control at the end of the top bar) it hangs from the right.
+const panel = useTemplateRef<HTMLElement>('panel')
+const panelAlignEnd = ref(false)
+watch(isOpen, async (open) => {
+  if (!open) return
+  panelAlignEnd.value = false
+  await nextTick()
+  const right = panel.value?.getBoundingClientRect().right ?? 0
+  panelAlignEnd.value = right > document.documentElement.clientWidth
+})
+
+const saveTitle = computed(() => {
+  if (props.saveDisabled && props.saveDisabledMessage) return props.saveDisabledMessage
+  if (showSuccess.value && props.saveSuccessMessage) return props.saveSuccessMessage
+  return `${props.saveLabel} to experiment`
+})
+
+// A function, not a computed: "Updated" is relative to now, so it is
+// re-evaluated each time the panel renders.
+function metaRows(): [string, string][] {
+  return ([
+    ['Project', props.experimentProject],
+    ['Status', props.experimentStatus && formatStatus(props.experimentStatus)],
+    ['Owner', props.experimentOwner],
+    ['Updated', props.experimentUpdatedAt && formatRelativeTime(props.experimentUpdatedAt)],
+  ] as [string, string | undefined][]).filter((row): row is [string, string] => !!row[1])
+}
+
 function handleTriggerClick() {
-  if (!hasExperiment.value && !isUnresolved.value) {
-    handleSelect()
+  if (isEmpty.value) {
+    emit('select')
     return
   }
   toggle()
@@ -80,6 +125,7 @@ function handleSelect() {
 
 function handleSave() {
   if (props.saveDisabled || props.saveLoading) return
+  close()
   if (props.confirmSave) {
     showConfirm.value = true
   } else {
@@ -117,201 +163,137 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div ref="popover" class="mint-experiment-popover">
-    <!-- Split trigger: experiment pill + inline save -->
-    <div
+  <div ref="popover" :class="['mint-experiment-popover', { 'mint-experiment-popover--save': hasSave }]">
+    <!-- Trigger: code + name when attached, opens the panel; the empty state selects directly. -->
+    <button
+      ref="trigger"
+      type="button"
       :class="[
-        'mint-experiment-popover__split',
-        { 'mint-experiment-popover__split--with-save': showSave && experimentName },
+        'mint-experiment-popover__trigger',
+        { 'mint-experiment-popover__trigger--active': isOpen },
+        { 'mint-experiment-popover__trigger--empty': isEmpty },
+        { 'mint-experiment-popover__trigger--loading': isResolving },
+        { 'mint-experiment-popover__trigger--error': !isResolving && !!error },
       ]"
+      :title="triggerLabel"
+      :aria-label="isUnresolved ? triggerLabel : undefined"
+      :aria-busy="isResolving || undefined"
+      :aria-expanded="isEmpty ? undefined : isOpen"
+      @click.stop="handleTriggerClick"
     >
-      <!-- Left: experiment trigger (selects when empty, otherwise opens popover). Prefer the human-readable
-           name; the formal code, when present, stays in the detail panel. -->
-      <button
-        ref="trigger"
-        type="button"
-        :class="[
-          'mint-experiment-popover__trigger',
-          { 'mint-experiment-popover__trigger--active': isOpen },
-          { 'mint-experiment-popover__trigger--empty': !isUnresolved && !hasExperiment },
-          { 'mint-experiment-popover__trigger--loading': isResolving },
-          { 'mint-experiment-popover__trigger--error': !isResolving && !!error },
-        ]"
-        :title="isUnresolved ? triggerLabel : experimentName || experimentCode || undefined"
-        :aria-label="isUnresolved ? triggerLabel : undefined"
-        :aria-busy="isResolving || undefined"
-        :aria-expanded="isOpen"
-        @click.stop="handleTriggerClick"
-      >
-        <!-- Flask icon -->
-        <svg class="mint-experiment-popover__trigger-icon" aria-hidden="true" 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>
-        <!-- 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-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 -->
-        <svg class="mint-experiment-popover__trigger-chevron" aria-hidden="true" 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>
+      <!-- Resolving and error come first: with an experiment bound but no name
+           yet, the empty placeholder would be a lie. -->
+      <span v-if="isResolving" class="mint-experiment-popover__trigger-skeleton" aria-hidden="true" />
+      <template v-else-if="error">
+        <CircleAlert class="mint-experiment-popover__trigger-icon" :size="14" aria-hidden="true" />
+        <span class="mint-experiment-popover__trigger-text">Experiment unavailable</span>
+      </template>
+      <template v-else-if="hasExperiment">
+        <span v-if="experimentCode" class="mint-exp-code mint-exp-code--sm">{{ experimentCode }}</span>
+        <span
+          v-if="experimentName"
+          class="mint-experiment-popover__trigger-text"
+          :style="{ maxWidth: `${maxNameWidth}px` }"
+        >{{ experimentName }}</span>
+      </template>
+      <template v-else>
+        <Link class="mint-experiment-popover__trigger-icon" :size="14" aria-hidden="true" />
+        <span class="mint-experiment-popover__trigger-text">{{ placeholder }}</span>
+      </template>
+      <ChevronDown v-if="!isEmpty" class="mint-experiment-popover__trigger-chevron" :size="13" aria-hidden="true" />
+    </button>
 
-      <!-- Right: inline save button (direct action) -->
-      <button
-        v-if="showSave && experimentName"
-        type="button"
-        :class="[
-          'mint-experiment-popover__save-trigger',
-          { 'mint-experiment-popover__save-trigger--loading': saveLoading },
-          { 'mint-experiment-popover__save-trigger--success': showSuccess },
-          { 'mint-experiment-popover__save-trigger--disabled': saveDisabled && !showSuccess },
-        ]"
-        :disabled="saveDisabled && !showSuccess"
-        :title="saveDisabled && saveDisabledMessage ? saveDisabledMessage : showSuccess && saveSuccessMessage ? saveSuccessMessage : 'Save to Experiment'"
-        aria-label="Save to experiment"
-        @click.stop="handleSave"
-      >
-        <!-- Loading spinner -->
-        <span v-if="saveLoading" class="mint-experiment-popover__spinner--inline" />
-        <!-- Success check -->
-        <svg v-else-if="showSuccess" class="mint-experiment-popover__save-trigger-icon" aria-hidden="true" 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="mint-experiment-popover__save-trigger-icon" aria-hidden="true" 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>
+    <!-- Save: joined to the trigger at top-bar level, never inside the panel. -->
+    <button
+      v-if="hasSave"
+      type="button"
+      :class="[
+        'mint-experiment-popover__save',
+        { 'mint-experiment-popover__save--loading': saveLoading },
+        { 'mint-experiment-popover__save--success': showSuccess },
+        { 'mint-experiment-popover__save--disabled': saveDisabled && !showSuccess },
+      ]"
+      :disabled="saveLoading || (saveDisabled && !showSuccess)"
+      :title="saveTitle"
+      :aria-label="dirty ? `${saveTitle} (unsaved changes)` : saveTitle"
+      @click.stop="handleSave"
+    >
+      <LoaderCircle v-if="saveLoading" class="mint-experiment-popover__save-spinner" :size="14" aria-hidden="true" />
+      <Check v-else-if="showSuccess" :size="14" aria-hidden="true" />
+      <CloudUpload v-else :size="14" aria-hidden="true" />
+      <span>{{ saveLoading ? 'Saving…' : saveLabel }}</span>
+      <span v-if="dirty && !saveLoading" class="mint-experiment-popover__dirty" aria-hidden="true" />
+    </button>
 
-    <!-- Popover panel -->
-    <div v-if="isOpen" class="mint-experiment-popover__panel">
-      <!-- Header -->
-      <div class="mint-experiment-popover__header">
-        <div class="mint-experiment-popover__title">Experiment</div>
-        <div class="mint-experiment-popover__subtitle">
-          {{ panelSubtitle }}
-        </div>
+    <!-- Summary panel: header, meta, then menu rows. No buttons inside. -->
+    <div
+      v-if="isOpen"
+      ref="panel"
+      :class="['mint-experiment-popover__panel', { 'mint-experiment-popover__panel--end': panelAlignEnd }]"
+    >
+      <!-- Bound, still resolving — placeholders stand in for the record. -->
+      <div v-if="isResolving" class="mint-experiment-popover__head" aria-busy="true">
+        <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" />
       </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>
+      <!-- Bound, resolution failed — Detach stays reachable below. -->
+      <div v-else-if="error" class="mint-experiment-popover__head mint-experiment-popover__head--error" role="alert">
+        <b class="mint-experiment-popover__name">
+          <CircleAlert :size="14" aria-hidden="true" />
+          Experiment unavailable
+        </b>
+        <span class="mint-experiment-popover__message">{{ error }}</span>
       </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>
+      <template v-else>
+        <div class="mint-experiment-popover__head">
+          <span v-if="experimentCode" class="mint-exp-code mint-exp-code--sm">{{ experimentCode }}</span>
+          <b v-if="experimentName" class="mint-experiment-popover__name">{{ experimentName }}</b>
         </div>
-      </div>
+        <dl v-if="metaRows().length" class="mint-experiment-popover__meta">
+          <template v-for="[label, value] in metaRows()" :key="label">
+            <dt>{{ label }}</dt>
+            <dd>{{ value }}</dd>
+          </template>
+        </dl>
+      </template>
 
-      <!-- No experiment selected -->
-      <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" />
-          </svg>
-          Select Experiment
-        </button>
-      </div>
+      <div class="mint-experiment-popover__separator" role="separator" />
 
-      <!-- Experiment selected -->
-      <div v-else class="mint-experiment-popover__body">
-        <div class="mint-experiment-popover__card">
-          <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 v-if="experimentCode" class="mint-experiment-popover__card-code">{{ experimentCode }}</span>
-            <div class="mint-experiment-popover__card-name">{{ experimentName }}</div>
-            <div v-if="experimentStatus" class="mint-experiment-popover__card-status">
-              {{ formatStatus(experimentStatus) }}
-            </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>
+      <button type="button" class="mint-experiment-popover__option" @click="handleSelect">
+        <ArrowLeftRight class="mint-experiment-popover__option-icon" :size="14" aria-hidden="true" />
+        Change experiment…
+      </button>
+      <a
+        v-if="experimentId != null"
+        class="mint-experiment-popover__option"
+        :href="`/experiments/${experimentId}`"
+        target="_blank"
+        rel="noopener"
+        @click="close()"
+      >
+        <ExternalLink class="mint-experiment-popover__option-icon" :size="14" aria-hidden="true" />
+        Open in MINT
+      </a>
+      <button
+        v-if="showDetach"
+        type="button"
+        class="mint-experiment-popover__option mint-experiment-popover__option--danger"
+        @click="handleDetach"
+      >
+        <Unlink class="mint-experiment-popover__option-icon" :size="14" aria-hidden="true" />
+        Detach
+      </button>
     </div>
 
     <!-- Save confirmation dialog -->
     <ConfirmDialog
       v-model:open="showConfirm"
       :title="confirmTitle ?? 'Save to Experiment'"
-      :message="confirmMessage ?? `Save current data to ${experimentName}?`"
+      :message="confirmMessage ?? `Save current data to ${experimentName ?? experimentCode}?`"
       tone="info"
-      confirm-label="Save"
+      :confirm-label="saveLabel"
       :loading="saveLoading"
       @confirm="handleConfirmSave"
     />

package/src/components/ExperimentSelectorModal.story.vue

@@ -10,6 +10,7 @@ const mockExperiments: ExperimentSummary[] = [
   {
     id: 1,
     experiment_code: 'DR-HeLa-DOX-001',
+    created_by: 1,
     name: 'Doxorubicin dose-response in HeLa cells',
     status: 'completed',
     experiment_type: 'dose_response',
@@ -34,6 +35,7 @@ const mockExperiments: ExperimentSummary[] = [
   {
     id: 3,
     experiment_code: 'DR-PANC1-GEM-003',
+    created_by: 1,
     name: 'Gemcitabine IC50 in PANC-1',
     status: 'ongoing',
     experiment_type: 'dose_response',
@@ -70,6 +72,7 @@ const mockExperiments: ExperimentSummary[] = [
   {
     id: 6,
     experiment_code: 'SYN-HeLa-COMBO-006',
+    created_by: 1,
     name: 'DOX + 5-FU synergy screen in HeLa',
     status: 'planned',
     experiment_type: 'synergy',
@@ -106,6 +109,7 @@ const mockExperiments: ExperimentSummary[] = [
   {
     id: 9,
     experiment_code: 'CV-JURKAT-VIN-009',
+    created_by: 1,
     name: 'Vincristine titration Jurkat T-cells',
     status: 'ongoing',
     experiment_type: 'cell_viability',
@@ -128,9 +132,9 @@ const mockExperiments: ExperimentSummary[] = [
 ]
 
 const mockExperimentTypes = [
-  { name: 'dose_response', color: '#3b82f6' },
-  { name: 'cell_viability', color: '#10b981' },
-  { name: 'synergy', color: '#f59e0b' },
+  { value: 'dose_response', label: 'Dose response' },
+  { value: 'cell_viability', label: 'Cell viability' },
+  { value: 'synergy', label: 'Synergy' },
 ]
 
 const mockProjects = [
@@ -152,6 +156,7 @@ function applyMockFilters(
   const expType = params.get('experiment_type')
   const project = params.get('project')
   const search = params.get('search')?.toLowerCase()
+  const mine = params.get('mine') === 'true'
   const createdAfter = params.get('created_after')
   const sortBy = (params.get('sort_by') ?? 'created_at') as ExperimentSortField
   const sortOrder = params.get('sort_order') ?? 'desc'
@@ -159,6 +164,7 @@ function applyMockFilters(
   if (status) filtered = filtered.filter((e) => e.status === status)
   if (expType) filtered = filtered.filter((e) => e.experiment_type === expType)
   if (project) filtered = filtered.filter((e) => e.project === project)
+  if (mine) filtered = filtered.filter((e) => e.created_by === 1)
   if (search) {
     filtered = filtered.filter(
       (e) =>
@@ -208,7 +214,24 @@ onMounted(async () => {
     if (url.includes('/projects')) {
       config.adapter = () =>
         Promise.resolve({
-          data: mockProjects,
+          data: { projects: mockProjects, total: mockProjects.length },
+          status: 200,
+          statusText: 'OK',
+          headers: {},
+          config,
+        })
+      return config
+    }
+
+    // Status counts: the list filters without status (the route never receives one).
+    if (/^(\/api)?\/experiments\/stats(\?|$)/.test(url)) {
+      const params = new URLSearchParams(url.split('?')[1] ?? '')
+      const filtered = applyMockFilters(mockExperiments, params)
+      const by_status: Record<string, number> = { planned: 0, ongoing: 0, completed: 0, cancelled: 0 }
+      for (const e of filtered) by_status[e.status] = (by_status[e.status] ?? 0) + 1
+      config.adapter = () =>
+        Promise.resolve({
+          data: { total: filtered.length, by_status },
           status: 200,
           statusText: 'OK',
           headers: {},
@@ -246,9 +269,8 @@ onMounted(async () => {
 // -- Story state --
 const isOpen = ref(false)
 const isOpenEmpty = ref(false)
-const isOpenGrouped = ref(false)
 const isOpenWithSelection = ref(false)
-const isOpenAdvanced = ref(false)
+const isOpenFilters = ref(false)
 
 // The modal commits to the shared store rather than emitting; stories read the
 // selection back from the same place a plugin would.
@@ -262,7 +284,7 @@ const selectedExperiment = computed(() => experimentStore.current)
       <template #default="{ state }">
         <div style="padding: 2rem;">
           <button
-            style="padding: 0.5rem 1rem; background: var(--color-primary, #3b82f6); color: white; border: none; border-radius: 6px; cursor: pointer; font-size: 0.875rem;"
+            style="padding: 0.5rem 1rem; background: var(--color-primary); color: var(--text-on-accent); border: none; border-radius: var(--radius-md); cursor: pointer; font-size: 0.875rem;"
             @click="isOpen = true"
           >
             Open Experiment Selector
@@ -287,6 +309,7 @@ const selectedExperiment = computed(() => experimentStore.current)
             v-model:open="isOpen"
             :experiment-type="state.experimentType || undefined"
             :title="state.title"
+            :size="state.size || undefined"
             :current-experiment-id="selectedExperiment?.id ?? null"
           />
         </div>
@@ -294,47 +317,28 @@ const selectedExperiment = computed(() => experimentStore.current)
 
       <template #controls="{ state }">
         <HstCheckbox v-model="isOpen" title="Open" />
+        <HstSelect v-model="state.size" title="Size (default lg)" :options="['', 'md', 'lg', 'xl', 'full']" />
         <HstText v-model="state.title" title="Title" />
         <HstText v-model="state.experimentType" title="Experiment Type" />
       </template>
     </Variant>
 
-    <Variant title="With Advanced Filters">
+    <Variant title="Active Filters">
       <div style="padding: 2rem;">
-        <p style="font-size: 0.8125rem; color: var(--text-muted, #94a3b8); margin: 0 0 1rem;">
-          Opens with advanced filters expanded: Project, Date range, Sort, and Group toggle.
+        <p style="font-size: 0.8125rem; color: var(--text-muted); margin: 0 0 1rem;">
+          Pick a status (each option shows its count), pick a project or press Mine: the trigger
+          fills with the accent tint and "Clear N" appears. Mine keeps the experiments of user 1.
         </p>
         <button
-          style="padding: 0.5rem 1rem; background: var(--color-primary, #3b82f6); color: white; border: none; border-radius: 6px; cursor: pointer; font-size: 0.875rem;"
-          @click="isOpenAdvanced = true"
+          style="padding: 0.5rem 1rem; background: var(--color-primary); color: var(--text-on-accent); border: none; border-radius: var(--radius-md); cursor: pointer; font-size: 0.875rem;"
+          @click="isOpenFilters = true"
         >
           Open With Filters
         </button>
 
         <ExperimentSelectorModal
-          v-model:open="isOpenAdvanced"
-          title="Select Experiment"
-          :show-filters="true"
-        />
-      </div>
-    </Variant>
-
-    <Variant title="Grouped by Project">
-      <div style="padding: 2rem;">
-        <p style="font-size: 0.8125rem; color: var(--text-muted, #94a3b8); margin: 0 0 1rem;">
-          Opens with group-by-project enabled by default.
-        </p>
-        <button
-          style="padding: 0.5rem 1rem; background: var(--color-primary, #3b82f6); color: white; border: none; border-radius: 6px; cursor: pointer; font-size: 0.875rem;"
-          @click="isOpenGrouped = true"
-        >
-          Open Grouped Selector
-        </button>
-
-        <ExperimentSelectorModal
-          v-model:open="isOpenGrouped"
+          v-model:open="isOpenFilters"
           title="Select Experiment"
-          :group-by-project="true"
         />
       </div>
     </Variant>
@@ -345,7 +349,7 @@ const selectedExperiment = computed(() => experimentStore.current)
           Shows the "Clear selection" footer when an experiment is selected.
         </p>
         <button
-          style="padding: 0.5rem 1rem; background: var(--color-primary, #3b82f6); color: white; border: none; border-radius: 6px; cursor: pointer; font-size: 0.875rem;"
+          style="padding: 0.5rem 1rem; background: var(--color-primary); color: var(--text-on-accent); border: none; border-radius: var(--radius-md); cursor: pointer; font-size: 0.875rem;"
           @click="isOpenWithSelection = true"
         >
           Open Selector (with selection)
@@ -365,7 +369,7 @@ const selectedExperiment = computed(() => experimentStore.current)
           Filters to a non-existent experiment type, showing the empty state.
         </p>
         <button
-          style="padding: 0.5rem 1rem; background: var(--color-primary, #3b82f6); color: white; border: none; border-radius: 6px; cursor: pointer; font-size: 0.875rem;"
+          style="padding: 0.5rem 1rem; background: var(--color-primary); color: var(--text-on-accent); border: none; border-radius: var(--radius-md); cursor: pointer; font-size: 0.875rem;"
           @click="isOpenEmpty = true"
         >
           Open Experiment Selector (Empty)