feat(frontend): add reusable search select and wire it into machine creation

fix(frontend): guard custom field persistence against non-string values

app/pages/pieces/[id]/edit.vue

@@ -314,7 +314,7 @@ const requiredCustomFieldsFilled = computed(() =>
     if (field.type === 'boolean') {
       return field.value === 'true' || field.value === 'false'
     }
-    return field.value !== ''
+    return toFieldString(field.value).trim() !== ''
   }),
 )
 
@@ -325,6 +325,19 @@ const canSubmit = computed(() => Boolean(
   !saving.value,
 ))
 
+const toFieldString = (value: unknown): string => {
+  if (value === null || value === undefined) {
+    return ''
+  }
+  if (typeof value === 'string') {
+    return value
+  }
+  if (typeof value === 'number' || typeof value === 'boolean') {
+    return String(value)
+  }
+  return ''
+}
+
 const fetchPiece = async () => {
   const id = route.params.id
   if (!id || typeof id !== 'string') {
@@ -547,14 +560,14 @@ const shouldPersistField = (field: CustomFieldInput) => {
   if (field.type === 'boolean') {
     return field.value === 'true' || field.value === 'false'
   }
-  return field.value.trim() !== ''
+  return toFieldString(field.value).trim() !== ''
 }
 
 const formatValueForPersistence = (field: CustomFieldInput) => {
   if (field.type === 'boolean') {
     return field.value === 'true' ? 'true' : 'false'
   }
-  return field.value.trim()
+  return toFieldString(field.value).trim()
 }
 
 const saveCustomFieldValues = async (updatedPiece: any) => {

app/pages/pieces/create.vue

@@ -320,7 +320,7 @@ const requiredCustomFieldsFilled = computed(() =>
     if (field.type === 'boolean') {
       return field.value === 'true' || field.value === 'false'
     }
-    return field.value !== ''
+    return toFieldString(field.value).trim() !== ''
   }),
 )
 
@@ -331,6 +331,19 @@ const canSubmit = computed(() => Boolean(
   !submitting.value,
 ))
 
+const toFieldString = (value: unknown): string => {
+  if (value === null || value === undefined) {
+    return ''
+  }
+  if (typeof value === 'string') {
+    return value
+  }
+  if (typeof value === 'number' || typeof value === 'boolean') {
+    return String(value)
+  }
+  return ''
+}
+
 const getStructureCustomFields = (structure: PieceModelStructure | null) => Array.isArray(structure?.customFields) ? structure.customFields : []
 
 const clearCreationForm = () => {
@@ -565,13 +578,13 @@ const shouldPersistField = (field: CustomFieldInput) => {
   if (field.type === 'boolean') {
     return field.value === 'true' || field.value === 'false'
   }
-  return field.value.trim() !== ''
+  return toFieldString(field.value).trim() !== ''
 }
 
 const formatValueForPersistence = (field: CustomFieldInput) => {
   if (field.type === 'boolean') {
     return field.value === 'true' ? 'true' : 'false'
   }
-  return field.value.trim()
+  return toFieldString(field.value).trim()
 }
 </script>