feat: DetailView/RecordDetailView optimizations (type rendering, responsive layout, virtual scroll, metadata-driven highlights, useMemo, collapseWhenEmpty)

- HeaderHighlight: Use getCellRenderer for type-aware display (currency, badge, etc.)
- autoLayout: Add containerWidth parameter for responsive column capping
- RecordChatterPanel: Add collapseWhenEmpty prop for auto-collapsing empty panels
- DetailSection: Add virtualScroll option for progressive batch rendering
- RecordDetailView: Wrap detailSchema in useMemo for performance
- RecordDetailView: Remove hardcoded HIGHLIGHT_FIELD_NAMES, read from objectDef metadata only
- Add comprehensive tests for all changes

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

Author: Copilot

apps/console/src/components/RecordDetailView.tsx

@@ -30,9 +30,6 @@ interface RecordDetailViewProps {
 
 const FALLBACK_USER = { id: 'current-user', name: 'Demo User' };
 
-/** Field names automatically promoted to the highlight banner when present. */
-const HIGHLIGHT_FIELD_NAMES = ['status', 'stage', 'priority', 'category', 'type', 'owner', 'amount'];
-
 export function RecordDetailView({ dataSource, objects, onEdit }: RecordDetailViewProps) {
   const { objectName, recordId } = useParams();
   const { showDebug } = useMetadataInspector();
@@ -398,16 +395,8 @@ export function RecordDetailView({ dataSource, objects, onEdit }: RecordDetailVi
     });
   })();
 
-  // Build highlightFields: prefer explicit config, fallback to auto-detect key fields
-  const explicitHighlight: HighlightField[] | undefined = objectDef.views?.detail?.highlightFields;
-  const highlightFields: HighlightField[] = explicitHighlight
-    ?? Object.entries(objectDef.fields || {})
-      .filter(([key]: [string, any]) => HIGHLIGHT_FIELD_NAMES.includes(key))
-      .map(([key, def]: [string, any]) => ({
-        name: key,
-        label: def.label || key,
-        ...(def.type && { type: def.type }),
-      }));
+  // Build highlightFields: exclusively from objectDef metadata (no hardcoded fallback)
+  const highlightFields: HighlightField[] = objectDef.views?.detail?.highlightFields ?? [];
 
   // Build sectionGroups from objectDef detail/form config if available
   const sectionGroups: SectionGroup[] | undefined =
@@ -421,7 +410,7 @@ export function RecordDetailView({ dataSource, objects, onEdit }: RecordDetailVi
     data: childRelatedData[childObject] || [],
   }));
 
