fix: add coerceToSafeValue to cell renderers at source, use getCellRenderer in HeaderHighlight

ROADMAP.md

@@ -1414,7 +1414,34 @@ All 313 `@object-ui/fields` tests pass.
 
 ---
 
-### DetailView Rendering Optimization (March 2026)
+### DetailView/RecordDetailView SDUI Optimization (March 2026)
+
+> Type-aware rendering, responsive layout, virtual scrolling, metadata-driven highlights, performance optimization, and activity panel collapse-when-empty.
+
+**HeaderHighlight (`@object-ui/plugin-detail`):**
+- [x] Use `getCellRenderer` for type-aware display (currency → `$250,000.00`, select → Badge, etc.) instead of raw `String(value)`
+- [x] Add `objectSchema` prop for field metadata enrichment (type, options, currency, precision, format)
+
+**autoLayout (`@object-ui/plugin-detail`):**
+- [x] `inferDetailColumns` accepts optional `containerWidth` for responsive column capping (`<640px→1col`, `<900px→max 2col`)
+- [x] `applyDetailAutoLayout` passes through `containerWidth` parameter
+
+**RecordChatterPanel (`@object-ui/plugin-detail`):**
+- [x] `collapseWhenEmpty` prop: auto-collapse panel when no feed items exist
+- [x] Pass `collapseWhenEmpty` through to embedded `RecordActivityTimeline`
+
+**DetailSection (`@object-ui/plugin-detail`):**
+- [x] `virtualScroll` config (`VirtualScrollOptions`): progressive batch rendering for sections with many fields
+- [x] Export `VirtualScrollOptions` type from package index
+
+**RecordDetailView (`apps/console`):**
+- [x] Wrap `detailSchema` construction with `useMemo` (deps: `objectDef`, `pureRecordId`, `related`, `childRelatedData`, `actionRefreshKey`)
+- [x] Remove hardcoded `HIGHLIGHT_FIELD_NAMES`; read exclusively from `objectDef.views.detail.highlightFields` (no fallback)
+- [x] Enable `collapseWhenEmpty` + `collapsible: true` on `RecordChatterPanel`
+
+**Tests:** 125 plugin-detail tests passing (17 new) covering HeaderHighlight type-aware rendering, autoLayout responsive columns, RecordChatterPanel collapseWhenEmpty, DetailSection virtualScroll.
+
+---
 
 > Platform-level DetailView enhancements: auto-grouping from form sections, empty value hiding, smart header with primaryField/summaryFields, responsive breakpoint fix, and activity timeline collapse.
 

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,8 @@ export function RecordDetailView({ dataSource, objects, onEdit }: RecordDetailVi
         actions: recordHeaderActions,
       } as any],
     }),
-  };
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }), [objectDef.name, pureRecordId, childRelatedData, actionRefreshKey]);
 
   return (
     <div className="h-full bg-background overflow-hidden flex flex-col relative">
@@ -482,13 +472,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/fields/src/__tests__/cell-renderers.test.tsx

@@ -1041,3 +1041,132 @@ describe('PercentCellRenderer progress-type fields', () => {
     expect(bar).toHaveAttribute('aria-valuenow', '50');
   });
 });
