feat: external importers + uptime monitors (merge plan M1)

Two tracks from the Beszel/Domain-Locker merge plan in ROADMAP.md:

- Importers: POST /api/import/external sniffs Homepage services.yml,
  Homarr JSON, and Dashy conf.yml into sections/items; SettingsDialog
  import now accepts all four formats.
- Monitors (M1): monitors + heartbeats schema, pure checkers for
  http/tcp/ping/dns/keyword/json-query/push, scheduler on app ctx,
  CRUD + check-now + push ingest API, /monitors + /monitors/:id pages
  (wouter), monitor board widget, ServiceDialog monitor opt-in.

Authored By: TDvorak <[email protected]>

Generated with Devin (https://devin.ai)

Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>

apps/frontend/src/components/CommandPalette.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useMemo, useRef, useState } from "react";
-import { ArrowRight, Download, LayoutGrid, Moon, Plus, Settings, Sun } from "lucide-react";
+import { useLocation } from "wouter";
+import { Activity, ArrowRight, Download, LayoutGrid, Moon, Plus, Settings, Sun } from "lucide-react";
 import { useBoard } from "@/board/store";
 import { hostOf, IconImg } from "@/board/primitives";
 import { rendererLabels, rendererList } from "@/renderers";
@@ -34,12 +35,15 @@ export function CommandPalette({
 	onSettings(): void;
 }) {
 	const board = useBoard();
+	const [, navigate] = useLocation();
 	const [query, setQuery] = useState("");
 	const [active, setActive] = useState(0);
 	const listRef = useRef<HTMLDivElement>(null);
 
 	const commands = useMemo<Command[]>(() => {
 		const cmds: Command[] = [
+			{ id: "nav-board", group: "Actions", glyph: LayoutGrid, label: "Go to Board", run: () => navigate("/") },
+			{ id: "nav-monitors", group: "Actions", glyph: Activity, label: "Go to Monitors", run: () => navigate("/monitors") },
 			{ id: "add-service", group: "Actions", glyph: Plus, label: "Add service", hint: "new", run: onAddService },
 			{ id: "add-widget", group: "Actions", glyph: Plus, label: "Add widget", hint: "new", run: onAddWidget },
 			{ id: "settings", group: "Actions", glyph: Settings, label: "Open settings", run: onSettings },
@@ -73,7 +77,7 @@ export function CommandPalette({
 			}
 		}
 		return cmds;
-	}, [board.sections, board.theme, board.renderer, board.setSetting, onAddService, onAddWidget, onSettings]);
+	}, [board.sections, board.theme, board.renderer, board.setSetting, onAddService, onAddWidget, onSettings, navigate]);
 
 	const q = query.trim().toLowerCase();
 	const filtered = q

apps/frontend/src/components/MonitorDialog.tsx

