@tdhftw/emdash-plugin-umami 0.0.0-stage → 0.1.3

package/package.json

@@ -1,6 +1,76 @@
 {
   "name": "@tdhftw/emdash-plugin-umami",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.3",
+  "description": "Umami analytics inside the EmDash CMS admin: an Analytics page, a dashboard widget and optional tracker injection, for self-hosted Umami",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./admin": "./src/admin/index.tsx"
+  },
+  "files": [
+    "dist",
+    "src/admin",
+    "src/shared",
+    "CHANGELOG.md"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "build": "tsdown",
+    "dev": "tsdown --watch",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "pack:check": "npm pack --dry-run",
+    "prepublishOnly": "npm run typecheck && npm test && npm run build",
+    "prepare": "tsdown"
+  },
+  "peerDependencies": {
+    "@cloudflare/kumo": "^2.0.0",
+    "@emdash-cms/admin": "^1.0.0",
+    "@tanstack/react-query": "^5.0.0",
+    "emdash": "^1.0.0",
+    "react": "^18.0.0 || ^19.0.0",
+    "astro": ">=7.0.0"
+  },
+  "dependencies": {
+    "echarts": "^6.1.0"
+  },
+  "devDependencies": {
+    "@cloudflare/kumo": "2.6.0",
+    "@emdash-cms/admin": "1.0.1",
+    "@tanstack/react-query": "5.90.21",
+    "@types/react": "19.3.0",
+    "astro": "7.3.5",
+    "emdash": "1.0.1",
+    "react": "19.2.4",
+    "react-dom": "19.2.4",
+    "tsdown": "^0.23.0",
+    "typescript": "~6.0.3",
+    "vitest": "^5.0.2"
+  },
+  "keywords": [
+    "emdash",
+    "emdash-plugin",
+    "umami",
+    "analytics"
+  ],
+  "author": "Thord D. Hedengren <tdh@tdh.se>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/tdhftw/emdash-umami.git"
+  },
+  "homepage": "https://github.com/tdhftw/emdash-umami#readme",
+  "bugs": "https://github.com/tdhftw/emdash-umami/issues",
+  "publishConfig": {
+    "access": "public"
+  },
+  "engines": {
+    "node": ">=22"
+  }
+}

package/src/admin/AnalyticsPage.tsx

@@ -0,0 +1,73 @@
+import { Banner, Button, Loader, Tabs } from "@cloudflare/kumo";
+import { useQuery } from "@tanstack/react-query";
+import * as React from "react";
+
+import type { StatusResponse } from "../shared/constants.js";
+import { callRoute } from "./api.js";
+import { OverviewView } from "./OverviewView.js";
+import { SettingsView } from "./SettingsView.js";
+
+type Tab = "overview" | "settings";
+
+function tabFromHash(): Tab | null {
+	if (typeof window === "undefined") return null;
+	return window.location.hash === "#settings" ? "settings" : window.location.hash === "#overview" ? "overview" : null;
+}
+
+export function AnalyticsPage() {
+	const status = useQuery({
+		queryKey: ["plugin-umami", "status"],
+		queryFn: () => callRoute<StatusResponse>("status"),
+	});
+	const [tab, setTab] = React.useState<Tab | null>(tabFromHash);
+
+	// Until Umami is connected, the settings are the useful view.
+	const active: Tab = tab ?? (status.data && !status.data.configured ? "settings" : "overview");
+	const choose = (next: Tab) => {
+		setTab(next);
+		window.history.replaceState(null, "", `#${next}`);
+	};
+
+	return (
+		<section className="space-y-6">
+			<div className="flex flex-wrap items-center justify-between gap-4">
+				<h1 className="text-2xl font-semibold">Analytics</h1>
+				{status.data?.dashboardUrl ? (
+					<a className="text-sm underline" href={status.data.dashboardUrl} target="_blank" rel="noreferrer">
+						Open in Umami
+					</a>
+				) : null}
+			</div>
+			<Tabs
+				variant="underline"
+				value={active}
+				onValueChange={(value) => choose(value as Tab)}
+				tabs={[
+					{ value: "overview", label: "Overview" },
+					{ value: "settings", label: "Settings" },
+				]}
+			/>
+			{active === "settings" ? (
+				<SettingsView />
+			) : status.isLoading ? (
+				<Loader />
+			) : status.error ? (
+				<Banner variant="error" title="Could not load the plugin status" description={(status.error as Error).message} />
+			) : status.data && !status.data.configured ? (
+				<Banner
+					title="Umami is not connected yet"
+					description={
+						<>
+							Finish the setup to see statistics here.{" "}
+							<Button type="button" variant="secondary" size="sm" onClick={() => choose("settings")}>
+								Open settings
+							</Button>
+						</>
+					}
+				/>
+			) : (
+				<OverviewView onOpenSettings={() => choose("settings")} />
+			)}
+		</section>
+	);
+}

