@nsxbet/admin-sdk 0.5.0 → 0.6.0

package/dist/shell/AdminShell.js

@@ -1,11 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState, useEffect, useMemo, useCallback } from "react";
-import { BrowserRouter, Routes, Route, useNavigate } from "react-router-dom";
+import { useState, useEffect, useMemo, useCallback, useRef } from "react";
+import { BrowserRouter, Routes, Route, useNavigate, useLocation } from "react-router-dom";
 import { I18nextProvider } from "react-i18next";
 import { TopBar } from "./components/TopBar";
 import { LeftNav } from "./components/LeftNav";
 import { MainContent } from "./components/MainContent";
 import { CommandPalette } from "./components/CommandPalette";
+import { UpdateBanner } from "./components/UpdateBanner";
 import { ThemeProvider } from "./components/theme-provider";
 import { ModuleOverview } from "./components/ModuleOverview";
 import { ProfilePage } from "./components/ProfilePage";
@@ -13,13 +14,33 @@ import { SettingsPage } from "./components/SettingsPage";
 import { RegistryPage } from "./components/RegistryPage";
 import { HomePage } from "./components/HomePage";
 import { AuthProvider, useAuthContext } from "../components/AuthProvider";
-import { createInMemoryAuthClient } from "../auth/client/in-memory";
+import { createInMemoryAuthClient, createMockUsersFromRoles, } from "../auth/client/in-memory";
 import { createKeycloakAuthClient } from "../auth/client/keycloak";
 import { createInMemoryRegistryClient } from "../registry/client/in-memory";
+import { createCachedCatalog } from "../registry/cache/cached-catalog";
+import { DevtoolsPanel } from "./components/DevtoolsPanel";
+import { RegistryStatusBanner } from "./components/RegistryStatusBanner";
+import { RegistryUnavailable } from "./components/RegistryUnavailable";
+import { useRegistryPolling } from "../registry/useRegistryPolling";
 import { DynamicModule } from "../router/DynamicModule";
 import { SidebarProvider, SidebarInset } from "@nsxbet/admin-ui";
 import { initTelemetry, track, trackError } from "./telemetry";
 import { initI18n, saveLocale, isSupportedLocale, i18n } from "../i18n";
+import { resolvePollingInterval } from "./polling-config";
+const TIMEZONE_STORAGE_KEY = "admin-timezone-mode";
+function getStoredTimezoneMode() {
+    if (typeof window === "undefined")
+        return "local";
+    const stored = localStorage.getItem(TIMEZONE_STORAGE_KEY);
+    if (stored === "utc" || stored === "local")
+        return stored;
+    return "local";
+}
+function saveTimezoneMode(mode) {
+    if (typeof window !== "undefined") {
+        localStorage.setItem(TIMEZONE_STORAGE_KEY, mode);
+    }
+}
 /**
  * Convert AdminModuleManifest to Module for internal use
  */
@@ -27,9 +48,7 @@ function manifestToModule(manifest, baseUrl) {
     return {
         id: manifest.id,
         title: manifest.title,
-        titleKey: manifest.titleKey,
-        description: manifest.description || "",
-        descriptionKey: manifest.descriptionKey,
+        description: manifest.description,
         category: manifest.category || "Modules",
         routeBase: manifest.routeBase,
         baseUrl: baseUrl || "",
@@ -42,16 +61,23 @@ function manifestToModule(manifest, baseUrl) {
             team: manifest.owners?.team || "Platform",
             supportChannel: manifest.owners?.supportChannel || "",
         },
-        status: manifest.status || "active",
-        navOrder: manifest.navOrder,
+        status: "active",
+        navigationOrder: manifest.navigationOrder,
         icon: manifest.icon,
+        navigation: manifest.navigation ? {
+            style: manifest.navigation.style,
+            sections: manifest.navigation.sections?.map(s => ({
+                id: s.id,
+                label: s.label,
+            })),
+        } : undefined,
         commands: manifest.commands?.map((cmd) => ({
             id: cmd.id,
             title: cmd.title,
-            titleKey: cmd.titleKey,
             route: cmd.route,
             icon: cmd.icon,
             keywords: cmd.keywords,
+            section: cmd.section,
         })),
     };
 }
