feat(services): frontend services runtime and widget rebind

PR 3 of 4 for the runtime service registry change.

- Add service + new-shape widget TypeScript types; widgets carry service_id
  + widget_kind (service-bound) or null (built-in).
- Add services API client + TanStack Query hooks; reconcile the widget API
  client/hooks to the new endpoints (remove sources/types; add builtin kinds).
- Add closed frontend service registry (integrations/registry.ts) mirroring the
  backend, with resolveWidget(widget, services) mapping a widget to its
  component + refresh interval.
- Add ServicePage at /services/:serviceType/:serviceId with config view,
  empty-on-edit secret inputs + 'set' badges, enable toggle, delete, and the
  service's widget-kind list.
- Register /services/:serviceType/:serviceId in App.tsx.
- Reconcile the six widget components to refreshIntervalMs + description props;
  rewrite WidgetConfigDialog around a service -> widget-kind picker.
- Update Dashboard test; add integrations/registry.test.ts.

Verification: frontend lint 0 errors, build success, 70 tests passed; backend
ruff clean, 222 tests passed.

frontend/src/widgets/BackupsWidget.tsx

@@ -5,22 +5,19 @@ 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,19 @@ 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,19 @@ 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,12 @@ 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,12 @@ 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,19 @@
 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);
-}