package/src/admin/Chart.tsx

@@ -0,0 +1,23 @@
+// Loaded lazily (see OverviewView) so ECharts is only downloaded on the Analytics page.
+// Keep this module's imports limited to ECharts and Kumo's chart: importing a module that the
+// eagerly loaded admin code also uses lets the bundler pull ECharts into that shared chunk.
+// Kumo's TimeseriesChart always stacks bars and uses a time axis with ticks in the browser's zone,
+// so this uses the low-level Chart with options from chartOptions.ts.
+import { Chart as KumoChart, ChartPalette } from "@cloudflare/kumo/components/chart";
+import { BarChart } from "echarts/charts";
+import { AriaComponent, GridComponent, LegendComponent, TooltipComponent } from "echarts/components";
+import * as echarts from "echarts/core";
+import { CanvasRenderer } from "echarts/renderers";
+
+import type { Overview } from "../shared/stats.js";
+import { chartOptions } from "./chartOptions.js";
+
+echarts.use([BarChart, AriaComponent, GridComponent, TooltipComponent, LegendComponent, CanvasRenderer]);
+
+export default function Chart({ overview, dark }: { overview: Overview; dark: boolean }) {
+	const options = chartOptions(overview, {
+		pageviews: ChartPalette.categorical(0, dark),
+		visitors: ChartPalette.categorical(4, dark),
+	});
+	return <KumoChart echarts={echarts} options={options} isDarkMode={dark} height={260} optionUpdateBehavior={{ notMerge: true }} />;
+}

package/src/admin/OverviewView.tsx

