fix: add reverse-reference child discovery and fix empty related data

- RecordDetailView now scans all objects for lookup/master_detail fields
  pointing back to the current object (e.g., order_item.order → order),
  fetches filtered child records, and passes them as explicit related entries
- DetailView's effectiveRelated now passes api: objectName for auto-discovered
  forward references so RelatedList can fetch data via dataSource
- RelatedList syncs internal state when data prop changes (fixes stale
  initial state from useState(data))

Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>

Author: Copilot

apps/console/src/__tests__/RecordDetailEdit.test.tsx

@@ -193,6 +193,94 @@ describe('RecordDetailView — detail schema features', () => {
     const activeElements = screen.getAllByText('Active');
     expect(activeElements.length).toBeGreaterThanOrEqual(1);
   });
+  it('discovers and renders reverse-reference child objects (e.g., order_item → order)', async () => {
+    const orderItemData = [
+      { id: 'item-1', name: 'Widget A', quantity: 2 },
+      { id: 'item-2', name: 'Widget B', quantity: 5 },
+    ];
+
+    const ds: DataSource = {
+      async getObjectSchema() {
+        return {
+          name: 'order',
+          label: 'Order',
+          fields: {
+            name: { name: 'name', label: 'Name', type: 'text' },
+          },
+        };
+      },
+      findOne: vi.fn().mockResolvedValue({ id: 'order-1', name: 'Order #1' }),
+      find: vi.fn().mockImplementation((objectName: string) => {
+        if (objectName === 'order_item') {
+          return Promise.resolve({ data: orderItemData });
+        }
+        return Promise.resolve({ data: [] });
+      }),
+      create: vi.fn().mockResolvedValue({ id: '1' }),
+      update: vi.fn().mockResolvedValue({ id: '1' }),
+      delete: vi.fn().mockResolvedValue(true),
+    } as any;
+
+    const objectsWithChild = [
+      {
+        name: 'order',
+        label: 'Order',
+        fields: {
+          name: { name: 'name', label: 'Name', type: 'text' },
+        },
+      },
+      {
+        name: 'order_item',
+        label: 'Order Item',
+        fields: {
+          name: { name: 'name', label: 'Line Item', type: 'text' },
+          order: { name: 'order', label: 'Order', type: 'lookup', reference_to: 'order' },
+          quantity: { name: 'quantity', label: 'Quantity', type: 'number' },
+        },
+      },
+    ];
+
+    render(
+      <MemoryRouter initialEntries={['/order/record/order-1']}>
+        <Routes>
+          <Route
+            path="/:objectName/record/:recordId"
+            element={
+              <RecordDetailView
+                dataSource={ds}
+                objects={objectsWithChild}
+                onEdit={vi.fn()}
+              />
+            }
+          />
+        </Routes>
+      </MemoryRouter>,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByRole('heading', { level: 1 })).toHaveTextContent('Order #1');
+    });
+
+    // Should fetch child records filtered by parent ID
+    await waitFor(() => {
+      expect(ds.find).toHaveBeenCalledWith('order_item', {
+        $filter: "order eq 'order-1'",
+      });
+    });
+
+    // Related tab should appear (child object discovered)
+    await waitFor(() => {
+      expect(screen.getByRole('tab', { name: /Related/ })).toBeInTheDocument();
+    });
+
+    // Click on the Related tab to reveal its content
+    await userEvent.click(screen.getByRole('tab', { name: /Related/ }));
+
+    // The child object title should appear in the related list card
+    await waitFor(() => {
+      expect(screen.getByText('Order Item')).toBeInTheDocument();
+    });
+  });
 });
 
 describe('RecordDetailView — recordId handling', () => {

apps/console/src/components/RecordDetailView.tsx

@@ -6,7 +6,7 @@
  * the object field definitions.
  */
 
-import { useState, useEffect, useCallback } from 'react';
+import { useState, useEffect, useCallback, useMemo } from 'react';
 import { useParams } from 'react-router-dom';
 import { DetailView, RecordChatterPanel } from '@object-ui/plugin-detail';
 import { Empty, EmptyTitle, EmptyDescription } from '@object-ui/components';
@@ -35,13 +35,53 @@ export function RecordDetailView({ dataSource, objects, onEdit }: RecordDetailVi
   const [isLoading, setIsLoading] = useState(true);
   const [feedItems, setFeedItems] = useState<FeedItem[]>([]);
   const [recordViewers, setRecordViewers] = useState<PresenceUser[]>([]);
+  const [childRelatedData, setChildRelatedData] = useState<Record<string, any[]>>({});
   const objectDef = objects.find((o: any) => o.name === objectName);
 
   // Use the URL recordId as-is — it contains the actual record _id.
   // Navigation code passes `record._id || record.id` directly into the URL
   // without adding any prefix, so no stripping is needed.
   const pureRecordId = recordId;
 
+  // Discover reverse references: other objects with lookup/master_detail fields
+  // pointing to the current object (e.g., order_item.order → order).
+  const childRelations = useMemo(() => {
+    if (!objectDef || !objects) return [];
+    const relations: Array<{ childObject: string; childLabel: string; referenceField: string }> = [];
+    for (const obj of objects) {
+      if (obj.name === objectDef.name) continue;
+      for (const [fieldName, fieldDef] of Object.entries<any>(obj.fields || {})) {
+        if (
+          fieldDef &&
+          (fieldDef.type === 'lookup' || fieldDef.type === 'master_detail') &&
+          fieldDef.reference_to === objectDef.name
+        ) {
+          relations.push({
+            childObject: obj.name,
+            childLabel: obj.label || obj.name,
+            referenceField: fieldName,
+          });
+        }
+      }
+    }
+    return relations;
+  }, [objectDef, objects]);
+
+  // Fetch related child records for each reverse reference
+  useEffect(() => {
+    if (!dataSource || !pureRecordId || childRelations.length === 0) return;
+    for (const { childObject, referenceField } of childRelations) {
+      dataSource.find(childObject, {
+        $filter: `${referenceField} eq '${pureRecordId}'`,
+      })
+        .then((res: any) => {
+          const items = Array.isArray(res) ? res : res?.data || [];
+          setChildRelatedData(prev => ({ ...prev, [childObject]: items }));
+        })
+        .catch(() => {});
+    }
+  }, [dataSource, pureRecordId, childRelations]);
+
   const currentUser = user
     ? { id: user.id, name: user.name, avatar: user.image }
     : FALLBACK_USER;
@@ -275,6 +315,13 @@ export function RecordDetailView({ dataSource, objects, onEdit }: RecordDetailVi
   const sectionGroups: SectionGroup[] | undefined =
     objectDef.views?.detail?.sectionGroups ?? objectDef.views?.form?.sectionGroups;
 
+  // Build related entries from reverse-reference child objects
+  const related = childRelations.map(({ childObject, childLabel }) => ({
+    title: childLabel,
+    type: 'table' as const,
+    data: childRelatedData[childObject] || [],
+  }));
+
   const detailSchema: DetailViewSchema = {
     type: 'detail-view',
     objectName: objectDef.name,
@@ -287,6 +334,7 @@ export function RecordDetailView({ dataSource, objects, onEdit }: RecordDetailVi
     sections,
     autoTabs: true,
     autoDiscoverRelated: true,
+    ...(related.length > 0 && { related }),
     ...(highlightFields.length > 0 && { highlightFields }),
     ...(sectionGroups && sectionGroups.length > 0 && { sectionGroups }),
     ...(recordHeaderActions.length > 0 && {

packages/plugin-detail/src/DetailView.tsx

@@ -324,6 +324,7 @@ export const DetailView: React.FC<DetailViewProps> = ({
     return discoveredRelated.map((r) => ({
       title: r.title,
       type: r.type,
+      api: r.objectName,
       data: [] as any[],
     }));
   }, [schema.related, discoveredRelated]);

packages/plugin-detail/src/RelatedList.tsx

@@ -78,6 +78,11 @@ export const RelatedList: React.FC<RelatedListProps> = ({
   const [filterText, setFilterText] = React.useState('');
   const { t } = useDetailTranslation();
 
+  // Sync internal state when data prop changes (e.g., parent fetches async data)
+  React.useEffect(() => {
+    setRelatedData(data);
+  }, [data]);
+
   React.useEffect(() => {
     if (api && !data.length) {
       setLoading(true);