rename /src to /internal (sorry i'll fix the prs)

internal/site/src/components/add-system.tsx

@@ -0,0 +1,302 @@
+import { Trans } from "@lingui/react/macro"
+import { t } from "@lingui/core/macro"
+import { Button } from "@/components/ui/button"
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "@/components/ui/dialog"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { $publicKey } from "@/lib/stores"
+import { cn, generateToken, tokenMap, useBrowserStorage } from "@/lib/utils"
+import { pb, isReadOnlyUser } from "@/lib/api"
+import { useStore } from "@nanostores/react"
+import { ChevronDownIcon, ExternalLinkIcon, PlusIcon } from "lucide-react"
+import { memo, useEffect, useRef, useState } from "react"
+import { $router, basePath, Link, navigate } from "./router"
+import { SystemRecord } from "@/types"
+import { SystemStatus } from "@/lib/enums"
+import { AppleIcon, DockerIcon, TuxIcon, WindowsIcon } from "./ui/icons"
+import { InputCopy } from "./ui/input-copy"
+import { getPagePath } from "@nanostores/router"
+import {
+	copyDockerCompose,
+	copyDockerRun,
+	copyLinuxCommand,
+	copyWindowsCommand,
+	DropdownItem,
+	InstallDropdown,
+} from "./install-dropdowns"
+import { DropdownMenu, DropdownMenuTrigger } from "./ui/dropdown-menu"
+
+export function AddSystemButton({ className }: { className?: string }) {
+	const [open, setOpen] = useState(false)
+	let opened = useRef(false)
+	if (open) {
+		opened.current = true
+	}
+
+	return (
+		<Dialog open={open} onOpenChange={setOpen}>
+			<DialogTrigger asChild>
+				<Button
+					variant="outline"
+					className={cn("flex gap-1 max-xs:h-[2.4rem]", className, isReadOnlyUser() && "hidden")}
+				>
+					<PlusIcon className="h-4 w-4 -ms-1" />
+					<Trans>
+						Add <span className="hidden sm:inline">System</span>
+					</Trans>
+				</Button>
+			</DialogTrigger>
+			{opened.current && <SystemDialog setOpen={setOpen} />}
+		</Dialog>
+	)
+}
+
+/**
+ * Token to be used for the next system.
+ * Prevents token changing if user copies config, then closes dialog and opens again.
+ */
+let nextSystemToken: string | null = null
+
+/**
+ * SystemDialog component for adding or editing a system.
+ * @param {Object} props - The component props.
+ * @param {function} props.setOpen - Function to set the open state of the dialog.
+ * @param {SystemRecord} [props.system] - Optional system record for editing an existing system.
+ */
+export const SystemDialog = ({ setOpen, system }: { setOpen: (open: boolean) => void; system?: SystemRecord }) => {
+	const publicKey = useStore($publicKey)
+	const port = useRef<HTMLInputElement>(null)
+	const [hostValue, setHostValue] = useState(system?.host ?? "")
+	const isUnixSocket = hostValue.startsWith("/")
+	const [tab, setTab] = useBrowserStorage("as-tab", "docker")
+	const [token, setToken] = useState(system?.token ?? "")
+
+	useEffect(() => {
+		;(async () => {
+			// if no system, generate a new token
+			if (!system) {
+				nextSystemToken ||= generateToken()
+				return setToken(nextSystemToken)
+			}
+			// if system exists,get the token from the fingerprint record
+			if (tokenMap.has(system.id)) {
+				return setToken(tokenMap.get(system.id)!)
+			}
+			const { token } = await pb.collection("fingerprints").getFirstListItem(`system = "${system.id}"`, {
+				fields: "token",
+			})
+			tokenMap.set(system.id, token)
+			setToken(token)
+		})()
+	}, [system?.id, nextSystemToken])
+
+	async function handleSubmit(e: SubmitEvent) {
+		e.preventDefault()
+		const formData = new FormData(e.target as HTMLFormElement)
+		const data = Object.fromEntries(formData) as Record<string, any>
+		data.users = pb.authStore.record!.id
+		try {
+			setOpen(false)
+			if (system) {
+				await pb.collection("systems").update(system.id, { ...data, status: SystemStatus.Pending })
+			} else {
+				const createdSystem = await pb.collection("systems").create(data)
+				await pb.collection("fingerprints").create({
+					system: createdSystem.id,
+					token,
+				})
+				// Reset the current token after successful system
+				// creation so next system gets a new token
+				nextSystemToken = null
+			}
+			navigate(basePath)
+		} catch (e) {
+			console.error(e)
+		}
+	}
+
+	return (
+		<DialogContent
+			className="w-[90%] sm:w-auto sm:ns-dialog max-w-full rounded-lg"
+			onCloseAutoFocus={() => {
+				setHostValue(system?.host ?? "")
+			}}
+		>
+			<Tabs defaultValue={tab} onValueChange={setTab}>
+				<DialogHeader>
+					<DialogTitle className="mb-1 pb-1 max-w-100 truncate pr-8">
+						{system ? `${t`Edit`} ${system?.name}` : <Trans>Add New System</Trans>}
+					</DialogTitle>
+					<TabsList className="grid w-full grid-cols-2">
+						<TabsTrigger value="docker">Docker</TabsTrigger>
+						<TabsTrigger value="binary">
+							<Trans>Binary</Trans>
+						</TabsTrigger>
+					</TabsList>
+				</DialogHeader>
+				{/* Docker (set tab index to prevent auto focusing content in edit system dialog) */}
+				<TabsContent value="docker" tabIndex={-1}>
+					<DialogDescription className="mb-3 leading-relaxed w-0 min-w-full">
+						<Trans>
+							Copy the
+							<code className="bg-muted px-1 rounded-sm leading-3">docker-compose.yml</code> content for the agent
+							below, or register agents automatically with a{" "}
+							<Link
+								onClick={() => setOpen(false)}
+								href={getPagePath($router, "settings", { name: "tokens" })}
+								className="link"
+							>
+								universal token
+							</Link>
+							.
+						</Trans>
+					</DialogDescription>
+				</TabsContent>
+				{/* Binary */}
+				<TabsContent value="binary" tabIndex={-1}>
+					<DialogDescription className="mb-3 leading-relaxed w-0 min-w-full">
+						<Trans>
+							Copy the installation command for the agent below, or register agents automatically with a{" "}
+							<Link
+								onClick={() => setOpen(false)}
+								href={getPagePath($router, "settings", { name: "tokens" })}
+								className="link"
+							>
+								universal token
+							</Link>
+							.
+						</Trans>
+					</DialogDescription>
+				</TabsContent>
+				<form onSubmit={handleSubmit as any}>
+					<div className="grid xs:grid-cols-[auto_1fr] gap-y-3 gap-x-4 items-center mt-1 mb-4">
+						<Label htmlFor="name" className="xs:text-end">
+							<Trans>Name</Trans>
+						</Label>
+						<Input id="name" name="name" defaultValue={system?.name} required />
+						<Label htmlFor="host" className="xs:text-end">
+							<Trans>Host / IP</Trans>
+						</Label>
+						<Input
+							id="host"
+							name="host"
+							value={hostValue}
+							required
+							onChange={(e) => {
+								setHostValue(e.target.value)
+							}}
+						/>
+						<Label htmlFor="port" className={cn("xs:text-end", isUnixSocket && "hidden")}>
+							<Trans>Port</Trans>
+						</Label>
+						<Input
+							ref={port}
+							name="port"
+							id="port"
+							defaultValue={system?.port || "45876"}
+							required={!isUnixSocket}
+							className={cn(isUnixSocket && "hidden")}
+						/>
+						<Label htmlFor="pkey" className="xs:text-end whitespace-pre">
+							<Trans comment="Use 'Key' if your language requires many more characters">Public Key</Trans>
+						</Label>
+						<InputCopy value={publicKey} id="pkey" name="pkey" />
+						<Label htmlFor="tkn" className="xs:text-end whitespace-pre">
+							<Trans>Token</Trans>
+						</Label>
+						<InputCopy value={token} id="tkn" name="tkn" />
+					</div>
+					<DialogFooter className="flex justify-end gap-x-2 gap-y-3 flex-col mt-5">
+						{/* Docker */}
+						<TabsContent value="docker" className="contents">
+							<CopyButton
+								text={t({ message: "Copy docker compose", context: "Button to copy docker compose file content" })}
+								onClick={async () =>
+									copyDockerCompose(isUnixSocket ? hostValue : port.current?.value, publicKey, token)
+								}
+								icon={<DockerIcon className="size-4 -me-0.5" />}
+								dropdownItems={[
+									{
+										text: t({ message: "Copy docker run", context: "Button to copy docker run command" }),
+										onClick: async () =>
+											copyDockerRun(isUnixSocket ? hostValue : port.current?.value, publicKey, token),
+										icons: [DockerIcon],
+									},
+								]}
+							/>
+						</TabsContent>
+						{/* Binary */}
+						<TabsContent value="binary" className="contents">
+							<CopyButton
+								text={t`Copy Linux command`}
+								icon={<TuxIcon className="size-4" />}
+								onClick={async () => copyLinuxCommand(isUnixSocket ? hostValue : port.current?.value, publicKey, token)}
+								dropdownItems={[
+									{
+										text: t({ message: "Homebrew command", context: "Button to copy install command" }),
+										onClick: async () =>
+											copyLinuxCommand(isUnixSocket ? hostValue : port.current?.value, publicKey, token, true),
+										icons: [AppleIcon, TuxIcon],
+									},
+									{
+										text: t({ message: "Windows command", context: "Button to copy install command" }),
+										onClick: async () =>
+											copyWindowsCommand(isUnixSocket ? hostValue : port.current?.value, publicKey, token),
+										icons: [WindowsIcon],
+									},
+									{
+										text: t`Manual setup instructions`,
+										url: "https://beszel.dev/guide/agent-installation#binary",
+										icons: [ExternalLinkIcon],
+									},
+								]}
+							/>
+						</TabsContent>
+						{/* Save */}
+						<Button>{system ? <Trans>Save system</Trans> : <Trans>Add system</Trans>}</Button>
+					</DialogFooter>
+				</form>
+			</Tabs>
+		</DialogContent>
+	)
+}
+
+interface CopyButtonProps {
+	text: string
+	onClick: () => void
+	dropdownItems: DropdownItem[]
+	icon?: React.ReactElement<any>
+}
+
+const CopyButton = memo((props: CopyButtonProps) => {
+	return (
+		<div className="flex gap-0 rounded-lg">
+			<Button
+				type="button"
+				variant="outline"
+				onClick={props.onClick}
+				className="rounded-e-none dark:border-e-0 grow flex items-center gap-2"
+			>
+				{props.text} {props.icon}
+			</Button>
+			<div className="w-px h-full bg-muted"></div>
+			<DropdownMenu>
+				<DropdownMenuTrigger asChild>
+					<Button variant="outline" className={"px-2 rounded-s-none border-s-0"}>
+						<ChevronDownIcon />
+					</Button>
+				</DropdownMenuTrigger>
+				<InstallDropdown items={props.dropdownItems} />
+			</DropdownMenu>
+		</div>
+	)
+})

internal/site/src/components/alerts-history-columns.tsx

@@ -0,0 +1,167 @@
+import { ColumnDef } from "@tanstack/react-table"
+import { AlertsHistoryRecord } from "@/types"
+import { Button } from "@/components/ui/button"
+import { Badge } from "@/components/ui/badge"
+import { formatShortDate, toFixedFloat, formatDuration, cn } from "@/lib/utils"
+import { alertInfo } from "@/lib/alerts"
+import { Trans } from "@lingui/react/macro"
+import { t } from "@lingui/core/macro"
+
+export const alertsHistoryColumns: ColumnDef<AlertsHistoryRecord>[] = [
+	{
+		accessorKey: "system",
+		enableSorting: true,
+		header: ({ column }) => (
+			<Button variant="ghost" onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}>
+				<Trans>System</Trans>
+			</Button>
+		),
+		cell: ({ row }) => (
+			<div className="ps-2 max-w-60 truncate">{row.original.expand?.system?.name || row.original.system}</div>
+		),
+		filterFn: (row, _, filterValue) => {
+			const display = row.original.expand?.system?.name || row.original.system || ""
+			return display.toLowerCase().includes(filterValue.toLowerCase())
+		},
+	},
+	{
+		// accessorKey: "name",
+		id: "name",
+		accessorFn: (record) => {
+			const name = record.name
+			const info = alertInfo[name]
+			return info?.name().replace("cpu", "CPU") || name
+		},
+		header: ({ column }) => (
+			<Button variant="ghost" onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}>
+				<Trans>Name</Trans>
+			</Button>
+		),
+		cell: ({ getValue, row }) => {
+			let name = getValue() as string
+			const info = alertInfo[row.original.name]
+			const Icon = info?.icon
+
+			return (
+				<span className="flex items-center gap-2 ps-1 min-w-40">
+					{Icon && <Icon className="size-3.5" />}
+					{name}
+				</span>
+			)
+		},
+	},
+	{
+		accessorKey: "value",
+		enableSorting: false,
+		header: () => (
+			<Button variant="ghost">
+				<Trans>Value</Trans>
+			</Button>
+		),
+		cell({ row, getValue }) {
+			const name = row.original.name
+			if (name === "Status") {
+				return <span className="ps-2">{t`Down`}</span>
+			}
+			const value = getValue() as number
+			const unit = alertInfo[name]?.unit
+			return (
+				<span className="tabular-nums ps-2.5">
+					{toFixedFloat(value, value < 10 ? 2 : 1)}
+					{unit}
+				</span>
+			)
+		},
+	},
+	{
+		accessorKey: "state",
+		enableSorting: true,
+		sortingFn: (rowA, rowB) => (rowA.original.resolved ? 1 : 0) - (rowB.original.resolved ? 1 : 0),
+		header: ({ column }) => (
+			<Button variant="ghost" onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}>
+				<Trans comment="Context: alert state (active or resolved)">State</Trans>
+			</Button>
+		),
+		cell: ({ row }) => {
+			const resolved = row.original.resolved
+			return (
+				<Badge
+					className={cn(
+						"capitalize pointer-events-none",
+						resolved
+							? "bg-green-100 text-green-800 border-green-200 dark:opacity-80"
+							: "bg-yellow-100 text-yellow-800 border-yellow-200"
+					)}
+				>
+					{/* {resolved ? <CircleCheckIcon className="size-3 me-0.5" /> : <CircleAlertIcon className="size-3 me-0.5" />} */}
+					{resolved ? <Trans>Resolved</Trans> : <Trans>Active</Trans>}
+				</Badge>
+			)
+		},
+	},
+	{
+		accessorKey: "created",
+		accessorFn: (record) => formatShortDate(record.created),
+		enableSorting: true,
+		invertSorting: true,
+		header: ({ column }) => (
+			<Button variant="ghost" onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}>
+				<Trans comment="Context: date created">Created</Trans>
+			</Button>
+		),
+		cell: ({ getValue, row }) => (
+			<span className="ps-1 tabular-nums tracking-tight" title={`${row.original.created} UTC`}>
+				{getValue() as string}
+			</span>
+		),
+	},
+	{
+		accessorKey: "resolved",
+		enableSorting: true,
+		invertSorting: true,
+		header: ({ column }) => (
+			<Button variant="ghost" onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}>
+				<Trans>Resolved</Trans>
+			</Button>
+		),
+		cell: ({ row, getValue }) => {
+			const resolved = getValue() as string | null
+			if (!resolved) {
+				return null
+			}
+			return (
+				<span className="ps-1 tabular-nums tracking-tight" title={`${row.original.resolved} UTC`}>
+					{formatShortDate(resolved)}
+				</span>
+			)
+		},
+	},
+	{
+		accessorKey: "duration",
+		invertSorting: true,
+		enableSorting: true,
+		sortingFn: (rowA, rowB) => {
+			const aCreated = new Date(rowA.original.created)
+			const bCreated = new Date(rowB.original.created)
+			const aResolved = rowA.original.resolved ? new Date(rowA.original.resolved) : null
+			const bResolved = rowB.original.resolved ? new Date(rowB.original.resolved) : null
+			const aDuration = aResolved ? aResolved.getTime() - aCreated.getTime() : null
+			const bDuration = bResolved ? bResolved.getTime() - bCreated.getTime() : null
+			if (!aDuration && bDuration) return -1
+			if (aDuration && !bDuration) return 1
+			return (aDuration || 0) - (bDuration || 0)
+		},
+		header: ({ column }) => (
+			<Button variant="ghost" onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}>
+				<Trans>Duration</Trans>
+			</Button>
+		),
+		cell: ({ row }) => {
+			const duration = formatDuration(row.original.created, row.original.resolved)
+			if (!duration) {
+				return null
+			}
+			return <span className="ps-2">{duration}</span>
+		},
+	},
+]

internal/site/src/components/alerts/alert-button.tsx

@@ -0,0 +1,36 @@
+import { t } from "@lingui/core/macro"
+import { memo, useMemo, useState } from "react"
+import { useStore } from "@nanostores/react"
+import { $alerts } from "@/lib/stores"
+import { BellIcon } from "lucide-react"
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { SystemRecord } from "@/types"
+import { AlertDialogContent } from "./alerts-sheet"
+import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet"
+
+export default memo(function AlertsButton({ system }: { system: SystemRecord }) {
+	const [opened, setOpened] = useState(false)
+	const alerts = useStore($alerts)
+
+	const hasSystemAlert = alerts[system.id]?.size > 0
+	return useMemo(
+		() => (
+			<Sheet>
+				<SheetTrigger asChild>
+					<Button variant="ghost" size="icon" aria-label={t`Alerts`} data-nolink onClick={() => setOpened(true)}>
+						<BellIcon
+							className={cn("h-[1.2em] w-[1.2em] pointer-events-none", {
+								"fill-primary": hasSystemAlert,
+							})}
+						/>
+					</Button>
+				</SheetTrigger>
+				<SheetContent className="max-h-full overflow-auto w-145 !max-w-full p-4 sm:p-6">
+					{opened && <AlertDialogContent system={system} />}
+				</SheetContent>
+			</Sheet>
+		),
+		[opened, hasSystemAlert]
+	)
+})

internal/site/src/components/alerts/alerts-sheet.tsx

@@ -0,0 +1,299 @@
+import { t } from "@lingui/core/macro"
+import { Trans, Plural } from "@lingui/react/macro"
+import { $alerts, $systems } from "@/lib/stores"
+import { cn, debounce } from "@/lib/utils"
+import { alertInfo } from "@/lib/alerts"
+import { Switch } from "@/components/ui/switch"
+import { AlertInfo, AlertRecord, SystemRecord } from "@/types"
+import { lazy, memo, Suspense, useMemo, useState } from "react"
+import { toast } from "@/components/ui/use-toast"
+import { useStore } from "@nanostores/react"
+import { getPagePath } from "@nanostores/router"
+import { Checkbox } from "@/components/ui/checkbox"
+import { DialogTitle, DialogDescription } from "@/components/ui/dialog"
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs"
+import { ServerIcon, GlobeIcon } from "lucide-react"
+import { $router, Link } from "@/components/router"
+import { DialogHeader } from "@/components/ui/dialog"
+import { pb } from "@/lib/api"
+
+const Slider = lazy(() => import("@/components/ui/slider"))
+
+const endpoint = "/api/beszel/user-alerts"
+
+const alertDebounce = 100
+
+const alertKeys = Object.keys(alertInfo) as (keyof typeof alertInfo)[]
+
+const failedUpdateToast = (error: unknown) => {
+	console.error(error)
+	toast({
+		title: t`Failed to update alert`,
+		description: t`Please check logs for more details.`,
+		variant: "destructive",
+	})
+}
+
+/** Create or update alerts for a given name and systems */
+const upsertAlerts = debounce(
+	async ({ name, value, min, systems }: { name: string; value: number; min: number; systems: string[] }) => {
+		try {
+			await pb.send<{ success: boolean }>(endpoint, {
+				method: "POST",
+				// overwrite is always true because we've done filtering client side
+				body: { name, value, min, systems, overwrite: true },
+			})
+		} catch (error) {
+			failedUpdateToast(error)
+		}
+	},
+	alertDebounce
+)
+
+/** Delete alerts for a given name and systems */
+const deleteAlerts = debounce(async ({ name, systems }: { name: string; systems: string[] }) => {
+	try {
+		await pb.send<{ success: boolean }>(endpoint, {
+			method: "DELETE",
+			body: { name, systems },
+		})
+	} catch (error) {
+		failedUpdateToast(error)
+	}
+}, alertDebounce)
+
+export const AlertDialogContent = memo(function AlertDialogContent({ system }: { system: SystemRecord }) {
+	const alerts = useStore($alerts)
+	const [overwriteExisting, setOverwriteExisting] = useState<boolean | "indeterminate">(false)
+	const [currentTab, setCurrentTab] = useState("system")
+
+	const systemAlerts = alerts[system.id] ?? new Map()
+
+	// We need to keep a copy of alerts when we switch to global tab. If we always compare to
+	// current alerts, it will only be updated when first checked, then won't be updated because
+	// after that it exists.
+	const alertsWhenGlobalSelected = useMemo(() => {
+		return currentTab === "global" ? structuredClone(alerts) : alerts
+	}, [currentTab])
+
+	return (
+		<>
+			<DialogHeader>
+				<DialogTitle className="text-xl">
+					<Trans>Alerts</Trans>
+				</DialogTitle>
+				<DialogDescription>
+					<Trans>
+						See{" "}
+						<Link href={getPagePath($router, "settings", { name: "notifications" })} className="link">
+							notification settings
+						</Link>{" "}
+						to configure how you receive alerts.
+					</Trans>
+				</DialogDescription>
+			</DialogHeader>
+			<Tabs defaultValue="system" onValueChange={setCurrentTab}>
+				<TabsList className="mb-1 -mt-0.5">
+					<TabsTrigger value="system">
+						<ServerIcon className="me-2 h-3.5 w-3.5" />
+						<span className="truncate max-w-60">{system.name}</span>
+					</TabsTrigger>
+					<TabsTrigger value="global">
+						<GlobeIcon className="me-1.5 h-3.5 w-3.5" />
+						<Trans>All Systems</Trans>
+					</TabsTrigger>
+				</TabsList>
+				<TabsContent value="system">
+					<div className="grid gap-3">
+						{alertKeys.map((name) => (
+							<AlertContent
+								key={name}
+								alertKey={name}
+								data={alertInfo[name as keyof typeof alertInfo]}
+								alert={systemAlerts.get(name)}
+								system={system}
+							/>
+						))}
+					</div>
+				</TabsContent>
+				<TabsContent value="global">
+					<label
+						htmlFor="ovw"
+						className="mb-3 flex gap-2 items-center justify-center cursor-pointer border rounded-sm py-3 px-4 border-destructive text-destructive font-semibold text-sm"
+					>
+						<Checkbox
+							id="ovw"
+							className="text-destructive border-destructive data-[state=checked]:bg-destructive"
+							checked={overwriteExisting}
+							onCheckedChange={setOverwriteExisting}
+						/>
+						<Trans>Overwrite existing alerts</Trans>
+					</label>
+					<div className="grid gap-3">
+						{alertKeys.map((name) => (
+							<AlertContent
+								key={name}
+								alertKey={name}
+								system={system}
+								alert={systemAlerts.get(name)}
+								data={alertInfo[name as keyof typeof alertInfo]}
+								global={true}
+								overwriteExisting={!!overwriteExisting}
+								initialAlertsState={alertsWhenGlobalSelected}
+							/>
+						))}
+					</div>
+				</TabsContent>
+			</Tabs>
+		</>
+	)
+})
+
+export function AlertContent({
+	alertKey,
+	data: alertData,
+	system,
+	alert,
+	global = false,
+	overwriteExisting = false,
+	initialAlertsState = {},
+}: {
+	alertKey: string
+	data: AlertInfo
+	system: SystemRecord
+	alert?: AlertRecord
+	global?: boolean
+	overwriteExisting?: boolean
+	initialAlertsState?: Record<string, Map<string, AlertRecord>>
+}) {
+	const { name } = alertData
+
+	const singleDescription = alertData.singleDesc?.()
+
+	const [checked, setChecked] = useState(global ? false : !!alert)
+	const [min, setMin] = useState(alert?.min || 10)
+	const [value, setValue] = useState(alert?.value || (singleDescription ? 0 : alertData.start ?? 80))
+
+	const Icon = alertData.icon
+
+	/** Get system ids to update */
+	function getSystemIds(): string[] {
+		// if not global, update only the current system
+		if (!global) {
+			return [system.id]
+		}
+		// if global, update all systems when overwriteExisting is true
+		// update only systems without an existing alert when overwriteExisting is false
+		const allSystems = $systems.get()
+		const systemIds: string[] = []
+		for (const system of allSystems) {
+			if (overwriteExisting || !initialAlertsState[system.id]?.has(alertKey)) {
+				systemIds.push(system.id)
+			}
+		}
+		return systemIds
+	}
+
+	function sendUpsert(min: number, value: number) {
+		const systems = getSystemIds()
+		systems.length &&
+			upsertAlerts({
+				name: alertKey,
+				value,
+				min,
+				systems,
+			})
+	}
+
+	return (
+		<div className="rounded-lg border border-muted-foreground/15 hover:border-muted-foreground/20 transition-colors duration-100 group">
+			<label
+				htmlFor={`s${name}`}
+				className={cn("flex flex-row items-center justify-between gap-4 cursor-pointer p-4", {
+					"pb-0": checked,
+				})}
+			>
+				<div className="grid gap-1 select-none">
+					<p className="font-semibold flex gap-3 items-center">
+						<Icon className="h-4 w-4 opacity-85" /> {alertData.name()}
+					</p>
+					{!checked && <span className="block text-sm text-muted-foreground">{alertData.desc()}</span>}
+				</div>
+				<Switch
+					id={`s${name}`}
+					checked={checked}
+					onCheckedChange={(newChecked) => {
+						setChecked(newChecked)
+						if (newChecked) {
+							// if alert checked, create or update alert
+							sendUpsert(min, value)
+						} else {
+							// if unchecked, delete alert (unless global and overwriteExisting is false)
+							deleteAlerts({ name: alertKey, systems: getSystemIds() })
+							// when force deleting all alerts of a type, also remove them from initialAlertsState
+							if (overwriteExisting) {
+								for (const curAlerts of Object.values(initialAlertsState)) {
+									curAlerts.delete(alertKey)
+								}
+							}
+						}
+					}}
+				/>
+			</label>
+			{checked && (
+				<div className="grid sm:grid-cols-2 mt-1.5 gap-5 px-4 pb-5 tabular-nums text-muted-foreground">
+					<Suspense fallback={<div className="h-10" />}>
+						{!singleDescription && (
+							<div>
+								<p id={`v${name}`} className="text-sm block h-8">
+									<Trans>
+										Average exceeds{" "}
+										<strong className="text-foreground">
+											{value}
+											{alertData.unit}
+										</strong>
+									</Trans>
+								</p>
+								<div className="flex gap-3">
+									<Slider
+										aria-labelledby={`v${name}`}
+										defaultValue={[value]}
+										onValueCommit={(val) => sendUpsert(min, val[0])}
+										onValueChange={(val) => setValue(val[0])}
+										step={alertData.step ?? 1}
+										min={alertData.min ?? 1}
+										max={alertData.max ?? 99}
+									/>
+								</div>
+							</div>
+						)}
+						<div className={cn(singleDescription && "col-span-full lowercase")}>
+							<p id={`t${name}`} className="text-sm block h-8 first-letter:uppercase">
+								{singleDescription && (
+									<>
+										{singleDescription}
+										{` `}
+									</>
+								)}
+								<Trans>
+									For <strong className="text-foreground">{min}</strong>{" "}
+									<Plural value={min} one="minute" other="minutes" />
+								</Trans>
+							</p>
+							<div className="flex gap-3">
+								<Slider
+									aria-labelledby={`v${name}`}
+									defaultValue={[min]}
+									onValueCommit={(minVal) => sendUpsert(minVal[0], value)}
+									onValueChange={(val) => setMin(val[0])}
+									min={1}
+									max={60}
+								/>
+							</div>
+						</div>
+					</Suspense>
+				</div>
+			)}
+		</div>
+	)
+}

internal/site/src/components/charts/area-chart.tsx

@@ -0,0 +1,94 @@
+import { Area, AreaChart, CartesianGrid, YAxis } from "recharts"
+import { ChartContainer, ChartTooltip, ChartTooltipContent, xAxis } from "@/components/ui/chart"
+import { cn, formatShortDate, chartMargin } from "@/lib/utils"
+import { useYAxisWidth } from "./hooks"
+import { ChartData, SystemStatsRecord } from "@/types"
+import { useMemo } from "react"
+
+export type DataPoint = {
+	label: string
+	dataKey: (data: SystemStatsRecord) => number | undefined
+	color: number | string
+	opacity: number
+}
+
+export default function AreaChartDefault({
+	chartData,
+	max,
+	maxToggled,
+	tickFormatter,
+	contentFormatter,
+	dataPoints,
+	domain,
+}: // logRender = false,
+{
+	chartData: ChartData
+	max?: number
+	maxToggled?: boolean
+	tickFormatter: (value: number, index: number) => string
+	contentFormatter: ({ value, payload }: { value: number; payload: SystemStatsRecord }) => string
+	dataPoints?: DataPoint[]
+	domain?: [number, number]
+	// logRender?: boolean
+}) {
+	const { yAxisWidth, updateYAxisWidth } = useYAxisWidth()
+
+	return useMemo(() => {
+		if (chartData.systemStats.length === 0) {
+			return null
+		}
+		// if (logRender) {
+		// 	console.log("Rendered at", new Date())
+		// }
+		return (
+			<div>
+				<ChartContainer
+					className={cn("h-full w-full absolute aspect-auto bg-card opacity-0 transition-opacity", {
+						"opacity-100": yAxisWidth,
+					})}
+				>
+					<AreaChart accessibilityLayer data={chartData.systemStats} margin={chartMargin}>
+						<CartesianGrid vertical={false} />
+						<YAxis
+							direction="ltr"
+							orientation={chartData.orientation}
+							className="tracking-tighter"
+							width={yAxisWidth}
+							domain={domain ?? [0, max ?? "auto"]}
+							tickFormatter={(value, index) => updateYAxisWidth(tickFormatter(value, index))}
+							tickLine={false}
+							axisLine={false}
+						/>
+						{xAxis(chartData)}
+						<ChartTooltip
+							animationEasing="ease-out"
+							animationDuration={150}
+							content={
+								<ChartTooltipContent
+									labelFormatter={(_, data) => formatShortDate(data[0].payload.created)}
+									contentFormatter={contentFormatter}
+								/>
+							}
+						/>
+						{dataPoints?.map((dataPoint, i) => {
+							const color = `var(--chart-${dataPoint.color})`
+							return (
+								<Area
+									key={i}
+									dataKey={dataPoint.dataKey}
+									name={dataPoint.label}
+									type="monotoneX"
+									fill={color}
+									fillOpacity={dataPoint.opacity}
+									stroke={color}
+									isAnimationActive={false}
+								/>
+							)
+						})}
+						{/* <ChartLegend content={<ChartLegendContent />} /> */}
+					</AreaChart>
+				</ChartContainer>
+			</div>
+		)
+	}, [chartData.systemStats.at(-1), yAxisWidth, maxToggled])
+}

internal/site/src/components/charts/chart-time-select.tsx

@@ -0,0 +1,26 @@
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { $chartTime } from "@/lib/stores"
+import { chartTimeData, cn } from "@/lib/utils"
+import { ChartTimes } from "@/types"
+import { useStore } from "@nanostores/react"
+import { HistoryIcon } from "lucide-react"
+
+export default function ChartTimeSelect({ className }: { className?: string }) {
+	const chartTime = useStore($chartTime)
+
+	return (
+		<Select defaultValue="1h" value={chartTime} onValueChange={(value: ChartTimes) => $chartTime.set(value)}>
+			<SelectTrigger className={cn(className, "relative ps-10 pe-5")}>
+				<HistoryIcon className="h-4 w-4 absolute start-4 top-1/2 -translate-y-1/2 opacity-85" />
+				<SelectValue />
+			</SelectTrigger>
+			<SelectContent>
+				{Object.entries(chartTimeData).map(([value, { label }]) => (
+					<SelectItem key={value} value={value}>
+						{label()}
+					</SelectItem>
+				))}
+			</SelectContent>
+		</Select>
+	)
+}

internal/site/src/components/charts/container-chart.tsx

@@ -0,0 +1,164 @@
+import { Area, AreaChart, CartesianGrid, YAxis } from "recharts"
+import { ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent, xAxis } from "@/components/ui/chart"
+import { memo, useMemo } from "react"
+import { cn, formatShortDate, chartMargin, toFixedFloat, formatBytes, decimalString } from "@/lib/utils"
+// import Spinner from '../spinner'
+import { useStore } from "@nanostores/react"
+import { $containerFilter, $userSettings } from "@/lib/stores"
+import { ChartData } from "@/types"
+import { Separator } from "../ui/separator"
+import { ChartType, Unit } from "@/lib/enums"
+import { useYAxisWidth } from "./hooks"
+
+export default memo(function ContainerChart({
+	dataKey,
+	chartData,
+	chartType,
+	chartConfig,
+	unit = "%",
+}: {
+	dataKey: string
+	chartData: ChartData
+	chartType: ChartType
+	chartConfig: ChartConfig
+	unit?: string
+}) {
+	const filter = useStore($containerFilter)
+	const userSettings = useStore($userSettings)
+	const { yAxisWidth, updateYAxisWidth } = useYAxisWidth()
+
+	const { containerData } = chartData
+
+	const isNetChart = chartType === ChartType.Network
+
+	const { toolTipFormatter, dataFunction, tickFormatter } = useMemo(() => {
+		const obj = {} as {
+			toolTipFormatter: (item: any, key: string) => React.ReactNode | string
+			dataFunction: (key: string, data: any) => number | null
+			tickFormatter: (value: any) => string
+		}
+		// tick formatter
+		if (chartType === ChartType.CPU) {
+			obj.tickFormatter = (value) => {
+				const val = toFixedFloat(value, 2) + unit
+				return updateYAxisWidth(val)
+			}
+		} else {
+			const chartUnit = isNetChart ? userSettings.unitNet : Unit.Bytes
+			obj.tickFormatter = (val) => {
+				const { value, unit } = formatBytes(val, isNetChart, chartUnit, true)
+				return updateYAxisWidth(toFixedFloat(value, value >= 10 ? 0 : 1) + " " + unit)
+			}
+		}
+		// tooltip formatter
+		if (isNetChart) {
+			obj.toolTipFormatter = (item: any, key: string) => {
+				try {
+					const sent = item?.payload?.[key]?.ns ?? 0
+					const received = item?.payload?.[key]?.nr ?? 0
+					const { value: receivedValue, unit: receivedUnit } = formatBytes(received, true, userSettings.unitNet, true)
+					const { value: sentValue, unit: sentUnit } = formatBytes(sent, true, userSettings.unitNet, true)
+					return (
+						<span className="flex">
+							{decimalString(receivedValue)} {receivedUnit}
+							<span className="opacity-70 ms-0.5"> rx </span>
+							<Separator orientation="vertical" className="h-3 mx-1.5 bg-primary/40" />
+							{decimalString(sentValue)} {sentUnit}
+							<span className="opacity-70 ms-0.5"> tx</span>
+						</span>
+					)
+				} catch (e) {
+					return null
+				}
+			}
+		} else if (chartType === ChartType.Memory) {
+			obj.toolTipFormatter = (item: any) => {
+				const { value, unit } = formatBytes(item.value, false, Unit.Bytes, true)
+				return decimalString(value) + " " + unit
+			}
+		} else {
+			obj.toolTipFormatter = (item: any) => decimalString(item.value) + unit
+		}
+		// data function
+		if (isNetChart) {
+			obj.dataFunction = (key: string, data: any) => (data[key] ? data[key].nr + data[key].ns : null)
+		} else {
+			obj.dataFunction = (key: string, data: any) => data[key]?.[dataKey] ?? null
+		}
+		return obj
+	}, [])
+
+	// Filter with set lookup
+	const filteredKeys = useMemo(() => {
+		if (!filter) {
+			return new Set<string>()
+		}
+		const filterLower = filter.toLowerCase()
+		return new Set(Object.keys(chartConfig).filter((key) => !key.toLowerCase().includes(filterLower)))
+	}, [chartConfig, filter])
+
+	// console.log('rendered at', new Date())
+
+	if (containerData.length === 0) {
+		return null
+	}
+
+	return (
+		<div>
+			<ChartContainer
+				className={cn("h-full w-full absolute aspect-auto bg-card opacity-0 transition-opacity", {
+					"opacity-100": yAxisWidth,
+				})}
+			>
+				<AreaChart
+					accessibilityLayer
+					// syncId={'cpu'}
+					data={containerData}
+					margin={chartMargin}
+					reverseStackOrder={true}
+				>
+					<CartesianGrid vertical={false} />
+					<YAxis
+						direction="ltr"
+						orientation={chartData.orientation}
+						className="tracking-tighter"
+						width={yAxisWidth}
+						tickFormatter={tickFormatter}
+						tickLine={false}
+						axisLine={false}
+					/>
+					{xAxis(chartData)}
+					<ChartTooltip
+						animationEasing="ease-out"
+						animationDuration={150}
+						truncate={true}
+						labelFormatter={(_, data) => formatShortDate(data[0].payload.created)}
+						// @ts-ignore
+						itemSorter={(a, b) => b.value - a.value}
+						content={<ChartTooltipContent filter={filter} contentFormatter={toolTipFormatter} />}
+					/>
+					{Object.keys(chartConfig).map((key) => {
+						const filtered = filteredKeys.has(key)
+						const fillOpacity = filtered ? 0.05 : 0.4
+						const strokeOpacity = filtered ? 0.1 : 1
+						return (
+							<Area
+								key={key}
+								isAnimationActive={false}
+								dataKey={dataFunction.bind(null, key)}
+								name={key}
+								type="monotoneX"
+								fill={chartConfig[key].color}
+								fillOpacity={fillOpacity}
+								stroke={chartConfig[key].color}
+								strokeOpacity={strokeOpacity}
+								activeDot={{ opacity: filtered ? 0 : 1 }}
+								stackId="a"
+							/>
+						)
+					})}
+				</AreaChart>
+			</ChartContainer>
+		</div>
+	)
+})

internal/site/src/components/charts/disk-chart.tsx