+
+// =========================================================================
+// Object value safety (coerceToSafeValue) — prevents React error #310
+// =========================================================================
+import {
+  NumberCellRenderer,
+  CurrencyCellRenderer,
+  FormulaCellRenderer,
+  coerceToSafeValue,
+} from '../index';
+
+describe('coerceToSafeValue', () => {
+  it('should pass through primitives unchanged', () => {
+    expect(coerceToSafeValue('hello')).toBe('hello');
+    expect(coerceToSafeValue(42)).toBe(42);
+    expect(coerceToSafeValue(true)).toBe(true);
+    expect(coerceToSafeValue(null)).toBe(null);
+    expect(coerceToSafeValue(undefined)).toBe(undefined);
+  });
+
+  it('should extract number from MongoDB $numberDecimal', () => {
+    expect(coerceToSafeValue({ $numberDecimal: '250000' })).toBe(250000);
+  });
+
+  it('should extract string from MongoDB $oid', () => {
+    expect(coerceToSafeValue({ $oid: 'abc123' })).toBe('abc123');
+  });
+
+  it('should extract string from MongoDB $date', () => {
+    expect(coerceToSafeValue({ $date: '2024-01-01T00:00:00Z' })).toBe('2024-01-01T00:00:00Z');
+  });
+
+  it('should extract name from expanded reference object', () => {
+    expect(coerceToSafeValue({ _id: 'x', name: 'Acme Corp' })).toBe('Acme Corp');
+  });
+
+  it('should extract label when name is not present', () => {
+    expect(coerceToSafeValue({ _id: 'x', label: 'Active' })).toBe('Active');
+  });
+
+  it('should fall back to _id when no name/label', () => {
+    expect(coerceToSafeValue({ _id: 'abc123' })).toBe('abc123');
+  });
+
+  it('should handle arrays of primitives', () => {
+    expect(coerceToSafeValue(['a', 'b', 'c'])).toBe('a, b, c');
+  });
+
+  it('should handle arrays of objects', () => {
+    expect(coerceToSafeValue([{ name: 'Alice' }, { name: 'Bob' }])).toBe('Alice, Bob');
+  });
+
+  it('should convert Date to ISO string', () => {
+    const d = new Date('2024-06-15T12:00:00Z');
+    expect(coerceToSafeValue(d)).toBe('2024-06-15T12:00:00.000Z');
+  });
+});
+
+describe('NumberCellRenderer object safety', () => {
+  it('should handle MongoDB $numberDecimal without crashing', () => {
+    const { container } = render(
+      <NumberCellRenderer
+        value={{ $numberDecimal: '250000' }}
+        field={{ name: 'amount', type: 'number' } as any}
+      />
+    );
+    expect(container.innerHTML).not.toBe('');
+    expect(screen.getByText('250,000')).toBeInTheDocument();
+  });
+
+  it('should handle expanded reference object without crashing', () => {
+    const { container } = render(
+      <NumberCellRenderer
+        value={{ _id: 'abc', name: 'Not a number' }}
+        field={{ name: 'amount', type: 'number' } as any}
+      />
+    );
+    expect(container.innerHTML).not.toBe('');
+    // Should render the extracted name string, not crash
+    expect(screen.getByText('Not a number')).toBeInTheDocument();
+  });
+});
+
+describe('CurrencyCellRenderer object safety', () => {
+  it('should handle MongoDB $numberDecimal', () => {
+    const { container } = render(
+      <CurrencyCellRenderer
+        value={{ $numberDecimal: '5000' }}
+        field={{ name: 'price', type: 'currency', currency: 'USD' } as any}
+      />
+    );
+    expect(container.innerHTML).not.toBe('');
+    expect(screen.getByText(/5,000/)).toBeInTheDocument();
+  });
+});
+
+describe('TextCellRenderer object safety', () => {
+  it('should extract name from object instead of [object Object]', () => {
+    render(
+      <TextCellRenderer
+        value={{ _id: 'abc', name: 'Acme Corp' }}
+        field={{ name: 'company', type: 'text' } as any}
+      />
+    );
+    expect(screen.getByText('Acme Corp')).toBeInTheDocument();
+  });
+
+  it('should handle arrays of objects', () => {
+    render(
+      <TextCellRenderer
+        value={[{ name: 'Alice' }, { name: 'Bob' }]}
+        field={{ name: 'contacts', type: 'text' } as any}
+      />
+    );
+    expect(screen.getByText('Alice, Bob')).toBeInTheDocument();
+  });
+});
+
+describe('FormulaCellRenderer object safety', () => {
+  it('should extract value from MongoDB $numberDecimal', () => {
+    render(
+      <FormulaCellRenderer
+        value={{ $numberDecimal: '42.5' }}
+        field={{ name: 'calc', type: 'formula' } as any}
+      />
+    );
+    expect(screen.getByText('42.5')).toBeInTheDocument();
+  });
+});