From d651ce7aa41c2e296db20c2a28b2abe093884756 Mon Sep 17 00:00:00 2001
From: cesnimda <connor.babbington@cesnimda.co.uk>
Date: Wed, 4 Nov 2026 08:40:02 +0100
Subject: [PATCH] style(ui): flatten administration collections and diagnostics

---
 job-tracker-ui/src/views/AdminAuditPage.tsx   |  2 +-
 .../src/views/AdminProcessingPage.tsx         |  4 +--
 job-tracker-ui/src/views/AdminSystemPage.tsx  | 33 +++++++++----------
 3 files changed, 19 insertions(+), 20 deletions(-)

diff --git a/job-tracker-ui/src/views/AdminAuditPage.tsx b/job-tracker-ui/src/views/AdminAuditPage.tsx
index c34b3977..860bb566 100644
--- a/job-tracker-ui/src/views/AdminAuditPage.tsx
+++ b/job-tracker-ui/src/views/AdminAuditPage.tsx
@@ -87,7 +87,7 @@ export default function AdminAuditPage() {
   return (
     <Box sx={{ display: "grid", gap: "var(--app-section-gap)", minWidth: 0 }}>
       <PageHeader level="h2" title={t("adminAuditTitle")} description={t("adminAuditSubtitle")} />
-      <PageSection level="h3" surface title={t("adminAuditEvents")}>
+      <PageSection level="h3" title={t("adminAuditEvents")}>
       <Box ref={body} role="region" aria-label={t("adminAuditTitle")} tabIndex={0} aria-busy={busyId!==null || auditResource.loading || auditResource.refreshing} sx={{ minWidth: 0, overflow: "auto" }}>
 
       <ViewStateNotice
diff --git a/job-tracker-ui/src/views/AdminProcessingPage.tsx b/job-tracker-ui/src/views/AdminProcessingPage.tsx
index a78aaa7b..84d5e5e2 100644
--- a/job-tracker-ui/src/views/AdminProcessingPage.tsx
+++ b/job-tracker-ui/src/views/AdminProcessingPage.tsx
@@ -173,7 +173,7 @@ export default function AdminProcessingPage() {
     </Box>
     {visibleListing ? <>
       <Stack direction="row" useFlexGap flexWrap="wrap" spacing={1}>{Object.entries(visibleListing.counts).map(([key, count]) => <Chip key={key} label={`${state(key)}: ${count}`} />)}</Stack>
-      <PageSection title={t('processingJobs')} surface>
+      <PageSection title={t('processingJobs')}>
         <Box ref={resultsBody} tabIndex={-1} role="group" aria-label={t('processingResults')} sx={{ minWidth: 0, scrollMarginTop: { xs: '9rem', sm: '6rem' } }}>
         <Button onClick={() => { filtersBody.current?.focus({ preventScroll: true }); filtersBody.current?.scrollIntoView({ block: 'start' }); }}>{t('processingReturnFilters')}</Button>
         {!visibleListing.items.length ? <Typography>{t('processingNoJobs')}</Typography> : <TableContainer tabIndex={0} role="group" aria-label={t('processingJobs')} sx={{ overflowX: 'auto', maxWidth: '100%' }}>
@@ -199,7 +199,7 @@ export default function AdminProcessingPage() {
         <Stack direction="row" useFlexGap flexWrap="wrap" spacing={1} sx={{ mt: 1 }}>{visibleListing.workers.map(item => <Chip key={item.name} label={`${t(workers[item.name] ?? 'processingWorkerUntracked')}: ${t(item.flagEnabled ? 'processingEnabled' : 'processingDisabled')}`} />)}</Stack>
       </Box>
     </> : null}
-    {detail && visibleListing ? <PageSection surface title={t('processingDetails')} titleRef={detailHeading}>
+    {detail && visibleListing ? <PageSection title={t('processingDetails')} titleRef={detailHeading}>
       <Stack spacing={2}>
         <Stack direction="row" useFlexGap flexWrap="wrap" spacing={1} alignItems="center">
           <TextField label={t('processingCorrelation')} value={detail.id} slotProps={{ input: { readOnly: true } }} sx={{ flex: '1 1 20rem', minWidth: 0 }} />
diff --git a/job-tracker-ui/src/views/AdminSystemPage.tsx b/job-tracker-ui/src/views/AdminSystemPage.tsx
index c4b6c8c7..c3432229 100644
--- a/job-tracker-ui/src/views/AdminSystemPage.tsx
+++ b/job-tracker-ui/src/views/AdminSystemPage.tsx
@@ -5,7 +5,6 @@ import {
   Box,
   Button,
   Chip,
-  Paper,
   Stack,
   Tab,
   Tabs,
@@ -205,11 +204,11 @@ function benchmarkTone(value?: number | null) {
 function SummaryCard({ title, value, subtitle, tone = "default" }: { title: string; value: string; subtitle?: string; tone?: "default" | "success" | "warning" | "error" }) {
   const color = tone === "success" ? "success.main" : tone === "warning" ? "warning.main" : tone === "error" ? "error.main" : "text.primary";
   return (
-    <Paper variant="outlined" sx={{ p: "var(--app-card-padding)", borderRadius: 1, minWidth: 0 }}>
+    <Box sx={{ py: 1, minWidth: 0, overflowWrap: "anywhere" }}>
       <Typography variant="overline" sx={{ color: "text.secondary" }}>{title}</Typography>
       <Typography component="p" variant="h5" sx={{ fontWeight: 950, color }}>{value}</Typography>
       <Typography variant="body2" sx={{ color: "text.secondary", mt: 1 }}>{subtitle || "-"}</Typography>
-    </Paper>
+    </Box>
   );
 }
 
@@ -485,7 +484,7 @@ export default function AdminSystemPage() {
           </Box>
 
           <Box sx={{ display: "grid", gridTemplateColumns: { xs: "1fr", lg: "1.2fr 1fr" }, gap: 2 }}>
-            <PageSection surface level="h3" title={t("adminSystemDatabaseStorage")}>
+            <PageSection level="h3" title={t("adminSystemDatabaseStorage")}>
               <Stack spacing={0.75}>
                 <DetailRow label={t("adminSystemProvider")} value={status?.database.provider || "-"} />
                 <DetailRow label={t("adminSystemTarget")} value={status?.database.target || "-"} />
@@ -502,7 +501,7 @@ export default function AdminSystemPage() {
               </Stack>
             </PageSection>
 
-            <PageSection surface level="h3" title={t("adminSystemRuntimeAuth")}>
+            <PageSection level="h3" title={t("adminSystemRuntimeAuth")}>
               <Stack spacing={0.75}>
                 <DetailRow label={t("adminSystemFramework")} value={status?.runtime.framework || "-"} />
                 <DetailRow label={t("adminSystemOs")} value={status?.runtime.osDescription || "-"} />
@@ -519,7 +518,7 @@ export default function AdminSystemPage() {
           </Box>
 
           <Box sx={{ display: "grid", gridTemplateColumns: { xs: "1fr", lg: "1fr 1fr" }, gap: 2 }}>
-            <PageSection surface level="h3" title={t("adminSystemEmailConfig")}>
+            <PageSection level="h3" title={t("adminSystemEmailConfig")}>
               <Stack spacing={0.75}>
                 <DetailRow label={t("adminSystemEnabled")} value={status?.email.enabled ? t("yes") : t("noWord")} />
                 <DetailRow label={t("adminSystemFrom")} value={status?.email.from || "-"} />
@@ -530,7 +529,7 @@ export default function AdminSystemPage() {
               </Stack>
             </PageSection>
 
-            <PageSection surface level="h3" title={t("adminSystemSummarizerRuntime")}>
+            <PageSection level="h3" title={t("adminSystemSummarizerRuntime")}>
               <Stack spacing={0.75}>
                 <DetailRow label={t("adminSystemModel")} value={status?.ai.model || "-"} />
                 <DetailRow label={t("adminSystemDevice")} value={status?.ai.device || "-"} />
@@ -551,7 +550,7 @@ export default function AdminSystemPage() {
             </PageSection>
           </Box>
 
-          <PageSection surface level="h3" title={t("adminSystemSummarizerTelemetry")}>
+          <PageSection level="h3" title={t("adminSystemSummarizerTelemetry")}>
             <Box sx={{ display: "grid", gridTemplateColumns: { xs: "1fr 1fr", md: "repeat(8, 1fr)" }, gap: 2 }}>
               <Box><Typography variant="overline" sx={{ color: "text.secondary" }}>{t("adminSystemRequests")}</Typography><Typography component="p" variant="h6" sx={{ fontWeight: 900 }}>{status?.ai.requests ?? 0}</Typography></Box>
               <Box><Typography variant="overline" sx={{ color: "text.secondary" }}>{t("adminSystemCacheHits")}</Typography><Typography component="p" variant="h6" sx={{ fontWeight: 900 }}>{status?.ai.cacheHits ?? 0}</Typography></Box>
@@ -578,7 +577,7 @@ export default function AdminSystemPage() {
             </Box>
           </PageSection>
 
-          <PageSection surface level="h3" title={t("adminBenchmarkTitle")}>
+          <PageSection level="h3" title={t("adminBenchmarkTitle")}>
             <Box sx={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between", gap: 2, flexWrap: "wrap", mb: 1 }}>
               <Box>
                 <Typography variant="body2" sx={{ color: "text.secondary", mt: 0.25 }}>
@@ -619,23 +618,23 @@ export default function AdminSystemPage() {
                 </Box>
 
                 <Box sx={{ mt: 2.5, display: "grid", gridTemplateColumns: { xs: "1fr", xl: "1.1fr 0.9fr" }, gap: 2 }}>
-                  <Paper variant="outlined" sx={{ p: 1.5, borderRadius: 3 }}>
+                  <Box sx={{ minWidth: 0, pt: 1.5, borderTop: 1, borderColor: "divider" }}>
                     <Typography component="h4" variant="subtitle1" sx={{ fontWeight: 900, mb: 1 }}>{t("adminBenchmarkTopFindings")}</Typography>
                     <Stack spacing={1}>
                       {benchmarkFindings.length > 0 ? benchmarkFindings.map((finding) => (
-                        <Box key={`${finding.file}:${finding.issue}`} sx={{ p: 1.25, borderRadius: 2, backgroundColor: "background.default", border: "none", boxShadow: "0px 1px 2px 0px rgba(15,23,42,0.04), 0px 8px 24px -12px rgba(15,23,42,0.12)" }}>
+                        <Box key={`${finding.file}:${finding.issue}`} sx={{ py: 1, overflowWrap: "anywhere", "& + &": { borderTop: 1, borderColor: "divider" } }}>
                           <Typography variant="caption" sx={{ color: "text.secondary" }}>{finding.file}</Typography>
                           <Typography variant="body2">{finding.issue}</Typography>
                         </Box>
                       )) : <Typography variant="body2" sx={{ color: "text.secondary" }}>{t("adminBenchmarkNoAnomalies")}</Typography>}
                     </Stack>
-                  </Paper>
+                  </Box>
 
-                  <Paper variant="outlined" sx={{ p: 1.5, borderRadius: 3 }}>
+                  <Box sx={{ minWidth: 0, pt: 1.5, borderTop: 1, borderColor: "divider" }}>
                     <Typography component="h4" variant="subtitle1" sx={{ fontWeight: 900, mb: 1 }}>{t("adminBenchmarkWeakest")}</Typography>
                     <Stack spacing={1}>
                       {weakestEntries.map((entry) => (
-                        <Box key={entry.Slug} sx={{ p: 1.25, borderRadius: 2, backgroundColor: "background.default", border: "none", boxShadow: "0px 1px 2px 0px rgba(15,23,42,0.04), 0px 8px 24px -12px rgba(15,23,42,0.12)" }}>
+                        <Box key={entry.Slug} sx={{ py: 1, overflowWrap: "anywhere", "& + &": { borderTop: 1, borderColor: "divider" } }}>
                           <Typography variant="body2" sx={{ fontWeight: 800 }}>{entry.FileName}</Typography>
                           <Box sx={{ display: "flex", gap: 0.75, flexWrap: "wrap", mt: 0.75 }}>
                             <Chip size="small" label={t("adminBenchmarkCoverageValue", { value: formatPercent(entry.CoverageScore) })} color={benchmarkTone(entry.CoverageScore)} />
@@ -646,10 +645,10 @@ export default function AdminSystemPage() {
                         </Box>
                       ))}
                     </Stack>
-                  </Paper>
+                  </Box>
                 </Box>
 
-                <Box sx={{ mt: 2, p: 1.5, borderRadius: 2, backgroundColor: "background.default", border: "none", boxShadow: "0px 1px 2px 0px rgba(15,23,42,0.04), 0px 8px 24px -12px rgba(15,23,42,0.12)", maxHeight: 280, overflow: "auto" }}>
+                <Box sx={{ mt: 2, pt: 1.5, borderTop: 1, borderColor: "divider", maxHeight: 280, overflow: "auto" }}>
                   <Typography component="h4" variant="subtitle2" sx={{ fontWeight: 800, mb: 1 }}>{t("adminBenchmarkLatestSummary")}</Typography>
                   <Typography variant="body2" sx={{ whiteSpace: "pre-wrap", fontFamily: "ui-monospace, SFMono-Regular, monospace" }}>
                     {benchmarkStatus?.reportMarkdown || "-"}
@@ -657,7 +656,7 @@ export default function AdminSystemPage() {
                 </Box>
               </>
             ) : (
-              <Box sx={{ mt: 1.5, p: 1.5, borderRadius: 2, backgroundColor: "background.default", border: "none", boxShadow: "0px 1px 2px 0px rgba(15,23,42,0.04), 0px 8px 24px -12px rgba(15,23,42,0.12)" }}>
+              <Box sx={{ mt: 1.5 }}>
                 <Typography variant="body2" sx={{ whiteSpace: "pre-wrap", fontFamily: "ui-monospace, SFMono-Regular, monospace" }}>
                   {benchmarkStatus?.reportMarkdown || t("adminBenchmarkRunScript")}
                 </Typography>