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/install-dropdowns.tsx

@@ -0,0 +1,97 @@
+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 ? ":beta" : ""
+
+/**
+ * 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 = "") => {
+	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${imageTag}
+    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${imageTag}`
+	)
+}
+
+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>
+	)
+})