@object-ui/app-shell 6.2.2 → 7.0.0

package/dist/layout/AppSidebar.js

@@ -15,7 +15,7 @@ import { Layers } from 'lucide-react';
 import { getIcon as resolveIcon } from '../utils/getIcon';
 import { Sidebar, SidebarHeader, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupLabel, SidebarGroupContent, SidebarMenu, SidebarMenuItem, SidebarMenuButton, SidebarMenuAction, SidebarInput, DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuGroup, Avatar, AvatarImage, AvatarFallback, useSidebar, } from '@object-ui/components';
 import { ChevronsUpDown, Plus, Settings, LogOut, Database, Clock, Star, StarOff, Search, Pencil, ChevronRight, Home, } from 'lucide-react';
-import { NavigationRenderer } from '@object-ui/layout';
+import { NavigationRenderer, resolveHref } from '@object-ui/layout';
 import { useMetadata } from '../providers/MetadataProvider';
 import { useExpressionContext, evaluateVisibility } from '../providers/ExpressionProvider';
 import { useAuth, useIsWorkspaceAdmin, getUserInitials } from '@object-ui/auth';
@@ -23,8 +23,9 @@ import { usePermissions } from '@object-ui/permissions';
 import { useRecentItems } from '../hooks/useRecentItems';
 import { useFavorites } from '../hooks/useFavorites';
 import { useNavPins } from '../hooks/useNavPins';
-import { resolveI18nLabel } from '../utils';
+import { resolveI18nLabel, matchAppBySegment, appRouteSegment } from '../utils';
 import { useObjectTranslation, useObjectLabel } from '@object-ui/i18n';
+import { useAppContextSelectors } from './ContextSelectors';
 // ---------------------------------------------------------------------------
 // useNavOrder – localStorage-persisted drag-and-drop reorder for nav items
 // ---------------------------------------------------------------------------
@@ -90,7 +91,7 @@ function useNavOrder(appName) {
  */
 const getIcon = resolveIcon;
 export function AppSidebar({ activeAppName, onAppChange }) {
-    const { isMobile } = useSidebar();
+    const { isMobile, setOpenMobile } = useSidebar();
     const { user, signOut, isAuthEnabled } = useAuth();
     const isWorkspaceAdmin = useIsWorkspaceAdmin();
     const navigate = useNavigate();
@@ -107,7 +108,8 @@ export function AppSidebar({ activeAppName, onAppChange }) {
         const handleTouchEnd = (e) => {
             const deltaX = e.changedTouches[0].clientX - touchStartX;
             if (touchStartX < EDGE_THRESHOLD && deltaX > SWIPE_DISTANCE && isMobile) {
-                document.querySelector('[data-sidebar="trigger"]')?.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+                // Idempotent direct open (ADR-0054 C1) — no synthetic click dispatch.
+                setOpenMobile(true);
             }
         };
         document.addEventListener('touchstart', handleTouchStart, { passive: true });
@@ -116,14 +118,17 @@ export function AppSidebar({ activeAppName, onAppChange }) {
             document.removeEventListener('touchstart', handleTouchStart);
             document.removeEventListener('touchend', handleTouchEnd);
         };
-    }, [isMobile]);
+    }, [isMobile, setOpenMobile]);
     const { recentItems } = useRecentItems();
     const { favorites, removeFavorite } = useFavorites();
     const { apps: metadataApps, objects: metadataObjects } = useMetadata();
     const apps = metadataApps || [];
-    // Filter out inactive apps
-    const activeApps = apps.filter((a) => a.active !== false);
-    const activeApp = activeApps.find((a) => a.name === activeAppName) || activeApps[0];
+    // Filter out inactive + hidden apps from the switcher list.
+    const activeApps = apps.filter((a) => a.active !== false && a.hidden !== true);
+    // The active-app lookup still spans ALL apps (incl. hidden) so a
+    // direct /apps/account navigation keeps rendering the Account branding.
+    // ADR-0048 (A) — route segment may be a package id; match by it (name fallback).
+    const activeApp = matchAppBySegment(apps.filter((a) => a.active !== false), activeAppName) || activeApps[0];
     // Extract branding information from spec
     const logo = activeApp?.branding?.logo;
     const primaryColor = activeApp?.branding?.primaryColor;
