Simplify settings workspace and fix responsive admin controls

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>
+  )
+}

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>
+  )
+}

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; }
+}

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')

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>

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>
   )
 }