chore: remove dead machine-level Jellyfin/Jellyseerr fields

Follow-up #1 to the service-registry change. Jellyfin/Jellyseerr now resolve
from the service registry, so the machine-level app fields are dead config.

- dependencies.py: drop dead _jellyseerr_client_for; simplify _resolve_machine
  to SSH-only.
- settings_store.py + routers/settings.py: remove jellyfin_*/jellyseerr_* from
  machine default config, get_machine_config, normalization, row mappers, and
  MachineInput.
- frontend types + Settings.tsx: drop the fields and the Jellyfin/Jellyseerr
  form sections + service options.
- Update frontend test fixtures.

Existing DB rows may still carry these keys in config_json; they are inert and
drop on the next machine save. Verification: backend ruff clean, pytest 222;
frontend lint 0 errors, build success, 70 tests.

.env.example

@@ -27,8 +27,6 @@ PROMETHEUS_ENABLED=true
 PROMETHEUS_FILE_SD_DIR=/app/backend/.cache/prometheus-file-sd
 ALERTMANAGER_URL=http://alertmanager:9093
 ALERTMANAGER_WEBHOOK_URL=
-GRAFANA_URL=http://grafana:3000
-PROMETHEUS_URL=http://prometheus:9090
 # Required: master key for encrypting service secrets (API keys/tokens) at rest.
 # Generate one with: python -c "from cryptography.fernet import Fernet; print(Fernet.generate_key().decode())"
 MANAGE_ENCRYPTION_KEY=replace-with-a-fernet-key

CHANGELOG.md

@@ -0,0 +1,66 @@
+# Changelog
+
+All notable changes to Manage. Breaking changes are marked with **BREAKING**.
+
+## [Unreleased]
+
+### Added — Service registry
+
+- Runtime **service registry** persisted in the backend SQLite database. External
+  services (Grafana, Prometheus, Jellyfin, Nextcloud, SSH task runner) are now
+  configured in the app instead of via environment variables.
+- Services page (`/services`) to create, list, and delete service instances.
+- Service detail pages (`/services/:serviceType/:serviceId`) to edit name/enabled
+  state, rotate secrets, and view the widgets a service provides.
+- Service definitions live as Pydantic modules in `backend/.../integrations/`,
+  each declaring its config schema, secret fields, and widget kinds.
+- Multi-instance support: multiple Grafana/Jellyfin/etc. instances per type.
+- SSH task runner service records run history in a new `service_task_runs`
+  table, shown on the runner's service page.
+
+### Changed
+
+- Dashboard widgets are now **service-bound** (reference a service instance +
+  widget kind) or **built-in** (backups, static text). The "Add widget" flow is
+  pick-service → pick-widget-kind → configure.
+- Deleting a service cascade-deletes widgets that reference it.
+
+### Security
+
+- Service secrets (API keys, tokens, passphrases) are **encrypted at rest** with
+  Fernet.
+
+### **BREAKING**
+
+- **`MANAGE_ENCRYPTION_KEY` is now required** to start the backend. Generate one
+  with:
+
+  ```bash
+  python -c "from cryptography.fernet import Fernet; print(Fernet.generate_key().decode())"
+  ```
+
+- The `GRAFANA_URL` and `PROMETHEUS_URL` backend environment variables were
+  removed; Grafana/Prometheus URLs now live on service records configured in the
+  UI. Re-create them on the Services page after upgrading.
+- The legacy widget/addon-pages model (`/addons/:addonId`,
+  `/api/widgets/types`, `/api/widgets/sources`) was removed in favor of the
+  service registry.
+- Default dashboard widget seeding was removed; a fresh install starts with an
+  empty dashboard. Add widgets from the dashboard's edit dialog after
+  configuring services.
+
+### Notes / follow-ups
+
+- Machine-level Jellyfin/Jellyseerr app config still powers the Media/Users/Files
+  pages. Migrating those onto the service registry is a separate follow-up change
+  (see `openspec/changes/service-registry/design.md` §12.5).
+
+## Follow-up #1 — remove dead machine Jellyfin/Jellyseerr fields
+
+With Jellyfin/Jellyseerr now resolved from the service registry, the machine-level
+Jellyfin/Jellyseerr fields are dead config. Removed from `dependencies.py` (dead
+`_jellyseerr_client_for`; `_resolve_machine` simplified to SSH-only),
+`services/settings_store.py`, `routers/settings.py` (`MachineInput`), frontend
+types, the `Settings.tsx` form, and frontend test fixtures. Existing DB rows may
+still carry these keys in `config_json`; they are inert and get dropped on the
+next machine save. No data migration required.

README.md

@@ -144,9 +144,7 @@ VITE_OIDC_SCOPE=openid profile email
 VITE_OIDC_REDIRECT_URI=https://manage.example.com/oidc/callback
 VITE_OIDC_POST_LOGOUT_REDIRECT_URI=https://manage.example.com/
 
-# Grafana / Prometheus URLs used by widget adapters and frontend deep-links
-GRAFANA_URL=http://grafana:3000
-PROMETHEUS_URL=http://prometheus:9090
+# Grafana / Prometheus public URLs for frontend deep-links (service adapters read URLs from service records)
 VITE_GRAFANA_URL=https://grafana.manage.example.com
 VITE_PROMETHEUS_URL=https://prometheus.manage.example.com
 
@@ -186,4 +184,4 @@ cd frontend && npx tsc --noEmit && npm run build
 - Job templates are shell-quoted. Add new templates in `backend/src/media_library_viewer_api/jobs.py`.
 - Root-level Docker Compose files are provided for production (`docker-compose.yml`) and local development (`docker-compose.dev.yml`), and both rely on Compose interpolation rather than `env_file` entries.
 - The configurable dashboard stores widget instances in the backend SQLite settings database. New installs seed default Jellyfin activity and Backups widgets automatically.
-- Grafana and Prometheus widget adapters use `GRAFANA_URL` and `PROMETHEUS_URL` (backend) and `VITE_GRAFANA_URL` / `VITE_PROMETHEUS_URL` (frontend) for deep-links; no credentials are stored in widget config.
+- Grafana and Prometheus widget adapters resolve URLs from service records configured in the app; `VITE_GRAFANA_URL` / `VITE_PROMETHEUS_URL` are only used for frontend deep-links. No credentials are stored in widget config; service API keys are encrypted at rest with `MANAGE_ENCRYPTION_KEY`.

backend/src/media_library_viewer_api/config.py

@@ -57,8 +57,6 @@ class Settings(BaseSettings):
     prometheus_file_sd_dir: str = "/app/backend/.cache/prometheus-file-sd"
     alertmanager_url: str = "http://alertmanager:9093"
     alertmanager_webhook_url: str = ""  # Optional receiver for alertmanager webhook notifications
-    grafana_url: str = "http://grafana:3000"
-    prometheus_url: str = "http://prometheus:9090"
 
     # Remote paths
     remote_media_root: str = ""

backend/src/media_library_viewer_api/dependencies.py

@@ -1,9 +1,12 @@
 """Dependency injection for FastAPI.
 
-Provides access to machine-specific Jellyfin/SSH clients via FastAPI's request
-context. The selected machine can be chosen with a ``machine_id`` query
-parameter; otherwise the backend falls back to the first enabled machine that
-matches the requested service.
+Provides access to service-specific Jellyfin/Jellyseerr clients and
+machine-specific SSH clients via FastAPI's request context.
+
+- Jellyfin/Jellyseerr are selected with a ``jellyfin_service_id`` query
+  parameter (resolved against the service registry); the backend falls back to
+  the first enabled ``jellyfin``/``jellyseerr`` service instance.
+- SSH/Files transport is selected with ``machine_id`` as before.
 """
 
 from __future__ import annotations
@@ -34,6 +37,41 @@ def _request_machine_id(request: Request | None) -> str | None:
     return machine_id or None
 
 
+def _request_jellyfin_service_id(request: Request | None) -> str | None:
+    if request is None:
+        return None
+    service_id = request.query_params.get("jellyfin_service_id")
+    return service_id or None
+
+
+def _service_record(store: SettingsStore, service_type: str, service_id: str | None) -> dict[str, Any] | None:
+    """Return a service row for a type, preferring the requested id.
+
+    The row carries an in-memory decrypted ``secrets`` dict. Returns None if no
+    enabled instance of the type exists.
+    """
+    from media_library_viewer_api.services.secrets import decrypt_secrets
+
+    row = None
+    if service_id:
+        candidate = store.get_service(service_id)
+        if candidate and candidate.get("service_type") == service_type and candidate.get("enabled", True):
+            row = candidate
+    if row is None:
+        instances = [s for s in store.list_services(service_type) if s.get("enabled", True)]
+        row = instances[0] if instances else None
+    if row is None:
+        return None
+    decrypted = {}
+    blob = row.get("secrets") or {}
+    if blob:
+        try:
+            decrypted = decrypt_secrets(blob)
+        except Exception:
+            logger.exception("Failed to decrypt service secrets service_id=%s", row.get("id"))
+    return {**row, "secrets": decrypted}
+
+
 @lru_cache(maxsize=32)
 def _jellyfin_client_for(cache_key: tuple[str, str, str]) -> JellyfinClient:
     machine_id, url, api_key = cache_key
@@ -43,21 +81,6 @@ def _jellyfin_client_for(cache_key: tuple[str, str, str]) -> JellyfinClient:
     return JellyfinClient(url, api_key)
 
 
