@nextclaw/ui 0.15.9 → 0.15.11

package/src/features/system-status/components/runtime-presence-card.tsx

@@ -1,36 +1,22 @@
-import { type ReactNode, useEffect } from "react";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/shared/components/ui/card";
-import { NoticeCard } from "@/shared/components/feedback/notice-card";
-import { SettingRow } from "@/shared/components/settings/setting-row";
-import { Switch } from "@/shared/components/ui/switch";
-import {
-  desktopPresenceManager,
-  useDesktopPresenceStore,
-} from "@/platforms/desktop";
-import { useSystemStatus } from "@/features/system-status";
-import { t } from "@/shared/lib/i18n";
+import { type ReactNode, useEffect } from 'react';
+import { NoticeCard } from '@/shared/components/feedback/notice-card';
+import { SettingRow, SettingsGroup, SettingsSection } from '@/shared/components/settings/setting-row';
+import { Switch } from '@/shared/components/ui/switch';
+import { desktopPresenceManager, useDesktopPresenceStore } from '@/platforms/desktop';
+import { useSystemStatus } from '@/features/system-status';
+import { t } from '@/shared/lib/i18n';
 
 function PresenceHint(props: { title: string; description: string }) {
   const { description, title } = props;
-  return <NoticeCard tone="neutral" title={title} description={description} />;
+  return <NoticeCard tone='neutral' title={title} description={description} />;
 }
 
 function PresenceCardFrame(props: { children: ReactNode }) {
   const { children } = props;
   return (
-    <Card>
-      <CardHeader>
-        <CardTitle>{t("runtimePresenceTitle")}</CardTitle>
-        <CardDescription>{t("runtimePresenceDescription")}</CardDescription>
-      </CardHeader>
-      <CardContent>{children}</CardContent>
-    </Card>
+    <SettingsSection title={t('runtimePresenceTitle')} description={t('runtimePresenceDescription')}>
+      <SettingsGroup>{children}</SettingsGroup>
+    </SettingsSection>
   );
 }
 
