@object-ui/app-shell 4.0.11 → 4.2.1

package/dist/utils/crudAffordances.js

@@ -0,0 +1,35 @@
+/**
+ * crudAffordances — UI-side mirror of the framework's
+ * `resolveCrudAffordances()` helper (see
+ * `@objectstack/spec/data/object.zod.ts`).
+ *
+ * The framework tags every object with a `managedBy` lifecycle bucket
+ * (`platform | config | system | append-only | better-auth`) and an
+ * optional `userActions` override block. UI components ask this helper
+ * "should I show the New / Import / Edit / Delete / Export buttons?" so
+ * the toolbar tracks the object's lifecycle automatically — no need for
+ * each view to special-case `sys_*` names.
+ *
+ * Keep this in lockstep with the framework helper. The bucket defaults
+ * mirror what Salesforce / ServiceNow / Workday / Notion do for the
+ * equivalent categories of system tables.
+ */
+const DEFAULTS = {
+    platform: { create: true, import: true, edit: true, delete: true, exportCsv: true },
+    config: { create: true, import: false, edit: true, delete: true, exportCsv: true },
+    system: { create: false, import: false, edit: false, delete: false, exportCsv: true },
+    'append-only': { create: false, import: false, edit: false, delete: false, exportCsv: true },
+    'better-auth': { create: false, import: false, edit: false, delete: false, exportCsv: true },
+};
+export function resolveCrudAffordances(obj) {
+    const bucket = obj?.managedBy ?? 'platform';
+    const base = DEFAULTS[bucket] ?? DEFAULTS.platform;
+    const o = obj?.userActions ?? {};
+    return {
+        create: o.create ?? base.create,
+        import: o.import ?? base.import,
+        edit: o.edit ?? base.edit,
+        delete: o.delete ?? base.delete,
+        exportCsv: o.exportCsv ?? base.exportCsv,
+    };
+}

package/dist/views/ObjectView.js

@@ -26,6 +26,8 @@ import { MetadataPanel, useMetadataInspector } from './MetadataInspector';
 import { ViewConfigPanel } from './ViewConfigPanel';
 import { CreateViewDialog } from './CreateViewDialog';
 import { PageHeader } from '../layout/PageHeader';
+import { ManagedByBanner } from '../components/ManagedByBanner';
+import { resolveCrudAffordances } from '../utils/crudAffordances';
 import { useObjectActions } from '../hooks/useObjectActions';
 import { useObjectTranslation, useObjectLabel } from '@object-ui/i18n';
 import { usePermissions } from '@object-ui/permissions';
@@ -47,6 +49,40 @@ const VIEW_TYPE_ICONS = {
     chart: BarChart3,
 };
 const FALLBACK_USER = { id: 'current-user', name: 'Demo User' };