@@ -0,0 +1,242 @@
+import { useEffect, useState } from "react";
+import { api } from "@/api";
+import type { Monitor, MonitorInput } from "@/types";
+import { Button } from "@/components/ui/button";
+import {
+	Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+
+const TYPES = ["http", "tcp", "ping", "dns", "keyword", "json", "push"] as const;
+type MonType = (typeof TYPES)[number];
+
+// One dialog for add + edit. The type picker drives which fields matter —
+// same pattern as ServiceDialog.
+export function MonitorDialog({
+	open,
+	onOpenChange,
+	monitor,
+	onSaved,
+}: {
+	open: boolean;
+	onOpenChange: (o: boolean) => void;
+	monitor?: Monitor | undefined;
+	onSaved: () => void;
+}) {
+	const editing = Boolean(monitor);
+	const [f, setF] = useState<Record<string, string>>({});
+	const [busy, setBusy] = useState(false);
+	const [err, setErr] = useState("");
+
+	useEffect(() => {
+		if (!open) return;
+		setErr("");
+		setF({
+			name: monitor?.name ?? "",
+			type: monitor?.type ?? "http",
+			url: monitor?.url ?? "",
+			hostname: monitor?.hostname ?? "",
+			port: monitor?.port ? String(monitor.port) : "",
+			method: monitor?.method ?? "GET",
+			keyword: monitor?.keyword ?? "",
+			keywordInvert: monitor?.keywordInvert ? "1" : "",
+			jsonQuery: monitor?.jsonQuery ?? "",
+			expected: monitor?.expected ?? "",
+			dnsType: monitor?.dnsType ?? "A",
+			intervalS: String(monitor?.intervalS ?? 60),
+			timeoutS: String(monitor?.timeoutS ?? 10),
+			retries: String(monitor?.retries ?? 0),
+			notes: monitor?.notes ?? "",
+		});
+	}, [open, monitor]);
+
+	const set = (k: string) => (e: React.ChangeEvent<HTMLInputElement>) =>
+		setF((s) => ({ ...s, [k]: e.target.value }));
+	const type = (f.type || "http") as MonType;
+
+	async function submit() {
+		if (!f.name?.trim()) return setErr("Name is required"), undefined;
+		if (type !== "push" && type !== "tcp" && type !== "ping" && type !== "dns" && !f.url?.trim())
+			return setErr("URL is required"), undefined;
+		if ((type === "tcp" || type === "ping" || type === "dns") && !f.hostname?.trim() && !f.url?.trim())
+			return setErr("Hostname is required"), undefined;
+		setBusy(true);
+		const body: MonitorInput = {
+			name: f.name.trim(),
+			type,
+			url: f.url?.trim() ?? "",
+			hostname: f.hostname?.trim() ?? "",
+			port: parseInt(f.port ?? "0") || 0,
+			method: f.method || "GET",
+			keyword: f.keyword ?? "",
+			keywordInvert: f.keywordInvert === "1",
+			jsonQuery: f.jsonQuery ?? "",
+			expected: f.expected ?? "",
+			dnsType: f.dnsType || "A",
+			intervalS: Math.max(10, parseInt(f.intervalS ?? "60") || 60),
+			timeoutS: Math.max(1, parseInt(f.timeoutS ?? "10") || 10),
+			retries: Math.max(0, parseInt(f.retries ?? "0") || 0),
+			notes: f.notes ?? "",
+		};
+		try {
+			if (editing && monitor) {
+				await api.PATCH("/api/monitors/{id}", { params: { path: { id: monitor.id! } }, body });
+			} else {
+				await api.POST("/api/monitors", { body });
+			}
+			onSaved();
+			onOpenChange(false);
+		} catch {
+			setErr("save failed");
+		} finally {
+			setBusy(false);
+		}
+	}
+
+	return (
+		<Dialog open={open} onOpenChange={onOpenChange}>
+			<DialogContent className="max-w-md">
+				<DialogHeader>
+					<DialogTitle>{editing ? "Edit monitor" : "New monitor"}</DialogTitle>
+					<DialogDescription>Uptime check on a schedule.</DialogDescription>
+				</DialogHeader>
+
+				<div className="flex max-h-[60vh] flex-col gap-4 overflow-y-auto pr-1">
+					<div className="grid grid-cols-[1fr_130px] gap-3">
+						<div className="flex flex-col gap-1.5">
+							<Label htmlFor="mon-name">Name</Label>
+							<Input id="mon-name" value={f.name ?? ""} onChange={set("name")} placeholder="Plex" autoFocus />
+						</div>
+						<div className="flex flex-col gap-1.5">
+							<Label>Type</Label>
+							<Select value={type} onValueChange={(v) => setF((s) => ({ ...s, type: v }))}>
+								<SelectTrigger><SelectValue /></SelectTrigger>
+								<SelectContent>
+									{TYPES.map((t) => <SelectItem key={t} value={t}>{t}</SelectItem>)}
+								</SelectContent>
+							</Select>
+						</div>
+					</div>
+
+					{(type === "http" || type === "keyword" || type === "json") && (
+						<>
+							<div className="grid grid-cols-[1fr_110px] gap-3">
+								<div className="flex flex-col gap-1.5">
+									<Label htmlFor="mon-url">URL</Label>
+									<Input id="mon-url" value={f.url ?? ""} onChange={set("url")} placeholder="https://plex.local" className="font-mono text-[12px]" />
+								</div>
+								<div className="flex flex-col gap-1.5">
+									<Label>Method</Label>
+									<Select value={f.method || "GET"} onValueChange={(v) => setF((s) => ({ ...s, method: v }))}>
+										<SelectTrigger><SelectValue /></SelectTrigger>
+										<SelectContent>
+											{["GET", "HEAD", "POST"].map((m) => <SelectItem key={m} value={m}>{m}</SelectItem>)}
+										</SelectContent>
+									</Select>
+								</div>
+							</div>
+							{type === "keyword" && (
+								<div className="flex flex-col gap-1.5">
+									<Label htmlFor="mon-kw">Keyword</Label>
+									<Input id="mon-kw" value={f.keyword ?? ""} onChange={set("keyword")} placeholder="text that must appear" className="font-mono text-[12px]" />
+									<label className="flex items-center gap-2 text-[12px] text-text-dim">
+										<input type="checkbox" checked={f.keywordInvert === "1"}
+											onChange={(e) => setF((s) => ({ ...s, keywordInvert: e.target.checked ? "1" : "" }))} />
+										Invert (down when found)
+									</label>
+								</div>
+							)}
+							{type === "json" && (
+								<div className="grid grid-cols-2 gap-3">
+									<div className="flex flex-col gap-1.5">
+										<Label htmlFor="mon-jq">JSON path</Label>
+										<Input id="mon-jq" value={f.jsonQuery ?? ""} onChange={set("jsonQuery")} placeholder="data.status" className="font-mono text-[12px]" />
+									</div>
+									<div className="flex flex-col gap-1.5">
+										<Label htmlFor="mon-exp">Expected</Label>
+										<Input id="mon-exp" value={f.expected ?? ""} onChange={set("expected")} placeholder="ok" className="font-mono text-[12px]" />
+									</div>
+								</div>
+							)}
+						</>
+					)}
+
+					{(type === "tcp" || type === "ping" || type === "dns") && (
+						<div className="grid grid-cols-[1fr_110px] gap-3">
+							<div className="flex flex-col gap-1.5">
+								<Label htmlFor="mon-host">Hostname</Label>
+								<Input id="mon-host" value={f.hostname ?? ""} onChange={set("hostname")} placeholder="nas.local" className="font-mono text-[12px]" />
+							</div>
+							{type === "tcp" ? (
+								<div className="flex flex-col gap-1.5">
+									<Label htmlFor="mon-port">Port</Label>
+									<Input id="mon-port" value={f.port ?? ""} onChange={set("port")} placeholder="443" className="font-mono text-[12px]" />
+								</div>
+							) : type === "dns" ? (
+								<div className="flex flex-col gap-1.5">
+									<Label>Record</Label>
+									<Select value={f.dnsType || "A"} onValueChange={(v) => setF((s) => ({ ...s, dnsType: v }))}>
+										<SelectTrigger><SelectValue /></SelectTrigger>
+										<SelectContent>
+											{["A", "AAAA", "CNAME", "MX", "NS", "TXT"].map((t) => <SelectItem key={t} value={t}>{t}</SelectItem>)}
+										</SelectContent>
+									</Select>
+								</div>
+							) : <div />}
+						</div>
+					)}
+					{type === "dns" && (
+						<div className="flex flex-col gap-1.5">
+							<Label htmlFor="mon-dnsexp">Expected record contains (optional)</Label>
+							<Input id="mon-dnsexp" value={f.expected ?? ""} onChange={set("expected")} className="font-mono text-[12px]" />
+						</div>
+					)}
+
+					{type === "push" && (
+						<p className="rounded-[8px] border border-border bg-surface px-3 py-2 text-[12px] text-text-dim">
+							After saving, your jobs call the shown push URL on a schedule.
+							If it goes quiet for 2× the interval, the monitor flips down.
+						</p>
+					)}
+
+					<div className="grid grid-cols-3 gap-3">
+						<div className="flex flex-col gap-1.5">
+							<Label htmlFor="mon-int">Interval (s)</Label>
+							<Input id="mon-int" value={f.intervalS ?? "60"} onChange={set("intervalS")} className="font-mono text-[12px]" />
+						</div>
+						<div className="flex flex-col gap-1.5">
+							<Label htmlFor="mon-to">Timeout (s)</Label>
+							<Input id="mon-to" value={f.timeoutS ?? "10"} onChange={set("timeoutS")} className="font-mono text-[12px]" />
+						</div>
+						<div className="flex flex-col gap-1.5">
+							<Label htmlFor="mon-re">Retries</Label>
+							<Input id="mon-re" value={f.retries ?? "0"} onChange={set("retries")} className="font-mono text-[12px]" />
+						</div>
+					</div>
+
+					{monitor?.pushToken ? (
+						<div className="flex flex-col gap-1.5">
+							<Label>Push URL</Label>
+							<code className="rounded-[8px] border border-border bg-surface px-3 py-2 font-mono text-[11px] text-text-dim">
+								{location.origin}/api/push/{monitor.pushToken}
+							</code>
+						</div>
+					) : null}
+
+					{err ? <p className="text-[12px] text-destructive">{err}</p> : null}
+				</div>
+
+				<DialogFooter className="items-center">
+					<Button type="button" variant="outline" onClick={() => onOpenChange(false)} disabled={busy}>
+						Cancel
+					</Button>
+					<Button type="button" onClick={() => void submit()} disabled={busy}>
+						{busy ? "Saving…" : editing ? "Save" : "Add monitor"}
+					</Button>
+				</DialogFooter>
+			</DialogContent>
+		</Dialog>
+	);
+}

apps/frontend/src/components/ServiceDialog.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useRef, useState } from "react";
 import { Plus, Trash2, Upload, X } from "lucide-react";
 import { useBoard } from "@/board/store";
