feat(frontend): slice 3 — Backups cluster migration + nav/IA

Web UI rework.
- Migrate BackupAlertsTable, BackupJobsTable, BackupRunsTable,
  BackupsPage, BackupDashboardWidget off @mui (shadcn Table + Badge
  severity variants: success=chart-2, warning=chart-3, destructive)
- App.tsx IA: Backups now top-level nav (DatabaseBackup icon);
  Media surface primary at /media; /applications -> /media redirect
  in both route trees (mirrors /monitoring -> /observability)

Gate: build + lint + test green.

frontend/src/components/BackupRunsTable.tsx

@@ -1,103 +1,110 @@
-import {
-    Chip,
-    FormControl,
-    InputLabel,
-    MenuItem,
-    Paper,
-    Select,
-    Table,
-    TableBody,
-    TableCell,
-    TableContainer,
-    TableHead,
-    TableRow,
-} from "@mui/material";
 import { useState } from "react";
+import { Badge } from "@/components/ui/badge";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select";
+import {
+	Table,
+	TableBody,
+	TableCell,
+	TableHead,
+	TableHeader,
+	TableRow,
+} from "@/components/ui/table";
 import type { BackupRun } from "../types/backups";
 
 interface Props {
-    runs: BackupRun[];
+	runs: BackupRun[];
 }
 
 function formatBytes(bytes: number | null): string {
-    if (bytes === null || bytes === undefined) return "—";
-    if (bytes < 1024) return `${bytes} B`;
-    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
-    if (bytes < 1024 * 1024 * 1024) return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
-    return `${(bytes / (1024 * 1024 * 1024)).toFixed(1)} GB`;
+	if (bytes === null || bytes === undefined) return "—";
+	if (bytes < 1024) return `${bytes} B`;
+	if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+	if (bytes < 1024 * 1024 * 1024)
+		return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+	return `${(bytes / (1024 * 1024 * 1024)).toFixed(1)} GB`;
 }
 
 function formatDuration(ms: number | null): string {
-    if (ms === null || ms === undefined) return "—";
-    if (ms < 1000) return `${ms}ms`;
-    if (ms < 60_000) return `${(ms / 1000).toFixed(1)}s`;
-    if (ms < 3600_000) return `${(ms / 60_000).toFixed(1)}m`;
-    return `${(ms / 3600_000).toFixed(1)}h`;
+	if (ms === null || ms === undefined) return "—";
+	if (ms < 1000) return `${ms}ms`;
+	if (ms < 60_000) return `${(ms / 1000).toFixed(1)}s`;
+	if (ms < 3600_000) return `${(ms / 60_000).toFixed(1)}m`;
+	return `${(ms / 3600_000).toFixed(1)}h`;
 }
 
 function formatTimestamp(ts: number): string {
-    return new Date(ts * 1000).toLocaleString();
+	return new Date(ts * 1000).toLocaleString();
+}
+
+type StatusVariant = "success" | "destructive" | "warning";
+
+/**
+ * Map a run status onto a Badge variant per design §2.3:
+ * `success` → success (chart-2); `failure` → destructive (chart-4);
+ * `in_progress` → warning (chart-3).
+ */
+function statusVariant(status: string): StatusVariant {
+	if (status === "success") return "success";
+	if (status === "failure") return "destructive";
+	return "warning";
 }
 
 export default function BackupRunsTable({ runs }: Props) {
-    const [statusFilter, setStatusFilter] = useState<string>("all");
-    
-    const filteredRuns = statusFilter === "all"
-        ? runs
-        : runs.filter((r) => r.status === statusFilter);
-    
-    return (
-        <>
-            <FormControl sx={{ minWidth: 120, mb: 2 }}>
-                <InputLabel>Status</InputLabel>
-                <Select
-                    value={statusFilter}
-                    label="Status"
-                    onChange={(e) => setStatusFilter(e.target.value)}
-                >
-                    <MenuItem value="all">All</MenuItem>
-                    <MenuItem value="success">Success</MenuItem>
-                    <MenuItem value="failure">Failure</MenuItem>
-                    <MenuItem value="in_progress">In Progress</MenuItem>
-                </Select>
-            </FormControl>
-            
-            <TableContainer component={Paper}>
-                <Table>
-                    <TableHead>
-                        <TableRow>
-                            <TableCell>Job</TableCell>
-                            <TableCell>Status</TableCell>
-                            <TableCell>Duration</TableCell>
-                            <TableCell>Size</TableCell>
-                            <TableCell>Started</TableCell>
-                        </TableRow>
-                    </TableHead>
-                    <TableBody>
-                        {filteredRuns.map((run) => (
-                            <TableRow key={run.id} hover>
-                                <TableCell>{run.job_id}</TableCell>
-                                <TableCell>
-                                    <Chip
-                                        label={run.status}
-                                        color={
-                                            run.status === "success"
-                                                ? "success"
-                                                : run.status === "failure"
-                                                ? "error"
-                                                : "warning"
-                                        }
-                                        size="small"
-                                    />
-                                </TableCell>
-                                <TableCell>{formatDuration(run.duration_ms)}</TableCell>
-                                <TableCell>{formatBytes(run.bytes_transferred)}</TableCell>
-                                <TableCell>{formatTimestamp(run.started_at)}</TableCell>
-                            </TableRow>
-                        ))}
-                    </TableBody>
-                </Table>
-            </TableContainer>
-        </>
-    );
+	const [statusFilter, setStatusFilter] = useState<string>("all");
+
+	const filteredRuns =
+		statusFilter === "all"
+			? runs
+			: runs.filter((r) => r.status === statusFilter);
+
+	return (
+		<div className="space-y-3">
+			<Select value={statusFilter} onValueChange={setStatusFilter}>
+				<SelectTrigger className="w-[160px]" aria-label="Status filter">
+					<SelectValue placeholder="Status" />
+				</SelectTrigger>
+				<SelectContent>
+					<SelectItem value="all">All</SelectItem>
+					<SelectItem value="success">Success</SelectItem>
+					<SelectItem value="failure">Failure</SelectItem>
+					<SelectItem value="in_progress">In Progress</SelectItem>
+				</SelectContent>
+			</Select>
+
+			<div className="overflow-hidden rounded-lg border border-border">
+				<Table aria-label="Backup runs">
+					<TableHeader>
+						<TableRow className="bg-card hover:bg-card">
+							<TableHead>Job</TableHead>
+							<TableHead>Status</TableHead>
+							<TableHead>Duration</TableHead>
+							<TableHead>Size</TableHead>
+							<TableHead>Started</TableHead>
+						</TableRow>
+					</TableHeader>
+					<TableBody>
+						{filteredRuns.map((run) => (
+							<TableRow key={run.id}>
+								<TableCell>{run.job_id}</TableCell>
+								<TableCell>
+									<Badge variant={statusVariant(run.status)}>
+										{run.status}
+									</Badge>
+								</TableCell>
+								<TableCell>{formatDuration(run.duration_ms)}</TableCell>
+								<TableCell>{formatBytes(run.bytes_transferred)}</TableCell>
+								<TableCell>{formatTimestamp(run.started_at)}</TableCell>
+							</TableRow>
+						))}
+					</TableBody>
+				</Table>
+			</div>
+		</div>
+	);
 }