Stage 11: polish, cross-cutting concerns & hardening

- 11.1 MainLayout health indicator: warning MessageBar when fail2ban offline
- 11.2 formatDate utility + TimezoneProvider + GET /api/setup/timezone
- 11.3 Responsive sidebar: auto-collapse <640px, media query listener
- 11.4 PageFeedback (PageLoading/PageError/PageEmpty), BanTable updated
- 11.5 prefers-reduced-motion: disable sidebar transition
- 11.6 WorldMap ARIA: role/tabIndex/aria-label/onKeyDown for countries
- 11.7 Health transition logging (fail2ban_came_online/went_offline)
- 11.8 Global handlers: Fail2BanConnectionError/ProtocolError -> 502
- 11.9 379 tests pass, 82% coverage, ruff+mypy+tsc+eslint clean
- Timezone endpoint: setup_service.get_timezone, 5 new tests

frontend/src/components/BanTable.tsx

@@ -19,9 +19,6 @@ import {
   DataGridHeader,
   DataGridHeaderCell,
   DataGridRow,
-  MessageBar,
-  MessageBarBody,
-  Spinner,
   Text,
   Tooltip,
   makeStyles,
@@ -29,6 +26,7 @@ import {
   type TableColumnDefinition,
   createTableColumn,
 } from "@fluentui/react-components";
+import { PageEmpty, PageError, PageLoading } from "./PageFeedback";
 import { ChevronLeftRegular, ChevronRightRegular } from "@fluentui/react-icons";
 import { useBans, type BanTableMode } from "../hooks/useBans";
 import type { AccessListItem, DashboardBanItem, TimeRange } from "../types/ban";
@@ -236,7 +234,7 @@ function buildAccessColumns(styles: ReturnType<typeof useStyles>): TableColumnDe
  */
 export function BanTable({ mode, timeRange }: BanTableProps): React.JSX.Element {
   const styles = useStyles();
-  const { banItems, accessItems, total, page, setPage, loading, error } = useBans(
+  const { banItems, accessItems, total, page, setPage, loading, error, refresh } = useBans(
     mode,
     timeRange,
   );
@@ -248,22 +246,14 @@ export function BanTable({ mode, timeRange }: BanTableProps): React.JSX.Element
   // Loading state
   // --------------------------------------------------------------------------
   if (loading) {
-    return (
-      <div className={styles.centred}>
-        <Spinner label="Loading…" />
-      </div>
-    );
+    return <PageLoading label="Loading…" />;
   }
 
   // --------------------------------------------------------------------------
   // Error state
   // --------------------------------------------------------------------------
   if (error) {
-    return (
-      <MessageBar intent="error">
-        <MessageBarBody>{error}</MessageBarBody>
-      </MessageBar>
-    );
+    return <PageError message={error} onRetry={refresh} />;
   }
 
   // --------------------------------------------------------------------------
@@ -272,11 +262,11 @@ export function BanTable({ mode, timeRange }: BanTableProps): React.JSX.Element
   const isEmpty = mode === "bans" ? banItems.length === 0 : accessItems.length === 0;
   if (isEmpty) {
     return (
-      <div className={styles.centred}>
-        <Text size={300} style={{ color: tokens.colorNeutralForeground3 }}>
-          No {mode === "bans" ? "bans" : "accesses"} recorded in the selected time window.
-        </Text>
-      </div>
+      <PageEmpty
+        message={`No ${
+          mode === "bans" ? "bans" : "accesses"
+        } recorded in the selected time window.`}
+      />
     );
   }
 

frontend/src/components/PageFeedback.tsx

@@ -0,0 +1,139 @@
+/**
+ * Reusable page-level feedback components.
+ *
+ * Three shared building blocks for consistent data-loading UI across all pages:
+ *
+ * - {@link PageLoading}  — Centred `Spinner` for full-region loading states.
+ * - {@link PageError}    — `MessageBar` with an error message and a retry button.
+ * - {@link PageEmpty}    — Centred neutral message for zero-result states.
+ */
+
+import {
+  Button,
+  MessageBar,
+  MessageBarActions,
+  MessageBarBody,
+  MessageBarTitle,
+  Spinner,
+  Text,
+  makeStyles,
+  tokens,
+} from "@fluentui/react-components";
+import { ArrowClockwiseRegular } from "@fluentui/react-icons";
+
+// ---------------------------------------------------------------------------
+// Styles
+// ---------------------------------------------------------------------------
+
+const useStyles = makeStyles({
+  centred: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    minHeight: "120px",
+    gap: tokens.spacingVerticalM,
+    padding: tokens.spacingVerticalL,
+  },
+  emptyText: {
+    color: tokens.colorNeutralForeground3,
+    textAlign: "center",
+  },
+});
+
+// ---------------------------------------------------------------------------
+// PageLoading
+// ---------------------------------------------------------------------------
+
+export interface PageLoadingProps {
+  /** Short description shown next to the spinner. */
+  label?: string;
+}
+
+/**
+ * Full-region loading indicator using a Fluent UI `Spinner`.
+ *
+ * @example
+ * ```tsx
+ * if (loading) return <PageLoading label="Loading jails…" />;
+ * ```
+ */
+export function PageLoading({ label = "Loading…" }: PageLoadingProps): React.JSX.Element {
+  const styles = useStyles();
+  return (
+    <div className={styles.centred} aria-live="polite" aria-label={label}>
+      <Spinner label={label} />
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// PageError
+// ---------------------------------------------------------------------------
+
+export interface PageErrorProps {
+  /** Error message shown in the `MessageBar`. */
+  message: string;
+  /** Optional callback invoked when the user clicks "Retry". */
+  onRetry?: () => void;
+}
+
+/**
+ * Error state `MessageBar` with an optional retry button.
+ *
+ * @example
+ * ```tsx
+ * if (error) return <PageError message={error} onRetry={refresh} />;
+ * ```
+ */
+export function PageError({ message, onRetry }: PageErrorProps): React.JSX.Element {
+  return (
+    <MessageBar intent="error" role="alert">
+      <MessageBarBody>
+        <MessageBarTitle>Error</MessageBarTitle>
+        {message}
+      </MessageBarBody>
+      {onRetry != null && (
+        <MessageBarActions>
+          <Button
+            appearance="transparent"
+            size="small"
+            icon={<ArrowClockwiseRegular />}
+            onClick={onRetry}
+            aria-label="Retry"
+          >
+            Retry
+          </Button>
+        </MessageBarActions>
+      )}
+    </MessageBar>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// PageEmpty
+// ---------------------------------------------------------------------------
+
+export interface PageEmptyProps {
+  /** Message displayed to the user, e.g. "No bans found." */
+  message: string;
+}
+
+/**
+ * Centred empty-state message for tables or lists with zero results.
+ *
+ * @example
+ * ```tsx
+ * if (items.length === 0) return <PageEmpty message="No bans in this period." />;
+ * ```
+ */
+export function PageEmpty({ message }: PageEmptyProps): React.JSX.Element {
+  const styles = useStyles();
+  return (
+    <div className={styles.centred} role="status" aria-label={message}>
+      <Text size={200} className={styles.emptyText}>
+        {message}
+      </Text>
+    </div>
+  );
+}

frontend/src/components/WorldMap.tsx

@@ -102,9 +102,23 @@ function GeoLayer({
             <g
               key={geo.rsmKey}
               style={{ cursor: cc ? "pointer" : "default" }}
+              role={cc ? "button" : undefined}
+              tabIndex={cc ? 0 : undefined}
+              aria-label={cc
+                ? `${cc}: ${String(count)} ban${count !== 1 ? "s" : ""}${
+                    isSelected ? " (selected)" : ""
+                  }`
+                : undefined}
+              aria-pressed={isSelected || undefined}
               onClick={(): void => {
                 if (cc) handleClick(cc);
               }}
+              onKeyDown={(e): void => {
+                if (cc && (e.key === "Enter" || e.key === " ")) {
+                  e.preventDefault();
+                  handleClick(cc);
+                }
+              }}
             >
               <Geography
                 geography={geo}
@@ -170,7 +184,11 @@ export function WorldMap({
   const maxCount = Math.max(0, ...Object.values(countries));
 
   return (
-    <div className={styles.mapWrapper}>
+    <div
+      className={styles.mapWrapper}
+      role="img"
+      aria-label="World map showing banned IP counts by country. Click a country to filter the table below."
+    >
       <ComposableMap
         projection="geoMercator"
         projectionConfig={{ scale: 130, center: [10, 20] }}