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.

backend/src/media_library_viewer_api/routers/media.py

@@ -98,7 +98,7 @@ def _serialize_status(status: Any) -> dict[str, Any]:
     }
 
 
-def _worker_command(final_db_path: Path, staging_db_path: Path) -> list[str]:
+def _worker_command(final_db_path: Path, staging_db_path: Path, service_id: str = "") -> list[str]:
     return [
         sys.executable,
         "-m",
@@ -107,14 +107,16 @@ def _worker_command(final_db_path: Path, staging_db_path: Path) -> list[str]:
         str(final_db_path),
         "--staging-path",
         str(staging_db_path),
+        "--service-id",
+        service_id,
     ]
 
 
-def _start_worker(index: MediaIndex) -> subprocess.Popen[bytes]:
+def _start_worker(index: MediaIndex, service_id: str = "") -> subprocess.Popen[bytes]:
     staging_path = _staging_db_path(index)
     staging_path.unlink(missing_ok=True)
     return subprocess.Popen(
-        _worker_command(index.db_path, staging_path),
+        _worker_command(index.db_path, staging_path, service_id),
         start_new_session=True,
         env=os.environ.copy(),
     )
@@ -133,6 +135,7 @@ def get_index_status(index: MediaIndex = Depends(get_media_index)) -> dict[str,
 def post_build_index(
     client: JellyfinClient = Depends(get_jellyfin_client),
     user_id: str = Depends(get_user_id),
+    jellyfin_service_id: str | None = None,
     index: MediaIndex = Depends(get_media_index),
 ) -> dict[str, Any]:
     """Start a media index build in a subprocess worker."""
@@ -144,7 +147,7 @@ def post_build_index(
 
         libraries = client.libraries(user_id)
         logger.info("Starting media index build user_id=%s libraries=%s", user_id, len(libraries))
-        process = _start_worker(index)
+        process = _start_worker(index, jellyfin_service_id or "")
         _set_build_metadata(
             index,
             {

backend/src/media_library_viewer_api/workers/media_index_worker.py

@@ -14,7 +14,6 @@ from pathlib import Path
 from typing import Any
 
 from media_library_viewer_api.config import get_settings
-from media_library_viewer_api.dependencies import get_jellyfin_client, get_user_id
 from media_library_viewer_api.logging_utils import configure_logging, describe_settings
 from media_library_viewer_api.services.media_index import (
     MediaIndex,
@@ -88,13 +87,41 @@ def _progress_callback(index: MediaIndex, pid: int, state: dict[str, Any]) -> No
     )
 
 
-def run_build(final_index_path: str | Path, staging_index_path: str | Path) -> int:
+def _resolve_jellyfin(service_id: str) -> tuple[Any, str]:
+    """Resolve the Jellyfin client + user_id from the settings store.
+
+    In a subprocess we cannot use the FastAPI dependency layer (no request),
+    so we query the settings store directly. When ``service_id`` is given,
+    resolve that specific instance; otherwise fall back to first-enabled.
+    """
+    from media_library_viewer_api.clients.jellyfin import JellyfinClient
+    from media_library_viewer_api.dependencies import _service_record, get_settings_store
+
+    store = get_settings_store()
+    service = _service_record(store, "jellyfin", service_id or None)
+    if service is None:
+        raise RuntimeError("No Jellyfin service is configured. Add a Jellyfin service on the Services page.")
+    base_url = str(service.get("config", {}).get("base_url") or "")
+    api_key = str(service.get("secrets", {}).get("api_key") or "")
+    if not base_url or not api_key:
+        raise RuntimeError("Jellyfin service is missing base_url or api_key. Edit it on the Services page.")
+    timeout = int(service.get("config", {}).get("timeout_seconds", 10))
+    client = JellyfinClient(base_url, api_key, timeout)
+    user_id = str(service.get("config", {}).get("user_id") or "")
+    if not user_id:
+        users = client.users()
+        if not users:
+            raise RuntimeError("No Jellyfin users found and no user_id configured on the service")
+        user_id = users[0]["Id"]
+    return client, user_id
+
+
+def run_build(final_index_path: str | Path, staging_index_path: str | Path, service_id: str = "") -> int:
     """Run the media index build in a subprocess."""
     settings = get_settings()
     configure_logging(settings.log_level)
     logger.info("Media index worker starting: %s", describe_settings(settings))
-    client = get_jellyfin_client()
+    client, user_id = _resolve_jellyfin(service_id)
-    user_id = get_user_id()
     libraries = client.libraries(user_id)
 
     final_index = MediaIndex(final_index_path)
@@ -192,8 +219,9 @@ def main() -> int:
     parser = argparse.ArgumentParser(description="Build the media index in a worker process")
     parser.add_argument("--index-path", required=True)
     parser.add_argument("--staging-path", required=True)
+    parser.add_argument("--service-id", default="", help="Jellyfin service instance id")
     args = parser.parse_args()
-    return run_build(args.index_path, args.staging_path)
+    return run_build(args.index_path, args.staging_path, args.service_id)
 
 
 if __name__ == "__main__":  # pragma: no cover

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];
+		// Swap the two items in a copy, then renumber ALL items by their new
-		const b = combinedWidgets[targetIndex];
+		// index position (index * 10). This guarantees the sort_order values
-		const aRefId = (a as { _ref_id?: string })._ref_id;
+		// change even when both items previously shared the same value (e.g. 0).
-		const bRefId = (b as { _ref_id?: string })._ref_id;
+		const reordered = [...combinedWidgets];
-		// References use their own sort_order on the widget_references row;
+		const tmp = reordered[index];
-		// owned widgets use the widget instance's sort_order.
+		reordered[index] = reordered[targetIndex];
-		if (aRefId) {
+		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: aRefId,
+					referenceId: refId,
-				sortOrder: b.sort_order,
+					sortOrder: newSortOrder,
 				});
 			} else {
-			await saveWidget.mutateAsync({ ...a, sort_order: b.sort_order });
+				await saveWidget.mutateAsync({ ...item, sort_order: newSortOrder });
 			}
-		if (bRefId) {
-			await updateRef.mutateAsync({
-				referenceId: bRefId,
-				sortOrder: a.sort_order,
-			});
-		} else {
-			await saveWidget.mutateAsync({ ...b, sort_order: a.sort_order });
 		}
 	}
 
@@ -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 sortedServices = useMemo(
-	const grouped = useMemo(() => {
+		() =>
-		const map = new Map<string, ServiceInstance[]>();
+			[...services].sort((a, b) =>
-		for (const svc of services) {
+				`${a.service_type}:${a.name}`.localeCompare(
-			const list = map.get(svc.service_type) ?? [];
+					`${b.service_type}:${b.name}`,
-			list.push(svc);
+				),
-			map.set(svc.service_type, list);
+			),
-		}
+		[services],
-		return [...map.entries()].sort((a, b) => a[0].localeCompare(b[0]));
+	);
-	}, [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 (
-		<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>
 		);
-				})
+	}
+
+	return (
+		<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 (
+						<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="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>
+							<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>
 	);
 }