@swiss-ai-hub/web 0.290.11

package/composables/process/useCreateProcessInstance.ts

@@ -0,0 +1,32 @@
+import { createProcessInstance, type CreateProcessInstanceRequest } from '@core/sdk/client'
+
+export const useCreateProcessInstance = defineMutation(() => {
+  const queryCache = useQueryCache()
+
+  const {
+    mutateAsync: createProcessInstanceMutation,
+    isPending: isCreating,
+    error: createError,
+  } = useMutation({
+    mutation: async ({ processClass, request, tenantId }: { processClass: string, request: CreateProcessInstanceRequest, tenantId: string }) => {
+      const result = await createProcessInstance({
+        composable: '$fetch',
+        path: {
+          tenant_id: tenantId,
+          process_class: processClass,
+        },
+        body: request,
+      })
+
+      queryCache.invalidateQueries({ key: ['tenant', tenantId, 'process-instances'] })
+      queryCache.invalidateQueries({ key: ['tenant', tenantId, 'process-class-instances', processClass] })
+      return result
+    },
+  })
+
+  return {
+    createProcessInstance: createProcessInstanceMutation,
+    isCreating,
+    createError,
+  }
+})

package/composables/process/useDeleteProcessInstance.ts

@@ -0,0 +1,31 @@
+import { deleteProcessInstance } from '@core/sdk/client'
+
+export const useDeleteProcessInstance = defineMutation(() => {
+  const queryCache = useQueryCache()
+
+  const {
+    mutateAsync: deleteProcessInstanceMutation,
+    isPending: isDeleting,
+    error: deleteError,
+  } = useMutation({
+    mutation: async ({ processClass, processId, tenantId }: { processClass: string, processId: string, tenantId: string }) => {
+      await deleteProcessInstance({
+        composable: '$fetch',
+        path: {
+          tenant_id: tenantId,
+          process_class: processClass,
+          process_id: processId,
+        },
+      })
+
+      queryCache.invalidateQueries({ key: ['tenant', tenantId, 'process-instances'] })
+      queryCache.invalidateQueries({ key: ['tenant', tenantId, 'process-class-instances', processClass] })
+    },
+  })
+
+  return {
+    deleteProcessInstance: deleteProcessInstanceMutation,
+    isDeleting,
+    deleteError,
+  }
+})

package/composables/process/useProcessClasses.ts

@@ -0,0 +1,27 @@
+import { type ProcessClassDtoReadable, getProcessClasses } from '@core/sdk/client'
+import { minutesToMilliseconds } from 'date-fns'
+
+export type ProcessClassDto = ProcessClassDtoReadable
+
+export const useProcessClasses = defineQuery((options?: { online?: boolean }) => {
+  const { tenantId } = useTenant()
+
+  const { data: processClasses, isPending: processClassesAreLoading } = useQuery<ProcessClassDto[]>({
+    key: () => ['tenant', tenantId.value, 'process-classes', options?.online],
+    staleTime: minutesToMilliseconds(5),
+    enabled: useTenantReady(),
+    query: async () => {
+      return await getProcessClasses({
+        composable: '$fetch',
+        path: { tenant_id: tenantId.value! },
+        query: {
+          online: options?.online,
+        },
+      })
+    },
+  })
+  return {
+    processClasses,
+    processClassesAreLoading,
+  }
+})

package/composables/process/useProcessInstance.ts

@@ -0,0 +1,28 @@
+import { type FullProcessInstanceDtoReadable, getProcessInstance } from '@core/sdk/client'
+import { minutesToMilliseconds } from 'date-fns'
+import { useRoute } from 'vue-router'
+
+export const useProcessInstance = defineQuery(() => {
+  const route = useRoute()
+  const { tenantId } = useTenant()
+
+  const { data: processInstance, isPending: processInstanceIsLoading } = useQuery<FullProcessInstanceDtoReadable>({
+    key: () => ['tenant', tenantId.value, 'process-instances', route.params.process_class as string, route.params.process_id as string],
+    staleTime: minutesToMilliseconds(5),
+    enabled: useTenantReady('process_id', 'process_class'),
+    query: async () => {
+      return await getProcessInstance({
+        composable: '$fetch',
+        path: {
+          tenant_id: tenantId.value!,
+          process_id: route.params.process_id as string,
+          process_class: route.params.process_class as string,
+        },
+      })
+    },
+  })
+  return {
+    processInstance,
+    processInstanceIsLoading,
+  }
+})