+/**
+ * Replace built-in tokens (e.g. `{current_user_id}`) inside a filter array
+ * with concrete values. Filters from platform-shipped `listViews` or saved
+ * `sys_view` rows may declare context-sensitive predicates like
+ * `{ field: 'submitter_id', operator: 'equals', value: '{current_user_id}' }`
+ * — those need to be substituted before the query reaches the API.
+ *
+ * Recognised tokens:
+ *   • `{current_user_id}` → the authenticated user's id
+ *
+ * Returns a deep-cloned copy with substitutions applied. Non-array input
+ * is returned unchanged.
+ */
+function substituteFilterTokens(filter, currentUserId) {
+    if (!Array.isArray(filter))
+        return filter;
+    const sub = (v) => {
+        if (typeof v === 'string') {
+            if (v === '{current_user_id}')
+                return currentUserId ?? v;
+            return v;
+        }
+        if (Array.isArray(v))
+            return v.map(sub);
+        if (v && typeof v === 'object') {
+            const out = {};
+            for (const k of Object.keys(v))
+                out[k] = sub(v[k]);
+            return out;
+        }
+        return v;
+    };
+    return filter.map(sub);
+}
 /**
  * Translate a NamedListView spec object (shape: `type`, `label`, `columns`,
  * `filter`, `sort`, `kanban`/`chart`/`gantt`/... sub-blocks, `bulkActions`,
@@ -457,6 +493,13 @@ export function ObjectView({ dataSource, objects, onEdit, externalRefreshKey })
     }
     // Refresh trigger — bumped after view CRUD or external data mutations.
     const [refreshKey, setRefreshKey] = useState(0);
+    // Resolve which generic CRUD affordances belong in the toolbar for
+    // this object's lifecycle bucket (`managedBy`).  config tables show
+    // New/Edit/Delete but no CSV Import; system / append-only / better-auth
+    // hide the lot — those flows go through purpose-built actions on the
+    // source record (e.g. "Submit for Approval" on an Opportunity creates
+    // an `sys_approval_request`).  Permissions still gate the buttons.
+    const affordances = useMemo(() => resolveCrudAffordances(objectDef), [objectDef]);
     // Propagate externally-triggered refreshes (e.g. global ModalForm submit)
     // into our internal refreshKey so list/data effects re-run.
     useEffect(() => {
@@ -1285,9 +1328,10 @@ export function ObjectView({ dataSource, objects, onEdit, externalRefreshKey })
             sort: viewDef.sort ?? listSchema.sort,
             filter: (() => {
                 const base = viewDef.filter ?? listSchema.filter;
+                const substituted = substituteFilterTokens(base, currentUser.id);
                 if (!urlFilters.length)
-                    return base;
-                const baseArr = Array.isArray(base) ? base : [];
+                    return substituted;
+                const baseArr = Array.isArray(substituted) ? substituted : [];
                 return [...baseArr, ...urlFilters];
             })(),
             hiddenFields: viewDef.hiddenFields ?? listSchema.hiddenFields,
@@ -1359,7 +1403,8 @@ export function ObjectView({ dataSource, objects, onEdit, externalRefreshKey })
                     ...(Array.isArray(viewDef.filter) ? viewDef.filter : []),
                     ...urlFilters,
                 ];
-                return combined.length ? { filters: combined } : {};
+                const substituted = substituteFilterTokens(combined, currentUser.id);
+                return Array.isArray(substituted) && substituted.length ? { filters: substituted } : {};
             })()),
             ...(viewDef.sort?.length ? { sort: viewDef.sort } : {}),
             options: {
@@ -1489,7 +1534,7 @@ export function ObjectView({ dataSource, objects, onEdit, externalRefreshKey })
             }
         },
     }), [objectDef.name, onEdit, activeView?.showSearch, activeView?.showFilters, activeView?.showSort, navigate, viewId, isAdmin]);
-    return (_jsxs(ActionProvider, { context: { objectName: objectDef.name, user: currentUser }, onConfirm: confirmHandler, onToast: toastHandler, onNavigate: navigateHandler, onParamCollection: paramCollectionHandler, handlers: { api: apiHandler, flow: flowHandler, script: serverActionHandler, modal: serverActionHandler }, children: [_jsxs("div", { className: "h-full flex flex-col bg-background min-w-0 overflow-hidden", children: [_jsx(PageHeader, { title: objectLabel(objectDef), description: objectDef.description ? objectDesc(objectDef) : undefined, icon: (() => { const I = getIcon(objectDef?.icon); return _jsx(I, { className: "h-4 w-4" }); })(), actions: _jsxs(_Fragment, { children: [can(objectDef.name, 'create') && (_jsxs(Button, { size: "sm", onClick: actions.create, className: "shadow-none gap-1.5 sm:gap-2 h-8 sm:h-9", children: [_jsx(Plus, { className: "h-4 w-4" }), _jsx("span", { className: "hidden sm:inline", children: t('console.objectView.new') })] })), can(objectDef.name, 'create') && (_jsxs(Button, { size: "sm", variant: "outline", onClick: () => setShowImport(true), className: "shadow-none gap-1.5 sm:gap-2 h-8 sm:h-9", title: t('console.objectView.importTitle'), "data-testid": "object-view-import-button", children: [_jsx(Upload, { className: "h-4 w-4" }), _jsx("span", { className: "hidden sm:inline", children: t('console.objectView.import') })] })), objectDef.actions?.some((a) => a.locations?.includes('list_toolbar')) && (_jsx(SchemaRenderer, { schema: {
+    return (_jsxs(ActionProvider, { context: { objectName: objectDef.name, user: currentUser }, onConfirm: confirmHandler, onToast: toastHandler, onNavigate: navigateHandler, onParamCollection: paramCollectionHandler, handlers: { api: apiHandler, flow: flowHandler, script: serverActionHandler, modal: serverActionHandler }, children: [_jsxs("div", { className: "h-full flex flex-col bg-background min-w-0 overflow-hidden", children: [_jsx(ManagedByBanner, { managedBy: objectDef?.managedBy }), _jsx(PageHeader, { title: objectLabel(objectDef), description: objectDef.description ? objectDesc(objectDef) : undefined, icon: (() => { const I = getIcon(objectDef?.icon); return _jsx(I, { className: "h-4 w-4" }); })(), actions: _jsxs(_Fragment, { children: [affordances.create && can(objectDef.name, 'create') && (_jsxs(Button, { size: "sm", onClick: actions.create, className: "shadow-none gap-1.5 sm:gap-2 h-8 sm:h-9", children: [_jsx(Plus, { className: "h-4 w-4" }), _jsx("span", { className: "hidden sm:inline", children: t('console.objectView.new') })] })), affordances.import && can(objectDef.name, 'create') && (_jsxs(Button, { size: "sm", variant: "outline", onClick: () => setShowImport(true), className: "shadow-none gap-1.5 sm:gap-2 h-8 sm:h-9", title: t('console.objectView.importTitle'), "data-testid": "object-view-import-button", children: [_jsx(Upload, { className: "h-4 w-4" }), _jsx("span", { className: "hidden sm:inline", children: t('console.objectView.import') })] })), objectDef.actions?.some((a) => a.locations?.includes('list_toolbar')) && (_jsx(SchemaRenderer, { schema: {
                                         type: 'action:bar',
                                         location: 'list_toolbar',
                                         actions: (objectDef.actions || []).map((a) => ({
@@ -1504,6 +1549,11 @@ export function ObjectView({ dataSource, objects, onEdit, externalRefreshKey })
                                         })),
                                         size: 'sm',
                                         variant: 'outline',
+                                        // On mobile, collapse all schema-driven toolbar actions
+                                        // into a single overflow menu so the icon-only New /
+                                        // Import buttons stay visible without pushing the page
+                                        // title off-screen.
+                                        mobileMaxVisible: 0,
                                     } }))] }) }), showImport && (_jsx(Suspense, { fallback: null, children: _jsx(ImportWizard, { open: showImport, onOpenChange: setShowImport, objectName: objectDef.name, objectLabel: objectLabel(objectDef), fields: Object.entries(objectDef.fields || {}).map(([name, def]) => ({
                                 name,
                                 label: def?.label || name,

package/dist/views/RecordDetailView.js

@@ -17,11 +17,21 @@ import { toast } from 'sonner';
 import { Database, Users } from 'lucide-react';
 import { MetadataPanel, useMetadataInspector } from './MetadataInspector';
 import { SkeletonDetail } from '../skeletons';
+import { ManagedByBanner } from '../components/ManagedByBanner';
+import { resolveCrudAffordances } from '../utils/crudAffordances';
 import { ActionConfirmDialog } from './ActionConfirmDialog';
 import { ActionParamDialog } from './ActionParamDialog';
 import { useRecordBreadcrumbTitle } from '../context/NavigationContext';
 import { getRecordDisplayName } from '../utils';
 const FALLBACK_USER = { id: 'current-user', name: 'Demo User' };
+/**
+ * Audit field names auto-injected by the framework's `applySystemFields`.
+ * Surfaced as a dedicated, collapsed "System Information" section on the
+ * record detail page so they don't clutter the primary content but remain
+ * discoverable. The inline-edit drawer keeps filtering them out via
+ * `DEFAULT_SYSTEM_FIELDS` in `@object-ui/plugin-detail/RecordDetailDrawer`.
+ */
+const AUDIT_FIELD_NAMES = new Set(['created_at', 'created_by', 'updated_at', 'updated_by']);
 export function RecordDetailView({ dataSource, objects, onEdit }) {
     const { appName, objectName, recordId } = useParams();
     const { showDebug } = useMetadataInspector();
@@ -226,9 +236,10 @@ export function RecordDetailView({ dataSource, objects, onEdit }) {
         });
         return () => { cancelled = true; };
     }, [dataSource, pureRecordId, childRelations]);