+import { api } from "@/api";
 import type { Item, UrlInput } from "@/types";
 import { Button } from "@/components/ui/button";
 import {
@@ -33,6 +34,7 @@ export function ServiceDialog({
 	const [icon, setIcon] = useState("");
 	const [urls, setUrls] = useState<UrlInput[]>([{ url: "", label: "local" }]);
 	const [sectionId, setSectionId] = useState("");
+	const [alsoMonitor, setAlsoMonitor] = useState(false);
 	const [busy, setBusy] = useState(false);
 	const [err, setErr] = useState("");
 	const fileRef = useRef<HTMLInputElement>(null);
@@ -48,6 +50,7 @@ export function ServiceDialog({
 				: [{ url: "", label: "local" }],
 		);
 		setSectionId(item?.sectionId ?? board.sections[0]?.id ?? "");
+		setAlsoMonitor(false);
 	}, [open, item, board.sections]);
 
 	const setUrl = (i: number, patch: Partial<UrlInput>) =>
@@ -81,6 +84,12 @@ export function ServiceDialog({
 					urls: cleanUrls,
 				});
 				if (created && file) await board.uploadIcon(created.id, file);
+				if (alsoMonitor && cleanUrls[0]) {
+					// Uptime check on the primary URL — appears under /monitors.
+					await api.POST("/api/monitors", {
+						body: { name: name.trim(), type: "http", url: cleanUrls[0].url },
+					});
+				}
 			}
 			onOpenChange(false);
 		} catch (e) {
@@ -193,6 +202,17 @@ export function ServiceDialog({
 						<p className="text-[11px] text-text-faint">URL or uploaded file; blank shows a letter tile.</p>
 					</div>
 
+					{!editing && (
+						<label className="flex items-center gap-2 text-[12.5px] text-text-dim">
+							<input
+								type="checkbox"
+								checked={alsoMonitor}
+								onChange={(e) => setAlsoMonitor(e.target.checked)}
+							/>
+							Also create an uptime monitor for the first URL
+						</label>
+					)}
+
 					{err ? <p className="text-[12px] text-destructive">{err}</p> : null}
 				</div>
 

apps/frontend/src/components/SettingsDialog.tsx

@@ -28,11 +28,22 @@ export function SettingsDialog({ open, onOpenChange }: { open: boolean; onOpenCh
 
 	async function importJson(file: File) {
 		setMsg("");
-		const res = await fetch("/api/import", { method: "POST", body: file });
+		// Dash exports are JSON with {version, sections}; anything else
+		// (Homepage/Homarr/Dashy) goes to the external importer for sniffing.
+		let target = "/api/import/external";
+		try {
+			const j: unknown = JSON.parse(await file.text());
+			if (j !== null && typeof j === "object" && "version" in j && "sections" in j) {
+				target = "/api/import";
+			}
+		} catch { /* not JSON — external importer handles YAML */ }
+		const res = await fetch(target, { method: "POST", body: file });
 		if (res.ok) {
 			location.reload(); // import replaces state; a reload re-syncs everything
 		} else {
-			setMsg("Import failed — not a Dash export?");
+			// SAFETY: error responses always carry {error: string} per openapi.yaml Error schema.
+			const body = (await res.json().catch(() => null)) as { error?: string } | null;
+			setMsg(body?.error ?? "Import failed");
 		}
 	}
 
@@ -90,7 +101,7 @@ export function SettingsDialog({ open, onOpenChange }: { open: boolean; onOpenCh
 							<Upload size={12} /> Import
 						</Button>
 						<input
-							ref={fileRef} type="file" accept="application/json" className="hidden"
+							ref={fileRef} type="file" accept=".json,.yml,.yaml" className="hidden"
 							onChange={(e) => {
 								const f = e.target.files?.[0];
 								if (f) void importJson(f);
@@ -98,6 +109,7 @@ export function SettingsDialog({ open, onOpenChange }: { open: boolean; onOpenCh
 							}}
 						/>
 					</div>
+					<p className="text-[11px] text-text-faint">Import accepts Dash exports plus Homepage, Homarr, and Dashy configs.</p>
 					{msg ? <p className="text-[12px] text-destructive">{msg}</p> : null}
 				</div>
 			</DialogContent>

apps/frontend/src/components/WidgetDialog.tsx

@@ -31,6 +31,7 @@ export function WidgetDialog({
 	const [name, setName] = useState("");
 	const [sectionId, setSectionId] = useState("");
 	const [values, setValues] = useState<Record<string, string>>({});
+	const [monitors, setMonitors] = useState<{ id?: string; name?: string }[]>([]);
 	const [busy, setBusy] = useState(false);
 	const [err, setErr] = useState("");
 
@@ -42,6 +43,10 @@ export function WidgetDialog({
 			.then((r) => r.json() as Promise<WidgetType[]>)
 			.then(setTypes)
 			.catch(() => setTypes([]));
+		fetch("/api/monitors")
+			.then((r) => r.json() as Promise<{ id?: string; name?: string }[]>)
+			.then(setMonitors)
+			.catch(() => setMonitors([]));
 
 		const cfg = item?.config ?? null;
 		setType(cfg && typeof cfg.type === "string" ? cfg.type : "");
@@ -141,14 +146,28 @@ export function WidgetDialog({
 							<Label htmlFor={`wdg-${f.key}`}>
 								{f.label}{f.required ? "" : " (optional)"}
 							</Label>
-							<Input
-								id={`wdg-${f.key}`}
-								type={f.secret ? "password" : "text"}
-								value={values[f.key] ?? ""}
-								placeholder={f.placeholder}
-								onChange={(e) => setValues((v) => ({ ...v, [f.key]: e.target.value }))}
-								className="font-mono text-[12px]"
-							/>
+							{f.key === "monitorId" ? (
+								<Select
+									value={values[f.key] ?? ""}
+									onValueChange={(v) => setValues((s) => ({ ...s, [f.key]: v }))}
+								>
+									<SelectTrigger><SelectValue placeholder="Pick a monitor…" /></SelectTrigger>
+									<SelectContent>
+										{monitors.map((m) => (
+											<SelectItem key={m.id} value={m.id ?? ""}>{m.name}</SelectItem>
+										))}
+									</SelectContent>
+								</Select>
+							) : (
+								<Input
+									id={`wdg-${f.key}`}
+									type={f.secret ? "password" : "text"}
+									value={values[f.key] ?? ""}
+									placeholder={f.placeholder}
+									onChange={(e) => setValues((v) => ({ ...v, [f.key]: e.target.value }))}
+									className="font-mono text-[12px]"
+								/>
+							)}
 						</div>
 					))}