@object-ui/app-shell 4.4.0 → 4.6.0

package/dist/views/ObjectView.js

@@ -14,7 +14,6 @@ import { useParams, useSearchParams, useNavigate } from 'react-router-dom';
 const ObjectChart = lazy(() => import('@object-ui/plugin-charts').then((m) => ({ default: m.ObjectChart })));
 const ImportWizard = lazy(() => import('@object-ui/plugin-grid').then((m) => ({ default: m.ImportWizard })));
 import { ListView } from '@object-ui/plugin-list';
-import { DetailView, RecordChatterPanel } from '@object-ui/plugin-detail';
 import { ObjectView as PluginObjectView, ViewTabBar, ManageViewsDialog } from '@object-ui/plugin-view';
 // Plugin registration is handled by the host app (e.g. apps/console/src/main.tsx
 // uses ComponentRegistry.registerLazy so heavy plugins stay code-split).
@@ -27,6 +26,7 @@ import { ViewConfigPanel } from './ViewConfigPanel';
 import { CreateViewDialog } from './CreateViewDialog';
 import { PageHeader } from '../layout/PageHeader';
 import { ManagedByBadge } from '../components/ManagedByBadge';
+import { RecordDetailView } from './RecordDetailView';
 import { resolveCrudAffordances } from '../utils/crudAffordances';
 import { resolveManagedByEmptyState } from '../utils/managedByEmptyState';
 import { useObjectActions } from '../hooks/useObjectActions';
@@ -191,157 +191,6 @@ function fromSysViewRecord(sv) {
         pageSize: sv.page_size ?? sv.pageSize,
     };
 }
