From b5e4c57e9375913e1e3be722a32b8019f7f267cc Mon Sep 17 00:00:00 2001
From: Zak Bearman <Zak@amslabs.net>
Date: Sun, 6 Sep 2026 17:42:28 +1200
Subject: [PATCH] Simplify settings workspace and fix responsive admin controls

---
 frontend/app/admin/SettingField.tsx     |  72 ++
 frontend/app/admin/SettingsPage.tsx     | 907 +++---------------------
 frontend/app/admin/SettingsRegion.tsx   |  13 +
 frontend/app/admin/config.css           | 106 +++
 frontend/app/admin/configNavigation.ts  |  34 +
 frontend/app/admin/diagnostics/page.tsx |  14 +-
 frontend/app/admin/page.tsx             | 376 ++--------
 frontend/app/globals.css                |   5 +-
 frontend/app/layout.tsx                 |   1 +
 frontend/app/ui/AdminShell.tsx          |   2 +-
 frontend/app/ui/AdminSidebar.tsx        | 103 +--
 frontend/app/ui/WorkspaceNavigation.tsx |  19 +-
 scripts/review_settings_ui.cjs          | 164 +++++
 13 files changed, 600 insertions(+), 1216 deletions(-)
 create mode 100644 frontend/app/admin/SettingField.tsx
 create mode 100644 frontend/app/admin/SettingsRegion.tsx
 create mode 100644 frontend/app/admin/config.css
 create mode 100644 frontend/app/admin/configNavigation.ts
 create mode 100644 scripts/review_settings_ui.cjs

diff --git a/frontend/app/admin/SettingField.tsx b/frontend/app/admin/SettingField.tsx
new file mode 100644
index 0000000..c0e40a8
--- /dev/null
+++ b/frontend/app/admin/SettingField.tsx
@@ -0,0 +1,72 @@
+'use client'
+
+export type AdminSetting = { key: string; value: string | null; isSet: boolean; source: string; sensitive: boolean }
+type Option = { value: string; label: string }
+type Props = {
+  setting: AdminSetting
+  label: string
+  value: string
+  help?: string
+  placeholder?: string
+  boolean?: boolean
+  numeric?: boolean
+  multiline?: boolean
+  options?: Option[]
+  optionsUnavailable?: boolean
+  onChange: (value: string) => void
+}
+
+const SELECTS: Record<string, Option[]> = {
+  log_level: ['DEBUG', 'INFO', 'WARNING', 'ERROR'].map((value) => ({ value, label: value })),
+  issue_confirmation_contact_attempts: Array.from({ length: 11 }, (_, index) => ({ value: String(index), label: index === 0 ? 'None — close when fixed' : String(index) })),
+  issue_confirmation_interval_unit: ['days', 'weeks', 'months'].map((value) => ({ value, label: value[0].toUpperCase() + value.slice(1) })),
+  artwork_cache_mode: [{ value: 'remote', label: 'Load from the internet' }, { value: 'cache', label: 'Store locally' }],
+  site_banner_tone: ['info', 'warning', 'error', 'maintenance'].map((value) => ({ value, label: value[0].toUpperCase() + value.slice(1) })),
+  magent_notify_push_provider: ['ntfy', 'gotify', 'pushover', 'webhook', 'telegram', 'discord'].map((value) => ({ value, label: value })),
+  requests_data_source: [{ value: 'always_js', label: 'Read directly from Seerr' }, { value: 'prefer_cache', label: 'Use saved requests' }],
+}
+
+export default function SettingField(props: Props) {
+  const { setting, label, value, help, placeholder, onChange } = props
+  const id = `setting-${setting.key}`
+  const options = props.options ?? SELECTS[setting.key] ?? (setting.key === 'log_http_client_level' || setting.key === 'log_background_sync_level' ? SELECTS.log_level : undefined)
+  const selectedOptions = options && value && !options.some((option) => option.value === value)
+    ? [{ value, label: `Current selection (${value})` }, ...options] : options
+  const isTime = setting.key === 'requests_full_sync_time' || setting.key === 'requests_cleanup_time'
+  const zeroAllowed = setting.key === 'log_file_backup_count'
+  const minimum = zeroAllowed ? 0 : 1
+  const maximum = setting.key === 'issue_confirmation_interval_value' ? 365 : setting.key.endsWith('_port') ? 65535 : undefined
+  const aria = { id, name: setting.key, 'aria-describedby': help ? `${id}-help` : undefined }
+
+  if (props.boolean) {
+    return (
+      <div className="setting-field setting-switch">
+        <div><label htmlFor={id}>{label}</label>{help && <p id={`${id}-help`}>{help}</p>}</div>
+        <input {...aria} type="checkbox" role="switch" checked={value.toLowerCase() === 'true'} onChange={(event) => onChange(String(event.target.checked))} />
+      </div>
+    )
+  }
+
+  return (
+    <div className={`setting-field ${props.multiline ? 'field-span-full' : ''}`}>
+      <label htmlFor={id}>{label}{setting.sensitive && setting.isSet && <small>Saved</small>}</label>
+      {props.optionsUnavailable ? (
+        <select {...aria} disabled value={value}><option value={value}>Save the connection, then reload available options</option></select>
+      ) : selectedOptions ? (
+        <select {...aria} value={value} onChange={(event) => onChange(event.target.value)}>
+          {!value && <option value="">Choose an option</option>}
+          {selectedOptions.map((option) => <option key={option.value} value={option.value}>{option.label}</option>)}
+        </select>
+      ) : props.multiline ? (
+        <textarea {...aria} rows={setting.key.includes('_pem') ? 6 : 3} value={value} placeholder={placeholder} onChange={(event) => onChange(event.target.value)} />
+      ) : (
+        <input {...aria} type={setting.sensitive ? 'password' : props.numeric ? 'number' : isTime ? 'time' : 'text'}
+          value={value} min={props.numeric ? minimum : undefined} max={props.numeric ? maximum : undefined} step={props.numeric ? 1 : undefined}
+          autoComplete={setting.sensitive ? 'new-password' : 'off'} spellCheck={false}
+          placeholder={setting.sensitive && setting.isSet ? 'Leave blank to keep the saved value' : placeholder}
+          onChange={(event) => onChange(event.target.value)} />
+      )}
+      {help && <p id={`${id}-help`}>{help}</p>}
+    </div>
+  )
+}
diff --git a/frontend/app/admin/SettingsPage.tsx b/frontend/app/admin/SettingsPage.tsx
index b62bdb3..98f91b5 100644
--- a/frontend/app/admin/SettingsPage.tsx
+++ b/frontend/app/admin/SettingsPage.tsx
@@ -3,7 +3,9 @@
 import { useRouter } from 'next/navigation'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { authFetch, clearToken, getApiBase, getEventStreamToken, getToken } from '../lib/auth'