-    const currentUser = user
-        ? { id: user.id, name: user.name, avatar: user.image }
-        : FALLBACK_USER;
+    // Memoize so the object identity is stable across renders — otherwise
+    // any effect that depends on it (e.g. the feed loader below) would
+    // re-fire every render and create an infinite request loop.
+    const currentUser = useMemo(() => (user ? { id: user.id, name: user.name, avatar: user.image } : FALLBACK_USER), [user?.id, user?.name, user?.image]);
     // Fetch presence and comments from API
     useEffect(() => {
         if (!dataSource || !objectName || !pureRecordId)
@@ -239,28 +250,141 @@ export function RecordDetailView({ dataSource, objects, onEdit }) {
             .then((res) => { if (res.data?.length)
             setRecordViewers(res.data); })
             .catch(() => { });
-        // Fetch persisted comments and map to FeedItem[]
-        dataSource.find('sys_comment', { $filter: { threadId }, $orderby: { createdAt: 'asc' } })
+        // M10.10: Fetch persisted comments from sys_comment. Field names
+        // are snake_case to match the platform-objects schema
+        // (`packages/platform-objects/src/audit/sys-comment.object.ts`):
+        // thread_id, author_id, author_name, author_avatar_url, body,
+        // reactions (JSON string), parent_id, created_at, updated_at.
+        //
+        // Reactions are stored as a JSON object of `{ emoji: string[] }`
+        // (one array of user-ids per emoji). The aggregator below counts
+        // entries and flags the currently-signed-in user.
+        const parseReactions = (raw) => {
+            if (!raw)
+                return undefined;
+            let parsed;
+            if (typeof raw === 'string') {
+                try {
+                    parsed = JSON.parse(raw);
+                }
+                catch {
+                    return undefined;
+                }
+            }
+            else if (typeof raw === 'object') {
+                parsed = raw;
+            }
+            if (!parsed)
+                return undefined;
+            return Object.entries(parsed).map(([emoji, userIds]) => ({
+                emoji,
+                count: Array.isArray(userIds) ? userIds.length : 0,
+                reacted: Array.isArray(userIds) && userIds.includes(currentUser.id),
+            }));
+        };
+        dataSource.find('sys_comment', { $filter: { thread_id: threadId }, $orderby: { created_at: 'asc' } })
+            .then((res) => {
+            if (!res?.data?.length)
+                return;
+            const mapped = res.data.map((c) => ({
+                id: c.id,
+                type: 'comment',
+                actor: c.author_name ?? 'Unknown',
+                actorAvatarUrl: c.author_avatar_url ?? undefined,
+                body: c.body ?? '',
+                createdAt: c.created_at,
+                updatedAt: c.updated_at,
+                parentId: c.parent_id ?? undefined,
+                reactions: parseReactions(c.reactions),
+            }));
+            setFeedItems(prev => {
+                const byId = new Map();
+                for (const item of [...prev, ...mapped])
+                    byId.set(String(item.id), item);
+                return Array.from(byId.values()).sort((a, b) => {
+                    const ta = a.createdAt ? Date.parse(a.createdAt) : 0;
+                    const tb = b.createdAt ? Date.parse(b.createdAt) : 0;
+                    return ta - tb;
+                });
+            });
+        })
+            .catch(() => { });
+        // M10.11: Fetch sys_activity rows for this record and merge into the
+        // timeline. plugin-audit's writers populate sys_activity on every
+        // create/update/delete of objects that opt-in via enable.activities,
+        // so this surface — once wired here — gives us a Salesforce-style
+        // "what happened on this record" feed without any per-app glue.
+        //
+        // We map sys_activity.type to FeedItemType so the existing icon /
+        // colour map in RecordActivityTimeline keeps working:
+        //   created/updated/deleted/system → 'field_change'
+        //   assigned/shared                → 'field_change'
+        //   completed                      → 'task'
+        //   commented/mentioned            → 'comment'  (but skipped — we
+        //                                    already load these from
+        //                                    sys_comment to get reactions
+        //                                    and threading)
+        //
+        // sys_activity is system-owned so a 404 ("table not provisioned",
+        // older schemas without activities) is silently tolerated.
+        const activityTypeToFeed = {
+            created: 'field_change',
+            updated: 'field_change',
+            deleted: 'field_change',
+            assigned: 'field_change',
+            shared: 'field_change',
+            system: 'system',
+            completed: 'task',
+            commented: undefined,
+            mentioned: undefined,
+            login: undefined,
+            logout: undefined,
+        };
+        dataSource.find('sys_activity', {
+            $filter: { object_name: objectName, record_id: pureRecordId },
+            $orderby: { timestamp: 'asc' },
+            $top: 200,
+        })
             .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,
-                })));
+            if (!res?.data?.length)
+                return;
+            const mapped = [];
+            for (const row of res.data) {
+                const t = activityTypeToFeed[row.type];
+                if (!t)
+                    continue;
+                // Prefer the explicit `timestamp` column, but tolerate older
+                // rows where the driver leaked the literal "NOW()" — fall
+                // back to created_at (always a real ISO date).
+                let when = row.timestamp;
+                if (!when || when === 'NOW()' || Number.isNaN(Date.parse(when))) {
+                    when = row.created_at;
+                }
+                mapped.push({
+                    id: row.id,
+                    type: t,
+                    actor: row.actor_name ?? 'System',
+                    actorAvatarUrl: row.actor_avatar_url ?? undefined,
+                    body: row.summary ?? '',
+                    createdAt: when,
+                });
             }