@@ -43,122 +29,117 @@ export function RuntimePresenceCard() {
   const snapshot = useDesktopPresenceStore((state) => state.snapshot);
 
   useEffect(() => {
-    if (environment === "desktop-embedded") {
+    if (environment === 'desktop-embedded') {
       void desktopPresenceManager.start();
       return;
     }
     desktopPresenceManager.markUnsupported();
   }, [environment]);
 
-  if (environment === "desktop-embedded") {
+  if (environment === 'desktop-embedded') {
     return (
       <PresenceCardFrame>
-        <div className="space-y-4">
+        <div className='p-4'>
           <NoticeCard
-            tone="neutral"
-            title={t("runtimePresenceBehaviorLabel")}
+            tone='neutral'
+            title={t('runtimePresenceBehaviorLabel')}
             description={
-              snapshot?.closeToBackground
-                ? t("runtimePresenceBehaviorBackground")
-                : t("runtimePresenceBehaviorQuit")
+              snapshot?.closeToBackground ? t('runtimePresenceBehaviorBackground') : t('runtimePresenceBehaviorQuit')
             }
-            className="rounded-xl"
+            className='rounded-xl'
           />
+        </div>
 
-          {!initialized || (supported && !snapshot) ? (
-            <p className="text-sm text-gray-500">
-              {t("runtimePresenceLoading")}
-            </p>
-          ) : null}
+        {!initialized || (supported && !snapshot) ? (
+          <p className='p-4 text-sm text-muted-foreground'>{t('runtimePresenceLoading')}</p>
+        ) : null}
 
-          {snapshot ? (
-            <div className="space-y-4">
-              <SettingRow
-                title={t("runtimePresenceCloseToBackground")}
-                description={t("runtimePresenceCloseToBackgroundHelp")}
-                control={
-                  <Switch
-                    id="runtime-presence-close-background"
-                    aria-label={t("runtimePresenceCloseToBackground")}
-                    checked={snapshot.closeToBackground}
-                    disabled={busyAction === "saving-preferences"}
-                    onCheckedChange={(checked) => {
-                      void desktopPresenceManager.updatePreferences({
-                        closeToBackground: checked,
-                      });
-                    }}
-                  />
-                }
-              />
+        {snapshot ? (
+          <>
+            <SettingRow
+              title={t('runtimePresenceCloseToBackground')}
+              description={t('runtimePresenceCloseToBackgroundHelp')}
+              control={
+                <Switch
+                  id='runtime-presence-close-background'
+                  aria-label={t('runtimePresenceCloseToBackground')}
+                  checked={snapshot.closeToBackground}
+                  disabled={busyAction === 'saving-preferences'}
+                  onCheckedChange={(checked) => {
+                    void desktopPresenceManager.updatePreferences({
+                      closeToBackground: checked
+                    });
+                  }}
+                />
+              }
+            />
 
-              <SettingRow
-                title={t("runtimePresenceLaunchAtLogin")}
-                description={
-                  snapshot.supportsLaunchAtLogin
-                    ? t("runtimePresenceLaunchAtLoginHelp")
-                    : (snapshot.launchAtLoginReason ??
-                      t("runtimePresenceLaunchAtLoginUnavailable"))
-                }
-                control={
-                  <Switch
-                    id="runtime-presence-launch-login"
-                    aria-label={t("runtimePresenceLaunchAtLogin")}
-                    checked={snapshot.launchAtLogin}
-                    disabled={
-                      !snapshot.supportsLaunchAtLogin ||
-                      busyAction === "saving-preferences"
-                    }
-                    onCheckedChange={(checked) => {
-                      void desktopPresenceManager.updatePreferences({
-                        launchAtLogin: checked,
-                      });
-                    }}
-                  />
-                }
-              />
-            </div>
-          ) : null}
-        </div>
+            <SettingRow
+              title={t('runtimePresenceLaunchAtLogin')}
+              description={
+                snapshot.supportsLaunchAtLogin
+                  ? t('runtimePresenceLaunchAtLoginHelp')
+                  : (snapshot.launchAtLoginReason ?? t('runtimePresenceLaunchAtLoginUnavailable'))
+              }
+              control={
+                <Switch
+                  id='runtime-presence-launch-login'
+                  aria-label={t('runtimePresenceLaunchAtLogin')}
+                  checked={snapshot.launchAtLogin}
+                  disabled={!snapshot.supportsLaunchAtLogin || busyAction === 'saving-preferences'}
+                  onCheckedChange={(checked) => {
+                    void desktopPresenceManager.updatePreferences({
+                      launchAtLogin: checked
+                    });
+                  }}
+                />
+              }
+            />
+          </>
+        ) : null}
       </PresenceCardFrame>
     );
   }
 
-  if (environment === "managed-local-service") {
+  if (environment === 'managed-local-service') {
     return (
       <PresenceCardFrame>
+        <div className='p-4'>
           <PresenceHint
-            title={t("runtimePresenceManagedLocalTitle")}
-            description={t("runtimePresenceManagedLocalDescription")}
+            title={t('runtimePresenceManagedLocalTitle')}
+            description={t('runtimePresenceManagedLocalDescription')}
           />
+        </div>
       </PresenceCardFrame>
     );
   }
 
-  if (environment === "self-hosted-web") {
+  if (environment === 'self-hosted-web') {
     return (
       <PresenceCardFrame>
+        <div className='p-4'>
           <PresenceHint
-            title={t("runtimePresenceSelfHostedTitle")}
-            description={t("runtimePresenceSelfHostedDescription")}
+            title={t('runtimePresenceSelfHostedTitle')}
+            description={t('runtimePresenceSelfHostedDescription')}
           />
+        </div>
       </PresenceCardFrame>
     );
   }
 
-  if (environment === "shared-web") {
+  if (environment === 'shared-web') {
     return (
       <PresenceCardFrame>
-          <PresenceHint
-            title={t("runtimePresenceSharedTitle")}
-            description={t("runtimePresenceSharedDescription")}
-          />
+        <div className='p-4'>
+          <PresenceHint title={t('runtimePresenceSharedTitle')} description={t('runtimePresenceSharedDescription')} />
+        </div>
       </PresenceCardFrame>
     );
   }
 
   return (
     <PresenceCardFrame>
-        <p className="text-sm text-gray-500">{t("runtimePresenceLoading")}</p>
+      <p className='p-4 text-sm text-muted-foreground'>{t('runtimePresenceLoading')}</p>
     </PresenceCardFrame>
   );
 }

package/src/features/system-status/components/runtime-security-card.tsx

@@ -1,6 +1,6 @@
 import { useState, type ReactNode } from 'react';
 import { Button } from '@/shared/components/ui/button';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/shared/components/ui/card';
+import { SettingsGroup } from '@/shared/components/settings/setting-row';
 import { Input } from '@/shared/components/ui/input';
 import { Label } from '@/shared/components/ui/label';
 import { Switch } from '@/shared/components/ui/switch';
@@ -28,15 +28,17 @@ function validatePasswordConfirmation(password: string, confirmPassword: string)
   return true;
 }
 
-function SecurityCardFrame({ children, contentClassName = 'space-y-6' }: { children: ReactNode; contentClassName?: string }) {
+function SecurityCardFrame({
+  children,
+  contentClassName = 'space-y-6'
+}: {
+  children: ReactNode;
+  contentClassName?: string;
+}) {
   return (
-    <Card>
-      <CardHeader>
-        <CardTitle>{t('authSecurityTitle')}</CardTitle>
-        <CardDescription>{t('authSecurityDescription')}</CardDescription>
-      </CardHeader>
-      <CardContent className={contentClassName}>{children}</CardContent>
-    </Card>
+    <SettingsGroup>
+      <div className={`${contentClassName} p-4`}>{children}</div>
+    </SettingsGroup>
   );
 }
 
@@ -64,44 +66,44 @@ function RuntimeSecuritySetupSection({
   setupUsername
 }: RuntimeSecuritySetupSectionProps) {
   return (
-    <SecurityCardFrame contentClassName="space-y-5">
-      <div className="rounded-xl border border-dashed border-gray-200 bg-gray-50/70 p-4">
-        <p className="text-sm font-medium text-gray-900">{t('authSetupTitle')}</p>
-        <p className="mt-1 text-sm text-gray-500">{t('authSetupDescription')}</p>
+    <SecurityCardFrame contentClassName='space-y-5'>
+      <div className='rounded-xl bg-background/65 p-4'>
+        <p className='text-sm font-medium text-foreground'>{t('authSetupTitle')}</p>
+        <p className='mt-1 text-sm text-muted-foreground'>{t('authSetupDescription')}</p>
       </div>
-      <div className="grid gap-4 md:grid-cols-2">
-        <div className="space-y-2">
-          <Label htmlFor="auth-setup-username">{t('authUsername')}</Label>
+      <div className='grid gap-4 md:grid-cols-2'>
+        <div className='space-y-2'>
+          <Label htmlFor='auth-setup-username'>{t('authUsername')}</Label>
           <Input
-            id="auth-setup-username"
+            id='auth-setup-username'
             value={setupUsername}
             onChange={(event) => setSetupUsername(event.target.value)}
             placeholder={t('authUsernamePlaceholder')}
           />
         </div>
-        <div className="space-y-2">
-          <Label htmlFor="auth-setup-password">{t('authPassword')}</Label>
+        <div className='space-y-2'>
+          <Label htmlFor='auth-setup-password'>{t('authPassword')}</Label>
           <Input
-            id="auth-setup-password"
-            type="password"
+            id='auth-setup-password'
+            type='password'
             value={setupPassword}
             onChange={(event) => setSetupPassword(event.target.value)}
             placeholder={t('authPasswordPlaceholder')}
           />
         </div>
       </div>
-      <div className="space-y-2">
-        <Label htmlFor="auth-setup-confirm">{t('authConfirmPassword')}</Label>
+      <div className='space-y-2'>
+        <Label htmlFor='auth-setup-confirm'>{t('authConfirmPassword')}</Label>
         <Input
-          id="auth-setup-confirm"
-          type="password"
+          id='auth-setup-confirm'
+          type='password'
           value={setupConfirmPassword}
           onChange={(event) => setSetupConfirmPassword(event.target.value)}
           placeholder={t('authConfirmPasswordPlaceholder')}
         />
-        <p className="text-xs text-gray-500">{t('authPasswordMinLengthHint')}</p>
+        <p className='text-xs text-muted-foreground'>{t('authPasswordMinLengthHint')}</p>
       </div>
-      <Button type="button" disabled={!canSubmitSetup} onClick={() => void onSubmit()}>
+      <Button type='button' disabled={!canSubmitSetup} onClick={() => void onSubmit()}>
         {isPending ? t('authSettingUp') : t('authSetupAction')}
       </Button>
     </SecurityCardFrame>
@@ -143,21 +145,23 @@ function RuntimeSecurityConfiguredSection({
 }: RuntimeSecurityConfiguredSectionProps) {
   return (
     <SecurityCardFrame>
-      <div className="rounded-xl border border-gray-200 p-4">
-        <div className="flex flex-col gap-4 md:flex-row md:items-start md:justify-between">
-          <div className="space-y-1">
-            <p className="text-sm font-medium text-gray-900">{t('authStatusLabel')}</p>
-            <p className="text-sm text-gray-600">{t('authStatusConfiguredUser').replace('{username}', username ?? '')}</p>
-            <p className="text-xs text-gray-500">{t('authUsernameFixedHelp')}</p>
+      <div className='rounded-xl bg-background/65 p-4'>
+        <div className='flex flex-col gap-4 md:flex-row md:items-start md:justify-between'>
+          <div className='space-y-1'>
+            <p className='text-sm font-medium text-foreground'>{t('authStatusLabel')}</p>
+            <p className='text-sm text-muted-foreground'>
+              {t('authStatusConfiguredUser').replace('{username}', username ?? '')}
+            </p>
+            <p className='text-xs text-muted-foreground'>{t('authUsernameFixedHelp')}</p>
           </div>
-          <span className="inline-flex items-center rounded-full bg-gray-100 px-3 py-1 text-xs font-medium text-gray-700">
+          <span className='inline-flex items-center rounded-full bg-muted px-3 py-1 text-xs font-medium text-foreground'>
             {enabled ? t('enabled') : t('disabled')}
           </span>
         </div>
-        <div className="mt-4 flex flex-col gap-4 border-t border-gray-200 pt-4 md:flex-row md:items-center md:justify-between">
-          <div className="space-y-1">
-            <p className="text-sm font-medium text-gray-900">{t('authEnableLabel')}</p>
-            <p className="text-xs text-gray-500">{enabled ? t('authEnableOnHelp') : t('authEnableOffHelp')}</p>
+        <div className='mt-4 flex flex-col gap-4 border-t border-border/55 pt-4 md:flex-row md:items-center md:justify-between'>
+          <div className='space-y-1'>
+            <p className='text-sm font-medium text-foreground'>{t('authEnableLabel')}</p>
+            <p className='text-xs text-muted-foreground'>{enabled ? t('authEnableOnHelp') : t('authEnableOffHelp')}</p>
           </div>
           <Switch
             checked={enabled}
@@ -168,44 +172,44 @@ function RuntimeSecurityConfiguredSection({
           />
         </div>
       </div>
-      <div className="rounded-xl border border-gray-200 p-4 space-y-4">
-        <div className="space-y-1">
-          <p className="text-sm font-medium text-gray-900">{t('authPasswordSectionTitle')}</p>
-          <p className="text-xs text-gray-500">{t('authPasswordSectionDescription')}</p>
+      <div className='space-y-4 rounded-xl bg-background/65 p-4'>
+        <div className='space-y-1'>
+          <p className='text-sm font-medium text-foreground'>{t('authPasswordSectionTitle')}</p>
+          <p className='text-xs text-muted-foreground'>{t('authPasswordSectionDescription')}</p>
         </div>
-        <div className="grid gap-4 md:grid-cols-2">
-          <div className="space-y-2">
-            <Label htmlFor="auth-password-next">{t('authPassword')}</Label>
+        <div className='grid gap-4 md:grid-cols-2'>
+          <div className='space-y-2'>
+            <Label htmlFor='auth-password-next'>{t('authPassword')}</Label>
             <Input
-              id="auth-password-next"
-              type="password"
+              id='auth-password-next'
+              type='password'
               value={nextPassword}
               onChange={(event) => setNextPassword(event.target.value)}
               placeholder={t('authPasswordPlaceholder')}
             />
           </div>
-          <div className="space-y-2">
-            <Label htmlFor="auth-password-confirm">{t('authConfirmPassword')}</Label>
+          <div className='space-y-2'>
+            <Label htmlFor='auth-password-confirm'>{t('authConfirmPassword')}</Label>
             <Input
-              id="auth-password-confirm"
-              type="password"
+              id='auth-password-confirm'
+              type='password'
               value={nextConfirmPassword}
               onChange={(event) => setNextConfirmPassword(event.target.value)}
               placeholder={t('authConfirmPasswordPlaceholder')}
             />
           </div>
         </div>
-        <div className="flex flex-wrap items-center gap-3">
-          <Button type="button" disabled={!canUpdatePassword} onClick={() => void onPasswordUpdate()}>
+        <div className='flex flex-wrap items-center gap-3'>
+          <Button type='button' disabled={!canUpdatePassword} onClick={() => void onPasswordUpdate()}>
             {isUpdatingPassword ? t('authPasswordUpdating') : t('authPasswordAction')}
           </Button>
           {enabled && authenticated ? (
-            <Button type="button" variant="outline" disabled={isLoggingOut} onClick={() => void onLogout()}>
+            <Button type='button' variant='outline' disabled={isLoggingOut} onClick={() => void onLogout()}>
               {isLoggingOut ? t('authLoggingOut') : t('authLogoutAction')}
             </Button>
           ) : null}
         </div>
-        <p className="text-xs text-gray-500">{t('authSessionMemoryNotice')}</p>
+        <p className='text-xs text-muted-foreground'>{t('authSessionMemoryNotice')}</p>
       </div>
     </SecurityCardFrame>
   );
@@ -223,15 +227,23 @@ export function RuntimeSecurityCard() {
   const [nextPassword, setNextPassword] = useState('');
   const [nextConfirmPassword, setNextConfirmPassword] = useState('');
   const auth = authStatus.data;
-  const canSubmitSetup = setupUsername.trim().length > 0 && hasValidPasswordLength(setupPassword) && setupPassword === setupConfirmPassword && !setupAuth.isPending;
-  const canUpdatePassword = hasValidPasswordLength(nextPassword) && nextPassword === nextConfirmPassword && !updateAuthPassword.isPending;
+  const canSubmitSetup =
+    setupUsername.trim().length > 0 &&
+    hasValidPasswordLength(setupPassword) &&
+    setupPassword === setupConfirmPassword &&
+    !setupAuth.isPending;
+  const canUpdatePassword =
+    hasValidPasswordLength(nextPassword) && nextPassword === nextConfirmPassword && !updateAuthPassword.isPending;
 
   const handleSetup = async () => {
     if (!validatePasswordConfirmation(setupPassword, setupConfirmPassword)) {
       return;
     }
     try {
-      await setupAuth.mutateAsync({ username: setupUsername.trim(), password: setupPassword });
+      await setupAuth.mutateAsync({
+        username: setupUsername.trim(),
+        password: setupPassword
+      });
       setSetupPassword('');
       setSetupConfirmPassword('');
     } catch {
@@ -269,13 +281,13 @@ export function RuntimeSecurityCard() {
   };
 
   if (authStatus.isLoading && !auth) {
-    return <SecurityCardFrame contentClassName="text-sm text-gray-500">{t('loading')}</SecurityCardFrame>;
+    return <SecurityCardFrame contentClassName='text-sm text-gray-500'>{t('loading')}</SecurityCardFrame>;
   }
   if (authStatus.isError || !auth) {
     return (
-      <SecurityCardFrame contentClassName="space-y-4">
-        <p className="text-sm text-gray-500">{t('authStatusLoadFailed')}</p>
-        <Button variant="outline" onClick={() => void authStatus.refetch()}>
+      <SecurityCardFrame contentClassName='space-y-4'>
+        <p className='text-sm text-gray-500'>{t('authStatusLoadFailed')}</p>
+        <Button variant='outline' onClick={() => void authStatus.refetch()}>
           {t('authRetryStatus')}
         </Button>
       </SecurityCardFrame>

package/src/features/system-status/components/security-config.tsx

@@ -1,12 +1,11 @@
-import { PageHeader, PageLayout } from '@/app/components/layout/page-layout';
+import { SettingsPage } from '@/shared/components/settings/settings-page';
 import { t } from '@/shared/lib/i18n';
 import { RuntimeSecurityCard } from '@/features/system-status/components/runtime-security-card';
 
 export function SecurityConfig() {
   return (
-    <PageLayout className="space-y-6">
-      <PageHeader title={t('authSecurityTitle')} description={t('authSecurityDescription')} />
+    <SettingsPage title={t('authSecurityTitle')} description={t('authSecurityDescription')}>
       <RuntimeSecurityCard />
-    </PageLayout>
+    </SettingsPage>
   );
 }

package/src/features/system-status/pages/runtime-config-page.tsx

@@ -1,13 +1,18 @@
 import { useConfig, useUpdateRuntime } from '@/shared/hooks/use-config';
 import { RuntimeConfigEditor } from '@/features/system-status/components/config/runtime-config-editor';
 import { t } from '@/shared/lib/i18n';
+import { SettingsPage } from '@/shared/components/settings/settings-page';
 
 export function RuntimeConfig() {
   const { data: config, isLoading } = useConfig();
   const updateRuntime = useUpdateRuntime();
 
   if (isLoading || !config) {
-    return <div className="p-8 text-gray-400">{t('runtimeLoading')}</div>;
+    return (
+      <SettingsPage title={t('runtimePageTitle')} description={t('runtimePageDescription')}>
+        <div className='text-sm text-muted-foreground'>{t('runtimeLoading')}</div>
+      </SettingsPage>
+    );
   }
 
   return <RuntimeConfigEditor config={config} updateRuntime={updateRuntime} />;

package/src/platforms/desktop/components/desktop-app-shell.tsx

@@ -73,7 +73,7 @@ export function DesktopAppShell({
         <DesktopWindowChrome sidebarCollapsed={isSidebarCollapsed} />
       ) : null}
       <div className="flex min-h-0 flex-1 overflow-hidden">
-        {!isMainRoute && <Sidebar mode="settings" />}
+        {!isMainRoute && <Sidebar />}
         <div className="flex-1 flex min-w-0 overflow-hidden relative">
           <div className="flex-1 flex flex-col min-w-0 overflow-hidden">
             {isMainRoute ? (

package/src/platforms/mobile/components/mobile-settings-shell.tsx

@@ -1,10 +1,10 @@
 import { NavLink } from "react-router-dom";
-import { getMobileSettingsNavItems } from "@/app/configs/app-navigation.config";
+import { getSettingsNavItems } from "@/app/configs/app-navigation.config";
 import { t } from "@/shared/lib/i18n";
 import { cn } from "@/shared/lib/utils";
 
 export function MobileSettingsShell() {
-  const settingsNavItems = getMobileSettingsNavItems(t);
+  const settingsNavItems = getSettingsNavItems(t);
 
   return (
     <div

package/src/shared/components/__tests__/config-split-page.test.tsx

@@ -1,5 +1,5 @@
 import { render, screen } from "@testing-library/react";
-import { describe, expect, it } from "vitest";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import {
   ConfigSplitDetailPane,
   ConfigSplitPage,
@@ -8,10 +8,22 @@ import {
 import { I18nProvider } from "@/app/components/i18n-provider";
 
 describe("ConfigSplitPage", () => {
+  beforeEach(() => {
+    Object.defineProperty(HTMLElement.prototype, "clientWidth", { configurable: true, value: 500 });
+    vi.stubGlobal("ResizeObserver", class {
+      constructor(private readonly callback: ResizeObserverCallback) {}
+      observe = () => this.callback([], this as unknown as ResizeObserver);
+      disconnect = () => {};
+      unobserve = () => {};
+    });
+  });
+
+  afterEach(() => vi.unstubAllGlobals());
+
   it("shows only the list pane in mobile list mode", () => {
     render(
       <I18nProvider>
-        <ConfigSplitPage mobileView="list" mobileListLabel="Providers">
+        <ConfigSplitPage compactView="list" mobileListLabel="Providers">
           <ConfigSplitSidebar>
             <div data-testid="config-list-pane">List Pane</div>
           </ConfigSplitSidebar>
@@ -29,7 +41,7 @@ describe("ConfigSplitPage", () => {
   it("shows the detail pane and back affordance in mobile detail mode", () => {
     render(
       <I18nProvider>
-        <ConfigSplitPage mobileView="detail" mobileListLabel="Providers">
+        <ConfigSplitPage compactView="detail" mobileListLabel="Providers">
           <ConfigSplitSidebar>
             <div data-testid="config-list-pane">List Pane</div>
           </ConfigSplitSidebar>

package/src/shared/components/__tests__/settings-page.test.tsx

@@ -0,0 +1,31 @@
+import { render, screen } from '@testing-library/react';
+import { SettingsPage } from '@/shared/components/settings/settings-page';
+
+describe('SettingsPage', () => {
+  it('owns the shared settings canvas and title rhythm', () => {
+    render(
+      <SettingsPage title='Settings' description='Description'>
+        <div data-testid='settings-content'>Content</div>
+      </SettingsPage>
+    );
+
+    const page = screen.getByRole('heading', { name: 'Settings' }).parentElement?.parentElement?.parentElement;
+    expect(page?.className).toContain('w-full');
+    expect(page?.className).toContain('space-y-6');
+    expect(page?.className).not.toContain('max-w-5xl');
+    expect(screen.getByTestId('settings-content')).toBeTruthy();
+  });
+
+  it('adds only the shared list-detail behavior for split pages', () => {
+    render(
+      <SettingsPage title='Providers' layout='split'>
+        <div>Provider content</div>
+      </SettingsPage>
+    );
+
+    const page = screen.getByRole('heading', { name: 'Providers' }).parentElement?.parentElement?.parentElement;
+    expect(page?.className).toContain('md:flex');
+    expect(page?.className).toContain('md:min-h-0');
+    expect(page?.className).toContain('pb-0');
+  });
+});