@swiss-ai-hub/web 0.321.0 → 0.323.0

package/components/Event/Display/RecallMemoryEvent.vue

@@ -0,0 +1,27 @@
+<template>
+  <EventDisplayBase
+    :event="event"
+    :thread="thread"
+    icon="mdi:brain"
+  >
+    <EventDisplayPartFacts :facts="facts" />
+  </EventDisplayBase>
+</template>
+
+<script setup lang="ts">
+import type { ContextualizedAgentEvent, RecallMemoryEvent, ThreadDto } from '@core/sdk/client'
+import type { EventFact } from '@core/types/EventFact'
+
+const props = defineProps<{
+  event: ContextualizedAgentEvent & { event: RecallMemoryEvent }
+  thread: ThreadDto
+}>()
+
+const { t } = useI18n()
+
+const facts = computed<EventFact[]>(() => [
+  { label: t('event.capability.query'), value: props.event.event.query },
+  { label: t('event.capability.namespaces'), value: props.event.event.org_memory_namespaces ?? [] },
+  { label: t('event.capability.toolCall'), value: props.event.event.tool_call_id },
+])
+</script>

package/components/Event/Display/RunToolLoopEvent.vue

@@ -0,0 +1,34 @@
+<template>
+  <EventDisplayBase
+    :event="event"
+    :thread="thread"
+    icon="mynaui:tool"
+  >
+    <EventDisplayPartFacts :facts="facts" />
+  </EventDisplayBase>
+</template>
+
+<script setup lang="ts">
+import type { ContextualizedAgentEvent, RunToolLoopEvent, ThreadDto } from '@core/sdk/client'
+import type { EventFact } from '@core/types/EventFact'
+
+const props = defineProps<{
+  event: ContextualizedAgentEvent & { event: RunToolLoopEvent }
+  thread: ThreadDto
+}>()
+
+const { t } = useI18n()
+
+const facts = computed<EventFact[]>(() => [
+  { label: t('event.toolLoop.loop'), value: props.event.event.loop },
+  { label: t('event.toolLoop.mode'), value: t(`event.toolLoop.modes.${props.event.event.mode ?? 'answer'}`) },
+  { label: t('event.toolLoop.narrowedTools'), value: props.event.event.tools ?? null },
+  { label: t('event.toolLoop.maxIterations'), value: props.event.event.max_iterations },
+  { label: t('event.capability.historyMessages'), value: (props.event.event.history ?? []).length },
+  { label: t('event.capability.files'), value: (props.event.event.files ?? []).map(file => file.filename) },
+  {
+    label: t('event.capability.references'),
+    value: (props.event.event.knowledge_references ?? []).map(reference => `${reference.database} / ${reference.namespace}`),
+  },
+])
+</script>

package/components/Event/Display/SandboxFileDisplayedEvent.vue

@@ -0,0 +1,46 @@
+<template>
+  <EventDisplayBase
+    :event="event"
+    :thread="thread"
+    icon="mdi:file-eye-outline"
+  >
+    <dl class="grid grid-cols-[max-content_1fr] gap-x-4 gap-y-1 text-sm">
+      <dt class="text-surface-500">
+        {{ t('event.sandboxFileDisplayed.file') }}
+      </dt>
+      <dd class="break-all font-medium">
+        {{ event.event.filename }}
+      </dd>
+      <dt class="text-surface-500">
+        {{ t('event.sandboxFileDisplayed.type') }}
+      </dt>
+      <dd>{{ event.event.content_type }}</dd>
+      <dt class="text-surface-500">
+        {{ t('event.sandboxFileDisplayed.size') }}
+      </dt>
+      <dd>{{ size }}</dd>
+      <dt class="text-surface-500">
+        {{ t('event.sandboxFileDisplayed.path') }}
+      </dt>
+      <dd class="break-all font-mono text-xs">
+        {{ event.event.path }}
+      </dd>
+    </dl>
+  </EventDisplayBase>
+</template>
+
+<script setup lang="ts">
+import type { SandboxFileDisplayedEvent, ThreadDto, ContextualizedAgentEvent } from '@core/sdk/client'
+
+const props = defineProps<{
+  event: ContextualizedAgentEvent & { event: SandboxFileDisplayedEvent }
+  thread: ThreadDto
+}>()
+
+const { t, n } = useI18n()
+
+const size = computed<string>(() => {
+  const bytes = props.event.event.size
+  return bytes < 1024 ? `${bytes} B` : `${n(Math.round(bytes / 102.4) / 10)} KB`
+})
+</script>