+            if (!mapped.length)
+                return;
+            setFeedItems(prev => {
+                // Merge by id (timeline events are append-only); sort by
+                // createdAt ascending so the activity panel reads as a
+                // chronological narrative.
+                const byId = new Map();
+                for (const item of [...prev, ...mapped]) {
+                    byId.set(String(item.id), item);
+                }
+                return Array.from(byId.values()).sort((a, b) => {
+                    const ta = a.createdAt ? Date.parse(a.createdAt) : 0;
+                    const tb = b.createdAt ? Date.parse(b.createdAt) : 0;
+                    return ta - tb;
+                });
+            });
         })
             .catch(() => { });
     }, [dataSource, objectName, pureRecordId, currentUser]);
@@ -274,16 +398,18 @@ export function RecordDetailView({ dataSource, objects, onEdit }) {
             createdAt: new Date().toISOString(),
         };
         setFeedItems(prev => [...prev, newItem]);
-        // Persist to backend
+        // Persist to backend (M10.10: snake_case fields per sys_comment schema)
         if (dataSource) {
             const threadId = `${objectName}:${pureRecordId}`;
             dataSource.create('sys_comment', {
                 id: newItem.id,
-                threadId,
-                author: currentUser,
-                content: text,
-                mentions: [],
-                createdAt: newItem.createdAt,
+                thread_id: threadId,
+                author_id: currentUser.id,
+                author_name: currentUser.name,
+                author_avatar_url: 'avatar' in currentUser ? currentUser.avatar : undefined,
+                body: text,
+                mentions: '[]',
+                created_at: newItem.createdAt,
             }).catch(() => { });
         }
     }, [currentUser, dataSource, objectName, pureRecordId]);