@@ -0,0 +1,83 @@
+import { Area, AreaChart, CartesianGrid, YAxis } from "recharts"
+import { ChartContainer, ChartTooltip, ChartTooltipContent, xAxis } from "@/components/ui/chart"
+import { cn, formatShortDate, decimalString, chartMargin, formatBytes, toFixedFloat } from "@/lib/utils"
+import { ChartData } from "@/types"
+import { memo } from "react"
+import { useLingui } from "@lingui/react/macro"
+import { Unit } from "@/lib/enums"
+import { useYAxisWidth } from "./hooks"
+
+export default memo(function DiskChart({
+	dataKey,
+	diskSize,
+	chartData,
+}: {
+	dataKey: string
+	diskSize: number
+	chartData: ChartData
+}) {
+	const { yAxisWidth, updateYAxisWidth } = useYAxisWidth()
+	const { t } = useLingui()
+
+	// round to nearest GB
+	if (diskSize >= 100) {
+		diskSize = Math.round(diskSize)
+	}
+
+	if (chartData.systemStats.length === 0) {
+		return null
+	}
+
+	return (
+		<div>
+			<ChartContainer
+				className={cn("h-full w-full absolute aspect-auto bg-card opacity-0 transition-opacity", {
+					"opacity-100": yAxisWidth,
+				})}
+			>
+				<AreaChart accessibilityLayer data={chartData.systemStats} margin={chartMargin}>
+					<CartesianGrid vertical={false} />
+					<YAxis
+						direction="ltr"
+						orientation={chartData.orientation}
+						className="tracking-tighter"
+						width={yAxisWidth}
+						domain={[0, diskSize]}
+						tickCount={9}
+						minTickGap={6}
+						tickLine={false}
+						axisLine={false}
+						tickFormatter={(val) => {
+							const { value, unit } = formatBytes(val * 1024, false, Unit.Bytes, true)
+							return updateYAxisWidth(toFixedFloat(value, value >= 10 ? 0 : 1) + " " + unit)
+						}}
+					/>
+					{xAxis(chartData)}
+					<ChartTooltip
+						animationEasing="ease-out"
+						animationDuration={150}
+						content={
+							<ChartTooltipContent
+								labelFormatter={(_, data) => formatShortDate(data[0].payload.created)}
+								contentFormatter={({ value }) => {
+									const { value: convertedValue, unit } = formatBytes(value * 1024, false, Unit.Bytes, true)
+									return decimalString(convertedValue) + " " + unit
+								}}
+							/>
+						}
+					/>
+					<Area
+						dataKey={dataKey}
+						name={t`Disk Usage`}
+						type="monotoneX"
+						fill="var(--chart-4)"
+						fillOpacity={0.4}
+						stroke="var(--chart-4)"
+						// animationDuration={1200}
+						isAnimationActive={false}
+					/>
+				</AreaChart>
+			</ChartContainer>
+		</div>
+	)
+})

internal/site/src/components/charts/gpu-power-chart.tsx

@@ -0,0 +1,106 @@
+import { CartesianGrid, Line, LineChart, YAxis } from "recharts"
+
+import {
+	ChartContainer,
+	ChartLegend,
+	ChartLegendContent,
+	ChartTooltip,
+	ChartTooltipContent,
+	xAxis,
+} from "@/components/ui/chart"
+import { cn, formatShortDate, toFixedFloat, decimalString, chartMargin } from "@/lib/utils"
+import { ChartData } from "@/types"
+import { memo, useMemo } from "react"
+import { useYAxisWidth } from "./hooks"
+
+export default memo(function GpuPowerChart({ chartData }: { chartData: ChartData }) {
+	const { yAxisWidth, updateYAxisWidth } = useYAxisWidth()
+
+	if (chartData.systemStats.length === 0) {
+		return null
+	}
+
+	/** Format temperature data for chart and assign colors */
+	const newChartData = useMemo(() => {
+		const newChartData = { data: [], colors: {} } as {
+			data: Record<string, number | string>[]
+			colors: Record<string, string>
+		}
+		const powerSums = {} as Record<string, number>
+		for (let data of chartData.systemStats) {
+			let newData = { created: data.created } as Record<string, number | string>
+
+			for (let gpu of Object.values(data.stats?.g ?? {})) {
+				if (gpu.p) {
+					const name = gpu.n
+					newData[name] = gpu.p
+					powerSums[name] = (powerSums[name] ?? 0) + newData[name]
+				}
+			}
+			newChartData.data.push(newData)
+		}
+		const keys = Object.keys(powerSums).sort((a, b) => powerSums[b] - powerSums[a])
+		for (let key of keys) {
+			newChartData.colors[key] = `hsl(${((keys.indexOf(key) * 360) / keys.length) % 360}, 60%, 55%)`
+		}
+		return newChartData
+	}, [chartData])
+
+	const colors = Object.keys(newChartData.colors)
+
+	// console.log('rendered at', new Date())
+
+	return (
+		<div>
+			<ChartContainer
+				className={cn("h-full w-full absolute aspect-auto bg-card opacity-0 transition-opacity", {
+					"opacity-100": yAxisWidth,
+				})}
+			>
+				<LineChart accessibilityLayer data={newChartData.data} margin={chartMargin}>
+					<CartesianGrid vertical={false} />
+					<YAxis
+						direction="ltr"
+						orientation={chartData.orientation}
+						className="tracking-tighter"
+						domain={[0, "auto"]}
+						width={yAxisWidth}
+						tickFormatter={(value) => {
+							const val = toFixedFloat(value, 2)
+							return updateYAxisWidth(val + "W")
+						}}
+						tickLine={false}
+						axisLine={false}
+					/>
+					{xAxis(chartData)}
+					<ChartTooltip
+						animationEasing="ease-out"
+						animationDuration={150}
+						// @ts-ignore
+						itemSorter={(a, b) => b.value - a.value}
+						content={
+							<ChartTooltipContent
+								labelFormatter={(_, data) => formatShortDate(data[0].payload.created)}
+								contentFormatter={(item) => decimalString(item.value) + "W"}
+								// indicator="line"
+							/>
+						}
+					/>
+					{colors.map((key) => (
+						<Line
+							key={key}
+							dataKey={key}
+							name={key}
+							type="monotoneX"
+							dot={false}
+							strokeWidth={1.5}
+							stroke={newChartData.colors[key]}
+							isAnimationActive={false}
+						/>
+					))}
+					{colors.length > 1 && <ChartLegend content={<ChartLegendContent />} />}
+				</LineChart>
+			</ChartContainer>
+		</div>
+	)
+})

internal/site/src/components/charts/hooks.ts

@@ -0,0 +1,107 @@
+import { useMemo, useState } from "react"
+import { ChartConfig } from "@/components/ui/chart"
+import { ChartData } from "@/types"
+
+/** Chart configurations for CPU, memory, and network usage charts */
+export interface ContainerChartConfigs {
+	cpu: ChartConfig
+	memory: ChartConfig
+	network: ChartConfig
+}
+
+/**
+ * Generates chart configurations for container metrics visualization
+ * @param containerData - Array of container statistics data points
+ * @returns Chart configurations for CPU, memory, and network metrics
+ */
+export function useContainerChartConfigs(containerData: ChartData["containerData"]): ContainerChartConfigs {
+	return useMemo(() => {
+		const configs = {
+			cpu: {} as ChartConfig,
+			memory: {} as ChartConfig,
+			network: {} as ChartConfig,
+		}
+
+		// Aggregate usage metrics for each container
+		const totalUsage = {
+			cpu: new Map<string, number>(),
+			memory: new Map<string, number>(),
+			network: new Map<string, number>(),
+		}
+
+		// Process each data point to calculate totals
+		for (let i = 0; i < containerData.length; i++) {
+			const stats = containerData[i]
+			const containerNames = Object.keys(stats)
+
+			for (let j = 0; j < containerNames.length; j++) {
+				const containerName = containerNames[j]
+				// Skip metadata field
+				if (containerName === "created") {
+					continue
+				}
+
+				const containerStats = stats[containerName]
+				if (!containerStats) {
+					continue
+				}
+
+				// Accumulate metrics for CPU, memory, and network
+				const currentCpu = totalUsage.cpu.get(containerName) ?? 0
+				const currentMemory = totalUsage.memory.get(containerName) ?? 0
+				const currentNetwork = totalUsage.network.get(containerName) ?? 0
+
+				totalUsage.cpu.set(containerName, currentCpu + (containerStats.c ?? 0))
+				totalUsage.memory.set(containerName, currentMemory + (containerStats.m ?? 0))
+				totalUsage.network.set(containerName, currentNetwork + (containerStats.nr ?? 0) + (containerStats.ns ?? 0))
+			}
+		}
+
+		// Generate chart configurations for each metric type
+		Object.entries(totalUsage).forEach(([chartType, usageMap]) => {
+			const sortedContainers = Array.from(usageMap.entries()).sort(([, a], [, b]) => b - a)
+			const chartConfig = {} as Record<string, { label: string; color: string }>
+			const count = sortedContainers.length
+
+			// Generate colors for each container
+			for (let i = 0; i < count; i++) {
+				const [containerName] = sortedContainers[i]
+				const hue = ((i * 360) / count) % 360
+				chartConfig[containerName] = {
+					label: containerName,
+					color: `hsl(${hue}, 60%, 55%)`,
+				}
+			}
+
+			configs[chartType as keyof typeof configs] = chartConfig
+		})
+
+		return configs
+	}, [containerData])
+}
+
+/** Sets the correct width of the y axis in recharts based on the longest label */
+export function useYAxisWidth() {
+	const [yAxisWidth, setYAxisWidth] = useState(0)
+	let maxChars = 0
+	let timeout: ReturnType<typeof setTimeout>
+	function updateYAxisWidth(str: string) {
+		if (str.length > maxChars) {
+			maxChars = str.length
+			const div = document.createElement("div")
+			div.className = "text-xs tabular-nums tracking-tighter table sr-only"
+			div.innerHTML = str
+			clearTimeout(timeout)
+			timeout = setTimeout(() => {
+				document.body.appendChild(div)
+				const width = div.offsetWidth + 24
+				if (width > yAxisWidth) {
+					setYAxisWidth(div.offsetWidth + 24)
+				}
+				document.body.removeChild(div)
+			})
+		}
+		return str
+	}
+	return { yAxisWidth, updateYAxisWidth }
+}

internal/site/src/components/charts/load-average-chart.tsx

@@ -0,0 +1,97 @@
+import { CartesianGrid, Line, LineChart, YAxis } from "recharts"
+
+import {
+	ChartContainer,
+	ChartLegend,
+	ChartLegendContent,
+	ChartTooltip,
+	ChartTooltipContent,
+	xAxis,
+} from "@/components/ui/chart"
+import { cn, formatShortDate, toFixedFloat, decimalString, chartMargin } from "@/lib/utils"
+import { ChartData, SystemStats } from "@/types"
+import { memo } from "react"
+import { t } from "@lingui/core/macro"
+import { useYAxisWidth } from "./hooks"
+
+export default memo(function LoadAverageChart({ chartData }: { chartData: ChartData }) {
+	const { yAxisWidth, updateYAxisWidth } = useYAxisWidth()
+
+	const keys: { legacy: keyof SystemStats; color: string; label: string }[] = [
+		{
+			legacy: "l1",
+			color: "hsl(271, 81%, 60%)", // Purple
+			label: t({ message: `1 min`, comment: "Load average" }),
+		},
+		{
+			legacy: "l5",
+			color: "hsl(217, 91%, 60%)", // Blue
+			label: t({ message: `5 min`, comment: "Load average" }),
+		},
+		{
+			legacy: "l15",
+			color: "hsl(25, 95%, 53%)", // Orange
+			label: t({ message: `15 min`, comment: "Load average" }),
+		},
+	]
+
+	return (
+		<div>
+			<ChartContainer
+				className={cn("h-full w-full absolute aspect-auto bg-card opacity-0 transition-opacity", {
+					"opacity-100": yAxisWidth,
+				})}
+			>
+				<LineChart accessibilityLayer data={chartData.systemStats} margin={chartMargin}>
+					<CartesianGrid vertical={false} />
+					<YAxis
+						direction="ltr"
+						orientation={chartData.orientation}
+						className="tracking-tighter"
+						domain={[0, "auto"]}
+						width={yAxisWidth}
+						tickFormatter={(value) => {
+							return updateYAxisWidth(String(toFixedFloat(value, 2)))
+						}}
+						tickLine={false}
+						axisLine={false}
+					/>
+					{xAxis(chartData)}
+					<ChartTooltip
+						animationEasing="ease-out"
+						animationDuration={150}
+						// @ts-ignore
+						// itemSorter={(a, b) => b.value - a.value}
+						content={
+							<ChartTooltipContent
+								labelFormatter={(_, data) => formatShortDate(data[0].payload.created)}
+								contentFormatter={(item) => decimalString(item.value)}
+							/>
+						}
+					/>
+					{keys.map(({ legacy, color, label }, i) => {
+						const dataKey = (value: { stats: SystemStats }) => {
+							if (chartData.agentVersion.patch < 1) {
+								return value.stats?.[legacy]
+							}
+							return value.stats?.la?.[i] ?? value.stats?.[legacy]
+						}
+						return (
+							<Line
+								key={i}
+								dataKey={dataKey}
+								name={label}
+								type="monotoneX"
+								dot={false}
+								strokeWidth={1.5}
+								stroke={color}
+								isAnimationActive={false}
+							/>
+						)
+					})}
+					<ChartLegend content={<ChartLegendContent />} />
+				</LineChart>
+			</ChartContainer>
+		</div>
+	)
+})

internal/site/src/components/charts/mem-chart.tsx

@@ -0,0 +1,107 @@
+import { Area, AreaChart, CartesianGrid, YAxis } from "recharts"
+import { ChartContainer, ChartTooltip, ChartTooltipContent, xAxis } from "@/components/ui/chart"
+import { cn, decimalString, formatShortDate, chartMargin, formatBytes, toFixedFloat } from "@/lib/utils"
+import { memo } from "react"
+import { ChartData } from "@/types"
+import { useLingui } from "@lingui/react/macro"
+import { Unit } from "@/lib/enums"
+import { useYAxisWidth } from "./hooks"
+
+export default memo(function MemChart({ chartData, showMax }: { chartData: ChartData; showMax: boolean }) {
+	const { yAxisWidth, updateYAxisWidth } = useYAxisWidth()
+	const { t } = useLingui()
+
+	const totalMem = toFixedFloat(chartData.systemStats.at(-1)?.stats.m ?? 0, 1)
+
+	// console.log('rendered at', new Date())
+
+	if (chartData.systemStats.length === 0) {
+		return null
+	}
+
+	return (
+		<div>
+			{/* {!yAxisSet && <Spinner />} */}
+			<ChartContainer
+				className={cn("h-full w-full absolute aspect-auto bg-card opacity-0 transition-opacity", {
+					"opacity-100": yAxisWidth,
+				})}
+			>
+				<AreaChart accessibilityLayer data={chartData.systemStats} margin={chartMargin}>
+					<CartesianGrid vertical={false} />
+					{totalMem && (
+						<YAxis
+							direction="ltr"
+							orientation={chartData.orientation}
+							// use "ticks" instead of domain / tickcount if need more control
+							domain={[0, totalMem]}
+							tickCount={9}
+							className="tracking-tighter"
+							width={yAxisWidth}
+							tickLine={false}
+							axisLine={false}
+							tickFormatter={(value) => {
+								const { value: convertedValue, unit } = formatBytes(value * 1024, false, Unit.Bytes, true)
+								return updateYAxisWidth(toFixedFloat(convertedValue, value >= 10 ? 0 : 1) + " " + unit)
+							}}
+						/>
+					)}
+					{xAxis(chartData)}
+					<ChartTooltip
+						// cursor={false}
+						animationEasing="ease-out"
+						animationDuration={150}
+						content={
+							<ChartTooltipContent
+								// @ts-ignore
+								itemSorter={(a, b) => a.order - b.order}
+								labelFormatter={(_, data) => formatShortDate(data[0].payload.created)}
+								contentFormatter={({ value }) => {
+									// mem values are supplied as GB
+									const { value: convertedValue, unit } = formatBytes(value * 1024, false, Unit.Bytes, true)
+									return decimalString(convertedValue, convertedValue >= 100 ? 1 : 2) + " " + unit
+								}}
+							/>
+						}
+					/>
+					<Area
+						name={t`Used`}
+						order={3}
+						dataKey={({ stats }) => (showMax ? stats?.mm : stats?.mu)}
+						type="monotoneX"
+						fill="var(--chart-2)"
+						fillOpacity={0.4}
+						stroke="var(--chart-2)"
+						stackId="1"
+						isAnimationActive={false}
+					/>
+					{/* {chartData.systemStats.at(-1)?.stats.mz && ( */}
+					<Area
+						name="ZFS ARC"
+						order={2}
+						dataKey={({ stats }) => (showMax ? null : stats?.mz)}
+						type="monotoneX"
+						fill="hsla(175 60% 45% / 0.8)"
+						fillOpacity={0.5}
+						stroke="hsla(175 60% 45% / 0.8)"
+						stackId="1"
+						isAnimationActive={false}
+					/>
+					{/* )} */}
+					<Area
+						name={t`Cache / Buffers`}
+						order={1}
+						dataKey={({ stats }) => (showMax ? null : stats?.mb)}
+						type="monotoneX"
+						fill="hsla(160 60% 45% / 0.5)"
+						fillOpacity={0.4}
+						stroke="hsla(160 60% 45% / 0.5)"
+						stackId="1"
+						isAnimationActive={false}
+					/>
+					{/* <ChartLegend content={<ChartLegendContent />} /> */}
+				</AreaChart>
+			</ChartContainer>
+		</div>
+	)
+})

internal/site/src/components/charts/swap-chart.tsx

@@ -0,0 +1,71 @@
+import { t } from "@lingui/core/macro"
+
+import { Area, AreaChart, CartesianGrid, YAxis } from "recharts"
+import { ChartContainer, ChartTooltip, ChartTooltipContent, xAxis } from "@/components/ui/chart"
+import { cn, formatShortDate, decimalString, chartMargin, formatBytes, toFixedFloat } from "@/lib/utils"
+import { ChartData } from "@/types"
+import { memo } from "react"
+import { $userSettings } from "@/lib/stores"
+import { useStore } from "@nanostores/react"
+import { useYAxisWidth } from "./hooks"
+
+export default memo(function SwapChart({ chartData }: { chartData: ChartData }) {
+	const { yAxisWidth, updateYAxisWidth } = useYAxisWidth()
+	const userSettings = useStore($userSettings)
+
+	if (chartData.systemStats.length === 0) {
+		return null
+	}
+
+	return (
+		<div>
+			<ChartContainer
+				className={cn("h-full w-full absolute aspect-auto bg-card opacity-0 transition-opacity", {
+					"opacity-100": yAxisWidth,
+				})}
+			>
+				<AreaChart accessibilityLayer data={chartData.systemStats} margin={chartMargin}>
+					<CartesianGrid vertical={false} />
+					<YAxis
+						direction="ltr"
+						orientation={chartData.orientation}
+						className="tracking-tighter"
+						domain={[0, () => toFixedFloat(chartData.systemStats.at(-1)?.stats.s ?? 0.04, 2)]}
+						width={yAxisWidth}
+						tickLine={false}
+						axisLine={false}
+						tickFormatter={(value) => {
+							const { value: convertedValue, unit } = formatBytes(value * 1024, false, userSettings.unitDisk, true)
+							return updateYAxisWidth(toFixedFloat(convertedValue, value >= 10 ? 0 : 1) + " " + unit)
+						}}
+					/>
+					{xAxis(chartData)}
+					<ChartTooltip
+						animationEasing="ease-out"
+						animationDuration={150}
+						content={
+							<ChartTooltipContent
+								labelFormatter={(_, data) => formatShortDate(data[0].payload.created)}
+								contentFormatter={({ value }) => {
+									// mem values are supplied as GB
+									const { value: convertedValue, unit } = formatBytes(value * 1024, false, userSettings.unitDisk, true)
+									return decimalString(convertedValue, convertedValue >= 100 ? 1 : 2) + " " + unit
+								}}
+								// indicator="line"
+							/>
+						}
+					/>
+					<Area
+						dataKey="stats.su"
+						name={t`Used`}
+						type="monotoneX"
+						fill="var(--chart-2)"
+						fillOpacity={0.4}
+						stroke="var(--chart-2)"
+						isAnimationActive={false}
+					/>
+				</AreaChart>
+			</ChartContainer>
+		</div>
+	)
+})

internal/site/src/components/charts/temperature-chart.tsx

@@ -0,0 +1,117 @@
+import { CartesianGrid, Line, LineChart, YAxis } from "recharts"
+
+import {
+	ChartContainer,
+	ChartLegend,
+	ChartLegendContent,
+	ChartTooltip,
+	ChartTooltipContent,
+	xAxis,
+} from "@/components/ui/chart"
+import { cn, formatShortDate, toFixedFloat, chartMargin, formatTemperature, decimalString } from "@/lib/utils"
+import { ChartData } from "@/types"
+import { memo, useMemo } from "react"
+import { $temperatureFilter, $userSettings } from "@/lib/stores"
+import { useStore } from "@nanostores/react"
+import { useYAxisWidth } from "./hooks"
+
+export default memo(function TemperatureChart({ chartData }: { chartData: ChartData }) {
+	const filter = useStore($temperatureFilter)
+	const userSettings = useStore($userSettings)
+	const { yAxisWidth, updateYAxisWidth } = useYAxisWidth()
+
+	if (chartData.systemStats.length === 0) {
+		return null
+	}
+
+	/** Format temperature data for chart and assign colors */
+	const newChartData = useMemo(() => {
+		const newChartData = { data: [], colors: {} } as {
+			data: Record<string, number | string>[]
+			colors: Record<string, string>
+		}
+		const tempSums = {} as Record<string, number>
+		for (let data of chartData.systemStats) {
+			let newData = { created: data.created } as Record<string, number | string>
+			let keys = Object.keys(data.stats?.t ?? {})
+			for (let i = 0; i < keys.length; i++) {
+				let key = keys[i]
+				newData[key] = data.stats.t![key]
+				tempSums[key] = (tempSums[key] ?? 0) + newData[key]
+			}
+			newChartData.data.push(newData)
+		}
+		const keys = Object.keys(tempSums).sort((a, b) => tempSums[b] - tempSums[a])
+		for (let key of keys) {
+			newChartData.colors[key] = `hsl(${((keys.indexOf(key) * 360) / keys.length) % 360}, 60%, 55%)`
+		}
+		return newChartData
+	}, [chartData])
+
+	const colors = Object.keys(newChartData.colors)
+
+	// console.log('rendered at', new Date())
+
+	return (
+		<div>
+			<ChartContainer
+				className={cn("h-full w-full absolute aspect-auto bg-card opacity-0 transition-opacity", {
+					"opacity-100": yAxisWidth,
+				})}
+			>
+				<LineChart accessibilityLayer data={newChartData.data} margin={chartMargin}>
+					<CartesianGrid vertical={false} />
+					<YAxis
+						direction="ltr"
+						orientation={chartData.orientation}
+						className="tracking-tighter"
+						domain={[0, "auto"]}
+						width={yAxisWidth}
+						tickFormatter={(val) => {
+							const { value, unit } = formatTemperature(val, userSettings.unitTemp)
+							return updateYAxisWidth(toFixedFloat(value, 2) + " " + unit)
+						}}
+						tickLine={false}
+						axisLine={false}
+					/>
+					{xAxis(chartData)}
+					<ChartTooltip
+						animationEasing="ease-out"
+						animationDuration={150}
+						// @ts-ignore
+						itemSorter={(a, b) => b.value - a.value}
+						content={
+							<ChartTooltipContent
+								labelFormatter={(_, data) => formatShortDate(data[0].payload.created)}
+								contentFormatter={(item) => {
+									const { value, unit } = formatTemperature(item.value, userSettings.unitTemp)
+									return decimalString(value) + " " + unit
+								}}
+								filter={filter}
+							/>
+						}
+					/>
+					{colors.map((key) => {
+						const filtered = filter && !key.toLowerCase().includes(filter.toLowerCase())
+						let strokeOpacity = filtered ? 0.1 : 1
+						return (
+							<Line
+								key={key}
+								dataKey={key}
+								name={key}
+								type="monotoneX"
+								dot={false}
+								strokeWidth={1.5}
+								stroke={newChartData.colors[key]}
+								strokeOpacity={strokeOpacity}
+								activeDot={{ opacity: filtered ? 0 : 1 }}
+								isAnimationActive={false}
+							/>
+						)
+					})}
+					{colors.length < 12 && <ChartLegend content={<ChartLegendContent />} />}
+				</LineChart>
+			</ChartContainer>
+		</div>
+	)
+})

internal/site/src/components/command-palette.tsx

@@ -0,0 +1,225 @@
+import {
+	AlertOctagonIcon,
+	BookIcon,
+	DatabaseBackupIcon,
+	FingerprintIcon,
+	LayoutDashboard,
+	LogsIcon,
+	MailIcon,
+	Server,
+	SettingsIcon,
+	UsersIcon,
+} from "lucide-react"
+
+import {
+	CommandDialog,
+	CommandEmpty,
+	CommandGroup,
+	CommandInput,
+	CommandItem,
+	CommandList,
+	CommandSeparator,
+	CommandShortcut,
+} from "@/components/ui/command"
+import { memo, useEffect, useMemo } from "react"
+import { $systems } from "@/lib/stores"
+import { getHostDisplayValue, listen } from "@/lib/utils"
+import { $router, basePath, navigate, prependBasePath } from "./router"
+import { Trans } from "@lingui/react/macro"
+import { t } from "@lingui/core/macro"
+import { getPagePath } from "@nanostores/router"
+import { DialogDescription } from "@radix-ui/react-dialog"
+import { isAdmin } from "@/lib/api"
+
+export default memo(function CommandPalette({ open, setOpen }: { open: boolean; setOpen: (open: boolean) => void }) {
+	useEffect(() => {
+		const down = (e: KeyboardEvent) => {
+			if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
+				e.preventDefault()
+				setOpen(!open)
+			}
+		}
+		return listen(document, "keydown", down)
+	}, [open, setOpen])
+
+	return useMemo(() => {
+		const systems = $systems.get()
+		const SettingsShortcut = (
+			<CommandShortcut>
+				<Trans>Settings</Trans>
+			</CommandShortcut>
+		)
+		const AdminShortcut = (
+			<CommandShortcut>
+				<Trans>Admin</Trans>
+			</CommandShortcut>
+		)
+		return (
+			<CommandDialog open={open} onOpenChange={setOpen}>
+				<DialogDescription className="sr-only">Command palette</DialogDescription>
+				<CommandInput placeholder={t`Search for systems or settings...`} />
+				<CommandList>
+					{systems.length > 0 && (
+						<>
+							<CommandGroup>
+								{systems.map((system) => (
+									<CommandItem
+										key={system.id}
+										onSelect={() => {
+											navigate(getPagePath($router, "system", { name: system.name }))
+											setOpen(false)
+										}}
+									>
+										<Server className="me-2 size-4" />
+										<span className="max-w-60 truncate">{system.name}</span>
+										<CommandShortcut>{getHostDisplayValue(system)}</CommandShortcut>
+									</CommandItem>
+								))}
+							</CommandGroup>
+							<CommandSeparator className="mb-1.5" />
+						</>
+					)}
+					<CommandGroup heading={t`Pages / Settings`}>
+						<CommandItem
+							keywords={["home"]}
+							onSelect={() => {
+								navigate(basePath)
+								setOpen(false)
+							}}
+						>
+							<LayoutDashboard className="me-2 size-4" />
+							<span>
+								<Trans>Dashboard</Trans>
+							</span>
+							<CommandShortcut>
+								<Trans>Page</Trans>
+							</CommandShortcut>
+						</CommandItem>
+						<CommandItem
+							onSelect={() => {
+								navigate(getPagePath($router, "settings", { name: "general" }))
+								setOpen(false)
+							}}
+						>
+							<SettingsIcon className="me-2 size-4" />
+							<span>
+								<Trans>Settings</Trans>
+							</span>
+							{SettingsShortcut}
+						</CommandItem>
+						<CommandItem
+							keywords={["alerts"]}
+							onSelect={() => {
+								navigate(getPagePath($router, "settings", { name: "notifications" }))
+								setOpen(false)
+							}}
+						>
+							<MailIcon className="me-2 size-4" />
+							<span>
+								<Trans>Notifications</Trans>
+							</span>
+							{SettingsShortcut}
+						</CommandItem>
+						<CommandItem
+							keywords={[t`Universal token`]}
+							onSelect={() => {
+								navigate(getPagePath($router, "settings", { name: "tokens" }))
+								setOpen(false)
+							}}
+						>
+							<FingerprintIcon className="me-2 size-4" />
+							<span>
+								<Trans>Tokens & Fingerprints</Trans>
+							</span>
+							{SettingsShortcut}
+						</CommandItem>
+						<CommandItem
+							onSelect={() => {
+								navigate(getPagePath($router, "settings", { name: "alert-history" }))
+								setOpen(false)
+							}}
+						>
+							<AlertOctagonIcon className="me-2 size-4" />
+							<span>
+								<Trans>Alert History</Trans>
+							</span>
+							{SettingsShortcut}
+						</CommandItem>
+						<CommandItem
+							keywords={["help", "oauth", "oidc"]}
+							onSelect={() => {
+								window.location.href = "https://beszel.dev/guide/what-is-beszel"
+							}}
+						>
+							<BookIcon className="me-2 size-4" />
+							<span>
+								<Trans>Documentation</Trans>
+							</span>
+							<CommandShortcut>beszel.dev</CommandShortcut>
+						</CommandItem>
+					</CommandGroup>
+					{isAdmin() && (
+						<>
+							<CommandSeparator className="mb-1.5" />
+							<CommandGroup heading={t`Admin`}>
+								<CommandItem
+									keywords={["pocketbase"]}
+									onSelect={() => {
+										setOpen(false)
+										window.open(prependBasePath("/_/"), "_blank")
+									}}
+								>
+									<UsersIcon className="me-2 size-4" />
+									<span>
+										<Trans>Users</Trans>
+									</span>
+									{AdminShortcut}
+								</CommandItem>
+								<CommandItem
+									onSelect={() => {
+										setOpen(false)
+										window.open(prependBasePath("/_/#/logs"), "_blank")
+									}}
+								>
+									<LogsIcon className="me-2 size-4" />
+									<span>
+										<Trans>Logs</Trans>
+									</span>
+									{AdminShortcut}
+								</CommandItem>
+								<CommandItem
+									onSelect={() => {
+										setOpen(false)
+										window.open(prependBasePath("/_/#/settings/backups"), "_blank")
+									}}
+								>
+									<DatabaseBackupIcon className="me-2 size-4" />
+									<span>
+										<Trans>Backups</Trans>
+									</span>
+									{AdminShortcut}
+								</CommandItem>
+								<CommandItem
+									keywords={["email"]}
+									onSelect={() => {
+										setOpen(false)
+										window.open(prependBasePath("/_/#/settings/mail"), "_blank")
+									}}
+								>
+									<MailIcon className="me-2 size-4" />
+									<span>
+										<Trans>SMTP settings</Trans>
+									</span>
+									{AdminShortcut}
+								</CommandItem>
+							</CommandGroup>
+						</>
+					)}
+					<CommandEmpty>
+						<Trans>No results found.</Trans>
+					</CommandEmpty>
+				</CommandList>
+			</CommandDialog>
+		)
+	}, [open])
+})

internal/site/src/components/copy-to-clipboard.tsx

@@ -0,0 +1,51 @@
+import { Trans } from "@lingui/react/macro";
+import { useEffect, useMemo, useRef } from "react"
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "./ui/dialog"
+import { Textarea } from "./ui/textarea"
+import { $copyContent } from "@/lib/stores"
+
+export default function CopyToClipboard({ content }: { content: string }) {
+	return (
+		<Dialog defaultOpen={true}>
+			<DialogContent className="w-[90%] rounded-lg md:pt-4" style={{ maxWidth: 530 }}>
+				<DialogHeader>
+					<DialogTitle>
+						<Trans>Copy text</Trans>
+					</DialogTitle>
+					<DialogDescription className="hidden xs:block">
+						<Trans>Automatic copy requires a secure context.</Trans>
+					</DialogDescription>
+				</DialogHeader>
+				<CopyTextarea content={content} />
+			</DialogContent>
+		</Dialog>
+	)
+}
+
+function CopyTextarea({ content }: { content: string }) {
+	const textareaRef = useRef<HTMLTextAreaElement>(null)
+
+	const rows = useMemo(() => {
+		return content.split("\n").length
+	}, [content])
+
+	useEffect(() => {
+		if (textareaRef.current) {
+			textareaRef.current.select()
+		}
+	}, [textareaRef])
+
+	useEffect(() => {
+		return () => $copyContent.set("")
+	}, [])
+
+	return (
+		<Textarea
+			className="font-mono overflow-hidden whitespace-pre"
+			rows={rows}
+			value={content}
+			readOnly
+			ref={textareaRef}
+		/>
+	)
+}

internal/site/src/components/install-dropdowns.tsx

@@ -0,0 +1,99 @@
+import { memo } from "react"
+import { DropdownMenuContent, DropdownMenuItem } from "./ui/dropdown-menu"
+import { copyToClipboard, getHubURL } from "@/lib/utils"
+import { i18n } from "@lingui/core"
+
+// const isbeta = beszel.hub_version.includes("beta")
+// const imagetag = isbeta ? ":edge" : ""
+
+/**
+ * Get the URL of the script to install the agent.
+ * @param path - The path to the script (e.g. "/brew").
+ * @returns The URL for the script.
+ */
+const getScriptUrl = (path: string = "") => {
+	return `https://get.beszel.dev${path}`
+	// no beta for now
+	// const url = new URL("https://get.beszel.dev")
+	// url.pathname = path
+	// if (isBeta) {
+	// 	url.searchParams.set("beta", "1")
+	// }
+	// return url.toString()
+}
+
+export function copyDockerCompose(port = "45876", publicKey: string, token: string) {
+	copyToClipboard(`services:
+  beszel-agent:
+    image: henrygd/beszel-agent
+    container_name: beszel-agent
+    restart: unless-stopped
+    network_mode: host
+    volumes:
+      - /var/run/docker.sock:/var/run/docker.sock:ro
+      - ./beszel_agent_data:/var/lib/beszel-agent
+      # monitor other disks / partitions by mounting a folder in /extra-filesystems
+      # - /mnt/disk/.beszel:/extra-filesystems/sda1:ro
+    environment:
+      LISTEN: ${port}
+      KEY: '${publicKey}'
+      TOKEN: ${token}
+      HUB_URL: ${getHubURL()}`)
+}
+
+export function copyDockerRun(port = "45876", publicKey: string, token: string) {
+	copyToClipboard(
+		`docker run -d --name beszel-agent --network host --restart unless-stopped -v /var/run/docker.sock:/var/run/docker.sock:ro -v ./beszel_agent_data:/var/lib/beszel-agent -e KEY="${publicKey}" -e LISTEN=${port} -e TOKEN="${token}" -e HUB_URL="${getHubURL()}" henrygd/beszel-agent`
+	)
+}
+
+export function copyLinuxCommand(port = "45876", publicKey: string, token: string, brew = false) {
+	let cmd = `curl -sL ${getScriptUrl(
+		brew ? "/brew" : ""
+	)} -o /tmp/install-agent.sh && chmod +x /tmp/install-agent.sh && /tmp/install-agent.sh -p ${port} -k "${publicKey}" -t "${token}" -url "${getHubURL()}"`
+	// brew script does not support --china-mirrors
+	if (!brew && (i18n.locale + navigator.language).includes("zh-CN")) {
+		cmd += ` --china-mirrors`
+	}
+	copyToClipboard(cmd)
+}
+
+export function copyWindowsCommand(port = "45876", publicKey: string, token: string) {
+	copyToClipboard(
+		`& iwr -useb ${getScriptUrl()} -OutFile "$env:TEMP\\install-agent.ps1"; & Powershell -ExecutionPolicy Bypass -File "$env:TEMP\\install-agent.ps1" -Key "${publicKey}" -Port ${port} -Token "${token}" -Url "${getHubURL()}"`
+	)
+}
+
+export interface DropdownItem {
+	text: string
+	onClick?: () => void
+	url?: string
+	icons?: React.ComponentType<React.SVGProps<SVGSVGElement>>[]
+}
+
+export const InstallDropdown = memo(({ items }: { items: DropdownItem[] }) => {
+	return (
+		<DropdownMenuContent align="end">
+			{items.map((item, index) => {
+				const className = "cursor-pointer flex items-center gap-1.5"
+				return item.url ? (
+					<DropdownMenuItem key={index} asChild>
+						<a href={item.url} className={className} target="_blank" rel="noopener noreferrer">
+							{item.text}{" "}
+							{item.icons?.map((Icon, iconIndex) => (
+								<Icon key={iconIndex} className="size-4" />
+							))}
+						</a>
+					</DropdownMenuItem>
+				) : (
+					<DropdownMenuItem key={index} onClick={item.onClick} className={className}>
+						{item.text}{" "}
+						{item.icons?.map((Icon, iconIndex) => (
+							<Icon key={iconIndex} className="size-4" />
+						))}
+					</DropdownMenuItem>
+				)
+			})}
+		</DropdownMenuContent>
+	)
+})

internal/site/src/components/lang-toggle.tsx

@@ -0,0 +1,34 @@
+import { LanguagesIcon } from "lucide-react"
+
+import { Button } from "@/components/ui/button"
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
+import languages from "@/lib/languages"
+import { cn } from "@/lib/utils"
+import { useLingui } from "@lingui/react/macro"
+import { dynamicActivate } from "@/lib/i18n"
+
+export function LangToggle() {
+	const { i18n } = useLingui()
+
+	return (
+		<DropdownMenu>
+			<DropdownMenuTrigger asChild>
+				<Button variant={"ghost"} size="icon" className="hidden 450:flex">
+					<LanguagesIcon className="absolute h-[1.2rem] w-[1.2rem] light:opacity-85" />
+					<span className="sr-only">Language</span>
+				</Button>
+			</DropdownMenuTrigger>
+			<DropdownMenuContent className="grid grid-cols-3">
+				{languages.map(({ lang, label, e }) => (
+					<DropdownMenuItem
+						key={lang}
+						className={cn("px-2.5 flex gap-2.5 cursor-pointer", lang === i18n.locale && "bg-accent/70 font-medium")}
+						onClick={() => dynamicActivate(lang)}
+					>
+						<span>{e}</span> {label}
+					</DropdownMenuItem>
+				))}
+			</DropdownMenuContent>
+		</DropdownMenu>
+	)
+}

internal/site/src/components/login/auth-form.tsx

