Fix: settings master/detail, widget kind filter, reorder, media worker

Four fixes:

1. Settings > Services tab: master/detail layout. Replaced the vertical
   stack of ServiceConfigEditor cards with a SelectionRailCard (list on
   left) + SectionCard (details on right) — same pattern as Machines
   and SSH Keys tabs. Click a service in the rail to edit it.

2. Service Overview widget restriction. When adding widgets on a
   service's Overview, the dialog now only shows built-in widgets +
   widgets for THAT service type (not all services). Dashboard/named
   dashboards (no serviceId) still see all.

3. Reorder buttons fixed. The swap-sort_order approach was a no-op when
   both items had sort_order=0 (the default). Now moveInstance
   renumbers ALL items by their new index position (i * 10) after the
   swap, guaranteeing values change. References use updateRef, owned
   widgets use saveWidget, both sequential.

4. Media index worker resolution. The subprocess worker called
   get_jellyfin_client/get_user_id (FastAPI request dependencies) which
   don't work outside request context. Now accepts a service_id
   parameter (passed from post_build_index) and resolves the Jellyfin
   instance directly from the settings store via _resolve_jellyfin.
   Raises RuntimeError (not HTTPException) on failure.

283 backend tests pass; 128 frontend tests pass; ruff/eslint clean.

frontend/src/components/WidgetConfigDialog.tsx

@@ -232,7 +232,6 @@ export function WidgetConfigDialog({
 				startEdit(target);
 			}
 		}
