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

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

@@ -5,20 +5,26 @@ import {
   ref,
   shallowRef,
   toValue,
+  useId,
+  watch,
   type ComputedRef,
   type MaybeRefOrGetter,
   type Ref,
   type ShallowRef,
 } from 'vue'
 
-import { isActiveJobStatus, normalizeJobState } from '../jobs'
+import { isActiveJobStatus, jobStatusLabel, normalizeJobPercent, normalizeJobState } from '../jobs'
 import type {
   JobListPayload,
   JobState,
   JobStateInput,
+  JobStatus,
+  TopBarJob,
 } from '../types/jobs'
+import { usePlatform } from './usePlatform'
 
-export type JobsStatusTrayTab = 'active' | 'history'
+/** How long a job that just completed stays in the top-bar run slot. */
+const FINISHED_HOLD_MS = 6000
 
 /**
  * The canonical owner of a collection of plugin jobs.
@@ -143,9 +149,41 @@ function duplicatePluginJobId(jobId: string): Error {
 export interface UseJobCenterOptions {
   source?: MaybeRefOrGetter<PluginJobCenterSource | undefined>
   loadOnMount?: boolean
+  /**
+   * Maps the job that the top-bar chip shows. It is called for the chosen own
+   * active job AND for the held just-completed job, so check `job.status`.
+   * `null` keeps the default mapping.
+   */
+  topBarJob?: (job: JobState) => TopBarJob | null
+  /**
+   * Overrides how a tray row looks: `status` (icon, awaiting-input tint and
+   * pinning), `percent` (progress bar and value) and `message` (detail line).
+   * A missing or `undefined` field, or a `null` status or message, keeps the
+   * job's own; `percent: null` hides the bar and shows the time, and a status
+   * alone keeps the job's own percent. The job's section, actions and counts
+   * do not change.
+   */
+  rowJob?: (job: JobState) => JobRowOverride | null
+}
+
+/** A `rowJob` result; see `UseJobCenterOptions.rowJob`. */
+export interface JobRowOverride {
+  status?: JobStatus | null
+  percent?: number | null
+  message?: string | null
+}
+
+/** How a tray row shows a job; see `UseJobCenterReturn.rowView`. */
+export interface JobRowView {
+  status: JobStatus
+  /** 0-100, rounded; `null` hides the progress bar and shows the time instead. */
+  percent: number | null
+  message: string
 }
 
 export interface UseJobCenterReturn {
+  /** The current source; a new identity is a new job list. */
+  source: ComputedRef<PluginJobCenterSource | undefined>
   jobs: ComputedRef<JobState[]>
   activeJobs: ComputedRef<JobState[]>
   historyJobs: ComputedRef<JobState[]>
@@ -155,14 +193,23 @@ export interface UseJobCenterReturn {
   canCancel: ComputedRef<boolean>
   canDelete: ComputedRef<boolean>
   canClearFinished: ComputedRef<boolean>
+  /** DOM id of the JobsStatusTray panel, for `AppTopBar`'s `jobsPanelId` prop. */
+  panelId: string
+  /** The row view of a job, with the `rowJob` option applied. */
+  rowView: (job: JobState) => JobRowView
+  /** The viewer's own job for `AppTopBar`'s `job` prop. */
+  topBarJob: ComputedRef<TopBarJob | null>
+  /** Jobs in the list with status `completed`, for `AppTopBar`'s `jobsDone` prop. */
+  completedCount: ComputedRef<number>
   isOpen: Ref<boolean>
-  activeTab: Ref<JobsStatusTrayTab>
   isLoading: Ref<boolean>
   error: ShallowRef<string | null>
   pendingJobIds: Ref<Set<string>>
   open: () => void
   close: () => void
   toggle: () => void
+  /** The top-bar chip: with the tray closed and none of the viewer's jobs active, selects the held just-completed job; else toggles. */
+  handleTopBarClick: (onSelect: (job: JobState) => void) => void
   refresh: () => Promise<boolean>
   cancelJob: (job: JobState) => Promise<boolean>
   deleteJob: (job: JobState) => Promise<boolean>
@@ -170,6 +217,35 @@ export interface UseJobCenterReturn {
   isPending: (job: JobState) => boolean
 }
 
+/** The stored seen failures, or null when nothing is stored or storage is blocked. */
+function readSeenFailed(key: string): Set<string> | null {
+  try {
+    const parsed: unknown = JSON.parse(globalThis.localStorage?.getItem(key) ?? 'null')
+    return Array.isArray(parsed) ? new Set(parsed.filter((id): id is string => typeof id === 'string')) : null
+  } catch {
+    return null
+  }
+}
+
+function writeSeenFailed(key: string, seen: Set<string>): void {
+  try {
+    globalThis.localStorage?.setItem(key, JSON.stringify([...seen]))
+  } catch {
+    // Private windows and full storage: the state lasts until reload.
+  }
+}
+
+function jobMessage(job: JobState): string {
+  if (job.error) return job.error
+  if (job.status === 'awaiting_input') {
+    return job.progress.message || 'Waiting for external input'
+  }
+  if (job.status === 'queued' && job.queue_position > 0) {
+    return `Queue position ${job.queue_position}`
+  }
+  return job.progress.message || job.progress.stage || jobStatusLabel(job.status)
+}
+
 function errorMessage(error: unknown, fallback: string): string {
   return error instanceof Error ? error.message : fallback
 }
@@ -184,7 +260,6 @@ export function useJobCenter(
   options: UseJobCenterOptions = {},
 ): UseJobCenterReturn {
   const isOpen = ref(false)
-  const activeTab = ref<JobsStatusTrayTab>('active')
   const isLoading = ref(false)
   const error = shallowRef<string | null>(null)
   const pendingJobIds = ref(new Set<string>())
@@ -200,6 +275,103 @@ export function useJobCenter(
   const historyJobs = computed(() => jobs.value.filter(job => !isActiveJobStatus(job.status)))
   const deletableJobs = computed(() => historyJobs.value.filter(job => job.can_delete))
   const featuredJob = computed(() => activeJobs.value[0] ?? historyJobs.value[0] ?? null)
+  const completedCount = computed(() => jobs.value.filter(job => job.status === 'completed').length)
+
+  // Top-bar run slot: the viewer's own jobs only. Standalone or with auth off
+  // (no signed-in user), every job is the viewer's.
+  const { integrated, user, plugin, isAdmin } = usePlatform()
+  const isOwnJob = (job: JobState) => {
+    if (!integrated.value) return true
+    // With no user, isAdmin is true only with auth off.
+    if (user.value == null) return isAdmin.value
+    return (job.owner_user_id ?? job.user_id) === String(user.value.id)
+  }
+  const ownActiveJobs = computed(() => activeJobs.value.filter(isOwnJob))
+  const justFinished = shallowRef<JobState | null>(null)
+  // The live held job; it drops out once the job leaves the list.
+  const heldJob = computed(() => {
+    const held = justFinished.value
+    return held ? jobs.value.find(job => job.job_id === held.job_id) ?? null : null
+  })
+  let finishedTimer: ReturnType<typeof setTimeout> | undefined
+  // Compare active jobs within one source only: a replaced source starts over.
+  watch([source, ownActiveJobs], ([currentSource, now], [previousSource, before]) => {
+    if (currentSource !== previousSource) {
+      justFinished.value = null
+      return
+    }
+    const nowIds = new Set(now.map(job => job.job_id))
+    const left = new Set(before.filter(job => !nowIds.has(job.job_id)).map(job => job.job_id))
+    const finished = jobs.value.find(job => left.has(job.job_id) && job.status === 'completed')
+    if (!finished) return
+    justFinished.value = finished
+    clearTimeout(finishedTimer)
+    finishedTimer = setTimeout(() => { justFinished.value = null }, FINISHED_HOLD_MS)
+  })
+  // ponytail: the seen set only grows; prune to listed jobs if the stored array ever matters.
+  const seenFailedKey = `mint.jobs.${plugin.value?.id ?? 'standalone'}.seen-failed`
+  const storedSeenFailed = readSeenFailed(seenFailedKey)
+  const seenFailed = shallowRef(storedSeenFailed ?? new Set<string>())
+  const unseenFailedJobs = computed(() => historyJobs.value.filter(job => (
+    job.status === 'failed' && isOwnJob(job) && !seenFailed.value.has(job.job_id)
+  )))
+  function markFailedSeen(): void {
+    seenFailed.value = new Set([...seenFailed.value, ...unseenFailedJobs.value.map(job => job.job_id)])
+    writeSeenFailed(seenFailedKey, seenFailed.value)
+  }
+  // Nothing stored (new browser, cleared or blocked storage): the failures at the
+  // initial load are the baseline, so only later failures alert. Without a load
+  // step, the first non-empty list stands in for it.
+  let hasBaseline = storedSeenFailed !== null
+  let awaitingLoad = options.loadOnMount !== false && Boolean(source.value?.refresh)
+  function takeBaseline(): void {
+    if (hasBaseline || !active) return
+    hasBaseline = true
+    markFailedSeen()
+  }
+  watch(jobs, (list) => {
+    if (!awaitingLoad && list.length > 0) takeBaseline()
+  }, { immediate: true })
+  // The open tray shows every failure, including one that happens while it is open.
+  watch([isOpen, unseenFailedJobs], ([open, unseen]) => {
+    if (open && unseen.length > 0) markFailedSeen()
+  })
+  const topBarJob = computed<TopBarJob | null>(() => {
+    const own = ownActiveJobs.value
+    const shown = own.find(job => job.status === 'awaiting_input') ?? own[0]
+    if (shown) {
+      return options.topBarJob?.(shown) ?? {
+        status: shown.status,
+        label: shown.progress.message || `${shown.name} ${jobStatusLabel(shown.status).toLowerCase()}`,
+        percent: shown.status === 'running' ? normalizeJobPercent(shown.progress.percent) : null,
+      }
+    }
+    const held = heldJob.value
+    if (held) return options.topBarJob?.(held) ?? { status: 'completed', label: `${held.name} completed` }
+    const failed = unseenFailedJobs.value.length
+    return failed > 0 ? { status: 'failed', label: `${failed} failed` } : null
+  })
+
+  function rowView(job: JobState): JobRowView {
+    const override = options.rowJob?.(job) ?? {}
+    const status = override.status ?? job.status
+    // Only an explicit percent changes the bar; a status override keeps the job's own.
+    const percent = override.percent !== undefined
+      ? override.percent
+      : job.status === 'running' ? job.progress.percent : null
+    return {
+      status,
+      percent: percent == null ? null : Math.round(normalizeJobPercent(percent)),
+      message: override.message ?? jobMessage(job),
+    }
+  }
+
+  function handleTopBarClick(onSelect: (job: JobState) => void): void {
+    const finished = heldJob.value
+    if (!isOpen.value && ownActiveJobs.value.length === 0 && finished) onSelect(finished)
+    else isOpen.value = !isOpen.value
+  }
+
   const canRefresh = computed(() => Boolean(source.value?.refresh))
   const canCancel = computed(() => Boolean(source.value?.cancel))
   const canDelete = computed(() => Boolean(source.value?.delete))
@@ -290,14 +462,20 @@ export function useJobCenter(
   }
 
   onMounted(() => {
-    if (options.loadOnMount !== false) void refresh()
+    if (options.loadOnMount === false) return
+    void refresh().then((loaded) => {
+      awaitingLoad = false
+      if (loaded || jobs.value.length > 0) takeBaseline()
+    })
   })
   onUnmounted(() => {
     active = false
     requestGeneration += 1
+    clearTimeout(finishedTimer)
   })
 
   return {
+    source,
     jobs,
     activeJobs,
     historyJobs,
@@ -307,14 +485,18 @@ export function useJobCenter(
     canCancel,
     canDelete,
     canClearFinished,
+    panelId: `mint-jobs-tray-${useId()}`,
+    rowView,
+    topBarJob,
+    completedCount,
     isOpen,
-    activeTab,
     isLoading,
     error,
     pendingJobIds,
     open: () => { isOpen.value = true },
     close: () => { isOpen.value = false },
     toggle: () => { isOpen.value = !isOpen.value },
+    handleTopBarClick,
     refresh,
     cancelJob,
     deleteJob,