@@ -0,0 +1,363 @@
+import { t } from "@lingui/core/macro"
+import { Trans } from "@lingui/react/macro"
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { KeyIcon, LoaderCircle, LockIcon, LogInIcon, MailIcon } from "lucide-react"
+import { $authenticated } from "@/lib/stores"
+import * as v from "valibot"
+import { toast } from "../ui/use-toast"
+import { Dialog, DialogContent, DialogTrigger, DialogHeader, DialogTitle } from "@/components/ui/dialog"
+import { useCallback, useEffect, useState } from "react"
+import { AuthMethodsList, AuthProviderInfo, OAuth2AuthConfig } from "pocketbase"
+import { $router, Link, prependBasePath } from "../router"
+import { getPagePath } from "@nanostores/router"
+import { pb } from "@/lib/api"
+import { OtpInputForm } from "./otp-forms"
+
+const honeypot = v.literal("")
+const emailSchema = v.pipe(v.string(), v.email(t`Invalid email address.`))
+const passwordSchema = v.pipe(
+	v.string(),
+	v.minLength(8, t`Password must be at least 8 characters.`),
+	v.maxBytes(72, t`Password must be less than 72 bytes.`)
+)
+
+const LoginSchema = v.looseObject({
+	name: honeypot,
+	email: emailSchema,
+	password: passwordSchema,
+})
+
+const RegisterSchema = v.looseObject({
+	name: honeypot,
+	email: emailSchema,
+	password: passwordSchema,
+	passwordConfirm: passwordSchema,
+})
+
+export const showLoginFaliedToast = (description?: string) => {
+	description ||= t`Please check your credentials and try again`
+	toast({
+		title: t`Login attempt failed`,
+		description,
+		variant: "destructive",
+	})
+}
+
+const getAuthProviderIcon = (provider: AuthProviderInfo) => {
+	let { name } = provider
+	if (name.startsWith("oidc")) {
+		name = "oidc"
+	}
+	return prependBasePath(`/_/images/oauth2/${name}.svg`)
+}
+
+export function UserAuthForm({
+	className,
+	isFirstRun,
+	authMethods,
+	...props
+}: {
+	className?: string
+	isFirstRun: boolean
+	authMethods: AuthMethodsList
+}) {
+	const [isLoading, setIsLoading] = useState<boolean>(false)
+	const [isOauthLoading, setIsOauthLoading] = useState<boolean>(false)
+	const [errors, setErrors] = useState<Record<string, string | undefined>>({})
+	const [mfaId, setMfaId] = useState<string | undefined>()
+	const [otpId, setOtpId] = useState<string | undefined>()
+
+	const handleSubmit = useCallback(
+		async (e: React.FormEvent<HTMLFormElement>) => {
+			e.preventDefault()
+			setIsLoading(true)
+			// store email for later use if mfa is enabled
+			let email = ""
+			try {
+				const formData = new FormData(e.target as HTMLFormElement)
+				const data = Object.fromEntries(formData) as Record<string, any>
+				const Schema = isFirstRun ? RegisterSchema : LoginSchema
+				const result = v.safeParse(Schema, data)
+				if (!result.success) {
+					console.log(result)
+					let errors = {}
+					for (const issue of result.issues) {
+						// @ts-ignore
+						errors[issue.path[0].key] = issue.message
+					}
+					setErrors(errors)
+					return
+				}
+				const { password, passwordConfirm } = result.output
+				email = result.output.email
+				if (isFirstRun) {
+					// check that passwords match
+					if (password !== passwordConfirm) {
+						let msg = "Passwords do not match"
+						setErrors({ passwordConfirm: msg })
+						return
+					}
+					await pb.send("/api/beszel/create-user", {
+						method: "POST",
+						body: JSON.stringify({ email, password }),
+					})
+					await pb.collection("users").authWithPassword(email, password)
+				} else {
+					await pb.collection("users").authWithPassword(email, password)
+				}
+				$authenticated.set(true)
+			} catch (err: any) {
+				const mfaId = err?.response?.mfaId
+				if (!mfaId) {
+					showLoginFaliedToast()
+					throw err
+				}
+				setMfaId(mfaId)
+				try {
+					const { otpId } = await pb.collection("users").requestOTP(email)
+					setOtpId(otpId)
+				} catch (err) {
+					console.log({ err })
+					showLoginFaliedToast()
+				}
+			} finally {
+				setIsLoading(false)
+			}
+		},
+		[isFirstRun]
+	)
+
+	if (!authMethods) {
+		return null
+	}
+
+	const authProviders = authMethods.oauth2.providers ?? []
+	const oauthEnabled = authMethods.oauth2.enabled && authProviders.length > 0
+	const passwordEnabled = authMethods.password.enabled
+	const otpEnabled = authMethods.otp.enabled
+	const mfaEnabled = authMethods.mfa.enabled
+
+	function loginWithOauth(provider: AuthProviderInfo, forcePopup = false) {
+		setIsOauthLoading(true)
+		const oAuthOpts: OAuth2AuthConfig = {
+			provider: provider.name,
+		}
+		// https://github.com/pocketbase/pocketbase/discussions/2429#discussioncomment-5943061
+		if (forcePopup || navigator.userAgent.match(/iPhone|iPad|iPod/i)) {
+			const authWindow = window.open()
+			if (!authWindow) {
+				setIsOauthLoading(false)
+				toast({
+					title: t`Error`,
+					description: t`Please enable pop-ups for this site`,
+				})
+				return
+			}
+			oAuthOpts.urlCallback = (url) => {
+				authWindow.location.href = url
+			}
+		}
+		pb.collection("users")
+			.authWithOAuth2(oAuthOpts)
+			.then(() => {
+				$authenticated.set(pb.authStore.isValid)
+			})
+			.catch(showLoginFaliedToast)
+			.finally(() => {
+				setIsOauthLoading(false)
+			})
+	}
+
+	useEffect(() => {
+		// auto login if password disabled and only one auth provider
+		if (!passwordEnabled && authProviders.length === 1 && !sessionStorage.getItem("lo")) {
+			// Add a small timeout to ensure browser is ready to handle popups
+			setTimeout(() => {
+				loginWithOauth(authProviders[0], true)
+			}, 300)
+		}
+	}, [])
+
+	if (otpId && mfaId) {
+		return <OtpInputForm otpId={otpId} mfaId={mfaId} />
+	}
+
+	return (
+		<div className={cn("grid gap-6", className)} {...props}>
+			{passwordEnabled && (
+				<>
+					<form onSubmit={handleSubmit} onChange={() => setErrors({})}>
+						<div className="grid gap-2.5">
+							<div className="grid gap-1 relative">
+								<MailIcon className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
+								<Label className="sr-only" htmlFor="email">
+									<Trans>Email</Trans>
+								</Label>
+								<Input
+									id="email"
+									name="email"
+									required
+									placeholder="name@example.com"
+									type="text"
+									autoCapitalize="none"
+									autoComplete="email"
+									autoCorrect="off"
+									disabled={isLoading || isOauthLoading}
+									className={cn("ps-9", errors?.email && "border-red-500")}
+								/>
+								{errors?.email && <p className="px-1 text-xs text-red-600">{errors.email}</p>}
+							</div>
+							<div className="grid gap-1 relative">
+								<LockIcon className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
+								<Label className="sr-only" htmlFor="pass">
+									<Trans>Password</Trans>
+								</Label>
+								<Input
+									id="pass"
+									name="password"
+									placeholder={t`Password`}
+									required
+									type="password"
+									autoComplete="current-password"
+									disabled={isLoading || isOauthLoading}
+									className={cn("ps-9", errors?.password && "border-red-500")}
+								/>
+								{errors?.password && <p className="px-1 text-xs text-red-600">{errors.password}</p>}
+							</div>
+							{isFirstRun && (
+								<div className="grid gap-1 relative">
+									<LockIcon className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
+									<Label className="sr-only" htmlFor="pass2">
+										<Trans>Confirm password</Trans>
+									</Label>
+									<Input
+										id="pass2"
+										name="passwordConfirm"
+										placeholder={t`Confirm password`}
+										required
+										type="password"
+										autoComplete="current-password"
+										disabled={isLoading || isOauthLoading}
+										className={cn("ps-9", errors?.password && "border-red-500")}
+									/>
+									{errors?.passwordConfirm && <p className="px-1 text-xs text-red-600">{errors.passwordConfirm}</p>}
+								</div>
+							)}
+							<div className="sr-only">
+								{/* honeypot */}
+								<label htmlFor="name"></label>
+								<input id="name" type="text" name="name" tabIndex={-1} autoComplete="off" />
+							</div>
+							<button className={cn(buttonVariants())} disabled={isLoading}>
+								{isLoading ? (
+									<LoaderCircle className="me-2 h-4 w-4 animate-spin" />
+								) : (
+									<LogInIcon className="me-2 h-4 w-4" />
+								)}
+								{isFirstRun ? t`Create account` : t`Sign in`}
+							</button>
+						</div>
+					</form>
+					{(isFirstRun || oauthEnabled || (otpEnabled && !mfaEnabled)) && (
+						// only show 'continue with' during onboarding or if we have auth providers
+						<div className="relative">
+							<div className="absolute inset-0 flex items-center">
+								<span className="w-full border-t" />
+							</div>
+							<div className="relative flex justify-center text-xs uppercase">
+								<span className="bg-background px-2 text-muted-foreground">
+									<Trans>Or continue with</Trans>
+								</span>
+							</div>
+						</div>
+					)}
+				</>
+			)}
+			{/* hide OTP button if MFA is enabled (it will be used as MFA) */}
+			{otpEnabled && !mfaEnabled && (
+				<div className="grid gap-2 -mt-1">
+					<Link href="/request-otp" type="button" className={cn(buttonVariants({ variant: "outline" }), "flex gap-2")}>
+						<KeyIcon className="size-4" />
+						<Trans>One-time password</Trans>
+					</Link>
+				</div>
+			)}
+			{oauthEnabled && (
+				<div className="grid gap-2 -mt-1">
+					{authMethods.oauth2.providers.map((provider) => (
+						<button
+							key={provider.name}
+							type="button"
+							className={cn(buttonVariants({ variant: "outline" }), {
+								"justify-self-center": !passwordEnabled,
+								"px-5": !passwordEnabled,
+							})}
+							onClick={() => loginWithOauth(provider)}
+							disabled={isLoading || isOauthLoading}
+						>
+							{isOauthLoading ? (
+								<LoaderCircle className="me-2 h-4 w-4 animate-spin" />
+							) : (
+								<img
+									className="me-2 h-4 w-4 dark:brightness-0 dark:invert"
+									src={getAuthProviderIcon(provider)}
+									alt=""
+									// onError={(e) => {
+									// 	e.currentTarget.src = "/static/lock.svg"
+									// }}
+								/>
+							)}
+							<span className="translate-y-px">{provider.displayName}</span>
+						</button>
+					))}
+				</div>
+			)}
+			{!oauthEnabled && isFirstRun && (
+				// only show GitHub button / dialog during onboarding
+				<Dialog>
+					<DialogTrigger asChild>
+						<button type="button" className={cn(buttonVariants({ variant: "outline" }))}>
+							<img className="me-2 h-4 w-4 dark:invert" src={prependBasePath("/_/images/oauth2/github.svg")} alt="" />
+							<span className="translate-y-px">GitHub</span>
+						</button>
+					</DialogTrigger>
+					<DialogContent style={{ maxWidth: 440, width: "90%" }}>
+						<DialogHeader>
+							<DialogTitle>
+								<Trans>OAuth 2 / OIDC support</Trans>
+							</DialogTitle>
+						</DialogHeader>
+						<div className="text-primary/70 text-[0.95em] contents">
+							<p>
+								<Trans>Beszel supports OpenID Connect and many OAuth2 authentication providers.</Trans>
+							</p>
+							<p>
+								<Trans>
+									Please see{" "}
+									<a
+										href="https://beszel.dev/guide/oauth"
+										className={cn(buttonVariants({ variant: "link" }), "p-0 h-auto")}
+									>
+										the documentation
+									</a>{" "}
+									for instructions.
+								</Trans>
+							</p>
+						</div>
+					</DialogContent>
+				</Dialog>
+			)}
+			{passwordEnabled && !isFirstRun && (
+				<Link
+					href={getPagePath($router, "forgot_password")}
+					className="text-sm mx-auto hover:text-brand underline underline-offset-4 opacity-70 hover:opacity-100 transition-opacity"
+				>
+					<Trans>Forgot password?</Trans>
+				</Link>
+			)}
+		</div>
+	)
+}

internal/site/src/components/login/forgot-pass-form.tsx

@@ -0,0 +1,111 @@
+import { Trans } from "@lingui/react/macro"
+import { t } from "@lingui/core/macro"
+import { LoaderCircle, MailIcon, SendHorizonalIcon } from "lucide-react"
+import { Input } from "../ui/input"
+import { Label } from "../ui/label"
+import { useCallback, useState } from "react"
+import { toast } from "../ui/use-toast"
+import { buttonVariants } from "../ui/button"
+import { cn } from "@/lib/utils"
+import { Dialog, DialogHeader } from "../ui/dialog"
+import { DialogContent, DialogTrigger, DialogTitle } from "../ui/dialog"
+import { pb } from "@/lib/api"
+
+const showLoginFaliedToast = () => {
+	toast({
+		title: t`Login attempt failed`,
+		description: t`Please check your credentials and try again`,
+		variant: "destructive",
+	})
+}
+
+export default function ForgotPassword() {
+	const [isLoading, setIsLoading] = useState<boolean>(false)
+	const [email, setEmail] = useState("")
+
+	const handleSubmit = useCallback(
+		async (e: React.FormEvent<HTMLFormElement>) => {
+			e.preventDefault()
+			setIsLoading(true)
+			try {
+				// console.log(email)
+				await pb.collection("users").requestPasswordReset(email)
+				toast({
+					title: t`Password reset request received`,
+					description: t`Check ${email} for a reset link.`,
+				})
+			} catch (e) {
+				showLoginFaliedToast()
+			} finally {
+				setIsLoading(false)
+				setEmail("")
+			}
+		},
+		[email]
+	)
+
+	return (
+		<>
+			<form onSubmit={handleSubmit}>
+				<div className="grid gap-3">
+					<div className="grid gap-1 relative">
+						<MailIcon className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
+						<Label className="sr-only" htmlFor="email">
+							<Trans>Email</Trans>
+						</Label>
+						<Input
+							value={email}
+							onChange={(e) => setEmail(e.target.value)}
+							id="email"
+							name="email"
+							required
+							placeholder="name@example.com"
+							type="email"
+							autoCapitalize="none"
+							autoComplete="email"
+							autoCorrect="off"
+							disabled={isLoading}
+							className="ps-9"
+						/>
+					</div>
+					<button className={cn(buttonVariants())} disabled={isLoading}>
+						{isLoading ? (
+							<LoaderCircle className="me-2 h-4 w-4 animate-spin" />
+						) : (
+							<SendHorizonalIcon className="me-2 h-4 w-4" />
+						)}
+						<Trans>Reset Password</Trans>
+					</button>
+				</div>
+			</form>
+			<Dialog>
+				<DialogTrigger asChild>
+					<button className="text-sm mx-auto hover:text-brand underline underline-offset-4 opacity-70 hover:opacity-100 transition-opacity">
+						<Trans>Command line instructions</Trans>
+					</button>
+				</DialogTrigger>
+				<DialogContent className="max-w-[41em]">
+					<DialogHeader>
+						<DialogTitle>
+							<Trans>Command line instructions</Trans>
+						</DialogTitle>
+					</DialogHeader>
+					<p className="text-primary/70 text-[0.95em] leading-relaxed">
+						<Trans>
+							If you've lost the password to your admin account, you may reset it using the following command.
+						</Trans>
+					</p>
+					<p className="text-primary/70 text-[0.95em] leading-relaxed">
+						<Trans>Then log into the backend and reset your user account password in the users table.</Trans>
+					</p>
+					<code className="bg-muted rounded-sm py-0.5 px-2.5 me-auto text-sm">
+						./beszel superuser upsert user@example.com password
+					</code>
+					<code className="bg-muted rounded-sm py-0.5 px-2.5 me-auto text-sm">
+						docker exec beszel /beszel superuser upsert name@example.com password
+					</code>
+				</DialogContent>
+			</Dialog>
+		</>
+	)
+}

internal/site/src/components/login/login.tsx

@@ -0,0 +1,79 @@
+import { t } from "@lingui/core/macro"
+import { UserAuthForm } from "@/components/login/auth-form"
+import { Logo } from "../logo"
+import { useEffect, useMemo, useState } from "react"
+import { useStore } from "@nanostores/react"
+import ForgotPassword from "./forgot-pass-form"
+import { $router } from "../router"
+import { AuthMethodsList } from "pocketbase"
+import { useTheme } from "../theme-provider"
+import { pb } from "@/lib/api"
+import { ModeToggle } from "../mode-toggle"
+import { OtpRequestForm } from "./otp-forms"
+
+export default function () {
+	const page = useStore($router)
+	const [isFirstRun, setFirstRun] = useState(false)
+	const [authMethods, setAuthMethods] = useState<AuthMethodsList>()
+	const { theme } = useTheme()
+
+	useEffect(() => {
+		document.title = t`Login` + " / Beszel"
+
+		pb.send("/api/beszel/first-run", {}).then(({ firstRun }) => {
+			setFirstRun(firstRun)
+		})
+	}, [])
+
+	useEffect(() => {
+		pb.collection("users")
+			.listAuthMethods()
+			.then((methods) => {
+				setAuthMethods(methods)
+			})
+	}, [])
+
+	const subtitle = useMemo(() => {
+		if (isFirstRun) {
+			return t`Please create an admin account`
+		} else if (page?.route === "forgot_password") {
+			return t`Enter email address to reset password`
+		} else if (page?.route === "request_otp") {
+			return t`Request a one-time password`
+		} else {
+			return t`Please sign in to your account`
+		}
+	}, [isFirstRun, page])
+
+	if (!authMethods) {
+		return null
+	}
+
+	return (
+		<div className="min-h-svh grid items-center py-12">
+			<div
+				className="grid gap-5 w-full px-4 mx-auto"
+				// @ts-ignore
+				style={{ maxWidth: "21.5em", "--border": theme == "light" ? "hsl(30, 8%, 70%)" : "hsl(220, 3%, 25%)" }}
+			>
+				<div className="absolute top-3 right-3">
+					<ModeToggle />
+				</div>
+				<div className="text-center">
+					<h1 className="mb-3">
+						<Logo className="h-7 fill-foreground mx-auto" />
+						<span className="sr-only">Beszel</span>
+					</h1>
+					<p className="text-sm text-muted-foreground">{subtitle}</p>
+				</div>
+				{page?.route === "forgot_password" ? (
+					<ForgotPassword />
+				) : page?.route === "request_otp" ? (
+					<OtpRequestForm />
+				) : (
+					<UserAuthForm isFirstRun={isFirstRun} authMethods={authMethods} />
+				)}
+			</div>
+		</div>
+	)
+}

internal/site/src/components/login/otp-forms.tsx

@@ -0,0 +1,106 @@
+import { useCallback, useState } from "react"
+import { pb } from "@/lib/api"
+import { $authenticated } from "@/lib/stores"
+import { InputOTP, InputOTPGroup, InputOTPSlot } from "@/components/ui/otp"
+import { Trans } from "@lingui/react/macro"
+import { showLoginFaliedToast } from "./auth-form"
+import { cn } from "@/lib/utils"
+import { MailIcon, LoaderCircle, SendHorizonalIcon } from "lucide-react"
+import { Label } from "../ui/label"
+import { buttonVariants } from "../ui/button"
+import { Input } from "../ui/input"
+import { $router } from "../router"
+
+export function OtpInputForm({ otpId, mfaId }: { otpId: string; mfaId: string }) {
+	const [value, setValue] = useState("")
+
+	if (value.length === 6) {
+		pb.collection("users")
+			.authWithOTP(otpId, value, { mfaId })
+			.then(() => {
+				$router.open("/")
+				$authenticated.set(true)
+			})
+			.catch((err) => {
+				showLoginFaliedToast(err.message)
+			})
+	}
+
+	return (
+		<div className="grid gap-3 items-center justify-center">
+			<InputOTP maxLength={6} value={value} onChange={setValue} autoFocus>
+				<InputOTPGroup>
+					{Array.from({ length: 6 }).map((_, i) => (
+						<InputOTPSlot key={i} index={i} />
+					))}
+				</InputOTPGroup>
+			</InputOTP>
+			<div className="text-center text-sm text-muted-foreground">
+				<Trans>Enter your one-time password.</Trans>
+			</div>
+		</div>
+	)
+}
+
+export function OtpRequestForm() {
+	const [isLoading, setIsLoading] = useState<boolean>(false)
+	const [email, setEmail] = useState("")
+	const [otpId, setOtpId] = useState<string | undefined>()
+
+	const handleSubmit = useCallback(
+		async (e: React.FormEvent<HTMLFormElement>) => {
+			e.preventDefault()
+			setIsLoading(true)
+			try {
+				// console.log(email)
+				const { otpId } = await pb.collection("users").requestOTP(email)
+				setOtpId(otpId)
+			} catch (e: any) {
+				showLoginFaliedToast(e?.message)
+			} finally {
+				setIsLoading(false)
+				setEmail("")
+			}
+		},
+		[email]
+	)
+
+	if (otpId) {
+		return <OtpInputForm otpId={otpId} mfaId={""} />
+	}
+
+	return (
+		<form onSubmit={handleSubmit}>
+			<div className="grid gap-3">
+				<div className="grid gap-1 relative">
+					<MailIcon className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
+					<Label className="sr-only" htmlFor="email">
+						<Trans>Email</Trans>
+					</Label>
+					<Input
+						value={email}
+						onChange={(e) => setEmail(e.target.value)}
+						id="email"
+						name="email"
+						required
+						placeholder="name@example.com"
+						type="email"
+						autoCapitalize="none"
+						autoComplete="email"
+						autoCorrect="off"
+						disabled={isLoading}
+						className="ps-9"
+					/>
+				</div>
+				<button className={cn(buttonVariants())} disabled={isLoading}>
+					{isLoading ? (
+						<LoaderCircle className="me-2 h-4 w-4 animate-spin" />
+					) : (
+						<SendHorizonalIcon className="me-2 h-4 w-4" />
+					)}
+					<Trans>Request OTP</Trans>
+				</button>
+			</div>
+		</form>
+	)
+}

internal/site/src/components/logo.tsx

@@ -0,0 +1,17 @@
+export function Logo({ className }: { className?: string }) {
+	return (
+		// Righteous
+		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 285 75" className={className}>
+			{/* <defs>
+				<linearGradient id="gradient" x1="0%" y1="20%" x2="100%" y2="120%">
+					<stop offset="0%" style={{ stopColor: "#747bff" }} />
+					<stop offset="100%" style={{ stopColor: "#24eb5c" }} />
+				</linearGradient>
+			</defs> */}
+			<path
+				// fill="url(#gradient)"
+				d="M146.4 73.1h-30.5V59.8h30.5a3.2 3.2 0 0 0 2.3-1 3.2 3.2 0 0 0 1-2.3q0-.8-.3-1.3a1.5 1.5 0 0 0-.7-.6 4.7 4.7 0 0 0-1-.3l-1.3-.1h-13.9q-3.4 0-6.5-1.3-3-1.3-5.2-3.6a16.9 16.9 0 0 1-3.6-5.3 16.3 16.3 0 0 1-1.3-6.5 16.4 16.4 0 0 1 1.3-6.4q1.3-3.1 3.6-5.4 2.2-2.2 5.2-3.5a16.3 16.3 0 0 1 6.5-1.3h27v13.3h-27a3.2 3.2 0 0 0-2.3 1 3.2 3.2 0 0 0-1 2.3 3.3 3.3 0 0 0 1 2.4 3.3 3.3 0 0 0 1.2.8 3.2 3.2 0 0 0 1.1.2h13.9a18.1 18.1 0 0 1 6 1 17.3 17.3 0 0 1 .4.2q3 1.1 5.3 3.2a15.1 15.1 0 0 1 3.6 4.9 14.7 14.7 0 0 1 1.3 5.4 17.2 17.2 0 0 1 0 .9 16 16 0 0 1-1 5.8 15.4 15.4 0 0 1-.3.7 17.3 17.3 0 0 1-3.6 5.2 16.4 16.4 0 0 1-5.3 3.6 16.2 16.2 0 0 1-6.4 1.3Zm64.5-13.3v13.3h-43.6l22-39h-22V21h43.6l-22 39h22ZM35 73.1H0v-70h35q4.4 0 8.2 1.6a21.4 21.4 0 0 1 6.6 4.6q2.9 2.8 4.5 6.6 1.7 3.8 1.7 8.2a15.4 15.4 0 0 1-.3 3.2 17.6 17.6 0 0 1-.2.8 19.4 19.4 0 0 1-1.5 4 17 17 0 0 1-2.4 3.4 13.5 13.5 0 0 1-2.6 2.3 12.5 12.5 0 0 1-.4.3q1.7 1 3 2.5 1.4 1.6 2.4 3.5a18.3 18.3 0 0 1 1.5 4A17.4 17.4 0 0 1 56 51a15.3 15.3 0 0 1 0 1.1q0 4.3-1.7 8.2a21.4 21.4 0 0 1-4.5 6.6q-2.8 2.9-6.6 4.5-3.8 1.7-8.2 1.7Zm76-43L86 60.4l1.5.3a16.7 16.7 0 0 0 1.6 0q2 0 3.8-.4 1.8-.6 3.4-1.6 1.6-1 2.8-2.4a12.8 12.8 0 0 0 2-3.2l9.8 9.8q-1.9 2.6-4.3 4.7a27 27 0 0 1-5.2 3.6 26.1 26.1 0 0 1-6 2.2 26.8 26.8 0 0 1-6.3.8 26.4 26.4 0 0 1-10.4-2 26.2 26.2 0 0 1-8.5-5.8 26.7 26.7 0 0 1-5.5-8.3 30.4 30.4 0 0 1-.2-.4q-2.1-5-2.1-11.1a31.9 31.9 0 0 1 .7-7 27 27 0 0 1 1.4-4.3 27 27 0 0 1 3.8-6.6 24.5 24.5 0 0 1 2-2.2 26 26 0 0 1 8.4-5.6 27 27 0 0 1 10.4-2 26.3 26.3 0 0 1 6.4.8 26.9 26.9 0 0 1 6 2.2q2.7 1.5 5.2 3.6 2.4 2.1 4.3 4.8Zm152.3 0-25 30.2 1.5.3a16.7 16.7 0 0 0 1.6 0q2 0 3.8-.4 1.8-.6 3.4-1.6 1.5-1 2.8-2.4a12.8 12.8 0 0 0 2-3.2l9.8 9.8q-1.9 2.6-4.3 4.7a27 27 0 0 1-5.2 3.6 26.1 26.1 0 0 1-6 2.2 26.8 26.8 0 0 1-6.3.8 26.4 26.4 0 0 1-10.4-2 26.2 26.2 0 0 1-8.5-5.8A26.7 26.7 0 0 1 217 58a30.4 30.4 0 0 1-.2-.4q-2.1-5-2.1-11.1a31.9 31.9 0 0 1 .7-7 27 27 0 0 1 1.4-4.3 27 27 0 0 1 3.8-6.6 24.5 24.5 0 0 1 2-2.2 26 26 0 0 1 8.4-5.6 27 27 0 0 1 10.4-2 26.3 26.3 0 0 1 6.4.8 26.9 26.9 0 0 1 6 2.2q2.7 1.5 5.2 3.6 2.4 2.1 4.3 4.8ZM283.4 0v73.1H270V0h13.4ZM14 17v14.1h21a7 7 0 0 0 2.3-.4 6.6 6.6 0 0 0 .4-.1Q39 30 40 29a6.9 6.9 0 0 0 1.5-2.3q.5-1.3.5-2.7a7 7 0 0 0-.4-2.3 6.6 6.6 0 0 0-.1-.5q-.6-1.2-1.5-2.2a7 7 0 0 0-2.3-1.5 6.9 6.9 0 0 0-2.5-.5 7.9 7.9 0 0 0-.2 0H14Zm0 28.1v14h21a7 7 0 0 0 2.3-.4 6.6 6.6 0 0 0 .4-.2Q39 58 40 57.1a7 7 0 0 0 1.5-2.3 6.9 6.9 0 0 0 .5-2.5 7.9 7.9 0 0 0 0-.2 7 7 0 0 0-.4-2.3 6.6 6.6 0 0 0-.1-.4Q40.9 48 40 47a7 7 0 0 0-2.3-1.4 6.9 6.9 0 0 0-2.5-.6 7.9 7.9 0 0 0-.2 0H14Zm63.3 8.3 15.5-20.6a8 8 0 0 0-1.4-.4 7 7 0 0 0-.4 0 17.2 17.2 0 0 0-1.6-.1 19.2 19.2 0 0 0-.3 0 13.3 13.3 0 0 0-5.1 1q-2.5 1-4.2 2.8a13.1 13.1 0 0 0-2.5 3.6 15.5 15.5 0 0 0-.3.9 14.7 14.7 0 0 0-1 3.5 18.7 18.7 0 0 0 0 2.4 17.6 17.6 0 0 0 0 .7v.8a29.4 29.4 0 0 0 0 .1 19.2 19.2 0 0 0 .2 2 20.2 20.2 0 0 0 .4 1.6 18.6 18.6 0 0 0 0 .2 7.5 7.5 0 0 0 .4.9 6 6 0 0 0 .3.6Zm152.3 0L245 32.8a8 8 0 0 0-1.4-.4 7 7 0 0 0-.4 0 17.2 17.2 0 0 0-1.6-.1 19.2 19.2 0 0 0-.3 0 13.3 13.3 0 0 0-5.1 1q-2.5 1-4.2 2.8a13.1 13.1 0 0 0-2.5 3.6 15.5 15.5 0 0 0-.4.9 14.7 14.7 0 0 0-.8 3.5 18.7 18.7 0 0 0-.2 2.4 17.6 17.6 0 0 0 0 .7v.8a29.4 29.4 0 0 0 .1.1 19.2 19.2 0 0 0 .2 2 20.2 20.2 0 0 0 .4 1.6 18.6 18.6 0 0 0 0 .2 7.5 7.5 0 0 0 .4.9 6 6 0 0 0 .3.6Z"
+			/>
+		</svg>
+	)
+}

internal/site/src/components/mode-toggle.tsx

@@ -0,0 +1,21 @@
+import { t } from "@lingui/core/macro"
+import { MoonStarIcon, SunIcon } from "lucide-react"
+
+import { Button } from "@/components/ui/button"
+import { useTheme } from "@/components/theme-provider"
+
+export function ModeToggle() {
+	const { theme, setTheme } = useTheme()
+
+	return (
+		<Button
+			variant={"ghost"}
+			size="icon"
+			aria-label={t`Toggle theme`}
+			onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
+		>
+			<SunIcon className="h-[1.2rem] w-[1.2rem] transition-all -rotate-90 dark:opacity-0 dark:rotate-0" />
+			<MoonStarIcon className="absolute h-[1.2rem] w-[1.2rem] transition-all opacity-0 -rotate-90 dark:opacity-100 dark:rotate-0" />
+		</Button>
+	)
+}

internal/site/src/components/navbar.tsx

@@ -0,0 +1,151 @@
+import { Trans } from "@lingui/react/macro"
+import { useState, lazy, Suspense } from "react"
+import { Button, buttonVariants } from "@/components/ui/button"
+import {
+	DatabaseBackupIcon,
+	LogOutIcon,
+	LogsIcon,
+	SearchIcon,
+	ServerIcon,
+	SettingsIcon,
+	UserIcon,
+	UsersIcon,
+} from "lucide-react"
+import { $router, basePath, Link, prependBasePath } from "./router"
+import { LangToggle } from "./lang-toggle"
+import { ModeToggle } from "./mode-toggle"
+import { Logo } from "./logo"
+import { cn, runOnce } from "@/lib/utils"
+import { isReadOnlyUser, isAdmin, logOut, pb } from "@/lib/api"
+import {
+	DropdownMenu,
+	DropdownMenuTrigger,
+	DropdownMenuContent,
+	DropdownMenuLabel,
+	DropdownMenuSeparator,
+	DropdownMenuGroup,
+	DropdownMenuItem,
+} from "@/components/ui/dropdown-menu"
+import { AddSystemButton } from "./add-system"
+import { getPagePath } from "@nanostores/router"
+
+const CommandPalette = lazy(() => import("./command-palette"))
+
+const isMac = navigator.platform.toUpperCase().indexOf("MAC") >= 0
+
+export default function Navbar() {
+	return (
+		<div className="flex items-center h-14 md:h-16 bg-card px-4 pe-3 sm:px-6 border border-border/60 bt-0 rounded-md my-4">
+			<Link
+				href={basePath}
+				aria-label="Home"
+				className="p-2 ps-0 me-3"
+				onMouseEnter={runOnce(() => import("@/components/routes/home"))}
+			>
+				<Logo className="h-[1.1rem] md:h-5 fill-foreground" />
+			</Link>
+			<SearchButton />
+
+			<div className="flex items-center ms-auto" onMouseEnter={() => import("@/components/routes/settings/general")}>
+				<LangToggle />
+				<ModeToggle />
+				<Link
+					href={getPagePath($router, "settings", { name: "general" })}
+					aria-label="Settings"
+					className={cn("", buttonVariants({ variant: "ghost", size: "icon" }))}
+				>
+					<SettingsIcon className="h-[1.2rem] w-[1.2rem]" />
+				</Link>
+				<DropdownMenu>
+					<DropdownMenuTrigger asChild>
+						<button aria-label="User Actions" className={cn("", buttonVariants({ variant: "ghost", size: "icon" }))}>
+							<UserIcon className="h-[1.2rem] w-[1.2rem]" />
+						</button>
+					</DropdownMenuTrigger>
+					<DropdownMenuContent align={isReadOnlyUser() ? "end" : "center"} className="min-w-44">
+						<DropdownMenuLabel>{pb.authStore.record?.email}</DropdownMenuLabel>
+						<DropdownMenuSeparator />
+						<DropdownMenuGroup>
+							{isAdmin() && (
+								<>
+									<DropdownMenuItem asChild>
+										<a href={prependBasePath("/_/")} target="_blank">
+											<UsersIcon className="me-2.5 h-4 w-4" />
+											<span>
+												<Trans>Users</Trans>
+											</span>
+										</a>
+									</DropdownMenuItem>
+									<DropdownMenuItem asChild>
+										<a href={prependBasePath("/_/#/collections?collection=systems")} target="_blank">
+											<ServerIcon className="me-2.5 h-4 w-4" />
+											<span>
+												<Trans>Systems</Trans>
+											</span>
+										</a>
+									</DropdownMenuItem>
+									<DropdownMenuItem asChild>
+										<a href={prependBasePath("/_/#/logs")} target="_blank">
+											<LogsIcon className="me-2.5 h-4 w-4" />
+											<span>
+												<Trans>Logs</Trans>
+											</span>
+										</a>
+									</DropdownMenuItem>
+									<DropdownMenuItem asChild>
+										<a href={prependBasePath("/_/#/settings/backups")} target="_blank">
+											<DatabaseBackupIcon className="me-2.5 h-4 w-4" />
+											<span>
+												<Trans>Backups</Trans>
+											</span>
+										</a>
+									</DropdownMenuItem>
+									<DropdownMenuSeparator />
+								</>
+							)}
+						</DropdownMenuGroup>
+						<DropdownMenuItem onSelect={logOut}>
+							<LogOutIcon className="me-2.5 h-4 w-4" />
+							<span>
+								<Trans>Log Out</Trans>
+							</span>
+						</DropdownMenuItem>
+					</DropdownMenuContent>
+				</DropdownMenu>
+				<AddSystemButton className="ms-2" />
+			</div>
+		</div>
+	)
+}
+
+function SearchButton() {
+	const [open, setOpen] = useState(false)
+
+	const Kbd = ({ children }: { children: React.ReactNode }) => (
+		<kbd className="pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100">
+			{children}
+		</kbd>
+	)
+
+	return (
+		<>
+			<Button
+				variant="outline"
+				className="hidden md:block text-sm text-muted-foreground px-4"
+				onClick={() => setOpen(true)}
+			>
+				<span className="flex items-center">
+					<SearchIcon className="me-1.5 h-4 w-4" />
+					<Trans>Search</Trans>
+					<span className="flex items-center ms-3.5">
+						<Kbd>{isMac ? "⌘" : "Ctrl"}</Kbd>
+						<Kbd>K</Kbd>
+					</span>
+				</span>
+			</Button>
+			<Suspense>
+				<CommandPalette open={open} setOpen={setOpen} />
+			</Suspense>
+		</>
+	)
+}

internal/site/src/components/router.tsx

@@ -0,0 +1,55 @@
+import { createRouter } from "@nanostores/router"
+
+const routes = {
+	home: "/",
+	system: `/system/:name`,
+	settings: `/settings/:name?`,
+	forgot_password: `/forgot-password`,
+	request_otp: `/request-otp`,
+} as const
+
+/**
+ * The base path of the application.
+ * This is used to prepend the base path to all routes.
+ */
+export const basePath = BESZEL?.BASE_PATH || ""
+
+/**
+ * Prepends the base path to the given path.
+ * @param path The path to prepend the base path to.
+ * @returns The path with the base path prepended.
+ */
+export const prependBasePath = (path: string) => (basePath + path).replaceAll("//", "/")
+
+// prepend base path to routes
+for (const route in routes) {
+	// @ts-ignore need as const above to get nanostores to parse types properly
+	routes[route] = prependBasePath(routes[route])
+}
+
+export const $router = createRouter(routes, { links: false })
+
+/** Navigate to url using router
+ *  Base path is automatically prepended if serving from subpath
+ */
+export const navigate = (urlString: string) => {
+	$router.open(urlString)
+}
+
+export function Link(props: React.AnchorHTMLAttributes<HTMLAnchorElement>) {
+	return (
+		<a
+			{...props}
+			onClick={(e) => {
+				e.preventDefault()
+				const href = props.href || ""
+				if (e.ctrlKey || e.metaKey) {
+					window.open(href, "_blank")
+				} else {
+					navigate(href)
+					props.onClick?.(e)
+				}
+			}}
+		></a>
+	)
+}

internal/site/src/components/routes/home.tsx

@@ -0,0 +1,128 @@
+import { Plural, Trans, useLingui } from "@lingui/react/macro"
+import { useStore } from "@nanostores/react"
+import { getPagePath } from "@nanostores/router"
+import { GithubIcon } from "lucide-react"
+import { memo, Suspense, useEffect, useMemo } from "react"
+import { $router, Link } from "@/components/router"
+import SystemsTable from "@/components/systems-table/systems-table"
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Separator } from "@/components/ui/separator"
+import { alertInfo } from "@/lib/alerts"
+import { $alerts, $allSystemsById } from "@/lib/stores"
+import type { AlertRecord } from "@/types"
+
+export default memo(() => {
+	const { t } = useLingui()
+
+	useEffect(() => {
+		document.title = `${t`Dashboard`} / Beszel`
+	}, [t])
+
+	return useMemo(
+		() => (
+			<>
+				<ActiveAlerts />
+				<Suspense>
+					<SystemsTable />
+				</Suspense>
+
+				<div className="flex gap-1.5 justify-end items-center pe-3 sm:pe-6 mt-3.5 mb-4 text-xs opacity-80">
+					<a
+						href="https://github.com/henrygd/beszel"
+						target="_blank"
+						className="flex items-center gap-0.5 text-muted-foreground hover:text-foreground duration-75"
+						rel="noopener"
+					>
+						<GithubIcon className="h-3 w-3" /> GitHub
+					</a>
+					<Separator orientation="vertical" className="h-2.5 bg-muted-foreground opacity-70" />
+					<a
+						href="https://github.com/henrygd/beszel/releases"
+						target="_blank"
+						className="text-muted-foreground hover:text-foreground duration-75"
+						rel="noopener"
+					>
+						Beszel {globalThis.BESZEL.HUB_VERSION}
+					</a>
+				</div>
+			</>
+		),
+		[]
+	)
+})
+
+const ActiveAlerts = () => {
+	const alerts = useStore($alerts)
+	const systems = useStore($allSystemsById)
+
+	const { activeAlerts, alertsKey } = useMemo(() => {
+		const activeAlerts: AlertRecord[] = []
+		// key to prevent re-rendering if alerts change but active alerts didn't
+		const alertsKey: string[] = []
+
+		for (const systemId of Object.keys(alerts)) {
+			for (const alert of alerts[systemId].values()) {
+				if (alert.triggered && alert.name in alertInfo) {
+					activeAlerts.push(alert)
+					alertsKey.push(`${alert.system}${alert.value}${alert.min}`)
+				}
+			}
+		}
+
+		return { activeAlerts, alertsKey }
+	}, [alerts])
+
+	// biome-ignore lint/correctness/useExhaustiveDependencies: alertsKey is inclusive
+	return useMemo(() => {
+		if (activeAlerts.length === 0) {
+			return null
+		}
+		return (
+			<Card className="mb-4">
+				<CardHeader className="pb-4 px-2 sm:px-6 max-sm:pt-5 max-sm:pb-1">
+					<div className="px-2 sm:px-1">
+						<CardTitle>
+							<Trans>Active Alerts</Trans>
+						</CardTitle>
+					</div>
+				</CardHeader>
+				<CardContent className="max-sm:p-2">
+					{activeAlerts.length > 0 && (
+						<div className="grid sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 gap-3">
+							{activeAlerts.map((alert) => {
+								const info = alertInfo[alert.name as keyof typeof alertInfo]
+								return (
+									<Alert
+										key={alert.id}
+										className="hover:-translate-y-px duration-200 bg-transparent border-foreground/10 hover:shadow-md shadow-black/5"
+									>
+										<info.icon className="h-4 w-4" />
+										<AlertTitle>
+											{systems[alert.system]?.name} {info.name().toLowerCase().replace("cpu", "CPU")}
+										</AlertTitle>
+										<AlertDescription>
+											{alert.name === "Status" ? (
+												<Trans>Connection is down</Trans>
+											) : (
+												<Trans>
+													Exceeds {alert.value}
+													{info.unit} in last <Plural value={alert.min} one="# minute" other="# minutes" />
+												</Trans>
+											)}
+										</AlertDescription>
+										<Link
+											href={getPagePath($router, "system", { name: systems[alert.system]?.name })}
+											className="absolute inset-0 w-full h-full"
+											aria-label="View system"
+										></Link>
+									</Alert>
+								)
+							})}
+						</div>
+					)}
+				</CardContent>
+			</Card>
+		)
+	}, [alertsKey.join("")])
+}

