@object-ui/app-shell 4.0.0 → 4.0.3

package/CHANGELOG.md

@@ -1,5 +1,132 @@
 # @object-ui/app-shell — Changelog
 
+## 4.0.3
+
+### Patch Changes
+
+- 4be43e2: **Page-mode record forms (`editMode: 'page'`).** New per-object metadata flag that opts a record's create/edit form into a dedicated full-screen route (`/apps/:appName/:objectName/new`, `/apps/:appName/:objectName/record/:recordId/edit`). Two new declarative actions `navigate_create` and `navigate_edit` open these routes from JSON action buttons. Default modal behavior is preserved for objects that do not set `editMode`.
+
+  **`@object-ui/plugin-list` & `@object-ui/plugin-detail`: `ComponentRegistry` singleton fix.** Both plugins' Vite configs now mark all `@object-ui/*` packages as external so each plugin no longer bundles its own private copy of `@object-ui/core`. Cross-plugin component lookups now resolve correctly from the same singleton registry. `plugin-list` dist shrank from multi-MB to 67 kB (gzip 16 kB); `plugin-detail` to 124 kB (gzip 28 kB).
+
+  **`@object-ui/app-shell` `CreateViewDialog` churn fix.** `existingSet` is now memoised on the joined string key of `existingLabels` rather than the raw array reference, preventing the name-suggest `useEffect` from re-firing on every parent render.
+
+  **CI fixes.** `ReportViewer` conditional-formatting test now accepts both `rgb(...)` and hex color representations. `ObjectView` i18n mocks rewritten to mirror the real hook shapes (`useObjectTranslation`, `useObjectLabel`).
+
+- Updated dependencies [4be43e2]
+  - @object-ui/types@4.0.3
+  - @object-ui/core@4.0.3
+  - @object-ui/i18n@4.0.3
+  - @object-ui/react@4.0.3
+  - @object-ui/components@4.0.3
+  - @object-ui/fields@4.0.3
+  - @object-ui/layout@4.0.3
+  - @object-ui/data-objectstack@4.0.3
+  - @object-ui/auth@4.0.3
+  - @object-ui/permissions@4.0.3
+  - @object-ui/plugin-calendar@4.0.3
+  - @object-ui/plugin-charts@4.0.3
+  - @object-ui/plugin-chatbot@4.0.3
+  - @object-ui/plugin-dashboard@4.0.3
+  - @object-ui/plugin-designer@4.0.3
+  - @object-ui/plugin-detail@4.0.3
+  - @object-ui/plugin-form@4.0.3
+  - @object-ui/plugin-grid@4.0.3
+  - @object-ui/plugin-kanban@4.0.3
+  - @object-ui/plugin-list@4.0.3
+  - @object-ui/plugin-report@4.0.3
+  - @object-ui/plugin-view@4.0.3
+  - @object-ui/collaboration@4.0.3
+
+## Unreleased
+
+### Added
+
+- **Page-mode record forms.** Objects can now opt into a route-driven
+  full-screen create/edit experience by setting `editMode: 'page'` on the
+  object metadata (default remains `'modal'`). When opted in, the
+  console mounts two new routes under `/apps/:appName/`:
+  - `:objectName/new` for create
+  - `:objectName/record/:recordId/edit` for edit
+
+  URLs are deep-linkable, refresh-safe, and respect the browser back
+  button. The new `RecordFormPage` view renders inside the existing
+  `ConsoleLayout` chrome and reuses the same `<ObjectForm>` pipeline as
+  the modal flow, so every existing form configuration (sections,
+  visibility expressions, validations, `formType: 'tabbed' | 'wizard'`,
+  …) works without changes.
+
+  Two declarative actions expose the routes for `<action:button>` JSON:
+  - `{ "action": "navigate_create", "params": { "objectName": "..." } }`
+  - `{ "action": "navigate_edit", "params": { "objectName": "...", "recordId": "..." } }`
+
+  When called from inside an `ObjectView` the `objectName` falls back to
+  the action context, so it can be omitted from the params.
+
+  See `content/docs/guide/record-edit-modes.md` for a walkthrough.
+  - New view: `packages/app-shell/src/views/RecordFormPage.tsx`
+  - New helpers: `resolveRecordFormTarget`, `resolveNavigateCreateUrl`,
+    `resolveNavigateEditUrl` in
+    `packages/app-shell/src/utils/recordFormNavigation.ts`
+  - Tests: `RecordFormPage.test.tsx` (6) and
+    `recordFormNavigation.test.ts` (22), all passing.
+
+## 4.0.1
+
+### Patch Changes
+
+- @object-ui/types@4.0.1
+- @object-ui/core@4.0.1
+- @object-ui/i18n@4.0.1
+- @object-ui/react@4.0.1
+- @object-ui/components@4.0.1
+- @object-ui/fields@4.0.1
+- @object-ui/layout@4.0.1
+- @object-ui/data-objectstack@4.0.1
+- @object-ui/auth@4.0.1
+- @object-ui/permissions@4.0.1
+- @object-ui/plugin-calendar@4.0.1
+- @object-ui/plugin-charts@4.0.1
+- @object-ui/plugin-chatbot@4.0.1
+- @object-ui/plugin-dashboard@4.0.1
+- @object-ui/plugin-designer@4.0.1
+- @object-ui/plugin-detail@4.0.1
+- @object-ui/plugin-form@4.0.1
+- @object-ui/plugin-grid@4.0.1
+- @object-ui/plugin-kanban@4.0.1
+- @object-ui/plugin-list@4.0.1
+- @object-ui/plugin-report@4.0.1
+- @object-ui/plugin-view@4.0.1
+- @object-ui/collaboration@4.0.1
+
+## 4.0.0
+
+### Patch Changes
+
+- Updated dependencies
+  - @object-ui/types@4.0.0
+  - @object-ui/auth@4.0.0
+  - @object-ui/collaboration@4.0.0
+  - @object-ui/components@4.0.0
+  - @object-ui/core@4.0.0
+  - @object-ui/data-objectstack@4.0.0
+  - @object-ui/fields@4.0.0
+  - @object-ui/layout@4.0.0
+  - @object-ui/permissions@4.0.0
+  - @object-ui/plugin-calendar@4.0.0
+  - @object-ui/plugin-charts@4.0.0
+  - @object-ui/plugin-chatbot@4.0.0
+  - @object-ui/plugin-dashboard@4.0.0
+  - @object-ui/plugin-designer@4.0.0
+  - @object-ui/plugin-detail@4.0.0
+  - @object-ui/plugin-form@4.0.0
+  - @object-ui/plugin-grid@4.0.0
+  - @object-ui/plugin-kanban@4.0.0
+  - @object-ui/plugin-list@4.0.0
+  - @object-ui/plugin-report@4.0.0
+  - @object-ui/plugin-view@4.0.0
+  - @object-ui/react@4.0.0
+  - @object-ui/i18n@4.0.0
+
 ## 4.0.0
 
 ### Patch Changes