-		 
 	}, [open, editWidgetId, instances]);
 
 	function startAddBuiltIn(kind: string) {
@@ -307,27 +306,26 @@ export function WidgetConfigDialog({
 	async function moveInstance(index: number, direction: -1 | 1) {
 		const targetIndex = index + direction;
 		if (targetIndex < 0 || targetIndex >= combinedWidgets.length) return;
-		const a = combinedWidgets[index];
-		const b = combinedWidgets[targetIndex];
-		const aRefId = (a as { _ref_id?: string })._ref_id;
-		const bRefId = (b as { _ref_id?: string })._ref_id;
-		// References use their own sort_order on the widget_references row;
-		// owned widgets use the widget instance's sort_order.
-		if (aRefId) {
-			await updateRef.mutateAsync({
-				referenceId: aRefId,
-				sortOrder: b.sort_order,
-			});
-		} else {
-			await saveWidget.mutateAsync({ ...a, sort_order: b.sort_order });
-		}
-		if (bRefId) {
-			await updateRef.mutateAsync({
-				referenceId: bRefId,
-				sortOrder: a.sort_order,
-			});
-		} else {
-			await saveWidget.mutateAsync({ ...b, sort_order: a.sort_order });
+		// Swap the two items in a copy, then renumber ALL items by their new
+		// index position (index * 10). This guarantees the sort_order values
+		// change even when both items previously shared the same value (e.g. 0).
+		const reordered = [...combinedWidgets];
+		const tmp = reordered[index];
+		reordered[index] = reordered[targetIndex];
+		reordered[targetIndex] = tmp;
+		// Sequential (not Promise.all) to avoid cache-invalidation race.
+		for (let i = 0; i < reordered.length; i++) {
+			const item = reordered[i];
+			const newSortOrder = i * 10;
+			const refId = (item as { _ref_id?: string })._ref_id;
+			if (refId) {
+				await updateRef.mutateAsync({
+					referenceId: refId,
+					sortOrder: newSortOrder,
+				});
+			} else {
+				await saveWidget.mutateAsync({ ...item, sort_order: newSortOrder });
+			}
 		}
 	}
 
@@ -655,6 +653,9 @@ export function WidgetConfigDialog({
 					))}
 					{services
 						.filter((s) => s.enabled)
+						// When scoped to a service Overview, only show widgets for THAT
+						// service instance's type (not all services' widgets).
+						.filter((s) => !serviceId || s.id === serviceId)
 						.flatMap((s) =>
 							(SERVICE_REGISTRY[s.service_type]?.widgets ?? []).map((w) => (
 								<Button

frontend/src/pages/Settings.tsx

@@ -1338,46 +1338,90 @@ export function Settings() {
 function ServicesAdminCard() {
 	const { data: services = [] } = useServiceInstances();
 	const { data: types = [] } = useServiceTypes();
+	const [selectedServiceId, setSelectedServiceId] = useState("");
 
-	// 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]);
+	const sortedServices = useMemo(
+		() =>
+			[...services].sort((a, b) =>
+				`${a.service_type}:${a.name}`.localeCompare(
+					`${b.service_type}:${b.name}`,
+				),
+			),
+		[services],
+	);
+
+	const selectedService = useMemo(
+		() =>
+			sortedServices.find((s) => s.id === selectedServiceId) ??
+			sortedServices[0] ??
+			null,
+		[sortedServices, selectedServiceId],
+	);
+
+	const selectedTypeInfo = selectedService
+		? types.find((t) => t.service_type === selectedService.service_type)
+		: undefined;
+
+	if (sortedServices.length === 0) {
+		return (
+			<p className="text-sm text-muted-foreground">
+				No service instances configured. Create one from the Services page.
+			</p>
+		);
+	}
 
 	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);
+		<div className="grid grid-cols-1 gap-4 md:grid-cols-[320px_minmax(0,1fr)]">
+			<SelectionRailCard
+				title="Services"
+				description="Select a service to edit its configuration."
+				minHeight={420}
+			>
+				{sortedServices.map((svc) => {
+					const active = svc.id === (selectedService?.id ?? "");
+					const typeName =
+						types.find((t) => t.service_type === svc.service_type)?.name ??
+						svc.service_type;
 					return (
-						<SectionCard
-							key={serviceType}
-							title={typeInfo?.name ?? serviceType}
-							description={typeInfo?.description ?? ""}
+						<div
+							key={svc.id}
+							onClick={() => setSelectedServiceId(svc.id)}
+							className={cn(
+								"group grid w-full cursor-pointer grid-cols-[minmax(0,1fr)_auto] gap-2 border-t border-border px-3 py-2.5",
+								active ? "bg-muted" : "bg-card hover:bg-muted/50",
+							)}
 						>
-							<div className="flex flex-col gap-4">
-								{instances.map((svc) => (
-									<ServiceConfigEditor
-										key={svc.id}
-										instance={svc}
-										typeInfo={typeInfo}
-									/>
-								))}
+							<div className="min-w-0">
+								<p className="truncate font-semibold">{svc.name}</p>
+								<p className="text-xs text-muted-foreground">
+									{typeName} · {svc.enabled ? "Enabled" : "Disabled"}
+								</p>
 							</div>
-						</SectionCard>
+							<Badge variant={svc.enabled ? "default" : "secondary"}>
+								{svc.enabled ? "on" : "off"}
+							</Badge>
+						</div>
 					);
-				})
-			)}
+				})}
+			</SelectionRailCard>
+			<SectionCard
+				title={selectedService?.name ?? "No service selected"}
+				description={
+					selectedTypeInfo?.description ??
+					"Select a service on the left to edit its configuration."
+				}
+			>
+				{selectedService ? (
+					<ServiceConfigEditor
+						instance={selectedService}
+						typeInfo={selectedTypeInfo}
+					/>
+				) : (
+					<p className="text-sm text-muted-foreground">
+						Select a service on the left.
+					</p>
+				)}
+			</SectionCard>
 		</div>
 	);
 }
@@ -1439,113 +1483,113 @@ function ServiceConfigEditor({
 
 	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 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]) => (
+					{configEntries.map(([key, schema]) => {
+						const isNumber =
+							schema.type === "integer" || schema.type === "number";
+						return (
 							<FormField
 								key={key}
 								label={key}
-								htmlFor={`svc-secret-${instance.id}-${key}`}
-								helperText="Leave blank to keep the current value."
+								htmlFor={`svc-cfg-${instance.id}-${key}`}
+								helperText={schema.description}
 							>
 								<Input
-									id={`svc-secret-${instance.id}-${key}`}
-									type="password"
-									placeholder={isSet ? "•••••• (set)" : "Not set"}
-									value={draftSecrets[key] ?? ""}
+									id={`svc-cfg-${instance.id}-${key}`}
+									type={isNumber ? "number" : "text"}
+									value={String(draftConfig[key] ?? "")}
 									onChange={(e) =>
-										setDraftSecrets({
-											...draftSecrets,
-											[key]: e.target.value,
+										setDraftConfig({
+											...draftConfig,
+											[key]: isNumber
+												? e.target.value === ""
+													? undefined
+													: Number(e.target.value)
+												: 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>
+					{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>
-		</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);
-			}}
-		/>
+			<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);
+				}}
+			/>
 		</>
 	);
 }