package/composables/process/useProcessInstances.ts

@@ -0,0 +1,27 @@
+import { type FullProcessInstanceDtoReadable, getAllProcessInstances } from '@core/sdk/client'
+import { minutesToMilliseconds } from 'date-fns'
+
+export type FullProcessInstanceDto = FullProcessInstanceDtoReadable
+
+export const useProcessInstances = defineQuery((options?: { online?: boolean }) => {
+  const { tenantId } = useTenant()
+
+  const { data: processInstances, isPending: processInstancesAreLoading } = useQuery<FullProcessInstanceDto[]>({
+    key: () => ['tenant', tenantId.value, 'process-instances', options?.online],
+    staleTime: minutesToMilliseconds(5),
+    enabled: useTenantReady(),
+    query: async () => {
+      return await getAllProcessInstances({
+        composable: '$fetch',
+        path: { tenant_id: tenantId.value! },
+        query: {
+          online: options?.online,
+        },
+      })
+    },
+  })
+  return {
+    processInstances,
+    processInstancesAreLoading,
+  }
+})

package/composables/process/useProcessWalkthroughs.ts

@@ -0,0 +1,73 @@
+import { getProcessWalkthroughs, type ProcessWalkthroughDto } from '@core/sdk/client'
+
+export const useProcessWalkthroughs = defineQuery(() => {
+  const route = useRoute()
+  const { tenantId } = useTenant()
+
+  const currentPage = ref(1)
+  const pageSize = ref(10)
+
+  const processClass = computed(() => route.params.process_class as string)
+  const processId = computed(() => route.params.process_id as string)
+
+  const walkthroughsQuery = useQuery({
+    key: () => ['tenant', tenantId.value, 'process-walkthroughs', processClass.value, processId.value, { page: currentPage.value, size: pageSize.value }],
+    enabled: useTenantReady('process_class', 'process_id'),
+    query: async () => {
+      const pageToFetch = Math.max(1, currentPage.value)
+
+      return await getProcessWalkthroughs({
+        composable: '$fetch',
+        path: {
+          tenant_id: tenantId.value!,
+          process_class: processClass.value,
+          process_id: processId.value,
+        },
+        query: {
+          page: pageToFetch,
+          page_size: pageSize.value,
+        },
+      })
+    },
+    placeholderData: previousData => previousData,
+  })
+
+  const setPageSize = (newSize: number) => {
+    if (newSize > 0) {
+      pageSize.value = newSize
+      currentPage.value = 1
+    }
+  }
+
+  const setPage = (newPage: number) => {
+    if (newPage > 0) {
+      currentPage.value = newPage
+    }
+  }
+
+  const paginationMeta = computed(() => {
+    const data = walkthroughsQuery.state.value?.data
+
+    return {
+      total: data?.total ?? 0,
+      currentPage: data?.page ?? currentPage.value,
+      pageSize: data?.page_size ?? pageSize.value,
+      totalPages: data?.total_pages ?? 0,
+    }
+  })
+
+  const walkthroughs = computed(() => (walkthroughsQuery.state.value?.data)?.walkthroughs ?? [] as ProcessWalkthroughDto[])
+
+  const isLoading = computed(() => walkthroughsQuery.asyncStatus.value === 'loading')
+
+  return {
+    walkthroughs,
+    isLoading,
+    pagination: paginationMeta,
+    currentPage,
+    pageSize,
+    setPage,
+    setPageSize,
+    refetch: walkthroughsQuery.refetch,
+  }
+})

package/composables/process/useSendProcessStartForm.ts