package/README.md

@@ -175,6 +175,60 @@ See `examples/byo-backend-console` for a complete working example that demonstra
 - Cherry-picking only needed components
 - Building a console in ~100 lines of code
 
+## Record create/edit modes
+
+The default `<DefaultAppContent>` shell mounts a global `<ModalForm>` for
+record create/edit interactions. Each object can opt in to a route-driven
+full-screen experience instead by setting `editMode` on its metadata:
+
+```jsonc
+// objects/account.json
+{
+  "name": "account",
+  "label": "Account",
+  "editMode": "page",        // ← opt-in. Default is "modal".
+  "fields": { /* ... */ }
+}
+```
+
+When `editMode: 'page'` is set, clicking **Create** or **Edit** for an
+`account` record navigates to a dedicated route instead of opening the
+dialog:
+
+| Action | URL |
+|--------|-----|
+| Create | `/apps/:appName/account/new` |
+| Edit   | `/apps/:appName/account/record/:recordId/edit` |
+
+These routes are deep-linkable (refresh-safe), respect the browser back
+button, and render the same `<ObjectForm>` pipeline as the modal — so
+`tabbed`, `wizard`, and section configurations work in both modes.
+
+JSON `<action:button>` schemas can also trigger the page routes directly
+via the action runner, regardless of the object's `editMode`:
+
+```json
+{
+  "type": "action:button",
+  "label": "New Account",
+  "action": { "action": "navigate_create", "params": { "objectName": "account" } }
+}
+```
+
+```json
+{
+  "type": "action:button",
+  "label": "Edit",
+  "action": {
+    "action": "navigate_edit",
+    "params": { "objectName": "account", "recordId": "${record.id}" }
+  }
+}
+```
+
+See [`content/docs/guide/record-edit-modes.md`](../../content/docs/guide/record-edit-modes.md)
+for a longer walkthrough.
+
 <!-- release-metadata:v3.3.0 -->
 
 ## Compatibility

package/dist/console/AppContent.js

@@ -13,13 +13,14 @@ import { useState, useEffect, useCallback, lazy, Suspense, useMemo } from 'react
 import { ModalForm } from '@object-ui/plugin-form';
 import { Empty, EmptyTitle, EmptyDescription, Button } from '@object-ui/components';
 import { toast } from 'sonner';
-import { SchemaRendererProvider, useActionRunner, useGlobalUndo } from '@object-ui/react';
+import { useActionRunner, useGlobalUndo } from '@object-ui/react';
 import { useObjectTranslation, useObjectLabel } from '@object-ui/i18n';
 import { useAuth } from '@object-ui/auth';
 import { useMetadata } from '../providers/MetadataProvider';
 import { useAdapter } from '../providers/AdapterProvider';
 import { ExpressionProvider, evaluateVisibility } from '../providers/ExpressionProvider';
 import { useRecentItems } from '../hooks/useRecentItems';
+import { resolveRecordFormTarget, resolveNavigateCreateUrl, resolveNavigateEditUrl } from '../utils/recordFormNavigation';
 import { ExpressionEvaluator } from '@object-ui/core';
 // Components (eagerly loaded — always needed)
 import { ConsoleLayout } from '../layout/ConsoleLayout';
