refactor(desktop): componentize the settings page container + residual sweep

apps/desktop/src/renderer/settings/about-settings-page.tsx

@@ -10,7 +10,7 @@ import {
   useUiLocale,
 } from '@maka/ui';
 import { SettingRow } from './settings-rows';
-import { SettingsActions, SettingsSection } from './settings-section';
+import { SettingsActions, SettingsPage, SettingsSection } from './settings-section';
 import { settingsActionErrorMessage } from './settings-error-copy';
 import { SettingsSkeletonStack } from './settings-skeleton';
 import { useActionGuard } from './use-action-guard';
@@ -73,13 +73,13 @@ export function AboutSettingsPage() {
 
   if (!info) {
     return (
-      <div className="settingsStructuredPage">
+      <SettingsPage>
         <Banner
           status="info"
           role="alert"
           title={copy.unavailable}
           description={infoError} />
-      </div>
+      </SettingsPage>
     );
   }
 
@@ -125,7 +125,7 @@ export function AboutSettingsPage() {
   }
 
   return (
-    <div className="settingsAboutPage">
+    <SettingsPage>
       <PageHeader
         as_wrapper="div"
         className="settingsAboutHero"
@@ -180,11 +180,11 @@ export function AboutSettingsPage() {
         />
         <SettingsActions>
           <Button variant="primary" isDisabled={copyingEnvSummary} aria-describedby={envSummaryHelpId} onClick={() => void copyEnvSummary()} label={copyingEnvSummary ? copy.copying : copy.copyEnvironment} />
-          <p id={envSummaryHelpId} className="settingsHelpText">
+          <p id={envSummaryHelpId}>
             {copy.copyHelp}
           </p>
         </SettingsActions>
       </SettingsSection>
-    </div>
+    </SettingsPage>
   );
 }

apps/desktop/src/renderer/settings/appearance-settings-page.tsx

@@ -8,7 +8,7 @@ import {
   Text,
   VStack,
 } from '@astryxdesign/core';
-import { SettingsField, SettingsRow, SettingsSection } from './settings-section';
+import { SettingsField, SettingsPage, SettingsRow, SettingsSection } from './settings-section';
 import type {
   AppSettings,
   PersonalizationSettings,
@@ -36,7 +36,7 @@ export function AppearanceSettingsPage(props: {
   onThemePaletteChange(palette: ThemePalette): void;
 }) {
   return (
-    <div className="settingsStructuredPage">
+    <SettingsPage>
       {/* Designer audit P2-13: 显示名称/界面语言/语气偏好 are identity, not
           appearance — PersonalizationSettingsPage now renders on the 通用
           page. The duplicated 主题 section heading is gone too: the page IS
@@ -49,7 +49,7 @@ export function AppearanceSettingsPage(props: {
         onThemeChange={props.onThemeChange}
         onThemePaletteChange={props.onThemePaletteChange}
       />
-    </div>
+    </SettingsPage>
   );
 }
 
@@ -172,7 +172,7 @@ export function PersonalizationSettingsPage(props: {
   }
 
   return (
-    <div className="settingsStructuredPage">
+    <SettingsPage>
       {/* These editable values stay in the same grouped Settings card as the
           neighboring preferences; the full-width tone field uses the vertical
           row variant. */}
@@ -232,7 +232,7 @@ export function PersonalizationSettingsPage(props: {
           />
         </SettingsField>
       </SettingsSection>
-    </div>
+    </SettingsPage>
   );
 }
 
@@ -346,7 +346,7 @@ function ThemeSettingsPage(props: {
   }
 
   return (
-    <div className="settingsStructuredPage">
+    <SettingsPage>
       {/* Both option grids are Astryx `Grid` + `SelectableCard`. SelectableCard
           is documented for exactly this ("plan pickers, filter chips, or option
           grids") and already owns the surface, the hover / pressed / focus
@@ -419,6 +419,6 @@ function ThemeSettingsPage(props: {
           </VStack>
         ))}
       </SettingsSection>
-    </div>
+    </SettingsPage>
   );
 }

apps/desktop/src/renderer/settings/bot-chat-detail.tsx

@@ -243,8 +243,8 @@ export function BotChatChannelDetail(props: {
           <dl className="settingsBotStatusGrid" aria-label={detailCopy.runtimeAria(providerPresentation.label)}>
             <div><dt>{detailCopy.identity}</dt><dd>{status?.identity?.username ?? status?.identity?.displayName ?? detailCopy.unknownIdentity}</dd></div>
             <div><dt>{detailCopy.connectionType}</dt><dd>{botConnectionLabel(status?.connection ?? 'none', locale)}</dd></div>
-            <div><dt>{detailCopy.lastEvent}</dt><dd>{status?.lastEventAt ? <RelativeTime ts={status.lastEventAt} className="settingsBotMetaTime" /> : detailCopy.noneYet}</dd></div>
-            <div><dt>{detailCopy.lastTest}</dt><dd>{channel.lastTestAt ? <RelativeTime ts={channel.lastTestAt} className="settingsBotMetaTime" /> : detailCopy.neverTested}</dd></div>
+            <div><dt>{detailCopy.lastEvent}</dt><dd>{status?.lastEventAt ? <RelativeTime ts={status.lastEventAt} /> : detailCopy.noneYet}</dd></div>
+            <div><dt>{detailCopy.lastTest}</dt><dd>{channel.lastTestAt ? <RelativeTime ts={channel.lastTestAt} /> : detailCopy.neverTested}</dd></div>
           </dl>
         </section>
 

apps/desktop/src/renderer/settings/claude-subscription-card.tsx

@@ -362,7 +362,7 @@ export function ClaudeSubscriptionCard() {
             />
           )}
           <Text type="supporting" color="secondary">
-            {copy.updated}<RelativeTime ts={state.quota.fetchedAt} className="settingsHelpInlineTime" />
+            {copy.updated}<RelativeTime ts={state.quota.fetchedAt} />
           </Text>
         </VStack>
       )}

apps/desktop/src/renderer/settings/daily-review-settings-page.tsx

@@ -1,11 +1,11 @@
 import { useEffect, useMemo, useState } from 'react';
-import { Banner, VStack } from '@astryxdesign/core';
+import { Banner } from '@astryxdesign/core';
 import type { DailyReviewConfig, LlmConnection } from '@maka/core';
 import { Selector, Switch, TextInput, useMountedRef, useToast, useUiLocale } from '@maka/ui';
 import { buildCatalogDailyReviewModelOptions } from '../model-catalog-choices';
 import { getDailyReviewSettingsCopy, type DailyReviewSettingsCopy } from '../locales/settings-daily-review-copy';
 import { settingsActionErrorMessage } from './settings-error-copy';
-import { SettingsRow, SettingsSection } from './settings-section';
+import { SettingsPage, SettingsRow, SettingsSection } from './settings-section';
 import { useActionGuard } from './use-action-guard';
 
 const DAILY_REVIEW_DEFAULT_MODEL_VALUE = '__maka_daily_review_default_model__';
@@ -93,7 +93,7 @@ export function DailyReviewSettingsPage(props: { connections: readonly LlmConnec
   const selectedModelValue = config?.modelKey.trim() || DAILY_REVIEW_DEFAULT_MODEL_VALUE;
 
   return (
-    <VStack className="settingsFormPage settingsStructuredPage" gap={6} aria-label={copy.aria}>
+    <SettingsPage aria-label={copy.aria}>
       {!hasConfigIpc ? <Banner status="info" title={copy.unavailable} /> : null}
       {loadError ? <Banner status="error" title={copy.loadFailed(loadError)} /> : null}
 
@@ -153,6 +153,6 @@ export function DailyReviewSettingsPage(props: { connections: readonly LlmConnec
           />}
         />
       </SettingsSection>
-    </VStack>
+    </SettingsPage>
   );
 }

apps/desktop/src/renderer/settings/data-settings-page.tsx

@@ -11,7 +11,7 @@ import {
   Banner,
 } from '@maka/ui';
 import { openPathFailureCopy, openPathActionLabel } from '../open-path';
-import { SettingsActions, SettingsField, SettingsSection } from './settings-section';
+import { SettingsActions, SettingsField, SettingsPage, SettingsSection } from './settings-section';
 import { SettingRow } from './settings-rows';
 import { settingsActionErrorMessage } from './settings-error-copy';
 import { useActionGuard } from './use-action-guard';
@@ -183,7 +183,7 @@ export function DataSettingsPage() {
   }
 
   return (
-    <div className="settingsStructuredPage">
+    <SettingsPage>
       <SettingsSection
         title={sharedCopy.groups.dataLocation}
         description={sharedCopy.groups.dataLocationHelp}
@@ -299,6 +299,6 @@ export function DataSettingsPage() {
           <Button variant="secondary" isDisabled={configBusy !== null} onClick={() => void importConfig()} label={configBusy === 'import' ? copy.importing : copy.importConfig} />
         </SettingsActions>
       </SettingsSection>
-    </div>
+    </SettingsPage>
   );
 }

apps/desktop/src/renderer/settings/general-settings-page.tsx

@@ -1,6 +1,6 @@
 import { useMemo, useState } from 'react';
 import { PersonalizationSettingsPage } from './appearance-settings-page';
-import { SettingsActions, SettingsField, SettingsRow, SettingsSection } from './settings-section';
+import { SettingsActions, SettingsField, SettingsPage, SettingsRow, SettingsSection } from './settings-section';
 import type {
   AppSettings,
   ChatDefaultPermissionMode,
@@ -56,7 +56,7 @@ export function GeneralSettingsPage(props: {
     onReloadSettings: props.onReloadSettings,
   });
   return (
-    <div className="settingsStructuredPage">
+    <SettingsPage>
       {/* Designer audit P2-13: identity fields (显示名称/界面语言/语气偏好)
           moved here from the 外观 page — they configure who you are to the
           app, not how the app looks. The component keeps its save flow. */}
@@ -124,7 +124,7 @@ export function GeneralSettingsPage(props: {
       <SettingsSection title={sections.network} description={sections.networkHelp}>
         <NetworkProxySection settings={props.settings} onUpdate={props.onUpdate} />
       </SettingsSection>
-    </div>
+    </SettingsPage>
   );
 }
 

apps/desktop/src/renderer/settings/health-center-page.tsx

@@ -9,7 +9,7 @@ import { Text, VStack } from '@astryxdesign/core';
 import { Button, RelativeTime, StatusDot, useUiLocale, Banner } from '@maka/ui';
 import { getHealthCenterCopy, type HealthCenterCopy } from '../locales/settings-health-copy';
 import { settingsActionErrorMessage } from './settings-error-copy';
-import { SettingsRow, SettingsSection } from './settings-section';
+import { SettingsPage, SettingsRow, SettingsSection } from './settings-section';
 import { SettingsSkeletonStack } from './settings-skeleton';
 import { statusBadgeVariant } from './settings-status-badge';
 
@@ -65,13 +65,13 @@ export function HealthCenterPage() {
 
   if (error || !snapshot) {
     return (
-      <div className="settingsStructuredPage">
+      <SettingsPage>
         <Banner
           status="error"
           title={copy.readFailed}
           description={error ?? copy.noData}
           endContent={<Button variant="primary" onClick={() => setRefreshTick((tick) => tick + 1)} label={copy.readAgain} />} />
-      </div>
+      </SettingsPage>
     );
   }
 
@@ -88,7 +88,7 @@ export function HealthCenterPage() {
   ];
 
   return (
-    <div className="settingsStructuredPage">
+    <SettingsPage>
       <SettingsSection
         description={(
           <>
@@ -98,7 +98,7 @@ export function HealthCenterPage() {
         action={(
           <div className="settingsFormRowControlCluster">
             <small className="settingsHealthMetaLabel">
-              {copy.lastRead}<RelativeTime ts={healthCheckedAtMs} className="settingsHelpInlineTime" />
+              {copy.lastRead}<RelativeTime ts={healthCheckedAtMs} />
             </small>
             <Button
               variant="secondary"
@@ -151,10 +151,8 @@ export function HealthCenterPage() {
         })}
       </SettingsSection>
 
-      <p className="settingsHealthFootnote">
-        {copy.footnote}
-      </p>
-    </div>
+      <Text as="p" type="supporting" size="sm" color="secondary">{copy.footnote}</Text>
+    </SettingsPage>
   );
 }
 
@@ -178,7 +176,7 @@ function HealthSignalRow(props: { signal: HealthSignal; copy: HealthCenterCopy }
           {detail && <small>{detail}</small>}
           <span className="settingsHealthSignalMeta">
             <span>{copy.source}{copy.sources[signal.source]}</span>
-            <span>{copy.checked}<RelativeTime ts={signal.checkedAt} className="settingsHelpInlineTime" /></span>
+            <span>{copy.checked}<RelativeTime ts={signal.checkedAt} /></span>
             {signal.blocksSend && <span data-tone="destructive">{copy.blocksSend}</span>}
             {signal.blocksCapability && <span data-tone="warning">{copy.blocksCapability}</span>}
           </span>

apps/desktop/src/renderer/settings/memory-entry-list.tsx

@@ -48,7 +48,7 @@ export function MemoryEntryList(props: {
                 <small className="settingsMemoryEntryFacts">
                   {entry.updatedAt !== undefined && (
                     <span>
-                      {props.copy.text.updated}<RelativeTime ts={entry.updatedAt} className="settingsHelpInlineTime" />
+                      {props.copy.text.updated}<RelativeTime ts={entry.updatedAt} />
                     </span>
                   )}
                 </small>

apps/desktop/src/renderer/settings/memory-settings-page.tsx

@@ -14,7 +14,7 @@ import {
 } from '@maka/ui';
 import { getMemorySettingsCopy } from '../locales/settings-memory-copy';
 import { getSettingsSharedCopy } from '../locales/settings-shared-copy.js';
-import { SettingsActions, SettingsField, SettingsRow, SettingsSection } from './settings-section';
+import { SettingsActions, SettingsField, SettingsPage, SettingsRow, SettingsSection } from './settings-section';
 import { MemoryEntryList } from './memory-entry-list';
 import { MemoryPromptPreviewSection } from './memory-settings-sections';
 import { useMemoryDocumentController } from './use-memory-settings-controller';
@@ -93,7 +93,7 @@ export function MemorySettingsPage(props: {
   const entryActionsBlocked = memoryControlsDisabled || effective.status === 'incognito_blocked' || !effective.enabled;
 
   return (
-    <div className="settingsStructuredPage">
+    <SettingsPage>
       <SettingsSection description={sharedCopy.groups.memorySourcesHelp}>
         <SettingsRow
           label={copy.text.localFile}
@@ -426,6 +426,6 @@ export function MemorySettingsPage(props: {
         copyPending={isMemoryActionPending('memory:prompt-preview:copy')}
         onCopy={copyLocalMemoryPromptPreview}
       />}
-    </div>
+    </SettingsPage>
   );
 }

apps/desktop/src/renderer/settings/permission-center-page.tsx

@@ -29,7 +29,7 @@ import {
   VStack,
 } from '@astryxdesign/core';
 import { RelativeTime, StatusDot, useMountedRef, useToast, useUiLocale } from '@maka/ui';
-import { SettingsSection } from './settings-section';
+import { SettingsPage, SettingsSection } from './settings-section';
 import { getPermissionCenterCopy, type PermissionCenterCopy } from '../locales/permission-center-copy';
 import { settingsActionErrorMessage } from './settings-error-copy';
 import { statusDotVariant } from './settings-status-badge';
@@ -173,7 +173,7 @@ export function PermissionCenterPage() {
   const counts = summarizePermissionStatuses(permissions);
 
   return (
-    <VStack gap={5} className="settingsStructuredPage">
+    <SettingsPage>
       {/* The page opened with a SectionHeader whose title was the page title
           VERBATIM (权限与能力 twice, ~40px apart) and whose subtitle restated
           the 系统权限 section's own help line below it. Worse, the refresh
@@ -189,7 +189,7 @@ export function PermissionCenterPage() {
         action={(
           <div className="settingsFormRowControlCluster">
             <Text type="supporting" size="sm" color="secondary">
-              {copy.lastRead}<RelativeTime ts={checkedAtMs} className="settingsHelpInlineTime" />
+              {copy.lastRead}<RelativeTime ts={checkedAtMs} />
             </Text>
             <Button
               variant="secondary"
@@ -259,7 +259,7 @@ export function PermissionCenterPage() {
       </SettingsSection>
 
       <Text type="supporting" size="sm" color="secondary">{copy.footnote}</Text>
-    </VStack>
+    </SettingsPage>
   );
 }
 

apps/desktop/src/renderer/settings/settings-section.tsx

@@ -28,6 +28,35 @@ import type { ReactNode } from 'react';
 import { Divider, Heading, HStack, Item, Text, VStack } from '@astryxdesign/core';
 import { cn } from '@maka/ui';
 
+/**
+ * The ONE page-root container: a flat list of `SettingsSection`s at the open
+ * idiom's 32px rhythm. Pages used to reach for the bare
+ * `.settingsStructuredPage` class; the kit owns the container now, so a page
+ * never references page-layout CSS directly.
+ *
+ * Class is `settingsPageStack`, NOT `settingsPage` — `.settingsModal.settingsPage`
+ * is the pre-existing fullscreen-shell modifier and must not match this rule.
+ * Deliberately a `div` + kit-owned `.settingsPageStack` grid (nav-sidebar.css),
+ * NOT an Astryx `VStack`: the #1362 fix needs grid's `minmax(0, 1fr)`
+ * explicit column. In a flex stack a stretched child keeps its
+ * `min-width: auto` min-content floor, so one wide child (a scrollable
+ * `<pre>`, a long mono path) would poke past the content column again.
+ */
+export function SettingsPage(props: {
+  className?: string;
+  /** `section` when the page is a labeled landmark of a larger surface. */
+  as?: 'div' | 'section';
+  'aria-label'?: string;
+  children: ReactNode;
+}) {
+  const Tag = props.as ?? 'div';
+  return (
+    <Tag className={cn('settingsPageStack', props.className)} aria-label={props['aria-label']}>
+      {props.children}
+    </Tag>
+  );
+}
+
 export function SettingsSection(props: {
   /** Group label. Omit only for a page's single unlabeled lead group. */
   title?: ReactNode;