@@ -0,0 +1,43 @@
+import { sendProcessStartForm } from '@core/sdk/client'
+
+export const useSendProcessStartForm = defineMutation(() => {
+  const queryCache = useQueryCache()
+
+  const { mutateAsync: sendProcessStartFormMutation } = useMutation({
+    mutation: async ({
+      processClass,
+      processId,
+      tenantId,
+      submissionRoute,
+      submissionMethod,
+      data,
+    }: {
+      processClass: string
+      processId: string
+      tenantId: string
+      submissionRoute: string
+      submissionMethod: string
+      data: Record<string, unknown>
+    }) => {
+      console.log('sending', data)
+      await sendProcessStartForm({
+        composable: '$fetch',
+        path: {
+          tenant_id: tenantId,
+          process_class: processClass,
+          process_id: processId,
+        },
+        query: {
+          submission_route: submissionRoute,
+          submission_method: submissionMethod,
+        },
+        body: JSON.parse(JSON.stringify(data)),
+      })
+      queryCache.invalidateQueries({ key: ['tenant', tenantId, 'process-instances'] })
+      queryCache.invalidateQueries({ key: ['tenant', tenantId, 'process-walkthroughs'] })
+    },
+  })
+  return {
+    sendProcessStartForm: sendProcessStartFormMutation,
+  }
+})

package/composables/process/useUpdateProcessInstance.ts

@@ -0,0 +1,40 @@
+import { updateProcessInstance } from '@core/sdk/client'
+
+export const useUpdateProcessInstance = defineMutation(() => {
+  const queryCache = useQueryCache()
+
+  const { mutateAsync: updateProcessInstanceMutation, isPending: isUpdating } = useMutation({
+    mutation: async ({
+      processClass,
+      processId,
+      tenantId,
+      configuration,
+    }: {
+      processClass: string
+      processId: string
+      tenantId: string
+      configuration: Record<string, unknown>
+    }) => {
+      const result = await updateProcessInstance({
+        composable: '$fetch',
+        path: {
+          tenant_id: tenantId,
+          process_class: processClass,
+          process_id: processId,
+        },
+        body: {
+          configuration,
+        },
+      })
+      queryCache.invalidateQueries({ key: ['tenant', tenantId, 'process-instances', processClass, processId] })
+      queryCache.invalidateQueries({ key: ['tenant', tenantId, 'process-instances'] })
+      queryCache.invalidateQueries({ key: ['tenant', tenantId, 'process-class-instances', processClass] })
+      return result
+    },
+  })
+
+  return {
+    updateProcessInstance: updateProcessInstanceMutation,
+    isUpdating,
+  }
+})

package/composables/role/useCreateRole.ts

@@ -0,0 +1,19 @@
+import { createRole, type CreateRoleRequest } from '@core/sdk/client'
+
+export const useCreateRole = defineMutation(() => {
+  const queryCache = useQueryCache()
+
+  const { mutateAsync: createRoleMutation } = useMutation({
+    mutation: async ({ createdRole, tenantId }: { createdRole: CreateRoleRequest, tenantId: string }) => {
+      await createRole({
+        composable: '$fetch',
+        path: { tenant_id: tenantId },
+        body: createdRole,
+      })
+      queryCache.invalidateQueries()
+    },
+  })
+  return {
+    createRole: createRoleMutation,
+  }
+})

package/composables/role/useDeleteRole.ts

@@ -0,0 +1,21 @@
+import { deleteRole } from '@core/sdk/client'
+
+export const useDeleteRole = defineMutation(() => {
+  const queryCache = useQueryCache()
+
+  const { mutateAsync: removeRole } = useMutation({
+    mutation: async ({ roleId, tenantId }: { roleId: string, tenantId: string }) => {
+      await deleteRole({
+        composable: '$fetch',
+        path: {
+          tenant_id: tenantId,
+          role_id: roleId,
+        },
+      })
+      queryCache.invalidateQueries()
+    },
+  })
+  return {
+    deleteRole: removeRole,
+  }
+})

package/composables/role/useRole.ts