package/components/Event/Display/SearchKnowledgeEvent.vue

@@ -0,0 +1,31 @@
+<template>
+  <EventDisplayBase
+    :event="event"
+    :thread="thread"
+    icon="mage:search"
+  >
+    <EventDisplayPartFacts :facts="facts" />
+  </EventDisplayBase>
+</template>
+
+<script setup lang="ts">
+import type { ContextualizedAgentEvent, SearchKnowledgeEvent, ThreadDto } from '@core/sdk/client'
+import type { EventFact } from '@core/types/EventFact'
+
+const props = defineProps<{
+  event: ContextualizedAgentEvent & { event: SearchKnowledgeEvent }
+  thread: ThreadDto
+}>()
+
+const { t } = useI18n()
+
+const facts = computed<EventFact[]>(() => [
+  { label: t('event.capability.query'), value: props.event.event.query },
+  {
+    label: t('event.capability.references'),
+    value: (props.event.event.references ?? []).map(reference => `${reference.database} / ${reference.namespace}`),
+  },
+  { label: t('event.capability.citeSources'), value: t(props.event.event.cite_sources ? 'event.parts.yes' : 'event.parts.no') },
+  { label: t('event.capability.toolCall'), value: props.event.event.tool_call_id },
+])
+</script>

package/components/Event/Display/ToolCallApprovedEvent.vue

@@ -0,0 +1,27 @@
+<template>
+  <EventDisplayBase
+    :event="event"
+    :thread="thread"
+    icon="mynaui:tool"
+  >
+    <EventDisplayPartFacts :facts="facts" />
+  </EventDisplayBase>
+</template>
+
+<script setup lang="ts">
+import type { ContextualizedAgentEvent, ThreadDto, ToolCallApprovedEvent } from '@core/sdk/client'
+import type { EventFact } from '@core/types/EventFact'
+
+const props = defineProps<{
+  event: ContextualizedAgentEvent & { event: ToolCallApprovedEvent }
+  thread: ThreadDto
+}>()
+
+const { t } = useI18n()
+
+const facts = computed<EventFact[]>(() => [
+  { label: t('event.toolLoop.tool'), value: props.event.event.name },
+  { label: t('event.toolLoop.kind'), value: t(`event.toolLoop.kinds.${props.event.event.kind}`) },
+  { label: t('event.capability.toolCall'), value: props.event.event.tool_call_id },
+])
+</script>

package/components/Event/Display/ToolCallsDecidedEvent.vue

@@ -0,0 +1,24 @@
+<template>
+  <EventDisplayBase
+    :event="event"
+    :thread="thread"
+    icon="mynaui:tool"
+  >
+    <div class="flex flex-col gap-6">
+      <EventDisplayPartToolCalls
+        :messages="event.event.state.messages"
+        :tool-call-ids="event.event.tool_call_ids"
+      />
+      <EventDisplayPartToolLoopState :state="event.event.state" />
+    </div>
+  </EventDisplayBase>
+</template>
+
+<script setup lang="ts">
+import type { ContextualizedAgentEvent, ThreadDto, ToolCallsDecidedEvent } from '@core/sdk/client'
+
+defineProps<{
+  event: ContextualizedAgentEvent & { event: ToolCallsDecidedEvent }
+  thread: ThreadDto
+}>()
+</script>

package/components/Event/Display/ToolLoopCondensedEvent.vue

@@ -0,0 +1,31 @@
+<template>
+  <EventDisplayBase
+    :event="event"
+    :thread="thread"
+    icon="lucide:layers"
+  >
+    <EventDisplayPartFacts :facts="facts" />
+  </EventDisplayBase>
+</template>
+
+<script setup lang="ts">
+import type { ContextualizedAgentEvent, ThreadDto, ToolLoopCondensedEvent } from '@core/sdk/client'
+import type { EventFact } from '@core/types/EventFact'
+
+const props = defineProps<{
+  event: ContextualizedAgentEvent & { event: ToolLoopCondensedEvent }
+  thread: ThreadDto
+}>()
+
+const { t } = useI18n()
+
+const facts = computed<EventFact[]>(() => [
+  { label: t('event.toolLoop.loop'), value: props.event.event.loop },
+  {
+    label: t('event.toolLoop.tokens'),
+    value: `${props.event.event.tokens_before} → ${props.event.event.tokens_after}`,
+  },
+  { label: t('event.toolLoop.condensedResults'), value: props.event.event.condensed_results ?? 0 },
+  { label: t('event.toolLoop.condensedTurns'), value: props.event.event.condensed_turns ?? 0 },
+])
+</script>

