feat: improve admin observability and translation-first summaries

2026-03-22 21:37:30 +01:00
parent 8014c1e890
commit 4c49ffb0d6
8 changed files with 585 additions and 261 deletions
@@ -1,12 +1,23 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useMemo, useState } from "react";

-import { Alert, Box, Button, Paper, Typography } from "@mui/material";
+import {
+  Alert,
+  Box,
+  Button,
+  Chip,
+  Paper,
+  Stack,
+  Typography,
+} from "@mui/material";

 import { api } from "../api";

 type SummarizerMetrics = {
  healthy: boolean;
  model?: string | null;
+  device?: string | null;
+  gpuAvailable?: boolean;
+  gpuName?: string | null;
  healthLatencyMs?: number | null;
  probeLatencyMs?: number | null;
  lastProbeAt?: string | null;
@@ -18,6 +29,8 @@ type SummarizerMetrics = {
  cacheMisses: number;
  failures: number;
  averageLatencyMs?: number | null;
+  lastSuccessAt?: string | null;
+  lastFailureAt?: string | null;
  lastError?: string | null;
 };

@@ -44,6 +57,26 @@ type SystemStatus = {
    from?: string | null;
    fromName?: string | null;
  };
+  database: {
+    provider: string;
+    looksConfigured: boolean;
+    canConnect: boolean;
+    target?: string | null;
+    usesFileStorage: boolean;
+    warning?: string | null;
+  };
+  runtime: {
+    framework: string;
+    osDescription: string;
+    processArchitecture: string;
+    machineName?: string | null;
+  };
+  auth: {
+    required: boolean;
+    hasJwtKey: boolean;
+    googleConfigured: boolean;
+    gmailConfigured: boolean;
+  };
  summarizer: SummarizerMetrics;
 };

@@ -58,6 +91,25 @@ function displayMetadata(value?: string | null) {
  return value && value.trim().length > 0 ? value : "-";
 }

+function formatDate(value?: string | null) {
+  return value ? new Date(value).toLocaleString() : "-";
+}
+
+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 sx={{ p: 2, borderRadius: 3 }}>
+      <Typography variant="overline" sx={{ color: "text.secondary" }}>{title}</Typography>
+      <Typography variant="h5" sx={{ fontWeight: 950, color }}>{value}</Typography>
+      <Typography variant="body2" sx={{ color: "text.secondary", mt: 1 }}>{subtitle || "-"}</Typography>
+    </Paper>
+  );
+}
+
+function DetailRow({ label, value }: { label: string; value: React.ReactNode }) {
+  return <Typography variant="body2"><strong>{label}:</strong> {value}</Typography>;
+}
+
 export default function AdminSystemPage() {
  const [status, setStatus] = useState<SystemStatus | null>(null);
  const [loading, setLoading] = useState(false);
@@ -82,12 +134,26 @@ export default function AdminSystemPage() {
    void load();
  }, []);

