@swiss-ai-hub/web 0.298.2 → 0.298.3

package/components/Agent/CreateModal.vue

@@ -105,6 +105,7 @@
                       :label="rep.label"
                       :add-label="rep.addLabel"
                       :children-schema="rep.childrenSchema"
+                      :default-item="rep.defaultItem"
                       :min="rep.min"
                       :max="rep.max"
                       @update:model-value="setRepeaterData(rep.path, $event)"
@@ -135,7 +136,7 @@
 </template>
 
 <script setup lang="ts">
-import { type FormElement, normalizeFormLocaleStrings } from '@core/composables/form/useFormKitTransform'
+import { type FormElement, serializeFormData } from '@core/composables/form/useFormKitTransform'
 import { getNode } from '@formkit/core'
 
 const props = defineProps<{
@@ -168,8 +169,6 @@ const {
   getRepeaterStepIndex,
   getRepeaterData,
   setRepeaterData,
-  cleanFormData,
-  coerceNullableToggles,
   applyInitialData,
   resetForm,
 } = useCreateInstanceForm({
@@ -219,9 +218,7 @@ function triggerFormSubmit() {
 
 async function handleFormSubmit() {
   try {
-    const cleanedData = cleanFormData(formData.value)
-    const coerced = coerceNullableToggles(cleanedData, configForm.value as FormElement[])
-    const normalizedConfig = normalizeFormLocaleStrings(coerced)
+    const normalizedConfig = serializeFormData(formData.value, configForm.value as FormElement[])
     const agentId = normalizedConfig.agent_id as string
     await createAgentInstance({
       agentClass: selectedClass.value,

package/components/Event/Display/ToolEvent.vue

@@ -16,7 +16,7 @@
         v-for="(val, key) in event.event.parameters"
         :key="key"
       >
-        <Button :label="useChangeCase(key, 'capitalCase')" />
+        <Button :label="capitalCase(key)" />
         <InputText
           :placeholder="val"
           readonly
@@ -27,7 +27,7 @@
 </template>
 
 <script setup lang="ts">
-import { useChangeCase } from '@vueuse/integrations/useChangeCase'
+import { capitalCase } from 'change-case'
 
 import type { ThreadDto, ToolEvent, ContextualizedAgentEvent } from '@core/sdk/client'
 

package/components/FormKit/AgentSelector.vue

@@ -93,7 +93,7 @@
 
 <script setup lang="ts">
 import { getAgentClasses, getAgentClassInstances } from '@core/sdk/client'
-import { useChangeCase } from '@vueuse/integrations/useChangeCase'
+import { capitalCase } from 'change-case'
 
 import type { AgentClassDto, FullAgentInstanceDto, LocaleString } from '@core/sdk/client'
 
@@ -200,7 +200,7 @@ function emitValue(agentClass: string, agentId: string) {
 const classOptions = computed<ClassOption[]>(() =>
   agentClasses.value.map(cls => ({
     name: cls.agent_class,
-    displayName: getLocalizedValue(cls.name, locale.value) || useChangeCase(cls.agent_class, 'capitalCase'),
+    displayName: getLocalizedValue(cls.name, locale.value) || capitalCase(cls.agent_class),
     icon: cls.icon || 'mage:robot',
   })),
 )

package/components/FormKit/DynamicConfiguration.vue

@@ -27,6 +27,7 @@
         :label="rep.label"
         :add-label="rep.addLabel"
         :children-schema="rep.childrenSchema"
+        :default-item="rep.defaultItem"
         :min="rep.min"
         :max="rep.max"
         @update:model-value="setRepeaterData(rep.path, $event)"
@@ -38,12 +39,10 @@
 <script setup lang="ts">
 import {
   buildFormKitSchema,
-  coerceNullableToggles,
   extractRepeaterConfigs,
   getNestedValue,
-  normalizeFormLocaleStrings,
-  seedFormDefaults,
-  seedNullableToggles,
+  hydrateFormData,
+  serializeFormData,
   setNestedValue,
   type FormElement,
   type RepeaterConfig,
@@ -61,8 +60,7 @@ const props = defineProps<{
 }>()
 
 function hydrate(raw: Record<string, unknown>): Record<string, unknown> {
-  const seeded = seedNullableToggles(raw, props.form as FormElement[])
-  return seedFormDefaults(seeded, props.form as FormElement[])
+  return hydrateFormData(raw, props.form as FormElement[])
 }
 
 const data = ref<Record<string, unknown>>(hydrate(props.initialData || {}))
@@ -110,9 +108,7 @@ function setRepeaterData(path: string, value: Record<string, unknown>[]): void {
 }
 
 async function submitHandler() {
-  const coerced = coerceNullableToggles(data.value, props.form as FormElement[])
-  const normalizedData = normalizeFormLocaleStrings(coerced)
-  emit('submit', normalizedData)
+  emit('submit', serializeFormData(data.value, props.form as FormElement[]))
 }
 </script>
 

package/components/FormKit/KnowledgeDatabaseSelector.vue

@@ -26,7 +26,7 @@
 
 <script setup lang="ts">
 import { getDatabases } from '@core/sdk/client'
-import { useChangeCase } from '@vueuse/integrations/useChangeCase'
+import { capitalCase } from 'change-case'
 
 import type { DatabaseDto } from '@core/sdk/client'
 
@@ -64,7 +64,7 @@ const selectedDatabases = computed({
 const databaseOptions = computed<DatabaseOption[]>(() =>
   databases.value.map(db => ({
     name: db.name,
-    displayName: db.display_name || useChangeCase(db.name, 'capitalCase').value,
+    displayName: db.display_name || capitalCase(db.name),
   })),
 )
 

package/components/FormKit/Repeater.vue

@@ -7,7 +7,7 @@
     <div class="flex flex-col gap-3">
       <div
         v-for="(item, index) in items"
-        :key="index"
+        :key="rowKeys[index]"
         class="relative rounded-lg border border-surface-200 p-4 dark:border-surface-700"
       >
         <div class="mb-3 flex items-center justify-between">
@@ -27,9 +27,9 @@
 
         <FormKit
           v-if="modelValue"
-          :id="`__validate__${name}__${index}`"
+          :id="`__validate__${name}__${rowKeys[index]}`"
           v-model="modelValue[index]"
-          :name="`__validate__${name}__${index}`"
+          :name="`__validate__${name}__${rowKeys[index]}`"
           type="group"
         >
           <FormKitSchema
@@ -53,6 +53,8 @@
 </template>
 
 <script setup lang="ts">
+import { cloneDeep } from 'lodash-es'
+
 import type { FormKitSchemaNode } from '@formkit/core'
 
 const props = defineProps<{
@@ -60,6 +62,7 @@ const props = defineProps<{
   label?: string
   addLabel?: string
   childrenSchema: FormKitSchemaNode[]
+  defaultItem?: Record<string, unknown>
   min?: number
   max?: number
 }>()
@@ -68,6 +71,22 @@ const modelValue = defineModel<Record<string, unknown>[]>({ default: () => [] })
 
 const items = computed(() => modelValue.value || [])
 
+function makeRowKey(): string {
+  return crypto.randomUUID()
+}
+
+// One stable key per row, used both as the Vue `:key` and inside the FormKit group id/name.
+// Index-based keys reindex survivors when a non-last row is removed, rebinding each FormKit
+// group to a different row's data and corrupting the form; stable keys avoid that. add/remove
+// keep the array aligned to the rows; the watch only reconciles external model replacement
+// (e.g. form load), preserving existing keys positionally.
+const rowKeys = ref<string[]>(items.value.map(makeRowKey))
+
+watch(() => items.value.length, (length) => {
+  if (length === rowKeys.value.length) return
+  rowKeys.value = Array.from({ length }, (_, index) => rowKeys.value[index] ?? makeRowKey())
+})
+
 const isAddDisabled = computed(() => {
   if (typeof props.max !== 'number') return false
   return items.value.length >= props.max
@@ -83,11 +102,13 @@ function addItem() {
   if (!modelValue.value) {
     modelValue.value = []
   }
-  modelValue.value.push({})
+  rowKeys.value.push(makeRowKey())
+  modelValue.value.push(props.defaultItem ? cloneDeep(props.defaultItem) : {})
 }
 
 function removeItem(index: number) {
   if (!modelValue.value || isRemoveDisabled.value) return
+  rowKeys.value.splice(index, 1)
   modelValue.value = modelValue.value.filter((_, i) => i !== index)
 }
 </script>

package/components/FormKit/VectorStoreInput.vue

@@ -96,7 +96,7 @@
 <script setup lang="ts">
 import ChipsInput from '@core/components/FormKit/ChipsInput.vue'
 import { getDatabases } from '@core/sdk/client'
-import { useChangeCase } from '@vueuse/integrations/useChangeCase'
+import { capitalCase } from 'change-case'
 
 import type { DatabaseDto } from '@core/sdk/client'
 
@@ -200,7 +200,7 @@ function emitValue(collectionName: string, namespaces: string[], allowedFilterFi
 const databaseOptions = computed<DatabaseOption[]>(() =>
   databases.value.map(db => ({
     name: db.name,
-    displayName: db.display_name || useChangeCase(db.name, 'capitalCase'),
+    displayName: db.display_name || capitalCase(db.name),
   })),
 )
 
@@ -213,7 +213,7 @@ const namespaceOptions = computed<NamespaceOption[]>(() => {
     return []
   return db.namespaces.map(ns => ({
     name: ns.name,
-    displayName: ns.display_name || useChangeCase(ns.name, 'capitalCase'),
+    displayName: ns.display_name || capitalCase(ns.name),
   }))
 })
 

package/components/Knowledge/Document/UploadModal.vue

@@ -129,7 +129,7 @@
 </template>
 
 <script setup lang="ts">
-import { useChangeCase } from '@vueuse/integrations/useChangeCase'
+import { capitalCase } from 'change-case'
 
 interface Props {
   visible: boolean
@@ -146,11 +146,11 @@ const props = withDefaults(defineProps<Props>(), {
 const { t } = useI18n()
 
 const databaseDisplayName = computed(() => {
-  return props.databaseDisplayName || useChangeCase(props.database, 'capitalCase').value
+  return props.databaseDisplayName || capitalCase(props.database)
 })
 
 const namespaceDisplayName = computed(() => {
-  return props.namespaceDisplayName || useChangeCase(props.namespace, 'capitalCase').value
+  return props.namespaceDisplayName || capitalCase(props.namespace)
 })
 
 const emit = defineEmits<{

package/components/Knowledge/Namespace/Card.vue

@@ -63,7 +63,7 @@
 </template>
 
 <script setup lang="ts">
-import { useChangeCase } from '@vueuse/integrations/useChangeCase'
+import { capitalCase } from 'change-case'
 
 import type { NamespaceDto } from '@core/sdk/client'
 
@@ -82,7 +82,7 @@ const { t } = useI18n()
 
 const displayName = computed(() => {
   // Use display_name if available, otherwise fall back to formatted technical name
-  return props.namespace.display_name || useChangeCase(props.namespace.name, 'capitalCase')
+  return props.namespace.display_name || capitalCase(props.namespace.name)
 })
 
 const createdAt = computed(() => {

package/components/Knowledge/Namespace/CreateModal.vue

@@ -114,7 +114,7 @@
 </template>
 
 <script setup lang="ts">
-import { useChangeCase } from '@vueuse/integrations/useChangeCase'
+import { capitalCase } from 'change-case'
 
 import type { CreateNamespaceRequest, DatabaseDto } from '@core/sdk/client'
 
@@ -146,7 +146,7 @@ const databaseOptions = computed(() =>
     .filter(db => !db.auto_sync)
     .map(db => ({
       name: db.name,
-      displayName: useChangeCase(db.name, 'capitalCase'),
+      displayName: capitalCase(db.name),
     })),
 )
 const nameValidationError = computed(() => {

package/components/Process/CreateModal.vue

@@ -104,6 +104,7 @@
                       :label="rep.label"
                       :add-label="rep.addLabel"
                       :children-schema="rep.childrenSchema"
+                      :default-item="rep.defaultItem"
                       :min="rep.min"
                       :max="rep.max"
                       @update:model-value="setRepeaterData(rep.path, $event)"
@@ -134,7 +135,7 @@
 </template>
 
 <script setup lang="ts">
-import { type FormElement, normalizeFormLocaleStrings } from '@core/composables/form/useFormKitTransform'
+import { type FormElement, serializeFormData } from '@core/composables/form/useFormKitTransform'
 import { getNode } from '@formkit/core'
 
 const props = defineProps<{
@@ -166,8 +167,6 @@ const {
   getRepeaterStepIndex,
   getRepeaterData,
   setRepeaterData,
-  cleanFormData,
-  coerceNullableToggles,
   applyInitialData,
   resetForm,
 } = useCreateInstanceForm({
@@ -212,9 +211,7 @@ function triggerFormSubmit() {
 
 async function handleFormSubmit() {
   try {
-    const cleanedData = cleanFormData(formData.value)
-    const coerced = coerceNullableToggles(cleanedData, configForm.value as FormElement[])
-    const normalizedConfig = normalizeFormLocaleStrings(coerced)
+    const normalizedConfig = serializeFormData(formData.value, configForm.value as FormElement[])
     const processId = normalizedConfig.process_id as string
     await createProcessInstance({
       processClass: selectedClass.value,

package/composables/form/useCreateInstanceForm.ts

@@ -1,18 +1,13 @@
-import { merge } from 'lodash-es'
-
 import {
   type FormElement,
   type GroupConfig,
   type RepeaterConfig,
   buildFormKitSchema,
   categorizeFormElements,
-  coerceNullableToggles,
   extractGroupConfigs,
   extractRepeaterConfigs,
-  getFormkitType,
   getNestedValue,
-  seedFormDefaults,
-  seedNullableToggles,
+  hydrateFormData,
   setNestedValue,
 } from './useFormKitTransform'
 
@@ -24,51 +19,6 @@ export interface ClassDataLike {
   templates?: Array<Record<string, unknown>>
 }
 
-/**
- * Drops keys whose matching form-schema node is a group/repeater and whose incoming
- * value is `null`. FormKit rejects `null` for group values (must be an object) and for
- * repeater values (must be an array), so template payloads that serialise optional
- * nested configs as `null` (Pydantic `Form | None = None`) would otherwise throw during
- * hydration.
- */
-export function stripNullsForGroups(
-  data: Record<string, unknown>,
-  elements: FormElement[],
-): Record<string, unknown> {
-  const result: Record<string, unknown> = {}
-
-  for (const [key, value] of Object.entries(data)) {
-    const element = elements.find(el => el.name === key)
-    if (!element) {
-      result[key] = value
-      continue
-    }
-    const formkitType = getFormkitType(element)
-
-    if ((formkitType === 'group' || formkitType === 'repeater') && value === null) {
-      continue
-    }
-
-    const children = (element.children as FormElement[] | undefined) ?? []
-
-    if (formkitType === 'group' && value && typeof value === 'object' && !Array.isArray(value)) {
-      result[key] = stripNullsForGroups(value as Record<string, unknown>, children)
-    }
-    else if (formkitType === 'repeater' && Array.isArray(value)) {
-      result[key] = value.map(item =>
-        item && typeof item === 'object' && !Array.isArray(item)
-          ? stripNullsForGroups(item as Record<string, unknown>, children)
-          : item,
-      )
-    }
-    else {
-      result[key] = value
-    }
-  }
-
-  return result
-}
-
 export interface CreateInstanceFormOptions<T extends ClassDataLike> {
   /** Reactive list of available class definitions (agent classes, process classes, etc.) */
   classes: Ref<T[] | undefined>
@@ -85,9 +35,10 @@ export interface CreateInstanceFormOptions<T extends ClassDataLike> {
 /**
  * Shared form logic for creating agent/process instances from class definitions.
  *
- * Handles class selection, FormKit schema generation, stepper navigation,
- * and form data lifecycle. Template/clone pre-filling is done via applyInitialData().
- * Domain-specific submission logic stays in the calling component.
+ * Handles class selection, FormKit schema generation, stepper navigation, and form data
+ * lifecycle. Hydration is shared with the edit form via `hydrateFormData` (and submission via
+ * `serializeFormData`) so create and edit behave identically. Template/clone pre-filling is
+ * done via applyInitialData(); domain-specific submission stays in the calling component.
  */
 export function useCreateInstanceForm<T extends ClassDataLike>(options: CreateInstanceFormOptions<T>) {
   const { classes, classField, initialClass, locale } = options
@@ -144,81 +95,15 @@ export function useCreateInstanceForm<T extends ClassDataLike>(options: CreateIn
   }
 
   watch(selectedClassData, (newClass) => {
-    if (newClass?.form && newClass.form.length > 0) {
-      const base = initializeGroupData(configForm.value as FormElement[], {})
-      formData.value = seedFormDefaults(base, configForm.value as FormElement[])
-    }
-    else {
-      formData.value = {}
-    }
+    formData.value = newClass?.form && newClass.form.length > 0
+      ? hydrateFormData({}, configForm.value as FormElement[])
+      : {}
   }, { immediate: true })
 
-  function initializeElementData(
-    element: FormElement,
-    result: Record<string, unknown>,
-    recursiveFn: (elements: FormElement[], data: Record<string, unknown>) => Record<string, unknown>,
-  ): void {
-    const formkitType = getFormkitType(element)
-    const name = element.name as string
-    const children = element.children as FormElement[] | undefined
-    const hasChildren = children && Array.isArray(children)
-
-    if (formkitType === 'group') {
-      result[name] = result[name] ?? {}
-      if (hasChildren) {
-        result[name] = recursiveFn(children, result[name] as Record<string, unknown>)
-      }
-    }
-    else if (formkitType === 'repeater') {
-      result[name] = result[name] ?? []
-      if (Array.isArray(result[name]) && hasChildren) {
-        result[name] = (result[name] as Record<string, unknown>[]).map(item => recursiveFn(children, item))
-      }
-    }
-  }
-
-  function initializeGroupData(
-    formElements: FormElement[],
-    data: Record<string, unknown>,
-  ): Record<string, unknown> {
-    const result = { ...data }
-    for (const element of formElements) {
-      initializeElementData(element, result, initializeGroupData)
-    }
-    return result
-  }
-
-  function cleanFormData(data: Record<string, unknown>): Record<string, unknown> {
-    const result: Record<string, unknown> = {}
-    // FormKit artifacts that should be stripped from submissions
-    const formkitArtifacts = new Set(['slots'])
-
-    for (const [key, value] of Object.entries(data)) {
-      if (formkitArtifacts.has(key)) continue
-      // Strip the internal repeater validation mirror written by FormKit/Repeater.vue.
-      if (key.startsWith('__validate__')) continue
-
-      if (value !== null && typeof value === 'object' && !Array.isArray(value)) {
-        result[key] = cleanFormData(value as Record<string, unknown>)
-      }
-      else {
-        result[key] = value
-      }
-    }
-
-    return result
-  }
-
   function applyInitialData(data: Record<string, unknown>) {
-    // Seed toggles from the raw data so that `field: null` in a template becomes
-    // `__field__enabled: false`. If we seeded after stripping nulls and merging
-    // against the `{}` placeholder from initializeGroupData, every nullable group
-    // would look truthy and the toggle would come up enabled.
-    const seeded = seedNullableToggles(data, configForm.value as FormElement[])
-    const base = initializeGroupData(configForm.value as FormElement[], {})
-    const withDefaults = seedFormDefaults(base, configForm.value as FormElement[])
-    const sanitized = stripNullsForGroups(seeded, configForm.value as FormElement[])
-    formData.value = merge(withDefaults, sanitized)
+    // Hydrate from the template/clone data: nullable toggles follow the data's null-ness,
+    // missing leaves fall back to their backend defaults — identical to the edit form.
+    formData.value = hydrateFormData(data, configForm.value as FormElement[])
   }
 
   function resetForm() {
@@ -242,9 +127,6 @@ export function useCreateInstanceForm<T extends ClassDataLike>(options: CreateIn
     getRepeaterStepIndex,
     getRepeaterData,
     setRepeaterData,
-    initializeGroupData,
-    cleanFormData,
-    coerceNullableToggles,
     applyInitialData,
     resetForm,
   }

package/composables/form/useFormKitTransform.ts

@@ -6,6 +6,10 @@ export interface RepeaterConfig {
   label?: string
   addLabel?: string
   childrenSchema: FormKitSchemaNode[]
+  // Seeded default for a freshly added item. `childrenSchema` is transformed and has its
+  // `value` defaults stripped (see EXCLUDED_FIELDS), so a new item must be cloned from this
+  // instead of `{}` — otherwise fields like "documents to retrieve" render empty.
+  defaultItem: Record<string, unknown>
   min?: number
   max?: number
 }
@@ -225,6 +229,8 @@ const EXCLUDED_FIELDS = new Set([
   'placeholder', // Transformed via getLocalizedString
   'children', // Handled separately for recursion
   '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
   // 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.
@@ -449,33 +455,42 @@ export function extractRepeaterConfigs(
     const formkitType = getFormkitType(element)
     const elementName = element.name as string
 
-    if (formkitType === 'repeater') {
-      const childrenSchema = (element.children as FormElement[] || []).flatMap(
-        child => transformElementForRepeater(child, locale),
-      ) as FormKitSchemaNode[]
-
-      // Build full path for nested data access
-      const fullPath = parentPath ? `${parentPath}.${elementName}` : elementName
-
-      repeaters.push({
-        name: elementName,
-        path: fullPath,
-        label: getLocalizedString(element.label, locale),
-        addLabel: getLocalizedString(element.addLabel || element.add_label, locale),
-        childrenSchema,
-        min: element.min as number | undefined,
-        max: element.max as number | undefined,
-      })
+    // Isolate each element so one malformed repeater (or a group containing one) is skipped
+    // rather than throwing out of the computed and breaking every repeater on the form.
+    try {
+      if (formkitType === 'repeater') {
+        const childrenSchema = (element.children as FormElement[] || []).flatMap(
+          child => transformElementForRepeater(child, locale),
+        ) as FormKitSchemaNode[]
+
+        // Build full path for nested data access
+        const fullPath = parentPath ? `${parentPath}.${elementName}` : elementName
+
+        const itemChildren = (element.children as FormElement[]) || []
+        repeaters.push({
+          name: elementName,
+          path: fullPath,
+          label: getLocalizedString(element.label, locale),
+          addLabel: getLocalizedString(element.addLabel || element.add_label, locale),
+          childrenSchema,
+          defaultItem: seedFormDefaults({}, itemChildren),
+          min: element.min as number | undefined,
+          max: element.max as number | undefined,
+        })
+      }
+      else if (formkitType === 'group' && element.children) {
+        // Recursively search for repeaters inside groups, passing the current path
+        const groupPath = parentPath ? `${parentPath}.${elementName}` : elementName
+        const nestedRepeaters = extractRepeaterConfigs(
+          element.children as FormElement[],
+          locale,
+          groupPath,
+        )
+        repeaters.push(...nestedRepeaters)
+      }
     }
-    else if (formkitType === 'group' && element.children) {
-      // Recursively search for repeaters inside groups, passing the current path
-      const groupPath = parentPath ? `${parentPath}.${elementName}` : elementName
-      const nestedRepeaters = extractRepeaterConfigs(
-        element.children as FormElement[],
-        locale,
-        groupPath,
-      )
-      repeaters.push(...nestedRepeaters)
+    catch (error) {
+      console.error(`Error extracting repeater "${elementName ?? '<unknown>'}":`, error)
     }
   }
 
@@ -491,13 +506,19 @@ export function buildFormKitSchema(
 ): FormKitSchemaNode[] {
   if (!formElements || formElements.length === 0) return []
 
-  try {
-    return formElements.flatMap(el => transformElementToSchema(el, options)) as FormKitSchemaNode[]
-  }
-  catch (error) {
-    console.error('Error transforming schema:', error)
-    return []
-  }
+  // Isolate each element: a single malformed element is skipped (and logged) instead of
+  // collapsing the whole section to []. A blanket try/catch here meant one throwing input
+  // took every sibling down with it — e.g. a bad config field wiped the entire Basic Info
+  // step (agent_id, name, …), leaving an unusable form.
+  return formElements.flatMap((element) => {
+    try {
+      return transformElementToSchema(element, options)
+    }
+    catch (error) {
+      console.error(`Error transforming form element "${(element?.name as string) ?? '<unknown>'}":`, error)
+      return []
+    }
+  }) as FormKitSchemaNode[]
 }
 
 const LOCALE_KEYS = new Set(['de', 'en', 'fr', 'it'])
@@ -618,13 +639,15 @@ export function coerceNullableToggles(
  * process edit forms.
  */
 /**
- * Seed a group field's value: leave a disabled nullable group as `null`; otherwise
- * materialise its children's defaults (starting from the existing object when present).
- * `coerceNullableToggles` re-nullifies disabled subtrees at submit time, so seeding a
- * group whose toggle will end up off is safe.
+ * Seed a group field's value: always materialise its children's defaults (starting from
+ * the existing object when present, `{}` otherwise — including for a saved `null`). A null
+ * nullable group must still hold an object so FormKit can mount and render its children
+ * when the user flips the "Enable" toggle on. Visibility is governed by the synthetic
+ * toggle (seeded earlier from the raw null-ness by `seedNullableToggles`), and
+ * `coerceNullableToggles` re-nullifies disabled subtrees at submit time — so a materialised
+ * but disabled group is never persisted.
  */
-function seedGroupDefault(value: unknown, children: FormElement[]): Record<string, unknown> | null {
-  if (value === null) return null
+function seedGroupDefault(value: unknown, children: FormElement[]): Record<string, unknown> {
   const groupValue = value && typeof value === 'object' && !Array.isArray(value)
     ? value as Record<string, unknown>
     : {}
@@ -675,8 +698,11 @@ export function seedFormDefaults(
 }
 
 /**
- * Recursively seeds synthetic toggle values from initial data: toggle is on iff the
- * matching field was non-null/undefined in the source data.
+ * Recursively seeds synthetic toggle values from initial data. When the field is present in
+ * the source data the toggle follows its null-ness (edit/clone). When it is absent — a fresh
+ * form — the toggle falls back to the backend's `default_enabled` (the field's data default is
+ * non-null), so a nullable field that ships a default (e.g. a prompt, or org_memory) comes up
+ * enabled while a `None`-defaulting one (e.g. reranking_config) stays off.
  */
 export function seedNullableToggles(
   data: Record<string, unknown>,
@@ -687,7 +713,9 @@ export function seedNullableToggles(
   for (const element of elements) {
     const name = element.name as string
     if (element.nullable === true) {
-      result[nullableToggleName(name)] = result[name] !== null && result[name] !== undefined
+      result[nullableToggleName(name)] = name in result
+        ? result[name] !== null && result[name] !== undefined
+        : (element.defaultEnabled ?? element.default_enabled) === true
     }
 
     const formkitType = getFormkitType(element)
@@ -709,6 +737,45 @@ export function seedNullableToggles(
   return result
 }
 
+/**
+ * Strips FormKit submission artifacts: the `slots` helper key and the repeater validation
+ * mirror keys (`__validate__*`) registered by Repeater.vue. Recurses into nested group objects.
+ */
+export function cleanFormData(data: Record<string, unknown>): Record<string, unknown> {
+  const result: Record<string, unknown> = {}
+  for (const [key, value] of Object.entries(data)) {
+    if (key === 'slots' || key.startsWith('__validate__')) continue
+    result[key] = value !== null && typeof value === 'object' && !Array.isArray(value)
+      ? cleanFormData(value as Record<string, unknown>)
+      : value
+  }
+  return result
+}
+
+/**
+ * Raw saved/template/empty data → a fully hydrated FormKit model: nullable toggles seeded from
+ * the data's null-ness (or `default_enabled` on a fresh form), then groups materialised and
+ * leaf defaults filled. Single entry point so create and edit forms hydrate identically.
+ */
+export function hydrateFormData(
+  raw: Record<string, unknown>,
+  elements: FormElement[],
+): Record<string, unknown> {
+  return seedFormDefaults(seedNullableToggles(raw, elements), elements)
+}
+
+/**
+ * FormKit model → submission payload: disabled nullable subtrees nulled and synthetic toggle
+ * keys dropped (coerceNullableToggles), LocaleStrings normalised, FormKit artifacts stripped.
+ * Single entry point so create and edit forms serialise identically.
+ */
+export function serializeFormData(
+  data: Record<string, unknown>,
+  elements: FormElement[],
+): Record<string, unknown> {
+  return cleanFormData(normalizeFormLocaleStrings(coerceNullableToggles(data, elements)))
+}
+
 /**
  * Categorizes form elements into simple inputs, groups, and repeaters.
  * Used for organizing form elements into stepper steps.
@@ -752,9 +819,11 @@ export function extractGroupConfigs(
   const groups: GroupConfig[] = []
 
   for (const element of formElements) {
-    const formkitType = getFormkitType(element)
+    if (getFormkitType(element) !== 'group') continue
 
-    if (formkitType === 'group') {
+    // Isolate each group so a single malformed group is skipped rather than throwing out
+    // of the computed and blanking the whole step list.
+    try {
       const schema = transformElementToSchema(element, { locale })
       const schemaArray = Array.isArray(schema) ? schema : [schema]
 
@@ -764,6 +833,9 @@ export function extractGroupConfigs(
         schema: schemaArray,
       })
     }
+    catch (error) {
+      console.error(`Error transforming group "${(element?.name as string) ?? '<unknown>'}":`, error)
+    }
   }
 
   return groups

package/package.json

@@ -3,7 +3,7 @@
   "license": "AGPL-3.0-or-later",
   "author": "bbv Software Services AG (https://www.bbv.ch)",
   "type": "module",
-  "version": "0.298.2",
+  "version": "0.298.3",
   "description": "Swiss AI Hub - Admin & Management UI (Nuxt 3 layer)",
   "main": "./nuxt.config.ts",
   "repository": {

package/pages/[tenant]/service/agents/[agent_class]-[agent_id]/configuration.vue

@@ -34,10 +34,6 @@
 </template>
 
 <script setup lang="ts">
-import type { AgentConfigDtoReadable } from '@core/sdk/client'
-
-type FormElement = NonNullable<AgentConfigDtoReadable['form']>[number]
-
 const route = useRoute()
 const { tenantId } = useTenant()
 const { agentInstance, agentInstanceIsLoading } = useAgentInstance()
@@ -47,42 +43,14 @@ const toast = useToast()
 
 const configForm = computed(() => agentInstance.value?.agent_config?.form || [])
 
-/**
- * Recursively initializes nested Group values with empty objects based on form schema.
- * FormKit Groups require object values - they cannot be null or undefined.
- * This ensures all Group elements have at least an empty object as their value.
- */
-const initializeGroupData = (
-  formElements: FormElement[],
-  data: Record<string, unknown>,
-): Record<string, unknown> => {
-  const result = { ...data }
-
-  for (const element of formElements) {
-    const elementRecord = element as Record<string, unknown>
-    const formkitType = elementRecord.formkit || elementRecord.$formkit
-
-    if (formkitType === 'group') {
-      const name = elementRecord.name as string
-      const children = elementRecord.children as FormElement[] | undefined
-
-      if (result[name] === null || result[name] === undefined) {
-        result[name] = {}
-      }
-
-      if (children && Array.isArray(children)) {
-        result[name] = initializeGroupData(children, result[name] as Record<string, unknown>)
-      }
-    }
-  }
-
-  return result
-}
-
-const configurationData = computed(() => {
-  const rawData = (agentInstance.value?.configuration || {}) as Record<string, unknown>
-  return initializeGroupData(configForm.value, rawData)
-})
+// Pass the saved configuration through unchanged. DynamicConfiguration hydrates it
+// (seedNullableToggles then seedFormDefaults): non-nullable groups are materialised to
+// objects, while nullable groups keep their saved `null` so their "Enable" toggle loads
+// off. Pre-filling `null` groups with `{}` here would make every disabled nullable group
+// (e.g. reranking_config, org_memory) load as enabled.
+const configurationData = computed(
+  () => (agentInstance.value?.configuration || {}) as Record<string, unknown>,
+)
 
 const submitConfiguration = async (formData: Record<string, unknown>) => {
   const agentClass = route.params.agent_class as string

package/pages/[tenant]/service/knowledge/[db]/[namespace].vue

@@ -59,7 +59,7 @@
 
 <script setup lang="ts">
 import { useDebounceFn } from '@vueuse/core'
-import { useChangeCase } from '@vueuse/integrations/useChangeCase'
+import { capitalCase } from 'change-case'
 
 import type { DocumentDto } from '@core/sdk/client'
 
@@ -114,11 +114,11 @@ const currentNamespace = computed(() => {
 })
 
 const databaseDisplayName = computed(() => {
-  return currentDatabase.value?.display_name || useChangeCase(route.params.db as string, 'capitalCase').value
+  return currentDatabase.value?.display_name || capitalCase(route.params.db as string)
 })
 
 const namespaceDisplayName = computed(() => {
-  return currentNamespace.value?.display_name || useChangeCase(route.params.namespace as string, 'capitalCase').value
+  return currentNamespace.value?.display_name || capitalCase(route.params.namespace as string)
 })
 
 const toDocument = (document: DocumentDto) => {

package/pages/[tenant]/service/knowledge.vue

@@ -10,7 +10,7 @@
           :key="database.name"
         >
           <div class="flex items-center gap-2 pb-2 pl-2">
-            <span class="text-sm font-medium">{{ database.display_name || useChangeCase(database.name, 'capitalCase') }}</span>
+            <span class="text-sm font-medium">{{ database.display_name || capitalCase(database.name) }}</span>
             <i
               v-if="database.auto_sync"
               class="pi pi-lock text-surface-400 dark:text-surface-500"
@@ -67,7 +67,7 @@
 </template>
 
 <script setup lang="ts">
-import { useChangeCase } from '@vueuse/integrations/useChangeCase'
+import { capitalCase } from 'change-case'
 
 import type { DatabaseDto, NamespaceDto } from '@core/sdk/client'
 
@@ -96,8 +96,8 @@ const toNamespace = (database_name: string, namespace: NamespaceDto) => {
 const openUploadModal = (database: DatabaseDto, namespace: NamespaceDto) => {
   selectedDatabaseForUpload.value = database.name
   selectedNamespaceForUpload.value = namespace.name
-  selectedDatabaseDisplayNameForUpload.value = database.display_name || useChangeCase(database.name, 'capitalCase')
-  selectedNamespaceDisplayNameForUpload.value = namespace.display_name || useChangeCase(namespace.name, 'capitalCase')
+  selectedDatabaseDisplayNameForUpload.value = database.display_name || capitalCase(database.name)
+  selectedNamespaceDisplayNameForUpload.value = namespace.display_name || capitalCase(namespace.name)
   uploadModalVisible.value = true
 }
 

package/pages/[tenant]/service/models.vue

@@ -24,7 +24,7 @@
           <div
             class="pb-2 pl-2 text-sm font-medium"
           >
-            {{ useChangeCase(modelType.name, 'capitalCase') }}
+            {{ capitalCase(modelType.name) }}
           </div>
           <div
             class="grid grid-cols-2 gap-4 2xl:grid-cols-2"
@@ -45,7 +45,7 @@
 </template>
 
 <script setup lang="ts">
-import { useChangeCase } from '@vueuse/integrations/useChangeCase'
+import { capitalCase } from 'change-case'
 
 import type { ModelDTO } from '@core/sdk/client'