package/components/Event/Display/ToolLoopFinishedEvent.vue

@@ -0,0 +1,49 @@
+<template>
+  <EventDisplayBase
+    :event="event"
+    :thread="thread"
+    icon="mynaui:tool"
+  >
+    <div class="flex flex-col gap-4">
+      <EventDisplayPartFacts :facts="facts" />
+      <Tag
+        v-if="event.event.stopped_early"
+        :value="t('event.toolLoop.stoppedEarly')"
+        severity="warn"
+        class="self-start"
+      />
+      <p
+        v-if="answer"
+        class="whitespace-pre-wrap rounded-xl bg-surface-50 p-3 text-sm dark:bg-surface-850"
+      >
+        {{ answer }}
+      </p>
+      <EventDisplayPartMessageList
+        v-if="(event.event.block ?? []).length > 0"
+        :messages="event.event.block ?? []"
+        :event="event"
+        :thread="thread"
+        :title="t('event.toolLoop.gathered')"
+      />
+    </div>
+  </EventDisplayBase>
+</template>
+
+<script setup lang="ts">
+import type { ContextualizedAgentEvent, ThreadDto, ToolLoopFinishedEvent } from '@core/sdk/client'
+import type { EventFact } from '@core/types/EventFact'
+
+const props = defineProps<{
+  event: ContextualizedAgentEvent & { event: ToolLoopFinishedEvent }
+  thread: ThreadDto
+}>()
+
+const { t } = useI18n()
+
+const answer = computed(() => props.event.event.answer?.output_messages?.at(-1)?.content)
+
+const facts = computed<EventFact[]>(() => [
+  { label: t('event.toolLoop.loop'), value: props.event.event.loop },
+  { label: t('event.toolLoop.gatheredMessages'), value: (props.event.event.block ?? []).length || null },
+])
+</script>

package/components/Event/Display/ToolLoopIterationEvent.vue

@@ -0,0 +1,18 @@
+<template>
+  <EventDisplayBase
+    :event="event"
+    :thread="thread"
+    icon="mynaui:tool"
+  >
+    <EventDisplayPartToolLoopState :state="event.event.state" />
+  </EventDisplayBase>
+</template>
+
+<script setup lang="ts">
+import type { ContextualizedAgentEvent, ThreadDto, ToolLoopIterationEvent } from '@core/sdk/client'
+
+defineProps<{
+  event: ContextualizedAgentEvent & { event: ToolLoopIterationEvent }
+  thread: ThreadDto
+}>()
+</script>

package/components/Event/Display/ToolLoopStatusEvent.vue

@@ -0,0 +1,27 @@
+<template>
+  <EventDisplayBase
+    :event="event"
+    :thread="thread"
+    icon="mynaui:tool"
+  >
+    <div class="flex items-center gap-2 text-sm">
+      <Icon
+        :name="event.event.done ? 'mage:check-circle' : 'mage:loading'"
+        class="size-4"
+      />
+      <span>{{ event.event.description }}</span>
+      <span class="text-xs text-surface-500 dark:text-surface-400">{{ t('event.toolLoop.loop') }}: {{ event.event.loop }}</span>
+    </div>
+  </EventDisplayBase>
+</template>
+
+<script setup lang="ts">
+import type { ContextualizedAgentEvent, ThreadDto, ToolLoopStatusEvent } from '@core/sdk/client'
+
+defineProps<{
+  event: ContextualizedAgentEvent & { event: ToolLoopStatusEvent }
+  thread: ThreadDto
+}>()
+
+const { t } = useI18n()
+</script>

package/components/Event/Display/ToolResultEvent.vue