@@ -308,12 +434,14 @@ export function RecordDetailView({ dataSource, objects, onEdit }) {
             const threadId = `${objectName}:${pureRecordId}`;
             dataSource.create('sys_comment', {
                 id: newItem.id,
-                threadId,
-                author: currentUser,
-                content: text,
-                mentions: [],
-                createdAt: newItem.createdAt,
-                parentId,
+                thread_id: threadId,
+                author_id: currentUser.id,
+                author_name: currentUser.name,
+                author_avatar_url: 'avatar' in currentUser ? currentUser.avatar : undefined,
+                body: text,
+                mentions: '[]',
+                created_at: newItem.createdAt,
+                parent_id: parentId,
             }).catch(() => { });
         }
     }, [currentUser, dataSource, objectName, pureRecordId]);
@@ -342,10 +470,31 @@ export function RecordDetailView({ dataSource, objects, onEdit }) {
                 reactions.push({ emoji, count: 1, reacted: true });
             }
             const updated = { ...item, reactions };
-            // Persist reaction toggle to backend
+            // Persist reactions to backend as JSON. The schema stores
+            // `reactions` as a textarea JSON string of `{ emoji: userIds[] }`,
+            // so we rebuild the canonical shape from the optimistic local
+            // state before writing back. A failed update silently keeps the
+            // optimistic UI change (best-effort, surfaced by RUM if needed).
             if (dataSource) {
+                const userId = currentUser.id;
+                const remoteShape = {};
+                for (const r of reactions) {
+                    // We don't have the original user-id list locally, so we
+                    // approximate by emitting the signed-in user when they are
+                    // the (only known) reactor. This is an over-simplification
+                    // for single-user pilot installs and will be replaced by a
+                    // proper backend reaction endpoint in M11.
+                    const ids = [];
+                    if (r.reacted)
+                        ids.push(userId);
+                    // Pad with a synthetic marker so count is preserved across
+                    // refreshes from other clients (best-effort).
+                    while (ids.length < r.count)
+                        ids.push('__other__');
+                    remoteShape[r.emoji] = ids;
+                }
                 dataSource.update('sys_comment', String(itemId), {
-                    $toggleReaction: { emoji, userId: currentUser.id },
+                    reactions: JSON.stringify(remoteShape),
                 }).catch(() => { });
             }
             return updated;
