@nocobase/app-template-default 1.0.0-beta.86 → 1.0.0-beta.88

package/.agents/rules/notification-templates.md

@@ -0,0 +1,5 @@
+# Notification template administration
+
+When notification business is used, register the real scenarios alongside their shared sending renderers and deliver the read-only template directory with synthetic preview. Read the installed Notification Skill’s `references/template-directory.md` for registration, safety and coverage requirements. The app-owned `NotificationManagementProvider` projects only `client.notificationTemplates.invitationConfigured` from the same channel selector used by Users sending and the directory. Default's runtime route factory calls `includeNotificationTemplateRoutes` with that bootstrap flag; a configured invitation mailer (including a configured but disabled legacy channel) is real business use. No transport configuration enters the browser. Restart after changing server mailer configuration. The helper reuses `notificationManagement` and preserves existing log children, paths and grants; when integrating a richer settings module container, insert `notificationTemplateRoute` into its template view once. Preserve the host's settings navigation container. The template page permission and API permission are both `page:notification.templates/access`; grant it only to intended administrators. Default does not register unused business settings. Examples registers task assignment/update and Users invitation scenarios.
+
+For an existing application, follow the installed upgrade Skill’s version-selected workflow and `references/notification-template-upgrade.md`. Reconcile source, dependency ranges and Skills; retain custom templates, workflows, grants and data. Updating packages alone does not insert or update application pages.

package/.agents/rules/shell.md

@@ -12,7 +12,7 @@ The route-tree provider remembers each visited ancestor's query while its descen
 
 `client/layouts/components/layout-header.tsx` is a presentation container accepting children. The sidebar is shadcn's Sidebar: `components/app-sidebar.tsx` wraps its provider, desktop icon mode and phone sheet, and `components/navigation-menu.tsx` draws the permission-filtered route tree with `SidebarMenu*`: a top-level group with no page of its own is a section, its entries always shown under a `SidebarGroupLabel` heading, while clickable parents and nested groups are controlled `Collapsible` sub-menus, and an item `client/lib/navigation-transform.ts` marks `section` deeper in the tree is a heading over its direct links inside that menu; a count beside an entry, such as unread items, is passed by the App layout in `NavigationMenu`'s `badges`, keyed by route name. Keep `client/components/ui/sidebar.tsx` as the shadcn CLI writes it except for removing its unused origin-wide `sidebar_state` cookie write; persistence belongs to the application-scoped preference. Customize from outside: widths go through the provider's `style` in spacing units, the phone sheet is rendered in `app-sidebar.tsx` with a translated title, and the provider's Ctrl/Cmd+B shortcut is stopped at `document`. The App layout owns menus, branding, permissions and redirects. Desktop icon mode hides top-level section headings and keeps their entries' icons, shows leaf labels as zero-delay tooltips and opens groups in hover and keyboard-focus popovers, preserving filtered navigation, parent-page links, nested groups and the selected group's highlight. Keep this behavior aligned across layouts. Desktop collapse state is shared through `useSidebarPreference` at `nocobase:sidebar:collapsed:app:<basename>` across layouts and tabs of the same application. `createApp(runtime)` provides a stable store using `runtime.basename`, with only empty/root and boundary slashes normalized; paths and case remain intact. Missing new keys default to expanded without migrating the old shared preference; whether the phone sheet is open stays local to each layout.
 
-The header carries no Settings or Inbox entry. An application has no separate settings area: a page that configures something is an ordinary route in `client/routes.ts` with `navigation`, placed in the sidebar like any other page, for example under a Settings navigation group. The `/inbox` page declares no navigation; give it an entry where the application wants one.
+The header carries no Settings or Inbox entry, and there is no separate settings layout. A page that configures something is an ordinary route in `client/routes.ts` registered into System settings: the `settings` group (`client/pages/settings/shell-routes.ts`) with its `settingsHome` page and category groups. `client/lib/navigation-transform.ts` folds that group into one sidebar entry opening the home, which stays selected on every page below it; the home (`client/pages/settings/settings-home.tsx`) shows the modules a viewer may open as cards by category, and `SettingsModulePage` turns the pages of a module group into URL-backed tabs. Both read the shell's single page permission check through `RouteTreeProvider`'s `access`. See [System settings navigation](../skills/nocobase-app-development/references/settings-navigation.md). The `/inbox` page declares no navigation; give it an entry where the application wants one.
 
 `client/lib/navigation-transform.ts` is the application-owned hook for customizing the permission-filtered navigation tree. The shared sidebar supports static section labels with direct links as well as collapsible groups.
 