internal/site/src/components/routes/settings/alerts-history-data-table.tsx

@@ -0,0 +1,386 @@
+import { t } from "@lingui/core/macro"
+import { Trans } from "@lingui/react/macro"
+import {
+	type ColumnFiltersState,
+	flexRender,
+	getCoreRowModel,
+	getFilteredRowModel,
+	getPaginationRowModel,
+	getSortedRowModel,
+	type SortingState,
+	useReactTable,
+	type VisibilityState,
+} from "@tanstack/react-table"
+import {
+	ChevronLeftIcon,
+	ChevronRightIcon,
+	ChevronsLeftIcon,
+	ChevronsRightIcon,
+	DownloadIcon,
+	Trash2Icon,
+} from "lucide-react"
+import { memo, useEffect, useState } from "react"
+import {
+	AlertDialog,
+	AlertDialogAction,
+	AlertDialogCancel,
+	AlertDialogContent,
+	AlertDialogDescription,
+	AlertDialogFooter,
+	AlertDialogHeader,
+	AlertDialogTitle,
+	AlertDialogTrigger,
+} from "@/components/ui/alert-dialog"
+import { Button, buttonVariants } from "@/components/ui/button"
+import { Checkbox } from "@/components/ui/checkbox"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
+import { useToast } from "@/components/ui/use-toast"
+import { alertInfo } from "@/lib/alerts"
+import { pb } from "@/lib/api"
+import { cn, formatDuration, formatShortDate } from "@/lib/utils"
+import type { AlertsHistoryRecord } from "@/types"
+import { alertsHistoryColumns } from "../../alerts-history-columns"
+
+const SectionIntro = memo(() => {
+	return (
+		<div>
+			<h3 className="text-xl font-medium mb-2">
+				<Trans>Alert History</Trans>
+			</h3>
+			<p className="text-sm text-muted-foreground leading-relaxed">
+				<Trans>View your 200 most recent alerts.</Trans>
+			</p>
+		</div>
+	)
+})
+
+export default function AlertsHistoryDataTable() {
+	const [data, setData] = useState<AlertsHistoryRecord[]>([])
+	const [sorting, setSorting] = useState<SortingState>([])
+	const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([])
+	const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({})
+	const [rowSelection, setRowSelection] = useState({})
+	const [globalFilter, setGlobalFilter] = useState("")
+	const { toast } = useToast()
+	const [deleteOpen, setDeleteDialogOpen] = useState(false)
+
+	useEffect(() => {
+		let unsubscribe: (() => void) | undefined
+		const pbOptions = {
+			expand: "system",
+			fields: "id,name,value,state,created,resolved,expand.system.name",
+		}
+		// Initial load
+		pb.collection<AlertsHistoryRecord>("alerts_history")
+			.getList(0, 200, {
+				...pbOptions,
+				sort: "-created",
+			})
+			.then(({ items }) => setData(items))
+
+		// Subscribe to changes
+		;(async () => {
+			unsubscribe = await pb.collection("alerts_history").subscribe(
+				"*",
+				(e) => {
+					if (e.action === "create") {
+						setData((current) => [e.record as AlertsHistoryRecord, ...current])
+					}
+					if (e.action === "update") {
+						setData((current) => current.map((r) => (r.id === e.record.id ? (e.record as AlertsHistoryRecord) : r)))
+					}
+					if (e.action === "delete") {
+						setData((current) => current.filter((r) => r.id !== e.record.id))
+					}
+				},
+				pbOptions
+			)
+		})()
+		// Unsubscribe on unmount
+		return () => unsubscribe?.()
+	}, [])
+
+	const table = useReactTable({
+		data,
+		columns: [
+			{
+				id: "select",
+				header: ({ table }) => (
+					<Checkbox
+						className="ms-2"
+						checked={table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && "indeterminate")}
+						onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
+						aria-label="Select all"
+					/>
+				),
+				cell: ({ row }) => (
+					<Checkbox
+						checked={row.getIsSelected()}
+						onCheckedChange={(value) => row.toggleSelected(!!value)}
+						aria-label="Select row"
+					/>
+				),
+				enableSorting: false,
+				enableHiding: false,
+			},
+			...alertsHistoryColumns,
+		],
+		getCoreRowModel: getCoreRowModel(),
+		getPaginationRowModel: getPaginationRowModel(),
+		getSortedRowModel: getSortedRowModel(),
+		getFilteredRowModel: getFilteredRowModel(),
+		onSortingChange: setSorting,
+		onColumnFiltersChange: setColumnFilters,
+		onColumnVisibilityChange: setColumnVisibility,
+		onRowSelectionChange: setRowSelection,
+		state: {
+			sorting,
+			columnFilters,
+			columnVisibility,
+			rowSelection,
+			globalFilter,
+		},
+		onGlobalFilterChange: setGlobalFilter,
+		globalFilterFn: (row, _columnId, filterValue) => {
+			const system = row.original.expand?.system?.name ?? ""
+			const name = row.getValue("name") ?? ""
+			const created = row.getValue("created") ?? ""
+			const search = String(filterValue).toLowerCase()
+			return (
+				system.toLowerCase().includes(search) ||
+				(name as string).toLowerCase().includes(search) ||
+				(created as string).toLowerCase().includes(search)
+			)
+		},
+	})
+
+	// Bulk delete handler
+	const handleBulkDelete = async () => {
+		setDeleteDialogOpen(false)
+		const selectedIds = table.getSelectedRowModel().rows.map((row) => row.original.id)
+		try {
+			let batch = pb.createBatch()
+			let inBatch = 0
+			for (const id of selectedIds) {
+				batch.collection("alerts_history").delete(id)
+				inBatch++
+				if (inBatch > 20) {
+					await batch.send()
+					batch = pb.createBatch()
+					inBatch = 0
+				}
+			}
+			inBatch && (await batch.send())
+			table.resetRowSelection()
+		} catch (e) {
+			toast({
+				variant: "destructive",
+				title: t`Error`,
+				description: `Failed to delete records.`,
+			})
+		}
+	}
+
+	// Export to CSV handler
+	const handleExportCSV = () => {
+		const selectedRows = table.getSelectedRowModel().rows
+		if (!selectedRows.length) return
+		const cells: Record<string, (record: AlertsHistoryRecord) => string> = {
+			system: (record) => record.expand?.system?.name || record.system,
+			name: (record) => alertInfo[record.name]?.name() || record.name,
+			value: (record) => record.value + (alertInfo[record.name]?.unit ?? ""),
+			state: (record) => (record.resolved ? t`Resolved` : t`Active`),
+			created: (record) => formatShortDate(record.created),
+			resolved: (record) => (record.resolved ? formatShortDate(record.resolved) : ""),
+			duration: (record) => (record.resolved ? formatDuration(record.created, record.resolved) : ""),
+		}
+		const csvRows = [Object.keys(cells).join(",")]
+		for (const row of selectedRows) {
+			const r = row.original
+			csvRows.push(
+				Object.values(cells)
+					.map((val) => val(r))
+					.join(",")
+			)
+		}
+		const blob = new Blob([csvRows.join("\n")], { type: "text/csv" })
+		const url = URL.createObjectURL(blob)
+		const a = document.createElement("a")
+		a.href = url
+		a.download = "alerts_history.csv"
+		a.click()
+		URL.revokeObjectURL(url)
+	}
+
+	return (
+		<div className="@container w-full">
+			<div className="@3xl:flex items-end mb-4 gap-4">
+				<SectionIntro />
+				<div className="flex items-center gap-2 ms-auto mt-3 @3xl:mt-0">
+					{table.getFilteredSelectedRowModel().rows.length > 0 && (
+						<div className="fixed bottom-0 left-0 w-full p-4 grid grid-cols-2 items-center gap-4 z-50 backdrop-blur-md shrink-0 @lg:static @lg:p-0 @lg:w-auto @lg:gap-3">
+							<AlertDialog open={deleteOpen} onOpenChange={(open) => setDeleteDialogOpen(open)}>
+								<AlertDialogTrigger asChild>
+									<Button variant="destructive" className="h-9 shrink-0">
+										<Trash2Icon className="size-4 shrink-0" />
+										<span className="ms-1">
+											<Trans>Delete</Trans>
+										</span>
+									</Button>
+								</AlertDialogTrigger>
+								<AlertDialogContent>
+									<AlertDialogHeader>
+										<AlertDialogTitle>
+											<Trans>Are you sure?</Trans>
+										</AlertDialogTitle>
+										<AlertDialogDescription>
+											<Trans>This will permanently delete all selected records from the database.</Trans>
+										</AlertDialogDescription>
+									</AlertDialogHeader>
+									<AlertDialogFooter>
+										<AlertDialogCancel>
+											<Trans>Cancel</Trans>
+										</AlertDialogCancel>
+										<AlertDialogAction
+											className={cn(buttonVariants({ variant: "destructive" }))}
+											onClick={handleBulkDelete}
+										>
+											<Trans>Continue</Trans>
+										</AlertDialogAction>
+									</AlertDialogFooter>
+								</AlertDialogContent>
+							</AlertDialog>
+							<Button variant="outline" className="h-10" onClick={handleExportCSV}>
+								<DownloadIcon className="size-4" />
+								<span className="ms-1">
+									<Trans>Export</Trans>
+								</span>
+							</Button>
+						</div>
+					)}
+					<Input
+						placeholder={t`Filter...`}
+						value={globalFilter}
+						onChange={(e) => setGlobalFilter(e.target.value)}
+						className="px-4 w-full max-w-full @3xl:w-64"
+					/>
+				</div>
+			</div>
+			<div className="rounded-md border overflow-x-auto whitespace-nowrap">
+				<Table>
+					<TableHeader>
+						{table.getHeaderGroups().map((headerGroup) => (
+							<tr key={headerGroup.id} className="border-border/50">
+								{headerGroup.headers.map((header) => (
+									<TableHead className="px-2" key={header.id}>
+										{header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
+									</TableHead>
+								))}
+							</tr>
+						))}
+					</TableHeader>
+					<TableBody>
+						{table.getRowModel().rows.length ? (
+							table.getRowModel().rows.map((row) => (
+								<TableRow key={row.id} data-state={row.getIsSelected() && "selected"}>
+									{row.getVisibleCells().map((cell) => (
+										<TableCell key={cell.id} className="py-3">
+											{flexRender(cell.column.columnDef.cell, cell.getContext())}
+										</TableCell>
+									))}
+								</TableRow>
+							))
+						) : (
+							<TableRow>
+								<TableCell colSpan={table.getAllColumns().length} className="h-24 text-center">
+									<Trans>No results.</Trans>
+								</TableCell>
+							</TableRow>
+						)}
+					</TableBody>
+				</Table>
+			</div>
+			<div className="flex items-center justify-between ps-1 tabular-nums">
+				<div className="text-muted-foreground hidden flex-1 text-sm lg:flex">
+					<Trans>
+						{table.getFilteredSelectedRowModel().rows.length} of {table.getFilteredRowModel().rows.length} row(s)
+						selected.
+					</Trans>
+				</div>
+				<div className="flex w-full items-center gap-8 lg:w-fit my-3">
+					<div className="hidden items-center gap-2 lg:flex">
+						<Label htmlFor="rows-per-page" className="text-sm font-medium">
+							<Trans>Rows per page</Trans>
+						</Label>
+						<Select
+							value={`${table.getState().pagination.pageSize}`}
+							onValueChange={(value) => {
+								table.setPageSize(Number(value))
+							}}
+						>
+							<SelectTrigger className="w-[4.8em]" id="rows-per-page">
+								<SelectValue placeholder={table.getState().pagination.pageSize} />
+							</SelectTrigger>
+							<SelectContent side="top">
+								{[10, 20, 50, 100, 200].map((pageSize) => (
+									<SelectItem key={pageSize} value={`${pageSize}`}>
+										{pageSize}
+									</SelectItem>
+								))}
+							</SelectContent>
+						</Select>
+					</div>
+					<div className="flex w-fit items-center justify-center text-sm font-medium">
+						<Trans>
+							Page {table.getState().pagination.pageIndex + 1} of {table.getPageCount()}
+						</Trans>
+					</div>
+					<div className="ms-auto flex items-center gap-2 lg:ms-0">
+						<Button
+							variant="outline"
+							className="hidden size-9 p-0 lg:flex"
+							onClick={() => table.setPageIndex(0)}
+							disabled={!table.getCanPreviousPage()}
+						>
+							<span className="sr-only">Go to first page</span>
+							<ChevronsLeftIcon className="size-5" />
+						</Button>
+						<Button
+							variant="outline"
+							className="size-9"
+							size="icon"
+							onClick={() => table.previousPage()}
+							disabled={!table.getCanPreviousPage()}
+						>
+							<span className="sr-only">Go to previous page</span>
+							<ChevronLeftIcon className="size-5" />
+						</Button>
+						<Button
+							variant="outline"
+							className="size-9"
+							size="icon"
+							onClick={() => table.nextPage()}
+							disabled={!table.getCanNextPage()}
+						>
+							<span className="sr-only">Go to next page</span>
+							<ChevronRightIcon className="size-5" />
+						</Button>
+						<Button
+							variant="outline"
+							className="hidden size-9 lg:flex"
+							size="icon"
+							onClick={() => table.setPageIndex(table.getPageCount() - 1)}
+							disabled={!table.getCanNextPage()}
+						>
+							<span className="sr-only">Go to last page</span>
+							<ChevronsRightIcon className="size-5" />
+						</Button>
+					</div>
+				</div>
+			</div>
+		</div>
+	)
+}

internal/site/src/components/routes/settings/config-yaml.tsx

@@ -0,0 +1,97 @@
+import { t } from "@lingui/core/macro"
+import { Trans } from "@lingui/react/macro"
+import { redirectPage } from "@nanostores/router"
+import clsx from "clsx"
+import { AlertCircleIcon, FileSlidersIcon, LoaderCircleIcon } from "lucide-react"
+import { useState } from "react"
+import { $router } from "@/components/router"
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
+import { Button } from "@/components/ui/button"
+import { Separator } from "@/components/ui/separator"
+import { Textarea } from "@/components/ui/textarea"
+import { toast } from "@/components/ui/use-toast"
+import { isAdmin, pb } from "@/lib/api"
+
+export default function ConfigYaml() {
+	const [configContent, setConfigContent] = useState<string>("")
+	const [isLoading, setIsLoading] = useState(false)
+
+	const ButtonIcon = isLoading ? LoaderCircleIcon : FileSlidersIcon
+
+	async function fetchConfig() {
+		try {
+			setIsLoading(true)
+			const { config } = await pb.send<{ config: string }>("/api/beszel/config-yaml", {})
+			setConfigContent(config)
+		} catch (error: any) {
+			toast({
+				title: t`Error`,
+				description: error.message,
+				variant: "destructive",
+			})
+		} finally {
+			setIsLoading(false)
+		}
+	}
+
+	if (!isAdmin()) {
+		redirectPage($router, "settings", { name: "general" })
+	}
+
+	return (
+		<div>
+			<div>
+				<h3 className="text-xl font-medium mb-2">
+					<Trans>YAML Configuration</Trans>
+				</h3>
+				<p className="text-sm text-muted-foreground leading-relaxed">
+					<Trans>Export your current systems configuration.</Trans>
+				</p>
+			</div>
+			<Separator className="my-4" />
+			<div className="space-y-2">
+				<div className="mb-4">
+					<p className="text-sm text-muted-foreground leading-relaxed my-1">
+						<Trans>
+							Systems may be managed in a <code className="bg-muted rounded-sm px-1 text-primary">config.yml</code> file
+							inside your data directory.
+						</Trans>
+					</p>
+					<p className="text-sm text-muted-foreground leading-relaxed">
+						<Trans>
+							On each restart, systems in the database will be updated to match the systems defined in the file.
+						</Trans>
+					</p>
+					<Alert className="my-4 border-destructive text-destructive w-auto table md:pe-6">
+						<AlertCircleIcon className="h-4 w-4 stroke-destructive" />
+						<AlertTitle>
+							<Trans>Caution - potential data loss</Trans>
+						</AlertTitle>
+						<AlertDescription>
+							<p>
+								<Trans>
+									Existing systems not defined in <code>config.yml</code> will be deleted. Please make regular backups.
+								</Trans>
+							</p>
+						</AlertDescription>
+					</Alert>
+				</div>
+				{configContent && (
+					<Textarea
+						dir="ltr"
+						autoFocus
+						defaultValue={configContent}
+						spellCheck="false"
+						rows={Math.min(25, configContent.split("\n").length)}
+						className="font-mono whitespace-pre"
+					/>
+				)}
+			</div>
+			<Separator className="my-5" />
+			<Button type="button" className="mt-2 flex items-center gap-1" onClick={fetchConfig} disabled={isLoading}>
+				<ButtonIcon className={clsx("h-4 w-4 me-0.5", isLoading && "animate-spin")} />
+				<Trans>Export configuration</Trans>
+			</Button>
+		</div>
+	)
+}

internal/site/src/components/routes/settings/general.tsx

@@ -0,0 +1,254 @@
+/** biome-ignore-all lint/correctness/useUniqueElementIds: component is only rendered once */
+import { Trans, useLingui } from "@lingui/react/macro"
+import { LanguagesIcon, LoaderCircleIcon, SaveIcon } from "lucide-react"
+import { useState } from "react"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { Separator } from "@/components/ui/separator"
+import { HourFormat, Unit } from "@/lib/enums"
+import { dynamicActivate } from "@/lib/i18n"
+import languages from "@/lib/languages"
+import { chartTimeData, currentHour12 } from "@/lib/utils"
+import type { UserSettings } from "@/types"
+import { saveSettings } from "./layout"
+
+export default function SettingsProfilePage({ userSettings }: { userSettings: UserSettings }) {
+	const [isLoading, setIsLoading] = useState(false)
+	const { i18n } = useLingui()
+
+	async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
+		e.preventDefault()
+		setIsLoading(true)
+		const formData = new FormData(e.target as HTMLFormElement)
+		const data = Object.fromEntries(formData) as Partial<UserSettings>
+		await saveSettings(data)
+		setIsLoading(false)
+	}
+
+	return (
+		<div>
+			<div>
+				<h3 className="text-xl font-medium mb-2">
+					<Trans>General</Trans>
+				</h3>
+				<p className="text-sm text-muted-foreground leading-relaxed">
+					<Trans>Change general application options.</Trans>
+				</p>
+			</div>
+			<Separator className="my-4" />
+			<form onSubmit={handleSubmit} className="space-y-5">
+				<div className="grid gap-2">
+					<div className="mb-2">
+						<h3 className="mb-1 text-lg font-medium flex items-center gap-2">
+							<LanguagesIcon className="h-4 w-4" />
+							<Trans>Language</Trans>
+						</h3>
+						<p className="text-sm text-muted-foreground leading-relaxed">
+							<Trans>
+								Want to help improve our translations? Check{" "}
+								<a href="https://crowdin.com/project/beszel" className="link" target="_blank" rel="noopener noreferrer">
+									Crowdin
+								</a>{" "}
+								for details.
+							</Trans>
+						</p>
+					</div>
+					<Label className="block" htmlFor="lang">
+						<Trans>Preferred Language</Trans>
+					</Label>
+					<Select value={i18n.locale} onValueChange={(lang: string) => dynamicActivate(lang)}>
+						<SelectTrigger id="lang">
+							<SelectValue />
+						</SelectTrigger>
+						<SelectContent>
+							{languages.map((lang) => (
+								<SelectItem key={lang.lang} value={lang.lang}>
+									<span className="me-2.5">{lang.e}</span>
+									{lang.label}
+								</SelectItem>
+							))}
+						</SelectContent>
+					</Select>
+				</div>
+				<Separator />
+				<div className="grid gap-2">
+					<div className="mb-2">
+						<h3 className="mb-1 text-lg font-medium">
+							<Trans>Chart options</Trans>
+						</h3>
+						<p className="text-sm text-muted-foreground leading-relaxed">
+							<Trans>Adjust display options for charts.</Trans>
+						</p>
+					</div>
+					<div className="grid sm:grid-cols-3 gap-4">
+						<div className="grid gap-2">
+							<Label className="block" htmlFor="chartTime">
+								<Trans>Default time period</Trans>
+							</Label>
+							<Select name="chartTime" key={userSettings.chartTime} defaultValue={userSettings.chartTime}>
+								<SelectTrigger id="chartTime">
+									<SelectValue />
+								</SelectTrigger>
+								<SelectContent>
+									{Object.entries(chartTimeData).map(([value, { label }]) => (
+										<SelectItem key={value} value={value}>
+											{label()}
+										</SelectItem>
+									))}
+								</SelectContent>
+							</Select>
+						</div>
+						<div className="grid gap-2">
+							<Label className="block" htmlFor="hourFormat">
+								<Trans>Time format</Trans>
+							</Label>
+							<Select
+								name="hourFormat"
+								key={userSettings.hourFormat}
+								defaultValue={userSettings.hourFormat ?? (currentHour12() ? HourFormat["12h"] : HourFormat["24h"])}
+							>
+								<SelectTrigger id="hourFormat">
+									<SelectValue />
+								</SelectTrigger>
+								<SelectContent>
+									{Object.keys(HourFormat).map((value) => (
+										<SelectItem key={value} value={value}>
+											{value}
+										</SelectItem>
+									))}
+								</SelectContent>
+							</Select>
+						</div>
+					</div>
+				</div>
+				<Separator />
+				<div className="grid gap-2">
+					<div className="mb-2">
+						<h3 className="mb-1 text-lg font-medium">
+							<Trans comment="Temperature / network units">Unit preferences</Trans>
+						</h3>
+						<p className="text-sm text-muted-foreground leading-relaxed">
+							<Trans>Change display units for metrics.</Trans>
+						</p>
+					</div>
+					<div className="grid sm:grid-cols-3 gap-4">
+						<div className="grid gap-2">
+							<Label className="block" htmlFor="unitTemp">
+								<Trans>Temperature unit</Trans>
+							</Label>
+							<Select
+								name="unitTemp"
+								key={userSettings.unitTemp}
+								defaultValue={userSettings.unitTemp?.toString() || String(Unit.Celsius)}
+							>
+								<SelectTrigger id="unitTemp">
+									<SelectValue />
+								</SelectTrigger>
+								<SelectContent>
+									<SelectItem value={String(Unit.Celsius)}>
+										<Trans>Celsius (°C)</Trans>
+									</SelectItem>
+									<SelectItem value={String(Unit.Fahrenheit)}>
+										<Trans>Fahrenheit (°F)</Trans>
+									</SelectItem>
+								</SelectContent>
+							</Select>
+						</div>
+						<div className="grid gap-2">
+							<Label className="block" htmlFor="unitNet">
+								<Trans comment="Context: Bytes or bits">Network unit</Trans>
+							</Label>
+							<Select
+								name="unitNet"
+								key={userSettings.unitNet}
+								defaultValue={userSettings.unitNet?.toString() ?? String(Unit.Bytes)}
+							>
+								<SelectTrigger id="unitNet">
+									<SelectValue />
+								</SelectTrigger>
+								<SelectContent>
+									<SelectItem value={String(Unit.Bytes)}>
+										<Trans>Bytes (KB/s, MB/s, GB/s)</Trans>
+									</SelectItem>
+									<SelectItem value={String(Unit.Bits)}>
+										<Trans>Bits (Kbps, Mbps, Gbps)</Trans>
+									</SelectItem>
+								</SelectContent>
+							</Select>
+						</div>
+						<div className="grid gap-2">
+							<Label className="block" htmlFor="unitDisk">
+								<Trans>Disk unit</Trans>
+							</Label>
+							<Select
+								name="unitDisk"
+								key={userSettings.unitDisk}
+								defaultValue={userSettings.unitDisk?.toString() ?? String(Unit.Bytes)}
+							>
+								<SelectTrigger id="unitDisk">
+									<SelectValue />
+								</SelectTrigger>
+								<SelectContent>
+									<SelectItem value={String(Unit.Bytes)}>
+										<Trans>Bytes (KB/s, MB/s, GB/s)</Trans>
+									</SelectItem>
+									<SelectItem value={String(Unit.Bits)}>
+										<Trans>Bits (Kbps, Mbps, Gbps)</Trans>
+									</SelectItem>
+								</SelectContent>
+							</Select>
+						</div>
+					</div>
+				</div>
+				<Separator />
+				<div className="grid gap-2">
+					<div className="mb-2">
+						<h3 className="mb-1 text-lg font-medium">
+							<Trans>Warning thresholds</Trans>
+						</h3>
+						<p className="text-sm text-muted-foreground leading-relaxed">
+							<Trans>Set percentage thresholds for meter colors.</Trans>
+						</p>
+					</div>
+					<div className="grid grid-cols-2 lg:grid-cols-3 gap-4 items-end">
+						<div className="grid gap-2">
+							<Label htmlFor="colorWarn">
+								<Trans>Warning (%)</Trans>
+							</Label>
+							<Input
+								id="colorWarn"
+								name="colorWarn"
+								type="number"
+								min={1}
+								max={100}
+								className="min-w-24"
+								defaultValue={userSettings.colorWarn ?? 65}
+							/>
+						</div>
+						<div className="grid gap-1">
+							<Label htmlFor="colorCrit">
+								<Trans>Critical (%)</Trans>
+							</Label>
+							<Input
+								id="colorCrit"
+								name="colorCrit"
+								type="number"
+								min={1}
+								max={100}
+								className="min-w-24"
+								defaultValue={userSettings.colorCrit ?? 90}
+							/>
+						</div>
+					</div>
+				</div>
+				<Separator />
+				<Button type="submit" className="flex items-center gap-1.5 disabled:opacity-100" disabled={isLoading}>
+					{isLoading ? <LoaderCircleIcon className="h-4 w-4 animate-spin" /> : <SaveIcon className="h-4 w-4" />}
+					<Trans>Save Settings</Trans>
+				</Button>
+			</form>
+		</div>
+	)
+}

internal/site/src/components/routes/settings/layout.tsx

@@ -0,0 +1,145 @@
+import { t } from "@lingui/core/macro"
+import { Trans, useLingui } from "@lingui/react/macro"
+import { useStore } from "@nanostores/react"
+import { getPagePath, redirectPage } from "@nanostores/router"
+import { AlertOctagonIcon, BellIcon, FileSlidersIcon, FingerprintIcon, SettingsIcon } from "lucide-react"
+import { lazy, useEffect } from "react"
+import { $router } from "@/components/router.tsx"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card.tsx"
+import { toast } from "@/components/ui/use-toast.ts"
+import { pb } from "@/lib/api"
+import { $userSettings } from "@/lib/stores.ts"
+import type { UserSettings } from "@/types"
+import { Separator } from "../../ui/separator"
+import { SidebarNav } from "./sidebar-nav.tsx"
+
+const generalSettingsImport = () => import("./general.tsx")
+const notificationsSettingsImport = () => import("./notifications.tsx")
+const configYamlSettingsImport = () => import("./config-yaml.tsx")
+const fingerprintsSettingsImport = () => import("./tokens-fingerprints.tsx")
+const alertsHistoryDataTableSettingsImport = () => import("./alerts-history-data-table.tsx")
+
+const GeneralSettings = lazy(generalSettingsImport)
+const NotificationsSettings = lazy(notificationsSettingsImport)
+const ConfigYamlSettings = lazy(configYamlSettingsImport)
+const FingerprintsSettings = lazy(fingerprintsSettingsImport)
+const AlertsHistoryDataTableSettings = lazy(alertsHistoryDataTableSettingsImport)
+
+export async function saveSettings(newSettings: Partial<UserSettings>) {
+	try {
+		// get fresh copy of settings
+		const req = await pb.collection("user_settings").getFirstListItem("", {
+			fields: "id,settings",
+		})
+		// update user settings
+		const updatedSettings = await pb.collection("user_settings").update(req.id, {
+			settings: {
+				...req.settings,
+				...newSettings,
+			},
+		})
+		$userSettings.set(updatedSettings.settings)
+		toast({
+			title: t`Settings saved`,
+			description: t`Your user settings have been updated.`,
+		})
+	} catch (e) {
+		// console.error('update settings', e)
+		toast({
+			title: t`Failed to save settings`,
+			description: t`Check logs for more details.`,
+			variant: "destructive",
+		})
+	}
+}
+
+export default function SettingsLayout() {
+	const { t } = useLingui()
+
+	const sidebarNavItems = [
+		{
+			title: t({ message: `General`, comment: "Context: General settings" }),
+			href: getPagePath($router, "settings", { name: "general" }),
+			icon: SettingsIcon,
+		},
+		{
+			title: t`Notifications`,
+			href: getPagePath($router, "settings", { name: "notifications" }),
+			icon: BellIcon,
+			preload: notificationsSettingsImport,
+		},
+		{
+			title: t`Tokens & Fingerprints`,
+			href: getPagePath($router, "settings", { name: "tokens" }),
+			icon: FingerprintIcon,
+			noReadOnly: true,
+			preload: fingerprintsSettingsImport,
+		},
+		{
+			title: t`Alert History`,
+			href: getPagePath($router, "settings", { name: "alert-history" }),
+			icon: AlertOctagonIcon,
+			preload: alertsHistoryDataTableSettingsImport,
+		},
+		{
+			title: t`YAML Config`,
+			href: getPagePath($router, "settings", { name: "config" }),
+			icon: FileSlidersIcon,
+			admin: true,
+			preload: configYamlSettingsImport,
+		},
+	]
+
+	const page = useStore($router)
+
+	// biome-ignore lint/correctness/useExhaustiveDependencies: no dependencies
+	useEffect(() => {
+		document.title = `${t`Settings`} / Beszel`
+		// @ts-expect-error redirect to account page if no page is specified
+		if (!page?.params?.name) {
+			redirectPage($router, "settings", { name: "general" })
+		}
+	}, [])
+
+	return (
+		<Card className="pt-5 px-4 pb-8 min-h-96 mb-14 sm:pt-6 sm:px-7">
+			<CardHeader className="p-0">
+				<CardTitle className="mb-1">
+					<Trans>Settings</Trans>
+				</CardTitle>
+				<CardDescription>
+					<Trans>Manage display and notification preferences.</Trans>
+				</CardDescription>
+			</CardHeader>
+			<CardContent className="p-0">
+				<Separator className="hidden md:block my-5" />
+				<div className="flex flex-col gap-3.5 md:flex-row md:gap-5 lg:gap-12">
+					<aside className="md:max-w-52 min-w-40">
+						<SidebarNav items={sidebarNavItems} />
+					</aside>
+					<div className="flex-1 min-w-0">
+						{/* @ts-ignore */}
+						<SettingsContent name={page?.params?.name ?? "general"} />
+					</div>
+				</div>
+			</CardContent>
+		</Card>
+	)
+}
+
+function SettingsContent({ name }: { name: string }) {
+	const userSettings = useStore($userSettings)
+
+	switch (name) {
+		case "general":
+			return <GeneralSettings userSettings={userSettings} />
+		case "notifications":
+			return <NotificationsSettings userSettings={userSettings} />
+		case "config":
+			return <ConfigYamlSettings />
+		case "tokens":
+			return <FingerprintsSettings />
+		case "alert-history":
+			return <AlertsHistoryDataTableSettings />
+	}
+}

internal/site/src/components/routes/settings/notifications.tsx

@@ -0,0 +1,226 @@
+import { t } from "@lingui/core/macro"
+import { Trans } from "@lingui/react/macro"
+import { BellIcon, LoaderCircleIcon, PlusIcon, SaveIcon, Trash2Icon } from "lucide-react"
+import { type ChangeEventHandler, useEffect, useState } from "react"
+import * as v from "valibot"
+import { prependBasePath } from "@/components/router"
+import { Button } from "@/components/ui/button"
+import { Card } from "@/components/ui/card"
+import { Input } from "@/components/ui/input"
+import { InputTags } from "@/components/ui/input-tags"
+import { Label } from "@/components/ui/label"
+import { Separator } from "@/components/ui/separator"
+import { toast } from "@/components/ui/use-toast"
+import { isAdmin, pb } from "@/lib/api"
+import type { UserSettings } from "@/types"
+import { saveSettings } from "./layout"
+
+interface ShoutrrrUrlCardProps {
+	url: string
+	onUrlChange: ChangeEventHandler<HTMLInputElement>
+	onRemove: () => void
+}
+
+const NotificationSchema = v.object({
+	emails: v.array(v.pipe(v.string(), v.email())),
+	webhooks: v.array(v.pipe(v.string(), v.url())),
+})
+
+const SettingsNotificationsPage = ({ userSettings }: { userSettings: UserSettings }) => {
+	const [webhooks, setWebhooks] = useState(userSettings.webhooks ?? [])
+	const [emails, setEmails] = useState<string[]>(userSettings.emails ?? [])
+	const [isLoading, setIsLoading] = useState(false)
+
+	// update values when userSettings changes
+	useEffect(() => {
+		setWebhooks(userSettings.webhooks ?? [])
+		setEmails(userSettings.emails ?? [])
+	}, [userSettings])
+
+	function addWebhook() {
+		setWebhooks([...webhooks, ""])
+		// focus on the new input
+		queueMicrotask(() => {
+			const inputs = document.querySelectorAll("#webhooks input") as NodeListOf<HTMLInputElement>
+			inputs[inputs.length - 1]?.focus()
+		})
+	}
+	const removeWebhook = (index: number) => setWebhooks(webhooks.filter((_, i) => i !== index))
+
+	function updateWebhook(index: number, value: string) {
+		const newWebhooks = [...webhooks]
+		newWebhooks[index] = value
+		setWebhooks(newWebhooks)
+	}
+
+	async function updateSettings() {
+		setIsLoading(true)
+		try {
+			const parsedData = v.parse(NotificationSchema, { emails, webhooks })
+			await saveSettings(parsedData)
+		} catch (e: any) {
+			toast({
+				title: t`Failed to save settings`,
+				description: e.message,
+				variant: "destructive",
+			})
+		}
+		setIsLoading(false)
+	}
+
+	return (
+		<div>
+			<div>
+				<h3 className="text-xl font-medium mb-2">
+					<Trans>Notifications</Trans>
+				</h3>
+				<p className="text-sm text-muted-foreground leading-relaxed">
+					<Trans>Configure how you receive alert notifications.</Trans>
+				</p>
+				<p className="text-sm text-muted-foreground mt-1.5 leading-relaxed">
+					<Trans>
+						Looking instead for where to create alerts? Click the bell <BellIcon className="inline h-4 w-4" /> icons in
+						the systems table.
+					</Trans>
+				</p>
+			</div>
+			<Separator className="my-4" />
+			<div className="space-y-5">
+				<div className="grid gap-2">
+					<div className="mb-2">
+						<h3 className="mb-1 text-lg font-medium">
+							<Trans>Email notifications</Trans>
+						</h3>
+						{isAdmin() && (
+							<p className="text-sm text-muted-foreground leading-relaxed">
+								<Trans>
+									Please{" "}
+									<a href={prependBasePath("/_/#/settings/mail")} className="link" target="_blank">
+										configure an SMTP server
+									</a>{" "}
+									to ensure alerts are delivered.
+								</Trans>
+							</p>
+						)}
+					</div>
+					<Label className="block" htmlFor="email">
+						<Trans>To email(s)</Trans>
+					</Label>
+					<InputTags
+						value={emails}
+						onChange={setEmails}
+						placeholder={t`Enter email address...`}
+						className="w-full"
+						type="email"
+						id="email"
+					/>
+					<p className="text-[0.8rem] text-muted-foreground">
+						<Trans>Save address using enter key or comma. Leave blank to disable email notifications.</Trans>
+					</p>
+				</div>
+				<Separator />
+				<div className="space-y-3">
+					<div>
+						<h3 className="mb-1 text-lg font-medium">
+							<Trans>Webhook / Push notifications</Trans>
+						</h3>
+						<p className="text-sm text-muted-foreground leading-relaxed">
+							<Trans>
+								Beszel uses{" "}
+								<a href="https://beszel.dev/guide/notifications" target="_blank" className="link" rel="noopener">
+									Shoutrrr
+								</a>{" "}
+								to integrate with popular notification services.
+							</Trans>
+						</p>
+					</div>
+					{webhooks.length > 0 && (
+						<div className="grid gap-2.5" id="webhooks">
+							{webhooks.map((webhook, index) => (
+								<ShoutrrrUrlCard
+									key={index}
+									url={webhook}
+									onUrlChange={(e: React.ChangeEvent<HTMLInputElement>) => updateWebhook(index, e.target.value)}
+									onRemove={() => removeWebhook(index)}
+								/>
+							))}
+						</div>
+					)}
+					<Button
+						type="button"
+						variant="outline"
+						size="sm"
+						className="mt-2 flex items-center gap-1"
+						onClick={addWebhook}
+					>
+						<PlusIcon className="h-4 w-4 -ms-0.5" />
+						<Trans>Add URL</Trans>
+					</Button>
+				</div>
+				<Separator />
+				<Button
+					type="button"
+					className="flex items-center gap-1.5 disabled:opacity-100"
+					onClick={updateSettings}
+					disabled={isLoading}
+				>
+					{isLoading ? <LoaderCircleIcon className="h-4 w-4 animate-spin" /> : <SaveIcon className="h-4 w-4" />}
+					<Trans>Save Settings</Trans>
+				</Button>
+			</div>
+		</div>
+	)
+}
+
+const ShoutrrrUrlCard = ({ url, onUrlChange, onRemove }: ShoutrrrUrlCardProps) => {
+	const [isLoading, setIsLoading] = useState(false)
+
+	const sendTestNotification = async () => {
+		setIsLoading(true)
+		const res = await pb.send("/api/beszel/test-notification", { method: "POST", body: { url } })
+		if ("err" in res && !res.err) {
+			toast({
+				title: t`Test notification sent`,
+				description: t`Check your notification service`,
+			})
+		} else {
+			toast({
+				title: t`Error`,
+				description: res.err ?? t`Failed to send test notification`,
+				variant: "destructive",
+			})
+		}
+		setIsLoading(false)
+	}
+
+	return (
+		<Card className="bg-muted/40 p-2 md:p-3">
+			<div className="flex items-center gap-1">
+				<Input
+					type="url"
+					className="light:bg-card"
+					required
+					placeholder="generic://webhook.site/xxxxxx"
+					value={url}
+					onChange={onUrlChange}
+				/>
+				<Button type="button" variant="outline" disabled={isLoading || url === ""} onClick={sendTestNotification}>
+					{isLoading ? (
+						<LoaderCircleIcon className="h-4 w-4 animate-spin" />
+					) : (
+						<span>
+							<Trans>
+								Test <span className="hidden sm:inline">URL</span>
+							</Trans>
+						</span>
+					)}
+				</Button>
+				<Button type="button" variant="outline" size="icon" className="shrink-0" aria-label="Delete" onClick={onRemove}>
+					<Trash2Icon className="h-4 w-4" />
+				</Button>
+			</div>
+		</Card>
+	)
+}
+
+export default SettingsNotificationsPage

