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

@@ -1,32 +1,11 @@
-import { useMemo, useState } from "react";
+import { useMemo } from "react";
 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,
-	useServiceInstances,
-	useServiceTypes,
-} from "../hooks/useServices";
-import type {
-	ServiceInstance,
-	ServiceInstanceInput,
-	ServiceTypeInfo,
-} from "../types";
+import { useServiceInstances } from "../hooks/useServices";
+import type { ServiceInstance } from "../types";
 import { SectionCard } from "../components/SectionCard";
-import { ConfirmDialog } from "../components/ConfirmDialog";
 import { getServiceBinding } from "../integrations/registry";
 import {
 	OVERVIEW_TAB,
@@ -34,77 +13,30 @@ import {
 	type ContentTab,
 } from "./service-tabs";
 
-function Field({
-	label,
-	htmlFor,
-	helper,
-	children,
-}: {
-	label: string;
-	htmlFor: string;
-	helper?: string;
-	children: React.ReactNode;
-}) {
-	return (
-		<div className="flex flex-col gap-1.5">
-			<Label htmlFor={htmlFor}>{label}</Label>
-			{children}
-			{helper ? (
-				<p className="text-xs text-muted-foreground">{helper}</p>
-			) : null}
-		</div>
-	);
-}
-
 export function ServicePage() {
 	const { serviceType = "", serviceId = "" } = useParams<{
 		serviceType: string;
 		serviceId: string;
 	}>();
 	const { data: services = [] } = useServiceInstances(serviceType || undefined);
-	const { data: types = [] } = useServiceTypes();
 	const navigate = useNavigate();
-	const saveService = useSaveServiceInstance();
-	const deleteService = useDeleteServiceInstance();
 
 	const instance = useMemo(
 		() => services.find((s) => s.id === serviceId),
 		[services, serviceId],
 	);
 	const binding = getServiceBinding(serviceType);
-	const typeInfo = useMemo(
-		() => 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.filter((s) => s.service_type === serviceType && s.enabled),
 		[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 showInstanceTabs = siblings.length > 1;
 
-	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);
-
-	if (instance && !hydrated) {
-		setName(instance.name);
-		setEnabled(instance.enabled);
-		setDraftConfig({ ...instance.config });
-		setDraftSecrets({});
-		setHydrated(true);
-	}
+	const allTabs: ContentTab[] = [OVERVIEW_TAB, ...contentTabs];
 
 	if (!binding) {
 		return (
@@ -122,33 +54,6 @@ 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: onlyChangedSecrets,
-			enabled,
-		};
-	}
-
-	async function save() {
-		await saveService.mutateAsync(buildInput());
-		// Clear secret drafts after a successful save so the inputs reset to
-		// "leave blank to keep" state.
-		setDraftSecrets({});
-	}
-
-
-	const allTabs: ContentTab[] = [OVERVIEW_TAB, ...contentTabs];
-
-	// The config + widgets body, rendered inside the Config and Widgets tabs.
 	const widgetsContent =
 		binding.widgets.length > 0 ? (
 			<div className="flex flex-col gap-2">
@@ -176,55 +81,37 @@ export function ServicePage() {
 			</p>
 		);
 
-	const configBody = (
-		<ConfigBody
-			instance={instance}
-			typeInfo={typeInfo}
-			draftConfig={draftConfig}
-			onConfigChange={setDraftConfig}
-			draftSecrets={draftSecrets}
-			onSecretsChange={setDraftSecrets}
-			name={name}
-			enabled={enabled}
-			onNameChange={setName}
-			onEnabledChange={setEnabled}
-			onSave={save}
-			savePending={saveService.isPending}
-			onDelete={() => setDeleteOpen(true)}
-		/>
-	);
-
 	return (
 		<div className="flex flex-col gap-4">
-			{/* Header + instance switcher */}
+			{/* Header */}
 			<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>
-				<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>
+				<Badge variant="outline">{binding.name}</Badge>
 			</div>
 
-			{/* Tab skeleton */}
+			{/* Instance tabs (only when >1 enabled sibling) */}
+			{showInstanceTabs ? (
+				<Tabs value={instance.id}>
+					<TabsList>
+						{siblings.map((sibling: ServiceInstance) => (
+							<TabsTrigger
+								key={sibling.id}
+								value={sibling.id}
+								onClick={() =>
+									navigate(`/services/${serviceType}/${sibling.id}`)
+								}
+							>
+								{sibling.name}
+							</TabsTrigger>
+						))}
+					</TabsList>
+				</Tabs>
+			) : null}
+
+			{/* Content tabs */}
 			<Tabs defaultValue="Overview">
 				<TabsList>
 					<TabsTrigger value="Overview">Overview</TabsTrigger>
@@ -234,7 +121,6 @@ export function ServicePage() {
 						</TabsTrigger>
 					))}
 					<TabsTrigger value="Widgets">Widgets</TabsTrigger>
-					<TabsTrigger value="Config">Config</TabsTrigger>
 				</TabsList>
 
 				{allTabs.map((tab) => {
@@ -254,168 +140,7 @@ export function ServicePage() {
 						{widgetsContent}
 					</SectionCard>
 				</TabsContent>
-
-				<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 ConfigBody({
-	instance,
-	typeInfo,
-	draftConfig,
-	onConfigChange,
-	draftSecrets,
-	onSecretsChange,
-	name,
-	enabled,
-	onNameChange,
-	onEnabledChange,
-	onSave,
-	savePending,
-	onDelete,
-}: {
-	instance: ServiceInstance;
-	typeInfo: ServiceTypeInfo | undefined;
-	draftConfig: Record<string, unknown>;
-	onConfigChange: (config: Record<string, unknown>) => void;
-	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 properties =
-		(
-			(typeInfo?.config_schema ?? {}) as {
-				properties?: Record<
-					string,
-					{ type?: string; description?: string; default?: unknown }
-				>;
-			}
-		).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" },
-				]);
-
-	return (
-		<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>
-	);
-}