feat: domain monitoring (merge plan M2, phase 1)

Port of the domain-intelligence pipeline from the old Beszel fork,
adapted to Dash's SQLite + no-PocketBase architecture:

- internal/domain: RDAP via IANA bootstrap (cached), TCP WHOIS :43
  fallback with multi-format parser, DNS (NS/MX/TXT/CNAME/A/AAAA),
  TLS leaf cert details, ip-api.com geolocation, provider detection
  (DNS/email/hosting/CA). HTML scraping, paid APIs, and exec-based
  whois deliberately dropped.
- API: domains CRUD + synchronous refresh + domain_checks snapshot
  history; refresh runs inside the monitor sweep on interval_h.
- UI: /domains + /domains/:id pages, add/edit dialog, domain board
  widget (favicon + expiry countdown), palette + nav entries,
  domainId picker in the widget dialog.
- Test seam: Server.lookup injects the refresh; domain tests run
  hermetic against a stubbed result.

Verified live: github.com resolves MarkMonitor expiry 2028-10,
Route 53 DNS, GitHub Pages hosting, Sectigo cert with 69d left.

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,6 +1,6 @@
 import { useEffect, useMemo, useRef, useState } from "react";
 import { useLocation } from "wouter";
-import { Activity, ArrowRight, Download, LayoutGrid, Moon, Plus, Settings, Sun } from "lucide-react";
+import { Activity, ArrowRight, Download, Globe, LayoutGrid, Moon, Plus, Settings, Sun } from "lucide-react";
 import { useBoard } from "@/board/store";
 import { hostOf, IconImg } from "@/board/primitives";
 import { rendererLabels, rendererList } from "@/renderers";