internal/site/src/components/routes/settings/sidebar-nav.tsx

@@ -0,0 +1,74 @@
+import { useStore } from "@nanostores/react"
+import type React from "react"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { Separator } from "@/components/ui/separator"
+import { isAdmin, isReadOnlyUser } from "@/lib/api"
+import { cn } from "@/lib/utils"
+import { $router, Link, navigate } from "../../router"
+import { buttonVariants } from "../../ui/button"
+
+interface SidebarNavProps extends React.HTMLAttributes<HTMLElement> {
+	items: {
+		href: string
+		title: string
+		icon?: React.FC<React.SVGProps<SVGSVGElement>>
+		admin?: boolean
+		noReadOnly?: boolean
+		preload?: () => Promise<{ default: React.ComponentType<any> }>
+	}[]
+}
+
+export function SidebarNav({ className, items, ...props }: SidebarNavProps) {
+	const page = useStore($router)
+
+	return (
+		<>
+			{/* Mobile View */}
+			<div className="md:hidden">
+				<Select onValueChange={navigate} value={page?.path}>
+					<SelectTrigger className="w-full my-3.5">
+						<SelectValue placeholder="Select page" />
+					</SelectTrigger>
+					<SelectContent>
+						{items.map((item) => {
+							if (item.admin && !isAdmin()) return null
+							return (
+								<SelectItem key={item.href} value={item.href}>
+									<span className="flex items-center gap-2 truncate">
+										{item.icon && <item.icon className="size-4" />}
+										<span className="truncate">{item.title}</span>
+									</span>
+								</SelectItem>
+							)
+						})}
+					</SelectContent>
+				</Select>
+				<Separator />
+			</div>
+
+			{/* Desktop View */}
+			<nav className={cn("hidden md:grid gap-1 sticky top-6", className)} {...props}>
+				{items.map((item) => {
+					if ((item.admin && !isAdmin()) || (item.noReadOnly && isReadOnlyUser())) {
+						return null
+					}
+					return (
+						<Link
+							onMouseEnter={() => item.preload?.()}
+							key={item.href}
+							href={item.href}
+							className={cn(
+								buttonVariants({ variant: "ghost" }),
+								"flex items-center gap-3 justify-start truncate duration-50",
+								page?.path === item.href ? "bg-muted hover:bg-accent/70" : "hover:bg-accent/50"
+							)}
+						>
+							{item.icon && <item.icon className="size-4 shrink-0" />}
+							<span className="truncate">{item.title}</span>
+						</Link>
+					)
+				})}
+			</nav>
+		</>
+	)
+}

internal/site/src/components/routes/settings/tokens-fingerprints.tsx

@@ -0,0 +1,368 @@
+import { t } from "@lingui/core/macro"
+import { Trans, useLingui } from "@lingui/react/macro"
+import { redirectPage } from "@nanostores/router"
+import {
+	CopyIcon,
+	FingerprintIcon,
+	KeyIcon,
+	MoreHorizontalIcon,
+	RotateCwIcon,
+	ServerIcon,
+	Trash2Icon,
+} from "lucide-react"
+import { memo, useEffect, useMemo, useState } from "react"
+import {
+	copyDockerCompose,
+	copyDockerRun,
+	copyLinuxCommand,
+	copyWindowsCommand,
+	type DropdownItem,
+	InstallDropdown,
+} from "@/components/install-dropdowns"
+import { $router } from "@/components/router"
+import { Button } from "@/components/ui/button"
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuSeparator,
+	DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { AppleIcon, DockerIcon, TuxIcon, WindowsIcon } from "@/components/ui/icons"
+import { Separator } from "@/components/ui/separator"
+import { Switch } from "@/components/ui/switch"
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
+import { toast } from "@/components/ui/use-toast"
+import { isReadOnlyUser, pb } from "@/lib/api"
+import { $publicKey } from "@/lib/stores"
+import { cn, copyToClipboard, generateToken, getHubURL, tokenMap } from "@/lib/utils"
+import type { FingerprintRecord } from "@/types"
+
+const pbFingerprintOptions = {
+	expand: "system",
+	fields: "id,fingerprint,token,system,expand.system.name",
+}
+
+function sortFingerprints(fingerprints: FingerprintRecord[]) {
+	return fingerprints.sort((a, b) => a.expand.system.name.localeCompare(b.expand.system.name))
+}
+
+const SettingsFingerprintsPage = memo(() => {
+	if (isReadOnlyUser()) {
+		redirectPage($router, "settings", { name: "general" })
+	}
+	const [fingerprints, setFingerprints] = useState<FingerprintRecord[]>([])
+
+	// Get fingerprint records on mount
+	useEffect(() => {
+		pb.collection("fingerprints")
+			.getFullList<FingerprintRecord>(pbFingerprintOptions)
+			.then((prints) => {
+				setFingerprints(sortFingerprints(prints))
+			})
+	}, [])
+
+	// Subscribe to fingerprint updates
+	useEffect(() => {
+		let unsubscribe: (() => void) | undefined
+		;(async () => {
+			// subscribe to fingerprint updates
+			unsubscribe = await pb.collection("fingerprints").subscribe(
+				"*",
+				(res) => {
+					setFingerprints((currentFingerprints) => {
+						if (res.action === "create") {
+							return sortFingerprints([...currentFingerprints, res.record as FingerprintRecord])
+						}
+						if (res.action === "update") {
+							return currentFingerprints.map((fingerprint) => {
+								if (fingerprint.id === res.record.id) {
+									return { ...fingerprint, ...res.record } as FingerprintRecord
+								}
+								return fingerprint
+							})
+						}
+						if (res.action === "delete") {
+							return currentFingerprints.filter((fingerprint) => fingerprint.id !== res.record.id)
+						}
+						return currentFingerprints
+					})
+				},
+				pbFingerprintOptions
+			)
+		})()
+		// unsubscribe on unmount
+		return () => unsubscribe?.()
+	}, [])
+
+	// Update token map whenever fingerprints change
+	useEffect(() => {
+		for (const fingerprint of fingerprints) {
+			tokenMap.set(fingerprint.system, fingerprint.token)
+		}
+	}, [fingerprints])
+
+	return (
+		<>
+			<SectionIntro />
+			<Separator className="my-4" />
+			<SectionUniversalToken />
+			<Separator className="my-4" />
+			<SectionTable fingerprints={fingerprints} />
+		</>
+	)
+})
+
+const SectionIntro = memo(() => {
+	return (
+		<div>
+			<h3 className="text-xl font-medium mb-2">
+				<Trans>Tokens & Fingerprints</Trans>
+			</h3>
+			<p className="text-sm text-muted-foreground leading-relaxed">
+				<Trans>Tokens and fingerprints are used to authenticate WebSocket connections to the hub.</Trans>
+			</p>
+			<p className="text-sm text-muted-foreground leading-relaxed mt-1.5">
+				<Trans>
+					Tokens allow agents to connect and register. Fingerprints are stable identifiers unique to each system, set on
+					first connection.
+				</Trans>
+			</p>
+		</div>
+	)
+})
+
+const SectionUniversalToken = memo(() => {
+	const [token, setToken] = useState("")
+	const [isLoading, setIsLoading] = useState(true)
+	const [checked, setChecked] = useState(false)
+
+	async function updateToken(enable: number = -1) {
+		// enable: 0 for disable, 1 for enable, -1 (unset) for get current state
+		const data = await pb.send(`/api/beszel/universal-token`, {
+			query: {
+				token,
+				enable,
+			},
+		})
+		setToken(data.token)
+		setChecked(data.active)
+		setIsLoading(false)
+	}
+
+	useEffect(() => {
+		updateToken()
+	}, [])
+
+	return (
+		<div>
+			<h3 className="text-lg font-medium mb-2">
+				<Trans>Universal token</Trans>
+			</h3>
+			<p className="text-sm text-muted-foreground leading-relaxed">
+				<Trans>
+					When enabled, this token allows agents to self-register without prior system creation. Expires after one hour
+					or on hub restart.
+				</Trans>
+			</p>
+			<div className="min-h-16 overflow-auto max-w-full inline-flex items-center gap-5 mt-3 border py-2 ps-5 pe-4 rounded-md">
+				{!isLoading && (
+					<>
+						<Switch
+							defaultChecked={checked}
+							onCheckedChange={(checked) => {
+								updateToken(checked ? 1 : 0)
+							}}
+						/>
+						<span
+							className={cn(
+								"text-sm text-primary opacity-60 transition-opacity",
+								checked ? "opacity-100" : "select-none"
+							)}
+						>
+							{token}
+						</span>
+						<ActionsButtonUniversalToken token={token} checked={checked} />
+					</>
+				)}
+			</div>
+		</div>
+	)
+})
+
+const ActionsButtonUniversalToken = memo(({ token, checked }: { token: string; checked: boolean }) => {
+	const { t } = useLingui()
+	const publicKey = $publicKey.get()
+	const port = "45876"
+
+	const dropdownItems: DropdownItem[] = [
+		{
+			text: t({ message: "Copy docker compose", context: "Button to copy docker compose file content" }),
+			onClick: () => copyDockerCompose(port, publicKey, token),
+			icons: [DockerIcon],
+		},
+		{
+			text: t({ message: "Copy docker run", context: "Button to copy docker run command" }),
+			onClick: () => copyDockerRun(port, publicKey, token),
+			icons: [DockerIcon],
+		},
+		{
+			text: t`Copy Linux command`,
+			onClick: () => copyLinuxCommand(port, publicKey, token),
+			icons: [TuxIcon],
+		},
+		{
+			text: t({ message: "Homebrew command", context: "Button to copy install command" }),
+			onClick: () => copyLinuxCommand(port, publicKey, token, true),
+			icons: [TuxIcon, AppleIcon],
+		},
+		{
+			text: t({ message: "Windows command", context: "Button to copy install command" }),
+			onClick: () => copyWindowsCommand(port, publicKey, token),
+			icons: [WindowsIcon],
+		},
+	]
+	return (
+		<div className="flex items-center gap-2">
+			<DropdownMenu>
+				<DropdownMenuTrigger asChild>
+					<Button
+						variant="ghost"
+						size="icon"
+						disabled={!checked}
+						className={cn("transition-opacity", !checked && "opacity-50")}
+					>
+						<span className="sr-only">
+							<Trans>Open menu</Trans>
+						</span>
+						<MoreHorizontalIcon className="w-5" />
+					</Button>
+				</DropdownMenuTrigger>
+				<InstallDropdown items={dropdownItems} />
+			</DropdownMenu>
+		</div>
+	)
+})
+
+const SectionTable = memo(({ fingerprints = [] }: { fingerprints: FingerprintRecord[] }) => {
+	const { t } = useLingui()
+	const isReadOnly = isReadOnlyUser()
+
+	const headerCols = useMemo(
+		() => [
+			{
+				label: t`System`,
+				Icon: ServerIcon,
+				w: "11em",
+			},
+			{
+				label: t`Token`,
+				Icon: KeyIcon,
+				w: "20em",
+			},
+			{
+				label: t`Fingerprint`,
+				Icon: FingerprintIcon,
+				w: "20em",
+			},
+		],
+		[t]
+	)
+	return (
+		<div className="rounded-md border overflow-hidden w-full mt-4">
+			<Table>
+				<TableHeader>
+					<tr className="border-border/50">
+						{headerCols.map((col) => (
+							<TableHead key={col.label} style={{ minWidth: col.w }}>
+								<span className="flex items-center gap-2">
+									<col.Icon className="size-4" />
+									{col.label}
+								</span>
+							</TableHead>
+						))}
+						{!isReadOnly && (
+							<TableHead className="w-0">
+								<span className="sr-only">
+									<Trans>Actions</Trans>
+								</span>
+							</TableHead>
+						)}
+					</tr>
+				</TableHeader>
+				<TableBody className="whitespace-pre">
+					{fingerprints.map((fingerprint, i) => (
+						<TableRow key={i}>
+							<TableCell className="font-medium ps-5 py-2 max-w-60 truncate">
+								{fingerprint.expand.system.name}
+							</TableCell>
+							<TableCell className="font-mono text-[0.95em] py-2">{fingerprint.token}</TableCell>
+							<TableCell className="font-mono text-[0.95em] py-2">{fingerprint.fingerprint}</TableCell>
+							{!isReadOnly && (
+								<TableCell className="py-2 px-4 xl:px-2">
+									<ActionsButtonTable fingerprint={fingerprint} />
+								</TableCell>
+							)}
+						</TableRow>
+					))}
+				</TableBody>
+			</Table>
+		</div>
+	)
+})
+
+async function updateFingerprint(fingerprint: FingerprintRecord, rotateToken = false) {
+	try {
+		await pb.collection("fingerprints").update(fingerprint.id, {
+			fingerprint: "",
+			token: rotateToken ? generateToken() : fingerprint.token,
+		})
+	} catch (error: any) {
+		toast({
+			title: t`Error`,
+			description: error.message,
+		})
+	}
+}
+
+const ActionsButtonTable = memo(({ fingerprint }: { fingerprint: FingerprintRecord }) => {
+	const envVar = `HUB_URL=${getHubURL()}\nTOKEN=${fingerprint.token}`
+	const copyEnv = () => copyToClipboard(envVar)
+	const copyYaml = () => copyToClipboard(envVar.replaceAll("=", ": "))
+
+	return (
+		<DropdownMenu>
+			<DropdownMenuTrigger asChild>
+				<Button variant="ghost" size={"icon"} data-nolink>
+					<span className="sr-only">
+						<Trans>Open menu</Trans>
+					</span>
+					<MoreHorizontalIcon className="w-5" />
+				</Button>
+			</DropdownMenuTrigger>
+			<DropdownMenuContent align="end">
+				<DropdownMenuItem onClick={copyYaml}>
+					<CopyIcon className="me-2.5 size-4" />
+					<Trans>Copy YAML</Trans>
+				</DropdownMenuItem>
+				<DropdownMenuItem onClick={copyEnv}>
+					<CopyIcon className="me-2.5 size-4" />
+					<Trans context="Environment variables">Copy env</Trans>
+				</DropdownMenuItem>
+				<DropdownMenuSeparator />
+				<DropdownMenuItem onSelect={() => updateFingerprint(fingerprint, true)}>
+					<RotateCwIcon className="me-2.5 size-4" />
+					<Trans>Rotate token</Trans>
+				</DropdownMenuItem>
+				{fingerprint.fingerprint && (
+					<DropdownMenuItem onSelect={() => updateFingerprint(fingerprint)}>
+						<Trash2Icon className="me-2.5 size-4" />
+						<Trans>Delete fingerprint</Trans>
+					</DropdownMenuItem>
+				)}
+			</DropdownMenuContent>
+		</DropdownMenu>
+	)
+})
+
+export default SettingsFingerprintsPage

internal/site/src/components/routes/system.tsx

@@ -0,0 +1,942 @@
+import { t } from "@lingui/core/macro"
+import { Plural, Trans, useLingui } from "@lingui/react/macro"
+import { useStore } from "@nanostores/react"
+import { getPagePath } from "@nanostores/router"
+import { timeTicks } from "d3-time"
+import { ClockArrowUp, CpuIcon, GlobeIcon, LayoutGridIcon, MonitorIcon, XIcon } from "lucide-react"
+import { subscribeKeys } from "nanostores"
+import React, { type JSX, memo, useCallback, useEffect, useMemo, useRef, useState } from "react"
+import AreaChartDefault from "@/components/charts/area-chart"
+import ContainerChart from "@/components/charts/container-chart"
+import DiskChart from "@/components/charts/disk-chart"
+import GpuPowerChart from "@/components/charts/gpu-power-chart"
+import { useContainerChartConfigs } from "@/components/charts/hooks"
+import LoadAverageChart from "@/components/charts/load-average-chart"
+import MemChart from "@/components/charts/mem-chart"
+import SwapChart from "@/components/charts/swap-chart"
+import TemperatureChart from "@/components/charts/temperature-chart"
+import { getPbTimestamp, pb } from "@/lib/api"
+import { ChartType, Os, SystemStatus, Unit } from "@/lib/enums"
+import { batteryStateTranslations } from "@/lib/i18n"
+import {
+	$allSystemsByName,
+	$chartTime,
+	$containerFilter,
+	$direction,
+	$maxValues,
+	$systems,
+	$temperatureFilter,
+	$userSettings,
+} from "@/lib/stores"
+import { useIntersectionObserver } from "@/lib/use-intersection-observer"
+import {
+	chartTimeData,
+	cn,
+	decimalString,
+	formatBytes,
+	getHostDisplayValue,
+	listen,
+	parseSemVer,
+	toFixedFloat,
+	useBrowserStorage,
+} from "@/lib/utils"
+import type { ChartData, ChartTimes, ContainerStatsRecord, GPUData, SystemRecord, SystemStatsRecord } from "@/types"
+import ChartTimeSelect from "../charts/chart-time-select"
+import { $router, navigate } from "../router"
+import Spinner from "../spinner"
+import { Button } from "../ui/button"
+import { Card, CardDescription, CardHeader, CardTitle } from "../ui/card"
+import { AppleIcon, ChartAverage, ChartMax, FreeBsdIcon, Rows, TuxIcon, WindowsIcon } from "../ui/icons"
+import { Input } from "../ui/input"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../ui/select"
+import { Separator } from "../ui/separator"
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../ui/tooltip"
+
+type ChartTimeData = {
+	time: number
+	data: {
+		ticks: number[]
+		domain: number[]
+	}
+	chartTime: ChartTimes
+}
+
+
+const cache = new Map<string, ChartTimeData | SystemStatsRecord[] | ContainerStatsRecord[]>()
+
+// create ticks and domain for charts
+function getTimeData(chartTime: ChartTimes, lastCreated: number) {
+	const cached = cache.get("td") as ChartTimeData | undefined
+	if (cached && cached.chartTime === chartTime) {
+		if (!lastCreated || cached.time >= lastCreated) {
+			return cached.data
+		}
+	}
+
+	const now = new Date()
+	const startTime = chartTimeData[chartTime].getOffset(now)
+	const ticks = timeTicks(startTime, now, chartTimeData[chartTime].ticks ?? 12).map((date) => date.getTime())
+	const data = {
+		ticks,
+		domain: [chartTimeData[chartTime].getOffset(now).getTime(), now.getTime()],
+	}
+	cache.set("td", { time: now.getTime(), data, chartTime })
+	return data
+}
+
+// add empty values between records to make gaps if interval is too large
+function addEmptyValues<T extends SystemStatsRecord | ContainerStatsRecord>(
+	prevRecords: T[],
+	newRecords: T[],
+	expectedInterval: number,
+) {
+	const modifiedRecords: T[] = []
+	let prevTime = (prevRecords.at(-1)?.created ?? 0) as number
+	for (let i = 0; i < newRecords.length; i++) {
+		const record = newRecords[i]
+		record.created = new Date(record.created).getTime()
+		if (prevTime) {
+			const interval = record.created - prevTime
+			// if interval is too large, add a null record
+			if (interval > expectedInterval / 2 + expectedInterval) {
+				// @ts-expect-error
+				modifiedRecords.push({ created: null, stats: null })
+			}
+		}
+		prevTime = record.created
+		modifiedRecords.push(record)
+	}
+	return modifiedRecords
+}
+
+async function getStats<T extends SystemStatsRecord | ContainerStatsRecord>(collection: string, system: SystemRecord, chartTime: ChartTimes): Promise<T[]> {
+	const cachedStats = cache.get(`${system.id}_${chartTime}_${collection}`) as T[] | undefined
+	const lastCached = cachedStats?.at(-1)?.created as number
+	return await pb.collection<T>(collection).getFullList({
+		filter: pb.filter("system={:id} && created > {:created} && type={:type}", {
+			id: system.id,
+			created: getPbTimestamp(chartTime, lastCached ? new Date(lastCached + 1000) : undefined),
+			type: chartTimeData[chartTime].type,
+		}),
+		fields: "created,stats",
+		sort: "created",
+	})
+}
+
+function dockerOrPodman(str: string, system: SystemRecord) {
+	if (system.info.p) {
+		str = str.replace("docker", "podman").replace("Docker", "Podman")
+	}
+	return str
+}
+
+export default memo(function SystemDetail({ name }: { name: string }) {
+	const direction = useStore($direction)
+	const { t } = useLingui()
+	const systems = useStore($systems)
+	const chartTime = useStore($chartTime)
+	const maxValues = useStore($maxValues)
+	const [grid, setGrid] = useBrowserStorage("grid", true)
+	const [system, setSystem] = useState({} as SystemRecord)
+	const [systemStats, setSystemStats] = useState([] as SystemStatsRecord[])
+	const [containerData, setContainerData] = useState([] as ChartData["containerData"])
+	const netCardRef = useRef<HTMLDivElement>(null)
+	const persistChartTime = useRef(false)
+	const [containerFilterBar, setContainerFilterBar] = useState(null as null | JSX.Element)
+	const [bottomSpacing, setBottomSpacing] = useState(0)
+	const [chartLoading, setChartLoading] = useState(true)
+	const isLongerChart = chartTime !== "1h"
+	const userSettings = $userSettings.get()
+	const chartWrapRef = useRef<HTMLDivElement>(null)
+
+	useEffect(() => {
+		document.title = `${name} / Beszel`
+		return () => {
+			if (!persistChartTime.current) {
+				$chartTime.set($userSettings.get().chartTime)
+			}
+			persistChartTime.current = false
+			setSystemStats([])
+			setContainerData([])
+			setContainerFilterBar(null)
+			$containerFilter.set("")
+		}
+	}, [name])
+
+	// find matching system and update when it changes
+	useEffect(() => {
+		return subscribeKeys($allSystemsByName, [name], (newSystems) => {
+			const sys = newSystems[name]
+			sys?.id && setSystem(sys)
+		})
+	}, [name])
+
+	// biome-ignore lint/correctness/useExhaustiveDependencies: not necessary
+	const chartData: ChartData = useMemo(() => {
+		const lastCreated = Math.max(
+			(systemStats.at(-1)?.created as number) ?? 0,
+			(containerData.at(-1)?.created as number) ?? 0,
+		)
+		return {
+			systemStats,
+			containerData,
+			chartTime,
+			orientation: direction === "rtl" ? "right" : "left",
+			...getTimeData(chartTime, lastCreated),
+			agentVersion: parseSemVer(system?.info?.v),
+		}
+	}, [systemStats, containerData, direction])
+
+	// Share chart config computation for all container charts
+	const containerChartConfigs = useContainerChartConfigs(containerData)
+
+	// make container stats for charts
+	const makeContainerData = useCallback((containers: ContainerStatsRecord[]) => {
+		const containerData = [] as ChartData["containerData"]
+		for (let { created, stats } of containers) {
+			if (!created) {
+				// @ts-expect-error add null value for gaps
+				containerData.push({ created: null })
+				continue
+			}
+			created = new Date(created).getTime()
+			// @ts-expect-error not dealing with this rn
+			const containerStats: ChartData["containerData"][0] = { created }
+			for (const container of stats) {
+				containerStats[container.n] = container
+			}
+			containerData.push(containerStats)
+		}
+		setContainerData(containerData)
+	}, [])
+
+	// get stats
+	// biome-ignore lint/correctness/useExhaustiveDependencies: not necessary
+		useEffect(() => {
+		if (!system.id || !chartTime) {
+			return
+		}
+		// loading: true
+		setChartLoading(true)
+		Promise.allSettled([
+			getStats<SystemStatsRecord>("system_stats", system, chartTime),
+			getStats<ContainerStatsRecord>("container_stats", system, chartTime),
+		]).then(([systemStats, containerStats]) => {
+			// loading: false
+			setChartLoading(false)
+
+			const { expectedInterval } = chartTimeData[chartTime]
+			// make new system stats
+			const ss_cache_key = `${system.id}_${chartTime}_system_stats`
+			let systemData = (cache.get(ss_cache_key) || []) as SystemStatsRecord[]
+			if (systemStats.status === "fulfilled" && systemStats.value.length) {
+				systemData = systemData.concat(addEmptyValues(systemData, systemStats.value, expectedInterval))
+				if (systemData.length > 120) {
+					systemData = systemData.slice(-100)
+				}
+				cache.set(ss_cache_key, systemData)
+			}
+			setSystemStats(systemData)
+			// make new container stats
+			const cs_cache_key = `${system.id}_${chartTime}_container_stats`
+			let containerData = (cache.get(cs_cache_key) || []) as ContainerStatsRecord[]
+			if (containerStats.status === "fulfilled" && containerStats.value.length) {
+				containerData = containerData.concat(addEmptyValues(containerData, containerStats.value, expectedInterval))
+				if (containerData.length > 120) {
+					containerData = containerData.slice(-100)
+				}
+				cache.set(cs_cache_key, containerData)
+			}
+			if (containerData.length) {
+				!containerFilterBar && setContainerFilterBar(<FilterBar />)
+			} else if (containerFilterBar) {
+				setContainerFilterBar(null)
+			}
+			makeContainerData(containerData)
+		})
+	}, [system, chartTime])
+
+
+	// values for system info bar
+	const systemInfo = useMemo(() => {
+		if (!system.info) {
+			return []
+		}
+
+		const osInfo = {
+			[Os.Linux]: {
+				Icon: TuxIcon,
+				value: system.info.k,
+				label: t({ comment: "Linux kernel", message: "Kernel" }),
+			},
+			[Os.Darwin]: {
+				Icon: AppleIcon,
+				value: `macOS ${system.info.k}`,
+			},
+			[Os.Windows]: {
+				Icon: WindowsIcon,
+				value: system.info.k,
+			},
+			[Os.FreeBSD]: {
+				Icon: FreeBsdIcon,
+				value: system.info.k,
+			},
+		}
+		let uptime: React.ReactNode
+		if (system.info.u < 3600) {
+			uptime = (
+				<Plural
+					value={Math.trunc(system.info.u / 60)}
+					one="# minute"
+					few="# minutes"
+					many="# minutes"
+					other="# minutes"
+				/>
+			)
+		} else if (system.info.u < 172800) {
+			uptime = <Plural value={Math.trunc(system.info.u / 3600)} one="# hour" other="# hours" />
+		} else {
+			uptime = <Plural value={Math.trunc(system.info?.u / 86400)} one="# day" other="# days" />
+		}
+		return [
+			{ value: getHostDisplayValue(system), Icon: GlobeIcon },
+			{
+				value: system.info.h,
+				Icon: MonitorIcon,
+				label: "Hostname",
+				// hide if hostname is same as host or name
+				hide: system.info.h === system.host || system.info.h === system.name,
+			},
+			{ value: uptime, Icon: ClockArrowUp, label: t`Uptime`, hide: !system.info.u },
+			osInfo[system.info.os ?? Os.Linux],
+			{
+				value: `${system.info.m} (${system.info.c}c${system.info.t ? `/${system.info.t}t` : ""})`,
+				Icon: CpuIcon,
+				hide: !system.info.m,
+			},
+		] as {
+			value: string | number | undefined
+			label?: string
+			Icon: React.ElementType
+			hide?: boolean
+		}[]
+	}, [system, t])
+
+	/** Space for tooltip if more than 12 containers */
+	useEffect(() => {
+		if (!netCardRef.current || !containerData.length) {
+			setBottomSpacing(0)
+			return
+		}
+		const tooltipHeight = (Object.keys(containerData[0]).length - 11) * 17.8 - 40
+		const wrapperEl = chartWrapRef.current as HTMLDivElement
+		const wrapperRect = wrapperEl.getBoundingClientRect()
+		const chartRect = netCardRef.current.getBoundingClientRect()
+		const distanceToBottom = wrapperRect.bottom - chartRect.bottom
+		setBottomSpacing(tooltipHeight - distanceToBottom)
+	}, [containerData])
+
+	// keyboard navigation between systems
+	useEffect(() => {
+		if (!systems.length) {
+			return
+		}
+		const handleKeyUp = (e: KeyboardEvent) => {
+			if (
+				e.target instanceof HTMLInputElement ||
+				e.target instanceof HTMLTextAreaElement ||
+				e.shiftKey ||
+				e.ctrlKey ||
+				e.metaKey
+			) {
+				return
+			}
+			const currentIndex = systems.findIndex((s) => s.name === name)
+			if (currentIndex === -1 || systems.length <= 1) {
+				return
+			}
+			switch (e.key) {
+				case "ArrowLeft":
+				case "h": {
+					const prevIndex = (currentIndex - 1 + systems.length) % systems.length
+					persistChartTime.current = true
+					return navigate(getPagePath($router, "system", { name: systems[prevIndex].name }))
+				}
+				case "ArrowRight":
+				case "l": {
+					const nextIndex = (currentIndex + 1) % systems.length
+					persistChartTime.current = true
+					return navigate(getPagePath($router, "system", { name: systems[nextIndex].name }))
+				}
+			}
+		}
+		return listen(document, "keyup", handleKeyUp)
+	}, [name, systems])
+
+	if (!system.id) {
+		return null
+	}
+
+	// select field for switching between avg and max values
+	const maxValSelect = isLongerChart ? <SelectAvgMax max={maxValues} /> : null
+	const showMax = chartTime !== "1h" && maxValues
+
+	// if no data, show empty message
+	const dataEmpty = !chartLoading && chartData.systemStats.length === 0
+	const lastGpuVals = Object.values(systemStats.at(-1)?.stats.g ?? {})
+	const hasGpuData = lastGpuVals.length > 0
+	const hasGpuPowerData = lastGpuVals.some((gpu) => gpu.p !== undefined)
+
+	let translatedStatus: string = system.status
+	if (system.status === SystemStatus.Up) {
+		translatedStatus = t({ message: "Up", comment: "Context: System is up" })
+	} else if (system.status === SystemStatus.Down) {
+		translatedStatus = t({ message: "Down", comment: "Context: System is down" })
+	}
+
+	return (
+		<>
+			<div ref={chartWrapRef}  className="grid gap-4 mb-14 overflow-x-clip">
+				{/* system info */}
+				<Card>
+					<div className="grid xl:flex gap-4 px-4 sm:px-6 pt-3 sm:pt-4 pb-5">
+						<div>
+							<h1 className="text-[1.6rem] font-semibold mb-1.5">{system.name}</h1>
+							<div className="flex flex-wrap items-center gap-3 gap-y-2 text-sm opacity-90">
+								<div className="capitalize flex gap-2 items-center">
+									<span className={cn("relative flex h-3 w-3")}>
+										{system.status === SystemStatus.Up && (
+											<span
+												className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"
+												style={{ animationDuration: "1.5s" }}
+											></span>
+										)}
+										<span
+											className={cn("relative inline-flex rounded-full h-3 w-3", {
+												"bg-green-500": system.status === SystemStatus.Up,
+												"bg-red-500": system.status === SystemStatus.Down,
+												"bg-primary/40": system.status === SystemStatus.Paused,
+												"bg-yellow-500": system.status === SystemStatus.Pending,
+											})}
+										></span>
+									</span>
+									{translatedStatus}
+								</div>
+								{systemInfo.map(({ value, label, Icon, hide }) => {
+									if (hide || !value) {
+										return null
+									}
+									const content = (
+										<div className="flex gap-1.5 items-center">
+											<Icon className="h-4 w-4" /> {value}
+										</div>
+									)
+									return (
+										<div key={value} className="contents">
+											<Separator orientation="vertical" className="h-4 bg-primary/30" />
+											{label ? (
+												<TooltipProvider>
+													<Tooltip delayDuration={150}>
+														<TooltipTrigger asChild>{content}</TooltipTrigger>
+														<TooltipContent>{label}</TooltipContent>
+													</Tooltip>
+												</TooltipProvider>
+											) : (
+												content
+											)}
+										</div>
+									)
+								})}
+							</div>
+						</div>
+						<div className="xl:ms-auto flex items-center gap-2 max-sm:-mb-1">
+							<ChartTimeSelect className="w-full xl:w-40" />
+							<TooltipProvider delayDuration={100}>
+								<Tooltip>
+									<TooltipTrigger asChild>
+										<Button
+											aria-label={t`Toggle grid`}
+											variant="outline"
+											size="icon"
+											className="hidden xl:flex p-0 text-primary"
+											onClick={() => setGrid(!grid)}
+										>
+											{grid ? (
+												<LayoutGridIcon className="h-[1.2rem] w-[1.2rem] opacity-75" />
+											) : (
+												<Rows className="h-[1.3rem] w-[1.3rem] opacity-75" />
+											)}
+										</Button>
+									</TooltipTrigger>
+									<TooltipContent>{t`Toggle grid`}</TooltipContent>
+								</Tooltip>
+							</TooltipProvider>
+						</div>
+					</div>
+				</Card>
+
+				{/* main charts */}
+				<div className="grid xl:grid-cols-2 gap-4">
+					<ChartCard
+						empty={dataEmpty}
+						grid={grid}
+						title={t`CPU Usage`}
+						description={t`Average system-wide CPU utilization`}
+						cornerEl={maxValSelect}
+					>
+						<AreaChartDefault
+							chartData={chartData}
+							maxToggled={maxValues}
+							dataPoints={[
+								{
+									label: t`CPU Usage`,
+									dataKey: ({ stats }) => (showMax ? stats?.cpum : stats?.cpu),
+									color: 1,
+									opacity: 0.4,
+								},
+							]}
+							tickFormatter={(val) => `${toFixedFloat(val, 2)}%`}
+							contentFormatter={({ value }) => `${decimalString(value)}%`}
+						/>
+					</ChartCard>
+
+					{containerFilterBar && (
+						<ChartCard
+							empty={dataEmpty}
+							grid={grid}
+							title={dockerOrPodman(t`Docker CPU Usage`, system)}
+							description={t`Average CPU utilization of containers`}
+							cornerEl={containerFilterBar}
+						>
+							<ContainerChart
+								chartData={chartData}
+								dataKey="c"
+								chartType={ChartType.CPU}
+								chartConfig={containerChartConfigs.cpu}
+							/>
+						</ChartCard>
+					)}
+
+					<ChartCard
+						empty={dataEmpty}
+						grid={grid}
+						title={t`Memory Usage`}
+						description={t`Precise utilization at the recorded time`}
+						cornerEl={maxValSelect}
+					>
+						<MemChart chartData={chartData} showMax={showMax} />
+					</ChartCard>
+
+					{containerFilterBar && (
+						<ChartCard
+							empty={dataEmpty}
+							grid={grid}
+							title={dockerOrPodman(t`Docker Memory Usage`, system)}
+							description={dockerOrPodman(t`Memory usage of docker containers`, system)}
+							cornerEl={containerFilterBar}
+						>
+							<ContainerChart
+								chartData={chartData}
+								dataKey="m"
+								chartType={ChartType.Memory}
+								chartConfig={containerChartConfigs.memory}
+							/>
+						</ChartCard>
+					)}
+
+					<ChartCard empty={dataEmpty} grid={grid} title={t`Disk Usage`} description={t`Usage of root partition`}>
+						<DiskChart chartData={chartData} dataKey="stats.du" diskSize={systemStats.at(-1)?.stats.d ?? NaN} />
+					</ChartCard>
+
+					<ChartCard
+						empty={dataEmpty}
+						grid={grid}
+						title={t`Disk I/O`}
+						description={t`Throughput of root filesystem`}
+						cornerEl={maxValSelect}
+					>
+						<AreaChartDefault
+							chartData={chartData}
+							maxToggled={maxValues}
+							dataPoints={[
+								{
+									label: t({ message: "Write", comment: "Disk write" }),
+									dataKey: ({ stats }) => (showMax ? stats?.dwm : stats?.dw),
+									color: 3,
+									opacity: 0.3,
+								},
+								{
+									label: t({ message: "Read", comment: "Disk read" }),
+									dataKey: ({ stats }) => (showMax ? stats?.drm : stats?.dr),
+									color: 1,
+									opacity: 0.3,
+								},
+							]}
+							tickFormatter={(val) => {
+								const { value, unit } = formatBytes(val, true, userSettings.unitDisk, true)
+								return `${toFixedFloat(value, value >= 10 ? 0 : 1)} ${unit}`
+							}}
+							contentFormatter={({ value }) => {
+								const { value: convertedValue, unit } = formatBytes(value, true, userSettings.unitDisk, true)
+								return `${decimalString(convertedValue, convertedValue >= 100 ? 1 : 2)} ${unit}`
+							}}
+						/>
+					</ChartCard>
+
+					<ChartCard
+						empty={dataEmpty}
+						grid={grid}
+						title={t`Bandwidth`}
+						cornerEl={maxValSelect}
+						description={t`Network traffic of public interfaces`}
+					>
+						<AreaChartDefault
+							chartData={chartData}
+							maxToggled={maxValues}
+							dataPoints={[
+								{
+									label: t`Sent`,
+									// use bytes if available, otherwise multiply old MB (can remove in future)
+									dataKey(data) {
+										if (showMax) {
+											return data?.stats?.bm?.[0] ?? (data?.stats?.nsm ?? 0) * 1024 * 1024
+										}
+										return data?.stats?.b?.[0] ?? data?.stats?.ns * 1024 * 1024
+									},
+									color: 5,
+									opacity: 0.2,
+								},
+								{
+									label: t`Received`,
+									dataKey(data) {
+										if (showMax) {
+											return data?.stats?.bm?.[1] ?? (data?.stats?.nrm ?? 0) * 1024 * 1024
+										}
+										return data?.stats?.b?.[1] ?? data?.stats?.nr * 1024 * 1024
+									},
+									color: 2,
+									opacity: 0.2,
+								},
+							]}
+							tickFormatter={(val) => {
+								const { value, unit } = formatBytes(val, true, userSettings.unitNet, false)
+								return `${toFixedFloat(value, value >= 10 ? 0 : 1)} ${unit}`
+							}}
+							contentFormatter={(data) => {
+								const { value, unit } = formatBytes(data.value, true, userSettings.unitNet, false)
+								return `${decimalString(value, value >= 100 ? 1 : 2)} ${unit}`
+							}}
+						/>
+					</ChartCard>
+
+					{containerFilterBar && containerData.length > 0 && (
+						<div
+							ref={netCardRef}
+							className={cn({
+								"col-span-full": !grid,
+							})}
+						>
+							<ChartCard
+								empty={dataEmpty}
+								title={dockerOrPodman(t`Docker Network I/O`, system)}
+								description={dockerOrPodman(t`Network traffic of docker containers`, system)}
+								cornerEl={containerFilterBar}
+							>
+								<ContainerChart
+									chartData={chartData}
+									chartType={ChartType.Network}
+									dataKey="n"
+									chartConfig={containerChartConfigs.network}
+								/>
+							</ChartCard>
+						</div>
+					)}
+
+					{/* Swap chart */}
+					{(systemStats.at(-1)?.stats.su ?? 0) > 0 && (
+						<ChartCard
+							empty={dataEmpty}
+							grid={grid}
+							title={t`Swap Usage`}
+							description={t`Swap space used by the system`}
+						>
+							<SwapChart chartData={chartData} />
+						</ChartCard>
+					)}
+
+					{/* Load Average chart */}
+					{chartData.agentVersion?.minor >= 12 && (
+						<ChartCard
+							empty={dataEmpty}
+							grid={grid}
+							title={t`Load Average`}
+							description={t`System load averages over time`}
+						>
+							<LoadAverageChart chartData={chartData} />
+						</ChartCard>
+					)}
+
+					{/* Temperature chart */}
+					{systemStats.at(-1)?.stats.t && (
+						<ChartCard
+							empty={dataEmpty}
+							grid={grid}
+							title={t`Temperature`}
+							description={t`Temperatures of system sensors`}
+							cornerEl={<FilterBar store={$temperatureFilter} />}
+						>
+							<TemperatureChart chartData={chartData} />
+						</ChartCard>
+					)}
+
+					{/* Battery chart */}
+					{systemStats.at(-1)?.stats.bat && (
+						<ChartCard
+							empty={dataEmpty}
+							grid={grid}
+							title={t`Battery`}
+							description={`${t({
+								message: "Current state",
+								comment: "Context: Battery state",
+							})}: ${batteryStateTranslations[systemStats.at(-1)?.stats.bat?.[1] ?? 0]()}`}
+						>
+							<AreaChartDefault
+								chartData={chartData}
+								maxToggled={maxValues}
+								dataPoints={[
+									{
+										label: t`Charge`,
+										dataKey: ({ stats }) => stats?.bat?.[0],
+										color: 1,
+										opacity: 0.35,
+									},
+								]}
+								domain={[0, 100]}
+								tickFormatter={(val) => `${val}%`}
+								contentFormatter={({ value }) => `${value}%`}
+							/>
+						</ChartCard>
+					)}
+
+					{/* GPU power draw chart */}
+					{hasGpuPowerData && (
+						<ChartCard
+							empty={dataEmpty}
+							grid={grid}
+							title={t`GPU Power Draw`}
+							description={t`Average power consumption of GPUs`}
+						>
+							<GpuPowerChart chartData={chartData} />
+						</ChartCard>
+					)}
+				</div>
+
+				{/* GPU charts */}
+				{hasGpuData && (
+					<div className="grid xl:grid-cols-2 gap-4">
+						{Object.keys(systemStats.at(-1)?.stats.g ?? {}).map((id) => {
+							const gpu = systemStats.at(-1)?.stats.g?.[id] as GPUData
+							return (
+								<div key={id} className="contents">
+									<ChartCard
+										empty={dataEmpty}
+										grid={grid}
+										title={`${gpu.n} ${t`Usage`}`}
+										description={t`Average utilization of ${gpu.n}`}
+									>
+										<AreaChartDefault
+											chartData={chartData}
+											dataPoints={[
+												{
+													label: t`Usage`,
+													dataKey: ({ stats }) => stats?.g?.[id]?.u ?? 0,
+													color: 1,
+													opacity: 0.35,
+												},
+											]}
+											tickFormatter={(val) => `${toFixedFloat(val, 2)}%`}
+											contentFormatter={({ value }) => `${decimalString(value)}%`}
+										/>
+									</ChartCard>
+									<ChartCard
+										empty={dataEmpty}
+										grid={grid}
+										title={`${gpu.n} VRAM`}
+										description={t`Precise utilization at the recorded time`}
+									>
+										<AreaChartDefault
+											chartData={chartData}
+											dataPoints={[
+												{
+													label: t`Usage`,
+													dataKey: ({ stats }) => stats?.g?.[id]?.mu ?? 0,
+													color: 2,
+													opacity: 0.25,
+												},
+											]}
+											max={gpu.mt}
+											tickFormatter={(val) => {
+												const { value, unit } = formatBytes(val, false, Unit.Bytes, true)
+												return `${toFixedFloat(value, value >= 10 ? 0 : 1)} ${unit}`
+											}}
+											contentFormatter={({ value }) => {
+												const { value: convertedValue, unit } = formatBytes(value, false, Unit.Bytes, true)
+												return `${decimalString(convertedValue)} ${unit}`
+											}}
+										/>
+									</ChartCard>
+								</div>
+							)
+						})}
+					</div>
+				)}
+
+				{/* extra filesystem charts */}
+				{Object.keys(systemStats.at(-1)?.stats.efs ?? {}).length > 0 && (
+					<div className="grid xl:grid-cols-2 gap-4">
+						{Object.keys(systemStats.at(-1)?.stats.efs ?? {}).map((extraFsName) => {
+							return (
+								<div key={extraFsName} className="contents">
+									<ChartCard
+										empty={dataEmpty}
+										grid={grid}
+										title={`${extraFsName} ${t`Usage`}`}
+										description={t`Disk usage of ${extraFsName}`}
+									>
+										<DiskChart
+											chartData={chartData}
+											dataKey={`stats.efs.${extraFsName}.du`}
+											diskSize={systemStats.at(-1)?.stats.efs?.[extraFsName].d ?? NaN}
+										/>
+									</ChartCard>
+									<ChartCard
+										empty={dataEmpty}
+										grid={grid}
+										title={`${extraFsName} I/O`}
+										description={t`Throughput of ${extraFsName}`}
+										cornerEl={maxValSelect}
+									>
+										<AreaChartDefault
+											chartData={chartData}
+											dataPoints={[
+												{
+													label: t`Write`,
+													dataKey: ({ stats }) => stats?.efs?.[extraFsName]?.[showMax ? "wm" : "w"] ?? 0,
+													color: 3,
+													opacity: 0.3,
+												},
+												{
+													label: t`Read`,
+													dataKey: ({ stats }) => stats?.efs?.[extraFsName]?.[showMax ? "rm" : "r"] ?? 0,
+													color: 1,
+													opacity: 0.3,
+												},
+											]}
+											maxToggled={maxValues}
+											tickFormatter={(val) => {
+												const { value, unit } = formatBytes(val, true, userSettings.unitDisk, true)
+												return `${toFixedFloat(value, value >= 10 ? 0 : 1)} ${unit}`
+											}}
+											contentFormatter={({ value }) => {
+												const { value: convertedValue, unit } = formatBytes(value, true, userSettings.unitDisk, true)
+												return `${decimalString(convertedValue, convertedValue >= 100 ? 1 : 2)} ${unit}`
+											}}
+										/>
+									</ChartCard>
+								</div>
+							)
+						})}
+					</div>
+				)}
+			</div>
+
+			{/* add space for tooltip if more than 12 containers */}
+			{bottomSpacing > 0 && <span className="block" style={{ height: bottomSpacing }} />}
+		</>
+	)
+})
+
+function FilterBar({ store = $containerFilter }: { store?: typeof $containerFilter }) {
+	const containerFilter = useStore(store)
+	const { t } = useLingui()
+
+	const handleChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+		store.set(e.target.value)
+	}, [store])
+
+	return (
+		<>
+			<Input placeholder={t`Filter...`} className="ps-4 pe-8" value={containerFilter} onChange={handleChange} />
+			{containerFilter && (
+				<Button
+					type="button"
+					variant="ghost"
+					size="icon"
+					aria-label="Clear"
+					className="absolute right-1 top-1/2 -translate-y-1/2 h-7 w-7 text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100"
+					onClick={() => store.set("")}
+				>
+					<XIcon className="h-4 w-4" />
+				</Button>
+			)}
+		</>
+	)
+}
+
+const SelectAvgMax = memo(({ max }: { max: boolean }) => {
+	const Icon = max ? ChartMax : ChartAverage
+	return (
+		<Select value={max ? "max" : "avg"} onValueChange={(e) => $maxValues.set(e === "max")}>
+			<SelectTrigger className="relative ps-10 pe-5">
+				<Icon className="h-4 w-4 absolute start-4 top-1/2 -translate-y-1/2 opacity-85" />
+				<SelectValue />
+			</SelectTrigger>
+			<SelectContent>
+				<SelectItem key="avg" value="avg">
+					<Trans>Average</Trans>
+				</SelectItem>
+				<SelectItem key="max" value="max">
+					<Trans comment="Chart select field. Please try to keep this short.">Max 1 min</Trans>
+				</SelectItem>
+			</SelectContent>
+		</Select>
+	)
+})
+
+function ChartCard({
+	title,
+	description,
+	children,
+	grid,
+	empty,
+	cornerEl,
+}: {
+	title: string
+	description: string
+	children: React.ReactNode
+	grid?: boolean
+	empty?: boolean
+	cornerEl?: JSX.Element | null
+}) {
+	const { isIntersecting, ref } = useIntersectionObserver()
+
+	return (
+		<Card className={cn("pb-2 sm:pb-4 odd:last-of-type:col-span-full", { "col-span-full": !grid })} ref={ref}>
+			<CardHeader className="pb-5 pt-4 gap-1 relative max-sm:py-3 max-sm:px-4">
+				<CardTitle className="text-xl sm:text-2xl">{title}</CardTitle>
+				<CardDescription>{description}</CardDescription>
+				{cornerEl && <div className="relative py-1 block sm:w-44 sm:absolute sm:top-3.5 sm:end-3.5">{cornerEl}</div>}
+			</CardHeader>
+			<div className="ps-0 w-[calc(100%-1.5em)] h-48 md:h-52 relative group">
+				{
+					<Spinner
+						msg={empty ? t`Waiting for enough records to display` : undefined}
+						// className="group-has-[.opacity-100]:opacity-0 transition-opacity"
+						className="group-has-[.opacity-100]:invisible duration-100"
+					/>
+				}
+				{isIntersecting && children}
+			</div>
+		</Card>
+	)
+}

