Service IA refinement: nav naming, instance tabs, config to Settings, configurable Overview

Four coupled changes to the services-as-hub IA:

1. Nav entries use service TYPE names (Jellyfin, SSH Tasks, Alertmanager,
   Grafana, Prometheus, Backups, Authentik) instead of conceptual names
   (Media, Files, Actions, Alerts, Users). ssh_tasks collapses to one
   entry ('SSH Tasks') instead of two. The content tabs inside each
   service page surface the concepts (Files, Actions).

2. Service page gains a two-level tab structure when multiple enabled
   instances of the same type exist: instance tabs on top ([Main Jellyfin]
   [Backup Jellyfin]), content tabs below ([Overview] [Media] [Requests]
   [Widgets]). Clicking an instance tab navigates to the sibling's route.
   Single instance: no instance tabs. Replaces the dropdown switcher.

3. Config tab (connection fields, secrets, enable/disable, delete) moves
   from the service page to Settings > Services tab. The service page
   becomes a PURE operational view (Overview + content tabs + Widgets) --
   no save/delete/config state. Settings gains a 4th tab 'Services' with
   ServiceConfigEditor per instance (schema-driven config fields, secrets
   with leave-blank-to-keep semantics, ConfirmDialog on delete).

4. Overview tab is now a configurable widget grid per service instance.
   Each instance manages its own set of widgets on its Overview. Backend
   widget list endpoints gain ?service_id= and ?scope= (dashboard|service)
   filter params; the main Dashboard uses scope=dashboard to exclude
   service-scoped widgets. The OverviewTab reuses WidgetInstanceCard +
   WidgetConfigDialog. Empty state CTA for instances with no widgets.

All service-tab stubs are replaced; stubs.tsx deleted.

272 backend tests pass (+1 widget filter); 121 frontend tests pass (+3
instance-tabs + OverviewTab); lint/build green both sides.

frontend/src/pages/Settings.tsx