@@ -36,6 +37,7 @@ const DashboardView = lazy(() => import('../views/DashboardView').then(m => ({ d
 const PageView = lazy(() => import('../views/PageView').then(m => ({ default: m.PageView })));
 const ReportView = lazy(() => import('../views/ReportView').then(m => ({ default: m.ReportView })));
 const SearchResultsPage = lazy(() => import('../views/SearchResultsPage').then(m => ({ default: m.SearchResultsPage })));
+const RecordFormPage = lazy(() => import('../views/RecordFormPage').then(m => ({ default: m.RecordFormPage })));
 // Designer pages — sourced from @object-ui/plugin-designer so third-party hosts
 // can opt out by not registering these routes.
 const CreateAppPage = lazy(() => import('@object-ui/plugin-designer').then(m => ({ default: m.CreateAppPage })));
@@ -104,13 +106,54 @@ export function AppContent({ extraRoutes, extraRoutesNoApp } = {}) {
             setIsDialogOpen(false);
             return { success: true };
         });
+        // Page-mode navigation handlers — declarative counterparts to the
+        // imperative `handleEdit` callback. These let JSON schemas open the
+        // full-screen create/edit pages directly via `<action:button>` without
+        // any custom code:
+        //   { "action": "navigate_create", "params": { "objectName": "..." } }
+        //   { "action": "navigate_edit",
+        //     "params": { "objectName": "...", "recordId": "..." } }
+        // The `objectName` param falls back to the action context's
+        // `objectName` (set per view) so action buttons mounted inside an
+        // ObjectView can omit it.
+        // NOTE on duplication below: each handler reads `runner.getContext()`
+        // INSIDE its closure (at action-invocation time) rather than once at
+        // registration. Hoisting the call outside the registrations would
+        // freeze the context to whatever it was when the effect last ran,
+        // breaking dynamic per-view `runner.updateContext({ objectName, ... })`
+        // calls (used by ObjectView / RecordDetailView). Keep the call where
+        // it is.
+        runner.registerHandler('navigate_create', async (action) => {
+            const ctx = runner.getContext?.() ?? {};
+            const result = resolveNavigateCreateUrl({
+                action,
+                context: ctx,
+                defaultBaseUrl: `/apps/${appName ?? ''}`,
+            });
+            if (!result.success)
+                return result;
+            navigate(result.url);
+            return { success: true };
+        });
+        runner.registerHandler('navigate_edit', async (action) => {
+            const ctx = runner.getContext?.() ?? {};
+            const result = resolveNavigateEditUrl({
+                action,
+                context: ctx,
+                defaultBaseUrl: `/apps/${appName ?? ''}`,
+            });
+            if (!result.success)
+                return result;
+            navigate(result.url);
+            return { success: true };
+        });
         // NOTE: `flow` actions are handled at the per-view ActionProvider level
         // (RecordDetailView / ObjectView) so they share the same ActionRunner that
         // <action:button> renderers consume via useAction(). Do NOT register a
         // `flow` handler on this top-level useActionRunner — it lives on a
         // different ActionRunner instance and would never be invoked from the
         // record/list action buttons.
-    }, [runner]);
+    }, [runner, navigate, appName]);
     useEffect(() => {
         if (!dataSource)
             return;
@@ -185,6 +228,19 @@ export function AppContent({ extraRoutes, extraRoutesNoApp } = {}) {
         }
     }, [location.pathname, addRecentItem]); // eslint-disable-line react-hooks/exhaustive-deps
     const handleEdit = (record) => {
+        // Page-mode opt-in: when the object metadata declares
+        // `editMode: 'page'`, route to the full-screen create/edit page instead
+        // of opening the global ModalForm. Default behavior (modal) is
+        // preserved for any object without the flag.
+        const target = resolveRecordFormTarget({
+            objectDef: currentObjectDef,
+            baseUrl: activeApp?.name ? `/apps/${activeApp.name}` : '',
+            record,
+        });
+        if (target.kind === 'page') {
+            navigate(target.url);
+            return;
+        }
         setEditingRecord(record);
         setIsDialogOpen(true);
     };
