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

2026-01-16 18:01:26 +01:00
parent 51c82d3d95
commit 20fc90a3fb
62 changed files with 6613 additions and 278 deletions
--- a/frontend/components/AIChatBar.vue
+++ b/frontend/components/AIChatBar.vue
@@ -8,26 +8,101 @@ import {
 } from '@/components/ui/input-group'
 import { Separator } from '@/components/ui/separator'
 import { ArrowUp } from 'lucide-vue-next'
+import { useRoute } from 'vue-router'
+import { useApi } from '@/composables/useApi'

 const chatInput = ref('')
+const messages = ref<{ role: 'user' | 'assistant'; text: string }[]>([])
+const sending = ref(false)
+const route = useRoute()
+const { api } = useApi()

-const handleSend = () => {
+const buildContext = () => {
+  const recordId = route.params.recordId ? String(route.params.recordId) : undefined
+  const viewParam = route.params.view ? String(route.params.view) : undefined
+  const view = viewParam || (recordId ? (recordId === 'new' ? 'edit' : 'detail') : 'list')
+  const objectApiName = route.params.objectName
+    ? String(route.params.objectName)
+    : undefined
+
+  return {
+    objectApiName,
+    view,
+    recordId,
+    route: route.fullPath,
+  }
+}
+
+const handleSend = async () => {
  if (!chatInput.value.trim()) return
-  
-  // TODO: Implement AI chat send functionality
-  console.log('Sending message:', chatInput.value)
+
+  const message = chatInput.value.trim()
+  messages.value.push({ role: 'user', text: message })
  chatInput.value = ''
+  sending.value = true
+
+  try {
+    const history = messages.value.slice(0, -1).slice(-6)
+    const response = await api.post('/ai/chat', {
+      message,
+      history,
+      context: buildContext(),
+    })
+
+    messages.value.push({
+      role: 'assistant',
+      text: response.reply || 'Let me know what else you need.',
+    })
+
+    if (response.action === 'create_record') {
+      window.dispatchEvent(
+        new CustomEvent('ai-record-created', {
+          detail: {
+            objectApiName: buildContext().objectApiName,
+            record: response.record,
+          },
+        }),
+      )
+    }
+  } catch (error: any) {
+    console.error('Failed to send AI chat message:', error)
+    messages.value.push({
+      role: 'assistant',
+      text: error.message || 'Sorry, I ran into an error. Please try again.',
+    })
+  } finally {
+    sending.value = false
+  }
 }
 </script>

 <template>
-  <div class="ai-chat-area sticky bottom-0 z-20 bg-background border-t border-border p-4 bg-neutral-50">
+  <div class="ai-chat-area w-full border-t border-border p-4 bg-neutral-50">
+    <div class="ai-chat-messages mb-4 space-y-3">
+      <div
+        v-for="(message, index) in messages"
+        :key="`${message.role}-${index}`"
+        class="flex"
+        :class="message.role === 'user' ? 'justify-end' : 'justify-start'"
+      >
+        <div
+          class="max-w-[80%] rounded-lg px-3 py-2 text-sm"
+          :class="message.role === 'user' ? 'bg-primary text-primary-foreground' : 'bg-white border border-border text-foreground'"
+        >
+          {{ message.text }}
+        </div>
+      </div>
+      <p v-if="messages.length === 0" class="text-sm text-muted-foreground">
+        Ask the assistant to add records, filter lists, or summarize the page.
+      </p>
+    </div>
    <InputGroup>
      <InputGroupTextarea 
        v-model="chatInput"
        placeholder="Ask, Search or Chat..." 
        class="min-h-[60px] rounded-lg"
        @keydown.enter.exact.prevent="handleSend"
+        :disabled="sending"
      />
      <InputGroupAddon>
        <InputGroupText class="ml-auto">
@@ -37,7 +112,7 @@ const handleSend = () => {
        <InputGroupButton
          variant="default"
          class="rounded-full"
-          :disabled="!chatInput.trim()"
+          :disabled="!chatInput.trim() || sending"
          @click="handleSend"
        >
          <ArrowUp class="size-4" />
@@ -50,8 +125,6 @@ const handleSend = () => {

 <style scoped>
 .ai-chat-area {
-  height: calc(100vh / 6);
-  min-height: 140px;
-  max-height: 200px;
+  min-height: 190px;
 }
 </style>
--- a/frontend/components/AppSidebar.vue
+++ b/frontend/components/AppSidebar.vue
@@ -22,12 +22,19 @@ import { useSoftphone } from '~/composables/useSoftphone'

 const { logout } = useAuth()
 const { api } = useApi()
+const isDrawerOpen = useState<boolean>('bottomDrawerOpen', () => false)
+const drawerTab = useState<string>('bottomDrawerTab', () => 'softphone')
 const softphone = useSoftphone()

 const handleLogout = async () => {
  await logout()
 }

+const openSoftphoneDrawer = () => {
+  drawerTab.value = 'softphone'
+  isDrawerOpen.value = true
+}
+
 // Check if user is central admin (by checking if we're on a central subdomain)
 // Use ref instead of computed to avoid hydration mismatch
 const isCentralAdmin = ref(false)
@@ -335,13 +342,6 @@ const centralAdminMenuItems: Array<{
    </SidebarContent>
    <SidebarFooter>
      <SidebarMenu>
-        <SidebarMenuItem v-if="!isCentralAdmin">
-          <SidebarMenuButton @click="softphone.open" class="cursor-pointer hover:bg-accent">
-            <Phone class="h-4 w-4" />
-            <span>Softphone</span>
-            <span v-if="softphone.hasIncomingCall.value" class="ml-auto h-2 w-2 rounded-full bg-red-500 animate-pulse"></span>
-          </SidebarMenuButton>
-        </SidebarMenuItem>
        <SidebarMenuItem>
          <SidebarMenuButton @click="handleLogout" class="cursor-pointer hover:bg-accent">
            <LogOut class="h-4 w-4" />
--- a/frontend/components/BottomDrawer.vue
+++ b/frontend/components/BottomDrawer.vue
@@ -0,0 +1,454 @@
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import AIChatBar from '@/components/AIChatBar.vue'
+import { Phone, Sparkles, X, ChevronUp, Hash, Mic, MicOff, PhoneIncoming, PhoneOff } from 'lucide-vue-next'
+import { toast } from 'vue-sonner'
+import { useSoftphone } from '~/composables/useSoftphone'
+
+const isDrawerOpen = useState<boolean>('bottomDrawerOpen', () => false)
+const activeTab = useState<string>('bottomDrawerTab', () => 'softphone')
+const drawerHeight = useState<number>('bottomDrawerHeight', () => 240)
+const props = defineProps<{
+  bounds?: { left: number; width: number }
+}>()
+
+const softphone = useSoftphone()
+
+const minHeight = 200
+const collapsedHeight = 72
+const maxHeight = ref(480)
+const isResizing = ref(false)
+const resizeStartY = ref(0)
+const resizeStartHeight = ref(0)
+
+const phoneNumber = ref('')
+const showDialpad = ref(false)
+
+const statusLabel = computed(() => (softphone.isConnected.value ? 'Connected' : 'Offline'))
+
+const clampHeight = (height: number) => Math.min(Math.max(height, minHeight), maxHeight.value)
+
+const updateMaxHeight = () => {
+  if (!process.client) return
+  maxHeight.value = Math.round(window.innerHeight * 0.6)
+  drawerHeight.value = clampHeight(drawerHeight.value)
+}
+
+const openDrawer = (tab?: string) => {
+  if (tab) {
+    activeTab.value = tab
+  }
+  isDrawerOpen.value = true
+  if (activeTab.value === 'softphone') {
+    softphone.open()
+  }
+}
+
+const minimizeDrawer = () => {
+  isDrawerOpen.value = false
+}
+
+const startResize = (event: MouseEvent | TouchEvent) => {
+  if (!isDrawerOpen.value) {
+    isDrawerOpen.value = true
+  }
+  isResizing.value = true
+  resizeStartY.value = 'touches' in event ? event.touches[0].clientY : event.clientY
+  resizeStartHeight.value = drawerHeight.value
+}
+
+const handleResize = (event: MouseEvent | TouchEvent) => {
+  if (!isResizing.value) return
+  const clientY = 'touches' in event ? event.touches[0].clientY : event.clientY
+  const delta = resizeStartY.value - clientY
+  drawerHeight.value = clampHeight(resizeStartHeight.value + delta)
+}
+
+const stopResize = () => {
+  isResizing.value = false
+}
+
+watch(
+  () => softphone.incomingCall.value,
+  (incoming) => {
+    if (incoming) {
+      activeTab.value = 'softphone'
+      isDrawerOpen.value = true
+    }
+  }
+)
+
+watch(
+  () => activeTab.value,
+  (tab) => {
+    if (tab === 'softphone' && isDrawerOpen.value) {
+      softphone.open()
+    }
+  }
+)
+
+watch(
+  () => isDrawerOpen.value,
+  (open) => {
+    if (open && activeTab.value === 'softphone') {
+      softphone.open()
+    }
+  }
+)
+
+const handleCall = async () => {
+  if (!phoneNumber.value) {
+    toast.error('Please enter a phone number')
+    return
+  }
+
+  try {
+    await softphone.initiateCall(phoneNumber.value)
+    phoneNumber.value = ''
+    toast.success('Call initiated')
+  } catch (error: any) {
+    toast.error(error.message || 'Failed to initiate call')
+  }
+}
+
+const handleAccept = async () => {
+  if (!softphone.incomingCall.value) return
+
+  try {
+    await softphone.acceptCall(softphone.incomingCall.value.callSid)
+  } catch (error: any) {
+    toast.error(error.message || 'Failed to accept call')
+  }
+}
+
+const handleReject = async () => {
+  if (!softphone.incomingCall.value) return
+
+  try {
+    await softphone.rejectCall(softphone.incomingCall.value.callSid)
+  } catch (error: any) {
+    toast.error(error.message || 'Failed to reject call')
+  }
+}
+
+const handleEndCall = async () => {
+  if (!softphone.currentCall.value) return
+
+  try {
+    await softphone.endCall(softphone.currentCall.value.callSid)
+  } catch (error: any) {
+    toast.error(error.message || 'Failed to end call')
+  }
+}
+
+const handleDtmf = async (digit: string) => {
+  if (!softphone.currentCall.value) return
+
+  try {
+    await softphone.sendDtmf(softphone.currentCall.value.callSid, digit)
+  } catch (error: any) {
+    console.error('Failed to send DTMF:', error)
+  }
+}
+
+const formatPhoneNumber = (number: string): string => {
+  if (!number) return ''
+  const cleaned = number.replace(/\D/g, '')
+  if (cleaned.length === 11 && cleaned[0] === '1') {
+    return `+1 (${cleaned.slice(1, 4)}) ${cleaned.slice(4, 7)}-${cleaned.slice(7)}`
+  } else if (cleaned.length === 10) {
+    return `(${cleaned.slice(0, 3)}) ${cleaned.slice(3, 6)}-${cleaned.slice(6)}`
+  }
+  return number
+}
+
+const formatDuration = (seconds?: number): string => {
+  if (!seconds) return '--:--'
+  const mins = Math.floor(seconds / 60)
+  const secs = seconds % 60
+  return `${mins}:${secs.toString().padStart(2, '0')}`
+}
+
+onMounted(() => {
+  console.log('BottomDrawer mounted');
+  updateMaxHeight()
+  window.addEventListener('mousemove', handleResize)
+  window.addEventListener('mouseup', stopResize)
+  window.addEventListener('touchmove', handleResize, { passive: true })
+  window.addEventListener('touchend', stopResize)
+  window.addEventListener('resize', updateMaxHeight)
+})
+
+onBeforeUnmount(() => {
+  console.log('BottomDrawer unmounted');
+  window.removeEventListener('mousemove', handleResize)
+  window.removeEventListener('mouseup', stopResize)
+  window.removeEventListener('touchmove', handleResize)
+  window.removeEventListener('touchend', stopResize)
+  window.removeEventListener('resize', updateMaxHeight)
+})
+</script>
+
+<template>
+  <div
+    class="pointer-events-none fixed bottom-0 z-30 flex justify-center px-2"
+    :style="{
+      left: props.bounds?.left ? `${props.bounds.left}px` : '0',
+      width: props.bounds?.width ? `${props.bounds.width}px` : '100vw',
+      right: props.bounds?.width ? 'auto' : '0',
+    }"
+  >
+    <div
+      class="pointer-events-auto w-full border border-border bg-background transition-all duration-200"
+      :class="{ 'shadow-2xl': isDrawerOpen }"
+      :style="{ height: `${isDrawerOpen ? drawerHeight : collapsedHeight}px` }"
+    >
+      <div class="grid grid-cols-3 items-center justify-between border-border px-2 py-2">
+
+        <div class="flex">
+
+          <Tabs v-if="!isDrawerOpen" v-model="activeTab" class="flex h-full flex-col">
+            <TabsList class="mx-2 mt-2 grid w-fit grid-cols-2">
+              <TabsTrigger value="softphone" class="flex items-center gap-2" @click="openDrawer('softphone')">
+                <Phone class="h-4 w-4" />
+                Softphone
+                <span
+                  class="inline-flex h-2 w-2 rounded-full"
+                  :class="softphone.isConnected.value ? 'bg-emerald-500' : 'bg-muted-foreground/40'"
+                />
+              </TabsTrigger>
+              <TabsTrigger value="ai" class="flex items-center gap-2" @click="openDrawer('ai')">
+                <Sparkles class="h-4 w-4" />
+                AI Agent
+              </TabsTrigger>
+            </TabsList>
+          </Tabs>
+
+        </div>
+        
+
+        <div
+          class="flex h-6 flex-1 cursor-row-resize items-center justify-center"
+          @mousedown="startResize"
+          @touchstart.prevent="startResize"
+        >
+          <span class="h-1.5 w-12 rounded-full bg-muted" />
+        </div>
+
+        <div class="flex col-start-3 justify-end">
+          <Button variant="ghost" size="icon" class="ml-3" @click="isDrawerOpen ? minimizeDrawer() : openDrawer()">
+            <X v-if="isDrawerOpen" class="h-4 w-4" />
+            <ChevronUp v-else class="h-4 w-4" />
+            <span class="sr-only">{{ isDrawerOpen ? 'Minimize drawer' : 'Expand drawer' }}</span>
+          </Button>
+        </div>
+
+      </div>
+
+      <Tabs v-if="isDrawerOpen" v-model="activeTab" class="flex h-full flex-col border-t">
+        <TabsList class="mx-4 mt-2 grid w-fit grid-cols-2">
+          <TabsTrigger value="softphone" class="flex items-center gap-2" @click="openDrawer('softphone')">
+            <Phone class="h-4 w-4" />
+            Softphone
+            <span
+              class="inline-flex h-2 w-2 rounded-full"
+              :class="softphone.isConnected.value ? 'bg-emerald-500' : 'bg-muted-foreground/40'"
+            />
+          </TabsTrigger>
+          <TabsTrigger value="ai" class="flex items-center gap-2" @click="openDrawer('ai')">
+            <Sparkles class="h-4 w-4" />
+            AI Agent
+          </TabsTrigger>
+        </TabsList>
+
+        <div v-show="isDrawerOpen" class="flex-1 overflow-hidden">
+          <TabsContent value="softphone" class="h-full">
+            <div class="flex h-full flex-col gap-4 px-6 pb-6 pt-4">
+              <div
+                class="flex items-center justify-between rounded-lg border px-4 py-3"
+                :class="softphone.isConnected.value ? 'border-emerald-200 bg-emerald-50/40' : 'border-border bg-muted/30'"
+              >
+                <div>
+                  <p class="text-sm font-medium">Softphone</p>
+                  <p class="text-xs text-muted-foreground">
+                    {{ softphone.isConnected.value ? 'Ready to place and receive calls.' : 'Connect to start placing calls.' }}
+                  </p>
+                </div>
+                <div class="flex items-center gap-2 text-xs">
+                  <span
+                    class="inline-flex h-2.5 w-2.5 rounded-full"
+                    :class="softphone.isConnected.value ? 'bg-emerald-500' : 'bg-muted-foreground/40'"
+                  />
+                  <span class="text-muted-foreground">{{ statusLabel }}</span>
+                </div>
+              </div>
+
+              <div v-if="softphone.aiSuggestions.value.length > 0" class="space-y-2">
+                <h3 class="text-sm font-semibold flex items-center gap-2">
+                  <span>AI Assistant</span>
+                  <span class="px-2 py-0.5 text-xs bg-blue-100 text-blue-700 rounded-full">
+                    {{ softphone.aiSuggestions.value.length }}
+                  </span>
+                </h3>
+                <div class="space-y-2 max-h-40 overflow-y-auto">
+                  <div
+                    v-for="(suggestion, index) in softphone.aiSuggestions.value.slice(0, 5)"
+                    :key="index"
+                    class="rounded-lg border p-3 text-sm transition-all"
+                    :class="{
+                      'bg-blue-50 border-blue-200': suggestion.type === 'response',
+                      'bg-emerald-50 border-emerald-200': suggestion.type === 'action',
+                      'bg-purple-50 border-purple-200': suggestion.type === 'insight',
+                    }"
+                  >
+                    <div class="flex items-center gap-2 mb-1">
+                      <span
+                        class="text-xs font-semibold uppercase"
+                        :class="{
+                          'text-blue-700': suggestion.type === 'response',
+                          'text-emerald-700': suggestion.type === 'action',
+                          'text-purple-700': suggestion.type === 'insight',
+                        }"
+                      >
+                        {{ suggestion.type }}
+                      </span>
+                      <span class="text-xs text-muted-foreground">just now</span>
+                    </div>
+                    <p class="leading-relaxed">{{ suggestion.text }}</p>
+                  </div>
+                </div>
+              </div>
+
+              <div v-if="softphone.incomingCall.value" class="rounded-lg border border-blue-200 bg-blue-50/60 p-4">
+                <div class="text-center space-y-4">
+                  <div>
+                    <p class="text-sm text-muted-foreground">Incoming call from</p>
+                    <p class="text-2xl font-semibold">
+                      {{ formatPhoneNumber(softphone.incomingCall.value.fromNumber) }}
+                    </p>
+                  </div>
+                  <div class="flex gap-2 justify-center">
+                    <Button @click="handleAccept" class="bg-emerald-500 hover:bg-emerald-600">
+                      <Phone class="h-4 w-4 mr-2" />
+                      Accept
+                    </Button>
+                    <Button @click="handleReject" variant="destructive">
+                      <PhoneOff class="h-4 w-4 mr-2" />
+                      Reject
+                    </Button>
+                  </div>
+                </div>
+              </div>
+
+              <div v-if="softphone.currentCall.value" class="space-y-4">
+                <div class="rounded-lg border bg-muted/40 p-4 text-center space-y-2">
+                  <p class="text-sm text-muted-foreground">
+                    {{ softphone.currentCall.value.direction === 'outbound' ? 'Calling' : 'Connected with' }}
+                  </p>
+                  <p class="text-2xl font-semibold">
+                    {{ formatPhoneNumber(
+                      softphone.currentCall.value.direction === 'outbound'
+                        ? softphone.currentCall.value.toNumber
+                        : softphone.currentCall.value.fromNumber
+                    ) }}
+                  </p>
+                  <p class="text-xs text-muted-foreground capitalize">{{ softphone.callStatus.value }}</p>
+                </div>
+
+                <div class="grid grid-cols-3 gap-2">
+                  <Button variant="outline" size="sm" @click="softphone.toggleMute">
+                    <Mic v-if="!softphone.isMuted.value" class="h-4 w-4" />
+                    <MicOff v-else class="h-4 w-4" />
+                  </Button>
+                  <Button variant="outline" size="sm" @click="showDialpad = !showDialpad">
+                    <Hash class="h-4 w-4" />
+                  </Button>
+                  <Button variant="destructive" size="sm" @click="handleEndCall">
+                    <PhoneOff class="h-4 w-4" />
+                  </Button>
+                </div>
+
+                <div v-if="showDialpad" class="grid grid-cols-3 gap-2">
+                  <Button
+                    v-for="digit in ['1', '2', '3', '4', '5', '6', '7', '8', '9', '*', '0', '#']"
+                    :key="digit"
+                    variant="outline"
+                    size="sm"
+                    @click="handleDtmf(digit)"
+                    class="h-12 text-lg font-semibold"
+                  >
+                    {{ digit }}
+                  </Button>
+                </div>
+              </div>
+
+              <div v-if="!softphone.currentCall.value && !softphone.incomingCall.value" class="space-y-4">
+                <div>
+                  <label class="text-sm font-medium">Phone Number</label>
+                  <Input
+                    v-model="phoneNumber"
+                    placeholder="+1234567890"
+                    class="mt-1"
+                    @keyup.enter="handleCall"
+                  />
+                </div>
+
+                <div class="grid grid-cols-3 gap-2">
+                  <Button
+                    v-for="digit in ['1', '2', '3', '4', '5', '6', '7', '8', '9', '*', '0', '#']"
+                    :key="digit"
+                    variant="outline"
+                    @click="phoneNumber += digit"
+                    class="h-12 text-lg font-semibold"
+                  >
+                    {{ digit }}
+                  </Button>
+                </div>
+
+                <div class="flex gap-2">
+                  <Button @click="handleCall" class="flex-1" :disabled="!phoneNumber">
+                    <Phone class="h-4 w-4 mr-2" />
+                    Call
+                  </Button>
+                  <Button @click="phoneNumber = ''" variant="outline">
+                    <X class="h-4 w-4" />
+                  </Button>
+                </div>
+
+                <div v-if="softphone.callHistory.value.length > 0" class="space-y-2">
+                  <h3 class="text-sm font-semibold">Recent Calls</h3>
+                  <div class="space-y-1 max-h-40 overflow-y-auto">
+                    <div
+                      v-for="call in softphone.callHistory.value.slice(0, 5)"
+                      :key="call.callSid"
+                      class="flex items-center justify-between rounded-md px-2 py-1 hover:bg-muted/40 cursor-pointer"
+                      @click="phoneNumber = call.direction === 'outbound' ? call.toNumber : call.fromNumber"
+                    >
+                      <div class="flex items-center gap-2">
+                        <Phone v-if="call.direction === 'outbound'" class="h-3 w-3 text-emerald-500" />
+                        <PhoneIncoming v-else class="h-3 w-3 text-blue-500" />
+                        <span class="text-sm">
+                          {{ formatPhoneNumber(call.direction === 'outbound' ? call.toNumber : call.fromNumber) }}
+                        </span>
+                      </div>
+                      <span class="text-xs text-muted-foreground">{{ formatDuration(call.duration) }}</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </TabsContent>
+
+          <TabsContent value="ai" class="h-full relative">
+            <div class="flex flex-col justify-end absolute bottom-0 w-full">
+              <AIChatBar />
+            </div>
+          </TabsContent>
+        </div>
+      </Tabs>
+    </div>
+  </div>
+</template>
--- a/frontend/components/PageLayoutEditor.vue
+++ b/frontend/components/PageLayoutEditor.vue
@@ -28,22 +28,44 @@
      </div>

      <!-- Available Fields Sidebar -->
-      <div class="w-80 border-l bg-white dark:bg-slate-950 p-4 overflow-auto">
-        <h3 class="text-lg font-semibold mb-4">Available Fields</h3>
-        <p class="text-xs text-muted-foreground mb-4">Click or drag to add field to grid</p>
-        <div class="space-y-2" id="sidebar-fields">
-          <div
-            v-for="field in availableFields"
-            :key="field.id"
-            class="p-3 border rounded cursor-move bg-white dark:bg-slate-900 hover:border-primary hover:bg-slate-50 dark:hover:bg-slate-800 transition-colors"
-            :data-field-id="field.id"
-            draggable="true"
-            @dragstart="handleDragStart($event, field)"
-            @click="addFieldToGrid(field)"
-          >
-            <div class="font-medium text-sm">{{ field.label }}</div>
-            <div class="text-xs text-muted-foreground">{{ field.apiName }}</div>
-            <div class="text-xs text-muted-foreground">Type: {{ field.type }}</div>
+      <div class="w-80 border-l bg-white dark:bg-slate-950 p-4 overflow-auto space-y-6">
+        <div>
+          <h3 class="text-lg font-semibold mb-4">Available Fields</h3>
+          <p class="text-xs text-muted-foreground mb-4">Click or drag to add field to grid</p>
+          <div class="space-y-2" id="sidebar-fields">
+            <div
+              v-for="field in availableFields"
+              :key="field.id"
+              class="p-3 border rounded cursor-move bg-white dark:bg-slate-900 hover:border-primary hover:bg-slate-50 dark:hover:bg-slate-800 transition-colors"
+              :data-field-id="field.id"
+              draggable="true"
+              @dragstart="handleDragStart($event, field)"
+              @click="addFieldToGrid(field)"
+            >
+              <div class="font-medium text-sm">{{ field.label }}</div>
+              <div class="text-xs text-muted-foreground">{{ field.apiName }}</div>
+              <div class="text-xs text-muted-foreground">Type: {{ field.type }}</div>
+            </div>
+          </div>
+        </div>
+
+        <div v-if="relatedLists.length > 0">
+          <h3 class="text-lg font-semibold mb-2">Related Lists</h3>
+          <p class="text-xs text-muted-foreground mb-4">Select related lists to show on detail views</p>
+          <div class="space-y-2">
+            <label
+              v-for="list in relatedLists"
+              :key="list.relationName"
+              class="flex items-center gap-2 text-sm"
+            >
+              <input
+                type="checkbox"
+                class="h-4 w-4"
+                :value="list.relationName"
+                v-model="selectedRelatedLists"
+              />
+              <span>{{ list.title }}</span>
+            </label>
          </div>
        </div>
      </div>
@@ -52,26 +74,29 @@
 </template>

 <script setup lang="ts">
-import { ref, onMounted, onBeforeUnmount, watch, nextTick } from 'vue'
+import { ref, onMounted, onBeforeUnmount, watch, computed } from 'vue'
 import { GridStack } from 'gridstack'
 import 'gridstack/dist/gridstack.min.css'
 import type { FieldLayoutItem } from '~/types/page-layout'
-import type { FieldConfig } from '~/types/field-types'
+import type { FieldConfig, RelatedListConfig } from '~/types/field-types'
 import { Button } from '@/components/ui/button'

 const props = defineProps<{
  fields: FieldConfig[]
+  relatedLists?: RelatedListConfig[]
  initialLayout?: FieldLayoutItem[]
+  initialRelatedLists?: string[]
  layoutName?: string
 }>()

 const emit = defineEmits<{
-  save: [layout: FieldLayoutItem[]]
+  save: [layout: { fields: FieldLayoutItem[]; relatedLists: string[] }]
 }>()

 const gridContainer = ref<HTMLElement | null>(null)
 let grid: GridStack | null = null
 const gridItems = ref<Map<string, any>>(new Map())
+const selectedRelatedLists = ref<string[]>(props.initialRelatedLists || [])

 // Fields that are already on the grid
 const placedFieldIds = ref<Set<string>>(new Set())
@@ -81,6 +106,10 @@ const availableFields = computed(() => {
  return props.fields.filter(field => !placedFieldIds.value.has(field.id))
 })

+const relatedLists = computed(() => {
+  return props.relatedLists || []
+})
+
 const initGrid = () => {
  if (!gridContainer.value) return

@@ -278,7 +307,10 @@ const handleSave = () => {
    }
  })