-/**
- * DrawerDetailContent — extracted component for NavigationOverlay content.
- * Needs to be a proper component (not a render prop) so it can use hooks
- * for data fetching, comment handling, etc.
- */
-function DrawerDetailContent({ objectDef, recordId, dataSource, onEdit }) {
-    const { user } = useAuth();
-    const currentUser = user
-        ? { id: user.id, name: user.name, avatar: user.image }
-        : FALLBACK_USER;
-    const [feedItems, setFeedItems] = useState([]);
-    // Fetch persisted comments from API
-    useEffect(() => {
-        if (!dataSource || !objectDef?.name || !recordId)
-            return;
-        const threadId = `${objectDef.name}:${recordId}`;
-        dataSource.find('sys_comment', { $filter: { threadId }, $orderby: { createdAt: 'asc' } })
-            .then((res) => {
-            if (res.data?.length) {
-                setFeedItems(res.data.map((c) => ({
-                    id: c.id,
-                    type: 'comment',
-                    actor: c.author?.name ?? 'Unknown',
-                    actorAvatarUrl: c.author?.avatar,
-                    body: c.content,
-                    createdAt: c.createdAt,
-                    updatedAt: c.updatedAt,
-                    parentId: c.parentId,
-                    reactions: c.reactions
-                        ? Object.entries(c.reactions).map(([emoji, userIds]) => ({
-                            emoji,
-                            count: userIds.length,
-                            reacted: userIds.includes(currentUser.id),
-                        }))
-                        : undefined,
-                })));
-            }
-        })
-            .catch(() => { });
-    }, [dataSource, objectDef?.name, recordId, currentUser.id]);
-    const handleAddComment = useCallback(async (text) => {
-        const newItem = {
-            id: crypto.randomUUID(),
-            type: 'comment',
-            actor: currentUser.name,
-            actorAvatarUrl: 'avatar' in currentUser ? currentUser.avatar : undefined,
-            body: text,
-            createdAt: new Date().toISOString(),
-        };
-        setFeedItems(prev => [...prev, newItem]);
-        if (dataSource) {
-            const threadId = `${objectDef.name}:${recordId}`;
-            dataSource.create('sys_comment', {
-                id: newItem.id,
-                threadId,
-                author: currentUser,
-                content: text,
-                mentions: [],
-                createdAt: newItem.createdAt,
-            }).catch(() => { });
-        }
-    }, [currentUser, dataSource, objectDef?.name, recordId]);
-    const handleAddReply = useCallback(async (parentId, text) => {
-        const newItem = {
-            id: crypto.randomUUID(),
-            type: 'comment',
-            actor: currentUser.name,
-            actorAvatarUrl: 'avatar' in currentUser ? currentUser.avatar : undefined,
-            body: text,
-            createdAt: new Date().toISOString(),
-            parentId,
-        };
-        setFeedItems(prev => {
-            const updated = [...prev, newItem];
-            return updated.map(item => item.id === parentId
-                ? { ...item, replyCount: (item.replyCount ?? 0) + 1 }
-                : item);
-        });
-        if (dataSource) {
-            const threadId = `${objectDef.name}:${recordId}`;
-            dataSource.create('sys_comment', {
-                id: newItem.id,
-                threadId,
-                author: currentUser,
-                content: text,
-                mentions: [],
-                createdAt: newItem.createdAt,
-                parentId,
-            }).catch(() => { });
-        }
-    }, [currentUser, dataSource, objectDef?.name, recordId]);
-    const handleToggleReaction = useCallback((itemId, emoji) => {
-        setFeedItems(prev => prev.map(item => {
-            if (item.id !== itemId)
-                return item;
-            const reactions = [...(item.reactions ?? [])];
-            const idx = reactions.findIndex(r => r.emoji === emoji);
-            if (idx >= 0) {
-                const r = reactions[idx];
-                if (r.reacted) {
-                    if (r.count <= 1) {
-                        reactions.splice(idx, 1);
-                    }
-                    else {
-                        reactions[idx] = { ...r, count: r.count - 1, reacted: false };
-                    }
-                }
-                else {
-                    reactions[idx] = { ...r, count: r.count + 1, reacted: true };
-                }
-            }
-            else {
-                reactions.push({ emoji, count: 1, reacted: true });
-            }
-            const updated = { ...item, reactions };
-            if (dataSource) {
-                dataSource.update('sys_comment', String(itemId), {
-                    $toggleReaction: { emoji, userId: currentUser.id },
-                }).catch(() => { });
-            }
-            return updated;
-        }));
-    }, [currentUser.id, dataSource]);
-    return (_jsxs("div", { className: "h-full bg-background overflow-auto p-3 sm:p-4 lg:p-6", children: [_jsx(DetailView, { schema: {
-                    type: 'detail-view',
-                    objectName: objectDef.name,
-                    resourceId: recordId,
-                    showBack: false,
-                    showEdit: true,
-                    title: objectDef.label,
-                    sections: [
-                        {
-                            title: 'Details',
-                            fields: Object.keys(objectDef.fields || {}).map((key) => ({
-                                name: key,
-                                label: objectDef.fields[key].label || key,
-                                type: objectDef.fields[key].type || 'text'
-                            })),
-                        }
-                    ]
-                }, dataSource: dataSource, onEdit: () => onEdit({ id: recordId }) }), _jsx("div", { className: "mt-6 border-t pt-6", children: _jsx(RecordChatterPanel, { config: {
-                        position: 'bottom',
-                        collapsible: true,
-                        defaultCollapsed: true,
-                        feed: {
-                            enableReactions: true,
-                            enableThreading: true,
-                            showCommentInput: true,
-                        },
-                    }, items: feedItems, onAddComment: handleAddComment, onAddReply: handleAddReply, onToggleReaction: handleToggleReaction }) })] }));
-}
 export function ObjectView({ dataSource, objects, onEdit, externalRefreshKey }) {
     const navigate = useNavigate();
     const { objectName, viewId } = useParams();
@@ -1326,9 +1175,16 @@ export function ObjectView({ dataSource, objects, onEdit, externalRefreshKey })
         }
     }, [dataSource, objectDef.name, refreshKey]);
     // Navigation overlay for record detail (supports drawer/modal/split/popover via config)