internal/site/src/components/spinner.tsx

@@ -0,0 +1,14 @@
+import { cn } from "@/lib/utils"
+import { LoaderCircleIcon } from "lucide-react"
+
+export default function ({ msg, className }: { msg?: string; className?: string }) {
+	return (
+		<div className={cn(className, "flex flex-col items-center justify-center h-full absolute inset-0")}>
+			{msg ? (
+				<p className={"opacity-60 mb-2 text-center text-sm px-4"}>{msg}</p>
+			) : (
+				<LoaderCircleIcon className="animate-spin h-10 w-10 opacity-60" />
+			)}
+		</div>
+	)
+}

internal/site/src/components/systems-table/systems-table-columns.tsx

@@ -0,0 +1,453 @@
+import { SystemRecord } from "@/types"
+import { CellContext, ColumnDef, HeaderContext } from "@tanstack/react-table"
+import { ClassValue } from "clsx"
+import {
+	ArrowUpDownIcon,
+	CopyIcon,
+	CpuIcon,
+	HardDriveIcon,
+	MemoryStickIcon,
+	MoreHorizontalIcon,
+	PauseCircleIcon,
+	PenBoxIcon,
+	PlayCircleIcon,
+	ServerIcon,
+	Trash2Icon,
+	WifiIcon,
+} from "lucide-react"
+import { Button } from "../ui/button"
+import {
+	cn,
+	copyToClipboard,
+	decimalString,
+	formatBytes,
+	formatTemperature,
+	getMeterState,
+	parseSemVer,
+} from "@/lib/utils"
+import { EthernetIcon, GpuIcon, HourglassIcon, ThermometerIcon } from "../ui/icons"
+import { useStore } from "@nanostores/react"
+import { $longestSystemNameLen, $userSettings } from "@/lib/stores"
+import { Trans, useLingui } from "@lingui/react/macro"
+import { useMemo, useRef, useState } from "react"
+import { memo } from "react"
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuSeparator,
+	DropdownMenuTrigger,
+} from "../ui/dropdown-menu"
+import AlertButton from "../alerts/alert-button"
+import { Dialog } from "../ui/dialog"
+import { SystemDialog } from "../add-system"
+import { AlertDialog } from "../ui/alert-dialog"
+import {
+	AlertDialogAction,
+	AlertDialogCancel,
+	AlertDialogContent,
+	AlertDialogDescription,
+	AlertDialogFooter,
+	AlertDialogHeader,
+	AlertDialogTitle,
+} from "../ui/alert-dialog"
+import { buttonVariants } from "../ui/button"
+import { t } from "@lingui/core/macro"
+import { MeterState, SystemStatus } from "@/lib/enums"
+import { $router, Link } from "../router"
+import { getPagePath } from "@nanostores/router"
+import { isReadOnlyUser, pb } from "@/lib/api"
+
+const STATUS_COLORS = {
+	[SystemStatus.Up]: "bg-green-500",
+	[SystemStatus.Down]: "bg-red-500",
+	[SystemStatus.Paused]: "bg-primary/40",
+	[SystemStatus.Pending]: "bg-yellow-500",
+} as const
+
+/**
+ * @param viewMode - "table" or "grid"
+ * @returns - Column definitions for the systems table
+ */
+export default function SystemsTableColumns(viewMode: "table" | "grid"): ColumnDef<SystemRecord>[] {
+	return [
+		{
+			// size: 200,
+			size: 100,
+			minSize: 0,
+			accessorKey: "name",
+			id: "system",
+			name: () => t`System`,
+			filterFn: (() => {
+				let filterInput = ""
+				let filterInputLower = ""
+				const nameCache = new Map<string, string>()
+				const statusTranslations = {
+					[SystemStatus.Up]: t`Up`.toLowerCase(),
+					[SystemStatus.Down]: t`Down`.toLowerCase(),
+					[SystemStatus.Paused]: t`Paused`.toLowerCase(),
+				} as const
+
+				// match filter value against name or translated status
+				return (row, _, newFilterInput) => {
+					const { name, status } = row.original
+					if (newFilterInput !== filterInput) {
+						filterInput = newFilterInput
+						filterInputLower = newFilterInput.toLowerCase()
+					}
+					let nameLower = nameCache.get(name)
+					if (nameLower === undefined) {
+						nameLower = name.toLowerCase()
+						nameCache.set(name, nameLower)
+					}
+					if (nameLower.includes(filterInputLower)) {
+						return true
+					}
+					const statusLower = statusTranslations[status as keyof typeof statusTranslations]
+					return statusLower?.includes(filterInputLower) || false
+				}
+			})(),
+			enableHiding: false,
+			invertSorting: false,
+			Icon: ServerIcon,
+			cell: (info) => {
+				const { name } = info.row.original
+				const longestName = useStore($longestSystemNameLen)
+				return (
+					<>
+						<span className="flex gap-2 items-center font-medium text-sm text-nowrap md:ps-1">
+							<IndicatorDot system={info.row.original} />
+							{/* NOTE: change to 1 ch if switching to monospace font */}
+							<span className="truncate" style={{ width: `${longestName / 1.1}ch` }}>
+								{name}
+							</span>
+						</span>
+						<Link
+							href={getPagePath($router, "system", { name })}
+							className="inset-0 absolute size-full"
+							aria-label={name}
+						></Link>
+					</>
+				)
+			},
+			header: sortableHeader,
+		},
+		{
+			accessorFn: ({ info }) => info.cpu,
+			id: "cpu",
+			name: () => t`CPU`,
+			cell: TableCellWithMeter,
+			Icon: CpuIcon,
+			header: sortableHeader,
+		},
+		{
+			// accessorKey: "info.mp",
+			accessorFn: ({ info }) => info.mp,
+			id: "memory",
+			name: () => t`Memory`,
+			cell: TableCellWithMeter,
+			Icon: MemoryStickIcon,
+			header: sortableHeader,
+		},
+		{
+			accessorFn: ({ info }) => info.dp,
+			id: "disk",
+			name: () => t`Disk`,
+			cell: TableCellWithMeter,
+			Icon: HardDriveIcon,
+			header: sortableHeader,
+		},
+		{
+			accessorFn: ({ info }) => info.g,
+			id: "gpu",
+			name: () => "GPU",
+			cell: TableCellWithMeter,
+			Icon: GpuIcon,
+			header: sortableHeader,
+		},
+		{
+			id: "loadAverage",
+			accessorFn: ({ info }) => {
+				const sum = info.la?.reduce((acc, curr) => acc + curr, 0)
+				// TODO: remove this in future release in favor of la array
+				if (!sum) {
+					return (info.l1 ?? 0) + (info.l5 ?? 0) + (info.l15 ?? 0)
+				}
+				return sum
+			},
+			name: () => t({ message: "Load Avg", comment: "Short label for load average" }),
+			size: 0,
+			Icon: HourglassIcon,
+			header: sortableHeader,
+			cell(info: CellContext<SystemRecord, unknown>) {
+				const { info: sysInfo, status } = info.row.original
+				// agent version
+				const { minor, patch } = parseSemVer(sysInfo.v)
+				let loadAverages = sysInfo.la
+
+				// use legacy load averages if agent version is less than 12.1.0
+				if (!loadAverages || (minor === 12 && patch < 1)) {
+					loadAverages = [sysInfo.l1 ?? 0, sysInfo.l5 ?? 0, sysInfo.l15 ?? 0]
+				}
+
+				const max = Math.max(...loadAverages)
+				if (max === 0 && (status === SystemStatus.Paused || minor < 12)) {
+					return null
+				}
+
+				const normalizedLoad = max / (sysInfo.t ?? 1)
+				const threshold = getMeterState(normalizedLoad * 100)
+
+				return (
+					<div className="flex items-center gap-[.35em] w-full tabular-nums tracking-tight">
+						<span
+							className={cn("inline-block size-2 rounded-full me-0.5", {
+								[STATUS_COLORS[SystemStatus.Up]]: threshold === MeterState.Good,
+								[STATUS_COLORS[SystemStatus.Pending]]: threshold === MeterState.Warn,
+								[STATUS_COLORS[SystemStatus.Down]]: threshold === MeterState.Crit,
+								[STATUS_COLORS[SystemStatus.Paused]]: status !== SystemStatus.Up,
+							})}
+						/>
+						{loadAverages?.map((la, i) => (
+							<span key={i}>{decimalString(la, la >= 10 ? 1 : 2)}</span>
+						))}
+					</div>
+				)
+			},
+		},
+		{
+			accessorFn: ({ info }) => info.bb || (info.b || 0) * 1024 * 1024,
+			id: "net",
+			name: () => t`Net`,
+			size: 0,
+			Icon: EthernetIcon,
+			header: sortableHeader,
+			cell(info) {
+				const sys = info.row.original
+				const userSettings = useStore($userSettings, { keys: ["unitNet"] })
+				if (sys.status === SystemStatus.Paused) {
+					return null
+				}
+				const { value, unit } = formatBytes(info.getValue() as number, true, userSettings.unitNet, false)
+				return (
+					<span className="tabular-nums whitespace-nowrap">
+						{decimalString(value, value >= 100 ? 1 : 2)} {unit}
+					</span>
+				)
+			},
+		},
+		{
+			accessorFn: ({ info }) => info.dt,
+			id: "temp",
+			name: () => t({ message: "Temp", comment: "Temperature label in systems table" }),
+			size: 50,
+			hideSort: true,
+			Icon: ThermometerIcon,
+			header: sortableHeader,
+			cell(info) {
+				const val = info.getValue() as number
+				const userSettings = useStore($userSettings, { keys: ["unitTemp"] })
+				if (!val) {
+					return null
+				}
+				const { value, unit } = formatTemperature(val, userSettings.unitTemp)
+				return (
+					<span className={cn("tabular-nums whitespace-nowrap", viewMode === "table" && "ps-0.5")}>
+						{decimalString(value, value >= 100 ? 1 : 2)} {unit}
+					</span>
+				)
+			},
+		},
+		{
+			accessorFn: ({ info }) => info.v,
+			id: "agent",
+			name: () => t`Agent`,
+			// invertSorting: true,
+			size: 50,
+			Icon: WifiIcon,
+			hideSort: true,
+			header: sortableHeader,
+			cell(info) {
+				const version = info.getValue() as string
+				if (!version) {
+					return null
+				}
+				const system = info.row.original
+				return (
+					<span className={cn("flex gap-1.5 items-center md:pe-5 tabular-nums", viewMode === "table" && "ps-0.5")}>
+						<IndicatorDot
+							system={system}
+							className={
+								(system.status !== SystemStatus.Up && STATUS_COLORS[SystemStatus.Paused]) ||
+								(version === globalThis.BESZEL.HUB_VERSION && STATUS_COLORS[SystemStatus.Up]) ||
+								STATUS_COLORS[SystemStatus.Pending]
+							}
+						/>
+						<span className="truncate max-w-14">{info.getValue() as string}</span>
+					</span>
+				)
+			},
+		},
+		{
+			id: "actions",
+			// @ts-ignore
+			name: () => t({ message: "Actions", comment: "Table column" }),
+			size: 50,
+			cell: ({ row }) => (
+				<div className="relative z-10 flex justify-end items-center gap-1 -ms-3">
+					<AlertButton system={row.original} />
+					<ActionsButton system={row.original} />
+				</div>
+			),
+		},
+	] as ColumnDef<SystemRecord>[]
+}
+
+function sortableHeader(context: HeaderContext<SystemRecord, unknown>) {
+	const { column } = context
+	// @ts-ignore
+	const { Icon, hideSort, name }: { Icon: React.ElementType; name: () => string; hideSort: boolean } = column.columnDef
+	return (
+		<Button
+			variant="ghost"
+			className="h-9 px-3 flex"
+			onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+		>
+			{Icon && <Icon className="me-2 size-4" />}
+			{name()}
+			{hideSort || <ArrowUpDownIcon className="ms-2 size-4" />}
+		</Button>
+	)
+}
+
+function TableCellWithMeter(info: CellContext<SystemRecord, unknown>) {
+	const val = Number(info.getValue()) || 0
+	const threshold = getMeterState(val)
+	const meterClass = cn(
+		"h-full",
+		(info.row.original.status !== SystemStatus.Up && STATUS_COLORS.paused) ||
+			(threshold === MeterState.Good && STATUS_COLORS.up) ||
+			(threshold === MeterState.Warn && STATUS_COLORS.pending) ||
+			STATUS_COLORS.down
+	)
+	return (
+		<div className="flex gap-2 items-center tabular-nums tracking-tight w-full">
+			<span className="min-w-8 shrink-0">{decimalString(val, val >= 10 ? 1 : 2)}%</span>
+			<span className="flex-1 min-w-8 grid bg-muted h-[1em] rounded-sm overflow-hidden">
+				<span className={meterClass} style={{ width: `${val}%` }}></span>
+			</span>
+		</div>
+	)
+}
+
+export function IndicatorDot({ system, className }: { system: SystemRecord; className?: ClassValue }) {
+	className ||= STATUS_COLORS[system.status as keyof typeof STATUS_COLORS] || ""
+	return (
+		<span
+			className={cn("shrink-0 size-2 rounded-full", className)}
+			// style={{ marginBottom: "-1px" }}
+		/>
+	)
+}
+
+export const ActionsButton = memo(({ system }: { system: SystemRecord }) => {
+	const [deleteOpen, setDeleteOpen] = useState(false)
+	const [editOpen, setEditOpen] = useState(false)
+	let editOpened = useRef(false)
+	const { t } = useLingui()
+	const { id, status, host, name } = system
+
+	return useMemo(() => {
+		return (
+			<>
+				<DropdownMenu>
+					<DropdownMenuTrigger asChild>
+						<Button variant="ghost" size={"icon"}>
+							<span className="sr-only">
+								<Trans>Open menu</Trans>
+							</span>
+							<MoreHorizontalIcon className="w-5" />
+						</Button>
+					</DropdownMenuTrigger>
+					<DropdownMenuContent align="end">
+						{!isReadOnlyUser() && (
+							<DropdownMenuItem
+								onSelect={() => {
+									editOpened.current = true
+									setEditOpen(true)
+								}}
+							>
+								<PenBoxIcon className="me-2.5 size-4" />
+								<Trans>Edit</Trans>
+							</DropdownMenuItem>
+						)}
+						<DropdownMenuItem
+							className={cn(isReadOnlyUser() && "hidden")}
+							onClick={() => {
+								pb.collection("systems").update(id, {
+									status: status === SystemStatus.Paused ? SystemStatus.Pending : SystemStatus.Paused,
+								})
+							}}
+						>
+							{status === SystemStatus.Paused ? (
+								<>
+									<PlayCircleIcon className="me-2.5 size-4" />
+									<Trans>Resume</Trans>
+								</>
+							) : (
+								<>
+									<PauseCircleIcon className="me-2.5 size-4" />
+									<Trans>Pause</Trans>
+								</>
+							)}
+						</DropdownMenuItem>
+						<DropdownMenuItem onClick={() => copyToClipboard(name)}>
+							<CopyIcon className="me-2.5 size-4" />
+							<Trans>Copy name</Trans>
+						</DropdownMenuItem>
+						<DropdownMenuItem onClick={() => copyToClipboard(host)}>
+							<CopyIcon className="me-2.5 size-4" />
+							<Trans>Copy host</Trans>
+						</DropdownMenuItem>
+						<DropdownMenuSeparator className={cn(isReadOnlyUser() && "hidden")} />
+						<DropdownMenuItem className={cn(isReadOnlyUser() && "hidden")} onSelect={() => setDeleteOpen(true)}>
+							<Trash2Icon className="me-2.5 size-4" />
+							<Trans>Delete</Trans>
+						</DropdownMenuItem>
+					</DropdownMenuContent>
+				</DropdownMenu>
+				{/* edit dialog */}
+				<Dialog open={editOpen} onOpenChange={setEditOpen}>
+					{editOpened.current && <SystemDialog system={system} setOpen={setEditOpen} />}
+				</Dialog>
+				{/* deletion dialog */}
+				<AlertDialog open={deleteOpen} onOpenChange={(open) => setDeleteOpen(open)}>
+					<AlertDialogContent>
+						<AlertDialogHeader>
+							<AlertDialogTitle>
+								<Trans>Are you sure you want to delete {name}?</Trans>
+							</AlertDialogTitle>
+							<AlertDialogDescription>
+								<Trans>
+									This action cannot be undone. This will permanently delete all current records for {name} from the
+									database.
+								</Trans>
+							</AlertDialogDescription>
+						</AlertDialogHeader>
+						<AlertDialogFooter>
+							<AlertDialogCancel>
+								<Trans>Cancel</Trans>
+							</AlertDialogCancel>
+							<AlertDialogAction
+								className={cn(buttonVariants({ variant: "destructive" }))}
+								onClick={() => pb.collection("systems").delete(id)}
+							>
+								<Trans>Continue</Trans>
+							</AlertDialogAction>
+						</AlertDialogFooter>
+					</AlertDialogContent>
+				</AlertDialog>
+			</>
+		)
+	}, [id, status, host, name, t, deleteOpen, editOpen])
+})

internal/site/src/components/systems-table/systems-table.tsx

@@ -0,0 +1,506 @@
+import {
+	ColumnDef,
+	ColumnFiltersState,
+	getFilteredRowModel,
+	SortingState,
+	getSortedRowModel,
+	flexRender,
+	VisibilityState,
+	getCoreRowModel,
+	useReactTable,
+	Row,
+	Table as TableType,
+} from "@tanstack/react-table"
+import { TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
+import { Button } from "@/components/ui/button"
+import {
+	DropdownMenu,
+	DropdownMenuCheckboxItem,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuLabel,
+	DropdownMenuRadioGroup,
+	DropdownMenuRadioItem,
+	DropdownMenuSeparator,
+	DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { SystemRecord } from "@/types"
+import {
+	ArrowUpDownIcon,
+	LayoutGridIcon,
+	LayoutListIcon,
+	ArrowDownIcon,
+	ArrowUpIcon,
+	Settings2Icon,
+	EyeIcon,
+	FilterIcon,
+} from "lucide-react"
+import { memo, useEffect, useMemo, useRef, useState } from "react"
+import { $pausedSystems, $downSystems, $upSystems, $systems } from "@/lib/stores"
+import { useStore } from "@nanostores/react"
+import { cn, runOnce, useBrowserStorage } from "@/lib/utils"
+import { $router, Link } from "../router"
+import { useLingui, Trans } from "@lingui/react/macro"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../ui/card"
+import { Input } from "@/components/ui/input"
+import { getPagePath } from "@nanostores/router"
+import SystemsTableColumns, { ActionsButton, IndicatorDot } from "./systems-table-columns"
+import AlertButton from "../alerts/alert-button"
+import { SystemStatus } from "@/lib/enums"
+import { useVirtualizer, VirtualItem } from "@tanstack/react-virtual"
+
+type ViewMode = "table" | "grid"
+type StatusFilter = "all" | SystemRecord["status"]
+
+const preloadSystemDetail = runOnce(() => import("@/components/routes/system.tsx"))
+
+export default function SystemsTable() {
+	const data = useStore($systems)
+	const downSystems = $downSystems.get()
+	const upSystems = $upSystems.get()
+	const pausedSystems = $pausedSystems.get()
+	const { i18n, t } = useLingui()
+	const [filter, setFilter] = useState<string>()
+	const [statusFilter, setStatusFilter] = useState<StatusFilter>("all")
+	const [sorting, setSorting] = useBrowserStorage<SortingState>(
+		"sortMode",
+		[{ id: "system", desc: false }],
+		sessionStorage
+	)
+	const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([])
+	const [columnVisibility, setColumnVisibility] = useBrowserStorage<VisibilityState>("cols", {})
+
+	const locale = i18n.locale
+
+	// Filter data based on status filter
+	const filteredData = useMemo(() => {
+		if (statusFilter === "all") {
+			return data
+		}
+		if (statusFilter === SystemStatus.Up) {
+			return Object.values(upSystems) ?? []
+		}
+		if (statusFilter === SystemStatus.Down) {
+			return Object.values(downSystems) ?? []
+		}
+		return Object.values(pausedSystems) ?? []
+	}, [data, statusFilter])
+
+	const [viewMode, setViewMode] = useBrowserStorage<ViewMode>(
+		"viewMode",
+		// show grid view on mobile if there are less than 200 systems (looks better but table is more efficient)
+		window.innerWidth < 1024 && filteredData.length < 200 ? "grid" : "table"
+	)
+
+	useEffect(() => {
+		if (filter !== undefined) {
+			table.getColumn("system")?.setFilterValue(filter)
+		}
+	}, [filter])
+
+	const columnDefs = useMemo(() => SystemsTableColumns(viewMode), [viewMode])
+
+	const table = useReactTable({
+		data: filteredData,
+		columns: columnDefs,
+		getCoreRowModel: getCoreRowModel(),
+		onSortingChange: setSorting,
+		getSortedRowModel: getSortedRowModel(),
+		onColumnFiltersChange: setColumnFilters,
+		getFilteredRowModel: getFilteredRowModel(),
+		onColumnVisibilityChange: setColumnVisibility,
+		state: {
+			sorting,
+			columnFilters,
+			columnVisibility,
+		},
+		defaultColumn: {
+			invertSorting: true,
+			sortUndefined: "last",
+			minSize: 0,
+			size: 900,
+			maxSize: 900,
+		},
+	})
+
+	const rows = table.getRowModel().rows
+	const columns = table.getAllColumns()
+	const visibleColumns = table.getVisibleLeafColumns()
+
+	const [upSystemsLength, downSystemsLength, pausedSystemsLength] = useMemo(() => {
+		return [Object.values(upSystems).length, Object.values(downSystems).length, Object.values(pausedSystems).length]
+	}, [upSystems, downSystems, pausedSystems])
+
+	// TODO: hiding temp then gpu messes up table headers
+	const CardHead = useMemo(() => {
+		return (
+			<CardHeader className="pb-4.5 px-2 sm:px-6 max-sm:pt-5 max-sm:pb-1">
+				<div className="grid md:flex gap-5 w-full items-end">
+					<div className="px-2 sm:px-1">
+						<CardTitle className="mb-2">
+							<Trans>All Systems</Trans>
+						</CardTitle>
+						<CardDescription className="flex">
+							<Trans>Click on a system to view more information.</Trans>
+						</CardDescription>
+					</div>
+
+					<div className="flex gap-2 ms-auto w-full md:w-80">
+						<Input placeholder={t`Filter...`} onChange={(e) => setFilter(e.target.value)} className="px-4" />
+						<DropdownMenu>
+							<DropdownMenuTrigger asChild>
+								<Button variant="outline">
+									<Settings2Icon className="me-1.5 size-4 opacity-80" />
+									<Trans>View</Trans>
+								</Button>
+							</DropdownMenuTrigger>
+							<DropdownMenuContent align="end" className="h-72 md:h-auto min-w-48 md:min-w-auto overflow-y-auto">
+								<div className="grid grid-cols-1 md:grid-cols-4 divide-y md:divide-s md:divide-y-0">
+									<div className="border-r">
+										<DropdownMenuLabel className="pt-2 px-3.5 flex items-center gap-2">
+											<LayoutGridIcon className="size-4" />
+											<Trans>Layout</Trans>
+										</DropdownMenuLabel>
+										<DropdownMenuSeparator />
+										<DropdownMenuRadioGroup
+											className="px-1 pb-1"
+											value={viewMode}
+											onValueChange={(view) => setViewMode(view as ViewMode)}
+										>
+											<DropdownMenuRadioItem value="table" onSelect={(e) => e.preventDefault()} className="gap-2">
+												<LayoutListIcon className="size-4" />
+												<Trans>Table</Trans>
+											</DropdownMenuRadioItem>
+											<DropdownMenuRadioItem value="grid" onSelect={(e) => e.preventDefault()} className="gap-2">
+												<LayoutGridIcon className="size-4" />
+												<Trans>Grid</Trans>
+											</DropdownMenuRadioItem>
+										</DropdownMenuRadioGroup>
+									</div>
+
+									<div className="border-r">
+										<DropdownMenuLabel className="pt-2 px-3.5 flex items-center gap-2">
+											<FilterIcon className="size-4" />
+											<Trans>Status</Trans>
+										</DropdownMenuLabel>
+										<DropdownMenuSeparator />
+										<DropdownMenuRadioGroup
+											className="px-1 pb-1"
+											value={statusFilter}
+											onValueChange={(value) => setStatusFilter(value as StatusFilter)}
+										>
+											<DropdownMenuRadioItem value="all" onSelect={(e) => e.preventDefault()}>
+												<Trans>All Systems</Trans>
+											</DropdownMenuRadioItem>
+											<DropdownMenuRadioItem value="up" onSelect={(e) => e.preventDefault()}>
+												<Trans>Up ({upSystemsLength})</Trans>
+											</DropdownMenuRadioItem>
+											<DropdownMenuRadioItem value="down" onSelect={(e) => e.preventDefault()}>
+												<Trans>Down ({downSystemsLength})</Trans>
+											</DropdownMenuRadioItem>
+											<DropdownMenuRadioItem value="paused" onSelect={(e) => e.preventDefault()}>
+												<Trans>Paused ({pausedSystemsLength})</Trans>
+											</DropdownMenuRadioItem>
+										</DropdownMenuRadioGroup>
+									</div>
+
+									<div className="border-r">
+										<DropdownMenuLabel className="pt-2 px-3.5 flex items-center gap-2">
+											<ArrowUpDownIcon className="size-4" />
+											<Trans>Sort By</Trans>
+										</DropdownMenuLabel>
+										<DropdownMenuSeparator />
+										<div className="px-1 pb-1">
+											{columns.map((column) => {
+												if (!column.getCanSort()) return null
+												let Icon = <span className="w-6"></span>
+												// if current sort column, show sort direction
+												if (sorting[0]?.id === column.id) {
+													if (sorting[0]?.desc) {
+														Icon = <ArrowUpIcon className="me-2 size-4" />
+													} else {
+														Icon = <ArrowDownIcon className="me-2 size-4" />
+													}
+												}
+												return (
+													<DropdownMenuItem
+														onSelect={(e) => {
+															e.preventDefault()
+															setSorting([{ id: column.id, desc: sorting[0]?.id === column.id && !sorting[0]?.desc }])
+														}}
+														key={column.id}
+													>
+														{Icon}
+														{/* @ts-ignore */}
+														{column.columnDef.name()}
+													</DropdownMenuItem>
+												)
+											})}
+										</div>
+									</div>
+
+									<div>
+										<DropdownMenuLabel className="pt-2 px-3.5 flex items-center gap-2">
+											<EyeIcon className="size-4" />
+											<Trans>Visible Fields</Trans>
+										</DropdownMenuLabel>
+										<DropdownMenuSeparator />
+										<div className="px-1.5 pb-1">
+											{columns
+												.filter((column) => column.getCanHide())
+												.map((column) => {
+													return (
+														<DropdownMenuCheckboxItem
+															key={column.id}
+															onSelect={(e) => e.preventDefault()}
+															checked={column.getIsVisible()}
+															onCheckedChange={(value) => column.toggleVisibility(!!value)}
+														>
+															{/* @ts-ignore */}
+															{column.columnDef.name()}
+														</DropdownMenuCheckboxItem>
+													)
+												})}
+										</div>
+									</div>
+								</div>
+							</DropdownMenuContent>
+						</DropdownMenu>
+					</div>
+				</div>
+			</CardHeader>
+		)
+	}, [
+		visibleColumns.length,
+		sorting,
+		viewMode,
+		locale,
+		statusFilter,
+		upSystemsLength,
+		downSystemsLength,
+		pausedSystemsLength,
+	])
+
+	return (
+		<Card>
+			{CardHead}
+			<div className="p-6 pt-0 max-sm:py-3 max-sm:px-2">
+				{viewMode === "table" ? (
+					// table layout
+					<div className="rounded-md">
+						<AllSystemsTable table={table} rows={rows} colLength={visibleColumns.length} />
+					</div>
+				) : (
+					// grid layout
+					<div className="grid gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
+						{rows?.length ? (
+							rows.map((row) => {
+								return <SystemCard key={row.original.id} row={row} table={table} colLength={visibleColumns.length} />
+							})
+						) : (
+							<div className="col-span-full text-center py-8">
+								<Trans>No systems found.</Trans>
+							</div>
+						)}
+					</div>
+				)}
+			</div>
+		</Card>
+	)
+}
+
+const AllSystemsTable = memo(function ({
+	table,
+	rows,
+	colLength,
+}: {
+	table: TableType<SystemRecord>
+	rows: Row<SystemRecord>[]
+	colLength: number
+}) {
+	// The virtualizer will need a reference to the scrollable container element
+	const scrollRef = useRef<HTMLDivElement>(null)
+
+	const virtualizer = useVirtualizer<HTMLDivElement, HTMLTableRowElement>({
+		count: rows.length,
+		estimateSize: () => (rows.length > 10 ? 56 : 60),
+		getScrollElement: () => scrollRef.current,
+		overscan: 5,
+	})
+	const virtualRows = virtualizer.getVirtualItems()
+
+	const paddingTop = Math.max(0, virtualRows[0]?.start ?? 0 - virtualizer.options.scrollMargin)
+	const paddingBottom = Math.max(0, virtualizer.getTotalSize() - (virtualRows[virtualRows.length - 1]?.end ?? 0))
+
+	return (
+		<div
+			className={cn(
+				"h-min max-h-[calc(100dvh-17rem)] max-w-full relative overflow-auto border rounded-md",
+				// don't set min height if there are less than 2 rows, do set if we need to display the empty state
+				(!rows.length || rows.length > 2) && "min-h-50"
+			)}
+			ref={scrollRef}
+		>
+			{/* add header height to table size */}
+			<div style={{ height: `${virtualizer.getTotalSize() + 50}px`, paddingTop, paddingBottom }}>
+				<table className="text-sm w-full h-full">
+					<SystemsTableHead table={table} colLength={colLength} />
+					<TableBody onMouseEnter={preloadSystemDetail}>
+						{rows.length ? (
+							virtualRows.map((virtualRow) => {
+								const row = rows[virtualRow.index] as Row<SystemRecord>
+								return (
+									<SystemTableRow
+										key={row.id}
+										row={row}
+										virtualRow={virtualRow}
+										length={rows.length}
+										colLength={colLength}
+									/>
+								)
+							})
+						) : (
+							<TableRow>
+								<TableCell colSpan={colLength} className="h-37 text-center pointer-events-none">
+									<Trans>No systems found.</Trans>
+								</TableCell>
+							</TableRow>
+						)}
+					</TableBody>
+				</table>
+			</div>
+		</div>
+	)
+})
+
+function SystemsTableHead({ table, colLength }: { table: TableType<SystemRecord>; colLength: number }) {
+	const { i18n } = useLingui()
+
+	return useMemo(() => {
+		return (
+			<TableHeader className="sticky top-0 z-20 w-full border-b-2">
+				{table.getHeaderGroups().map((headerGroup) => (
+					<tr key={headerGroup.id}>
+						{headerGroup.headers.map((header) => {
+							return (
+								<TableHead className="px-1.5" key={header.id}>
+									{flexRender(header.column.columnDef.header, header.getContext())}
+								</TableHead>
+							)
+						})}
+					</tr>
+				))}
+			</TableHeader>
+		)
+	}, [i18n.locale, colLength])
+}
+
+const SystemTableRow = memo(function ({
+	row,
+	virtualRow,
+	colLength,
+}: {
+	row: Row<SystemRecord>
+	virtualRow: VirtualItem
+	length: number
+	colLength: number
+}) {
+	const system = row.original
+	const { t } = useLingui()
+	return useMemo(() => {
+		return (
+			<TableRow
+				// data-state={row.getIsSelected() && "selected"}
+				className={cn("cursor-pointer transition-opacity relative safari:transform-3d", {
+					"opacity-50": system.status === SystemStatus.Paused,
+				})}
+			>
+				{row.getVisibleCells().map((cell) => (
+					<TableCell
+						key={cell.id}
+						style={{
+							width: cell.column.getSize(),
+							height: virtualRow.size,
+						}}
+						className="py-0"
+					>
+						{flexRender(cell.column.columnDef.cell, cell.getContext())}
+					</TableCell>
+				))}
+			</TableRow>
+		)
+	}, [system, system.status, colLength, t])
+})
+
+const SystemCard = memo(
+	({ row, table, colLength }: { row: Row<SystemRecord>; table: TableType<SystemRecord>; colLength: number }) => {
+		const system = row.original
+		const { t } = useLingui()
+
+		return useMemo(() => {
+			return (
+				<Card
+					onMouseEnter={preloadSystemDetail}
+					key={system.id}
+					className={cn(
+						"cursor-pointer hover:shadow-md transition-all bg-transparent w-full dark:border-border duration-200 relative",
+						{
+							"opacity-50": system.status === SystemStatus.Paused,
+						}
+					)}
+				>
+					<CardHeader className="py-1 ps-5 pe-3 bg-muted/30 border-b border-border/60">
+						<div className="flex items-center gap-2 w-full overflow-hidden">
+							<CardTitle className="text-base tracking-normal text-primary/90 flex items-center min-w-0 flex-1 gap-2.5">
+								<div className="flex items-center gap-2.5 min-w-0 flex-1">
+									<IndicatorDot system={system} />
+									<span className="text-[.95em]/normal tracking-normal text-primary/90 truncate">{system.name}</span>
+								</div>
+							</CardTitle>
+							{table.getColumn("actions")?.getIsVisible() && (
+								<div className="flex gap-1 shrink-0 relative z-10">
+									<AlertButton system={system} />
+									<ActionsButton system={system} />
+								</div>
+							)}
+						</div>
+					</CardHeader>
+					<CardContent className="text-sm px-5 pt-3.5 pb-4">
+						<div className="grid gap-2.5" style={{ gridTemplateColumns: "24px minmax(80px, max-content) 1fr" }}>
+							{table.getAllColumns().map((column) => {
+								if (!column.getIsVisible() || column.id === "system" || column.id === "actions") return null
+								const cell = row.getAllCells().find((cell) => cell.column.id === column.id)
+								if (!cell) return null
+								// @ts-ignore
+								const { Icon, name } = column.columnDef as ColumnDef<SystemRecord, unknown>
+								return (
+									<>
+										<div key={`${column.id}-icon`} className="flex items-center">
+											{column.id === "lastSeen" ? (
+												<EyeIcon className="size-4 text-muted-foreground" />
+											) : (
+												Icon && <Icon className="size-4 text-muted-foreground" />
+											)}
+										</div>
+										<div key={`${column.id}-label`} className="flex items-center text-muted-foreground pr-3">
+											{name()}:
+										</div>
+										<div key={`${column.id}-value`} className="flex items-center">
+											{flexRender(cell.column.columnDef.cell, cell.getContext())}
+										</div>
+									</>
+								)
+							})}
+						</div>
+					</CardContent>
+					<Link
+						href={getPagePath($router, "system", { name: row.original.name })}
+						className="inset-0 absolute w-full h-full"
+					>
+						<span className="sr-only">{row.original.name}</span>
+					</Link>
+				</Card>
+			)
+		}, [system, colLength, t])
+	}
+)

internal/site/src/components/theme-provider.tsx

@@ -0,0 +1,61 @@
+import { createContext, useContext, useEffect, useState } from "react"
+
+type Theme = "dark" | "light" | "system"
+
+type ThemeProviderProps = {
+	children: React.ReactNode
+	defaultTheme?: Theme
+	storageKey?: string
+}
+
+type ThemeProviderState = {
+	theme: Theme
+	setTheme: (theme: Theme) => void
+}
+
+const initialState: ThemeProviderState = {
+	theme: "system",
+	setTheme: () => null,
+}
+
+const ThemeProviderContext = createContext<ThemeProviderState>(initialState)
+
+export function ThemeProvider({
+	children,
+	defaultTheme = "system",
+	storageKey = "ui-theme",
+	...props
+}: ThemeProviderProps) {
+	const [theme, setTheme] = useState<Theme>(() => (localStorage.getItem(storageKey) as Theme) || defaultTheme)
+
+	useEffect(() => {
+		const root = window.document.documentElement
+
+		root.classList.remove("light", "dark")
+
+		if (theme === "system") {
+			const systemTheme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"
+
+			root.classList.add(systemTheme)
+			return
+		}
+
+		root.classList.add(theme)
+	}, [theme])
+
+	const value = {
+		theme,
+		setTheme: (theme: Theme) => {
+			localStorage.setItem(storageKey, theme)
+			setTheme(theme)
+		},
+	}
+
+	return (
+		<ThemeProviderContext.Provider {...props} value={value}>
+			{children}
+		</ThemeProviderContext.Provider>
+	)
+}
+
+export const useTheme = () => useContext(ThemeProviderContext)

internal/site/src/components/ui/alert-dialog.tsx

@@ -0,0 +1,103 @@
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
+import * as React from "react"
+import { buttonVariants } from "@/components/ui/button"
+import { cn } from "@/lib/utils"
+
+const AlertDialog = AlertDialogPrimitive.Root
+
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger
+
+const AlertDialogPortal = AlertDialogPrimitive.Portal
+
+const AlertDialogOverlay = React.forwardRef<
+	React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
+	React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+	<AlertDialogPrimitive.Overlay
+		className={cn(
+			"fixed inset-0 z-50 bg-black/40 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+			className
+		)}
+		{...props}
+		ref={ref}
+	/>
+))
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName
+
+const AlertDialogContent = React.forwardRef<
+	React.ElementRef<typeof AlertDialogPrimitive.Content>,
+	React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
+>(({ className, ...props }, ref) => (
+	<AlertDialogPortal>
+		<AlertDialogOverlay />
+		<AlertDialogPrimitive.Content
+			ref={ref}
+			className={cn(
+				"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-card p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-50% data-[state=closed]:slide-out-to-top-48% data-[state=open]:slide-in-from-left-50% data-[state=open]:slide-in-from-top-48% sm:rounded-lg",
+				className
+			)}
+			{...props}
+		/>
+	</AlertDialogPortal>
+))
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
+
+const AlertDialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+	<div className={cn("grid gap-2 text-center sm:text-start", className)} {...props} />
+)
+AlertDialogHeader.displayName = "AlertDialogHeader"
+
+const AlertDialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+	<div className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-2", className)} {...props} />
+)
+AlertDialogFooter.displayName = "AlertDialogFooter"
+
+const AlertDialogTitle = React.forwardRef<
+	React.ElementRef<typeof AlertDialogPrimitive.Title>,
+	React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+	<AlertDialogPrimitive.Title ref={ref} className={cn("text-lg font-semibold", className)} {...props} />
+))
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName
+
+const AlertDialogDescription = React.forwardRef<
+	React.ElementRef<typeof AlertDialogPrimitive.Description>,
+	React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+	<AlertDialogPrimitive.Description ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />
+))
+AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName
+
+const AlertDialogAction = React.forwardRef<
+	React.ElementRef<typeof AlertDialogPrimitive.Action>,
+	React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
+>(({ className, ...props }, ref) => (
+	<AlertDialogPrimitive.Action ref={ref} className={cn(buttonVariants(), className)} {...props} />
+))
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName
+
+const AlertDialogCancel = React.forwardRef<
+	React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
+	React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
+>(({ className, ...props }, ref) => (
+	<AlertDialogPrimitive.Cancel
+		ref={ref}
+		className={cn(buttonVariants({ variant: "outline" }), "mt-2 sm:mt-0", className)}
+		{...props}
+	/>
+))
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName
+
+export {
+	AlertDialog,
+	AlertDialogPortal,
+	AlertDialogOverlay,
+	AlertDialogTrigger,
+	AlertDialogContent,
+	AlertDialogHeader,
+	AlertDialogFooter,
+	AlertDialogTitle,
+	AlertDialogDescription,
+	AlertDialogAction,
+	AlertDialogCancel,
+}

