@swiss-ai-hub/web 0.321.0 → 0.323.0

package/components/UserFiles/Preview.vue

@@ -0,0 +1,110 @@
+<template>
+  <div class="flex h-full flex-col gap-3">
+    <div class="flex items-center justify-between gap-2">
+      <p class="truncate font-semibold">
+        {{ entry.name }}
+      </p>
+      <div class="flex gap-1">
+        <Button
+          v-tooltip.bottom="t('userFiles.actions.download')"
+          icon="pi pi-download"
+          size="small"
+          text
+          @click="download(entry.path, entry.name)"
+        />
+        <Button
+          v-tooltip.bottom="t('userFiles.actions.close')"
+          icon="pi pi-times"
+          size="small"
+          text
+          @click="emit('close')"
+        />
+      </div>
+    </div>
+    <ProgressBar
+      v-if="isLoading"
+      mode="indeterminate"
+      style="height: 2px"
+    />
+    <img
+      v-else-if="kind === 'image' && objectUrl"
+      :src="objectUrl"
+      :alt="entry.name"
+      class="max-h-[70vh] self-start rounded border border-surface-200 object-contain dark:border-surface-700"
+    >
+    <iframe
+      v-else-if="kind === 'pdf' && objectUrl"
+      :src="objectUrl"
+      :title="entry.name"
+      class="h-[70vh] w-full rounded border border-surface-200 dark:border-surface-700"
+    />
+    <pre
+      v-else-if="kind === 'text'"
+      class="max-h-[70vh] overflow-auto whitespace-pre-wrap rounded border border-surface-200 bg-surface-0 p-3 text-xs dark:border-surface-700 dark:bg-surface-900"
+    >{{ text }}</pre>
+    <p
+      v-else
+      class="text-sm text-surface-500"
+    >
+      {{ t('userFiles.preview.unavailable') }}
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { FileEntryDto } from '@core/sdk/client'
+
+const props = defineProps<{ entry: FileEntryDto }>()
+const emit = defineEmits<{ close: [] }>()
+const { t } = useI18n()
+const { fetchBlob, download } = useUserFileContent()
+
+const IMAGE_EXTENSIONS = new Set(['png', 'jpg', 'jpeg', 'gif', 'webp'])
+const TEXT_EXTENSIONS = new Set(['txt', 'md', 'csv', 'json', 'log', 'py', 'yaml', 'yml', 'xml', 'html', 'js', 'ts', 'sql'])
+const MAX_TEXT_BYTES = 2 * 1024 * 1024
+
+const objectUrl = ref<string | null>(null)
+const text = ref('')
+const isLoading = ref(false)
+
+const kind = computed(() => {
+  const extension = props.entry.name.split('.').pop()?.toLowerCase() ?? ''
+  if (IMAGE_EXTENSIONS.has(extension)) return 'image'
+  if (extension === 'pdf') return 'pdf'
+  if (TEXT_EXTENSIONS.has(extension) && (props.entry.size ?? 0) <= MAX_TEXT_BYTES) return 'text'
+  return 'none'
+})
+
+// Only the latest load may touch the preview: one overtaken by another selection or by unmounting is dropped.
+let loadGeneration = 0
+
+const revokeObjectUrl = () => {
+  if (objectUrl.value) URL.revokeObjectURL(objectUrl.value)
+  objectUrl.value = null
+}
+
+const load = async () => {
+  const generation = ++loadGeneration
+  const previewKind = kind.value
+  revokeObjectUrl()
+  text.value = ''
+  isLoading.value = previewKind !== 'none'
+  if (previewKind === 'none') return
+  try {
+    const blob = await fetchBlob(props.entry.path)
+    const content = previewKind === 'text' ? await blob.text() : null
+    if (generation !== loadGeneration) return
+    if (content === null) objectUrl.value = URL.createObjectURL(blob)
+    else text.value = content
+  }
+  finally {
+    if (generation === loadGeneration) isLoading.value = false
+  }
+}
+
+watch(() => props.entry.path, load, { immediate: true })
+onBeforeUnmount(() => {
+  loadGeneration++
+  revokeObjectUrl()
+})
+</script>

