Add Contact standard object, related lists, meilisearch, pagination, search, AI assistant

frontend/components/fields/FieldAttributesCommon.vue

@@ -0,0 +1,195 @@
+<template>
+  <div class="space-y-6">
+    <!-- Label -->
+    <div class="grid grid-cols-4 gap-4">
+      <label class="text-sm font-medium leading-8">Label</label>
+      <div class="col-span-3">
+        <input
+          v-model="formData.label"
+          type="text"
+          placeholder="Display name for this field"
+          class="w-full px-3 py-2 border rounded-md text-sm"
+        />
+      </div>
+    </div>
+
+    <!-- API Name (Read-only if editing existing field) -->
+    <div class="grid grid-cols-4 gap-4">
+      <label class="text-sm font-medium leading-8">API Name</label>
+      <div class="col-span-3">
+        <input
+          v-model="formData.apiName"
+          type="text"
+          placeholder="e.g., accountName"
+          :disabled="isEditing"
+          class="w-full px-3 py-2 border rounded-md text-sm disabled:bg-gray-100 disabled:text-gray-600"
+        />
+        <p v-if="isEditing" class="text-xs text-gray-500 mt-1">
+          Cannot change API name on existing fields
+        </p>
+      </div>
+    </div>
+
+    <!-- Description -->
+    <div class="grid grid-cols-4 gap-4">
+      <label class="text-sm font-medium leading-8">Description</label>
+      <div class="col-span-3">
+        <textarea
+          v-model="formData.description"
+          placeholder="Describe the purpose of this field"
+          rows="3"
+          class="w-full px-3 py-2 border rounded-md text-sm"
+        />
+      </div>
+    </div>
+
+    <!-- Placeholder -->
+    <div class="grid grid-cols-4 gap-4">
+      <label class="text-sm font-medium leading-8">Placeholder</label>
+      <div class="col-span-3">
+        <input
+          v-model="formData.placeholder"
+          type="text"
+          placeholder="e.g., Enter account name"
+          class="w-full px-3 py-2 border rounded-md text-sm"
+        />
+      </div>
+    </div>
+
+    <!-- Help Text -->
+    <div class="grid grid-cols-4 gap-4">
+      <label class="text-sm font-medium leading-8">Help Text</label>
+      <div class="col-span-3">
+        <textarea
+          v-model="formData.helpText"
+          placeholder="Additional guidance for users"
+          rows="2"
+          class="w-full px-3 py-2 border rounded-md text-sm"
+        />
+      </div>
+    </div>
+
+    <!-- Display Order -->
+    <div class="grid grid-cols-4 gap-4">
+      <label class="text-sm font-medium leading-8">Display Order</label>
+      <div class="col-span-3">
+        <input
+          v-model.number="formData.displayOrder"
+          type="number"
+          class="w-full px-3 py-2 border rounded-md text-sm"
+        />
+      </div>
+    </div>
+
+    <!-- Required -->
+    <div class="grid grid-cols-4 gap-4">
+      <label class="text-sm font-medium leading-8">Required</label>
+      <div class="col-span-3 flex items-center">
+        <input
+          v-model="formData.isRequired"
+          type="checkbox"
+          class="w-4 h-4 border rounded"
+        />
+        <span class="ml-2 text-sm text-gray-600">
+          {{ formData.isRequired ? 'Yes, this field is required' : 'No, this field is optional' }}
+        </span>
+        <p v-if="hasData && !wasRequired && formData.isRequired" class="ml-2 text-xs text-red-600">
+          ⚠️ Existing records may have empty values
+        </p>
+      </div>
+    </div>
+
+    <!-- Unique -->
+    <div class="grid grid-cols-4 gap-4">
+      <label class="text-sm font-medium leading-8">Unique</label>
+      <div class="col-span-3 flex items-center">
+        <input
+          v-model="formData.isUnique"
+          type="checkbox"
+          class="w-4 h-4 border rounded"
+        />
+        <span class="ml-2 text-sm text-gray-600">
+          {{ formData.isUnique ? 'Yes, values must be unique' : 'No, duplicate values allowed' }}
+        </span>
+        <p v-if="hasData && !wasUnique && formData.isUnique" class="ml-2 text-xs text-red-600">
+          ⚠️ Existing records may have duplicate values
+        </p>
+      </div>
+    </div>
+
+    <!-- Default Value -->
+    <div class="grid grid-cols-4 gap-4">
+      <label class="text-sm font-medium leading-8">Default Value</label>
+      <div class="col-span-3">
+        <input
+          v-model="formData.defaultValue"
+          type="text"
+          placeholder="Value used when field is not provided"
+          class="w-full px-3 py-2 border rounded-md text-sm"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, onMounted } from 'vue'
+
+interface Props {
+  label?: string
+  apiName?: string
+  description?: string
+  placeholder?: string
+  helpText?: string
+  displayOrder?: number
+  isRequired?: boolean
+  isUnique?: boolean
+  defaultValue?: string
+  isEditing?: boolean
+  hasData?: boolean
+}
+
+interface Emits {
+  (e: 'update', data: any): void
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  label: '',
+  apiName: '',
+  description: '',
+  placeholder: '',
+  helpText: '',
+  displayOrder: 0,
+  isRequired: false,
+  isUnique: false,
+  defaultValue: '',
+  isEditing: false,
+  hasData: false,
+})
+
+const emit = defineEmits<Emits>()
+
+const formData = ref({
+  label: props.label,
+  apiName: props.apiName,
+  description: props.description,
+  placeholder: props.placeholder,
+  helpText: props.helpText,
+  displayOrder: props.displayOrder,
+  isRequired: props.isRequired,
+  isUnique: props.isUnique,
+  defaultValue: props.defaultValue,
+})
+
+const wasRequired = ref(props.isRequired)
+const wasUnique = ref(props.isUnique)
+
+onMounted(() => {
+  wasRequired.value = props.isRequired
+  wasUnique.value = props.isUnique
+})
+
+watch(formData, (newVal) => {
+  emit('update', newVal)
+}, { deep: true })
+</script>