@@ -0,0 +1,150 @@
+import { Badge, Banner, Button, Loader, Surface, Tabs } from "@cloudflare/kumo";
+import * as React from "react";
+
+import { METRIC_TYPES, RANGES, type MetricRow, type MetricType, type Overview, type Range } from "../shared/stats.js";
+import { METRIC_TITLES, RANGE_LABELS, change, kpis, metricLabel, relativeTime, type Kpi } from "./format.js";
+import { useActive, useDarkMode, useOverview, useRange } from "./hooks.js";
+
+const Chart = React.lazy(() => import("./Chart.js"));
+
+function Delta({ kpi }: { kpi: Kpi }) {
+	const c = change(kpi.value, kpi.previous);
+	if (c === null || !Number.isFinite(c)) return <span className="text-xs text-kumo-subtle">no earlier data</span>;
+	const rounded = Math.round(c * 100);
+	if (rounded === 0) return <span className="text-xs text-kumo-subtle">no change</span>;
+	const good = kpi.lowerIsBetter ? rounded < 0 : rounded > 0;
+	return (
+		<span className={`text-xs tabular-nums ${good ? "text-kumo-success" : "text-kumo-danger"}`}>
+			{rounded > 0 ? "▲" : "▼"} {Math.abs(rounded)}%
+		</span>
+	);
+}
+
+function Tile({ label, value, children }: { label: string; value: string; children?: React.ReactNode }) {
+	return (
+		<Surface className="rounded-lg p-4">
+			<div className="text-sm text-kumo-subtle">{label}</div>
+			<div className="text-2xl font-semibold tabular-nums">{value}</div>
+			<div>{children}</div>
+		</Surface>
+	);
+}
+
+function ActiveTile() {
+	const active = useActive();
+	return (
+		<Tile label="Active now" value={active.data ? String(active.data.visitors) : active.isError ? "–" : "…"}>
+			<span className="text-xs text-kumo-subtle">last 5 minutes</span>
+		</Tile>
+	);
+}
+
+function TopList({ type, rows }: { type: MetricType; rows: MetricRow[] }) {
+	const max = rows[0]?.value ?? 0;
+	return (
+		<Surface className="rounded-lg p-4">
+			<div className="flex items-center justify-between">
+				<h3 className="font-semibold">{METRIC_TITLES[type]}</h3>
+				<span className="text-xs text-kumo-subtle">{type === "event" ? "Events" : "Visitors"}</span>
+			</div>
+			{rows.length === 0 ? (
+				<p className="text-sm text-kumo-subtle" style={{ marginTop: 12 }}>
+					{type === "event" ? "No custom events in this period." : "Nothing recorded in this period."}
+				</p>
+			) : (
+				<ol style={{ listStyle: "none", margin: "12px 0 0", padding: 0, display: "grid", gap: 4 }}>
+					{rows.map((row) => (
+						<li key={row.label} style={{ position: "relative", padding: "4px 8px", borderRadius: 6, overflow: "hidden" }}>
+							<div
+								aria-hidden
+								style={{
+									position: "absolute",
+									inset: 0,
+									width: `${max > 0 ? (row.value / max) * 100 : 0}%`,
+									background: "var(--color-kumo-tint)",
+								}}
+							/>
+							<div className="flex items-center justify-between gap-3 text-sm" style={{ position: "relative" }}>
+								<span className="truncate" title={row.label}>
+									{metricLabel(type, row.label)}
+								</span>
+								<span className="tabular-nums">{row.value.toLocaleString()}</span>
+							</div>
+						</li>
+					))}
+				</ol>
+			)}
+		</Surface>
+	);
+}
+
+function Body({ overview }: { overview: Overview }) {
+	const dark = useDarkMode();
+	return (
+		<>
+			<div style={{ display: "grid", gap: 12, gridTemplateColumns: "repeat(auto-fit, minmax(150px, 1fr))" }}>
+				{kpis(overview.totals, overview.previous).map((kpi) => (
+					<Tile key={kpi.key} label={kpi.label} value={kpi.format(kpi.value)}>
+						<Delta kpi={kpi} />
+					</Tile>
+				))}
+				<ActiveTile />
+			</div>
+			<Surface className="rounded-lg p-4">
+				<React.Suspense fallback={<div style={{ height: 260 }} />}>
+					<Chart overview={overview} dark={dark} />
+				</React.Suspense>
+			</Surface>
+			<div style={{ display: "grid", gap: 12, gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))" }}>
+				{METRIC_TYPES.map((type) => (
+					<TopList key={type} type={type} rows={overview.top[type]} />
+				))}
+			</div>
+		</>
+	);
+}
+
+export function OverviewView({ onOpenSettings }: { onOpenSettings: () => void }) {
+	const [range, setRange] = useRange();
+	const overview = useOverview(range);
+	const error = overview.error as (Error & { code?: string }) | null;
+
+	return (
+		<div className="space-y-4">
+			<div className="flex flex-wrap items-center justify-between gap-3">
+				<Tabs
+					variant="segmented"
+					size="sm"
+					value={range}
+					onValueChange={(value) => setRange(value as Range)}
+					tabs={RANGES.map((r) => ({ value: r, label: RANGE_LABELS[r] }))}
+				/>
+				<div className="flex items-center gap-3 text-xs text-kumo-subtle">
+					{overview.data?.stale ? <Badge variant="orange">Umami unreachable, showing saved data</Badge> : null}
+					{overview.data ? <span>Updated {relativeTime(overview.data.fetchedAt)}</span> : null}
+					{overview.isFetching ? <Loader size="sm" /> : null}
+				</div>
+			</div>
+			{error && !overview.data ? (
+				<Banner
+					variant="error"
+					title="Could not load statistics"
+					description={
+						<>
+							{error.message}{" "}
+							{error.code === "not-configured" || error.code === "unauthorized" || error.code === "not-found" ? (
+								<Button type="button" size="sm" variant="secondary" onClick={onOpenSettings}>
+									Open settings
+								</Button>
+							) : null}
+						</>
+					}
+				/>
+			) : overview.data ? (
+				<Body overview={overview.data} />
+			) : (
+				<Loader />
+			)}
+		</div>
+	);
+}

package/src/admin/SettingsView.tsx