package/composables/auth/useAuth.ts

@@ -1,13 +1,29 @@
 export const useAuth = () => {
+  // The UserManager in plugins/oidc-client.ts is built once at bootstrap, so the
+  // locale baked into its redirect URIs is whatever the app started in. Switching
+  // language is a client-side route push, so those URIs go stale and a round trip
+  // through Keycloak lands back on the bootstrap locale -- which @nuxtjs/i18n then
+  // writes into the `i18n_redirected` cookie, destroying the user's choice.
+  // Passing the URIs per call keeps them tied to the locale that is live *now*.
+  const localeRedirectUri = (path: string) => {
+    const { $i18n } = useNuxtApp()
+    return `${globalThis.location.origin}/${$i18n.locale.value}/auth/${path}`
+  }
+
   const login = (idpHint?: string) => {
-    const { $auth } = useNuxtApp()
+    const { $auth, $i18n } = useNuxtApp()
     const extraQueryParams = idpHint ? { kc_idp_hint: idpHint } : {}
-    $auth.signinRedirect({ extraQueryParams })
+    $auth.signinRedirect({
+      extraQueryParams,
+      redirect_uri: localeRedirectUri('callback'),
+      // Renders Keycloak's own login page in the user's language.
+      ui_locales: $i18n.locale.value,
+    })
   }
 
   const logout = async () => {
     const { $auth } = useNuxtApp()
-    await $auth.signoutRedirect()
+    await $auth.signoutRedirect({ post_logout_redirect_uri: localeRedirectUri('login') })
   }
 
   const getUser = async () => {

package/composables/document/useDocumentIngestionPolling.ts

@@ -0,0 +1,64 @@
+import { useDocumentVisibility, useIntervalFn } from '@vueuse/core'
+
+import type { DocumentDto } from '@core/sdk/client'
+import type { MaybeRefOrGetter } from 'vue'
+
+// Ingestion runs asynchronously in Dagster and nothing pushes its completion to the UI, so a freshly uploaded
+// document would stay "Processing" until the next focus or remount. Polling runs only while a row on the page is
+// still pending and the tab is visible, so a fully ingested page costs nothing.
+const INGESTION_POLL_INTERVAL_MS = 5_000
+
+export function useDocumentIngestionPolling(
+  documents: MaybeRefOrGetter<DocumentDto[]>,
+  refetch: () => Promise<unknown>,
+  isFetching: MaybeRefOrGetter<boolean>,
+) {
+  const route = useRoute()
+  const { tenantId } = useTenant()
+  const queryCache = useQueryCache()
+  const visibility = useDocumentVisibility()
+  const { isScheduled } = useScheduledDeletions(
+    () => route.params.db as string,
+    () => route.params.namespace as string,
+  )
+
+  // A row being deleted never becomes ingested and its cleanup can take hours, so it must not keep the page polling.
+  const pendingIds = computed(() => new Set(
+    toValue(documents)
+      .filter(document => !document.is_ingested && !isScheduled(document.id))
+      .map(document => document.id),
+  ))
+
+  // refetch() aborts the request still in flight, so a list slower than the interval would never land. Skipping the
+  // tick lets it finish instead.
+  const { pause, resume } = useIntervalFn(() => {
+    if (!toValue(isFetching)) {
+      refetch()
+    }
+  }, INGESTION_POLL_INTERVAL_MS, { immediate: false })
+
+  watch(
+    [() => pendingIds.value.size > 0, visibility],
+    ([hasPendingDocuments, visibilityState]) => {
+      if (hasPendingDocuments && visibilityState === 'visible') {
+        resume()
+      }
+      else {
+        pause()
+      }
+    },
+    { immediate: true },
+  )
+
+  // The detail, nodes and summary queries of a document share its key prefix and are cached for minutes, so an open
+  // detail view would keep showing the pre-ingestion state without this. A document that left the page before we saw
+  // it finish is refreshed too; invalidating one that is gone is harmless.
+  watch(pendingIds, (currentPendingIds, previousPendingIds) => {
+    const settledIds = [...(previousPendingIds ?? [])].filter(documentId => !currentPendingIds.has(documentId))
+    for (const documentId of settledIds) {
+      queryCache.invalidateQueries({
+        key: ['tenant', tenantId.value, 'knowledge', 'databases', route.params.db as string, 'namespaces', route.params.namespace as string, 'documents', documentId],
+      })
+    }
+  })
+}

package/composables/document/useDocuments.ts

@@ -88,11 +88,14 @@ export const useDocuments = defineQuery(() => {
   // Only show loading on initial load, not during refetch/search when we have data
   const isLoading = computed(() => documentsQuery.asyncStatus.value === 'loading' && !documentsQuery.state.value?.data)
   const isFetching = computed(() => documentsQuery.asyncStatus.value === 'loading')
+  // Only a changed search, sort or page shows the previous results as placeholder; a background refetch does not.
+  const isSearching = computed(() => isFetching.value && documentsQuery.isPlaceholderData.value)
 
   return {
     documents,
     isLoading,
     isFetching,
+    isSearching,
     pagination: paginationMeta,
     currentPage,
     pageSize,

package/composables/document/useSourcePipelines.ts

@@ -0,0 +1,23 @@
+import { getSourcePipelines, type SourcePipelineDto } from '@core/sdk/client'
+import { minutesToMilliseconds } from 'date-fns'
+
+export const useSourcePipelines = defineQuery(() => {
+  const { tenantId } = useTenant()
+
+  const { data: sourcePipelines, isPending: sourcePipelinesAreLoading } = useQuery<SourcePipelineDto[]>({
+    key: () => ['tenant', tenantId.value, 'source-pipelines'],
+    staleTime: minutesToMilliseconds(5),
+    enabled: useTenantReady(),
+    query: async () => {
+      return await getSourcePipelines({
+        composable: '$fetch',
+        path: { tenant_id: tenantId.value! },
+      })
+    },
+  })
+
+  return {
+    sourcePipelines,
+    sourcePipelinesAreLoading,
+  }
+})

package/composables/document/useUpdateDatabaseSource.ts

@@ -0,0 +1,21 @@
+import { updateDatabaseSource, type UpdateDatabaseSourceRequest } from '@core/sdk/client'
+
+export const useUpdateDatabaseSource = defineMutation(() => {
+  const queryCache = useQueryCache()
+  const { tenantId } = useTenant()
+
+  return useMutation({
+    mutation: (params: { database: string, tenantId: string, request: UpdateDatabaseSourceRequest }) =>
+      updateDatabaseSource({
+        composable: '$fetch',
+        body: params.request,
+        path: {
+          tenant_id: params.tenantId,
+          database: params.database,
+        },
+      }),
+    onSuccess: () => {
+      queryCache.invalidateQueries({ key: ['tenant', tenantId.value, 'knowledge'] })
+    },
+  })
+})

package/composables/event/useEventComponent.ts

@@ -31,7 +31,30 @@ import {
   EventDisplayBaseRetrieveMemoryEvent,
   EventDisplayBaseStoreMemoryEvent,
   EventDisplayAddMemoryToChatHistoryEvent,
+  EventDisplayContextComposedEvent,
   EventDisplayMetaQuestionDetectedEvent,
+  EventDisplayContextualizeConversationEvent,
+  EventDisplayConversationContextualizedEvent,
+  EventDisplayComposeContextEvent,
+  EventDisplayCompleteConversationEvent,
+  EventDisplayNotAMetaQuestionEvent,
+  EventDisplayRecallMemoryEvent,
+  EventDisplayMemoryRecalledEvent,
+  EventDisplayMemoryStorageRequestedEvent,
+  EventDisplaySearchKnowledgeEvent,
+  EventDisplayKnowledgeSearchedEvent,
+  EventDisplayReadAttachedFilesEvent,
+  EventDisplayAttachedFilesReadEvent,
+  EventDisplayAttachedFileEvent,
+  EventDisplayRunToolLoopEvent,
+  EventDisplayToolLoopIterationEvent,
+  EventDisplayToolCallsDecidedEvent,
+  EventDisplayToolCallApprovedEvent,
+  EventDisplayToolResultEvent,
+  EventDisplayToolLoopStatusEvent,
+  EventDisplayToolLoopCondensedEvent,
+  EventDisplayToolLoopFinishedEvent,
+  EventDisplaySandboxFileDisplayedEvent,
 } from '#components'
 
 export const useEventComponent = () => {
@@ -74,7 +97,30 @@ export const useEventComponent = () => {
       BaseRetrieveMemoryEvent: EventDisplayBaseRetrieveMemoryEvent,
       BaseStoreMemoryEvent: EventDisplayBaseStoreMemoryEvent,
       AddMemoryToChatHistoryEvent: EventDisplayAddMemoryToChatHistoryEvent,
+      ContextComposedEvent: EventDisplayContextComposedEvent,
       MetaQuestionDetectedEvent: EventDisplayMetaQuestionDetectedEvent,
+      ContextualizeConversationEvent: EventDisplayContextualizeConversationEvent,
+      ConversationContextualizedEvent: EventDisplayConversationContextualizedEvent,
+      ComposeContextEvent: EventDisplayComposeContextEvent,
+      CompleteConversationEvent: EventDisplayCompleteConversationEvent,
+      NotAMetaQuestionEvent: EventDisplayNotAMetaQuestionEvent,
+      RecallMemoryEvent: EventDisplayRecallMemoryEvent,
+      MemoryRecalledEvent: EventDisplayMemoryRecalledEvent,
+      MemoryStorageRequestedEvent: EventDisplayMemoryStorageRequestedEvent,
+      SearchKnowledgeEvent: EventDisplaySearchKnowledgeEvent,
+      KnowledgeSearchedEvent: EventDisplayKnowledgeSearchedEvent,
+      ReadAttachedFilesEvent: EventDisplayReadAttachedFilesEvent,
+      AttachedFilesReadEvent: EventDisplayAttachedFilesReadEvent,
+      AttachedFileEvent: EventDisplayAttachedFileEvent,
+      RunToolLoopEvent: EventDisplayRunToolLoopEvent,
+      ToolLoopIterationEvent: EventDisplayToolLoopIterationEvent,
+      ToolCallsDecidedEvent: EventDisplayToolCallsDecidedEvent,
+      ToolCallApprovedEvent: EventDisplayToolCallApprovedEvent,
+      ToolResultEvent: EventDisplayToolResultEvent,
+      ToolLoopStatusEvent: EventDisplayToolLoopStatusEvent,
+      ToolLoopCondensedEvent: EventDisplayToolLoopCondensedEvent,
+      ToolLoopFinishedEvent: EventDisplayToolLoopFinishedEvent,
+      SandboxFileDisplayedEvent: EventDisplaySandboxFileDisplayedEvent,
     }
     const exact_match = mapping[event.event._event_name]
     if (exact_match) {

package/composables/form/useFormKitTransform.ts

@@ -268,6 +268,8 @@ const EXCLUDED_FIELDS = new Set([
   'nullable', // Wrapper-level signal for the transform; never a FormKit/PrimeVue prop
   'defaultEnabled', // Wrapper-level signal (initial nullable-toggle state); never a FormKit prop
   'default_enabled', // snake_case form of the above
+  'toggleLabel', // Rendered on the synthetic nullable toggle, never on the element itself
+  'toggleHelp', // Rendered on the synthetic nullable toggle, never on the element itself
   // Backend serialises the Pydantic default into element.value (form duality). FormKit pushes
   // schema `value` up to the parent v-model on input registration, which would clobber the
   // loaded data with the backend default. Defaults belong in data, seeded via seedFormDefaults.
@@ -286,6 +288,15 @@ function buildNodeProperties(
     return buildLocaleInputProperties(element, label, locale)
   }
 
+  // Markup, not an input: an `$el` element carries no formkit type, and giving it one anyway
+  // emitted `$formkit: undefined` alongside the tag, which FormKit rendered as an empty box.
+  const tag = element.$el ?? element.el
+  if (!formkitType && tag) {
+    const markup: Record<string, unknown> = { $el: tag as string }
+    if (element.attrs) markup.attrs = element.attrs
+    return markup
+  }
+
   // `preserve: true` keeps the input's value in the form context when an `if:`
   // condition (nullable toggle or backend-supplied `condition_if`) unmounts it.
   const cleanNode: Record<string, unknown> = { $formkit: formkitType, preserve: true }
@@ -362,10 +373,13 @@ function buildNullableToggleNode(
   element: FormElement,
   label: string | undefined,
   help: string | undefined,
+  toggleId: string | undefined,
+  locale: string,
 ): Record<string, unknown> {
   const fieldName = element.name as string
-  const toggleId = nullableToggleId(element)
   const gatingCondition = element.if as string | undefined
+  const toggleLabel = getLocalizedString(element.toggleLabel, locale) ?? (label ? `Enable ${label}` : 'Enable')
+  const toggleHelp = getLocalizedString(element.toggleHelp, locale) ?? help
   return {
     $formkit: 'primeCheckbox',
     // `preserve: true` for the same reason the gated input itself carries it: when this toggle's own
@@ -373,10 +387,13 @@ function buildNullableToggleNode(
     // state seeded from the saved value is lost — an already-configured field then remounts reading "off".
     preserve: true,
     name: nullableToggleName(fieldName),
-    id: toggleId,
-    key: toggleId,
-    label: label ? `Enable ${label}` : 'Enable',
-    ...(help ? { help } : {}),
+    // Repeater rows share one schema object, so a fixed id would register every row's toggle under the
+    // same key in FormKit's single global node registry. Those rows pass no id and let FormKit assign a
+    // unique one per instance; they gate on row data instead of `$get`, so nothing looks the id up.
+    ...(toggleId ? { id: toggleId } : {}),
+    key: toggleId ?? nullableToggleName(fieldName),
+    label: toggleLabel,
+    ...(toggleHelp ? { help: toggleHelp } : {}),
     ...(gatingCondition ? { if: gatingCondition } : {}),
     binary: true,
   }
@@ -385,16 +402,19 @@ function buildNullableToggleNode(
 /**
  * `help` is only supplied for groups: a group's own node renders no help, so the toggle is the
  * only place to hang it. Nullable leaves already render their help on the input itself — passing
- * it here too would print the same sentence twice.
+ * it here too would print the same sentence twice. An element's own `toggleHelp` is meant for the
+ * toggle alone, so it is rendered there for leaves and groups alike.
  */
 function applyNullableToggle(
   element: FormElement,
   baseNode: FormKitSchemaNode | FormKitSchemaNode[],
   label: string | undefined,
+  toggleId: string | undefined,
+  locale: string,
   help?: string,
 ): FormKitSchemaNode[] {
   const nodeArray = Array.isArray(baseNode) ? baseNode : [baseNode]
-  return [buildNullableToggleNode(element, label, help) as FormKitSchemaNode, ...nodeArray]
+  return [buildNullableToggleNode(element, label, help, toggleId, locale) as FormKitSchemaNode, ...nodeArray]
 }
 
 function gateElement(element: FormElement, toggleCondition: string): FormElement {
@@ -406,6 +426,22 @@ function gateElement(element: FormElement, toggleCondition: string): FormElement
  * Handles groups specially by wrapping them in fieldsets when they have labels.
  * Skips repeater elements (they are handled separately).
  */
+/**
+ * Transforms an element's children, letting text through untouched.
+ *
+ * A child may be prose rather than another element — `$el` nodes carry their content that way and
+ * the schema takes a bare string there (see `buildFieldWarningNode`). Recursing into a string
+ * yielded nothing, so an element declaring text rendered as an empty tag.
+ */
+function transformChildren(
+  children: unknown,
+  transform: (child: FormElement) => FormKitSchemaNode | FormKitSchemaNode[],
+): FormKitSchemaNode[] {
+  if (!children) return []
+  const list = Array.isArray(children) ? children : [children]
+  return list.flatMap(child => (typeof child === 'string' ? child : transform(child as FormElement))) as FormKitSchemaNode[]
+}
+
 export function transformElementToSchema(
   element: FormElement,
   options: TransformOptions = {},
@@ -417,9 +453,7 @@ export function transformElementToSchema(
 
   const { locale = 'en', labelTransform, optionsResolver, fieldWarning } = options
 
-  const children = (element.children as FormElement[] || []).flatMap(
-    child => transformElementToSchema(child, options),
-  ) as FormKitSchemaNode[]
+  const children = transformChildren(element.children, child => transformElementToSchema(child, options))
 
   let label = getLocalizedString(element.label, locale)
   if (label && labelTransform) {
@@ -427,7 +461,8 @@ export function transformElementToSchema(
   }
 
   const isNullable = element.nullable === true
-  const toggleCondition = isNullable ? `$get(${nullableToggleId(element)}).value` : undefined
+  const toggleId = isNullable ? nullableToggleId(element) : undefined
+  const toggleCondition = isNullable ? `$get(${toggleId}).value` : undefined
 
   const warningText = fieldWarning?.(element)
   const warningNode = warningText ? buildFieldWarningNode(element, warningText) : undefined
@@ -436,7 +471,9 @@ export function transformElementToSchema(
     const gatedElement = isNullable ? gateElement(element, toggleCondition!) : element
     const groupNode = createGroupNode(gatedElement, children, label)
     if (!isNullable) return withFieldWarning(groupNode, warningNode, false)
-    const toggledNodes = applyNullableToggle(element, groupNode, label, getLocalizedString(element.help, locale))
+    const toggledNodes = applyNullableToggle(
+      element, groupNode, label, toggleId, locale, getLocalizedString(element.help, locale),
+    )
     return withFieldWarning(toggledNodes, warningNode, true)
   }
 
@@ -444,7 +481,7 @@ export function transformElementToSchema(
   if (children.length > 0) cleanNode.children = children
   if (isNullable) {
     cleanNode.if = combineConditions(toggleCondition!, element.if as string | undefined)
-    const toggledNodes = applyNullableToggle(element, cleanNode as FormKitSchemaNode, label)
+    const toggledNodes = applyNullableToggle(element, cleanNode as FormKitSchemaNode, label, toggleId, locale)
     return withFieldWarning(toggledNodes, warningNode, true)
   }
 
@@ -478,33 +515,47 @@ function buildLeafNodeForRepeater(
 
 /**
  * Transforms a form element for use inside a repeater's children schema.
+ *
+ * A nullable element here gates on its own row's data (`$__<field>__enabled`) rather than on
+ * `$get(<id>).value` as it does outside a repeater. Every row renders the one shared
+ * `childrenSchema` object, so a schema-level id is the same string in all of them — and FormKit
+ * resolves `$get` through a single global registry keyed by that id, which holds one node for the
+ * whole repeater (the last row to mount; a row unmounting deletes the key outright). The gate then
+ * answered for an arbitrary row instead of the one whose checkbox was clicked, so ticking "Enable X"
+ * mounted nothing. A data reference resolves against the `:data="modelValue[index]"` each row is
+ * rendered with, which is per row by construction. `dataPath` is the dotted prefix of the enclosing
+ * groups, since a nested group's toggle is seeded inside that group's object, not at the row root.
  */
 export function transformElementForRepeater(
   element: FormElement,
   locale = 'en',
+  dataPath = '',
 ): FormKitSchemaNode | FormKitSchemaNode[] {
   if (!element) return []
 
   const formkitType = getFormkitType(element)
+  const childPath = formkitType === 'group' ? `${dataPath}${element.name as string}.` : dataPath
   const children = (element.children as FormElement[] || []).flatMap(
-    child => transformElementForRepeater(child, locale),
+    child => transformElementForRepeater(child, locale, childPath),
   ) as FormKitSchemaNode[]
 
   const label = getLocalizedString(element.label, locale)
   const isNullable = element.nullable === true
-  const toggleCondition = isNullable ? `$get(${nullableToggleId(element)}).value` : undefined
+  const toggleCondition = isNullable
+    ? `$${dataPath}${nullableToggleName(element.name as string)}`
+    : undefined
 
   if (formkitType === 'group') {
     const gatedElement = isNullable ? gateElement(element, toggleCondition!) : element
     const groupNode = createGroupNode(gatedElement, children, label)
     if (!isNullable) return groupNode
-    return applyNullableToggle(element, groupNode, label, getLocalizedString(element.help, locale))
+    return applyNullableToggle(element, groupNode, label, undefined, locale, getLocalizedString(element.help, locale))
   }
 
   const cleanNode = buildLeafNodeForRepeater(element, formkitType, label, locale, children)
   if (isNullable) {
     cleanNode.if = combineConditions(toggleCondition!, element.if as string | undefined)
-    return applyNullableToggle(element, cleanNode as FormKitSchemaNode, label)
+    return applyNullableToggle(element, cleanNode as FormKitSchemaNode, label, undefined, locale)
   }
 
   return cleanNode as FormKitSchemaNode

package/composables/openwebui/useOpenWebuiDisclaimer.ts

@@ -0,0 +1,22 @@
+import type { Ref } from 'vue'
+
+export function useOpenWebuiDisclaimer(iframe: Ref<HTMLIFrameElement | null>, text: Ref<string>) {
+  const config = useRuntimeConfig()
+  const origin = new URL(config.public.webui.url).origin
+  const type = 'aihub:chat-disclaimer'
+
+  function sendDisclaimer() {
+    iframe.value?.contentWindow?.postMessage({ type, version: 1, text: text.value }, origin)
+  }
+
+  function onMessage(event: MessageEvent) {
+    if (event.origin !== origin || event.source !== iframe.value?.contentWindow) return
+    if (event.data?.type === `${type}:ready` && event.data.version === 1) sendDisclaimer()
+  }
+
+  watch(text, sendDisclaimer)
+  onMounted(() => window.addEventListener('message', onMessage))
+  onBeforeUnmount(() => window.removeEventListener('message', onMessage))
+
+  return { sendDisclaimer }
+}

package/composables/suite/useApps.ts

@@ -2,19 +2,27 @@ import type { ServiceDto } from '@core/sdk/client'
 import type { MenuItem } from 'primevue/menuitem'
 
 export const useApps = () => {
-  const { suite, suiteIsLoading } = useSuite()
+  const { suite, suiteError, suiteIsLoading } = useSuite()
   const router = useRouter()
   const tenantPath = useTenantPath()
 
   const apps = computed<MenuItem>(() => {
-    const suiteApps = suite.value?.services.map((service: ServiceDto) => ({
+    // `services` is non-optional on SuiteDto, so the type system cannot catch a
+    // cached value that is not actually a SuiteDto. It used to be reachable: a
+    // proxy answering 200 text/html for a downed API landed here as a raw HTML
+    // string and `.services.map` threw inside this computed, taking down every
+    // page on the default layout. The SDK guard now rejects that response; this
+    // stays as the last line of defence.
+    const services = Array.isArray(suite.value?.services) ? suite.value.services : []
+
+    const suiteApps = 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,
@@ -27,5 +35,6 @@ export const useApps = () => {
   return {
     apps,
     appsLoading: suiteIsLoading,
+    appsError: suiteError,
   }
 }

package/composables/suite/useSuite.ts

@@ -6,6 +6,7 @@ export const useSuite = defineQuery(() => {
 
   const {
     data: suite,
+    error: suiteError,
     isPending: suiteIsLoading,
   } = useQuery<SuiteDto>({
     key: () => ['tenant', tenantId.value, 'suite'],
@@ -21,6 +22,7 @@ export const useSuite = defineQuery(() => {
 
   return {
     suite,
+    suiteError,
     suiteIsLoading,
   }
 })

package/composables/support/useIncidentAvailability.ts

@@ -0,0 +1,17 @@
+import { getIncidentAvailability } from '@core/sdk/client'
+import { hoursToMilliseconds } from 'date-fns'
+
+// Asked once per app load, and answered 200 on every deployment: the form endpoint itself answers
+// 404 where reporting is not configured, and the shell's global error handler would toast that at
+// a user who has not clicked anything. The button is drawn only where it leads somewhere.
+export const useIncidentAvailability = defineQuery(() => {
+  const { data } = useQuery({
+    key: () => ['incident-availability'],
+    staleTime: hoursToMilliseconds(1),
+    query: async () => await getIncidentAvailability({ composable: '$fetch' }),
+  })
+
+  const incidentReportingIsAvailable = computed(() => data.value?.enabled === true)
+
+  return { incidentReportingIsAvailable }
+})