@@ -146,6 +151,9 @@ export function AppSidebar({ activeAppName, onAppChange }) {
     // Resolve navigation items: area navigation > flat navigation > empty
     const activeArea = areas.find((a) => a.id === activeAreaId);
     const resolvedNavigation = activeArea?.navigation || activeApp?.navigation || [];
+    // App-level context selectors (e.g. Studio's package scope). Their
+    // values are injected into nav items as `{<id>}` template vars.
+    const { contextValues, element: contextSelectorsUI } = useAppContextSelectors(activeAppName, activeApp?.contextSelectors, t);
     // Apply saved order and pin state to navigation items
     const processedNavigation = React.useMemo(() => {
         const ordered = applyOrder(resolvedNavigation);
@@ -185,26 +193,26 @@ export function AppSidebar({ activeAppName, onAppChange }) {
         }
         return true;
     }, [registeredObjectNames]);
-    const basePath = activeApp ? `/apps/${activeAppName}` : '';
+    const basePath = activeApp ? `/apps/${appRouteSegment(activeApp) ?? activeAppName}` : '';
     // Fallback system navigation when no active app exists — routes into the Setup app.
     // The marketplace entry is hidden from non-admin members (install is gated to
     // owner/admin on the server, so non-admins have no reason to see it).
     const systemFallbackNavigation = React.useMemo(() => {
         const items = [
-            { id: 'sys-settings', label: 'System Settings', type: 'url', url: '/apps/setup', icon: 'settings' },
-            { id: 'sys-apps', label: 'Applications', type: 'url', url: '/apps/setup/system/apps', icon: 'layout-grid' },
+            { id: 'sys-settings', label: t('layout.systemNav.systemSettings', { defaultValue: 'System Settings' }), type: 'url', url: '/apps/setup', icon: 'settings' },
+            { id: 'sys-apps', label: t('layout.systemNav.applications', { defaultValue: 'Applications' }), type: 'url', url: '/apps/setup/system/apps', icon: 'layout-grid' },
         ];
         if (isWorkspaceAdmin) {
-            items.push({ id: 'sys-marketplace', label: 'App Marketplace', type: 'url', url: '/apps/setup/system/marketplace', icon: 'store' });
+            items.push({ id: 'sys-marketplace', label: t('layout.systemNav.appMarketplace', { defaultValue: 'App Marketplace' }), type: 'url', url: '/apps/setup/system/marketplace', icon: 'store' });
         }
-        items.push({ id: 'sys-objects', label: 'Object Manager', type: 'url', url: '/apps/setup/system/metadata/object', icon: 'database' }, { id: 'sys-users', label: 'Users', type: 'url', url: '/apps/setup/system/users', icon: 'users' }, { id: 'sys-orgs', label: 'Organizations', type: 'url', url: '/apps/setup/system/organizations', icon: 'building-2' }, { id: 'sys-roles', label: 'Roles', type: 'url', url: '/apps/setup/system/roles', icon: 'shield' }, { id: 'sys-config', label: 'Configuration', type: 'url', url: '/apps/setup/system/settings', icon: 'sliders-horizontal' }, { id: 'sys-create-app', label: 'Create App', type: 'url', url: '/create-app', icon: 'plus' });
+        items.push({ id: 'sys-objects', label: t('layout.systemNav.objectManager', { defaultValue: 'Object Manager' }), type: 'url', url: '/apps/setup/system/metadata/object', icon: 'database' }, { id: 'sys-datasources', label: t('layout.systemNav.datasources', { defaultValue: 'Datasources' }), type: 'url', url: '/apps/setup/component/metadata/resource?type=datasource', icon: 'database' }, { id: 'sys-users', label: t('layout.systemNav.users', { defaultValue: 'Users' }), type: 'url', url: '/apps/setup/system/users', icon: 'users' }, { id: 'sys-orgs', label: t('layout.systemNav.organizations', { defaultValue: 'Organizations' }), type: 'url', url: '/apps/setup/system/organizations', icon: 'building-2' }, { id: 'sys-roles', label: t('layout.systemNav.roles', { defaultValue: 'Roles' }), type: 'url', url: '/apps/setup/system/roles', icon: 'shield' }, { id: 'sys-config', label: t('layout.systemNav.configuration', { defaultValue: 'Configuration' }), type: 'url', url: '/apps/setup/system/settings', icon: 'sliders-horizontal' });
         return items;
-    }, [isWorkspaceAdmin]);
-    return (_jsxs(_Fragment, { children: [_jsxs(Sidebar, { collapsible: "icon", children: [_jsx(SidebarHeader, { children: _jsx(SidebarMenu, { children: _jsx(SidebarMenuItem, { children: activeApp ? (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(SidebarMenuButton, { size: "lg", className: "data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground", children: [_jsx("div", { className: "flex aspect-square size-8 items-center justify-center rounded-lg bg-primary text-primary-foreground", style: primaryColor ? { backgroundColor: primaryColor } : undefined, children: logo ? (_jsx("img", { src: logo, alt: resolveI18nLabel(activeApp.label, t), className: "size-6 object-contain" })) : (React.createElement(getIcon(activeApp.icon), { className: "size-4" })) }), _jsxs("div", { className: "grid flex-1 text-left text-sm leading-tight", children: [_jsx("span", { className: "truncate font-semibold", children: resolveI18nLabel(activeApp.label, t) }), _jsx("span", { className: "truncate text-xs", children: resolveI18nLabel(activeApp.description, t) || `${activeApps.length} Apps Available` })] }), _jsx(ChevronsUpDown, { className: "ml-auto" })] }) }), _jsxs(DropdownMenuContent, { className: "w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg", align: "start", side: isMobile ? "bottom" : "right", sideOffset: 4, children: [_jsx(DropdownMenuLabel, { className: "text-xs text-muted-foreground", children: "Switch Application" }), activeApps.map((app) => (_jsxs(DropdownMenuItem, { onClick: () => onAppChange(app.name), className: "gap-2 p-2", children: [_jsx("div", { className: "flex size-6 items-center justify-center rounded-sm border", children: app.icon ? React.createElement(getIcon(app.icon), { className: "size-3" }) : _jsx(Database, { className: "size-3" }) }), resolveI18nLabel(app.label, t), activeApp.name === app.name && _jsx("span", { className: "ml-auto text-xs", children: "\u2713" })] }, app.name))), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { className: "gap-2 p-2", onClick: () => navigate('/home'), "data-testid": "home-link-btn", children: [_jsx("div", { className: "flex size-6 items-center justify-center rounded-md border bg-background", children: _jsx(Home, { className: "size-4" }) }), _jsx("div", { className: "font-medium text-muted-foreground", children: t('layout.appSwitcher.home') })] }), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { className: "gap-2 p-2", onClick: () => navigate(`/apps/${activeAppName}/create-app`), "data-testid": "add-app-btn", children: [_jsx("div", { className: "flex size-6 items-center justify-center rounded-md border bg-background", children: _jsx(Plus, { className: "size-4" }) }), _jsx("div", { className: "font-medium text-muted-foreground", children: t('layout.appSwitcher.addApp') })] }), _jsxs(DropdownMenuItem, { className: "gap-2 p-2", onClick: () => navigate(`/apps/${activeAppName}/edit-app/${activeAppName}`), "data-testid": "edit-app-btn", children: [_jsx("div", { className: "flex size-6 items-center justify-center rounded-md border bg-background", children: _jsx(Pencil, { className: "size-4" }) }), _jsx("div", { className: "font-medium text-muted-foreground", children: t('layout.appSwitcher.editApp') })] }), _jsxs(DropdownMenuItem, { className: "gap-2 p-2", onClick: () => navigate('/apps/setup/system/apps'), "data-testid": "manage-all-apps-btn", children: [_jsx("div", { className: "flex size-6 items-center justify-center rounded-md border bg-background", children: _jsx(Settings, { className: "size-4" }) }), _jsx("div", { className: "font-medium text-muted-foreground", children: t('layout.appSwitcher.manageAllApps') })] })] })] })) : (_jsxs(SidebarMenuButton, { size: "lg", onClick: () => navigate('/apps/setup'), "data-testid": "system-sidebar-header", children: [_jsx("div", { className: "flex aspect-square size-8 items-center justify-center rounded-lg bg-primary text-primary-foreground", children: _jsx(Settings, { className: "size-4" }) }), _jsxs("div", { className: "grid flex-1 text-left text-sm leading-tight", children: [_jsx("span", { className: "truncate font-semibold", children: t('layout.appSwitcher.systemConsole') }), _jsx("span", { className: "truncate text-xs text-muted-foreground", children: t('layout.appSwitcher.noAppsConfigured') })] })] })) }) }) }), _jsx(SidebarContent, { children: activeApp ? (_jsxs(_Fragment, { children: [areas.length > 1 && (_jsxs(SidebarGroup, { children: [_jsxs(SidebarGroupLabel, { className: "flex items-center gap-1.5", children: [_jsx(Layers, { className: "h-3.5 w-3.5" }), "Area"] }), _jsx(SidebarGroupContent, { children: _jsx(SidebarMenu, { children: areas.map((area) => {
+    }, [isWorkspaceAdmin, t]);
+    return (_jsxs(_Fragment, { children: [_jsxs(Sidebar, { collapsible: "icon", children: [_jsx(SidebarHeader, { children: _jsx(SidebarMenu, { children: _jsx(SidebarMenuItem, { children: activeApp ? (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(SidebarMenuButton, { size: "lg", className: "data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground", children: [_jsx("div", { className: "flex aspect-square size-8 items-center justify-center rounded-lg bg-primary text-primary-foreground", style: primaryColor ? { backgroundColor: primaryColor } : undefined, children: logo ? (_jsx("img", { src: logo, alt: resolveI18nLabel(activeApp.label, t), className: "size-6 object-contain" })) : (React.createElement(getIcon(activeApp.icon), { className: "size-4" })) }), _jsxs("div", { className: "grid flex-1 text-left text-sm leading-tight", children: [_jsx("span", { className: "truncate font-semibold", children: resolveI18nLabel(activeApp.label, t) }), _jsx("span", { className: "truncate text-xs", children: resolveI18nLabel(activeApp.description, t) || t('layout.appSwitcher.appsAvailable', { defaultValue: '{{count}} apps available', count: activeApps.length }) })] }), _jsx(ChevronsUpDown, { className: "ml-auto" })] }) }), _jsxs(DropdownMenuContent, { className: "w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg", align: "start", side: isMobile ? "bottom" : "right", sideOffset: 4, children: [_jsx(DropdownMenuLabel, { className: "text-xs text-muted-foreground", children: t('layout.appSwitcher.switchApplication', { defaultValue: 'Switch Application' }) }), activeApps.map((app) => (_jsxs(DropdownMenuItem, { onClick: () => onAppChange(appRouteSegment(app) ?? app.name), className: "gap-2 p-2", children: [_jsx("div", { className: "flex size-6 items-center justify-center rounded-sm border", children: app.icon ? React.createElement(getIcon(app.icon), { className: "size-3" }) : _jsx(Database, { className: "size-3" }) }), resolveI18nLabel(app.label, t), activeApp.name === app.name && _jsx("span", { className: "ml-auto text-xs", children: "\u2713" })] }, app.name))), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { className: "gap-2 p-2", onClick: () => navigate('/home'), "data-testid": "home-link-btn", children: [_jsx("div", { className: "flex size-6 items-center justify-center rounded-md border bg-background", children: _jsx(Home, { className: "size-4" }) }), _jsx("div", { className: "font-medium text-muted-foreground", children: t('layout.appSwitcher.home') })] }), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { className: "gap-2 p-2", onClick: () => navigate(`/apps/${appRouteSegment(activeApp) ?? activeAppName}/create-app`), "data-testid": "add-app-btn", children: [_jsx("div", { className: "flex size-6 items-center justify-center rounded-md border bg-background", children: _jsx(Plus, { className: "size-4" }) }), _jsx("div", { className: "font-medium text-muted-foreground", children: t('layout.appSwitcher.addApp') })] }), _jsxs(DropdownMenuItem, { className: "gap-2 p-2", onClick: () => navigate(`/apps/${appRouteSegment(activeApp) ?? activeAppName}/edit-app/${activeAppName}`), "data-testid": "edit-app-btn", children: [_jsx("div", { className: "flex size-6 items-center justify-center rounded-md border bg-background", children: _jsx(Pencil, { className: "size-4" }) }), _jsx("div", { className: "font-medium text-muted-foreground", children: t('layout.appSwitcher.editApp') })] }), _jsxs(DropdownMenuItem, { className: "gap-2 p-2", onClick: () => navigate('/apps/setup/system/apps'), "data-testid": "manage-all-apps-btn", children: [_jsx("div", { className: "flex size-6 items-center justify-center rounded-md border bg-background", children: _jsx(Settings, { className: "size-4" }) }), _jsx("div", { className: "font-medium text-muted-foreground", children: t('layout.appSwitcher.manageAllApps') })] })] })] })) : (_jsxs(SidebarMenuButton, { size: "lg", onClick: () => navigate('/apps/setup'), "data-testid": "system-sidebar-header", children: [_jsx("div", { className: "flex aspect-square size-8 items-center justify-center rounded-lg bg-primary text-primary-foreground", children: _jsx(Settings, { className: "size-4" }) }), _jsxs("div", { className: "grid flex-1 text-left text-sm leading-tight", children: [_jsx("span", { className: "truncate font-semibold", children: t('layout.appSwitcher.systemConsole') }), _jsx("span", { className: "truncate text-xs text-muted-foreground", children: t('layout.appSwitcher.noAppsConfigured') })] })] })) }) }) }), _jsx(SidebarContent, { children: activeApp ? (_jsxs(_Fragment, { children: [areas.length > 1 && (_jsxs(SidebarGroup, { children: [_jsxs(SidebarGroupLabel, { className: "flex items-center gap-1.5", children: [_jsx(Layers, { className: "h-3.5 w-3.5" }), t('sidebar.area', { defaultValue: 'Area' })] }), _jsx(SidebarGroupContent, { children: _jsx(SidebarMenu, { children: areas.map((area) => {
                                                     const AreaIcon = getIcon(area.icon);
                                                     const isActiveArea = area.id === activeAreaId;
                                                     return (_jsx(SidebarMenuItem, { children: _jsxs(SidebarMenuButton, { isActive: isActiveArea, tooltip: area.label, onClick: () => setActiveAreaId(area.id), children: [_jsx(AreaIcon, { className: "h-4 w-4" }), _jsx("span", { children: area.label })] }) }, area.id));
-                                                }) }) })] })), _jsx(SidebarGroup, { className: "py-0", children: _jsxs(SidebarGroupContent, { className: "relative", children: [_jsx(Search, { className: "pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-70" }), _jsx(SidebarInput, { placeholder: "Search navigation...", value: navSearchQuery, onChange: (e) => setNavSearchQuery(e.target.value), className: "pl-8" })] }) }), _jsx(NavigationRenderer, { items: processedNavigation, basePath: basePath, evaluateVisibility: evalVis, checkPermission: checkPerm, checkCapability: checkCap, searchQuery: navSearchQuery, enablePinning: true, onPinToggle: togglePin, enableReorder: true, onReorder: handleReorder, resolveObjectLabel: (objectName, fallback) => resolveNavObjectLabel({ name: objectName, label: fallback }), resolveViewLabel: (objectName, viewName, fallback) => resolveNavViewLabel(objectName, viewName, fallback), t: t }), recentItems.length > 0 && (_jsxs(SidebarGroup, { children: [_jsxs(SidebarGroupLabel, { className: "flex items-center gap-1.5 cursor-pointer select-none", onClick: () => setRecentExpanded(prev => !prev), children: [_jsx(ChevronRight, { className: `h-3 w-3 transition-transform duration-150 ${recentExpanded ? 'rotate-90' : ''}` }), _jsx(Clock, { className: "h-3.5 w-3.5" }), "Recent"] }), recentExpanded && (_jsx(SidebarGroupContent, { children: _jsx(SidebarMenu, { children: recentItems.slice(0, 5).map(item => (_jsx(SidebarMenuItem, { children: _jsx(SidebarMenuButton, { asChild: true, tooltip: item.label, children: _jsxs(Link, { to: item.href, children: [_jsx("span", { className: "text-muted-foreground", children: item.type === 'dashboard' ? '📊' : item.type === 'report' ? '📈' : '📄' }), _jsx("span", { className: "truncate", children: item.label })] }) }) }, item.id))) }) }))] })), favorites.some(f => f.type !== 'nav') && (_jsxs(SidebarGroup, { children: [_jsxs(SidebarGroupLabel, { className: "flex items-center gap-1.5", children: [_jsx(Star, { className: "h-3.5 w-3.5" }), "Favorites"] }), _jsx(SidebarGroupContent, { children: _jsx(SidebarMenu, { children: favorites.filter(f => f.type !== 'nav').slice(0, 8).map(item => (_jsxs(SidebarMenuItem, { children: [_jsx(SidebarMenuButton, { asChild: true, tooltip: item.label, children: _jsxs(Link, { to: item.href, children: [_jsx("span", { className: "text-muted-foreground", children: item.type === 'dashboard' ? '📊' : item.type === 'report' ? '📈' : item.type === 'page' ? '📄' : '📋' }), _jsx("span", { className: "truncate", children: item.label })] }) }), _jsx(SidebarMenuAction, { showOnHover: true, onClick: (e) => { e.stopPropagation(); removeFavorite(item.id); }, "aria-label": `Remove ${item.label} from favorites`, children: _jsx(StarOff, { className: "h-3 w-3" }) })] }, item.id))) }) })] }))] })) : (_jsxs(SidebarGroup, { "data-testid": "system-fallback-nav", children: [_jsxs(SidebarGroupLabel, { className: "flex items-center gap-1.5", children: [_jsx(Settings, { className: "h-3.5 w-3.5" }), "System"] }), _jsx(SidebarGroupContent, { children: _jsx(SidebarMenu, { children: systemFallbackNavigation.map((item) => {
+                                                }) }) })] })), contextSelectorsUI && (_jsx(SidebarGroup, { className: "py-1", children: _jsx(SidebarGroupContent, { children: contextSelectorsUI }) })), _jsx(SidebarGroup, { className: "py-0", children: _jsxs(SidebarGroupContent, { className: "relative", children: [_jsx(Search, { className: "pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-70" }), _jsx(SidebarInput, { placeholder: t('sidebar.searchNavigation', { defaultValue: 'Search navigation...' }), value: navSearchQuery, onChange: (e) => setNavSearchQuery(e.target.value), className: "pl-8" })] }) }), _jsx(NavigationRenderer, { items: processedNavigation, basePath: basePath, evaluateVisibility: evalVis, checkPermission: checkPerm, checkCapability: checkCap, searchQuery: navSearchQuery, enablePinning: true, onPinToggle: togglePin, enableReorder: true, onReorder: handleReorder, resolveObjectLabel: (objectName, fallback) => resolveNavObjectLabel({ name: objectName, label: fallback }), resolveViewLabel: (objectName, viewName, fallback) => resolveNavViewLabel(objectName, viewName, fallback), t: t, templateContext: { currentUserId: user?.id ?? null, contextValues } }), recentItems.length > 0 && (_jsxs(SidebarGroup, { children: [_jsxs(SidebarGroupLabel, { className: "flex items-center gap-1.5 cursor-pointer select-none", onClick: () => setRecentExpanded(prev => !prev), children: [_jsx(ChevronRight, { className: `h-3 w-3 transition-transform duration-150 ${recentExpanded ? 'rotate-90' : ''}` }), _jsx(Clock, { className: "h-3.5 w-3.5" }), t('sidebar.recent', { defaultValue: 'Recent' })] }), recentExpanded && (_jsx(SidebarGroupContent, { children: _jsx(SidebarMenu, { children: recentItems.slice(0, 5).map(item => (_jsx(SidebarMenuItem, { children: _jsx(SidebarMenuButton, { asChild: true, tooltip: item.label, children: _jsxs(Link, { to: item.href, children: [_jsx("span", { className: "text-muted-foreground", children: item.type === 'dashboard' ? '📊' : item.type === 'report' ? '📈' : '📄' }), _jsx("span", { className: "truncate", children: item.label })] }) }) }, item.id))) }) }))] })), favorites.some(f => f.type !== 'nav') && (_jsxs(SidebarGroup, { children: [_jsxs(SidebarGroupLabel, { className: "flex items-center gap-1.5", children: [_jsx(Star, { className: "h-3.5 w-3.5" }), t('sidebar.favorites', { defaultValue: 'Favorites' })] }), _jsx(SidebarGroupContent, { children: _jsx(SidebarMenu, { children: favorites.filter(f => f.type !== 'nav').slice(0, 8).map(item => (_jsxs(SidebarMenuItem, { children: [_jsx(SidebarMenuButton, { asChild: true, tooltip: item.label, children: _jsxs(Link, { to: item.href, children: [_jsx("span", { className: "text-muted-foreground", children: item.type === 'dashboard' ? '📊' : item.type === 'report' ? '📈' : item.type === 'page' ? '📄' : '📋' }), _jsx("span", { className: "truncate", children: item.label })] }) }), _jsx(SidebarMenuAction, { showOnHover: true, onClick: (e) => { e.stopPropagation(); removeFavorite(item.id); }, "aria-label": t('sidebar.removeFromFavorites', { defaultValue: 'Remove {{name}} from favorites', name: item.label }), children: _jsx(StarOff, { className: "h-3 w-3" }) })] }, item.id))) }) })] }))] })) : (_jsxs(SidebarGroup, { "data-testid": "system-fallback-nav", children: [_jsxs(SidebarGroupLabel, { className: "flex items-center gap-1.5", children: [_jsx(Settings, { className: "h-3.5 w-3.5" }), t('layout.appSwitcher.systemConsole', { defaultValue: 'System' })] }), _jsx(SidebarGroupContent, { children: _jsx(SidebarMenu, { children: systemFallbackNavigation.map((item) => {
                                             const NavIcon = getIcon(item.icon);
                                             return (_jsx(SidebarMenuItem, { children: _jsx(SidebarMenuButton, { asChild: true, tooltip: item.label, children: _jsxs(Link, { to: item.url || '/system', children: [_jsx(NavIcon, { className: "h-4 w-4" }), _jsx("span", { children: item.label })] }) }) }, item.id));
                                         }) }) })] })) }), _jsx(SidebarFooter, { children: _jsx(SidebarMenu, { children: _jsx(SidebarMenuItem, { children: _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(SidebarMenuButton, { size: "lg", className: "data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground", 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(ChevronsUpDown, { className: "ml-auto size-4" })] }) }), _jsxs(DropdownMenuContent, { className: "w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg", side: isMobile ? "bottom" : "right", align: "end", sideOffset: 4, children: [_jsx(DropdownMenuLabel, { className: "p-0 font-normal", children: _jsxs("div", { className: "flex items-center gap-2 px-1 py-1.5 text-left text-sm", 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, {}), _jsx(DropdownMenuGroup, { children: _jsxs(DropdownMenuItem, { onClick: () => navigate('/apps/setup'), children: [_jsx(Settings, { className: "mr-2 h-4 w-4" }), t('user.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' })] })] }))] })] }) }) }) })] }), isMobile && (_jsx("div", { className: "fixed bottom-0 left-0 right-0 z-50 flex items-center justify-around border-t bg-background/95 backdrop-blur-sm px-2 py-1 sm:hidden safe-area-bottom", children: (() => {
@@ -226,36 +234,8 @@ export function AppSidebar({ activeAppName, onAppChange }) {
                     }
                     return leaves.slice(0, 5).map((item) => {
                         const NavIcon = getIcon(item.icon);
-                        const baseUrl = activeApp ? `/apps/${activeAppName}` : '';
-                        let href = item.url || '#';
-                        if (item.type === 'object') {
-                            href = `${baseUrl}/${item.objectName}`;
-                            if (item.viewName)
-                                href += `/view/${item.viewName}`;
-                        }
-                        else if (item.type === 'dashboard')
-                            href = item.dashboardName ? `${baseUrl}/dashboard/${item.dashboardName}` : '#';
-                        else if (item.type === 'page')
-                            href = item.pageName ? `${baseUrl}/page/${item.pageName}` : '#';
-                        else if (item.type === 'component') {
-                            const ref = item.componentRef;
-                            if (ref) {
-                                const segs = ref.split(':').filter(Boolean);
-                                href = `${baseUrl}/component/${segs.join('/')}`;
-                                const navParams = item.params;
-                                if (navParams) {
-                                    const usp = new URLSearchParams();
-                                    for (const [k, v] of Object.entries(navParams)) {
-                                        if (v === undefined || v === null)
-                                            continue;
-                                        usp.set(k, typeof v === 'string' ? v : JSON.stringify(v));
-                                    }
-                                    const qs = usp.toString();
-                                    if (qs)
-                                        href += `?${qs}`;
-                                }
-                            }
-                        }
+                        const baseUrl = activeApp ? `/apps/${appRouteSegment(activeApp) ?? activeAppName}` : '';
+                        const { href } = resolveHref(item, baseUrl, { currentUserId: user?.id ?? null });
                         return (_jsxs(Link, { to: href, className: "flex flex-col items-center gap-0.5 px-2 py-1.5 text-muted-foreground hover:text-foreground transition-colors min-w-[44px] min-h-[44px] justify-center", children: [_jsx(NavIcon, { className: "h-5 w-5" }), _jsx("span", { className: "text-[10px] truncate max-w-[60px]", children: resolveI18nLabel(item.label, t) })] }, item.id));
                     });
                 })() }))] }));

