Rebase services-as-hub-ia onto mobile-responsive-parity

Combine both branches into a single coherent branch:
- Full mobile responsive parity (useIsMobile, MobileCardRow, SheetForm,
  .mobile-touch-target, mobile cards, SheetForm forms, 44px targets,
  dirty-state confirm, TablePagination, refetchIntervalInBackground).
- Full services-as-hub IA (data-driven nav, service-page tab skeleton,
  new service types, Authentik directory + messaging, named dashboards,
  legacy routes 404, Observability split, Jellyseerr absorbed).

Enhancement: service tabs now use mobile-parity primitives:
- MediaTab: MobileCardRow below md (title/size/HDR/library/year) +
  TablePagination; DataTable at md+ (desktop branch preserved).
- FilesTab: MobileCardRow below md (name/type/size/modified) +
  handleRowClick; DataTable at md+.
- ServicePage: SheetForm branch below md (open-on-mount, sticky header
  + save bar, cancel navigates back to /services, dirty-state guard).
- Dashboard: single-column + section anchors below md (from mobile-parity)
  + empty-state CTA (from services-hub).
- App.tsx: useIsMobile() replaces inline matchMedia (from mobile-parity)
  + data-driven useNavItems (from services-hub).
- Backup tables (BackupAlerts/Jobs/Runs) already have MobileCardRow from
  mobile-parity; JobsTab inherits mobile behavior through its sub-components.

Conflict resolutions:
- Backend: entirely from services-hub (mobile didn't touch it).
- Deleted pages (Media/FileBrowser/Actions/Users/UsersPage/Applications/
  ObservabilityPage/BackupsPage + hooks/useUsers + tests): kept deleted
  (services-hub deleted them; content moved into service tabs).
- New service-tabs/*: from services-hub, enhanced with mobile patterns.
- App.tsx: services-hub's data-driven nav + mobile-parity's useIsMobile.
- Dashboard.tsx: merged (services-hub CTA + mobile-parity sections/anchors).
- ServicePage.tsx: services-hub's tab skeleton + mobile-parity's SheetForm.
- Primitives (useIsMobile/mobile-card/sheet-form/etc.): from mobile-parity.

117 frontend tests pass (mobile-parity's 122 - 5 deleted page tests +
services-hub's new tab/dashboard tests); 271 backend tests pass; lint/
build green both sides.

frontend/src/pages/service-tabs/MetricsTab.tsx

@@ -0,0 +1,117 @@
+/**
+ * Prometheus Metrics tab (spec R2.4, R8.2).
+ *
+ * Lifts the Prometheus status + targets content from the old cross-service
+ * ObservabilityPage into an instance-scoped tab. Shows service health and
+ * the Node Exporter scrape-targets list.
+ *
+ * The hooks (usePrometheusStatus, usePrometheusTargets) are global /
+ * first-configured for now. Wiring `instance.id` is a follow-up.
+ */
+import { Radio } from "lucide-react";
+import {
+	usePrometheusStatus,
+	usePrometheusTargets,
+} from "../../hooks/useObservability";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { Skeleton } from "@/components/ui/skeleton";
+import type { PrometheusTarget, ServiceInstance } from "../../types";
+
+function TargetsTable({ targets }: { targets: PrometheusTarget[] }) {
+	return (
+		<div className="space-y-3">
+			{targets.map((target, idx) => (
+				<div key={idx} className="rounded-lg border p-3">
+					<div className="font-mono text-sm">{target.targets.join(", ")}</div>
+					{target.labels && Object.keys(target.labels).length > 0 && (
+						<div className="mt-2 flex flex-wrap gap-1">
+							{Object.entries(target.labels).map(([key, value]) => (
+								<Badge key={key} variant="outline" className="text-[10px]">
+									{key}: {value}
+								</Badge>
+							))}
+						</div>
+					)}
+				</div>
+			))}
+		</div>
+	);
+}
+
+export function MetricsTab({ instance }: { instance: ServiceInstance }) {
+	// Global / first-configured hooks for now; instance.id scoping is a
+	// follow-up (see file docstring).
+	void instance;
+
+	const {
+		data: status,
+		isLoading: statusLoading,
+		error: statusError,
+	} = usePrometheusStatus();
+	const {
+		data: targets,
+		isLoading: targetsLoading,
+		error: targetsError,
+	} = usePrometheusTargets();
+
+	const statusDetail = status?.up
+		? status.version
+			? `version ${status.version}`
+			: "reachable"
+		: statusLoading
+			? "checking…"
+			: "unreachable";
+
+	return (
+		<div className="space-y-4">
+			<div className="flex items-center gap-2 text-sm text-muted-foreground">
+				<Radio className="h-4 w-4" />
+				Prometheus {statusDetail}
+			</div>
+
+			{statusError && (
+				<Alert variant="destructive">
+					<AlertTitle>Failed to reach Prometheus</AlertTitle>
+					<AlertDescription>{statusError.message}</AlertDescription>
+				</Alert>
+			)}
+
+			<Card>
+				<CardHeader>
+					<CardTitle className="flex items-center gap-2">
+						<Radio className="h-4 w-4" />
+						Node Exporter Targets ({targets?.length ?? 0})
+					</CardTitle>
+				</CardHeader>
+				<CardContent>
+					{targetsLoading ? (
+						<div className="space-y-2">
+							<Skeleton className="h-16 w-full" />
+							<Skeleton className="h-16 w-full" />
+						</div>
+					) : !targets || targets.length === 0 ? (
+						<div className="flex h-full min-h-[160px] flex-col items-center justify-center gap-2 rounded-md border p-6 text-center">
+							<Radio className="h-8 w-8 text-muted-foreground" />
+							<div className="font-medium">No Node Exporter targets</div>
+							<div className="max-w-md text-sm text-muted-foreground">
+								Enable Node Exporter on an SSH machine in Settings to populate
+								Prometheus scrape targets.
+							</div>
+						</div>
+					) : (
+						<TargetsTable targets={targets} />
+					)}
+				</CardContent>
+			</Card>
+
+			{targetsError && (
+				<Alert variant="destructive">
+					<AlertTitle>Failed to load targets</AlertTitle>
+					<AlertDescription>{targetsError.message}</AlertDescription>
+				</Alert>
+			)}
+		</div>
+	);
+}