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

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>

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" />

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>

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>

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>

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

frontend/components/fields/FieldAttributesCommon.vue

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

frontend/components/fields/FieldAttributesType.vue

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

frontend/components/fields/FieldRenderer.vue

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

frontend/components/fields/FieldTypeSelector.vue

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

frontend/components/fields/LookupField.vue

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

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">

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)"
           />

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] }}

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>

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>