@@ -0,0 +1,30 @@
+import { getRole, type RoleResponse } from '@core/sdk/client'
+import { minutesToMilliseconds } from 'date-fns'
+import { useRoute } from 'vue-router'
+
+export default defineQuery(() => {
+  const route = useRoute()
+  const { tenantId } = useTenant()
+
+  const {
+    data: role,
+    isPending: roleIsLoading,
+  } = useQuery<RoleResponse>({
+    key: () => ['tenant', tenantId.value, 'roles', route.params.role_id as string],
+    staleTime: minutesToMilliseconds(5),
+    enabled: useTenantReady('role_id'),
+    query: async () => {
+      return await getRole({
+        composable: '$fetch',
+        path: {
+          tenant_id: tenantId.value!,
+          role_id: route.params.role_id as string,
+        },
+      })
+    },
+  })
+  return {
+    role,
+    roleIsLoading,
+  }
+})

package/composables/role/useRoles.ts

@@ -0,0 +1,25 @@
+import { getRoles, type RoleResponse } from '@core/sdk/client'
+import { minutesToMilliseconds } from 'date-fns'
+
+export default defineQuery(() => {
+  const { tenantId } = useTenant()
+
+  const {
+    data: roles,
+    isPending: rolesAreLoading,
+  } = useQuery<RoleResponse[]>({
+    key: () => ['tenant', tenantId.value, 'roles'],
+    staleTime: minutesToMilliseconds(5),
+    enabled: useTenantReady(),
+    query: async () => {
+      return await getRoles({
+        composable: '$fetch',
+        path: { tenant_id: tenantId.value! },
+      })
+    },
+  })
+  return {
+    roles,
+    rolesAreLoading,
+  }
+})

package/composables/role/useUpdateRole.ts

@@ -0,0 +1,22 @@
+import { updateRole, type UpdateRoleRequest } from '@core/sdk/client'
+
+export const useUpdateRole = defineMutation(() => {
+  const queryCache = useQueryCache()
+
+  const { mutateAsync: updateRoleMutation } = useMutation({
+    mutation: async ({ roleId, updatedRole, tenantId }: { roleId: string, updatedRole: UpdateRoleRequest, tenantId: string }) => {
+      await updateRole({
+        composable: '$fetch',
+        path: {
+          tenant_id: tenantId,
+          role_id: roleId,
+        },
+        body: updatedRole,
+      })
+      queryCache.invalidateQueries()
+    },
+  })
+  return {
+    updateRole: updateRoleMutation,
+  }
+})

package/composables/suite/useApps.ts

@@ -0,0 +1,31 @@
+import type { ServiceDto } from '@core/sdk/client'
+import type { MenuItem } from 'primevue/menuitem'
+
+export const useApps = () => {
+  const { suite, suiteIsLoading } = useSuite()
+  const router = useRouter()
+  const tenantPath = useTenantPath()
+
+  const apps = computed<MenuItem>(() => {
+    const suiteApps = suite.value?.services.map((service: ServiceDto) => ({
+      label: service.name,
+      description: service.description,
+      icon: service.icon,
+      path: service.path,
+      isAdmin: service.user_is_admin ?? false,
+    } satisfies MenuItem
+    )) ?? []
+    return [
+      { icon: 'material-symbols:home', label: 'Home', path: '/' },
+      ...suiteApps,
+    ].filter((app: MenuItem) => {
+      const resolved = app.path === '/' ? tenantPath('/') : tenantPath(app.path)
+      return router.resolve(resolved).matched.length > 0
+    })
+  })
+
+  return {
+    apps,
+    appsLoading: suiteIsLoading,
+  }
+}

package/composables/suite/useSuite.ts