@@ -208,41 +264,41 @@ export function AppContent({ extraRoutes, extraRoutesNoApp } = {}) {
     const expressionUser = user
         ? { name: user.name, email: user.email, role: user.role ?? 'user' }
         : { name: 'Anonymous', email: '', role: 'guest' };
-    return (_jsxs(ExpressionProvider, { user: expressionUser, app: activeApp, data: {}, children: [_jsx(NavigationSyncEffect, {}), _jsxs(ConsoleLayout, { activeAppName: activeApp.name, activeApp: activeApp, onAppChange: handleAppChange, objects: allObjects, connectionState: connectionState, children: [_jsx(CommandPalette, { apps: apps, activeApp: activeApp, objects: allObjects, onAppChange: handleAppChange }), _jsx(KeyboardShortcutsDialog, {}), _jsx(OnboardingWalkthrough, {}), _jsxs(SchemaRendererProvider, { dataSource: dataSource || {}, children: [_jsx(ErrorBoundary, { children: _jsx(Suspense, { fallback: _jsx(LoadingScreen, {}), children: _jsxs(Routes, { children: [_jsx(Route, { path: "/", element: _jsx(Navigate, { to: findFirstRoute(activeApp.navigation || []), replace: true }) }), _jsx(Route, { path: ":objectName", element: _jsx(ObjectView, { dataSource: dataSource, objects: allObjects, onEdit: handleEdit }) }), _jsx(Route, { path: ":objectName/view/:viewId", element: _jsx(ObjectView, { dataSource: dataSource, objects: allObjects, onEdit: handleEdit }) }), _jsx(Route, { path: ":objectName/record/:recordId", element: _jsx(RecordDetailView, { dataSource: dataSource, objects: allObjects, onEdit: handleEdit }, refreshKey) }), _jsx(Route, { path: "dashboard/:dashboardName", element: _jsx(DashboardView, { dataSource: dataSource }) }), _jsx(Route, { path: "report/:reportName", element: _jsx(ReportView, { dataSource: dataSource }) }), _jsx(Route, { path: "page/:pageName", element: _jsx(PageView, {}) }), _jsx(Route, { path: "design/page/:pageName", element: _jsx(PageDesignPage, {}) }), _jsx(Route, { path: "design/dashboard/:dashboardName", element: _jsx(DashboardDesignPage, {}) }), _jsx(Route, { path: "search", element: _jsx(SearchResultsPage, {}) }), _jsx(Route, { path: "create-app", element: _jsx(CreateAppPage, {}) }), _jsx(Route, { path: "edit-app/:editAppName", element: _jsx(EditAppPage, {}) }), extraRoutes] }) }) }), currentObjectDef && (_jsx(ModalForm, { schema: {
-                                    type: 'object-form',
-                                    formType: 'modal',
-                                    objectName: currentObjectDef.name,
-                                    mode: editingRecord ? 'edit' : 'create',
-                                    recordId: editingRecord?.id,
-                                    title: editingRecord
-                                        ? t('form.editTitle', { object: objectLabel(currentObjectDef) })
-                                        : t('form.createTitle', { object: objectLabel(currentObjectDef) }),
-                                    description: editingRecord
-                                        ? t('form.editDescription', { object: objectLabel(currentObjectDef) })
-                                        : t('form.createDescription', { object: objectLabel(currentObjectDef) }),
-                                    open: isDialogOpen,
-                                    onOpenChange: setIsDialogOpen,
-                                    layout: 'vertical',
-                                    fields: currentObjectDef.fields
-                                        ? (Array.isArray(currentObjectDef.fields)
-                                            ? currentObjectDef.fields
-                                                .filter((f) => {
-                                                if (typeof f === 'string')
-                                                    return true;
-                                                return evaluateVisibility(f.visible, expressionEvaluator);
-                                            })
-                                                .map((f) => typeof f === 'string' ? f : f.name)
-                                            : Object.entries(currentObjectDef.fields)
-                                                .filter(([_, f]) => evaluateVisibility(f.visible, expressionEvaluator))
-                                                .map(([key]) => key))
-                                        : [],
-                                    onSuccess: handleCrudSuccess,
-                                    onCancel: handleDialogCancel,
-                                    showSubmit: true,
-                                    showCancel: true,
-                                    submitText: t('form.saveRecord'),
-                                    cancelText: t('common.cancel'),
-                                }, dataSource: dataSource }, editingRecord?.id || 'new'))] })] })] }));
+    return (_jsxs(ExpressionProvider, { user: expressionUser, app: activeApp, data: {}, children: [_jsx(NavigationSyncEffect, {}), _jsxs(ConsoleLayout, { activeAppName: activeApp.name, activeApp: activeApp, onAppChange: handleAppChange, objects: allObjects, connectionState: connectionState, children: [_jsx(CommandPalette, { apps: apps, activeApp: activeApp, objects: allObjects, onAppChange: handleAppChange }), _jsx(KeyboardShortcutsDialog, {}), _jsx(OnboardingWalkthrough, {}), _jsx(ErrorBoundary, { children: _jsx(Suspense, { fallback: _jsx(LoadingScreen, {}), children: _jsxs(Routes, { children: [_jsx(Route, { path: "/", element: _jsx(Navigate, { to: findFirstRoute(activeApp.navigation || []), replace: true }) }), _jsx(Route, { path: ":objectName", element: _jsx(ObjectView, { dataSource: dataSource, objects: allObjects, onEdit: handleEdit }) }), _jsx(Route, { path: ":objectName/new", element: _jsx(RecordFormPage, { mode: "create" }) }), _jsx(Route, { path: ":objectName/view/:viewId", element: _jsx(ObjectView, { dataSource: dataSource, objects: allObjects, onEdit: handleEdit }) }), _jsx(Route, { path: ":objectName/record/:recordId", element: _jsx(RecordDetailView, { dataSource: dataSource, objects: allObjects, onEdit: handleEdit }, refreshKey) }), _jsx(Route, { path: ":objectName/record/:recordId/edit", element: _jsx(RecordFormPage, { mode: "edit" }) }), _jsx(Route, { path: "dashboard/:dashboardName", element: _jsx(DashboardView, { dataSource: dataSource }) }), _jsx(Route, { path: "report/:reportName", element: _jsx(ReportView, { dataSource: dataSource }) }), _jsx(Route, { path: "page/:pageName", element: _jsx(PageView, {}) }), _jsx(Route, { path: "design/page/:pageName", element: _jsx(PageDesignPage, {}) }), _jsx(Route, { path: "design/dashboard/:dashboardName", element: _jsx(DashboardDesignPage, {}) }), _jsx(Route, { path: "search", element: _jsx(SearchResultsPage, {}) }), _jsx(Route, { path: "create-app", element: _jsx(CreateAppPage, {}) }), _jsx(Route, { path: "edit-app/:editAppName", element: _jsx(EditAppPage, {}) }), extraRoutes] }) }) }), currentObjectDef && (_jsx(ModalForm, { schema: {
+                            type: 'object-form',
+                            formType: 'modal',
+                            objectName: currentObjectDef.name,
+                            mode: editingRecord ? 'edit' : 'create',
+                            recordId: editingRecord?.id,
+                            title: editingRecord
+                                ? t('form.editTitle', { object: objectLabel(currentObjectDef) })
+                                : t('form.createTitle', { object: objectLabel(currentObjectDef) }),
+                            description: editingRecord
+                                ? t('form.editDescription', { object: objectLabel(currentObjectDef) })
+                                : t('form.createDescription', { object: objectLabel(currentObjectDef) }),
+                            open: isDialogOpen,
+                            onOpenChange: setIsDialogOpen,
+                            layout: 'vertical',
+                            fields: currentObjectDef.fields
+                                ? (Array.isArray(currentObjectDef.fields)
+                                    ? currentObjectDef.fields
+                                        .filter((f) => {
+                                        if (typeof f === 'string')
+                                            return true;
+                                        return evaluateVisibility(f.visible, expressionEvaluator);
+                                    })
+                                        .map((f) => typeof f === 'string' ? f : f.name)
+                                    : Object.entries(currentObjectDef.fields)
+                                        .filter(([_, f]) => evaluateVisibility(f.visible, expressionEvaluator))
+                                        .map(([key]) => key))
+                                : [],
+                            onSuccess: handleCrudSuccess,
+                            onCancel: handleDialogCancel,
+                            showSubmit: true,
+                            showCancel: true,
+                            submitText: t('form.saveRecord'),
+                            cancelText: t('common.cancel'),
+                        }, dataSource: dataSource }, editingRecord?.id || 'new'))] })] }));
 }
 function findFirstRoute(items) {
     if (!items || items.length === 0)

package/dist/console/ConsoleShell.js

@@ -13,6 +13,7 @@ import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { Suspense } from 'react';
 import { Navigate, useLocation } from 'react-router-dom';
 import { AuthGuard, useAuth } from '@object-ui/auth';
+import { SchemaRendererProvider } from '@object-ui/react';
 import { AdapterProvider, useAdapter } from '../providers/AdapterProvider';
 import { MetadataProvider, useMetadata } from '../providers/MetadataProvider';
 import { NavigationProvider } from '../context/NavigationContext';
@@ -50,7 +51,9 @@ function ConnectedShellInner({ children }) {
     const adapter = useAdapter();
     if (!adapter)
         return _jsx(LoadingFallback, {});
-    return _jsx(MetadataProvider, { adapter: adapter, children: children });
+    // Expose the adapter via SchemaRendererContext so descendant hooks like
+    // useDiscovery() (used to gate the global AI chatbot) can resolve it.
+    return (_jsx(SchemaRendererProvider, { dataSource: adapter, children: _jsx(MetadataProvider, { adapter: adapter, children: children }) }));
 }
 /**
  * RequireOrganization — redirects to /organizations when the multi-tenant

package/dist/console/home/HomeLayout.js

@@ -8,13 +8,23 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  *
  * @module
  */
-import { useEffect } from 'react';
+import { useEffect, Suspense, lazy } from 'react';
 import { useNavigationContext } from '../../context/NavigationContext';
 import { AppHeader } from '../../layout/AppHeader';
+import { useDiscovery } from '@object-ui/react';
+// Lazy-load the chatbot so its heavy markdown deps stay out of the initial
+// paint until the AI assistant is actually enabled.
+const ConsoleFloatingChatbot = lazy(() => import('../../layout/ConsoleFloatingChatbot'));
 export function HomeLayout({ children }) {
     const { setContext } = useNavigationContext();
+    const { isAiEnabled } = useDiscovery();
+    // Render the chatbot whenever AI is reachable. If the developer has explicitly
+    // configured `VITE_AI_BASE_URL`, trust that opt-in even when discovery
+    // reports AI as disabled (e.g. framework started without `--preset full`).
+    const aiBaseUrlConfigured = Boolean(import.meta.env?.VITE_AI_BASE_URL);
+    const showChatbot = isAiEnabled || aiBaseUrlConfigured;
     useEffect(() => {
         setContext('home');
     }, [setContext]);
-    return (_jsxs("div", { className: "flex min-h-svh w-full flex-col bg-background", "data-testid": "home-layout", children: [_jsx("header", { className: "sticky top-0 z-30 flex h-14 w-full shrink-0 items-center gap-2 border-b bg-background px-2 sm:px-4", children: _jsx(AppHeader, { variant: "home" }) }), _jsx("main", { className: "flex-1 min-w-0 overflow-auto", children: children })] }));
+    return (_jsxs("div", { className: "flex min-h-svh w-full flex-col bg-background", "data-testid": "home-layout", children: [_jsx("header", { className: "sticky top-0 z-30 flex h-14 w-full shrink-0 items-center gap-2 border-b bg-background px-2 sm:px-4", children: _jsx(AppHeader, { variant: "home" }) }), _jsx("main", { className: "flex-1 min-w-0 overflow-auto", children: children }), showChatbot && (_jsx(Suspense, { fallback: null, children: _jsx(ConsoleFloatingChatbot, { appLabel: "Workspace", objects: [] }) }))] }));
 }

package/dist/index.d.ts

@@ -22,7 +22,8 @@ export { ConsoleShell, ConnectedShell, RequireOrganization, AuthenticatedRoute,
 export { ConsoleLayout, AppHeader, AppSidebar, UnifiedSidebar, AppSwitcher, ConnectionStatus, ActivityFeed, LocaleSwitcher, ModeToggle, AuthPageLayout, } from './layout';
 export type { ActivityItem } from './layout';
 export { CommandPalette, KeyboardShortcutsDialog, OnboardingWalkthrough, ConditionalAuthWrapper, ConsoleToaster, ErrorBoundary, LoadingScreen, ThemeProvider, useTheme, } from './chrome';
-export { ObjectView, RecordDetailView, DashboardView, PageView, ReportView, SearchResultsPage, ViewConfigPanel, } from './views';
+export { ObjectView, RecordDetailView, RecordFormPage, DashboardView, PageView, ReportView, SearchResultsPage, ViewConfigPanel, } from './views';
+export type { RecordFormPageProps } from './views';
 export { useFavorites, useMetadataService, useNavPins, useNavigationSync, NavigationSyncEffect, addNavigationItem, removeNavigationItems, renameNavigationItems, navigationEqual, generateNavId, useResponsiveSidebar, } from './hooks';
 export type { FavoriteItem } from './hooks';
 export { NavigationProvider, useNavigationContext, FavoritesProvider } from './context';

package/dist/index.js

@@ -25,7 +25,7 @@ export { ConsoleLayout, AppHeader, AppSidebar, UnifiedSidebar, AppSwitcher, Conn
 // Top-level chrome (dialogs, providers, error boundaries)
 export { CommandPalette, KeyboardShortcutsDialog, OnboardingWalkthrough, ConditionalAuthWrapper, ConsoleToaster, ErrorBoundary, LoadingScreen, ThemeProvider, useTheme, } from './chrome';
 // Standard inner-SPA views
-export { ObjectView, RecordDetailView, DashboardView, PageView, ReportView, SearchResultsPage, ViewConfigPanel, } from './views';
+export { ObjectView, RecordDetailView, RecordFormPage, DashboardView, PageView, ReportView, SearchResultsPage, ViewConfigPanel, } from './views';
 // Hooks
 export { useFavorites, useMetadataService, useNavPins, useNavigationSync, NavigationSyncEffect, addNavigationItem, removeNavigationItems, renameNavigationItems, navigationEqual, generateNavId, useResponsiveSidebar, } from './hooks';
 // Context providers

package/dist/layout/AppHeader.js

@@ -181,7 +181,14 @@ export function AppHeader({ variant, appName, objects, connectionState, presence
                     extraSegments.push({ label: displayTitle || `#${shortId}` });
                 }
                 else if (pathParts[3] === 'view' && pathParts[4]) {
-                    extraSegments.push({ label: humanizeSlug(pathParts[4]) });
+                    // Prefer the view's metadata label (e.g. "Lead Pipeline") over a
+                    // humanized slug ("Kanban By Status") so the breadcrumb matches the
+                    // tab label users clicked.
+                    const viewName = pathParts[4];
+                    const definedViews = currentObject.listViews || currentObject.list_views || {};
+                    const viewDef = definedViews[viewName];
+                    const viewLabel = (viewDef && (viewDef.label || viewDef.title)) || humanizeSlug(viewName);
+                    extraSegments.push({ label: viewLabel });
                 }
             }
         }

package/dist/layout/ConsoleFloatingChatbot.d.ts

@@ -5,6 +5,13 @@ interface ConsoleObject {
 export interface ConsoleFloatingChatbotProps {
     appLabel: string;
     objects: ConsoleObject[];
+    /**
+     * Base URL of the AI service. Defaults to `${VITE_SERVER_URL}/api/v1/ai`
+     * (or the relative `/api/v1/ai` when no server URL is configured).
+     */
+    apiBase?: string;
+    /** Default agent name to select on first render. */
+    defaultAgent?: string;
 }
-export default function ConsoleFloatingChatbot({ appLabel, objects }: ConsoleFloatingChatbotProps): import("react/jsx-runtime").JSX.Element;
+export default function ConsoleFloatingChatbot({ appLabel, objects, apiBase: apiBaseProp, defaultAgent: defaultAgentProp, }: ConsoleFloatingChatbotProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/layout/ConsoleFloatingChatbot.js

@@ -1,27 +1,96 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { FloatingChatbot, useObjectChat } from '@object-ui/plugin-chatbot';
-export default function ConsoleFloatingChatbot({ appLabel, objects }) {
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * ConsoleFloatingChatbot
+ *
+ * Wires the global FAB chatbot to the framework's `@objectstack/service-ai`
+ * backend (the `/api/v1/ai/agents/:agentName/chat` Vercel Data Stream
+ * endpoint) and exposes an in-header agent picker.
+ *
+ * The chatbot pulls in `react-markdown` + `micromark` (~150 KB) which is
+ * unused on every page until the AI assistant is enabled, so deferring it
+ * keeps those bytes off the initial paint.
+ * @module
+ */
+import React from 'react';
+import { FloatingChatbot, useObjectChat, useAgents, } from '@object-ui/plugin-chatbot';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '@object-ui/components';
+const DEFAULT_AI_PATH = '/api/v1/ai';
+function resolveApiBase(explicit) {
+    if (explicit)
+        return explicit.replace(/\/$/, '');
+    const env = import.meta.env ?? {};
+    const fromEnv = env.VITE_AI_BASE_URL;
+    if (fromEnv)
+        return fromEnv.replace(/\/$/, '');
+    const serverUrl = env.VITE_SERVER_URL ?? '';
+    return `${serverUrl.replace(/\/$/, '')}${DEFAULT_AI_PATH}`;
+}
+function ChatbotInner({ appLabel, objects, agents, agentsLoading, agentsError, activeAgent, onAgentChange, chatApi, }) {
     const objectNames = objects.map((o) => o.label || o.name).join(', ');
+    const activeAgentLabel = React.useMemo(() => {
+        const found = agents.find((a) => a.name === activeAgent);
+        return found?.label ?? activeAgent ?? appLabel;
+    }, [agents, activeAgent, appLabel]);
+    const welcomeContent = activeAgent
+        ? `Hello! I'm **${activeAgentLabel}**, your ${appLabel} assistant. How can I help you today?`
+        : `Hello! I'm your **${appLabel}** assistant. ${agentsError ? '(Backend unreachable — running in offline demo mode.)' : ''}`;
     const { messages, isLoading, error, sendMessage, stop, reload, clear, } = useObjectChat({
+        api: chatApi,
+        conversationId: activeAgent ? `${appLabel}:${activeAgent}` : undefined,
+        body: {
+            context: {
+                activeApp: appLabel,
+                objects: objects.map((o) => ({ name: o.name, label: o.label })),
+                agentName: activeAgent,
+            },
+        },
         initialMessages: [
             {
                 id: 'welcome',
                 role: 'assistant',
-                content: `Hello! I'm your **${appLabel}** assistant. How can I help you today?`,
+                content: welcomeContent,
             },
         ],
-        autoResponse: true,
+        // Local-mode fallback: only used when `chatApi` is undefined (no agent
+        // resolved yet, or no backend available). Keeps the UI usable.
+        autoResponse: !chatApi,
         autoResponseText: objectNames
             ? `I can help you work with ${objectNames}. What would you like to do?`
-            : 'Thanks for your message! I\'m here to help you navigate and manage your data.',
-        autoResponseDelay: 800,
+            : "Thanks for your message! I'm here to help you navigate and manage your data.",
+        autoResponseDelay: 600,
     });
+    const headerExtra = agents.length > 0 ? (_jsxs(Select, { value: activeAgent, onValueChange: onAgentChange, disabled: agentsLoading, children: [_jsx(SelectTrigger, { className: "h-7 w-[180px] text-xs", "data-testid": "floating-chatbot-agent-picker", children: _jsx(SelectValue, { placeholder: "Choose agent..." }) }), _jsx(SelectContent, { align: "end", children: agents.map((agent) => (_jsxs(SelectItem, { value: agent.name, className: "text-xs", children: [_jsx("span", { className: "font-medium", children: agent.label }), agent.description ? (_jsx("span", { className: "block text-muted-foreground text-[10px] truncate max-w-[220px]", children: agent.description })) : null] }, agent.name))) })] })) : null;
     return (_jsx(FloatingChatbot, { floatingConfig: {
             position: 'bottom-right',
             defaultOpen: false,
-            panelWidth: 400,
-            panelHeight: 520,
+            panelWidth: 420,
+            panelHeight: 560,
             title: `${appLabel} Assistant`,
             triggerSize: 56,
-        }, messages: messages, placeholder: "Ask anything...", onSendMessage: (content) => sendMessage(content), onClear: clear, onStop: isLoading ? stop : undefined, onReload: reload, isLoading: isLoading, error: error, enableMarkdown: true }));
+        }, headerExtra: headerExtra, messages: messages, placeholder: activeAgent
+            ? `Ask ${activeAgentLabel}...`
+            : agentsLoading
+                ? 'Loading agents...'
+                : 'Ask anything...', onSendMessage: (content) => sendMessage(content), onClear: clear, onStop: isLoading ? stop : undefined, onReload: reload, isLoading: isLoading, error: error, enableMarkdown: true }));
+}
+export default function ConsoleFloatingChatbot({ appLabel, objects, apiBase: apiBaseProp, defaultAgent: defaultAgentProp, }) {
+    const apiBase = React.useMemo(() => resolveApiBase(apiBaseProp), [apiBaseProp]);
+    const env = import.meta.env ?? {};
+    const envDefaultAgent = env.VITE_AI_DEFAULT_AGENT;
+    const { agents, isLoading: agentsLoading, error: agentsError } = useAgents({ apiBase });
+    const [activeAgent, setActiveAgent] = React.useState(undefined);
+    React.useEffect(() => {
+        if (!activeAgent && agents.length > 0) {
+            const preferred = defaultAgentProp ?? envDefaultAgent;
+            const match = preferred ? agents.find((a) => a.name === preferred) : undefined;
+            setActiveAgent((match ?? agents[0]).name);
+        }
+    }, [agents, activeAgent, defaultAgentProp, envDefaultAgent]);
+    const chatApi = activeAgent
+        ? `${apiBase}/agents/${encodeURIComponent(activeAgent)}/chat`
+        : undefined;
+    // `key` forces a clean remount whenever the active agent (and therefore the
+    // chat API URL) changes — required because `useObjectChat` locks its mode
+    // (api vs local) on first render.
+    return (_jsx(ChatbotInner, { appLabel: appLabel, objects: objects, agents: agents, agentsLoading: agentsLoading, agentsError: agentsError, activeAgent: activeAgent, onAgentChange: setActiveAgent, chatApi: chatApi }, chatApi ?? 'local'));
 }

package/dist/layout/ConsoleLayout.js

@@ -29,6 +29,10 @@ function ConsoleLayoutInner({ children }) {
 export function ConsoleLayout({ children, activeAppName, activeApp, onAppChange, objects, connectionState }) {
     const appLabel = resolveI18nLabel(activeApp?.label) || activeAppName;
     const { isAiEnabled } = useDiscovery();
+    // Trust an explicit `VITE_AI_BASE_URL` opt-in even when discovery reports
+    // AI as disabled (e.g. framework started without `--preset full`).
+    const aiBaseUrlConfigured = Boolean(import.meta.env?.VITE_AI_BASE_URL);
+    const showChatbot = isAiEnabled || aiBaseUrlConfigured;
     const { setContext, setCurrentAppName } = useNavigationContext();
     // Set navigation context to 'app' when this layout mounts
     useEffect(() => {
@@ -45,5 +49,5 @@ export function ConsoleLayout({ children, activeAppName, activeApp, onAppChange,
                     ? `${resolveI18nLabel(activeApp.label)} — ObjectStack Console`
                     : undefined,
             }
-            : undefined, children: [_jsx(ConsoleLayoutInner, { children: children }), isAiEnabled && (_jsx(Suspense, { fallback: null, children: _jsx(ConsoleFloatingChatbot, { appLabel: appLabel, objects: objects }) }))] }));
+            : undefined, children: [_jsx(ConsoleLayoutInner, { children: children }), showChatbot && (_jsx(Suspense, { fallback: null, children: _jsx(ConsoleFloatingChatbot, { appLabel: appLabel, objects: objects }) }))] }));
 }