-    // Priority: activeView.navigation > objectDef.navigation > default page
-    // Memoize to avoid unstable object identity on every render (stale closure prevention)
-    const detailNavigation = useMemo(() => activeView?.navigation ?? objectDef.navigation ?? { mode: 'page' }, [activeView?.navigation, objectDef.navigation]);
+    // Priority: activeView.navigation > objectDef.navigation > default drawer.
+    //
+    // Default mode = 'drawer'. Mirrors Linear / Notion / Airtable / Jira where
+    // record peek is the primary interaction and full-page is the upgrade.
+    // Direct URL access (`/record/:id`) still opens as a full page because
+    // RecordDetailView owns its own route — only same-page click navigation
+    // is drawer-by-default. Per-view config can still override (e.g. a heavy
+    // detail object can set `navigation.mode = 'page'`).
+    const detailNavigation = useMemo(() => activeView?.navigation ??
+        objectDef.navigation ?? { mode: 'drawer', width: 'min(92vw, 1280px)' }, [activeView?.navigation, objectDef.navigation]);
     const drawerRecordId = searchParams.get('recordId');
     /**
      * URL-derived equality filters in the form `?filter[<field>]=<value>`.
@@ -1379,6 +1235,49 @@ export function ObjectView({ dataSource, objects, onEdit, externalRefreshKey })
         newParams.delete('recordId');
         setSearchParams(newParams);
     };
+    /**
+     * Row-click handler used by all list/grid/gallery/kanban surfaces inside
+     * this object view. Wraps `navOverlay.handleClick` so that drawer-mode
+     * opens are URL-driven (writes `?recordId=…`) — making the drawer state
+     * shareable, refresh-safe, and respected by browser back/forward. The
+     * URL→state sync effect below handles actually opening the drawer.
+     */
+    const handleRowClick = useCallback((record, event) => {
+        // Cmd/Ctrl/middle-click — let the hook open in a new tab (full page)
+        // regardless of configured mode. Matches browser link convention.
+        const isModifier = !!(event && (event.metaKey || event.ctrlKey || event.button === 1));
+        if (isModifier) {
+            navOverlay.handleClick(record, event);
+            return;
+        }
+        // Drawer mode → URL is the source of truth. Push `?recordId=…`
+        // and let the existing URL-sync effect open the overlay.
+        if (navOverlay.mode === 'drawer') {
+            const id = (record?.id ?? record?._id);
+            if (id != null) {
+                const next = new URLSearchParams(searchParams);
+                next.set('recordId', String(id));
+                setSearchParams(next);
+                return;
+            }
+        }
+        // All other modes (page / modal / split / popover / new_window / none)
+        // — delegate to the hook.
+        navOverlay.handleClick(record, event);
+    }, [navOverlay, searchParams, setSearchParams]);
+    /**
+     * "Expand to full page" — invoked from the drawer header chevron. Closes
+     * the drawer (which clears `?recordId=…`) and router-pushes to the
+     * dedicated `/record/:id` route. Mirrors Linear/Notion peek-to-page.
+     */
+    const handleExpandDrawer = useCallback(() => {
+        const rec = navOverlay.selectedRecord;
+        const id = rec && (rec.id ?? rec._id);
+        if (id == null)
+            return;
+        handleDrawerClose();
+        handleNavOverlayNavigate(id);
+    }, [navOverlay.selectedRecord, handleNavOverlayNavigate]);
     // Sync URL-based recordId to overlay state
     useEffect(() => {
         if (drawerRecordId && !navOverlay.isOpen) {
@@ -1606,8 +1505,8 @@ export function ObjectView({ dataSource, objects, onEdit, externalRefreshKey })
                     }),
                     params: { records: valid },
                 });
