Payload preview
{`{
"event": "down",
diff --git a/src/client/pages/StatusPage.tsx b/src/client/pages/StatusPage.tsx
new file mode 100644
index 0000000..399bca0
--- /dev/null
+++ b/src/client/pages/StatusPage.tsx
@@ -0,0 +1,159 @@
+import { useEffect, useState } from "react";
+import { Activity, CircleCheck, Database, RefreshCw, TriangleAlert, Zap } from "lucide-react";
+import type { PublicOverallStatus, PublicServiceStatus } from "../api/status";
+import { SiteIcon } from "../components/SiteIcon";
+import { StatusHistoryBar } from "../components/StatusHistoryBar";
+import { navigate } from "../lib/router";
+import { useSessionQuery } from "../queries/auth";
+import { useStatusQuery } from "../queries/status";
+
+const OVERALL_COPY: Record = {
+ operational: {
+ title: "All systems operational",
+ detail: "Every monitored service is responding normally.",
+ },
+ degraded: {
+ title: "Some systems are degraded",
+ detail: "One or more services are currently experiencing disruption.",
+ },
+ down: {
+ title: "Major service disruption",
+ detail: "All reporting services are currently unavailable.",
+ },
+};
+
+const SERVICE_STATUS: Record = {
+ up: { label: "Operational", className: "online" },
+ down: { label: "Down", className: "offline" },
+ unknown: { label: "Awaiting data", className: "checking" },
+};
+
+function errorMessage(error: unknown) {
+ return error instanceof Error ? error.message : "Unknown request error";
+}
+
+function relativeUpdate(updatedAt: number, now: number) {
+ const seconds = Math.max(0, Math.floor((now - updatedAt) / 1_000));
+ if (seconds < 5) return "Updated just now";
+ if (seconds < 60) return `Updated ${seconds}s ago`;
+ const minutes = Math.floor(seconds / 60);
+ return `Updated ${minutes}m ago`;
+}
+
+function OverallIcon({ status }: { status: PublicOverallStatus }) {
+ if (status === "operational") return ;
+ if (status === "degraded") return ;
+ return ;
+}
+
+export function StatusPage() {
+ const statusQuery = useStatusQuery();
+ const sessionQuery = useSessionQuery();
+ const [now, setNow] = useState(Date.now);
+ const status = statusQuery.data;
+
+ useEffect(() => {
+ const timer = window.setInterval(() => setNow(Date.now()), 5_000);
+ return () => window.clearInterval(timer);
+ }, []);
+
+ return (
+
+
+
+
+
+ upwatch
+
+
+
+
+
+
+ System status
+ Service availability
+ Live operational health and 90-day availability for every public service.
+
+
+ {statusQuery.isPending ? (
+
+
+
{[0, 1, 2].map((item) =>
)}
+
{errorMessage(statusQuery.error)}
+
+
+ ) : (
+ <>
+
+
+
+
{OVERALL_COPY[status.overall].title}
+
{OVERALL_COPY[status.overall].detail}
+
+
+
Services
+
Availability is calculated from checks collected over the last 90 days.
+
+
+
+
+
No public services yet
+
Service health will appear here after monitoring is enabled.
+
+ {status.services.map((service) => {
+ const serviceStatus = SERVICE_STATUS[service.status];
+ return (
+
+
+
+
+ {service.name}
+ {serviceStatus.label}
+
+
+ 90-day uptime
+ {service.uptime90d === null ? "—" : `${service.uptime90d.toFixed(1)}%`}
+
+
+
+ );
+ })}
+
+
+
+