@object-ui/app-shell 4.3.0 → 4.5.0

package/CHANGELOG.md

@@ -1,5 +1,121 @@
 # @object-ui/app-shell — Changelog
 
+## 4.5.0
+
+### Patch Changes
+
+- d714e85: Lookup display-name resolution now falls back through a Salesforce-style chain
+  when an `$expand`'d reference object lacks a top-level `name`/`label`/
+  `display_name`/`title` field:
+  1. Standard display fields (existing behaviour)
+  2. `salutation first_name last_name` composite — handles person records that
+     only carry first/last name parts
+  3. `email` — last-resort identifier, beats the opaque id
+
+  Applies to `LookupCellRenderer`, `PageHeader.subtitle` interpolation,
+  `DetailView` page-mode `titleFormat`, and the shared `formatRecordTitle`
+  utility. Concretely: a Contact reference with `first_name: Bob`, `last_name:
+Lin` and no `name` field now renders as `Bob Lin` everywhere — instead of
+  the email or [object Object] fallback.
+
+- Updated dependencies [ab5e281]
+- Updated dependencies [d714e85]
+- Updated dependencies [6b6afd1]
+- Updated dependencies [22fa558]
+- Updated dependencies [aa7855f]
+- Updated dependencies [170d89f]
+  - @object-ui/types@4.5.0
+  - @object-ui/fields@4.5.0
+  - @object-ui/layout@4.5.0
+  - @object-ui/components@4.5.0
+  - @object-ui/i18n@4.5.0
+  - @object-ui/auth@4.5.0
+  - @object-ui/collaboration@4.5.0
+  - @object-ui/core@4.5.0
+  - @object-ui/data-objectstack@4.5.0
+  - @object-ui/permissions@4.5.0
+  - @object-ui/react@4.5.0
+
+## 4.4.0
+
+### Patch Changes
+
+- 501ce20: fix(detail): hide system/tenant fields from auto-generated record detail
+
+  The auto-generated detail section (used when an object has no explicit form
+  sections) was leading every record page with `organization_id` (rendered as
+  "ORGANIZATION: Admin's Workspace") — pure tenancy metadata with no business
+  value. Extended the existing audit-field filter to also drop
+  `organization_id`, `tenant_id`, `is_deleted`, and `deleted_at`. Objects that
+  intentionally surface tenant info can still do so via explicit
+  `views.form.sections`.
+
+- 63eb66d: fix(detail): expand lookup fields so subtitle + lookup cells show display names
+
+  The record-page fetch in `RecordDetailView` (the page-mode path) now
+  requests `$expand` for every lookup/master_detail field on the object,
+  mirroring the behaviour the legacy `DetailView` already had. Combined
+  with two small downstream fixes — `PageHeader` subtitle interpolation
+  now extracts `name/label` from expanded reference objects instead of
+  rendering `[object Object]`, and `LookupCellRenderer` now short-circuits
+  to `pickRecordDisplayName` when the value is already a nested record —
+  all `record:*` renderers and the page header subtitle (`Owned by
+{account}`) now display the related record's name rather than the raw
+  foreign-key id.
+
+- 2bd45af: feat(shell): main becomes the scroll container; record tabs are sticky
+  - `AppShell`'s SidebarProvider wrapper is now constrained to viewport
+    height (`h-svh overflow-hidden`) instead of expanding with content via
+    the default `min-h-svh`. This makes the inner `<main>` (which is
+    `overflow-auto`) the actual scroll container instead of the window.
+  - `RecordDetailView` page-mode container drops the redundant
+    `h-full overflow-auto` (avoids nested scrollers; main owns scroll now).
+  - `page:tabs` (horizontal) gets `sticky top-0 z-20` with a translucent
+    backdrop so the tab strip stays visible while users scroll through
+    long record pages — the Salesforce Lightning behaviour our schemas
+    were already implying.
+
+- e33d575: Support dotted paths (e.g. `{account.name}`) in object `titleFormat`. When a
+  placeholder resolves to an expanded reference object, automatically extract
+  its `name`/`label`/`display_name`/`title` so detail page titles render the
+  related record's display name instead of falling through to the object label.
+- Updated dependencies [63eb66d]
+- Updated dependencies [67dabe1]
+- Updated dependencies [ef0e30d]
+- Updated dependencies [2bd45af]
+  - @object-ui/layout@4.4.0
+  - @object-ui/fields@4.4.0
+  - @object-ui/components@4.4.0
+  - @object-ui/types@4.4.0
+  - @object-ui/core@4.4.0
+  - @object-ui/i18n@4.4.0
+  - @object-ui/react@4.4.0
+  - @object-ui/data-objectstack@4.4.0
+  - @object-ui/auth@4.4.0
+  - @object-ui/permissions@4.4.0
+  - @object-ui/collaboration@4.4.0
+
+## 4.3.1
+
+### Patch Changes
+
+- 9167935: fix
+- 52af5cf: fix
+- Updated dependencies [5f4ac6e]
+- Updated dependencies [6b683c8]
+- Updated dependencies [0d8eb98]
+  - @object-ui/i18n@4.3.1
+  - @object-ui/components@4.3.1
+  - @object-ui/layout@4.3.1
+  - @object-ui/fields@4.3.1
+  - @object-ui/react@4.3.1
+  - @object-ui/types@4.3.1
+  - @object-ui/core@4.3.1
+  - @object-ui/data-objectstack@4.3.1
+  - @object-ui/auth@4.3.1
+  - @object-ui/permissions@4.3.1
+  - @object-ui/collaboration@4.3.1
+
 ## 4.3.0
 
 ### Patch Changes

package/dist/console/AppContent.js

@@ -297,8 +297,8 @@ export function AppContent({ extraRoutes, extraRoutesNoApp } = {}) {
                             showSubmit: true,
                             showCancel: true,
                             submitText: editingRecord
-                                ? t('form.update', { defaultValue: t('common.save') || '保存' })
-                                : t('form.create', { defaultValue: t('common.create') || '创建' }),
+                                ? t('form.update', { defaultValue: t('common.save', { defaultValue: 'Save' }) })
+                                : t('form.create', { defaultValue: t('common.create', { defaultValue: 'Create' }) }),
                             cancelText: t('common.cancel'),
                         }, dataSource: dataSource }, editingRecord?.id || 'new'))] })] }));
 }

package/dist/console/home/HomePage.js

@@ -21,7 +21,6 @@ import { useMetadata } from '../../providers/MetadataProvider';
 import { useRecentItems } from '../../hooks/useRecentItems';
 import { useFavorites } from '../../hooks/useFavorites';
 import { useObjectTranslation } from '@object-ui/i18n';
-import { QuickActions } from './QuickActions';
 import { AppCard } from './AppCard';
 import { RecentApps } from './RecentApps';
 import { StarredApps } from './StarredApps';
@@ -52,5 +51,5 @@ export function HomePage() {
                             defaultValue: 'Get started by creating your first application or configure your system settings.',
                         }) }), _jsxs("div", { className: "mt-6 flex flex-col sm:flex-row items-center gap-3", children: [_jsxs(Button, { onClick: () => navigate('/create-app'), "data-testid": "create-first-app-btn", children: [_jsx(Plus, { className: "mr-2 h-4 w-4" }), t('home.createFirstApp', { defaultValue: 'Create Your First App' })] }), _jsxs(Button, { variant: "outline", onClick: () => navigate('/apps/setup'), "data-testid": "go-to-settings-btn", children: [_jsx(Settings, { className: "mr-2 h-4 w-4" }), t('home.systemSettings', { defaultValue: 'System Settings' })] })] })] }) }));
     }