@@ -62,9 +88,7 @@ function catalogModuleToModule(m) {
     return {
         id: m.id,
         title: m.title,
-        titleKey: m.titleKey,
         description: m.description,
-        descriptionKey: m.descriptionKey,
         category: m.category,
         routeBase: m.routeBase,
         baseUrl: m.baseUrl,
@@ -72,20 +96,36 @@ function catalogModuleToModule(m) {
         permissions: m.permissions,
         owners: m.owners,
         status: m.status,
-        navOrder: m.navOrder,
+        navigationOrder: m.navigationOrder,
         icon: m.icon,
+        navigation: m.navigation ? {
+            style: m.navigation.style,
+            sections: m.navigation.sections?.map(s => ({
+                id: s.id,
+                label: s.title,
+            })),
+        } : undefined,
         commands: m.commands?.map(cmd => ({
-            ...cmd,
-            titleKey: cmd.titleKey,
+            id: cmd.id,
+            title: cmd.title,
+            route: cmd.route,
+            icon: cmd.icon,
+            keywords: cmd.keywords,
+            section: cmd.section,
         })),
     };
 }
 /**
  * Inner shell component that has access to React Router hooks
  */
-function ShellContent({ modules, children, environment, locale, onLocaleChange, onSearchClick, catalog, commandPaletteOpen, onCommandPaletteChange, apiUrl, registryClient, isStandaloneMode, }) {
+function ShellContent({ modules, children, environment, locale, onLocaleChange, onSearchClick, catalog, commandPaletteOpen, onCommandPaletteChange, apiUrl, registryClient, isStandaloneMode, cacheStatus, onRetry, hasUpdates, onDismissUpdate, localeCallbacksRef, timezoneMode, onTimezoneToggle, timezoneCallbacksRef, }) {
     const navigate = useNavigate();
+    const location = useLocation();
     const auth = useAuthContext();
+    const [moduleBreadcrumbs, setModuleBreadcrumbs] = useState(null);
+    useEffect(() => {
+        setModuleBreadcrumbs(null);
+    }, [location.pathname]);
     // Set up the platform API for modules to use
     useEffect(() => {
         const platformAPI = {
@@ -94,10 +134,9 @@ function ShellContent({ modules, children, environment, locale, onLocaleChange,
             auth: {
                 getAccessToken: auth.getAccessToken,
                 hasPermission: auth.hasPermission,
-                getUser: () => auth.user || { id: "", email: "", displayName: "" },
+                getUser: () => auth.user || { id: "", email: "", displayName: "", roles: [] },
                 logout: () => {
                     auth.logout();
-                    // Navigate to root after logout (for Keycloak, this will redirect)
                     navigate("/");
                 },
             },
@@ -105,17 +144,29 @@ function ShellContent({ modules, children, environment, locale, onLocaleChange,
                 navigate: (path) => {
                     navigate(path);
                 },
-                setBreadcrumbs: (_items) => {
-                    // Breadcrumbs are managed by MainContent based on route
+                setBreadcrumbs: (items) => {
+                    setModuleBreadcrumbs(items.length > 0 ? items : null);
                 },
             },
             i18n: {
                 locale: locale,
                 setLocale: onLocaleChange,
                 onLocaleChange: (callback) => {
-                    // Simple implementation - just call callback immediately with current locale
+                    localeCallbacksRef.current.add(callback);
                     callback(locale);
-                    return () => { }; // Return unsubscribe function
+                    return () => { localeCallbacksRef.current.delete(callback); };
+                },
+            },
+            timestamp: {
+                mode: timezoneMode,
+                setMode: (mode) => {
+                    saveTimezoneMode(mode);
+                    timezoneCallbacksRef.current.forEach(cb => cb(mode));
+                },
+                onModeChange: (callback) => {
+                    timezoneCallbacksRef.current.add(callback);
+                    callback(timezoneMode);
+                    return () => { timezoneCallbacksRef.current.delete(callback); };
                 },
             },
             telemetry: {
@@ -123,7 +174,6 @@ function ShellContent({ modules, children, environment, locale, onLocaleChange,
                 trackError: trackError,
             },
             fetch: async (input, init) => {
-                // Add auth token to requests
                 const token = await auth.getAccessToken();
                 const headers = new Headers(init?.headers);
                 headers.set("Authorization", `Bearer ${token}`);
@@ -134,7 +184,7 @@ function ShellContent({ modules, children, environment, locale, onLocaleChange,
         return () => {
             delete window.__ADMIN_PLATFORM_API__;
         };
-    }, [environment, locale, navigate, onLocaleChange, auth]);
+    }, [environment, locale, navigate, onLocaleChange, auth, timezoneMode]);
     // Load initial sidebar state from localStorage
     const getInitialSidebarState = () => {
         try {
@@ -160,11 +210,15 @@ function ShellContent({ modules, children, environment, locale, onLocaleChange,
             // Ignore
         }
     };
-    return (_jsxs(_Fragment, { children: [_jsxs(SidebarProvider, { open: sidebarOpen, onOpenChange: handleSidebarChange, children: [_jsx(LeftNav, { modules: modules }), _jsxs(SidebarInset, { className: "flex flex-col", children: [_jsx(TopBar, { onSearchClick: onSearchClick, environment: environment, locale: locale, onLocaleChange: onLocaleChange }), _jsxs(Routes, { children: [_jsx(Route, { path: "/", element: _jsx(MainContent, { modules: modules, children: _jsx(HomePage, {}) }) }), _jsx(Route, { path: "/_profile", element: _jsx(MainContent, { modules: modules, children: _jsx(ProfilePage, {}) }) }), _jsx(Route, { path: "/_settings", element: _jsx(MainContent, { modules: modules, children: _jsx(SettingsPage, {}) }) }), _jsx(Route, { path: "/_registry", element: _jsx(MainContent, { modules: modules, children: _jsx(RegistryPage, { apiUrl: apiUrl, registryClient: registryClient }) }) }), _jsx(Route, { path: "/_modules/*", element: _jsx(MainContent, { modules: modules, children: _jsx(ModuleOverview, { modules: modules }) }) }), isStandaloneMode
+    return (_jsxs(_Fragment, { children: [hasUpdates && (_jsx(UpdateBanner, { onReload: () => window.location.reload(), onDismiss: onDismissUpdate })), _jsxs(SidebarProvider, { open: sidebarOpen, onOpenChange: handleSidebarChange, children: [_jsx(LeftNav, { modules: modules }), _jsxs(SidebarInset, { className: "flex flex-col", children: [_jsx(TopBar, { onSearchClick: onSearchClick, environment: environment, locale: locale, onLocaleChange: onLocaleChange, timezoneMode: timezoneMode, onTimezoneToggle: onTimezoneToggle }), cacheStatus.state !== "fresh" && cacheStatus.state !== "unavailable" && (_jsx("div", { className: "px-4 pt-2", children: _jsx(RegistryStatusBanner, { status: cacheStatus, onRetry: onRetry }) })), _jsxs(Routes, { children: [_jsx(Route, { path: "/", element: _jsx(MainContent, { modules: modules, moduleBreadcrumbs: moduleBreadcrumbs, children: _jsx(HomePage, {}) }) }), _jsx(Route, { path: "/_profile", element: _jsx(MainContent, { modules: modules, moduleBreadcrumbs: moduleBreadcrumbs, children: _jsx(ProfilePage, {}) }) }), _jsx(Route, { path: "/_settings", element: _jsx(MainContent, { modules: modules, moduleBreadcrumbs: moduleBreadcrumbs, children: _jsx(SettingsPage, {}) }) }), _jsx(Route, { path: "/_registry", element: _jsx(MainContent, { modules: modules, moduleBreadcrumbs: moduleBreadcrumbs, children: _jsx(RegistryPage, { apiUrl: apiUrl, registryClient: registryClient }) }) }), _jsx(Route, { path: "/_modules/*", element: _jsx(MainContent, { modules: modules, moduleBreadcrumbs: moduleBreadcrumbs, children: _jsx(ModuleOverview, { modules: modules }) }) }), isStandaloneMode
                                         ? // Standalone mode: render children (module is imported directly)
-                                            modules.map((module) => (_jsx(Route, { path: `${module.routeBase}/*`, element: _jsx(MainContent, { modules: modules, children: children }) }, module.id)))
+                                            modules.map((module) => (_jsx(Route, { path: `${module.routeBase}/*`, element: _jsx(MainContent, { modules: modules, moduleBreadcrumbs: moduleBreadcrumbs, children: children }) }, module.id)))
                                         : // Shell mode: load modules dynamically via React.lazy
-                                            modules.map((module) => (_jsx(Route, { path: `${module.routeBase}/*`, element: _jsx(MainContent, { modules: modules, children: module.baseUrl ? (_jsx(DynamicModule, { baseUrl: module.baseUrl })) : (_jsxs("div", { className: "text-muted-foreground", children: ["Module ", module.id, " has no baseUrl configured"] })) }) }, module.id))), _jsx(Route, { path: "*", element: _jsx(MainContent, { modules: modules, children: isStandaloneMode ? children : null }) })] })] })] }), _jsx(CommandPalette, { open: commandPaletteOpen, onOpenChange: onCommandPaletteChange, catalog: catalog })] }));
+                                            modules.map((module) => (_jsx(Route, { path: `${module.routeBase}/*`, element: _jsx(MainContent, { modules: modules, moduleBreadcrumbs: moduleBreadcrumbs, children: module.baseUrl ? (_jsx(DynamicModule, { baseUrl: module.baseUrl, moduleInfo: {
+                                                            id: module.id,
+                                                            title: module.title,
+                                                            owners: module.owners,
+                                                        } })) : (_jsxs("div", { className: "text-muted-foreground", children: ["Module ", module.id, " has no baseUrl configured"] })) }) }, module.id))), _jsx(Route, { path: "*", element: _jsx(MainContent, { modules: modules, moduleBreadcrumbs: moduleBreadcrumbs, children: isStandaloneMode ? children : null }) })] })] })] }), _jsx(CommandPalette, { open: commandPaletteOpen, onOpenChange: onCommandPaletteChange, catalog: catalog }), _jsx(DevtoolsPanel, { environment: environment, modules: modules, catalogVersion: catalog.version, catalogGeneratedAt: catalog.generatedAt, registryMode: registryClient ? "api" : "in-memory", cacheStatus: cacheStatus })] }));
 }
 export function AdminShell({ modules: manifests = [], children, keycloak, authClient: providedAuthClient, registryClient, apiUrl, inMemoryRegistry = true, environment = "local", }) {
     const [commandPaletteOpen, setCommandPaletteOpen] = useState(false);
@@ -174,13 +228,29 @@ export function AdminShell({ modules: manifests = [], children, keycloak, authCl
         return i18n.language || "pt-BR";
     });
     const [apiModules, setApiModules] = useState([]);
+    const [initialCatalogVersion, setInitialCatalogVersion] = useState("");
+    const [catalogGeneratedAt, setCatalogGeneratedAt] = useState("");
     const [isLoading, setIsLoading] = useState(!!registryClient);
+    const [cacheStatus, setCacheStatus] = useState({ state: 'fresh' });
+    const [cachedCatalogOps, setCachedCatalogOps] = useState(null);
+    const localeCallbacksRef = useRef(new Set());
+    const timezoneCallbacksRef = useRef(new Set());
+    const [timezoneMode, setTimezoneMode] = useState(getStoredTimezoneMode);
+    const handleTimezoneToggle = useCallback(() => {
+        setTimezoneMode((prev) => {
+            const next = prev === "utc" ? "local" : "utc";
+            saveTimezoneMode(next);
+            timezoneCallbacksRef.current.forEach(cb => cb(next));
+            return next;
+        });
+    }, []);
     // Handle locale change - update both state and i18next
     const handleLocaleChange = useCallback((newLocale) => {
         if (isSupportedLocale(newLocale)) {
             i18n.changeLanguage(newLocale);
             saveLocale(newLocale);
             setLocale(newLocale);
+            localeCallbacksRef.current.forEach(cb => cb(newLocale));
         }
     }, []);
     // Sync locale state with i18next language changes
@@ -200,17 +270,50 @@ export function AdminShell({ modules: manifests = [], children, keycloak, authCl
         if (providedAuthClient) {
             return providedAuthClient;
         }
+        const isProd = import.meta.env.PROD === true;
+        const mockAuthExplicit = import.meta.env.VITE_MOCK_AUTH === 'true';
+        const noAuthConfig = !keycloak;
+        // Production guard: require auth config unless explicitly opted in
+        if (typeof window !== 'undefined' &&
+            isProd &&
+            noAuthConfig &&
+            !mockAuthExplicit) {
+            throw new Error('[AdminShell] Authentication configuration is required in production. ' +
+                'Provide authClient or keycloak prop, or set VITE_MOCK_AUTH=true to explicitly opt in to mock auth.');
+        }
         // Check if we should use mock auth
         const useMockAuth = typeof window !== 'undefined' &&
-            (import.meta.env.VITE_MOCK_AUTH === 'true' || !keycloak);
+            (mockAuthExplicit || noAuthConfig);
         if (useMockAuth) {
-            // Create default mock users with wildcard permissions for shell development
-            return createInMemoryAuthClient({
-                users: [
-                    { id: 'admin-user', email: 'admin@example.com', displayName: 'Admin User', roles: ['*'] },
-                    { id: 'viewer-user', email: 'viewer@example.com', displayName: 'Viewer User', roles: [] },
+            if (isProd && mockAuthExplicit) {
+                console.warn('[AdminShell] Mock auth is active in production build (VITE_MOCK_AUTH=true). ' +
+                    'Use real authentication (Keycloak) for production deployments.');
+            }
+            // Default mock users with explicit roles for tasks and users modules
+            const defaultMockUsers = createMockUsersFromRoles({
+                admin: [
+                    'admin.tasks.view',
+                    'admin.tasks.edit',
+                    'admin.tasks.delete',
+                    'admin.users.view',
+                    'admin.users.edit',
+                    'admin.users.delete',
+                    'admin.platform.view',
+                    'admin.platform.edit',
+                    'admin.platform.delete',
+                ],
+                editor: [
+                    'admin.tasks.view',
+                    'admin.tasks.edit',
+                    'admin.users.view',
+                    'admin.users.edit',
+                    'admin.platform.view',
+                    'admin.platform.edit',
                 ],
+                viewer: ['admin.tasks.view', 'admin.users.view', 'admin.platform.view'],
+                noAccess: [],
             });
+            return createInMemoryAuthClient({ users: defaultMockUsers, gatewayUrl: import.meta.env.VITE_ADMIN_GATEWAY_URL });
         }
         // Use Keycloak
         return createKeycloakAuthClient({
@@ -239,27 +342,30 @@ export function AdminShell({ modules: manifests = [], children, keycloak, authCl
             });
         }
     }, [registryClient, inMemoryRegistry, manifests]);
-    // Fetch modules from registry client (modules load via React.lazy)
+    // Fetch modules from registry client with LKG caching (modules load via React.lazy)
     useEffect(() => {
         if (!registryClient) {
             setIsLoading(false);
             return;
         }
         let mounted = true;
+        const cached = createCachedCatalog(registryClient.catalog);
+        setCachedCatalogOps(cached);
         async function fetchModules() {
             try {
-                // Fetch catalog
-                const catalog = await registryClient.catalog.get();
+                const catalog = await cached.get();
                 if (!mounted)
                     return;
-                // Convert catalog modules to Module type for UI
                 const modules = catalog.modules.map(catalogModuleToModule);
                 setApiModules(modules);
+                setCacheStatus(cached.getStatus());
+                setInitialCatalogVersion(catalog.version);
+                setCatalogGeneratedAt(catalog.generatedAt);
                 setIsLoading(false);
             }
-            catch (error) {
-                console.error("[Shell] Failed to fetch modules from API:", error);
+            catch {
                 if (mounted) {
+                    setCacheStatus(cached.getStatus());
                     setIsLoading(false);
                 }
             }
@@ -275,14 +381,26 @@ export function AdminShell({ modules: manifests = [], children, keycloak, authCl
     }, [manifests]);
     // Use API modules if registry client is provided, otherwise use manifest modules
     const modules = registryClient ? apiModules : manifestModules;
-    // Create catalog for command palette
+    // Resolve polling interval (0 = disabled)
+    const pollingInterval = useMemo(() => {
+        if (!registryClient || !initialCatalogVersion)
+            return 0;
+        return resolvePollingInterval(environment);
+    }, [registryClient, initialCatalogVersion, environment]);
+    // Poll for catalog version changes
+    const { hasUpdates, dismiss: dismissUpdate } = useRegistryPolling({
+        registryClient: registryClient,
+        initialVersion: initialCatalogVersion,
+        interval: pollingInterval,
+    });
+    // Create catalog for command palette and devtools
     const catalog = useMemo(() => {
         return {
-            version: "1.0.0",
-            generatedAt: new Date().toISOString(),
+            version: initialCatalogVersion || "1.0.0",
+            generatedAt: catalogGeneratedAt || new Date().toISOString(),
             modules: modules,
         };
-    }, [modules]);
+    }, [modules, initialCatalogVersion, catalogGeneratedAt]);
     // Keyboard shortcut for command palette
     useEffect(() => {
         const handleKeyDown = (e) => {
@@ -297,9 +415,26 @@ export function AdminShell({ modules: manifests = [], children, keycloak, authCl
     const handleSearchClick = useCallback(() => {
         setCommandPaletteOpen(true);
     }, []);
+    const handleRetry = useCallback(async () => {
+        if (!cachedCatalogOps)
+            return;
+        try {
+            const catalog = await cachedCatalogOps.retry();
+            const modules = catalog.modules.map(catalogModuleToModule);
+            setApiModules(modules);
+            setCacheStatus(cachedCatalogOps.getStatus());
+        }
+        catch {
+            setCacheStatus(cachedCatalogOps.getStatus());
+        }
+    }, [cachedCatalogOps]);
     // Show loading state while fetching from API
     if (isLoading) {
         return (_jsx("div", { className: "flex h-screen items-center justify-center", children: _jsx("div", { className: "text-muted-foreground", children: "Loading modules..." }) }));
     }
-    return (_jsx(BrowserRouter, { children: _jsx(I18nextProvider, { i18n: i18n, children: _jsx(ThemeProvider, { children: _jsx(AuthProvider, { authClient: authClient, children: _jsx(ShellContent, { modules: modules, environment: environment, locale: locale, onLocaleChange: handleLocaleChange, onSearchClick: handleSearchClick, catalog: catalog, commandPaletteOpen: commandPaletteOpen, onCommandPaletteChange: setCommandPaletteOpen, apiUrl: apiUrl, registryClient: registryClient, isStandaloneMode: isStandaloneMode, children: children }) }) }) }) }));
+    // Registry completely unavailable (no cache, no API)
+    if (cacheStatus.state === "unavailable") {
+        return (_jsx(BrowserRouter, { children: _jsx(I18nextProvider, { i18n: i18n, children: _jsx(ThemeProvider, { children: _jsx(RegistryUnavailable, { onRetry: handleRetry }) }) }) }));
+    }
+    return (_jsx(BrowserRouter, { children: _jsx(I18nextProvider, { i18n: i18n, children: _jsx(ThemeProvider, { children: _jsx(AuthProvider, { authClient: authClient, children: _jsx(ShellContent, { modules: modules, environment: environment, locale: locale, onLocaleChange: handleLocaleChange, onSearchClick: handleSearchClick, catalog: catalog, commandPaletteOpen: commandPaletteOpen, onCommandPaletteChange: setCommandPaletteOpen, apiUrl: apiUrl, registryClient: registryClient, isStandaloneMode: isStandaloneMode, cacheStatus: cacheStatus, onRetry: handleRetry, hasUpdates: hasUpdates, onDismissUpdate: dismissUpdate, localeCallbacksRef: localeCallbacksRef, timezoneMode: timezoneMode, onTimezoneToggle: handleTimezoneToggle, timezoneCallbacksRef: timezoneCallbacksRef, children: children }) }) }) }) }));
 }

package/dist/shell/BackofficeShell.d.ts

@@ -35,4 +35,3 @@ export interface AdminShellProps {
     environment?: string;
 }
 export declare function AdminShell({ modules: manifests, children, keycloak, authClient: providedAuthClient, registryClient, apiUrl, inMemoryRegistry, environment, }: AdminShellProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=BackofficeShell.d.ts.map

package/dist/shell/BackofficeShell.js

@@ -12,10 +12,12 @@ import { ProfilePage } from "./components/ProfilePage";
 import { SettingsPage } from "./components/SettingsPage";
 import { RegistryPage } from "./components/RegistryPage";
 import { HomePage } from "./components/HomePage";
+import { DevtoolsPanel } from "./components/DevtoolsPanel";
 import { AuthProvider, useAuthContext } from "../components/AuthProvider";
 import { createInMemoryAuthClient } from "../auth/client/in-memory";
 import { createKeycloakAuthClient } from "../auth/client/keycloak";
 import { createInMemoryRegistryClient } from "../registry/client/in-memory";
+import { createCachedCatalog } from "../registry/cache/cached-catalog";
 import { DynamicModule } from "../router/DynamicModule";
 import { SidebarProvider, SidebarInset } from "@nsxbet/admin-ui";
 import { initTelemetry, track, trackError } from "./telemetry";
@@ -27,9 +29,7 @@ function manifestToModule(manifest, baseUrl) {
     return {
         id: manifest.id,
         title: manifest.title,
-        titleKey: manifest.titleKey,
-        description: manifest.description || "",
-        descriptionKey: manifest.descriptionKey,
+        description: manifest.description,
         category: manifest.category || "Modules",
         routeBase: manifest.routeBase,
         baseUrl: baseUrl || "",
@@ -42,16 +42,23 @@ function manifestToModule(manifest, baseUrl) {
             team: manifest.owners?.team || "Platform",
             supportChannel: manifest.owners?.supportChannel || "",
         },
-        status: manifest.status || "active",
-        navOrder: manifest.navOrder,
+        status: "active",
+        navigationOrder: manifest.navigationOrder,
         icon: manifest.icon,
+        navigation: manifest.navigation ? {
+            style: manifest.navigation.style,
+            sections: manifest.navigation.sections?.map(s => ({
+                id: s.id,
+                label: s.label,
+            })),
+        } : undefined,
         commands: manifest.commands?.map((cmd) => ({
             id: cmd.id,
             title: cmd.title,
-            titleKey: cmd.titleKey,
             route: cmd.route,
             icon: cmd.icon,
             keywords: cmd.keywords,
+            section: cmd.section,
         })),
     };
 }
@@ -62,9 +69,7 @@ function catalogModuleToModule(m) {
     return {
         id: m.id,
         title: m.title,
-        titleKey: m.titleKey,
         description: m.description,
-        descriptionKey: m.descriptionKey,
         category: m.category,
         routeBase: m.routeBase,
         baseUrl: m.baseUrl,
@@ -72,18 +77,29 @@ function catalogModuleToModule(m) {
         permissions: m.permissions,
         owners: m.owners,
         status: m.status,
-        navOrder: m.navOrder,
+        navigationOrder: m.navigationOrder,
         icon: m.icon,
+        navigation: m.navigation ? {
+            style: m.navigation.style,
+            sections: m.navigation.sections?.map(s => ({
+                id: s.id,
+                label: s.title,
+            })),
+        } : undefined,
         commands: m.commands?.map(cmd => ({
-            ...cmd,
-            titleKey: cmd.titleKey,
+            id: cmd.id,
+            title: cmd.title,
+            route: cmd.route,
+            icon: cmd.icon,
+            keywords: cmd.keywords,
+            section: cmd.section,
         })),
     };
 }
 /**
  * Inner shell component that has access to React Router hooks
  */
-function ShellContent({ modules, children, environment, locale, onLocaleChange, onSearchClick, catalog, commandPaletteOpen, onCommandPaletteChange, apiUrl, registryClient, isStandaloneMode, }) {
+function ShellContent({ modules, children, environment, locale, onLocaleChange, onSearchClick, catalog, commandPaletteOpen, onCommandPaletteChange, apiUrl, registryClient, isStandaloneMode, cacheStatus, }) {
     const navigate = useNavigate();
     const auth = useAuthContext();
     // Set up the platform API for modules to use
@@ -94,7 +110,7 @@ function ShellContent({ modules, children, environment, locale, onLocaleChange,
             auth: {
                 getAccessToken: auth.getAccessToken,
                 hasPermission: auth.hasPermission,
-                getUser: () => auth.user || { id: "", email: "", displayName: "" },
+                getUser: () => auth.user || { id: "", email: "", displayName: "", roles: [] },
                 logout: () => {
                     auth.logout();
                     // Navigate to root after logout (for Keycloak, this will redirect)
@@ -113,9 +129,16 @@ function ShellContent({ modules, children, environment, locale, onLocaleChange,
                 locale: locale,
                 setLocale: onLocaleChange,
                 onLocaleChange: (callback) => {
-                    // Simple implementation - just call callback immediately with current locale
                     callback(locale);
-                    return () => { }; // Return unsubscribe function
+                    return () => { };
+                },
+            },
+            timestamp: {
+                mode: "local",
+                setMode: () => { },
+                onModeChange: (callback) => {
+                    callback("local");
+                    return () => { };
                 },
             },
             telemetry: {
@@ -164,7 +187,11 @@ function ShellContent({ modules, children, environment, locale, onLocaleChange,
                                         ? // Standalone mode: render children (module is imported directly)
                                             modules.map((module) => (_jsx(Route, { path: `${module.routeBase}/*`, element: _jsx(MainContent, { modules: modules, children: children }) }, module.id)))
                                         : // Shell mode: load modules dynamically via React.lazy
-                                            modules.map((module) => (_jsx(Route, { path: `${module.routeBase}/*`, element: _jsx(MainContent, { modules: modules, children: module.baseUrl ? (_jsx(DynamicModule, { baseUrl: module.baseUrl })) : (_jsxs("div", { className: "text-muted-foreground", children: ["Module ", module.id, " has no baseUrl configured"] })) }) }, module.id))), _jsx(Route, { path: "*", element: _jsx(MainContent, { modules: modules, children: isStandaloneMode ? children : null }) })] })] })] }), _jsx(CommandPalette, { open: commandPaletteOpen, onOpenChange: onCommandPaletteChange, catalog: catalog })] }));
+                                            modules.map((module) => (_jsx(Route, { path: `${module.routeBase}/*`, element: _jsx(MainContent, { modules: modules, children: module.baseUrl ? (_jsx(DynamicModule, { baseUrl: module.baseUrl, moduleInfo: {
+                                                            id: module.id,
+                                                            title: module.title,
+                                                            owners: module.owners,
+                                                        } })) : (_jsxs("div", { className: "text-muted-foreground", children: ["Module ", module.id, " has no baseUrl configured"] })) }) }, module.id))), _jsx(Route, { path: "*", element: _jsx(MainContent, { modules: modules, children: isStandaloneMode ? children : null }) })] })] })] }), _jsx(CommandPalette, { open: commandPaletteOpen, onOpenChange: onCommandPaletteChange, catalog: catalog }), _jsx(DevtoolsPanel, { environment: environment, modules: modules, catalogVersion: catalog.version, catalogGeneratedAt: catalog.generatedAt, registryMode: registryClient ? "api" : "in-memory", cacheStatus: cacheStatus })] }));
 }
 export function AdminShell({ modules: manifests = [], children, keycloak, authClient: providedAuthClient, registryClient, apiUrl, inMemoryRegistry = true, environment = "local", }) {
     const [commandPaletteOpen, setCommandPaletteOpen] = useState(false);
@@ -175,6 +202,9 @@ export function AdminShell({ modules: manifests = [], children, keycloak, authCl
     });
     const [apiModules, setApiModules] = useState([]);
     const [isLoading, setIsLoading] = useState(!!registryClient);
+    const [cacheStatus, setCacheStatus] = useState({ state: 'fresh' });
+    const [catalogGeneratedAt, setCatalogGeneratedAt] = useState("");
+    const [catalogVersion, setCatalogVersion] = useState("");
     // Handle locale change - update both state and i18next
     const handleLocaleChange = useCallback((newLocale) => {
         if (isSupportedLocale(newLocale)) {
@@ -210,6 +240,7 @@ export function AdminShell({ modules: manifests = [], children, keycloak, authCl
                     { id: 'admin-user', email: 'admin@example.com', displayName: 'Admin User', roles: ['*'] },
                     { id: 'viewer-user', email: 'viewer@example.com', displayName: 'Viewer User', roles: [] },
                 ],
+                gatewayUrl: import.meta.env.VITE_ADMIN_GATEWAY_URL,
             });
         }
         // Use Keycloak
@@ -239,27 +270,30 @@ export function AdminShell({ modules: manifests = [], children, keycloak, authCl
             });
         }
     }, [registryClient, inMemoryRegistry, manifests]);
-    // Fetch modules from registry client (modules load via React.lazy)
+    // Fetch modules from registry client with LKG caching (modules load via React.lazy)
     useEffect(() => {
         if (!registryClient) {
             setIsLoading(false);
             return;
         }
         let mounted = true;
+        const cached = createCachedCatalog(registryClient.catalog);
         async function fetchModules() {
             try {
-                // Fetch catalog
-                const catalog = await registryClient.catalog.get();
+                const catalog = await cached.get();
                 if (!mounted)
                     return;
-                // Convert catalog modules to Module type for UI
                 const modules = catalog.modules.map(catalogModuleToModule);
                 setApiModules(modules);
+                setCacheStatus(cached.getStatus());
+                setCatalogVersion(catalog.version);
+                setCatalogGeneratedAt(catalog.generatedAt);
                 setIsLoading(false);
             }
             catch (error) {
                 console.error("[Shell] Failed to fetch modules from API:", error);
                 if (mounted) {
+                    setCacheStatus(cached.getStatus());
                     setIsLoading(false);
                 }
             }
@@ -275,14 +309,14 @@ export function AdminShell({ modules: manifests = [], children, keycloak, authCl
     }, [manifests]);
     // Use API modules if registry client is provided, otherwise use manifest modules
     const modules = registryClient ? apiModules : manifestModules;
-    // Create catalog for command palette
+    // Create catalog for command palette and devtools
     const catalog = useMemo(() => {
         return {
-            version: "1.0.0",
-            generatedAt: new Date().toISOString(),
+            version: catalogVersion || "1.0.0",
+            generatedAt: catalogGeneratedAt || new Date().toISOString(),
             modules: modules,
         };
-    }, [modules]);
+    }, [modules, catalogVersion, catalogGeneratedAt]);
     // Keyboard shortcut for command palette
     useEffect(() => {
         const handleKeyDown = (e) => {
@@ -301,5 +335,5 @@ export function AdminShell({ modules: manifests = [], children, keycloak, authCl
     if (isLoading) {
         return (_jsx("div", { className: "flex h-screen items-center justify-center", children: _jsx("div", { className: "text-muted-foreground", children: "Loading modules..." }) }));
     }
-    return (_jsx(BrowserRouter, { children: _jsx(I18nextProvider, { i18n: i18n, children: _jsx(ThemeProvider, { children: _jsx(AuthProvider, { authClient: authClient, children: _jsx(ShellContent, { modules: modules, environment: environment, locale: locale, onLocaleChange: handleLocaleChange, onSearchClick: handleSearchClick, catalog: catalog, commandPaletteOpen: commandPaletteOpen, onCommandPaletteChange: setCommandPaletteOpen, apiUrl: apiUrl, registryClient: registryClient, isStandaloneMode: isStandaloneMode, children: children }) }) }) }) }));
+    return (_jsx(BrowserRouter, { children: _jsx(I18nextProvider, { i18n: i18n, children: _jsx(ThemeProvider, { children: _jsx(AuthProvider, { authClient: authClient, children: _jsx(ShellContent, { modules: modules, environment: environment, locale: locale, onLocaleChange: handleLocaleChange, onSearchClick: handleSearchClick, catalog: catalog, commandPaletteOpen: commandPaletteOpen, onCommandPaletteChange: setCommandPaletteOpen, apiUrl: apiUrl, registryClient: registryClient, isStandaloneMode: isStandaloneMode, cacheStatus: cacheStatus, children: children }) }) }) }) }));
 }

package/dist/shell/components/CommandPalette.d.ts

@@ -5,4 +5,3 @@ export interface CommandPaletteProps {
     catalog: Catalog | null;
 }
 export declare function CommandPalette({ open, onOpenChange, catalog, }: CommandPaletteProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=CommandPalette.d.ts.map