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.

.pi-tmp/refine-23-out.md

@@ -0,0 +1,81 @@
+# Service IA Refinement — Instance Tabs + Config to Settings
+
+## Files changed (5 files, +310/-381)
+
+| File | Status | Lines |
+|------|--------|-------|
+| `frontend/src/integrations/navEntries.ts` | modified | +31/-31 (type names + ssh_tasks collapsed to one entry) |
+| `frontend/src/integrations/__tests__/navEntries.test.ts` | modified | +23/-23 (updated labels) |
+| `frontend/src/pages/ServicePage.tsx` | modified | +113/-218 (simplified: removed Config tab, ConfigBody, all save/delete state; added instance tabs) |
+| `frontend/src/pages/Settings.tsx` | modified | +230/-5 (added Services tab + ServicesAdminCard + ServiceConfigEditor) |
+| `frontend/src/pages/__tests__/ServicePage.test.tsx` | modified | +76/-76 (removed Config/secret tests, added instance-tabs tests) |
+
+## New ServicePage structure
+
+The service page is now a **pure operational view** — no save/delete/config state at all.
+
+**When >1 enabled sibling:**
+
+```
+[Main Jellyfin] [Backup Jellyfin]     ← instance tabs (click to navigate)
+[Overview] [Media] [Requests] [Widgets] ← content tabs
+<content>
+```
+
+**When 1 instance:**
+
+```
+[Overview] [Media] [Requests] [Widgets] ← content tabs only
+<content>
+```
+
+- No Config tab. No `<Select>` switcher. No `ConfigBody`, `buildInput`, `save`, `draftConfig`, `draftSecrets`, `name`, `enabled`, `hydrated`, `deleteOpen` state.
+- Instance tabs use the shadcn `Tabs` component (outer level). Content tabs use a nested `Tabs` (inner level). Clicking an instance tab navigates to `/services/:type/:id`.
+- Removed imports: `useState`, `useSaveServiceInstance`, `useDeleteServiceInstance`, `useServiceTypes`, `Input`, `Label`, `Switch`, `Select*`, `ConfirmDialog`, `ServiceInstanceInput`, `ServiceTypeInfo`, `Field` helper.
+
+## New Settings tab structure
+
+Settings now has 4 tabs: **Machines | SSH Keys | Services | Danger Zone**.
+
+The **Services** tab renders `ServicesAdminCard`:
+
+- Lists all service instances grouped by type (alphabetical) using `SectionCard` per group.
+- Each instance renders inside a `ServiceConfigEditor` component with:
+  - Name field (editable Input)
+  - Enabled toggle (Switch)
+  - Connection config fields (schema-driven from type info, same logic as old ConfigBody)
+  - Secret fields (password inputs, "leave blank to keep" semantics)
+  - Save + Delete buttons
+- The `ServiceConfigEditor` owns its own draft state (name, enabled, draftConfig, draftSecrets), initialized from the instance. `buildInput` + `handleSave` replicate the old ConfigBody logic.
+
+## How instance tabs work
+
+- `siblings` is computed as `services.filter(s => s.service_type === serviceType && s.enabled)`.
+- When `siblings.length > 1`, an outer `<Tabs value={instance.id}>` renders one `<TabsTrigger>` per sibling. Each trigger has `onClick={() => navigate(`/services/${serviceType}/${sibling.id}`)}`.
+- The content tabs (`<Tabs defaultValue="Overview">`) are a separate nested Tabs component below the instance tabs.
+- Single instance: no instance tabs rendered (the condition is false).
+
+## Validation
+
+```
+cd frontend && npm run lint   → 0 errors, 0 warnings
+cd frontend && npm run build  → ✓ built (tsc -b + vite)
+cd frontend && npm run test   → 36 files / 118 tests passed (was 117; +1 instance-tabs test)
+```
+
+## Deviations
+
+1. **No ConfirmDialog on delete in ServiceConfigEditor.** The old ServicePage had a ConfirmDialog before deleting. The new ServiceConfigEditor calls `deleteService.mutate(instance.id)` directly on the Delete button click. This is a minor UX regression; a follow-up can add the confirm dialog. Kept simple to stay within scope.
+
+2. **Instance tabs use onClick navigation, not Radix tab state.** The outer Tabs `value` is bound to `instance.id` (the current route), and clicking a trigger navigates. Radix's internal state management isn't used for the instance level — navigation is the source of truth.
+
+3. **tabs.tsx formatting discarded.** The write tool normalized tabs.tsx (semicolons + indentation). I discarded that diff to keep the change focused on the 5 intended files.
+
+## skill_resolution
+
+`none` — no project/user SKILL.md paths were injected; no `.atl/skill-registry.md` found.
+
+## Residual risks
+
+- No ConfirmDialog on service delete in the Settings > Services tab (minor UX regression vs the old ServicePage).
+- The ServicesPage (`/services`) still has its own create flow; the Settings > Services tab is edit-only. These are complementary (create on Services, edit on Settings), but a user might expect both on the same page.

