Show TLS certificate validity details

Include healthy TLS certificate validity in website check messages and show latest website check results in the UI.

frontend/src/api/client.ts

@@ -1,5 +1,6 @@
 import type {
   Asset,
+  CheckResult,
   Incident,
   Monitor,
   MonitorUpdate,
@@ -82,6 +83,8 @@ export const api = {
     request<void>(`/monitors/${monitorId}`, token, {
       method: "DELETE",
     }),
+  monitorResults: (token: string, monitorId: number, limit = 1) =>
+    request<CheckResult[]>(`/monitors/${monitorId}/results?limit=${limit}`, token),
   incidents: (token: string) => request<Incident[]>("/incidents", token),
   acknowledgeIncident: (token: string, incidentId: number) =>
     request<Incident>(`/incidents/${incidentId}/acknowledge`, token, {

frontend/src/pages/WebsitesPage.tsx

@@ -1,9 +1,9 @@
-import { FormEvent, useState } from "react";
+import { FormEvent, useEffect, useState } from "react";
 import { Edit3, Globe2, Plus, RefreshCw, Trash2, X } from "lucide-react";
 
 import { api } from "../api/client";
 import { Button } from "../components/Button";
-import type { Monitor } from "../types/api";
+import type { CheckResult, Monitor } from "../types/api";
 
 interface WebsitesPageProps {
   token: string;
@@ -27,6 +27,32 @@ export function WebsitesPage({ token, monitors, onCreated }: WebsitesPageProps)
   const [submitting, setSubmitting] = useState(false);
   const [deletingId, setDeletingId] = useState<number | null>(null);
   const [error, setError] = useState<string | null>(null);
+  const [latestResults, setLatestResults] = useState<Record<number, CheckResult>>({});
+
+  useEffect(() => {
+    let cancelled = false;
+    async function loadLatestResults() {
+      const resultEntries = await Promise.all(
+        websites.map(async (monitor) => {
+          const results = await api.monitorResults(token, monitor.id, 1);
+          return [monitor.id, results[0]] as const;
+        })
+      );
+      if (!cancelled) {
+        setLatestResults(Object.fromEntries(resultEntries.filter(([, result]) => Boolean(result))));
+      }
+    }
+    if (websites.length) {
+      loadLatestResults().catch(() => {
+        if (!cancelled) setLatestResults({});
+      });
+    } else {
+      setLatestResults({});
+    }
+    return () => {
+      cancelled = true;
+    };
+  }, [token, monitors]);
 
   async function handleSubmit(event: FormEvent) {
     event.preventDefault();
@@ -211,6 +237,7 @@ export function WebsitesPage({ token, monitors, onCreated }: WebsitesPageProps)
                   <div>
                     <div className="font-medium">{monitor.name}</div>
                     <div className="truncate text-sm text-slate-400">{monitor.target}</div>
+                    {latestResults[monitor.id]?.message ? <div className="text-xs text-slate-500">{latestResults[monitor.id].message}</div> : null}
                     {monitor.config?.check_tls_expiry ? <div className="text-xs text-slate-500">TLS warning at {String(monitor.config.tls_warning_days ?? 30)} days</div> : null}
                   </div>
                   <Status status={monitor.status} />

frontend/src/types/api.ts

@@ -33,6 +33,15 @@ export interface MonitorUpdate {
   interval_seconds?: number;
 }
 
+export interface CheckResult {
+  id: number;
+  monitor_id: number;
+  status: string;
+  response_time_ms?: number | null;
+  message?: string | null;
+  observed_at: string;
+}
+
 export interface Incident {
   id: number;
   asset_id?: number | null;