package/dist/utils/index.d.ts

@@ -1,6 +1,8 @@
 /**
  * Utility functions for ObjectStack Console
  */
+export { resolveRecordFormTarget, } from './recordFormNavigation';
+export type { ObjectDefinitionForNavigation, RecordFormTarget, } from './recordFormNavigation';
 /**
  * Resolves an I18nLabel to a plain string.
  * I18nLabel can be either a string or an object { key, defaultValue?, params? }.
@@ -18,10 +20,13 @@ export declare function resolveI18nLabel(label: string | {
  */
 export declare function capitalizeFirst(str: string): string;
 /**
- * Format a record title using the titleFormat pattern
- * @param titleFormat Pattern like "{name} - {email}" or "{firstName} {lastName}"
- * @param record The record data object
- * @returns Formatted title string
+ * Format a record title using the titleFormat pattern.
+ *
+ * Empty placeholders (missing or null/empty fields) are stripped along with
+ * any orphan separator they leave behind, so a template like
+ *   "{full_name} - {company}"
+ * evaluated against `{ company: "Acme" }` resolves to `"Acme"` rather than
+ * `" - Acme"`. Returns an empty string when no placeholder resolved.
  */
 export declare function formatRecordTitle(titleFormat: string | undefined, record: any): string;
 /**