@@ -0,0 +1,38 @@
+<template>
+  <EventDisplayBase
+    :event="event"
+    :thread="thread"
+    icon="mynaui:tool"
+  >
+    <div class="flex flex-col gap-4">
+      <div class="flex items-center gap-2">
+        <span class="font-semibold">{{ event.event.name }}</span>
+        <Tag
+          v-if="event.event.is_error"
+          :value="t('event.toolLoop.failed')"
+          severity="danger"
+        />
+        <span class="text-xs text-surface-500 dark:text-surface-400">{{ event.event.tool_call_id }}</span>
+      </div>
+      <pre class="max-h-96 overflow-auto whitespace-pre-wrap break-words rounded-xl bg-surface-50 p-3 text-xs dark:bg-surface-850">{{ event.event.content }}</pre>
+      <EventDisplayPartMessageList
+        v-if="(event.event.block ?? []).length > 0"
+        :messages="event.event.block ?? []"
+        :event="event"
+        :thread="thread"
+        :title="t('event.toolLoop.resultContext')"
+      />
+    </div>
+  </EventDisplayBase>
+</template>
+
+<script setup lang="ts">
+import type { ContextualizedAgentEvent, ThreadDto, ToolResultEvent } from '@core/sdk/client'
+
+defineProps<{
+  event: ContextualizedAgentEvent & { event: ToolResultEvent }
+  thread: ThreadDto
+}>()
+
+const { t } = useI18n()
+</script>

package/components/Event/List/EventList.vue

@@ -144,7 +144,7 @@ const { resolveComponentForEvent } = useEventComponent()
 
 const runNameFn = (run: RunStatistics) => run.agent.agent_config.name
 
-const getEventTimestamp = (event: AgentEventReadable): number =>
+const getEventTimestamp = (event: ContextualizedAgentEvent): number =>
   (event.event as { created_at?: number }).created_at ?? 0
 
 const sortedEvents = computed(() =>

package/components/FormKit/DynamicConfiguration.vue

@@ -4,7 +4,7 @@
       id="form"
       v-model="data"
       type="form"
-      :submit-label="t('common.actions.save')"
+      :submit-label="props.submitLabel ?? t('common.actions.save')"
       :submit-attrs="{
         inputClass: 'p-button p-component w-full',
       }"
@@ -32,6 +32,9 @@
         :max="rep.max"
         @update:model-value="setRepeaterData(rep.path, $event)"
       />
+
+      <!-- Inside the form so it lands above the submit button, which FormKit renders last. -->
+      <slot name="before-submit" />
     </FormKit>
   </div>
 </template>
