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

package/src/components/AppTopBar.vue

@@ -1,6 +1,10 @@
 <script setup lang="ts">
-/** Full application top bar with brand logo, static plugin identity, page selector, centered pill nav, experiment popover, and an account slot. */
-import { ref, computed, inject, defineAsyncComponent, onMounted, onBeforeUnmount, toValue, watch } from 'vue'
+/**
+ * Full application top bar with brand logo, static plugin identity, page selector, centered pill nav, experiment popover, and an account slot.
+ *
+ * The `#icon` slot applies in standalone mode only; integrated branding comes from `Metadata.icon`.
+ */
+import { ref, computed, inject, defineAsyncComponent, onMounted, onBeforeUnmount, toValue, useSlots, watch } from 'vue'
 import type {
   PillNavOption,
   PillNavItem,
@@ -18,6 +22,7 @@ import AppTopBarPillNavInternal from './internal/AppTopBarPillNavInternal.vue'
 import PluginIcon from './PluginIcon.vue'
 import { usePlatform } from '../composables/usePlatform'
 import { APP_EXPERIMENT_KEY } from '../composables/useAppExperiment'
+import { pluginIdentity } from '../composables/pluginIdentity'
 import { integrationHost } from '../utils/integrationHost'
 import { trackTopBarForToasts } from './AppTopBar.toastOffset'
 
@@ -75,12 +80,12 @@ const isStandalone = computed(() => !isIntegrated.value)
 const appExperiment = inject(APP_EXPERIMENT_KEY, null)
 const canBindExperiment = computed(() => plugin.value?.plugin_type !== 'static')
 
-const pluginIcon = computed(() => {
-  const currentPlugin = plugin.value
-  return currentPlugin?.icon
-    ? { icon: currentPlugin.icon, color: currentPlugin.color }
-    : null
-})
+const slots = useSlots()
+// Standalone: the seeded identity (providePluginIdentity) stands in for a missing icon and title.
+const pluginIcon = computed(() => plugin.value?.icon || (slots.logo ? undefined : pluginIdentity.icon))
+const seeded = computed(() => isStandalone.value && !props.title && !props.subtitle)
+const titleText = computed(() => props.title || (seeded.value ? pluginIdentity.name : undefined))
+const subtitleText = computed(() => props.subtitle || (seeded.value ? pluginIdentity.subtitle : undefined))
 
 const hasPlatformPageSelector = computed(() =>
   props.pageSelector === undefined && (plugin.value?.nav_items?.length ?? 0) > 1,
@@ -98,20 +103,22 @@ watch(platformPageSelectorEl, (element, _previous, onCleanup) => {
 const identityName = computed(() =>
   isIntegrated.value && !hasPageSelector.value ? plugin.value?.display_name || plugin.value?.name : undefined,
 )
+// Platforms before 1.4 send no subtitle; the description fills line 2.
+const identitySubtitle = computed(() => plugin.value?.subtitle || plugin.value?.description)
 const hasPillNav = computed(() => !!config.value.pills?.length)
 const hasTitleGroup = computed(
   () =>
     !hasPageSelector.value &&
     !identityName.value &&
-    !!props.title &&
-    !!props.subtitle
+    !!titleText.value &&
+    !!subtitleText.value
 )
 const hasTitleOnly = computed(
   () =>
     !hasPageSelector.value &&
     !identityName.value &&
     !hasTitleGroup.value &&
-    !!props.title,
+    !!titleText.value,
 )
 const normalizedPageSelector = computed<PageSelectorItem[]>(() =>
   props.pageSelector?.map(normalizeItemInput) ?? [],
@@ -137,135 +144,132 @@ const normalizedSettingsTabs = computed<SettingsTab[]>(() =>
   >
     <div class="mint-topbar__container">
       <!-- Left: brand -->
-      <div class="mint-topbar__brand">
-        <a
-          v-if="config.homePath && (config.homePath.startsWith('http') || config.homePath.startsWith('/'))"
-          :href="config.homePath"
-          class="mint-topbar-home-link"
-        >
-          <span v-if="isIntegrated || $slots.icon || $slots.logo || pluginIcon || config.logo" class="mint-topbar__identity">
-            <PluginIcon
-              v-if="isIntegrated"
-              class="mint-topbar__plugin-icon"
-              :icon="plugin?.icon"
-              :color="plugin?.color"
-              size="topbar"
-              variant="solid"
-            />
-            <slot v-else name="icon">
+      <div class="mint-topbar__start">
+        <div class="mint-topbar__brand">
+          <a
+            v-if="config.homePath && (config.homePath.startsWith('http') || config.homePath.startsWith('/'))"
+            :href="config.homePath"
+            class="mint-topbar-home-link"
+          >
+            <span v-if="isIntegrated || $slots.icon || $slots.logo || pluginIcon || config.logo" class="mint-topbar__identity">
               <PluginIcon
-                v-if="pluginIcon"
+                v-if="isIntegrated"
                 class="mint-topbar__plugin-icon"
-                :icon="pluginIcon.icon"
-                :color="pluginIcon.color"
+                :icon="plugin?.icon"
                 size="topbar"
                 variant="solid"
               />
-              <slot v-else name="logo">
-                <div v-if="config.logo" class="mint-topbar__logo">
-                  <div class="mint-topbar__logo-icon">
-                    <span class="mint-topbar__logo-text">M</span>
+              <slot v-else name="icon">
+                <PluginIcon
+                  v-if="pluginIcon"
+                  class="mint-topbar__plugin-icon"
+                  :icon="pluginIcon"
+                  size="topbar"
+                  variant="solid"
+                />
+                <slot v-else name="logo">
+                  <div v-if="config.logo" class="mint-topbar__logo">
+                    <div class="mint-topbar__logo-icon">
+                      <span class="mint-topbar__logo-text">M</span>
+                    </div>
                   </div>
-                </div>
+                </slot>
               </slot>
-            </slot>
-          </span>
-        </a>
-        <router-link
-          v-else-if="config.homePath"
-          :to="config.homePath"
-          class="mint-topbar-home-link"
-        >
-          <span v-if="isIntegrated || $slots.icon || $slots.logo || pluginIcon || config.logo" class="mint-topbar__identity">
-            <PluginIcon
-              v-if="isIntegrated"
-              class="mint-topbar__plugin-icon"
-              :icon="plugin?.icon"
-              :color="plugin?.color"
-              size="topbar"
-              variant="solid"
-            />
-            <slot v-else name="icon">
+            </span>
+          </a>
+          <router-link
+            v-else-if="config.homePath"
+            :to="config.homePath"
+            class="mint-topbar-home-link"
+          >
+            <span v-if="isIntegrated || $slots.icon || $slots.logo || pluginIcon || config.logo" class="mint-topbar__identity">
               <PluginIcon
-                v-if="pluginIcon"
+                v-if="isIntegrated"
                 class="mint-topbar__plugin-icon"
-                :icon="pluginIcon.icon"
-                :color="pluginIcon.color"
+                :icon="plugin?.icon"
                 size="topbar"
                 variant="solid"
               />
-              <slot v-else name="logo">
-                <div v-if="config.logo" class="mint-topbar__logo">
-                  <div class="mint-topbar__logo-icon">
-                    <span class="mint-topbar__logo-text">M</span>
+              <slot v-else name="icon">
+                <PluginIcon
+                  v-if="pluginIcon"
+                  class="mint-topbar__plugin-icon"
+                  :icon="pluginIcon"
+                  size="topbar"
+                  variant="solid"
+                />
+                <slot v-else name="logo">
+                  <div v-if="config.logo" class="mint-topbar__logo">
+                    <div class="mint-topbar__logo-icon">
+                      <span class="mint-topbar__logo-text">M</span>
+                    </div>
                   </div>
-                </div>
+                </slot>
               </slot>
-            </slot>
-          </span>
-        </router-link>
-        <template v-else>
-          <span v-if="isIntegrated || $slots.icon || $slots.logo || pluginIcon || config.logo" class="mint-topbar__identity">
-            <PluginIcon
-              v-if="isIntegrated"
-              class="mint-topbar__plugin-icon"
-              :icon="plugin?.icon"
-              :color="plugin?.color"
-              size="topbar"
-              variant="solid"
-            />
-            <slot v-else name="icon">
+            </span>
+          </router-link>
+          <template v-else>
+            <span v-if="isIntegrated || $slots.icon || $slots.logo || pluginIcon || config.logo" class="mint-topbar__identity">
               <PluginIcon
-                v-if="pluginIcon"
+                v-if="isIntegrated"
                 class="mint-topbar__plugin-icon"
-                :icon="pluginIcon.icon"
-                :color="pluginIcon.color"
+                :icon="plugin?.icon"
                 size="topbar"
                 variant="solid"
               />
-              <slot v-else name="logo">
-                <div v-if="config.logo" class="mint-topbar__logo">
-                  <div class="mint-topbar__logo-icon">
-                    <span class="mint-topbar__logo-text">M</span>
+              <slot v-else name="icon">
+                <PluginIcon
+                  v-if="pluginIcon"
+                  class="mint-topbar__plugin-icon"
+                  :icon="pluginIcon"
+                  size="topbar"
+                  variant="solid"
+                />
+                <slot v-else name="logo">
+                  <div v-if="config.logo" class="mint-topbar__logo">
+                    <div class="mint-topbar__logo-icon">
+                      <span class="mint-topbar__logo-text">M</span>
+                    </div>
                   </div>
-                </div>
+                </slot>
               </slot>
-            </slot>
-          </span>
-        </template>
-      </div>
+            </span>
+          </template>
+        </div>
 
-      <!-- Left: static plugin identity (not a control) -->
-      <span v-if="identityName" class="mint-topbar__plugin-identity">
-        <span class="mint-topbar__plugin-name">{{ identityName }}</span>
-      </span>
+        <!-- Left: static plugin identity (not a control) -->
+        <span v-if="identityName" class="mint-topbar__plugin-identity">
+          <span class="mint-topbar__plugin-name">{{ identityName }}</span>
+          <span v-if="identitySubtitle" class="mint-topbar__plugin-subtitle">{{ identitySubtitle }}</span>
+        </span>
 
-      <!-- Left: page selector (the platform integration script renders the nav_items one) -->
-      <span v-if="hasPlatformPageSelector" ref="platformPageSelectorEl" class="mint-topbar__platform-page-selector" />
-      <AppTopBarPageSelectorInternal
-        v-else-if="hasPropPageSelector"
-        :pages="normalizedPageSelector"
-        :current-page-id="currentPageSelectorId"
-        @select="emit('page-selector-select', $event)"
-      >
-        <template v-if="$slots['page-selector-icon']" #icon="slotProps">
-          <slot name="page-selector-icon" v-bind="slotProps" />
-        </template>
-        <template v-if="$slots['page-selector-item-icon']" #item-icon="slotProps">
-          <slot name="page-selector-item-icon" v-bind="slotProps" />
-        </template>
-      </AppTopBarPageSelectorInternal>
+        <!-- Left: page selector (the platform integration script renders the nav_items one) -->
+        <span v-if="hasPlatformPageSelector" ref="platformPageSelectorEl" class="mint-topbar__platform-page-selector" />
+        <AppTopBarPageSelectorInternal
+          v-else-if="hasPropPageSelector"
+          :pages="normalizedPageSelector"
+          :current-page-id="currentPageSelectorId"
+          @select="emit('page-selector-select', $event)"
+        >
+          <template v-if="$slots['page-selector-icon']" #icon="slotProps">
+            <slot name="page-selector-icon" v-bind="slotProps" />
+          </template>
+          <template v-if="$slots['page-selector-item-icon']" #item-icon="slotProps">
+            <slot name="page-selector-item-icon" v-bind="slotProps" />
+          </template>
+        </AppTopBarPageSelectorInternal>
 
-      <!-- Left: title -->
-      <div v-if="hasTitleGroup" class="mint-topbar-title-group">
-        <span class="mint-topbar-title">{{ title }}</span>
-        <span class="mint-topbar-subtitle">{{ subtitle }}</span>
-      </div>
+        <!-- Left: title -->
+        <div v-if="hasTitleGroup" class="mint-topbar-title-group">
+          <span class="mint-topbar-title">{{ titleText }}</span>
+          <span class="mint-topbar-subtitle">{{ subtitleText }}</span>
+        </div>
 
-      <span v-else-if="hasTitleOnly" class="mint-topbar__title-only">{{ title }}</span>
+        <span v-else-if="hasTitleOnly" class="mint-topbar__title-only">{{ titleText }}</span>
 
-      <!-- Nav slot (inline, after brand/selector) -->
-      <slot name="nav" />
+        <!-- Nav slot (inline, after brand/selector) -->
+        <slot name="nav" />
+      </div>
 
       <!-- Center: pill nav -->
       <div v-if="hasPillNav || $slots.center" class="mint-topbar__center">

package/src/components/ArtifactSaveDialog.story.vue

@@ -6,6 +6,7 @@ import {
   type AnalysisArtifactDetail,
   type ArtifactSaveDialogPayload,
 } from '../types/analysisArtifactTypes'
+import type { ExperimentSummary } from '../types'
 
 // -- Mock JSON result a plugin would hand the dialog --
 const mockResult: Record<string, unknown> = {
@@ -47,6 +48,19 @@ const existingJsonArtifact: AnalysisArtifactDetail = {
   result: mockResult,
 }
 
+// -- Experiment shown in the strip at the top of the dialog --
+const mockExperiment: ExperimentSummary = {
+  id: 42,
+  experiment_code: 'EXP-042',
+  name: 'Doxorubicin dose response, HeLa',
+  status: 'ongoing',
+  experiment_type: 'dose_response',
+  created_at: '2026-07-01T09:00:00Z',
+  updated_at: '2026-07-02T14:00:00Z',
+  has_design_data: true,
+}
+const changeCount = ref(0)
+
 // -- Mock handlers standing in for a generated plugin-client call --
 const lastPayload = ref<ArtifactSaveDialogPayload | null>(null)
 
@@ -103,10 +117,15 @@ const isOpenError = ref(false)
             v-if="lastPayload"
             style="margin-top: 1rem; padding: 0.75rem 1rem; background: var(--bg-secondary, #f8fafc); border: 1px solid var(--border-color, #e2e8f0); border-radius: 6px; font-size: 0.75rem; overflow-x: auto;"
           >{{ formatPayload(lastPayload) }}</pre>
+          <p v-if="changeCount" style="margin-top: 0.5rem; font-size: 0.75rem;">
+            change-experiment emitted {{ changeCount }}×
+          </p>
 
           <ArtifactSaveDialog
             v-model:open="isOpenFile"
             :experiment-id="42"
+            :experiment="mockExperiment"
+            @change-experiment="changeCount++"
             :mode="state.mode"
             :result="mockResult"
             :default-artifact-key="state.defaultArtifactKey"
@@ -190,6 +209,8 @@ const isOpenError = ref(false)
         <ArtifactSaveDialog
           v-model:open="isOpenUpdateFile"
           :experiment-id="42"
+          :experiment="mockExperiment"
+          @change-experiment="changeCount++"
           :existing-artifact="existingFileArtifact"
           accept=".pdf"
           :save-handler="saveHandler"
@@ -237,6 +258,8 @@ const isOpenError = ref(false)
         <ArtifactSaveDialog
           v-model:open="isOpenUpdateJson"
           :experiment-id="42"
+          :experiment="mockExperiment"
+          @change-experiment="changeCount++"
           :existing-artifact="existingJsonArtifact"
           :result="mockResult"
           :save-handler="saveHandler"

package/src/components/ArtifactSaveDialog.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 /** Save/update dialog for analysis artifacts; delegates the write to a plugin-supplied handler. */
-import { computed, ref, shallowRef, watch } from 'vue'
+import { computed, getCurrentInstance, ref, shallowRef, watch } from 'vue'
+import { CloudUpload, File as FileIcon } from 'lucide-vue-next'
 import BaseModal from './BaseModal.vue'
 import BaseInput from './BaseInput.vue'
 import BaseButton from './BaseButton.vue'
@@ -10,6 +11,7 @@ import FileUploader from './FileUploader.vue'
 import SegmentedControl from './SegmentedControl.vue'
 import { useRequest } from '../composables/useRequest'
 import { useExperimentStore } from '../stores/experiment'
+import { formatExperimentDate } from '../composables/experiment-utils'
 import {
   ANALYSIS_FILE_ARTIFACT_SCHEMA,
   type AnalysisArtifactDetail,
@@ -20,7 +22,7 @@ import {
   type ArtifactSaveResult,
   type HandlerArtifactSaveHandler,
 } from '../types/analysisArtifactTypes'
-import type { ModalSize } from '../types'
+import type { ExperimentSummary, ModalSize } from '../types'
 
 interface Props {
   open: boolean
@@ -34,6 +36,11 @@ interface Props {
   result?: Record<string, unknown>
   /** Experiment id override; defaults to the current experiment (`useExperimentStore`). */
   experimentId?: number | null
+  /**
+   * Experiment shown in the strip at the top. Defaults to the store's current
+   * experiment when it is the one being saved to; no strip when unknown.
+   */
+  experiment?: ExperimentSummary | null
   /** Existing artifact detail; when set the dialog updates instead of creating. */
   existingArtifact?: AnalysisArtifactDetail | null
   /** Known artifact keys, used to warn (json) or block (file) on collisions. */
@@ -60,6 +67,7 @@ const props = withDefaults(defineProps<Props>(), {
   mode: 'file',
   fileSource: 'upload',
   experimentId: null,
+  experiment: null,
   existingArtifact: null,
   size: 'md',
   defaultArtifactKey: 'default',
@@ -71,14 +79,25 @@ const emit = defineEmits<{
   saved: [result: ArtifactSaveResult & { payload: ArtifactSaveDialogPayload }]
   error: [message: string]
   cancel: []
+  /** The "Change" link in the experiment strip; shown only when a listener is bound. */
+  'change-experiment': []
 }>()
 
+// Declared emits leave $attrs, so the bound listener is read off the vnode.
+const canChangeExperiment = Boolean(getCurrentInstance()?.vnode.props?.onChangeExperiment)
+
 const ARTIFACT_KEY_PATTERN = /^[a-z0-9][a-z0-9._-]*$/
 
 const experimentStore = useExperimentStore()
 const request = useRequest('Failed to save analysis artifact.')
 
-const isUpdate = computed(() => props.existingArtifact !== null)
+/** With an existing artifact the user picks: replace it, or save a separate one. */
+const saveMode = ref<'replace' | 'new'>('replace')
+const isUpdate = computed(() => props.existingArtifact !== null && saveMode.value === 'replace')
+const SAVE_MODES = [
+  { value: 'replace', label: 'Replace an existing result', description: 'Keeps the key; collaborators see the new version.' },
+  { value: 'new', label: 'Save as a new result', description: 'Adds a separate artifact next to the others.' },
+] as const
 const existingResult = computed(
   () => (props.existingArtifact?.result ?? {}) as Record<string, unknown>,
 )
@@ -104,7 +123,13 @@ const selectedFile = shallowRef<File | null>(null)
 let initialNote = ''
 
 function resetForm(): void {
-  const existing = props.existingArtifact
+  saveMode.value = 'replace'
+  syncFields()
+}
+
+/** Fills the fields for the current save mode; a mode switch calls only this. */
+function syncFields(): void {
+  const existing = isUpdate.value ? props.existingArtifact : null
   activeKind.value = existing
     ? (existingIsFile.value ? 'file' : 'json')
     : (props.mode === 'json' ? 'json' : 'file')
@@ -120,6 +145,7 @@ resetForm()
 watch(() => props.open, (open) => {
   if (open) resetForm()
 })
+watch(saveMode, syncFields)
 // Key off identity, not object reference: re-fetching the same artifact must not
 // wipe in-progress edits.
 watch(
@@ -127,8 +153,17 @@ watch(
   resetForm,
 )
 
-const resolvedTitle = computed(() =>
-  props.title ?? (isUpdate.value ? 'Update Analysis Artifact' : 'Save Analysis Artifact'))
+const resolvedTitle = computed(() => props.title ?? 'Save to experiment')
+
+const stripExperiment = computed(() => {
+  if (props.experiment) return props.experiment
+  const current = experimentStore.current
+  return current && current.id === resolveExperimentId() ? current : null
+})
+const existingUpdated = computed(() => {
+  const date = props.existingArtifact?.updated_at ?? props.existingArtifact?.created_at
+  return date ? formatExperimentDate(date) : ''
+})
 const showKindToggle = computed(() => !isUpdate.value && props.mode === 'both')
 const showFileUploader = computed(
   () => activeKind.value === 'file' && props.fileSource === 'upload',
@@ -143,12 +178,16 @@ const effectiveKey = computed(() => {
   return keyInput.value.trim() || props.defaultArtifactKey
 })
 const keyValid = computed(() => ARTIFACT_KEY_PATTERN.test(effectiveKey.value))
-const keyExists = computed(
-  () => !isUpdate.value && (props.existingArtifactKeys ?? []).includes(effectiveKey.value),
-)
+const keyExists = computed(() => {
+  if (isUpdate.value) return false
+  const known = [...(props.existingArtifactKeys ?? []), props.existingArtifact?.artifact_key]
+  return known.includes(effectiveKey.value)
+})
 // A file artifact is create-only: reusing a key always fails backend-side, and the
-// dialog has no detail to replace it safely. JSON keys upsert natively, so warn only.
-const keyBlocked = computed(() => keyExists.value && activeKind.value === 'file')
+// dialog has no detail to replace it safely. JSON keys upsert natively, so warn only,
+// unless the user explicitly chose "Save as a new result" over the replace option.
+const keyBlocked = computed(() => keyExists.value
+  && (activeKind.value === 'file' || (props.existingArtifact !== null && saveMode.value === 'new')))
 const keyError = computed(() => {
   if (!keyValid.value) return 'Use lowercase letters, digits, dots, dashes, or underscores.'
   if (keyBlocked.value) return 'This key is already used. Choose another, or replace the existing artifact.'
@@ -324,6 +363,56 @@ function handleCancel(): void {
     @close="emit('cancel')"
   >
     <div class="mint-artifact-save-dialog">
+      <div v-if="stripExperiment" class="mint-artifact-save-dialog__experiment">
+        <span
+          v-if="stripExperiment.experiment_code"
+          class="mint-exp-code mint-exp-code--sm"
+        >{{ stripExperiment.experiment_code }}</span>
+        <span class="mint-artifact-save-dialog__experiment-name">{{ stripExperiment.name }}</span>
+        <button
+          v-if="canChangeExperiment"
+          type="button"
+          class="mint-artifact-save-dialog__change"
+          @click="emit('change-experiment')"
+        >
+          Change
+        </button>
+      </div>
+
+      <div
+        v-if="existingArtifact"
+        class="mint-artifact-save-dialog__modes"
+        role="radiogroup"
+        aria-label="Save mode"
+      >
+        <button
+          v-for="option in SAVE_MODES"
+          :key="option.value"
+          type="button"
+          role="radio"
+          :aria-checked="saveMode === option.value"
+          class="mint-artifact-save-dialog__mode"
+          @click="saveMode = option.value"
+        >
+          <span class="mint-artifact-save-dialog__mode-dot" aria-hidden="true" />
+          <span class="mint-artifact-save-dialog__mode-text">
+            <b>{{ option.label }}</b>
+            <span>{{ option.description }}</span>
+          </span>
+        </button>
+      </div>
+
+      <div v-if="isUpdate && existingArtifact" class="mint-artifact-save-dialog__list">
+        <div class="mint-artifact-save-dialog__row mint-artifact-save-dialog__row--selected">
+          <FileIcon class="mint-artifact-save-dialog__row-icon" :size="15" aria-hidden="true" />
+          <span class="mint-artifact-save-dialog__row-name">
+            {{ existingArtifact.display_name }}
+            <span>{{ existingArtifact.artifact_key }}</span>
+          </span>
+          <span v-if="existingUpdated" class="mint-artifact-save-dialog__row-meta">{{ existingUpdated }}</span>
+        </div>
+      </div>
+
       <SegmentedControl
         v-if="showKindToggle"
         v-model="activeKind"
@@ -416,11 +505,12 @@ function handleCancel(): void {
       </BaseButton>
       <BaseButton
         class="mint-artifact-save-dialog__submit"
+        :icon="CloudUpload"
         :loading="request.isLoading.value"
         :disabled="!canSubmit"
         @click="handleSubmit"
       >
-        {{ isUpdate ? 'Update Artifact' : 'Save Artifact' }}
+        {{ isUpdate ? 'Replace result' : 'Save result' }}
       </BaseButton>
     </template>
   </BaseModal>

package/src/components/AuditTrail.story.vue

@@ -80,7 +80,8 @@ function initState() {
   return {
     loading: false,
     error: '',
-    entries: mockEntries,
+    // Histoire serializes state; Date objects come back unparseable, ISO strings survive.
+    entries: mockEntries.map((entry) => ({ ...entry, timestamp: entry.timestamp.toISOString() })),
     showFilters: false,
     emptyText: 'No activity yet',
     order: 'newest' as const,

package/src/components/AuditTrail.vue

@@ -2,6 +2,7 @@
 /** Filterable, sortable timeline of audit entries for tracking experiment or resource history. */
 import { computed, ref } from 'vue'
 import type { AuditEntry } from '../types'
+import { formatRelativeTime } from '../utils/time'
 import BaseSelect from './BaseSelect.vue'
 import DataStateInternal from './internal/DataStateInternal.vue'
 
@@ -79,26 +80,6 @@ function getInitials(name: string): string {
   return (words[0]?.[0] ?? '').toUpperCase()
 }
 
-const rtf = new Intl.RelativeTimeFormat('en', { numeric: 'auto' })
-
-function formatTimestamp(timestamp: Date | string): string {
-  const date = timestamp instanceof Date ? timestamp : new Date(timestamp)
-  const now = Date.now()
-  const diffMs = date.getTime() - now
-  const diffSec = Math.round(diffMs / 1000)
-  const diffMin = Math.round(diffSec / 60)
-  const diffHr = Math.round(diffMin / 60)
-  const diffDay = Math.round(diffHr / 24)
-  const diffWeek = Math.round(diffDay / 7)
-
-  if (Math.abs(diffSec) < 60) return rtf.format(diffSec, 'second')
-  if (Math.abs(diffMin) < 60) return rtf.format(diffMin, 'minute')
-  if (Math.abs(diffHr) < 24) return rtf.format(diffHr, 'hour')
-  if (Math.abs(diffDay) < 7) return rtf.format(diffDay, 'day')
-  if (Math.abs(diffWeek) < 5) return rtf.format(diffWeek, 'week')
-  return date.toLocaleDateString()
-}
-
 function handleEntryClick(entry: AuditEntry) {
   emit('entry-click', entry)
 }
@@ -146,7 +127,7 @@ function handleEntryClick(entry: AuditEntry) {
               <span class="mint-audit-trail__sentence">
                 <span v-if="entry.user" class="mint-audit-trail__user">{{ entry.user }}</span> <span class="mint-audit-trail__action">{{ entry.action }}</span>
               </span>
-              <span class="mint-audit-trail__timestamp">{{ formatTimestamp(entry.timestamp) }}</span>
+              <span class="mint-audit-trail__timestamp">{{ formatRelativeTime(entry.timestamp, { weeks: true }) }}</span>
             </div>
             <div v-if="entry.detail" class="mint-audit-trail__detail">{{ entry.detail }}</div>
             <div v-if="entry.metadata && Object.keys(entry.metadata).length" class="mint-audit-trail__metadata">