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

package/client/theme/theme-settings.tsx

@@ -1,16 +1,16 @@
-import { Check, Monitor, Moon, Palette, Sun } from 'lucide-react';
+import { Monitor, Moon, Palette, Sun } from 'lucide-react';
 import { useTheme } from 'next-themes';
 import { useTranslation } from '@nocobase/i18n/client';
-import { useId, type ReactElement } from 'react';
-import { Button } from '#components/ui/button';
-import { RadioGroup, RadioGroupItem } from '#components/ui/radio-group';
+import type { ReactElement } from 'react';
 import {
-  Popover,
-  PopoverTrigger,
-  PopoverContent,
-  PopoverTitle,
-} from '#components/ui/popover';
-import { cn } from 'cn';
+  DropdownMenuLabel,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+} from '#components/ui/dropdown-menu';
 import { useThemePreset } from './theme-context';
 import { themePresets } from './theme-presets';
 
@@ -20,164 +20,62 @@ const COLOR_MODES = [
   { id: 'system', icon: Monitor },
 ] as const;
 
+/** Account-menu appearance choices; the existing providers own persistence. */
 export function ThemeSettings(): ReactElement {
   const { theme, setTheme } = useTheme();
   const { preset, setPreset } = useThemePreset();
   const { t } = useTranslation();
-  const id = useId();
-  const title = t('appearance.title', { defaultValue: 'Appearance' });
-  return (
-    <Popover>
-      <PopoverTrigger
-        openOnHover
-        delay={0}
-        render={
-          <Button
-            aria-label={title}
-            size='icon'
-            variant='outline'
-            className='size-10 rounded-xl border-border bg-background/60 hover:bg-accent/50'
-          />
-        }
-      >
-        <Palette aria-hidden='true' className='size-5' />
-      </PopoverTrigger>
-      {/* Keep the panel width independent of density; its content still uses theme tokens. */}
-      <PopoverContent
-        align='end'
-        className='w-xs max-w-[calc(100vw-2rem)] gap-4 p-4'
-      >
-        <div className='flex items-center justify-between'>
-          <PopoverTitle className='text-sm font-semibold text-foreground'>
-            {title}
-          </PopoverTitle>
-        </div>
 
-        <fieldset className='space-y-2'>
-          <legend className='text-xs font-medium text-muted-foreground'>
+  return (
+    <DropdownMenuSub>
+      <DropdownMenuSubTrigger className='gap-2'>
+        <Palette aria-hidden='true' className='size-4' />
+        {t('appearance.title', { defaultValue: 'Theme' })}
+      </DropdownMenuSubTrigger>
+      <DropdownMenuSubContent className='min-w-44'>
+        <DropdownMenuRadioGroup
+          value={theme}
+          onValueChange={(value) => setTheme(String(value))}
+          aria-label={t('appearance.mode', { defaultValue: 'Color mode' })}
+        >
+          <DropdownMenuLabel>
             {t('appearance.mode', { defaultValue: 'Color mode' })}
-          </legend>
-          <RadioGroup
-            name={id + '-mode'}
-            value={theme}
-            onValueChange={(value) => setTheme(String(value))}
-            aria-label={t('appearance.mode', { defaultValue: 'Color mode' })}
-            className='grid-cols-3 gap-1 rounded-lg bg-muted/70 p-1'
-          >
-            {COLOR_MODES.map(({ id: mode, icon: ModeIcon }) => {
-              const isSelected = theme === mode;
-              return (
-                <label
-                  key={mode}
-                  className={cn(
-                    'relative flex min-w-0 cursor-pointer items-center justify-center gap-1.5 rounded-md px-2 py-1.5 text-xs font-medium transition-colors select-none',
-                    isSelected
-                      ? 'bg-background text-foreground shadow-xs'
-                      : 'text-muted-foreground hover:bg-background/40 hover:text-foreground',
-                  )}
-                >
-                  {/* `absolute` over the primitive's `relative`, which would keep
-                      the hidden radio in the row and push the words aside. */}
-                  <RadioGroupItem value={mode} className='absolute sr-only' />
-                  <ModeIcon aria-hidden='true' className='size-3.5 shrink-0' />
-                  <span className='whitespace-nowrap'>
-                    {t('appearance.' + mode, {
-                      defaultValue: mode[0].toUpperCase() + mode.slice(1),
-                    })}
-                  </span>
-                </label>
-              );
-            })}
-          </RadioGroup>
-        </fieldset>
-
-        <fieldset className='space-y-2'>
-          <legend className='text-xs font-medium text-muted-foreground'>
+          </DropdownMenuLabel>
+          {COLOR_MODES.map(({ id: mode, icon: ModeIcon }) => (
+            <DropdownMenuRadioItem key={mode} value={mode} closeOnClick={false}>
+              <ModeIcon aria-hidden='true' className='size-4' />
+              {t('appearance.' + mode, {
+                defaultValue: mode[0].toUpperCase() + mode.slice(1),
+              })}
+            </DropdownMenuRadioItem>
+          ))}
+        </DropdownMenuRadioGroup>
+        <DropdownMenuSeparator />
+        <DropdownMenuRadioGroup
+          value={preset}
+          onValueChange={(value) => {
+            const selected = themePresets.find((item) => item.id === value);
+            if (selected) setPreset(selected.id);
+          }}
+          aria-label={t('appearance.preset', { defaultValue: 'Theme' })}
+        >
+          <DropdownMenuLabel>
             {t('appearance.preset', { defaultValue: 'Theme' })}
-          </legend>
-          <RadioGroup
-            name={id + '-preset'}
-            value={preset}
-            onValueChange={(value) => {
-              const selected = themePresets.find((item) => item.id === value);
-              if (selected) setPreset(selected.id);
-            }}
-            aria-label={t('appearance.preset', { defaultValue: 'Theme' })}
-            className='grid-cols-2 gap-2.5'
-          >
-            {themePresets.map((item) => {
-              const isSelected = preset === item.id;
-              return (
-                <label
-                  key={item.id}
-                  className={cn(
-                    'group relative flex cursor-pointer flex-col rounded-xl border p-2 text-left transition-all select-none',
-                    isSelected
-                      ? 'border-primary ring-2 ring-primary/20 bg-primary/5 shadow-xs'
-                      : 'border-border hover:bg-muted/30',
-                  )}
-                >
-                  <RadioGroupItem
-                    value={item.id}
-                    className='absolute sr-only'
-                  />
-                  <div className='mb-2 h-16 w-full'>
-                    <div
-                      aria-hidden='true'
-                      data-theme={item.id}
-                      className='theme-preview relative flex h-full overflow-hidden rounded-lg border border-border bg-background shadow-2xs'
-                    >
-                      {/* Mini Sidebar */}
-                      <div className='flex w-6 flex-col gap-1 border-r border-sidebar-border/50 bg-sidebar p-1'>
-                        <div className='size-2 rounded-xs bg-sidebar-primary-foreground' />
-                        <div className='h-1 w-full rounded-xs bg-sidebar-foreground/30' />
-                        <div className='h-1 w-full rounded-xs bg-sidebar-foreground/20' />
-                      </div>
-                      {/* Mini Main Content Area */}
-                      <div className='flex flex-1 flex-col p-1.5'>
-                        <div className='mb-1 flex items-center justify-between border-b border-border/40 pb-1'>
-                          <div className='h-1 w-7 rounded-xs bg-foreground/70' />
-                          <div className='size-1.5 rounded-full bg-primary' />
-                        </div>
-                        <div className='flex flex-1 flex-col justify-between'>
-                          <div className='h-1 w-full rounded-xs bg-muted' />
-                          <div className='flex items-center justify-between pt-1'>
-                            <div className='h-1 w-6 rounded-xs bg-muted' />
-                            <div className='h-3 w-5 rounded-xs bg-primary shadow-xs' />
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                  <div className='mt-auto flex min-h-5 items-center justify-between gap-2 px-0.5'>
-                    <span
-                      className={cn(
-                        'text-xs transition-colors',
-                        isSelected
-                          ? 'font-medium text-foreground'
-                          : 'text-muted-foreground group-hover:text-foreground',
-                      )}
-                    >
-                      {t(item.labelKey, {
-                        defaultValue:
-                          item.id.charAt(0).toUpperCase() + item.id.slice(1),
-                      })}
-                    </span>
-                    {isSelected && (
-                      <span
-                        aria-hidden='true'
-                        className='flex size-3.5 shrink-0 items-center justify-center rounded-full bg-primary text-primary-foreground'
-                      >
-                        <Check className='size-2 stroke-[3]' />
-                      </span>
-                    )}
-                  </div>
-                </label>
-              );
-            })}
-          </RadioGroup>
-        </fieldset>
-      </PopoverContent>
-    </Popover>
+          </DropdownMenuLabel>
+          {themePresets.map((item) => (
+            <DropdownMenuRadioItem
+              key={item.id}
+              value={item.id}
+              closeOnClick={false}
+            >
+              {t(item.labelKey, {
+                defaultValue:
+                  item.id.charAt(0).toUpperCase() + item.id.slice(1),
+              })}
+            </DropdownMenuRadioItem>
+          ))}
+        </DropdownMenuRadioGroup>
+      </DropdownMenuSubContent>
+    </DropdownMenuSub>
   );
 }

package/config.example.yml

@@ -69,30 +69,59 @@ secrets:
     - version: 1
       key: replace-with-a-unique-secret
 
+# Optional shared sender for Auth, Users invitations and email notification channels. This example is commented out;
+# server/config/mailers.ts defaults to an empty configuration, so example values do not enable mail delivery.
+# `system` is only this template's sample name. Values are literal: ${NAME} is not expanded. The mapping explicitly
+# declares MAILERS_SYSTEM_* variables; inject the password through MAILERS_SYSTEM_PASSWORD.
+# mailers:
+#   default: system
+#   system:
+#     provider: smtp
+#     host: smtp.example.com
+#     port: 587
+#     secure: false
+#     auth:
+#       user: notifications@example.com
+#     from: App <notifications@example.com>
+
+# For Resend, use a separate entry with provider: resend, apiKey and from; do not mix provider fields:
+# mailers:
+#   default: system
+#   system:
+#     provider: resend
+#     apiKey: replace-with-the-api-key
+#     from: "Studio <notifications@example.com>"
+#
+# Equivalent SMTP .env example (use the Resend alternative below instead of its provider-specific SMTP fields):
+# MAILERS_DEFAULT=system
+# MAILERS_SYSTEM_PROVIDER=smtp
+# MAILERS_SYSTEM_HOST=smtp.example.com
+# MAILERS_SYSTEM_PORT=587
+# MAILERS_SYSTEM_SECURE=false
+# MAILERS_SYSTEM_USER=notifications@example.com
+# MAILERS_SYSTEM_PASSWORD=replace-with-the-password
+# MAILERS_SYSTEM_FROM=Studio <notifications@example.com>
+# MAILERS_SYSTEM_REPLY_TO=support@example.com
+# MAILERS_SYSTEM_ENABLED=true
+#
+# Resend .env alternative:
+# MAILERS_DEFAULT=system
+# MAILERS_SYSTEM_PROVIDER=resend
+# MAILERS_SYSTEM_API_KEY=replace-with-the-api-key
+# MAILERS_SYSTEM_FROM=Studio <notifications@example.com>
+# MAILERS_SYSTEM_REPLY_TO=support@example.com
+# MAILERS_SYSTEM_ENABLED=true
+
 auth:
-  # Authentication owns this sender; notification and mailbox configuration are independent.
-  # Set app.publicOrigin (or APP_PUBLIC_ORIGIN) before enabling automatic recovery.
+  # Set app.publicOrigin before explicitly enabling automatic password recovery.
   # passwordReset:
   #   enabled: true
   # email:
-  #   provider: smtp
-  #   host: smtp.example.com
-  #   port: 587
-  #   secure: false
-  #   auth:
-  #     user: noreply@example.com
-  #     pass: replace-with-the-smtp-password
-  #   from: App <noreply@example.com>
-  #   replyTo: support@example.com
-  # For Resend, replace the entire email block with these fields; do not mix SMTP fields:
-  # email:
-  #   provider: resend
-  #   apiKey: replace-with-the-resend-api-key
-  #   from: App <noreply@example.com>
-  # AUTH_EMAIL_PROVIDER/HOST/PORT/SECURE/USER/PASSWORD/FROM/REPLY_TO/API_KEY override auth.email.
+  #   mailer: system # omit to use mailers.default
+  # Existing inline auth.email and AUTH_EMAIL_* remain supported for compatibility.
   emailAndPassword:
     enabled: true
-    autoSignIn: false
+    autoSignIn: true
   session:
     storeSessionInDatabase: true
 
@@ -102,21 +131,11 @@ notification:
     inbox:
       type: in-app
 
-    # Uncomment and configure independent email Channels.
-    # Values are read as written: ${NAME} is not expanded. To take a secret from the environment instead, map a
-    # variable onto its path in env of server/config/notification.ts, such as SMTP_PASSWORD.
+    # Configuring mailers alone does not create a notification channel.
     # system-email:
-    #   type: smtp
-    #   host: smtp.example.com
-    #   port: 587
-    #   auth:
-    #     user: notifications@example.com
-    #     pass: replace-with-the-smtp-password
-    #   from: notifications@example.com
-    # marketing-email:
-    #   type: resend
-    #   apiKey: replace-with-the-resend-api-key
-    #   from: marketing@example.com
+    #   type: email
+    #   mailer: system # omit to use mailers.default
+    # Legacy type: smtp/resend inline channels and SMTP_PASSWORD/RESEND_API_KEY remain supported.
 
     # ops-feishu:
     #   type: feishu-webhook

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nocobase/app-template-default",
   "displayName": "Default Template",
-  "version": "1.0.0-beta.86",
+  "version": "1.0.0-beta.88",
   "type": "module",
   "prettier": "@nocobase/dev-config/prettier",
   "engines": {
@@ -9,7 +9,7 @@
   },
   "nocobase": {
     "templateKind": "app",
-    "defaultTemplateVersion": "1.0.0-beta.86"
+    "defaultTemplateVersion": "1.0.0-beta.88"
   },
   "devDependencies": {
     "@ai-sdk/react": "4.0.131",
@@ -74,10 +74,10 @@
     "elkjs": "^0.10.2",
     "@types/jsdom": "^30.0.0",
     "@noble/hashes": "2.3.0",
-    "@nocobase/app-client": "^4.0.0-beta.6",
+    "@nocobase/app-client": "^4.0.0-beta.8",
     "@nocobase/app-plugin-template-print": "0.0.2-beta.2",
-    "@nocobase/app-skills": "0.1.0-beta.56",
-    "@nocobase/app-testing": "0.1.0-beta.7",
+    "@nocobase/app-skills": "0.1.0-beta.59",
+    "@nocobase/app-testing": "0.1.0-beta.8",
     "@nocobase/app-websocket": "^0.1.0-beta.1",
     "@nocobase/dev-config": "0.1.0-beta.25",
     "@nocobase/drive": "^0.1.0-beta.7",
@@ -143,39 +143,39 @@
     "better-auth": "1.7.5",
     "hono": "^4.13.2",
     "@nocobase/concurrency": "^0.1.0-beta.1",
-    "@nocobase/app-plugin-concurrency": "^0.1.0-beta.1",
-    "@nocobase/app-plugin-agents": "^2.0.0-beta.1",
-    "@nocobase/app-plugin-api-keys": "^1.0.0-beta.20",
-    "@nocobase/app-plugin-authentication": "^2.0.0-beta.17",
-    "@nocobase/app-plugin-authorization": "^1.0.0-beta.34",
-    "@nocobase/app-plugin-database-explorer": "^1.0.0-beta.18",
-    "@nocobase/app-plugin-file": "^1.0.0-beta.28",
-    "@nocobase/app-plugin-foundation": "^0.1.0-beta.11",
-    "@nocobase/app-plugin-i18n": "^1.0.0-beta.19",
-    "@nocobase/app-plugin-knowledge": "^0.1.0-beta.16",
-    "@nocobase/app-plugin-mail": "^1.0.0-beta.19",
-    "@nocobase/app-plugin-notification": "^2.0.0-beta.3",
-    "@nocobase/app-plugin-notification-in-app": "^2.0.0-beta.1",
-    "@nocobase/app-plugin-notification-providers": "^1.0.0-beta.17",
-    "@nocobase/app-plugin-scheduler": "^1.0.0-beta.22",
-    "@nocobase/app-plugin-users": "^2.0.0-beta.12",
-    "@nocobase/app-server": "^4.0.0-beta.0",
+    "@nocobase/app-plugin-concurrency": "^0.1.0-beta.2",
+    "@nocobase/app-plugin-agents": "^2.0.0-beta.4",
+    "@nocobase/app-plugin-api-keys": "^1.0.0-beta.21",
+    "@nocobase/app-plugin-authentication": "^2.0.0-beta.19",
+    "@nocobase/app-plugin-authorization": "^1.0.0-beta.36",
+    "@nocobase/app-plugin-database-explorer": "^1.0.0-beta.19",
+    "@nocobase/app-plugin-file": "^1.0.0-beta.29",
+    "@nocobase/app-plugin-foundation": "^0.1.0-beta.14",
+    "@nocobase/app-plugin-i18n": "^1.0.0-beta.21",
+    "@nocobase/app-plugin-knowledge": "^0.1.0-beta.17",
+    "@nocobase/app-plugin-mail": "^1.0.0-beta.21",
+    "@nocobase/app-plugin-notification": "^2.0.0-beta.5",
+    "@nocobase/app-plugin-notification-in-app": "^2.0.0-beta.2",
+    "@nocobase/app-plugin-notification-providers": "^1.0.0-beta.18",
+    "@nocobase/app-plugin-scheduler": "^1.0.0-beta.23",
+    "@nocobase/app-plugin-users": "^2.0.0-beta.15",
+    "@nocobase/app-server": "^5.0.0-beta.1",
     "@nocobase/config": "^0.1.0-beta.3",
-    "@nocobase/db": "^1.0.0-beta.24",
+    "@nocobase/db": "^1.0.0-beta.25",
     "@nocobase/db-sqlite": "^0.1.0-beta.6",
     "@nocobase/service-provider": "^0.0.2-beta.2",
     "@nocobase/snowflake": "^1.0.0-beta.4",
-    "@nocobase/app-plugin-authz-default-access": "^1.0.0-beta.18",
-    "@nocobase/app-plugin-authz-sharing-rules": "^1.0.0-beta.17",
-    "@nocobase/app-plugin-authz-restriction-rules": "^1.0.0-beta.16",
+    "@nocobase/app-plugin-authz-default-access": "^1.0.0-beta.19",
+    "@nocobase/app-plugin-authz-sharing-rules": "^1.0.0-beta.18",
+    "@nocobase/app-plugin-authz-restriction-rules": "^1.0.0-beta.17",
     "@nocobase/authorization": "^1.0.0-beta.16",
     "@nocobase/queue": "^1.0.0-beta.10",
     "@nocobase/jobs": "^1.0.0-beta.5",
     "@nocobase/lifecycle": "^0.1.0-beta.4",
     "@nocobase/i18n": "^2.0.0-beta.1",
-    "@nocobase/caching": "^0.1.0-beta.3",
+    "@nocobase/caching": "^1.0.0-beta.4",
     "@nocobase/repository-input": "^0.1.0-beta.3",
-    "@nocobase/app-cli": "^1.0.0-beta.31",
+    "@nocobase/app-cli": "^1.0.0-beta.32",
     "@nocobase/realtime": "^1.0.0-beta.0"
   },
   "description": "NocoBase 3 application template with the standard product capabilities.",

package/server/config/auth.ts

@@ -12,7 +12,7 @@ import { bearer, deviceAuthorization, username } from 'better-auth/plugins';
  */
 const CLI_CLIENT_IDS: readonly string[] = ['nocobase-cli'];
 
-// defineAuthConfig supplies AUTH_EMAIL_* mappings and validates the private auth.email sender.
+// Use mailers for shared sending; defineAuthConfig retains AUTH_EMAIL_* for legacy inline senders.
 // Automatic recovery requires passwordReset.enabled: true; leave the switch absent for custom callback compatibility.
 const auth: AppConfigFactory<AuthConfig> = defineAuthConfig({
   defaults: {
@@ -29,7 +29,7 @@ const auth: AppConfigFactory<AuthConfig> = defineAuthConfig({
       }),
       bearer(),
     ],
-    emailAndPassword: { enabled: true, autoSignIn: false },
+    emailAndPassword: { enabled: true, autoSignIn: true },
     session: { storeSessionInDatabase: true },
     account: { encryptOAuthTokens: true },
   },

package/server/config/index.ts

@@ -1,3 +1,4 @@
+import mailers from './mailers.js';
 import {
   defaultAppConfigs,
   type AppConfigFactory,
@@ -26,6 +27,7 @@ import users from './users.js';
 import knowledge from './knowledge.js';
 
 const defaultConfigs: AppConfigFactory<{
+  mailers: ReturnType<typeof mailers>;
   auth: ReturnType<typeof auth>;
   authorization: ReturnType<typeof authorization>;
   notification: ReturnType<typeof notification>;
@@ -49,6 +51,7 @@ const defaultConfigs: AppConfigFactory<{
   users: ReturnType<typeof users>;
   knowledge: ReturnType<typeof knowledge>;
 }> = defaultAppConfigs({
+  mailers,
   auth,
   authorization,
   notification,

package/server/config/mailers.ts

@@ -0,0 +1,11 @@
+import {
+  defineMailersConfig,
+  mailerEnvironment,
+} from '@nocobase/app-server/mailers/config';
+
+// These mappings are explicit and discoverable through `nocobase config env`.
+// An empty section leaves email unavailable until an operator configures a named service.
+export default defineMailersConfig({
+  defaults: {},
+  env: { ...mailerEnvironment('system', 'MAILERS_SYSTEM') },
+});

package/server/providers/index.ts

@@ -1,8 +1,10 @@
+import NotificationManagementProvider from './notification-management.js';
 import SubmissionProvider from './submission.js';
 import type { ApplicationServiceProviderConstructor } from '@nocobase/app-server/application';
 
 const serviceProviders: readonly ApplicationServiceProviderConstructor[] = [
   SubmissionProvider,
+  NotificationManagementProvider,
 ];
 
 export default serviceProviders;

package/server/providers/notification-management.ts

@@ -0,0 +1,27 @@
+import { ServiceProvider } from '@nocobase/service-provider';
+import type { AppPluginApplication } from '@nocobase/app-server/plugins';
+import type { MailersConfig } from '@nocobase/app-server/mailers/config';
+import {
+  describeInvitationEmailChannel,
+  type UsersConfig,
+} from '@nocobase/app-plugin-users/server/config';
+
+/** Only a derived boolean reaches the existing SPA bootstrap; all transport configuration stays private. */
+export default class NotificationManagementProvider extends ServiceProvider<AppPluginApplication> {
+  readonly name = 'app.notification-management';
+  override boot(): Promise<void> {
+    const channel = describeInvitationEmailChannel({
+      invitations: this.app.config.get<UsersConfig>('users')?.invitations,
+      mailers: this.app.config.get<MailersConfig>('mailers'),
+      channels: this.app.config.get<{
+        channels?: Readonly<Record<string, { enabled?: boolean }>>;
+      }>('notification')?.channels,
+    });
+    this.app.config.mergeDefaults({
+      client: {
+        notificationTemplates: { invitationConfigured: channel.configured },
+      },
+    });
+    return Promise.resolve();
+  }
+}

package/tests/client/account-permissions.test.tsx

@@ -115,7 +115,7 @@ describe('account permission changes without a browser reload', () => {
     await expectMenu(true);
     await changePermissions(view, false);
     invalidate(view);
-    expect(screen.queryByText('users content')).not.toBeInTheDocument();
+    expect(screen.getByText('users content')).not.toBeVisible();
     await expectMenu(false);
     await changePermissions(view, true);
     invalidate(view);

package/tests/client/client-auth.test.tsx

@@ -2,7 +2,13 @@ import {
   TestI18nProvider,
   createTestI18nRuntime,
 } from '@nocobase/i18n/testing';
-import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import {
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+  within,
+} from '@testing-library/react';
 import type { ReactElement } from 'react';
 import { MemoryRouter, Route, Routes } from 'react-router';
 import { describe, expect, it, vi } from 'vitest';
@@ -98,6 +104,9 @@ describe('application authentication pages', () => {
     });
     expect(panel).toHaveClass('hidden', 'xl:block');
     expect(panel).toHaveTextContent('AI-native application platform');
+    expect(within(panel).getByRole('heading', { level: 2 })).toHaveTextContent(
+      /^AI \+ NocoBase\s*Build reliable business systems$/,
+    );
     expect(panel).toHaveTextContent('AI-native frontend');
     expect(panel).toHaveTextContent('NocoBase foundation');
     expect(panel).toHaveTextContent('Freedom above. Confidence below.');