feat: improve admin observability and translation-first summaries

job-tracker-ui/src/components/JobDetailsDialog.tsx

@@ -155,7 +155,10 @@ export default function JobDetailsDialog({ open, jobId, onClose }: Props) {
   const title = job ? `${job.company?.name ?? ""} - ${job.jobTitle}` : "Job Application";
   const checklist = [job?.hasResume ? "Resume" : null, job?.hasCoverLetter ? "Cover letter" : null, job?.hasPortfolio ? "Portfolio" : null, job?.hasOtherAttachment ? "Other" : null].filter(Boolean).join(", ") || "";
   const summaryFirstText = job?.fullSummary ?? job?.shortSummary ?? "No summary yet.";
-  const rawDescriptionText = job?.translatedDescription || job?.description || "";
+  const translatedDescriptionText = job?.translatedDescription?.trim() || "";
+  const originalDescriptionText = job?.description?.trim() || "";
+  const showTranslatedText = translatedDescriptionText.length > 0;
+  const showOriginalText = originalDescriptionText.length > 0;
   const fitLevel = useMemo(() => getFitLevel(candidateFit), [candidateFit]);
 
   return (
@@ -219,7 +222,18 @@ export default function JobDetailsDialog({ open, jobId, onClose }: Props) {
               </Box>
               <Typography sx={{ whiteSpace: "pre-wrap" }}>{summaryFirstText}</Typography>
             </Box>
-            {rawDescriptionText ? <Box sx={{ gridColumn: "1 / -1" }}><Typography variant="overline">Original role text</Typography><Typography sx={{ whiteSpace: "pre-wrap", color: "text.secondary" }}>{rawDescriptionText}</Typography></Box> : null}
+            {showTranslatedText ? (
+              <Box sx={{ gridColumn: "1 / -1" }}>
+                <Typography variant="overline">Translated role text</Typography>
+                <Typography sx={{ whiteSpace: "pre-wrap" }}>{translatedDescriptionText}</Typography>
+              </Box>
+            ) : null}
+            {showOriginalText ? (
+              <Box sx={{ gridColumn: "1 / -1" }}>
+                <Typography variant="overline">Original role text</Typography>
+                <Typography sx={{ whiteSpace: "pre-wrap", color: "text.secondary" }}>{originalDescriptionText}</Typography>
+              </Box>
+            ) : null}
             <Box sx={{ gridColumn: "1 / -1" }}><Typography variant="overline">Notes</Typography><Typography sx={{ whiteSpace: "pre-wrap" }}>{job?.notes ?? ""}</Typography></Box>
           </Box>
         )}

job-tracker-ui/src/pages/AdminSystemPage.tsx

@@ -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>
   );