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

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="isOpenFile"
+            v-model:open="isOpenFile"
             :experiment-id="42"
+            :experiment="mockExperiment"
+            @change-experiment="changeCount++"
             :mode="state.mode"
             :result="mockResult"
             :default-artifact-key="state.defaultArtifactKey"
@@ -142,7 +161,7 @@ const isOpenError = ref(false)
         </button>
 
         <ArtifactSaveDialog
-          v-model="isOpenJson"
+          v-model:open="isOpenJson"
           :experiment-id="42"
           mode="json"
           :result="mockResult"
@@ -165,7 +184,7 @@ const isOpenError = ref(false)
         </button>
 
         <ArtifactSaveDialog
-          v-model="isOpenBoth"
+          v-model:open="isOpenBoth"
           :experiment-id="42"
           mode="both"
           :result="mockResult"
@@ -188,8 +207,10 @@ const isOpenError = ref(false)
         </button>
 
         <ArtifactSaveDialog
-          v-model="isOpenUpdateFile"
+          v-model:open="isOpenUpdateFile"
           :experiment-id="42"
+          :experiment="mockExperiment"
+          @change-experiment="changeCount++"
           :existing-artifact="existingFileArtifact"
           accept=".pdf"
           :save-handler="saveHandler"
@@ -211,7 +232,7 @@ const isOpenError = ref(false)
         </button>
 
         <ArtifactSaveDialog
-          v-model="isOpenHandlerFile"
+          v-model:open="isOpenHandlerFile"
           :experiment-id="42"
           mode="file"
           file-source="handler"
@@ -235,8 +256,10 @@ const isOpenError = ref(false)
         </button>
 
         <ArtifactSaveDialog
-          v-model="isOpenUpdateJson"
+          v-model:open="isOpenUpdateJson"
           :experiment-id="42"
+          :experiment="mockExperiment"
+          @change-experiment="changeCount++"
           :existing-artifact="existingJsonArtifact"
           :result="mockResult"
           :save-handler="saveHandler"
@@ -259,7 +282,7 @@ const isOpenError = ref(false)
         </button>
 
         <ArtifactSaveDialog
-          v-model="isOpenCollision"
+          v-model:open="isOpenCollision"
           :experiment-id="42"
           mode="json"
           :result="mockResult"
@@ -284,7 +307,7 @@ const isOpenError = ref(false)
         </button>
 
         <ArtifactSaveDialog
-          v-model="isOpenFileConflict"
+          v-model:open="isOpenFileConflict"
           :experiment-id="42"
           mode="file"
           default-artifact-key="qc-report"
@@ -307,7 +330,7 @@ const isOpenError = ref(false)
         </button>
 
         <ArtifactSaveDialog
-          v-model="isOpenError"
+          v-model:open="isOpenError"
           :experiment-id="42"
           mode="json"
           :result="mockResult"

package/src/components/ArtifactSaveDialog.vue

@@ -1,19 +1,17 @@
 <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 BaseTextarea from './BaseTextarea.vue'
 import BaseButton from './BaseButton.vue'
 import AlertBox from './AlertBox.vue'
 import FormField from './FormField.vue'
 import FileUploader from './FileUploader.vue'
 import SegmentedControl from './SegmentedControl.vue'