-  const detailSchema: DetailViewSchema = {
+  const detailSchema: DetailViewSchema = useMemo(() => ({
     type: 'detail-view',
     objectName: objectDef.name,
     resourceId: pureRecordId,
@@ -443,7 +432,7 @@ export function RecordDetailView({ dataSource, objects, onEdit }: RecordDetailVi
         actions: recordHeaderActions,
       } as any],
     }),
-  };
+  }), [objectDef, pureRecordId, related, childRelatedData, actionRefreshKey]);
 
   return (
     <div className="h-full bg-background overflow-hidden flex flex-col relative">
@@ -482,13 +471,14 @@ export function RecordDetailView({ dataSource, objects, onEdit }: RecordDetailVi
             <RecordChatterPanel
               config={{
                 position: 'bottom',
-                collapsible: false,
+                collapsible: true,
                 feed: {
                   enableReactions: true,
                   enableThreading: true,
                   showCommentInput: true,
                 },
               }}
+              collapseWhenEmpty
               items={feedItems}
               onAddComment={handleAddComment}
               onAddReply={handleAddReply}

packages/plugin-detail/src/DetailSection.tsx

@@ -53,6 +53,15 @@ export function getResponsiveSpanClass(span: number | undefined, columns: number
   return '';
 }
 
+export interface VirtualScrollOptions {
+  /** Enable virtual scrolling for large field sets */
+  enabled?: boolean;
+  /** Height of each field row in px (default: 60) */
+  itemHeight?: number;
+  /** Number of extra items to render above/below the visible area (default: 3) */
+  overscan?: number;
+}
+
 export interface DetailSectionProps {
   section: DetailViewSectionType;
   data?: any;
@@ -65,6 +74,8 @@ export interface DetailSectionProps {
   isEditing?: boolean;
   /** Callback when a field value changes during inline editing */
   onFieldChange?: (field: string, value: any) => void;
+  /** Virtual scrolling configuration for sections with many fields */
+  virtualScroll?: VirtualScrollOptions;
 }
 
 export const DetailSection: React.FC<DetailSectionProps> = ({
@@ -75,9 +86,11 @@ export const DetailSection: React.FC<DetailSectionProps> = ({
   objectName,
   isEditing = false,
   onFieldChange,
+  virtualScroll,
 }) => {
   const [isCollapsed, setIsCollapsed] = React.useState(section.defaultCollapsed ?? false);
   const [copiedField, setCopiedField] = React.useState<string | null>(null);
+  const [visibleCount, setVisibleCount] = React.useState<number | undefined>(undefined);
   const { t } = useDetailTranslation();
   const { fieldLabel } = useSafeFieldLabel();
 
@@ -213,6 +226,30 @@ export const DetailSection: React.FC<DetailSectionProps> = ({
     );
   };
 
+  // Virtual scroll: progressive batch rendering for large field sets
+  const vsEnabled = virtualScroll?.enabled === true;
+  const vsBatchSize = virtualScroll?.overscan ?? 20;
+
+  React.useEffect(() => {
+    if (!vsEnabled) {
+      setVisibleCount(undefined);
+      return;
+    }
+    // Start with a batch, then progressively reveal more
+    if (layoutFields.length <= vsBatchSize) {
+      setVisibleCount(undefined);
+      return;
+    }
+    setVisibleCount(vsBatchSize);
+    const timer = setTimeout(() => setVisibleCount(undefined), 100);
+    return () => clearTimeout(timer);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [vsEnabled, layoutFields.length, vsBatchSize]);
+
+  const renderedFields = visibleCount !== undefined
+    ? layoutFields.slice(0, visibleCount)
+    : layoutFields;
+
   const content = (
     <div 
       className={cn(
@@ -223,7 +260,7 @@ export const DetailSection: React.FC<DetailSectionProps> = ({
         "grid-cols-1 md:grid-cols-2 lg:grid-cols-3"
       )}
     >
-      {layoutFields.map(renderField)}
+      {renderedFields.map(renderField)}
     </div>
   );
 

packages/plugin-detail/src/DetailView.tsx

@@ -600,7 +600,7 @@ export const DetailView: React.FC<DetailViewProps> = ({
 
       {/* Header Highlight Area */}
       {schema.highlightFields && schema.highlightFields.length > 0 && (
-        <HeaderHighlight fields={schema.highlightFields} data={data} objectName={schema.objectName} />
+        <HeaderHighlight fields={schema.highlightFields} data={data} objectName={schema.objectName} objectSchema={objectSchema} />
       )}
 
       {/* Auto Tabs mode: wrap sections, related, activity into tabs */}

packages/plugin-detail/src/HeaderHighlight.tsx

@@ -8,7 +8,8 @@
 
 import * as React from 'react';
 import { cn, Card, CardContent } from '@object-ui/components';
-import type { HighlightField } from '@object-ui/types';
+import type { HighlightField, FieldMetadata } from '@object-ui/types';
+import { getCellRenderer } from '@object-ui/fields';
 import { useSafeFieldLabel } from '@object-ui/react';
 
 export interface HeaderHighlightProps {
@@ -17,13 +18,16 @@ export interface HeaderHighlightProps {
   className?: string;
   /** Object name for i18n field label resolution */
   objectName?: string;
+  /** Object schema for field metadata enrichment */
+  objectSchema?: any;
 }
 
 export const HeaderHighlight: React.FC<HeaderHighlightProps> = ({
   fields,
   data,
   className,
   objectName,
+  objectSchema,
 }) => {
   const { fieldLabel } = useSafeFieldLabel();
   if (!fields.length || !data) return null;
@@ -48,14 +52,35 @@ export const HeaderHighlight: React.FC<HeaderHighlightProps> = ({
         )}>
           {visibleFields.map((field) => {
             const value = data[field.name];
+            // Enrich field with objectSchema metadata for type-aware rendering
+            const objectDefField = objectSchema?.fields?.[field.name];
+            const resolvedType = field.type || objectDefField?.type;
+            const enrichedField: Record<string, any> = { ...field };
+            if (objectDefField) {
+              if (!field.type && objectDefField.type) enrichedField.type = objectDefField.type;
+              if (objectDefField.options && !enrichedField.options) enrichedField.options = objectDefField.options;
+              if (objectDefField.currency && !enrichedField.currency) enrichedField.currency = objectDefField.currency;
+              if (objectDefField.precision !== undefined && enrichedField.precision === undefined) enrichedField.precision = objectDefField.precision;
+              if (objectDefField.format && !enrichedField.format) enrichedField.format = objectDefField.format;
+            }
+
+            // Use type-aware cell renderer when field type is available
+            let displayValue: React.ReactNode = String(value);
+            if (resolvedType) {
+              const CellRenderer = getCellRenderer(resolvedType);
+              if (CellRenderer) {
+                displayValue = <CellRenderer value={value} field={enrichedField as unknown as FieldMetadata} />;
+              }
+            }
+
             return (
               <div key={field.name} className="flex flex-col gap-0.5">
                 <span className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
                   {field.icon && <span className="mr-1">{field.icon}</span>}
                   {fieldLabel(objectName || '', field.name, field.label)}
                 </span>
                 <span className="text-sm font-semibold truncate">
-                  {String(value)}
+                  {displayValue}
                 </span>
               </div>
             );

packages/plugin-detail/src/RecordChatterPanel.tsx

@@ -38,6 +38,8 @@ export interface RecordChatterPanelProps {
   filterMode?: FeedFilterMode;
   /** Called when filter changes */
   onFilterChange?: (mode: FeedFilterMode) => void;
+  /** When true, auto-collapse panel when there are no feed items */
+  collapseWhenEmpty?: boolean;
   className?: string;
 }
 
@@ -63,12 +65,13 @@ export const RecordChatterPanel: React.FC<RecordChatterPanelProps> = ({
   onToggleSubscription,
   filterMode,
   onFilterChange,
+  collapseWhenEmpty = false,
   className,
 }) => {
   const position = config?.position ?? 'right';
   const width = config?.width ?? '360px';
   const collapsible = config?.collapsible ?? true;
-  const defaultCollapsed = config?.defaultCollapsed ?? false;
+  const defaultCollapsed = (collapseWhenEmpty && items.length === 0) || (config?.defaultCollapsed ?? false);
 
   const [collapsed, setCollapsed] = React.useState(defaultCollapsed);
 
@@ -142,6 +145,7 @@ export const RecordChatterPanel: React.FC<RecordChatterPanelProps> = ({
             onToggleSubscription={onToggleSubscription}
             filterMode={filterMode}
             onFilterChange={onFilterChange}
+            collapseWhenEmpty={collapseWhenEmpty}
             className="border-0 shadow-none"
           />
         </div>
@@ -194,6 +198,7 @@ export const RecordChatterPanel: React.FC<RecordChatterPanelProps> = ({
             onToggleSubscription={onToggleSubscription}
             filterMode={filterMode}
             onFilterChange={onFilterChange}
+            collapseWhenEmpty={collapseWhenEmpty}
           />
         </div>
       )}

packages/plugin-detail/src/__tests__/DetailSection.test.tsx

@@ -391,6 +391,67 @@ describe('DetailSection', () => {
       });
     });
   });
+
+  it('should initially render a batch when virtualScroll is enabled with many fields', () => {
+    const section = {
+      title: 'Virtual',
+      fields: Array.from({ length: 50 }, (_, i) => ({
+        name: `field_${i}`,
+        label: `Field ${i}`,
+        type: 'text',
+      })),
+    };
+    const { container } = render(
+      <DetailSection
+        section={section}
+        data={{}}
+        virtualScroll={{ enabled: true, overscan: 10 }}
+      />
+    );
+    const grid = container.querySelector('.grid');
+    expect(grid).toBeTruthy();
+    // Initially should render only the batch (10 fields), not all 50
+    const fieldElements = grid!.children;
+    expect(fieldElements.length).toBeLessThanOrEqual(10);
+  });
+
+  it('should render all fields when virtualScroll is disabled', () => {
+    const section = {
+      title: 'No Virtual',
+      fields: Array.from({ length: 50 }, (_, i) => ({
+        name: `field_${i}`,
+        label: `Field ${i}`,
+        type: 'text',
+      })),
+    };
+    const { container } = render(
+      <DetailSection section={section} data={{}} />
+    );
+    const grid = container.querySelector('.grid');
+    expect(grid).toBeTruthy();
+    expect(grid!.children.length).toBe(50);
+  });
+
+  it('should render all fields when virtualScroll is enabled but field count is below batch size', () => {
+    const section = {
+      title: 'Small',
+      fields: Array.from({ length: 5 }, (_, i) => ({
+        name: `field_${i}`,
+        label: `Field ${i}`,
+        type: 'text',
+      })),
+    };
+    const { container } = render(
+      <DetailSection
+        section={section}
+        data={{}}
+        virtualScroll={{ enabled: true, overscan: 20 }}
+      />
+    );
+    const grid = container.querySelector('.grid');
+    expect(grid).toBeTruthy();
+    expect(grid!.children.length).toBe(5);
+  });
 });
 
 describe('getResponsiveSpanClass', () => {

packages/plugin-detail/src/__tests__/HeaderHighlight.test.tsx

@@ -65,4 +65,65 @@ describe('HeaderHighlight', () => {
     render(<HeaderHighlight fields={fieldsWithIcon} data={{ revenue: '$5M' }} />);
     expect(screen.getByText('💰')).toBeInTheDocument();
   });
+
+  it('should render currency fields formatted via getCellRenderer when type is provided', () => {
+    const currencyFields: HighlightField[] = [
+      { name: 'amount', label: 'Amount', type: 'currency' },
+    ];
+    render(<HeaderHighlight fields={currencyFields} data={{ amount: 250000 }} />);
+    // CurrencyCellRenderer should format the number — should NOT show raw "250000"
+    expect(screen.queryByText('250000')).not.toBeInTheDocument();
+    expect(screen.getByText(/250,000/)).toBeInTheDocument();
+  });
+
+  it('should render select fields as badge via getCellRenderer when type is provided', () => {
+    const selectFields: HighlightField[] = [
+      { name: 'stage', label: 'Stage', type: 'select' },
+    ];
+    render(
+      <HeaderHighlight
+        fields={selectFields}
+        data={{ stage: 'prospecting' }}
+        objectSchema={{
+          fields: {
+            stage: {
+              type: 'select',
+              options: [
+                { value: 'prospecting', label: 'Prospecting', color: 'blue' },
+              ],
+            },
+          },
+        }}
+      />
+    );
+    expect(screen.getByText('Prospecting')).toBeInTheDocument();
+  });
+
+  it('should enrich field type from objectSchema when field.type is not set', () => {
+    const fieldsNoType: HighlightField[] = [
+      { name: 'amount', label: 'Amount' },
+    ];
+    render(
+      <HeaderHighlight
+        fields={fieldsNoType}
+        data={{ amount: 5000 }}
+        objectSchema={{
+          fields: {
+            amount: { type: 'currency', currency: 'USD' },
+          },
+        }}
+      />
+    );
+    // Should use CurrencyCellRenderer, not raw String()
+    expect(screen.queryByText('5000')).not.toBeInTheDocument();
+    expect(screen.getByText(/5,000/)).toBeInTheDocument();
+  });
+
+  it('should fall back to String(value) when no type info is available', () => {
+    const fieldsNoType: HighlightField[] = [
+      { name: 'custom', label: 'Custom' },
+    ];
+    render(<HeaderHighlight fields={fieldsNoType} data={{ custom: 'raw-value' }} />);
+    expect(screen.getByText('raw-value')).toBeInTheDocument();
+  });
 });