+  const dbTone = useMemo(() => {
+    if (!status) return "default" as const;
+    if (!status.database.looksConfigured || !status.database.canConnect) return "error" as const;
+    if (status.database.warning) return "warning" as const;
+    return "success" as const;
+  }, [status]);
+
+  const summarizerTone = useMemo(() => {
+    if (!status) return "default" as const;
+    if (!status.summarizer.healthy) return "error" as const;
+    if (status.summarizer.probeFailures > 0 || status.summarizer.failures > 0) return "warning" as const;
+    return "success" as const;
+  }, [status]);
+
  return (
    <Box sx={{ display: "flex", flexDirection: "column", gap: 2 }}>
      <Box sx={{ display: "flex", justifyContent: "space-between", gap: 2, alignItems: "center", flexWrap: "wrap" }}>
        <Box>
          <Typography variant="h5" sx={{ fontWeight: 950 }}>System status</Typography>
-          <Typography sx={{ color: "text.secondary" }}>Quick operational view of storage, email, and summarizer health.</Typography>
+          <Typography sx={{ color: "text.secondary" }}>Production diagnostics for runtime, database, auth, email, and summarizer health.</Typography>
        </Box>
        <Box sx={{ display: "flex", gap: 1, flexWrap: "wrap" }}>
          <Button
@@ -115,85 +181,121 @@ export default function AdminSystemPage() {
      </Box>

      {error ? <Alert severity="error">{error}</Alert> : null}
+      {status?.database.warning ? <Alert severity={status.database.canConnect ? "warning" : "error"}>{status.database.warning}</Alert> : null}
+      {status?.summarizer.lastError ? <Alert severity={status.summarizer.healthy ? "warning" : "error"}>{status.summarizer.lastError}</Alert> : null}

      <Box sx={{ display: "grid", gridTemplateColumns: { xs: "1fr", md: "repeat(4, 1fr)" }, gap: 2 }}>
-        <Paper sx={{ p: 2 }}>
-          <Typography variant="overline" sx={{ color: "text.secondary" }}>Environment</Typography>
-          <Typography variant="h5" sx={{ fontWeight: 950 }}>{status?.environment ?? "-"}</Typography>
-          <Typography variant="body2" sx={{ color: "text.secondary", mt: 1 }}>Version {displayMetadata(status?.version)}</Typography>
-          <Typography variant="body2" sx={{ color: "text.secondary" }}>Commit {displayMetadata(status?.commitSha)}</Typography>
-          <Typography variant="body2" sx={{ color: "text.secondary" }}>{displayMetadata(status?.buildStamp)}</Typography>
+        <SummaryCard
+          title="Environment"
+          value={status?.environment ?? "-"}
+          subtitle={`Version ${displayMetadata(status?.version)} · Commit ${displayMetadata(status?.commitSha)}`}
+        />
+        <SummaryCard
+          title="Database"
+          value={status ? (status.database.canConnect ? "Connected" : "Offline") : "-"}
+          subtitle={status ? `${status.database.provider} · ${status.database.target || "No target"}` : "-"}
+          tone={dbTone}
+        />
+        <SummaryCard
+          title="SMTP"
+          value={status?.email.enabled ? "Enabled" : "Disabled"}
+          subtitle={status?.email.host || "No SMTP host configured"}
+          tone={status?.email.enabled ? "success" : "default"}
+        />
+        <SummaryCard
+          title="Summarizer"
+          value={status?.summarizer.healthy ? "Healthy" : "Offline"}
+          subtitle={status?.summarizer.probeLatencyMs != null
+            ? `${status.summarizer.probeLatencyMs} ms probe · ${status.summarizer.device || "unknown device"}`
+            : status?.summarizer.healthLatencyMs != null
+              ? `${status.summarizer.healthLatencyMs} ms health · ${status.summarizer.device || "unknown device"}`
+              : "No latency data"}
+          tone={summarizerTone}
+        />
+      </Box>
+
+      <Box sx={{ display: "grid", gridTemplateColumns: { xs: "1fr", lg: "1.2fr 1fr" }, gap: 2 }}>
+        <Paper sx={{ p: 2, borderRadius: 3 }}>
+          <Typography variant="h6" sx={{ fontWeight: 900, mb: 1 }}>Database and storage</Typography>
+          <Stack spacing={0.75}>
+            <DetailRow label="Provider" value={status?.database.provider || "-"} />
+            <DetailRow label="Target" value={status?.database.target || "-"} />
+            <DetailRow label="Configured" value={status?.database.looksConfigured ? "Yes" : "No"} />
+            <DetailRow label="Can connect" value={status?.database.canConnect ? "Yes" : "No"} />
+            <DetailRow label="Uses file storage" value={status?.database.usesFileStorage ? "Yes" : "No"} />
+            <DetailRow label="Data root" value={status?.storage.dataRoot || "-"} />
+            <DetailRow label="DB path" value={status?.storage.dbPath || "-"} />
+            <DetailRow label="DB file exists" value={status?.storage.dbExists ? "Yes" : "No"} />
+            <DetailRow label="DB size" value={formatBytes(status?.storage.dbSizeBytes)} />
+            <DetailRow label="Companies" value={status?.storage.companyCount ?? 0} />
+            <DetailRow label="Jobs" value={status?.storage.jobCount ?? 0} />
+            <DetailRow label="Deleted jobs" value={status?.storage.deletedCount ?? 0} />
+          </Stack>
        </Paper>
-        <Paper sx={{ p: 2 }}>
-          <Typography variant="overline" sx={{ color: "text.secondary" }}>Database</Typography>
-          <Typography variant="h5" sx={{ fontWeight: 950 }}>{status?.storage.dbExists ? "Ready" : "Missing"}</Typography>
-          <Typography variant="body2" sx={{ color: "text.secondary", mt: 1 }}>{formatBytes(status?.storage.dbSizeBytes)}</Typography>
-        </Paper>
-        <Paper sx={{ p: 2 }}>
-          <Typography variant="overline" sx={{ color: "text.secondary" }}>SMTP</Typography>
-          <Typography variant="h5" sx={{ fontWeight: 950 }}>{status?.email.enabled ? "Enabled" : "Disabled"}</Typography>
-          <Typography variant="body2" sx={{ color: "text.secondary", mt: 1 }}>{status?.email.host || "No SMTP host configured"}</Typography>
-        </Paper>
-        <Paper sx={{ p: 2 }}>
-          <Typography variant="overline" sx={{ color: "text.secondary" }}>Summarizer</Typography>
-          <Typography variant="h5" sx={{ fontWeight: 950 }}>{status?.summarizer.healthy ? "Healthy" : "Offline"}</Typography>
-          <Typography variant="body2" sx={{ color: "text.secondary", mt: 1 }}>
-            {status?.summarizer.probeLatencyMs != null
-              ? `${status.summarizer.probeLatencyMs} ms probe`
-              : status?.summarizer.healthLatencyMs != null
-                ? `${status.summarizer.healthLatencyMs} ms health`
-                : "No latency data"}
-          </Typography>
+
+        <Paper sx={{ p: 2, borderRadius: 3 }}>
+          <Typography variant="h6" sx={{ fontWeight: 900, mb: 1 }}>Runtime and auth</Typography>
+          <Stack spacing={0.75}>
+            <DetailRow label="Framework" value={status?.runtime.framework || "-"} />
+            <DetailRow label="OS" value={status?.runtime.osDescription || "-"} />
+            <DetailRow label="Architecture" value={status?.runtime.processArchitecture || "-"} />
+            <DetailRow label="Machine" value={status?.runtime.machineName || "-"} />
+            <DetailRow label="Content root" value={status?.contentRoot || "-"} />
+            <DetailRow label="Build stamp" value={displayMetadata(status?.buildStamp)} />
+            <DetailRow label="Auth required" value={status?.auth.required ? "Yes" : "No"} />
+            <DetailRow label="JWT key configured" value={status?.auth.hasJwtKey ? "Yes" : "No"} />
+            <DetailRow label="Google login configured" value={status?.auth.googleConfigured ? "Yes" : "No"} />
+            <DetailRow label="Gmail integration configured" value={status?.auth.gmailConfigured ? "Yes" : "No"} />
+          </Stack>
        </Paper>
      </Box>

      <Box sx={{ display: "grid", gridTemplateColumns: { xs: "1fr", lg: "1fr 1fr" }, gap: 2 }}>
-        <Paper sx={{ p: 2 }}>
-          <Typography variant="h6" sx={{ fontWeight: 900, mb: 1 }}>Storage</Typography>
-          <Typography variant="body2"><strong>Data root:</strong> {status?.storage.dataRoot || "-"}</Typography>
-          <Typography variant="body2"><strong>DB path:</strong> {status?.storage.dbPath || "-"}</Typography>
-          <Typography variant="body2"><strong>Companies:</strong> {status?.storage.companyCount ?? 0}</Typography>
-          <Typography variant="body2"><strong>Jobs:</strong> {status?.storage.jobCount ?? 0}</Typography>
-          <Typography variant="body2"><strong>Deleted jobs:</strong> {status?.storage.deletedCount ?? 0}</Typography>
-          <Typography variant="body2"><strong>Content root:</strong> {status?.contentRoot || "-"}</Typography>
+        <Paper sx={{ p: 2, borderRadius: 3 }}>
+          <Typography variant="h6" sx={{ fontWeight: 900, mb: 1 }}>Email configuration</Typography>
+          <Stack spacing={0.75}>
+            <DetailRow label="Enabled" value={status?.email.enabled ? "Yes" : "No"} />
+            <DetailRow label="From" value={status?.email.from || "-"} />
+            <DetailRow label="From name" value={status?.email.fromName || "-"} />
+            <DetailRow label="Host" value={status?.email.host || "-"} />
+            <DetailRow label="Port" value={status?.email.port ?? "-"} />
+            <DetailRow label="SSL" value={status?.email.enableSsl ? "Yes" : "No"} />
+          </Stack>
        </Paper>

-        <Paper sx={{ p: 2 }}>
-          <Typography variant="h6" sx={{ fontWeight: 900, mb: 1 }}>Email</Typography>
-          <Typography variant="body2"><strong>From:</strong> {status?.email.from || "-"}</Typography>
-          <Typography variant="body2"><strong>From name:</strong> {status?.email.fromName || "-"}</Typography>
-          <Typography variant="body2"><strong>Host:</strong> {status?.email.host || "-"}</Typography>
-          <Typography variant="body2"><strong>Port:</strong> {status?.email.port ?? "-"}</Typography>
-          <Typography variant="body2"><strong>SSL:</strong> {status?.email.enableSsl ? "Yes" : "No"}</Typography>
+        <Paper sx={{ p: 2, borderRadius: 3 }}>
+          <Typography variant="h6" sx={{ fontWeight: 900, mb: 1 }}>Summarizer runtime</Typography>
+          <Stack spacing={0.75}>
+            <DetailRow label="Model" value={status?.summarizer.model || "-"} />
+            <DetailRow label="Device" value={status?.summarizer.device || "-"} />
+            <DetailRow label="GPU available" value={status?.summarizer.gpuAvailable ? "Yes" : "No"} />
+            <DetailRow label="GPU name" value={status?.summarizer.gpuName || "-"} />
+            <DetailRow label="Health latency" value={status?.summarizer.healthLatencyMs != null ? `${status.summarizer.healthLatencyMs} ms` : "-"} />
+            <DetailRow label="Probe latency" value={status?.summarizer.probeLatencyMs != null ? `${status.summarizer.probeLatencyMs} ms` : "-"} />
+            <DetailRow label="Last probe" value={formatDate(status?.summarizer.lastProbeAt)} />
+            <DetailRow label="Last successful probe" value={formatDate(status?.summarizer.lastProbeSuccessAt)} />
+            <DetailRow label="Last summarization success" value={formatDate(status?.summarizer.lastSuccessAt)} />
+          </Stack>
        </Paper>
      </Box>

-      <Paper sx={{ p: 2 }}>
+      <Paper sx={{ p: 2, borderRadius: 3 }}>
        <Typography variant="h6" sx={{ fontWeight: 900, mb: 1 }}>Summarizer telemetry</Typography>
-        <Box sx={{ display: "grid", gridTemplateColumns: { xs: "1fr", md: "repeat(5, 1fr)" }, gap: 2 }}>
-          <Box>
-            <Typography variant="overline" sx={{ color: "text.secondary" }}>Requests</Typography>
-            <Typography variant="h6" sx={{ fontWeight: 900 }}>{status?.summarizer.requests ?? 0}</Typography>
-          </Box>
-          <Box>
-            <Typography variant="overline" sx={{ color: "text.secondary" }}>Cache hits</Typography>
-            <Typography variant="h6" sx={{ fontWeight: 900 }}>{status?.summarizer.cacheHits ?? 0}</Typography>
-          </Box>
-          <Box>
-            <Typography variant="overline" sx={{ color: "text.secondary" }}>Failures</Typography>
-            <Typography variant="h6" sx={{ fontWeight: 900 }}>{status?.summarizer.failures ?? 0}</Typography>
-          </Box>
-          <Box>
-            <Typography variant="overline" sx={{ color: "text.secondary" }}>Avg latency</Typography>
-            <Typography variant="h6" sx={{ fontWeight: 900 }}>{status?.summarizer.averageLatencyMs != null ? `${status.summarizer.averageLatencyMs} ms` : "-"}</Typography>
-          </Box>
-          <Box>
-            <Typography variant="overline" sx={{ color: "text.secondary" }}>Probe latency</Typography>
-            <Typography variant="h6" sx={{ fontWeight: 900 }}>{status?.summarizer.probeLatencyMs != null ? `${status.summarizer.probeLatencyMs} ms` : "-"}</Typography>
-          </Box>
+        <Box sx={{ display: "grid", gridTemplateColumns: { xs: "1fr 1fr", md: "repeat(6, 1fr)" }, gap: 2 }}>
+          <Box><Typography variant="overline" sx={{ color: "text.secondary" }}>Requests</Typography><Typography variant="h6" sx={{ fontWeight: 900 }}>{status?.summarizer.requests ?? 0}</Typography></Box>
+          <Box><Typography variant="overline" sx={{ color: "text.secondary" }}>Cache hits</Typography><Typography variant="h6" sx={{ fontWeight: 900 }}>{status?.summarizer.cacheHits ?? 0}</Typography></Box>
+          <Box><Typography variant="overline" sx={{ color: "text.secondary" }}>Cache misses</Typography><Typography variant="h6" sx={{ fontWeight: 900 }}>{status?.summarizer.cacheMisses ?? 0}</Typography></Box>
+          <Box><Typography variant="overline" sx={{ color: "text.secondary" }}>Failures</Typography><Typography variant="h6" sx={{ fontWeight: 900 }}>{status?.summarizer.failures ?? 0}</Typography></Box>
+          <Box><Typography variant="overline" sx={{ color: "text.secondary" }}>Probe failures</Typography><Typography variant="h6" sx={{ fontWeight: 900 }}>{status?.summarizer.probeFailures ?? 0}</Typography></Box>
+          <Box><Typography variant="overline" sx={{ color: "text.secondary" }}>Avg latency</Typography><Typography variant="h6" sx={{ fontWeight: 900 }}>{status?.summarizer.averageLatencyMs != null ? `${status.summarizer.averageLatencyMs} ms` : "-"}</Typography></Box>
+        </Box>
+        <Box sx={{ display: "flex", gap: 1, flexWrap: "wrap", mt: 2 }}>
+          <Chip label={status?.database.canConnect ? "Database connected" : "Database issue"} color={status?.database.canConnect ? "success" : "error"} size="small" />
+          <Chip label={status?.auth.required ? "Auth enforced" : "Auth optional"} color={status?.auth.required ? "success" : "warning"} size="small" />
+          <Chip label={status?.auth.googleConfigured ? "Google sign-in ready" : "Google sign-in off"} variant="outlined" size="small" />
+          <Chip label={status?.auth.gmailConfigured ? "Gmail ready" : "Gmail incomplete"} variant="outlined" size="small" />
+          <Chip label={status?.summarizer.gpuAvailable ? "GPU visible" : "CPU mode"} color={status?.summarizer.gpuAvailable ? "success" : "default"} size="small" />
        </Box>
-        <Typography variant="body2" sx={{ mt: 1 }}><strong>Probe failures:</strong> {status?.summarizer.probeFailures ?? 0}</Typography>
-        {status?.summarizer.lastError ? <Alert severity="warning" sx={{ mt: 2 }}>{status.summarizer.lastError}</Alert> : null}
      </Paper>
    </Box>
  );