-import { useRequestSyncState } from '../composables/useRequestSyncState'
-import {
-  getInjectedPlatformContext,
-  resolveCurrentExperimentId,
-} from '../composables/platformContextHelpers'
+import { useRequest } from '../composables/useRequest'
+import { useExperimentStore } from '../stores/experiment'
+import { formatExperimentDate } from '../composables/experiment-utils'
 import {
   ANALYSIS_FILE_ARTIFACT_SCHEMA,
   type AnalysisArtifactDetail,
@@ -24,10 +22,10 @@ import {
   type ArtifactSaveResult,
   type HandlerArtifactSaveHandler,
 } from '../types/analysisArtifactTypes'
-import type { ModalSize } from '../types'
+import type { ExperimentSummary, ModalSize } from '../types'
 
 interface Props {
-  modelValue: boolean
+  open: boolean
   /** Performs the backend write; the dialog never calls the platform itself. */
   saveHandler: ArtifactSaveDialogHandler
   /** Which artifact kinds the form offers. */
@@ -36,8 +34,13 @@ interface Props {
   fileSource?: ArtifactFileSource
   /** JSON result payload supplied programmatically by the host. */
   result?: Record<string, unknown>
-  /** Experiment id override; defaults to platform injection or URL. */
+  /** 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. */
@@ -64,6 +67,7 @@ const props = withDefaults(defineProps<Props>(), {
   mode: 'file',
   fileSource: 'upload',
   experimentId: null,
+  experiment: null,
   existingArtifact: null,
   size: 'md',
   defaultArtifactKey: 'default',
@@ -71,18 +75,29 @@ const props = withDefaults(defineProps<Props>(), {
 })
 
 const emit = defineEmits<{
-  'update:modelValue': [value: boolean]
+  'update:open': [value: boolean]
   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 injectedContext = getInjectedPlatformContext()
-const request = useRequestSyncState('Failed to save analysis artifact.')
+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>,
 )
@@ -108,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')
@@ -121,9 +142,10 @@ function resetForm(): void {
 }
 
 resetForm()
-watch(() => props.modelValue, (open) => {
+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(
@@ -131,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',
@@ -147,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.'
@@ -160,7 +195,7 @@ const keyError = computed(() => {
 })
 
 const canSubmit = computed(() => {
-  if (request.loading.value || !keyValid.value || keyBlocked.value) return false
+  if (request.isLoading.value || !keyValid.value || keyBlocked.value) return false
   if (activeKind.value === 'file') {
     return props.fileSource === 'handler' || selectedFile.value !== null
   }
@@ -168,7 +203,7 @@ const canSubmit = computed(() => {
 })
 
 function resolveExperimentId(): number | undefined {
-  return props.experimentId ?? resolveCurrentExperimentId(injectedContext)
+  return props.experimentId ?? experimentStore.currentId ?? undefined
 }
 
 /** Set-only note for creates and JSON upserts: an empty field just sends nothing. */
@@ -302,10 +337,10 @@ async function handleSubmit(): Promise<void> {
   try {
     const result = await request.run(
       () => runSaveHandler(payload),
-      { success: 'save', errorMessage: 'Failed to save analysis artifact.' },
+      { kind: 'save', errorMessage: 'Failed to save analysis artifact.' },
     )
     emit('saved', { ...(result ?? {}), payload })
-    emit('update:modelValue', false)
+    emit('update:open', false)
     resetForm()
   } catch {
     emit('error', request.error.value ?? 'Failed to save analysis artifact.')
@@ -314,20 +349,70 @@ async function handleSubmit(): Promise<void> {
 
 function handleCancel(): void {
   emit('cancel')
-  emit('update:modelValue', false)
+  emit('update:open', false)
 }
 </script>
 
 <template>
   <BaseModal
-    :model-value="modelValue"
+    :open="open"
     :title="resolvedTitle"
     :size="size"
-    :closable="!request.loading.value"
-    @update:model-value="emit('update:modelValue', $event)"
+    :closable="!request.isLoading.value"
+    @update:open="emit('update:open', $event)"
     @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"
@@ -341,7 +426,7 @@ function handleCancel(): void {
 
       <AlertBox
         v-if="keyExists && !keyBlocked"
-        type="warning"
+        tone="warning"
         class="mint-artifact-save-dialog__warning"
       >
         An artifact with key "{{ effectiveKey }}" already exists. Its results will be
@@ -357,7 +442,7 @@ function handleCancel(): void {
         <BaseInput
           v-model="keyInput"
           :readonly="isUpdate"
-          :error="Boolean(keyError)"
+          :invalid="Boolean(keyError)"
           :placeholder="defaultArtifactKey"
         />
       </FormField>
@@ -378,7 +463,8 @@ function handleCancel(): void {
         label="Note"
         class="mint-artifact-save-dialog__note"
       >
-        <BaseTextarea
+        <BaseInput
+          type="textarea"
           v-model="noteInput"
           placeholder="Optional context for this artifact"
         />
@@ -405,7 +491,7 @@ function handleCancel(): void {
 
       <AlertBox
         v-if="request.error.value"
-        type="error"
+        tone="error"
         class="mint-artifact-save-dialog__error"
         role="alert"
       >
@@ -414,16 +500,17 @@ function handleCancel(): void {
     </div>
 
     <template #footer>
-      <BaseButton variant="secondary" :disabled="request.loading.value" @click="handleCancel">
+      <BaseButton variant="secondary" :disabled="request.isLoading.value" @click="handleCancel">
         Cancel
       </BaseButton>
       <BaseButton
         class="mint-artifact-save-dialog__submit"
-        :loading="request.loading.value"
+        :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/ArtifactSelectorModal.story.vue

@@ -209,7 +209,7 @@ function handleSelect(artifact: AnalysisArtifactSummary) {
           </div>
 
           <ArtifactSelectorModal
-            v-model="isOpen"
+            v-model:open="isOpen"
             :experiment-id="42"
             :title="state.title"
             :include-archived="state.includeArchived"
@@ -241,7 +241,7 @@ function handleSelect(artifact: AnalysisArtifactSummary) {
         </button>
 
         <ArtifactSelectorModal
-          v-model="isOpenArchived"
+          v-model:open="isOpenArchived"
           :experiment-id="42"
           :include-archived="true"
           @select="handleSelect"
@@ -262,7 +262,7 @@ function handleSelect(artifact: AnalysisArtifactSummary) {
         </button>
 
         <ArtifactSelectorModal
-          v-model="isOpenScoped"
+          v-model:open="isOpenScoped"
           :experiment-id="42"
           plugin-id="ms-uploader"
           title="Select Peak Data"
@@ -284,7 +284,7 @@ function handleSelect(artifact: AnalysisArtifactSummary) {
         </button>
 
         <ArtifactSelectorModal
-          v-model="isOpenEmpty"
+          v-model:open="isOpenEmpty"
           :experiment-id="42"
           plugin-id="nonexistent-plugin"
           @select="handleSelect"

package/src/components/ArtifactSelectorModal.vue

@@ -4,7 +4,7 @@
  *
  * @example Recommended
  * ```vue
- * <ArtifactSelectorModal v-model="open" :experiment-id="experimentId" @select="selectArtifact" />
+ * <ArtifactSelectorModal v-model:open="open" :experiment-id="experimentId" @select="selectArtifact" />
  * ```
  */
 import { computed, ref, watch } from 'vue'
@@ -14,7 +14,7 @@ import type {
   AnalysisArtifactStatusFilter,
   AnalysisArtifactSummary,
 } from '../types/analysisArtifactTypes'
-import { useAnalysisArtifacts } from '../composables/useAnalysisArtifacts'
+import { useArtifacts } from '../composables/useArtifacts'
 import { formatExperimentDate } from '../composables/experiment-utils'
 import { getInjectedPlatformContext } from '../composables/platformContextHelpers'
 import { hasAllPermissions } from '../permissions'
@@ -24,8 +24,8 @@ import BaseSelect from './BaseSelect.vue'
 import ResourcePickerListInternal from './internal/ResourcePickerListInternal.vue'
 
 interface Props {
-  modelValue: boolean
-  /** Experiment id override; defaults to platform injection or URL. */
+  open: boolean
+  /** Experiment id override; defaults to the current experiment (`useExperimentStore`). */
   experimentId?: number | null
   /** Scope to a single owning plugin; omit to show all plugins. */
   pluginId?: string | null
@@ -50,7 +50,7 @@ const props = withDefaults(defineProps<Props>(), {
 })
 
 const emit = defineEmits<{
-  'update:modelValue': [value: boolean]
+  'update:open': [value: boolean]
   select: [artifact: AnalysisArtifactSummary]
   selectDetail: [detail: AnalysisArtifactDetail]
   archive: [artifact: AnalysisArtifactSummary]
@@ -70,7 +70,7 @@ const {
   getDetail,
   archive,
   restore,
-} = useAnalysisArtifacts({
+} = useArtifacts({
   experimentId: () => props.experimentId ?? undefined,
   pluginId: () => props.pluginId,
   includeArchived: () => props.includeArchived,
@@ -130,7 +130,7 @@ async function handleSelect(artifact: AnalysisArtifactSummary): Promise<void> {
     emit('selectDetail', detail)
   }
   emit('select', artifact)
-  emit('update:modelValue', false)
+  emit('update:open', false)
 }
 
 // Emit what the backend returned, not the row we started from: the pre-mutation
@@ -146,7 +146,7 @@ async function handleRestore(artifact: AnalysisArtifactSummary): Promise<void> {
 }
 
 watch(
-  () => props.modelValue,
+  () => props.open,
   (isOpen) => {
     if (isOpen) {
       openCount.value++
@@ -160,10 +160,10 @@ watch(
 
 <template>
   <BaseModal
-    :model-value="modelValue"
+    :open="open"
     :title="title"
     :size="size"
-    @update:model-value="emit('update:modelValue', $event)"
+    @update:open="emit('update:open', $event)"
   >
     <ResourcePickerListInternal
       :key="openCount"

package/src/components/AuditTrail.story.vue

@@ -80,9 +80,10 @@ 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,
-    emptyMessage: 'No activity yet',
+    emptyText: 'No activity yet',
     order: 'newest' as const,
     size: 'md' as const,
   }
@@ -99,7 +100,7 @@ function initState() {
             :error="state.error || null"
             :entries="state.entries"
             :show-filters="state.showFilters"
-            :empty-message="state.emptyMessage"
+            :empty-text="state.emptyText"
             :order="state.order"
             :size="state.size"
           />
@@ -109,7 +110,7 @@ function initState() {
         <HstCheckbox v-model="state.loading" title="Loading" />
         <HstText v-model="state.error" title="Error Message" />
         <HstCheckbox v-model="state.showFilters" title="Show Filters" />
-        <HstText v-model="state.emptyMessage" title="Empty Message" />
+        <HstText v-model="state.emptyText" title="Empty Message" />
         <HstSelect
           v-model="state.order"
           title="Order"
@@ -161,7 +162,7 @@ function initState() {
       <div style="padding: 2rem; max-width: 600px;">
         <AuditTrail
           :entries="[]"
-          empty-message="No audit events recorded"
+          empty-text="No audit events recorded"
         />
       </div>
     </Variant>

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'
 
@@ -9,7 +10,7 @@ interface Props {
   entries: AuditEntry[]
   maxHeight?: string
   showFilters?: boolean
-  emptyMessage?: string
+  emptyText?: string
   order?: 'newest' | 'oldest'
   size?: 'sm' | 'md' | 'lg'
   /** Replace the timeline with a loading placeholder. */
@@ -23,7 +24,7 @@ interface Props {
 
 const props = withDefaults(defineProps<Props>(), {
   showFilters: false,
-  emptyMessage: 'No activity yet',
+  emptyText: 'No activity yet',
   order: 'newest',
   size: 'md',
   loading: false,
@@ -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">
@@ -178,7 +159,7 @@ function handleEntryClick(entry: AuditEntry) {
 
     <div v-else-if="!sortedEntries.length" class="mint-audit-trail__state">
       <slot name="empty">
-        <DataStateInternal state="empty" size="sm" :title="emptyMessage" />
+        <DataStateInternal state="empty" size="sm" :title="emptyText" />
       </slot>
     </div>
   </div>