package/dist/layout/AppSwitcher.d.ts

@@ -5,8 +5,9 @@
  * Renders as: [App Name] [ChevronDown] — minimal ghost trigger, no icon box.
  * @module
  */
+import * as React from 'react';
 export interface AppSwitcherProps {
     activeAppName: string;
     onAppChange: (name: string) => void;
 }
-export declare function AppSwitcher({ activeAppName, onAppChange }: AppSwitcherProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function AppSwitcher({ activeAppName, onAppChange }: AppSwitcherProps): React.JSX.Element | null;

package/dist/layout/AppSwitcher.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, } from '@object-ui/components';
 import { ChevronDown, Check } from 'lucide-react';
 import { useMetadata } from '../providers/MetadataProvider';
-import { resolveI18nLabel } from '../utils';
+import { resolveI18nLabel, matchAppBySegment, appRouteSegment } from '../utils';
 import { useObjectTranslation, useObjectLabel } from '@object-ui/i18n';
 import { getIcon } from '../utils/getIcon';
 export function AppSwitcher({ activeAppName, onAppChange }) {
@@ -10,15 +10,19 @@ export function AppSwitcher({ activeAppName, onAppChange }) {
     const { t } = useObjectTranslation();
     const { appLabel } = useObjectLabel();
     const apps = metadataApps || [];
-    const activeApps = apps.filter((a) => a.active !== false);
-    const activeApp = activeApps.find((a) => a.name === activeAppName) || activeApps[0];
+    // Hidden apps (App.hidden === true) live in the avatar dropdown
+    // (personal-settings-style surfaces like the Account app), not the
+    // top-level App Switcher.
+    const activeApps = apps.filter((a) => a.active !== false && a.hidden !== true);
+    // ADR-0048 (A) — route segment may be a package id; match by it (name fallback).
+    const activeApp = matchAppBySegment(activeApps, activeAppName) || matchAppBySegment(apps.filter((a) => a.active !== false), activeAppName) || activeApps[0];
     if (!activeApp)
         return null;
     const appLabelText = appLabel({ name: activeApp.name, label: resolveI18nLabel(activeApp.label, t) });
-    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs("button", { className: "flex items-center gap-1 rounded-md px-1.5 py-1 text-sm font-medium text-foreground/80 hover:bg-accent hover:text-foreground transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring max-w-[40vw] sm:max-w-none", children: [_jsx("span", { className: "truncate whitespace-nowrap", children: appLabelText }), _jsx(ChevronDown, { className: "h-3.5 w-3.5 text-muted-foreground shrink-0" })] }) }), _jsxs(DropdownMenuContent, { align: "start", sideOffset: 8, className: "w-60", children: [_jsx(DropdownMenuLabel, { className: "text-xs text-muted-foreground font-normal", children: "Switch Application" }), _jsx(DropdownMenuSeparator, {}), activeApps.map((app) => {
+    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs("button", { className: "flex items-center gap-1 rounded-md px-1.5 py-1 text-sm font-medium text-foreground/80 hover:bg-accent hover:text-foreground transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring max-w-[40vw] sm:max-w-none", children: [_jsx("span", { className: "truncate whitespace-nowrap", children: appLabelText }), _jsx(ChevronDown, { className: "h-3.5 w-3.5 text-muted-foreground shrink-0" })] }) }), _jsxs(DropdownMenuContent, { align: "start", sideOffset: 8, className: "w-60", children: [_jsx(DropdownMenuLabel, { className: "text-xs text-muted-foreground font-normal", children: t('layout.appSwitcher.switchApplication', { defaultValue: 'Switch Application' }) }), _jsx(DropdownMenuSeparator, {}), activeApps.map((app) => {
                         const AppIcon = getIcon(app.icon);
                         const label = appLabel({ name: app.name, label: resolveI18nLabel(app.label, t) });
                         const isActive = activeApp.name === app.name;
-                        return (_jsxs(DropdownMenuItem, { onClick: () => onAppChange(app.name), className: "flex items-center gap-2.5 py-2", children: [_jsx("div", { className: "flex size-5 shrink-0 items-center justify-center rounded border bg-muted text-muted-foreground", children: _jsx(AppIcon, { className: "size-3" }) }), _jsx("span", { className: "flex-1 truncate", children: label }), isActive && _jsx(Check, { className: "size-3.5 text-primary shrink-0" })] }, app.name));
+                        return (_jsxs(DropdownMenuItem, { onClick: () => onAppChange(appRouteSegment(app) ?? app.name), className: "flex items-center gap-2.5 py-2", children: [_jsx("div", { className: "flex size-5 shrink-0 items-center justify-center rounded border bg-muted text-muted-foreground", children: _jsx(AppIcon, { className: "size-3" }) }), _jsx("span", { className: "flex-1 truncate", children: label }), isActive && _jsx(Check, { className: "size-3.5 text-primary shrink-0" })] }, app.name));
                     })] })] }));
 }