-  emit('save', layout)
+  emit('save', {
+    fields: layout,
+    relatedLists: selectedRelatedLists.value,
+  })
 }

 onMounted(() => {
@@ -295,6 +327,13 @@ onBeforeUnmount(() => {
 watch(() => props.fields, () => {
  updatePlacedFields()
 }, { deep: true })
+
+watch(
+  () => props.initialRelatedLists,
+  (value) => {
+    selectedRelatedLists.value = value ? [...value] : []
+  },
+)
 </script>

 <style>
--- a/frontend/components/PageLayoutRenderer.vue
+++ b/frontend/components/PageLayoutRenderer.vue
@@ -17,6 +17,7 @@
          :record-data="modelValue"
          :mode="readonly ? VM.DETAIL : VM.EDIT"
          @update:model-value="handleFieldUpdate(fieldItem.field.apiName, $event)"
+          @update:related-fields="handleRelatedFieldsUpdate"
        />
      </div>
    </div>
@@ -34,6 +35,7 @@
          :record-data="modelValue"
          :mode="readonly ? VM.DETAIL : VM.EDIT"
          @update:model-value="handleFieldUpdate(field.apiName, $event)"
+          @update:related-fields="handleRelatedFieldsUpdate"
        />
      </div>
    </div>
@@ -96,6 +98,17 @@ const handleFieldUpdate = (fieldName: string, value: any) => {
  
  emit('update:modelValue', updated)
 }
+
+const handleRelatedFieldsUpdate = (values: Record<string, any>) => {
+  if (props.readonly) return
+
+  const updated = {
+    ...props.modelValue,
+    ...values,
+  }
+
+  emit('update:modelValue', updated)
+}
 </script>

 <style scoped>
--- a/frontend/components/RelatedList.vue
+++ b/frontend/components/RelatedList.vue
@@ -11,6 +11,8 @@ interface RelatedListConfig {
  relationName: string // e.g., 'domains', 'users'
  objectApiName: string // e.g., 'domains', 'users'
  fields: FieldConfig[] // Fields to display in the list
+  lookupFieldApiName?: string // Used to filter by parentId when fetching
+  parentObjectApiName?: string // Parent object API name, used to derive lookup field if missing
  canCreate?: boolean
  createRoute?: string // Route to create new related record
 }
@@ -19,11 +21,11 @@ interface Props {
  config: RelatedListConfig
  parentId: string
  relatedRecords?: any[] // Can be passed in if already fetched
-  baseUrl?: string // Base API URL, defaults to '/central'
+  baseUrl?: string // Base API URL, defaults to runtime objects
 }

 const props = withDefaults(defineProps<Props>(), {
-  baseUrl: '/central',
+  baseUrl: '/runtime/objects',
  relatedRecords: undefined,
 })

@@ -53,14 +55,48 @@ const fetchRelatedRecords = async () => {
  
  try {
    // Replace :parentId placeholder in the API path
-    let apiPath = props.config.objectApiName.replace(':parentId', props.parentId)
+    const sanitizedBase = props.baseUrl.replace(/\/$/, '')
+    let apiPath = props.config.objectApiName.replace(':parentId', props.parentId).replace(/^\/+/, '')
+    const isRuntimeObjects = sanitizedBase.endsWith('/runtime/objects')
+
+    // Default runtime object routes expect /:objectApiName/records
+    if (isRuntimeObjects && !apiPath.includes('/')) {
+      apiPath = `${apiPath}/records`
+    }
    
-    const response = await api.get(`${props.baseUrl}/${apiPath}`, {
+    const findLookupKey = () => {
+      if (props.config.lookupFieldApiName) return props.config.lookupFieldApiName
+
+      const parentName = props.config.parentObjectApiName?.toLowerCase()
+      const fields = props.config.fields || []
+
+      const parentMatch = fields.find(field => {
+        const relation = (field as any).relationObject || (field as any).referenceObject
+        return relation && parentName && relation.toLowerCase() === parentName
+      })
+      if (parentMatch?.apiName) return parentMatch.apiName
+
+      const lookupMatch = fields.find(
+        field => (field.type || '').toString().toLowerCase() === 'lookup'
+      )
+      if (lookupMatch?.apiName) return lookupMatch.apiName
+
+      const idMatch = fields.find(field =>
+        field.apiName?.toLowerCase().endsWith('id')
+      )
+      if (idMatch?.apiName) return idMatch.apiName
+
+      return 'parentId'
+    }
+
+    const lookupKey = findLookupKey()
+
+    const response = await api.get(`${sanitizedBase}/${apiPath}`, {
      params: {
-        parentId: props.parentId,
+        [lookupKey]: props.parentId,
      },
    })
-    records.value = response || []
+    records.value = response?.data || response || []
  } catch (err: any) {
    console.error('Error fetching related records:', err)
    error.value = err.message || 'Failed to fetch related records'
@@ -77,20 +113,40 @@ const handleViewRecord = (recordId: string) => {
  emit('navigate', props.config.objectApiName, recordId)
 }

-const formatValue = (value: any, field: FieldConfig): string => {
+const formatValue = (record: any, field: FieldConfig): string => {
+  const value = record?.[field.apiName]
  if (value === null || value === undefined) return '-'
  
+  const type = (field.type || '').toString().toLowerCase()
+
+  // Lookup fields: use related object display value when available
+  if (type === 'lookup' || type === 'belongsto') {
+    const relationName = field.apiName.replace(/Id$/i, '').toLowerCase()
+    const related = record?.[relationName]
+    if (related && typeof related === 'object') {
+      const displayField = (field as any).relationDisplayField || 'name'
+      if (related[displayField]) return String(related[displayField])
+      // Fallback: first string-ish property or ID
+      const firstStringKey = Object.keys(related).find(
+        key => typeof related[key] === 'string'
+      )
+      if (firstStringKey) return String(related[firstStringKey])
+      if (related.id) return String(related.id)
+    }
+    // If no related object, show raw value
+  }
+
  // Handle different field types
-  if (field.type === 'date') {
+  if (type === 'date') {
    return new Date(value).toLocaleDateString()
  }
-  if (field.type === 'datetime') {
+  if (type === 'datetime' || type === 'date_time' || type === 'date-time') {
    return new Date(value).toLocaleString()
  }
-  if (field.type === 'boolean') {
+  if (type === 'boolean') {
    return value ? 'Yes' : 'No'
  }
-  if (field.type === 'select' && field.options) {
+  if (type === 'select' && field.options) {
    const option = field.options.find(opt => opt.value === value)
    return option?.label || value
  }
@@ -163,7 +219,7 @@ onMounted(() => {
          <TableBody>
            <TableRow v-for="record in displayRecords" :key="record.id">
              <TableCell v-for="field in config.fields" :key="field.id">
-                {{ formatValue(record[field.apiName], field) }}
+                {{ formatValue(record, field) }}
              </TableCell>
              <TableCell>
                <Button
--- a/frontend/components/fields/FieldAttributesCommon.vue
+++ b/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>
--- a/frontend/components/fields/FieldAttributesType.vue
+++ b/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>
--- a/frontend/components/fields/FieldRenderer.vue
+++ b/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 -->
--- a/frontend/components/fields/FieldTypeSelector.vue
+++ b/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>
--- a/frontend/components/fields/LookupField.vue
+++ b/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.' }}
--- a/frontend/components/ui/checkbox/Checkbox.vue
+++ b/frontend/components/ui/checkbox/Checkbox.vue
@@ -18,7 +18,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
  <CheckboxRoot
    v-bind="forwarded"
    :class="
-      cn('grid place-content-center peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
+      cn('grid place-content-center peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
         props.class)"
  >
    <CheckboxIndicator class="grid place-content-center text-current">
--- a/frontend/components/views/DetailViewEnhanced.vue
+++ b/frontend/components/views/DetailViewEnhanced.vue
@@ -87,6 +87,32 @@ const getFieldsBySection = (section: FieldSection) => {
 const usePageLayout = computed(() => {
  return pageLayout.value && pageLayout.value.fields && pageLayout.value.fields.length > 0
 })
+
+const visibleRelatedLists = computed<RelatedListConfig[]>(() => {
+  const relatedLists = props.config.relatedLists || []
+  if (!relatedLists.length) return []
+
+  if (!usePageLayout.value) {
+    return relatedLists
+  }
+
+  const layoutRelatedLists = pageLayout.value?.relatedLists
+  if (!layoutRelatedLists || layoutRelatedLists.length === 0) {
+    // Page layout has no related list selections; show all by default
+    return relatedLists
+  }
+
+  const normalize = (name: string) => name?.toLowerCase().replace(/[^a-z0-9]/g, '')
+  const layoutNormalized = layoutRelatedLists.map(normalize)
+
+  const filtered = relatedLists.filter(list => {
+    const name = list.relationName
+    return layoutRelatedLists.includes(name) || layoutNormalized.includes(normalize(name))
+  })
+
+  // If nothing matched (e.g., relationName changed), fall back to showing all
+  return filtered.length > 0 ? filtered : relatedLists
+})
 </script>

 <template>
@@ -138,7 +164,7 @@ const usePageLayout = computed(() => {
    <Tabs v-else default-value="details" class="space-y-6">
      <TabsList>
        <TabsTrigger value="details">Details</TabsTrigger>
-        <TabsTrigger v-if="config.relatedLists && config.relatedLists.length > 0" value="related">
+        <TabsTrigger v-if="visibleRelatedLists.length > 0" value="related">
          Related
        </TabsTrigger>
        <TabsTrigger v-if="showSharing && data.id" value="sharing">
@@ -224,13 +250,14 @@ const usePageLayout = computed(() => {

      <!-- Related Lists Tab -->
      <TabsContent value="related" class="space-y-6">
-        <div v-if="config.relatedLists && config.relatedLists.length > 0">
+        <div v-if="visibleRelatedLists.length > 0">
          <RelatedList
-            v-for="relatedList in config.relatedLists"
+            v-for="relatedList in visibleRelatedLists"
            :key="relatedList.relationName"
            :config="relatedList"
            :parent-id="data.id"
            :related-records="data[relatedList.relationName]"
+            :base-url="baseUrl"
            @navigate="(objectApiName, recordId) => emit('navigate', objectApiName, recordId)"
            @create="(objectApiName, parentId) => emit('createRelated', objectApiName, parentId)"
          />
--- a/frontend/components/views/EditView.vue
+++ b/frontend/components/views/EditView.vue
@@ -159,6 +159,13 @@ const updateFieldValue = (apiName: string, value: any) => {
    delete errors.value[apiName]
  }
 }
+
+const handleRelatedFieldsUpdate = (values: Record<string, any>) => {
+  formData.value = {
+    ...formData.value,
+    ...values,
+  }
+}
 </script>

 <template>
@@ -223,7 +230,9 @@ const updateFieldValue = (apiName: string, value: any) => {
                    :field="field"
                    :model-value="formData[field.apiName]"
                    :mode="ViewMode.EDIT"
+                    :record-data="formData"
                    @update:model-value="updateFieldValue(field.apiName, $event)"
+                    @update:related-fields="handleRelatedFieldsUpdate"
                  />
                  <p v-if="errors[field.apiName]" class="text-sm text-destructive">
                    {{ errors[field.apiName] }}
@@ -252,7 +261,9 @@ const updateFieldValue = (apiName: string, value: any) => {
                  :field="field"
                  :model-value="formData[field.apiName]"
                  :mode="ViewMode.EDIT"
+                  :record-data="formData"
                  @update:model-value="updateFieldValue(field.apiName, $event)"
+                  @update:related-fields="handleRelatedFieldsUpdate"
                />
                <p v-if="errors[field.apiName]" class="text-sm text-destructive">
                  {{ errors[field.apiName] }}
--- a/frontend/components/views/EditViewEnhanced.vue
+++ b/frontend/components/views/EditViewEnhanced.vue
@@ -176,6 +176,13 @@ const handleFieldUpdate = (fieldName: string, value: any) => {
    delete errors.value[fieldName]
  }
 }
+
+const handleRelatedFieldsUpdate = (values: Record<string, any>) => {
+  formData.value = {
+    ...formData.value,
+    ...values,
+  }
+}
 </script>

 <template>
@@ -259,10 +266,12 @@ const handleFieldUpdate = (fieldName: string, value: any) => {
                  <FieldRenderer
                    :field="field"
                    :model-value="formData[field.apiName]"
+                    :record-data="formData"
                    :mode="ViewMode.EDIT"
                    :error="errors[field.apiName]"
                    :base-url="baseUrl"
                    @update:model-value="handleFieldUpdate(field.apiName, $event)"
+                    @update:related-fields="handleRelatedFieldsUpdate"
                  />
                </div>
              </div>
@@ -283,10 +292,12 @@ const handleFieldUpdate = (fieldName: string, value: any) => {
                <FieldRenderer
                  :field="field"
                  :model-value="formData[field.apiName]"
+                  :record-data="formData"
                  :mode="ViewMode.EDIT"
                  :error="errors[field.apiName]"
                  :base-url="baseUrl"
                  @update:model-value="handleFieldUpdate(field.apiName, $event)"
+                  @update:related-fields="handleRelatedFieldsUpdate"
                />
              </div>
            </div>
--- a/frontend/components/views/ListView.vue
+++ b/frontend/components/views/ListView.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed, onMounted } from 'vue'
+import { ref, computed, watch } from 'vue'
 import {
  Table,
  TableBody,
@@ -12,6 +12,7 @@ import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { Badge } from '@/components/ui/badge'
 import { Checkbox } from '@/components/ui/checkbox'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
 import FieldRenderer from '@/components/fields/FieldRenderer.vue'
 import { ListViewConfig, ViewMode, FieldType } from '@/types/field-types'
 import { ChevronDown, ChevronUp, Search, Plus, Download, Trash2, Edit } from 'lucide-vue-next'
@@ -22,6 +23,8 @@ interface Props {
  loading?: boolean
  selectable?: boolean
  baseUrl?: string
+  totalCount?: number
+  searchSummary?: string
 }

 const props = withDefaults(defineProps<Props>(), {
@@ -29,6 +32,7 @@ const props = withDefaults(defineProps<Props>(), {
  loading: false,
  selectable: false,
  baseUrl: '/runtime/objects',
+  searchSummary: '',
 })

 const emit = defineEmits<{
@@ -41,41 +45,91 @@ const emit = defineEmits<{
  'sort': [field: string, direction: 'asc' | 'desc']
  'search': [query: string]
  'refresh': []
+  'page-change': [page: number, pageSize: number]
+  'load-more': [page: number, pageSize: number]
 }>()

 // State
-const selectedRows = ref<Set<string>>(new Set())
+const normalizeId = (id: any) => String(id)
+const selectedRowIds = ref<string[]>([])
 const searchQuery = ref('')
 const sortField = ref<string>('')
 const sortDirection = ref<'asc' | 'desc'>('asc')
+const currentPage = ref(1)
+const bulkAction = ref('delete')

 // Computed
 const visibleFields = computed(() => 
  props.config.fields.filter(f => f.showOnList !== false)
 )

+const pageSize = computed(() => props.config.pageSize ?? 10)
+const maxFrontendRecords = computed(() => props.config.maxFrontendRecords ?? 500)
+const totalRecords = computed(() => 
+  (props.totalCount && props.totalCount > 0)
+    ? props.totalCount
+    : props.data.length
+)
+const useHybridPagination = computed(() => totalRecords.value > maxFrontendRecords.value)
+const totalPages = computed(() => Math.max(1, Math.ceil(totalRecords.value / pageSize.value)))
+const loadedPages = computed(() => Math.max(1, Math.ceil(props.data.length / pageSize.value)))
+const availablePages = computed(() => {
+  if (useHybridPagination.value && props.totalCount && props.data.length < props.totalCount) {
+    return loadedPages.value
+  }
+  return totalPages.value
+})
+const startIndex = computed(() => (currentPage.value - 1) * pageSize.value)
+const paginatedData = computed(() => {
+  const start = startIndex.value
+  const end = start + pageSize.value
+  return props.data.slice(start, end)
+})
+const pageStart = computed(() => (props.data.length === 0 ? 0 : startIndex.value + 1))
+const pageEnd = computed(() => Math.min(startIndex.value + paginatedData.value.length, totalRecords.value))
+const showPagination = computed(() => totalRecords.value > pageSize.value)
+const canGoPrev = computed(() => currentPage.value > 1)
+const canGoNext = computed(() => currentPage.value < availablePages.value)
+const showLoadMore = computed(() => (
+  useHybridPagination.value &&
+  Boolean(props.totalCount) &&
+  props.data.length < totalRecords.value
+))
+
 const allSelected = computed({
-  get: () => props.data.length > 0 && selectedRows.value.size === props.data.length,
+  get: () => props.data.length > 0 && selectedRowIds.value.length === props.data.length,
  set: (val: boolean) => {
    if (val) {
-      selectedRows.value = new Set(props.data.map(row => row.id))
+      selectedRowIds.value = props.data.map(row => normalizeId(row.id))
    } else {
-      selectedRows.value.clear()
+      selectedRowIds.value = []
    }
    emit('row-select', getSelectedRows())
  },
 })

 const getSelectedRows = () => {
-  return props.data.filter(row => selectedRows.value.has(row.id))
+  const idSet = new Set(selectedRowIds.value)
+  return props.data.filter(row => idSet.has(normalizeId(row.id)))
 }

 const toggleRowSelection = (rowId: string) => {
-  if (selectedRows.value.has(rowId)) {
-    selectedRows.value.delete(rowId)
+  const normalizedId = normalizeId(rowId)
+  const nextSelection = new Set(selectedRowIds.value)
+  nextSelection.has(normalizedId) ? nextSelection.delete(normalizedId) : nextSelection.add(normalizedId)
+  selectedRowIds.value = Array.from(nextSelection)
+  emit('row-select', getSelectedRows())
+}
+
+const setRowSelection = (rowId: string, checked: boolean) => {
+  const normalizedId = normalizeId(rowId)
+  const nextSelection = new Set(selectedRowIds.value)
+  if (checked) {
+    nextSelection.add(normalizedId)
  } else {
-    selectedRows.value.add(rowId)
+    nextSelection.delete(normalizedId)
  }
+  selectedRowIds.value = Array.from(nextSelection)
  emit('row-select', getSelectedRows())
 }

@@ -96,6 +150,49 @@ const handleSearch = () => {
 const handleAction = (actionId: string) => {
  emit('action', actionId, getSelectedRows())
 }
+
+const handleBulkAction = () => {
+  if (bulkAction.value === 'delete') {
+    emit('delete', getSelectedRows())
+    return
+  }
+  emit('action', bulkAction.value, getSelectedRows())
+}
+
+const goToPage = (page: number) => {
+  const nextPage = Math.min(Math.max(page, 1), availablePages.value)
+  if (nextPage !== currentPage.value) {
+    currentPage.value = nextPage
+    emit('page-change', nextPage, pageSize.value)
+  }
+}
+
+const loadMore = () => {
+  const nextPage = Math.ceil(props.data.length / pageSize.value) + 1
+  emit('load-more', nextPage, pageSize.value)
+}
+
+watch(
+  () => [props.data.length, totalRecords.value, pageSize.value],
+  () => {
+    if (currentPage.value > availablePages.value) {
+      currentPage.value = availablePages.value
+    }
+  }
+)
+
+watch(
+  () => props.data,
+  (rows) => {
+    const rowIds = new Set(rows.map(row => normalizeId(row.id)))
+    const nextSelection = selectedRowIds.value.filter(id => rowIds.has(id))
+    if (nextSelection.length !== selectedRowIds.value.length) {
+      selectedRowIds.value = nextSelection
+      emit('row-select', getSelectedRows())
+    }
+  },
+  { deep: true }
+)
 </script>

 <template>
@@ -113,18 +210,31 @@ const handleAction = (actionId: string) => {
            @keyup.enter="handleSearch"
          />
        </div>
+        <p v-if="searchSummary" class="mt-2 text-xs text-muted-foreground">
+          {{ searchSummary }}
+        </p>
      </div>

      <div class="flex items-center gap-2">
        <!-- Bulk Actions -->
-        <template v-if="selectedRows.size > 0">
+        <template v-if="selectedRowIds.length > 0">
          <Badge variant="secondary" class="px-3 py-1">
-            {{ selectedRows.size }} selected
+            {{ selectedRowIds.length }} selected
          </Badge>
-          <Button variant="outline" size="sm" @click="emit('delete', getSelectedRows())">
-            <Trash2 class="h-4 w-4 mr-2" />
-            Delete
-          </Button>
+          <div class="flex items-center gap-2">
+            <Select v-model="bulkAction" @update:model-value="(value) => bulkAction = value">
+              <SelectTrigger class="h-8 w-[180px]">
+                <SelectValue placeholder="Select action" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="delete">Delete selected</SelectItem>
+              </SelectContent>
+            </Select>
+            <Button variant="outline" size="sm" @click="handleBulkAction">
+              <Trash2 class="h-4 w-4 mr-2" />
+              Run
+            </Button>
+          </div>
        </template>

        <!-- Custom Actions -->
@@ -158,7 +268,10 @@ const handleAction = (actionId: string) => {
        <TableHeader>
          <TableRow>
            <TableHead v-if="selectable" class="w-12">
-              <Checkbox v-model:checked="allSelected" />
+              <Checkbox
+                :model-value="allSelected"
+                @update:model-value="(value: boolean) => (allSelected = value)"
+              />
            </TableHead>
            <TableHead
              v-for="field in visibleFields"
@@ -192,15 +305,15 @@ const handleAction = (actionId: string) => {
          </TableRow>
          <TableRow
            v-else
-            v-for="row in data"
+            v-for="row in paginatedData"
            :key="row.id"
            class="cursor-pointer hover:bg-muted/50"
            @click="emit('row-click', row)"
          >
            <TableCell v-if="selectable" @click.stop>
              <Checkbox
-                :checked="selectedRows.has(row.id)"
-                @update:checked="toggleRowSelection(row.id)"
+                :model-value="selectedRowIds.includes(normalizeId(row.id))"
+                @update:model-value="(checked: boolean) => setRowSelection(normalizeId(row.id), checked)"
              />
            </TableCell>
            <TableCell v-for="field in visibleFields" :key="field.id">
@@ -227,7 +340,26 @@ const handleAction = (actionId: string) => {
      </Table>
    </div>

-    <!-- Pagination would go here -->
+    <div v-if="showPagination" class="flex flex-wrap items-center justify-between gap-3 text-sm text-muted-foreground">
+      <div class="flex items-center gap-2">
+        <span>Showing {{ pageStart }}-{{ pageEnd }} of {{ totalRecords }} records</span>
+        <span v-if="showLoadMore">
+          (loaded {{ data.length }})
+        </span>
+      </div>
+      <div class="flex flex-wrap items-center gap-2">
+        <Button variant="outline" size="sm" :disabled="!canGoPrev" @click="goToPage(currentPage - 1)">
+          Previous
+        </Button>
+        <span class="px-2">Page {{ currentPage }} of {{ totalPages }}</span>
+        <Button variant="outline" size="sm" :disabled="!canGoNext" @click="goToPage(currentPage + 1)">
+          Next
+        </Button>
+        <Button v-if="showLoadMore" variant="secondary" size="sm" @click="loadMore">
+          Load more
+        </Button>
+      </div>
+    </div>
  </div>
 </template>

--- a/frontend/composables/useFieldViews.ts
+++ b/frontend/composables/useFieldViews.ts
@@ -50,7 +50,9 @@ export const useFields = () => {
      step: fieldDef.step,
      accept: fieldDef.accept,
      relationObject: fieldDef.relationObject,
+      relationObjects: fieldDef.relationObjects,
      relationDisplayField: fieldDef.relationDisplayField,
+      relationTypeField: fieldDef.relationTypeField,
      
      // Formatting
      format: fieldDef.format,
@@ -76,7 +78,8 @@ export const useFields = () => {
      objectApiName: objectDef.apiName,
      mode: 'list' as ViewMode,
      fields,
-      pageSize: 25,
+      pageSize: 10,
+      maxFrontendRecords: 500,
      searchable: true,
      filterable: true,
      exportable: true,
@@ -97,6 +100,7 @@ export const useFields = () => {
      objectApiName: objectDef.apiName,
      mode: 'detail' as ViewMode,
      fields,
+      relatedLists: objectDef.relatedLists || [],
      ...customConfig,
    }
  }
@@ -180,6 +184,7 @@ export const useViewState = <T extends { id?: string }>(
  apiEndpoint: string
 ) => {
  const records = ref<T[]>([])
+  const totalCount = ref(0)
  const currentRecord = ref<T | null>(null)
  const currentView = ref<'list' | 'detail' | 'edit'>('list')
  const loading = ref(false)
@@ -188,13 +193,51 @@ export const useViewState = <T extends { id?: string }>(

  const { api } = useApi()

-  const fetchRecords = async (params?: Record<string, any>) => {
+  const normalizeListResponse = (response: any) => {
+    const payload: { data: T[]; totalCount: number; page?: number; pageSize?: number } = {
+      data: [],
+      totalCount: 0,
+    }
+
+    if (Array.isArray(response)) {
+      payload.data = response
+      payload.totalCount = response.length
+      return payload
+    }
+
+    if (response && typeof response === 'object') {
+      if (Array.isArray(response.data)) {
+        payload.data = response.data
+      } else if (Array.isArray((response as any).records)) {
+        payload.data = (response as any).records
+      } else if (Array.isArray((response as any).results)) {
+        payload.data = (response as any).results
+      }
+
+      payload.totalCount =
+        response.totalCount ??
+        response.total ??
+        response.count ??
+        payload.data.length ??
+        0
+      payload.page = response.page
+      payload.pageSize = response.pageSize
+    }
+
+    return payload
+  }
+
+  const fetchRecords = async (params?: Record<string, any>, options?: { append?: boolean }) => {
    loading.value = true
    error.value = null
    try {
      const response = await api.get(apiEndpoint, { params })
-      // Handle response - data might be directly in response or in response.data
-      records.value = response.data || response || []
+      const normalized = normalizeListResponse(response)
+      totalCount.value = normalized.totalCount ?? normalized.data.length ?? 0
+      records.value = options?.append
+        ? [...records.value, ...normalized.data]
+        : normalized.data
+      return normalized
    } catch (e: any) {
      error.value = e.message
      console.error('Failed to fetch records:', e)
@@ -227,6 +270,7 @@ export const useViewState = <T extends { id?: string }>(
      // Handle response - it might be the data directly or wrapped in { data: ... }
      const recordData = response.data || response
      records.value.push(recordData)
+      totalCount.value += 1
      currentRecord.value = recordData
      return recordData
    } catch (e: any) {
@@ -269,6 +313,7 @@ export const useViewState = <T extends { id?: string }>(
    try {
      await api.delete(`${apiEndpoint}/${id}`)
      records.value = records.value.filter(r => r.id !== id)
+      totalCount.value = Math.max(0, totalCount.value - 1)
      if (currentRecord.value?.id === id) {
        currentRecord.value = null
      }
@@ -285,8 +330,25 @@ export const useViewState = <T extends { id?: string }>(
    loading.value = true
    error.value = null
    try {
+      const useBulkEndpoint = apiEndpoint.includes('/runtime/objects/')
+      if (useBulkEndpoint) {
+        const response = await api.post(`${apiEndpoint}/bulk-delete`, { ids })
+        const deletedIds = Array.isArray(response?.deletedIds) ? response.deletedIds : ids
+        records.value = records.value.filter(r => !deletedIds.includes(r.id!))
+        totalCount.value = Math.max(0, totalCount.value - deletedIds.length)
+        return {
+          deletedIds,
+          deniedIds: Array.isArray(response?.deniedIds) ? response.deniedIds : [],
+        }
+      }
+
      await Promise.all(ids.map(id => api.delete(`${apiEndpoint}/${id}`)))
      records.value = records.value.filter(r => !ids.includes(r.id!))
+      totalCount.value = Math.max(0, totalCount.value - ids.length)
+      return {
+        deletedIds: ids,
+        deniedIds: [],
+      }
    } catch (e: any) {
      error.value = e.message
      console.error('Failed to delete records:', e)
@@ -324,6 +386,7 @@ export const useViewState = <T extends { id?: string }>(
  return {
    // State
    records,
+    totalCount,
    currentRecord,
    currentView,
    loading,
--- a/frontend/layouts/default.vue
+++ b/frontend/layouts/default.vue
@@ -1,8 +1,7 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { onBeforeUnmount, onMounted, ref } from 'vue'
 import AppSidebar from '@/components/AppSidebar.vue'
-import AIChatBar from '@/components/AIChatBar.vue'
-import SoftphoneDialog from '@/components/SoftphoneDialog.vue'
+import BottomDrawer from '@/components/BottomDrawer.vue'
 import {
  Breadcrumb,
  BreadcrumbItem,
@@ -16,6 +15,9 @@ import { SidebarInset, SidebarProvider, SidebarTrigger } from '@/components/ui/s

 const route = useRoute()
 const { breadcrumbs: customBreadcrumbs } = useBreadcrumbs()
+const drawerBounds = useState('bottomDrawerBounds', () => ({ left: 0, width: 0 }))
+const insetRef = ref<any>(null)
+let resizeObserver: ResizeObserver | null = null

 const breadcrumbs = computed(() => {
  // If custom breadcrumbs are set by the page, use those
@@ -31,12 +33,47 @@ const breadcrumbs = computed(() => {
    isLast: index === paths.length - 1,
  }))
 })
+
+const resolveInsetEl = (): HTMLElement | null => {
+  const maybeComponent = insetRef.value as any
+  if (!maybeComponent) return null
+  return maybeComponent.$el ? maybeComponent.$el as HTMLElement : (maybeComponent as HTMLElement)
+}
+
+const updateBounds = () => {
+  const el = resolveInsetEl()
+  if (!el || typeof el.getBoundingClientRect !== 'function') return
+  const rect = el.getBoundingClientRect()
+  drawerBounds.value = {
+    left: rect.left,
+    width: rect.width,
+  }
+}
+
+onMounted(() => {
+  updateBounds()
+  const el = resolveInsetEl()
+  if (el && 'ResizeObserver' in window) {
+    resizeObserver = new ResizeObserver(updateBounds)
+    resizeObserver.observe(el)
+  }
+  window.addEventListener('resize', updateBounds)
+})
+
+onBeforeUnmount(() => {
+  const el = resolveInsetEl()
+  if (resizeObserver && el) {
+    resizeObserver.unobserve(el)
+  }
+  resizeObserver = null
+  window.removeEventListener('resize', updateBounds)
+})
 </script>

 <template>
  <SidebarProvider>
    <AppSidebar />
-    <SidebarInset class="flex flex-col">
+    <SidebarInset ref="insetRef" class="relative flex flex-col">
      <header
        class="relative z-10 flex h-16 shrink-0 items-center gap-2 bg-background transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12 border-b shadow-md"
      >
@@ -74,11 +111,8 @@ const breadcrumbs = computed(() => {
        <slot />
      </div>

-      <!-- AI Chat Bar Component -->
-      <AIChatBar />
-
-      <!-- Softphone Dialog (Global) -->
-      <SoftphoneDialog />
+      <!-- Keep BottomDrawer bound to the inset width so it aligns with the sidebar layout -->
+      <BottomDrawer :bounds="drawerBounds" />
    </SidebarInset>
  </SidebarProvider>
 </template>
--- a/frontend/pages/[objectName]/[[recordId]]/[[view]].vue
+++ b/frontend/pages/[objectName]/[[recordId]]/[[view]].vue
@@ -1,11 +1,19 @@
 <script setup lang="ts">
-import { ref, computed, onMounted, watch, nextTick } from 'vue'
+import { ref, computed, onMounted, onBeforeUnmount, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useApi } from '@/composables/useApi'
 import { useFields, useViewState } from '@/composables/useFieldViews'
 import ListView from '@/components/views/ListView.vue'
 import DetailView from '@/components/views/DetailViewEnhanced.vue'
 import EditView from '@/components/views/EditViewEnhanced.vue'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog'

 const route = useRoute()
 const router = useRouter()
@@ -38,6 +46,7 @@ const error = ref<string | null>(null)
 // Use view state composable
 const {
  records,
+  totalCount,
  currentRecord,
  loading: dataLoading,
  saving,
@@ -48,6 +57,27 @@ const {
  handleSave,
 } = useViewState(`/runtime/objects/${objectApiName.value}/records`)

+const handleAiRecordCreated = (event: Event) => {
+  const detail = (event as CustomEvent).detail || {}
+  if (
+    detail?.objectApiName &&
+    detail.objectApiName.toLowerCase() !== objectApiName.value.toLowerCase()
+  ) {
+    return
+  }
+  if (view.value === 'list') {
+    initializeListRecords()
+  }
+}
+
+onMounted(() => {
+  window.addEventListener('ai-record-created', handleAiRecordCreated)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('ai-record-created', handleAiRecordCreated)
+})
+
 // Compute breadcrumbs based on the current route and object data
 const updateBreadcrumbs = () => {
  if (!objectDefinition.value) {
@@ -121,6 +151,20 @@ const editConfig = computed(() => {
  return buildEditViewConfig(objectDefinition.value)
 })

+const listPageSize = computed(() => listConfig.value?.pageSize ?? 25)
+const maxFrontendRecords = computed(() => listConfig.value?.maxFrontendRecords ?? 500)
+const searchQuery = ref('')
+const searchSummary = ref('')
+const searchLoading = ref(false)
+const deleteDialogOpen = ref(false)
+const deleteSubmitting = ref(false)
+const pendingDeleteRows = ref<any[]>([])
+const deleteSummary = ref<{ deletedIds: string[]; deniedIds: string[] } | null>(null)
+
+const isSearchActive = computed(() => searchQuery.value.trim().length > 0)
+const pendingDeleteCount = computed(() => pendingDeleteRows.value.length)
+const deniedDeleteCount = computed(() => deleteSummary.value?.deniedIds.length ?? 0)
+
 // Fetch object definition
 const fetchObjectDefinition = async () => {
  try {
@@ -155,17 +199,51 @@ const handleBack = () => {
  router.push(`/${objectApiName.value.toLowerCase()}/`)
 }

+const handleNavigate = (relatedObjectApiName: string, relatedRecordId: string) => {
+  router.push(`/${relatedObjectApiName.toLowerCase()}/${relatedRecordId}/detail`)
+}
+
+const handleCreateRelated = (relatedObjectApiName: string, _parentId: string) => {
+  router.push(`/${relatedObjectApiName.toLowerCase()}/new`)
+}
+
 const handleDelete = async (rows: any[]) => {
-  if (confirm(`Delete ${rows.length} record(s)? This action cannot be undone.`)) {
-    try {
-      const ids = rows.map(r => r.id)
-      await deleteRecords(ids)
+  pendingDeleteRows.value = rows
+  deleteSummary.value = null
+  deleteDialogOpen.value = true
+}
+
+const resetDeleteDialog = () => {
+  deleteDialogOpen.value = false
+  deleteSubmitting.value = false
+  pendingDeleteRows.value = []
+  deleteSummary.value = null
+}
+
+const confirmDelete = async () => {
+  if (pendingDeleteRows.value.length === 0) {
+    resetDeleteDialog()
+    return
+  }
+
+  deleteSubmitting.value = true
+  try {
+    const ids = pendingDeleteRows.value.map(r => r.id)
+    const result = await deleteRecords(ids)
+    const deletedIds = result?.deletedIds ?? []
+    const deniedIds = result?.deniedIds ?? []
+    deleteSummary.value = { deletedIds, deniedIds }
+
+    if (deniedIds.length === 0) {
+      resetDeleteDialog()
      if (view.value !== 'list') {
        await router.push(`/${objectApiName.value.toLowerCase()}/`)
      }
-    } catch (e: any) {
-      error.value = e.message || 'Failed to delete records'
    }
+  } catch (e: any) {
+    error.value = e.message || 'Failed to delete records'
+  } finally {
+    deleteSubmitting.value = false
  }
 }

@@ -191,6 +269,88 @@ const handleCancel = () => {
  }
 }

+const loadListRecords = async (
+  page = 1,
+  options?: { append?: boolean; pageSize?: number }
+) => {
+  const pageSize = options?.pageSize ?? listPageSize.value
+  const result = await fetchRecords({ page, pageSize }, { append: options?.append })
+  const resolvedTotal = result?.totalCount ?? totalCount.value ?? records.value.length
+  totalCount.value = resolvedTotal
+  return result
+}
+
+const searchListRecords = async (
+  page = 1,
+  options?: { append?: boolean; pageSize?: number }
+) => {
+  if (!isSearchActive.value) {
+    return initializeListRecords()
+  }
+  searchLoading.value = true
+  try {
+    const pageSize = options?.pageSize ?? listPageSize.value
+    const response = await api.post('/ai/search', {
+      objectApiName: objectApiName.value,
+      query: searchQuery.value.trim(),
+      page,
+      pageSize,
+    })
+    const data = response?.data ?? []
+    const total = response?.totalCount ?? data.length
+    records.value = options?.append ? [...records.value, ...data] : data
+    totalCount.value = total
+    searchSummary.value = response?.explanation || ''
+    return response
+  } catch (e: any) {
+    error.value = e.message || 'Failed to search records'
+    return null
+  } finally {
+    searchLoading.value = false
+  }
+}
+
+const initializeListRecords = async () => {
+  const firstResult = await loadListRecords(1)
+  const resolvedTotal = firstResult?.totalCount ?? totalCount.value ?? records.value.length
+  const shouldPrefetchAll =
+    resolvedTotal <= maxFrontendRecords.value && records.value.length < resolvedTotal
+
+  if (shouldPrefetchAll) {
+    await loadListRecords(1, { append: false, pageSize: maxFrontendRecords.value })
+  }
+}
+
+const handlePageChange = async (page: number, pageSize: number) => {
+  if (isSearchActive.value) {
+    await searchListRecords(page, { append: page > 1, pageSize })
+    return
+  }
+  const loadedPages = Math.ceil(records.value.length / pageSize)
+  if (page > loadedPages && totalCount.value > records.value.length) {
+    await loadListRecords(page, { append: true, pageSize })
+  }
+}
+
+const handleLoadMore = async (page: number, pageSize: number) => {
+  if (isSearchActive.value) {
+    await searchListRecords(page, { append: true, pageSize })
+    return
+  }
+  await loadListRecords(page, { append: true, pageSize })
+}
+
+const handleSearch = async (query: string) => {
+  const trimmed = query.trim()
+  searchQuery.value = trimmed
+  if (!trimmed) {
+    searchSummary.value = ''
+    await initializeListRecords()
+    return
+  }
+  await searchListRecords(1, { append: false, pageSize: listPageSize.value })
+}
+
 // Watch for route changes
 watch(() => route.params, async (newParams, oldParams) => {
  // Reset current record when navigating to 'new'
@@ -205,7 +365,7 @@ watch(() => route.params, async (newParams, oldParams) => {
  
  // Fetch records if navigating back to list
  if (!newParams.recordId && !newParams.view) {
-    await fetchRecords()
+    await initializeListRecords()
  }
 }, { deep: true })

@@ -214,7 +374,7 @@ onMounted(async () => {
  await fetchObjectDefinition()
  
  if (view.value === 'list') {
-    await fetchRecords()
+    await initializeListRecords()
  } else if (recordId.value && recordId.value !== 'new') {
    await fetchRecord(recordId.value)
  }
@@ -259,13 +419,18 @@ onMounted(async () => {
        v-else-if="view === 'list' && listConfig"
        :config="listConfig"
        :data="records"
-        :loading="dataLoading"
+        :loading="dataLoading || searchLoading"
+        :total-count="totalCount"
+        :search-summary="searchSummary"
        :base-url="`/runtime/objects`"
        selectable
        @row-click="handleRowClick"
        @create="handleCreate"
        @edit="handleEdit"
        @delete="handleDelete"
+        @search="handleSearch"
+        @page-change="handlePageChange"
+        @load-more="handleLoadMore"
      />

      <!-- Detail View -->
@@ -279,6 +444,8 @@ onMounted(async () => {
        @edit="handleEdit"
        @delete="() => handleDelete([currentRecord])"
        @back="handleBack"
+        @navigate="handleNavigate"
+        @create-related="handleCreateRelated"
      />

      <!-- Edit View -->
@@ -295,6 +462,46 @@ onMounted(async () => {
        @back="handleBack"
      />
    </div>
+
+    <Dialog v-model:open="deleteDialogOpen">
+      <DialogContent class="sm:max-w-[520px]">
+        <DialogHeader>
+          <DialogTitle>Delete records</DialogTitle>
+          <DialogDescription>
+            This action cannot be undone.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div class="space-y-2 text-sm">
+          <p>
+            You are about to delete {{ pendingDeleteCount }} record<span v-if="pendingDeleteCount !== 1">s</span>.
+          </p>
+          <p v-if="deleteSummary" class="text-muted-foreground">
+            Deleted {{ deleteSummary.deletedIds.length }} record<span v-if="deleteSummary.deletedIds.length !== 1">s</span>.
+          </p>
+          <p v-if="deniedDeleteCount > 0" class="text-destructive">
+            {{ deniedDeleteCount }} record<span v-if="deniedDeleteCount !== 1">s</span> could not be deleted due to missing permissions.
+          </p>
+          <p v-if="!deleteSummary" class="text-muted-foreground">
+            Records you do not have permission to delete will be skipped.
+          </p>
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" @click="resetDeleteDialog" :disabled="deleteSubmitting">
+            {{ deleteSummary ? 'Close' : 'Cancel' }}
+          </Button>
+          <Button
+            v-if="!deleteSummary"
+            variant="destructive"
+            @click="confirmDelete"
+            :disabled="deleteSubmitting"
+          >
+            Delete
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
  </NuxtLayout>
 </template>

--- a/frontend/pages/app/[appSlug]/[pageSlug].vue
+++ b/frontend/pages/app/[appSlug]/[pageSlug].vue
@@ -71,7 +71,12 @@ const fetchPage = async () => {

    if (page.value.objectApiName) {
      loadingRecords.value = true
-      records.value = await api.get(`/runtime/objects/${page.value.objectApiName}/records`)
+      const response = await api.get(
+        `/runtime/objects/${page.value.objectApiName}/records`
+      )
+      records.value = Array.isArray(response)
+        ? response
+        : response?.data || response?.records || []
    }
  } catch (e: any) {
    error.value = e.message
--- a/frontend/pages/app/objects/[objectName]/[[recordId]]/[[view]].vue
+++ b/frontend/pages/app/objects/[objectName]/[[recordId]]/[[view]].vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed, onMounted, watch, nextTick } from 'vue'
+import { ref, computed, onMounted, onBeforeUnmount, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useApi } from '@/composables/useApi'
 import { useFields, useViewState } from '@/composables/useFieldViews'
@@ -31,6 +31,7 @@ const error = ref<string | null>(null)
 // Use view state composable
 const {
  records,
+  totalCount,
  currentRecord,
  loading: dataLoading,
  saving,
@@ -41,6 +42,27 @@ const {
  handleSave,
 } = useViewState(`/runtime/objects/${objectApiName.value}/records`)

+const handleAiRecordCreated = (event: Event) => {
+  const detail = (event as CustomEvent).detail || {}
+  if (
+    detail?.objectApiName &&
+    detail.objectApiName.toLowerCase() !== objectApiName.value.toLowerCase()
+  ) {
+    return
+  }
+  if (view.value === 'list') {
+    initializeListRecords()
+  }
+}
+
+onMounted(() => {
+  window.addEventListener('ai-record-created', handleAiRecordCreated)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('ai-record-created', handleAiRecordCreated)
+})
+
 // View configs
 const listConfig = computed(() => {
  if (!objectDefinition.value) return null
@@ -61,6 +83,9 @@ const editConfig = computed(() => {
  return buildEditViewConfig(objectDefinition.value)
 })

+const listPageSize = computed(() => listConfig.value?.pageSize ?? 25)
+const maxFrontendRecords = computed(() => listConfig.value?.maxFrontendRecords ?? 500)
+
 // Fetch object definition
 const fetchObjectDefinition = async () => {
  try {
@@ -95,6 +120,14 @@ const handleBack = () => {
  router.push(`/app/objects/${objectApiName.value}/`)
 }

+const handleNavigate = (relatedObjectApiName: string, relatedRecordId: string) => {
+  router.push(`/app/objects/${relatedObjectApiName}/${relatedRecordId}/detail`)
+}
+
+const handleCreateRelated = (relatedObjectApiName: string, _parentId: string) => {
+  router.push(`/app/objects/${relatedObjectApiName}/new`)
+}
+
 const handleDelete = async (rows: any[]) => {
  if (confirm(`Delete ${rows.length} record(s)? This action cannot be undone.`)) {
    try {
@@ -131,6 +164,39 @@ const handleCancel = () => {
  }
 }

+const loadListRecords = async (
+  page = 1,
+  options?: { append?: boolean; pageSize?: number }
+) => {
+  const pageSize = options?.pageSize ?? listPageSize.value
+  const result = await fetchRecords({ page, pageSize }, { append: options?.append })
+  const resolvedTotal = result?.totalCount ?? totalCount.value ?? records.value.length
+  totalCount.value = resolvedTotal
+  return result
+}
+
+const initializeListRecords = async () => {
+  const firstResult = await loadListRecords(1)
+  const resolvedTotal = firstResult?.totalCount ?? totalCount.value ?? records.value.length
+  const shouldPrefetchAll =
+    resolvedTotal <= maxFrontendRecords.value && records.value.length < resolvedTotal
+
+  if (shouldPrefetchAll) {
+    await loadListRecords(1, { append: false, pageSize: maxFrontendRecords.value })
+  }
+}
+
+const handlePageChange = async (page: number, pageSize: number) => {
+  const loadedPages = Math.ceil(records.value.length / pageSize)
+  if (page > loadedPages && totalCount.value > records.value.length) {
+    await loadListRecords(page, { append: true, pageSize })
+  }
+}
+
+const handleLoadMore = async (page: number, pageSize: number) => {
+  await loadListRecords(page, { append: true, pageSize })
+}
+
 // Watch for route changes
 watch(() => route.params, async (newParams, oldParams) => {
  // Reset current record when navigating to 'new'
@@ -145,7 +211,7 @@ watch(() => route.params, async (newParams, oldParams) => {
  
  // Fetch records if navigating back to list
  if (!newParams.recordId && !newParams.view) {
-    await fetchRecords()
+    await initializeListRecords()
  }
 }, { deep: true })

@@ -154,7 +220,7 @@ onMounted(async () => {
  await fetchObjectDefinition()
  
  if (view.value === 'list') {
-    await fetchRecords()
+    await initializeListRecords()
  } else if (recordId.value && recordId.value !== 'new') {
    await fetchRecord(recordId.value)
  }
@@ -196,11 +262,14 @@ onMounted(async () => {
        :config="listConfig"
        :data="records"
        :loading="dataLoading"
+        :total-count="totalCount"
        selectable
        @row-click="handleRowClick"
        @create="handleCreate"
        @edit="handleEdit"
        @delete="handleDelete"
+        @page-change="handlePageChange"
+        @load-more="handleLoadMore"
      />

      <!-- Detail View -->
@@ -212,6 +281,8 @@ onMounted(async () => {
        @edit="handleEdit"
        @delete="() => handleDelete([currentRecord])"
        @back="handleBack"
+        @navigate="handleNavigate"
+        @create-related="handleCreateRelated"
      />

      <!-- Edit View -->
--- a/frontend/pages/central/domains/[[recordId]]/[[view]].vue
+++ b/frontend/pages/central/domains/[[recordId]]/[[view]].vue
@@ -133,6 +133,7 @@ onMounted(async () => {
        :config="domainDetailConfig"
        :data="currentRecord"
        :loading="dataLoading"
+        base-url="/central"
        @edit="handleEdit"
        @delete="() => handleDelete([currentRecord])"
        @back="handleBack"
--- a/frontend/pages/central/tenants/[[recordId]]/[[view]].vue
+++ b/frontend/pages/central/tenants/[[recordId]]/[[view]].vue
@@ -168,6 +168,7 @@ onMounted(async () => {
        :config="tenantDetailConfig"
        :data="currentRecord"
        :loading="dataLoading"
+        base-url="/central"
        @edit="handleEdit"
        @delete="() => handleDelete([currentRecord])"
        @back="handleBack"
--- a/frontend/pages/central/users/[[recordId]]/[[view]].vue
+++ b/frontend/pages/central/users/[[recordId]]/[[view]].vue
@@ -138,6 +138,7 @@ onMounted(async () => {
        :config="centralUserDetailConfig"
        :data="currentRecord"
        :loading="dataLoading"
+        base-url="/central"
        @edit="handleEdit"
        @delete="() => handleDelete([currentRecord])"
        @back="handleBack"
--- a/frontend/pages/setup/objects/[apiName].vue
+++ b/frontend/pages/setup/objects/[apiName].vue
@@ -24,32 +24,78 @@

              <!-- Fields Tab -->
              <TabsContent value="fields" class="mt-6">
-                <div class="space-y-2">
-                  <div
-                    v-for="field in object.fields"
-                    :key="field.id"
-                    class="p-4 border rounded-lg bg-card"
-                  >
-                    <div class="flex items-center justify-between">
-                      <div>
-                        <h3 class="font-semibold">{{ field.label }}</h3>
-                        <p class="text-sm text-muted-foreground">
-                          Type: {{ field.type }} | API Name: {{ field.apiName }}
-                        </p>
-                      </div>
-                      <div class="flex gap-2 text-xs">
-                        <span
-                          v-if="field.isRequired"
-                          class="px-2 py-1 bg-destructive/10 text-destructive rounded"
-                        >
-                          Required
-                        </span>
-                        <span
-                          v-if="field.isUnique"
-                          class="px-2 py-1 bg-primary/10 text-primary rounded"
-                        >
-                          Unique
-                        </span>
+                <div class="space-y-4">
+                  <div class="flex justify-between items-center mb-4">
+                    <h2 class="text-xl font-semibold">Fields</h2>
+                    <Button @click="openFieldDialog('create')">
+                      <Plus class="w-4 h-4 mr-2" />
+                      New Field
+                    </Button>
+                  </div>
+
+                  <div v-if="!object.fields || object.fields.length === 0" class="text-center py-8 text-muted-foreground">
+                    No fields defined yet. Create one to get started.
+                  </div>
+
+                  <div v-else class="space-y-2">
+                    <div
+                      v-for="field in object.fields"
+                      :key="field.id"
+                      class="p-4 border rounded-lg bg-card hover:border-primary transition-colors"
+                    >
+                      <div class="flex items-center justify-between">
+                        <div class="flex-1">
+                          <h3 class="font-semibold">{{ field.label }}</h3>
+                          <p class="text-sm text-muted-foreground">
+                            Type: <span class="font-medium">{{ formatFieldType(field.type) }}</span> | API Name: <span class="font-mono">{{ field.apiName }}</span>
+                          </p>
+                          <p v-if="field.description" class="text-sm text-muted-foreground mt-1">
+                            {{ field.description }}
+                          </p>
+                        </div>
+                        <div class="flex items-center gap-3">
+                          <div class="flex gap-2 text-xs">
+                            <span
+                              v-if="field.isRequired"
+                              class="px-2 py-1 bg-destructive/10 text-destructive rounded"
+                            >
+                              Required
+                            </span>
+                            <span
+                              v-if="field.isUnique"
+                              class="px-2 py-1 bg-primary/10 text-primary rounded"
+                            >
+                              Unique
+                            </span>
+                            <span
+                              v-if="field.isSystem"
+                              class="px-2 py-1 bg-gray-200 text-gray-700 rounded text-xs"
+                            >
+                              System
+                            </span>
+                          </div>
+                          <div class="flex gap-2">
+                            <Button
+                              v-if="!field.isSystem"
+                              variant="ghost"
+                              size="sm"
+                              @click="openFieldDialog('edit', field)"
+                              title="Edit field"
+                            >
+                              ✏️
+                            </Button>
+                            <Button
+                              v-if="!field.isSystem"
+                              variant="ghost"
+                              size="sm"
+                              class="text-destructive hover:text-destructive"
+                              @click="deleteField(field)"
+                              title="Delete field"
+                            >
+                              <Trash2 class="w-4 h-4" />
+                            </Button>
+                          </div>
+                        </div>
                      </div>
                    </div>
                  </div>
@@ -132,6 +178,8 @@
                  <PageLayoutEditor
                    :fields="object.fields"
                    :initial-layout="(selectedLayout.layoutConfig || selectedLayout.layout_config)?.fields || []"
+                    :related-lists="object.relatedLists || []"
+                    :initial-related-lists="(selectedLayout.layoutConfig || selectedLayout.layout_config)?.relatedLists || []"
                    :layout-name="selectedLayout.name"
                    @save="handleSaveLayout"
                  />
@@ -141,6 +189,107 @@
          </div>
        </div>
      </main>
+
+      <!-- Field Management Dialog -->
+      <Teleport to="body">
+        <div
+          v-if="showFieldDialog"
+          class="fixed inset-0 bg-black/50 flex items-center justify-center z-[100]"
+        >
+          <div class="bg-white rounded-lg shadow-lg max-w-3xl w-full mx-4 max-h-[90vh] overflow-y-auto">
+            <div class="sticky top-0 bg-white border-b p-6 flex items-center justify-between">
+              <h2 class="text-2xl font-bold">
+                {{ fieldDialogMode === 'create' ? 'Create New Field' : 'Edit Field' }}
+              </h2>
+              <button
+                @click="closeFieldDialog"
+                class="text-gray-500 hover:text-gray-700 text-2xl font-bold"
+              >
+                ×
+              </button>
+            </div>
+
+            <div class="p-6 space-y-6">
+              <!-- Field Type Selection (only for creation) -->
+              <div v-if="fieldDialogMode === 'create'">
+                <FieldTypeSelector
+                  v-model="fieldForm.type"
+                />
+              </div>
+
+              <!-- Common Attributes -->
+              <div v-if="fieldForm.type">
+                <h3 class="text-lg font-semibold mb-4">Basic Properties</h3>
+                <FieldAttributesCommon
+                  :label="fieldForm.label"
+                  :api-name="fieldForm.apiName"
+                  :description="fieldForm.description"
+                  :placeholder="fieldForm.placeholder"
+                  :help-text="fieldForm.helpText"
+                  :display-order="fieldForm.displayOrder"
+                  :is-required="fieldForm.isRequired"
+                  :is-unique="fieldForm.isUnique"
+                  :default-value="fieldForm.defaultValue"
+                  :is-editing="fieldDialogMode === 'edit'"
+                  :has-data="fieldForm.hasData"
+                  @update="updateCommonAttributes"
+                />
+              </div>
+
+              <!-- Type-Specific Attributes -->
+              <div v-if="fieldForm.type">
+                <h3 class="text-lg font-semibold mb-4">Type-Specific Settings</h3>
+                <FieldAttributesType
+                  :field-type="fieldForm.type"
+                  :attributes="fieldForm.typeAttributes"
+                  @update="updateTypeAttributes"
+                />
+              </div>
+
+              <!-- Lookup Field Selection -->
+              <div v-if="(fieldForm.type === 'lookup' || fieldForm.type === 'belongsTo') && fieldDialogMode === 'create'">
+                <h3 class="text-lg font-semibold mb-4">Related Object</h3>
+                <div class="grid grid-cols-4 gap-4">
+                  <label class="text-sm font-medium leading-8">Select Object</label>
+                  <div class="col-span-3">
+                    <select
+                      v-model="fieldForm.referenceObject"
+                      class="w-full px-3 py-2 border rounded-md text-sm"
+                    >
+                      <option value="">-- Select an object --</option>
+                      <option
+                        v-for="obj in availableObjects"
+                        :key="obj.id"
+                        :value="obj.apiName"
+                      >
+                        {{ obj.label }} ({{ obj.apiName }})
+                      </option>
+                    </select>
+                  </div>
+                </div>
+              </div>
+
+              <!-- Error Message -->
+              <div v-if="fieldDialogError" class="p-3 bg-red-100 text-red-800 rounded-md text-sm">
+                {{ fieldDialogError }}
+              </div>
+
+              <!-- Action Buttons -->
+              <div class="flex gap-3 justify-end pt-4">
+                <Button variant="outline" @click="closeFieldDialog">
+                  Cancel
+                </Button>
+                <Button
+                  :disabled="!fieldForm.label || !fieldForm.apiName || !fieldForm.type"
+                  @click="saveField"
+                >
+                  {{ fieldDialogMode === 'create' ? 'Create Field' : 'Update Field' }}
+                </Button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </Teleport>
    </NuxtLayout>
  </div>
 </template>
@@ -151,6 +300,9 @@ import { Button } from '@/components/ui/button'
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
 import PageLayoutEditor from '@/components/PageLayoutEditor.vue'
 import ObjectAccessSettings from '@/components/ObjectAccessSettings.vue'
+import FieldTypeSelector from '@/components/fields/FieldTypeSelector.vue'
+import FieldAttributesCommon from '@/components/fields/FieldAttributesCommon.vue'
+import FieldAttributesType from '@/components/fields/FieldAttributesType.vue'
 import type { PageLayout, FieldLayoutItem } from '~/types/page-layout'

 const route = useRoute()
@@ -168,6 +320,81 @@ const layouts = ref<PageLayout[]>([])
 const loadingLayouts = ref(false)
 const selectedLayout = ref<PageLayout | null>(null)

+// Field management state
+const showFieldDialog = ref(false)
+const fieldDialogMode = ref<'create' | 'edit'>('create')
+const fieldDialogError = ref<string | null>(null)
+const availableObjects = ref<any[]>([])
+const fieldForm = ref({
+  id: '',
+  label: '',
+  apiName: '',
+  type: '',
+  description: '',
+  placeholder: '',
+  helpText: '',
+  displayOrder: 0,
+  isRequired: false,
+  isUnique: false,
+  defaultValue: '',
+  referenceObject: '',
+  typeAttributes: {},
+  hasData: false,
+})
+
+// Helper to format field type names
+const formatFieldType = (type: string): string => {
+  const typeNames: Record<string, string> = {
+    'TEXT': 'Text',
+    'LONG_TEXT': 'Textarea',
+    'EMAIL': 'Email',
+    'PHONE': 'Phone',
+    'NUMBER': 'Number',
+    'CURRENCY': 'Currency',
+    'PERCENT': 'Percent',
+    'PICKLIST': 'Picklist',
+    'MULTI_PICKLIST': 'Multi-select',
+    'BOOLEAN': 'Checkbox',
+    'DATE': 'Date',
+    'DATE_TIME': 'DateTime',
+    'TIME': 'Time',
+    'URL': 'URL',
+    'LOOKUP': 'Lookup',
+    'FILE': 'File',
+    'IMAGE': 'Image',
+    'JSON': 'JSON',
+  }
+  return typeNames[type] || type
+}
+
+const convertFrontendToBackendType = (frontendType: string): string => {
+  const typeMap: Record<string, string> = {
+    'text': 'TEXT',
+    'textarea': 'LONG_TEXT',
+    'password': 'TEXT',
+    'email': 'EMAIL',
+    'number': 'NUMBER',
+    'currency': 'CURRENCY',
+    'percent': 'PERCENT',
+    'select': 'PICKLIST',
+    'multiSelect': 'MULTI_PICKLIST',
+    'boolean': 'BOOLEAN',
+    'date': 'DATE',
+    'datetime': 'DATE_TIME',
+    'time': 'TIME',
+    'url': 'URL',
+    'color': 'TEXT',
+    'json': 'JSON',
+    'lookup': 'LOOKUP',
+    'belongsTo': 'LOOKUP',
+    'markdown': 'LONG_TEXT',
+    'code': 'LONG_TEXT',
+    'file': 'FILE',
+    'image': 'IMAGE',
+  }
+  return typeMap[frontendType] || 'TEXT'
+}
+
 const fetchObject = async () => {
  try {
    loading.value = true
@@ -180,6 +407,14 @@ const fetchObject = async () => {
  }
 }

+const fetchAvailableObjects = async () => {
+  try {
+    availableObjects.value = await api.get('/setup/objects')
+  } catch (e: any) {
+    console.error('Error fetching available objects:', e)
+  }
+}
+
 const fetchLayouts = async () => {
  if (!object.value) return
  
@@ -194,6 +429,253 @@ const fetchLayouts = async () => {
  }
 }

+const openFieldDialog = async (mode: 'create' | 'edit', field?: any) => {
+  fieldDialogMode.value = mode
+  fieldDialogError.value = null
+
+  if (mode === 'create') {
+    await fetchAvailableObjects()
+    fieldForm.value = {
+      id: '',
+      label: '',
+      apiName: '',
+      type: '',
+      description: '',
+      placeholder: '',
+      helpText: '',
+      displayOrder: (object.value?.fields?.length || 0) + 1,
+      isRequired: false,
+      isUnique: false,
+      defaultValue: '',
+      referenceObject: '',
+      typeAttributes: {},
+      hasData: false,
+    }
+  } else if (field) {
+    // Load field data for editing
+    const uiMetadata = field.ui_metadata ? JSON.parse(field.ui_metadata) : {}
+    fieldForm.value = {
+      id: field.id,
+      label: field.label,
+      apiName: field.apiName,
+      type: convertBackendToFrontendType(field.type),
+      description: field.description || '',
+      placeholder: uiMetadata.placeholder || '',
+      helpText: uiMetadata.helpText || '',
+      displayOrder: field.displayOrder || 0,
+      isRequired: field.isRequired || false,
+      isUnique: field.isUnique || false,
+      defaultValue: field.defaultValue || '',
+      referenceObject: field.referenceObject || '',
+      typeAttributes: extractTypeAttributes(field, uiMetadata),
+      hasData: false, // Would need to fetch this from backend
+    }
+  }
+
+  showFieldDialog.value = true
+}
+
+const convertBackendToFrontendType = (backendType: string): string => {
+  const typeMap: Record<string, string> = {
+    'TEXT': 'text',
+    'LONG_TEXT': 'textarea',
+    'EMAIL': 'email',
+    'PHONE': 'phone',
+    'NUMBER': 'number',
+    'CURRENCY': 'currency',
+    'PERCENT': 'percent',
+    'PICKLIST': 'select',
+    'MULTI_PICKLIST': 'multiSelect',
+    'BOOLEAN': 'boolean',
+    'DATE': 'date',
+    'DATE_TIME': 'datetime',
+    'TIME': 'time',
+    'URL': 'url',
+    'LOOKUP': 'lookup',
+    'FILE': 'file',
+    'IMAGE': 'image',
+    'JSON': 'json',
+  }
+  return typeMap[backendType] || 'text'
+}
+
+const extractTypeAttributes = (field: any, uiMetadata: any): any => {
+  const attrs: any = {}
+
+  if (field.type === 'PICKLIST' || field.type === 'MULTI_PICKLIST') {
+    attrs.options = uiMetadata.options || []
+  }
+
+  if (field.type === 'NUMBER' || field.type === 'CURRENCY') {
+    attrs.scale = field.scale || 0
+    attrs.min = uiMetadata.min
+    attrs.max = uiMetadata.max
+    if (field.type === 'CURRENCY') {
+      attrs.prefix = uiMetadata.prefix || '$'
+    }
+  }
+
+  if (field.type === 'TEXT' && field.length) {
+    attrs.maxLength = field.length
+  }
+
+  if (field.type === 'LONG_TEXT' && uiMetadata.rows) {
+    attrs.rows = uiMetadata.rows
+  }
+
+  if (field.type === 'LOOKUP') {
+    attrs.relationObject = field.referenceObject
+    attrs.relationDisplayField = uiMetadata.relationDisplayField || 'name'
+  }
+
+  return attrs
+}
+
+const closeFieldDialog = () => {
+  showFieldDialog.value = false
+  fieldDialogError.value = null
+}
+
+const updateCommonAttributes = (data: any) => {
+  Object.assign(fieldForm.value, data)
+}
+
+const updateTypeAttributes = (data: any) => {
+  fieldForm.value.typeAttributes = data
+}
+
+const saveField = async () => {
+  fieldDialogError.value = null
+
+  try {
+    // Validate
+    if (!fieldForm.value.label || !fieldForm.value.apiName || !fieldForm.value.type) {
+      fieldDialogError.value = 'Please fill in all required fields'
+      return
+    }
+
+    const apiName = route.params.apiName as string
+
+    // Prepare payload
+    const payload: any = {
+      label: fieldForm.value.label,
+      apiName: fieldForm.value.apiName,
+      type: fieldForm.value.type, // Use frontend type, backend will convert
+      description: fieldForm.value.description,
+      isRequired: fieldForm.value.isRequired,
+      isUnique: fieldForm.value.isUnique,
+      defaultValue: fieldForm.value.defaultValue,
+    }
+
+    // Extract type-specific database fields
+    const typeAttrs = fieldForm.value.typeAttributes || {}
+    
+    // For text fields
+    if (fieldForm.value.type === 'text' && typeAttrs.maxLength) {
+      payload.length = typeAttrs.maxLength
+    }
+
+    // For number and currency fields
+    if ((fieldForm.value.type === 'number' || fieldForm.value.type === 'currency') && typeAttrs.scale !== undefined) {
+      payload.scale = typeAttrs.scale
+      if (typeAttrs.scale > 0) {
+        payload.precision = 10 // Default precision for decimals
+      }
+    }
+
+    // Merge UI metadata
+    const uiMetadata: any = {
+      placeholder: fieldForm.value.placeholder,
+      helpText: fieldForm.value.helpText,
+    }
+
+    // Add type-specific attributes to UI metadata
+    if (fieldForm.value.typeAttributes) {
+      Object.assign(uiMetadata, fieldForm.value.typeAttributes)
+    }
+
+    payload.uiMetadata = uiMetadata
+
+    if (fieldForm.value.referenceObject) {
+      payload.relationObject = fieldForm.value.referenceObject
+      payload.relationDisplayField = fieldForm.value.typeAttributes.relationDisplayField || 'name'
+    }
+
+    let result
+    if (fieldDialogMode.value === 'create') {
+      result = await api.post(`/setup/objects/${apiName}/fields`, payload)
+    } else {
+      // For updates, only send fields that changed
+      const updatePayload: any = {}
+      if (fieldForm.value.label) updatePayload.label = fieldForm.value.label
+      if (fieldForm.value.description) updatePayload.description = fieldForm.value.description
+      if (fieldForm.value.placeholder) updatePayload.placeholder = fieldForm.value.placeholder
+      if (fieldForm.value.helpText) updatePayload.helpText = fieldForm.value.helpText
+      updatePayload.isRequired = fieldForm.value.isRequired
+      updatePayload.isUnique = fieldForm.value.isUnique
+      updatePayload.displayOrder = fieldForm.value.displayOrder
+      if (Object.keys(uiMetadata).length > 0) {
+        updatePayload.uiMetadata = uiMetadata
+      }
+
+      result = await api.put(
+        `/setup/objects/${apiName}/fields/${fieldForm.value.apiName}`,
+        updatePayload,
+      )
+    }
+
+    // Update the object with new field
+    if (fieldDialogMode.value === 'create') {
+      object.value.fields.push(result)
+    } else {
+      const index = object.value.fields.findIndex((f: any) => f.id === fieldForm.value.id)
+      if (index !== -1) {
+        object.value.fields[index] = result
+      }
+    }
+
+    toast.success(
+      fieldDialogMode.value === 'create'
+        ? 'Field created successfully'
+        : 'Field updated successfully',
+    )
+
+    closeFieldDialog()
+  } catch (e: any) {
+    fieldDialogError.value = e.message || 'An error occurred while saving the field'
+    console.error('Error saving field:', e)
+  }
+}
+
+const deleteField = async (field: any) => {
+  if (!confirm(`Are you sure you want to delete the field "${field.label}"? This action cannot be undone.`)) {
+    return
+  }
+
+  try {
+    const apiName = route.params.apiName as string
+    await api.delete(`/setup/objects/${apiName}/fields/${field.apiName}`)
+
+    // Remove from the list
+    object.value.fields = object.value.fields.filter((f: any) => f.id !== field.id)
+
+    // Also remove from page layouts
+    for (const layout of layouts.value) {
+      const layoutConfig = layout.layoutConfig || layout.layout_config || { fields: [] }
+      if (layoutConfig.fields) {
+        layoutConfig.fields = layoutConfig.fields.filter(
+          (f: any) => f.fieldId !== field.id,
+        )
+      }
+    }
+
+    toast.success('Field deleted successfully')
+  } catch (e: any) {
+    toast.error(`Failed to delete field: ${e.message}`)
+    console.error('Error deleting field:', e)
+  }
+}
+
 const handleCreateLayout = async () => {
  const name = prompt('Enter a name for the new layout:')
  if (!name) return
@@ -203,7 +685,7 @@ const handleCreateLayout = async () => {
      name,
      objectId: object.value.id,
      isDefault: layouts.value.length === 0,
-      layoutConfig: { fields: [] },
+      layoutConfig: { fields: [], relatedLists: [] },
    })
    
    layouts.value.push(newLayout)
@@ -219,12 +701,12 @@ const handleSelectLayout = (layout: PageLayout) => {
  selectedLayout.value = layout
 }

-const handleSaveLayout = async (fields: FieldLayoutItem[]) => {
+const handleSaveLayout = async (layoutConfig: { fields: FieldLayoutItem[]; relatedLists: string[] }) => {
  if (!selectedLayout.value) return

  try {
    const updated = await updatePageLayout(selectedLayout.value.id, {
-      layoutConfig: { fields },
+      layoutConfig,
    })
    
    // Update the layout in the list
@@ -254,17 +736,19 @@ const handleDeleteLayout = async (layoutId: string) => {
  }
 }

+const handleAccessUpdate = (orgWideDefault: string) => {
+  if (object.value) {
+    object.value.orgWideDefault = orgWideDefault
+  }
+}
+
 // Watch for tab changes to load layouts
 watch(activeTab, (newTab) => {
  if (newTab === 'layouts' && layouts.value.length === 0 && !loadingLayouts.value) {
    fetchLayouts()
  }
 })
-const handleAccessUpdate = (orgWideDefault: string) => {
-  if (object.value) {
-    object.value.orgWideDefault = orgWideDefault
-  }
-}
+
 onMounted(async () => {
  await fetchObject()
  // If we start on layouts tab, load them
--- a/frontend/types/field-types.ts
+++ b/frontend/types/field-types.ts
@@ -91,7 +91,9 @@ export interface FieldConfig {
  step?: number; // For number
  accept?: string; // For file/image
  relationObject?: string; // For relationship fields
+  relationObjects?: string[]; // For polymorphic relationship fields
  relationDisplayField?: string; // Which field to display for relations
+  relationTypeField?: string; // Field API name storing the selected relation type
  
  // Formatting
  format?: string; // Date format, number format, etc.
@@ -112,6 +114,7 @@ export interface ViewConfig {
 export interface ListViewConfig extends ViewConfig {
  mode: ViewMode.LIST;
  pageSize?: number;
+  maxFrontendRecords?: number;
  searchable?: boolean;
  filterable?: boolean;
  exportable?: boolean;
@@ -123,6 +126,8 @@ export interface RelatedListConfig {
  relationName: string;
  objectApiName: string;
  fields: FieldConfig[];
+  lookupFieldApiName?: string;
+   parentObjectApiName?: string;
  canCreate?: boolean;
  createRoute?: string;
 }
--- a/frontend/types/page-layout.ts
+++ b/frontend/types/page-layout.ts
@@ -8,6 +8,7 @@ export interface FieldLayoutItem {

 export interface PageLayoutConfig {
  fields: FieldLayoutItem[];
+  relatedLists?: string[];
 }

 export interface PageLayout {