@@ -20,9 +20,11 @@ Navigation groups retain their expanded or collapsed state while the navigation
 
 ## Account menu and session
 
+Theme lives in the account menu as a submenu beside Language, rather than a separate header action. `client/theme/theme-settings.tsx` renders menu radio groups for color mode and theme preset; the existing theme providers own selection, persistence and restoration. Keep it inside `DropdownMenuContent` for pointer, touch and keyboard navigation.
+
 The account menu checks Better Auth sign-out results before refreshing the session and shows a localized error toast for API or network failures. Preserve this behavior when upgrading the shell; navigation alone does not revoke a session.
 
-The authorization provider clears the permission snapshot before rendering a new session. Route navigation and page guards subscribe to the authorization revision; preserve these checks when customizing the shell so account changes and permission updates take effect without a reload. Pending checks hide protected content, and failed checks deny access.
+The authorization provider clears the permission snapshot before rendering a new session. Route navigation and page guards subscribe to the authorization revision; preserve these checks when customizing the shell so account changes and permission updates take effect without a reload. Keep `RouteLeaveBoundary` in `AppLayout`, outside all page Activities including nested routes, so `useSettingsLeave` navigation guards, confirmation UI and `beforeunload` survive permission checks. Clear retained guards on denial and session changes. Restored Activity Effects re-run existing data requests. Pending checks hide protected content with React Activity while retaining drafts; failed checks unmount it and deny access. Body portals must detach in an Effect cleanup so they also disappear while the page is hidden; use `BodyPortal` from `#components/body-portal` for application-owned content mounted on `document.body`.
 
 The account menu language control in `client/layouts/components/language-switcher.tsx` uses a shadcn submenu with radio items. Render it inside `DropdownMenuContent` to preserve menu keyboard navigation and selection semantics.
 

package/AGENTS.md

@@ -57,7 +57,7 @@ A feature with a page and an API touches five places: a migration for the table,
 
 ## System settings are part of feature delivery
 
-A bare create-app shows Home to signed-in users and System settings → App foundation only to unrestricted administrators. The Foundation plugin owns this initial settings group; the navigation transform merges its entry into the application settings group when business administration is registered. As the application develops business capabilities, inspect its current state on every iteration and automatically register the prepared Users and Roles and permissions contribution from `client/pages/settings/routes.ts` once in `client/routes.ts`; preserve it and reconcile missing management surfaces on every iteration, without a first-build flag or one-time setup stage. Whenever an application adds lifecycles, workflows, approvals, notifications, files or other configurable capabilities, automatically include their real administration surfaces without requiring a second user request. Follow [system settings delivery](.agents/skills/nocobase-app-development/references/system-settings.md); in particular, every used process includes a definitions directory, standard diagram, supported parameters and authorized execution history. Do not add demo plugins or empty settings for unused capabilities. The template preinstalls `#components/lifecycle-diagram` (React Flow + ELK) and `client/extensions/nocobase-workflow-management/`: use them by default, preserve their visuals unless the user explicitly requests another style, and connect authorized parameter bindings through `LifecycleDiagram.configuration` to the real editor. These are UI Registry sources; an npm package lookup is not a component availability check.
+A bare create-app shows Home to signed-in users and, only to unrestricted administrators, one System settings entry whose home page holds the App foundation card. Every administration surface joins that structure — one sidebar entry, a home of cards by category, tabs inside a module — as [System settings navigation](.agents/skills/nocobase-app-development/references/settings-navigation.md) describes; never add another sidebar entry for administration. As the application develops business capabilities, inspect its current state on every iteration and automatically register the prepared Users and Permission management contribution from `client/pages/settings/routes.ts` once in `client/routes.ts`; preserve it and reconcile missing management surfaces on every iteration, without a first-build flag or one-time setup stage. Whenever an application adds lifecycles, workflows, approvals, notifications, files or other configurable capabilities, automatically include their real administration surfaces without requiring a second user request. Follow [system settings delivery](.agents/skills/nocobase-app-development/references/system-settings.md); in particular, every used process includes a definitions directory, standard diagram, supported parameters and authorized execution history. Do not add demo plugins or empty settings for unused capabilities. The template preinstalls `#components/lifecycle-diagram` (React Flow + ELK) and `client/extensions/nocobase-workflow-management/`: use them by default, preserve their visuals unless the user explicitly requests another style, and connect authorized parameter bindings through `LifecycleDiagram.configuration` to the real editor. These are UI Registry sources; an npm package lookup is not a component availability check.
 
 ## Rules that apply everywhere
 