@@ -397,7 +546,9 @@ export function RecordDetailView({ dataSource, objects, onEdit }) {
                     // section, DetailSection flattens it (no Card chrome, no
                     // redundant "Details" heading).
                     showBorder: false,
-                    fields: Object.keys(objectDef.fields || {}).map(key => {
+                    fields: Object.keys(objectDef.fields || {})
+                        .filter(key => !AUDIT_FIELD_NAMES.has(key))
+                        .map(key => {
                         const fieldDef = objectDef.fields[key];
                         const refTarget = fieldDef.reference_to || fieldDef.reference;
                         return {
@@ -412,6 +563,32 @@ export function RecordDetailView({ dataSource, objects, onEdit }) {
                     }),
                 },
             ];
+        // Append a dedicated, collapsed "System Information" section listing
+        // audit fields (created/updated at/by) when the schema declares them
+        // and no author-defined section has already surfaced them. The framework
+        // auto-injects these as `system: true, readonly: true` via
+        // `applySystemFields`; rendering them here gives users visibility into
+        // record provenance without polluting the primary content area.
+        const fieldsAlreadyShown = new Set(sections.flatMap((s) => (s.fields || []).map((f) => f.name)));
+        const auditFieldsToShow = Array.from(AUDIT_FIELD_NAMES).filter(name => objectDef.fields?.[name] && !fieldsAlreadyShown.has(name));
+        if (auditFieldsToShow.length > 0) {
+            sections.push({
+                title: sectionLabel(objectDef.name, 'system_info', 'System Information'),
+                collapsible: true,
+                defaultCollapsed: true,
+                fields: auditFieldsToShow.map(key => {
+                    const fieldDef = objectDef.fields[key];
+                    const refTarget = fieldDef.reference_to || fieldDef.reference;
+                    return {
+                        name: key,
+                        label: fieldDef.label || key,
+                        type: fieldDef.type || 'text',
+                        readonly: true,
+                        ...(refTarget && { reference_to: refTarget }),
+                    };
+                }),
+            });
+        }
         // Filter actions for record_header location and deduplicate by name
         const recordHeaderActions = (() => {
             const seen = new Set();
@@ -526,13 +703,19 @@ export function RecordDetailView({ dataSource, objects, onEdit }) {
                 onRowDelete,
             };
         });
+        const affordances = resolveCrudAffordances(objectDef);
         return {
             type: 'detail-view',
             objectName: objectDef.name,
             resourceId: pureRecordId,
             showBack: true,
             onBack: 'history',
-            showEdit: true,
+            // Hide the Edit button for objects whose lifecycle isn't user-managed
+            // (approval requests, audit logs, better-auth tables, …).  The
+            // underlying form is also disabled when `managedBy !== 'platform'`
+            // (see plugin-form/ObjectForm), so even if a stray Edit URL is
+            // visited the inputs render read-only.
+            showEdit: affordances.edit,
             title: objectDef.label,
             primaryField,
             sections,
@@ -557,7 +740,7 @@ export function RecordDetailView({ dataSource, objects, onEdit }) {
     if (!objectDef) {
         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 }) })] }) }));
     }