@@ -44,6 +44,7 @@ export function CommandPalette({
 		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: "nav-domains", group: "Actions", glyph: Globe, label: "Go to Domains", run: () => navigate("/domains") },
 			{ 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 },

apps/frontend/src/components/DomainDialog.tsx

@@ -0,0 +1,121 @@
+import { useEffect, useState } from "react";
+import { api } from "@/api";
+import type { Domain, DomainInput } 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";
+
+// Add/edit a tracked domain. The first WHOIS/DNS/TLS lookup runs on create —
+// expect a few seconds of spinner.
+export function DomainDialog({
+	open,
+	onOpenChange,
+	domain,
+	onSaved,
+}: {
+	open: boolean;
+	onOpenChange: (o: boolean) => void;
+	domain?: Domain | undefined;
+	onSaved: () => void;
+}) {
+	const editing = Boolean(domain);
+	const [name, setName] = useState("");
+	const [intervalH, setIntervalH] = useState("24");
+	const [alertDays, setAlertDays] = useState("30");
+	const [autoRenew, setAutoRenew] = useState(false);
+	const [notes, setNotes] = useState("");
+	const [busy, setBusy] = useState(false);
+	const [err, setErr] = useState("");
+
+	useEffect(() => {
+		if (!open) return;
+		setErr("");
+		setName(domain?.name ?? "");
+		setIntervalH(String(domain?.intervalH ?? 24));
+		setAlertDays(String(domain?.alertDaysBefore ?? 30));
+		setAutoRenew(domain?.autoRenew ?? false);
+		setNotes(domain?.notes ?? "");
+	}, [open, domain]);
+
+	async function submit() {
+		if (!name.trim()) return setErr("Domain is required"), undefined;
+		setBusy(true);
+		const body: DomainInput = {
+			name: name.trim(),
+			intervalH: Math.max(1, parseInt(intervalH) || 24),
+			alertDaysBefore: Math.max(0, parseInt(alertDays) || 30),
+			autoRenew,
+			notes,
+		};
+		try {
+			if (editing && domain) {
+				await api.PATCH("/api/domains/{id}", { params: { path: { id: domain.id! } }, body });
+			} else {
+				const { error } = await api.POST("/api/domains", { body });
+				if (error) throw new Error("create failed");
+			}
+			onSaved();
+			onOpenChange(false);
+		} catch (e) {
+			setErr(e instanceof Error ? e.message : "save failed");
+		} finally {
+			setBusy(false);
+		}
+	}
+
+	return (
+		<Dialog open={open} onOpenChange={onOpenChange}>
+			<DialogContent className="max-w-md">
+				<DialogHeader>
+					<DialogTitle>{editing ? "Edit domain" : "Track a domain"}</DialogTitle>
+					<DialogDescription>
+						WHOIS, DNS, TLS certificate, and host info — refreshed on your interval.
+					</DialogDescription>
+				</DialogHeader>
+
+				<div className="flex flex-col gap-4">
+					<div className="flex flex-col gap-1.5">
+						<Label htmlFor="dom-name">Domain</Label>
+						<Input id="dom-name" value={name} onChange={(e) => setName(e.target.value)}
+							placeholder="example.com" className="font-mono text-[12px]" autoFocus />
+					</div>
+
+					<div className="grid grid-cols-2 gap-3">
+						<div className="flex flex-col gap-1.5">
+							<Label htmlFor="dom-int">Refresh every (hours)</Label>
+							<Input id="dom-int" value={intervalH} onChange={(e) => setIntervalH(e.target.value)} className="font-mono text-[12px]" />
+						</div>
+						<div className="flex flex-col gap-1.5">
+							<Label htmlFor="dom-alert">Alert days before expiry</Label>
+							<Input id="dom-alert" value={alertDays} onChange={(e) => setAlertDays(e.target.value)} className="font-mono text-[12px]" />
+						</div>
+					</div>
+
+					<label className="flex items-center gap-2 text-[12.5px] text-text-dim">
+						<input type="checkbox" checked={autoRenew} onChange={(e) => setAutoRenew(e.target.checked)} />
+						Auto-renew enabled at the registrar
+					</label>
+
+					<div className="flex flex-col gap-1.5">
+						<Label htmlFor="dom-notes">Notes (optional)</Label>
+						<Input id="dom-notes" value={notes} onChange={(e) => setNotes(e.target.value)} />
+					</div>
+
+					{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 ? "Looking up…" : editing ? "Save" : "Track domain"}
+					</Button>
+				</DialogFooter>
+			</DialogContent>
+		</Dialog>
+	);
+}

apps/frontend/src/components/MonitorDialog.tsx

@@ -54,6 +54,8 @@ export function MonitorDialog({
 
 	const set = (k: string) => (e: React.ChangeEvent<HTMLInputElement>) =>
 		setF((s) => ({ ...s, [k]: e.target.value }));
+	// SAFETY: f.type only ever receives values from the TYPES select or a
+	// persisted monitor row, both constrained to MonType.
 	const type = (f.type || "http") as MonType;
 
 	async function submit() {

apps/frontend/src/components/WidgetDialog.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useState } from "react";
 import { useBoard } from "@/board/store";
+import { api } from "@/api";
 import type { Item } from "@/types";
 import { Button } from "@/components/ui/button";
 import {
@@ -32,6 +33,7 @@ export function WidgetDialog({
 	const [sectionId, setSectionId] = useState("");
 	const [values, setValues] = useState<Record<string, string>>({});
 	const [monitors, setMonitors] = useState<{ id?: string; name?: string }[]>([]);
+	const [domains, setDomains] = useState<{ id?: string; name?: string }[]>([]);
 	const [busy, setBusy] = useState(false);
 	const [err, setErr] = useState("");
 
@@ -43,10 +45,8 @@ 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([]));
+		void api.GET("/api/monitors").then(({ data }) => setMonitors(data ?? []));
+		void api.GET("/api/domains").then(({ data }) => setDomains(data ?? []));
 
 		const cfg = item?.config ?? null;
 		setType(cfg && typeof cfg.type === "string" ? cfg.type : "");
@@ -146,14 +146,14 @@ export function WidgetDialog({
 							<Label htmlFor={`wdg-${f.key}`}>
 								{f.label}{f.required ? "" : " (optional)"}
 							</Label>
-							{f.key === "monitorId" ? (
+							{f.key === "monitorId" || f.key === "domainId" ? (
 								<Select
 									value={values[f.key] ?? ""}
 									onValueChange={(v) => setValues((s) => ({ ...s, [f.key]: v }))}
 								>
-									<SelectTrigger><SelectValue placeholder="Pick a monitor…" /></SelectTrigger>
+									<SelectTrigger><SelectValue placeholder="Pick one…" /></SelectTrigger>
 									<SelectContent>
-										{monitors.map((m) => (
+										{(f.key === "monitorId" ? monitors : domains).map((m) => (
 											<SelectItem key={m.id} value={m.id ?? ""}>{m.name}</SelectItem>
 										))}
 									</SelectContent>