package/dist/layout/AuthPageLayout.d.ts

@@ -6,4 +6,4 @@
 import type React from 'react';
 export declare function AuthPageLayout({ children }: {
     children: React.ReactNode;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;

package/dist/layout/ConnectionStatus.d.ts

@@ -10,5 +10,5 @@ interface ConnectionStatusProps {
     state: ConnectionState;
     className?: string;
 }
-export declare function ConnectionStatus({ state, className }: ConnectionStatusProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function ConnectionStatus({ state, className }: ConnectionStatusProps): import("react").JSX.Element | null;
 export {};

package/dist/layout/ConnectionStatus.js

@@ -9,15 +9,18 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useEffect } from 'react';
 import { cn } from '@object-ui/components';
 import { WifiOff, Loader2, CheckCircle2 } from 'lucide-react';
+import { useObjectTranslation } from '@object-ui/i18n';
 const statusConfig = {
-    connected: { label: 'Connected', color: 'text-green-500', icon: CheckCircle2 },
-    connecting: { label: 'Connecting...', color: 'text-yellow-500', icon: Loader2 },
-    reconnecting: { label: 'Reconnecting...', color: 'text-yellow-500', icon: Loader2 },
-    disconnected: { label: 'Disconnected', color: 'text-muted-foreground', icon: WifiOff },
-    error: { label: 'Connection Error', color: 'text-destructive', icon: WifiOff },
+    connected: { labelKey: 'topbar.connection.connected', defaultValue: 'Connected', color: 'text-green-500', icon: CheckCircle2 },
+    connecting: { labelKey: 'topbar.connection.connecting', defaultValue: 'Connecting...', color: 'text-yellow-500', icon: Loader2 },
+    reconnecting: { labelKey: 'topbar.connection.reconnecting', defaultValue: 'Reconnecting...', color: 'text-yellow-500', icon: Loader2 },
+    disconnected: { labelKey: 'topbar.connection.disconnected', defaultValue: 'Disconnected', color: 'text-muted-foreground', icon: WifiOff },
+    error: { labelKey: 'topbar.connection.error', defaultValue: 'Connection Error', color: 'text-destructive', icon: WifiOff },
 };
 export function ConnectionStatus({ state, className }) {
     const config = statusConfig[state];
+    const { t } = useObjectTranslation();
+    const label = t(config.labelKey, { defaultValue: config.defaultValue });
     const Icon = config.icon;
     const [showConnected, setShowConnected] = useState(false);
     // Briefly show "Connected" when transitioning to connected state
@@ -32,5 +35,5 @@ export function ConnectionStatus({ state, className }) {
     // Hide when connected (after the brief flash)
     if (state === 'connected' && !showConnected)
         return null;
-    return (_jsxs("div", { className: cn('flex items-center gap-1.5 text-xs font-medium px-2 py-1 rounded-md transition-opacity duration-300', config.color, state === 'connected' && 'bg-green-500/10', state === 'error' && 'bg-destructive/10', state === 'reconnecting' && 'bg-yellow-500/10', className), title: config.label, children: [_jsx(Icon, { className: cn('h-3.5 w-3.5', (state === 'connecting' || state === 'reconnecting') && 'animate-spin') }), _jsx("span", { className: "hidden sm:inline", children: config.label })] }));
+    return (_jsxs("div", { className: cn('flex items-center gap-1.5 text-xs font-medium px-2 py-1 rounded-md transition-opacity duration-300', config.color, state === 'connected' && 'bg-green-500/10', state === 'error' && 'bg-destructive/10', state === 'reconnecting' && 'bg-yellow-500/10', className), title: label, children: [_jsx(Icon, { className: cn('h-3.5 w-3.5', (state === 'connecting' || state === 'reconnecting') && 'animate-spin') }), _jsx("span", { className: "hidden sm:inline", children: label })] }));
 }

package/dist/layout/ConsoleChatbotFab.d.ts

@@ -1,3 +1,21 @@
+/**
+ * ConsoleChatbotFab
+ *
+ * Lightweight FAB proxy for the console's floating AI assistant.
+ *
+ * Before any interaction this component renders a small, zero-dependency
+ * button (~1KB). On first hover/focus it speculatively warms the heavy
+ * chat chunk graph (plugin-chatbot → streamdown → shiki → mermaid →
+ * @ai-sdk, ~20MB); on first click it lazy-mounts `<ConsoleFloatingChatbot
+ * defaultOpen />` which takes over (its own FAB replaces this stub).
+ *
+ * Net effect: every console page-load no longer pays the chat-bundle
+ * cost just for the FAB to be visible — those bytes only download when
+ * the user actually opens (or hovers) the assistant.
+ *
+ * @module
+ */
+import React from 'react';
 import type { ConsoleFloatingChatbotProps } from './ConsoleFloatingChatbot';
 export type ConsoleChatbotFabProps = ConsoleFloatingChatbotProps;
-export declare function ConsoleChatbotFab(props: ConsoleChatbotFabProps): import("react/jsx-runtime").JSX.Element;
+export declare function ConsoleChatbotFab(props: ConsoleChatbotFabProps): React.JSX.Element;

package/dist/layout/ConsoleChatbotFab.js

@@ -16,15 +16,29 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  *
  * @module
  */
-import { Suspense, lazy, useState } from 'react';
+import { Suspense, lazy, useEffect, useRef, useState } from 'react';
+import { useAssistant } from '../assistant/assistantBus';
+import { useObjectTranslation } from '@object-ui/i18n';
 const ConsoleFloatingChatbot = lazy(() => import('./ConsoleFloatingChatbot'));
 const prefetchChatbot = () => {
     void import('./ConsoleFloatingChatbot');
 };
 export function ConsoleChatbotFab(props) {
     const [armed, setArmed] = useState(false);
+    const { t } = useObjectTranslation();
+    // A designer surface can ask the assistant to open (e.g. an "Ask AI"
+    // button) via the assistant bus — arming the lazy chatbot just like a
+    // click does. Once armed, the chatbot's own trigger owns open/close.
+    const { openSeq } = useAssistant();
+    const seenOpenSeq = useRef(openSeq);
+    useEffect(() => {
+        if (openSeq !== seenOpenSeq.current) {
+            seenOpenSeq.current = openSeq;
+            setArmed(true);
+        }
+    }, [openSeq]);
     if (armed) {
         return (_jsx(Suspense, { fallback: null, children: _jsx(ConsoleFloatingChatbot, { ...props, defaultOpen: true }) }));
     }
-    return (_jsx("button", { type: "button", "aria-label": `Open ${props.appLabel} assistant`, onClick: () => setArmed(true), onMouseEnter: prefetchChatbot, onFocus: prefetchChatbot, className: "fixed bottom-6 right-6 z-50 flex h-14 w-14 items-center justify-center rounded-full bg-primary text-primary-foreground shadow-lg ring-1 ring-primary/20 transition-transform hover:scale-105 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2", children: _jsxs("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [_jsx("path", { d: "M12 3v3" }), _jsx("path", { d: "M12 18v3" }), _jsx("path", { d: "M5.6 5.6l2.1 2.1" }), _jsx("path", { d: "M16.3 16.3l2.1 2.1" }), _jsx("path", { d: "M3 12h3" }), _jsx("path", { d: "M18 12h3" }), _jsx("path", { d: "M5.6 18.4l2.1-2.1" }), _jsx("path", { d: "M16.3 7.7l2.1-2.1" }), _jsx("circle", { cx: "12", cy: "12", r: "3" })] }) }));
+    return (_jsx("button", { type: "button", "aria-label": t('topbar.openAssistant', { defaultValue: 'Open {{name}} assistant', name: props.appLabel }), onClick: () => setArmed(true), onMouseEnter: prefetchChatbot, onFocus: prefetchChatbot, className: "fixed bottom-20 right-6 z-50 flex h-14 w-14 items-center justify-center rounded-full bg-primary text-primary-foreground shadow-lg ring-1 ring-primary/20 transition-transform hover:scale-105 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 sm:bottom-6", "data-testid": "console-chatbot-fab", children: _jsxs("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [_jsx("path", { d: "M12 3v3" }), _jsx("path", { d: "M12 18v3" }), _jsx("path", { d: "M5.6 5.6l2.1 2.1" }), _jsx("path", { d: "M16.3 16.3l2.1 2.1" }), _jsx("path", { d: "M3 12h3" }), _jsx("path", { d: "M18 12h3" }), _jsx("path", { d: "M5.6 18.4l2.1-2.1" }), _jsx("path", { d: "M16.3 7.7l2.1-2.1" }), _jsx("circle", { cx: "12", cy: "12", r: "3" })] }) }));
 }

package/dist/layout/ConsoleFloatingChatbot.d.ts

@@ -1,17 +1,47 @@
+/**
+ * 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';
 interface ConsoleObject {
     name: string;
     label?: string;
 }
 export interface ConsoleFloatingChatbotProps {
     appLabel: string;
+    /**
+     * Machine name of the active app (e.g. "studio", "crm"). Forwarded as
+     * `context.appName` so the backend can scope skills/resolution to the
+     * current application surface.
+     */
+    appName?: 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. */
+    /**
+     * Agent the app is bound to (`app.defaultAgent`). When set, the chatbot
+     * opens straight onto this agent — Studio → `metadata_assistant`, every
+     * other app falls through to the platform data-query agent (`data_chat`).
+     */
     defaultAgent?: string;
+    /**
+     * Show the in-header agent switcher. Off by default: end users get the
+     * single agent bound to their app and never have to choose. Enable for
+     * power users / admins (or via `VITE_AI_SHOW_AGENT_PICKER`) when a
+     * surface genuinely exposes multiple agents.
+     */
+    showAgentPicker?: boolean;
     /** Whether the floating panel should open immediately on mount. */
     defaultOpen?: boolean;
     /**
@@ -21,5 +51,5 @@ export interface ConsoleFloatingChatbotProps {
      */
     userId?: string;
 }
-export default function ConsoleFloatingChatbot({ appLabel, objects, apiBase: apiBaseProp, defaultAgent: defaultAgentProp, defaultOpen, userId, }: ConsoleFloatingChatbotProps): import("react/jsx-runtime").JSX.Element;
+export default function ConsoleFloatingChatbot({ appLabel, appName, objects, apiBase: apiBaseProp, defaultAgent: defaultAgentProp, showAgentPicker: showAgentPickerProp, defaultOpen, userId, }: ConsoleFloatingChatbotProps): React.JSX.Element;
 export {};