internal/site/src/components/ui/alert.tsx

@@ -0,0 +1,54 @@
+import * as React from "react"
+// import { cva, type VariantProps } from 'class-variance-authority'
+
+import { cn } from "@/lib/utils"
+
+// const alertVariants = cva(
+//   "relative w-full rounded-lg border p-4 [&>svg~*]:ps-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
+//   {
+//     variants: {
+//       variant: {
+//         default: "bg-background text-foreground",
+//         destructive:
+//           "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+//       },
+//     },
+//     defaultVariants: {
+//       variant: "default",
+//     },
+//   }
+// )
+
+const Alert = React.forwardRef<
+	HTMLDivElement,
+	// React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
+	// >(({ className, variant, ...props }, ref) => (
+	React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+	<div
+		ref={ref}
+		role="alert"
+		className={cn(
+			"relative w-full rounded-lg border p-4 [&>svg~*]:ps-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground bg-background text-foreground",
+			className
+		)}
+		{...props}
+	/>
+))
+Alert.displayName = "Alert"
+
+const AlertTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
+	({ className, ...props }, ref) => (
+		<h5 ref={ref} className={cn("mb-1 -mt-0.5 font-medium leading-tight tracking-tight", className)} {...props} />
+	)
+)
+AlertTitle.displayName = "AlertTitle"
+
+const AlertDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+	({ className, ...props }, ref) => (
+		<div ref={ref} className={cn("text-sm [&_p]:leading-relaxed", className)} {...props} />
+	)
+)
+AlertDescription.displayName = "AlertDescription"
+
+export { Alert, AlertTitle, AlertDescription }

internal/site/src/components/ui/badge.tsx

@@ -0,0 +1,29 @@
+import { cva, type VariantProps } from "class-variance-authority"
+import type * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+	"inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2",
+	{
+		variants: {
+			variant: {
+				default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+				secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+				destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+				outline: "text-foreground",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+		},
+	}
+)
+
+export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+	return <div className={cn(badgeVariants({ variant }), className)} {...props} />
+}
+
+export { Badge, badgeVariants }

internal/site/src/components/ui/button.tsx

@@ -0,0 +1,47 @@
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+	"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 cursor-pointer",
+	{
+		variants: {
+			variant: {
+				default: "bg-primary text-primary-foreground hover:bg-primary/90",
+				destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+				outline: "border bg-background hover:bg-accent/70 dark:hover:bg-accent/50 hover:text-accent-foreground",
+				secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+				ghost: "hover:bg-accent/70 hover:text-accent-foreground",
+				link: "text-primary underline-offset-4 hover:underline",
+			},
+			size: {
+				default: "h-10 px-4 py-2",
+				sm: "h-9 rounded-md px-3",
+				lg: "h-11 rounded-md px-8",
+				icon: "h-10 w-10",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+			size: "default",
+		},
+	}
+)
+
+export interface ButtonProps
+	extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+		VariantProps<typeof buttonVariants> {
+	asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+	({ className, variant, size, asChild = false, ...props }, ref) => {
+		const Comp = asChild ? Slot : "button"
+		return <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />
+	}
+)
+Button.displayName = "Button"
+
+export { Button, buttonVariants }

internal/site/src/components/ui/card.tsx

@@ -0,0 +1,43 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => (
+	<div
+		ref={ref}
+		className={cn("rounded-lg border border-border/60 bg-card text-card-foreground shadow-xs", className)}
+		{...props}
+	/>
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+	({ className, ...props }, ref) => <div ref={ref} className={cn("grid gap-1.5 p-6", className)} {...props} />
+)
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
+	({ className, ...props }, ref) => (
+		<h3 ref={ref} className={cn("text-2xl font-semibold leading-none tracking-tight", className)} {...props} />
+	)
+)
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+	({ className, ...props }, ref) => (
+		<p ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />
+	)
+)
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+	({ className, ...props }, ref) => <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+)
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+	({ className, ...props }, ref) => <div ref={ref} className={cn("flex items-center p-6 pt-0", className)} {...props} />
+)
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }

internal/site/src/components/ui/chart.tsx

@@ -0,0 +1,361 @@
+import type { JSX } from "react"
+import * as React from "react"
+import * as RechartsPrimitive from "recharts"
+import { chartTimeData, cn } from "@/lib/utils"
+import type { ChartData } from "@/types"
+
+// Format: { THEME_NAME: CSS_SELECTOR }
+const THEMES = { light: "", dark: ".dark" } as const
+
+export type ChartConfig = {
+	[k in string]: {
+		label?: React.ReactNode
+		icon?: React.ComponentType
+	} & ({ color?: string; theme?: never } | { color?: never; theme: Record<keyof typeof THEMES, string> })
+}
+
+// type ChartContextProps = {
+// 	config: ChartConfig
+// }
+
+// const ChartContext = React.createContext<ChartContextProps | null>(null)
+
+// function useChart() {
+// 	const context = React.useContext(ChartContext)
+
+// 	if (!context) {
+// 		throw new Error('useChart must be used within a <ChartContainer />')
+// 	}
+
+// 	return context
+// }
+
+const ChartContainer = React.forwardRef<
+	HTMLDivElement,
+	React.ComponentProps<"div"> & {
+		// config: ChartConfig
+		children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>["children"]
+	}
+>(({ id, className, children, ...props }, ref) => {
+	const uniqueId = React.useId()
+	const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`
+
+	return (
+		//<ChartContext.Provider value={{ config }}>
+		//</ChartContext.Provider>
+		<div
+			data-chart={chartId}
+			ref={ref}
+			className={cn(
+				"text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line-line]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-hidden [&_.recharts-surface]:outline-hidden",
+				className
+			)}
+			{...props}
+		>
+			{/* <ChartStyle id={chartId} config={config} /> */}
+			<RechartsPrimitive.ResponsiveContainer>{children}</RechartsPrimitive.ResponsiveContainer>
+		</div>
+	)
+})
+ChartContainer.displayName = "Chart"
+
+// const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
+// 	const colorConfig = Object.entries(config).filter(([_, config]) => config.theme || config.color)
+
+// 	if (!colorConfig.length) {
+// 		return null
+// 	}
+
+// 	return (
+// 		<style
+// 			dangerouslySetInnerHTML={{
+// 				__html: Object.entries(THEMES).map(
+// 					([theme, prefix]) => `
+// ${prefix} [data-chart=${id}] {
+// ${colorConfig
+// 	.map(([key, itemConfig]) => {
+// 		const color = itemConfig.theme?.[theme as keyof typeof itemConfig.theme] || itemConfig.color
+// 		return color ? `  --color-${key}: ${color};` : null
+// 	})
+// 	.join('\n')}
+// }
+// `
+// 				),
+// 			}}
+// 		/>
+// 	)
+// }
+
+const ChartTooltip = RechartsPrimitive.Tooltip
+
+const ChartTooltipContent = React.forwardRef<
+	HTMLDivElement,
+	React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
+		React.ComponentProps<"div"> & {
+			hideLabel?: boolean
+			indicator?: "line" | "dot" | "dashed"
+			nameKey?: string
+			labelKey?: string
+			unit?: string
+			filter?: string
+			contentFormatter?: (item: any, key: string) => React.ReactNode | string
+			truncate?: boolean
+		}
+>(
+	(
+		{
+			active,
+			payload,
+			className,
+			indicator = "line",
+			hideLabel = false,
+			label,
+			labelFormatter,
+			labelClassName,
+			formatter,
+			color,
+			nameKey,
+			labelKey,
+			unit,
+			filter,
+			itemSorter,
+			contentFormatter: content = undefined,
+			truncate = false,
+		},
+		ref
+	) => {
+		// const { config } = useChart()
+		const config = {}
+
+		React.useMemo(() => {
+			if (filter) {
+				payload = payload?.filter((item) => (item.name as string)?.toLowerCase().includes(filter.toLowerCase()))
+			}
+			if (itemSorter) {
+				// @ts-expect-error
+				payload?.sort(itemSorter)
+			}
+		}, [itemSorter, payload])
+
+		const tooltipLabel = React.useMemo(() => {
+			if (hideLabel || !payload?.length) {
+				return null
+			}
+
+			const [item] = payload
+			const key = `${labelKey || item.name || "value"}`
+			const itemConfig = getPayloadConfigFromPayload(config, item, key)
+			const value = !labelKey && typeof label === "string" ? label : itemConfig?.label
+
+			if (labelFormatter) {
+				return <div className={cn("font-medium", labelClassName)}>{labelFormatter(value, payload)}</div>
+			}
+
+			if (!value) {
+				return null
+			}
+
+			return <div className={cn("font-medium", labelClassName)}>{value}</div>
+		}, [label, labelFormatter, payload, hideLabel, labelClassName, config, labelKey])
+
+		if (!active || !payload?.length) {
+			return null
+		}
+
+		// const nestLabel = payload.length === 1 && indicator !== 'dot'
+		const nestLabel = false
+
+		return (
+			<div
+				ref={ref}
+				className={cn(
+					"grid min-w-28 items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
+					className
+				)}
+			>
+				{!nestLabel ? tooltipLabel : null}
+				<div className="grid gap-1.5">
+					{payload.map((item, index) => {
+						const key = `${nameKey || item.name || item.dataKey || "value"}`
+						const itemConfig = getPayloadConfigFromPayload(config, item, key)
+						const indicatorColor = color || item.payload.fill || item.color
+
+						return (
+							<div
+								key={item?.name || item.dataKey}
+								className={cn(
+									"flex w-full items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
+									indicator === "dot" && "items-center"
+								)}
+							>
+								{formatter && item?.value !== undefined && item.name ? (
+									formatter(item.value, item.name, item, index, item.payload)
+								) : (
+									<>
+										{itemConfig?.icon ? (
+											<itemConfig.icon />
+										) : (
+											<div
+												className={cn("shrink-0 rounded-[2px] border-border bg-(--color-bg)", {
+													"h-2.5 w-2.5": indicator === "dot",
+													"w-1": indicator === "line",
+													"w-0 border-[1.5px] border-dashed bg-transparent": indicator === "dashed",
+													"my-0.5": nestLabel && indicator === "dashed",
+												})}
+												style={
+													{
+														"--color-bg": indicatorColor,
+														"--color-border": indicatorColor,
+													} as React.CSSProperties
+												}
+											/>
+										)}
+										<div
+											className={cn(
+												"flex flex-1 justify-between leading-none gap-2",
+												nestLabel ? "items-end" : "items-center"
+											)}
+										>
+											{nestLabel ? tooltipLabel : null}
+											<span
+												className={cn(
+													"text-muted-foreground",
+													truncate ? "max-w-40 truncate leading-normal -my-1" : ""
+												)}
+											>
+												{itemConfig?.label || item.name}
+											</span>
+											{item.value !== undefined && (
+												<span className="font-medium text-foreground">
+													{content && typeof content === "function"
+														? content(item, key)
+														: item.value.toLocaleString() + (unit ? unit : "")}
+												</span>
+											)}
+										</div>
+									</>
+								)}
+							</div>
+						)
+					})}
+				</div>
+			</div>
+		)
+	}
+)
+ChartTooltipContent.displayName = "ChartTooltip"
+
+const ChartLegend = RechartsPrimitive.Legend
+
+const ChartLegendContent = React.forwardRef<
+	HTMLDivElement,
+	React.ComponentProps<"div"> &
+		Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
+			hideIcon?: boolean
+			nameKey?: string
+		}
+>(({ className, payload, verticalAlign = "bottom" }, ref) => {
+	// const { config } = useChart()
+
+	if (!payload?.length) {
+		return null
+	}
+
+	return (
+		<div
+			ref={ref}
+			className={cn(
+				"flex items-center justify-center gap-4 gap-y-1 flex-wrap ps-4",
+				verticalAlign === "top" ? "pb-3" : "pt-3",
+				className
+			)}
+		>
+			{payload.map((item) => {
+				// const key = `${nameKey || item.dataKey || 'value'}`
+				// const itemConfig = getPayloadConfigFromPayload(config, item, key)
+
+				return (
+					<div
+						key={item.value}
+						className={cn(
+							// 'flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground text-muted-foreground'
+							"flex items-center gap-1.5 text-muted-foreground"
+						)}
+					>
+						{/* {itemConfig?.icon && !hideIcon ? (
+							<itemConfig.icon />
+						) : ( */}
+						<div
+							className="h-2 w-2 shrink-0 rounded-[2px]"
+							style={{
+								backgroundColor: item.color,
+							}}
+						/>
+						{item.value}
+						{/* )} */}
+						{/* {itemConfig?.label} */}
+					</div>
+				)
+			})}
+		</div>
+	)
+})
+ChartLegendContent.displayName = "ChartLegend"
+
+// Helper to extract item config from a payload.
+function getPayloadConfigFromPayload(config: ChartConfig, payload: unknown, key: string) {
+	if (typeof payload !== "object" || payload === null) {
+		return undefined
+	}
+
+	const payloadPayload =
+		"payload" in payload && typeof payload.payload === "object" && payload.payload !== null
+			? payload.payload
+			: undefined
+
+	let configLabelKey: string = key
+
+	if (key in payload && typeof payload[key as keyof typeof payload] === "string") {
+		configLabelKey = payload[key as keyof typeof payload] as string
+	} else if (
+		payloadPayload &&
+		key in payloadPayload &&
+		typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
+	) {
+		configLabelKey = payloadPayload[key as keyof typeof payloadPayload] as string
+	}
+
+	return configLabelKey in config ? config[configLabelKey] : config[key as keyof typeof config]
+}
+
+let cachedAxis: JSX.Element
+const xAxis = ({ domain, ticks, chartTime }: ChartData) => {
+	if (cachedAxis && domain[0] === cachedAxis.props.domain[0]) {
+		return cachedAxis
+	}
+	cachedAxis = (
+		<RechartsPrimitive.XAxis
+			dataKey="created"
+			domain={domain}
+			ticks={ticks}
+			allowDataOverflow
+			type="number"
+			scale="time"
+			minTickGap={12}
+			tickMargin={8}
+			axisLine={false}
+			tickFormatter={chartTimeData[chartTime].format}
+		/>
+	)
+	return cachedAxis
+}
+
+export {
+	ChartContainer,
+	ChartTooltip,
+	ChartTooltipContent,
+	ChartLegend,
+	ChartLegendContent,
+	xAxis,
+	// ChartStyle,
+}

internal/site/src/components/ui/checkbox.tsx

@@ -0,0 +1,29 @@
+"use client"
+
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { Check } from "lucide-react"
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Checkbox = React.forwardRef<
+	React.ElementRef<typeof CheckboxPrimitive.Root>,
+	React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+	<CheckboxPrimitive.Root
+		ref={ref}
+		className={cn(
+			"peer size-4 flex items-center justify-center shrink-0 rounded-[.3em] border border-input ring-offset-background focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+
+			className
+		)}
+		{...props}
+	>
+		<CheckboxPrimitive.Indicator className={cn("flex items-center justify-center text-current")}>
+			<Check className="size-4" />
+		</CheckboxPrimitive.Indicator>
+	</CheckboxPrimitive.Root>
+))
+Checkbox.displayName = CheckboxPrimitive.Root.displayName
+
+export { Checkbox }

internal/site/src/components/ui/collapsible.tsx

@@ -0,0 +1,39 @@
+import { ChevronDownIcon, HourglassIcon } from "lucide-react"
+import * as React from "react"
+import { cn } from "@/lib/utils"
+import { Button } from "./button"
+
+interface CollapsibleProps {
+	title: string
+	children: React.ReactNode
+	description?: React.ReactNode
+	defaultOpen?: boolean
+	className?: string
+	icon?: React.ReactNode
+}
+
+export function Collapsible({ title, children, description, defaultOpen = false, className, icon }: CollapsibleProps) {
+	const [isOpen, setIsOpen] = React.useState(defaultOpen)
+
+	return (
+		<div className={cn("border rounded-lg", className)}>
+			<Button variant="ghost" className="w-full justify-between p-4 font-semibold" onClick={() => setIsOpen(!isOpen)}>
+				<div className="flex items-center gap-2">
+					{icon}
+					{title}
+				</div>
+				<ChevronDownIcon
+					className={cn("h-4 w-4 transition-transform duration-200", {
+						"rotate-180": isOpen,
+					})}
+				/>
+			</Button>
+			{description && <div className="px-4 pb-2 text-sm text-muted-foreground">{description}</div>}
+			{isOpen && (
+				<div className="px-4 pb-4">
+					<div className="grid gap-3">{children}</div>
+				</div>
+			)}
+		</div>
+	)
+}

internal/site/src/components/ui/command.tsx

@@ -0,0 +1,131 @@
+import { Command as CommandPrimitive } from "cmdk"
+import { SearchIcon } from "lucide-react"
+import type * as React from "react"
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog"
+import { cn } from "@/lib/utils"
+
+function Command({ className, ...props }: React.ComponentProps<typeof CommandPrimitive>) {
+	return (
+		<CommandPrimitive
+			data-slot="command"
+			className={cn("bg-card flex h-full w-full flex-col overflow-hidden rounded-md", className)}
+			{...props}
+		/>
+	)
+}
+
+function CommandDialog({
+	title = "Command Palette",
+	description = "Search for a command to run...",
+	children,
+	className,
+	showCloseButton = true,
+	...props
+}: React.ComponentProps<typeof Dialog> & {
+	title?: string
+	description?: string
+	className?: string
+	showCloseButton?: boolean
+}) {
+	return (
+		<Dialog {...props}>
+			<DialogHeader className="sr-only">
+				<DialogTitle>{title}</DialogTitle>
+				<DialogDescription>{description}</DialogDescription>
+			</DialogHeader>
+			<DialogContent className={cn("overflow-hidden p-0", className)}>
+				<Command className="[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+					{children}
+				</Command>
+			</DialogContent>
+		</Dialog>
+	)
+}
+
+function CommandInput({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Input>) {
+	return (
+		<div data-slot="command-input-wrapper" className="flex h-9 items-center gap-2 border-b px-3">
+			<SearchIcon className="size-4 shrink-0 opacity-50" />
+			<CommandPrimitive.Input
+				data-slot="command-input"
+				className={cn(
+					"placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
+					className
+				)}
+				{...props}
+			/>
+		</div>
+	)
+}
+
+function CommandList({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.List>) {
+	return (
+		<CommandPrimitive.List
+			data-slot="command-list"
+			className={cn("max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto", className)}
+			{...props}
+		/>
+	)
+}
+
+function CommandEmpty({ ...props }: React.ComponentProps<typeof CommandPrimitive.Empty>) {
+	return <CommandPrimitive.Empty data-slot="command-empty" className="py-6 text-center text-sm" {...props} />
+}
+
+function CommandGroup({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Group>) {
+	return (
+		<CommandPrimitive.Group
+			data-slot="command-group"
+			className={cn(
+				"text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
+				className
+			)}
+			{...props}
+		/>
+	)
+}
+
+function CommandSeparator({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Separator>) {
+	return (
+		<CommandPrimitive.Separator
+			data-slot="command-separator"
+			className={cn("bg-border -mx-1 h-px", className)}
+			{...props}
+		/>
+	)
+}
+
+function CommandItem({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Item>) {
+	return (
+		<CommandPrimitive.Item
+			data-slot="command-item"
+			className={cn(
+				"data-[selected=true]:bg-accent/70 data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+				className
+			)}
+			{...props}
+		/>
+	)
+}
+
+function CommandShortcut({ className, ...props }: React.ComponentProps<"span">) {
+	return (
+		<span
+			data-slot="command-shortcut"
+			className={cn("text-muted-foreground ml-auto text-xs tracking-wide", className)}
+			{...props}
+		/>
+	)
+}
+
+export {
+	Command,
+	CommandDialog,
+	CommandInput,
+	CommandList,
+	CommandEmpty,
+	CommandGroup,
+	CommandItem,
+	CommandShortcut,
+	CommandSeparator,
+}

internal/site/src/components/ui/dialog.tsx

@@ -0,0 +1,95 @@
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { X } from "lucide-react"
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Dialog = DialogPrimitive.Root
+
+const DialogTrigger = DialogPrimitive.Trigger
+
+const DialogPortal = DialogPrimitive.Portal
+
+const DialogClose = DialogPrimitive.Close
+
+const DialogOverlay = React.forwardRef<
+	React.ElementRef<typeof DialogPrimitive.Overlay>,
+	React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+	<DialogPrimitive.Overlay
+		ref={ref}
+		className={cn(
+			"fixed inset-0 z-50 bg-black/40 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+			className
+		)}
+		{...props}
+	/>
+))
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
+
+const DialogContent = React.forwardRef<
+	React.ElementRef<typeof DialogPrimitive.Content>,
+	React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+	<DialogPortal>
+		<DialogOverlay />
+		<DialogPrimitive.Content
+			ref={ref}
+			className={cn(
+				"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-card p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-50% data-[state=closed]:slide-out-to-top-48% data-[state=open]:slide-in-from-left-50% data-[state=open]:slide-in-from-top-48% sm:rounded-lg",
+				className
+			)}
+			{...props}
+		>
+			{children}
+			<DialogPrimitive.Close className="absolute end-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+				<X className="h-4 w-4" />
+				<span className="sr-only">Close</span>
+			</DialogPrimitive.Close>
+		</DialogPrimitive.Content>
+	</DialogPortal>
+))
+DialogContent.displayName = DialogPrimitive.Content.displayName
+
+const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+	<div className={cn("grid gap-1.5 text-center sm:text-start", className)} {...props} />
+)
+DialogHeader.displayName = "DialogHeader"
+
+const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+	<div className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-3.5", className)} {...props} />
+)
+DialogFooter.displayName = "DialogFooter"
+
+const DialogTitle = React.forwardRef<
+	React.ElementRef<typeof DialogPrimitive.Title>,
+	React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+	<DialogPrimitive.Title
+		ref={ref}
+		className={cn("text-lg font-semibold leading-none tracking-tight", className)}
+		{...props}
+	/>
+))
+DialogTitle.displayName = DialogPrimitive.Title.displayName
+
+const DialogDescription = React.forwardRef<
+	React.ElementRef<typeof DialogPrimitive.Description>,
+	React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+	<DialogPrimitive.Description ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />
+))
+DialogDescription.displayName = DialogPrimitive.Description.displayName
+
+export {
+	Dialog,
+	DialogPortal,
+	DialogOverlay,
+	DialogClose,
+	DialogTrigger,
+	DialogContent,
+	DialogHeader,
+	DialogFooter,
+	DialogTitle,
+	DialogDescription,
+}

internal/site/src/components/ui/dropdown-menu.tsx

@@ -0,0 +1,179 @@
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import { Check, ChevronRight, Circle } from "lucide-react"
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const DropdownMenu = DropdownMenuPrimitive.Root
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
+
+const DropdownMenuSubTrigger = React.forwardRef<
+	React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+		inset?: boolean
+	}
+>(({ className, inset, children, ...props }, ref) => (
+	<DropdownMenuPrimitive.SubTrigger
+		ref={ref}
+		className={cn(
+			"flex select-none items-center rounded-sm px-2.5 py-1.5 text-sm outline-hidden focus:bg-accent/70 data-[state=open]:bg-accent/70",
+			inset && "ps-8",
+			className
+		)}
+		{...props}
+	>
+		{children}
+		<ChevronRight className="ms-auto h-4 w-4" />
+	</DropdownMenuPrimitive.SubTrigger>
+))
+DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName
+
+const DropdownMenuSubContent = React.forwardRef<
+	React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+	<DropdownMenuPrimitive.SubContent
+		ref={ref}
+		className={cn(
+			"z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+			className
+		)}
+		{...props}
+	/>
+))
+DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName
+
+const DropdownMenuContent = React.forwardRef<
+	React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+	<DropdownMenuPrimitive.Portal>
+		<DropdownMenuPrimitive.Content
+			ref={ref}
+			sideOffset={sideOffset}
+			className={cn(
+				"z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+				className
+			)}
+			{...props}
+		/>
+	</DropdownMenuPrimitive.Portal>
+))
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
+
+const DropdownMenuItem = React.forwardRef<
+	React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+		inset?: boolean
+	}
+>(({ className, inset, ...props }, ref) => (
+	<DropdownMenuPrimitive.Item
+		ref={ref}
+		className={cn(
+			"cursor-pointer relative flex select-none items-center rounded-sm px-2.5 py-1.5 text-sm outline-hidden focus:bg-accent/70 focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
+			inset && "ps-8",
+			className
+		)}
+		{...props}
+	/>
+))
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
+
+const DropdownMenuCheckboxItem = React.forwardRef<
+	React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+	<DropdownMenuPrimitive.CheckboxItem
+		ref={ref}
+		className={cn(
+			"relative flex cursor-pointer select-none items-center rounded-sm py-1.5 ps-8 pe-2.5 text-sm outline-hidden focus:bg-accent/70 focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
+			className
+		)}
+		checked={checked}
+		{...props}
+	>
+		<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+			<DropdownMenuPrimitive.ItemIndicator>
+				<Check className="h-4 w-4" />
+			</DropdownMenuPrimitive.ItemIndicator>
+		</span>
+		{children}
+	</DropdownMenuPrimitive.CheckboxItem>
+))
+DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName
+
+const DropdownMenuRadioItem = React.forwardRef<
+	React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
+	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+	<DropdownMenuPrimitive.RadioItem
+		ref={ref}
+		className={cn(
+			"relative flex cursor-pointer select-none items-center rounded-sm py-1.5 ps-8 pe-2.5 text-sm outline-hidden focus:bg-accent/70 focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
+			className
+		)}
+		{...props}
+	>
+		<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+			<DropdownMenuPrimitive.ItemIndicator>
+				<Circle className="h-2 w-2 fill-current" />
+			</DropdownMenuPrimitive.ItemIndicator>
+		</span>
+		{children}
+	</DropdownMenuPrimitive.RadioItem>
+))
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
+
+const DropdownMenuLabel = React.forwardRef<
+	React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+		inset?: boolean
+	}
+>(({ className, inset, ...props }, ref) => (
+	<DropdownMenuPrimitive.Label
+		ref={ref}
+		className={cn("px-2.5 py-1.5 text-sm font-semibold", inset && "ps-8", className)}
+		{...props}
+	/>
+))
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
+
+const DropdownMenuSeparator = React.forwardRef<
+	React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+	<DropdownMenuPrimitive.Separator ref={ref} className={cn("-mx-1 my-1 h-px bg-muted", className)} {...props} />
+))
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
+
+const DropdownMenuShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
+	return <span className={cn("ms-auto text-xs tracking-widest opacity-60", className)} {...props} />
+}
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
+
+export {
+	DropdownMenu,
+	DropdownMenuTrigger,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuCheckboxItem,
+	DropdownMenuRadioItem,
+	DropdownMenuLabel,
+	DropdownMenuSeparator,
+	DropdownMenuShortcut,
+	DropdownMenuGroup,
+	DropdownMenuPortal,
+	DropdownMenuSub,
+	DropdownMenuSubContent,
+	DropdownMenuSubTrigger,
+	DropdownMenuRadioGroup,
+}

internal/site/src/components/ui/icons.tsx