@@ -138,3 +138,5 @@ Standard Repository writes require an operation key through the registered submi
 Assign application business roles to explicitly identified users through the prepared User management role-assignment UI. Never seed a business permission set onto `authenticated:*`, broaden the inherited platform `member` role, or write startup reconciliation that grants access to everyone merely to make a feature usable. Unchecked actions in one role do not revoke grants inherited from another. If the user explicitly requests a global default role, first deliver a permission-protected administration control that shows its recipients and allows changing or removing the assignment; show inherited roles and their source in user access details. Without that UI, use explicit user assignments and explain the limitation. Keep page access independent from business operations.
 
 Run `pnpm exec vitest run tests/server/authorization-assignment-safety.test.ts` after permission initialization changes and before delivery. It boots the real application on an isolated database and inspects initialized wildcard assignments and the inherited member role. Keep this test in generated applications. An intentional global default requires explicit user authorization, a working administration surface and corresponding acceptance tests before deliberately updating the expected baseline; do not delete, skip or loosen the guard to make tests pass. Test an ordinary user with only the configured role: inspect all effective grant sources and verify both hidden buttons and rejected direct API calls.
+
+For notification business, follow [notification template delivery](.agents/rules/notification-templates.md), including source-owned scenario registration and synthetic-only preview.

package/README.MD

@@ -139,11 +139,11 @@ The three files named `runtime.ts`, `plugins.ts`, and `routes.ts` are compositio
 
 ### Everyday development
 
-| Script             | What it does                                                                         |
-| ------------------ | ------------------------------------------------------------------------------------ |
-| `pnpm dev`         | Start the API server and client with hot reload                                      |
-| `pnpm build`       | Build the client and server into `dist/`                                             |
-| `pnpm start`       | Run the built server; requires `pnpm build` first                                    |
+| Script             | What it does                                                                                                                    |
+| ------------------ | ------------------------------------------------------------------------------------------------------------------------------- |
+| `pnpm dev`         | Start the API server and client with hot reload                                                                                 |
+| `pnpm build`       | Build the client and server into `dist/`                                                                                        |
+| `pnpm start`       | Run the built server; requires `pnpm build` first                                                                               |
 | `pnpm build --tar` | Build, then pack `dist/`, `config.example.yml` and the `Dockerfile` with its `.dockerignore` into `storage/exports/dist.tar.gz` |
 
 ### Database
@@ -453,3 +453,9 @@ Set `NOCOBASE_STRICT_STARTUP=true` when running `pnpm dev` or `pnpm start` in au
 ## Internal workspace packages
 
 The application can also be the root of a pnpm workspace, with internal packages under `packages/*` and the existing `client/`, `server/` and `database/` directories unchanged. New projects receive this workspace pattern automatically. Internal packages use `workspace:*` dependencies and may remain private. Run installation, development and deployment builds from the application root; `pnpm check` includes the internal packages' own checks. See [internal packages](.agents/rules/workspace.md) for configuration and development conventions.
+
+### Registration feedback
+
+Password registration signs in new accounts by default (`auth.emailAndPassword.autoSignIn: true` in `server/config/auth.ts` and `config.example.yml`). An existing email returns an explicit error, exposing whether that email is registered. For enumeration protection, explicitly set `autoSignIn: false` and configure email verification with a sender or `onExistingUserSignUp` to notify the email owner. Existing explicit overrides remain effective; no configuration migration is performed. The authentication plugin warns at startup about registration with auto sign-in disabled and neither verification nor an existing-user notification.
+
+The registration page treats `usePasswordRegistration().isSuccess` as request acceptance only. A refreshed session navigates signed-in users into the application. Visitors who remain signed out see neutral sign-in and recovery guidance, without an account-creation or email-delivery promise. Applications customizing this page must keep that distinction.

package/client/components/body-portal.tsx

