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

package/src/composables/pluginWorkspaceModel.ts

@@ -1,31 +1,22 @@
 import type {
-  AccountMenuItem,
-  PageSelectorItemInput,
-  PillNavItemInput,
-  SidebarToolSection,
-  TopBarSettingsConfig,
-  TopBarVariant,
+  PluginWorkspaceSidebarSpec,
+  PluginWorkspaceTopBarSpec,
 } from '../types'
-import type { FormEnhancements, FormSchema } from '../types/form-builder'
 import type {
   ControlComponentBinding,
   ControlComponentBindingsById,
-  ControlModel,
-  ControlModelBinding,
-  ControlSchema,
-  ControlWorkspaceOptions,
 } from './useControlSchema'
 
 /**
  * Scoped-slot payload shared by PluginWorkspaceView's `default`, `topbar`, and `sidebar`
  * slots: the resolved active view plus the values and component bindings/props derived
- * from the compact control schema. WorkspaceControlsInternal renders a component's default
+ * from the sidebar control model. WorkspaceControlsInternal renders a component's default
  * slot bound to exactly this shape.
  */
 export interface PluginWorkspaceControlsModel {
   /** Currently resolved workspace view id. */
   activeView: string
-  /** Sets the active view, updating any uncontrolled state and emitting `update:activeView`. */
+  /** Sets the active view, updating any uncontrolled state and emitting `update:view`. */
   setActiveView: (viewId: string) => void
   /** Current control values, shared between the auto-rendered sidebar form and the default slot. */
   values: Record<string, unknown>
@@ -41,8 +32,8 @@ export interface PluginWorkspaceControlsModel {
 
 /**
  * Resolved AppLayout + AppTopBar configuration consumed by WorkspaceShellInternal: top bar
- * chrome and navigation, plus the AppLayout layout/collapse props that own the responsive
- * mobile sidebar toggle.
+ * spec and active pill, plus the AppLayout layout props that own the responsive mobile
+ * sidebar toggle.
  */
 export interface PluginWorkspaceShellModel {
   /** AppLayout sidebar position. */
@@ -59,118 +50,36 @@ 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
-  /** Top bar visual treatment. */
-  topBarVariant: TopBarVariant
-  /** Home link used by the top bar brand icon. */
-  homePath: string
-  /** Show the default MINT logo when no icon/logo slot is provided. */
-  showLogo: boolean
-  /** Preferred route-level page selector entries. */
-  pageSelector?: PageSelectorItemInput[]
-  /** Resolved active page selector id. */
-  currentPageSelectorId: string
-  /** Resolved centered pill navigation, generated from the control schema when omitted. */
-  pillNav?: PillNavItemInput[]
+  /** AppTopBar spec with the workspace defaults applied and the generated pills filled in; `false` removes the top bar. */
+  topBar: false | PluginWorkspaceTopBarSpec
   /** Resolved active centered pill id. */
-  currentPillId: string
-  /** Show the theme toggle button. */
-  showThemeToggle: boolean
-  /** Show the settings button and modal. */
-  showSettings: boolean
-  /** Built-in settings modal configuration. */
-  settingsConfig?: TopBarSettingsConfig
-  /** Show the standalone badge when not integrated into the platform. */
-  showStandaloneLabel: boolean
-  /** Custom standalone badge label. */
-  standaloneLabel: string
-  /** Account dropdown entries. */
-  accountMenu?: AccountMenuItem[]
-  /** Show the notifications icon button. */
-  showNotifications: boolean
-  /** Draw a notification dot on the notifications icon. */
-  hasNotificationDot: boolean
-  /** Show the admin shortcut. */
-  showAdmin: boolean
-  /** Route used by the admin shortcut. */
-  adminPath: string
-  /** Account display name. */
-  userName?: string
-  /** Explicit account avatar initial. */
-  userInitial?: string
-  /** Account email shown in the avatar menu. */
-  userEmail?: string
+  pill: string
   /** Names of AppTopBar passthrough slots the caller actually provided. */
   topBarSlotNames: string[]
   /** Scoped-slot payload exposed to the `topbar` override slot. */
   controls: PluginWorkspaceControlsModel
 }
 
-/**
- * Resolved AppSidebar configuration consumed by WorkspaceSidebarInternal: sidebar chrome,
- * panels/forms, collapse behavior, and the compact control-schema props that drive
- * AppSidebar's auto-generated form.
- */
+/** Resolved AppSidebar configuration consumed by WorkspaceSidebarInternal. */
 export interface PluginWorkspaceSidebarModel {
-  /** Sidebar chrome title. */
-  title?: string
-  /** Sidebar chrome subtitle. */
-  subtitle?: string
-  /** Optional compact badge/count rendered in the sidebar header. */
-  badge?: string | number
-  /** Map of view IDs to sidebar tool sections. */
-  panels: Record<string, SidebarToolSection[]>
+  /** AppSidebar spec with the workspace defaults applied. */
+  spec: PluginWorkspaceSidebarSpec
   /** Resolved active view, used to pick which panels/forms render. */
   activeView: string
-  /** AppSidebar floating style (always false: PluginWorkspaceView docks the sidebar inside AppLayout). */
-  floating: boolean
-  /** Compact AppSidebar density. */
-  dense: boolean
-  /** Sidebar CSS width. */
-  width?: string
-  /** Sidebar position, mirrors the shell's `sidebarPosition`. */
-  side: 'left' | 'right'
-  /** Optional FormBuilder schemas keyed by section ID. */
-  forms: Record<string, FormSchema>
-  /** DOM id for the AppSidebar scrollable content area. */
-  contentId?: string
-  /** Render the sidebar shell even when no panel matches the active view. */
-  showWhenEmpty: boolean
-  /** Optional compact control model for the generated sidebar form. */
-  model?: ControlModel | ControlModelBinding
-  /** Compact control schema for the generated sidebar form. */
-  controlSchema?: ControlSchema
-  /** Options passed to compact control schema generation. */
-  controlOptions: ControlWorkspaceOptions
   /** Shared values for the auto-rendered sidebar form. */
   values: Record<string, unknown>
-  /** Runtime FormBuilder enhancements for the auto-rendered sidebar form. */
-  formEnhancements?: FormEnhancements<Record<string, unknown>>
-  /** Show submit/cancel actions inside the auto-rendered sidebar form. */
-  showFormActions: boolean
+  /** Controlled sidebar collapsed state. */
+  collapsed?: boolean
   /** Loading/saving state for the auto-rendered sidebar form. */
   formLoading: boolean
   /** Disabled state for the auto-rendered sidebar form. */
   formDisabled: boolean
   /** Readonly state for the auto-rendered sidebar form. */
   formReadonly: boolean
-  /** Size passed to the auto-rendered sidebar form. */
-  formSize: 'sm' | 'md' | 'lg'
-  /** Show a built-in collapse/expand button in the sidebar chrome. */
-  collapsible?: boolean
-  /** Controlled sidebar collapsed state. */
-  collapsed?: boolean
-  /** Initial sidebar collapsed state when uncontrolled. */
-  defaultCollapsed: boolean
-  /** Sidebar width when collapsed. */
-  collapsedWidth: string
-  /** Accessible label for the sidebar collapse action. */
-  collapseButtonLabel: string
-  /** Accessible label for the sidebar expand action. */
-  expandButtonLabel: string
   /** Names of AppSidebar passthrough slots the caller actually provided. */
   slotNames: string[]
 }

package/src/composables/useApi.ts

@@ -9,13 +9,11 @@ let interceptorAttached = false
 interface MintAxiosRequestConfig extends AxiosRequestConfig {
   _mintSkipAuth?: boolean
   _mintAuthToken?: string
-  _mintTypedErrors?: boolean
 }
 
 interface MintInternalAxiosRequestConfig extends InternalAxiosRequestConfig {
   _mintSkipAuth?: boolean
   _mintAuthToken?: string
-  _mintTypedErrors?: boolean
 }
 
 type MutableHeaders = Record<string, unknown> & {
@@ -158,8 +156,6 @@ export interface ApiClientOptions {
   baseUrl?: string
   timeout?: number
   withAuth?: boolean
-  /** Normalize failed responses into MintApiError. Generated clients enable this by default. */
-  typedErrors?: boolean
 }
 
 export interface UseApiReturn {
@@ -175,7 +171,7 @@ export interface UseApiReturn {
   buildWsUrl: (path: string) => string
 }
 
-/** Axios-based API client that injects the plugin base URL and JWT auth header on every request. */
+/** Axios-based API client that injects the plugin base URL and JWT auth header on every request. A failed response rejects with a `MintApiError`. */
 export function useApi(options: ApiClientOptions = {}): UseApiReturn {
   const settingsStore = useSettingsStore()
   const authStore = useAuthStore()
@@ -209,33 +205,26 @@ export function useApi(options: ApiClientOptions = {}): UseApiReturn {
       async (error: unknown) => {
         if (axios.isAxiosError(error) && error.response) {
           const request = error.config as MintInternalAxiosRequestConfig | undefined
-          if (request?._mintTypedErrors) {
-            let payload: unknown = error.response.data
-            if (payload instanceof Blob) {
-              try {
-                payload = JSON.parse(await payload.text())
-              } catch {
-                // Keep non-JSON download errors available as the original body.
-              }
+          let payload: unknown = error.response.data
+          if (payload instanceof Blob) {
+            try {
+              payload = JSON.parse(await payload.text())
+            } catch {
+              // Keep non-JSON download errors available as the original body.
             }
-            const typed = mintApiErrorFromResponse(
-              error.response.status,
-              payload,
-              {
-                requestId: String(error.response.headers?.['x-request-id'] ?? '') || null,
-                cause: error,
-              },
-            )
-            if (error.response.status === 401 && request._mintSkipAuth !== true) {
-              return Promise.reject(authenticationRequiredError(error, request._mintAuthToken, typed))
-            }
-            return Promise.reject(typed)
           }
-          if (error.response.status === 401) {
-            if (request?._mintSkipAuth !== true) {
-              return Promise.reject(authenticationRequiredError(error, request?._mintAuthToken))
-            }
+          const typed = mintApiErrorFromResponse(
+            error.response.status,
+            payload,
+            {
+              requestId: String(error.response.headers?.['x-request-id'] ?? '') || null,
+              cause: error,
+            },
+          )
+          if (error.response.status === 401 && request?._mintSkipAuth !== true) {
+            return Promise.reject(authenticationRequiredError(error, request?._mintAuthToken, typed))
           }
+          return Promise.reject(typed)
         }
         return Promise.reject(error)
       },
@@ -256,7 +245,6 @@ export function useApi(options: ApiClientOptions = {}): UseApiReturn {
     const base: MintAxiosRequestConfig = {
       baseURL: getBaseUrl(),
       timeout: options.timeout ?? settingsStore.requestTimeout,
-      _mintTypedErrors: options.typedErrors,
       ...config,
     }
     // Strip auth header if explicitly disabled

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,10 +46,11 @@ export interface AppExperimentPopoverBinding {
   saveDisabledMessage?: string
   saveLoading: boolean
   saveSuccessMessage?: string
+  dirty?: boolean
 }
 
 export interface AppExperimentSelectorModalBinding {
-  modelValue: boolean
+  open: boolean
   currentExperimentId: number | null
 }
 
@@ -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,17 +154,19 @@ export function useAppExperiment(options: UseAppExperimentOptions = {}): UseAppE
     saveDisabledMessage: saveDisabledMessage.value,
     saveLoading: saveLoading.value,
     saveSuccessMessage: saveSuccessMessage.value,
+    dirty: dirty.value,
   }))
   const selectorModal = computed<AppExperimentSelectorModalBinding>(() => ({
-    modelValue: showModal.value,
+    open: showModal.value,
     currentExperimentId: experimentId.value,
   }))
 
   if (options.onSelect) {
+    // Keyed by id, so a refresh of the same experiment is not a new selection.
     watch(
-      () => store.current,
-      (experiment) => {
-        if (experiment) void options.onSelect?.(experiment)
+      () => store.current?.id,
+      (id) => {
+        if (id !== undefined && store.current) void options.onSelect?.(store.current)
       },
     )
   }
@@ -165,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/{useAnalysisArtifacts.ts → useArtifacts.ts}

@@ -8,11 +8,9 @@ import {
   type Ref,
 } from 'vue'
 import { useApi } from './useApi'
-import { useRequestSyncState } from './useRequestSyncState'
-import {
-  getInjectedPlatformContext,
-  resolveCurrentExperimentId,
-} from './platformContextHelpers'
+import { useRequest } from './useRequest'
+import { getInjectedPlatformContext } from './platformContextHelpers'
+import { useExperimentStore } from '../stores/experiment'
 import type {
   AnalysisArtifactDetail,
   AnalysisArtifactListResponse,
@@ -24,8 +22,8 @@ import type {
 
 export { ANALYSIS_FILE_ARTIFACT_SCHEMA } from '../types/analysisArtifactTypes'
 
-export interface UseAnalysisArtifactsOptions {
-  /** Experiment id; defaults to platform injection or URL. Refetches when it changes. */
+export interface UseArtifactsOptions {
+  /** Experiment id; defaults to the current experiment (`useExperimentStore`). Refetches when it changes. */
   experimentId?: MaybeRefOrGetter<number | undefined>
   /** Override API base URL. */
   apiBaseUrl?: string
@@ -37,14 +35,14 @@ export interface UseAnalysisArtifactsOptions {
   immediate?: boolean
 }
 
-export interface UseAnalysisArtifactsReturn {
+export interface UseArtifactsReturn {
   /** Fetched artifacts, scoped to pluginId when set. */
   artifacts: ComputedRef<AnalysisArtifactSummary[]>
   /** Artifacts after applying statusFilter, pluginFilter, and search. */
   visibleArtifacts: ComputedRef<AnalysisArtifactSummary[]>
   /** Detail loaded by the last successful getDetail call, or null. */
   selectedDetail: Ref<AnalysisArtifactDetail | null>
-  /** Resolved experiment id from options, platform injection, or URL. */
+  /** Resolved experiment id from options or the current experiment. */
   currentExperimentId: ComputedRef<number | undefined>
   /** Whether an experiment id is available. */
   hasCurrentExperiment: ComputedRef<boolean>
@@ -90,23 +88,25 @@ export interface UseAnalysisArtifactsReturn {
  *
  * @example Recommended
  * ```ts
- * const artifacts = useAnalysisArtifacts({ pluginId: 'LEAF' })
+ * const artifacts = useArtifacts({ pluginId: 'LEAF' })
  * await artifacts.list()
  * ```
  */
-export function useAnalysisArtifacts(
-  options: UseAnalysisArtifactsOptions = {},
-): UseAnalysisArtifactsReturn {
+export function useArtifacts(
+  options: UseArtifactsOptions = {},
+): UseArtifactsReturn {
   const injectedContext = getInjectedPlatformContext()
   const api = useApi({ baseUrl: options.apiBaseUrl ?? injectedContext?.platformApiUrl })
+  const experimentStore = useExperimentStore()
 
   const currentExperimentId = computed<number | undefined>(
-    () => toValue(options.experimentId) ?? resolveCurrentExperimentId(injectedContext),
+    () => toValue(options.experimentId) ?? experimentStore.currentId ?? undefined,
   )
   const hasCurrentExperiment = computed(() => currentExperimentId.value !== undefined)
   const scopePluginId = computed(() => toValue(options.pluginId) ?? null)
 
-  const request = useRequestSyncState('Analysis artifact request failed.')
+  const request = useRequest('Analysis artifact request failed.')
+  const lastLoadedAt = ref<Date | null>(null)
   const fetchedArtifacts = ref<AnalysisArtifactSummary[]>([])
   const selectedDetail = ref<AnalysisArtifactDetail | null>(null)
 
@@ -182,7 +182,7 @@ export function useAnalysisArtifacts(
       if (token !== listToken) return artifacts.value
       // Copy: replaceArtifact splices in place, and the response array is not ours.
       fetchedArtifacts.value = [...(data?.artifacts ?? [])]
-      request.markLoaded()
+      lastLoadedAt.value = new Date()
       return artifacts.value
     } catch (err) {
       if (token !== listToken) return []
@@ -206,7 +206,7 @@ export function useAnalysisArtifacts(
       )
       if (token !== detailToken) return null
       selectedDetail.value = detail
-      request.markLoaded()
+      lastLoadedAt.value = new Date()
       return detail
     } catch (err) {
       if (token !== detailToken) return null
@@ -272,7 +272,6 @@ export function useAnalysisArtifacts(
     try {
       const summary = await operation(experimentId)
       replaceArtifact(summary)
-      request.markSaved()
       return summary
     } catch (err) {
       request.setError(err)
@@ -344,7 +343,7 @@ export function useAnalysisArtifacts(
     isLoading,
     isMutating,
     error: request.error,
-    lastLoadedAt: request.lastLoadedAt,
+    lastLoadedAt,
     search,
     statusFilter,
     pluginFilter,

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

@@ -106,16 +106,15 @@ export function useControlSchema<TControls extends ControlSchema>(
     fields: normalizeControls(controls, options).map(controlToFormField),
     formSchema,
     form: {
-      schema: formSchema,
+      spec: { controls, controlOptions: options },
     },
     settingsSchema,
     settings: {
-      schema: settingsSchema,
+      spec: settingsSchema,
     },
     topBarSettingsConfig,
     topBarSettings: {
-      showSettings: true,
-      settingsConfig: topBarSettingsConfig,
+      spec: { settings: topBarSettingsConfig },
     },
     sidebarPanels,
     viewIds,
@@ -123,11 +122,8 @@ export function useControlSchema<TControls extends ControlSchema>(
     defaultView,
     sectionSchemas,
     sidebar: {
-      panels: sidebarPanels,
-      forms: sectionSchemas,
-      viewIds,
-      viewItems,
-      defaultView,
+      spec: { panels: sidebarPanels, forms: sectionSchemas },
+      activeView: defaultView,
     },
     initialValues: getControlDefaults(controls),
     sectionSchema: (sectionId: string) => controlsToSectionFormSchema(controls, sectionId, options),

package/src/composables/useControlWorkspace.ts

@@ -145,8 +145,6 @@ export function useControlWorkspace<TControls extends ControlSchema>(
   const sidebar = reactive({
     ...schema.sidebar,
     activeView: activeView.value,
-    modelValue: values,
-    'onUpdate:modelValue': setValues,
     values,
     'onUpdate:values': setValues,
   }) as ControlWorkspaceSidebarBinding
@@ -156,15 +154,14 @@ export function useControlWorkspace<TControls extends ControlSchema>(
     onSelect: (item: PillNavItem) => setActiveView(item.id),
   }) as ControlWorkspacePillNavBinding
   const topBarSettingsBinding = {
-    showSettings: true,
-    settingsConfig: topBarSettingsConfig,
+    spec: { settings: topBarSettingsConfig },
     onSettingsValuesChange: setValues,
   } as ControlWorkspaceTopBarSettingsBinding
   const topBarProps = computed<ControlWorkspaceTopBarBinding>(() => ({
-    pillNav: pillNav.items,
-    currentPillId: pillNav.currentItemId,
+    spec: { pills: pillNav.items, settings: topBarSettingsConfig },
+    pill: pillNav.currentItemId,
     onPillSelect: pillNav.onSelect,
-    ...topBarSettingsBinding,
+    onSettingsValuesChange: setValues,
   }))
   const bindings: ControlWorkspaceComponentBindings = {
     form,

package/src/composables/useExperiment.ts

@@ -0,0 +1,49 @@
+import { computed, type ComputedRef } from 'vue'
+import { useExperimentStore } from '../stores/experiment'
+import type { ExperimentSummary } from '../types'
+
+/** Load state of the current experiment record. */
+export type ExperimentLoadStatus = 'idle' | 'loading' | 'ready' | 'error'
+
+export interface UseExperimentReturn {
+  /** Id of the current experiment; `null` when none is selected. */
+  id: ComputedRef<number | null>
+  /** Record of the current experiment, once the platform returned it. */
+  current: ComputedRef<ExperimentSummary | null>
+  /** `idle` with no selection, then `loading`, `ready` or `error`. */
+  status: ComputedRef<ExperimentLoadStatus>
+  /** Message of the last failed load, or `null`. */
+  error: ComputedRef<string | null>
+  /** Read the current experiment again. The selection does not change. */
+  refresh: () => Promise<void>
+}
+
+/**
+ * Read the experiment the plugin page works on.
+ *
+ * The platform selects the experiment and keeps it in step with the URL; this
+ * composable only reads it. Watch `id` to respond to a change. In standalone
+ * mode no experiment is selected and `id` stays `null`.
+ *
+ * @example
+ * ```typescript
+ * const experiment = useExperiment()
+ * watch(experiment.id, (id) => { if (id !== null) void load(id) }, { immediate: true })
+ * ```
+ */
+export function useExperiment(): UseExperimentReturn {
+  const store = useExperimentStore()
+  const id = computed(() => store.currentId)
+
+  return {
+    id,
+    current: computed(() => store.current),
+    status: computed(() => {
+      if (store.currentId === null) return 'idle'
+      if (store.isResolving) return 'loading'
+      return store.error ? 'error' : 'ready'
+    }),
+    error: computed(() => store.error),
+    refresh: store.refresh,
+  }
+}

package/src/composables/useExperimentData.ts

@@ -1,6 +1,6 @@
 import { shallowRef, computed, type Ref, type ComputedRef } from 'vue'
 import { useApi, type UseApiReturn } from './useApi'
-import { useRequestSyncState } from './useRequestSyncState'
+import { useRequest } from './useRequest'
 import {
   extractSampleNamesFromDesignData,
   extractSampleOptionsFromDesignData,
@@ -47,8 +47,8 @@ export function useExperimentData(
   options: UseExperimentDataOptions = {},
 ): UseExperimentDataReturn {
   const data = shallowRef<Record<string, unknown> | null>(null)
-  const request = useRequestSyncState('Failed to fetch experiment data')
-  const isLoading = request.loading
+  const request = useRequest('Failed to fetch experiment data')
+  const isLoading = request.isLoading
   const error = request.error
   const lastLoadedAt = request.lastLoadedAt
   let lastExperimentId: number | null = null
@@ -97,7 +97,7 @@ export function useExperimentData(
     try {
       data.value = await request.run(
         () => getApi().get<Record<string, unknown>>(`/experiments/${experimentId}/data`),
-        { success: 'load', errorMessage: 'Failed to fetch experiment data' },
+        { kind: 'load', errorMessage: 'Failed to fetch experiment data' },
       )
       return data.value
     } catch {