@morscherlab/mint-sdk 1.4.0-beta.7 → 1.4.0-beta.9

package/src/components/internal/ResourcePickerListInternal.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts" generic="T">
 /**
- * Searchable, optionally grouped single-select list shared by the experiment and
+ * Searchable single-select list shared by the experiment and
  * artifact selector modals: two-line rows (title, then code + meta) with status and date
  * in a right-hand column, a filled selected row, skeleton,
  * error and empty states, and the combobox keyboard model (↑ ↓ Enter).
  */
-import { computed, nextTick, reactive, ref, useId, watch } from 'vue'
+import { computed, nextTick, ref, useId, watch } from 'vue'
 import BaseInput from '../BaseInput.vue'
 import Skeleton from '../Skeleton.vue'
 import EmptyState from '../EmptyState.vue'
@@ -26,8 +26,6 @@ export interface ResourcePickerRow {
 const props = withDefaults(
   defineProps<{
     items: T[]
-    /** When set, rows render under collapsible group headers in this order. */
-    groups?: { label: string; items: T[] }[] | null
     itemKey: (item: T) => string | number
     describe: (item: T) => ResourcePickerRow
     selectedKey?: string | number | null
@@ -39,9 +37,10 @@ const props = withDefaults(
     error?: string | null
     emptyTitle?: string
     emptyDescription?: string
+    /** Focus the search field when the list mounts (the modal's focus trap honours `autofocus`). */
+    autofocusSearch?: boolean
   }>(),
   {
-    groups: null,
     selectedKey: null,
     placeholder: 'Search…',
     loading: false,
@@ -57,50 +56,33 @@ const emit = defineEmits<{
 defineSlots<{
   /** Extra filters on the search row. */
   filters?: () => unknown
-  /** A second filter row under the search. */
-  advanced?: () => unknown
   /** Row controls before the check; keys pressed inside them never select the row. */
   actions?: (props: { item: T }) => unknown
 }>()
 
 const listId = `mint-resource-picker-${useId().replace(/:/g, '')}`
-const collapsed = reactive(new Set<string>())
 const activeIndex = ref(-1)
 const listRef = ref<HTMLElement | null>(null)
 
-const visibleGroups = computed(() =>
-  props.groups?.map((group) => ({
-    ...group,
-    rows: collapsed.has(group.label) ? [] : group.items,
-  })),
-)
-/** Keyboard order: the rows on screen, top to bottom. */
-const flat = computed(() =>
-  visibleGroups.value ? visibleGroups.value.flatMap((group) => group.rows) : props.items,
-)
-const indexByKey = computed(() => new Map(flat.value.map((item, i) => [props.itemKey(item), i])))
+const indexByKey = computed(() => new Map(props.items.map((item, i) => [props.itemKey(item), i])))
 const showList = computed(() => !props.loading && !props.error && props.items.length > 0)
 
 function optionId(item: T): string {
   return `${listId}-${props.itemKey(item)}`
 }
 const activeDescendant = computed(() => {
-  const item = flat.value[activeIndex.value]
+  const item = props.items[activeIndex.value]
   return item === undefined ? undefined : optionId(item)
 })
 
 function indexOf(item: T): number {
   return indexByKey.value.get(props.itemKey(item)) ?? -1
 }
-function toggleGroup(label: string) {
-  if (collapsed.has(label)) collapsed.delete(label)
-  else collapsed.add(label)
-}
 function keydown(event: KeyboardEvent) {
-  // Keys belong to the search combobox; a focused header, filter or row action keeps its own Enter.
+  // Keys belong to the search combobox; a focused filter or row action keeps its own Enter.
   const target = event.target as HTMLElement | null
   if (target !== event.currentTarget && !target?.closest('.mint-resource-picker__search')) return
-  const rows = flat.value
+  const rows = props.items
   if (!rows.length) return
   if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
     event.preventDefault()
@@ -120,7 +102,7 @@ function keydown(event: KeyboardEvent) {
 }
 
 watch(
-  () => [props.items, props.groups],
+  () => props.items,
   () => {
     activeIndex.value = -1
   },
@@ -136,6 +118,7 @@ watch(
         :placeholder="placeholder"
         size="sm"
         type="search"
+        :autofocus="autofocusSearch"
         role="combobox"
         :aria-label="`Search ${label.toLowerCase()}`"
         :aria-expanded="showList"
@@ -151,7 +134,6 @@ watch(
       </BaseInput>
       <slot name="filters" />
     </div>
-    <slot name="advanced" />
 
     <div v-if="loading" class="mint-resource-picker__frame" aria-busy="true">
       <div v-for="n in 4" :key="n" class="mint-resource-picker__skeleton-row">
@@ -174,64 +156,42 @@ watch(
       role="listbox"
       :aria-label="label"
     >
-      <template v-for="group in visibleGroups ?? [{ label: '', items, rows: items }]" :key="group.label">
-        <button
-          v-if="visibleGroups"
-          type="button"
-          class="mint-resource-picker__group"
-          :aria-expanded="!collapsed.has(group.label)"
-          @click="toggleGroup(group.label)"
-        >
-          <svg
-            class="mint-resource-picker__chevron"
-            viewBox="0 0 16 16"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="1.5"
-            aria-hidden="true"
+      <div
+        v-for="item in items"
+        :id="optionId(item)"
+        :key="itemKey(item)"
+        role="option"
+        :aria-selected="itemKey(item) === selectedKey"
+        class="mint-resource-picker__row"
+        :class="{
+          'mint-resource-picker__row--selected': itemKey(item) === selectedKey,
+          'mint-resource-picker__row--active': indexOf(item) === activeIndex,
+        }"
+        @click="emit('select', item)"
+        @mouseenter="activeIndex = indexOf(item)"
+      >
+        <span class="mint-resource-picker__text">
+          <span class="mint-resource-picker__title">{{ describe(item).title }}</span>
+          <span v-if="describe(item).code || describe(item).meta?.length" class="mint-resource-picker__meta"
+            ><span v-if="describe(item).code" class="mint-resource-picker__code mint-exp-code mint-exp-code--sm">{{
+              describe(item).code
+            }}</span
+            ><span v-if="describe(item).meta?.length">{{ describe(item).meta!.join(' · ') }}</span></span
           >
-            <path d="M4 6l4 4 4-4" />
-          </svg>
-          <span class="mint-resource-picker__group-label">{{ group.label }}</span>
-          <span class="mint-resource-picker__group-count">{{ group.items.length }}</span>
-        </button>
-        <div
-          v-for="item in group.rows"
-          :id="optionId(item)"
-          :key="itemKey(item)"
-          role="option"
-          :aria-selected="itemKey(item) === selectedKey"
-          class="mint-resource-picker__row"
-          :class="{
-            'mint-resource-picker__row--selected': itemKey(item) === selectedKey,
-            'mint-resource-picker__row--active': indexOf(item) === activeIndex,
-          }"
-          @click="emit('select', item)"
-          @mouseenter="activeIndex = indexOf(item)"
-        >
-          <span class="mint-resource-picker__text">
-            <span class="mint-resource-picker__title">{{ describe(item).title }}</span>
-            <span v-if="describe(item).code || describe(item).meta?.length" class="mint-resource-picker__meta"
-              ><span v-if="describe(item).code" class="mint-resource-picker__code mint-exp-code mint-exp-code--sm">{{
-                describe(item).code
-              }}</span
-              ><span v-if="describe(item).meta?.length">{{ describe(item).meta!.join(' · ') }}</span></span
-            >
-          </span>
-          <span v-if="describe(item).status || describe(item).date" class="mint-resource-picker__aside">
-            <span
-              v-if="describe(item).status"
-              class="mint-resource-picker__status"
-              :class="`mint-resource-picker__status--${describe(item).status!.tone}`"
-              >{{ describe(item).status!.label }}</span
-            >
-            <span v-if="describe(item).date" class="mint-resource-picker__date">{{ describe(item).date }}</span>
-          </span>
-          <span v-if="$slots.actions" class="mint-resource-picker__actions" @click.stop>
-            <slot name="actions" :item="item" />
-          </span>
-        </div>
-      </template>
+        </span>
+        <span v-if="describe(item).status || describe(item).date" class="mint-resource-picker__aside">
+          <span
+            v-if="describe(item).status"
+            class="mint-resource-picker__status"
+            :class="`mint-resource-picker__status--${describe(item).status!.tone}`"
+            >{{ describe(item).status!.label }}</span
+          >
+          <span v-if="describe(item).date" class="mint-resource-picker__date">{{ describe(item).date }}</span>
+        </span>
+        <span v-if="$slots.actions" class="mint-resource-picker__actions" @click.stop>
+          <slot name="actions" :item="item" />
+        </span>
+      </div>
     </div>
   </div>
 </template>

package/src/components/internal/SelectMultipleInternal.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts">
-/** BaseSelect with `multiple`: a checkbox chip list with an optional selection cap (`max`). */
-import { computed } from 'vue'
+/** BaseSelect with `multiple`: a field of removable chips that opens a filterable checkbox listbox, capped by `max`. */
+import { computed, nextTick, ref, useAttrs, useId, watch } from 'vue'
+import { Check, ChevronDown, X } from 'lucide-vue-next'
 import type { OptionPrimitive, SelectOption, SelectOptionInput } from '../../types'
+import { useEventListener } from '../../composables/useEventListener'
 import { useListSelection } from '../../composables/useListSelection'
 import { normalizeOptionInput } from '../../utils/options'
 
@@ -15,6 +17,8 @@ interface Props {
   invalid?: boolean
   max?: number
   size?: 'sm' | 'md' | 'lg'
+  ariaLabelledby?: string
+  ariaDescribedby?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -23,103 +27,216 @@ const props = withDefaults(defineProps<Props>(), {
   invalid: false,
   max: undefined,
   size: 'md',
+  ariaLabelledby: undefined,
+  ariaDescribedby: undefined,
+})
+
+defineOptions({ inheritAttrs: false })
+
+// The wrapper takes class and style; every other attribute (aria-label, data-*) names the focusable field.
+const attrs = useAttrs()
+const fieldAttrs = computed(() => {
+  const { class: _class, style: _style, ...rest } = attrs
+  return rest
 })
 
 const emit = defineEmits<{
   'update:modelValue': [value: OptionPrimitive[]]
 }>()
 
+const id = useId().replace(/:/g, '')
+const listboxId = `mint-multi-select-${id}`
+const root = ref<HTMLElement | null>(null)
+const field = ref<HTMLElement | null>(null)
+const search = ref<HTMLInputElement | null>(null)
+const open = ref(false)
+const query = ref('')
+const activeIndex = ref(-1)
+
 const normalizedOptions = computed<MultiOption[]>(() => props.options.map(normalizeOptionInput<OptionPrimitive, MultiOption>))
-const optionSelection = useListSelection({
+const selection = useListSelection({
   selected: () => props.modelValue,
   items: normalizedOptions,
   getValue: option => option.value,
   disabled: () => props.disabled,
   max: () => props.max,
 })
-const canSelectMore = optionSelection.canAddMore
 
-function isSelected(value: OptionPrimitive): boolean {
-  return optionSelection.isSelected(value)
+const chips = computed(() => props.modelValue.map(value => ({
+  value,
+  label: normalizedOptions.value.find(option => option.value === value)?.label ?? String(value),
+})))
+const visibleOptions = computed(() => {
+  const needle = query.value.trim().toLocaleLowerCase()
+  if (!needle) return normalizedOptions.value
+  return normalizedOptions.value.filter(option => option.label.toLocaleLowerCase().includes(needle))
+})
+const activeDescendant = computed(() =>
+  activeIndex.value >= 0 ? `${listboxId}-option-${activeIndex.value}` : undefined,
+)
+
+function isUnavailable(option: MultiOption): boolean {
+  return !!option.disabled || (!selection.isSelected(option.value) && !selection.canAddMore.value)
 }
 
-function toggleOption(option: MultiOption) {
-  if (props.disabled || option.disabled) return
+async function openPanel(): Promise<void> {
+  if (props.disabled || open.value) return
+  query.value = ''
+  open.value = true
+  activeIndex.value = visibleOptions.value.length > 0 ? 0 : -1
+  await nextTick()
+  search.value?.focus()
+}
 
-  if (isSelected(option.value) || canSelectMore.value) {
-    emit('update:modelValue', optionSelection.toggleValue(option.value))
+async function closePanel(restoreFocus = false): Promise<void> {
+  open.value = false
+  query.value = ''
+  activeIndex.value = -1
+  if (restoreFocus) {
+    await nextTick()
+    field.value?.focus()
   }
 }
 
-function handleKeydown(event: KeyboardEvent, option: MultiOption) {
-  if (event.key === 'Enter' || event.key === ' ') {
-    event.preventDefault()
-    toggleOption(option)
-  }
+function moveActive(direction: 1 | -1): void {
+  const count = visibleOptions.value.length
+  if (count === 0) return
+  const start = activeIndex.value < 0 ? (direction === 1 ? -1 : count) : activeIndex.value
+  activeIndex.value = (start + direction + count) % count
+  void nextTick(() => document.getElementById(activeDescendant.value ?? '')?.scrollIntoView({ block: 'nearest' }))
+}
+
+function toggle(option: MultiOption): void {
+  if (props.disabled || isUnavailable(option)) return
+  emit('update:modelValue', selection.toggleValue(option.value))
+}
+
+function remove(value: OptionPrimitive): void {
+  if (props.disabled) return
+  emit('update:modelValue', props.modelValue.filter(selected => selected !== value))
+}
+
+function handleFieldKeydown(event: KeyboardEvent): void {
+  if (event.key !== 'Enter' && event.key !== ' ' && event.key !== 'ArrowDown') return
+  event.preventDefault()
+  void openPanel()
 }
 
-const selectedLabels = computed(() => {
-  return props.modelValue
-    .map(v => normalizedOptions.value.find(o => o.value === v)?.label)
-    .filter(Boolean)
+function handleSearchKeydown(event: KeyboardEvent): void {
+  if (event.key === 'ArrowDown') moveActive(1)
+  else if (event.key === 'ArrowUp') moveActive(-1)
+  else if (event.key === 'Enter') {
+    const option = visibleOptions.value[activeIndex.value]
+    if (option) toggle(option)
+  } else if (event.key === 'Escape') {
+    void closePanel(true)
+  } else if (event.key === 'Backspace' && query.value === '' && props.modelValue.length > 0) {
+    remove(props.modelValue[props.modelValue.length - 1]!)
+  } else return
+  event.preventDefault()
+}
+
+watch(visibleOptions, options => { activeIndex.value = options.length > 0 ? 0 : -1 })
+watch(() => props.disabled, disabled => { if (disabled) void closePanel() })
+useEventListener(() => document, 'pointerdown', event => {
+  if (open.value && !root.value?.contains(event.target as Node)) void closePanel()
 })
 </script>
 
 <template>
   <div
-    :class="[
-      'mint-multi-select',
-      `mint-multi-select--${size}`,
-      disabled ? 'mint-multi-select--disabled' : '',
-      invalid ? 'mint-multi-select--error' : '',
-    ]"
+    ref="root"
+    :class="['mint-multi-select', `mint-multi-select--${size}`, $attrs.class]"
+    :style="$attrs.style"
+    @focusout="!root?.contains($event.relatedTarget as Node | null) && closePanel()"
   >
     <div
-      v-if="modelValue.length === 0"
-      class="mint-multi-select__placeholder"
+      v-bind="fieldAttrs"
+      ref="field"
+      role="combobox"
+      :tabindex="disabled ? undefined : 0"
+      :class="[
+        'mint-multi-select__field',
+        {
+          'mint-multi-select__field--open': open,
+          'mint-multi-select__field--error': invalid,
+          'mint-multi-select__field--disabled': disabled,
+        },
+      ]"
+      aria-haspopup="listbox"
+      :aria-expanded="open"
+      :aria-controls="listboxId"
+      :aria-disabled="disabled || undefined"
+      :aria-invalid="invalid || undefined"
+      :aria-labelledby="ariaLabelledby || undefined"
+      :aria-describedby="ariaDescribedby || undefined"
+      @click="open ? closePanel() : openPanel()"
+      @keydown.self="handleFieldKeydown"
     >
-      {{ placeholder }}
+      <div class="mint-multi-select__chips">
+        <span v-for="chip in chips" :key="String(chip.value)" class="mint-multi-select__chip">
+          {{ chip.label }}
+          <button
+            v-if="!disabled"
+            type="button"
+            tabindex="-1"
+            class="mint-multi-select__chip-remove"
+            :aria-label="`Remove ${chip.label}`"
+            @click.stop="remove(chip.value)"
+          >
+            <X :size="11" :stroke-width="2.25" aria-hidden="true" />
+          </button>
+        </span>
+        <span v-if="chips.length === 0" class="mint-multi-select__placeholder">{{ placeholder }}</span>
+      </div>
+      <ChevronDown class="mint-multi-select__icon" :size="14" aria-hidden="true" />
     </div>
 
-    <div class="mint-multi-select__options" role="group" :aria-invalid="invalid || undefined">
-      <button
-        v-for="option in normalizedOptions"
-        :key="String(option.value)"
-        type="button"
-        role="checkbox"
-        :aria-checked="isSelected(option.value)"
-        :disabled="disabled || option.disabled || (!isSelected(option.value) && !canSelectMore)"
-        :class="[
-          'mint-multi-select__chip',
-          `mint-multi-select__chip--${size}`,
-          isSelected(option.value) ? 'mint-multi-select__chip--active' : '',
-          option.disabled ? 'mint-multi-select__chip--disabled' : '',
-          !isSelected(option.value) && !canSelectMore ? 'mint-multi-select__chip--disabled' : '',
-        ]"
-        @click="toggleOption(option)"
-        @keydown="handleKeydown($event, option)"
-      >
-        <svg
-          class="mint-multi-select__chip-check"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2.5"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          aria-hidden="true"
-        >
-          <path d="M20 6 9 17l-5-5" />
+    <div v-if="open" class="mint-popover mint-searchable-select__panel">
+      <div class="mint-searchable-select__search-wrap">
+        <svg viewBox="0 0 20 20" fill="none" stroke="currentColor" aria-hidden="true">
+          <circle cx="8.5" cy="8.5" r="5.5" /><path d="m13 13 4 4" />
         </svg>
-        <span class="mint-multi-select__chip-label">{{ option.label }}</span>
-      </button>
-    </div>
+        <input
+          ref="search"
+          v-model="query"
+          role="combobox"
+          type="search"
+          class="mint-searchable-select__search"
+          placeholder="Filter…"
+          aria-label="Filter options"
+          :aria-expanded="open"
+          :aria-controls="listboxId"
+          :aria-activedescendant="activeDescendant"
+          aria-autocomplete="list"
+          @keydown="handleSearchKeydown"
+        >
+      </div>
 
-    <div
-      v-if="modelValue.length > 0"
-      class="mint-multi-select__summary"
-    >
-      {{ selectedLabels.join(', ') }}
+      <ul :id="listboxId" class="mint-searchable-select__list" role="listbox" aria-multiselectable="true">
+        <li
+          v-for="(option, index) in visibleOptions"
+          :id="`${listboxId}-option-${index}`"
+          :key="String(option.value)"
+          role="option"
+          class="mint-menu-item mint-multi-select__option"
+          :class="{ 'mint-menu-item--active': activeIndex === index }"
+          :aria-selected="selection.isSelected(option.value)"
+          :aria-disabled="isUnavailable(option) || undefined"
+          @mousedown.prevent
+          @mouseenter="!isUnavailable(option) && (activeIndex = index)"
+          @click="toggle(option)"
+        >
+          <span
+            :class="['mint-multi-select__check', { 'mint-multi-select__check--on': selection.isSelected(option.value) }]"
+            aria-hidden="true"
+          >
+            <Check v-if="selection.isSelected(option.value)" :size="10" :stroke-width="3.5" />
+          </span>
+          <span class="mint-menu-item__label">{{ option.label }}</span>
+        </li>
+        <li v-if="visibleOptions.length === 0" class="mint-searchable-select__empty">No matching options</li>
+      </ul>
     </div>
   </div>
 </template>

package/src/components/internal/SelectSearchableInternal.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 /** BaseSelect with `searchable`: a single-select listbox with a search field, descriptions, disabled reasons, and custom slots. */
 import { computed, nextTick, ref, useAttrs, useId, watch } from 'vue'
+import { ChevronsUpDown } from 'lucide-vue-next'
 import type { SelectOption, SelectOptionInput } from '../../types'
 import { useEventListener } from '../../composables/useEventListener'
 import { normalizeOptionInput } from '../../utils/options'
@@ -176,9 +177,7 @@ useEventListener(() => document, 'pointerdown', event => {
       <span :class="['mint-searchable-select__value', { 'mint-searchable-select__value--placeholder': !selectedOption }]">
         {{ selectedOption?.label ?? placeholder }}
       </span>
-      <svg viewBox="0 0 20 20" fill="none" stroke="currentColor" aria-hidden="true">
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" d="m6 8 4 4 4-4" />
-      </svg>
+      <ChevronsUpDown :size="14" aria-hidden="true" />
     </button>
 
     <div v-if="open" class="mint-popover mint-searchable-select__panel">

package/src/composables/createClient.ts

@@ -86,6 +86,8 @@ export interface PluginContract {
   schemaVersion: 2
   plugin: {
     name?: string
+    displayName?: string
+    subtitle?: string
     packageName?: string
     version?: string
     description?: string

package/src/composables/index.ts

@@ -6,6 +6,7 @@ export { useToast } from './useToast'
 export { usePlatform } from './usePlatform'
 export { useExperiment, type ExperimentLoadStatus, type UseExperimentReturn } from './useExperiment'
 export { resolvePluginFrontendBase } from './pluginFrontendBase'
+export { providePluginIdentity, type PluginIdentityContract } from './pluginIdentity'
 export {
   useRequest,
   type RequestKind,

package/src/composables/pluginIdentity.ts

@@ -0,0 +1,31 @@
+import { reactive, readonly } from 'vue'
+import type { PluginContract } from './createClient'
+
+/** The `plugin` block of the generated contract (`./generated/mint-plugin`) that `providePluginIdentity` reads. */
+export interface PluginIdentityContract {
+  plugin: Pick<PluginContract['plugin'], 'name' | 'displayName' | 'subtitle' | 'description' | 'icon'>
+}
+
+const identity = reactive<{ name?: string; subtitle?: string; icon?: string }>({})
+
+/** The seeded identity AppTopBar shows in standalone mode. Internal: not exported from the package. */
+export const pluginIdentity = readonly(identity)
+
+/**
+ * Seed the standalone AppTopBar with the plugin name, subtitle and icon. In integrated
+ * mode the platform supplies them. Explicit `title`/`subtitle` props and the `#icon` slot still win.
+ *
+ * @example
+ * ```typescript
+ * import { providePluginIdentity } from '@morscherlab/mint-sdk'
+ * import { contract } from './generated/mint-plugin'
+ *
+ * providePluginIdentity(contract)
+ * ```
+ */
+export function providePluginIdentity(contract: PluginIdentityContract): void {
+  const { plugin } = contract
+  identity.name = plugin.displayName || plugin.name || undefined
+  identity.subtitle = plugin.subtitle || plugin.description || undefined
+  identity.icon = plugin.icon || undefined
+}

package/src/composables/useAppExperiment.ts

@@ -23,12 +23,19 @@ export interface UseAppExperimentOptions {
   onDetach?: () => void
   saveDisabled?: Ref<boolean> | ComputedRef<boolean>
   saveDisabledMessage?: string | Ref<string | undefined> | ComputedRef<string | undefined>
+  /** Unsaved changes; marks the Save button with a dot. */
+  dirty?: Ref<boolean> | ComputedRef<boolean>
 }
 
 export interface AppExperimentPopoverBinding {
   experimentName?: string
   experimentCode?: string
   experimentStatus?: ExperimentStatus
+  experimentId?: number | null
+  experimentProject?: string
+  experimentOwner?: string
+  /** ISO timestamp of the experiment's last update. */
+  experimentUpdatedAt?: string
   /** An experiment is bound but its record has not arrived yet. */
   isResolving: boolean
   /** Resolution failed; the binding is kept so the user can retry or detach. */
@@ -39,6 +46,7 @@ export interface AppExperimentPopoverBinding {
   saveDisabledMessage?: string
   saveLoading: boolean
   saveSuccessMessage?: string
+  dirty?: boolean
 }
 
 export interface AppExperimentSelectorModalBinding {
@@ -125,10 +133,19 @@ export function useAppExperiment(options: UseAppExperimentOptions = {}): UseAppE
   const showDetach = computed(() => experimentId.value !== null)
   const saveDisabled = computed(() => toValue(options.saveDisabled) ?? false)
   const saveDisabledMessage = computed(() => toValue(options.saveDisabledMessage))
+  const dirty = computed(() => toValue(options.dirty) ?? false)
+  const experimentOwner = computed(() => {
+    const owner = store.current?.created_by_user
+    return owner ? [owner.first_name, owner.last_name].filter(Boolean).join(' ') || owner.username : undefined
+  })
   const popover = computed<AppExperimentPopoverBinding>(() => ({
     experimentName: experimentName.value,
     experimentCode: experimentCode.value,
     experimentStatus: experimentStatus.value,
+    experimentId: experimentId.value,
+    experimentProject: store.current?.project_name || store.current?.project || undefined,
+    experimentOwner: experimentOwner.value,
+    experimentUpdatedAt: store.current?.updated_at,
     isResolving: isResolving.value,
     error: error.value ?? undefined,
     showSave: showSave.value,
@@ -137,6 +154,7 @@ export function useAppExperiment(options: UseAppExperimentOptions = {}): UseAppE
     saveDisabledMessage: saveDisabledMessage.value,
     saveLoading: saveLoading.value,
     saveSuccessMessage: saveSuccessMessage.value,
+    dirty: dirty.value,
   }))
   const selectorModal = computed<AppExperimentSelectorModalBinding>(() => ({
     open: showModal.value,
@@ -166,6 +184,8 @@ export function useAppExperiment(options: UseAppExperimentOptions = {}): UseAppE
     saveLoading.value = true
     try {
       const message = await options.onSave()
+      // The save changed the record on the platform; read it back so "Updated" is current.
+      await store.refresh()
       if (message) {
         saveSuccessMessage.value = message
         if (successTimer) clearTimeout(successTimer)