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/ServicePage.tsx

@@ -1,11 +1,19 @@
 import { useMemo, useState } from "react";
-import { useNavigate, useParams } from "react-router-dom";
+import { useParams, useNavigate } from "react-router-dom";
 import { Alert, AlertDescription } from "@/components/ui/alert";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Switch } from "@/components/ui/switch";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select";
 import {
 	useDeleteServiceInstance,
 	useSaveServiceInstance,
@@ -13,6 +21,7 @@ import {
 	useServiceTypes,
 } from "../hooks/useServices";
 import { useIsMobile } from "../hooks/useIsMobile";
+import { SheetForm } from "@/components/ui/sheet-form";
 import type {
 	ServiceInstance,
 	ServiceInstanceInput,
@@ -20,8 +29,12 @@ import type {
 } from "../types";
 import { SectionCard } from "../components/SectionCard";
 import { ConfirmDialog } from "../components/ConfirmDialog";
-import { SheetForm } from "@/components/ui/sheet-form";
 import { getServiceBinding } from "../integrations/registry";
+import {
+	OVERVIEW_TAB,
+	serviceContentTabs,
+	type ContentTab,
+} from "./service-tabs";
 
 function Field({
 	label,
@@ -52,6 +65,7 @@ export function ServicePage() {
 	}>();
 	const { data: services = [] } = useServiceInstances(serviceType || undefined);
 	const { data: types = [] } = useServiceTypes();
+	const navigate = useNavigate();
 	const saveService = useSaveServiceInstance();
 	const deleteService = useDeleteServiceInstance();
 
@@ -64,24 +78,35 @@ export function ServicePage() {
 		() => types.find((t) => t.service_type === serviceType),
 		[types, serviceType],
 	);
+	const contentTabs = useMemo(
+		() => serviceContentTabs(serviceType),
+		[serviceType],
+	);
+	const siblings = useMemo(
+		() => services.filter((s) => s.service_type === serviceType),
+		[services, serviceType],
+	);
+	// R3.1: switcher trigger keys off ENABLED siblings (not total).
+	const enabledSiblings = useMemo(
+		() => siblings.filter((s) => s.enabled),
+		[siblings],
+	);
+	const showSwitcher = enabledSiblings.length > 1;
 
-	const navigate = useNavigate();
 	const [name, setName] = useState("");
 	const [enabled, setEnabled] = useState(true);
 	const [draftConfig, setDraftConfig] = useState<Record<string, unknown>>({});
+	const [draftSecrets, setDraftSecrets] = useState<Record<string, string>>({});
 	const [deleteOpen, setDeleteOpen] = useState(false);
 	const [hydrated, setHydrated] = useState(false);
 	const isMobile = useIsMobile();
-	// The mobile SheetForm opens by default when the page loads: this page is
-	// reached via /services/:serviceType/:serviceId, always editing an existing
-	// instance, so there is no separate "open edit" trigger on mobile.
 	const [sheetOpen, setSheetOpen] = useState(true);
 
-	// Hydrate local form state once the instance loads.
 	if (instance && !hydrated) {
 		setName(instance.name);
 		setEnabled(instance.enabled);
 		setDraftConfig({ ...instance.config });
+		setDraftSecrets({});
 		setHydrated(true);
 	}
 
@@ -102,84 +127,77 @@ export function ServicePage() {
 	}
 
 	function buildInput(): ServiceInstanceInput {
+		// R2.3/R10.1: collect typed secret drafts. Empty values mean "keep the
+		// existing value" so they are filtered out before sending.
+		const onlyChangedSecrets = Object.fromEntries(
+			Object.entries(draftSecrets).filter(([, v]) => v !== ""),
+		);
 		return {
 			id: instance!.id,
 			service_type: instance!.service_type,
 			name,
 			config: draftConfig,
-			secrets: {}, // secrets are managed via the dedicated inputs below
+			secrets: onlyChangedSecrets,
 			enabled,
 		};
 	}
 
 	async function save() {
 		await saveService.mutateAsync(buildInput());
-		// R4.5: close the sheet on successful save and return to the services list
-		// (on mobile the sheet IS the page, so closing it would strand the user).
-		if (isMobile) {
-			setSheetOpen(false);
-			navigate("/services");
-		}
+		// Clear secret drafts after a successful save so the inputs reset to
+		// "leave blank to keep" state.
+		setDraftSecrets({});
 	}
 
-	const configFields = (
-		<ServiceConnectionFields
+	const allTabs: ContentTab[] = [OVERVIEW_TAB, ...contentTabs];
+
+	// The config + widgets body, shared between desktop tabs and mobile SheetForm.
+	const widgetsContent =
+		binding.widgets.length > 0 ? (
+			<div className="flex flex-col gap-2">
+				{binding.widgets.map((w) => (
+					<div
+						key={w.kind}
+						className="flex items-center justify-between rounded border p-2"
+					>
+						<div>
+							<div className="font-medium">{w.name}</div>
+							<div className="text-xs text-muted-foreground">
+								{w.description}
+							</div>
+						</div>
+						<Badge variant="outline">{w.kind}</Badge>
+					</div>
+				))}
+				<p className="text-xs text-muted-foreground">
+					Add these to the dashboard from the dashboard's edit dialog.
+				</p>
+			</div>
+		) : (
+			<p className="text-sm text-muted-foreground">
+				No widget kinds for this service type.
+			</p>
+		);
+
+	const configBody = (
+		<ConfigBody
 			instance={instance}
 			typeInfo={typeInfo}
 			draftConfig={draftConfig}
 			onConfigChange={setDraftConfig}
-			isMobile={isMobile}
+			draftSecrets={draftSecrets}
+			onSecretsChange={setDraftSecrets}
+			name={name}
+			enabled={enabled}
+			onNameChange={setName}
+			onEnabledChange={setEnabled}
+			onSave={save}
+			savePending={saveService.isPending}
+			onDelete={() => setDeleteOpen(true)}
 		/>
 	);
 
-	const widgetsCard =
-		binding.widgets.length > 0 ? (
-			<SectionCard
-				title="Widgets"
-				description="Widget kinds this service provides."
-			>
-				<div className="flex flex-col gap-2">
-					{binding.widgets.map((w) => (
-						<div
-							key={w.kind}
-							className="flex items-center justify-between rounded border p-2"
-						>
-							<div>
-								<div className="font-medium">{w.name}</div>
-								<div className="text-xs text-muted-foreground">
-									{w.description}
-								</div>
-							</div>
-							<Badge variant="outline">{w.kind}</Badge>
-						</div>
-					))}
-					<p className="text-xs text-muted-foreground">
-						Add these to the dashboard from the dashboard's edit dialog.
-					</p>
-				</div>
-			</SectionCard>
-		) : null;
-
-	const confirmDelete = (
-		<ConfirmDialog
-			open={deleteOpen}
-			title="Delete service?"
-			message="This removes the service and any widgets that reference it. This cannot be undone."
-			confirmLabel="Delete"
-			onCancel={() => setDeleteOpen(false)}
-			onConfirm={() => {
-				deleteService.mutate(instance.id);
-				setDeleteOpen(false);
-			}}
-		/>
-	);
-
-	// Dirty when any editable field diverges from the persisted instance (mobile SheetForm R4.5 guard).
-	const isDirty =
-		name !== instance.name ||
-		enabled !== instance.enabled ||
-		JSON.stringify(draftConfig) !== JSON.stringify(instance.config);
-
+	// Mobile: render inside a SheetForm (open on mount; cancel navigates back).
 	if (isMobile) {
 		return (
 			<div className="flex flex-col gap-4">
@@ -193,113 +211,153 @@ export function ServicePage() {
 						navigate("/services");
 					}}
 					isPending={saveService.isPending}
-					isDirty={isDirty}
+					isDirty={
+						name !== instance.name ||
+						enabled !== instance.enabled ||
+						JSON.stringify(draftConfig) !== JSON.stringify(instance.config)
+					}
 				>
 					<div className="flex flex-col gap-6">
-						<Field label="Name" htmlFor="service-name">
-							<Input
-								id="service-name"
-								value={name}
-								onChange={(e) => setName(e.target.value)}
-							/>
-						</Field>
-						<div className="flex items-center gap-2">
-							<Switch
-								id="service-enabled"
-								checked={enabled}
-								onCheckedChange={setEnabled}
-							/>
-							<Label htmlFor="service-enabled">Enabled</Label>
-						</div>
-						{configFields}
-						<Button
-							className="mobile-touch-target"
-							variant="destructive"
-							onClick={() => setDeleteOpen(true)}
-						>
-							Delete service
-						</Button>
-						{widgetsCard}
+						{allTabs.map((tab) => {
+							const TabComponent = tab.Component;
+							return (
+								<div key={tab.label}>
+									<h3 className="mb-2 text-sm font-semibold text-muted-foreground">
+										{tab.label}
+									</h3>
+									<TabComponent instance={instance} />
+								</div>
+							);
+						})}
+						{widgetsContent}
+						{configBody}
 					</div>
 				</SheetForm>
-				{confirmDelete}
+				<ConfirmDialog
+					open={deleteOpen}
+					title="Delete service?"
+					message="This removes the service and any widgets that reference it. This cannot be undone."
+					confirmLabel="Delete"
+					onCancel={() => setDeleteOpen(false)}
+					onConfirm={() => {
+						deleteService.mutate(instance.id);
+						setDeleteOpen(false);
+						navigate("/services");
+					}}
+				/>
 			</div>
 		);
 	}
 
 	return (
 		<div className="flex flex-col gap-4">
-			<div className="flex items-center justify-between">
-				<div>
+			{/* Header + instance switcher */}
+			<div className="flex items-center justify-between gap-4">
+				<div className="min-w-0">
 					<h2 className="text-xl font-semibold">{instance.name}</h2>
 					<p className="text-sm text-muted-foreground">{binding.description}</p>
 				</div>
-				<Badge variant="outline">{binding.name}</Badge>
+				<div className="flex items-center gap-2">
+					{showSwitcher ? (
+						<Select
+							value={instance.id}
+							onValueChange={(id) => navigate(`/services/${serviceType}/${id}`)}
+						>
+							<SelectTrigger className="w-[180px]">
+								<SelectValue />
+							</SelectTrigger>
+							<SelectContent>
+								{siblings.map((s) => (
+									<SelectItem key={s.id} value={s.id}>
+										{s.name}
+									</SelectItem>
+								))}
+							</SelectContent>
+						</Select>
+					) : null}
+					<Badge variant="outline">{binding.name}</Badge>
+				</div>
 			</div>
 
-			<SectionCard title="General">
-				<div className="flex flex-col gap-3">
-					<Field label="Name" htmlFor="service-name">
-						<Input
-							id="service-name"
-							value={name}
-							onChange={(e) => setName(e.target.value)}
-						/>
-					</Field>
-					<div className="flex items-center gap-2">
-						<Switch
-							id="service-enabled"
-							className="mobile-touch-target"
-							checked={enabled}
-							onCheckedChange={setEnabled}
-						/>
-						<Label htmlFor="service-enabled">Enabled</Label>
-					</div>
-					<div className="flex justify-between">
-						<Button
-							className="mobile-touch-target"
-							onClick={save}
-							disabled={saveService.isPending}
-						>
-							Save
-						</Button>
-						<Button
-							className="mobile-touch-target"
-							variant="destructive"
-							onClick={() => setDeleteOpen(true)}
-						>
-							Delete
-						</Button>
-					</div>
-				</div>
-			</SectionCard>
+			{/* Tab skeleton */}
+			<Tabs defaultValue="Overview">
+				<TabsList>
+					<TabsTrigger value="Overview">Overview</TabsTrigger>
+					{contentTabs.map((tab) => (
+						<TabsTrigger key={tab.label} value={tab.label}>
+							{tab.label}
+						</TabsTrigger>
+					))}
+					<TabsTrigger value="Widgets">Widgets</TabsTrigger>
+					<TabsTrigger value="Config">Config</TabsTrigger>
+				</TabsList>
 
-			{configFields}
+				{allTabs.map((tab) => {
+					const TabComponent = tab.Component;
+					return (
+						<TabsContent key={tab.label} value={tab.label}>
+							<TabComponent instance={instance} />
+						</TabsContent>
+					);
+				})}
 
-			{widgetsCard}
+				<TabsContent value="Widgets">
+					<SectionCard
+						title="Widgets"
+						description="Widget kinds this service provides."
+					>
+						{widgetsContent}
+					</SectionCard>
+				</TabsContent>
 
-			{confirmDelete}
+				<TabsContent value="Config">{configBody}</TabsContent>
+			</Tabs>
+
+			<ConfirmDialog
+				open={deleteOpen}
+				title="Delete service?"
+				message="This removes the service and any widgets that reference it. This cannot be undone."
+				confirmLabel="Delete"
+				onCancel={() => setDeleteOpen(false)}
+				onConfirm={() => {
+					deleteService.mutate(instance.id);
+					setDeleteOpen(false);
+					navigate("/services");
+				}}
+			/>
 		</div>
 	);
 }
 
-function ServiceConnectionFields({
+function ConfigBody({
 	instance,
 	typeInfo,
 	draftConfig,
 	onConfigChange,
-	isMobile,
+	draftSecrets,
+	onSecretsChange,
+	name,
+	enabled,
+	onNameChange,
+	onEnabledChange,
+	onSave,
+	savePending,
+	onDelete,
 }: {
 	instance: ServiceInstance;
 	typeInfo: ServiceTypeInfo | undefined;
 	draftConfig: Record<string, unknown>;
 	onConfigChange: (config: Record<string, unknown>) => void;
-	isMobile: boolean;
+	draftSecrets: Record<string, string>;
+	onSecretsChange: (secrets: Record<string, string>) => void;
+	name: string;
+	enabled: boolean;
+	onNameChange: (name: string) => void;
+	onEnabledChange: (enabled: boolean) => void;
+	onSave: () => void;
+	savePending: boolean;
+	onDelete: () => void;
 }) {
-	const saveService = useSaveServiceInstance();
-	// Empty-on-edit: local state starts blank; a blank field means "keep existing".
-	const [draftSecrets, setDraftSecrets] = useState<Record<string, string>>({});
-
 	const properties =
 		(
 			(typeInfo?.config_schema ?? {}) as {
@@ -322,107 +380,97 @@ function ServiceConnectionFields({
 					{ type: typeof value === "number" ? "integer" : "string" },
 				]);
 
-	function handleUpdateConnection() {
-		const onlyChanged = Object.fromEntries(
-			Object.entries(draftSecrets).filter(([, v]) => v !== ""),
-		);
-		saveService.mutate({
-			id: instance.id,
-			service_type: instance.service_type,
-			name: instance.name,
-			config: draftConfig,
-			secrets: onlyChanged,
-			enabled: instance.enabled,
-		});
-		setDraftSecrets({});
-	}
-
-	const fields = (
-		<div className="flex flex-col gap-3">
-			{configEntries.length === 0 ? (
-				<p className="text-sm text-muted-foreground">No connection config.</p>
-			) : (
-				<div className="flex flex-col gap-3">
-					{configEntries.map(([key, schema]) => {
-						const isNumber =
-							schema.type === "integer" || schema.type === "number";
-						return (
-							<Field
-								key={key}
-								label={key}
-								htmlFor={`cfg-${key}`}
-								helper={schema.description}
-							>
-								<Input
-									id={`cfg-${key}`}
-									type={isNumber ? "number" : "text"}
-									value={String(draftConfig[key] ?? "")}
-									onChange={(e) =>
-										onConfigChange({
-											...draftConfig,
-											[key]: isNumber
-												? e.target.value === ""
-													? undefined
-													: Number(e.target.value)
-												: e.target.value,
-										})
-									}
-								/>
-							</Field>
-						);
-					})}
-				</div>
-			)}
-
-			{Object.keys(instance.secrets_set).length === 0 ? (
-				<p className="text-sm text-muted-foreground">No secret fields.</p>
-			) : (
-				<div className="flex flex-col gap-3">
-					{Object.entries(instance.secrets_set).map(([key, isSet]) => (
-						<div key={key} className="flex flex-col gap-1.5">
-							<Field
-								label={key}
-								htmlFor={`secret-${key}`}
-								helper="Leave blank to keep the current value."
-							>
-								<Input
-									id={`secret-${key}`}
-									type="password"
-									placeholder={isSet ? "•••••• (set)" : "Not set"}
-									value={draftSecrets[key] ?? ""}
-									onChange={(e) =>
-										setDraftSecrets({
-											...draftSecrets,
-											[key]: e.target.value,
-										})
-									}
-								/>
-							</Field>
-							{isSet ? <Badge variant="secondary">set</Badge> : null}
-						</div>
-					))}
-				</div>
-			)}
-
-			<Button className="mobile-touch-target" onClick={handleUpdateConnection}>
-				Update connection
-			</Button>
-		</div>
-	);
-
-	// On mobile the fields render inside the SheetForm body without a card
-	// wrapper (the SheetForm already provides the container). On desktop they
-	// keep their original SectionCard framing.
-	if (isMobile) {
-		return <div className="flex flex-col gap-3">{fields}</div>;
-	}
-
 	return (
-		<SectionCard
-			title="Connection"
-			description="Edit non-secret connection config and secret values."
-		>
-			{fields}
+		<SectionCard title="Config">
+			<div className="flex flex-col gap-3">
+				<Field label="Name" htmlFor="service-name">
+					<Input
+						id="service-name"
+						value={name}
+						onChange={(e) => onNameChange(e.target.value)}
+					/>
+				</Field>
+				<div className="flex items-center gap-2">
+					<Switch
+						id="service-enabled"
+						checked={enabled}
+						onCheckedChange={onEnabledChange}
+					/>
+					<Label htmlFor="service-enabled">Enabled</Label>
+				</div>
+
+				{configEntries.length === 0 ? (
+					<p className="text-sm text-muted-foreground">No connection config.</p>
+				) : (
+					<div className="flex flex-col gap-3">
+						{configEntries.map(([key, schema]) => {
+							const isNumber =
+								schema.type === "integer" || schema.type === "number";
+							return (
+								<Field
+									key={key}
+									label={key}
+									htmlFor={`cfg-${key}`}
+									helper={schema.description}
+								>
+									<Input
+										id={`cfg-${key}`}
+										type={isNumber ? "number" : "text"}
+										value={String(draftConfig[key] ?? "")}
+										onChange={(e) =>
+											onConfigChange({
+												...draftConfig,
+												[key]: isNumber
+													? e.target.value === ""
+														? undefined
+														: Number(e.target.value)
+													: e.target.value,
+											})
+										}
+									/>
+								</Field>
+							);
+						})}
+					</div>
+				)}
+
+				{Object.keys(instance.secrets_set).length === 0 ? null : (
+					<div className="flex flex-col gap-3">
+						{Object.entries(instance.secrets_set).map(([key, isSet]) => (
+							<div key={key} className="flex flex-col gap-1.5">
+								<Field
+									label={key}
+									htmlFor={`secret-${key}`}
+									helper="Leave blank to keep the current value."
+								>
+									<Input
+										id={`secret-${key}`}
+										type="password"
+										placeholder={isSet ? "•••••• (set)" : "Not set"}
+										value={draftSecrets[key] ?? ""}
+										onChange={(e) =>
+											onSecretsChange({
+												...draftSecrets,
+												[key]: e.target.value,
+											})
+										}
+									/>
+								</Field>
+								{isSet ? <Badge variant="secondary">set</Badge> : null}
+							</div>
+						))}
+					</div>
+				)}
+
+				<div className="flex justify-between">
+					<Button onClick={onSave} disabled={savePending}>
+						Save
+					</Button>
+					<Button variant="destructive" onClick={onDelete}>
+						Delete
+					</Button>
+				</div>
+			</div>
 		</SectionCard>
 	);
 }