@@ -0,0 +1,25 @@
+import {
+  useLayoutEffect,
+  useState,
+  type ReactElement,
+  type ReactNode,
+} from 'react';
+import { createPortal } from 'react-dom';
+
+export interface BodyPortalProps {
+  readonly children: ReactNode;
+}
+
+/** Detach body content when its page is hidden by Activity, retaining its React state for the next permission result. */
+export function BodyPortal({ children }: BodyPortalProps): ReactElement {
+  const [container] = useState(() => {
+    const element = document.createElement('div');
+    element.style.display = 'contents';
+    return element;
+  });
+  useLayoutEffect(() => {
+    document.body.append(container);
+    return () => container.remove();
+  }, [container]);
+  return createPortal(children, container);
+}

package/client/components/breadcrumbs.tsx

@@ -19,6 +19,7 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from '#components/ui/dropdown-menu';
+import { settingsHomeRoute } from '#lib/navigation-transform';
 import { cn } from 'cn';
 
 import {
@@ -60,6 +61,18 @@ export function Breadcrumbs({
     trail.flatMap((entry): PageBreadcrumbLevel[] => {
       const title = routeLevelTitle(entry);
       if (title === undefined || denied?.has(routeKey(entry.route))) return [];
+      // The settings group links to its home page, the way back from any settings module.
+      const home = settingsHomeRoute(entry.route);
+      if (home)
+        return [
+          {
+            label: t(title, {
+              ns: entry.route.packageName,
+              defaultValue: title,
+            }),
+            to: { pathname: home.path, search: searches.get(home.path) ?? '' },
+          },
+        ];
       return [
         {
           label: t(title, {

package/client/components/flow-diagram.tsx

@@ -8,7 +8,7 @@ import {
   type ReactElement,
   type ReactNode,
 } from 'react';
-import { createPortal } from 'react-dom';
+import { BodyPortal } from './body-portal.js';
 import {
   BaseEdge,
   Controls,
@@ -934,7 +934,7 @@ export function FlowDiagram({
       )}
     </div>
   );
-  return expanded ? createPortal(canvas, document.body) : canvas;
+  return expanded ? <BodyPortal>{canvas}</BodyPortal> : canvas;
 }
 
 /** View controls belong inside React Flow so they always use this canvas's viewport. */

package/client/extensions/nocobase-file-component-ui/components/previewers/file-preview-content.tsx

@@ -158,7 +158,7 @@ function ImagePreview(inputProps: {
     <img
       src={url}
       alt={file.filename}
-      className='max-h-[70vh] max-w-full object-contain'
+      className='mx-auto block max-h-[70vh] max-w-full object-contain'
       onError={() => setFailedUrl(url)}
     />
   );

package/client/layouts/app-layout.tsx

@@ -1,5 +1,5 @@
 import { useSyncServerLocale } from '@nocobase/app-plugin-i18n/client';
-import type { ReactElement } from 'react';
+import { useMemo, type ReactElement } from 'react';
 import type { AppClientRegisteredRoute } from '@nocobase/app-client/plugins';
 import { Outlet, useLocation } from 'react-router';
 
@@ -7,6 +7,7 @@ import { BrandWatermark } from '#components/brand-watermark';
 import { Breadcrumbs } from '#components/breadcrumbs';
 
 import { RouteTreeProvider } from '../routing/route-context.js';
+import { RouteLeaveBoundary } from '../routing/route-leave-boundary.js';
 
 import { PageBreadcrumbProvider } from '@nocobase/app-client';
 import { useTranslation } from '@nocobase/i18n/client';
@@ -34,7 +35,8 @@ export function AppLayout({ routes }: AppLayoutProps): ReactElement {
   useSyncServerLocale();
 
   const { t } = useTranslation();
-  const { items: menuItems, denied } = useRouteNavigation(routes);
+  const { items: menuItems, denied, loading } = useRouteNavigation(routes);
+  const access = useMemo(() => ({ denied, loading }), [denied, loading]);
   const selectedKey = selectedNavigationId(
     routes,
     useLocation().pathname,
@@ -46,7 +48,7 @@ export function AppLayout({ routes }: AppLayoutProps): ReactElement {
 
   return (
     // The shell owns the business route tree used by its pages and navigation.
-    <RouteTreeProvider routes={routes}>
+    <RouteTreeProvider routes={routes} access={access}>
       <PageBreadcrumbProvider>
         <AppSidebarProvider>
           <AppSidebar label={navigationLabel} footer={<AppSidebarFooter />}>
@@ -74,7 +76,9 @@ export function AppLayout({ routes }: AppLayoutProps): ReactElement {
               {/* main only positions; the page scrolls in here, so a child page layer laid over main is neither
             moved by the page's scrolling nor stretched by its height. */}
               <div className='h-full overflow-y-auto'>
-                <Outlet />
+                <RouteLeaveBoundary hidden={loading}>
+                  <Outlet />
+                </RouteLeaveBoundary>
               </div>
             </main>
           </div>

package/client/layouts/components/header-actions.tsx

@@ -1,7 +1,6 @@
 import type { ReactElement } from 'react';
 import { TooltipProvider } from '#components/ui/tooltip';
 
-import { ThemeSettings } from '../../theme/index.js';
 import { UserMenu } from './user-menu.js';
 
 /** The header's right-hand actions, shared by every authenticated page. */
@@ -9,7 +8,6 @@ export function HeaderActions(): ReactElement {
   return (
     <TooltipProvider>
       <div className='flex shrink-0 items-center gap-2'>
-        <ThemeSettings />
         <UserMenu />
       </div>
     </TooltipProvider>

package/client/layouts/components/sidebar-footer.tsx

@@ -12,8 +12,8 @@ import {
 } from '#components/ui/tooltip';
 
 /**
- * The application's sidebar footer: the NocoBase slogan's two lines, then the template's name and its version, each
- * on its own line. In icon mode only the shield remains, and a tooltip carries the same text.
+ * The application's sidebar footer: the NocoBase slogan's two lines, then the application's version.
+ * In icon mode only the shield remains, and a tooltip carries the same text.
  */
 export function AppSidebarFooter(): ReactElement {
   const { t } = useTranslation();
@@ -21,16 +21,15 @@ export function AppSidebarFooter(): ReactElement {
   const iconOnly = state === 'collapsed' && !isMobile;
   // Published by the server from the application's package.json.
   const publicConfig = useClientApplication().config.public;
-  const templateName = publicConfig.get('app.displayName', 'Default Template');
   const templateVersion = publicConfig.get('app.version', '0.0.0');
   const versionLabel = `v${templateVersion}`;
-  const buildFreely = t('shell.buildFreely', {
-    defaultValue: 'AI builds freely.',
-  });
   // The tooltip and the icon's accessible name have no link, so the brand's markup is dropped there.
-  const reliability = t('shell.reliability', {
-    defaultValue: '<brand>NocoBase</brand> keeps it reliable.',
+  const brandPartnership = t('shell.brandPartnership', {
+    defaultValue: 'AI + <brand>NocoBase</brand>',
   }).replace(/<\/?brand>/g, '');
+  const buildReliableSystems = t('shell.buildReliableSystems', {
+    defaultValue: 'Build reliable business systems',
+  });
 
   const brandLink = (
     <a
@@ -53,7 +52,7 @@ export function AppSidebarFooter(): ReactElement {
               <span
                 aria-label={
                   iconOnly
-                    ? `${buildFreely} ${reliability} ${templateName} ${versionLabel}`
+                    ? `${brandPartnership} ${buildReliableSystems} ${versionLabel}`
                     : undefined
                 }
                 className='flex h-5 shrink-0 items-center rounded-sm text-sidebar-foreground/80 outline-none focus-visible:ring-2 focus-visible:ring-sidebar-ring'
@@ -69,35 +68,29 @@ export function AppSidebarFooter(): ReactElement {
             hidden={!iconOnly}
             side='right'
           >
-            <span className='font-medium'>{buildFreely}</span>
-            <span>{reliability}</span>
-            <span className='mt-1 opacity-70'>
-              {templateName} {versionLabel}
-            </span>
+            <span className='font-medium'>{brandPartnership}</span>
+            <span>{buildReliableSystems}</span>
+            <span className='mt-1 opacity-70'>{versionLabel}</span>
           </TooltipContent>
         </Tooltip>
         <div className='min-w-0 flex-1 group-data-[collapsible=icon]:hidden'>
           <p className='font-medium text-balance text-sidebar-foreground'>
-            {buildFreely}
-          </p>
-          <p className='text-balance text-muted-foreground'>
             <Trans
               t={t}
-              i18nKey='shell.reliability'
-              defaults='<brand>NocoBase</brand> keeps it reliable.'
+              i18nKey='shell.brandPartnership'
+              defaults='AI + <brand>NocoBase</brand>'
               components={{ brand: brandLink }}
             >
-              {brandLink} keeps it reliable.
+              AI + {brandLink}
             </Trans>
           </p>
-          {/* Name and version stay on one line each; a long name is cut off, with the whole name as its title. */}
+          <p className='text-balance text-muted-foreground'>
+            {buildReliableSystems}
+          </p>
           <p
             className='mt-1 truncate text-muted-foreground'
-            title={templateName}
+            title={versionLabel}
           >
-            {templateName}
-          </p>
-          <p className='truncate text-muted-foreground' title={versionLabel}>
             {versionLabel}
           </p>
         </div>

package/client/layouts/components/user-menu.tsx

@@ -1,5 +1,5 @@
 import { useAuthenticationErrorResolver } from '@nocobase/app-plugin-authentication/client/actions';
-import { useToaster } from '@nocobase/app-client';
+import { getAvatarInitials, useToaster } from '@nocobase/app-client';
 import { useTranslation } from '@nocobase/i18n/client';
 import { useAuthentication } from '@nocobase/app-plugin-authentication/client';
 import { LogOut, UserRound } from 'lucide-react';
@@ -13,6 +13,7 @@ import {
   DropdownMenuTrigger,
 } from '#components/ui/dropdown-menu';
 
+import { ThemeSettings } from '../../theme/index.js';
 import { LanguageSwitcher } from './language-switcher.js';
 
 export function UserMenu(): ReactElement {
@@ -39,7 +40,9 @@ export function UserMenu(): ReactElement {
     identity?.fullName ||
     identity?.email ||
     t('account.fallback', { defaultValue: 'Account' });
-  const initials = getInitials(name);
+  const initials = getAvatarInitials(name, {
+    cjk: Boolean(identity?.fullName),
+  });
 
   return (
     <DropdownMenu>
@@ -74,6 +77,7 @@ export function UserMenu(): ReactElement {
         </div>
         <DropdownMenuSeparator />
         <LanguageSwitcher />
+        <ThemeSettings />
         <DropdownMenuSeparator />
         <DropdownMenuItem
           disabled={isLoggingOut}
@@ -120,14 +124,3 @@ export function UserMenu(): ReactElement {
     </DropdownMenu>
   );
 }
-
-function getInitials(name: string): string {
-  const words = name.trim().split(/\s+/).filter(Boolean);
-  if (words.length === 0) {
-    return '?';
-  }
-  return words
-    .slice(0, 2)
-    .map((word) => word[0]?.toUpperCase() ?? '')
-    .join('');
-}

package/client/lib/navigation-transform.ts

@@ -1,36 +1,170 @@
 import { groupFoundationNavigation } from '@nocobase/app-plugin-foundation/client';
+import type { AppClientRegisteredRoute } from '@nocobase/app-client/plugins';
 import type { RouteNavigationItem } from '../routing/route-navigation.js';
 
+/**
+ * The settings route group: one sidebar entry opening its home page. Its direct child groups are categories on that
+ * page, the entries inside a category are modules (one card each), and the pages of a module group are its tabs.
+ */
+export const SETTINGS_GROUP = 'settings';
+/** The settings home page, a navigation-less child of the settings group. */
+export const SETTINGS_HOME = 'settingsHome';
+/** The category a module registered directly under the settings group is shown in. */
+export const SETTINGS_FALLBACK_CATEGORY = 'settingsSystem';
+
+/**
+ * Application-owned navigation structure, before the sidebar folds the settings group into one entry. `routes` is the
+ * registered tree the permission-filtered `items` came from.
+ */
+export function organizeNavigation(
+  items: RouteNavigationItem[],
+  routes: readonly AppClientRegisteredRoute[],
+): RouteNavigationItem[] {
+  return groupFoundationNavigation(
+    withSettingsGroup(items, routes),
+    SETTINGS_GROUP,
+  );
+}
+
 /** Application-owned navigation customization, applied after permission filtering. */
 export function transformNavigation(
   items: RouteNavigationItem[],
+  routes: readonly AppClientRegisteredRoute[],
 ): RouteNavigationItem[] {
-  return groupFoundationNavigation(collapsePermissionNavigation(items));
+  return collapseSettingsNavigation(organizeNavigation(items, routes));
 }
 
-/** One sidebar entry opens the first readable tab; original routes and guards remain unchanged. */
-export function collapsePermissionNavigation(
+/**
+ * Permission filtering drops a group with nothing visible in it, which the settings group is until a module joins it.
+ * Keep it in place so a plugin's settings entry, such as App Foundation, still has a group to join.
+ */
+function withSettingsGroup(
   items: RouteNavigationItem[],
+  routes: readonly AppClientRegisteredRoute[],
 ): RouteNavigationItem[] {
-  return items.map((item) => {
-    if (item.route.name !== 'permissionManagement')
-      return {
-        ...item,
-        children: collapsePermissionNavigation([...item.children]),
-      };
-    const first = item.children[0];
-    if (!first) return item;
-    return {
-      route: {
-        ...first.route,
-        name: item.route.name,
-        navigation: item.route.navigation,
+  const index = routes.findIndex((route) => settingsHomeRoute(route));
+  if (index < 0 || items.some((item) => item.route === routes[index]))
+    return items;
+  const position = items.filter(
+    (item) => routes.indexOf(item.route) < index,
+  ).length;
+  return [
+    ...items.slice(0, position),
+    { route: routes[index], children: [] },
+    ...items.slice(position),
+  ];
+}
+
+/** The settings home page of a settings group route, when the application registers one. */
+export function settingsHomeRoute(
+  route: AppClientRegisteredRoute,
+): AppClientRegisteredRoute | undefined {
+  if (route.name !== SETTINGS_GROUP || route.componentLoader) return undefined;
+  return route.children?.find(
+    (child) => child.name === SETTINGS_HOME && child.componentLoader,
+  );
+}
+
+/**
+ * The sidebar shows the settings group as one entry opening its home page; it stays selected on every page below the
+ * group. Without a module the viewer may open, the entry disappears. An application without a home page keeps the
+ * expanded group.
+ */
+export function collapseSettingsNavigation(
+  items: RouteNavigationItem[],
+): RouteNavigationItem[] {
+  return items.flatMap((item) => {
+    const home = settingsHomeRoute(item.route);
+    if (!home) return [item];
+    if (item.children.length === 0) return [];
+    return [
+      {
+        route: { ...home, navigation: item.route.navigation },
+        children: [],
+        activeRouteKeys: [home, ...descendantPages(item.route)].map(
+          (route) => `${route.packageName}:${route.path}:${route.id}`,
+        ),
       },
-      children: [],
-      activeRouteKeys: item.children.map(
-        (child) =>
-          `${child.route.packageName}:${child.route.path}:${child.route.id}`,
-      ),
-    };
+    ];
   });
 }
+
+function descendantPages(
+  route: AppClientRegisteredRoute,
+): AppClientRegisteredRoute[] {
+  return (route.children ?? []).flatMap((child) => [
+    ...(child.componentLoader ? [child] : []),
+    ...descendantPages(child),
+  ]);
+}
+
+export interface SettingsModule {
+  /** The module's own route: a page, or the group whose pages are its tabs. */
+  readonly route: AppClientRegisteredRoute;
+  /** The page a card opens: the module page, or the first tab the viewer may open. */
+  readonly target: AppClientRegisteredRoute;
+}
+
+export interface SettingsCategory {
+  readonly route: AppClientRegisteredRoute;
+  readonly modules: readonly SettingsModule[];
+}
+
+/**
+ * The settings home's cards, from the permission-filtered navigation (`organizeNavigation` output): one category per
+ * child group of the settings group, in route order, and the modules the viewer may open in each. A module registered
+ * directly under the settings group joins the fallback category. Empty categories are left out.
+ */
+export function settingsCatalog(
+  items: readonly RouteNavigationItem[],
+): SettingsCategory[] {
+  const settings = items.find((item) => settingsHomeRoute(item.route));
+  if (!settings) return [];
+  const categories = settings.children.filter(
+    (child) => !child.route.componentLoader,
+  );
+  const loose = settings.children
+    .filter((child) => child.route.componentLoader)
+    .flatMap(toModule);
+  const result = categories.map((category) => ({
+    route: category.route,
+    modules: category.children.flatMap(toModule),
+  }));
+  if (loose.length) {
+    const fallback = result.find(
+      (category) => category.route.name === SETTINGS_FALLBACK_CATEGORY,
+    );
+    const declared = settings.route.children?.find(
+      (child) => child.name === SETTINGS_FALLBACK_CATEGORY,
+    );
+    if (fallback)
+      result[result.indexOf(fallback)] = {
+        ...fallback,
+        modules: [...fallback.modules, ...loose],
+      };
+    else
+      result.push({
+        route: declared ?? settings.route,
+        modules: loose,
+      });
+  }
+  return result.filter((category) => category.modules.length > 0);
+}
+
+function toModule(item: RouteNavigationItem): SettingsModule[] {
+  if (item.route.componentLoader)
+    return [{ route: item.route, target: item.route }];
+  const target = firstPage(item);
+  return target ? [{ route: item.route, target }] : [];
+}
+
+function firstPage(
+  item: RouteNavigationItem,
+): AppClientRegisteredRoute | undefined {
+  for (const child of item.children) {
+    if (child.route.componentLoader) return child.route;
+    const nested = firstPage(child);
+    if (nested) return nested;
+  }
+  return undefined;
+}

package/client/locales/system/en-US.ts

@@ -88,6 +88,9 @@ const systemEnUS = {
   'auth.loginDescription': 'Sign in with your username or email and password.',
   'auth.registerTitle': 'Create an account',
   'auth.registerDescription': 'Create an account to get started.',
+  'auth.registrationAccepted': 'Registration request submitted',
+  'auth.registrationGuidance':
+    'Try signing in with the username and password you submitted. If this email already has an account, the new details will not take effect. Sign in with your original account or recover your password. Follow any verification instructions provided by the application before signing in.',
   'auth.forgotTitle': 'Forgot password',
   'auth.forgotDescription':
     'Enter your email and we will send a reset link if the account exists.',
@@ -130,9 +133,8 @@ const systemEnUS = {
   'auth.continueWith': 'Continue with {provider}',
   'auth.about': 'About this application',
   'auth.platform': 'AI-native application platform',
-  'auth.marketingTitleFirst': 'Let AI build freely.',
-  'auth.marketingTitleSecond': 'NocoBase keeps it',
-  'auth.marketingTitleThird': 'reliable.',
+  'auth.marketingTitleFirst': 'AI + NocoBase',
+  'auth.marketingTitleSecond': 'Build reliable business systems',
   'auth.marketingDescription':
     'Give AI a flexible frontend framework to shape each experience, while NocoBase secures the data, permissions and governance underneath.',
   'auth.frontend': 'AI-native frontend',
@@ -153,8 +155,8 @@ const systemEnUS = {
   'status.routeFailedDescription':
     'Route {{label}} from {{packageName}} could not be loaded.',
   shell: {
-    buildFreely: 'AI builds freely.',
-    reliability: '<brand>NocoBase</brand> keeps it reliable.',
+    brandPartnership: 'AI + <brand>NocoBase</brand>',
+    buildReliableSystems: 'Build reliable business systems',
   },
   home: {
     platform: 'NocoBase · AI-native application platform',
@@ -367,7 +369,7 @@ const systemEnUS = {
   },
 
   appearance: {
-    title: 'Appearance',
+    title: 'Theme',
     mode: 'Color mode',
     preset: 'Theme',
     light: 'Light',

package/client/locales/system/settings-en-US.ts

@@ -1,4 +1,8 @@
 const settings = {
+  notificationManagementDescription:
+    'View registered notification templates and synthetic content previews.',
+  notificationTemplates: 'Notification templates',
+  notificationManagement: 'Notification management',
   listChanged: 'The list has changed. Please retry.',
   setup: {
     title: 'Feature prerequisites',
@@ -111,6 +115,19 @@ const settings = {
 
   reload: 'Reload role',
   title: 'System settings',
+  home: {
+    description:
+      'Accounts, permissions, business configuration and system capabilities are all here.',
+    empty: 'No settings are available to you yet.',
+  },
+  categories: {
+    account: 'Accounts and permissions',
+    business: 'Business configuration',
+    ai: 'AI',
+    system: 'System',
+  },
+  permissionManagementDescription:
+    'Set what each role can open and do, and the data it can see.',
   users: 'Users',
   roles: 'Roles and permissions',
   usersDescription: 'Manage accounts, access and active sessions.',