frontend/components/fields/FieldAttributesType.vue

@@ -0,0 +1,296 @@
+<template>
+  <div class="space-y-6">
+    <!-- Text Field Attributes -->
+    <div v-if="fieldType === 'text'" class="space-y-4">
+      <div class="grid grid-cols-4 gap-4">
+        <label class="text-sm font-medium leading-8">Max Length</label>
+        <div class="col-span-3">
+          <input
+            v-model.number="attributes.maxLength"
+            type="number"
+            min="1"
+            max="65535"
+            placeholder="Maximum character length (default: 255)"
+            class="w-full px-3 py-2 border rounded-md text-sm"
+          />
+        </div>
+      </div>
+    </div>
+
+    <!-- Textarea Attributes -->
+    <div v-if="fieldType === 'textarea'" class="space-y-4">
+      <div class="grid grid-cols-4 gap-4">
+        <label class="text-sm font-medium leading-8">Default Rows</label>
+        <div class="col-span-3">
+          <input
+            v-model.number="attributes.rows"
+            type="number"
+            min="2"
+            max="20"
+            :placeholder="`Default: 4 rows`"
+            class="w-full px-3 py-2 border rounded-md text-sm"
+          />
+        </div>
+      </div>
+    </div>
+
+    <!-- Number Field Attributes -->
+    <div v-if="fieldType === 'number'" class="space-y-4">
+      <div class="grid grid-cols-4 gap-4">
+        <label class="text-sm font-medium leading-8">Decimal Places</label>
+        <div class="col-span-3">
+          <input
+            v-model.number="attributes.scale"
+            type="number"
+            min="0"
+            max="10"
+            placeholder="0 for integers, 2 for decimals"
+            class="w-full px-3 py-2 border rounded-md text-sm"
+          />
+        </div>
+      </div>
+      <div class="grid grid-cols-4 gap-4">
+        <label class="text-sm font-medium leading-8">Min Value</label>
+        <div class="col-span-3">
+          <input
+            v-model.number="attributes.min"
+            type="number"
+            placeholder="Minimum allowed value"
+            class="w-full px-3 py-2 border rounded-md text-sm"
+          />
+        </div>
+      </div>
+      <div class="grid grid-cols-4 gap-4">
+        <label class="text-sm font-medium leading-8">Max Value</label>
+        <div class="col-span-3">
+          <input
+            v-model.number="attributes.max"
+            type="number"
+            placeholder="Maximum allowed value"
+            class="w-full px-3 py-2 border rounded-md text-sm"
+          />
+        </div>
+      </div>
+    </div>
+
+    <!-- Currency Field Attributes -->
+    <div v-if="fieldType === 'currency'" class="space-y-4">
+      <div class="grid grid-cols-4 gap-4">
+        <label class="text-sm font-medium leading-8">Currency Symbol</label>
+        <div class="col-span-3">
+          <input
+            v-model="attributes.prefix"
+            type="text"
+            placeholder="e.g., $, €, ¥"
+            class="w-full px-3 py-2 border rounded-md text-sm"
+          />
+        </div>
+      </div>
+      <div class="grid grid-cols-4 gap-4">
+        <label class="text-sm font-medium leading-8">Decimal Places</label>
+        <div class="col-span-3">
+          <input
+            v-model.number="attributes.scale"
+            type="number"
+            min="0"
+            max="4"
+            placeholder="Default: 2"
+            class="w-full px-3 py-2 border rounded-md text-sm"
+          />
+        </div>
+      </div>
+      <div class="grid grid-cols-4 gap-4">
+        <label class="text-sm font-medium leading-8">Min Value</label>
+        <div class="col-span-3">
+          <input
+            v-model.number="attributes.min"
+            type="number"
+            placeholder="Minimum allowed value"
+            class="w-full px-3 py-2 border rounded-md text-sm"
+          />
+        </div>
+      </div>
+      <div class="grid grid-cols-4 gap-4">
+        <label class="text-sm font-medium leading-8">Max Value</label>
+        <div class="col-span-3">
+          <input
+            v-model.number="attributes.max"
+            type="number"
+            placeholder="Maximum allowed value"
+            class="w-full px-3 py-2 border rounded-md text-sm"
+          />
+        </div>
+      </div>
+    </div>
+
+    <!-- Select/Picklist Attributes -->
+    <div v-if="fieldType === 'select' || fieldType === 'multiSelect'" class="space-y-4">
+      <div class="border rounded-lg p-4 bg-gray-50">
+        <div class="flex items-center justify-between mb-4">
+          <label class="text-sm font-medium">Options</label>
+          <button
+            type="button"
+            @click="addOption"
+            class="text-xs px-3 py-1 bg-blue-600 text-white rounded hover:bg-blue-700"
+          >
+            Add Option
+          </button>
+        </div>
+        
+        <div class="space-y-2">
+          <div
+            v-for="(option, index) in attributes.options"
+            :key="index"
+            class="flex gap-2 items-center bg-white p-3 rounded border"
+          >
+            <input
+              v-model="option.value"
+              type="text"
+              placeholder="Value"
+              class="flex-1 px-2 py-1 border rounded text-sm"
+            />
+            <input
+              v-model="option.label"
+              type="text"
+              placeholder="Label"
+              class="flex-1 px-2 py-1 border rounded text-sm"
+            />
+            <button
+              type="button"
+              @click="removeOption(index)"
+              class="text-red-600 hover:text-red-800 text-sm font-medium"
+            >
+              Remove
+            </button>
+          </div>
+        </div>
+
+        <p v-if="!attributes.options || attributes.options.length === 0" class="text-sm text-gray-500 mt-4">
+          No options defined yet
+        </p>
+      </div>
+    </div>
+
+    <!-- Date Field Attributes -->
+    <div v-if="fieldType === 'date' || fieldType === 'datetime'" class="space-y-4">
+      <div class="grid grid-cols-4 gap-4">
+        <label class="text-sm font-medium leading-8">Include Time</label>
+        <div class="col-span-3 flex items-center">
+          <input
+            v-if="fieldType === 'datetime'"
+            :checked="true"
+            type="checkbox"
+            disabled
+            class="w-4 h-4 border rounded"
+          />
+          <span class="ml-2 text-sm text-gray-600">{{ fieldType === 'datetime' ? 'Yes' : 'No' }}</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- Lookup Field Attributes -->
+    <div v-if="fieldType === 'lookup' || fieldType === 'belongsTo'" class="space-y-4">
+      <div class="grid grid-cols-4 gap-4">
+        <label class="text-sm font-medium leading-8">Related Object</label>
+        <div class="col-span-3">
+          <input
+            v-model="attributes.relationObject"
+            type="text"
+            disabled
+            placeholder="Selected during field creation"
+            class="w-full px-3 py-2 border rounded-md text-sm bg-gray-100 disabled:text-gray-600"
+          />
+          <p class="text-xs text-gray-500 mt-1">Cannot change relationship after creation</p>
+        </div>
+      </div>
+      <div class="grid grid-cols-4 gap-4">
+        <label class="text-sm font-medium leading-8">Display Field</label>
+        <div class="col-span-3">
+          <input
+            v-model="attributes.relationDisplayField"
+            type="text"
+            placeholder="e.g., name, label (field to show in lookup)"
+            class="w-full px-3 py-2 border rounded-md text-sm"
+          />
+          <p class="text-xs text-gray-500 mt-1">Which field from the related object to display</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+
+interface FieldOption {
+  value: string | number
+  label: string
+}
+
+interface TypeAttributes {
+  maxLength?: number
+  rows?: number
+  scale?: number
+  min?: number
+  max?: number
+  prefix?: string
+  suffix?: string
+  options?: FieldOption[]
+  relationObject?: string
+  relationDisplayField?: string
+}
+
+interface Props {
+  fieldType: string
+  attributes?: TypeAttributes
+}
+
+interface Emits {
+  (e: 'update', data: TypeAttributes): void
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  fieldType: 'text',
+  attributes: () => ({}),
+})
+
+const emit = defineEmits<Emits>()
+
+const attributes = ref<TypeAttributes>({
+  ...props.attributes,
+})
+
+watch(
+  () => props.fieldType,
+  (newType) => {
+    // Reset attributes when field type changes
+    attributes.value = {}
+  },
+)
+
+const addOption = () => {
+  if (!attributes.value.options) {
+    attributes.value.options = []
+  }
+  attributes.value.options.push({
+    value: '',
+    label: '',
+  })
+  emit('update', attributes.value)
+}
+
+const removeOption = (index: number) => {
+  if (attributes.value.options) {
+    attributes.value.options.splice(index, 1)
+    emit('update', attributes.value)
+  }
+}
+
+watch(
+  attributes,
+  (newVal) => {
+    emit('update', newVal)
+  },
+  { deep: true },
+)
+</script>