@@ -0,0 +1,26 @@
+import { getSuite, type SuiteDto } from '@core/sdk/client'
+import { minutesToMilliseconds } from 'date-fns'
+
+export const useSuite = defineQuery(() => {
+  const { tenantId } = useTenant()
+
+  const {
+    data: suite,
+    isPending: suiteIsLoading,
+  } = useQuery<SuiteDto>({
+    key: () => ['tenant', tenantId.value, 'suite'],
+    staleTime: minutesToMilliseconds(5),
+    enabled: useTenantReady(),
+    query: async () => {
+      return await getSuite({
+        composable: '$fetch',
+        path: { tenant_id: tenantId.value! },
+      })
+    },
+  })
+
+  return {
+    suite,
+    suiteIsLoading,
+  }
+})

package/composables/tenant/useActiveTenant.ts

@@ -0,0 +1,27 @@
+import { getMyActiveTenant, setMyActiveTenant } from '@core/sdk/client'
+import { minutesToMilliseconds } from 'date-fns'
+
+export const useActiveTenantQuery = defineQuery(() => {
+  const { data: activeTenant, isPending: activeTenantIsLoading } = useQuery({
+    key: () => ['active-tenant'],
+    staleTime: minutesToMilliseconds(1),
+    query: async () => await getMyActiveTenant({ composable: '$fetch' }),
+  })
+  return { activeTenant, activeTenantIsLoading }
+})
+
+export const useSetActiveTenant = defineMutation(() => {
+  const queryCache = useQueryCache()
+  const { mutateAsync: setActiveTenantMutation } = useMutation({
+    mutation: async ({ tenantId }: { tenantId: string }) => {
+      const result = await setMyActiveTenant({
+        composable: '$fetch',
+        body: { tenant_id: tenantId },
+      })
+      queryCache.invalidateQueries({ key: ['active-tenant'] })
+      queryCache.invalidateQueries({ key: ['my-tenants'] })
+      return result
+    },
+  })
+  return { setActiveTenant: setActiveTenantMutation }
+})

package/composables/tenant/useSysadminNavigation.ts

@@ -0,0 +1,19 @@
+// The sysadmin plane (tenant administration) is a separately-licensed app on
+// its own origin (sysadmin.${DOMAIN}, or localhost:3334 in dev) — it is NOT a
+// route inside @swiss-ai-hub/web. Anything in this app that lets a sysadmin
+// "manage tenants" must therefore jump cross-origin, not navigateTo() a local
+// route (that route no longer exists here and would 404). This composable is
+// the single place that contract lives.
+export function useSysadminNavigation() {
+  const config = useRuntimeConfig()
+  const { locale } = useI18n()
+
+  const sysadminUrl = computed(() => (config.public.sysadmin as { url?: string } | undefined)?.url ?? '')
+
+  function enterSysadmin(): void {
+    if (!sysadminUrl.value || !import.meta.client) return
+    globalThis.location.href = `${sysadminUrl.value}/${locale.value}/tenants`
+  }
+
+  return { sysadminUrl, enterSysadmin }
+}

package/composables/tenant/useTenant.ts

@@ -0,0 +1,38 @@
+import { setMyActiveTenant } from '@core/sdk/client'
+
+/**
+ * Single source of truth for tenant context.
+ *
+ * - **Read**: ``tenantId`` is a reactive computed derived from the route. Tenant-scoped
+ *   routes carry the id as ``route.params.tenant`` (``/[tenant]/...``); sysadmin admin
+ *   routes carry it as ``route.params.tenant_id`` (``/sysadmin/tenants/[tenant_id]/...``).
+ *   Both shapes resolve to the same tenant context so composables and components that
+ *   depend on ``useTenant()`` work transparently in either place.
+ * - **Write**: ``setTenant(id)`` navigates to the same route with the new ``tenant``
+ *   param. Only valid on tenant-scoped routes — calling it from a sysadmin route would
+ *   break the URL shape.
+ */
+export function useTenant() {
+  const route = useRoute()
+  const router = useRouter()
+  const queryCache = useQueryCache()
+
+  const tenantId = computed(
+    () => (route.params.tenant as string | undefined) ?? (route.params.tenant_id as string | undefined),
+  )
+
+  async function setTenant(id: string) {
+    if (id === tenantId.value) return
+
+    await setMyActiveTenant({ composable: '$fetch', body: { tenant_id: id } })
+    await queryCache.invalidateQueries()
+
+    router.replace({
+      name: route.name!,
+      params: { ...route.params, tenant: id },
+      query: route.query,
+    })
+  }
+
+  return { tenantId, setTenant }
+}

