@morscherlab/mint-sdk 1.4.0-beta.2 → 1.4.0-beta.21

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/pluginWorkspaceModel.ts

@@ -50,8 +50,8 @@ export interface PluginWorkspaceShellModel {
   sidebarCloseLabel: string
   /** Whether AppLayout should render a `#sidebar` template at all. */
   hasSidebarSurface: boolean
-  /** App or plugin title shown in the top bar. */
-  title: string
+  /** Top bar title. Unset, the top bar shows the plugin identity (`providePluginIdentity` or the platform). */
+  title?: string
   /** Secondary copy shown under the title. */
   subtitle?: string
   /** AppTopBar spec with the workspace defaults applied and the generated pills filled in; `false` removes the top bar. */

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)

package/src/composables/useCalendarGrid.ts

@@ -26,9 +26,9 @@ export interface UseCalendarGridReturn {
   nextMonth: () => void
 }
 
-const WEEK_DAYS = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'] as const
+const WEEK_DAYS = ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'] as const
 
-/** Shared calendar grid state for date and datetime pickers. */
+/** Shared Monday-first calendar grid state for date and datetime pickers. */
 export function useCalendarGrid(options: UseCalendarGridOptions = {}): UseCalendarGridReturn {
   const currentMonth = ref(new Date())
 
@@ -46,7 +46,8 @@ export function useCalendarGrid(options: UseCalendarGridOptions = {}): UseCalend
     const lastDay = new Date(year, month + 1, 0)
     const days: CalendarGridDay[] = []
 
-    const startPadding = firstDay.getDay()
+    // Weeks start on Monday.
+    const startPadding = (firstDay.getDay() + 6) % 7
     for (let i = startPadding - 1; i >= 0; i--) {
       const date = new Date(year, month, -i)
       days.push({ date, isCurrentMonth: false, isDisabled: isDateDisabled(date) })

package/src/composables/useExperimentSelector.ts

@@ -28,6 +28,8 @@ export interface UseExperimentSelectorOptions {
   apiBaseUrl?: string
   limit?: number
   immediate?: boolean
+  /** Keep `statusCounts` in step with the non-status filters (one stats request per change). */
+  withStatusCounts?: boolean
 }
 
 export interface UseExperimentSelectorReturn {
@@ -57,9 +59,8 @@ export interface UseExperimentSelectorReturn {
   experimentTypes: Ref<ExperimentTypeOption[]>
   /** Available project options for filter UI. */
   projects: Ref<SelectOption<string>[]>
-  // Grouped view
-  /** Fetched experiments grouped by project name. */
-  groupedByProject: ComputedRef<[string, ExperimentSummary[]][]>
+  /** Experiment count per status under every filter except status itself. */
+  statusCounts: Ref<Record<string, number>>
   // Methods
   /** Fetch the current page with the current filters. */
   fetch: () => Promise<void>
@@ -73,6 +74,8 @@ export interface UseExperimentSelectorReturn {
   clear: () => void
   /** Fetch experiment type and project filter options. */
   fetchFilterOptions: () => Promise<void>
+  /** Fetch `statusCounts` from `GET /experiments/stats`. */
+  fetchStatusCounts: () => Promise<void>
 }
 
 /** Fetches a paginated, filtered experiment list from the platform API for picker and selector UIs. */
@@ -85,6 +88,7 @@ export function useExperimentSelector(
     experimentType,
     allowedExperimentTypes: optionAllowedExperimentTypes,
     apiBaseUrl,
+    withStatusCounts = false,
   } = options
   const platformBase = apiBaseUrl ?? getPlatformApiUrl()
   const api = useApi()
@@ -107,6 +111,10 @@ export function useExperimentSelector(
   const projects = ref<SelectOption<string>[]>([])
   let filterOptionsFetched = false
 
+  const statusCounts = ref<Record<string, number>>({})
+  let statsGeneration = 0
+  let countedScope: string | null = null
+
   const hasMore = computed(() => experiments.value.length < total.value)
 
   const filters: ExperimentFilters = reactive({
@@ -115,6 +123,7 @@ export function useExperimentSelector(
     project: undefined,
     experimentType: undefined,
     datePreset: undefined,
+    mine: undefined,
   })
 
   function normalizeExperimentTypes(values: string[] | null | undefined): string[] | null {
@@ -163,21 +172,27 @@ export function useExperimentSelector(
     return { kind: 'all' }
   }
 
-  function buildExperimentListUrl(typeFilter: string | undefined, skip: number, pageLimit: number): string {
+  /** Query params shared by the list and the stats route; status, sort and paging are list-only. */
+  function scopeParams(typeFilter: string | undefined): URLSearchParams {
     const params = new URLSearchParams()
     if (typeFilter) params.set('experiment_type', typeFilter)
-    if (filters.status) params.set('status', filters.status)
     if (filters.search) params.set('search', filters.search)
     if (filters.project) params.set('project', filters.project)
+    if (filters.mine) params.set('mine', 'true')
+    if (filters.datePreset) {
+      params.set('created_after', datePresetToISO(filters.datePreset))
+    }
+    return params
+  }
+
+  function buildExperimentListUrl(typeFilter: string | undefined, skip: number, pageLimit: number): string {
+    const params = scopeParams(typeFilter)
+    if (filters.status) params.set('status', filters.status)
 
     const { sortBy, sortOrder } = parseSortKey()
     params.set('sort_by', sortBy)
     params.set('sort_order', sortOrder)
 
-    if (filters.datePreset) {
-      params.set('created_after', datePresetToISO(filters.datePreset))
-    }
-
     params.set('limit', String(pageLimit))
     params.set('skip', String(skip))
 
@@ -298,6 +313,51 @@ export function useExperimentSelector(
     }
   }
 
+  /** The filters the stats route reads; status, sort and paging do not change the counts. */
+  function countScope(): string {
+    return JSON.stringify([filters.search, filters.project, filters.experimentType, filters.datePreset, filters.mine])
+  }
+
+  function refreshStatusCountsOnScopeChange(): void {
+    if (withStatusCounts && countScope() !== countedScope) fetchStatusCounts()
+  }
+
+  async function fetchStatusCounts(): Promise<void> {
+    const generation = ++statsGeneration
+    countedScope = countScope()
+    const scope = resolveExperimentTypeScope()
+    if (scope.kind === 'blocked') {
+      statusCounts.value = {}
+      return
+    }
+    const types = scope.kind === 'multi'
+      ? scope.experimentTypes
+      : [scope.kind === 'single' ? scope.experimentType : undefined]
+    const base = platformBase ?? ''
+    try {
+      const responses = await Promise.all(
+        types.map(type => api.get<{ total: number; by_status: Record<string, number> }>(
+          `${base}/experiments/stats?${scopeParams(type)}`,
+        )),
+      )
+      if (generation !== statsGeneration) return
+      const counts: Record<string, number> = {}
+      for (const response of responses) {
+        for (const [status, count] of Object.entries(response.by_status)) {
+          counts[status] = (counts[status] ?? 0) + count
+        }
+      }
+      statusCounts.value = counts
+    } catch {
+      // Counts only decorate the status menu; without them it shows bare labels.
+      // Forget the scope so the next status or sort change retries the request.
+      if (generation === statsGeneration) {
+        statusCounts.value = {}
+        countedScope = null
+      }
+    }
+  }
+
   async function loadMore(): Promise<void> {
     if (!hasMore.value || isLoading.value) return
     page.value++
@@ -323,31 +383,12 @@ export function useExperimentSelector(
     filters.project = undefined
     filters.experimentType = undefined
     filters.datePreset = undefined
+    filters.mine = undefined
     sortKey.value = 'created_at:desc'
     page.value = 0
     request.clearError()
   }
 
-  // Group experiments by project (client-side)
-  const groupedByProject = computed<[string, ExperimentSummary[]][]>(() => {
-    const groups = new Map<string, ExperimentSummary[]>()
-    for (const exp of experiments.value) {
-      const key = exp.project_name ?? exp.project ?? 'No project'
-      const list = groups.get(key)
-      if (list) {
-        list.push(exp)
-      } else {
-        groups.set(key, [exp])
-      }
-    }
-    // Sort alphabetically, "No project" last
-    return [...groups.entries()].sort(([a], [b]) => {
-      if (a === 'No project') return 1
-      if (b === 'No project') return -1
-      return a.localeCompare(b)
-    })
-  })
-
   watch(
     () => [
       filters.search,
@@ -355,6 +396,7 @@ export function useExperimentSelector(
       filters.project,
       filters.experimentType,
       filters.datePreset,
+      filters.mine,
       sortKey.value,
     ],
     () => invalidateFetch(),
@@ -366,17 +408,20 @@ export function useExperimentSelector(
     () => {
       page.value = 0
       fetchExperiments()
+      refreshStatusCountsOnScopeChange()
     },
     { delay: 300 },
   )
 
   // Immediate watch on discrete filters and sort (cancel any pending search debounce)
   watch(
-    () => [filters.status, filters.project, filters.experimentType, filters.datePreset, sortKey.value],
+    () => [filters.status, filters.project, filters.experimentType, filters.datePreset, filters.mine, sortKey.value],
     () => {
       searchWatch.cancel()
       page.value = 0
       fetchExperiments()
+      // Also checked on a status or sort change: the cancelled debounce may hold a new search.
+      refreshStatusCountsOnScopeChange()
     },
   )
 
@@ -397,12 +442,13 @@ export function useExperimentSelector(
     sortKey,
     experimentTypes,
     projects,
-    groupedByProject,
+    statusCounts,
     fetch: fetchExperiments,
     loadMore,
     reset,
     select,
     clear,
     fetchFilterOptions,
+    fetchStatusCounts,
   }
 }

package/src/composables/useFileImport.ts

@@ -1,4 +1,5 @@
 import { ref, shallowRef, type Ref, type ShallowRef } from 'vue'
+import type { SheetData } from 'read-excel-file/universal'
 import { readErrorMessage } from '../utils/errors'
 
 export interface DelimitedTable {
@@ -116,6 +117,53 @@ export function readFileAsText(file: File, encoding?: string): Promise<string> {
   })
 }
 
+/**
+ * Read a `.csv`, `.tsv` or `.xlsx` upload as comma-delimited CSV text.
+ * A `.csv` file (or any other extension) comes back unchanged. An `.xlsx`
+ * file gives its first sheet; each cell is its stored value, so number
+ * formats such as leading zeros are not applied. Dates become ISO text.
+ */
+export async function readTableFileAsCsv(file: File): Promise<string> {
+  const name = file.name.toLowerCase()
+  if (name.endsWith('.xlsx')) return rowsToCsv(await readFirstSheet(file))
+  const text = await readFileAsText(file)
+  return name.endsWith('.tsv') ? rowsToCsv(parseDelimitedRows(text, '\t')) : text
+}
+
+async function readFirstSheet(file: File): Promise<string[][]> {
+  // Lazy import: plugins that never read .xlsx do not load the library.
+  const { readSheet } = await import('read-excel-file/universal')
+  let rows: SheetData<string>
+  try {
+    // Keep the stored text: no trim, and no float parse that rounds big numbers.
+    rows = await readSheet(file, { trim: false, parseNumber: text => text })
+  } catch {
+    throw new Error(`${file.name} is not a valid .xlsx workbook.`)
+  }
+  return rows.map(row => row.map(formatCell))
+}
+
+function formatCell(value: unknown): string {
+  if (value === null || value === undefined) return ''
+  if (typeof value === 'boolean') return value ? 'TRUE' : 'FALSE'
+  if (value instanceof Date) {
+    // Excel stores dates as float day counts; round off the float error.
+    const [date, time] = new Date(Math.round(value.getTime() / 1000) * 1000)
+      .toISOString().slice(0, 19).split('T')
+    if (date === '1899-12-30') return time   // a time-only cell
+    return time === '00:00:00' ? date : `${date}T${time}`
+  }
+  return String(value)
+}
+
+function rowsToCsv(rows: readonly (readonly string[])[]): string {
+  return rows.map(row => row.map(quoteCsvField).join(',')).join('\n')
+}
+
+function quoteCsvField(value: string): string {
+  return /[",\r\n]/.test(value) ? `"${value.replace(/"/g, '""')}"` : value
+}
+
 export function parseDelimitedText(
   text: string,
   options: ParseDelimitedTextOptions = {},
@@ -170,8 +218,10 @@ function parseDelimitedRows(text: string, delimiter: string): string[][] {
       if (quoted && next === '"') {
         field += '"'
         index++
-      } else {
+      } else if (quoted || field === '') {
         quoted = !quoted
+      } else {
+        field += '"'   // a quote inside an unquoted field is text
       }
       continue
     }

package/src/composables/useFloatingPanel.ts

@@ -0,0 +1,107 @@
+import {
+  autoUpdate,
+  computePosition,
+  flip,
+  hide,
+  offset,
+  shift,
+  size,
+  type Placement,
+  type ReferenceElement,
+} from '@floating-ui/dom'
+import { onScopeDispose, ref, toValue, watch, type MaybeRefOrGetter, type Ref } from 'vue'
+
+// Internal: not exported from the package entry points.
+
+export interface UseFloatingPanelOptions {
+  /** Default `'bottom-start'`. */
+  placement?: MaybeRefOrGetter<Placement>
+  /** Gap to the reference in px. Default 4. */
+  offset?: number
+  /** At least the reference width, at most 28rem (selects). */
+  matchWidth?: boolean
+  /** Re-place on scroll, resize and layout shift while open. Default `true`. */
+  follow?: boolean
+}
+
+export interface UseFloatingPanelReturn {
+  /** Bind to the panel: `position: fixed`, `left`, `top`, and `visibility: hidden` while the reference is scrolled out of view. */
+  style: Ref<Record<string, string>>
+  /** The placement after flip, for arrows and transitions. */
+  placement: Ref<Placement>
+  update: () => Promise<void>
+}
+
+/**
+ * Places `floating` next to `reference` with fixed positioning (offset, flip,
+ * shift, size, hide). A fixed panel escapes the `overflow` of its ancestors (a
+ * modal body) unless one of them has a transform, so it can stay in the DOM right
+ * after its trigger: Tab order, focus traps and outside-click checks are those of
+ * an in-place panel. The size middleware publishes the free height as
+ * `--mint-floating-available-height`; a panel whose list scrolls caps its
+ * `max-height` with it.
+ */
+export function useFloatingPanel(
+  reference: MaybeRefOrGetter<ReferenceElement | null>,
+  floating: Ref<HTMLElement | null>,
+  open: Ref<boolean>,
+  options: UseFloatingPanelOptions = {},
+): UseFloatingPanelReturn {
+  const style = ref<Record<string, string>>({ position: 'fixed', left: '0px', top: '0px' })
+  const placement = ref<Placement>(toValue(options.placement) ?? 'bottom-start')
+
+  async function update(): Promise<void> {
+    const referenceEl = toValue(reference)
+    const floatingEl = floating.value
+    if (!referenceEl || !floatingEl) return
+    const result = await computePosition(referenceEl, floatingEl, {
+      placement: toValue(options.placement) ?? 'bottom-start',
+      strategy: 'fixed',
+      middleware: [
+        offset(options.offset ?? 4),
+        flip(),
+        shift({ padding: 8 }),
+        size({
+          padding: 8,
+          // Written to the element, not the reactive style: floating-ui measures again right after.
+          apply({ availableHeight, rects, elements }) {
+            const target = elements.floating.style
+            target.setProperty('--mint-floating-available-height', `${Math.max(0, availableHeight)}px`)
+            if (options.matchWidth) {
+              target.minWidth = `${rects.reference.width}px`
+              target.maxWidth = '28rem'
+            }
+          },
+        }),
+        hide(),
+      ],
+    })
+    const next: Record<string, string> = { position: 'fixed', left: `${result.x}px`, top: `${result.y}px` }
+    // The trigger scrolled out of its scroll container: keep the panel open, but not floating detached.
+    if (result.middlewareData.hide?.referenceHidden) next.visibility = 'hidden'
+    // autoUpdate fires on every scroll; re-render only when the panel changes.
+    const current = style.value
+    if (current.left !== next.left || current.top !== next.top || current.visibility !== next.visibility) style.value = next
+    placement.value = result.placement
+  }
+
+  let stop: (() => void) | undefined
+  function release(): void {
+    stop?.()
+    stop = undefined
+  }
+
+  watch(
+    [open, () => toValue(reference), floating],
+    ([isOpen, referenceEl, floatingEl]) => {
+      release()
+      if (!isOpen || !referenceEl || !floatingEl) return
+      if (options.follow ?? true) stop = autoUpdate(referenceEl, floatingEl, () => void update())
+      else void update()
+    },
+    { flush: 'post', immediate: true },
+  )
+  onScopeDispose(release)
+
+  return { style, placement, update }
+}