-import AdminDiagnosticsPanel from '../ui/AdminDiagnosticsPanel'
+import SettingField from './SettingField'
+import SettingsRegion from './SettingsRegion'
+import { serviceStatusLabel } from './configNavigation'
 import AdminShell from '../ui/AdminShell'
 
 type AdminSetting = {
@@ -27,8 +29,8 @@ type ServiceStatus = {
 
 const SECTION_LABELS: Record<string, string> = {
   magent: 'Magent',
-  general: 'General',
-  notifications: 'Notifications',
+  general: 'Hosting & proxy',
+  notifications: 'Email & notifications',
   seerr: 'Seerr',
   jellyseerr: 'Seerr',
   jellyfin: 'Jellyfin',
@@ -40,10 +42,10 @@ const SECTION_LABELS: Record<string, string> = {
   prowlarr: 'Prowlarr',
   qbittorrent: 'qBittorrent',
   logs: 'Activity log',
-  maintenance: 'Maintenance',
-  requests: 'Request pipeline',
-  'issue-workflow': 'Issue workflow',
-  site: 'Site & login',
+  maintenance: 'Recovery & cleanup',
+  requests: 'Request updates',
+  'issue-workflow': 'Issue follow-up',
+  site: 'Site & sign-in',
 }
 
 const BOOL_SETTINGS = new Set([
@@ -72,22 +74,6 @@ const TEXTAREA_SETTINGS = new Set([
   'magent_ssl_certificate_pem',
   'magent_ssl_private_key_pem',
 ])
-const URL_SETTINGS = new Set([
-  'magent_application_url',
-  'magent_api_url',
-  'magent_proxy_base_url',
-  'magent_notify_discord_webhook_url',
-  'magent_notify_push_base_url',
-  'magent_notify_webhook_url',
-  'jellyseerr_base_url',
-  'jellyfin_base_url',
-  'jellyfin_public_url',
-  'sonarr_base_url',
-  'radarr_base_url',
-  'bazarr_base_url',
-  'prowlarr_base_url',
-  'qbittorrent_base_url',
-])
 const NUMBER_SETTINGS = new Set([
   'magent_application_port',
   'magent_api_port',
@@ -101,15 +87,14 @@ const NUMBER_SETTINGS = new Set([
   'issue_confirmation_contact_attempts',
   'issue_confirmation_interval_value',
 ])
-const BANNER_TONES = ['info', 'warning', 'error', 'maintenance']
 
 const SECTION_DESCRIPTIONS: Record<string, string> = {
   magent:
     'Magent service settings. Runtime and notification controls are organized under General and Notifications.',
   general:
-    'Application runtime, binding, reverse proxy, and manual SSL settings for the Magent UI/API.',
+    'Public addresses and advanced deployment settings.',
   notifications:
-    'Notification providers and delivery channel settings used by Magent messaging features.',
+    'Choose how Magent sends invitations, password resets and issue updates.',
   seerr: 'Connect Seerr where users submit content requests.',
   jellyseerr: 'Connect Seerr where users submit content requests.',
   jellyfin: 'Jellyfin connection, public playback links, user sync, and availability checks.',
@@ -124,7 +109,7 @@ const SECTION_DESCRIPTIONS: Record<string, string> = {
   'issue-workflow': 'Control reporter confirmation, reminder timing, and automatic issue closure.',
   logs: 'Control log output and inspect recent application activity for troubleshooting.',
   maintenance: 'Repair cached data, clean historical records, and run recovery operations.',
-  site: 'Sitewide banner, login page visibility, and version details. The changelog is generated from git history during release builds.',
+  site: 'Announcements and sign-in options for your users.',
 }
 
 const SETTINGS_SECTION_MAP: Record<string, string | null> = {
@@ -156,17 +141,20 @@ const MAGENT_SECTION_GROUPS: Array<{
 }> = [
   {
     key: 'magent-runtime',
-    title: 'Application',
+    title: 'Public addresses',
     description:
-      'Canonical application/API URLs and port defaults for the Magent UI/API endpoints.',
+      'Addresses used in links from Magent.',
     keys: [
       'magent_application_url',
-      'magent_application_port',
       'magent_api_url',
-      'magent_api_port',
-      'magent_bind_host',
     ],
   },
+  {
+    key: 'magent-binding',
+    title: 'Deployment ports',
+    description: 'Stored preferences do not change Docker port mappings. Update the deployment and restart to change listening ports.',
+    keys: ['magent_application_port', 'magent_api_port', 'magent_bind_host'],
+  },
   {
     key: 'magent-proxy',
     title: 'Proxy',
@@ -181,9 +169,9 @@ const MAGENT_SECTION_GROUPS: Array<{
   },
   {
     key: 'magent-ssl',
-    title: 'Manual SSL Bind',
+    title: 'Direct TLS settings',
     description:
-      'Optional direct TLS binding values. Paste PEM certificate and private key or provide file paths.',
+      'For direct hosting only. The beta deployment terminates HTTPS at its reverse proxy.',
     keys: [
       'magent_ssl_bind_enabled',
       'magent_ssl_certificate_path',
@@ -255,7 +243,7 @@ const MAGENT_SECTION_GROUPS: Array<{
 ]
 
 const MAGENT_GROUPS_BY_SECTION: Record<string, Set<string>> = {
-  general: new Set(['magent-runtime', 'magent-proxy', 'magent-ssl']),
+  general: new Set(['magent-runtime', 'magent-binding', 'magent-proxy', 'magent-ssl']),
   notifications: new Set([
     'magent-notify-core',
     'magent-notify-email',
@@ -291,8 +279,8 @@ const SITE_SECTION_GROUPS: Array<{
   },
   {
     key: 'site-navigation',
-    title: 'Beta Navigation',
-    description: 'Temporarily show or hide beta navigation entries while new request pipelines are built.',
+    title: 'Navigation',
+    description: 'Control new requests in the navigation.',
     keys: ['site_nav_show_requests'],
   },
 ]
@@ -390,12 +378,17 @@ const STANDARD_SECTION_GROUPS: Record<
     },
   ],
   requests: [
+    {
+      key: 'requests-advanced',
+      title: 'Advanced scheduling',
+      description: 'How frequently the background worker checks whether a full refresh is due.',
+      keys: ['requests_poll_interval_seconds'],
+    },
     {
       key: 'requests-sync',
       title: 'Synchronization Schedule',
       description: 'Control incremental checks and the scheduled full request-cache rebuild.',
       keys: [
-        'requests_poll_interval_seconds',
         'requests_delta_sync_interval_minutes',
         'requests_full_sync_time',
       ],
@@ -587,6 +580,7 @@ const SERVICE_TEST_ENDPOINTS: Record<string, string> = {
   'jellyfin-connection': 'jellyfin',
   'sonarr-connection': 'sonarr',
   'radarr-connection': 'radarr',
+  'bazarr-connection': 'bazarr',
   'prowlarr-connection': 'prowlarr',
   'qbittorrent-connection': 'qbittorrent',
 }
@@ -620,7 +614,6 @@ export default function SettingsPage({ section }: SettingsPageProps) {
   const [artworkSummary, setArtworkSummary] = useState<any | null>(null)
   const [artworkSummaryStatus, setArtworkSummaryStatus] = useState<string | null>(null)
   const [maintenanceStatus, setMaintenanceStatus] = useState<string | null>(null)
-  const [maintenanceBusy, setMaintenanceBusy] = useState(false)
   const [liveStreamConnected, setLiveStreamConnected] = useState(false)
   const [serviceStatuses, setServiceStatuses] = useState<ServiceStatus[]>([])
   const [serviceStatusCheckedAt, setServiceStatusCheckedAt] = useState<string | null>(null)
@@ -658,7 +651,9 @@ export default function SettingsPage({ section }: SettingsPageProps) {
       throw new Error('Failed to load settings')
     }
     const data = await response.json()
-    const fetched = Array.isArray(data?.settings) ? data.settings : []
+    const fetched: AdminSetting[] = Array.isArray(data?.settings)
+      ? data.settings.map((item: AdminSetting) => ({ ...item, value: item.value == null ? null : String(item.value) }))
+      : []
     setSettings(fetched)
     const initialValues: Record<string, string> = {}
     for (const setting of fetched) {
@@ -814,6 +809,7 @@ export default function SettingsPage({ section }: SettingsPageProps) {
     jellyfin: ['Jellyfin'],
     sonarr: ['Sonarr'],
     radarr: ['Radarr'],
+    bazarr: ['Bazarr'],
     prowlarr: ['Prowlarr'],
     qbittorrent: ['qBittorrent', 'Qbittorrent'],
   }
@@ -821,16 +817,13 @@ export default function SettingsPage({ section }: SettingsPageProps) {
   const currentServiceStatus = serviceStatuses.find((service) =>
     statusNames.some((name) => name.toLowerCase() === service.name.toLowerCase())
   )
-  const currentServiceConfigured = currentServiceStatus
-    ? currentServiceStatus.status !== 'not_configured'
-    : null
   const isMagentGroupedSection = section === 'magent' || section === 'general' || section === 'notifications'
   const isSiteGroupedSection = section === 'site'
   const isCacheSection = section === 'cache'
   const isArtworkSection = section === 'artwork'
   const cacheSettingKeys = new Set(['requests_sync_ttl_minutes', 'requests_data_source'])
   const artworkSettingKeys = new Set(['artwork_cache_mode'])
-  const generatedSettingKeys = new Set(['site_changelog'])
+  const generatedSettingKeys = new Set(['site_changelog', 'site_build_number'])
   const hiddenSettingKeys = new Set([...cacheSettingKeys, ...artworkSettingKeys, ...generatedSettingKeys])
   const obsoleteSettingKeys = new Set([
     'sonarr_qbittorrent_category',
@@ -920,7 +913,7 @@ export default function SettingsPage({ section }: SettingsPageProps) {
     if (showRequestsExtras && sectionGroup.key === 'requests-sync') return true
     return false
   }
-  const renderedSettingsSections = settingsSections.filter(shouldRenderSection)
+  const renderedSettingsSections = settingsSections.filter(shouldRenderSection).sort((a, b) => Number(a.key === 'requests-advanced') - Number(b.key === 'requests-advanced'))
 
   useEffect(() => {
     requestsSyncRef.current = requestsSync
@@ -1092,27 +1085,6 @@ export default function SettingsPage({ section }: SettingsPageProps) {
     qbittorrent_base_url: 'https://qb.example.com or 10.30.1.81:8080',
   }
 
-  const buildSelectOptions = (
-    currentValue: string,
-    options: { id: number; label: string; path?: string }[],
-    includePath: boolean
-  ) => {
-    const optionValues = new Set(options.map((option) => String(option.id)))
-    const list = options.map((option) => (
-      <option key={option.id} value={String(option.id)}>
-        {includePath && option.path ? option.path : option.label}
-      </option>
-    ))
-    if (currentValue && !optionValues.has(currentValue)) {
-      list.unshift(
-        <option key="custom" value={currentValue}>
-          Custom: {currentValue}
-        </option>
-      )
-    }
-    return list
-  }
-
   const parseActionError = (err: unknown, fallback: string) => {
     if (err instanceof Error && err.message) {
       return err.message.replace(/^\\{"detail":"|"\\}$/g, '')
@@ -1159,6 +1131,8 @@ export default function SettingsPage({ section }: SettingsPageProps) {
         throw new Error(text || 'Update failed')
       }
       await loadSettings(new Set(sectionGroup.items.map((item) => item.key)))
+      if (sectionGroup.key === 'sonarr-connection') await loadOptions('sonarr')
+      if (sectionGroup.key === 'radarr-connection') await loadOptions('radarr')
       if (options?.successMessage !== null) {
         setSectionFeedback((current) => ({
           ...current,
@@ -1223,11 +1197,6 @@ export default function SettingsPage({ section }: SettingsPageProps) {
     })
     setSectionTesting((current) => ({ ...current, [sectionGroup.key]: true }))
     try {
-      const saved = await saveSettingGroup(sectionGroup, { successMessage: null })
-      if (!saved) {
-        return
-      }
-
       const baseUrl = getApiBase()
       if (sectionGroup.key === 'magent-notify-email') {
         const recipientEmail =
@@ -1268,6 +1237,7 @@ export default function SettingsPage({ section }: SettingsPageProps) {
         throw new Error(text || 'Connection test failed')
       }
       const data = await response.json()
+      await loadServiceStatuses()
       setSectionFeedback((current) => ({
         ...current,
         [sectionGroup.key]: formatServiceTestFeedback(data),
@@ -1529,8 +1499,8 @@ export default function SettingsPage({ section }: SettingsPageProps) {
         }
       } catch (err) {
         if (closed) return
-        console.error(err)
         setLiveStreamConnected(false)
+        console.error(err)
       }
     }
 
@@ -1729,52 +1699,6 @@ export default function SettingsPage({ section }: SettingsPageProps) {
     }
   }
 
-  const runFlushAndResync = async () => {
-    setMaintenanceStatus(null)
-    setMaintenanceBusy(true)
-    if (typeof window !== 'undefined') {
-      const ok = window.confirm(
-        'This will perform a nuclear reset: clear cached requests/history, wipe non-admin users, invites, and profiles, then re-sync users and requests from Seerr. Continue?'
-      )
-      if (!ok) {
-        setMaintenanceBusy(false)
-        return
-      }
-    }
-    try {
-      const baseUrl = getApiBase()
-      setMaintenanceStatus('Running nuclear flush...')
-      const flushResponse = await authFetch(`${baseUrl}/admin/maintenance/flush`, {
-        method: 'POST',
-      })
-      if (!flushResponse.ok) {
-        const text = await flushResponse.text()
-        throw new Error(text || 'Flush failed')
-      }
-      const flushData = await flushResponse.json()
-      const usersCleared = Number(flushData?.userObjectsCleared?.users ?? 0)
-      setMaintenanceStatus(`Nuclear flush complete. Cleared ${usersCleared} non-admin users. Re-syncing users...`)
-      const usersResyncResponse = await authFetch(`${baseUrl}/admin/jellyseerr/users/resync`, {
-        method: 'POST',
-      })
-      if (!usersResyncResponse.ok) {
-        const text = await usersResyncResponse.text()
-        throw new Error(text || 'User resync failed')
-      }
-      const usersResyncData = await usersResyncResponse.json()
-      setMaintenanceStatus(
-        `Users re-synced (${usersResyncData?.imported ?? 0} imported). Starting request re-sync...`
-      )
-      await syncRequests()
-      setMaintenanceStatus('Nuclear flush complete. User and request re-sync running now.')
-    } catch (err) {
-      console.error(err)
-      setMaintenanceStatus('Nuclear flush + resync failed.')
-    } finally {
-      setMaintenanceBusy(false)
-    }
-  }
-
   const clearLogFile = async () => {
     setMaintenanceStatus(null)
     try {
@@ -1794,112 +1718,29 @@ export default function SettingsPage({ section }: SettingsPageProps) {
     }
   }
 
-  const cacheSourceLabel =
-    formValues.requests_data_source === 'always_js'
-      ? 'Seerr direct'
-      : formValues.requests_data_source === 'prefer_cache'
-        ? 'Saved requests only'
-        : 'Saved requests only'
-  const cacheTtlLabel = formValues.requests_sync_ttl_minutes || '60'
-  const maintenanceRail = showMaintenance ? (
-    <div className="admin-rail-stack">
-      <div className="admin-rail-card">
-        <span className="admin-rail-eyebrow">Maintenance</span>
-        <h2>Admin tools</h2>
-        <p>Repair, cleanup, diagnostics, and nuclear resync are grouped into a single operating page.</p>
-      </div>
-      <div className="admin-rail-card cache-rail-card">
-        <span className="admin-rail-eyebrow">Runtime</span>
-        <h2>Service state</h2>
-        <div className="cache-rail-metrics">
-          <div className="cache-rail-metric">
-            <span>Maintenance job</span>
-            <strong>{maintenanceBusy ? 'Running' : 'Idle'}</strong>
-          </div>
-          <div className="cache-rail-metric">
-            <span>Log lines in view</span>
-            <strong>{logsLines.length}</strong>
-          </div>
-          <div className="cache-rail-metric">
-            <span>Last tool status</span>
-            <strong>{maintenanceStatus || 'Idle'}</strong>
-          </div>
-        </div>
-      </div>
-    </div>
-  ) : undefined
-  const cacheRail = showCacheExtras ? (
-    <div className="admin-rail-card cache-rail-card">
-        <span className="admin-rail-eyebrow">Cache control</span>
-        <h2>Saved requests</h2>
-        <p>Load and inspect cached request entries from the right rail.</p>
-        <div className="cache-rail-metrics">
-          <div className="cache-rail-metric">
-            <span>Data source</span>
-            <strong>{cacheSourceLabel}</strong>
-          </div>
-          <div className="cache-rail-metric">
-            <span>Refresh TTL</span>
-            <strong>{cacheTtlLabel} min</strong>
-          </div>
-          <div className="cache-rail-metric">
-            <span>Rows loaded</span>
-            <strong>{cacheRows.length}</strong>
-          </div>
-          <div className="cache-rail-metric">
-            <span>Live updates</span>
-            <strong>{liveStreamConnected ? 'Connected' : 'Polling'}</strong>
-          </div>
-        </div>
-        <label className="cache-rail-limit">
-          <span>Rows to load</span>
-          <select
-            value={cacheCount}
-            onChange={(event) => setCacheCount(Number(event.target.value))}
-          >
-            <option value={25}>25</option>
-            <option value={50}>50</option>
-            <option value={100}>100</option>
-            <option value={200}>200</option>
-          </select>
-        </label>
-        <button type="button" onClick={loadCache} disabled={cacheLoading}>
-          {cacheLoading ? (
-            <>
-              <span className="spinner button-spinner" aria-hidden="true" />
-              Loading saved requests
-            </>
-          ) : (
-            'Load saved requests'
-          )}
-        </button>
-        {cacheStatus && <div className="error-banner">{cacheStatus}</div>}
-    </div>
-  ) : undefined
-  const artworkRail = showArtworkExtras ? (
-    <div className="admin-rail-card cache-rail-card">
-        <span className="admin-rail-eyebrow">Artwork</span>
-        <h2>Cache stats</h2>
-        <div className="cache-rail-metrics">
-          <div className="cache-rail-metric">
-            <span>Missing artwork</span>
-            <strong>{artworkSummary?.missing_artwork ?? '--'}</strong>
-          </div>
-          <div className="cache-rail-metric">
-            <span>Cache size</span>
-            <strong>{formatBytes(artworkSummary?.cache_bytes)}</strong>
-          </div>
-          <div className="cache-rail-metric">
-            <span>Cached files</span>
-            <strong>{artworkSummary?.cache_files ?? '--'}</strong>
-          </div>
-          <div className="cache-rail-metric">
-            <span>Mode</span>
-            <strong>{artworkSummary?.cache_mode ?? '--'}</strong>
-          </div>
-        </div>
-    </div>
-  ) : undefined
+  const groupIsDirty = (group: SettingsSectionGroup) => group.items.some((item) => {
+    const current = (formValues[item.key] ?? '').trim()
+    const saved = item.sensitive ? '' : (item.value ?? '').trim()
+    return BOOL_SETTINGS.has(item.key)
+      ? (current.toLowerCase() === 'true') !== (saved.toLowerCase() === 'true')
+      : current !== saved
+  })
+  const discardGroup = (group: SettingsSectionGroup) => {
+    setFormValues((current) => {
+      const next = { ...current }
+      for (const item of group.items) next[item.key] = item.sensitive ? '' : item.value ?? ''
+      return next
+    })
+    setSectionFeedback((current) => ({ ...current, [group.key]: { tone: 'status', message: 'Unsaved changes discarded.' } }))
+  }
+  const collapsedGroup = (group: SettingsSectionGroup) => {
+    if (['magent-binding', 'magent-proxy', 'magent-ssl', 'site-navigation', 'requests-advanced', 'logs-rotation', 'logs-components'].includes(group.key) || group.key.endsWith('-additional')) return true
+    if (group.key.startsWith('magent-notify-') && !['magent-notify-core', 'magent-notify-email'].includes(group.key)) {
+      const enabled = group.items.find((item) => item.key.endsWith('_enabled'))
+      return !enabled || String(enabled.value).toLowerCase() !== 'true'
+    }
+    return false
+  }
 
   if (loading) {
     return <main className="card">Loading admin settings...</main>
@@ -1909,7 +1750,6 @@ export default function SettingsPage({ section }: SettingsPageProps) {
     <AdminShell
       title={SECTION_LABELS[section] ?? 'Settings'}
       subtitle={SECTION_DESCRIPTIONS[section] ?? 'Manage settings.'}
-      rail={maintenanceRail ?? cacheRail ?? artworkRail}
       actions={
         <button type="button" onClick={() => router.push('/admin')}>
           Back to settings
@@ -1917,59 +1757,21 @@ export default function SettingsPage({ section }: SettingsPageProps) {
       }
     >
       {status && <div className="error-banner">{status}</div>}
-      {currentServiceStatus ? (
-        <section className="admin-section admin-zone service-status-panel">
-          <div className="service-status-summary">
-            <span className={`system-dot system-dot-${currentServiceStatus.status}`} aria-hidden="true" />
-            <div>
-              <span className="section-kicker">Connection status</span>
-              <h2>{currentServiceStatus.name}</h2>
-              <p className="section-subtitle">
-                {currentServiceStatus.message ?? 'No service message was returned.'}
-              </p>
-            </div>
-          </div>
-          <div className="service-status-grid">
-            <div>
-              <span>Status</span>
-              <strong>{currentServiceStatus.status.replaceAll('_', ' ')}</strong>
-            </div>
-            <div>
-              <span>Configuration</span>
-              <strong>{currentServiceConfigured ? 'Configured' : 'Not configured'}</strong>
-            </div>
-            <div>
-              <span>Last checked</span>
-              <strong>
-                {serviceStatusCheckedAt ? new Date(serviceStatusCheckedAt).toLocaleString() : 'Not checked yet'}
-              </strong>
-            </div>
-            <button type="button" className="ghost-button" onClick={() => void loadServiceStatuses()}>
-              Refresh status
-            </button>
-          </div>
-        </section>
-      ) : null}
-      {renderedSettingsSections.length > 1 ? (
-        <nav className="config-subsection-nav" aria-label={`${SECTION_LABELS[section] ?? 'Settings'} subsections`}>
-          <span>On this page</span>
-          <div>
-            {renderedSettingsSections.map((sectionGroup, index) => (
-              <a key={sectionGroup.key} href={`#config-${sectionGroup.key}`}>
-                <small>{String(index + 1).padStart(2, '0')}</small>
-                {sectionGroup.title}
-              </a>
-            ))}
-          </div>
-        </nav>
-      ) : null}
+      {currentServiceStatus && (
+        <div className="config-service-status" role="status">
+          <span className={`config-connection-badge is-${currentServiceStatus.status}`}>{serviceStatusLabel(currentServiceStatus.status)}</span>
+          <span>{serviceStatusCheckedAt ? `Checked at ${new Date(serviceStatusCheckedAt).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}` : 'Not checked yet'}</span>
+          <button type="button" className="ghost-button" onClick={() => void loadServiceStatuses()}>Refresh status</button>
+        </div>
+      )}
       {renderedSettingsSections.length > 0 ? (
       <div className="admin-form admin-zone-stack">
-        {renderedSettingsSections.map((sectionGroup, sectionIndex) => (
-          <section id={`config-${sectionGroup.key}`} key={sectionGroup.key} className="admin-section admin-zone config-subsection">
+        {renderedSettingsSections.map((sectionGroup) => (
+          <SettingsRegion id={`config-${sectionGroup.key}`} key={sectionGroup.key} title={sectionGroup.title} collapsed={collapsedGroup(sectionGroup)}>
+          <form onSubmit={(event) => { event.preventDefault(); void saveSettingGroup(sectionGroup) }}>
+
             <div className="section-header">
               <div className="config-subsection-heading">
-                <span className="section-kicker">Subsection {String(sectionIndex + 1).padStart(2, '0')}</span>
                 <h2>{sectionGroup.title}</h2>
               </div>
               {sectionGroup.key === 'sonarr-library' && (
@@ -2023,12 +1825,6 @@ export default function SettingsPage({ section }: SettingsPageProps) {
                 {sectionGroup.description || SECTION_DESCRIPTIONS[sectionGroup.key]}
               </p>
             )}
-            {section === 'general' && sectionGroup.key === 'magent-runtime' && (
-              <div className="status-banner">
-                Runtime host/port and SSL values are configuration settings. Container/process
-                restarts may still be required before bind/port changes take effect.
-              </div>
-            )}
             {sectionGroup.key === 'sonarr-library' && sonarrError && (
               <div className="error-banner">{sonarrError}</div>
             )}
@@ -2073,12 +1869,6 @@ export default function SettingsPage({ section }: SettingsPageProps) {
             {showRequestsExtras && sectionGroup.key === 'requests-sync' && requestsSyncStatus && (
               <div className="status-banner">{requestsSyncStatus}</div>
             )}
-            {showRequestsExtras && sectionGroup.key === 'requests-sync' && (
-              <div className="status-banner">
-                Full refresh checks only decide when to run a full refresh. The delta sync interval
-                polls for new or updated requests.
-              </div>
-            )}
             {showArtworkExtras && sectionGroup.key === 'artwork' && artworkPrefetch && (
               <div className="sync-progress">
                 <div className="sync-meta">
@@ -2132,452 +1922,22 @@ export default function SettingsPage({ section }: SettingsPageProps) {
               </div>
             )}
             <div className="admin-grid">
-              {sectionGroup.items.map((setting) => {
-                const value = formValues[setting.key] ?? ''
-                const helperText = settingDescriptions[setting.key]
-                const isSonarrProfile = setting.key === 'sonarr_quality_profile_id'
-                const isSonarrRoot = setting.key === 'sonarr_root_folder'
-                const isRadarrProfile = setting.key === 'radarr_quality_profile_id'
-                const isRadarrRoot = setting.key === 'radarr_root_folder'
-                const isBoolSetting = BOOL_SETTINGS.has(setting.key)
-                const isUrlSetting = URL_SETTINGS.has(setting.key)
-                const inputPlaceholder = setting.sensitive && setting.isSet
-                  ? 'Configured (enter to replace)'
-                  : settingPlaceholders[setting.key] ?? ''
-                if (isBoolSetting) {
-                  return (
-                    <label key={setting.key} data-helper={helperText || undefined}>
-                      <span className="label-row">
-                        <span>{labelFromKey(setting.key)}</span>
-                        <span className="meta">
-                          {setting.isSet ? `Source: ${setting.source}` : 'Not set'}
-                        </span>
-                      </span>
-                      <select
-                        name={setting.key}
-                        value={value || 'false'}
-                        onChange={(event) =>
-                          setFormValues((current) => ({
-                            ...current,
-                            [setting.key]: event.target.value,
-                          }))
-                        }
-                      >
-                        <option value="true">Enabled</option>
-                        <option value="false">Disabled</option>
-                      </select>
-                    </label>
-                  )
-                }
-                if (isSonarrProfile && sonarrOptions) {
-                  return (
-                    <label key={setting.key} data-helper={helperText || undefined}>
-                      <span className="label-row">
-                        <span>{labelFromKey(setting.key)}</span>
-                    <span className="meta">
-                      {setting.isSet ? `Source: ${setting.source}` : 'Not set'}
-                      {setting.sensitive && setting.isSet ? ' • stored' : ''}
-                    </span>
-                      </span>
-                      <select
-                        name={setting.key}
-                        value={value}
-                        onChange={(event) =>
-                          setFormValues((current) => ({
-                            ...current,
-                            [setting.key]: event.target.value,
-                          }))
-                        }
-                      >
-                        <option value="">Select a quality profile</option>
-                        {buildSelectOptions(value, sonarrOptions.qualityProfiles, false)}
-                      </select>
-                    </label>
-                  )
-                }
-                if (isSonarrRoot && sonarrOptions) {
-                  return (
-                    <label key={setting.key} data-helper={helperText || undefined}>
-                      <span className="label-row">
-                        <span>{labelFromKey(setting.key)}</span>
-                        <span className="meta">
-                          {setting.isSet ? `Source: ${setting.source}` : 'Not set'}
-                          {setting.sensitive && setting.isSet ? ' • stored' : ''}
-                        </span>
-                      </span>
-                      <select
-                        name={setting.key}
-                        value={value}
-                        onChange={(event) =>
-                          setFormValues((current) => ({
-                            ...current,
-                            [setting.key]: event.target.value,
-                          }))
-                        }
-                      >
-                        <option value="">Select a root folder</option>
-                        {buildSelectOptions(value, sonarrOptions.rootFolders, true)}
-                      </select>
-                    </label>
-                  )
-                }
-                if (isRadarrProfile && radarrOptions) {
-                  return (
-                    <label key={setting.key} data-helper={helperText || undefined}>
-                      <span className="label-row">
-                        <span>{labelFromKey(setting.key)}</span>
-                        <span className="meta">
-                          {setting.isSet ? `Source: ${setting.source}` : 'Not set'}
-                          {setting.sensitive && setting.isSet ? ' • stored' : ''}
-                        </span>
-                      </span>
-                      <select
-                        name={setting.key}
-                        value={value}
-                        onChange={(event) =>
-                          setFormValues((current) => ({
-                            ...current,
-                            [setting.key]: event.target.value,
-                          }))
-                        }
-                      >
-                        <option value="">Select a quality profile</option>
-                        {buildSelectOptions(value, radarrOptions.qualityProfiles, false)}
-                      </select>
-                    </label>
-                  )
-                }
-                if (isRadarrRoot && radarrOptions) {
-                  return (
-                    <label key={setting.key} data-helper={helperText || undefined}>
-                      <span className="label-row">
-                        <span>{labelFromKey(setting.key)}</span>
-                        <span className="meta">
-                          {setting.isSet ? `Source: ${setting.source}` : 'Not set'}
-                          {setting.sensitive && setting.isSet ? ' • stored' : ''}
-                        </span>
-                      </span>
-                      <select
-                        name={setting.key}
-                        value={value}
-                        onChange={(event) =>
-                          setFormValues((current) => ({
-                            ...current,
-                            [setting.key]: event.target.value,
-                          }))
-                        }
-                      >
-                        <option value="">Select a root folder</option>
-                        {buildSelectOptions(value, radarrOptions.rootFolders, true)}
-                      </select>
-                    </label>
-                  )
-                }
-                if (setting.key === 'log_level') {
-                  return (
-                    <label key={setting.key} data-helper={helperText || undefined}>
-                      <span className="label-row">
-                        <span>{labelFromKey(setting.key)}</span>
-                        <span className="meta">
-                          {setting.isSet ? `Source: ${setting.source}` : 'Not set'}
-                        </span>
-                      </span>
-                      <select
-                        name={setting.key}
-                        value={value}
-                        onChange={(event) =>
-                          setFormValues((current) => ({
-                            ...current,
-                            [setting.key]: event.target.value,
-                          }))
-                        }
-                      >
-                        <option value="DEBUG">DEBUG</option>
-                        <option value="INFO">INFO</option>
-                        <option value="WARNING">WARNING</option>
-                        <option value="ERROR">ERROR</option>
-                      </select>
-                    </label>
-                  )
-                }
-                if (
-                  setting.key === 'log_http_client_level' ||
-                  setting.key === 'log_background_sync_level'
-                ) {
-                  return (
-                    <label key={setting.key} data-helper={helperText || undefined}>
-                      <span className="label-row">
-                        <span>{labelFromKey(setting.key)}</span>
-                        <span className="meta">
-                          {setting.isSet ? `Source: ${setting.source}` : 'Not set'}
-                        </span>
-                      </span>
-                      <select
-                        name={setting.key}
-                        value={value || 'INFO'}
-                        onChange={(event) =>
-                          setFormValues((current) => ({
-                            ...current,
-                            [setting.key]: event.target.value,
-                          }))
-                        }
-                      >
-                        <option value="DEBUG">DEBUG</option>
-                        <option value="INFO">INFO</option>
-                        <option value="WARNING">WARNING</option>
-                        <option value="ERROR">ERROR</option>
-                      </select>
-                    </label>
-                  )
-                }
-                if (setting.key === 'artwork_cache_mode') {
-                  return (
-                    <label key={setting.key} data-helper={helperText || undefined}>
-                      <span className="label-row">
-                        <span>{labelFromKey(setting.key)}</span>
-                        <span className="meta">
-                          {setting.isSet ? `Source: ${setting.source}` : 'Not set'}
-                        </span>
-                      </span>
-                      <select
-                        name={setting.key}
-                        value={value || 'remote'}
-                        onChange={(event) =>
-                          setFormValues((current) => ({
-                            ...current,
-                            [setting.key]: event.target.value,
-                          }))
-                        }
-                      >
-                        <option value="remote">Pull from the internet</option>
-                        <option value="cache">Cache locally</option>
-                      </select>
-                    </label>
-                  )
-                }
-                if (setting.key === 'site_banner_tone') {
-                  return (
-                    <label key={setting.key} data-helper={helperText || undefined}>
-                      <span className="label-row">
-                        <span>{labelFromKey(setting.key)}</span>
-                        <span className="meta">
-                          {setting.isSet ? `Source: ${setting.source}` : 'Not set'}
-                        </span>
-                      </span>
-                      <select
-                        name={setting.key}
-                        value={value || 'info'}
-                        onChange={(event) =>
-                          setFormValues((current) => ({
-                            ...current,
-                            [setting.key]: event.target.value,
-                          }))
-                        }
-                      >
-                        {BANNER_TONES.map((tone) => (
-                          <option key={tone} value={tone}>
-                            {tone.charAt(0).toUpperCase() + tone.slice(1)}
-                          </option>
-                        ))}
-                      </select>
-                    </label>
-                  )
-                }
-                if (setting.key === 'magent_notify_push_provider') {
-                  return (
-                    <label key={setting.key} data-helper={helperText || undefined}>
-                      <span className="label-row">
-                        <span>{labelFromKey(setting.key)}</span>
-                        <span className="meta">
-                          {setting.isSet ? `Source: ${setting.source}` : 'Not set'}
-                        </span>
-                      </span>
-                      <select
-                        name={setting.key}
-                        value={value || 'ntfy'}
-                        onChange={(event) =>
-                          setFormValues((current) => ({
-                            ...current,
-                            [setting.key]: event.target.value,
-                          }))
-                        }
-                      >
-                        <option value="ntfy">ntfy</option>
-                        <option value="gotify">Gotify</option>
-                        <option value="pushover">Pushover</option>
-                        <option value="webhook">Webhook</option>
-                        <option value="telegram">Telegram relay</option>
-                        <option value="discord">Discord relay</option>
-                      </select>
-                    </label>
-                  )
-                }
-                if (
-                  setting.key === 'requests_full_sync_time' ||
-                  setting.key === 'requests_cleanup_time'
-                ) {
-                  return (
-                    <label key={setting.key} data-helper={helperText || undefined}>
-                      <span className="label-row">
-                        <span>{labelFromKey(setting.key)}</span>
-                        <span className="meta">
-                          {setting.isSet ? `Source: ${setting.source}` : 'Not set'}
-                        </span>
-                      </span>
-                      <input
-                        name={setting.key}
-                        type="time"
-                        value={value}
-                        onChange={(event) =>
-                          setFormValues((current) => ({
-                            ...current,
-                            [setting.key]: event.target.value,
-                          }))
-                        }
-                      />
-                    </label>
-                  )
-                }
-                if (NUMBER_SETTINGS.has(setting.key)) {
-                  return (
-                    <label key={setting.key} data-helper={helperText || undefined}>
-                      <span className="label-row">
-                        <span>{labelFromKey(setting.key)}</span>
-                        <span className="meta">
-                          {setting.isSet ? `Source: ${setting.source}` : 'Not set'}
-                        </span>
-                      </span>
-                      <input
-                        name={setting.key}
-                        type="number"
-                        min={setting.key === 'issue_confirmation_contact_attempts' ? 0 : 1}
-                        max={setting.key === 'issue_confirmation_contact_attempts' ? 10 : setting.key === 'issue_confirmation_interval_value' ? 365 : undefined}
-                        step={1}
-                        value={value}
-                        onChange={(event) =>
-                          setFormValues((current) => ({
-                            ...current,
-                            [setting.key]: event.target.value,
-                          }))
-                        }
-                      />
-                    </label>
-                  )
-                }
-                if (setting.key === 'issue_confirmation_interval_unit') {
-                  return (
-                    <label key={setting.key} data-helper={helperText || undefined}>
-                      <span className="label-row">
-                        <span>{labelFromKey(setting.key)}</span>
-                        <span className="meta">
-                          {setting.isSet ? `Source: ${setting.source}` : 'Not set'}
-                        </span>
-                      </span>
-                      <select
-                        name={setting.key}
-                        value={value || 'days'}
-                        onChange={(event) =>
-                          setFormValues((current) => ({
-                            ...current,
-                            [setting.key]: event.target.value,
-                          }))
-                        }
-                      >
-                        <option value="days">Days</option>
-                        <option value="weeks">Weeks</option>
-                        <option value="months">Months</option>
-                      </select>
-                    </label>
-                  )
-                }
-                if (setting.key === 'requests_data_source') {
-                  return (
-                    <label key={setting.key} data-helper={helperText || undefined}>
-                      <span className="label-row">
-                        <span>{labelFromKey(setting.key)}</span>
-                        <span className="meta">
-                          {setting.isSet ? `Source: ${setting.source}` : 'Not set'}
-                        </span>
-                      </span>
-                      <select
-                        name={setting.key}
-                        value={value || 'prefer_cache'}
-                        onChange={(event) =>
-                          setFormValues((current) => ({
-                            ...current,
-                            [setting.key]: event.target.value,
-                          }))
-                        }
-                      >
-                        <option value="always_js">Always use Seerr (slower)</option>
-                        <option value="prefer_cache">
-                          Use saved requests only (fastest)
-                        </option>
-                      </select>
-                    </label>
-                  )
-                }
-                if (TEXTAREA_SETTINGS.has(setting.key)) {
-                  const isPemField =
-                    setting.key === 'magent_ssl_certificate_pem' ||
-                    setting.key === 'magent_ssl_private_key_pem'
-                  const shouldSpanFull = isPemField || setting.key === 'site_banner_message'
-                  return (
-                    <label
-                      key={setting.key}
-                      data-helper={helperText || undefined}
-                      className={shouldSpanFull ? 'field-span-full' : undefined}
-                    >
-                      <span className="label-row">
-                        <span>{labelFromKey(setting.key)}</span>
-                        <span className="meta">
-                          {setting.isSet ? `Source: ${setting.source}` : 'Not set'}
-                          {setting.sensitive && setting.isSet ? '  stored' : ''}
-                        </span>
-                      </span>
-                      <textarea
-                        name={setting.key}
-                        rows={setting.key === 'site_changelog' ? 6 : isPemField ? 8 : 3}
-                        placeholder={
-                          setting.key === 'site_changelog'
-                            ? 'One update per line.'
-                            : settingPlaceholders[setting.key] ?? ''
-                        }
-                        value={value}
-                        onChange={(event) =>
-                          setFormValues((current) => ({
-                            ...current,
-                            [setting.key]: event.target.value,
-                          }))
-                        }
-                      />
-                    </label>
-                  )
-                }
-                return (
-                  <label key={setting.key} data-helper={helperText || undefined}>
-                    <span className="label-row">
-                      <span>{labelFromKey(setting.key)}</span>
-                        <span className="meta">
-                          {setting.isSet ? `Source: ${setting.source}` : 'Not set'}
-                          {setting.sensitive && setting.isSet ? ' • stored' : ''}
-                        </span>
-                    </span>
-                    <input
-                      name={setting.key}
-                      type={setting.sensitive ? 'password' : 'text'}
-                      placeholder={inputPlaceholder}
-                      autoComplete={isUrlSetting ? 'url' : undefined}
-                      value={value}
-                      onChange={(event) =>
-                        setFormValues((current) => ({
-                          ...current,
-                          [setting.key]: event.target.value,
-                        }))
-                      }
-                    />
-                  </label>
-                )
+              {sectionGroup.items.filter((setting) => {
+                const enableKey = sectionGroup.items.find((item) => item.key.endsWith('_enabled'))?.key
+                if (enableKey && setting.key !== enableKey && formValues[enableKey] !== 'true') return false
+                if (sectionGroup.key === 'issues-resolution-confirmation' && setting.key !== 'issue_confirmation_contact_attempts' && formValues.issue_confirmation_contact_attempts === '0') return false
+                return true
+              }).map((setting) => {
+                const service = setting.key.startsWith('sonarr_') ? sonarrOptions : radarrOptions
+                const isProfile = setting.key === 'sonarr_quality_profile_id' || setting.key === 'radarr_quality_profile_id'
+                const isRoot = setting.key === 'sonarr_root_folder' || setting.key === 'radarr_root_folder'
+                const options = isProfile ? service?.qualityProfiles.map((item) => ({ value: String(item.id), label: item.name || item.label }))
+                  : isRoot ? service?.rootFolders.map((item) => ({ value: String(item.id), label: item.path || item.label })) : undefined
+                return <SettingField key={setting.key} setting={setting} label={labelFromKey(setting.key)}
+                  value={formValues[setting.key] ?? ''} help={settingDescriptions[setting.key]} placeholder={settingPlaceholders[setting.key]}
+                  boolean={BOOL_SETTINGS.has(setting.key)} numeric={NUMBER_SETTINGS.has(setting.key)} multiline={TEXTAREA_SETTINGS.has(setting.key)}
+                  options={options} optionsUnavailable={(isRoot || isProfile) && !service}
+                  onChange={(value) => setFormValues((current) => ({ ...current, [setting.key]: value }))} />
               })}
             </div>
             {sectionFeedback[sectionGroup.key] && (
@@ -2592,6 +1952,11 @@ export default function SettingsPage({ section }: SettingsPageProps) {
               </div>
             )}
             <div className="settings-section-actions">
+              {groupIsDirty(sectionGroup) && <>
+                <span className="config-unsaved" role="status">Unsaved changes</span>
+                <button type="button" className="ghost-button" disabled={sectionSaving[sectionGroup.key] || sectionTesting[sectionGroup.key]} onClick={() => discardGroup(sectionGroup)}>Discard</button>
+              </>}
+
               {sectionGroup.key === 'magent-notify-email' ? (
                 <label className="settings-inline-field">
                   <span>Test email recipient</span>
@@ -2608,7 +1973,8 @@ export default function SettingsPage({ section }: SettingsPageProps) {
                   type="button"
                   className="ghost-button settings-action-button"
                   onClick={() => void testSettingGroup(sectionGroup)}
-                  disabled={sectionSaving[sectionGroup.key] || sectionTesting[sectionGroup.key]}
+                  disabled={groupIsDirty(sectionGroup) || sectionSaving[sectionGroup.key] || sectionTesting[sectionGroup.key]}
+                  title={groupIsDirty(sectionGroup) ? 'Save changes before testing.' : undefined}
                 >
                   {sectionTesting[sectionGroup.key]
                     ? 'Testing...'
@@ -2616,18 +1982,18 @@ export default function SettingsPage({ section }: SettingsPageProps) {
                 </button>
               ) : null}
               <button
-                type="button"
+                type="submit"
                 className="settings-action-button"
-                onClick={() => void saveSettingGroup(sectionGroup)}
-                disabled={sectionSaving[sectionGroup.key] || sectionTesting[sectionGroup.key]}
+                disabled={!groupIsDirty(sectionGroup) || sectionSaving[sectionGroup.key] || sectionTesting[sectionGroup.key]}
               >
-                {sectionSaving[sectionGroup.key] ? 'Saving...' : `Save ${sectionGroup.title}`}
+                {sectionSaving[sectionGroup.key] ? 'Saving…' : 'Save changes'}
               </button>
             </div>
-          </section>
+          </form>
+          </SettingsRegion>
         ))}
       </div>
-      ) : (
+      ) : !showMaintenance && !showLogs && (
       <div className="status-banner">
         {section === 'magent'
           ? 'Magent runtime settings have moved to General. Notification provider settings have moved to Notifications.'
@@ -2663,8 +2029,13 @@ export default function SettingsPage({ section }: SettingsPageProps) {
       {showCacheExtras && (
       <section className="admin-section admin-zone" id="cache">
         <div className="section-header">
-          <h2>Saved requests (cache)</h2>
+          <h2>Saved requests</h2>
+          <div className="config-inline-controls">
+            <label>Rows <select value={cacheCount} onChange={(event) => setCacheCount(Number(event.target.value))}>{[25, 50, 100, 200].map((count) => <option key={count} value={count}>{count}</option>)}</select></label>
+            <button type="button" onClick={loadCache} disabled={cacheLoading}>{cacheLoading ? 'Loading…' : 'Load saved requests'}</button>
+          </div>
         </div>
+        {cacheStatus && <p className="error-banner" role="alert">{cacheStatus}</p>}
         <div className="cache-table">
           <div className="cache-row cache-head">
             <span>Request</span>
@@ -2699,14 +2070,9 @@ export default function SettingsPage({ section }: SettingsPageProps) {
             <div className="maintenance-panel-copy">
               <h3>Recovery and cleanup</h3>
               <p className="lede">
-                Run repair, cleanup, logging, and full reset actions from one place. Nuclear flush
-                wipes non-admin users, invite links, profiles, cached requests, and history before
-                re-syncing Seerr users and requests.
+                Repair the database or remove old history when troubleshooting.
               </p>
             </div>
-            <div className="status-banner">
-              Emergency tools. Use with care, especially on live data.
-            </div>
             {maintenanceStatus && <div className="status-banner">{maintenanceStatus}</div>}
             <div className="maintenance-action-grid">
               <div className="maintenance-action-card">
@@ -2736,56 +2102,9 @@ export default function SettingsPage({ section }: SettingsPageProps) {
                   Clear activity log
                 </button>
               </div>
-              <div className="maintenance-action-card maintenance-action-card-danger">
-                <div className="maintenance-action-copy">
-                  <h3>Nuclear flush + resync</h3>
-                  <p>Wipe non-admin user and request objects, then rebuild from Seerr.</p>
-                </div>
-                <button
-                  type="button"
-                  className="danger-button"
-                  onClick={runFlushAndResync}
-                  disabled={maintenanceBusy}
-                >
-                  {maintenanceBusy ? 'Running...' : 'Nuclear flush + resync'}
-                </button>
-              </div>
             </div>
           </div>
-          <AdminDiagnosticsPanel embedded />
-        </div>
-      </section>
-      )}
-      {showRequestsExtras && (
-      <section className="admin-section admin-zone" id="schedules">
-        <div className="section-header">
-          <h2>Scheduled tasks</h2>
-        </div>
-        <div className="status-banner">
-          Automated jobs keep requests and housekeeping up to date.
-        </div>
-        <div className="schedule-grid">
-          <div className="schedule-card">
-            <h3>Quick request check</h3>
-            <p>
-              Every {formValues.requests_delta_sync_interval_minutes || '5'} minutes, checks for
-              new or updated requests.
-            </p>
-          </div>
-          <div className="schedule-card">
-            <h3>Full daily refresh</h3>
-            <p>
-              Every day at {formValues.requests_full_sync_time || '00:00'}, refreshes the entire
-              requests list.
-            </p>
-          </div>
-          <div className="schedule-card">
-            <h3>History cleanup</h3>
-            <p>
-              Every day at {formValues.requests_cleanup_time || '02:00'}, removes history older
-              than {formValues.requests_cleanup_days || '90'} days.
-            </p>
-          </div>
+          <a className="config-tool-link" href="/admin/diagnostics">Open system health and diagnostics →</a>
         </div>
       </section>
       )}
diff --git a/frontend/app/admin/SettingsRegion.tsx b/frontend/app/admin/SettingsRegion.tsx
new file mode 100644
index 0000000..2392aa1
--- /dev/null
+++ b/frontend/app/admin/SettingsRegion.tsx
@@ -0,0 +1,13 @@
+'use client'
+
+import { useState, type ReactNode } from 'react'
+
+export default function SettingsRegion({ title, id, collapsed, children }: { title: string; id: string; collapsed: boolean; children: ReactNode }) {
+  const [open, setOpen] = useState(!collapsed)
+  return (
+    <section id={id} className={`admin-section admin-zone config-subsection ${open ? '' : 'is-collapsed'}`}>
+      {collapsed && <button type="button" className="config-region-toggle" aria-expanded={open} aria-controls={`${id}-content`} onClick={() => setOpen(!open)}><strong>{title}</strong><span>{open ? 'Hide' : 'Configure'} <b aria-hidden="true">{open ? '−' : '+'}</b></span></button>}
+      <div id={`${id}-content`} hidden={!open}>{children}</div>
+    </section>
+  )
+}
diff --git a/frontend/app/admin/config.css b/frontend/app/admin/config.css
new file mode 100644
index 0000000..49d65f1
--- /dev/null
+++ b/frontend/app/admin/config.css
@@ -0,0 +1,106 @@
+/* Settings workspace. Shared Stitch tokens, compact controls and clear regions. */
+.config-directory { display: grid; gap: 32px; max-width: 1120px; }
+.config-directory-region { display: grid; gap: 16px; }
+.config-directory-region header h2 { margin: 0 0 4px; font-size: 18px; }
+.config-directory-region header p { margin: 0; color: var(--ops-muted); font-size: 13px; }
+.config-directory-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
+.config-directory-link { display: flex; align-items: center; gap: 14px; padding: 18px; border: 1px solid var(--ops-line); border-radius: 10px; background: var(--ops-panel); color: var(--ops-text); text-decoration: none; min-width: 0; transition: border-color .15s, background .15s; }
+.config-directory-link:hover { border-color: var(--ops-primary-2); background: var(--ops-panel-2); }
+.config-link-icon { flex: 0 0 34px; display: grid; place-items: center; height: 34px; border-radius: 8px; background: var(--ops-primary); color: var(--ops-primary-2); font: 11px "JetBrains Mono", monospace; }
+.config-link-copy { display: grid; flex: 1; min-width: 0; gap: 4px; }
+.config-link-copy strong { font-size: 14px; }
+.config-link-copy small { font-size: 12px; font-weight: 400; color: var(--ops-muted); line-height: 1.5; }
+.config-link-arrow { color: var(--ops-faint); }
+.config-connection-badge { flex-shrink: 0; font: 11px "JetBrains Mono", monospace; color: var(--ops-muted); }
+.config-connection-badge::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 6px; background: currentColor; }
+.config-connection-badge.is-up { color: var(--ops-green); }
+.config-connection-badge.is-down { color: var(--ops-red); }
+.config-connection-badge.is-degraded { color: var(--ops-warn); }
+.config-advanced-directory { border: 1px solid var(--ops-line); border-radius: 10px; padding: 18px; }
+.config-advanced-directory > summary { cursor: pointer; color: var(--ops-text); }
+.config-advanced-directory > summary > span { margin-left: 12px; color: var(--ops-muted); font-size: 12px; }
+.config-advanced-directory[open] > summary { margin-bottom: 18px; }
+.config-sidebar-home { display: flex; justify-content: space-between; align-items: center; padding: 4px 10px 20px; font: 600 20px "DM Sans", sans-serif; text-decoration: none; color: var(--ops-primary-2); }
+.config-sidebar-back { display: block; margin-top: 20px; padding: 12px 10px; color: var(--ops-muted); font-size: 12px; }
+.config-desktop-navigation { display: grid; gap: 18px; }
+.admin-sidebar .admin-nav-links a { font: 13px Inter, sans-serif; padding: 8px 10px; min-height: 34px; }
+.admin-sidebar .admin-nav-title { font-size: 10px; }
+.config-nav-advanced > summary { cursor: pointer; padding: 8px 10px; font-size: 12px; color: var(--ops-muted); }
+.config-mobile-picker { display: none; }
+.admin-card { min-width: 0; }
+.admin-shell { grid-template-areas: "nav main"; }
+.admin-shell.admin-shell--with-rail { grid-template-areas: "nav main rail"; }
+.admin-shell--no-rail > .admin-card { width: 100%; max-width: 1280px; }
+.admin-card .admin-header { margin-bottom: 24px; }
+.admin-card .admin-header .lede { max-width: 720px; margin: 8px 0 0; font-size: 14px; }
+.admin-card .admin-header .section-kicker { font-size: 10px; }
+.config-service-status { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 20px; font-size: 12px; color: var(--ops-muted); }
+.config-service-status button { margin-left: auto; }
+.admin-form.admin-zone-stack { gap: 16px; }
+.admin-form .config-subsection { padding: 22px !important; }
+.config-subsection form { display: grid; gap: 18px; min-width: 0; }
+.config-subsection .section-header { margin: 0; padding: 0; border: 0; align-items: center; }
+.config-subsection .section-header h2 { font-size: 18px; padding: 0; }
+.config-subsection .section-header h2::after { display: none; }
+.config-subsection .section-subtitle { margin: -10px 0 0; font-size: 12px; line-height: 1.6; }
+.config-subsection .admin-grid { gap: 20px 24px; }
+.config-subsection .setting-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
+.config-subsection .setting-field > label, .config-subsection .setting-switch label { display: flex; align-items: center; gap: 10px; min-height: 0; padding: 0; margin: 0; border: 0; border-radius: 0; background: none; color: var(--ops-text); font: 500 13px Inter, sans-serif; text-transform: none; letter-spacing: 0; }
+.config-subsection .setting-field label small { color: var(--ops-green); font-size: 11px; font-weight: 400; }
+.config-subsection .setting-field p { margin: 0; color: var(--ops-muted); font: 400 12px/1.5 Inter, sans-serif; text-transform: none; }
+.config-subsection .setting-field input:not([type=checkbox]), .config-subsection .setting-field select, .config-subsection .setting-field textarea { margin: 0; width: 100%; min-width: 0; padding: 10px 12px; min-height: 42px; border: 1px solid var(--ops-line); background: var(--ops-bg-2); color: var(--ops-text); font: 400 13px/1.5 Inter, sans-serif; border-radius: 8px; }
+.config-subsection .setting-field input:focus-visible, .config-subsection .setting-field select:focus-visible, .config-subsection .setting-field textarea:focus-visible { outline: 2px solid var(--ops-primary-2); outline-offset: 2px; }
+.config-subsection .setting-field.field-span-full { grid-column: 1 / -1; }
+.config-subsection .setting-switch { flex-direction: row; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--ops-line-soft); gap: 24px; }
+.setting-switch > div { display: grid; gap: 6px; }
+.config-subsection .setting-switch input[type=checkbox] { appearance: none; -webkit-appearance: none; flex: 0 0 38px; width: 38px; height: 22px; min-height: 22px; padding: 2px; margin: 0; background: var(--ops-panel-3) !important; border: 1px solid var(--ops-line); border-radius: 20px !important; cursor: pointer; }
+.config-subsection .setting-switch input[type=checkbox]::before { content: ''; display: block; width: 16px; height: 16px; background: var(--ops-muted); border-radius: 50%; transition: transform .15s; }
+.config-subsection .setting-switch input[type=checkbox]:checked { background: var(--ops-primary-2) !important; border-color: var(--ops-primary-2) !important; }
+.config-subsection .setting-switch input[type=checkbox]:checked::before { background: var(--ops-primary); transform: translateX(16px); }
+.config-subsection .settings-section-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; padding-top: 16px; border-top: 1px solid var(--ops-line); }
+.config-subsection .settings-inline-field { padding: 0; border: 0; background: none; min-height: 0; flex: 1 1 230px; max-width: 330px; }
+.config-subsection .settings-inline-field span { font: 500 12px Inter, sans-serif; text-transform: none; }
+.config-subsection button { font: 600 12px "DM Sans", "Segoe UI", sans-serif; min-height: 38px; }
+.config-subsection .config-unsaved { margin-right: auto; font-size: 12px; color: var(--ops-warn); }
+.config-subsection .config-region-toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; border: 0; background: transparent !important; padding: 0; color: var(--ops-text); text-align: left; box-shadow: none; }
+.config-region-toggle strong { font-size: 15px; }
+.config-region-toggle > span { font-size: 12px; color: var(--ops-muted); }
+.config-region-toggle + div:not([hidden]) { margin-top: 18px; }
+.config-subsection [hidden] { display: none !important; }
+.config-region-toggle + div .config-subsection-heading { display: none; }
+.config-inline-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
+.config-inline-controls label { display: flex; align-items: center; gap: 8px; }
+.config-inline-controls select { width: auto; }
+.admin-card .maintenance-layout { grid-template-columns: 1fr; }
+.admin-card .cache-table, .admin-card .log-viewer { overflow-x: auto; max-width: 100%; }
+.admin-card .cache-row { min-width: 650px; }
+.config-tool-link { padding: 16px 0; color: var(--ops-primary-2); font-size: 13px; }
+
+@media (max-width: 1250px) {
+  .admin-shell.admin-shell--with-rail { grid-template-areas: "nav main"; }
+}
+@media (max-width: 1180px) {
+  .config-directory-links { grid-template-columns: 1fr; }
+}
+@media (max-width: 980px) {
+  .admin-shell-nav .admin-sidebar { display: block; padding: 12px 18px; }
+  .config-desktop-navigation { display: none; }
+  .config-mobile-picker { display: flex; align-items: center; gap: 16px; margin: 0; }
+  .config-mobile-picker > span { font: 500 12px Inter, sans-serif; color: var(--ops-muted); }
+  .config-mobile-picker select { flex: 1; width: 100%; min-width: 0; padding: 10px; font: 13px Inter, sans-serif; }
+}
+@media (max-width: 680px) {
+  .admin-form .admin-grid { grid-template-columns: 1fr; }
+  .admin-form .config-subsection { padding: 16px !important; }
+  .config-directory-link { flex-wrap: wrap; gap: 12px; padding: 14px; }
+  .config-link-copy { flex-basis: calc(100% - 62px); }
+  .config-directory-link .config-connection-badge { margin-left: 46px; }
+  .config-link-arrow { display: none; }
+  .config-advanced-directory > summary > span { display: block; margin: 8px 0 0; }
+  .admin-card .admin-header { align-items: flex-start; gap: 14px; flex-direction: column; }
+  .config-subsection .section-header { align-items: flex-start; gap: 12px; flex-wrap: wrap; }
+  .config-subsection .section-subtitle { margin-top: 0; }
+  .config-subsection .settings-section-actions > button { flex-grow: 1; }
+  .config-subsection .settings-section-actions .config-unsaved { flex-basis: 100%; }
+  .config-service-status { gap: 10px; }
+}
diff --git a/frontend/app/admin/configNavigation.ts b/frontend/app/admin/configNavigation.ts
new file mode 100644
index 0000000..5cc212d
--- /dev/null
+++ b/frontend/app/admin/configNavigation.ts
@@ -0,0 +1,34 @@
+type ConfigLink = { href: string; label: string; description: string; symbol?: string; service?: string }
+type ConfigGroup = { title: string; description: string; advanced?: boolean; items: ConfigLink[] }
+
+export const CONFIG_GROUPS: ConfigGroup[] = [
+  { title: 'Media services', description: 'Connect the services that collect, repair and play your content.', items: [
+    { href: '/admin/seerr', label: 'Seerr', description: 'Requests and approvals', symbol: 'SE', service: 'Seerr' },
+    { href: '/admin/jellyfin', label: 'Jellyfin', description: 'Playback and library availability', symbol: 'JF', service: 'Jellyfin' },
+    { href: '/admin/sonarr', label: 'Sonarr', description: 'TV collection and quality', symbol: 'SO', service: 'Sonarr' },
+    { href: '/admin/radarr', label: 'Radarr', description: 'Movie collection and quality', symbol: 'RA', service: 'Radarr' },
+    { href: '/admin/bazarr', label: 'Bazarr', description: 'Subtitle repairs', symbol: 'BA', service: 'Bazarr' },
+    { href: '/admin/prowlarr', label: 'Prowlarr', description: 'Search sources', symbol: 'PR', service: 'Prowlarr' },
+    { href: '/admin/qbittorrent', label: 'qBittorrent', description: 'Download progress and recovery', symbol: 'QB', service: 'qBittorrent' },
+  ]},
+  { title: 'Preferences & access', description: 'Set the experience for your users and how issues are followed up.', items: [
+    { href: '/admin/site', label: 'Site & sign-in', description: 'Announcements and login options', symbol: '01' },
+    { href: '/admin/notifications', label: 'Email & notifications', description: 'Invites, password resets and repair updates', symbol: '02' },
+    { href: '/admin/issue-workflow', label: 'Issue follow-up', description: 'Confirmation emails and automatic closure', symbol: '03' },
+    { href: '/admin/requests', label: 'Request updates', description: 'Refresh schedule and history retention', symbol: '04' },
+    { href: '/users', label: 'Users', description: 'Accounts, email addresses and permissions', symbol: '05' },
+    { href: '/admin/invites', label: 'Invite policy & access', description: 'Defaults, profiles and issued invites', symbol: '06' },
+  ]},
+  { title: 'Advanced tools', description: 'Hosting and troubleshooting.', advanced: true, items: [
+    { href: '/admin/general', label: 'Hosting & proxy', description: 'Public addresses and deployment options' },
+    { href: '/admin/diagnostics', label: 'System health', description: 'Service checks and diagnostics' },
+    { href: '/admin/logs', label: 'Logs', description: 'Recent activity and log settings' },
+    { href: '/admin/cache', label: 'Request cache', description: 'Inspect saved request records' },
+    { href: '/admin/artwork', label: 'Artwork cache', description: 'Poster storage and missing artwork' },
+    { href: '/admin/maintenance', label: 'Recovery & cleanup', description: 'Database repair and history cleanup' },
+  ]},
+]
+
+export const serviceStatusLabel = (status?: string) => ({
+  up: 'Connected', down: 'Unavailable', degraded: 'Needs attention', not_configured: 'Not set up',
+}[status ?? ''] ?? 'Not checked')
diff --git a/frontend/app/admin/diagnostics/page.tsx b/frontend/app/admin/diagnostics/page.tsx
index afd93d6..dd9b971 100644
--- a/frontend/app/admin/diagnostics/page.tsx
+++ b/frontend/app/admin/diagnostics/page.tsx
@@ -7,19 +7,7 @@ export default function AdminDiagnosticsPage() {
   return (
     <AdminShell
       title="Diagnostics"
-      subtitle="Run connectivity, delivery, and platform health checks for every configured dependency."
-      rail={
-        <div className="admin-rail-stack">
-          <div className="admin-rail-card">
-            <span className="admin-rail-eyebrow">Diagnostics</span>
-            <h2>Shared console</h2>
-            <p>
-              This page and Maintenance now use the same diagnostics panel, so every test target and
-              notification ping stays in one source of truth.
-            </p>
-          </div>
-        </div>
-      }
+      subtitle="Check connections and investigate service problems."
     >
       <AdminDiagnosticsPanel />
     </AdminShell>
diff --git a/frontend/app/admin/page.tsx b/frontend/app/admin/page.tsx
index 437a2ff..0774b7d 100644
--- a/frontend/app/admin/page.tsx
+++ b/frontend/app/admin/page.tsx
@@ -1,347 +1,77 @@
 'use client'
 
-import { useEffect, useMemo, useState } from 'react'
+import { useEffect, useState } from 'react'
 import { useRouter } from 'next/navigation'
-import { authFetch, clearToken, getApiBase, getToken } from '../lib/auth'
+import { authFetch, getApiBase, getToken } from '../lib/auth'
 import AdminShell from '../ui/AdminShell'
+import { CONFIG_GROUPS, serviceStatusLabel } from './configNavigation'
 
-type ServiceState = {
-  name: string
-  status: string
-  message?: string
-}
-
-type RecentRequest = {
-  id: number
-  title?: string | null
-  year?: number | null
-  statusLabel?: string | null
-  requestedBy?: string | null
-  createdAt?: string | null
-}
-
-type PortalOverview = {
-  overview?: {
-    total_items?: number
-    total_comments?: number
-    by_kind?: Record<string, number>
-    by_status?: Record<string, number>
-  }
-  my_items?: number
-}
-
-const formatDateTime = (value?: string | null) => {
-  if (!value) return 'Unknown'
-  const date = new Date(value)
-  if (Number.isNaN(date.valueOf())) return value
-  return date.toLocaleString()
-}
-
-const normalizeRecent = (items: any[]): RecentRequest[] =>
-  items
-    .filter((item) => item?.id)
-    .map((item) => ({
-      id: Number(item.id),
-      title: item.title ?? null,
-      year: item.year ?? null,
-      statusLabel: item.statusLabel ?? null,
-      requestedBy: item.requestedBy ?? null,
-      createdAt: item.createdAt ?? null,
-    }))
+type ServiceState = { name: string; status: string }
 
 export default function AdminLandingPage() {
   const router = useRouter()
   const [services, setServices] = useState<ServiceState[]>([])
-  const [serviceOverall, setServiceOverall] = useState('unknown')
-  const [recent, setRecent] = useState<RecentRequest[]>([])
-  const [portalOverview, setPortalOverview] = useState<PortalOverview | null>(null)
-  const [loading, setLoading] = useState(true)
-  const [error, setError] = useState<string | null>(null)
-  const [serviceTesting, setServiceTesting] = useState<Record<string, boolean>>({})
-  const [serviceTestResults, setServiceTestResults] = useState<Record<string, string>>({})
-  const [serviceCheckedAt, setServiceCheckedAt] = useState<string | null>(null)
+  const [ready, setReady] = useState(false)
+  const [error, setError] = useState('')
 
   useEffect(() => {
-    if (!getToken()) {
-      router.push('/login')
-      return
-    }
-
+    let active = true
     const load = async () => {
-      setLoading(true)
-      setError(null)
+      if (!getToken()) { router.replace('/login'); return }
       try {
-        const baseUrl = getApiBase()
-        const [meResponse, serviceResponse, recentResponse, overviewResponse] = await Promise.all([
-          authFetch(`${baseUrl}/auth/me`),
-          authFetch(`${baseUrl}/status/services`),
-          authFetch(`${baseUrl}/requests/recent?take=8&days=0`),
-          authFetch(`${baseUrl}/portal/overview`),
-        ])
-
-        if (meResponse.status === 401) {
-          clearToken()
-          router.push('/login')
-          return
-        }
-        if (meResponse.status === 403) {
-          router.push('/')
-          return
-        }
-        const me = await meResponse.json()
-        if (me?.role !== 'admin') {
-          router.push('/')
-          return
-        }
-
-        if (serviceResponse.ok) {
-          const data = await serviceResponse.json()
-          setServiceOverall(data?.overall ?? 'unknown')
-          setServices(Array.isArray(data?.services) ? data.services : [])
-          setServiceCheckedAt(new Date().toISOString())
-        }
-
-        if (recentResponse.ok) {
-          const data = await recentResponse.json()
-          setRecent(Array.isArray(data?.results) ? normalizeRecent(data.results) : [])
-        }
-
-        if (overviewResponse.ok) {
-          const data = await overviewResponse.json()
-          setPortalOverview(data)
-        }
-      } catch (err) {
-        console.error(err)
-        setError('Unable to load the operations dashboard.')
-      } finally {
-        setLoading(false)
+        const response = await authFetch(`${getApiBase()}/auth/me`)
+        if (!response.ok) { router.replace('/login'); return }
+        if ((await response.json())?.role !== 'admin') { router.replace('/'); return }
+        if (!active) return
+        setReady(true)
+        const status = await authFetch(`${getApiBase()}/status/services`)
+        if (!status.ok) throw new Error('Status unavailable')
+        const data = await status.json()
+        if (active) setServices(Array.isArray(data.services) ? data.services : [])
+      } catch {
+        if (active) setError('Connection status is unavailable. Refresh the page to try again.')
       }
     }
-
     void load()
-
-    const refreshTimer = window.setInterval(async () => {
-      try {
-        const response = await authFetch(`${getApiBase()}/status/services`)
-        if (!response.ok) return
-        const data = await response.json()
-        setServiceOverall(data?.overall ?? 'unknown')
-        setServices(Array.isArray(data?.services) ? data.services : [])
-        setServiceCheckedAt(new Date().toISOString())
-      } catch (err) {
-        console.error(err)
-      }
-    }, 30_000)
-
-    return () => window.clearInterval(refreshTimer)
+    return () => { active = false }
   }, [router])
 
-  const testService = async (service: ServiceState) => {
-    const slug = service.name.toLowerCase().replace(/[^a-z0-9]/g, '')
-    setServiceTesting((current) => ({ ...current, [service.name]: true }))
-    setServiceTestResults((current) => {
-      const next = { ...current }
-      delete next[service.name]
-      return next
-    })
-    try {
-      const response = await authFetch(`${getApiBase()}/status/services/${slug}/test`, {
-        method: 'POST',
-      })
-      if (!response.ok) {
-        const text = await response.text()
-        throw new Error(text || `Service test failed: ${response.status}`)
-      }
-      const result = await response.json()
-      setServices((current) => current.map((item) =>
-        item.name === service.name
-          ? { ...item, status: result?.status ?? item.status, message: result?.message ?? item.message }
-          : item
-      ))
-      setServiceTestResults((current) => ({
-        ...current,
-        [service.name]: result?.message || (result?.status === 'up' ? 'Connection test passed.' : 'Connection test completed.'),
-      }))
-      setServiceCheckedAt(new Date().toISOString())
-    } catch (err) {
-      console.error(err)
-      setServiceTestResults((current) => ({ ...current, [service.name]: 'Connection test failed.' }))
-    } finally {
-      setServiceTesting((current) => ({ ...current, [service.name]: false }))
-    }
-  }
-
-  const serviceCounts = useMemo(() => {
-    const up = services.filter((service) => service.status === 'up').length
-    const down = services.filter((service) => service.status === 'down').length
-    const degraded = services.filter((service) => service.status === 'degraded').length
-    const notConfigured = services.filter((service) => service.status === 'not_configured').length
-    return { up, down, degraded, notConfigured, total: services.length }
-  }, [services])
-
-  const issueCount = Number(portalOverview?.overview?.by_kind?.issue ?? 0)
-  const requestItemCount = Number(portalOverview?.overview?.by_kind?.request ?? 0)
-  const commentCount = Number(portalOverview?.overview?.total_comments ?? 0)
-
-  const rail = (
-    <div className="admin-rail-stack">
-      <div className="admin-rail-card">
-        <span className="admin-rail-eyebrow">Fleet summary</span>
-        <h2>{serviceCounts.up} of {serviceCounts.total || 0} online</h2>
-        <p>
-          {serviceCounts.down + serviceCounts.degraded > 0
-            ? `${serviceCounts.down + serviceCounts.degraded} configured service${serviceCounts.down + serviceCounts.degraded === 1 ? '' : 's'} need attention.`
-            : 'No configured service is currently reporting a fault.'}
-        </p>
-        <a className="admin-rail-action" href="/admin/diagnostics">Open full diagnostics</a>
-      </div>
-      <div className="admin-rail-card">
-        <span className="admin-rail-eyebrow">Quick actions</span>
-        <div className="quick-action-grid">
-          <a href="/admin/requests-all">Review requests</a>
-          <a href="/admin/issues">Manage issues</a>
-          <a href="/users">User directory</a>
-          <a href="/admin/logs">Activity log</a>
-        </div>
-      </div>
-    </div>
-  )
-
   return (
-    <AdminShell
-      title="Admin overview"
-      subtitle="Service health, request movement, issue intake, and the controls that keep Magent running."
-      rail={rail}
-      actions={
-        <button type="button" onClick={() => router.push('/admin/diagnostics')}>
-          Run diagnostics
-        </button>
-      }
-    >
-      {loading ? <div className="status-banner">Loading operations dashboard...</div> : null}
-      {error ? <div className="error-banner">{error}</div> : null}
-
-      <section className="ops-metric-grid">
-        <div className="ops-metric-card">
-          <span className="section-kicker">Services online</span>
-          <strong>
-            {serviceCounts.up}/{serviceCounts.total || 0}
-          </strong>
-          <p>{serviceOverall === 'up' ? 'All configured services are responding.' : 'Some services need review.'}</p>
-        </div>
-        <div className="ops-metric-card">
-          <span className="section-kicker">Recent requests</span>
-          <strong>{recent.length}</strong>
-          <p>Loaded from the live request cache.</p>
-        </div>
-        <div className="ops-metric-card">
-          <span className="section-kicker">Open issue items</span>
-          <strong>{issueCount}</strong>
-          <p>{commentCount} portal comments recorded.</p>
-        </div>
-        <div className="ops-metric-card">
-          <span className="section-kicker">Portal requests</span>
-          <strong>{requestItemCount}</strong>
-          <p>Tracked in the dedicated request workflow.</p>
-        </div>
-      </section>
-
-      <section className="admin-zone fleet-status-panel">
-        <div className="section-header fleet-status-header">
-          <div>
-            <span className="section-kicker">Fleet service mesh</span>
-            <h2>System status</h2>
-            <p className="section-subtitle">
-              Admin-only connectivity status for the services used by Magent.
-              {serviceCheckedAt ? ` Last checked ${formatDateTime(serviceCheckedAt)}.` : ''}
-            </p>
-          </div>
-          <span className={`small-pill system-pill-${serviceOverall}`}>
-            {serviceOverall.replaceAll('_', ' ')}
-          </span>
-        </div>
-        {services.length === 0 ? (
-          <div className="status-banner">Service status is not available yet.</div>
-        ) : (
-          <div className="fleet-service-grid">
-            {services.map((service) => {
-              const slug = service.name.toLowerCase().replace(/[^a-z0-9]/g, '')
-              const testing = Boolean(serviceTesting[service.name])
-              return (
-                <article className={`fleet-service-card system-${service.status}`} key={service.name}>
-                  <div className="fleet-service-title">
-                    <span className="system-dot" aria-hidden="true" />
-                    <div>
-                      <h3>{service.name}</h3>
-                      <span className={`small-pill system-pill-${service.status}`}>
-                        {service.status.replaceAll('_', ' ')}
-                      </span>
-                    </div>
-                  </div>
-                  <p>{serviceTestResults[service.name] ?? service.message ?? 'No recent detail was returned.'}</p>
-                  <div className="fleet-service-actions">
-                    <a href={`/admin/${slug}`}>Configure</a>
-                    <button type="button" className="ghost-button" disabled={testing} onClick={() => void testService(service)}>
-                      {testing ? 'Testing...' : 'Test connection'}
-                    </button>
-                  </div>
-                </article>
-              )
-            })}
-          </div>
-        )}
-      </section>
-
-      <section className="admin-zone">
-        <div className="section-header">
-          <div>
-            <h2>Recent activity</h2>
-            <p className="section-subtitle">Live request cache entries, newest first.</p>
-          </div>
-        </div>
-        {recent.length === 0 ? (
-          <div className="status-banner">No recent requests were returned.</div>
-        ) : (
-          <div className="admin-table dashboard-activity-table">
-            <div className="admin-table-head">
-              <span>Request</span>
-              <span>Status</span>
-              <span>User</span>
-              <span>Created</span>
+    <AdminShell title="Settings" subtitle="Connections, access and the way Magent works.">
+      {!ready ? error ? <p className="error-banner" role="alert">{error}</p> : <p role="status">Loading settings…</p> : (
+        <div className="config-directory">
+          {error && <p className="error-banner" role="alert">{error}</p>}
+          {CONFIG_GROUPS.filter((group) => !group.advanced).map((group) => (
+            <section className="config-directory-region" key={group.title}>
+              <header><h2>{group.title}</h2><p>{group.description}</p></header>
+              <div className="config-directory-links">
+                {group.items.map((item) => {
+                  const service = services.find((entry) => entry.name.toLowerCase() === item.service?.toLowerCase())
+                  return (
+                    <a href={item.href} key={item.href} className="config-directory-link">
+                      <span className="config-link-icon" aria-hidden="true">{item.symbol}</span>
+                      <span className="config-link-copy"><strong>{item.label}</strong><small>{item.description}</small></span>
+                      {item.service && <span className={`config-connection-badge is-${service?.status ?? 'unknown'}`}>{serviceStatusLabel(service?.status)}</span>}
+                      <span className="config-link-arrow" aria-hidden="true">→</span>
+                    </a>
+                  )
+                })}
+              </div>
+            </section>
+          ))}
+          <details className="config-advanced-directory">
+            <summary><strong>Advanced tools</strong><span>Hosting, logs, caches and recovery</span></summary>
+            <div className="config-directory-links">
+              {CONFIG_GROUPS.filter((group) => group.advanced).flatMap((group) => group.items).map((item) => (
+                <a href={item.href} key={item.href} className="config-directory-link">
+                  <span className="config-link-copy"><strong>{item.label}</strong><small>{item.description}</small></span>
+                  <span className="config-link-arrow" aria-hidden="true">→</span>
+                </a>
+              ))}
             </div>
-            {recent.map((row) => (
-              <button
-                key={row.id}
-                type="button"
-                className="admin-table-row"
-                onClick={() => router.push(`/requests/${row.id}`)}
-              >
-                <span>
-                  {row.title || `Request #${row.id}`}
-                  {row.year ? ` (${row.year})` : ''}
-                </span>
-                <span>{row.statusLabel || 'Unknown'}</span>
-                <span>{row.requestedBy || 'Unknown'}</span>
-                <span>{formatDateTime(row.createdAt)}</span>
-              </button>
-            ))}
-          </div>
-        )}
-      </section>
-
-      <section className="admin-zone">
-        <div className="section-header">
-          <div>
-            <h2>Attention states</h2>
-            <p className="section-subtitle">Service states that affect request processing.</p>
-          </div>
+          </details>
         </div>
-        <div className="ops-status-strip">
-          <span>{serviceCounts.down} down</span>
-          <span>{serviceCounts.degraded} degraded</span>
-          <span>{serviceCounts.notConfigured} not configured</span>
-        </div>
-      </section>
+      )}
     </AdminShell>
   )
 }
diff --git a/frontend/app/globals.css b/frontend/app/globals.css
index 7e6ebe8..cc6a91b 100644
--- a/frontend/app/globals.css
+++ b/frontend/app/globals.css
@@ -6435,7 +6435,8 @@ textarea {
   }
 }
 
-/* Final header account menu stacking override (must be last) */
+/* Keep the account menu above header controls. Header positioning is owned
+   by the responsive application shell in ops-redesign.css. */
 .page,
 .header,
 .header-left,
@@ -6447,9 +6448,7 @@ textarea {
 }
 
 .header {
-  position: relative !important;
   isolation: isolate;
-  z-index: 20 !important;
 }
 
 .header-nav,
diff --git a/frontend/app/layout.tsx b/frontend/app/layout.tsx
index 5673263..465eff5 100644
--- a/frontend/app/layout.tsx
+++ b/frontend/app/layout.tsx
@@ -1,5 +1,6 @@
 import './globals.css'
 import './ops-redesign.css'
+import './admin/config.css'
 import type { ReactNode } from 'react'
 import BrandingFavicon from './ui/BrandingFavicon'
 import BrandingLogo from './ui/BrandingLogo'
diff --git a/frontend/app/ui/AdminShell.tsx b/frontend/app/ui/AdminShell.tsx
index bb4c72b..370659a 100644
--- a/frontend/app/ui/AdminShell.tsx
+++ b/frontend/app/ui/AdminShell.tsx
@@ -22,7 +22,7 @@ export default function AdminShell({ title, subtitle, actions, rail, children }:
       <main className="card admin-card">
         <div className="admin-header">
           <div>
-            <span className="section-kicker">Beta stream</span>
+            <span className="section-kicker">Configuration</span>
             <h1>{title}</h1>
             {subtitle && <p className="lede">{subtitle}</p>}
           </div>
diff --git a/frontend/app/ui/AdminSidebar.tsx b/frontend/app/ui/AdminSidebar.tsx
index f3a830d..9bc1eec 100644
--- a/frontend/app/ui/AdminSidebar.tsx
+++ b/frontend/app/ui/AdminSidebar.tsx
@@ -1,85 +1,38 @@
 'use client'
 
-import { usePathname } from 'next/navigation'
-
-const NAV_GROUPS = [
-  {
-    title: 'Configuration',
-    items: [
-      { href: '/admin', label: 'Config overview' },
-      { href: '/admin/general', label: 'Application & proxy' },
-      { href: '/admin/site', label: 'Site & login' },
-      { href: '/admin/notifications', label: 'Notifications' },
-    ],
-  },
-  {
-    title: 'Media Services',
-    items: [
-      { href: '/admin/seerr', label: 'Seerr' },
-      { href: '/admin/jellyfin', label: 'Jellyfin' },
-      { href: '/admin/sonarr', label: 'Sonarr' },
-      { href: '/admin/radarr', label: 'Radarr' },
-      { href: '/admin/bazarr', label: 'Bazarr' },
-      { href: '/admin/prowlarr', label: 'Prowlarr' },
-      { href: '/admin/qbittorrent', label: 'qBittorrent' },
-    ],
-  },
-  {
-    title: 'Request Pipeline',
-    items: [
-      { href: '/admin/requests', label: 'Sync & retention' },
-      { href: '/admin/issue-workflow', label: 'Issue workflow' },
-      { href: '/admin/cache', label: 'Request cache' },
-      { href: '/admin/artwork', label: 'Artwork cache' },
-      { href: '/admin/requests-all', label: 'All requests' },
-    ],
-  },
-  {
-    title: 'Users & Access',
-    items: [
-      { href: '/users', label: 'Users' },
-      { href: '/admin/invites', label: 'Invite management' },
-    ],
-  },
-  {
-    title: 'System',
-    items: [
-      { href: '/admin/diagnostics', label: 'System health' },
-      { href: '/admin/logs', label: 'Activity log' },
-      { href: '/admin/maintenance', label: 'Maintenance' },
-      { href: '/admin/system', label: 'How it works' },
-    ],
-  },
-]
+import { usePathname, useRouter } from 'next/navigation'
+import { CONFIG_GROUPS } from '../admin/configNavigation'
 
 export default function AdminSidebar() {
   const pathname = usePathname()
+  const router = useRouter()
+  const links = CONFIG_GROUPS.flatMap((group) => group.items)
+  const current = links.find((item) => item.href === pathname)
+  const renderLinks = (items: typeof links) => (
+    <div className="admin-nav-links">
+      {items.map((item) => <a key={item.href} href={item.href} aria-current={pathname === item.href ? 'page' : undefined} className={pathname === item.href ? 'is-active' : ''}>{item.label}</a>)}
+    </div>
+  )
   return (
-    <nav className="admin-sidebar">
-      <div className="admin-sidebar-identity">
-        <strong>Magent Admin</strong>
-        <span><i aria-hidden="true" />Configuration workspace</span>
+    <nav className="admin-sidebar" aria-label="Settings navigation">
+      <label className="config-mobile-picker">
+        <span>Settings</span>
+        <select aria-label="Settings section" value={current?.href ?? '/admin'} onChange={(event) => router.push(event.target.value)}>
+          <option value="/admin">Settings overview</option>
+          {CONFIG_GROUPS.map((group) => <optgroup label={group.title} key={group.title}>{group.items.map((item) => <option key={item.href} value={item.href}>{item.label}</option>)}</optgroup>)}
+        </select>
+      </label>
+      <div className="config-desktop-navigation">
+        <a href="/admin" className="config-sidebar-home" aria-current={pathname === '/admin' ? 'page' : undefined}>Settings <span aria-hidden="true">↗</span></a>
+        {CONFIG_GROUPS.map((group) => group.advanced ? (
+          <details className="admin-nav-group config-nav-advanced" key={pathname + group.title} open={group.items.some((item) => item.href === pathname) || undefined}>
+            <summary>{group.title}</summary>{renderLinks(group.items)}
+          </details>
+        ) : (
+          <div className="admin-nav-group" key={group.title}><span className="admin-nav-title">{group.title}</span>{renderLinks(group.items)}</div>
+        ))}
+        <a href="/" className="config-sidebar-back">← My requests</a>
       </div>
-      <a className="admin-new-request" href="/new-requests"><span>+</span> New request</a>
-      {NAV_GROUPS.map((group) => (
-        <div key={group.title} className="admin-nav-group">
-          <span className="admin-nav-title">{group.title}</span>
-          <div className="admin-nav-links">
-            {group.items.map((item) => {
-              const isActive =
-                pathname === item.href ||
-                (item.href !== '/' &&
-                  item.href !== '/admin' &&
-                  pathname.startsWith(`${item.href}/`))
-              return (
-                <a key={item.href} href={item.href} className={isActive ? 'is-active' : ''}>
-                  {item.label}
-                </a>
-              )
-            })}
-          </div>
-        </div>
-      ))}
     </nav>
   )
 }
diff --git a/frontend/app/ui/WorkspaceNavigation.tsx b/frontend/app/ui/WorkspaceNavigation.tsx
index 42b0fc8..c5a169b 100644
--- a/frontend/app/ui/WorkspaceNavigation.tsx
+++ b/frontend/app/ui/WorkspaceNavigation.tsx
@@ -39,6 +39,7 @@ export default function WorkspaceNavigation() {
   const pathname = usePathname()
   const [role, setRole] = useState<string | null>(null)
   const [ready, setReady] = useState(false)
+  const [showRequestsNav, setShowRequestsNav] = useState(true)
 
   useEffect(() => {
     const token = getToken()
@@ -46,28 +47,32 @@ export default function WorkspaceNavigation() {
       setReady(true)
       return
     }
-    authFetch(`${getApiBase()}/auth/me`)
-      .then(async (response) => {
+    Promise.all([
+      authFetch(`${getApiBase()}/auth/me`),
+      fetch(`${getApiBase()}/site/public`).catch(() => null),
+    ])
+      .then(async ([response, siteResponse]) => {
         if (response.ok) setRole((await response.json())?.role ?? 'user')
+        if (siteResponse?.ok) setShowRequestsNav((await siteResponse.json())?.navigation?.showRequests !== false)
       })
       .catch(() => undefined)
       .finally(() => setReady(true))
   }, [])
 
-  if (!ready || !getToken() || HIDDEN_ROUTES.some((route) => pathname.startsWith(route)) || pathname.startsWith('/admin')) {
+  if (!ready || !getToken() || HIDDEN_ROUTES.some((route) => pathname.startsWith(route))) {
     return null
   }
 
-  const items = NAVIGATION.filter((item) => !item.adminOnly || role === 'admin')
+  const items = NAVIGATION.filter((item) => (!item.adminOnly || role === 'admin') && (showRequestsNav || item.href !== '/new-requests'))
 
   return (
     <>
-      <aside className="workspace-sidebar" aria-label="Workspace navigation">
+      {!pathname.startsWith('/admin') && <aside className="workspace-sidebar" aria-label="Workspace navigation">
         <div className="workspace-sidebar-identity">
           <BrandingLogo className="workspace-sidebar-logo" />
           <div><strong>{role === 'admin' ? 'Magent Admin' : 'Magent'}</strong><span>Media operations workspace</span></div>
         </div>
-        <a className="workspace-new-request" href="/new-requests"><span>+</span> New request</a>
+        {showRequestsNav && <a className="workspace-new-request" href="/new-requests"><span>+</span> New request</a>}
         <nav>
           {items.map((item) => (
             <a key={item.href} href={item.href} className={item.match(pathname) ? 'is-active' : undefined}>
@@ -79,7 +84,7 @@ export default function WorkspaceNavigation() {
           <a href="/feedback">Support</a>
           <a href={role === 'admin' ? '/admin' : '/profile'}>Settings</a>
         </div>
-      </aside>
+      </aside>}
       <nav className="workspace-mobile-nav" aria-label="Mobile navigation">
         {items.slice(0, 5).map((item) => (
           <a key={item.href} href={item.href} className={item.match(pathname) ? 'is-active' : undefined}>
diff --git a/scripts/review_settings_ui.cjs b/scripts/review_settings_ui.cjs
new file mode 100644
index 0000000..da11b77
--- /dev/null
+++ b/scripts/review_settings_ui.cjs
@@ -0,0 +1,164 @@
+// Run with Node and Playwright. REVIEW_DIR/session.json holds an authorised
+// short-lived session as { name, token }. Never commit this file. Live requests are read-only:
+// all writes are blocked, with save/validation paths checked using fixtures.
+const reviewDir = process.env.REVIEW_DIR || '/review'
+const { chromium } = require(process.env.REVIEW_PLAYWRIGHT || reviewDir + '/node_modules/playwright')
+const fs = require('node:fs')
+const assert = require('node:assert/strict')
+const base = process.env.REVIEW_BASE || 'https://beta.grizzlyflix.co.nz'
+const liveBase = process.env.REVIEW_LIVE_BASE || 'https://beta.grizzlyflix.co.nz'
+const prefix = process.env.REVIEW_PREFIX || 'before'
+const session = JSON.parse(fs.readFileSync(reviewDir + '/session.json', 'utf8'))
+
+;(async () => {
+  const browser = await chromium.launch({ headless: true, args: ['--no-sandbox'] })
+  const context = await browser.newContext({ viewport: { width: 1440, height: 1000 } })
+  await context.addCookies([
+    { name: session.name, value: session.token, url: base, httpOnly: true, secure: base.startsWith('https') },
+    { name: 'magent_logged_in', value: '1', url: base },
+  ])
+  const errors = []
+  const httpErrors = []
+  const blocked = []
+  await context.route('**/api/**', async (route) => {
+    const request = route.request()
+    if (request.url().includes('/events/stream')) return route.fulfill({ status: 200, contentType: 'text/event-stream', body: ': review\n\n' })
+    if (!['GET', 'HEAD', 'OPTIONS'].includes(request.method())) {
+      blocked.push({ path: new URL(request.url()).pathname, method: request.method() })
+      return route.fulfill({ status: 409, json: { detail: 'Read-only browser review' } })
+    }
+    if (base !== liveBase) {
+      const remote = liveBase + new URL(request.url()).pathname + new URL(request.url()).search
+      try {
+        const response = await route.fetch({ url: remote, headers: { ...request.headers(), cookie: session.name + '=' + session.token } })
+        return await route.fulfill({ response })
+      } catch {
+        // Browser cancellation must not print request headers (including cookies).
+        await route.abort().catch(() => {})
+        return
+      }
+    }
+    await route.continue()
+  })
+  const page = await context.newPage()
+  page.on('pageerror', (error) => errors.push(error.message))
+  page.on('response', (response) => { if (response.status() >= 400) httpErrors.push({ path: new URL(response.url()).pathname, status: response.status() }) })
+  const reports = []
+  const paths = process.env.REVIEW_PATHS ? process.env.REVIEW_PATHS.split(',') : prefix === 'before' ? ['/admin', '/admin/radarr', '/admin/notifications', '/admin/site'] : [
+    '/admin', '/admin/seerr', '/admin/jellyfin', '/admin/sonarr', '/admin/radarr', '/admin/bazarr',
+    '/admin/prowlarr', '/admin/qbittorrent', '/admin/site', '/admin/notifications', '/admin/issue-workflow',
+    '/admin/requests', '/admin/general', '/admin/cache', '/admin/artwork', '/admin/logs', '/admin/maintenance',
+    '/admin/invites', '/admin/diagnostics', '/', '/new-requests', '/portal/issues', '/profile/invites', '/profile',
+  ]
+  for (const path of paths) {
+    await page.goto(base + path, { waitUntil: 'domcontentloaded' })
+    await page.waitForTimeout(1600)
+    if (path.startsWith('/admin/') && !['/admin/invites','/admin/diagnostics'].includes(path)) {
+      await page.locator('.admin-card').waitFor({ timeout: 30000 }).catch(async (error) => {
+        console.log(JSON.stringify({ failedPath: path, location: page.url(), errors, httpErrors, blocked }))
+        throw error
+      })
+    } else await page.locator('main').first().waitFor()
+    const stats = await page.evaluate(() => ({
+      title: document.querySelector('main h1')?.textContent,
+      width: document.documentElement.clientWidth,
+      scrollWidth: document.documentElement.scrollWidth,
+      visibleInputs: [...document.querySelectorAll('main input,main select,main textarea')].filter((el) => el.getBoundingClientRect().height > 0).length,
+    }))
+    reports.push({ path, ...stats })
+    if (['/admin','/admin/radarr','/admin/notifications','/admin/site','/admin/issue-workflow'].includes(path)) {
+      await page.screenshot({ path: reviewDir + '/' + prefix + path.replaceAll('/','-') + '.png', fullPage: true })
+    }
+    console.log(JSON.stringify({ path, ...stats }))
+  }
+  for (const path of ['/admin','/admin/radarr','/admin/cache','/new-requests','/portal/issues','/profile/invites']) {
+    await page.setViewportSize({ width: 390, height: 844 })
+    await page.goto(base + path, { waitUntil: 'domcontentloaded' })
+    await page.waitForTimeout(1800)
+    const overflow = await page.evaluate(() => document.documentElement.scrollWidth - document.documentElement.clientWidth)
+    reports.push({ mobile: path, overflow })
+    await page.screenshot({ path: reviewDir + '/' + prefix + '-mobile' + path.replaceAll('/','-') + '.png', fullPage: true })
+    console.log(JSON.stringify({ mobile: path, overflow }))
+  }
+  if (prefix !== 'before') {
+    await page.setViewportSize({ width: 1440, height: 1000 })
+    await page.goto(base + '/admin/radarr')
+    const field = page.locator('input[name=radarr_base_url]')
+    await field.waitFor()
+    const saved = await field.inputValue()
+    const region = page.locator('#config-radarr-connection')
+    assert(await region.getByRole('button', { name: 'Save changes', exact: true }).isDisabled())
+    await field.fill(saved + '/unsaved-review')
+    assert(await region.getByRole('button', { name: 'Test connection', exact: true }).isDisabled())
+    await region.getByRole('button', { name: 'Discard', exact: true }).click()
+    assert.equal(await field.inputValue(), saved)
+    // Saving is intercepted: verify only this region is submitted, and
+    // leaving an existing secret blank never overwrites that secret.
+    let payload
+    await page.route('**/api/admin/settings', async (route) => {
+      if (route.request().method() !== 'PUT') return route.fallback()
+      payload = route.request().postDataJSON()
+      return route.fulfill({ status: 200, json: { ok: true } })
+    })
+    await field.fill(saved + '/review')
+    await region.getByRole('button', { name: 'Save changes', exact: true }).click()
+    await page.waitForTimeout(1000)
+    assert(payload && payload.radarr_base_url.endsWith('/review'))
+    assert(!('radarr_api_key' in payload))
+    assert(!('sonarr_base_url' in payload))
+    await page.goto(base + '/admin/issue-workflow')
+    await page.locator('select[name=issue_confirmation_contact_attempts]').selectOption('0')
+    assert(!(await page.locator('[name=issue_confirmation_interval_value]').count()))
+    await page.locator('select[name=issue_confirmation_contact_attempts]').selectOption('3')
+    await page.locator('input[name=issue_confirmation_interval_value]').fill('366')
+    assert(!(await page.locator('input[name=issue_confirmation_interval_value]').evaluate((el) => el.checkValidity())))
+    await page.goto(base + '/admin/notifications')
+    const discord = page.locator('#config-magent-notify-discord')
+    await discord.getByRole('button', { name: /Discord/ }).click()
+    const toggle = discord.getByRole('switch')
+    await toggle.check()
+    assert(await discord.locator('[name=magent_notify_discord_webhook_url]').isVisible())
+    await discord.getByRole('button', { name: 'Discard', exact: true }).click()
+    assert(!(await discord.locator('[name=magent_notify_discord_webhook_url]').count()))
+    await page.setViewportSize({ width: 1024, height: 768 })
+    await page.goto(base + '/admin/cache')
+    await page.getByRole('button', { name: 'Load saved requests', exact: true }).waitFor()
+    await page.screenshot({ path: reviewDir + '/tablet-cache.png', fullPage: true })
+    assert(await page.getByRole('button', { name: 'Load saved requests', exact: true }).isVisible())
+    await page.getByRole('button', { name: 'Load saved requests', exact: true }).click()
+    await page.waitForTimeout(700)
+    assert.equal(await page.evaluate(() => document.documentElement.scrollWidth > document.documentElement.clientWidth), false)
+    await page.goto(base + '/portal/issues')
+    await page.waitForTimeout(1800)
+    const report = page.locator('.portal-item-list > button').first()
+    if (await report.count()) {
+      await report.click()
+      const modal = page.locator('.issue-detail-modal.is-open')
+      await modal.waitFor()
+      const top = await modal.boundingBox()
+      const header = await page.locator('.header').boundingBox()
+      assert(top.y >= header.y + header.height, 'Issue window must clear the header')
+      await modal.getByRole('button', { name: 'Close', exact: true }).click()
+      assert(!(await page.locator('.issue-detail-modal.is-open').count()))
+      console.log('PASS: issue popup opens, clears the header and closes')
+    }
+    await page.goto(base + '/')
+    await page.locator('.recent-card').first().waitFor({ timeout: 30000 }).catch(() => {})
+    const request = page.locator('.recent-card').first()
+    if (await request.count()) {
+      await request.click()
+      await page.waitForTimeout(2500)
+      assert(new URL(page.url()).pathname.startsWith('/requests/'))
+      assert.equal(await page.evaluate(() => document.documentElement.scrollWidth > document.documentElement.clientWidth), false)
+      console.log('PASS: request detail navigation and layout')
+    }
+    assert(reports.every((report) => report.overflow == null || report.overflow === 0), 'Mobile overflow')
+    console.log('PASS: dirty state, discard, region-only save, secret preservation, confirmation limits')
+  }
+  fs.writeFileSync(reviewDir + '/' + prefix + '-report.json', JSON.stringify({ reports, errors, blocked }, null, 2))
+  console.log(JSON.stringify({ errors, blocked }))
+  await page.unrouteAll({ behavior: 'ignoreErrors' })
+  await context.unrouteAll({ behavior: 'ignoreErrors' })
+  await browser.close()
+  if (errors.length) process.exitCode = 1
+})().catch((error) => { console.error(error); process.exit(1) })