frontend/components/fields/FieldRenderer.vue

@@ -21,11 +21,13 @@ interface Props {
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  baseUrl: '/central',
+  // Default to runtime objects endpoint; override when consuming central entities
+  baseUrl: '/runtime/objects',
 })
 
 const emit = defineEmits<{
   'update:modelValue': [value: any]
+  'update:relatedFields': [value: Record<string, any>]
 }>()
 
 const { api } = useApi()
@@ -39,6 +41,10 @@ const isReadOnly = computed(() => props.readonly || props.field.isReadOnly || pr
 const isEditMode = computed(() => props.mode === ViewMode.EDIT)
 const isListMode = computed(() => props.mode === ViewMode.LIST)
 const isDetailMode = computed(() => props.mode === ViewMode.DETAIL)
+const relationTypeValue = computed(() => {
+  if (!props.field.relationTypeField) return null
+  return props.recordData?.[props.field.relationTypeField] ?? null
+})
 
 // Check if field is a relationship field
 const isRelationshipField = computed(() => {
@@ -99,6 +105,13 @@ const formatValue = (val: any): string => {
       return String(val)
   }
 }
+
+const handleRelationTypeUpdate = (value: string | null) => {
+  if (!props.field.relationTypeField) return
+  emit('update:relatedFields', {
+    [props.field.relationTypeField]: value,
+  })
+}
 </script>
 
 <template>
@@ -161,7 +174,9 @@ const formatValue = (val: any): string => {
         v-if="field.type === FieldType.BELONGS_TO"
         :field="field"
         v-model="value"
+        :relation-type-value="relationTypeValue"
         :base-url="baseUrl"
+        @update:relation-type-value="handleRelationTypeUpdate"
       />
 
       <!-- Text Input -->

frontend/components/fields/FieldTypeSelector.vue

@@ -0,0 +1,140 @@
+<template>
+  <div class="space-y-4">
+    <label class="text-sm font-medium">Field Type</label>
+    
+    <div class="grid grid-cols-2 gap-4">
+      <!-- Text Fields -->
+      <div class="border rounded-lg p-4 cursor-pointer hover:bg-blue-50"
+        :class="{ 'bg-blue-100 border-blue-500': modelValue === 'text' }"
+        @click="$emit('update:modelValue', 'text')">
+        <div class="font-medium text-sm">Text</div>
+        <div class="text-xs text-gray-600">Single line text input</div>
+      </div>
+
+      <div class="border rounded-lg p-4 cursor-pointer hover:bg-blue-50"
+        :class="{ 'bg-blue-100 border-blue-500': modelValue === 'textarea' }"
+        @click="$emit('update:modelValue', 'textarea')">
+        <div class="font-medium text-sm">Textarea</div>
+        <div class="text-xs text-gray-600">Multi-line text input</div>
+      </div>
+
+      <!-- Email & Phone -->
+      <div class="border rounded-lg p-4 cursor-pointer hover:bg-blue-50"
+        :class="{ 'bg-blue-100 border-blue-500': modelValue === 'email' }"
+        @click="$emit('update:modelValue', 'email')">
+        <div class="font-medium text-sm">Email</div>
+        <div class="text-xs text-gray-600">Email with validation</div>
+      </div>
+
+      <div class="border rounded-lg p-4 cursor-pointer hover:bg-blue-50"
+        :class="{ 'bg-blue-100 border-blue-500': modelValue === 'phone' }"
+        @click="$emit('update:modelValue', 'phone')">
+        <div class="font-medium text-sm">Phone</div>
+        <div class="text-xs text-gray-600">Phone number input</div>
+      </div>
+
+      <!-- Numeric Fields -->
+      <div class="border rounded-lg p-4 cursor-pointer hover:bg-blue-50"
+        :class="{ 'bg-blue-100 border-blue-500': modelValue === 'number' }"
+        @click="$emit('update:modelValue', 'number')">
+        <div class="font-medium text-sm">Number</div>
+        <div class="text-xs text-gray-600">Integer or decimal</div>
+      </div>
+
+      <div class="border rounded-lg p-4 cursor-pointer hover:bg-blue-50"
+        :class="{ 'bg-blue-100 border-blue-500': modelValue === 'currency' }"
+        @click="$emit('update:modelValue', 'currency')">
+        <div class="font-medium text-sm">Currency</div>
+        <div class="text-xs text-gray-600">Money amount with symbol</div>
+      </div>
+
+      <!-- Selection Fields -->
+      <div class="border rounded-lg p-4 cursor-pointer hover:bg-blue-50"
+        :class="{ 'bg-blue-100 border-blue-500': modelValue === 'select' }"
+        @click="$emit('update:modelValue', 'select')">
+        <div class="font-medium text-sm">Picklist</div>
+        <div class="text-xs text-gray-600">Dropdown with predefined options</div>
+      </div>
+
+      <div class="border rounded-lg p-4 cursor-pointer hover:bg-blue-50"
+        :class="{ 'bg-blue-100 border-blue-500': modelValue === 'multiSelect' }"
+        @click="$emit('update:modelValue', 'multiSelect')">
+        <div class="font-medium text-sm">Multi-select</div>
+        <div class="text-xs text-gray-600">Select multiple options</div>
+      </div>
+
+      <!-- Boolean -->
+      <div class="border rounded-lg p-4 cursor-pointer hover:bg-blue-50"
+        :class="{ 'bg-blue-100 border-blue-500': modelValue === 'boolean' }"
+        @click="$emit('update:modelValue', 'boolean')">
+        <div class="font-medium text-sm">Checkbox</div>
+        <div class="text-xs text-gray-600">True/False toggle</div>
+      </div>
+
+      <!-- Date Fields -->
+      <div class="border rounded-lg p-4 cursor-pointer hover:bg-blue-50"
+        :class="{ 'bg-blue-100 border-blue-500': modelValue === 'date' }"
+        @click="$emit('update:modelValue', 'date')">
+        <div class="font-medium text-sm">Date</div>
+        <div class="text-xs text-gray-600">Date picker without time</div>
+      </div>
+
+      <div class="border rounded-lg p-4 cursor-pointer hover:bg-blue-50"
+        :class="{ 'bg-blue-100 border-blue-500': modelValue === 'datetime' }"
+        @click="$emit('update:modelValue', 'datetime')">
+        <div class="font-medium text-sm">DateTime</div>
+        <div class="text-xs text-gray-600">Date and time picker</div>
+      </div>
+
+      <!-- Relationship Fields -->
+      <div class="border rounded-lg p-4 cursor-pointer hover:bg-blue-50"
+        :class="{ 'bg-blue-100 border-blue-500': modelValue === 'lookup' }"
+        @click="$emit('update:modelValue', 'lookup')">
+        <div class="font-medium text-sm">Lookup</div>
+        <div class="text-xs text-gray-600">Link to another object</div>
+      </div>
+
+      <!-- Rich Content -->
+      <div class="border rounded-lg p-4 cursor-pointer hover:bg-blue-50"
+        :class="{ 'bg-blue-100 border-blue-500': modelValue === 'markdown' }"
+        @click="$emit('update:modelValue', 'markdown')">
+        <div class="font-medium text-sm">Rich Text</div>
+        <div class="text-xs text-gray-600">Markdown editor</div>
+      </div>
+
+      <!-- File -->
+      <div class="border rounded-lg p-4 cursor-pointer hover:bg-blue-50"
+        :class="{ 'bg-blue-100 border-blue-500': modelValue === 'file' }"
+        @click="$emit('update:modelValue', 'file')">
+        <div class="font-medium text-sm">File</div>
+        <div class="text-xs text-gray-600">File upload</div>
+      </div>
+
+      <!-- URL -->
+      <div class="border rounded-lg p-4 cursor-pointer hover:bg-blue-50"
+        :class="{ 'bg-blue-100 border-blue-500': modelValue === 'url' }"
+        @click="$emit('update:modelValue', 'url')">
+        <div class="font-medium text-sm">URL</div>
+        <div class="text-xs text-gray-600">Web address with validation</div>
+      </div>
+
+      <!-- Color -->
+      <div class="border rounded-lg p-4 cursor-pointer hover:bg-blue-50"
+        :class="{ 'bg-blue-100 border-blue-500': modelValue === 'color' }"
+        @click="$emit('update:modelValue', 'color')">
+        <div class="font-medium text-sm">Color</div>
+        <div class="text-xs text-gray-600">Color picker</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  modelValue: string
+}>()
+
+defineEmits<{
+  'update:modelValue': [value: string]
+}>()
+</script>

frontend/components/fields/LookupField.vue

@@ -4,6 +4,7 @@ import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/components/ui/command'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
 import { Check, ChevronsUpDown, X } from 'lucide-vue-next'
 import { cn } from '@/lib/utils'
 import type { FieldConfig } from '@/types/field-types'
@@ -13,15 +14,18 @@ interface Props {
   modelValue: string | null // The ID of the selected record
   readonly?: boolean
   baseUrl?: string // Base API URL, defaults to '/central'
+  relationTypeValue?: string | null
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  baseUrl: '/central',
+  // Default to runtime objects endpoint; override when consuming central entities
+  baseUrl: '/runtime/objects',
   modelValue: null,
 })
 
 const emit = defineEmits<{
   'update:modelValue': [value: string | null]
+  'update:relationTypeValue': [value: string | null]
 }>()
 
 const { api } = useApi()
@@ -30,10 +34,21 @@ const searchQuery = ref('')
 const records = ref<any[]>([])
 const loading = ref(false)
 const selectedRecord = ref<any | null>(null)
+const selectedRelationObject = ref<string | null>(null)
 
 // Get the relation configuration
-const relationObject = computed(() => props.field.relationObject || props.field.apiName.replace('Id', ''))
+const availableRelationObjects = computed(() => {
+  if (props.field.relationObjects && props.field.relationObjects.length > 0) {
+    return props.field.relationObjects
+  }
+
+  const fallback = props.field.relationObject || props.field.apiName.replace('Id', '')
+  return fallback ? [fallback] : []
+})
+
+const relationObject = computed(() => selectedRelationObject.value || availableRelationObjects.value[0])
 const displayField = computed(() => props.field.relationDisplayField || 'name')
+const shouldShowTypeSelector = computed(() => availableRelationObjects.value.length > 1)
 
 // Display value for the selected record
 const displayValue = computed(() => {
@@ -54,11 +69,18 @@ const filteredRecords = computed(() => {
 
 // Fetch available records for the lookup
 const fetchRecords = async () => {
+  if (!relationObject.value) {
+    records.value = []
+    return
+  }
+
   loading.value = true
   try {
     const endpoint = `${props.baseUrl}/${relationObject.value}/records`
     const response = await api.get(endpoint)
-    records.value = response || []
+    records.value = Array.isArray(response)
+      ? response
+      : response?.data || response?.records || []
     
     // If we have a modelValue, find the selected record
     if (props.modelValue) {
@@ -71,6 +93,15 @@ const fetchRecords = async () => {
   }
 }
 
+const handleRelationTypeChange = (value: string) => {
+  selectedRelationObject.value = value
+  emit('update:relationTypeValue', value)
+  searchQuery.value = ''
+  selectedRecord.value = null
+  emit('update:modelValue', null)
+  fetchRecords()
+}
+
 // Handle record selection
 const selectRecord = (record: any) => {
   selectedRecord.value = record
@@ -93,7 +124,24 @@ watch(() => props.modelValue, (newValue) => {
   }
 })
 
+watch(() => props.relationTypeValue, (newValue) => {
+  if (!newValue) return
+  if (availableRelationObjects.value.includes(newValue)) {
+    selectedRelationObject.value = newValue
+    fetchRecords()
+  }
+})
+
 onMounted(() => {
+  selectedRelationObject.value = props.relationTypeValue && availableRelationObjects.value.includes(props.relationTypeValue)
+    ? props.relationTypeValue
+    : availableRelationObjects.value[0] || null
+
+  // Emit initial relation type if we have a default selection so hidden relationTypeField gets populated
+  if (selectedRelationObject.value) {
+    emit('update:relationTypeValue', selectedRelationObject.value)
+  }
+
   fetchRecords()
 })
 </script>
@@ -102,6 +150,25 @@ onMounted(() => {
   <div class="lookup-field space-y-2">
     <Popover v-model:open="open">
       <div class="flex gap-2">
+        <Select
+          v-if="shouldShowTypeSelector"
+          :model-value="relationObject"
+          :disabled="readonly || loading"
+          @update:model-value="handleRelationTypeChange"
+        >
+          <SelectTrigger class="w-40">
+            <SelectValue placeholder="Select type" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem
+              v-for="option in availableRelationObjects"
+              :key="option"
+              :value="option"
+            >
+              {{ option }}
+            </SelectItem>
+          </SelectContent>
+        </Select>
         <PopoverTrigger as-child>
           <Button
             variant="outline"
@@ -130,7 +197,7 @@ onMounted(() => {
         <Command>
           <CommandInput 
             v-model="searchQuery"
-            placeholder="Search..." 
+            :placeholder="relationObject ? `Search ${relationObject}...` : 'Search...'" 
           />
           <CommandEmpty>
             {{ loading ? 'Loading...' : 'No results found.' }}