docs: update Storybook stories and ROADMAP.md for DetailView optimization

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

Author: Copilot

ROADMAP.md

@@ -1,6 +1,6 @@
 # ObjectUI Development Roadmap
 
-> **Last Updated:** February 27, 2026
+> **Last Updated:** March 1, 2026
 > **Current Version:** v0.5.x
 > **Spec Version:** @objectstack/spec v3.0.10
 > **Client Version:** @objectstack/client v3.0.10
@@ -1272,6 +1272,37 @@ All 313 `@object-ui/fields` tests pass.
 
 ---
 
+### DetailView Rendering Optimization (March 2026)
+
+> Platform-level DetailView enhancements: auto-grouping from form sections, empty value hiding, smart header with primaryField/summaryFields, responsive breakpoint fix, and activity timeline collapse.
+
+**Types (`@object-ui/types`):**
+- [x] `DetailViewSection.hideEmpty?: boolean` — filter null/undefined/empty string fields; hide empty sections
+- [x] `DetailViewSchema.primaryField?: string` — record-level title from data field
+- [x] `DetailViewSchema.summaryFields?: string[]` — render key attributes as Badge in header
+
+**DetailSection (`@object-ui/plugin-detail`):**
+- [x] `hideEmpty` filtering: fields with null/undefined/empty string values are removed; section returns null when all fields hidden
+- [x] Responsive breakpoint fix: `sm:grid-cols-2` → `md:grid-cols-2`, `sm:grid-cols-2 md:grid-cols-3` → `md:grid-cols-2 lg:grid-cols-3` (correct behavior on iPad+sidebar)
+
+**DetailView Header (`@object-ui/plugin-detail`):**
+- [x] Header renders `data[primaryField]` as h1 title (falls back to `schema.title`)
+- [x] `summaryFields` rendered as `<Badge variant="secondary">` next to title
+
+**RecordActivityTimeline (`@object-ui/plugin-detail`):**
+- [x] `collapseWhenEmpty` prop: suppress "No activity recorded" message when true, showing only comment input
+
+**RecordDetailView (`apps/console`):**
+- [x] Read `objectDef.views?.form?.sections` for section grouping; fallback to flat field list
+- [x] Remove `columns: 2` hardcode — let `autoLayout` infer optimal columns
+- [x] Auto-detect `primaryField` from object fields (name/title)
+
+**Tests:** 94 tests passing (11 new) covering hideEmpty filtering, empty section hiding, primaryField/summaryFields rendering, responsive breakpoints, collapseWhenEmpty, autoLayout undefined-columns regression.
+
+**Storybook:** Added `PrimaryFieldWithBadges` and `HideEmptyFields` stories.
+
+---
+
 ## ⚠️ Risk Management
 
 | Risk | Mitigation |

packages/plugin-detail/src/DetailView.stories.tsx

@@ -256,3 +256,79 @@ export const WithFieldCounts: Story = {
     ],
   } as any,
 };
+
+/**
+ * Primary Field + Summary Badges — record name as header, key attributes as badges
+ */
+export const PrimaryFieldWithBadges: Story = {
+  render: renderStory,
+  args: {
+    type: 'detail-view',
+    title: 'Contact',
+    primaryField: 'name',
+    summaryFields: ['status', 'department'],
+    objectName: 'Contact',
+    resourceId: 'CNT-042',
+    showBack: true,
+    showEdit: true,
+    data: {
+      name: 'Sarah Johnson',
+      email: 'sarah@example.com',
+      phone: '+1 (555) 123-4567',
+      status: 'Active',
+      department: 'Engineering',
+      title: 'Senior Engineer',
+    },
+    fields: [
+      { name: 'email', label: 'Email' },
+      { name: 'phone', label: 'Phone' },
+      { name: 'title', label: 'Job Title' },
+      { name: 'status', label: 'Status' },
+      { name: 'department', label: 'Department' },
+    ],
+  } as any,
+};
+
+/**
+ * Hide Empty Fields — sections with hideEmpty filter out null/undefined/empty fields
+ */
+export const HideEmptyFields: Story = {
+  render: renderStory,
+  args: {
+    type: 'detail-view',
+    title: 'Contact',
+    primaryField: 'name',
+    showBack: true,
+    data: {
+      name: 'Mike Ross',
+      email: 'mike@techcorp.io',
+      phone: null,
+      department: '',
+      title: 'VP Engineering',
+      website: undefined,
+      linkedin: 'linkedin.com/in/mikeross',
+    },
+    sections: [
+      {
+        title: 'Contact Info',
+        hideEmpty: true,
+        fields: [
+          { name: 'email', label: 'Email' },
+          { name: 'phone', label: 'Phone' },
+          { name: 'title', label: 'Job Title' },
+          { name: 'department', label: 'Department' },
+          { name: 'website', label: 'Website' },
+          { name: 'linkedin', label: 'LinkedIn' },
+        ],
+      },
+      {
+        title: 'Empty Section (hidden)',
+        hideEmpty: true,
+        fields: [
+          { name: 'fax', label: 'Fax' },
+          { name: 'pager', label: 'Pager' },
+        ],
+      },
+    ],
+  } as any,
+};