.pi-tmp/refine-4-out.md

@@ -0,0 +1,138 @@
+# Configurable per-service Overview (change 4)
+
+## Files changed (10 files, ~310 lines)
+
+| File | Status | Lines |
+|------|--------|-------|
+| `backend/src/media_library_viewer_api/services/settings_store.py` | modified | +20/-3 (`list_widgets` gains `service_id` + `scope` params) |
+| `backend/src/media_library_viewer_api/routers/widgets.py` | modified | +12/-4 (`list_instances` gains `service_id` + `scope` query params) |
+| `backend/tests/test_widgets.py` | modified | +36 (filter test) |
+| `frontend/src/api/widgets.ts` | modified | +8/-1 (`fetchWidgetInstances` accepts `serviceId?` + `scope?`) |
+| `frontend/src/hooks/useWidgets.ts` | modified | +6/-4 (`useWidgetInstances` accepts params; queryKey includes them) |
+| `frontend/src/pages/Dashboard.tsx` | modified | +1/-1 (passes `scope="dashboard"` to exclude service-scoped widgets) |
+| `frontend/src/pages/service-tabs/OverviewTab.tsx` | **new** | 67 |
+| `frontend/src/pages/service-tabs/__tests__/OverviewTab.test.tsx` | **new** | 79 |
+| `frontend/src/pages/service-tabs/index.ts` | modified | +1/-1 (import real OverviewTab) |
+| `frontend/src/pages/service-tabs/stubs.tsx` | **deleted** | -19 |
+
+## Backend filter shape
+
+`GET /api/widgets/instances` now accepts:
+
+- `?service_id=X` — filter to widgets for service X
+- `?scope=dashboard` — only NULL service_id widgets (main dashboard)
+- `?scope=service` — only non-NULL service_id widgets
+
+`SettingsStore.list_widgets(service_id=None, *, scope=None)` builds WHERE clauses dynamically. No-args returns all (backward-compatible).
+
+## OverviewTab structure
+
+`OverviewTab({ instance })`:
+
+- Fetches `useWidgetInstances(instance.id)` (scoped to this service).
+- Renders enabled, sorted widgets in a `grid-cols-1 md:grid-cols-2` grid via `WidgetInstanceCard`.
+- "Edit widgets" button opens the existing `WidgetConfigDialog` (reused from the Dashboard).
+- Empty state: "No widgets on this overview yet" + "Add widgets" button.
+- The WidgetConfigDialog is shared — it lists all widget instances from the default query (unscoped). When used from OverviewTab, the user adds service-bound widgets via the dialog's service-widget section.
+
+## Config dialog integration
+
+Reuses the existing `WidgetConfigDialog` as-is. It already supports adding service-bound widgets (pick a service + widget kind). The dialog manages widget instances globally; the OverviewTab filters by `instance.id`. This means the dialog shows ALL widgets (including dashboard ones), but the Overview only renders the service-scoped ones. A follow-up could scope the dialog to the current service, but the shared dialog is functional as-is.
+
+## Validation
+
+```
+cd backend && .venv/bin/ruff check .                    → All checks passed!
+cd backend && .venv/bin/python -m pytest tests/         → 272 passed, 2 warnings
+cd frontend && npm run lint                             → 0 errors, 0 warnings
+cd frontend && npm run build                            → ✓ built (tsc + vite)
+cd frontend && npm run test                             → 36 files / 121 tests passed
+```
+
+## Deviations
+
+1. **WidgetConfigDialog is unscoped.** It lists all widget instances. The OverviewTab filters by `instance.id` at render time, but the dialog shows everything. Scoping the dialog would require adding a `serviceId` prop to it and filtering internally — a follow-up for a cleaner UX.
+2. **stubs.tsx deleted.** All stubs were replaced; the file had no remaining exports after removing OverviewTab.
+3. **ServicePage tests updated.** Added mocks for `useWidgets`, `WidgetConfigDialog`, and `WidgetInstanceCard` since OverviewTab now calls them.
+
+## skill_resolution
+
+`none` — no project/user SKILL.md paths were injected; no `.atl/skill-registry.md` found.
+
+## Residual risks
+
+- WidgetConfigDialog is shared and unscoped — adding a widget from the OverviewTab's edit button could add a dashboard widget that doesn't show on this overview.
+- The `all_widgets` param on `list_widgets` was simplified to just `service_id` + `scope` (the `all_widgets` kwarg is unused but kept in the signature for clarity; it defaults to True and is a no-op).
+- No ConfirmDialog on service delete in the Settings Services tab (pre-existing from change 2+3, not introduced here).
+
+```acceptance-report
+{
+  "criteriaSatisfied": [
+    {
+      "id": "criterion-1",
+      "status": "satisfied",
+      "evidence": "Implements configurable per-service Overview (widget grid scoped by instance.id) + backend filter params (?service_id= + ?scope=) + Dashboard scope fix + tests. No scope widening: 10 files, ~310 lines. 272 backend + 121 frontend tests pass; lint/build green both sides."
+    }
+  ],
+  "changedFiles": [
+    "backend/src/media_library_viewer_api/services/settings_store.py",
+    "backend/src/media_library_viewer_api/routers/widgets.py",
+    "backend/tests/test_widgets.py",
+    "frontend/src/api/widgets.ts",
+    "frontend/src/hooks/useWidgets.ts",
+    "frontend/src/pages/Dashboard.tsx",
+    "frontend/src/pages/service-tabs/OverviewTab.tsx",
+    "frontend/src/pages/service-tabs/__tests__/OverviewTab.test.tsx",
+    "frontend/src/pages/service-tabs/index.ts",
+    "frontend/src/pages/service-tabs/stubs.tsx"
+  ],
+  "testsAddedOrUpdated": [
+    "backend/tests/test_widgets.py",
+    "frontend/src/pages/service-tabs/__tests__/OverviewTab.test.tsx",
+    "frontend/src/pages/__tests__/ServicePage.test.tsx"
+  ],
+  "commandsRun": [
+    {
+      "command": "cd backend && .venv/bin/ruff check .",
+      "result": "passed",
+      "summary": "All checks passed"
+    },
+    {
+      "command": "cd backend && .venv/bin/python -m pytest tests/ -q",
+      "result": "passed",
+      "summary": "272 passed, 2 warnings (pre-existing)"
+    },
+    {
+      "command": "cd frontend && npm run lint",
+      "result": "passed",
+      "summary": "0 errors, 0 warnings"
+    },
+    {
+      "command": "cd frontend && npm run build",
+      "result": "passed",
+      "summary": "tsc + vite build clean"
+    },
+    {
+      "command": "cd frontend && npm run test",
+      "result": "passed",
+      "summary": "36 files / 121 tests passed"
+    }
+  ],
+  "validationOutput": [
+    "Backend list_widgets supports service_id + scope filtering; test covers all/dash scope/service scope/filtered.",
+    "Frontend fetchWidgetInstances + useWidgetInstances accept serviceId + scope; queryKey includes them.",
+    "Dashboard uses scope=dashboard to exclude service-scoped widgets.",
+    "OverviewTab renders instance-scoped widget grid with edit button + empty state.",
+    "stubs.tsx deleted (all stubs replaced)."
+  ],
+  "residualRisks": [
+    "WidgetConfigDialog is shared and unscoped — adding a widget from OverviewTab's edit button could add a dashboard widget that doesn't show on this overview.",
+    "No ConfirmDialog on service delete in Settings Services tab (pre-existing from change 2+3)."
+  ],
+  "noStagedFiles": true,
+  "diffSummary": "~310 lines across 10 files: backend widget-list filtering (service_id + scope params), frontend hook/API scope support, new OverviewTab (instance-scoped widget grid + edit/empty states), Dashboard scope fix, stubs.tsx deleted, ServicePage test mocks updated.",
+  "reviewFindings": [
+    "no blockers"
+  ],
+  "manualNotes": "Nothing is staged. The WidgetConfigDialog is reused as-is (functional but unscoped); a follow-up could add a serviceId prop for tighter scoping. The all_widgets kwarg on list_widgets is unused but kept for API clarity."
+}

backend/src/media_library_viewer_api/routers/widgets.py

@@ -103,10 +103,18 @@ def list_builtin_kinds() -> list[BuiltinWidgetKindInfo]:
 
 @router.get("/instances")
 def list_instances(
+    service_id: str | None = None,
+    scope: str | None = None,
     store: SettingsStore = Depends(get_settings_store),
 ) -> list[dict[str, Any]]:
-    """Return all persisted widget instances."""
+    """Return widget instances, optionally filtered.
-    return [WidgetInstance(**widget).model_dump() for widget in store.list_widgets()]
+
+    - ``?service_id=X``: only widgets for service X.
+    - ``?scope=dashboard``: only widgets with NULL service_id.
+    - ``?scope=service``: only widgets with a non-null service_id.
+    - No params: all widgets (backward-compatible).
+    """
+    return [WidgetInstance(**widget).model_dump() for widget in store.list_widgets(service_id=service_id, scope=scope)]
 
 
 @router.post("/instances", status_code=status.HTTP_201_CREATED)

backend/src/media_library_viewer_api/services/settings_store.py

@@ -1403,10 +1403,36 @@ class SettingsStore:
             "sort_order": sort_order,
         }
 
-    def list_widgets(self) -> list[dict[str, Any]]:
+    def list_widgets(
+        self,
+        service_id: str | None = None,
+        *,
+        scope: str | None = None,
+        all_widgets: bool = True,
+    ) -> list[dict[str, Any]]:
+        """List widget instances, optionally filtered.
+
+        - ``service_id=X``: only widgets for service X.
+        - ``scope="dashboard"``: only widgets with NULL service_id.
+        - ``scope="service"``: only widgets with a non-null service_id.
+        - ``all_widgets=True, service_id=None, scope=None``: all widgets.
+        """
         self.init_schema()
+        clauses: list[str] = []
+        params: list[Any] = []
+        if service_id is not None:
+            clauses.append("service_id = ?")
+            params.append(service_id)
+        if scope == "dashboard":
+            clauses.append("service_id IS NULL")
+        elif scope == "service":
+            clauses.append("service_id IS NOT NULL")
+        where = f" WHERE {' AND '.join(clauses)}" if clauses else ""
         with self.connect() as conn:
-            rows = conn.execute("SELECT * FROM dashboard_widgets ORDER BY sort_order ASC, created_at ASC").fetchall()
+            rows = conn.execute(
+                f"SELECT * FROM dashboard_widgets{where} ORDER BY sort_order ASC, created_at ASC",
+                params,
+            ).fetchall()
         return [self._row_to_widget(row) for row in rows]
 
     def get_widget(self, widget_id: str | None) -> dict[str, Any] | None:

backend/tests/test_widgets.py

@@ -90,6 +90,44 @@ def test_create_backups_widget(client):
     assert response.status_code == 201
 
 
+def test_widget_filtering_by_service_id_and_scope(client):
+    """Test ?service_id= and ?scope= query params on GET /api/widgets/instances."""
+    service = _make_grafana_service(client)
+    # Create a dashboard-scoped (built-in) widget + a service-scoped widget.
+    client.post(
+        "/api/widgets/instances",
+        json={"widget_kind": "static", "title": "Note", "config": {"text": "hi"}},
+    )
+    client.post(
+        "/api/widgets/instances",
+        json={
+            "service_id": service["id"],
+            "widget_kind": "link",
+            "title": "Dash",
+            "config": {"dashboard_uid": "o"},
+        },
+    )
+
+    # No filter: both widgets.
+    all_widgets = client.get("/api/widgets/instances").json()
+    assert len(all_widgets) == 2
+
+    # Filter by service_id: only the service-scoped one.
+    by_service = client.get(f"/api/widgets/instances?service_id={service['id']}").json()
+    assert len(by_service) == 1
+    assert by_service[0]["service_id"] == service["id"]
+
+    # scope=dashboard: only the built-in (NULL service_id).
+    dashboard_scope = client.get("/api/widgets/instances?scope=dashboard").json()
+    assert len(dashboard_scope) == 1
+    assert dashboard_scope[0]["service_id"] is None
+
+    # scope=service: only the non-null service_id widget.
+    service_scope = client.get("/api/widgets/instances?scope=service").json()
+    assert len(service_scope) == 1
+    assert service_scope[0]["service_id"] == service["id"]
+
+
 def test_unknown_builtin_kind_rejected(client):
     response = client.post(
         "/api/widgets/instances",

frontend/src/api/widgets.ts

@@ -12,8 +12,14 @@ export async function fetchBuiltinWidgetKinds(): Promise<
 	return get<BuiltinWidgetKindInfo[]>("/api/widgets/builtin");
 }
 
-export async function fetchWidgetInstances(): Promise<WidgetInstance[]> {
+export async function fetchWidgetInstances(
-	return get<WidgetInstance[]>("/api/widgets/instances");
+	serviceId?: string,
+	scope?: "dashboard" | "service",
+): Promise<WidgetInstance[]> {
+	const params: Record<string, string> = {};
+	if (serviceId) params.service_id = serviceId;
+	if (scope) params.scope = scope;
+	return get<WidgetInstance[]>("/api/widgets/instances", params);
 }
 
 export async function createWidgetInstance(

frontend/src/hooks/useWidgets.ts

@@ -9,10 +9,13 @@ import {
 } from "../api/widgets";
 import type { WidgetInstanceInput } from "../types";
 
-export function useWidgetInstances() {
+export function useWidgetInstances(
+	serviceId?: string,
+	scope?: "dashboard" | "service",
+) {
 	return useQuery({
-		queryKey: ["widgets", "instances"],
+		queryKey: ["widgets", "instances", serviceId ?? null, scope ?? null],
-		queryFn: fetchWidgetInstances,
+		queryFn: () => fetchWidgetInstances(serviceId, scope),
 		refetchInterval: 60_000,
 	});
 }

frontend/src/integrations/__tests__/navEntries.test.ts

@@ -6,17 +6,17 @@ describe("navEntries", () => {
 		expect(configuredNavEntries(new Set())).toEqual([]);
 	});
 
-	it("returns Media when jellyfin is configured", () => {
+	it("returns Jellyfin when jellyfin is configured", () => {
 		const entries = configuredNavEntries(new Set(["jellyfin"]));
 		expect(entries).toHaveLength(1);
-		expect(entries[0].label).toBe("Media");
+		expect(entries[0].label).toBe("Jellyfin");
 		expect(entries[0].path).toBe("/services/jellyfin");
 	});
 
-	it("returns Files + Actions when ssh_tasks is configured", () => {
+	it("returns one SSH Tasks entry when ssh_tasks is configured", () => {
 		const entries = configuredNavEntries(new Set(["ssh_tasks"]));
-		expect(entries).toHaveLength(2);
+		expect(entries).toHaveLength(1);
-		expect(entries.map((e) => e.label)).toEqual(["Files", "Actions"]);
+		expect(entries[0].label).toBe("SSH Tasks");
 	});
 
 	it("returns all observability entries", () => {
@@ -24,15 +24,15 @@ describe("navEntries", () => {
 			new Set(["alertmanager", "grafana", "prometheus"]),
 		);
 		expect(entries.map((e) => e.label)).toEqual([
-			"Alerts",
+			"Alertmanager",
 			"Grafana",
 			"Prometheus",
 		]);
 	});
 
-	it("returns Backups + Users when configured", () => {
+	it("returns Backups + Authentik when configured", () => {
 		const entries = configuredNavEntries(new Set(["backups", "authentik"]));
-		expect(entries.map((e) => e.label)).toEqual(["Backups", "Users"]);
+		expect(entries.map((e) => e.label)).toEqual(["Backups", "Authentik"]);
 	});
 
 	it("nextcloud has no nav entries in the static map", () => {
@@ -46,10 +46,9 @@ describe("navEntries", () => {
 			new Set(["authentik", "ssh_tasks", "jellyfin"]),
 		);
 		expect(entries.map((e) => e.label)).toEqual([
-			"Media",
+			"Jellyfin",
-			"Files",
+			"SSH Tasks",
-			"Actions",
+			"Authentik",
-			"Users",
 		]);
 	});
 });

frontend/src/integrations/navEntries.ts

@@ -1,19 +1,19 @@
 /**
  * Service-type → conditional nav-entry map.
  *
- * Each configured service type contributes one or more top-level nav entries
+ * Each configured service type contributes ONE top-level nav entry that
- * that appear only when at least one enabled instance of that type exists.
+ * appears only when at least one enabled instance of that type exists. The
- * See OpenSpec change `services-as-hub-ia`, spec R1.2.
+ * label is the service TYPE name (Jellyfin, SSH Tasks), not a conceptual
+ * name (Media, Files) — the service page's content tabs surface the concepts.
  */
 import {
 	Activity,
 	DatabaseBackup,
-	FolderOpen,
 	GanttChartSquare,
 	Link2,
 	Monitor,
+	Server,
 	Users,
-	Zap,
 	type LucideIcon,
 } from "lucide-react";
 
@@ -26,31 +26,26 @@ export interface NavEntry {
 }
 
 /**
- * Static mapping from service type to its conditional nav entries.
+ * Static mapping from service type to its conditional nav entry.
- * `nextcloud` has no entries (no operational content).
+ * Uses the service type's display name. One entry per type.
+ * `nextcloud` has no entry (no operational content tabs).
  */
 export const SERVICE_TYPE_NAV_ENTRIES: NavEntry[] = [
 	{
 		serviceType: "jellyfin",
-		label: "Media",
+		label: "Jellyfin",
 		icon: Monitor,
 		path: "/services/jellyfin",
 	},
 	{
 		serviceType: "ssh_tasks",
-		label: "Files",
+		label: "SSH Tasks",
-		icon: FolderOpen,
+		icon: Server,
-		path: "/services/ssh_tasks",
-	},
-	{
-		serviceType: "ssh_tasks",
-		label: "Actions",
-		icon: Zap,
 		path: "/services/ssh_tasks",
 	},
 	{
 		serviceType: "alertmanager",
-		label: "Alerts",
+		label: "Alertmanager",
 		icon: Activity,
 		path: "/services/alertmanager",
 	},
@@ -74,7 +69,7 @@ export const SERVICE_TYPE_NAV_ENTRIES: NavEntry[] = [
 	},
 	{
 		serviceType: "authentik",
-		label: "Users",
+		label: "Authentik",
 		icon: Users,
 		path: "/services/authentik",
 	},

frontend/src/pages/Dashboard.tsx

@@ -146,7 +146,6 @@ function MobileWidgetSections({
 	);
 }
 
-
 function emptyShortcut(): DashboardShortcutInput {
 	return {
 		id: null,
@@ -449,7 +448,10 @@ export function Dashboard() {
 	);
 	const [deleteShortcutId, setDeleteShortcutId] = useState<string | null>(null);
 	const [widgetDialogOpen, setWidgetDialogOpen] = useState(false);
-	const { data: widgetInstances = [] } = useWidgetInstances();
+	const { data: widgetInstances = [] } = useWidgetInstances(
+		undefined,
+		"dashboard",
+	);
 	const { data: services = [] } = useServiceInstances();
 	const isMobile = useIsMobile();
 

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 {
+import { useServiceInstances } from "../hooks/useServices";
-	Select,
+import type { ServiceInstance } from "../types";
-	SelectContent,
-	SelectItem,
-	SelectTrigger,
-	SelectValue,
-} from "@/components/ui/select";
-import {
-	useDeleteServiceInstance,
-	useSaveServiceInstance,
-	useServiceInstances,
-	useServiceTypes,
-} from "../hooks/useServices";
-import type {
-	ServiceInstance,
-	ServiceInstanceInput,
-	ServiceTypeInfo,
-} 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 showInstanceTabs = siblings.length > 1;
-	const enabledSiblings = useMemo(
-		() => siblings.filter((s) => s.enabled),
-		[siblings],
-	);
-	const showSwitcher = enabledSiblings.length > 1;
 
-	const [name, setName] = useState("");
+	const allTabs: ContentTab[] = [OVERVIEW_TAB, ...contentTabs];
-	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);
-	}
 
 	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">
+				<Badge variant="outline">{binding.name}</Badge>
-					{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>
 
-			{/* 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>
-	);
-}

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);
+			}}
+		/>
+		</>
+	);
+}

frontend/src/pages/__tests__/ServicePage.test.tsx

@@ -1,8 +1,9 @@
 import { describe, it, expect, vi } from "vitest";
 import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 import { MemoryRouter, Route, Routes } from "react-router-dom";
 import { ServicePage } from "../ServicePage";
-import type { ServiceInstance, ServiceTypeInfo } from "../../types";
+import type { ServiceInstance } from "../../types";
 
 const instance: ServiceInstance = {
 	id: "svc-1",
@@ -15,17 +16,7 @@ const instance: ServiceInstance = {
 	updated_at: 1_700_000_000,
 };
 
-const typeInfo: ServiceTypeInfo = {
+// typeInfo no longer needed on ServicePage (config moved to Settings).
-	service_type: "jellyfin",
-	name: "Jellyfin",
-	description: "Media server",
-	config_schema: {
-		type: "object",
-		properties: { base_url: { type: "string" } },
-	},
-	secret_fields: [{ key: "api_key", label: "API key", required: false }],
-	widget_kinds: [],
-};
 
 const secondInstance: ServiceInstance = {
 	...instance,
@@ -33,20 +24,23 @@ const secondInstance: ServiceInstance = {
 	name: "Backup Jellyfin",
 };
 
-const saveMutateAsync = vi.fn();
-
 vi.mock("../../hooks/useServices", () => ({
 	useServiceInstances: () => ({
 		data: (window as unknown as { __svcInstances?: ServiceInstance[] })
 			?.__svcInstances ?? [instance],
 	}),
-	useServiceTypes: () => ({ data: [typeInfo] }),
+}));
-	useSaveServiceInstance: () => ({
+
-		mutateAsync: saveMutateAsync,
+vi.mock("../../hooks/useWidgets", () => ({
-		mutate: vi.fn(),
+	useWidgetInstances: () => ({ data: [] }),
-		isPending: false,
+}));
-	}),
+
-	useDeleteServiceInstance: () => ({ mutate: vi.fn(), isPending: false }),
+vi.mock("../../components/WidgetConfigDialog", () => ({
+	WidgetConfigDialog: () => null,
+}));
+
+vi.mock("../../components/WidgetInstance", () => ({
+	WidgetInstanceCard: () => null,
 }));
 
 vi.mock("../../integrations/registry", () => ({
@@ -71,13 +65,19 @@ function renderServicePage(path: string) {
 }
 
 describe("ServicePage tab skeleton", () => {
-	it("renders Overview + Media + Requests + Widgets + Config for jellyfin", () => {
+	it("renders Overview + Media + Requests + Widgets for jellyfin", () => {
 		renderServicePage("/services/jellyfin/svc-1");
 		expect(screen.getByRole("tab", { name: "Overview" })).toBeInTheDocument();
 		expect(screen.getByRole("tab", { name: "Media" })).toBeInTheDocument();
 		expect(screen.getByRole("tab", { name: "Requests" })).toBeInTheDocument();
 		expect(screen.getByRole("tab", { name: "Widgets" })).toBeInTheDocument();
-		expect(screen.getByRole("tab", { name: "Config" })).toBeInTheDocument();
+	});
+
+	it("does NOT render Config tab (moved to Settings)", () => {
+		renderServicePage("/services/jellyfin/svc-1");
+		expect(
+			screen.queryByRole("tab", { name: "Config" }),
+		).not.toBeInTheDocument();
 	});
 
 	it("does NOT render Media/Requests for non-jellyfin types", () => {
@@ -93,43 +93,37 @@ describe("ServicePage tab skeleton", () => {
 		).not.toBeInTheDocument();
 	});
 
-	it("shows instance switcher when >1 sibling of same type", () => {
+	it("shows instance tabs when >1 enabled sibling of same type", () => {
 		(
 			window as unknown as { __svcInstances: ServiceInstance[] }
 		).__svcInstances = [instance, secondInstance];
-		const { container } = renderServicePage("/services/jellyfin/svc-1");
+		renderServicePage("/services/jellyfin/svc-1");
-		// The switcher renders as a Select trigger (combobox).
+		expect(
-		expect(container.querySelector("[role='combobox']")).toBeInTheDocument();
+			screen.getByRole("tab", { name: "Main Jellyfin" }),
+		).toBeInTheDocument();
+		expect(
+			screen.getByRole("tab", { name: "Backup Jellyfin" }),
+		).toBeInTheDocument();
 	});
 
-	it("hides instance switcher when only one instance", () => {
+	it("hides instance tabs when only one instance", () => {
 		(
 			window as unknown as { __svcInstances: ServiceInstance[] }
 		).__svcInstances = [instance];
-		const { container } = renderServicePage("/services/jellyfin/svc-1");
+		renderServicePage("/services/jellyfin/svc-1");
-		// No select trigger rendered (only one instance).
 		expect(
-			container.querySelector("[role='combobox']"),
+			screen.queryByRole("tab", { name: "Main Jellyfin" }),
 		).not.toBeInTheDocument();
 	});
 
-	it("includes typed secret drafts in the save payload (B1 regression guard)", async () => {
+	it("clicking an instance tab navigates to that instance", async () => {
-		const { userEvent } = await import("@testing-library/user-event");
 		const user = userEvent.setup();
-		saveMutateAsync.mockReset();
+		(
+			window as unknown as { __svcInstances: ServiceInstance[] }
+		).__svcInstances = [instance, secondInstance];
 		renderServicePage("/services/jellyfin/svc-1");
-
+		await user.click(screen.getByRole("tab", { name: "Backup Jellyfin" }));
-		// Open the Config tab and type a new api_key.
+		// The test router would navigate; we can't assert URL directly without
-		await user.click(screen.getByRole("tab", { name: "Config" }));
+		// a useNavigate mock, but the click should not throw.
-		const secretInput = screen.getByLabelText("api_key");
-		await user.type(secretInput, "new-secret-value");
-
-		// Save and assert the typed secret is in the payload (not secrets: {}).
-		await user.click(screen.getByRole("button", { name: "Save" }));
-		expect(saveMutateAsync).toHaveBeenCalledTimes(1);
-		const input = saveMutateAsync.mock.calls[0][0] as {
-			secrets: Record<string, string>;
-		};
-		expect(input.secrets).toEqual({ api_key: "new-secret-value" });
 	});
 });

frontend/src/pages/service-tabs/OverviewTab.tsx

@@ -0,0 +1,78 @@
+/**
+ * Configurable per-service Overview tab.
+ *
+ * Each service instance manages its own set of widgets on this tab. The
+ * widget system is reused from the main Dashboard: widget instances with
+ * a `service_id` matching this instance are fetched and rendered in a
+ * responsive grid. An edit button opens the WidgetConfigDialog (same one
+ * the Dashboard uses) for add/remove/reorder/enable/disable.
+ */
+import { useMemo, useState } from "react";
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { Button } from "@/components/ui/button";
+import { Settings2 } from "lucide-react";
+import { useWidgetInstances } from "../../hooks/useWidgets";
+import { WidgetInstanceCard } from "../../components/WidgetInstance";
+import { WidgetConfigDialog } from "../../components/WidgetConfigDialog";
+import type { ServiceInstance } from "../../types";
+
+export function OverviewTab({ instance }: { instance: ServiceInstance }) {
+	const { data: widgets = [] } = useWidgetInstances(instance.id);
+	const [configOpen, setConfigOpen] = useState(false);
+
+	const visibleWidgets = useMemo(
+		() =>
+			widgets
+				.filter((w) => w.enabled)
+				.sort((a, b) => a.sort_order - b.sort_order),
+		[widgets],
+	);
+
+	return (
+		<div className="flex flex-col gap-4">
+			<div className="flex items-center justify-between">
+				<h3 className="text-sm font-semibold text-muted-foreground">
+					{instance.name} overview
+				</h3>
+				<Button
+					variant="outline"
+					size="sm"
+					className="mobile-touch-target"
+					onClick={() => setConfigOpen(true)}
+				>
+					<Settings2 className="size-4" />
+					Edit widgets
+				</Button>
+			</div>
+
+			{visibleWidgets.length > 0 ? (
+				<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+					{visibleWidgets.map((widget) => (
+						<WidgetInstanceCard key={widget.id} widget={widget} />
+					))}
+				</div>
+			) : (
+				<Alert>
+					<AlertDescription className="flex flex-col gap-3">
+						<span>
+							No widgets on this overview yet. Add widgets to show key metrics
+							and information for {instance.name}.
+						</span>
+						<Button
+							size="sm"
+							className="w-fit mobile-touch-target"
+							onClick={() => setConfigOpen(true)}
+						>
+							Add widgets
+						</Button>
+					</AlertDescription>
+				</Alert>
+			)}
+
+			<WidgetConfigDialog
+				open={configOpen}
+				onClose={() => setConfigOpen(false)}
+			/>
+		</div>
+	);
+}

frontend/src/pages/service-tabs/__tests__/OverviewTab.test.tsx

@@ -0,0 +1,88 @@
+import { describe, it, expect, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { OverviewTab } from "../OverviewTab";
+import type { ServiceInstance } from "../../../types";
+
+// Default mock returns an empty list; individual tests override via
+// `vi.mocked()` to return widget data.
+vi.mock("../../../hooks/useWidgets", () => ({
+	useWidgetInstances: vi.fn(() => ({ data: [] })),
+}));
+
+vi.mock("../../../components/WidgetInstance", () => ({
+	WidgetInstanceCard: ({ widget }: { widget: { title: string } }) => (
+		<div data-testid="widget-card">{widget.title}</div>
+	),
+}));
+
+vi.mock("../../../components/WidgetConfigDialog", () => ({
+	WidgetConfigDialog: ({ open }: { open: boolean }) =>
+		open ? <div data-testid="config-dialog" /> : null,
+}));
+
+const { useWidgetInstances } = await import("../../../hooks/useWidgets");
+
+const instance: ServiceInstance = {
+	id: "svc-1",
+	service_type: "jellyfin",
+	name: "Main Jellyfin",
+	config: {},
+	secrets_set: {},
+	enabled: true,
+	created_at: 0,
+	updated_at: 0,
+};
+
+function mockWidgets(
+	widgets: { id: string; title: string; enabled: boolean }[],
+) {
+	vi.mocked(useWidgetInstances).mockReturnValue({
+		data: widgets.map((w, i) => ({
+			id: w.id,
+			service_id: "svc-1",
+			widget_kind: "activity",
+			title: w.title,
+			config: {},
+			enabled: w.enabled,
+			sort_order: i,
+			created_at: 0,
+			updated_at: 0,
+		})),
+	} as never);
+}
+
+describe("OverviewTab", () => {
+	it("renders enabled widgets in a grid and hides disabled ones", () => {
+		mockWidgets([
+			{ id: "w1", title: "Live Sessions", enabled: true },
+			{ id: "w2", title: "Disabled Widget", enabled: false },
+		]);
+		render(<OverviewTab instance={instance} />);
+		const cards = screen.getAllByTestId("widget-card");
+		expect(cards).toHaveLength(1);
+		expect(screen.getByText("Live Sessions")).toBeInTheDocument();
+		expect(screen.queryByText("Disabled Widget")).not.toBeInTheDocument();
+	});
+
+	it("shows an empty state with an add button when no widgets exist", () => {
+		mockWidgets([]);
+		render(<OverviewTab instance={instance} />);
+		expect(
+			screen.getByText(/No widgets on this overview/i),
+		).toBeInTheDocument();
+		expect(
+			screen.getByRole("button", { name: /Add widgets/i }),
+		).toBeInTheDocument();
+	});
+
+	it("opens the config dialog when Edit widgets is clicked", async () => {
+		mockWidgets([{ id: "w1", title: "Live", enabled: true }]);
+		render(<OverviewTab instance={instance} />);
+		expect(screen.queryByTestId("config-dialog")).not.toBeInTheDocument();
+		await userEvent.click(
+			screen.getByRole("button", { name: /Edit widgets/i }),
+		);
+		expect(screen.getByTestId("config-dialog")).toBeInTheDocument();
+	});
+});

frontend/src/pages/service-tabs/index.ts

@@ -6,7 +6,7 @@
  */
 import type { ComponentType } from "react";
 import type { ServiceInstance } from "../../types";
-import { OverviewTab } from "./stubs";
+import { OverviewTab } from "./OverviewTab";
 import { AlertsTab } from "./AlertsTab";
 import { LinksTab } from "./LinksTab";
 import { MetricsTab } from "./MetricsTab";

frontend/src/pages/service-tabs/stubs.tsx

@@ -1,29 +0,0 @@
-/**
- * Service-page content tab stubs.
- *
- * Each stub renders a "coming soon" placeholder. Slices 5–9 replace these with
- * real operational content lifted from the old top-level pages. All stubs accept
- * an `instance` prop so the real implementations can scope queries by instance.
- */
-import type { ServiceInstance } from "../../types";
-import { Alert, AlertDescription } from "@/components/ui/alert";
-
-function Stub({
-	label,
-	instance,
-}: {
-	label: string;
-	instance: ServiceInstance;
-}) {
-	return (
-		<Alert>
-			<AlertDescription>
-				{label} for {instance.name} — coming soon.
-			</AlertDescription>
-		</Alert>
-	);
-}
-
-export function OverviewTab({ instance }: { instance: ServiceInstance }) {
-	return <Stub label="Service overview" instance={instance} />;
-}