-    return (_jsxs("div", { className: "h-full bg-background overflow-hidden flex flex-col relative", children: [_jsx("div", { className: "absolute top-2 sm:top-4 right-2 sm:right-4 z-50 flex items-center gap-2", children: 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 }, children: _jsx(DetailView, { schema: detailSchema, dataSource: dataSource, objectLabel: objectLabel({ name: objectDef.name, label: objectDef.label }), onDataLoaded: (record) => {
+    return (_jsxs("div", { className: "h-full bg-background overflow-hidden flex flex-col relative", children: [_jsx(ManagedByBanner, { managedBy: objectDef?.managedBy }), _jsx("div", { className: "absolute top-2 sm:top-4 right-2 sm:right-4 z-50 flex items-center gap-2", children: 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 }, children: _jsx(DetailView, { schema: detailSchema, dataSource: dataSource, objectLabel: objectLabel({ name: objectDef.name, label: objectDef.label }), onDataLoaded: (record) => {
                                     if (!record || typeof record !== 'object')
                                         return;
                                     // Resolve the same way DetailView's header does, so the

package/dist/views/RecordFormPage.js

@@ -39,6 +39,7 @@ import { useMetadata } from '../providers/MetadataProvider';
 import { useAdapter } from '../providers/AdapterProvider';
 import { ExpressionProvider, evaluateVisibility } from '../providers/ExpressionProvider';
 import { SkeletonDetail } from '../skeletons';
+import { ManagedByBanner } from '../components/ManagedByBanner';
 import { useAuth } from '@object-ui/auth';
 import { ExpressionEvaluator } from '@object-ui/core';
 /**
@@ -161,7 +162,7 @@ export function RecordFormPage({ mode }) {
     if (!objectDef) {
         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 }) }), _jsx("div", { className: "mt-4", children: _jsxs(Button, { variant: "outline", onClick: () => navigate(baseUrl), children: [_jsx(ArrowLeft, { className: "mr-2 h-4 w-4" }), t('empty.back')] }) })] }) }));
     }
-    return (_jsx(ExpressionProvider, { user: expressionUser, app: { name: appName }, data: {}, children: _jsxs("div", { className: "flex flex-col h-full overflow-hidden bg-background", "data-testid": "record-form-page", "data-mode": mode, children: [_jsxs("header", { className: "sticky top-0 z-10 flex items-center gap-3 border-b bg-background px-4 py-3 sm:px-6", children: [_jsx(Button, { variant: "ghost", size: "sm", onClick: goBack, "data-testid": "record-form-page-back", "aria-label": t('common.back', { defaultValue: 'Back' }), children: _jsx(ArrowLeft, { className: "h-4 w-4" }) }), _jsxs("nav", { "aria-label": "Breadcrumb", className: "flex items-center gap-2 text-sm text-muted-foreground", children: [_jsx(Link, { to: objectListUrl, className: "hover:text-foreground transition-colors", children: label }), _jsx("span", { "aria-hidden": "true", children: "/" }), _jsx("span", { className: "text-foreground font-medium", "data-testid": "record-form-page-title", children: pageTitle })] })] }), _jsx("div", { className: "flex-1 overflow-auto p-4 sm:p-6", children: _jsx("div", { className: "mx-auto max-w-4xl", children: _jsx(ObjectForm, { schema: {
+    return (_jsx(ExpressionProvider, { user: expressionUser, app: { name: appName }, data: {}, children: _jsxs("div", { className: "flex flex-col h-full overflow-hidden bg-background", "data-testid": "record-form-page", "data-mode": mode, children: [_jsxs("header", { className: "sticky top-0 z-10 flex items-center gap-3 border-b bg-background px-4 py-3 sm:px-6", children: [_jsx(Button, { variant: "ghost", size: "sm", onClick: goBack, "data-testid": "record-form-page-back", "aria-label": t('common.back', { defaultValue: 'Back' }), children: _jsx(ArrowLeft, { className: "h-4 w-4" }) }), _jsxs("nav", { "aria-label": "Breadcrumb", className: "flex items-center gap-2 text-sm text-muted-foreground", children: [_jsx(Link, { to: objectListUrl, className: "hover:text-foreground transition-colors", children: label }), _jsx("span", { "aria-hidden": "true", children: "/" }), _jsx("span", { className: "text-foreground font-medium", "data-testid": "record-form-page-title", children: pageTitle })] })] }), _jsx(ManagedByBanner, { managedBy: objectDef?.managedBy }), _jsx("div", { className: "flex-1 overflow-auto p-4 sm:p-6", children: _jsx("div", { className: "mx-auto max-w-4xl", children: _jsx(ObjectForm, { schema: {
                                 type: 'object-form',
                                 formType: 'simple',
                                 objectName: objectDef.name,

package/dist/views/ReportView.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useEffect, useCallback, useMemo, lazy, Suspense } from 'react';
 import { useParams } from 'react-router-dom';
 const ReportViewer = lazy(() => import('@object-ui/plugin-report').then((m) => ({ default: m.ReportViewer })));
+const ReportRenderer = lazy(() => import('@object-ui/plugin-report').then((m) => ({ default: m.ReportRenderer })));
 const ReportConfigPanel = lazy(() => import('@object-ui/plugin-report').then((m) => ({ default: m.ReportConfigPanel })));
 import { Empty, EmptyTitle, EmptyDescription } from '@object-ui/components';
 import { Pencil, BarChart3, Loader2 } from 'lucide-react';
@@ -326,6 +327,20 @@ export function ReportView({ dataSource }) {
     };
     // Use live-edited schema for preview (persists after closing panel until metadata refreshes)
     const previewReport = editSchema || reportData;
+    // Route any object-backed spec report (matrix/joined/tabular/summary) through
+    // the spec ReportRenderer dispatcher. It handles aggregation, charts, KPIs
+    // and drill protocol end-to-end. The legacy ReportViewer is only used as a
+    // last resort for fully-legacy schemas that lack `objectName` (e.g. inline
+    // `fields` + `data` arrays from older app code).
+    const useSpecRenderer = Boolean(previewReport &&
+        previewReport.objectName &&
+        (previewReport.type === 'matrix' ||
+            previewReport.type === 'joined' ||
+            previewReport.type === 'summary' ||
+            previewReport.type === 'tabular' ||
+            previewReport.type === undefined ||
+            (Array.isArray(previewReport.groupingsAcross) && previewReport.groupingsAcross.length > 0) ||
+            Array.isArray(previewReport.columns)));
     const reportForViewer = mapReportForViewer(previewReport);
     const viewerSchema = {
         type: 'report-viewer',
@@ -335,5 +350,5 @@ export function ReportView({ dataSource }) {
         allowExport: true,
         loading: dataLoading, // Loading state for data fetching
     };
-    return (_jsxs("div", { className: "flex flex-col h-full overflow-hidden bg-background", children: [_jsxs("div", { className: "flex flex-col sm:flex-row justify-between sm:items-center gap-3 sm:gap-4 p-4 sm:p-6 border-b shrink-0", children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("h1", { className: "text-lg sm:text-xl md:text-2xl font-bold tracking-tight truncate", children: previewReport.title || previewReport.label || 'Report Viewer' }), previewReport.description && (_jsx("p", { className: "text-sm text-muted-foreground mt-1 line-clamp-2", children: previewReport.description }))] }), _jsx("div", { className: "shrink-0 flex items-center gap-1.5", children: _jsxs("button", { type: "button", onClick: handleOpenConfigPanel, className: "inline-flex items-center gap-1.5 rounded-md border border-input bg-background px-2.5 py-1.5 text-xs font-medium text-muted-foreground shadow-sm hover:bg-accent hover:text-accent-foreground", "data-testid": "report-edit-button", children: [_jsx(Pencil, { className: "h-3.5 w-3.5" }), "Edit"] }) })] }), _jsxs("div", { className: "flex-1 overflow-hidden flex flex-col sm:flex-row relative", children: [_jsx("div", { className: "flex-1 min-w-0 overflow-auto p-4 sm:p-6 lg:p-8 bg-muted/5", children: _jsx("div", { className: "max-w-5xl mx-auto shadow-sm border rounded-lg sm:rounded-xl bg-background overflow-hidden min-h-150", children: _jsx(Suspense, { fallback: _jsx("div", { className: "p-8 text-sm text-muted-foreground", children: "Loading report\u2026" }), children: _jsx(ReportViewer, { schema: viewerSchema }) }) }) }), _jsx(Suspense, { fallback: null, children: _jsx(ReportConfigPanel, { open: configPanelOpen, onClose: handleCloseConfigPanel, config: reportConfig, onSave: handleReportConfigSave, onFieldChange: handleReportFieldChange, availableFields: availableFields }) }), _jsx(MetadataPanel, { open: showDebug, sections: [{ title: 'Report Configuration', data: previewReport }] })] })] }));
+    return (_jsxs("div", { className: "flex flex-col h-full overflow-hidden bg-background", children: [_jsxs("div", { className: "flex flex-col sm:flex-row justify-between sm:items-center gap-3 sm:gap-4 p-4 sm:p-6 border-b shrink-0", children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("h1", { className: "text-lg sm:text-xl md:text-2xl font-bold tracking-tight truncate", children: previewReport.title || previewReport.label || 'Report Viewer' }), previewReport.description && (_jsx("p", { className: "text-sm text-muted-foreground mt-1 line-clamp-2", children: previewReport.description }))] }), _jsx("div", { className: "shrink-0 flex items-center gap-1.5", children: _jsxs("button", { type: "button", onClick: handleOpenConfigPanel, className: "inline-flex items-center gap-1.5 rounded-md border border-input bg-background px-2.5 py-1.5 text-xs font-medium text-muted-foreground shadow-sm hover:bg-accent hover:text-accent-foreground", "data-testid": "report-edit-button", children: [_jsx(Pencil, { className: "h-3.5 w-3.5" }), "Edit"] }) })] }), _jsxs("div", { className: "flex-1 overflow-hidden flex flex-col sm:flex-row relative", children: [_jsx("div", { className: "flex-1 min-w-0 overflow-auto p-4 sm:p-6 lg:p-8 bg-muted/5", children: _jsx("div", { className: "w-full shadow-sm border rounded-lg sm:rounded-xl bg-background overflow-hidden min-h-150", children: _jsx(Suspense, { fallback: _jsx("div", { className: "p-8 text-sm text-muted-foreground", children: "Loading report\u2026" }), children: useSpecRenderer ? (_jsx("div", { className: "p-4 sm:p-6", children: _jsx(ReportRenderer, { schema: previewReport, dataSource: dataSource }) })) : (_jsx(ReportViewer, { schema: viewerSchema })) }) }) }), _jsx(Suspense, { fallback: null, children: _jsx(ReportConfigPanel, { open: configPanelOpen, onClose: handleCloseConfigPanel, config: reportConfig, onSave: handleReportConfigSave, onFieldChange: handleReportFieldChange, availableFields: availableFields }) }), _jsx(MetadataPanel, { open: showDebug, sections: [{ title: 'Report Configuration', data: previewReport }] })] })] }));
 }