@@ -0,0 +1,333 @@
+import { Banner, Button, Input, Loader, Radio, Select, SensitiveInput, Surface, Switch } from "@cloudflare/kumo";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import * as React from "react";
+
+import type { ConnectionTestResult, SaveSettingsInput, SettingsView as Settings } from "../shared/api-types.js";
+import { CLOUD_ENABLED, type AuthMode, type CloudRegion, type Hosting } from "../shared/constants.js";
+import { defaultScriptUrl } from "../shared/tracker.js";
+import { callRoute } from "./api.js";
+
+interface Draft {
+	hosting: Hosting;
+	baseUrl: string;
+	region: CloudRegion;
+	authMode: AuthMode;
+	apiKey: string;
+	username: string;
+	password: string;
+	websiteId: string;
+	injectScript: boolean;
+	clientRouter: boolean;
+	scriptUrl: string;
+}
+
+function draftFrom(s: Settings): Draft {
+	const v = s.values;
+	return {
+		hosting: v.hosting,
+		baseUrl: v.baseUrl ?? "",
+		region: v.region,
+		authMode: v.authMode,
+		apiKey: "",
+		username: v.username ?? "",
+		password: "",
+		websiteId: v.websiteId ?? "",
+		injectScript: v.injectScript,
+		clientRouter: v.clientRouter,
+		scriptUrl: v.scriptUrl ?? "",
+	};
+}
+
+/** Only send what the chosen setup uses; empty secret fields mean "keep the saved one". */
+function toInput(d: Draft): SaveSettingsInput {
+	const input: SaveSettingsInput = {
+		hosting: d.hosting,
+		authMode: d.hosting === "cloud" ? "apiKey" : d.authMode,
+		websiteId: d.websiteId || null,
+		injectScript: d.injectScript,
+		clientRouter: d.clientRouter,
+		scriptUrl: d.scriptUrl || null,
+	};
+	if (d.hosting === "self-hosted") input.baseUrl = d.baseUrl || null;
+	else input.region = d.region;
+	if (d.apiKey) input.apiKey = d.apiKey;
+	if (input.authMode === "password") {
+		input.username = d.username || null;
+		if (d.password) input.password = d.password;
+	}
+	return input;
+}
+
+function Section({ title, description, children }: { title: string; description?: React.ReactNode; children: React.ReactNode }) {
+	return (
+		<Surface className="rounded-lg p-5">
+			<div className="space-y-4">
+				<div className="space-y-1">
+					<h2 className="text-lg font-semibold">{title}</h2>
+					{description ? <p className="text-sm text-kumo-subtle">{description}</p> : null}
+				</div>
+				{children}
+			</div>
+		</Surface>
+	);
+}
+
+function urlError(value: string): string | undefined {
+	if (!value) return undefined;
+	try {
+		const url = new URL(value);
+		return url.protocol === "https:" || url.protocol === "http:" ? undefined : "Use an address starting with https://";
+	} catch {
+		return "Use a full address, for example https://stats.example.com";
+	}
+}
+
+function trackerUrl(d: Draft): string | null {
+	return defaultScriptUrl(d.hosting, d.baseUrl || null, d.scriptUrl || null);
+}
+
+export function SettingsView({ onSaved }: { onSaved?: () => void }) {
+	const queryClient = useQueryClient();
+	const settings = useQuery({ queryKey: ["plugin-umami", "settings"], queryFn: () => callRoute<Settings>("settings") });
+	const [draft, setDraft] = React.useState<Draft | null>(null);
+	const [showCustomScript, setShowCustomScript] = React.useState(false);
+
+	React.useEffect(() => {
+		if (settings.data && !draft) {
+			setDraft(draftFrom(settings.data));
+			setShowCustomScript(Boolean(settings.data.values.scriptUrl));
+		}
+	}, [settings.data, draft]);
+
+	const hasCredentials = settings.data
+		? settings.data.values.authMode === "apiKey"
+			? settings.data.secretsSet.apiKey
+			: settings.data.secretsSet.password && Boolean(settings.data.values.username)
+		: false;
+
+	// Check the saved connection on load so the website list is ready.
+	const test = useQuery({
+		queryKey: ["plugin-umami", "connection"],
+		queryFn: () => callRoute<ConnectionTestResult>("connection/test", {}),
+		enabled: hasCredentials,
+		staleTime: 5 * 60_000,
+	});
+
+	const save = useMutation({
+		mutationFn: async (d: Draft) => {
+			const saved = await callRoute<Settings>("settings/save", toInput(d));
+			const result = await callRoute<ConnectionTestResult>("connection/test", {});
+			return { saved, result };
+		},
+		onSuccess: ({ saved, result }) => {
+			queryClient.setQueryData(["plugin-umami", "settings"], saved);
+			queryClient.setQueryData(["plugin-umami", "connection"], result);
+			void queryClient.invalidateQueries({ queryKey: ["plugin-umami", "status"] });
+			setDraft(draftFrom(saved));
+			onSaved?.();
+		},
+	});
+
+	if (settings.isLoading || !draft) {
+		return settings.error ? (
+			<Banner variant="error" title="Could not load the settings" description={String((settings.error as Error).message)} />
+		) : (
+			<Loader />
+		);
+	}
+
+	const set = <K extends keyof Draft>(key: K, value: Draft[K]) => setDraft((d) => (d ? { ...d, [key]: value } : d));
+	const secrets = settings.data?.secretsSet ?? { apiKey: false, password: false };
+	const connection = test.data;
+	const websites = connection?.ok ? connection.websites : [];
+	const selectedKnown = websites.some((w) => w.id === draft.websiteId);
+	const tracker = trackerUrl(draft);
+	const authMode: AuthMode = draft.hosting === "cloud" ? "apiKey" : draft.authMode;
+
+	return (
+		<form
+			className="max-w-2xl space-y-6"
+			onSubmit={(event) => {
+				event.preventDefault();
+				if (draft.hosting === "self-hosted" && urlError(draft.baseUrl)) return;
+				if (draft.scriptUrl && urlError(draft.scriptUrl)) return;
+				save.mutate(draft);
+			}}
+		>
+			<Section title="Umami server" description="Where your Umami statistics live.">
+				<Radio.Group
+					legend="Hosting"
+					orientation="horizontal"
+					value={draft.hosting}
+					onValueChange={(value) => set("hosting", value as Hosting)}
+				>
+					<Radio.Item label="Self-hosted Umami" value="self-hosted" />
+					<Radio.Item
+						label={CLOUD_ENABLED ? "Umami Cloud" : "Umami Cloud (coming in 0.2.0)"}
+						value="cloud"
+						disabled={!CLOUD_ENABLED}
+					/>
+				</Radio.Group>
+				{draft.hosting === "self-hosted" ? (
+					<Input
+						label="Umami URL"
+						description="The address you open Umami at, for example https://stats.example.com."
+						type="url"
+						placeholder="https://stats.example.com"
+						value={draft.baseUrl}
+						error={urlError(draft.baseUrl)}
+						onChange={(event) => set("baseUrl", event.target.value.trim())}
+					/>
+				) : (
+					<Select
+						label="Region"
+						description="Leave on account default unless Umami support told you otherwise."
+						value={draft.region}
+						onValueChange={(value) => set("region", value as CloudRegion)}
+						items={{ default: "Account default", us: "United States", eu: "European Union" }}
+					/>
+				)}
+			</Section>
+
+			<Section
+				title="Sign in"
+				description={
+					authMode === "apiKey"
+						? "Create a key in Umami under Settings → API keys. It is stored encrypted and never shown again."
+						: "Use this only for Umami versions without API keys. The password is stored encrypted."
+				}
+			>
+				{draft.hosting === "self-hosted" ? (
+					<Radio.Group
+						legend="Method"
+						orientation="horizontal"
+						value={draft.authMode}
+						onValueChange={(value) => set("authMode", value as AuthMode)}
+					>
+						<Radio.Item label="API key" value="apiKey" />
+						<Radio.Item label="Username and password" value="password" />
+					</Radio.Group>
+				) : null}
+				{authMode === "apiKey" ? (
+					<SensitiveInput
+						label="API key"
+						description={secrets.apiKey ? "A key is saved. Paste a new one only to replace it." : undefined}
+						placeholder={secrets.apiKey ? "Saved key, leave empty to keep" : "umami_…"}
+						value={draft.apiKey}
+						onValueChange={(value) => set("apiKey", value)}
+					/>
+				) : (
+					<>
+						<Input label="Username" value={draft.username} onChange={(event) => set("username", event.target.value)} />
+						<SensitiveInput
+							label="Password"
+							description={secrets.password ? "A password is saved. Type a new one only to replace it." : undefined}
+							placeholder={secrets.password ? "Saved password, leave empty to keep" : ""}
+							value={draft.password}
+							onValueChange={(value) => set("password", value)}
+						/>
+					</>
+				)}
+			</Section>
+
+			<Section title="Website" description="Which Umami website belongs to this site.">
+				{test.isFetching ? (
+					<Loader />
+				) : websites.length > 0 ? (
+					<Select
+						label="Website"
+						placeholder="Choose a website"
+						value={draft.websiteId || null}
+						onValueChange={(value) => set("websiteId", typeof value === "string" ? value : "")}
+						items={Object.fromEntries([
+							...websites.map((w) => [w.id, w.domain ? `${w.name} (${w.domain})` : w.name]),
+							...(draft.websiteId && !selectedKnown ? [[draft.websiteId, `${draft.websiteId} (not found in Umami)`]] : []),
+						])}
+					/>
+				) : hasCredentials && connection?.ok ? (
+					<Input
+						label="Website ID"
+						description="This Umami account lists no websites, so enter the ID by hand. In Umami, open Settings → Websites → Edit and copy the Website ID."
+						placeholder="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
+						value={draft.websiteId}
+						onChange={(event) => set("websiteId", event.target.value.trim())}
+					/>
+				) : (
+					<p className="text-sm text-kumo-subtle">
+						{hasCredentials
+							? "No websites to choose from until the connection works."
+							: "Save your server and sign-in details first. The websites you can see in Umami will then appear here."}
+					</p>
+				)}
+			</Section>
+
+			<Section title="Tracking" description="Optional. Let this plugin add the Umami tracker to your public pages.">
+				<Switch
+					label="Add the Umami tracker to public pages"
+					checked={draft.injectScript}
+					onCheckedChange={(checked) => set("injectScript", checked)}
+				/>
+				<p className="text-sm text-kumo-subtle">
+					If your site caches pages, cached copies change over when their cache expires, not the moment you save.
+				</p>
+				{draft.injectScript ? (
+					<>
+						<Banner
+							variant="alert"
+							title="Remove any tracker already in your theme"
+							description="If the theme also includes the Umami script, every visit is counted twice. The theme must render EmDashHead."
+						/>
+						<Switch
+							label="The site uses Astro's <ClientRouter /> (view transitions)"
+							checked={draft.clientRouter}
+							onCheckedChange={(checked) => set("clientRouter", checked)}
+						/>
+						<p className="text-sm text-kumo-subtle">
+							Turn this on if your layout includes <code>&lt;ClientRouter /&gt;</code>. Pages then change without a full
+							load, and this counts each one once, including back and forward. Needs Umami 3.2 or later.
+						</p>
+					</>
+				) : null}
+				<p className="text-sm text-kumo-subtle">
+					Tracker script: <code>{tracker ?? "set the Umami URL first"}</code>{" "}
+					<Button type="button" variant="ghost" size="sm" onClick={() => setShowCustomScript((v) => !v)}>
+						{showCustomScript ? "Use the default" : "Use a custom script URL"}
+					</Button>
+				</p>
+				{showCustomScript ? (
+					<Input
+						label="Custom tracker script URL"
+						description="For a renamed tracker (recommended against ad blockers) or a proxy."
+						type="url"
+						value={draft.scriptUrl}
+						error={urlError(draft.scriptUrl)}
+						onChange={(event) => set("scriptUrl", event.target.value.trim())}
+					/>
+				) : null}
+			</Section>
+
+			<div className="space-y-4">
+				{save.error ? (
+					<Banner variant="error" title="Could not save" description={(save.error as Error).message} />
+				) : null}
+				{connection && !test.isFetching ? (
+					connection.ok ? (
+						<Banner
+							title="Connected to Umami"
+							description={
+								connection.website
+									? `Showing statistics for ${connection.website.name}.`
+									: `${connection.websites.length} website${connection.websites.length === 1 ? "" : "s"} available. Choose one above and save.`
+							}
+						/>
+					) : (
+						<Banner variant="error" title="Could not connect to Umami" description={connection.message} />
+					)
+				) : null}
+				<Button type="submit" variant="primary" loading={save.isPending}>
+					Save and test connection
+				</Button>
+			</div>
+		</form>
+	);
+}