-    return (_jsxs("div", { className: "bg-background", children: [_jsxs("div", { className: "px-4 sm:px-6 pt-6 pb-4", children: [_jsx("h1", { className: "text-2xl sm:text-3xl font-bold tracking-tight", children: t('home.title', { defaultValue: 'Home' }) }), _jsx("p", { className: "text-sm text-muted-foreground mt-1", children: t('home.subtitle', { defaultValue: 'Your workspace dashboard' }) })] }), _jsxs("div", { className: "px-4 sm:px-6 py-4 space-y-8", children: [_jsx(QuickActions, {}), starredApps.length > 0 && (_jsx(StarredApps, { items: starredApps })), recentApps.length > 0 && (_jsx(RecentApps, { items: recentApps })), _jsxs("section", { children: [_jsx("h2", { className: "text-2xl font-semibold tracking-tight mb-4", children: t('home.allApps', { defaultValue: 'All Applications' }) }), _jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4", children: activeApps.map((app) => (_jsx(AppCard, { app: app, onClick: () => navigate(`/apps/${app.name}`), isFavorite: favorites.some(f => f.id === `app:${app.name}`) }, app.name))) })] })] })] }));
+    return (_jsxs("div", { className: "bg-background", children: [_jsxs("div", { className: "px-4 sm:px-6 pt-6 pb-4", children: [_jsx("h1", { className: "text-2xl sm:text-3xl font-bold tracking-tight", children: t('home.title', { defaultValue: 'Home' }) }), _jsx("p", { className: "text-sm text-muted-foreground mt-1", children: t('home.subtitle', { defaultValue: 'Your workspace dashboard' }) })] }), _jsxs("div", { className: "px-4 sm:px-6 py-4 space-y-8", children: [starredApps.length > 0 && (_jsx(StarredApps, { items: starredApps })), recentApps.length > 0 && (_jsx(RecentApps, { items: recentApps })), _jsxs("section", { children: [_jsx("h2", { className: "text-2xl font-semibold tracking-tight mb-4", children: t('home.allApps', { defaultValue: 'All Applications' }) }), _jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4", children: activeApps.map((app) => (_jsx(AppCard, { app: app, onClick: () => navigate(`/apps/${app.name}`), isFavorite: favorites.some(f => f.id === `app:${app.name}`) }, app.name))) })] })] })] }));
 }

package/dist/console/organizations/OrganizationsPage.js

@@ -7,7 +7,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * organization and navigates to `/home`), or create a new organization.
  * @module
  */
-import { useMemo, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { Avatar, AvatarImage, AvatarFallback, Button, Input, Empty, EmptyTitle, EmptyDescription, } from '@object-ui/components';
 import { Plus, Search, Loader2 } from 'lucide-react';
 import { useAuth } from '@object-ui/auth';
@@ -55,7 +55,33 @@ export function OrganizationsPage() {
         setIsCreateOpen(false);
         handleSelect(org);
     };
-    if (isOrganizationsLoading) {
+    /**
+     * UX P0-1: auto-skip the picker when the user belongs to exactly one
+     * organization. The picker is friction for >90% of users (single-org
+     * tenants) and only useful when there's an actual choice. We still mount
+     * the page (so direct navigation to `/organizations` works) but redirect
+     * once orgs have finished loading.
+     *
+     * Guarded by a ref so we only auto-redirect once per mount — if the user
+     * later creates a second org and returns here, they'll see the picker.
+     */
+    const autoSelectedRef = useRef(false);
+    useEffect(() => {
+        if (autoSelectedRef.current)
+            return;
+        if (isOrganizationsLoading)
+            return;
+        if (orgList.length !== 1)
+            return;
+        autoSelectedRef.current = true;
+        void handleSelect(orgList[0]);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [isOrganizationsLoading, orgList.length]);
+    // Show a spinner while we're either still loading, or about to auto-redirect
+    // because there's only one org. This prevents the picker from briefly
+    // flashing on screen for single-org users.
+    const willAutoSelect = !isOrganizationsLoading && orgList.length === 1;
+    if (isOrganizationsLoading || willAutoSelect) {
         return (_jsx("div", { className: "flex flex-1 items-center justify-center py-20", children: _jsx(Loader2, { className: "h-5 w-5 animate-spin text-muted-foreground" }) }));
     }
     return (_jsxs("div", { className: "mx-auto w-full max-w-5xl px-4 sm:px-6 py-8 sm:py-12", children: [_jsxs("div", { className: "mb-8", children: [_jsx("h1", { className: "text-2xl sm:text-3xl font-bold tracking-tight", children: t('organizations.heading', { defaultValue: 'Your Organizations' }) }), _jsx("p", { className: "text-sm text-muted-foreground mt-1", children: t('organizations.subtitle', {

package/dist/hooks/index.d.ts

@@ -4,4 +4,5 @@ export { useNavPins } from './useNavPins';
 export { useNavigationSync, NavigationSyncEffect, generateNavId, addNavigationItem, removeNavigationItems, renameNavigationItems, navigationEqual, type UseNavigationSyncReturn, } from './useNavigationSync';
 export { useObjectActions } from './useObjectActions';
 export { useRecentItems, type RecentItem } from './useRecentItems';
+export { useRecordApprovals, type ApprovalProcessLite, type ApprovalRequestLite } from './useRecordApprovals';
 export { useResponsiveSidebar } from './useResponsiveSidebar';

package/dist/hooks/index.js

@@ -4,4 +4,5 @@ export { useNavPins } from './useNavPins';
 export { useNavigationSync, NavigationSyncEffect, generateNavId, addNavigationItem, removeNavigationItems, renameNavigationItems, navigationEqual, } from './useNavigationSync';
 export { useObjectActions } from './useObjectActions';
 export { useRecentItems } from './useRecentItems';
+export { useRecordApprovals } from './useRecordApprovals';
 export { useResponsiveSidebar } from './useResponsiveSidebar';

package/dist/hooks/useRecordApprovals.d.ts

@@ -0,0 +1,49 @@
+/**
+ * useRecordApprovals
+ *
+ * Resolves the approval state for a single record so the detail-view header
+ * can surface "Submit for Approval" / "Recall" actions and a status badge.
+ *
+ * Talks directly to the framework REST endpoints under
+ * `/api/v1/approvals/*`. Fails open: if the approvals plugin is not
+ * installed (404) or the user has no identity, returns inert state so the
+ * detail view continues to render normally.
+ */
+export interface ApprovalProcessLite {
+    id: string;
+    name: string;
+    label?: string;
+    object_name: string;
+    active?: boolean;
+}
+export interface ApprovalRequestLite {
+    id: string;
+    process_name: string;
+    object_name: string;
+    record_id: string;
+    status: 'pending' | 'approved' | 'rejected' | 'recalled' | string;
+    submitter_id?: string | null;
+    current_step?: string | null;
+    pending_approvers?: string[] | null;
+    submitted_at?: string;
+    completed_at?: string | null;
+}
+interface UseRecordApprovalsResult {
+    loading: boolean;
+    available: boolean;
+    processes: ApprovalProcessLite[];
+    pendingRequest: ApprovalRequestLite | null;
+    latestRequest: ApprovalRequestLite | null;
+    canSubmit: boolean;
+    canRecall: boolean;
+    submit: (input?: {
+        processName?: string;
+        comment?: string;
+    }) => Promise<ApprovalRequestLite>;
+    recall: (input?: {
+        comment?: string;
+    }) => Promise<ApprovalRequestLite>;
+    refresh: () => Promise<void>;
+}
+export declare function useRecordApprovals(objectName: string | undefined, recordId: string | undefined, currentUserId?: string | null): UseRecordApprovalsResult;
+export {};

package/dist/hooks/useRecordApprovals.js

@@ -0,0 +1,132 @@
+/**
+ * useRecordApprovals
+ *
+ * Resolves the approval state for a single record so the detail-view header
+ * can surface "Submit for Approval" / "Recall" actions and a status badge.
+ *
+ * Talks directly to the framework REST endpoints under
+ * `/api/v1/approvals/*`. Fails open: if the approvals plugin is not
+ * installed (404) or the user has no identity, returns inert state so the
+ * detail view continues to render normally.
+ */
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+function apiBase() {
+    const url = import.meta.env?.VITE_SERVER_URL || '';
+    return `${String(url).replace(/\/$/, '')}/api/v1`;
+}
+async function fetchJson(path, init) {
+    const res = await fetch(`${apiBase()}${path}`, {
+        credentials: 'include',
+        headers: { 'Content-Type': 'application/json', ...(init?.headers || {}) },
+        ...init,
+    });
+    let payload = null;
+    try {
+        payload = await res.json();
+    }
+    catch { /* empty */ }
+    if (!res.ok) {
+        const err = new Error(payload?.error || `HTTP ${res.status}`);
+        err.code = payload?.code ?? `HTTP_${res.status}`;
+        err.status = res.status;
+        throw err;
+    }
+    return payload;
+}
+export function useRecordApprovals(objectName, recordId, currentUserId) {
+    const [loading, setLoading] = useState(false);
+    const [available, setAvailable] = useState(true);
+    const [processes, setProcesses] = useState([]);
+    const [requests, setRequests] = useState([]);
+    const unavailableRef = useRef(false);
+    const refresh = useCallback(async () => {
+        if (!objectName || !recordId)
+            return;
+        if (unavailableRef.current)
+            return;
+        setLoading(true);
+        try {
+            const [procResp, reqResp] = await Promise.all([
+                fetchJson(`/approvals/processes?object=${encodeURIComponent(objectName)}&activeOnly=true`),
+                fetchJson(`/approvals/requests?object=${encodeURIComponent(objectName)}&recordId=${encodeURIComponent(recordId)}`),
+            ]);
+            setProcesses(procResp?.data ?? []);
+            setRequests(reqResp?.data ?? []);
+            setAvailable(true);
+        }
+        catch (err) {
+            if (err?.status === 404) {
+                unavailableRef.current = true;
+                setAvailable(false);
+            }
+            // Other errors are transient — silently keep last state.
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [objectName, recordId]);
+    useEffect(() => {
+        if (!objectName || !recordId) {
+            setProcesses([]);
+            setRequests([]);
+            return;
+        }
+        refresh();
+    }, [objectName, recordId, refresh]);
+    const pendingRequest = useMemo(() => requests.find((r) => r.status === 'pending') ?? null, [requests]);
+    const latestRequest = useMemo(() => {
+        if (requests.length === 0)
+            return null;
+        const sorted = [...requests].sort((a, b) => {
+            const at = a.submitted_at || a.completed_at || '';
+            const bt = b.submitted_at || b.completed_at || '';
+            return bt.localeCompare(at);
+        });
+        return sorted[0] ?? null;
+    }, [requests]);
+    const canSubmit = available && processes.length > 0 && !pendingRequest;
+    const canRecall = !!pendingRequest && !!currentUserId
+        && pendingRequest.submitter_id === currentUserId;
+    const submit = useCallback(async (input) => {
+        if (!objectName || !recordId)
+            throw new Error('Missing object or record');
+        const processName = input?.processName
+            ?? (processes.length === 1 ? processes[0].name : undefined);
+        const row = await fetchJson(`/approvals/requests`, {
+            method: 'POST',
+            body: JSON.stringify({
+                object: objectName,
+                recordId,
+                ...(processName ? { processName } : {}),
+                ...(input?.comment ? { comment: input.comment } : {}),
+            }),
+        });
+        await refresh();
+        return row;
+    }, [objectName, recordId, processes, refresh]);
+    const recall = useCallback(async (input) => {
+        if (!pendingRequest)
+            throw new Error('No pending request');
+        const out = await fetchJson(`/approvals/requests/${encodeURIComponent(pendingRequest.id)}/recall`, {
+            method: 'POST',
+            body: JSON.stringify({
+                ...(currentUserId ? { actorId: currentUserId } : {}),
+                ...(input?.comment ? { comment: input.comment } : {}),
+            }),
+        });
+        await refresh();
+        return out.request;
+    }, [pendingRequest, currentUserId, refresh]);
+    return {
+        loading,
+        available,
+        processes,
+        pendingRequest,
+        latestRequest,
+        canSubmit,
+        canRecall,
+        submit,
+        recall,
+        refresh,
+    };
+}

package/dist/layout/ActivityFeed.js

@@ -57,7 +57,7 @@ export function ActivityFeed({ activities = [], className }) {
         delete: t('layout.activityFeed.typeDelete'),
         comment: t('layout.activityFeed.typeComment'),
     };
-    return (_jsxs(Sheet, { open: open, onOpenChange: setOpen, children: [_jsx(SheetTrigger, { asChild: true, children: _jsxs(Button, { variant: "ghost", size: "icon", className: className ?? 'h-8 w-8', "aria-label": t('layout.activityFeed.ariaLabel'), children: [_jsx(Activity, { className: "h-4 w-4" }), activities.length > 0 && (_jsx("span", { className: "absolute -top-0.5 -right-0.5 h-3.5 w-3.5 rounded-full bg-primary text-[9px] font-bold text-primary-foreground flex items-center justify-center", children: activities.length > 9 ? '9+' : activities.length }))] }) }), _jsxs(SheetContent, { side: "right", className: "w-80 sm:w-96", children: [_jsx(SheetHeader, { children: _jsxs(SheetTitle, { className: "flex items-center justify-between", children: [t('layout.activityFeed.title'), _jsxs(Button, { variant: showFilters ? 'secondary' : 'ghost', size: "sm", className: "h-7 px-2", onClick: () => setShowFilters(!showFilters), children: [_jsx(Filter, { className: "h-3.5 w-3.5 mr-1" }), t('layout.activityFeed.filter')] })] }) }), showFilters && (_jsx("div", { className: "flex flex-wrap gap-1.5 mt-3 px-1", children: Object.keys(typeConfig).map(type => {
+    return (_jsxs(Sheet, { open: open, onOpenChange: setOpen, children: [_jsx(SheetTrigger, { asChild: true, children: _jsxs(Button, { variant: "ghost", size: "icon", className: className ?? 'h-8 w-8', "aria-label": t('layout.activityFeed.ariaLabel'), children: [_jsx(Activity, { className: "h-4 w-4" }), activities.length > 0 && (_jsx("span", { "aria-hidden": "true", className: "absolute top-1 right-1 h-1.5 w-1.5 rounded-full bg-sky-500 ring-2 ring-background" }))] }) }), _jsxs(SheetContent, { side: "right", className: "w-80 sm:w-96", children: [_jsx(SheetHeader, { children: _jsxs(SheetTitle, { className: "flex items-center justify-between", children: [t('layout.activityFeed.title'), _jsxs(Button, { variant: showFilters ? 'secondary' : 'ghost', size: "sm", className: "h-7 px-2", onClick: () => setShowFilters(!showFilters), children: [_jsx(Filter, { className: "h-3.5 w-3.5 mr-1" }), t('layout.activityFeed.filter')] })] }) }), showFilters && (_jsx("div", { className: "flex flex-wrap gap-1.5 mt-3 px-1", children: Object.keys(typeConfig).map(type => {
                             const { icon: Icon, color } = typeConfig[type];
                             const active = notificationPreferences[type];
                             return (_jsxs(Badge, { variant: active ? 'default' : 'outline', className: "cursor-pointer select-none gap-1", onClick: () => togglePreference(type), children: [_jsx(Icon, { className: `h-3 w-3 ${active ? '' : color}` }), typeLabels[type]] }, type));

package/dist/layout/AppHeader.d.ts

@@ -17,7 +17,7 @@
  * @module
  */
 import { type PresenceUser } from '@object-ui/collaboration';
-import { type ActivityItem } from './ActivityFeed';
+import type { ActivityItem } from './ActivityFeed';
 import type { ConnectionState } from '@object-ui/data-objectstack';
 export type AppHeaderVariant = 'app' | 'home' | 'orgs';
 export interface AppHeaderProps {

package/dist/layout/AppHeader.js

@@ -19,14 +19,14 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
  */
 import { useLocation, useParams, Link, useNavigate } from 'react-router-dom';
 import { SidebarTrigger, Button, DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuGroup, Avatar, AvatarImage, AvatarFallback, } from '@object-ui/components';
-import { Search, HelpCircle, ChevronDown, Settings, LogOut, User as UserIcon, Boxes, Bell, CheckSquare, } from 'lucide-react';
+import { Search, HelpCircle, ChevronDown, Settings, LogOut, User as UserIcon, Boxes, } from 'lucide-react';
 import { useState, useEffect, useCallback, useRef } from 'react';
 import { useOffline } from '@object-ui/react';
 import { PresenceAvatars } from '@object-ui/collaboration';
 import { ModeToggle } from './ModeToggle';
 import { LocaleSwitcher } from './LocaleSwitcher';
 import { ConnectionStatus } from './ConnectionStatus';
-import { ActivityFeed } from './ActivityFeed';
+import { InboxPopover } from './InboxPopover';
 import { AppSwitcher } from './AppSwitcher';
 import { useAdapter } from '../providers/AdapterProvider';
 import { useObjectTranslation, useObjectLabel } from '@object-ui/i18n';
@@ -375,18 +375,5 @@ export function AppHeader({ variant, appName, objects, connectionState, presence
     return (_jsxs("div", { className: "flex items-center justify-between w-full h-full", children: [_jsxs("div", { className: "flex items-center min-w-0 flex-1", children: [_jsx(Link, { to: "/home", className: "flex items-center justify-center h-7 w-7 shrink-0 rounded-md bg-primary text-primary-foreground hover:bg-primary/90 transition-colors", title: "ObjectStack", children: _jsx(Boxes, { className: "h-4 w-4" }) }), resolvedVariant === 'home' && (_jsx("span", { className: "hidden sm:inline ml-2 text-sm font-semibold tracking-tight", children: "ObjectStack" })), resolvedVariant === 'orgs' && (_jsxs(_Fragment, { children: [_jsx(PathSep, {}), _jsx("span", { className: "text-sm font-medium text-foreground/80 px-1.5", children: t('organizations.title', { defaultValue: 'Organizations' }) })] })), isApp && (_jsxs(_Fragment, { children: [_jsx(SidebarTrigger, { className: "md:hidden shrink-0 ml-1", "aria-label": t('common.toggleSidebar') || 'Toggle sidebar' }), activeAppName && onAppChange ? (_jsxs(_Fragment, { children: [_jsx(PathSep, {}), _jsx(AppSwitcher, { activeAppName: activeAppName, onAppChange: onAppChange })] })) : appName ? (_jsxs(_Fragment, { children: [_jsx(PathSep, {}), _jsx("span", { className: "text-sm font-medium text-foreground/80 px-1.5", children: appName })] })) : null, extraSegments.map((seg, i) => {
                                 const isLast = i === extraSegments.length - 1;
                                 return (_jsxs("span", { className: "hidden sm:flex items-center min-w-0", children: [_jsx(PathSep, {}), seg.siblings && seg.siblings.length > 1 ? (_jsxs(DropdownMenu, { children: [_jsxs(DropdownMenuTrigger, { className: `flex items-center gap-1 rounded-md px-1.5 py-1 text-sm font-medium transition-colors outline-none hover:bg-accent hover:text-foreground ${!isLast ? 'text-foreground/60' : 'text-foreground/80'}`, children: [seg.label, _jsx(ChevronDown, { className: "h-3.5 w-3.5 text-muted-foreground" })] }), _jsxs(DropdownMenuContent, { align: "start", sideOffset: 8, className: "w-56 max-h-72 overflow-y-auto", children: [_jsx(DropdownMenuLabel, { className: "text-xs text-muted-foreground font-normal", children: "Switch Object" }), _jsx(DropdownMenuSeparator, {}), seg.siblings.map((sibling) => (_jsx(DropdownMenuItem, { asChild: true, children: _jsx(Link, { to: sibling.href, className: "w-full", children: sibling.label }) }, sibling.href)))] })] })) : seg.href ? (_jsx(Link, { to: seg.href, className: `rounded-md px-1.5 py-1 text-sm font-medium transition-colors hover:bg-accent hover:text-foreground truncate max-w-[160px] ${isLast ? 'text-foreground/80' : 'text-foreground/60'}`, children: seg.label })) : (_jsx("span", { className: `px-1.5 py-1 text-sm font-medium truncate max-w-[160px] ${isLast ? 'text-foreground/80' : 'text-foreground/60'}`, children: seg.label }))] }, i));
-                            }), _jsx("span", { className: "text-sm font-medium sm:hidden truncate min-w-0 ml-1", children: lastSegmentLabel })] }))] }), _jsxs("div", { className: "flex items-center gap-0.5 sm:gap-1 shrink-0 [&>*+*[data-topbar-group]]:ml-1 [&>[data-topbar-group]+[data-topbar-group]]:border-l [&>[data-topbar-group]+[data-topbar-group]]:border-border/60 [&>[data-topbar-group]+[data-topbar-group]]:pl-1 sm:[&>[data-topbar-group]+[data-topbar-group]]:pl-2 sm:[&>[data-topbar-group]+[data-topbar-group]]:ml-2", children: [!isOnline && (_jsxs("div", { className: "flex items-center gap-1 px-2 py-1 rounded-full bg-yellow-100 dark:bg-yellow-900/30 text-yellow-800 dark:text-yellow-200 text-xs font-medium", children: [_jsx("span", { className: "h-2 w-2 rounded-full bg-yellow-500 animate-pulse" }), "Offline"] })), isApp && connectionState && _jsx(ConnectionStatus, { state: connectionState }), isApp && activeUsers.length > 0 && (_jsx("div", { className: "hidden md:flex items-center shrink-0", title: "Users currently online", children: _jsx(PresenceAvatars, { users: activeUsers, size: "sm", maxVisible: 3, showStatus: true }) })), _jsxs("div", { "data-topbar-group": true, className: "flex items-center gap-0.5 sm:gap-1 shrink-0", children: [_jsxs("button", { onClick: () => document.dispatchEvent(new KeyboardEvent('keydown', { key: 'k', metaKey: true })), className: "hidden lg:flex relative items-center gap-2 w-48 xl:w-64 h-8 px-3 text-sm rounded-md border bg-muted/50 text-muted-foreground hover:bg-muted transition-colors", children: [_jsx(Search, { className: "h-3.5 w-3.5 shrink-0" }), _jsx("span", { className: "flex-1 text-left text-xs", children: t('console.search', { defaultValue: 'Search...' }) }), _jsxs("kbd", { className: "pointer-events-none inline-flex h-5 items-center gap-0.5 rounded border bg-background px-1.5 text-[10px] font-medium text-muted-foreground", children: [_jsx("span", { className: "text-xs", children: "\u2318" }), "K"] })] }), _jsx(Button, { variant: "ghost", size: "icon", className: "lg:hidden h-8 w-8 shrink-0", onClick: () => document.dispatchEvent(new KeyboardEvent('keydown', { key: 'k', metaKey: true })), "aria-label": t('console.search', { defaultValue: 'Search...' }), children: _jsx(Search, { className: "h-4 w-4" }) })] }), _jsxs("div", { "data-topbar-group": true, className: "flex items-center gap-0.5 shrink-0", children: [_jsx("div", { className: "hidden sm:flex shrink-0", children: _jsx(ActivityFeed, { activities: activeActivities }) }), pendingApprovalsCount >= 0 && (_jsxs(Button, { variant: "ghost", size: "icon", className: "h-8 w-8 relative shrink-0", "aria-label": t('sidebar.approvals', { defaultValue: 'Approvals' }), title: t('sidebar.approvals', { defaultValue: 'Approvals' }), onClick: () => {
-                                    const app = currentAppName ?? params.appName;
-                                    navigate(app ? `/apps/${app}/system/approvals` : '/apps/setup/system/approvals');
-                                }, children: [_jsx(CheckSquare, { className: "h-4 w-4" }), pendingApprovalsCount > 0 && (_jsx("span", { className: "absolute -top-0.5 -right-0.5 h-4 min-w-[16px] rounded-full bg-amber-500 text-[10px] leading-4 text-white text-center px-1", children: pendingApprovalsCount > 9 ? '9+' : pendingApprovalsCount }))] })), _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(Button, { variant: "ghost", size: "icon", className: "h-8 w-8 relative shrink-0", "aria-label": t('sidebar.notifications', { defaultValue: 'Notifications' }), children: [_jsx(Bell, { className: "h-4 w-4" }), unreadCount > 0 && (_jsx("span", { className: "absolute -top-0.5 -right-0.5 h-4 min-w-[16px] rounded-full bg-red-500 text-[10px] leading-4 text-white text-center px-1", children: unreadCount > 9 ? '9+' : unreadCount }))] }) }), _jsxs(DropdownMenuContent, { align: "end", className: "w-80 max-h-96 overflow-auto", children: [_jsxs(DropdownMenuLabel, { className: "flex items-center justify-between", children: [_jsx("span", { children: t('sidebar.notifications', { defaultValue: 'Notifications' }) }), unreadCount > 0 && (_jsx("button", { type: "button", onClick: (e) => { e.preventDefault(); markAllRead(); }, className: "text-xs text-muted-foreground hover:text-foreground", children: t('notifications.markAllRead', { defaultValue: 'Mark all read' }) }))] }), _jsx(DropdownMenuSeparator, {}), notifications.length === 0 ? (_jsx("div", { className: "px-3 py-6 text-sm text-muted-foreground text-center", children: t('notifications.empty', { defaultValue: 'No notifications' }) })) : (notifications.map((n) => (_jsxs(DropdownMenuItem, { className: `flex flex-col items-start gap-1 ${n.is_read ? '' : 'bg-accent/40'}`, onSelect: () => {
-                                                    markNotificationRead(n.id);
-                                                    if (n.source_object && n.source_id) {
-                                                        // Navigate to the related record; relative to /apps/<currentApp> if any.
-                                                        const app = currentAppName ?? params.appName;
-                                                        const target = app
-                                                            ? `/apps/${app}/${n.source_object}/${n.source_id}`
-                                                            : `/objects/${n.source_object}/${n.source_id}`;
-                                                        navigate(target);
-                                                    }
-                                                }, children: [_jsx("div", { className: "text-sm font-medium leading-tight", children: n.title }), n.body && (_jsx("div", { className: "text-xs text-muted-foreground line-clamp-2", children: n.body })), n.created_at && (_jsx("div", { className: "text-[10px] text-muted-foreground", children: new Date(n.created_at).toLocaleString() }))] }, n.id))))] })] }), _jsx(Button, { variant: "ghost", size: "icon", className: "h-8 w-8 hidden md:flex shrink-0", asChild: true, "aria-label": t('sidebar.helpTooltip', { defaultValue: 'Help & Documentation' }), children: _jsx("a", { href: "https://docs.objectstack.ai", target: "_blank", rel: "noopener noreferrer", children: _jsx(HelpCircle, { className: "h-4 w-4" }) }) })] }), _jsxs("div", { "data-topbar-group": true, className: "flex items-center gap-0.5 shrink-0", children: [_jsx("div", { className: "hidden sm:flex shrink-0", children: _jsx(ModeToggle, {}) }), _jsx("div", { className: "hidden sm:flex shrink-0", children: _jsx(LocaleSwitcher, {}) }), _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon", className: "h-8 w-8 shrink-0 rounded-full", children: _jsxs(Avatar, { className: "h-7 w-7 rounded-full", children: [_jsx(AvatarImage, { src: user?.image, alt: user?.name ?? 'User' }), _jsx(AvatarFallback, { className: "rounded-full bg-primary text-primary-foreground text-xs", children: getUserInitials(user) })] }) }) }), _jsxs(DropdownMenuContent, { align: "end", className: "min-w-64 rounded-lg", sideOffset: 4, children: [_jsx(DropdownMenuLabel, { className: "p-0 font-normal", children: _jsxs("div", { className: "flex items-center gap-2 px-2 py-2", children: [_jsxs(Avatar, { className: "h-8 w-8 rounded-lg", children: [_jsx(AvatarImage, { src: user?.image, alt: user?.name ?? 'User' }), _jsx(AvatarFallback, { className: "rounded-lg bg-primary text-primary-foreground", children: getUserInitials(user) })] }), _jsxs("div", { className: "grid flex-1 text-left text-sm leading-tight", children: [_jsx("span", { className: "truncate font-semibold", children: user?.name ?? 'User' }), _jsx("span", { className: "truncate text-xs text-muted-foreground", children: user?.email ?? '' })] })] }) }), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuGroup, { children: [hasOrgSection && (_jsxs(DropdownMenuItem, { onClick: () => navigate('/organizations'), className: "cursor-pointer", children: [_jsx(Boxes, { className: "mr-2 h-4 w-4" }), t('organizations.mine', { defaultValue: 'My Organizations' })] })), _jsxs(DropdownMenuItem, { onClick: () => navigate('/apps/setup/system/profile'), children: [_jsx(UserIcon, { className: "mr-2 h-4 w-4" }), t('user.profile', { defaultValue: 'Profile' })] }), _jsxs(DropdownMenuItem, { onClick: () => navigate('/apps/setup'), children: [_jsx(Settings, { className: "mr-2 h-4 w-4" }), t('sidebar.settings', { defaultValue: 'Settings' })] })] }), isAuthEnabled && (_jsxs(_Fragment, { children: [_jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { className: "text-destructive focus:text-destructive", onClick: () => signOut(), children: [_jsx(LogOut, { className: "mr-2 h-4 w-4" }), t('user.logout', { defaultValue: 'Log out' })] })] }))] })] })] })] })] }));
+                            }), _jsx("span", { className: "text-sm font-medium sm:hidden truncate min-w-0 ml-1", children: lastSegmentLabel })] }))] }), _jsxs("div", { className: "flex items-center gap-0.5 sm:gap-1 shrink-0 [&>*+*[data-topbar-group]]:ml-1 [&>[data-topbar-group]+[data-topbar-group]]:border-l [&>[data-topbar-group]+[data-topbar-group]]:border-border/60 [&>[data-topbar-group]+[data-topbar-group]]:pl-1 sm:[&>[data-topbar-group]+[data-topbar-group]]:pl-2 sm:[&>[data-topbar-group]+[data-topbar-group]]:ml-2", children: [!isOnline && (_jsxs("div", { className: "flex items-center gap-1 px-2 py-1 rounded-full bg-yellow-100 dark:bg-yellow-900/30 text-yellow-800 dark:text-yellow-200 text-xs font-medium", children: [_jsx("span", { className: "h-2 w-2 rounded-full bg-yellow-500 animate-pulse" }), "Offline"] })), isApp && connectionState && _jsx(ConnectionStatus, { state: connectionState }), isApp && activeUsers.length > 0 && (_jsx("div", { className: "hidden md:flex items-center shrink-0", title: "Users currently online", children: _jsx(PresenceAvatars, { users: activeUsers, size: "sm", maxVisible: 3, showStatus: true }) })), _jsxs("div", { "data-topbar-group": true, className: "flex items-center gap-0.5 sm:gap-1 shrink-0", children: [_jsxs("button", { onClick: () => document.dispatchEvent(new KeyboardEvent('keydown', { key: 'k', metaKey: true })), className: "hidden lg:flex relative items-center gap-2 w-48 xl:w-64 h-8 px-3 text-sm rounded-md border bg-muted/50 text-muted-foreground hover:bg-muted transition-colors", children: [_jsx(Search, { className: "h-3.5 w-3.5 shrink-0" }), _jsx("span", { className: "flex-1 text-left text-xs", children: t('console.search', { defaultValue: 'Search...' }) }), _jsxs("kbd", { className: "pointer-events-none inline-flex h-5 items-center gap-0.5 rounded border bg-background px-1.5 text-[10px] font-medium text-muted-foreground", children: [_jsx("span", { className: "text-xs", children: "\u2318" }), "K"] })] }), _jsx(Button, { variant: "ghost", size: "icon", className: "lg:hidden h-8 w-8 shrink-0", onClick: () => document.dispatchEvent(new KeyboardEvent('keydown', { key: 'k', metaKey: true })), "aria-label": t('console.search', { defaultValue: 'Search...' }), children: _jsx(Search, { className: "h-4 w-4" }) })] }), _jsxs("div", { "data-topbar-group": true, className: "flex items-center gap-0.5 shrink-0", children: [_jsx(InboxPopover, { notifications: notifications, unreadCount: unreadCount, pendingApprovalsCount: pendingApprovalsCount, activities: activeActivities, onMarkAllRead: markAllRead, onMarkRead: markNotificationRead }), _jsx(Button, { variant: "ghost", size: "icon", className: "h-8 w-8 hidden md:flex shrink-0", asChild: true, "aria-label": t('sidebar.helpTooltip', { defaultValue: 'Help & Documentation' }), children: _jsx("a", { href: "https://docs.objectstack.ai", target: "_blank", rel: "noopener noreferrer", children: _jsx(HelpCircle, { className: "h-4 w-4" }) }) })] }), _jsxs("div", { "data-topbar-group": true, className: "flex items-center gap-0.5 shrink-0", children: ["        ", _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon", className: "h-8 w-8 shrink-0 rounded-full", children: _jsxs(Avatar, { className: "h-7 w-7 rounded-full", children: [_jsx(AvatarImage, { src: user?.image, alt: user?.name ?? 'User' }), _jsx(AvatarFallback, { className: "rounded-full bg-primary text-primary-foreground text-xs", children: getUserInitials(user) })] }) }) }), _jsxs(DropdownMenuContent, { align: "end", className: "min-w-64 rounded-lg", sideOffset: 4, children: [_jsx(DropdownMenuLabel, { className: "p-0 font-normal", children: _jsxs("div", { className: "flex items-center gap-2 px-2 py-2", children: [_jsxs(Avatar, { className: "h-8 w-8 rounded-lg", children: [_jsx(AvatarImage, { src: user?.image, alt: user?.name ?? 'User' }), _jsx(AvatarFallback, { className: "rounded-lg bg-primary text-primary-foreground", children: getUserInitials(user) })] }), _jsxs("div", { className: "grid flex-1 text-left text-sm leading-tight", children: [_jsx("span", { className: "truncate font-semibold", children: user?.name ?? 'User' }), _jsx("span", { className: "truncate text-xs text-muted-foreground", children: user?.email ?? '' })] })] }) }), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuGroup, { children: [hasOrgSection && (_jsxs(DropdownMenuItem, { onClick: () => navigate('/organizations'), className: "cursor-pointer", children: [_jsx(Boxes, { className: "mr-2 h-4 w-4" }), t('organizations.mine', { defaultValue: 'My Organizations' })] })), _jsxs(DropdownMenuItem, { onClick: () => navigate('/apps/setup/system/profile'), children: [_jsx(UserIcon, { className: "mr-2 h-4 w-4" }), t('user.profile', { defaultValue: 'Profile' })] }), _jsxs(DropdownMenuItem, { onClick: () => navigate('/apps/setup'), children: [_jsx(Settings, { className: "mr-2 h-4 w-4" }), t('sidebar.settings', { defaultValue: 'Settings' })] })] }), _jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuLabel, { className: "text-[11px] font-normal text-muted-foreground uppercase tracking-wide px-2", children: t('user.preferences', { defaultValue: 'Preferences' }) }), _jsxs("div", { className: "flex items-center justify-between px-2 py-1.5 text-sm", children: [_jsx("span", { className: "text-foreground/80", children: t('user.theme', { defaultValue: 'Theme' }) }), _jsx(ModeToggle, {})] }), _jsxs("div", { className: "flex items-center justify-between px-2 py-1.5 text-sm", children: [_jsx("span", { className: "text-foreground/80", children: t('user.language', { defaultValue: 'Language' }) }), _jsx(LocaleSwitcher, {})] }), isAuthEnabled && (_jsxs(_Fragment, { children: [_jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { className: "text-destructive focus:text-destructive", onClick: () => signOut(), children: [_jsx(LogOut, { className: "mr-2 h-4 w-4" }), t('user.logout', { defaultValue: 'Log out' })] })] }))] })] })] })] })] }));
 }

package/dist/layout/ConsoleLayout.js

@@ -39,7 +39,7 @@ export function ConsoleLayout({ children, activeAppName, activeApp, onAppChange,
         setContext('app');
         setCurrentAppName(activeAppName);
     }, [setContext, setCurrentAppName, activeAppName]);
-    return (_jsxs(AppShell, { sidebar: _jsx(UnifiedSidebar, { activeAppName: activeAppName, onAppChange: onAppChange }), navbar: _jsx(AppHeader, { variant: "app", appName: appLabel, objects: objects, connectionState: connectionState, activeAppName: activeAppName, onAppChange: onAppChange }), className: "!p-0 overflow-hidden bg-muted/5", branding: activeApp?.branding
+    return (_jsxs(AppShell, { sidebar: _jsx(UnifiedSidebar, { activeAppName: activeAppName, onAppChange: onAppChange }), navbar: _jsx(AppHeader, { variant: "app", appName: appLabel, objects: objects, connectionState: connectionState, activeAppName: activeAppName, onAppChange: onAppChange }), className: "!p-0 overflow-y-auto overflow-x-hidden bg-muted/5", branding: activeApp?.branding
             ? {
                 primaryColor: activeApp.branding.primaryColor,
                 accentColor: activeApp.branding.accentColor,

package/dist/layout/InboxPopover.d.ts

@@ -0,0 +1,36 @@
+/**
+ * InboxPopover
+ *
+ * UX P0-2: a single "inbox" surface that bundles the three things that
+ * used to occupy separate top-bar buttons:
+ *   - Notifications (mentions, assignments, system alerts)
+ *   - Approvals (pending approval requests for the user)
+ *   - Activity (recent activity feed across the org)
+ *
+ * Rendered as a single bell button + popover with a tabbed body. The badge
+ * shows the combined unread count (notifications + approvals) so users
+ * still see at-a-glance pressure.
+ *
+ * @module
+ */
+import type { ActivityItem } from './ActivityFeed';
+export interface InboxNotification {
+    id: string;
+    type: string;
+    title: string;
+    body?: string | null;
+    source_object?: string | null;
+    source_id?: string | null;
+    actor_name?: string | null;
+    is_read?: boolean;
+    created_at?: string;
+}
+export interface InboxPopoverProps {
+    notifications: InboxNotification[];
+    unreadCount: number;
+    pendingApprovalsCount: number;
+    activities: ActivityItem[];
+    onMarkAllRead: () => void;
+    onMarkRead: (id: string) => void;
+}
+export declare function InboxPopover({ notifications, unreadCount, pendingApprovalsCount, activities, onMarkAllRead, onMarkRead, }: InboxPopoverProps): import("react/jsx-runtime").JSX.Element;

package/dist/layout/InboxPopover.js

@@ -0,0 +1,84 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * InboxPopover
+ *
+ * UX P0-2: a single "inbox" surface that bundles the three things that
+ * used to occupy separate top-bar buttons:
+ *   - Notifications (mentions, assignments, system alerts)
+ *   - Approvals (pending approval requests for the user)
+ *   - Activity (recent activity feed across the org)
+ *
+ * Rendered as a single bell button + popover with a tabbed body. The badge
+ * shows the combined unread count (notifications + approvals) so users
+ * still see at-a-glance pressure.
+ *
+ * @module
+ */
+import { useState } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import { Button, Popover, PopoverContent, PopoverTrigger, Tabs, TabsList, TabsTrigger, TabsContent, } from '@object-ui/components';
+import { Bell, CheckSquare, Activity as ActivityIcon } from 'lucide-react';
+import { useObjectTranslation } from '@object-ui/i18n';
+import { useNavigationContext } from '../context/NavigationContext';
+function timeAgo(iso) {
+    if (!iso)
+        return '';
+    const ms = new Date(iso).getTime();
+    if (Number.isNaN(ms))
+        return '';
+    const diff = (Date.now() - ms) / 1000;
+    if (diff < 60)
+        return `${Math.max(1, Math.floor(diff))}s`;
+    if (diff < 3600)
+        return `${Math.floor(diff / 60)}m`;
+    if (diff < 86400)
+        return `${Math.floor(diff / 3600)}h`;
+    return `${Math.floor(diff / 86400)}d`;
+}
+export function InboxPopover({ notifications, unreadCount, pendingApprovalsCount, activities, onMarkAllRead, onMarkRead, }) {
+    const { t } = useObjectTranslation();
+    const navigate = useNavigate();
+    const params = useParams();
+    const { currentAppName } = useNavigationContext();
+    const [open, setOpen] = useState(false);
+    const [tab, setTab] = useState('notifications');
+    const totalBadge = unreadCount + pendingApprovalsCount;
+    const ariaLabel = t('sidebar.inboxAriaLabel', { defaultValue: 'Open inbox' });
+    const goToApprovals = () => {
+        setOpen(false);
+        const app = currentAppName ?? params.appName;
+        navigate(app ? `/apps/${app}/system/approvals` : '/apps/setup/system/approvals');
+    };
+    const goToAllNotifications = () => {
+        setOpen(false);
+        // Always route through the setup app's sys_notification list view —
+        // it's the canonical full-page inbox and lives outside per-app sidebars.
+        // The `?view=mine` query selects the "Mine" tab so the user sees their
+        // own notifications by default (matching the popover scope).
+        navigate('/apps/setup/sys_notification?view=mine');
+    };
+    const goToAllActivity = () => {
+        setOpen(false);
+        // Mirror of goToAllNotifications: drill from the popover Activity tab
+        // (capped at 20 rows) into the full sys_activity list page. Org-wide
+        // scope — no `?view=` qualifier — to match what the popover already shows.
+        navigate('/apps/setup/sys_activity');
+    };
+    const handleNotificationClick = (n) => {
+        onMarkRead(n.id);
+        if (n.source_object && n.source_id) {
+            setOpen(false);
+            const app = currentAppName ?? params.appName;
+            const target = app
+                ? `/apps/${app}/${n.source_object}/${n.source_id}`
+                : `/objects/${n.source_object}/${n.source_id}`;
+            navigate(target);
+        }
+    };
+    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { variant: "ghost", size: "icon", className: "h-8 w-8 relative shrink-0", "aria-label": ariaLabel, title: t('sidebar.inbox', { defaultValue: 'Inbox' }), children: [_jsx(Bell, { className: "h-4 w-4" }), totalBadge > 0 && (_jsx("span", { className: "absolute -top-0.5 -right-0.5 h-4 min-w-[16px] rounded-full bg-red-500 text-[10px] leading-4 text-white text-center px-1", children: totalBadge > 9 ? '9+' : totalBadge }))] }) }), _jsxs(PopoverContent, { align: "end", sideOffset: 8, className: "w-96 p-0", children: [_jsxs("div", { className: "flex items-center justify-between px-3 pt-3 pb-1", children: [_jsx("div", { className: "text-sm font-semibold", children: t('sidebar.inbox', { defaultValue: 'Inbox' }) }), tab === 'notifications' && unreadCount > 0 && (_jsx("button", { type: "button", onClick: onMarkAllRead, className: "text-xs text-muted-foreground hover:text-foreground", children: t('notifications.markAllRead', { defaultValue: 'Mark all read' }) }))] }), _jsxs(Tabs, { value: tab, onValueChange: (v) => setTab(v), className: "w-full", children: [_jsxs(TabsList, { className: "w-full justify-start rounded-none border-b bg-transparent px-1 h-9", children: [_jsxs(TabsTrigger, { value: "notifications", className: "text-xs gap-1.5 data-[state=active]:bg-transparent", children: [_jsx(Bell, { className: "h-3.5 w-3.5" }), t('sidebar.notifications', { defaultValue: 'Notifications' }), unreadCount > 0 && (_jsx("span", { className: "ml-0.5 inline-flex h-4 min-w-[16px] items-center justify-center rounded-full bg-red-500 px-1 text-[10px] text-white", children: unreadCount > 9 ? '9+' : unreadCount }))] }), _jsxs(TabsTrigger, { value: "approvals", className: "text-xs gap-1.5 data-[state=active]:bg-transparent", children: [_jsx(CheckSquare, { className: "h-3.5 w-3.5" }), t('sidebar.approvals', { defaultValue: 'Approvals' }), pendingApprovalsCount > 0 && (_jsx("span", { className: "ml-0.5 inline-flex h-4 min-w-[16px] items-center justify-center rounded-full bg-amber-500 px-1 text-[10px] text-white", children: pendingApprovalsCount > 9 ? '9+' : pendingApprovalsCount }))] }), _jsxs(TabsTrigger, { value: "activity", className: "text-xs gap-1.5 data-[state=active]:bg-transparent", children: [_jsx(ActivityIcon, { className: "h-3.5 w-3.5" }), t('sidebar.activityFeed', { defaultValue: 'Activity' })] })] }), _jsxs(TabsContent, { value: "notifications", className: "m-0 max-h-80 overflow-auto", children: [notifications.length === 0 ? (_jsx("div", { className: "px-3 py-8 text-sm text-muted-foreground text-center", children: t('notifications.empty', { defaultValue: 'No notifications' }) })) : (_jsx("ul", { className: "divide-y", children: notifications.map((n) => (_jsx("li", { children: _jsx("button", { type: "button", onClick: () => handleNotificationClick(n), className: `w-full text-left px-3 py-2.5 hover:bg-accent transition-colors ${n.is_read ? '' : 'bg-accent/40'}`, children: _jsxs("div", { className: "flex items-start gap-2", children: [!n.is_read && (_jsx("span", { className: "mt-1.5 h-1.5 w-1.5 shrink-0 rounded-full bg-primary", "aria-hidden": true })), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: "text-sm font-medium leading-tight truncate", children: n.title }), n.body && (_jsx("div", { className: "text-xs text-muted-foreground line-clamp-2 mt-0.5", children: n.body })), _jsx("div", { className: "text-[10px] text-muted-foreground mt-1", children: timeAgo(n.created_at) })] })] }) }) }, n.id))) })), _jsx("div", { className: "border-t px-3 py-2 text-center", children: _jsx("button", { type: "button", onClick: goToAllNotifications, className: "text-xs text-primary hover:underline", children: t('notifications.viewAll', { defaultValue: 'View all notifications' }) }) })] }), _jsx(TabsContent, { value: "approvals", className: "m-0 max-h-80 overflow-auto", children: _jsx("div", { className: "px-3 py-6 text-center", children: pendingApprovalsCount > 0 ? (_jsxs(_Fragment, { children: [_jsx(CheckSquare, { className: "mx-auto h-6 w-6 text-amber-500" }), _jsx("div", { className: "mt-2 text-sm font-medium", children: t('notifications.approvalsPending', {
+                                                    defaultValue: '{{count}} pending approvals',
+                                                    count: pendingApprovalsCount,
+                                                }) }), _jsx(Button, { size: "sm", className: "mt-3", onClick: goToApprovals, children: t('notifications.viewApprovals', { defaultValue: 'View approvals' }) })] })) : (_jsxs(_Fragment, { children: [_jsx("div", { className: "text-sm text-muted-foreground", children: t('notifications.noPendingApprovals', {
+                                                    defaultValue: 'No pending approvals',
+                                                }) }), _jsx("button", { type: "button", onClick: goToApprovals, className: "mt-2 text-xs text-primary hover:underline", children: t('notifications.openApprovalsInbox', { defaultValue: 'Open Approvals Inbox' }) })] })) }) }), _jsxs(TabsContent, { value: "activity", className: "m-0 max-h-80 overflow-auto", children: [activities.length === 0 ? (_jsx("div", { className: "px-3 py-8 text-sm text-muted-foreground text-center", children: t('layout.activityFeed.empty', { defaultValue: 'No recent activity' }) })) : (_jsx("ul", { className: "divide-y", children: activities.slice(0, 20).map((a) => (_jsxs("li", { className: "px-3 py-2.5", children: [_jsxs("div", { className: "text-sm leading-tight truncate", children: [_jsx("span", { className: "font-medium", children: a.user }), ' ', _jsx("span", { className: "text-muted-foreground", children: a.description })] }), _jsxs("div", { className: "text-[10px] text-muted-foreground mt-0.5", children: [timeAgo(a.timestamp), " \u00B7 ", a.objectName] })] }, a.id))) })), _jsx("div", { className: "border-t px-3 py-2 text-center", children: _jsx("button", { type: "button", onClick: goToAllActivity, className: "text-xs text-primary hover:underline", children: t('layout.activityFeed.viewAll', { defaultValue: 'View all activity' }) }) })] })] })] })] }));
+}

package/dist/utils/index.js

@@ -61,7 +61,33 @@ export function formatRecordTitle(titleFormat, record) {
     }
     let anyResolved = false;
     let out = template.replace(/\{([^{}]+)\}/g, (_match, fieldName) => {
-        const value = record[fieldName.trim()];
+        // Support dotted paths (e.g. `{account.name}`) for $expanded lookups.
+        const parts = String(fieldName).trim().split('.');
+        let value = record;
+        for (const p of parts) {
+            if (value == null)
+                break;
+            value = value[p];
+        }
+        // Auto-extract display name from expanded reference objects, with a
+        // Salesforce-style fallback chain.
+        if (value && typeof value === 'object') {
+            const o = value;
+            let display = o.name ?? o.full_name ?? o.display_name ?? o.label ?? o.title ?? o.subject ?? null;
+            if (display == null || (typeof display === 'string' && !display.trim())) {
+                const composite = [o.salutation, o.first_name, o.last_name]
+                    .filter((p) => typeof p === 'string' && p.trim())
+                    .map((p) => p.trim())
+                    .join(' ');
+                if (composite)
+                    display = composite;
+                else if (typeof o.email === 'string' && o.email.trim())
+                    display = o.email.trim();
+                else
+                    display = null;
+            }
+            value = display;
+        }
         if (value === null || value === undefined || value === '') {
             return EMPTY_TOKEN;
         }

package/dist/views/ObjectView.js

@@ -114,7 +114,7 @@ function toSysViewPayload(config, objectName, opts = {}) {
         }
     }
     const EXTRA_CONFIG_KEYS = [
-        'bulkActions', 'rowActions', 'pagination', 'navigation',
+        'bulkActions', 'bulkActionDefs', 'rowActions', 'pagination', 'navigation',
         'emptyState', 'exportOptions', 'rowHeight',
         'isPinned', 'isDefault', 'visibility', 'sortOrder',
         'showSort',
@@ -1129,13 +1129,23 @@ export function ObjectView({ dataSource, objects, onEdit, externalRefreshKey })
             const isAbsolute = targetStr.startsWith('/') || /^https?:\/\//i.test(targetStr);
             if (isAbsolute) {
                 const baseUrl = import.meta.env.VITE_SERVER_URL || '';
-                const url = targetStr.startsWith('http') ? targetStr : `${baseUrl}${targetStr}`;
                 // Row context is stashed on params under `_rowRecord` by the
                 // row-action dispatcher (see ObjectGrid → onRowAction). Pull
                 // it out before assembling the request body.
                 const rawParams = { ...params };
                 const rowRecord = rawParams._rowRecord;
                 delete rawParams._rowRecord;
+                // Interpolate `{field}` tokens in the target URL from the
+                // row record. Lets actions hit data-API endpoints like
+                // `PATCH /api/v1/sys_api_key/{id}` without bespoke wiring.
+                let resolvedTarget = targetStr;
+                if (rowRecord && /\{[a-z_][a-z0-9_]*\}/i.test(resolvedTarget)) {
+                    resolvedTarget = resolvedTarget.replace(/\{([a-z_][a-z0-9_]*)\}/gi, (_, k) => {
+                        const v = rowRecord[k];
+                        return v == null ? '' : encodeURIComponent(String(v));
+                    });
+                }
+                const url = resolvedTarget.startsWith('http') ? resolvedTarget : `${baseUrl}${resolvedTarget}`;
                 // Apply bodyShape: 'flat' (default) keeps user params at top
                 // level; { wrap: 'data' } nests them under that key while
                 // `recordIdParam` / `organizationId` stay flat (better-auth
@@ -1153,18 +1163,33 @@ export function ObjectView({ dataSource, objects, onEdit, externalRefreshKey })
                     if (rowValue != null)
                         body[action.recordIdParam] = rowValue;
                 }
-                // Auto-inject organizationId when the active org is known and
-                // not already set. Most better-auth org-scoped endpoints
-                // accept this shape; harmless for endpoints that ignore it.
-                if (!body.organizationId && activeOrganization?.id) {
+                // Auto-inject organizationId only for better-auth org-scoped
+                // endpoints. Data-API endpoints (/api/v1/{object}/{id}) must
+                // NOT receive a stray organizationId field — that would try
+                // to overwrite the row's tenant column.
+                const isAuthOrgEndpoint = /\/api\/v1\/auth\//.test(resolvedTarget);
+                if (isAuthOrgEndpoint && !body.organizationId && activeOrganization?.id) {
                     body.organizationId = activeOrganization.id;
                 }
-                const res = await authFetch(url, {
-                    method: 'POST',
+                // Merge static body fragment last so constants override any
+                // user-collected values (e.g. resend:true on resend-invite,
+                // revoked:true on revoke-api-key).
+                if (action.bodyExtra && typeof action.bodyExtra === 'object') {
+                    Object.assign(body, action.bodyExtra);
+                }
+                const method = (action.method || 'POST').toUpperCase();
+                const init = {
+                    method,
                     headers: { 'Content-Type': 'application/json' },
                     credentials: 'include',
-                    body: JSON.stringify(body),
-                });
+                };
+                // GET/DELETE conventionally have no body; for everything else
+                // we serialize. (We don't expect GET here today, but keep the
+                // guard for safety.)
+                if (method !== 'GET' && method !== 'DELETE') {
+                    init.body = JSON.stringify(body);
+                }
+                const res = await authFetch(url, init);
                 if (!res.ok) {
                     let detail = `HTTP ${res.status}`;
                     try {
@@ -1478,6 +1503,7 @@ export function ObjectView({ dataSource, objects, onEdit, externalRefreshKey })
                 ? objectDef.actions.filter((a) => Array.isArray(a?.locations) && a.locations.includes('list_item'))
                 : []),
             bulkActions: viewDef.bulkActions ?? listSchema.bulkActions,
+            bulkActionDefs: viewDef.bulkActionDefs ?? listSchema.bulkActionDefs,
             sharing: viewDef.sharing ?? listSchema.sharing,
             addRecord: viewDef.addRecord ?? listSchema.addRecord,
             conditionalFormatting: viewDef.conditionalFormatting ?? listSchema.conditionalFormatting,

package/dist/views/RecordDetailView.js

@@ -6,13 +6,14 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * Uses the DetailView plugin component with auto-generated sections from
  * the object field definitions.
  */
-import { useState, useEffect, useCallback, useMemo } from 'react';
+import { useState, useEffect, useCallback, useMemo, useRef } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
 import { DetailView, RecordChatterPanel } from '@object-ui/plugin-detail';
 import { Empty, EmptyTitle, EmptyDescription } from '@object-ui/components';
 import { PresenceAvatars } from '@object-ui/collaboration';
 import { useAuth, createAuthenticatedFetch } from '@object-ui/auth';
-import { ActionProvider, useObjectTranslation, useObjectLabel } from '@object-ui/react';
+import { ActionProvider, useObjectTranslation, useObjectLabel, usePageAssignment, RecordContextProvider, SchemaRenderer } from '@object-ui/react';
+import { buildExpandFields } from '@object-ui/core';
 import { toast } from 'sonner';
 import { Database, Users } from 'lucide-react';
 import { MetadataPanel, useMetadataInspector } from './MetadataInspector';
@@ -23,6 +24,7 @@ import { ActionConfirmDialog } from './ActionConfirmDialog';
 import { ActionParamDialog } from './ActionParamDialog';
 import { resolveActionParams } from '../utils/resolveActionParams';
 import { useRecordBreadcrumbTitle } from '../context/NavigationContext';
+import { useRecordApprovals } from '../hooks/useRecordApprovals';
 import { getRecordDisplayName } from '../utils';
 const FALLBACK_USER = { id: 'current-user', name: 'Demo User' };
 /**
@@ -35,6 +37,16 @@ const FALLBACK_USER = { id: 'current-user', name: 'Demo User' };
  * `@object-ui/plugin-detail/RecordDetailDrawer`.
  */
 const AUDIT_FIELD_NAMES = new Set(['created_at', 'created_by', 'updated_at', 'updated_by']);
+/**
+ * System/tenant fields that the framework auto-injects on every record but
+ * which carry no business value on a detail page. Hidden from the
+ * auto-generated section (when the object has no explicit form sections).
+ * Authors who really want to show these can still list them in
+ * `objectDef.views.form.sections`.
+ */
+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();
     const { showDebug } = useMetadataInspector();
@@ -47,6 +59,8 @@ export function RecordDetailView({ dataSource, objects, onEdit }) {
     const [recordViewers, setRecordViewers] = useState([]);
     const [actionRefreshKey, setActionRefreshKey] = useState(0);
     const [childRelatedData, setChildRelatedData] = useState({});
+    const [historyEntries, setHistoryEntries] = useState(null);
+    const [historyLoading, setHistoryLoading] = useState(false);
     const [recordTitle, setRecordTitle] = useState();
     const objectDef = objects.find((o) => o.name === objectName);
     // Publish record title to the navigation context so the top-bar breadcrumb
@@ -56,6 +70,40 @@ export function RecordDetailView({ dataSource, objects, onEdit }) {
     // Navigation code passes `record.id || record._id` directly into the URL
     // without adding any prefix, so no stripping is needed.
     const pureRecordId = recordId;
+    // ─── Page Assignment (Salesforce Lightning-style record Pages) ──────
+    // If a PageSchema(pageType='record') is authored for this object, render
+    // it via SchemaRenderer (which dispatches to the registered 'record'
+    // PageRenderer in @object-ui/components). Otherwise we fall through to
+    // the legacy auto-generated DetailView path below.
+    const { page: assignedPage } = usePageAssignment(objectName);
+    const [pageRecord, setPageRecord] = useState(null);
+    useEffect(() => {
+        let cancelled = false;
+        if (!assignedPage || !pureRecordId || !objectName || !dataSource?.findOne) {
+            setPageRecord(null);
+            return;
+        }
+        // Expand lookup/master_detail fields so the page receives display
+        // names (e.g. account.name) rather than raw foreign-key IDs. The
+        // page subtitle interpolation and record:* renderers depend on this.
+        const expandFields = buildExpandFields(objectDef?.fields);
+        const params = expandFields.length > 0 ? { $expand: expandFields } : undefined;
+        const findOnePromise = params
+            ? dataSource.findOne(objectName, pureRecordId, params)
+            : dataSource.findOne(objectName, pureRecordId);
+        findOnePromise
+            .then((rec) => {
+            if (!cancelled)
+                setPageRecord(rec);
+        })
+            .catch(() => {
+            if (!cancelled)
+                setPageRecord(null);
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [assignedPage, objectName, pureRecordId, dataSource, objectDef]);
     // ─── Action Provider Handlers ───────────────────────────────────────
     // Confirm dialog state (promise-based)
     const [confirmState, setConfirmState] = useState({ open: false, message: '' });
@@ -196,6 +244,41 @@ export function RecordDetailView({ dataSource, objects, onEdit }) {
             return { success: false, error: error.message };
         }
     }, [authFetch, pureRecordId, objectName]);
+    // ─── Approvals ─────────────────────────────────────────────────────
+    // Surfaces "Submit for Approval" / "Recall" buttons on the record header
+    // when an active approval process is registered for this object, and a
+    // status badge when a request exists.
+    const approvals = useRecordApprovals(objectName, pureRecordId, user?.id);
+    // Hold latest approvals snapshot in a ref so the action handler
+    // (memoized once inside ActionRunner) always sees fresh state instead of
+    // the stale closure captured at the first render.
+    const approvalsRef = useRef(approvals);
+    approvalsRef.current = approvals;
+    const approvalHandler = useCallback(async (action) => {
+        const target = action.target || action.name;
+        const params = (action.params && !Array.isArray(action.params))
+            ? action.params
+            : {};
+        try {
+            if (target === 'submit_approval') {
+                await approvalsRef.current.submit({
+                    processName: params.processName,
+                    comment: params.comment,
+                });
+            }
+            else if (target === 'recall_approval') {
+                await approvalsRef.current.recall({ comment: params.comment });
+            }
+            else {
+                return { success: false, error: `Unknown approval target: ${target}` };
+            }
+            setActionRefreshKey((k) => k + 1);
+            return { success: true, reload: true };
+        }
+        catch (err) {
+            return { success: false, error: err?.message || String(err) };
+        }
+    }, []);
     // Discover reverse references: other objects with lookup/master_detail fields
     // pointing to the current object (e.g., order_item.order → order).
     const childRelations = useMemo(() => {
@@ -245,6 +328,127 @@ export function RecordDetailView({ dataSource, objects, onEdit }) {
         });
         return () => { cancelled = true; };
     }, [dataSource, pureRecordId, childRelations]);
+    // ── Audit history fetch ────────────────────────────────────────────
+    // Loads recent sys_audit_log entries for this record so the DetailView can
+    // render a read-only "History" tab. Gated on three preconditions to keep
+    // the network and the UI quiet for objects that opt out of history:
+    //   1) trackHistory must be explicitly true on the object capabilities
+    //      (the framework default is false, so we never speculatively fetch).
+    //   2) sys_audit_log must be present in the registered objects list — if
+    //      the platform-objects package isn't deployed the tab makes no sense.
+    //   3) The object being viewed must not be sys_audit_log itself, to avoid
+    //      a recursive tab on the audit log detail page.
+    // We request only the safe projection (created_at, action, user_id) so the
+    // browser never receives serialized old_value/new_value payloads, which
+    // can contain restricted fields. Field-level redaction in PR2 will harden
+    // this further once a backend-scoped audit endpoint exists.
+    const historyEnabled = useMemo(() => {
+        if (!objectDef)
+            return false;
+        if (objectDef.name === 'sys_audit_log')
+            return false;
+        if (objectDef.enable?.trackHistory !== true)
+            return false;
+        return objects.some((o) => o.name === 'sys_audit_log');
+    }, [objectDef, objects]);
+    useEffect(() => {
+        if (!dataSource || !pureRecordId || !objectDef || !historyEnabled) {
+            setHistoryEntries(null);
+            return;
+        }
+        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', 'old_value', 'new_value'],
+        })
+            .then(async (res) => {
+            if (cancelled)
+                return;
+            const items = Array.isArray(res) ? res : res?.data || [];
+            // 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)
+                return;
+            console.warn('[RecordDetailView] Failed to fetch sys_audit_log:', err);
+            setHistoryEntries([]);
+        })
+            .finally(() => {
+            if (!cancelled)
+                setHistoryLoading(false);
+        });
+        return () => { cancelled = true; };
+    }, [dataSource, pureRecordId, objectDef, historyEnabled]);
     // 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.
@@ -556,7 +760,7 @@ export function RecordDetailView({ dataSource, objects, onEdit }) {
                     // redundant "Details" heading).
                     showBorder: false,
                     fields: Object.keys(objectDef.fields || {})
-                        .filter(key => !AUDIT_FIELD_NAMES.has(key))
+                        .filter(key => !AUDIT_FIELD_NAMES.has(key) && !HIDDEN_SYSTEM_FIELD_NAMES.has(key))
                         .map(key => {
                         const fieldDef = objectDef.fields[key];
                         const refTarget = fieldDef.reference_to || fieldDef.reference;
@@ -581,7 +785,7 @@ export function RecordDetailView({ dataSource, objects, onEdit }) {
         // Filter actions for record_header location and deduplicate by name
         const recordHeaderActions = (() => {
             const seen = new Set();
-            return (objectDef.actions || []).filter((a) => {
+            const base = (objectDef.actions || []).filter((a) => {
                 if (!a.locations?.includes('record_header'))
                     return false;
                 if (!a.name)
@@ -600,6 +804,59 @@ export function RecordDetailView({ dataSource, objects, onEdit }) {
                     successMessage: actionSuccess(objectDef.name, a.name, a.successMessage),
                 }),
             }));
+            // Inject approval actions — only when the approvals plugin is
+            // available and an active process exists for this object.
+            if (approvals.available && approvals.processes.length > 0) {
+                if (approvals.canSubmit) {
+                    base.push({
+                        name: 'submit_approval',
+                        type: 'approval',
+                        target: 'submit_approval',
+                        label: t('approvals.submitForApproval', { defaultValue: 'Submit for Approval' }),
+                        icon: 'send',
+                        variant: 'default',
+                        locations: ['record_header'],
+                        refreshAfter: true,
+                        successMessage: t('approvals.submitSuccess', { defaultValue: 'Approval request submitted' }),
+                        ...(approvals.processes.length === 1
+                            ? { params: { processName: approvals.processes[0].name } }
+                            : {
+                                collectParams: [{
+                                        name: 'processName',
+                                        label: t('approvals.process', { defaultValue: 'Process' }),
+                                        type: 'select',
+                                        required: true,
+                                        options: approvals.processes.map((p) => ({
+                                            value: p.name,
+                                            label: p.label || p.name,
+                                        })),
+                                    }, {
+                                        name: 'comment',
+                                        label: t('approvals.comment', { defaultValue: 'Comment (optional)' }),
+                                        type: 'text',
+                                        multiline: true,
+                                    }],
+                            }),
+                    });
+                }
+                if (approvals.canRecall) {
+                    base.push({
+                        name: 'recall_approval',
+                        type: 'approval',
+                        target: 'recall_approval',
+                        label: t('approvals.recall', { defaultValue: 'Recall' }),
+                        icon: 'undo',
+                        variant: 'outline',
+                        locations: ['record_header'],
+                        refreshAfter: true,
+                        confirmText: t('approvals.recallConfirm', {
+                            defaultValue: 'Recall this pending approval request?',
+                        }),
+                        successMessage: t('approvals.recallSuccess', { defaultValue: 'Approval recalled' }),
+                    });
+                }
+            }
+            return base;
         })();
         // Build highlightFields: exclusively from objectDef metadata (no hardcoded fallback)
         const highlightFields = objectDef.views?.detail?.highlightFields ?? [];
@@ -710,6 +967,12 @@ export function RecordDetailView({ dataSource, objects, onEdit }) {
             sections,
             autoTabs: true,
             autoDiscoverRelated: true,
+            ...(historyEnabled && {
+                history: {
+                    entries: historyEntries ?? [],
+                    loading: historyLoading && historyEntries === null,
+                },
+            }),
             ...(related.length > 0 && { related }),
             ...(highlightFields.length > 0 && { highlightFields }),
             ...(sectionGroups && sectionGroups.length > 0 && { sectionGroups }),
@@ -722,14 +985,17 @@ 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]);
+    }, [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]);
     if (isLoading) {
         return _jsx(SkeletonDetail, {});
     }
     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: [_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 }, children: _jsx(DetailView, { schema: detailSchema, dataSource: dataSource, objectLabel: objectLabel({ name: objectDef.name, label: objectDef.label }), onDataLoaded: (record) => {
+    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 (_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')
                                         return;
                                     // Resolve the same way DetailView's header does, so the

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@object-ui/app-shell",
-  "version": "4.3.0",
+  "version": "4.5.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.3.0",
-    "@object-ui/collaboration": "4.3.0",
-    "@object-ui/components": "4.3.0",
-    "@object-ui/core": "4.3.0",
-    "@object-ui/data-objectstack": "4.3.0",
-    "@object-ui/fields": "4.3.0",
-    "@object-ui/i18n": "4.3.0",
-    "@object-ui/layout": "4.3.0",
-    "@object-ui/permissions": "4.3.0",
-    "@object-ui/react": "4.3.0",
-    "@object-ui/types": "4.3.0"
+    "@object-ui/auth": "4.5.0",
+    "@object-ui/collaboration": "4.5.0",
+    "@object-ui/components": "4.5.0",
+    "@object-ui/core": "4.5.0",
+    "@object-ui/data-objectstack": "4.5.0",
+    "@object-ui/fields": "4.5.0",
+    "@object-ui/i18n": "4.5.0",
+    "@object-ui/layout": "4.5.0",
+    "@object-ui/permissions": "4.5.0",
+    "@object-ui/react": "4.5.0",
+    "@object-ui/types": "4.5.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.3.0",
-    "@object-ui/plugin-charts": "^4.3.0",
-    "@object-ui/plugin-chatbot": "^4.3.0",
-    "@object-ui/plugin-dashboard": "^4.3.0",
-    "@object-ui/plugin-designer": "^4.3.0",
-    "@object-ui/plugin-detail": "^4.3.0",
-    "@object-ui/plugin-form": "^4.3.0",
-    "@object-ui/plugin-grid": "^4.3.0",
-    "@object-ui/plugin-kanban": "^4.3.0",
-    "@object-ui/plugin-list": "^4.3.0",
-    "@object-ui/plugin-report": "^4.3.0",
-    "@object-ui/plugin-view": "^4.3.0"
+    "@object-ui/plugin-calendar": "^4.5.0",
+    "@object-ui/plugin-charts": "^4.5.0",
+    "@object-ui/plugin-chatbot": "^4.5.0",
+    "@object-ui/plugin-dashboard": "^4.5.0",
+    "@object-ui/plugin-designer": "^4.5.0",
+    "@object-ui/plugin-detail": "^4.5.0",
+    "@object-ui/plugin-form": "^4.5.0",
+    "@object-ui/plugin-grid": "^4.5.0",
+    "@object-ui/plugin-kanban": "^4.5.0",
+    "@object-ui/plugin-list": "^4.5.0",
+    "@object-ui/plugin-report": "^4.5.0",
+    "@object-ui/plugin-view": "^4.5.0"
   },
   "devDependencies": {
     "@types/node": "^25.9.0",