Add CBOR and agent initiated WebSocket connections (#51, #490, #646, #845, etc)

- Add version exchange between hub and agent.
- Introduce ConnectionManager for managing WebSocket and SSH connections.
- Implement fingerprint generation and storage in agent.
- Create expiry map package to store universal tokens.
- Update config.yml configuration to include tokens.
- Enhance system management with new methods for handling system states and alerts.
- Update front-end components to support token / fingerprint management features.
- Introduce utility functions for token generation and hub URL retrieval.

Co-authored-by: nhas <jordanatararimu@gmail.com>

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

@@ -7,7 +7,7 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/com
 import { useStore } from "@nanostores/react"
 import { $router } from "@/components/router.tsx"
 import { getPagePath, redirectPage } from "@nanostores/router"
-import { BellIcon, FileSlidersIcon, SettingsIcon } from "lucide-react"
+import { BellIcon, FileSlidersIcon, FingerprintIcon, SettingsIcon } from "lucide-react"
 import { $userSettings, pb } from "@/lib/stores.ts"
 import { toast } from "@/components/ui/use-toast.ts"
 import { UserSettings } from "@/types.js"
@@ -15,6 +15,7 @@ import General from "./general.tsx"
 import Notifications from "./notifications.tsx"
 import ConfigYaml from "./config-yaml.tsx"
 import { useLingui } from "@lingui/react/macro"
+import Fingerprints from "./tokens-fingerprints.tsx"
 
 export async function saveSettings(newSettings: Partial<UserSettings>) {
 	try {
@@ -58,6 +59,12 @@ export default function SettingsLayout() {
 			href: getPagePath($router, "settings", { name: "notifications" }),
 			icon: BellIcon,
 		},
+		{
+			title: t`Tokens & Fingerprints`,
+			href: getPagePath($router, "settings", { name: "tokens" }),
+			icon: FingerprintIcon,
+			// admin: true,
+		},
 		{
 			title: t`YAML Config`,
 			href: getPagePath($router, "settings", { name: "config" }),
@@ -77,7 +84,7 @@ export default function SettingsLayout() {
 	}, [])
 
 	return (
-		<Card className="pt-5 px-4 pb-8 sm:pt-6 sm:px-7">
+		<Card className="pt-5 px-4 pb-8 min-h-96 sm:pt-6 sm:px-7">
 			<CardHeader className="p-0">
 				<CardTitle className="mb-1">
 					<Trans>Settings</Trans>
@@ -89,10 +96,10 @@ export default function SettingsLayout() {
 			<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-10">
-					<aside className="md:w-48 w-full">
+					<aside className="md:max-w-44 min-w-40">
 						<SidebarNav items={sidebarNavItems} />
 					</aside>
-					<div className="flex-1">
+					<div className="flex-1 min-w-0">
 						{/* @ts-ignore */}
 						<SettingsContent name={page?.params?.name ?? "general"} />
 					</div>
@@ -112,5 +119,7 @@ function SettingsContent({ name }: { name: string }) {
 			return <Notifications userSettings={userSettings} />
 		case "config":
 			return <ConfigYaml />
+		case "tokens":
+			return <Fingerprints />
 	}
 }

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

@@ -31,9 +31,9 @@ export function SidebarNav({ className, items, ...props }: SidebarNavProps) {
 							if (item.admin && !isAdmin()) return null
 							return (
 								<SelectItem key={item.href} value={item.href}>
-									<span className="flex items-center gap-2">
+									<span className="flex items-center gap-2 truncate">
 										{item.icon && <item.icon className="h-4 w-4" />}
-										{item.title}
+										<span className="truncate">{item.title}</span>
 									</span>
 								</SelectItem>
 							)
@@ -55,13 +55,12 @@ export function SidebarNav({ className, items, ...props }: SidebarNavProps) {
 							href={item.href}
 							className={cn(
 								buttonVariants({ variant: "ghost" }),
-								"flex items-center gap-3",
-								page?.path === item.href ? "bg-muted hover:bg-muted" : "hover:bg-muted/50",
-								"justify-start"
+								"flex items-center gap-3 justify-start truncate",
+								page?.path === item.href ? "bg-muted hover:bg-muted" : "hover:bg-muted/50"
 							)}
 						>
-							{item.icon && <item.icon className="h-4 w-4" />}
-							{item.title}
+							{item.icon && <item.icon className="h-4 w-4 shrink-0" />}
+							<span className="truncate">{item.title}</span>
 						</Link>
 					)
 				})}

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

@@ -0,0 +1,352 @@
+import { Trans } from "@lingui/react/macro"
+import { t } from "@lingui/core/macro"
+import { $publicKey, pb } from "@/lib/stores"
+import { memo, useEffect, useMemo, useState } from "react"
+import { Table, TableCell, TableHead, TableBody, TableRow, TableHeader } from "@/components/ui/table"
+import { FingerprintRecord } from "@/types"
+import {
+	CopyIcon,
+	FingerprintIcon,
+	KeyIcon,
+	MoreHorizontalIcon,
+	RotateCwIcon,
+	ServerIcon,
+	Trash2Icon,
+} from "lucide-react"
+import { toast } from "@/components/ui/use-toast"
+import { cn, copyToClipboard, generateToken, getHubURL, isReadOnlyUser, tokenMap } from "@/lib/utils"
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuSeparator,
+	DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { Button } from "@/components/ui/button"
+import { Separator } from "@/components/ui/separator"
+import { Switch } from "@/components/ui/switch"
+import {
+	copyDockerCompose,
+	copyDockerRun,
+	copyLinuxCommand,
+	copyWindowsCommand,
+	DropdownItem,
+	InstallDropdown,
+} from "@/components/install-dropdowns"
+import { AppleIcon, DockerIcon, TuxIcon, WindowsIcon } from "@/components/ui/icons"
+
+const pbFingerprintOptions = {
+	expand: "system",
+	fields: "id,fingerprint,token,system,expand.system.name",
+}
+
+const SettingsFingerprintsPage = memo(() => {
+	const [fingerprints, setFingerprints] = useState<FingerprintRecord[]>([])
+
+	// Get fingerprint records on mount
+	useEffect(() => {
+		pb.collection("fingerprints")
+			.getFullList(pbFingerprintOptions)
+			// @ts-ignore
+			.then(setFingerprints)
+	}, [])
+
+	// 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 [...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 pl-5 pr-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 publicKey = $publicKey.get()
+	const port = "45876"
+
+	const dropdownItems: DropdownItem[] = [
+		{
+			text: "Copy Docker Compose",
+			onClick: () => copyDockerCompose(port, publicKey, token),
+			icons: [DockerIcon],
+		},
+		{
+			text: "Copy Docker Run",
+			onClick: () => copyDockerRun(port, publicKey, token),
+			icons: [DockerIcon],
+		},
+		{
+			text: "Copy Linux Command",
+			onClick: () => copyLinuxCommand(port, publicKey, token),
+			icons: [TuxIcon],
+		},
+		{
+			text: "Copy Brew Command",
+			onClick: () => copyLinuxCommand(port, publicKey, token, true),
+			icons: [TuxIcon, AppleIcon],
+		},
+		{
+			text: "Copy Windows 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 isReadOnly = isReadOnlyUser()
+	const headerCols = useMemo(
+		() => [
+			{
+				label: "System",
+				Icon: ServerIcon,
+				w: "11em",
+			},
+			{
+				label: "Token",
+				Icon: KeyIcon,
+				w: "20em",
+			},
+			{
+				label: "Fingerprint",
+				Icon: FingerprintIcon,
+				w: "20em",
+			},
+		],
+		[]
+	)
+	return (
+		<div className="rounded-md border overflow-hidden w-full mt-4">
+			<Table>
+				<TableHeader>
+					<TableRow>
+						{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>
+						)}
+					</TableRow>
+				</TableHeader>
+				<TableBody className="whitespace-pre">
+					{fingerprints.map((fingerprint, i) => (
+						<TableRow key={i}>
+							<TableCell className="font-medium ps-5 py-2.5">{fingerprint.expand.system.name}</TableCell>
+							<TableCell className="font-mono text-[0.95em] py-2.5">{fingerprint.token}</TableCell>
+							<TableCell className="font-mono text-[0.95em] py-2.5">{fingerprint.fingerprint}</TableCell>
+							{!isReadOnly && (
+								<TableCell className="py-2.5 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