package/composables/tenant/useTenantMemberships.ts

@@ -0,0 +1,15 @@
+import { getMyTenants, type MyTenantsResponse } from '@core/sdk/client'
+import { minutesToMilliseconds } from 'date-fns'
+
+export const useTenantMemberships = defineQuery(() => {
+  const { data, isPending: tenantsAreLoading } = useQuery<MyTenantsResponse>({
+    key: () => ['my-tenants'],
+    staleTime: minutesToMilliseconds(5),
+    query: async () => await getMyTenants({ composable: '$fetch' }),
+  })
+
+  const tenants = computed(() => data.value?.tenants)
+  const isSysAdmin = computed(() => data.value?.is_sys_admin ?? false)
+
+  return { tenants, tenantsAreLoading, isSysAdmin }
+})

package/composables/tenant/useTenantPath.ts

@@ -0,0 +1,20 @@
+/**
+ * Wraps ``useLocalePath()`` to auto-inject the current tenant ID from the route.
+ *
+ * Usage:
+ * ```ts
+ * const tenantPath = useTenantPath()
+ * router.push(tenantPath('/service/agents'))
+ * // → /{locale}/{tenantId}/service/agents
+ * ```
+ */
+export function useTenantPath() {
+  const localePath = useLocalePath()
+  const { tenantId } = useTenant()
+
+  return (path: string) => {
+    const id = tenantId.value
+    if (!id) return localePath(path)
+    return localePath(`/${id}${path}`)
+  }
+}

package/composables/tenant/useTenantPolling.ts

@@ -0,0 +1,30 @@
+import { getMyActiveTenant } from '@core/sdk/client'
+import { useIntervalFn } from '@vueuse/core'
+
+/**
+ * Polls the backend active tenant every 30 seconds and detects mismatches
+ * with the current URL tenant. Used exclusively on the OpenWebUI page where
+ * the iframe relies on the backend's active tenant.
+ */
+export function useTenantPolling() {
+  const { tenantId } = useTenant()
+  const mismatchDetected = ref(false)
+  const backendTenantId = ref<string | undefined>()
+  const backendTenantName = ref<string | undefined>()
+
+  async function poll() {
+    try {
+      const activeTenant = await getMyActiveTenant({ composable: '$fetch' })
+      backendTenantId.value = activeTenant?.id
+      backendTenantName.value = activeTenant?.name
+      mismatchDetected.value = !!(tenantId.value && activeTenant?.id && tenantId.value !== activeTenant.id)
+    }
+    catch {
+      // Ignore polling errors
+    }
+  }
+
+  useIntervalFn(poll, 30_000, { immediateCallback: true })
+
+  return { mismatchDetected, backendTenantId, backendTenantName }
+}

package/composables/tenant/useTenantReady.ts

@@ -0,0 +1,12 @@
+/**
+ * Returns a computed boolean that is ``true`` when the tenant is available
+ * and (optionally) when the given route params have resolved.
+ *
+ * Replaces the repeated ``computed(() => !!tenantId.value)`` and
+ * ``computed(() => isRouteReady.value && !!tenantId.value)`` pattern.
+ */
+export function useTenantReady(...routeParams: string[]) {
+  const { tenantId } = useTenant()
+  const isRouteReady = routeParams.length ? useRouteReady(...routeParams) : ref(true)
+  return computed(() => isRouteReady.value && !!tenantId.value)
+}

package/composables/theme/useDarkMode.ts

@@ -0,0 +1,5 @@
+import { createSharedComposable, useDark } from '@vueuse/core'
+
+// Shared across all callers so DOM / localStorage / prefers-color-scheme
+// listeners are installed exactly once and toggles propagate synchronously.
+export const useDarkMode = createSharedComposable(() => useDark({ storageKey: 'dark' }))