@@ -50,6 +50,17 @@ import {
 import { Switch } from "@/components/ui/switch";
 import { TabsTrigger } from "@/components/ui/tabs";
 import { Textarea } from "@/components/ui/textarea";
+import {
+	useDeleteServiceInstance,
+	useSaveServiceInstance,
+	useServiceInstances,
+	useServiceTypes,
+} from "../hooks/useServices";
+import type {
+	ServiceInstance,
+	ServiceInstanceInput,
+	ServiceTypeInfo,
+} from "../types";
 
 const SERVICE_OPTIONS = [
 	{ value: "monitoring", label: "Monitoring" },
@@ -61,7 +72,7 @@ const SERVICE_OPTIONS = [
 // maps to this sentinel and converts back to "" at the draft boundary.
 const NONE = "__none__";
 
-type SettingsTab = "machines" | "ssh-keys" | "danger";
+type SettingsTab = "machines" | "ssh-keys" | "services" | "danger";
 
 /** Small labeled-field wrapper replacing the MUI `<TextField label>` shell. */
 function FormField({
@@ -995,6 +1006,9 @@ export function Settings() {
 					<TabsTrigger key="ssh-keys" value="ssh-keys">
 						SSH Keys
 					</TabsTrigger>,
+					<TabsTrigger key="services" value="services">
+						Services
+					</TabsTrigger>,
 					<TabsTrigger key="danger" value="danger">
 						Danger Zone
 					</TabsTrigger>,
@@ -1178,6 +1192,7 @@ export function Settings() {
 						onSelectKeyId={setSelectedSSHKeyId}
 					/>
 				)}
+				{tab === "services" && <ServicesAdminCard />}
 				{tab === "danger" && <ResetLocalDatabaseCard />}
 			</TabbedCard>
 			{isMobile ? (
@@ -1311,3 +1326,226 @@ export function Settings() {
 		</div>
 	);
 }
+
+/**
+ * Services admin card for the Settings > Services tab.
+ *
+ * Lists all service instances grouped by type with inline config editing
+ * (enable/disable, config fields, secrets, save, delete). Lifted from the
+ * old ServicePage ConfigBody — the service page is now a pure operational
+ * view; all administration lives here.
+ */
+function ServicesAdminCard() {
+	const { data: services = [] } = useServiceInstances();
+	const { data: types = [] } = useServiceTypes();
+
+	// Group by service_type, alphabetical.
+	const grouped = useMemo(() => {
+		const map = new Map<string, ServiceInstance[]>();
+		for (const svc of services) {
+			const list = map.get(svc.service_type) ?? [];
+			list.push(svc);
+			map.set(svc.service_type, list);
+		}
+		return [...map.entries()].sort((a, b) => a[0].localeCompare(b[0]));
+	}, [services]);
+
+	return (
+		<div className="flex flex-col gap-4">
+			{grouped.length === 0 ? (
+				<p className="text-sm text-muted-foreground">
+					No service instances configured. Create one from the Services page.
+				</p>
+			) : (
+				grouped.map(([serviceType, instances]) => {
+					const typeInfo = types.find((t) => t.service_type === serviceType);
+					return (
+						<SectionCard
+							key={serviceType}
+							title={typeInfo?.name ?? serviceType}
+							description={typeInfo?.description ?? ""}
+						>
+							<div className="flex flex-col gap-4">
+								{instances.map((svc) => (
+									<ServiceConfigEditor
+										key={svc.id}
+										instance={svc}
+										typeInfo={typeInfo}
+									/>
+								))}
+							</div>
+						</SectionCard>
+					);
+				})
+			)}
+		</div>
+	);
+}
+
+function ServiceConfigEditor({
+	instance,
+	typeInfo,
+}: {
+	instance: ServiceInstance;
+	typeInfo: ServiceTypeInfo | undefined;
+}) {
+	const saveService = useSaveServiceInstance();
+	const deleteService = useDeleteServiceInstance();
+	const [name, setName] = useState(instance.name);
+	const [enabled, setEnabled] = useState(instance.enabled);
+	const [draftConfig, setDraftConfig] = useState<Record<string, unknown>>({
+		...instance.config,
+	});
+	const [draftSecrets, setDraftSecrets] = useState<Record<string, string>>({});
+	const [deleteOpen, setDeleteOpen] = useState(false);
+
+	const properties =
+		(
+			(typeInfo?.config_schema ?? {}) as {
+				properties?: Record<string, { type?: string; description?: string }>;
+			}
+		).properties ?? {};
+	const configEntries: Array<
+		[string, { type?: string; description?: string }]
+	> =
+		Object.keys(properties).length > 0
+			? Object.entries(properties).map(([key, schema]) => [
+					key,
+					{ type: schema?.type, description: schema?.description },
+				])
+			: Object.entries(instance.config).map(([key, value]) => [
+					key,
+					{ type: typeof value === "number" ? "integer" : "string" },
+				]);
+
+	function buildInput(): ServiceInstanceInput {
+		const onlyChangedSecrets = Object.fromEntries(
+			Object.entries(draftSecrets).filter(([, v]) => v !== ""),
+		);
+		return {
+			id: instance.id,
+			service_type: instance.service_type,
+			name,
+			config: draftConfig,
+			secrets: onlyChangedSecrets,
+			enabled,
+		};
+	}
+
+	async function handleSave() {
+		await saveService.mutateAsync(buildInput());
+		setDraftSecrets({});
+	}
+
+	return (
+		<>
+		<div className="rounded-lg border p-4">
+			<div className="mb-3 flex items-center justify-between">
+				<span className="font-medium">{instance.name}</span>
+				<Badge variant={instance.enabled ? "default" : "secondary"}>
+					{instance.enabled ? "enabled" : "disabled"}
+				</Badge>
+			</div>
+			<div className="flex flex-col gap-3">
+				<FormField label="Name" htmlFor={`svc-name-${instance.id}`}>
+					<Input
+						id={`svc-name-${instance.id}`}
+						value={name}
+						onChange={(e) => setName(e.target.value)}
+					/>
+				</FormField>
+				<div className="flex items-center gap-2">
+					<Switch
+						id={`svc-enabled-${instance.id}`}
+						checked={enabled}
+						onCheckedChange={setEnabled}
+					/>
+					<Label htmlFor={`svc-enabled-${instance.id}`}>Enabled</Label>
+				</div>
+
+				{configEntries.map(([key, schema]) => {
+					const isNumber =
+						schema.type === "integer" || schema.type === "number";
+					return (
+						<FormField
+							key={key}
+							label={key}
+							htmlFor={`svc-cfg-${instance.id}-${key}`}
+							helperText={schema.description}
+						>
+							<Input
+								id={`svc-cfg-${instance.id}-${key}`}
+								type={isNumber ? "number" : "text"}
+								value={String(draftConfig[key] ?? "")}
+								onChange={(e) =>
+									setDraftConfig({
+										...draftConfig,
+										[key]: isNumber
+											? e.target.value === ""
+												? undefined
+												: Number(e.target.value)
+											: e.target.value,
+									})
+								}
+							/>
+						</FormField>
+					);
+				})}
+
+				{Object.keys(instance.secrets_set).length === 0
+					? null
+					: Object.entries(instance.secrets_set).map(([key, isSet]) => (
+							<FormField
+								key={key}
+								label={key}
+								htmlFor={`svc-secret-${instance.id}-${key}`}
+								helperText="Leave blank to keep the current value."
+							>
+								<Input
+									id={`svc-secret-${instance.id}-${key}`}
+									type="password"
+									placeholder={isSet ? "•••••• (set)" : "Not set"}
+									value={draftSecrets[key] ?? ""}
+									onChange={(e) =>
+										setDraftSecrets({
+											...draftSecrets,
+											[key]: e.target.value,
+										})
+									}
+								/>
+							</FormField>
+						))}
+
+				<div className="flex justify-between">
+					<Button
+						onClick={handleSave}
+						disabled={saveService.isPending}
+						className="mobile-touch-target"
+					>
+						Save
+					</Button>
+					<Button
+						variant="destructive"
+						onClick={() => setDeleteOpen(true)}
+						className="mobile-touch-target"
+					>
+						Delete
+					</Button>
+				</div>
+			</div>
+		</div>
+
+		<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);
+			}}
+		/>
+		</>
+	);
+}