@@ -64,6 +67,8 @@ const FIELD_WARNING_KEYS: Record<string, string> = {
 const props = defineProps<{
   form: FormkitElement[]
   initialData?: Record<string, unknown>
+  // Every caller so far is saving a configuration; the incident form is sending a report.
+  submitLabel?: string
 }>()
 
 // Clone so the form model never shares references with the Pinia-Colada cache: otherwise

package/components/FormKit/KnowledgeCollectionSelector.vue

@@ -0,0 +1,281 @@
+<template>
+  <div class="flex flex-col gap-1">
+    <MultiSelect
+      v-model="selectedKeys"
+      :input-id="inputId"
+      :options="groupedOptions"
+      option-group-label="label"
+      option-group-children="items"
+      option-label="displayName"
+      option-value="key"
+      :placeholder="placeholder ?? t('lib.knowledgeCollections.placeholder')"
+      :filter="filter"
+      :loading="isLoading"
+      :disabled="!hasAgent"
+      display="chip"
+      class="w-full"
+    >
+      <!-- PrimeVue 4.5 renders the chip-mode placeholder twice while loading with no options yet. -->
+      <template
+        v-if="currentValue.length === 0"
+        #value="{ placeholder: emptyLabel }"
+      >
+        {{ emptyLabel }}
+      </template>
+      <template #optiongroup="{ option }">
+        <div class="flex items-center gap-2">
+          <Icon
+            name="mage:database"
+            size="1.2em"
+          />
+          <span>{{ option.label }}</span>
+        </div>
+      </template>
+      <template #option="{ option }">
+        <div class="flex items-center gap-2">
+          <Icon
+            name="mage:folder"
+            size="1.2em"
+          />
+          <span>{{ option.displayName }}</span>
+        </div>
+      </template>
+    </MultiSelect>
+    <small class="text-surface-500">
+      {{ hint }}
+    </small>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { getAgentInstance, getDatabases } from '@core/sdk/client'
+
+import type { DatabaseDto } from '@core/sdk/client'
+import type { FormKitNode } from '@formkit/core'
+
+/**
+ * A collection is only addressable as a (database, collection) pair — the same name may exist in more
+ * than one database — so the form value is a list of pairs, the shape `RAGStartEvent.selected_namespaces`
+ * takes. PrimeVue selects on a primitive, hence the `database/collection` key used inside this component.
+ */
+interface BucketNamespacePair {
+  bucket_name: string
+  namespace_name: string
+}
+
+interface AgentRefValue {
+  agent_class?: string | null
+  agent_id?: string | null
+}
+
+/** One retriever's vector store, as it is saved in the referenced agent's configuration. */
+interface VectorStoreConfig {
+  collection_name?: string
+  index_namespaces?: string[]
+  all_namespaces?: boolean
+}
+
+interface CollectionOption {
+  key: string
+  displayName: string
+  pair: BucketNamespacePair
+}
+
+interface CollectionGroup {
+  label: string
+  items: CollectionOption[]
+}
+
+interface KnowledgeCollectionSelectorProps {
+  context: {
+    node: {
+      input: (value: BucketNamespacePair[] | null) => void
+      at: (address: string) => FormKitNode | null | undefined
+    }
+    value?: BucketNamespacePair[] | null
+    attrs: Record<string, unknown>
+    id?: string
+    agentRef?: string
+    placeholder?: string
+    filter?: boolean
+  }
+}
+
+const props = defineProps<KnowledgeCollectionSelectorProps>()
+const { t } = useI18n()
+const { tenantId } = useTenant()
+
+const agentRefPath = computed(() => props.context.agentRef)
+const placeholder = computed(() => props.context.placeholder)
+const filter = computed(() => props.context.filter ?? true)
+const inputId = computed(() => `${props.context.id ?? 'knowledge-collections'}-select`)
+
+const agentRef = ref<AgentRefValue | null>(null)
+const collections = ref<BucketNamespacePair[]>([])
+const databaseNames = ref<Record<string, string>>({})
+const collectionNames = ref<Record<string, string>>({})
+const isLoading = ref(false)
+
+const hasAgent = computed(() => !!agentRef.value?.agent_class && !!agentRef.value?.agent_id)
+
+const currentValue = computed<BucketNamespacePair[]>(() => props.context.value ?? [])
+
+function keyOf(pair: BucketNamespacePair): string {
+  return `${pair.bucket_name}/${pair.namespace_name}`
+}
+
+function collectionLabel(pair: BucketNamespacePair): string {
+  return collectionNames.value[keyOf(pair)] || pair.namespace_name
+}
+
+const groupedOptions = computed<CollectionGroup[]>(() => {
+  const byDatabase = new Map<string, CollectionOption[]>()
+  for (const pair of collections.value) {
+    const options = byDatabase.get(pair.bucket_name) ?? []
+    options.push({
+      key: keyOf(pair),
+      displayName: collectionLabel(pair),
+      pair,
+    })
+    byDatabase.set(pair.bucket_name, options)
+  }
+  const groups = [...byDatabase.entries()].map(([database, items]) => ({
+    label: databaseNames.value[database] || database,
+    items,
+  }))
+
+  // PrimeVue labels a chip from the matching option, so a selection the agent does not retrieve from
+  // would otherwise render as its remove icon and nothing else. It is listed under its own group,
+  // qualified by database because that is usually what went wrong — the selection was made against a
+  // different agent — and so the narrowing the run still applies stays visible enough to act on.
+  const available = new Set(collections.value.map(keyOf))
+  const unavailable = currentValue.value.filter(pair => !available.has(keyOf(pair)))
+  if (unavailable.length === 0) return groups
+
+  return [...groups, {
+    label: t('lib.knowledgeCollections.unavailable'),
+    items: unavailable.map(pair => ({
+      key: keyOf(pair),
+      displayName: `${databaseNames.value[pair.bucket_name] || pair.bucket_name} / ${collectionLabel(pair)}`,
+      pair,
+    })),
+  }]
+})
+
+// A selection saved before the referenced agent lost a collection would silently disappear from the
+// chips on load, so it stays listed until the user changes the selection themselves.
+const selectedKeys = computed({
+  get: () => currentValue.value.map(keyOf),
+  set: (keys: string[]) => {
+    const byKey = new Map(collections.value.map(pair => [keyOf(pair), pair]))
+    props.context.node.input(keys.map(key => byKey.get(key) ?? currentValue.value.find(pair => keyOf(pair) === key))
+      .filter((pair): pair is BucketNamespacePair => !!pair))
+  },
+})
+
+const hint = computed(() => {
+  if (!agentRefPath.value) return t('lib.knowledgeCollections.noSource')
+  if (!hasAgent.value) return t('lib.knowledgeCollections.noAgent')
+  if (!isLoading.value && collections.value.length === 0) return t('lib.knowledgeCollections.empty')
+  return t('lib.knowledgeCollections.help')
+})
+
+/**
+ * The collections the referenced agent actually retrieves from: the namespaces each of its retrievers
+ * names, or — for a retriever scoped to a whole database — every namespace that database holds. Anything
+ * outside this set would be dropped at runtime and the reply answered from nothing, which is why the
+ * catalogue alone is not offered here.
+ */
+function collectionsFromRetrievers(configuration: Record<string, unknown>, databases: DatabaseDto[]): BucketNamespacePair[] {
+  const retrievers = Array.isArray(configuration.retrievers) ? configuration.retrievers : []
+  const pairs: BucketNamespacePair[] = []
+  const seen = new Set<string>()
+
+  for (const retriever of retrievers) {
+    const store = (retriever as Record<string, unknown>)?.vector_store as VectorStoreConfig | undefined
+    const database = store?.collection_name
+    if (!database) continue
+
+    const namespaces = store?.all_namespaces
+      ? (databases.find(entry => entry.name === database)?.namespaces ?? []).map(namespace => namespace.name)
+      : (store?.index_namespaces ?? [])
+
+    for (const namespace of namespaces) {
+      const pair = { bucket_name: database, namespace_name: namespace }
+      const key = keyOf(pair)
+      if (seen.has(key)) continue
+      seen.add(key)
+      pairs.push(pair)
+    }
+  }
+  return pairs
+}
+
+async function loadCollections() {
+  const agentClass = agentRef.value?.agent_class
+  const agentId = agentRef.value?.agent_id
+  if (!agentClass || !agentId) {
+    collections.value = []
+    return
+  }
+
+  isLoading.value = true
+  try {
+    const [instance, databases] = await Promise.all([
+      getAgentInstance({
+        composable: '$fetch',
+        path: { tenant_id: tenantId.value!, agent_class: agentClass, agent_id: agentId },
+      }),
+      getDatabases({ composable: '$fetch', path: { tenant_id: tenantId.value! } }),
+    ])
+    databaseNames.value = Object.fromEntries(
+      databases.map(database => [database.name, database.display_name || database.name]),
+    )
+    collectionNames.value = Object.fromEntries(
+      databases.flatMap(database => database.namespaces
+        .filter(namespace => namespace.display_name)
+        .map(namespace => [keyOf({ bucket_name: database.name, namespace_name: namespace.name }), namespace.display_name!])),
+    )
+    collections.value = collectionsFromRetrievers(instance.configuration ?? {}, databases)
+  }
+  catch (error) {
+    console.error(`Failed to load knowledge collections for "${agentClass}/${agentId}":`, error)
+    collections.value = []
+  }
+  finally {
+    isLoading.value = false
+  }
+}
+
+/**
+ * The path arrives relative to the form root and is anchored here, never on the backend: FormKit compiles any
+ * schema string beginning with `$` as an expression, so a path shipped as `$root.…` is evaluated against the form
+ * data and reaches this component as `undefined`.
+ */
+function readAgentRef(): AgentRefValue | null {
+  if (!agentRefPath.value) return null
+  return (props.context.node.at(`$root.${agentRefPath.value}`)?.value as AgentRefValue | undefined) ?? null
+}
+
+function syncAgentRef() {
+  const next = readAgentRef()
+  if (next?.agent_class === agentRef.value?.agent_class && next?.agent_id === agentRef.value?.agent_id) return
+  agentRef.value = next
+  loadCollections()
+}
+
+// The agent lives elsewhere on the form — a sibling group here, a different step in other layouts — so the
+// only dependable signal that it changed is the root form committing. Values on FormKit nodes are not Vue
+// reactive, and re-reading on every commit is cheap because `syncAgentRef` compares before refetching.
+let rootNode: FormKitNode | null | undefined
+let receipt: string | undefined
+onMounted(() => {
+  syncAgentRef()
+  rootNode = props.context.node.at('$root')
+  receipt = rootNode?.on('commit', syncAgentRef)
+})
+
+onUnmounted(() => {
+  if (receipt) rootNode?.off(receipt)
+})
+</script>