-            }, onRowClick: (record) => {
-                navOverlay.handleClick(record);
+            }, onRowClick: (record, event) => {
+                handleRowClick(record, event);
             }, onSortChange: (sort) => {
                 persistViewPatch(viewDef.id, viewDef, { sort });
             }, onFilterChange: (filter) => {
@@ -1727,20 +1626,20 @@ export function ObjectView({ dataSource, objects, onEdit, externalRefreshKey })
                                         showVisibilityGroups: true,
                                     }, onAddView: isAdmin ? handleAddView : undefined, onRenameView: isAdmin ? handleRenameView : undefined, onDeleteView: isAdmin ? handleDeleteView : undefined, onDuplicateView: isAdmin ? handleDuplicateView : undefined, onPinView: isAdmin ? handlePinView : undefined, onSetDefaultView: isAdmin ? handleSetDefaultView : undefined, onConfigView: isAdmin ? handleConfigView : undefined, onManageViews: isAdmin ? () => setManageViewsOpen(true) : undefined }), isAdmin && (_jsx(ManageViewsDialog, { open: manageViewsOpen, onOpenChange: setManageViewsOpen, views: viewTabItems, activeViewId: activeViewId, viewTypeIcons: VIEW_TYPE_ICONS, onRename: handleRenameView, onDelete: handleDeleteView, onDuplicate: handleDuplicateView, onSetDefault: handleSetDefaultView, onSetPinned: handlePinView, onReorder: handleReorderViews, onAddView: handleAddView, onConfigView: handleConfigView }))] }));
                     })(), _jsxs("div", { className: "flex-1 overflow-hidden relative flex flex-row", children: [navOverlay.mode === 'split' && navOverlay.isOpen ? (_jsx(NavigationOverlay, { ...navOverlay, setIsOpen: (open) => { if (!open)
-                                    handleDrawerClose(); }, title: objectLabel(objectDef), mainContent: _jsxs("div", { className: "flex-1 min-w-0 relative h-full flex flex-col", children: [_jsx("div", { className: "flex-1 relative overflow-hidden", children: _jsx("div", { className: "h-full overflow-auto", children: _jsx(PluginObjectView, { schema: objectViewSchema, dataSource: dataSource, views: mergedViews, activeViewId: activeViewId, onViewChange: handleViewChange, onEdit: (record) => onEdit?.(record), onRowClick: (record) => {
-                                                        navOverlay.handleClick(record);
+                                    handleDrawerClose(); }, title: objectLabel(objectDef), onExpand: handleExpandDrawer, expandLabel: t('console.objectView.expandToPage', { defaultValue: 'Open as full page' }), storageKey: `drawer-width:${objectDef.name}`, mainContent: _jsxs("div", { className: "flex-1 min-w-0 relative h-full flex flex-col", children: [_jsx("div", { className: "flex-1 relative overflow-hidden", children: _jsx("div", { className: "h-full overflow-auto", children: _jsx(PluginObjectView, { schema: objectViewSchema, dataSource: dataSource, views: mergedViews, activeViewId: activeViewId, onViewChange: handleViewChange, onEdit: (record) => onEdit?.(record), onRowClick: (record, event) => {
+                                                        handleRowClick(record, event);
                                                     }, renderListView: renderListView, onCreateView: handleCreateView, onViewAction: handleViewAction }) }) }), typeof recordCount === 'number' && (_jsx("div", { "data-testid": "record-count-footer", className: "border-t px-3 sm:px-4 py-1.5 text-xs text-muted-foreground bg-muted/5 shrink-0", children: t('console.objectView.recordCount', { count: recordCount }) }))] }), children: (record) => {
                                     const recordId = (record.id || record._id);
-                                    return (_jsx(DrawerDetailContent, { objectDef: objectDef, recordId: recordId, dataSource: dataSource, onEdit: onEdit }));
-                                } })) : (_jsx("div", { className: "flex-1 min-w-0 relative h-full flex flex-col", children: _jsx("div", { className: "flex-1 relative overflow-hidden", children: _jsx("div", { className: "h-full overflow-auto", children: _jsx(PluginObjectView, { schema: objectViewSchema, dataSource: dataSource, views: mergedViews, activeViewId: activeViewId, onViewChange: handleViewChange, onEdit: (record) => onEdit?.(record), onRowClick: (record) => {
-                                                navOverlay.handleClick(record);
+                                    return (_jsx(RecordDetailView, { dataSource: dataSource, objects: objects, onEdit: onEdit, objectNameOverride: objectDef.name, recordIdOverride: recordId, embedded: true }));
+                                } })) : (_jsx("div", { className: "flex-1 min-w-0 relative h-full flex flex-col", children: _jsx("div", { className: "flex-1 relative overflow-hidden", children: _jsx("div", { className: "h-full overflow-auto", children: _jsx(PluginObjectView, { schema: objectViewSchema, dataSource: dataSource, views: mergedViews, activeViewId: activeViewId, onViewChange: handleViewChange, onEdit: (record) => onEdit?.(record), onRowClick: (record, event) => {
+                                                handleRowClick(record, event);
                                             }, renderListView: renderListView, onCreateView: handleCreateView, onViewAction: handleViewAction }) }) }) })), _jsx(MetadataPanel, { open: showDebug && isAdmin, sections: [
                                     { title: 'View Configuration', data: activeView },
                                     { title: 'Object Definition', data: objectDef },
                                 ] }), _jsx("div", { "data-testid": "view-config-panel-wrapper", className: `transition-[max-width,opacity] duration-300 ease-in-out overflow-hidden ${showViewConfigPanel && isAdmin ? 'max-w-[280px] opacity-100' : 'max-w-0 opacity-0'}`, children: _jsx(ViewConfigPanel, { open: showViewConfigPanel && isAdmin, onClose: () => { setShowViewConfigPanel(false); setViewConfigPanelMode('edit'); }, mode: viewConfigPanelMode, activeView: activeView, objectDef: objectDef, recordCount: recordCount, onSave: handleViewConfigSave, onViewUpdate: handleViewUpdate, onCreate: handleViewCreate }) }), _jsx(CreateViewDialog, { open: showCreateViewDialog && isAdmin, onOpenChange: setShowCreateViewDialog, existingLabels: views.map((v) => v.label).filter(Boolean), objectDef: objectDef, onCreate: (cfg) => handleViewCreate(cfg) })] }), navOverlay.mode !== 'split' && (_jsx(NavigationOverlay, { ...navOverlay, setIsOpen: (open) => { if (!open)
-                            handleDrawerClose(); }, title: objectDef.label, className: navOverlay.mode === 'drawer' ? 'w-[90vw] sm:max-w-2xl p-0 overflow-hidden' : undefined, children: (record) => {
+                            handleDrawerClose(); }, title: objectDef.label, onExpand: handleExpandDrawer, expandLabel: t('console.objectView.expandToPage', { defaultValue: 'Open as full page' }), storageKey: `drawer-width:${objectDef.name}`, children: (record) => {
                             const recordId = (record.id || record._id);
-                            return (_jsx(DrawerDetailContent, { objectDef: objectDef, recordId: recordId, dataSource: dataSource, onEdit: onEdit }));
+                            return (_jsx(RecordDetailView, { dataSource: dataSource, objects: objects, onEdit: onEdit, objectNameOverride: objectDef.name, recordIdOverride: recordId, embedded: true }));
                         } }))] }), _jsx(ActionConfirmDialog, { state: confirmState, onOpenChange: (open) => {
                     if (!open)
                         setConfirmState({ open: false, message: '' });

package/dist/views/RecordDetailView.d.ts

@@ -9,6 +9,25 @@ interface RecordDetailViewProps {
     dataSource: any;
     objects: any[];
     onEdit: (record: any) => void;
+    /**
+     * When provided, this object name overrides the value derived from the
+     * current URL (`useParams()`). Used when rendering the detail inside a
+     * navigation drawer or split-pane — the parent route owns the URL while
+     * the embedded detail is keyed by an in-memory record selection.
+     */
+    objectNameOverride?: string;
+    /**
+     * When provided, this record id overrides the value derived from the
+     * current URL. See {@link objectNameOverride}.
+     */
+    recordIdOverride?: string;
+    /**
+     * `true` when this view is embedded (drawer / split-pane). Suppresses
+     * side effects that would conflict with the host route — namely the
+     * breadcrumb title publish (the parent route already owns the
+     * breadcrumb).
+     */
+    embedded?: boolean;
 }
-export declare function RecordDetailView({ dataSource, objects, onEdit }: RecordDetailViewProps): import("react/jsx-runtime").JSX.Element;
+export declare function RecordDetailView({ dataSource, objects, onEdit, objectNameOverride, recordIdOverride, embedded }: RecordDetailViewProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/views/RecordDetailView.js

@@ -47,8 +47,11 @@ const AUDIT_FIELD_NAMES = new Set(['created_at', 'created_by', 'updated_at', 'up
 const HIDDEN_SYSTEM_FIELD_NAMES = new Set([
     'organization_id', 'tenant_id', 'is_deleted', 'deleted_at',
 ]);
-export function RecordDetailView({ dataSource, objects, onEdit }) {
-    const { appName, objectName, recordId } = useParams();
+export function RecordDetailView({ dataSource, objects, onEdit, objectNameOverride, recordIdOverride, embedded }) {
+    const params = useParams();
+    const appName = params.appName;
+    const objectName = objectNameOverride ?? params.objectName;
+    const recordId = recordIdOverride ?? params.recordId;
     const { showDebug } = useMetadataInspector();
     const { user } = useAuth();
     const navigate = useNavigate();
@@ -64,8 +67,9 @@ export function RecordDetailView({ dataSource, objects, onEdit }) {
     const [recordTitle, setRecordTitle] = useState();
     const objectDef = objects.find((o) => o.name === objectName);
     // Publish record title to the navigation context so the top-bar breadcrumb
-    // can display "Acme Platform Upgrade" instead of "#9U1_MmmxjiGR…".
-    useRecordBreadcrumbTitle(recordTitle);
+    // can display "Acme Platform Upgrade" instead of "#9U1_MmmxjiGR…". Skip
+    // when embedded (drawer/split): the parent list route owns the breadcrumb.
+    useRecordBreadcrumbTitle(embedded ? undefined : recordTitle);
     // 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.
@@ -358,18 +362,84 @@ export function RecordDetailView({ dataSource, objects, onEdit }) {
         }
         let cancelled = false;
         setHistoryLoading(true);
+        // Pull `old_value` and `new_value` so we can render a per-field diff
+        // ("Industry: finance → healthcare") instead of just the action verb.
+        // The backend already authorises sys_audit_log row access; column-level
+        // redaction would need to happen server-side, not by omitting columns here.
         dataSource
             .find('sys_audit_log', {
             $filter: { record_id: pureRecordId, object_name: objectDef.name },
             $orderby: { created_at: 'desc' },
             $top: 50,
-            $select: ['id', 'created_at', 'action', 'user_id'],
+            $select: ['id', 'created_at', 'action', 'user_id', 'old_value', 'new_value'],
         })
-            .then((res) => {
+            .then(async (res) => {
             if (cancelled)
                 return;
             const items = Array.isArray(res) ? res : res?.data || [];
-            setHistoryEntries(items);
+            // 1) Resolve actor display names + avatars in a single batched call
+            //    so the timeline never falls back to a raw UUID.
+            const userIds = Array.from(new Set(items
+                .map((it) => it?.user_id)
+                .filter((v) => typeof v === 'string' && v.length > 0)));
+            let userMap = new Map();
+            if (userIds.length > 0) {
+                try {
+                    const usersRes = await dataSource.find('sys_user', {
+                        $filter: { id: { $in: userIds } },
+                        $top: userIds.length,
+                        $select: ['id', 'name', 'email', 'image'],
+                    });
+                    const users = Array.isArray(usersRes) ? usersRes : usersRes?.data || [];
+                    userMap = new Map(users.map((u) => [u.id, { name: u.name || u.email || null, image: u.image || null }]));
+                }
+                catch (err) {
+                    console.warn('[RecordDetailView] Failed to resolve audit user names:', err);
+                }
+            }
+            // 2) Build a label map for the current object so diff lines show
+            //    "Industry: …" rather than the snake_case "industry: …".
+            const fieldLabels = {};
+            for (const [name, def] of Object.entries(objectDef.fields || {})) {
+                if (def?.label)
+                    fieldLabels[name] = def.label;
+            }
+            const parseJson = (v) => {
+                if (!v)
+                    return null;
+                if (typeof v === 'object')
+                    return v;
+                if (typeof v === 'string') {
+                    try {
+                        return JSON.parse(v);
+                    }
+                    catch {
+                        return null;
+                    }
+                }
+                return null;
+            };
+            const enriched = items.map((it) => {
+                const u = it?.user_id ? userMap.get(it.user_id) : undefined;
+                const oldObj = parseJson(it?.old_value) || {};
+                const newObj = parseJson(it?.new_value) || {};
+                const fields = new Set([...Object.keys(oldObj), ...Object.keys(newObj)]);
+                const changes = Array.from(fields)
+                    .filter((f) => JSON.stringify(oldObj[f]) !== JSON.stringify(newObj[f]))
+                    .map((f) => ({
+                    field: f,
+                    label: fieldLabels[f] || f,
+                    from: oldObj[f],
+                    to: newObj[f],
+                }));
+                return {
+                    ...it,
+                    user_name: u?.name ?? null,
+                    user_avatar: u?.image ?? null,
+                    changes: changes.length > 0 ? changes : undefined,
+                };
+            });
+            setHistoryEntries(enriched);
         })
             .catch((err) => {
             if (cancelled)
@@ -668,7 +738,17 @@ export function RecordDetailView({ dataSource, objects, onEdit }) {
                 title: sec.name ? sectionLabel(objectDef.name, sec.name, sec.title || sec.name) : sec.title,
                 collapsible: sec.collapsible,
                 defaultCollapsed: sec.defaultCollapsed,
-                fields: (sec.fields || []).map((f) => {
+                fields: (sec.fields || [])
+                    .filter((f) => {
+                    // Honor `hidden: true` on a field def even when the form
+                    // section explicitly lists it. Hidden fields are typically
+                    // internal artifacts (e.g. database URL, environment id)
+                    // that platform actions read but end-users shouldn't see.
+                    const fieldName = typeof f === 'string' ? f : f.name;
+                    const fieldDef = objectDef.fields?.[fieldName];
+                    return !fieldDef?.hidden;
+                })
+                    .map((f) => {
                     const fieldName = typeof f === 'string' ? f : f.name;
                     const fieldDef = objectDef.fields[fieldName];
                     if (!fieldDef) {
@@ -694,7 +774,7 @@ export function RecordDetailView({ dataSource, objects, onEdit }) {
                     // redundant "Details" heading).
                     showBorder: false,
                     fields: Object.keys(objectDef.fields || {})
-                        .filter(key => !AUDIT_FIELD_NAMES.has(key) && !HIDDEN_SYSTEM_FIELD_NAMES.has(key))
+                        .filter(key => !AUDIT_FIELD_NAMES.has(key) && !HIDDEN_SYSTEM_FIELD_NAMES.has(key) && !objectDef.fields[key]?.hidden)
                         .map(key => {
                         const fieldDef = objectDef.fields[key];
                         const refTarget = fieldDef.reference_to || fieldDef.reference;
@@ -888,7 +968,7 @@ export function RecordDetailView({ dataSource, objects, onEdit }) {
             type: 'detail-view',
             objectName: objectDef.name,
             resourceId: pureRecordId,
-            showBack: true,
+            showBack: !embedded,
             onBack: 'history',
             // Hide the Edit button for objects whose lifecycle isn't user-managed
             // (approval requests, audit logs, better-auth tables, …).  The
@@ -919,7 +999,7 @@ export function RecordDetailView({ dataSource, objects, onEdit }) {
             }),
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [objectDef?.name, pureRecordId, childRelatedData, actionRefreshKey, appName, navigate, dataSource, t, objectLabel, objects, historyEnabled, historyEntries, historyLoading, approvals.available, approvals.processes, approvals.canSubmit, approvals.canRecall, approvals.pendingRequest, approvals.latestRequest]);
+    }, [objectDef?.name, pureRecordId, childRelatedData, actionRefreshKey, appName, navigate, dataSource, t, objectLabel, objects, historyEnabled, historyEntries, historyLoading, approvals.available, approvals.processes, approvals.canSubmit, approvals.canRecall, approvals.pendingRequest, approvals.latestRequest, embedded]);
     if (isLoading) {
         return _jsx(SkeletonDetail, {});
     }
@@ -927,7 +1007,7 @@ export function RecordDetailView({ dataSource, objects, onEdit }) {
         return (_jsx("div", { className: "flex h-full items-center justify-center p-4", children: _jsxs(Empty, { children: [_jsx("div", { className: "mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-muted", children: _jsx(Database, { className: "h-6 w-6 text-muted-foreground" }) }), _jsx(EmptyTitle, { children: t('empty.objectNotFound') }), _jsx(EmptyDescription, { children: t('empty.objectNotFoundDescription', { name: objectName }) })] }) }));
     }
     if (assignedPage) {
-        return (_jsx(RecordContextProvider, { objectName: objectName, recordId: pureRecordId, data: pageRecord, objectSchema: objectDef, dataSource: dataSource, children: _jsx(ActionProvider, { context: { record: pageRecord || {}, objectName, user: currentUser }, onConfirm: confirmHandler, onToast: toastHandler, onNavigate: navigateHandler, onParamCollection: paramCollectionHandler, handlers: { api: apiHandler, flow: flowHandler, script: serverActionHandler, modal: serverActionHandler, approval: approvalHandler }, children: _jsx("div", { className: "bg-background p-3 sm:p-4 lg:p-6", children: _jsx(SchemaRenderer, { schema: assignedPage }) }) }) }));
+        return (_jsx(RecordContextProvider, { objectName: objectName, recordId: pureRecordId, data: pageRecord, objectSchema: objectDef, dataSource: dataSource, embedded: embedded, children: _jsx(ActionProvider, { context: { record: pageRecord || {}, objectName, user: currentUser }, onConfirm: confirmHandler, onToast: toastHandler, onNavigate: navigateHandler, onParamCollection: paramCollectionHandler, handlers: { api: apiHandler, flow: flowHandler, script: serverActionHandler, modal: serverActionHandler, approval: approvalHandler }, children: _jsx("div", { className: "bg-background p-3 sm:p-4 lg:p-6", children: _jsx(SchemaRenderer, { schema: assignedPage }) }) }) }));
     }
     return (_jsxs("div", { className: "h-full bg-background overflow-hidden flex flex-col relative", children: [_jsxs("div", { className: "absolute top-2 sm:top-4 right-2 sm:right-4 z-50 flex items-center gap-2", children: [_jsx(ManagedByBadge, { managedBy: objectDef?.managedBy }), recordViewers.length > 0 && (_jsxs("div", { className: "flex items-center gap-1.5", title: t('recordDetail.viewersTooltip'), children: [_jsx(Users, { className: "h-3.5 w-3.5 text-muted-foreground" }), _jsx(PresenceAvatars, { users: recordViewers, size: "sm", maxVisible: 4, showStatus: true })] }))] }), _jsxs("div", { className: "flex-1 overflow-hidden flex flex-row", children: [_jsx("div", { className: "flex-1 overflow-auto p-3 sm:p-4 lg:p-6 scroll-pb-48", children: _jsx(ActionProvider, { context: { record: {}, objectName, user: currentUser }, onConfirm: confirmHandler, onToast: toastHandler, onNavigate: navigateHandler, onParamCollection: paramCollectionHandler, handlers: { api: apiHandler, flow: flowHandler, script: serverActionHandler, modal: serverActionHandler, approval: approvalHandler }, children: _jsx(DetailView, { schema: detailSchema, dataSource: dataSource, objectLabel: objectLabel({ name: objectDef.name, label: objectDef.label }), onDataLoaded: (record) => {
                                     if (!record || typeof record !== 'object')

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@object-ui/app-shell",
-  "version": "4.4.0",
+  "version": "4.6.0",
   "type": "module",
   "license": "MIT",
   "description": "Minimal application shell for ObjectUI - framework-agnostic rendering engine",
@@ -27,34 +27,34 @@
   "dependencies": {
     "lucide-react": "^1.16.0",
     "sonner": "^2.0.7",
-    "@object-ui/auth": "4.4.0",
-    "@object-ui/collaboration": "4.4.0",
-    "@object-ui/components": "4.4.0",
-    "@object-ui/core": "4.4.0",
-    "@object-ui/data-objectstack": "4.4.0",
-    "@object-ui/fields": "4.4.0",
-    "@object-ui/i18n": "4.4.0",
-    "@object-ui/layout": "4.4.0",
-    "@object-ui/permissions": "4.4.0",
-    "@object-ui/react": "4.4.0",
-    "@object-ui/types": "4.4.0"
+    "@object-ui/auth": "4.6.0",
+    "@object-ui/collaboration": "4.6.0",
+    "@object-ui/components": "4.6.0",
+    "@object-ui/core": "4.6.0",
+    "@object-ui/data-objectstack": "4.6.0",
+    "@object-ui/fields": "4.6.0",
+    "@object-ui/i18n": "4.6.0",
+    "@object-ui/layout": "4.6.0",
+    "@object-ui/permissions": "4.6.0",
+    "@object-ui/react": "4.6.0",
+    "@object-ui/types": "4.6.0"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
     "react-router-dom": "^6.0.0 || ^7.0.0",
-    "@object-ui/plugin-calendar": "^4.4.0",
-    "@object-ui/plugin-charts": "^4.4.0",
-    "@object-ui/plugin-chatbot": "^4.4.0",
-    "@object-ui/plugin-dashboard": "^4.4.0",
-    "@object-ui/plugin-designer": "^4.4.0",
-    "@object-ui/plugin-detail": "^4.4.0",
-    "@object-ui/plugin-form": "^4.4.0",
-    "@object-ui/plugin-grid": "^4.4.0",
-    "@object-ui/plugin-kanban": "^4.4.0",
-    "@object-ui/plugin-list": "^4.4.0",
-    "@object-ui/plugin-report": "^4.4.0",
-    "@object-ui/plugin-view": "^4.4.0"
+    "@object-ui/plugin-calendar": "^4.6.0",
+    "@object-ui/plugin-charts": "^4.6.0",
+    "@object-ui/plugin-chatbot": "^4.6.0",
+    "@object-ui/plugin-dashboard": "^4.6.0",
+    "@object-ui/plugin-designer": "^4.6.0",
+    "@object-ui/plugin-detail": "^4.6.0",
+    "@object-ui/plugin-form": "^4.6.0",
+    "@object-ui/plugin-grid": "^4.6.0",
+    "@object-ui/plugin-kanban": "^4.6.0",
+    "@object-ui/plugin-list": "^4.6.0",
+    "@object-ui/plugin-report": "^4.6.0",
+    "@object-ui/plugin-view": "^4.6.0"
   },
   "devDependencies": {
     "@types/node": "^25.9.0",