-@lru_cache(maxsize=32)
-def _jellyseerr_client_for(cache_key: tuple[str, str]) -> JellyseerrClient | None:
-    machine_id, url = cache_key
-    if not url:
-        return None
-    settings = get_settings_store().get_machine_config(machine_id) if machine_id else None
-    api_key = (settings or {}).get("jellyseerr_api_key") if settings else ""
-    if not api_key:
-        return None
-    logger.info(
-        "Creating Jellyseerr client machine_id=%s url=%s", machine_id or "<default>", url.rstrip("/") or "<unset>"
-    )
-    return JellyseerrClient(url, api_key)
-
-
 @lru_cache(maxsize=32)
 def _ssh_client_for(
     cache_key: tuple[str, str, str, int, str, str | None, str | None, str | None, str | None],
@@ -116,6 +139,10 @@ def _ssh_client_for(
 
 
 def _resolve_machine(service: str, request: Request | None = None) -> dict[str, Any] | None:
+    """Resolve an SSH/Files machine for the given transport service.
+
+    Jellyfin/Jellyseerr are resolved against the service registry, not here.
+    """
     store = get_settings_store()
     machine_id = _request_machine_id(request)
     if machine_id:
@@ -123,11 +150,7 @@ def _resolve_machine(service: str, request: Request | None = None) -> dict[str,
         if machine and (service in machine.get("services", []) or service == "ssh"):
             return machine
         return machine
-    if service == "jellyfin":
-        machines = store.list_machines_for_service("jellyfin")
-    elif service == "jellyseerr":
-        machines = [m for m in store.list_machines_for_service("jellyfin") if m.get("jellyseerr_url")]
-    elif service == "ssh":
+    if service == "ssh":
         machines = store.list_machines_for_service("files") or store.list_machines_for_service("monitoring")
     else:
         machines = store.list_machines_for_service(service)
@@ -135,37 +158,34 @@ def _resolve_machine(service: str, request: Request | None = None) -> dict[str,
 
 
 def get_jellyfin_client(request: Request = None) -> JellyfinClient:
-    """Return a Jellyfin client for the selected machine."""
+    """Return a Jellyfin client for the selected Jellyfin service instance."""
     store = get_settings_store()
-    machine_id = _request_machine_id(request)
-    machine = store.get_machine_config(machine_id) if machine_id else None
-    if machine is None:
-        resolved = _resolve_machine("jellyfin", request)
-        if resolved:
-            machine = store.get_machine_config(resolved["id"])
-    if machine and machine.get("jellyfin_url") and machine.get("jellyfin_api_key"):
-        cache_key = (machine["id"], machine["jellyfin_url"], machine.get("jellyfin_api_key") or "")
-        return _jellyfin_client_for(cache_key)
-
-    raise RuntimeError(
-        "No Jellyfin machine is configured. Add a machine with jellyfin_url and jellyfin_api_key in Settings."
-    )
+    service_id = _request_jellyfin_service_id(request)
+    service = _service_record(store, "jellyfin", service_id)
+    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.")
+    cache_key = (service["id"], base_url, api_key)
+    return _jellyfin_client_for(cache_key)
 
 
 def get_jellyseerr_client(request: Request = None) -> JellyseerrClient | None:
     """Return a cached Jellyseerr client when configured, otherwise None."""
     store = get_settings_store()
-    machine_id = _request_machine_id(request)
-    machine = store.get_machine_config(machine_id) if machine_id else None
-    if machine is None:
-        resolved = _resolve_machine("jellyseerr", request)
-        if resolved:
-            machine = store.get_machine_config(resolved["id"])
-    if machine and machine.get("jellyseerr_url") and machine.get("jellyseerr_api_key"):
-        return JellyseerrClient(machine["jellyseerr_url"], machine.get("jellyseerr_api_key") or "")
-
-    logger.info("Jellyseerr client not configured (no machine with jellyseerr_url and jellyseerr_api_key)")
-    return None
+    service_id = _request_jellyfin_service_id(request)
+    service = _service_record(store, "jellyseerr", service_id)
+    if service is None:
+        logger.info("Jellyseerr client not configured (no jellyseerr service)")
+        return None
+    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:
+        logger.info("Jellyseerr service is missing base_url or api_key")
+        return None
+    return JellyseerrClient(base_url, api_key)
 
 
 def _ssh_client_from_machine_config(machine: dict[str, Any], store: SettingsStore | None = None) -> RemoteSSHClient:
@@ -253,16 +273,12 @@ def get_settings_store() -> SettingsStore:
 def get_user_id(request: Request = None) -> str:
     """Return the configured Jellyfin user ID or discover the first available one."""
     store = get_settings_store()
-    machine_id = _request_machine_id(request)
-    machine = store.get_machine_config(machine_id) if machine_id else None
-    if machine is None:
-        resolved = _resolve_machine("jellyfin", request)
-        if resolved:
-            machine = store.get_machine_config(resolved["id"])
-    if machine and machine.get("jellyfin_user_id"):
-        return str(machine["jellyfin_user_id"])
+    service_id = _request_jellyfin_service_id(request)
+    service = _service_record(store, "jellyfin", service_id)
+    if service and service.get("config", {}).get("user_id"):
+        return str(service["config"]["user_id"])
     client = get_jellyfin_client(request)
     users = client.users()
     if not users:
-        raise RuntimeError("No Jellyfin users found and no machine/user id configured")
+        raise RuntimeError("No Jellyfin users found and no user_id configured on the service")
     return users[0]["Id"]

backend/src/media_library_viewer_api/integrations/jellyseerr.py

@@ -0,0 +1,32 @@
+"""Jellyseerr service definition.
+
+Jellyseerr is a companion to Jellyfin (request management). It is modeled as its
+own service type so multiple Jellyseerr instances are supported independently of
+Jellyfin. It provides no dashboard widgets today.
+"""
+
+from __future__ import annotations
+
+from media_library_viewer_api.integrations.base import (
+    SecretField,
+    ServiceConfigBase,
+    ServiceDefinition,
+)
+
+
+class JellyseerrConfig(ServiceConfigBase):
+    """Non-secret Jellyseerr connection config."""
+
+    base_url: str
+
+
+DEFINITION = ServiceDefinition(
+    service_type="jellyseerr",
+    name="Jellyseerr",
+    description="Request management companion to Jellyfin.",
+    config_model=JellyseerrConfig,
+    secret_fields=[
+        SecretField(key="api_key", label="API key", required=True),
+    ],
+    widget_kinds=[],
+)

backend/src/media_library_viewer_api/integrations/registry.py

@@ -9,6 +9,7 @@ from __future__ import annotations
 from media_library_viewer_api.integrations.base import ServiceDefinition, WidgetKind
 from media_library_viewer_api.integrations.grafana import DEFINITION as GRAFANA
 from media_library_viewer_api.integrations.jellyfin import DEFINITION as JELLYFIN
+from media_library_viewer_api.integrations.jellyseerr import DEFINITION as JELLYSEERR
 from media_library_viewer_api.integrations.nextcloud import DEFINITION as NEXTCLOUD
 from media_library_viewer_api.integrations.prometheus import DEFINITION as PROMETHEUS
 from media_library_viewer_api.integrations.ssh_tasks import DEFINITION as SSH_TASKS
@@ -17,6 +18,7 @@ SERVICE_DEFINITIONS: dict[str, ServiceDefinition] = {
     GRAFANA.service_type: GRAFANA,
     PROMETHEUS.service_type: PROMETHEUS,
     JELLYFIN.service_type: JELLYFIN,
+    JELLYSEERR.service_type: JELLYSEERR,
     NEXTCLOUD.service_type: NEXTCLOUD,
     SSH_TASKS.service_type: SSH_TASKS,
 }

backend/src/media_library_viewer_api/routers/settings.py

@@ -43,11 +43,6 @@ class MonitoringMachineInput(BaseModel):
     password: str = ""
     media_root: str = ""
     path_prefix: str = ""
-    jellyfin_url: str = ""
-    jellyfin_user_id: str = ""
-    jellyfin_api_key: str = ""
-    jellyseerr_url: str = ""
-    jellyseerr_api_key: str = ""
     notes: str = ""
 
 

backend/src/media_library_viewer_api/services/settings_store.py

@@ -44,11 +44,6 @@ def _default_local_machine() -> dict[str, Any]:
         "password": "",
         "media_root": settings.media_root,
         "path_prefix": settings.path_prefix,
-        "jellyfin_url": "",
-        "jellyfin_user_id": "",
-        "jellyfin_api_key": "",
-        "jellyseerr_url": "",
-        "jellyseerr_api_key": "",
         "node_exporter_enabled": False,
         "node_exporter_port": 9100,
         "node_exporter_scrape_host": "",
@@ -306,11 +301,6 @@ class SettingsStore:
             "password_set": bool(data.get("password")),
             "media_root": data.get("media_root", ""),
             "path_prefix": data.get("path_prefix", ""),
-            "jellyfin_url": data.get("jellyfin_url", ""),
-            "jellyfin_user_id": data.get("jellyfin_user_id", ""),
-            "jellyfin_api_key_set": bool(data.get("jellyfin_api_key")),
-            "jellyseerr_url": data.get("jellyseerr_url", ""),
-            "jellyseerr_api_key_set": bool(data.get("jellyseerr_api_key")),
             "node_exporter_enabled": bool(data.get("node_exporter_enabled", False)),
             "node_exporter_port": int(data.get("node_exporter_port", 9100) or 9100),
             "node_exporter_scrape_host": data.get("node_exporter_scrape_host", ""),
@@ -360,17 +350,6 @@ class SettingsStore:
         password = str(password or "")
         media_root = _current_str("media_root")
         path_prefix = _current_str("path_prefix")
-        jellyfin_url = _current_str("jellyfin_url")
-        jellyfin_user_id = _current_str("jellyfin_user_id")
-        jellyfin_api_key = payload.get("jellyfin_api_key")
-        if jellyfin_api_key in (None, ""):
-            jellyfin_api_key = (current or {}).get("jellyfin_api_key", "")
-        jellyfin_api_key = str(jellyfin_api_key or "")
-        jellyseerr_url = _current_str("jellyseerr_url")
-        jellyseerr_api_key = payload.get("jellyseerr_api_key")
-        if jellyseerr_api_key in (None, ""):
-            jellyseerr_api_key = (current or {}).get("jellyseerr_api_key", "")
-        jellyseerr_api_key = str(jellyseerr_api_key or "")
         node_exporter_enabled = bool(
             payload.get("node_exporter_enabled")
             if payload.get("node_exporter_enabled") is not None
@@ -402,11 +381,6 @@ class SettingsStore:
             "password": password,
             "media_root": media_root,
             "path_prefix": path_prefix,
-            "jellyfin_url": jellyfin_url,
-            "jellyfin_user_id": jellyfin_user_id,
-            "jellyfin_api_key": jellyfin_api_key,
-            "jellyseerr_url": jellyseerr_url,
-            "jellyseerr_api_key": jellyseerr_api_key,
             "node_exporter_enabled": node_exporter_enabled,
             "node_exporter_port": node_exporter_port,
             "node_exporter_scrape_host": node_exporter_scrape_host,
@@ -430,11 +404,6 @@ class SettingsStore:
             "password": "",
             "media_root": machine["media_root"],
             "path_prefix": machine["path_prefix"],
-            "jellyfin_url": machine["jellyfin_url"],
-            "jellyfin_user_id": machine["jellyfin_user_id"],
-            "jellyfin_api_key": machine["jellyfin_api_key"],
-            "jellyseerr_url": machine["jellyseerr_url"],
-            "jellyseerr_api_key": machine["jellyseerr_api_key"],
             "node_exporter_enabled": machine["node_exporter_enabled"],
             "node_exporter_port": machine["node_exporter_port"],
             "node_exporter_scrape_host": machine["node_exporter_scrape_host"],
@@ -520,11 +489,6 @@ class SettingsStore:
             "password": data.get("password", ""),
             "media_root": data.get("media_root", ""),
             "path_prefix": data.get("path_prefix", ""),
-            "jellyfin_url": data.get("jellyfin_url", ""),
-            "jellyfin_user_id": data.get("jellyfin_user_id", ""),
-            "jellyfin_api_key": data.get("jellyfin_api_key", ""),
-            "jellyseerr_url": data.get("jellyseerr_url", ""),
-            "jellyseerr_api_key": data.get("jellyseerr_api_key", ""),
             "node_exporter_enabled": bool(data.get("node_exporter_enabled", False)),
             "node_exporter_port": int(data.get("node_exporter_port", 9100) or 9100),
             "node_exporter_scrape_host": data.get("node_exporter_scrape_host", ""),
@@ -564,11 +528,6 @@ class SettingsStore:
             "password": machine["password"],
             "media_root": machine["media_root"],
             "path_prefix": machine["path_prefix"],
-            "jellyfin_url": machine["jellyfin_url"],
-            "jellyfin_user_id": machine["jellyfin_user_id"],
-            "jellyfin_api_key": machine["jellyfin_api_key"],
-            "jellyseerr_url": machine["jellyseerr_url"],
-            "jellyseerr_api_key": machine["jellyseerr_api_key"],
             "node_exporter_enabled": machine["node_exporter_enabled"],
             "node_exporter_port": machine["node_exporter_port"],
             "node_exporter_scrape_host": machine["node_exporter_scrape_host"],

backend/tests/test_services.py

@@ -61,6 +61,7 @@ def test_registry_contains_five_service_types():
         "grafana",
         "prometheus",
         "jellyfin",
+        "jellyseerr",
         "nextcloud",
         "ssh_tasks",
     }
@@ -133,7 +134,14 @@ def test_list_service_types(client):
     response = client.get("/api/services/types")
     assert response.status_code == 200
     types = {item["service_type"] for item in response.json()}
-    assert types == {"grafana", "prometheus", "jellyfin", "nextcloud", "ssh_tasks"}
+    assert types == {
+        "grafana",
+        "jellyfin",
+        "jellyseerr",
+        "nextcloud",
+        "prometheus",
+        "ssh_tasks",
+    }
 
 
 def test_service_type_includes_secret_and_widget_metadata(client):

docker-compose.dev.yml

@@ -17,8 +17,6 @@ services:
       PROMETHEUS_FILE_SD_DIR: /app/backend/.cache/prometheus-file-sd
       ALERTMANAGER_URL: ${ALERTMANAGER_URL:-http://alertmanager:9093}
       ALERTMANAGER_WEBHOOK_URL: ${ALERTMANAGER_WEBHOOK_URL:-}
-      GRAFANA_URL: ${GRAFANA_URL:-http://grafana:3000}
-      PROMETHEUS_URL: ${PROMETHEUS_URL:-http://prometheus:9090}
       MANAGE_ENCRYPTION_KEY: ${MANAGE_ENCRYPTION_KEY:?set MANAGE_ENCRYPTION_KEY in your .env}
     ports:
       - "8000:8000"

docker-compose.yml

@@ -28,8 +28,6 @@ services:
       PROMETHEUS_FILE_SD_DIR: ${PROMETHEUS_FILE_SD_DIR:-/app/backend/.cache/prometheus-file-sd}
       ALERTMANAGER_URL: ${ALERTMANAGER_URL:-http://alertmanager:9093}
       ALERTMANAGER_WEBHOOK_URL: ${ALERTMANAGER_WEBHOOK_URL:-}
-      GRAFANA_URL: ${GRAFANA_URL:-http://grafana:3000}
-      PROMETHEUS_URL: ${PROMETHEUS_URL:-http://prometheus:9090}
       MANAGE_ENCRYPTION_KEY: ${MANAGE_ENCRYPTION_KEY:?generate one with python -c "from cryptography.fernet import Fernet; print(Fernet.generate_key().decode())"}
     volumes:
       - ${BACKEND_CACHE_DIR:-./backend-cache}:/app/backend/.cache

docs/REQUIREMENTS.md

@@ -256,54 +256,79 @@ fully removed (web-ui-rework; see decision log 2026-06-17).
 - Job templates should remain centralized in `jobs.py` for future extension.
 - Remote job template values must be shell-quoted before execution.
 
-## Configurable Dashboard Widgets
+## Service Registry and Dashboard Widgets
 
 ### Overview
 
-The dashboard is composed of persisted widget instances stored in the backend SQLite
-settings database. Each widget has a type, title, configuration, enabled flag, and
-sort order. The frontend renders enabled widgets in sort order and fetches data
-independently through the backend source adapters.
+External services (Grafana, Prometheus, Jellyfin, Nextcloud, SSH task runner) are
+configured **in the app** and persisted in the backend SQLite database. Each
+service instance holds non-secret config plus encrypted secret fields. Dashboard
+widgets are either **service-bound** (reference a service instance + a widget
+kind declared by that service) or **built-in / service-less** (backups, static
+text).
 
-### Widget types
+Service definitions live as Pydantic modules in the backend
+(`integrations/`); they declare the service config schema, secret fields, and
+the widget kinds the service provides. There is no runtime plugin loading.
 
-- **Jellyfin activity** — live sessions and idle users from a configured Jellyfin machine.
-- **Backups** — backup job summary and active alerts.
-- **Grafana link** — deep-link to a Grafana dashboard or panel (no iframe embedding).
-- **Prometheus metric** — result of a PromQL instant query.
-- **SSH task output** — output of a saved task run on a machine.
+### Services
+
+- **Grafana** — base URL + optional API key; provides a dashboard-link widget.
+- **Prometheus** — base URL + optional bearer token; provides a PromQL metric widget.
+- **Jellyfin** — base URL + API key; provides a live-activity widget.
+- **Nextcloud** — base URL + app password (no widgets yet).
+- **SSH task runner** — host/port/username + saved SSH key reference + optional
+  passphrase; provides a task-output widget. Tasks stay in the global saved-task
+  registry; every run is recorded in `service_task_runs` as history.
+
+Multiple instances per service type are supported. Services are managed from the
+**Services** page (`/services`) and each instance has a detail page at
+`/services/:serviceType/:serviceId`.
+
+### Built-in widgets
+
+- **Backups** — internal backup job summary and active alerts.
 - **Static text** — plain text or markdown note.
 
+These do not reference a service.
+
 ### Security
 
-- Widget `config` may not contain credential keys such as `password`, `token`,
-  `secret`, `api_key`, `private_key`, or `passphrase`, or values that look like
-  secrets (e.g., base64 blobs, `sk-` prefixes).
-- Widgets reuse machine-level Jellyfin/SSH credentials and environment settings for
-  Grafana/Prometheus URLs; no secrets are stored in widget configuration.
-- SSH task widgets only run tasks from the saved-task registry; arbitrary commands
-  are not accepted.
-
-### Addon pages
-
-Each non-core addon gets a dedicated page at `/addons/:addonId`:
-
-- `/addons/grafana`
-- `/addons/prometheus`
-- `/addons/ssh-tasks`
-
-Unknown addons render a "not installed" alert.
+- Service secrets (API keys, tokens, passphrases) are **encrypted at rest** with
+  Fernet using a single env-provided `MANAGE_ENCRYPTION_KEY`, which is always
+  required to start the backend.
+- Widget `config` and service `config` may not contain credential keys or
+  secret-looking values; secrets go in the dedicated secret fields only.
+- Plaintext secrets are never returned by the API; only `secrets_set` flags are
+  surfaced.
+- SSH task widgets only run tasks from the saved-task registry; arbitrary
+  commands are not accepted.
 
 ### API
 
-- `GET /api/widgets/sources` — list source types.
-- `GET /api/widgets/types` — list widget type metadata.
+- `GET /api/services/types` — service definition metadata (config schema,
+  secret fields, widget kinds).
+- `GET /api/services/instances` — list service instances (no plaintext secrets).
+- `POST /api/services/instances` — create instance.
+- `PUT /api/services/instances/{id}` — update instance.
+- `DELETE /api/services/instances/{id}` — delete instance (cascade-deletes
+  widgets referencing it).
+- `GET /api/widgets/builtin` — built-in (service-less) widget kinds.
 - `GET /api/widgets/instances` — list widget instances.
-- `POST /api/widgets/instances` — create instance.
-- `PUT /api/widgets/instances/{id}` — update instance.
-- `DELETE /api/widgets/instances/{id}` — delete instance.
+- `POST/PUT/DELETE /api/widgets/instances/{id}` — widget CRUD.
 - `GET /api/widgets/instances/{id}/data` — fetch widget data.
 
+### Breaking change
+
+Grafana/Prometheus URLs and credentials moved from environment variables into
+service records. The legacy `GRAFANA_URL` / `PROMETHEUS_URL` backend settings and
+the widget/addon-pages model were removed. `MANAGE_ENCRYPTION_KEY` is now required.
+
+> **Follow-up (not in this change):** machine-level Jellyfin/Jellyseerr app
+> config still powers the Media/Users/Files pages. Migrating those onto the
+> service registry (and removing the machine app fields) is a separate change;
+> see `openspec/changes/service-registry/design.md` §12.5.
+
 ## Decision Log
 
 - 2026-06-17: Decommissioned the legacy Manage-side system-metric scraping. Removed the backend `MonitoringPoller` (SSH-ran `df` on every machine every 5 min into a local SQLite `monitoring_machine_actions` table), the entire `services/monitoring_actions.py` module, the `/api/monitoring/poller`, `/api/monitoring/machines/{id}/actions`, and `/api/monitoring/disk` endpoints, the `monitoring_machine_actions` table (DROP on startup), the three `monitoring_poll_*` / `monitoring_action_retention_days` config knobs, and the orphaned frontend `DiskSpaceCard` + `DiskSpace` type. System metrics are now owned exclusively by Prometheus + node_exporter + Grafana. Kept the Alertmanager proxy (`/alerts`, `/alertmanager-status`, `/alertmanager-webhook`), `/prometheus-targets`, `/machines`, the `node_exporter_*` machine fields, and the on-demand `disk_usage` job template.

frontend/src/App.tsx

@@ -22,7 +22,8 @@ import { FileBrowser } from "./pages/FileBrowser";
 import { Actions } from "./pages/Actions";
 import BackupsPage from "./components/BackupsPage";
 import { ObservabilityPage } from "./components/ObservabilityPage";
-import { AddonPage } from "./pages/AddonPage";
+import { ServicePage } from "./pages/ServicePage";
+import { ServicesPage } from "./pages/ServicesPage";
 import { getOidcConfig, isOidcConfigured, setAccessToken } from "./auth";
 import { fetchAppVersion } from "./api/client";
 import { FRONTEND_VERSION_LABEL } from "./version";
@@ -56,6 +57,7 @@ import {
 	LogOut,
 	ChevronLeft,
 	ChevronRight,
+	Boxes,
 } from "lucide-react";
 
 const queryClient = new QueryClient({
@@ -89,6 +91,7 @@ const navItems = [
 	{ path: "/backups", label: "Backups", icon: DatabaseBackup },
 	{ path: "/users", label: "Users", icon: Users },
 	{ path: "/actions", label: "Actions", icon: Zap },
+	{ path: "/services", label: "Services", icon: Boxes },
 	{ path: "/settings", label: "Settings", icon: SettingsIcon },
 ];
 
@@ -450,7 +453,11 @@ function AppInner() {
 								<Route path="/backups" element={<BackupsPage />} />
 								<Route path="/observability" element={<ObservabilityPage />} />
 								<Route path="/settings" element={<Settings />} />
-								<Route path="/addons/:addonId" element={<AddonPage />} />
+								<Route path="/services" element={<ServicesPage />} />
+								<Route
+									path="/services/:serviceType/:serviceId"
+									element={<ServicePage />}
+								/>
 							</Route>
 						</Routes>
 					</BrowserRouter>
@@ -482,7 +489,11 @@ function AppInner() {
 							<Route path="/backups" element={<BackupsPage />} />
 							<Route path="/observability" element={<ObservabilityPage />} />
 							<Route path="/settings" element={<Settings />} />
-							<Route path="/addons/:addonId" element={<AddonPage />} />
+							<Route path="/services" element={<ServicesPage />} />
+							<Route
+								path="/services/:serviceType/:serviceId"
+								element={<ServicePage />}
+							/>
 						</Route>
 					</Routes>
 				</BrowserRouter>

frontend/src/addons/GrafanaAddonPage.tsx

@@ -1,37 +0,0 @@
-import { ExternalLink } from "lucide-react";
-import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-
-export function GrafanaAddonPage() {
-	const grafanaUrl =
-		(import.meta.env.VITE_GRAFANA_URL as string | undefined) ||
-		"http://localhost:3000";
-
-	return (
-		<div className="flex flex-col gap-4">
-			<h2 className="text-xl font-semibold">Grafana</h2>
-			<Card>
-				<CardHeader>
-					<CardTitle>Metrics & logs</CardTitle>
-				</CardHeader>
-				<CardContent className="flex flex-col gap-3">
-					<p className="text-sm text-muted-foreground">
-						Open the full Grafana instance for dashboards, metrics, and log
-						exploration.
-					</p>
-					<Button asChild>
-						<a
-							href={grafanaUrl}
-							target="_blank"
-							rel="noopener noreferrer"
-							className="inline-flex items-center"
-						>
-							Open Grafana
-							<ExternalLink className="ml-2 h-4 w-4" />
-						</a>
-					</Button>
-				</CardContent>
-			</Card>
-		</div>
-	);
-}

frontend/src/addons/PrometheusAddonPage.tsx

@@ -1,36 +0,0 @@
-import { ExternalLink } from "lucide-react";
-import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-
-export function PrometheusAddonPage() {
-	const prometheusUrl =
-		(import.meta.env.VITE_PROMETHEUS_URL as string | undefined) ||
-		"http://localhost:9090";
-
-	return (
-		<div className="flex flex-col gap-4">
-			<h2 className="text-xl font-semibold">Prometheus</h2>
-			<Card>
-				<CardHeader>
-					<CardTitle>Metrics explorer</CardTitle>
-				</CardHeader>
-				<CardContent className="flex flex-col gap-3">
-					<p className="text-sm text-muted-foreground">
-						Open Prometheus to run ad-hoc PromQL queries and inspect targets.
-					</p>
-					<Button asChild>
-						<a
-							href={prometheusUrl}
-							target="_blank"
-							rel="noopener noreferrer"
-							className="inline-flex items-center"
-						>
-							Open Prometheus
-							<ExternalLink className="ml-2 h-4 w-4" />
-						</a>
-					</Button>
-				</CardContent>
-			</Card>
-		</div>
-	);
-}

frontend/src/addons/SshTasksAddonPage.tsx

@@ -1,29 +0,0 @@
-import { Terminal } from "lucide-react";
-import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { useNavigate } from "react-router-dom";
-
-export function SshTasksAddonPage() {
-	const navigate = useNavigate();
-
-	return (
-		<div className="flex flex-col gap-4">
-			<h2 className="text-xl font-semibold">SSH tasks</h2>
-			<Card>
-				<CardHeader>
-					<CardTitle>Saved actions</CardTitle>
-				</CardHeader>
-				<CardContent className="flex flex-col gap-3">
-					<p className="text-sm text-muted-foreground">
-						Create, edit, and run saved shell or Python tasks against local or
-						remote machines.
-					</p>
-					<Button onClick={() => navigate("/actions")}>
-						<Terminal className="mr-2 h-4 w-4" />
-						Open Actions
-					</Button>
-				</CardContent>
-			</Card>
-		</div>
-	);
-}

frontend/src/addons/index.ts

@@ -1,3 +0,0 @@
-export { GrafanaAddonPage } from "./GrafanaAddonPage";
-export { PrometheusAddonPage } from "./PrometheusAddonPage";
-export { SshTasksAddonPage } from "./SshTasksAddonPage";

frontend/src/api/client.ts

@@ -134,26 +134,26 @@ async function del<T>(path: string): Promise<T> {
 	return response.json();
 }
 
-// Dashboard
-export const fetchCounts = (machineId?: string) =>
+// Dashboard (Jellyfin-backed; selected via jellyfin_service_id)
+export const fetchCounts = (jellyfinServiceId?: string) =>
 	get<MediaCounts>(
 		"/api/dashboard/counts",
-		machineId ? { machine_id: machineId } : undefined,
+		jellyfinServiceId ? { jellyfin_service_id: jellyfinServiceId } : undefined,
 	);
-export const fetchLibraries = (machineId?: string) =>
+export const fetchLibraries = (jellyfinServiceId?: string) =>
 	get<LibraryCount[]>(
 		"/api/dashboard/libraries",
-		machineId ? { machine_id: machineId } : undefined,
+		jellyfinServiceId ? { jellyfin_service_id: jellyfinServiceId } : undefined,
 	);
-export const fetchActivity = (machineId?: string) =>
+export const fetchActivity = (jellyfinServiceId?: string) =>
 	get<NowPlayingSession[]>(
 		"/api/dashboard/activity",
-		machineId ? { machine_id: machineId } : undefined,
+		jellyfinServiceId ? { jellyfin_service_id: jellyfinServiceId } : undefined,
 	);
-export const fetchUsers = (machineId?: string) =>
+export const fetchUsers = (jellyfinServiceId?: string) =>
 	get<UserDirectoryResponse>(
 		"/api/users",
-		machineId ? { machine_id: machineId } : undefined,
+		jellyfinServiceId ? { jellyfin_service_id: jellyfinServiceId } : undefined,
 	);
 
 // Backward-compatible alias used by older hooks/components.
@@ -293,27 +293,27 @@ export const resetLocalDatabase = (payload: ResetLocalDatabaseInput) =>
 	);
 
 // Media
-export const fetchMediaStatus = (machineId?: string) =>
+export const fetchMediaStatus = (jellyfinServiceId?: string) =>
 	get<MediaIndexStatus>(
 		"/api/media/status",
-		machineId ? { machine_id: machineId } : undefined,
+		jellyfinServiceId ? { jellyfin_service_id: jellyfinServiceId } : undefined,
 	);
-export const buildMediaIndex = (machineId?: string) =>
+export const buildMediaIndex = (jellyfinServiceId?: string) =>
 	post<MediaIndexActionResponse>(
-		machineId
-			? `/api/media/build?machine_id=${encodeURIComponent(machineId)}`
+		jellyfinServiceId
+			? `/api/media/build?jellyfin_service_id=${encodeURIComponent(jellyfinServiceId)}`
 			: "/api/media/build",
 	);
-export const stopMediaIndexBuild = (machineId?: string) =>
+export const stopMediaIndexBuild = (jellyfinServiceId?: string) =>
 	post<MediaIndexActionResponse>(
-		machineId
-			? `/api/media/stop?machine_id=${encodeURIComponent(machineId)}`
+		jellyfinServiceId
+			? `/api/media/stop?jellyfin_service_id=${encodeURIComponent(jellyfinServiceId)}`
 			: "/api/media/stop",
 	);
-export const forceStopMediaIndexBuild = (machineId?: string) =>
+export const forceStopMediaIndexBuild = (jellyfinServiceId?: string) =>
 	post<MediaIndexActionResponse>(
-		machineId
-			? `/api/media/force-stop?machine_id=${encodeURIComponent(machineId)}`
+		jellyfinServiceId
+			? `/api/media/force-stop?jellyfin_service_id=${encodeURIComponent(jellyfinServiceId)}`
 			: "/api/media/force-stop",
 	);
 export const queryMedia = (params: {
@@ -325,7 +325,7 @@ export const queryMedia = (params: {
 	sort_order?: string;
 	limit?: number;
 	offset?: number;
-	machineId?: string;
+	jellyfinServiceId?: string;
 }) =>
 	get<MediaQueryResponse>("/api/media/query", {
 		libraries: params.libraries || "",
@@ -336,7 +336,9 @@ export const queryMedia = (params: {
 		sort_order: params.sort_order || "Ascending",
 		limit: String(params.limit || 100),
 		offset: String(params.offset || 0),
-		...(params.machineId ? { machine_id: params.machineId } : {}),
+		...(params.jellyfinServiceId
+			? { jellyfin_service_id: params.jellyfinServiceId }
+			: {}),
 	});
 
 // Files

frontend/src/api/services.ts

@@ -0,0 +1,59 @@
+import type {
+	ServiceInstance,
+	ServiceInstanceInput,
+	ServiceTypeInfo,
+} from "../types";
+
+const API_BASE = "/api";
+
+export async function fetchServiceTypes(): Promise<ServiceTypeInfo[]> {
+	const res = await fetch(`${API_BASE}/services/types`);
+	if (!res.ok) throw new Error("Failed to fetch service types");
+	return res.json();
+}
+
+export async function fetchServiceInstances(
+	serviceType?: string,
+): Promise<ServiceInstance[]> {
+	const query = serviceType
+		? `?service_type=${encodeURIComponent(serviceType)}`
+		: "";
+	const res = await fetch(`${API_BASE}/services/instances${query}`);
+	if (!res.ok) throw new Error("Failed to fetch service instances");
+	return res.json();
+}
+
+export async function createServiceInstance(
+	input: ServiceInstanceInput,
+): Promise<ServiceInstance> {
+	const res = await fetch(`${API_BASE}/services/instances`, {
+		method: "POST",
+		headers: { "Content-Type": "application/json" },
+		body: JSON.stringify(input),
+	});
+	if (!res.ok) throw new Error("Failed to create service instance");
+	return res.json();
+}
+
+export async function updateServiceInstance(
+	input: ServiceInstanceInput,
+): Promise<ServiceInstance> {
+	if (!input.id) throw new Error("Service ID is required for update");
+	const res = await fetch(`${API_BASE}/services/instances/${input.id}`, {
+		method: "PUT",
+		headers: { "Content-Type": "application/json" },
+		body: JSON.stringify(input),
+	});
+	if (!res.ok) throw new Error("Failed to update service instance");
+	return res.json();
+}
+
+export async function deleteServiceInstance(
+	serviceId: string,
+): Promise<{ status: string }> {
+	const res = await fetch(`${API_BASE}/services/instances/${serviceId}`, {
+		method: "DELETE",
+	});
+	if (!res.ok) throw new Error("Failed to delete service instance");
+	return res.json();
+}

frontend/src/api/widgets.ts

@@ -1,21 +1,17 @@
 import type {
+	BuiltinWidgetKindInfo,
 	WidgetDataResponse,
 	WidgetInstance,
 	WidgetInstanceInput,
-	WidgetTypeInfo,
 } from "../types";
 
 const API_BASE = "/api";
 
-export async function fetchWidgetSources(): Promise<string[]> {
-	const res = await fetch(`${API_BASE}/widgets/sources`);
-	if (!res.ok) throw new Error("Failed to fetch widget sources");
-	return res.json();
-}
-
-export async function fetchWidgetTypes(): Promise<WidgetTypeInfo[]> {
-	const res = await fetch(`${API_BASE}/widgets/types`);
-	if (!res.ok) throw new Error("Failed to fetch widget types");
+export async function fetchBuiltinWidgetKinds(): Promise<
+	BuiltinWidgetKindInfo[]
+> {
+	const res = await fetch(`${API_BASE}/widgets/builtin`);
+	if (!res.ok) throw new Error("Failed to fetch built-in widget kinds");
 	return res.json();
 }
 

frontend/src/components/WidgetConfigDialog.tsx

@@ -23,36 +23,29 @@ import {
 	useDeleteWidgetInstance,
 	useSaveWidgetInstance,
 	useWidgetInstances,
-	useWidgetTypes,
 } from "../hooks/useWidgets";
-import { useMonitoringSettings, useTasks } from "../hooks/useSettings";
-import type {
-	MonitoringMachine,
-	SavedTask,
-	WidgetInstance,
-	WidgetInstanceInput,
-} from "../types";
+import { useServiceInstances } from "../hooks/useServices";
+import { useTasks } from "../hooks/useSettings";
+import type { WidgetInstance, WidgetInstanceInput } from "../types";
 import {
-	getWidgetDefinition,
-	listWidgetTypes,
-	type WidgetDefinition,
-} from "../widgets/registry";
+	BUILTIN_WIDGETS,
+	SERVICE_REGISTRY,
+	type ServiceWidgetBinding,
+} from "../integrations/registry";
 
 interface Props {
 	open: boolean;
 	onClose: () => void;
 }
 
-function emptyDraft(widgetType: string): WidgetInstanceInput {
-	const def = getWidgetDefinition(widgetType);
-	return {
-		addon_id: def?.addonId ?? "",
-		widget_type: widgetType,
-		title: def?.name ?? "",
-		config: { ...(def?.defaultConfig ?? {}) },
-		enabled: true,
-		sort_order: 0,
-	};
+interface Draft {
+	id?: string;
+	serviceId: string | null;
+	widgetKind: string;
+	title: string;
+	config: Record<string, unknown>;
+	enabled: boolean;
+	sortOrder: number;
 }
 
 function Field({
@@ -77,126 +70,88 @@ function Field({
 	);
 }
 
-function WidgetConfigFields({
-	definition,
+function bindingLabel(serviceId: string | null, widgetKind: string): string {
+	if (serviceId === null)
+		return BUILTIN_WIDGETS[widgetKind]?.name ?? widgetKind;
+	return widgetKind;
+}
+
+function WidgetConfigEditor({
+	binding,
+	isTaskOutput,
 	config,
 	onChange,
-	machines,
 	tasks,
 }: {
-	definition: WidgetDefinition;
+	binding: ServiceWidgetBinding | undefined;
+	isTaskOutput: boolean;
 	config: Record<string, unknown>;
 	onChange: (config: Record<string, unknown>) => void;
-	machines: MonitoringMachine[];
-	tasks: SavedTask[];
+	tasks: { id: string; name: string; enabled: boolean }[];
 }) {
+	// SSH task output gets a dedicated task picker; everything else gets a
+	// generic text field per top-level schema property.
+	if (isTaskOutput) {
+		return (
+			<Field label="Saved task" htmlFor="widget-task-id">
+				<Select
+					value={String(config.task_id ?? "")}
+					onValueChange={(v) => onChange({ ...config, task_id: v })}
+				>
+					<SelectTrigger id="widget-task-id">
+						<SelectValue placeholder="Select a task" />
+					</SelectTrigger>
+					<SelectContent>
+						{tasks
+							.filter((t) => t.enabled)
+							.map((t) => (
+								<SelectItem key={t.id} value={t.id}>
+									{t.name}
+								</SelectItem>
+							))}
+					</SelectContent>
+				</Select>
+			</Field>
+		);
+	}
+
+	const properties = binding
+		? Object.entries(
+				(
+					binding.configSchema as
+						| { properties?: Record<string, unknown> }
+						| undefined
+				)?.properties ?? {},
+			)
+		: [];
+
+	if (properties.length === 0) return null;
+
 	return (
 		<div className="flex flex-col gap-3">
-			{definition.configFields.map((field) => {
-				const value = config[field.key] ?? "";
-
-				if (
-					definition.widgetType === "jellyfin" &&
-					field.key === "machine_id"
-				) {
-					return (
-						<Field
-							key={field.key}
-							label={field.label}
-							htmlFor={field.key}
-							helper={field.helper}
-						>
-							<Select
-								value={String(value)}
-								onValueChange={(v) => onChange({ ...config, [field.key]: v })}
-							>
-								<SelectTrigger id={field.key}>
-									<SelectValue />
-								</SelectTrigger>
-								<SelectContent>
-									<SelectItem value="">Default</SelectItem>
-									{machines
-										.filter((m) => m.enabled && m.services.includes("jellyfin"))
-										.map((m) => (
-											<SelectItem key={m.id} value={m.id}>
-												{m.name}
-											</SelectItem>
-										))}
-								</SelectContent>
-							</Select>
-						</Field>
-					);
-				}
-
-				if (definition.widgetType === "ssh-task" && field.key === "task_id") {
-					return (
-						<Field
-							key={field.key}
-							label={field.label}
-							htmlFor={field.key}
-							helper={field.helper}
-						>
-							<Select
-								value={String(value)}
-								onValueChange={(v) => onChange({ ...config, [field.key]: v })}
-							>
-								<SelectTrigger id={field.key}>
-									<SelectValue />
-								</SelectTrigger>
-								<SelectContent>
-									{tasks
-										.filter((t) => t.enabled)
-										.map((t) => (
-											<SelectItem key={t.id} value={t.id}>
-												{t.name}
-											</SelectItem>
-										))}
-								</SelectContent>
-							</Select>
-						</Field>
-					);
-				}
-
-				if (field.type === "number") {
-					return (
-						<Field
-							key={field.key}
-							label={field.label}
-							htmlFor={field.key}
-							helper={field.helper}
-						>
-							<Input
-								id={field.key}
-								type="number"
-								value={String(value)}
-								onChange={(e) =>
-									onChange({
-										...config,
-										[field.key]:
-											e.target.value === ""
-												? undefined
-												: Number(e.target.value),
-									})
-								}
-							/>
-						</Field>
-					);
-				}
-
+			{properties.map(([key, schema]) => {
+				const isNumber =
+					(schema as { type?: string }).type === "integer" ||
+					(schema as { type?: string }).type === "number";
 				return (
 					<Field
-						key={field.key}
-						label={field.label}
-						htmlFor={field.key}
-						helper={field.helper}
+						key={key}
+						label={key}
+						htmlFor={`widget-cfg-${key}`}
+						helper={(schema as { description?: string }).description}
 					>
 						<Input
-							id={field.key}
-							value={String(value)}
+							id={`widget-cfg-${key}`}
+							type={isNumber ? "number" : "text"}
+							value={String(config[key] ?? "")}
 							onChange={(e) =>
 								onChange({
 									...config,
-									[field.key]: e.target.value,
+									[key]: isNumber
+										? e.target.value === ""
+											? undefined
+											: Number(e.target.value)
+										: e.target.value,
 								})
 							}
 						/>
@@ -209,16 +164,12 @@ function WidgetConfigFields({
 
 export function WidgetConfigDialog({ open, onClose }: Props) {
 	const { data: instances = [] } = useWidgetInstances();
-	const { data: types = [] } = useWidgetTypes();
-	const { data: machines = [] } = useMonitoringSettings();
+	const { data: services = [] } = useServiceInstances();
 	const { data: tasks = [] } = useTasks();
 	const saveWidget = useSaveWidgetInstance();
 	const deleteWidget = useDeleteWidgetInstance();
 
-	const [draft, setDraft] = useState<WidgetInstanceInput | null>(null);
-	const [editingId, setEditingId] = useState<string | null>(null);
-
-	const registryDefinitions = useMemo(() => listWidgetTypes(), []);
+	const [draft, setDraft] = useState<Draft | null>(null);
 
 	const sortedInstances = useMemo(
 		() =>
@@ -228,39 +179,72 @@ export function WidgetConfigDialog({ open, onClose }: Props) {
 		[instances],
 	);
 
-	function startAdd(widgetType: string) {
-		setDraft(emptyDraft(widgetType));
-		setEditingId(null);
+	function startAddBuiltIn(kind: string) {
+		const binding = BUILTIN_WIDGETS[kind];
+		setDraft({
+			serviceId: null,
+			widgetKind: kind,
+			title: binding?.name ?? kind,
+			config: { ...(binding?.defaultConfig ?? {}) },
+			enabled: true,
+			sortOrder: 0,
+		});
+	}
+
+	function startAddService(serviceId: string, kind: string) {
+		const binding = SERVICE_REGISTRY[
+			services.find((s) => s.id === serviceId)?.service_type ?? ""
+		]?.widgets.find((w) => w.kind === kind);
+		setDraft({
+			serviceId,
+			widgetKind: kind,
+			title: binding?.name ?? kind,
+			config: { ...(binding?.defaultConfig ?? {}) },
+			enabled: true,
+			sortOrder: 0,
+		});
 	}
 
 	function startEdit(instance: WidgetInstance) {
 		setDraft({
 			id: instance.id,
-			addon_id: instance.addon_id,
-			widget_type: instance.widget_type,
+			serviceId: instance.service_id,
+			widgetKind: instance.widget_kind,
 			title: instance.title,
 			config: instance.config,
 			enabled: instance.enabled,
-			sort_order: instance.sort_order,
+			sortOrder: instance.sort_order,
 		});
-		setEditingId(instance.id);
 	}
 
 	function reset() {
 		setDraft(null);
-		setEditingId(null);
 	}
 
 	async function saveDraft() {
 		if (!draft) return;
-		await saveWidget.mutateAsync(draft);
+		const input: WidgetInstanceInput = {
+			id: draft.id ?? null,
+			service_id: draft.serviceId,
+			widget_kind: draft.widgetKind,
+			title: draft.title,
+			config: draft.config,
+			enabled: draft.enabled,
+			sort_order: draft.sortOrder,
+		};
+		await saveWidget.mutateAsync(input);
 		reset();
 	}
 
 	async function toggleEnabled(instance: WidgetInstance) {
 		await saveWidget.mutateAsync({
-			...instance,
+			id: instance.id,
+			service_id: instance.service_id,
+			widget_kind: instance.widget_kind,
+			title: instance.title,
+			config: instance.config,
 			enabled: !instance.enabled,
+			sort_order: instance.sort_order,
 		});
 	}
 
@@ -286,7 +270,17 @@ export function WidgetConfigDialog({ open, onClose }: Props) {
 		}
 	}
 
-	const definition = draft ? getWidgetDefinition(draft.widget_type) : undefined;
+	const draftBinding = draft
+		? draft.serviceId
+			? SERVICE_REGISTRY[
+					services.find((s) => s.id === draft.serviceId)?.service_type ?? ""
+				]?.widgets.find((w) => w.kind === draft.widgetKind)
+			: BUILTIN_WIDGETS[draft.widgetKind]
+		: undefined;
+	const isTaskOutput =
+		draft?.serviceId !== null &&
+		services.find((s) => s.id === draft?.serviceId)?.service_type ===
+			"ssh_tasks";
 
 	return (
 		<Dialog open={open} onOpenChange={handleClose}>
@@ -294,18 +288,15 @@ export function WidgetConfigDialog({ open, onClose }: Props) {
 				<DialogHeader>
 					<DialogTitle>
 						{draft
-							? editingId
+							? draft.id
 								? "Edit widget"
 								: "Add widget"
 							: "Dashboard widgets"}
 					</DialogTitle>
 				</DialogHeader>
 
-				{draft && definition ? (
+				{draft ? (
 					<div className="flex flex-col gap-4">
-						<p className="text-sm text-muted-foreground">
-							{definition.description}
-						</p>
 						<div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
 							<Field label="Title" htmlFor="widget-title">
 								<Input
@@ -320,11 +311,11 @@ export function WidgetConfigDialog({ open, onClose }: Props) {
 								<Input
 									id="widget-sort-order"
 									type="number"
-									value={String(draft.sort_order)}
+									value={String(draft.sortOrder)}
 									onChange={(e) =>
 										setDraft({
 											...draft,
-											sort_order:
+											sortOrder:
 												e.target.value === "" ? 0 : Number(e.target.value),
 										})
 									}
@@ -341,11 +332,11 @@ export function WidgetConfigDialog({ open, onClose }: Props) {
 							/>
 							<Label htmlFor="widget-enabled">Enabled</Label>
 						</div>
-						<WidgetConfigFields
-							definition={definition}
+						<WidgetConfigEditor
+							binding={draftBinding}
+							isTaskOutput={!!isTaskOutput}
 							config={draft.config}
 							onChange={(config) => setDraft({ ...draft, config })}
-							machines={machines}
 							tasks={tasks}
 						/>
 						<div className="flex justify-end gap-2">
@@ -368,7 +359,9 @@ export function WidgetConfigDialog({ open, onClose }: Props) {
 						) : (
 							<div className="flex flex-col gap-2">
 								{sortedInstances.map((instance, index) => {
-									const typeDef = getWidgetDefinition(instance.widget_type);
+									const serviceName = instance.service_id
+										? services.find((s) => s.id === instance.service_id)?.name
+										: "Built-in";
 									return (
 										<div
 											key={instance.id}
@@ -378,8 +371,16 @@ export function WidgetConfigDialog({ open, onClose }: Props) {
 												<div className="flex items-center gap-2">
 													<span className="font-medium">{instance.title}</span>
 													<Badge variant="outline">
-														{typeDef?.name ?? instance.widget_type}
+														{bindingLabel(
+															instance.service_id,
+															instance.widget_kind,
+														)}
 													</Badge>
+													{serviceName ? (
+														<span className="text-xs text-muted-foreground">
+															{serviceName}
+														</span>
+													) : null}
 													{!instance.enabled ? (
 														<Badge variant="secondary">disabled</Badge>
 													) : null}
@@ -435,27 +436,40 @@ export function WidgetConfigDialog({ open, onClose }: Props) {
 						<div className="flex flex-col gap-2">
 							<p className="text-sm font-medium">Add widget</p>
 							<div className="flex flex-wrap gap-2">
-								{registryDefinitions.map((def) => (
+								{Object.values(BUILTIN_WIDGETS).map((b) => (
 									<Button
-										key={def.widgetType}
+										key={b.kind}
 										variant="outline"
 										size="sm"
-										onClick={() => startAdd(def.widgetType)}
+										onClick={() => startAddBuiltIn(b.kind)}
 									>
 										<Plus className="mr-1 h-3 w-3" />
-										{def.name}
+										{b.name}
 									</Button>
 								))}
+								{services
+									.filter((s) => s.enabled)
+									.flatMap((s) =>
+										(SERVICE_REGISTRY[s.service_type]?.widgets ?? []).map(
+											(w) => (
+												<Button
+													key={`${s.id}:${w.kind}`}
+													variant="outline"
+													size="sm"
+													onClick={() => startAddService(s.id, w.kind)}
+												>
+													<Plus className="mr-1 h-3 w-3" />
+													{w.name} · {s.name}
+												</Button>
+											),
+										),
+									)}
 							</div>
+							<p className="text-xs text-muted-foreground">
+								Configure services on their service pages to unlock more
+								widgets.
+							</p>
 						</div>
-
-						{types.length === 0 ? (
-							<Alert>
-								<AlertDescription>
-									Widget registry is empty. Backend may not be running.
-								</AlertDescription>
-							</Alert>
-						) : null}
 					</div>
 				)}
 			</DialogContent>

frontend/src/components/WidgetInstance.tsx

@@ -1,5 +1,6 @@
 import { Alert, AlertDescription } from "@/components/ui/alert";
-import { getWidgetDefinition } from "../widgets/registry";
+import { useServiceInstances } from "../hooks/useServices";
+import { resolveWidget } from "../integrations/registry";
 import type { WidgetInstance } from "../types";
 import { SectionCard } from "./SectionCard";
 
@@ -7,20 +8,29 @@ interface Props {
 	widget: WidgetInstance;
 }
 
-export function WidgetInstance({ widget }: Props) {
-	const def = getWidgetDefinition(widget.widget_type);
-	if (!def) {
+export function WidgetInstanceCard({ widget }: Props) {
+	const { data: services = [] } = useServiceInstances();
+	const resolved = resolveWidget(widget, services);
+
+	if (!resolved) {
+		const label = widget.service_id
+			? `Unknown widget: ${widget.widget_kind} (service-bound)`
+			: `Unknown widget: ${widget.widget_kind} (built-in)`;
 		return (
 			<SectionCard title={widget.title}>
 				<Alert>
-					<AlertDescription>
-						Unknown widget type: {widget.widget_type}
-					</AlertDescription>
+					<AlertDescription>{label}</AlertDescription>
 				</Alert>
 			</SectionCard>
 		);
 	}
 
-	const Component = def.component;
-	return <Component widget={widget} />;
+	const Component = resolved.component;
+	return (
+		<Component
+			widget={widget}
+			refreshIntervalMs={resolved.refreshIntervalMs}
+			description={resolved.description}
+		/>
+	);
 }

frontend/src/hooks/useDashboard.ts

@@ -9,26 +9,26 @@ import {
 } from "../api/client";
 import type { DashboardShortcutInput } from "../types";
 
-export function useCounts(machineId?: string) {
+export function useCounts(jellyfinServiceId?: string) {
 	return useQuery({
-		queryKey: ["dashboard", "counts", machineId ?? "default"],
-		queryFn: () => fetchCounts(machineId),
+		queryKey: ["dashboard", "counts", jellyfinServiceId ?? "default"],
+		queryFn: () => fetchCounts(jellyfinServiceId),
 		staleTime: 5 * 60 * 1000,
 	});
 }
 
-export function useLibraries(machineId?: string) {
+export function useLibraries(jellyfinServiceId?: string) {
 	return useQuery({
-		queryKey: ["dashboard", "libraries", machineId ?? "default"],
-		queryFn: () => fetchLibraries(machineId),
+		queryKey: ["dashboard", "libraries", jellyfinServiceId ?? "default"],
+		queryFn: () => fetchLibraries(jellyfinServiceId),
 		staleTime: 5 * 60 * 1000,
 	});
 }
 
-export function useActivity(machineId?: string) {
+export function useActivity(jellyfinServiceId?: string) {
 	return useQuery({
-		queryKey: ["dashboard", "activity", machineId ?? "default"],
-		queryFn: () => fetchActivity(machineId),
+		queryKey: ["dashboard", "activity", jellyfinServiceId ?? "default"],
+		queryFn: () => fetchActivity(jellyfinServiceId),
 		refetchInterval: 15_000,
 	});
 }

frontend/src/hooks/useMedia.ts

@@ -7,10 +7,10 @@ import {
 	forceStopMediaIndexBuild,
 } from "../api/client";
 
-export function useMediaStatus(machineId?: string) {
+export function useMediaStatus(jellyfinServiceId?: string) {
 	return useQuery({
-		queryKey: ["media", "status", machineId ?? "default"],
-		queryFn: () => fetchMediaStatus(machineId),
+		queryKey: ["media", "status", jellyfinServiceId ?? "default"],
+		queryFn: () => fetchMediaStatus(jellyfinServiceId),
 		staleTime: 5_000,
 		refetchInterval: (query) =>
 			query.state.data?.build_running ? 1000 : false,
@@ -27,7 +27,7 @@ export function useMediaQuery(params: {
 	sort_order?: string;
 	limit?: number;
 	offset?: number;
-	machineId?: string;
+	jellyfinServiceId?: string;
 	enabled?: boolean;
 }) {
 	const { enabled = true, ...queryParams } = params;
@@ -44,30 +44,30 @@ function invalidateMedia(queryClient: ReturnType<typeof useQueryClient>) {
 	queryClient.invalidateQueries({ queryKey: ["media"] });
 }
 
-export function useBuildIndex(machineId?: string) {
+export function useBuildIndex(jellyfinServiceId?: string) {
 	const queryClient = useQueryClient();
 	return useMutation({
-		mutationFn: () => buildMediaIndex(machineId),
+		mutationFn: () => buildMediaIndex(jellyfinServiceId),
 		onSuccess: () => {
 			invalidateMedia(queryClient);
 		},
 	});
 }
 
-export function useStopBuildIndex(machineId?: string) {
+export function useStopBuildIndex(jellyfinServiceId?: string) {
 	const queryClient = useQueryClient();
 	return useMutation({
-		mutationFn: () => stopMediaIndexBuild(machineId),
+		mutationFn: () => stopMediaIndexBuild(jellyfinServiceId),
 		onSuccess: () => {
 			invalidateMedia(queryClient);
 		},
 	});
 }
 
-export function useForceStopBuildIndex(machineId?: string) {
+export function useForceStopBuildIndex(jellyfinServiceId?: string) {
 	const queryClient = useQueryClient();
 	return useMutation({
-		mutationFn: () => forceStopMediaIndexBuild(machineId),
+		mutationFn: () => forceStopMediaIndexBuild(jellyfinServiceId),
 		onSuccess: () => {
 			invalidateMedia(queryClient);
 		},

frontend/src/hooks/useServices.ts

@@ -0,0 +1,47 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import {
+	createServiceInstance,
+	deleteServiceInstance,
+	fetchServiceInstances,
+	fetchServiceTypes,
+	updateServiceInstance,
+} from "../api/services";
+import type { ServiceInstanceInput } from "../types";
+
+export function useServiceTypes() {
+	return useQuery({
+		queryKey: ["services", "types"],
+		queryFn: fetchServiceTypes,
+		staleTime: 5 * 60 * 1000,
+	});
+}
+
+export function useServiceInstances(serviceType?: string) {
+	return useQuery({
+		queryKey: ["services", "instances", serviceType ?? "all"],
+		queryFn: () => fetchServiceInstances(serviceType),
+		refetchInterval: 60_000,
+	});
+}
+
+export function useSaveServiceInstance() {
+	const queryClient = useQueryClient();
+	return useMutation({
+		mutationFn: (input: ServiceInstanceInput) =>
+			input.id ? updateServiceInstance(input) : createServiceInstance(input),
+		onSuccess: () => {
+			queryClient.invalidateQueries({ queryKey: ["services", "instances"] });
+		},
+	});
+}
+
+export function useDeleteServiceInstance() {
+	const queryClient = useQueryClient();
+	return useMutation({
+		mutationFn: (serviceId: string) => deleteServiceInstance(serviceId),
+		onSuccess: () => {
+			queryClient.invalidateQueries({ queryKey: ["services", "instances"] });
+			queryClient.invalidateQueries({ queryKey: ["widgets", "instances"] });
+		},
+	});
+}

frontend/src/hooks/useUsers.ts

@@ -2,10 +2,10 @@ import { useQuery } from "@tanstack/react-query";
 import { fetchUsers } from "../api/client";
 import type { UserDirectoryResponse } from "../types";
 
-export function useUsers(machineId?: string) {
+export function useUsers(jellyfinServiceId?: string) {
 	return useQuery<UserDirectoryResponse>({
-		queryKey: ["users", machineId ?? "default"],
-		queryFn: () => fetchUsers(machineId),
+		queryKey: ["users", jellyfinServiceId ?? "default"],
+		queryFn: () => fetchUsers(jellyfinServiceId),
 		staleTime: 30_000,
 	});
 }

frontend/src/hooks/useWidgets.ts

@@ -2,10 +2,9 @@ import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import {
 	createWidgetInstance,
 	deleteWidgetInstance,
+	fetchBuiltinWidgetKinds,
 	fetchWidgetData,
 	fetchWidgetInstances,
-	fetchWidgetSources,
-	fetchWidgetTypes,
 	updateWidgetInstance,
 } from "../api/widgets";
 import type { WidgetInstanceInput } from "../types";
@@ -49,16 +48,10 @@ export function useDeleteWidgetInstance() {
 	});
 }
 
-export function useWidgetSources() {
+export function useBuiltinWidgetKinds() {
 	return useQuery({
-		queryKey: ["widgets", "sources"],
-		queryFn: fetchWidgetSources,
-	});
-}
-
-export function useWidgetTypes() {
-	return useQuery({
-		queryKey: ["widgets", "types"],
-		queryFn: fetchWidgetTypes,
+		queryKey: ["widgets", "builtin"],
+		queryFn: fetchBuiltinWidgetKinds,
+		staleTime: 5 * 60 * 1000,
 	});
 }

frontend/src/integrations/registry.test.ts

@@ -0,0 +1,100 @@
+import { describe, expect, it } from "vitest";
+import {
+	BUILTIN_WIDGETS,
+	SERVICE_REGISTRY,
+	getBuiltinBinding,
+	getServiceBinding,
+	resolveWidget,
+} from "./registry";
+import type { ServiceInstance, WidgetInstance } from "../types";
+
+describe("service registry", () => {
+	it("registers the five backend service types", () => {
+		expect(Object.keys(SERVICE_REGISTRY).sort()).toEqual([
+			"grafana",
+			"jellyfin",
+			"nextcloud",
+			"prometheus",
+			"ssh_tasks",
+		]);
+	});
+
+	it("binds widget kinds per service", () => {
+		expect(SERVICE_REGISTRY.grafana.widgets.map((w) => w.kind)).toEqual([
+			"link",
+		]);
+		expect(SERVICE_REGISTRY.ssh_tasks.widgets.map((w) => w.kind)).toEqual([
+			"task_output",
+		]);
+		expect(SERVICE_REGISTRY.nextcloud.widgets).toEqual([]);
+	});
+
+	it("registers the two built-in widget kinds", () => {
+		expect(Object.keys(BUILTIN_WIDGETS).sort()).toEqual(["backups", "static"]);
+	});
+
+	it("resolves a service-bound widget via the services list", () => {
+		const widget: WidgetInstance = {
+			id: "w1",
+			service_id: "s1",
+			widget_kind: "link",
+			title: "Dashboard",
+			config: {},
+			enabled: true,
+			sort_order: 0,
+			created_at: 0,
+			updated_at: 0,
+		};
+		const services: ServiceInstance[] = [
+			{
+				id: "s1",
+				service_type: "grafana",
+				name: "Grafana",
+				config: { base_url: "https://grafana.example.com" },
+				secrets_set: { api_key: true },
+				enabled: true,
+				created_at: 0,
+				updated_at: 0,
+			},
+		];
+		const resolved = resolveWidget(widget, services);
+		expect(resolved).toBeDefined();
+		expect(resolved?.refreshIntervalMs).toBe(0);
+	});
+
+	it("resolves a built-in widget without a service", () => {
+		const widget: WidgetInstance = {
+			id: "w2",
+			service_id: null,
+			widget_kind: "static",
+			title: "Note",
+			config: { text: "hi" },
+			enabled: true,
+			sort_order: 0,
+			created_at: 0,
+			updated_at: 0,
+		};
+		const resolved = resolveWidget(widget, []);
+		expect(resolved).toBeDefined();
+	});
+
+	it("returns undefined for an unknown widget kind", () => {
+		const widget: WidgetInstance = {
+			id: "w3",
+			service_id: null,
+			widget_kind: "bogus",
+			title: "x",
+			config: {},
+			enabled: true,
+			sort_order: 0,
+			created_at: 0,
+			updated_at: 0,
+		};
+		expect(resolveWidget(widget, [])).toBeUndefined();
+	});
+
+	it("lookups return undefined for unknown types", () => {
+		expect(getServiceBinding("nope")).toBeUndefined();
+		expect(getBuiltinBinding("nope")).toBeUndefined();
+	});
+});

frontend/src/integrations/registry.ts

@@ -0,0 +1,213 @@
+import type { ComponentType } from "react";
+import { BackupsWidget } from "../widgets/BackupsWidget";
+import { GrafanaLinkWidget } from "../widgets/GrafanaLinkWidget";
+import { JellyfinWidget } from "../widgets/JellyfinWidget";
+import { PrometheusMetricWidget } from "../widgets/PrometheusMetricWidget";
+import { SshTaskWidget } from "../widgets/SshTaskWidget";
+import { StaticWidget } from "../widgets/StaticWidget";
+import type {
+	ServiceInstance,
+	ServiceTypeInfo,
+	WidgetInstance,
+} from "../types";
+
+/**
+ * Closed frontend registry mirroring the backend service definitions.
+ *
+ * Each service type maps its widget kinds to a presentational component and a
+ * refresh interval. Built-in (service-less) kinds are listed separately.
+ */
+
+export interface WidgetComponentProps {
+	widget: WidgetInstance;
+	refreshIntervalMs: number;
+	description?: string;
+}
+
+export interface ServiceWidgetBinding {
+	kind: string;
+	name: string;
+	description: string;
+	refreshIntervalMs: number;
+	defaultConfig: Record<string, unknown>;
+	configSchema: Record<string, unknown>;
+	component: ComponentType<WidgetComponentProps>;
+}
+
+export interface ServiceBinding {
+	serviceType: string;
+	name: string;
+	description: string;
+	widgets: ServiceWidgetBinding[];
+}
+
+export const SERVICE_REGISTRY: Record<string, ServiceBinding> = {
+	grafana: {
+		serviceType: "grafana",
+		name: "Grafana",
+		description: "Dashboards, metrics, and logs.",
+		widgets: [
+			{
+				kind: "link",
+				name: "Dashboard link",
+				description: "Deep-link to a Grafana dashboard or panel.",
+				refreshIntervalMs: 0,
+				defaultConfig: { dashboard_uid: "" },
+				configSchema: {
+					type: "object",
+					properties: {
+						dashboard_uid: { type: "string" },
+						panel_id: { type: "integer" },
+					},
+					required: ["dashboard_uid"],
+				},
+				component: GrafanaLinkWidget,
+			},
+		],
+	},
+	prometheus: {
+		serviceType: "prometheus",
+		name: "Prometheus",
+		description: "Metrics storage and PromQL queries.",
+		widgets: [
+			{
+				kind: "metric",
+				name: "Metric",
+				description: "Instant query result rendered as a metric.",
+				refreshIntervalMs: 30_000,
+				defaultConfig: { promql: "" },
+				configSchema: {
+					type: "object",
+					properties: { promql: { type: "string" } },
+					required: ["promql"],
+				},
+				component: PrometheusMetricWidget,
+			},
+		],
+	},
+	jellyfin: {
+		serviceType: "jellyfin",
+		name: "Jellyfin",
+		description: "Media server with live session activity.",
+		widgets: [
+			{
+				kind: "activity",
+				name: "Activity",
+				description: "Live sessions and idle users.",
+				refreshIntervalMs: 30_000,
+				defaultConfig: {},
+				configSchema: { type: "object", properties: {}, required: [] },
+				component: JellyfinWidget,
+			},
+		],
+	},
+	nextcloud: {
+		serviceType: "nextcloud",
+		name: "Nextcloud",
+		description: "Self-hosted files and collaboration.",
+		widgets: [],
+	},
+	ssh_tasks: {
+		serviceType: "ssh_tasks",
+		name: "SSH task runner",
+		description: "Run reusable saved tasks over SSH and keep run history.",
+		widgets: [
+			{
+				kind: "task_output",
+				name: "Task output",
+				description: "Output of a saved task run.",
+				refreshIntervalMs: 0,
+				defaultConfig: { task_id: "" },
+				configSchema: {
+					type: "object",
+					properties: { task_id: { type: "string" } },
+					required: ["task_id"],
+				},
+				component: SshTaskWidget,
+			},
+		],
+	},
+};
+
+export const BUILTIN_WIDGETS: Record<string, ServiceWidgetBinding> = {
+	backups: {
+		kind: "backups",
+		name: "Backups",
+		description: "Backup job summary and active alerts.",
+		refreshIntervalMs: 60_000,
+		defaultConfig: {},
+		configSchema: { type: "object", properties: {}, required: [] },
+		component: BackupsWidget,
+	},
+	static: {
+		kind: "static",
+		name: "Static text",
+		description: "Plain text or markdown note.",
+		refreshIntervalMs: 0,
+		defaultConfig: { text: "" },
+		configSchema: {
+			type: "object",
+			properties: { text: { type: "string" } },
+			required: ["text"],
+		},
+		component: StaticWidget,
+	},
+};
+
+export function getServiceBinding(
+	serviceType: string,
+): ServiceBinding | undefined {
+	return SERVICE_REGISTRY[serviceType];
+}
+
+export function getBuiltinBinding(
+	kind: string,
+): ServiceWidgetBinding | undefined {
+	return BUILTIN_WIDGETS[kind];
+}
+
+export interface ResolvedWidget {
+	component: ComponentType<WidgetComponentProps>;
+	description: string;
+	refreshIntervalMs: number;
+}
+
+/**
+ * Resolve a widget instance to its component + metadata.
+ *
+ * Service-bound widgets are resolved via the parent service's type (looked up
+ * from the services list); built-in widgets are resolved directly.
+ */
+export function resolveWidget(
+	widget: WidgetInstance,
+	services: ServiceInstance[],
+): ResolvedWidget | undefined {
+	if (widget.service_id) {
+		const service = services.find((s) => s.id === widget.service_id);
+		if (!service) return undefined;
+		const binding = getServiceBinding(service.service_type);
+		const widgetBinding = binding?.widgets.find(
+			(w) => w.kind === widget.widget_kind,
+		);
+		if (!widgetBinding) return undefined;
+		return {
+			component: widgetBinding.component,
+			description: widgetBinding.description,
+			refreshIntervalMs: widgetBinding.refreshIntervalMs,
+		};
+	}
+	const builtin = getBuiltinBinding(widget.widget_kind);
+	if (!builtin) return undefined;
+	return {
+		component: builtin.component,
+		description: builtin.description,
+		refreshIntervalMs: builtin.refreshIntervalMs,
+	};
+}
+
+/** Merge backend type metadata (config_schema, secret_fields) onto bindings. */
+export function enrichServiceTypes(
+	types: ServiceTypeInfo[],
+): ServiceTypeInfo[] {
+	return types;
+}

frontend/src/pages/AddonPage.tsx

@@ -1,28 +0,0 @@
-import { useParams } from "react-router-dom";
-import { Alert, AlertDescription } from "@/components/ui/alert";
-import {
-	GrafanaAddonPage,
-	PrometheusAddonPage,
-	SshTasksAddonPage,
-} from "../addons";
-
-const ADDON_PAGES: Record<string, React.ComponentType> = {
-	grafana: GrafanaAddonPage,
-	prometheus: PrometheusAddonPage,
-	"ssh-tasks": SshTasksAddonPage,
-};
-
-export function AddonPage() {
-	const { addonId } = useParams<{ addonId: string }>();
-	const Page = addonId ? ADDON_PAGES[addonId] : undefined;
-
-	if (!Page) {
-		return (
-			<Alert>
-				<AlertDescription>Addon "{addonId}" is not installed.</AlertDescription>
-			</Alert>
-		);
-	}
-
-	return <Page />;
-}

frontend/src/pages/Applications.tsx

@@ -1,28 +1,23 @@
-import { useMemo, useState } from "react";
+import { useState } from "react";
 import { useSearchParams } from "react-router-dom";
 import { Alert, AlertDescription } from "@/components/ui/alert";
 import { Badge } from "@/components/ui/badge";
 import { TabsTrigger } from "@/components/ui/tabs";
 import { Media } from "./Media";
 import { useCounts, useLibraries } from "../hooks/useDashboard";
-import { useMonitoringSettings } from "../hooks/useSettings";
+import { useServiceInstances } from "../hooks/useServices";
 import { SectionCard } from "../components/SectionCard";
 import { TabbedCard } from "../components/TabbedCard";
 
 function JellyfinLibraryStats() {
 	const [searchParams] = useSearchParams();
-	const { data: machines = [] } = useMonitoringSettings();
-	const jellyfinMachines = useMemo(
-		() =>
-			machines.filter(
-				(machine) => machine.enabled && machine.services.includes("jellyfin"),
-			),
-		[machines],
-	);
-	const selectedMachineId =
-		searchParams.get("machine_id") || jellyfinMachines[0]?.id || "";
-	const { data: counts } = useCounts(selectedMachineId || undefined);
-	const { data: libraries } = useLibraries(selectedMachineId || undefined);
+	const { data: jellyfinServices = [] } = useServiceInstances("jellyfin");
+	const selectedServiceId =
+		searchParams.get("jellyfin_service_id") ||
+		jellyfinServices.find((s) => s.enabled)?.id ||
+		"";
+	const { data: counts } = useCounts(selectedServiceId || undefined);
+	const { data: libraries } = useLibraries(selectedServiceId || undefined);
 
 	return (
 		<SectionCard
@@ -30,7 +25,7 @@ function JellyfinLibraryStats() {
 			description="Compact Jellyfin summary for the selected machine."
 			action={
 				<Badge variant="outline">
-					{selectedMachineId ? "Selected machine" : "Default machine"}
+					{selectedServiceId ? "Selected service" : "Default service"}
 				</Badge>
 			}
 		>

frontend/src/pages/Dashboard.tsx

@@ -30,7 +30,7 @@ import type { DashboardShortcut, DashboardShortcutInput } from "../types";
 import { SectionCard } from "../components/SectionCard";
 import { ConfirmDialog } from "../components/ConfirmDialog";
 import { DialogFooter } from "../components/DialogFooter";
-import { WidgetInstance } from "../components/WidgetInstance";
+import { WidgetInstanceCard } from "../components/WidgetInstance";
 import { WidgetConfigDialog } from "../components/WidgetConfigDialog";
 
 function emptyShortcut(): DashboardShortcutInput {
@@ -418,7 +418,7 @@ export function Dashboard() {
 			</SectionCard>
 
 			{visibleWidgets.map((widget) => (
-				<WidgetInstance key={widget.id} widget={widget} />
+				<WidgetInstanceCard key={widget.id} widget={widget} />
 			))}
 
 			<ShortcutDialog

frontend/src/pages/Media.tsx

@@ -32,7 +32,7 @@ import {
 } from "../hooks/useMedia";
 import { usePersistentState } from "../hooks/usePersistentState";
 import type { MediaItem } from "../types";
-import { useMonitoringSettings } from "../hooks/useSettings";
+import { useServiceInstances } from "../hooks/useServices";
 import { useCounts, useLibraries } from "../hooks/useDashboard";
 
 function formatDuration(seconds: number | null | undefined): string {
@@ -178,23 +178,18 @@ export function Media() {
 	const navigate = useNavigate();
 	const [searchParams, setSearchParams] = useSearchParams();
 	const isSmall = usePrefersSmallScreen();
-	const { data: machines } = useMonitoringSettings();
-	const jellyfinMachines = useMemo(
-		() =>
-			(machines ?? []).filter(
-				(machine) => machine.enabled && machine.services.includes("jellyfin"),
-			),
-		[machines],
-	);
-	const selectedMachineId =
-		searchParams.get("machine_id") || jellyfinMachines[0]?.id || "";
-	const { data: counts } = useCounts(selectedMachineId || undefined);
-	const { data: libraries } = useLibraries(selectedMachineId || undefined);
-	const { data: status } = useMediaStatus(selectedMachineId || undefined);
-	const buildIndex = useBuildIndex(selectedMachineId || undefined);
-	const stopBuildIndex = useStopBuildIndex(selectedMachineId || undefined);
+	const { data: jellyfinServices = [] } = useServiceInstances("jellyfin");
+	const selectedServiceId =
+		searchParams.get("jellyfin_service_id") ||
+		jellyfinServices.find((s) => s.enabled)?.id ||
+		"";
+	const { data: counts } = useCounts(selectedServiceId || undefined);
+	const { data: libraries } = useLibraries(selectedServiceId || undefined);
+	const { data: status } = useMediaStatus(selectedServiceId || undefined);
+	const buildIndex = useBuildIndex(selectedServiceId || undefined);
+	const stopBuildIndex = useStopBuildIndex(selectedServiceId || undefined);
 	const forceStopBuildIndex = useForceStopBuildIndex(
-		selectedMachineId || undefined,
+		selectedServiceId || undefined,
 	);
 
 	const [rawMediaState, setMediaState] = usePersistentState<MediaTabState>(
@@ -215,17 +210,17 @@ export function Media() {
 	const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
 
 	useEffect(() => {
-		if (!searchParams.get("machine_id") && selectedMachineId) {
+		if (!searchParams.get("jellyfin_service_id") && selectedServiceId) {
 			setSearchParams(
 				(current) => {
 					const next = new URLSearchParams(current);
-					next.set("machine_id", selectedMachineId);
+					next.set("jellyfin_service_id", selectedServiceId);
 					return next;
 				},
 				{ replace: true },
 			);
 		}
-	}, [searchParams, selectedMachineId, setSearchParams]);
+	}, [searchParams, selectedServiceId, setSearchParams]);
 
 	const { data: queryResult, isLoading } = useMediaDataQuery({
 		types,
@@ -235,7 +230,7 @@ export function Media() {
 		sort_order: sortOrder,
 		limit: pageSize,
 		offset,
-		machineId: selectedMachineId || undefined,
+		jellyfinServiceId: selectedServiceId || undefined,
 		enabled: status?.exists ?? false,
 	});
 
@@ -323,27 +318,27 @@ export function Media() {
 			<div className="flex flex-row flex-wrap items-center gap-2">
 				<h2 className="text-lg font-semibold">Jellyfin</h2>
 				<div className="flex flex-col gap-1.5">
-					<Label htmlFor="media-machine">Machine</Label>
+					<Label htmlFor="media-service">Service</Label>
 					<Select
-						value={selectedMachineId}
+						value={selectedServiceId}
 						onValueChange={(value) =>
 							setSearchParams(
 								(current) => {
 									const next = new URLSearchParams(current);
-									next.set("machine_id", value);
+									next.set("jellyfin_service_id", value);
 									return next;
 								},
 								{ replace: true },
 							)
 						}
 					>
-						<SelectTrigger id="media-machine" className="w-full md:w-[220px]">
-							<SelectValue placeholder="Select a machine" />
+						<SelectTrigger id="media-service" className="w-full md:w-[220px]">
+							<SelectValue placeholder="Select a service" />
 						</SelectTrigger>
 						<SelectContent>
-							{jellyfinMachines.map((machine) => (
-								<SelectItem key={machine.id} value={machine.id}>
-									{machine.name}
+							{jellyfinServices.map((service) => (
+								<SelectItem key={service.id} value={service.id}>
+									{service.name}
 								</SelectItem>
 							))}
 						</SelectContent>

frontend/src/pages/ServicePage.tsx

@@ -0,0 +1,255 @@
+import { useMemo, useState } from "react";
+import { useParams } 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 {
+	useDeleteServiceInstance,
+	useSaveServiceInstance,
+	useServiceInstances,
+} from "../hooks/useServices";
+import type { ServiceInstance, ServiceInstanceInput } from "../types";
+import { SectionCard } from "../components/SectionCard";
+import { ConfirmDialog } from "../components/ConfirmDialog";
+import { getServiceBinding } from "../integrations/registry";
+
+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 saveService = useSaveServiceInstance();
+	const deleteService = useDeleteServiceInstance();
+
+	const instance = useMemo(
+		() => services.find((s) => s.id === serviceId),
+		[services, serviceId],
+	);
+	const binding = getServiceBinding(serviceType);
+
+	const [name, setName] = useState("");
+	const [enabled, setEnabled] = useState(true);
+	const [deleteOpen, setDeleteOpen] = useState(false);
+	const [hydrated, setHydrated] = useState(false);
+
+	// Hydrate local form state once the instance loads.
+	if (instance && !hydrated) {
+		setName(instance.name);
+		setEnabled(instance.enabled);
+		setHydrated(true);
+	}
+
+	if (!binding) {
+		return (
+			<Alert>
+				<AlertDescription>Unknown service type: {serviceType}</AlertDescription>
+			</Alert>
+		);
+	}
+
+	if (!instance) {
+		return (
+			<Alert>
+				<AlertDescription>Service not found.</AlertDescription>
+			</Alert>
+		);
+	}
+
+	function buildInput(): ServiceInstanceInput {
+		return {
+			id: instance!.id,
+			service_type: instance!.service_type,
+			name,
+			config: instance!.config,
+			secrets: {}, // secrets are managed via the dedicated inputs below
+			enabled,
+		};
+	}
+
+	async function save() {
+		await saveService.mutateAsync(buildInput());
+	}
+
+	return (
+		<div className="flex flex-col gap-4">
+			<div className="flex items-center justify-between">
+				<div>
+					<h2 className="text-xl font-semibold">{instance.name}</h2>
+					<p className="text-sm text-muted-foreground">{binding.description}</p>
+				</div>
+				<Badge variant="outline">{binding.name}</Badge>
+			</div>
+
+			<SectionCard title="General">
+				<div className="flex flex-col gap-3">
+					<Field label="Name" htmlFor="service-name">
+						<Input
+							id="service-name"
+							value={name}
+							onChange={(e) => setName(e.target.value)}
+						/>
+					</Field>
+					<div className="flex items-center gap-2">
+						<Switch
+							id="service-enabled"
+							checked={enabled}
+							onCheckedChange={setEnabled}
+						/>
+						<Label htmlFor="service-enabled">Enabled</Label>
+					</div>
+					<div className="flex justify-between">
+						<Button onClick={save} disabled={saveService.isPending}>
+							Save
+						</Button>
+						<Button variant="destructive" onClick={() => setDeleteOpen(true)}>
+							Delete
+						</Button>
+					</div>
+				</div>
+			</SectionCard>
+
+			<ServiceSecretsCard instance={instance} />
+
+			{binding.widgets.length > 0 ? (
+				<SectionCard
+					title="Widgets"
+					description="Widget kinds this service provides."
+				>
+					<div className="flex flex-col gap-2">
+						{binding.widgets.map((w) => (
+							<div
+								key={w.kind}
+								className="flex items-center justify-between rounded border p-2"
+							>
+								<div>
+									<div className="font-medium">{w.name}</div>
+									<div className="text-xs text-muted-foreground">
+										{w.description}
+									</div>
+								</div>
+								<Badge variant="outline">{w.kind}</Badge>
+							</div>
+						))}
+						<p className="text-xs text-muted-foreground">
+							Add these to the dashboard from the dashboard's edit dialog.
+						</p>
+					</div>
+				</SectionCard>
+			) : null}
+
+			<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);
+				}}
+			/>
+		</div>
+	);
+}
+
+function ServiceSecretsCard({ instance }: { instance: ServiceInstance }) {
+	const saveService = useSaveServiceInstance();
+	// Empty-on-edit: local state starts blank; a blank field means "keep existing".
+	const [draftSecrets, setDraftSecrets] = useState<Record<string, string>>({});
+
+	return (
+		<SectionCard
+			title="Connection"
+			description="Non-secret config is read-only here for now; edit secret values below."
+		>
+			<div className="flex flex-col gap-3">
+				{Object.entries(instance.config).length === 0 ? (
+					<p className="text-sm text-muted-foreground">No connection config.</p>
+				) : (
+					<dl className="grid grid-cols-1 gap-2 text-sm sm:grid-cols-2">
+						{Object.entries(instance.config).map(([key, value]) => (
+							<div key={key} className="flex flex-col">
+								<dt className="text-xs text-muted-foreground">{key}</dt>
+								<dd className="truncate font-mono text-xs">{String(value)}</dd>
+							</div>
+						))}
+					</dl>
+				)}
+
+				{Object.keys(instance.secrets_set).length === 0 ? (
+					<p className="text-sm text-muted-foreground">No secret fields.</p>
+				) : (
+					<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) =>
+											setDraftSecrets({
+												...draftSecrets,
+												[key]: e.target.value,
+											})
+										}
+									/>
+								</Field>
+								{isSet ? <Badge variant="secondary">set</Badge> : null}
+							</div>
+						))}
+						<Button
+							onClick={() => {
+								const onlyChanged = Object.fromEntries(
+									Object.entries(draftSecrets).filter(([, v]) => v !== ""),
+								);
+								saveService.mutate({
+									id: instance.id,
+									service_type: instance.service_type,
+									name: instance.name,
+									config: instance.config,
+									secrets: onlyChanged,
+									enabled: instance.enabled,
+								});
+								setDraftSecrets({});
+							}}
+						>
+							Update secrets
+						</Button>
+					</div>
+				)}
+			</div>
+		</SectionCard>
+	);
+}

frontend/src/pages/ServicesPage.tsx

@@ -0,0 +1,372 @@
+import { useMemo, useState } from "react";
+import { 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 {
+	Dialog,
+	DialogContent,
+	DialogHeader,
+	DialogTitle,
+} from "@/components/ui/dialog";
+import { ExternalLink, Plus, Trash2 } from "lucide-react";
+import {
+	useDeleteServiceInstance,
+	useSaveServiceInstance,
+	useServiceInstances,
+} from "../hooks/useServices";
+import { useServiceTypes } from "../hooks/useServices";
+import type {
+	SecretFieldInfo,
+	ServiceInstance,
+	ServiceInstanceInput,
+	ServiceTypeInfo,
+} from "../types";
+import { SectionCard } from "../components/SectionCard";
+import { ConfirmDialog } from "../components/ConfirmDialog";
+import { DialogFooter } from "../components/DialogFooter";
+import { getServiceBinding } from "../integrations/registry";
+
+interface CreateDraft {
+	serviceType: string;
+	name: string;
+	config: Record<string, unknown>;
+	secrets: Record<string, string>;
+	enabled: boolean;
+}
+
+function emptyDraft(serviceType: string): CreateDraft {
+	return { serviceType, name: "", config: {}, secrets: {}, enabled: true };
+}
+
+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>
+	);
+}
+
+function ServiceConfigFields({
+	type,
+	config,
+	onChange,
+}: {
+	type: ServiceTypeInfo;
+	config: Record<string, unknown>;
+	onChange: (config: Record<string, unknown>) => void;
+}) {
+	const properties =
+		(
+			type.config_schema as {
+				properties?: Record<string, { type?: string; description?: string }>;
+			}
+		).properties ?? {};
+	return (
+		<div className="flex flex-col gap-3">
+			{Object.entries(properties).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(config[key] ?? "")}
+							onChange={(e) =>
+								onChange({
+									...config,
+									[key]: isNumber
+										? e.target.value === ""
+											? undefined
+											: Number(e.target.value)
+										: e.target.value,
+								})
+							}
+						/>
+					</Field>
+				);
+			})}
+		</div>
+	);
+}
+
+function ServiceSecretFields({
+	fields,
+	secrets,
+	onChange,
+}: {
+	fields: SecretFieldInfo[];
+	secrets: Record<string, string>;
+	onChange: (secrets: Record<string, string>) => void;
+}) {
+	if (fields.length === 0) return null;
+	return (
+		<div className="flex flex-col gap-3">
+			{fields.map((field) => (
+				<Field
+					key={field.key}
+					label={field.label}
+					htmlFor={`secret-${field.key}`}
+					helper={field.helper ?? (field.required ? "Required" : undefined)}
+				>
+					<Input
+						id={`secret-${field.key}`}
+						type="password"
+						value={secrets[field.key] ?? ""}
+						onChange={(e) =>
+							onChange({ ...secrets, [field.key]: e.target.value })
+						}
+					/>
+				</Field>
+			))}
+		</div>
+	);
+}
+
+function CreateServiceDialog({
+	open,
+	onClose,
+}: {
+	open: boolean;
+	onClose: () => void;
+}) {
+	const { data: types = [] } = useServiceTypes();
+	const saveService = useSaveServiceInstance();
+	const [draft, setDraft] = useState<CreateDraft | null>(null);
+
+	function reset() {
+		setDraft(null);
+	}
+
+	async function save() {
+		if (!draft) return;
+		if (!draft.name.trim()) return;
+		const input: ServiceInstanceInput = {
+			service_type: draft.serviceType,
+			name: draft.name.trim(),
+			config: draft.config,
+			secrets: draft.secrets,
+			enabled: draft.enabled,
+		};
+		await saveService.mutateAsync(input);
+		reset();
+		onClose();
+	}
+
+	const selectedType = types.find((t) => t.service_type === draft?.serviceType);
+
+	return (
+		<Dialog
+			open={open}
+			onOpenChange={(next) => {
+				if (!next) {
+					reset();
+					onClose();
+				}
+			}}
+		>
+			<DialogContent className="sm:max-w-lg">
+				<DialogHeader>
+					<DialogTitle>New service</DialogTitle>
+				</DialogHeader>
+				<div className="flex flex-col gap-4">
+					{!draft ? (
+						<div className="flex flex-col gap-2">
+							{types.map((t) => (
+								<Button
+									key={t.service_type}
+									variant="outline"
+									onClick={() => setDraft(emptyDraft(t.service_type))}
+								>
+									<Plus className="mr-1 h-3 w-3" />
+									{t.name}
+								</Button>
+							))}
+						</div>
+					) : (
+						<>
+							<p className="text-sm text-muted-foreground">
+								{selectedType?.description}
+							</p>
+							<Field label="Name" htmlFor="service-name">
+								<Input
+									id="service-name"
+									value={draft.name}
+									onChange={(e) => setDraft({ ...draft, name: e.target.value })}
+								/>
+							</Field>
+							{selectedType ? (
+								<ServiceConfigFields
+									type={selectedType}
+									config={draft.config}
+									onChange={(config) => setDraft({ ...draft, config })}
+								/>
+							) : null}
+							{selectedType ? (
+								<ServiceSecretFields
+									fields={selectedType.secret_fields}
+									secrets={draft.secrets}
+									onChange={(secrets) => setDraft({ ...draft, secrets })}
+								/>
+							) : null}
+							<div className="flex items-center gap-2">
+								<Switch
+									id="service-enabled"
+									checked={draft.enabled}
+									onCheckedChange={(checked) =>
+										setDraft({ ...draft, enabled: checked })
+									}
+								/>
+								<Label htmlFor="service-enabled">Enabled</Label>
+							</div>
+						</>
+					)}
+				</div>
+				{draft ? (
+					<DialogFooter
+						onCancel={reset}
+						onConfirm={save}
+						confirmLabel="Create service"
+						confirmDisabled={!draft.name.trim() || saveService.isPending}
+					/>
+				) : null}
+			</DialogContent>
+		</Dialog>
+	);
+}
+
+export function ServicesPage() {
+	const navigate = useNavigate();
+	const { data: services = [] } = useServiceInstances();
+	const { data: types = [] } = useServiceTypes();
+	const deleteService = useDeleteServiceInstance();
+	const [createOpen, setCreateOpen] = useState(false);
+	const [deleteId, setDeleteId] = useState<string | null>(null);
+
+	const grouped = useMemo(() => {
+		const map = new Map<string, ServiceInstance[]>();
+		for (const s of services) {
+			const list = map.get(s.service_type) ?? [];
+			list.push(s);
+			map.set(s.service_type, list);
+		}
+		return [...map.entries()].sort((a, b) => a[0].localeCompare(b[0]));
+	}, [services]);
+
+	const typeName = (t: string) =>
+		types.find((x) => x.service_type === t)?.name ??
+		getServiceBinding(t)?.name ??
+		t;
+
+	return (
+		<div className="flex flex-col gap-4">
+			<SectionCard
+				title="Services"
+				description="External services the app talks to. Configure URLs and API keys here; they are encrypted at rest."
+				action={
+					<Button variant="outline" onClick={() => setCreateOpen(true)}>
+						<Plus className="mr-1 h-3 w-3" />
+						Add service
+					</Button>
+				}
+			>
+				{services.length === 0 ? (
+					<Alert>
+						<AlertDescription>
+							No services yet. Add a Grafana, Prometheus, Jellyfin, Nextcloud,
+							or SSH task runner.
+						</AlertDescription>
+					</Alert>
+				) : (
+					<div className="flex flex-col gap-4">
+						{grouped.map(([serviceType, instances]) => (
+							<div key={serviceType} className="flex flex-col gap-2">
+								<div className="text-sm font-medium">
+									{typeName(serviceType)}
+								</div>
+								<div className="flex flex-col gap-2">
+									{instances.map((s) => (
+										<div
+											key={s.id}
+											className="flex items-center gap-2 rounded border p-2"
+										>
+											<div className="flex flex-1 flex-col gap-1">
+												<div className="flex items-center gap-2">
+													<span className="font-medium">{s.name}</span>
+													<Badge variant="outline">{s.service_type}</Badge>
+													{!s.enabled ? (
+														<Badge variant="secondary">disabled</Badge>
+													) : null}
+													{Object.entries(s.secrets_set).some(([, v]) => v) ? (
+														<Badge variant="outline">secrets set</Badge>
+													) : null}
+												</div>
+											</div>
+											<div className="flex items-center gap-1">
+												<Button
+													variant="ghost"
+													size="sm"
+													onClick={() =>
+														navigate(`/services/${s.service_type}/${s.id}`)
+													}
+												>
+													Open <ExternalLink className="ml-1 h-3 w-3" />
+												</Button>
+												<Button
+													variant="ghost"
+													size="icon"
+													className="h-8 w-8 text-destructive"
+													onClick={() => setDeleteId(s.id)}
+												>
+													<Trash2 className="h-4 w-4" />
+												</Button>
+											</div>
+										</div>
+									))}
+								</div>
+							</div>
+						))}
+					</div>
+				)}
+			</SectionCard>
+
+			<CreateServiceDialog
+				open={createOpen}
+				onClose={() => setCreateOpen(false)}
+			/>
+			<ConfirmDialog
+				open={Boolean(deleteId)}
+				title="Delete service?"
+				message="This removes the service and any widgets that reference it. This cannot be undone."
+				confirmLabel="Delete"
+				onCancel={() => setDeleteId(null)}
+				onConfirm={() => {
+					if (deleteId) deleteService.mutate(deleteId);
+					setDeleteId(null);
+				}}
+			/>
+		</div>
+	);
+}

frontend/src/pages/Settings.tsx

@@ -52,8 +52,6 @@ import { Textarea } from "@/components/ui/textarea";
 const SERVICE_OPTIONS = [
 	{ value: "monitoring", label: "Monitoring" },
 	{ value: "files", label: "Files" },
-	{ value: "jellyfin", label: "Jellyfin" },
-	{ value: "jellyseerr", label: "Jellyseerr" },
 	{ value: "nextcloud", label: "Nextcloud" },
 ];
 
@@ -114,7 +112,7 @@ function emptyMachine(
 		name: mode === "local" ? "This machine" : "",
 		mode,
 		enabled: true,
-		services: mode === "local" ? ["monitoring", "files", "jellyfin"] : [],
+		services: mode === "local" ? ["monitoring", "files"] : [],
 		host: "",
 		port: 22,
 		username: "",
@@ -126,11 +124,6 @@ function emptyMachine(
 		password: "",
 		media_root: "",
 		path_prefix: "",
-		jellyfin_url: "",
-		jellyfin_user_id: "",
-		jellyfin_api_key: "",
-		jellyseerr_url: "",
-		jellyseerr_api_key: "",
 		notes: "",
 	};
 }
@@ -169,8 +162,6 @@ function MachineEditor({
 	const isLocal = draft.mode === "local";
 	const selectedSSHKey = sshKeys.find((key) => key.id === draft.ssh_key_id);
 	const enabledServices = draft.services.length;
-	const hasJellyfin = draft.services.includes("jellyfin");
-	const hasJellyseerr = draft.services.includes("jellyseerr");
 	const placeholderIfSet = (isSet: boolean | undefined) =>
 		isSet ? "Set, not shown" : undefined;
 	return (
@@ -398,99 +389,6 @@ function MachineEditor({
 							/>
 						</FormField>
 					</div>
-					{hasJellyfin && (
-						<>
-							<div className="col-span-12">
-								<SectionLabel
-									title="Jellyfin"
-									description="Library host and user selection for media browsing."
-								/>
-							</div>
-							<div className="col-span-12 md:col-span-6">
-								<FormField label="Jellyfin URL">
-									<Input
-										value={draft.jellyfin_url}
-										onChange={(e) =>
-											setDraft((current) => ({
-												...current,
-												jellyfin_url: e.target.value,
-											}))
-										}
-									/>
-								</FormField>
-							</div>
-							<div className="col-span-12 md:col-span-6">
-								<FormField label="Jellyfin user ID">
-									<Input
-										value={draft.jellyfin_user_id}
-										onChange={(e) =>
-											setDraft((current) => ({
-												...current,
-												jellyfin_user_id: e.target.value,
-											}))
-										}
-									/>
-								</FormField>
-							</div>
-							<div className="col-span-12 md:col-span-6">
-								<FormField label="Jellyfin API key">
-									<Input
-										type="password"
-										placeholder={placeholderIfSet(
-											editingMachine?.jellyfin_api_key_set,
-										)}
-										value={draft.jellyfin_api_key}
-										onChange={(e) =>
-											setDraft((current) => ({
-												...current,
-												jellyfin_api_key: e.target.value,
-											}))
-										}
-									/>
-								</FormField>
-							</div>
-						</>
-					)}
-					{hasJellyseerr && (
-						<>
-							<div className="col-span-12">
-								<SectionLabel
-									title="Jellyseerr"
-									description="Optional request-manager enrichment for users and requests."
-								/>
-							</div>
-							<div className="col-span-12 md:col-span-6">
-								<FormField label="Jellyseerr URL">
-									<Input
-										value={draft.jellyseerr_url}
-										onChange={(e) =>
-											setDraft((current) => ({
-												...current,
-												jellyseerr_url: e.target.value,
-											}))
-										}
-									/>
-								</FormField>
-							</div>
-							<div className="col-span-12 md:col-span-6">
-								<FormField label="Jellyseerr API key">
-									<Input
-										type="password"
-										placeholder={placeholderIfSet(
-											editingMachine?.jellyseerr_api_key_set,
-										)}
-										value={draft.jellyseerr_api_key}
-										onChange={(e) =>
-											setDraft((current) => ({
-												...current,
-												jellyseerr_api_key: e.target.value,
-											}))
-										}
-									/>
-								</FormField>
-							</div>
-						</>
-					)}
 					{isLocal && (
 						<div className="col-span-12 md:col-span-6">
 							<FormField label="Local hint">
@@ -538,7 +436,7 @@ function MachineEditor({
 						</AlertDescription>
 					</Alert>
 				) : null}
-				{!isLocal && !hasJellyfin && (
+				{!isLocal && enabledServices === 0 && (
 					<Alert>
 						<AlertDescription>
 							SSH machines usually need monitoring or files enabled.
@@ -584,13 +482,6 @@ function MachineEditor({
 						)}
 					</div>
 				)}
-				{hasJellyseerr && !draft.jellyseerr_url && (
-					<Alert>
-						<AlertDescription>
-							Jellyseerr is enabled, but no URL is configured yet.
-						</AlertDescription>
-					</Alert>
-				)}
 			</CardContent>
 		</Card>
 	);
@@ -1146,11 +1037,6 @@ export function Settings() {
 																ssh_private_key_passphrase: "",
 																password: "",
 																media_root: machine.media_root,
-																jellyfin_url: machine.jellyfin_url,
-																jellyfin_user_id: machine.jellyfin_user_id,
-																jellyfin_api_key: "",
-																jellyseerr_url: machine.jellyseerr_url,
-																jellyseerr_api_key: "",
 																notes: machine.notes,
 															},
 															machine,
@@ -1237,12 +1123,6 @@ export function Settings() {
 																ssh_private_key_passphrase: "",
 																password: "",
 																media_root: selectedMachine.media_root,
-																jellyfin_url: selectedMachine.jellyfin_url,
-																jellyfin_user_id:
-																	selectedMachine.jellyfin_user_id,
-																jellyfin_api_key: "",
-																jellyseerr_url: selectedMachine.jellyseerr_url,
-																jellyseerr_api_key: "",
 																notes: selectedMachine.notes,
 															},
 															selectedMachine,

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

@@ -48,11 +48,6 @@ function machine(
 		password_set: false,
 		media_root: "",
 		path_prefix: "",
-		jellyfin_url: "",
-		jellyfin_user_id: "",
-		jellyfin_api_key_set: false,
-		jellyseerr_url: "",
-		jellyseerr_api_key_set: false,
 		notes: "",
 		...overrides,
 	} as MonitoringMachine;

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

@@ -26,6 +26,14 @@ vi.mock("../../hooks/useSettings", () => ({
 	}),
 }));
 
+vi.mock("../../hooks/useServices", () => ({
+	useServiceInstances: () => ({
+		data: [
+			{ id: "jfs1", service_type: "jellyfin", name: "Main", enabled: true },
+		],
+	}),
+}));
+
 vi.mock("../../hooks/useDashboard", () => ({
 	useCounts: () => ({
 		data: { movies: 10, series: 5, episodes: 100 },

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

@@ -5,12 +5,12 @@ import { Dashboard } from "../Dashboard";
 import type { DashboardShortcut } from "../../types";
 
 // Stub the composed widgets so the test exercises Dashboard's own behavior
-// (shortcut CRUD) without rendering the session panel or the backup query.
-vi.mock("../../components/NowPlaying", () => ({
-	NowPlaying: () => <div data-testid="now-playing-stub" />,
+// (shortcut CRUD) without rendering widgets or their data queries.
+vi.mock("../../components/WidgetInstance", () => ({
+	WidgetInstanceCard: () => <div data-testid="widget-stub" />,
 }));
-vi.mock("../../components/BackupDashboardWidget", () => ({
-	default: () => <div data-testid="backup-widget-stub" />,
+vi.mock("../../components/WidgetConfigDialog", () => ({
+	WidgetConfigDialog: () => <div data-testid="widget-config-stub" />,
 }));
 
 const navigate = vi.fn();
@@ -21,6 +21,9 @@ vi.mock("react-router-dom", () => ({
 vi.mock("../../hooks/useSettings", () => ({
 	useMonitoringSettings: () => ({ data: [] }),
 }));
+vi.mock("../../hooks/useWidgets", () => ({
+	useWidgetInstances: () => ({ data: [] }),
+}));
 
 const saveShortcutMutate = vi.fn().mockResolvedValue({});
 const deleteShortcutMutate = vi.fn();

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

@@ -30,11 +30,6 @@ function machineFixture(
 		password_set: false,
 		media_root: "",
 		path_prefix: "",
-		jellyfin_url: "",
-		jellyfin_user_id: "",
-		jellyfin_api_key_set: false,
-		jellyseerr_url: "",
-		jellyseerr_api_key_set: false,
 		notes: "",
 		...overrides,
 	};

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

@@ -34,11 +34,6 @@ function machineFixture(
 		password_set: false,
 		media_root: "",
 		path_prefix: "",
-		jellyfin_url: "",
-		jellyfin_user_id: "",
-		jellyfin_api_key_set: false,
-		jellyseerr_url: "",
-		jellyseerr_api_key_set: false,
 		notes: "",
 		...overrides,
 	};
@@ -103,7 +98,10 @@ let queryResult: MediaQueryResponse;
 
 vi.mock("react-router-dom", () => ({
 	useNavigate: () => navigate,
-	useSearchParams: () => [new URLSearchParams("machine_id=local"), vi.fn()],
+	useSearchParams: () => [
+		new URLSearchParams("jellyfin_service_id=jfs1"),
+		vi.fn(),
+	],
 }));
 
 vi.mock("../../hooks/useMedia", () => ({
@@ -118,6 +116,14 @@ vi.mock("../../hooks/useSettings", () => ({
 	useMonitoringSettings: () => ({ data: [machineFixture()] }),
 }));
 
+vi.mock("../../hooks/useServices", () => ({
+	useServiceInstances: () => ({
+		data: [
+			{ id: "jfs1", service_type: "jellyfin", name: "Main", enabled: true },
+		],
+	}),
+}));
+
 vi.mock("../../hooks/useDashboard", () => ({
 	useCounts: () => ({ data: undefined }),
 	useLibraries: () => ({ data: undefined }),

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

@@ -53,11 +53,6 @@ function localMachine(
 		password_set: false,
 		media_root: "/mnt/media",
 		path_prefix: "",
-		jellyfin_url: "",
-		jellyfin_user_id: "",
-		jellyfin_api_key_set: false,
-		jellyseerr_url: "",
-		jellyseerr_api_key_set: false,
 		notes: "Primary node",
 		...overrides,
 	} as MonitoringMachine;

frontend/src/types/index.ts

@@ -175,11 +175,6 @@ export interface MonitoringMachine {
 	password_set: boolean;
 	media_root: string;
 	path_prefix: string;
-	jellyfin_url: string;
-	jellyfin_user_id: string;
-	jellyfin_api_key_set: boolean;
-	jellyseerr_url: string;
-	jellyseerr_api_key_set: boolean;
 	notes: string;
 }
 
@@ -200,11 +195,6 @@ export interface MonitoringMachineInput {
 	password: string;
 	media_root: string;
 	path_prefix: string;
-	jellyfin_url: string;
-	jellyfin_user_id: string;
-	jellyfin_api_key: string;
-	jellyseerr_url: string;
-	jellyseerr_api_key: string;
 	notes: string;
 }
 
@@ -446,8 +436,8 @@ export interface PrometheusTarget {
 
 export interface WidgetInstance {
 	id: string;
-	addon_id: string;
-	widget_type: string;
+	service_id: string | null;
+	widget_kind: string;
 	title: string;
 	config: Record<string, unknown>;
 	enabled: boolean;
@@ -458,27 +448,71 @@ export interface WidgetInstance {
 
 export interface WidgetInstanceInput {
 	id?: string | null;
-	addon_id: string;
-	widget_type: string;
+	service_id: string | null;
+	widget_kind: string;
 	title: string;
 	config: Record<string, unknown>;
 	enabled: boolean;
 	sort_order: number;
 }
 
-export interface WidgetTypeInfo {
-	addon_id: string;
-	widget_type: string;
-	name: string;
-	description: string;
-	source_type: string;
-	config_schema: Record<string, unknown>;
-}
-
 export interface WidgetDataResponse {
 	widget_id: string;
-	widget_type: string;
 	data: Record<string, unknown> | null;
 	error: string | null;
 	fetched_at: number;
 }
+
+export interface SecretFieldInfo {
+	key: string;
+	label: string;
+	required: boolean;
+	helper?: string | null;
+}
+
+export interface ServiceWidgetKindInfo {
+	kind: string;
+	name: string;
+	description: string;
+	config_schema: Record<string, unknown>;
+	default_config: Record<string, unknown>;
+	refresh_interval_ms: number;
+}
+
+export interface ServiceTypeInfo {
+	service_type: string;
+	name: string;
+	description: string;
+	config_schema: Record<string, unknown>;
+	secret_fields: SecretFieldInfo[];
+	widget_kinds: ServiceWidgetKindInfo[];
+}
+
+export interface ServiceInstance {
+	id: string;
+	service_type: string;
+	name: string;
+	config: Record<string, unknown>;
+	secrets_set: Record<string, boolean>;
+	enabled: boolean;
+	created_at: number;
+	updated_at: number;
+}
+
+export interface ServiceInstanceInput {
+	id?: string | null;
+	service_type: string;
+	name: string;
+	config: Record<string, unknown>;
+	secrets: Record<string, string>;
+	enabled: boolean;
+}
+
+export interface BuiltinWidgetKindInfo {
+	kind: string;
+	name: string;
+	description: string;
+	config_schema: Record<string, unknown>;
+	default_config: Record<string, unknown>;
+	refresh_interval_ms: number;
+}

frontend/src/widgets/BackupsWidget.tsx

@@ -5,22 +5,23 @@ import { SectionCard } from "../components/SectionCard";
 import { useWidgetData } from "../hooks/useWidgets";
 import type { BackupDashboardSummary } from "../types/backups";
 import type { WidgetInstance } from "../types";
-import { getWidgetDefinition } from "./registry";
 
 interface Props {
 	widget: WidgetInstance;
+	refreshIntervalMs: number;
+	description?: string;
 }
 
-export function BackupsWidget({ widget }: Props) {
-	const def = getWidgetDefinition(widget.widget_type);
-	const { data, isLoading } = useWidgetData(
-		widget.id,
-		def?.refreshInterval ?? 0,
-	);
+export function BackupsWidget({
+	widget,
+	refreshIntervalMs,
+	description,
+}: Props) {
+	const { data, isLoading } = useWidgetData(widget.id, refreshIntervalMs);
 	const summary = data?.data as BackupDashboardSummary | undefined;
 
 	return (
-		<SectionCard title={widget.title} description={def?.description}>
+		<SectionCard title={widget.title} description={description}>
 			{isLoading && !data ? (
 				<div className="flex flex-row flex-wrap gap-6">
 					<Skeleton className="h-10 w-20" />

frontend/src/widgets/GrafanaLinkWidget.tsx

@@ -5,22 +5,23 @@ import { ExternalLink } from "lucide-react";
 import { SectionCard } from "../components/SectionCard";
 import { useWidgetData } from "../hooks/useWidgets";
 import type { WidgetInstance } from "../types";
-import { getWidgetDefinition } from "./registry";
 
 interface Props {
 	widget: WidgetInstance;
+	refreshIntervalMs: number;
+	description?: string;
 }
 
-export function GrafanaLinkWidget({ widget }: Props) {
-	const def = getWidgetDefinition(widget.widget_type);
-	const { data, isLoading } = useWidgetData(
-		widget.id,
-		def?.refreshInterval ?? 0,
-	);
+export function GrafanaLinkWidget({
+	widget,
+	refreshIntervalMs,
+	description,
+}: Props) {
+	const { data, isLoading } = useWidgetData(widget.id, refreshIntervalMs);
 	const url = data?.data?.url as string | undefined;
 
 	return (
-		<SectionCard title={widget.title} description={def?.description}>
+		<SectionCard title={widget.title} description={description}>
 			{isLoading && !data ? (
 				<Skeleton className="h-10 w-48" />
 			) : data?.error ? (

frontend/src/widgets/JellyfinWidget.tsx

@@ -4,22 +4,23 @@ import { SessionActivityPanel } from "../components/SessionActivityPanel";
 import { SectionCard } from "../components/SectionCard";
 import { useWidgetData } from "../hooks/useWidgets";
 import type { NowPlayingSession, WidgetInstance } from "../types";
-import { getWidgetDefinition } from "./registry";
 
 interface Props {
 	widget: WidgetInstance;
+	refreshIntervalMs: number;
+	description?: string;
 }
 
-export function JellyfinWidget({ widget }: Props) {
-	const def = getWidgetDefinition(widget.widget_type);
-	const { data, isLoading } = useWidgetData(
-		widget.id,
-		def?.refreshInterval ?? 0,
-	);
+export function JellyfinWidget({
+	widget,
+	refreshIntervalMs,
+	description,
+}: Props) {
+	const { data, isLoading } = useWidgetData(widget.id, refreshIntervalMs);
 	const sessions = data?.data?.sessions as NowPlayingSession[] | undefined;
 
 	return (
-		<SectionCard title={widget.title} description={def?.description}>
+		<SectionCard title={widget.title} description={description}>
 			{isLoading && !data ? (
 				<div className="flex flex-col gap-2">
 					<Skeleton className="h-4 w-3/4" />

frontend/src/widgets/PrometheusMetricWidget.tsx

@@ -3,10 +3,11 @@ import { Skeleton } from "@/components/ui/skeleton";
 import { SectionCard } from "../components/SectionCard";
 import { useWidgetData } from "../hooks/useWidgets";
 import type { WidgetInstance } from "../types";
-import { getWidgetDefinition } from "./registry";
 
 interface Props {
 	widget: WidgetInstance;
+	refreshIntervalMs: number;
+	description?: string;
 }
 
 type PromQLResult = {
@@ -35,16 +36,16 @@ function formatPrometheusValue(result: PromQLResult | undefined): string {
 	return JSON.stringify(result, null, 2);
 }
 
-export function PrometheusMetricWidget({ widget }: Props) {
-	const def = getWidgetDefinition(widget.widget_type);
-	const { data, isLoading } = useWidgetData(
-		widget.id,
-		def?.refreshInterval ?? 0,
-	);
+export function PrometheusMetricWidget({
+	widget,
+	refreshIntervalMs,
+	description,
+}: Props) {
+	const { data, isLoading } = useWidgetData(widget.id, refreshIntervalMs);
 	const result = data?.data?.result as PromQLResult | undefined;
 
 	return (
-		<SectionCard title={widget.title} description={def?.description}>
+		<SectionCard title={widget.title} description={description}>
 			{isLoading && !data ? (
 				<Skeleton className="h-10 w-32" />
 			) : data?.error ? (

frontend/src/widgets/SshTaskWidget.tsx

@@ -3,10 +3,11 @@ import { Skeleton } from "@/components/ui/skeleton";
 import { SectionCard } from "../components/SectionCard";
 import { useWidgetData } from "../hooks/useWidgets";
 import type { WidgetInstance } from "../types";
-import { getWidgetDefinition } from "./registry";
 
 interface Props {
 	widget: WidgetInstance;
+	refreshIntervalMs: number;
+	description?: string;
 }
 
 type SshTaskResult = {
@@ -15,16 +16,16 @@ type SshTaskResult = {
 	stderr: string;
 };
 
-export function SshTaskWidget({ widget }: Props) {
-	const def = getWidgetDefinition(widget.widget_type);
-	const { data, isLoading } = useWidgetData(
-		widget.id,
-		def?.refreshInterval ?? 0,
-	);
+export function SshTaskWidget({
+	widget,
+	refreshIntervalMs,
+	description,
+}: Props) {
+	const { data, isLoading } = useWidgetData(widget.id, refreshIntervalMs);
 	const result = data?.data as SshTaskResult | undefined;
 
 	return (
-		<SectionCard title={widget.title} description={def?.description}>
+		<SectionCard title={widget.title} description={description}>
 			{isLoading && !data ? (
 				<div className="flex flex-col gap-2">
 					<Skeleton className="h-4 w-full" />

frontend/src/widgets/StaticWidget.tsx

@@ -1,19 +1,23 @@
 import { SectionCard } from "../components/SectionCard";
 import { useWidgetData } from "../hooks/useWidgets";
 import type { WidgetInstance } from "../types";
-import { getWidgetDefinition } from "./registry";
 
 interface Props {
 	widget: WidgetInstance;
+	refreshIntervalMs: number;
+	description?: string;
 }
 
-export function StaticWidget({ widget }: Props) {
-	const def = getWidgetDefinition(widget.widget_type);
-	const { data } = useWidgetData(widget.id, def?.refreshInterval ?? 0);
+export function StaticWidget({
+	widget,
+	refreshIntervalMs,
+	description,
+}: Props) {
+	const { data } = useWidgetData(widget.id, refreshIntervalMs);
 	const text = data?.data?.text as string | undefined;
 
 	return (
-		<SectionCard title={widget.title} description={def?.description}>
+		<SectionCard title={widget.title} description={description}>
 			{text ? (
 				<p className="whitespace-pre-wrap text-sm">{text}</p>
 			) : (

frontend/src/widgets/index.ts

@@ -4,9 +4,3 @@ export { JellyfinWidget } from "./JellyfinWidget";
 export { PrometheusMetricWidget } from "./PrometheusMetricWidget";
 export { SshTaskWidget } from "./SshTaskWidget";
 export { StaticWidget } from "./StaticWidget";
-export {
-	getWidgetDefinition,
-	listWidgetTypes,
-	WIDGET_REGISTRY,
-} from "./registry";
-export type { WidgetConfigField, WidgetDefinition } from "./registry";

frontend/src/widgets/registry.test.ts

@@ -1,42 +0,0 @@
-import { describe, expect, it } from "vitest";
-import {
-	getWidgetDefinition,
-	listWidgetTypes,
-	WIDGET_REGISTRY,
-} from "./registry";
-
-describe("widget registry", () => {
-	it("contains exactly six Phase 1 types", () => {
-		const types = listWidgetTypes();
-		expect(types).toHaveLength(6);
-		expect(types.map((t) => t.widgetType).sort()).toEqual([
-			"backups",
-			"grafana-link",
-			"jellyfin",
-			"prometheus-metric",
-			"ssh-task",
-			"static",
-		]);
-	});
-
-	it("has refresh intervals matching the spec", () => {
-		expect(getWidgetDefinition("jellyfin")?.refreshInterval).toBe(30_000);
-		expect(getWidgetDefinition("backups")?.refreshInterval).toBe(60_000);
-		expect(getWidgetDefinition("grafana-link")?.refreshInterval).toBe(0);
-		expect(getWidgetDefinition("prometheus-metric")?.refreshInterval).toBe(
-			30_000,
-		);
-		expect(getWidgetDefinition("ssh-task")?.refreshInterval).toBe(0);
-		expect(getWidgetDefinition("static")?.refreshInterval).toBe(0);
-	});
-
-	it("defines required metadata for every widget", () => {
-		for (const def of Object.values(WIDGET_REGISTRY)) {
-			expect(def.widgetType).toBeTruthy();
-			expect(def.addonId).toBeTruthy();
-			expect(def.name).toBeTruthy();
-			expect(def.sourceType).toBeTruthy();
-			expect(def.component).toBeDefined();
-		}
-	});
-});

frontend/src/widgets/registry.ts

@@ -1,122 +0,0 @@
-import type { ComponentType } from "react";
-import type { WidgetInstance } from "../types";
-import { BackupsWidget } from "./BackupsWidget";
-import { GrafanaLinkWidget } from "./GrafanaLinkWidget";
-import { JellyfinWidget } from "./JellyfinWidget";
-import { PrometheusMetricWidget } from "./PrometheusMetricWidget";
-import { SshTaskWidget } from "./SshTaskWidget";
-import { StaticWidget } from "./StaticWidget";
-
-export interface WidgetConfigField {
-	key: string;
-	label: string;
-	type: "string" | "select" | "boolean" | "number";
-	options?: { label: string; value: string }[];
-	helper?: string;
-}
-
-export interface WidgetDefinition {
-	widgetType: string;
-	addonId: string;
-	name: string;
-	description: string;
-	sourceType: string;
-	refreshInterval: number;
-	defaultConfig: Record<string, unknown>;
-	configFields: WidgetConfigField[];
-	component: ComponentType<{ widget: WidgetInstance }>;
-}
-
-export const WIDGET_REGISTRY: Record<string, WidgetDefinition> = {
-	jellyfin: {
-		widgetType: "jellyfin",
-		addonId: "core",
-		name: "Jellyfin activity",
-		description: "Live sessions and idle users from a Jellyfin server.",
-		sourceType: "jellyfin",
-		refreshInterval: 30_000,
-		defaultConfig: { machine_id: "" },
-		configFields: [
-			{
-				key: "machine_id",
-				label: "Machine ID",
-				type: "string",
-				helper: "Jellyfin machine id (empty = default)",
-			},
-		],
-		component: JellyfinWidget,
-	},
-	backups: {
-		widgetType: "backups",
-		addonId: "backups",
-		name: "Backups",
-		description: "Backup job summary and active alerts.",
-		sourceType: "backups",
-		refreshInterval: 60_000,
-		defaultConfig: {},
-		configFields: [],
-		component: BackupsWidget,
-	},
-	"grafana-link": {
-		widgetType: "grafana-link",
-		addonId: "grafana",
-		name: "Grafana link",
-		description: "Deep-link to a Grafana dashboard or panel.",
-		sourceType: "grafana",
-		refreshInterval: 0,
-		defaultConfig: { dashboard_uid: "" },
-		configFields: [
-			{ key: "dashboard_uid", label: "Dashboard UID", type: "string" },
-			{
-				key: "panel_id",
-				label: "Panel ID",
-				type: "number",
-				helper: "Optional",
-			},
-		],
-		component: GrafanaLinkWidget,
-	},
-	"prometheus-metric": {
-		widgetType: "prometheus-metric",
-		addonId: "prometheus",
-		name: "Prometheus metric",
-		description: "Instant query result rendered as a metric.",
-		sourceType: "prometheus",
-		refreshInterval: 30_000,
-		defaultConfig: { promql: "" },
-		configFields: [{ key: "promql", label: "PromQL query", type: "string" }],
-		component: PrometheusMetricWidget,
-	},
-	"ssh-task": {
-		widgetType: "ssh-task",
-		addonId: "ssh-tasks",
-		name: "SSH task output",
-		description: "Output of a saved task run on a machine.",
-		sourceType: "ssh_task",
-		refreshInterval: 0,
-		defaultConfig: { task_id: "" },
-		configFields: [{ key: "task_id", label: "Saved task ID", type: "string" }],
-		component: SshTaskWidget,
-	},
-	static: {
-		widgetType: "static",
-		addonId: "core",
-		name: "Static text",
-		description: "Plain text or markdown note.",
-		sourceType: "static",
-		refreshInterval: 0,
-		defaultConfig: { text: "" },
-		configFields: [{ key: "text", label: "Text", type: "string" }],
-		component: StaticWidget,
-	},
-};
-
-export function getWidgetDefinition(
-	widgetType: string,
-): WidgetDefinition | undefined {
-	return WIDGET_REGISTRY[widgetType];
-}
-
-export function listWidgetTypes(): WidgetDefinition[] {
-	return Object.values(WIDGET_REGISTRY);
-}

openspec/changes/service-registry/apply-progress.md

@@ -1,78 +1,119 @@
 # Apply Progress: Runtime Service Registry
 
 **Change:** `service-registry`
-**Apply run:** PR 1 + PR 2 / Slice 1 + Slice 2
+**Apply run:** PRs #7–#10 (Slices 1–4a)
 **Date:** 2026-06-19
 
-## Slice 1 — Backend service foundation (MERGED)
+## Slices 1–3 (MERGED)
 
-Completed in PR #7. See git history. Summary: Fernet secrets helper, closed
-`integrations/` registry with Pydantic config + widget-config definitions for
-grafana/prometheus/jellyfin/nextcloud/ssh_tasks, `services` + `service_task_runs`
-tables with cascade delete, `/api/services*` CRUD, `MANAGE_ENCRYPTION_KEY`
-required at startup, 25 tests.
+- Slice 1 (#7): backend service foundation — encryption, integrations registry,
+  services + service_task_runs tables, `/api/services*` CRUD.
+- Slice 2 (#8): backend widget rebind — service_id + widget_kind, ServiceRecord
+  adapters, built-ins, SSH run logging, retired old widget registry.
+- Slice 3 (#9): frontend services runtime — types/API/hooks, frontend registry,
+  ServicePage, route swap, reconciled widget components + config dialog.
 
-## Slice 2 — Backend widget rebind to services (this PR)
+## Slice 4a — Cleanup + services admin UI + docs (this PR)
 
 ### Completed tasks
 
-- [x] 2.1 Add `service_id` / `widget_kind` columns to `dashboard_widgets`
-      (additive ALTER; legacy `addon_id`/`widget_type` kept but unused).
-- [x] 2.2 Refactor source adapters to `fetch(service, widget_kind, config)`
-      with `ServiceRecord | None`. `SERVICE_ADAPTERS` keyed by service_type;
-      `BUILTIN_ADAPTERS` for backups/static. SSH adapter resolves the task +
-      instance, runs, and appends a `service_task_runs` row (success/failure/
-      timeout/error).
-- [x] 2.3 Retire old `widgets/registry.py` (deleted; metadata now comes from
-      `integrations/registry` + `widgets/builtin`).
-- [x] 2.4 Update widgets router + models for service-bound + built-in widgets.
-      Removed `/api/widgets/types` and `/api/widgets/sources`; added
-      `/api/widgets/builtin`.
-- [x] 2.5 Rewrite widget tests around the new model.
-- [x] 2.6 Stop default widget seeding (fresh install = empty dashboard).
+- [x] Removed addon pages (`/addons/:addonId`, `AddonPage.tsx`, `addons/*`) —
+      superseded by service pages.
+- [x] Removed `grafana_url` / `prometheus_url` from `config.py`, both compose
+      files, `.env.example`, and README. (Frontend `VITE_GRAFANA_URL` /
+      `VITE_PROMETHEUS_URL` deep-link vars retained.)
+- [x] Added a **Services page** (`/services`) with create/list/delete and a nav
+      entry, so service pages are reachable and services are configurable in the
+      tool itself.
+- [x] Registered `/services` route in both route trees + sidebar nav.
+- [x] Updated `docs/REQUIREMENTS.md` (service registry section) and added
+      `CHANGELOG.md` with the breaking-upgrade note.
 
 ### Decision resolved mid-slice
 
-Backups and static widgets stay as **service-less built-ins** (`service_id`
-nullable), per product decision. The data endpoint resolves built-ins via
-`BUILTIN_ADAPTERS` and service-bound widgets via `SERVICE_ADAPTERS` + a
-decrypted `ServiceRecord`.
+"Full machine migration" was scoped into **4a (cleanup) + 4b (Jellyfin/Jellyseerr
+migration)** because removing machine-level Jellyfin/Jellyseerr fields is deeply
+coupled to the Media/Users/Files pages (load-bearing) and there is no
+`jellyseerr` service definition yet. 4a ships the safe cleanup + the services
+admin UI; 4b does the machine-app-field migration as its own reviewable change.
 
-### Files changed (Slice 2)
+### Files changed (Slice 4a)
 
-- New: `widgets/builtin.py` (built-in kinds + light config validation).
-- Rewritten: `widgets/sources.py` (`ServiceRecord`, new protocol, service +
-  built-in adapters, SSH run logging, `_build_ssh_client`).
-- Deleted: `widgets/registry.py`.
-- Modified: `models/widgets.py` (service_id + widget_kind; `BuiltinWidgetKindInfo`).
-- Modified: `routers/widgets.py` (new validation, `/builtin`, data resolution).
-- Modified: `services/settings_store.py` (widget columns; no-op seeding).
-- Modified: `integrations/base.py` (`WidgetKind.config_model` for Pydantic
-  widget-config validation).
-- Rewritten: `tests/test_widgets.py` (26 tests).
+- Backend: `config.py` (removed grafana_url/prometheus_url).
+- Compose/env/docs: `docker-compose.yml`, `docker-compose.dev.yml`,
+  `.env.example`, `README.md`, `docs/REQUIREMENTS.md`, `CHANGELOG.md` (new).
+- Frontend: new `pages/ServicesPage.tsx`; `App.tsx` (routes + nav); removed
+  `pages/AddonPage.tsx`, `addons/*`.
 
-### Verification (Slice 2)
+### Verification (Slice 4a)
 
 ```bash
 cd backend
-.venv/bin/ruff check .                                      # All checks passed
+.venv/bin/ruff check .                                      # clean
 PYTHONPATH=src .venv/bin/python -m pytest                   # 222 passed
 cd ../frontend
 npm run lint                                                # 0 errors
 npm run build                                               # success
+npm run test                                                # 70 passed
 ```
 
-### Known transient state (resolved by Slice 3)
+## Slice 4b — Jellyfin/Jellyseerr → services migration (in progress)
 
-Slice 2 is a backend-only breaking change to the widget API. Until Slice 3
-lands, the frontend still calls the removed `/api/widgets/types` and
-`/api/widgets/sources` endpoints and uses the old `widget_type` shape, so the
-dashboard widget config UI is non-functional at runtime. Build/lint stay green.
-This is the accepted transient state for a stacked backend→frontend rebind.
+### Completed (backend, this PR)
 
-## Remaining work
+- [x] Added `jellyseerr` service definition (`integrations/jellyseerr.py`) and
+      registered it (6 service types total).
+- [x] Added `user_id` to the Jellyfin service config.
+- [x] `dependencies.py`: new `_request_jellyfin_service_id` + `_service_record`
+      (decrypt-on-read). Rewrote `get_jellyfin_client`, `get_jellyseerr_client`,
+      and `get_user_id` to resolve against the service registry via the
+      `jellyfin_service_id` query param (first enabled instance as fallback).
+- [x] SSH/Files transport (`get_ssh_client`) unchanged — still uses
+      `machine_id`.
+- [x] Updated service-registry tests for 6 types.
 
-- Slice 3: Frontend services runtime (types, API, hooks, frontend service
-  registry, service pages, route swap, remove addon pages, reconcile widget UI).
-- Slice 4: Dashboard picker on services, settings rework, remove
-  `grafana_url`/`prometheus_url` env vars, docs + changelog.
+### Selection model (decided)
+
+Split query params: `?jellyfin_service_id=` selects the Jellyfin/Jellyseerr
+instance; `?machine_id=` selects SSH/Files transport. Pages that need both pass
+both.
+
+### Remaining (frontend, next PR)
+
+- Thread `jellyfinServiceId` through Media / Applications / Dashboard / Users:
+  list `jellyfin` service instances instead of `useMonitoringSettings()`
+  Jellyfin machines; pass `jellyfin_service_id` to Jellyfin API calls.
+- Files page keeps `machine_id`.
+- Settings UI: remove machine-level Jellyfin/Jellyseerr fields.
+- Remove machine app fields from `settings_store.py` + `routers/settings.py`
+  once the UI no longer writes them.
+
+### Frontend half (this PR)
+
+- [x] `api/client.ts`: Jellyfin-backed calls (`fetchCounts`, `fetchLibraries`,
+      `fetchActivity`, `fetchUsers`, Media status/build/stop/force-stop, and
+      `queryMedia`) now send `jellyfin_service_id` instead of `machine_id`.
+- [x] `hooks/useDashboard.ts`, `hooks/useUsers.ts`, `hooks/useMedia.ts`: renamed
+      the selector param to `jellyfinServiceId`.
+- [x] `pages/Media.tsx` + `pages/Applications.tsx`: select a `jellyfin` service
+      instance via `useServiceInstances("jellyfin")` and persist
+      `jellyfin_service_id` in the URL.
+- [x] Dashboard (widget-based) and Users (default-instance) need no selector
+      change.
+- [x] Updated Applications + Media tests for the new hook/param.
+
+### Deferred (explicit follow-up)
+
+- Remove machine-level Jellyfin/Jellyseerr fields from `settings_store.py`,
+  `routers/settings.py`, and the Settings UI. Low urgency now that the runtime
+  reads from services; the machine fields are simply unused for Jellyfin.
+
+### Verification (backend half)
+
+```bash
+cd backend
+.venv/bin/ruff check .                                      # clean
+PYTHONPATH=src .venv/bin/python -m pytest                   # 222 passed
+cd ../frontend
+npm run lint && npm run build && npm run test               # green (unchanged)
+```