@@ -0,0 +1,132 @@
+import type { SVGProps } from "react"
+
+// linux-logo-bold from https://github.com/phosphor-icons/core (MIT license)
+export function TuxIcon(props: SVGProps<SVGSVGElement>) {
+	return (
+		<svg viewBox="0 0 256 256" {...props}>
+			<path
+				fill="currentColor"
+				d="M231 217a12 12 0 0 1-16-2c-2-1-35-44-35-127a52 52 0 1 0-104 0c0 83-33 126-35 127a12 12 0 0 1-18-14c0-1 29-39 29-113a76 76 0 1 1 152 0c0 74 29 112 29 113a12 12 0 0 1-2 16m-127-97a16 16 0 1 0-16-16 16 16 0 0 0 16 16m64-16a16 16 0 1 0-16 16 16 16 0 0 0 16-16m-73 51 28 12a12 12 0 0 0 10 0l28-12a12 12 0 0 0-10-22l-23 10-23-10a12 12 0 0 0-10 22m33 29a57 57 0 0 0-39 15 12 12 0 0 0 17 18 33 33 0 0 1 44 0 12 12 0 1 0 17-18 57 57 0 0 0-39-15"
+			/>
+		</svg>
+	)
+}
+
+// icon park (Apache 2.0) https://github.com/bytedance/IconPark/blob/master/LICENSE
+export function WindowsIcon(props: SVGProps<SVGSVGElement>) {
+	return (
+		<svg {...props} viewBox="0 0 48 48">
+			<path
+				fill="none"
+				stroke="currentColor"
+				strokeWidth="3.8"
+				d="m6.8 11 12.9-1.7v12.1h-13zm18-2.2 16.4-2v14.6H25zm0 18.6 16.4.4v13.4L25 38.6zm-18-.8 12.9.3v10.9l-13-2.2z"
+			/>
+		</svg>
+	)
+}
+
+// teenyicons (MIT) https://github.com/teenyicons/teenyicons/blob/master/LICENSE
+export function AppleIcon(props: SVGProps<SVGSVGElement>) {
+	return (
+		<svg viewBox="0 0 20 20" {...props}>
+			<path
+				fill="currentColor"
+				d="M14.1 4.7a5 5 0 0 1 3.8 2c-3.3 1.9-2.8 6.7.6 8L17.2 17c-.8 1.3-2 2.9-3.5 2.9-1.2 0-1.6-.9-3.3-.8s-2.2.8-3.5.8c-1.4 0-2.5-1.5-3.4-2.7-2.3-3.6-2.5-7.9-1.1-10 1-1.7 2.6-2.6 4.1-2.6 1.6 0 2.6.8 3.8.8 1.3 0 2-.8 3.8-.8M13.7 0c.2 1.2-.3 2.4-1 3.2a4 4 0 0 1-3 1.6c-.2-1.2.3-2.3 1-3.2.7-.8 2-1.5 3-1.6"
+			/>
+		</svg>
+	)
+}
+
+// Apache 2.0 https://github.com/Templarian/MaterialDesign/blob/master/LICENSE
+export function FreeBsdIcon(props: SVGProps<SVGSVGElement>) {
+	return (
+		<svg viewBox="0 0 24 24" {...props}>
+			<path
+				fill="currentColor"
+				d="M2.7 2C3.5 2 6 3.2 6 3.2 4.8 4 3.7 5 3 6.4 2.1 4.8 1.3 2.9 2 2.2l.7-.2m18.1.1c.4 0 .8 0 1 .2 1 1.1-2 5.8-2.4 6.4-.5.5-1.8 0-2.9-1-1-1.2-1.5-2.4-1-3 .4-.4 3.6-2.4 5.3-2.6m-8.8.5c1.3 0 2.5.2 3.7.7l-1 .7c-1 1-.6 2.8 1 4.4 1 1 2.1 1.6 3 1.6a2 2 0 0 0 1.5-.6l.7-1a9.7 9.7 0 1 1-18.6 3.8A9.7 9.7 0 0 1 12 2.7"
+			/>
+		</svg>
+	)
+}
+
+// ion icons (MIT) https://github.com/ionic-team/ionicons/blob/main/LICENSE
+export function DockerIcon(props: SVGProps<SVGSVGElement>) {
+	return (
+		<svg {...props} viewBox="0 0 512 512" fill="currentColor">
+			<path d="M507 211c-1-1-14-11-42-11a133 133 0 0 0-21 2c-6-36-36-54-37-55l-7-4-5 7a102 102 0 0 0-13 30c-5 21-2 40 8 57-12 7-33 9-37 9H16a16 16 0 0 0-16 16 241 241 0 0 0 15 87c11 30 29 53 51 67 25 15 66 24 113 24a344 344 0 0 0 62-6 257 257 0 0 0 82-29 224 224 0 0 0 55-46c27-30 43-64 55-94h4c30 0 48-12 58-22a63 63 0 0 0 15-22l2-6Z" />
+			<path d="M47 236h45a4 4 0 0 0 4-4v-40a4 4 0 0 0-4-4H47a4 4 0 0 0-4 4v40a4 4 0 0 0 4 4m63 0h45a4 4 0 0 0 4-4v-40a4 4 0 0 0-4-4h-45a4 4 0 0 0-4 4v40a4 4 0 0 0 4 4m63 0h45a4 4 0 0 0 4-4v-40a4 4 0 0 0-4-4h-45a4 4 0 0 0-4 4v40a4 4 0 0 0 4 4m62 0h45a4 4 0 0 0 4-4v-40a4 4 0 0 0-4-4h-45a4 4 0 0 0-4 4v40a4 4 0 0 0 4 4m-125-57h45a4 4 0 0 0 4-4v-41a4 4 0 0 0-4-4h-45a4 4 0 0 0-4 4v41a4 4 0 0 0 4 4m63 0h45a4 4 0 0 0 4-4v-41a4 4 0 0 0-4-4h-45a4 4 0 0 0-4 4v41a4 4 0 0 0 4 4m62 0h45a4 4 0 0 0 4-4v-41a4 4 0 0 0-4-4h-45a4 4 0 0 0-4 4v41a4 4 0 0 0 4 4m0-58h45a4 4 0 0 0 4-4V76a4 4 0 0 0-4-4h-45a4 4 0 0 0-4 4v40a4 4 0 0 0 4 4m63 116h45a4 4 0 0 0 4-4v-40a4 4 0 0 0-4-4h-45a4 4 0 0 0-4 4v40a4 4 0 0 0 4 4" />
+		</svg>
+	)
+}
+
+// MingCute Apache License 2.0 https://github.com/Richard9394/MingCute
+export function Rows(props: SVGProps<SVGSVGElement>) {
+	return (
+		<svg viewBox="0 0 24 24" {...props}>
+			<path
+				fill="currentColor"
+				d="M5 3a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2zm0 2h14v4H5zm0 8a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-4a2 2 0 0 0-2-2zm0 2h14v4H5z"
+			/>
+		</svg>
+	)
+}
+
+// IconPark Apache License 2.0 https://github.com/bytedance/IconPark
+export function ChartAverage(props: SVGProps<SVGSVGElement>) {
+	return (
+		<svg fill="none" viewBox="0 0 48 48" stroke="currentColor" {...props}>
+			<path strokeWidth="3" d="M4 4v40h40" />
+			<path strokeWidth="3" d="M10 38S15.3 4 27 4s17 34 17 34" />
+			<path strokeWidth="4" d="M10 24h34" />
+		</svg>
+	)
+}
+
+// IconPark Apache License 2.0 https://github.com/bytedance/IconPark
+export function ChartMax(props: SVGProps<SVGSVGElement>) {
+	return (
+		<svg fill="none" viewBox="0 0 48 48" stroke="currentColor" {...props}>
+			<path strokeWidth="3" d="M4 4v40h40" />
+			<path strokeWidth="3" d="M10 38S15.3 4 27 4s17 34 17 34" />
+			<path strokeWidth="4" d="M10 4h34" />
+		</svg>
+	)
+}
+
+// Lucide https://github.com/lucide-icons/lucide (not in package for some reason)
+export function EthernetIcon(props: SVGProps<SVGSVGElement>) {
+	return (
+		<svg fill="none" stroke="currentColor" strokeLinecap="round" strokeWidth="2" viewBox="0 0 24 24" {...props}>
+			<path d="m15 20 3-3h2a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h2l3 3zM6 8v1m4-1v1m4-1v1m4-1v1" />
+		</svg>
+	)
+}
+
+// Phosphor MIT https://github.com/phosphor-icons/core
+export function ThermometerIcon(props: SVGProps<SVGSVGElement>) {
+	return (
+		<svg viewBox="0 0 256 256" {...props} fill="currentColor">
+			<path d="M212 56a28 28 0 1 0 28 28 28 28 0 0 0-28-28m0 40a12 12 0 1 1 12-12 12 12 0 0 1-12 12m-60 50V40a32 32 0 0 0-64 0v106a56 56 0 1 0 64 0m-16-42h-32V40a16 16 0 0 1 32 0Z" />
+		</svg>
+	)
+}
+
+// Huge icons (MIT)
+export function GpuIcon(props: SVGProps<SVGSVGElement>) {
+	return (
+		<svg viewBox="0 0 24 24" {...props} stroke="currentColor" fill="none" strokeWidth="2">
+			<path d="M4 21V4.1a1.5 1.5 0 0 0-1.1-1L2 3m2 2h13c2.4 0 3.5 0 4.3.7s.7 2 .7 4.3v4.5c0 2.4 0 3.5-.7 4.3-.8.7-2 .7-4.3.7h-4.9a1.8 1.8 0 0 1-1.6-1c-.3-.6-1-1-1.6-1H4" />
+			<path d="M19 11.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0m-11.5-3h2m-2 3h2m-2 3h2" />
+		</svg>
+	)
+}
+
+// Remix icons (Apache 2.0) https://github.com/Remix-Design/RemixIcon/blob/master/License
+export function HourglassIcon(props: SVGProps<SVGSVGElement>) {
+	return (
+		<svg viewBox="0 0 24 24" {...props} fill="currentColor">
+			<path d="M4 2h16v4.5L13.5 12l6.5 5.5V22H4v-4.5l6.5-5.5L4 6.5zm12.3 5L18 5.5V4H6v1.5L7.7 7zM12 13.3l-6 5.2V20h1l5-3 5 3h1v-1.5z" />
+		</svg>
+	)
+}

internal/site/src/components/ui/input-copy.tsx

@@ -0,0 +1,38 @@
+import { Trans } from "@lingui/react/macro"
+import { CopyIcon } from "lucide-react"
+import { copyToClipboard } from "@/lib/utils"
+import { Button } from "./button"
+import { Input } from "./input"
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./tooltip"
+
+export function InputCopy({ value, id, name }: { value: string; id: string; name: string }) {
+	return (
+		<div className="relative">
+			<Input readOnly id={id} name={name} value={value} required></Input>
+			<div
+				className={
+					"h-6 w-24 bg-linear-to-r rtl:bg-linear-to-l from-transparent to-background to-65% absolute top-2 end-1 pointer-events-none"
+				}
+			></div>
+			<TooltipProvider delayDuration={100} disableHoverableContent>
+				<Tooltip disableHoverableContent={true}>
+					<TooltipTrigger asChild>
+						<Button
+							type="button"
+							variant={"link"}
+							className="absolute end-0 top-0"
+							onClick={() => copyToClipboard(value)}
+						>
+							<CopyIcon className="size-4" />
+						</Button>
+					</TooltipTrigger>
+					<TooltipContent>
+						<p>
+							<Trans>Click to copy</Trans>
+						</p>
+					</TooltipContent>
+				</Tooltip>
+			</TooltipProvider>
+		</div>
+	)
+}

internal/site/src/components/ui/input-tags.tsx

@@ -0,0 +1,78 @@
+import { XIcon } from "lucide-react"
+import * as React from "react"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import { cn } from "@/lib/utils"
+import type { InputProps } from "./input"
+
+type InputTagsProps = Omit<InputProps, "value" | "onChange"> & {
+	value: string[]
+	onChange: React.Dispatch<React.SetStateAction<string[]>>
+}
+
+const InputTags = React.forwardRef<HTMLInputElement, InputTagsProps>(
+	({ className, value, onChange, ...props }, ref) => {
+		const [pendingDataPoint, setPendingDataPoint] = React.useState("")
+
+		React.useEffect(() => {
+			if (pendingDataPoint.includes(",")) {
+				const newDataPoints = new Set([...value, ...pendingDataPoint.split(",").map((chunk) => chunk.trim())])
+				onChange(Array.from(newDataPoints))
+				setPendingDataPoint("")
+			}
+		}, [pendingDataPoint, onChange, value])
+
+		const addPendingDataPoint = () => {
+			if (pendingDataPoint) {
+				const newDataPoints = new Set([...value, pendingDataPoint])
+				onChange(Array.from(newDataPoints))
+				setPendingDataPoint("")
+			}
+		}
+
+		return (
+			<div
+				className={cn(
+					"bg-background min-h-10 flex w-full flex-wrap gap-2 rounded-md border px-3 py-2 text-sm  placeholder:text-muted-foreground has-focus-visible:outline-hidden ring-offset-background has-focus-visible:ring-2 has-focus-visible:ring-ring has-focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+					className
+				)}
+			>
+				{value.map((item) => (
+					<Badge key={item}>
+						{item}
+						<Button
+							variant="ghost"
+							size="icon"
+							className="ms-2 h-3 w-3"
+							onClick={() => {
+								onChange(value.filter((i) => i !== item))
+							}}
+						>
+							<XIcon className="w-3" />
+						</Button>
+					</Badge>
+				))}
+				<input
+					className="flex-1 outline-hidden bg-background placeholder:text-muted-foreground"
+					value={pendingDataPoint}
+					onChange={(e) => setPendingDataPoint(e.target.value)}
+					onKeyDown={(e) => {
+						if (e.key === "Enter" || e.key === ",") {
+							e.preventDefault()
+							addPendingDataPoint()
+						} else if (e.key === "Backspace" && pendingDataPoint.length === 0 && value.length > 0) {
+							e.preventDefault()
+							onChange(value.slice(0, -1))
+						}
+					}}
+					{...props}
+					ref={ref}
+				/>
+			</div>
+		)
+	}
+)
+
+InputTags.displayName = "InputTags"
+
+export { InputTags }

internal/site/src/components/ui/input.tsx

@@ -0,0 +1,20 @@
+import type * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+	return (
+		<input
+			type={type}
+			data-slot="input"
+			className={cn(
+				"flex h-10 w-full rounded-md border bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+				"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+				className
+			)}
+			{...props}
+		/>
+	)
+}
+
+export { Input }

internal/site/src/components/ui/label.tsx

@@ -0,0 +1,17 @@
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { cva, type VariantProps } from "class-variance-authority"
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const labelVariants = cva("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70")
+
+const Label = React.forwardRef<
+	React.ElementRef<typeof LabelPrimitive.Root>,
+	React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+	<LabelPrimitive.Root ref={ref} className={cn(labelVariants(), className)} {...props} />
+))
+Label.displayName = LabelPrimitive.Root.displayName
+
+export { Label }

internal/site/src/components/ui/otp.tsx

@@ -0,0 +1,66 @@
+import { OTPInput, OTPInputContext } from "input-otp"
+import { MinusIcon } from "lucide-react"
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function InputOTP({
+	className,
+	containerClassName,
+	...props
+}: React.ComponentProps<typeof OTPInput> & {
+	containerClassName?: string
+}) {
+	return (
+		<OTPInput
+			data-slot="input-otp"
+			containerClassName={cn("flex items-center gap-2 has-disabled:opacity-50", containerClassName)}
+			className={cn("disabled:cursor-not-allowed", className)}
+			{...props}
+		/>
+	)
+}
+
+function InputOTPGroup({ className, ...props }: React.ComponentProps<"div">) {
+	return <div data-slot="input-otp-group" className={cn("flex items-center", className)} {...props} />
+}
+
+function InputOTPSlot({
+	index,
+	className,
+	...props
+}: React.ComponentProps<"div"> & {
+	index: number
+}) {
+	const inputOTPContext = React.useContext(OTPInputContext)
+	const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {}
+
+	return (
+		<div
+			data-slot="input-otp-slot"
+			data-active={isActive}
+			className={cn(
+				"data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive dark:bg-input/30 border-input relative flex h-9 w-9 items-center justify-center border-y border-r text-sm shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10 data-[active=true]:ring-[3px]",
+				className
+			)}
+			{...props}
+		>
+			{char}
+			{hasFakeCaret && (
+				<div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+					<div className="animate-caret-blink bg-foreground h-4 w-px duration-1000" />
+				</div>
+			)}
+		</div>
+	)
+}
+
+function InputOTPSeparator({ ...props }: React.ComponentProps<"div">) {
+	return (
+		<div data-slot="input-otp-separator" role="separator" {...props}>
+			<MinusIcon />
+		</div>
+	)
+}
+
+export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }

internal/site/src/components/ui/select.tsx

@@ -0,0 +1,142 @@
+import * as SelectPrimitive from "@radix-ui/react-select"
+import { Check, ChevronDown, ChevronUp } from "lucide-react"
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Select = SelectPrimitive.Root
+
+const SelectGroup = SelectPrimitive.Group
+
+const SelectValue = SelectPrimitive.Value
+
+const SelectTrigger = React.forwardRef<
+	React.ElementRef<typeof SelectPrimitive.Trigger>,
+	React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+	<SelectPrimitive.Trigger
+		ref={ref}
+		className={cn(
+			"flex h-10 w-full items-center justify-between rounded-md border bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+			className
+		)}
+		{...props}
+	>
+		{children}
+		<SelectPrimitive.Icon asChild>
+			<ChevronDown className="h-4 w-4 opacity-50" />
+		</SelectPrimitive.Icon>
+	</SelectPrimitive.Trigger>
+))
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
+
+const SelectScrollUpButton = React.forwardRef<
+	React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+	React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => (
+	<SelectPrimitive.ScrollUpButton
+		ref={ref}
+		className={cn("flex cursor-default items-center justify-center py-1", className)}
+		{...props}
+	>
+		<ChevronUp className="h-4 w-4" />
+	</SelectPrimitive.ScrollUpButton>
+))
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
+
+const SelectScrollDownButton = React.forwardRef<
+	React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+	React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+	<SelectPrimitive.ScrollDownButton
+		ref={ref}
+		className={cn("flex cursor-default items-center justify-center py-1", className)}
+		{...props}
+	>
+		<ChevronDown className="h-4 w-4" />
+	</SelectPrimitive.ScrollDownButton>
+))
+SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName
+
+const SelectContent = React.forwardRef<
+	React.ElementRef<typeof SelectPrimitive.Content>,
+	React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = "popper", ...props }, ref) => (
+	<SelectPrimitive.Portal>
+		<SelectPrimitive.Content
+			ref={ref}
+			className={cn(
+				"relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+				position === "popper" &&
+					"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+				className
+			)}
+			position={position}
+			{...props}
+		>
+			<SelectScrollUpButton />
+			<SelectPrimitive.Viewport
+				className={cn(
+					"p-1",
+					position === "popper" && "h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width)"
+				)}
+			>
+				{children}
+			</SelectPrimitive.Viewport>
+			<SelectScrollDownButton />
+		</SelectPrimitive.Content>
+	</SelectPrimitive.Portal>
+))
+SelectContent.displayName = SelectPrimitive.Content.displayName
+
+const SelectLabel = React.forwardRef<
+	React.ElementRef<typeof SelectPrimitive.Label>,
+	React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+	<SelectPrimitive.Label ref={ref} className={cn("py-1.5 ps-8 pe-2 text-sm font-semibold", className)} {...props} />
+))
+SelectLabel.displayName = SelectPrimitive.Label.displayName
+
+const SelectItem = React.forwardRef<
+	React.ElementRef<typeof SelectPrimitive.Item>,
+	React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+	<SelectPrimitive.Item
+		ref={ref}
+		className={cn(
+			"relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 ps-8 pe-2 text-sm outline-hidden focus:bg-accent/70 focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
+			className
+		)}
+		{...props}
+	>
+		<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+			<SelectPrimitive.ItemIndicator>
+				<Check className="h-4 w-4" />
+			</SelectPrimitive.ItemIndicator>
+		</span>
+
+		<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+	</SelectPrimitive.Item>
+))
+SelectItem.displayName = SelectPrimitive.Item.displayName
+
+const SelectSeparator = React.forwardRef<
+	React.ElementRef<typeof SelectPrimitive.Separator>,
+	React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+	<SelectPrimitive.Separator ref={ref} className={cn("-mx-1 my-1 h-px bg-muted", className)} {...props} />
+))
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName
+
+export {
+	Select,
+	SelectGroup,
+	SelectValue,
+	SelectTrigger,
+	SelectContent,
+	SelectLabel,
+	SelectItem,
+	SelectSeparator,
+	SelectScrollUpButton,
+	SelectScrollDownButton,
+}

internal/site/src/components/ui/separator.tsx

@@ -0,0 +1,20 @@
+import * as SeparatorPrimitive from "@radix-ui/react-separator"
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Separator = React.forwardRef<
+	React.ElementRef<typeof SeparatorPrimitive.Root>,
+	React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => (
+	<SeparatorPrimitive.Root
+		ref={ref}
+		decorative={decorative}
+		orientation={orientation}
+		className={cn("shrink-0 bg-border", orientation === "horizontal" ? "h-px w-full" : "h-full w-px", className)}
+		{...props}
+	/>
+))
+Separator.displayName = SeparatorPrimitive.Root.displayName
+
+export { Separator }

internal/site/src/components/ui/sheet.tsx

@@ -0,0 +1,101 @@
+import * as SheetPrimitive from "@radix-ui/react-dialog"
+import { XIcon } from "lucide-react"
+import type * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
+	return <SheetPrimitive.Root data-slot="sheet" {...props} />
+}
+
+function SheetTrigger({ ...props }: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
+	return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
+}
+
+function SheetClose({ ...props }: React.ComponentProps<typeof SheetPrimitive.Close>) {
+	return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
+}
+
+function SheetPortal({ ...props }: React.ComponentProps<typeof SheetPrimitive.Portal>) {
+	return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
+}
+
+function SheetOverlay({ className, ...props }: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
+	return (
+		<SheetPrimitive.Overlay
+			data-slot="sheet-overlay"
+			className={cn(
+				"data-[state=open]:animate-in duration-500 isolate data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/40",
+				className
+			)}
+			{...props}
+		/>
+	)
+}
+
+function SheetContent({
+	className,
+	children,
+	side = "right",
+	...props
+}: React.ComponentProps<typeof SheetPrimitive.Content> & {
+	side?: "top" | "right" | "bottom" | "left"
+}) {
+	return (
+		<SheetPortal>
+			<SheetOverlay />
+			<SheetPrimitive.Content
+				data-slot="sheet-content"
+				className={cn(
+					"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-[400ms]",
+					side === "right" &&
+						"data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
+					side === "left" &&
+						"data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
+					side === "top" &&
+						"data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
+					side === "bottom" &&
+						"data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
+					className
+				)}
+				{...props}
+			>
+				{children}
+				<SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
+					<XIcon className="size-4" />
+					<span className="sr-only">Close</span>
+				</SheetPrimitive.Close>
+			</SheetPrimitive.Content>
+		</SheetPortal>
+	)
+}
+
+function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
+	return <div data-slot="sheet-header" className={cn("flex flex-col gap-1.5 p-4", className)} {...props} />
+}
+
+function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
+	return <div data-slot="sheet-footer" className={cn("mt-auto flex flex-col gap-2 p-4", className)} {...props} />
+}
+
+function SheetTitle({ className, ...props }: React.ComponentProps<typeof SheetPrimitive.Title>) {
+	return (
+		<SheetPrimitive.Title
+			data-slot="sheet-title"
+			className={cn("text-foreground font-semibold", className)}
+			{...props}
+		/>
+	)
+}
+
+function SheetDescription({ className, ...props }: React.ComponentProps<typeof SheetPrimitive.Description>) {
+	return (
+		<SheetPrimitive.Description
+			data-slot="sheet-description"
+			className={cn("text-muted-foreground text-sm", className)}
+			{...props}
+		/>
+	)
+}
+
+export { Sheet, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription }

internal/site/src/components/ui/slider.tsx

@@ -0,0 +1,23 @@
+import * as SliderPrimitive from "@radix-ui/react-slider"
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Slider = React.forwardRef<
+	React.ElementRef<typeof SliderPrimitive.Root>,
+	React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
+>(({ className, ...props }, ref) => (
+	<SliderPrimitive.Root
+		ref={ref}
+		className={cn("relative flex w-full touch-none select-none items-center", className)}
+		{...props}
+	>
+		<SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary">
+			<SliderPrimitive.Range className="absolute h-full bg-primary" />
+		</SliderPrimitive.Track>
+		<SliderPrimitive.Thumb className="block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
+	</SliderPrimitive.Root>
+))
+Slider.displayName = SliderPrimitive.Root.displayName
+
+export default Slider

internal/site/src/components/ui/switch.tsx

@@ -0,0 +1,27 @@
+import * as SwitchPrimitives from "@radix-ui/react-switch"
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Switch = React.forwardRef<
+	React.ElementRef<typeof SwitchPrimitives.Root>,
+	React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+>(({ className, ...props }, ref) => (
+	<SwitchPrimitives.Root
+		className={cn(
+			"peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+			className
+		)}
+		{...props}
+		ref={ref}
+	>
+		<SwitchPrimitives.Thumb
+			className={cn(
+				"pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=checked]:rtl:-translate-x-5 data-[state=unchecked]:translate-x-0"
+			)}
+		/>
+	</SwitchPrimitives.Root>
+))
+Switch.displayName = SwitchPrimitives.Root.displayName
+
+export { Switch }

internal/site/src/components/ui/table.tsx

@@ -0,0 +1,81 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Table = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement>>(
+	({ className, ...props }, ref) => (
+		<div className="relative w-full overflow-auto">
+			<table ref={ref} className={cn("w-full caption-bottom text-sm", className)} {...props} />
+		</div>
+	)
+)
+Table.displayName = "Table"
+
+const TableHeader = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
+	({ className, ...props }, ref) => (
+		<thead
+			ref={ref}
+			className={cn("bg-table-header border-b border-border/50 [&_tr]:border-b", className)}
+			{...props}
+		/>
+	)
+)
+TableHeader.displayName = "TableHeader"
+
+const TableBody = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
+	({ className, ...props }, ref) => (
+		<tbody ref={ref} className={cn("[&_tr:last-child]:border-0", className)} {...props} />
+	)
+)
+TableBody.displayName = "TableBody"
+
+const TableFooter = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
+	({ className, ...props }, ref) => (
+		<tfoot ref={ref} className={cn("border-t bg-muted/50 font-medium last:[&>tr]:border-b-0", className)} {...props} />
+	)
+)
+TableFooter.displayName = "TableFooter"
+
+const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTMLTableRowElement>>(
+	({ className, ...props }, ref) => (
+		<tr
+			ref={ref}
+			className={cn(
+				"border-b border-border/60 hover:bg-muted/40 dark:hover:bg-muted/20 data-[state=selected]:bg-muted!",
+				className
+			)}
+			{...props}
+		/>
+	)
+)
+TableRow.displayName = "TableRow"
+
+const TableHead = React.forwardRef<HTMLTableCellElement, React.ThHTMLAttributes<HTMLTableCellElement>>(
+	({ className, ...props }, ref) => (
+		<th
+			ref={ref}
+			className={cn(
+				"h-12 px-4 text-start align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pe-0",
+				className
+			)}
+			{...props}
+		/>
+	)
+)
+TableHead.displayName = "TableHead"
+
+const TableCell = React.forwardRef<HTMLTableCellElement, React.TdHTMLAttributes<HTMLTableCellElement>>(
+	({ className, ...props }, ref) => (
+		<td ref={ref} className={cn("p-4 align-middle [&:has([role=checkbox])]:pe-0", className)} {...props} />
+	)
+)
+TableCell.displayName = "TableCell"
+
+const TableCaption = React.forwardRef<HTMLTableCaptionElement, React.HTMLAttributes<HTMLTableCaptionElement>>(
+	({ className, ...props }, ref) => (
+		<caption ref={ref} className={cn("mt-4 text-sm text-muted-foreground", className)} {...props} />
+	)
+)
+TableCaption.displayName = "TableCaption"
+
+export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption }

internal/site/src/components/ui/tabs.tsx

@@ -0,0 +1,53 @@
+import * as TabsPrimitive from "@radix-ui/react-tabs"
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Tabs = TabsPrimitive.Root
+
+const TabsList = React.forwardRef<
+	React.ElementRef<typeof TabsPrimitive.List>,
+	React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+	<TabsPrimitive.List
+		ref={ref}
+		className={cn(
+			"inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
+			className
+		)}
+		{...props}
+	/>
+))
+TabsList.displayName = TabsPrimitive.List.displayName
+
+const TabsTrigger = React.forwardRef<
+	React.ElementRef<typeof TabsPrimitive.Trigger>,
+	React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+	<TabsPrimitive.Trigger
+		ref={ref}
+		className={cn(
+			"inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-xs cursor-pointer",
+			className
+		)}
+		{...props}
+	/>
+))
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
+
+const TabsContent = React.forwardRef<
+	React.ElementRef<typeof TabsPrimitive.Content>,
+	React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+	<TabsPrimitive.Content
+		ref={ref}
+		className={cn(
+			"mt-2 ring-offset-background focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+			className
+		)}
+		{...props}
+	/>
+))
+TabsContent.displayName = TabsPrimitive.Content.displayName
+
+export { Tabs, TabsList, TabsTrigger, TabsContent }

internal/site/src/components/ui/textarea.tsx

@@ -0,0 +1,21 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(({ className, ...props }, ref) => {
+	return (
+		<textarea
+			className={cn(
+				"flex min-h-14 w-full rounded-md border bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+				className
+			)}
+			ref={ref}
+			{...props}
+		/>
+	)
+})
+Textarea.displayName = "Textarea"
+
+export { Textarea }

internal/site/src/components/ui/toast.tsx

@@ -0,0 +1,111 @@
+import * as ToastPrimitives from "@radix-ui/react-toast"
+import { cva, type VariantProps } from "class-variance-authority"
+import { X } from "lucide-react"
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const ToastProvider = ToastPrimitives.Provider
+
+const ToastViewport = React.forwardRef<
+	React.ElementRef<typeof ToastPrimitives.Viewport>,
+	React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
+>(({ className, ...props }, ref) => (
+	<ToastPrimitives.Viewport
+		ref={ref}
+		className={cn(
+			"fixed top-0 z-100 flex max-h-dvh w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
+			className
+		)}
+		{...props}
+	/>
+))
+ToastViewport.displayName = ToastPrimitives.Viewport.displayName
+
+const toastVariants = cva(
+	"group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pe-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-(--radix-toast-swipe-end-x) data-[swipe=move]:translate-x-(--radix-toast-swipe-move-x) data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full sm:data-[state=open]:slide-in-from-bottom-full",
+	{
+		variants: {
+			variant: {
+				default: "border bg-background text-foreground",
+				destructive: "destructive group border-destructive bg-destructive text-destructive-foreground",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+		},
+	}
+)
+
+const Toast = React.forwardRef<
+	React.ElementRef<typeof ToastPrimitives.Root>,
+	React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> & VariantProps<typeof toastVariants>
+>(({ className, variant, ...props }, ref) => {
+	return <ToastPrimitives.Root ref={ref} className={cn(toastVariants({ variant }), className)} {...props} />
+})
+Toast.displayName = ToastPrimitives.Root.displayName
+
+const ToastAction = React.forwardRef<
+	React.ElementRef<typeof ToastPrimitives.Action>,
+	React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
+>(({ className, ...props }, ref) => (
+	<ToastPrimitives.Action
+		ref={ref}
+		className={cn(
+			"inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 hover:group-[.destructive]:border-destructive/30 hover:group-[.destructive]:bg-destructive hover:group-[.destructive]:text-destructive-foreground focus:group-[.destructive]:ring-destructive",
+			className
+		)}
+		{...props}
+	/>
+))
+ToastAction.displayName = ToastPrimitives.Action.displayName
+
+const ToastClose = React.forwardRef<
+	React.ElementRef<typeof ToastPrimitives.Close>,
+	React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
+>(({ className, ...props }, ref) => (
+	<ToastPrimitives.Close
+		ref={ref}
+		className={cn(
+			"absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-hidden focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 hover:group-[.destructive]:text-red-50 focus:group-[.destructive]:ring-red-400 focus:group-[.destructive]:ring-offset-red-600",
+			className
+		)}
+		toast-close=""
+		{...props}
+	>
+		<X className="h-4 w-4" />
+	</ToastPrimitives.Close>
+))
+ToastClose.displayName = ToastPrimitives.Close.displayName
+
+const ToastTitle = React.forwardRef<
+	React.ElementRef<typeof ToastPrimitives.Title>,
+	React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
+>(({ className, ...props }, ref) => (
+	<ToastPrimitives.Title ref={ref} className={cn("text-sm font-semibold", className)} {...props} />
+))
+ToastTitle.displayName = ToastPrimitives.Title.displayName
+
+const ToastDescription = React.forwardRef<
+	React.ElementRef<typeof ToastPrimitives.Description>,
+	React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
+>(({ className, ...props }, ref) => (
+	<ToastPrimitives.Description ref={ref} className={cn("text-sm opacity-90", className)} {...props} />
+))
+ToastDescription.displayName = ToastPrimitives.Description.displayName
+
+type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>
+
+type ToastActionElement = React.ReactElement<typeof ToastAction>
+
+export {
+	type ToastProps,
+	type ToastActionElement,
+	ToastProvider,
+	ToastViewport,
+	Toast,
+	ToastTitle,
+	ToastDescription,
+	ToastClose,
+	ToastAction,
+}

internal/site/src/components/ui/toaster.tsx

@@ -0,0 +1,22 @@
+import { Toast, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport } from "@/components/ui/toast"
+import { useToast } from "@/components/ui/use-toast"
+
+export function Toaster() {
+	const { toasts } = useToast()
+
+	return (
+		<ToastProvider>
+			{toasts.map(({ id, title, description, action, ...props }) => (
+				<Toast key={id} {...props}>
+					<div className="grid gap-1">
+						{title && <ToastTitle>{title}</ToastTitle>}
+						{description && <ToastDescription>{description}</ToastDescription>}
+					</div>
+					{action}
+					<ToastClose />
+				</Toast>
+			))}
+			<ToastViewport />
+		</ToastProvider>
+	)
+}

internal/site/src/components/ui/tooltip.tsx

@@ -0,0 +1,49 @@
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+import type * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function TooltipProvider({ delayDuration = 0, ...props }: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+	return <TooltipPrimitive.Provider data-slot="tooltip-provider" delayDuration={delayDuration} {...props} />
+}
+
+function Tooltip({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+	return (
+		<TooltipProvider>
+			<TooltipPrimitive.Root data-slot="tooltip" {...props} />
+		</TooltipProvider>
+	)
+}
+
+function TooltipTrigger({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+	return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+}
+
+function TooltipContent({
+	className,
+	sideOffset = 0,
+	children,
+	...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+	return (
+		<TooltipPrimitive.Portal>
+			<TooltipPrimitive.Content
+				data-slot="tooltip-content"
+				sideOffset={sideOffset}
+				className={cn(
+					"bg-popover text-popover-foreground border animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-sm text-balance",
+					className
+				)}
+				{...props}
+			>
+				{children}
+				<TooltipPrimitive.Arrow
+					className="bg-popover border z-50 fill-popover size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] will-change-transform"
+					style={{ clipPath: "inset(25% 0 0 25%)" }}
+				/>
+			</TooltipPrimitive.Content>
+		</TooltipPrimitive.Portal>
+	)
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

internal/site/src/components/ui/use-toast.ts

@@ -0,0 +1,187 @@
+// Inspired by react-hot-toast library
+import * as React from "react"
+
+import type { ToastActionElement, ToastProps } from "@/components/ui/toast"
+
+const TOAST_LIMIT = 1
+const TOAST_REMOVE_DELAY = 1000000
+
+type ToasterToast = ToastProps & {
+	id: string
+	title?: React.ReactNode
+	description?: React.ReactNode
+	action?: ToastActionElement
+}
+
+const actionTypes = {
+	ADD_TOAST: "ADD_TOAST",
+	UPDATE_TOAST: "UPDATE_TOAST",
+	DISMISS_TOAST: "DISMISS_TOAST",
+	REMOVE_TOAST: "REMOVE_TOAST",
+} as const
+
+let count = 0
+
+function genId() {
+	count = (count + 1) % Number.MAX_SAFE_INTEGER
+	return count.toString()
+}
+
+type ActionType = typeof actionTypes
+
+type Action =
+	| {
+			type: ActionType["ADD_TOAST"]
+			toast: ToasterToast
+	  }
+	| {
+			type: ActionType["UPDATE_TOAST"]
+			toast: Partial<ToasterToast>
+	  }
+	| {
+			type: ActionType["DISMISS_TOAST"]
+			toastId?: ToasterToast["id"]
+	  }
+	| {
+			type: ActionType["REMOVE_TOAST"]
+			toastId?: ToasterToast["id"]
+	  }
+
+interface State {
+	toasts: ToasterToast[]
+}
+
+const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()
+
+const addToRemoveQueue = (toastId: string) => {
+	if (toastTimeouts.has(toastId)) {
+		return
+	}
+
+	const timeout = setTimeout(() => {
+		toastTimeouts.delete(toastId)
+		dispatch({
+			type: "REMOVE_TOAST",
+			toastId: toastId,
+		})
+	}, TOAST_REMOVE_DELAY)
+
+	toastTimeouts.set(toastId, timeout)
+}
+
+export const reducer = (state: State, action: Action): State => {
+	switch (action.type) {
+		case "ADD_TOAST":
+			return {
+				...state,
+				toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
+			}
+
+		case "UPDATE_TOAST":
+			return {
+				...state,
+				toasts: state.toasts.map((t) => (t.id === action.toast.id ? { ...t, ...action.toast } : t)),
+			}
+
+		case "DISMISS_TOAST": {
+			const { toastId } = action
+
+			// ! Side effects ! - This could be extracted into a dismissToast() action,
+			// but I'll keep it here for simplicity
+			if (toastId) {
+				addToRemoveQueue(toastId)
+			} else {
+				state.toasts.forEach((toast) => {
+					addToRemoveQueue(toast.id)
+				})
+			}
+
+			return {
+				...state,
+				toasts: state.toasts.map((t) =>
+					t.id === toastId || toastId === undefined
+						? {
+								...t,
+								open: false,
+							}
+						: t
+				),
+			}
+		}
+		case "REMOVE_TOAST":
+			if (action.toastId === undefined) {
+				return {
+					...state,
+					toasts: [],
+				}
+			}
+			return {
+				...state,
+				toasts: state.toasts.filter((t) => t.id !== action.toastId),
+			}
+	}
+}
+
+const listeners: Array<(state: State) => void> = []
+
+let memoryState: State = { toasts: [] }
+
+function dispatch(action: Action) {
+	memoryState = reducer(memoryState, action)
+	listeners.forEach((listener) => {
+		listener(memoryState)
+	})
+}
+
+type Toast = Omit<ToasterToast, "id">
+
+function toast({ ...props }: Toast) {
+	const id = genId()
+
+	const update = (props: ToasterToast) =>
+		dispatch({
+			type: "UPDATE_TOAST",
+			toast: { ...props, id },
+		})
+	const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id })
+
+	dispatch({
+		type: "ADD_TOAST",
+		toast: {
+			...props,
+			id,
+			open: true,
+			onOpenChange: (open) => {
+				if (!open) dismiss()
+			},
+		},
+	})
+
+	return {
+		id: id,
+		dismiss,
+		update,
+	}
+}
+
+function useToast() {
+	const [state, setState] = React.useState<State>(memoryState)
+
+	React.useEffect(() => {
+		listeners.push(setState)
+		return () => {
+			const index = listeners.indexOf(setState)
+			if (index > -1) {
+				listeners.splice(index, 1)
+			}
+		}
+	}, [state])
+
+	return {
+		...state,
+		toast,
+		dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
+	}
+}
+
+export { useToast, toast }