combine hub and agent repos

hub/site/src/components/add-server.tsx

@@ -0,0 +1,165 @@
+import { Button } from '@/components/ui/button'
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from '@/components/ui/dialog'
+import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from '@/components/ui/tooltip'
+
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { $publicKey, pb } from '@/lib/stores'
+import { Copy, Plus } from 'lucide-react'
+import { useState, useRef, MutableRefObject, useEffect } from 'react'
+import { useStore } from '@nanostores/react'
+import { copyToClipboard } from '@/lib/utils'
+import { SystemStats } from '@/types'
+
+export function AddServerButton() {
+	const [open, setOpen] = useState(false)
+	const port = useRef() as MutableRefObject<HTMLInputElement>
+	const publicKey = useStore($publicKey)
+
+	function copyDockerCompose(port: string) {
+		copyToClipboard(`services:
+  agent:
+    image: 'henrygd/beszel-agent'
+    container_name: 'beszel-agent'
+    restart: unless-stopped
+    ports:
+      - '${port}:45876'
+    volumes:
+      - /var/run/docker.sock:/var/run/docker.sock
+    environment:
+      - KEY="${publicKey}"`)
+	}
+
+	useEffect(() => {
+		if (publicKey || !open) {
+			return
+		}
+		// get public key
+		pb.send('/api/beszel/getkey', {}).then(({ key }) => {
+			$publicKey.set(key)
+		})
+	}, [open])
+
+	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.status = 'pending'
+		data.users = pb.authStore.model!.id
+		data.info = {
+			cpu: 0,
+			m: 0,
+			mu: 0,
+			mp: 0,
+			mb: 0,
+			d: 0,
+			du: 0,
+			dp: 0,
+			dr: 0,
+			dw: 0,
+		} as SystemStats
+		try {
+			setOpen(false)
+			await pb.collection('systems').create(data)
+			// console.log(record)
+		} catch (e) {
+			console.log(e)
+		}
+	}
+
+	return (
+		<Dialog open={open} onOpenChange={setOpen}>
+			<DialogTrigger asChild>
+				<Button variant="outline" className="flex gap-1">
+					<Plus className="h-4 w-4 mr-auto" />
+					Add <span className="hidden sm:inline">System</span>
+				</Button>
+			</DialogTrigger>
+			<DialogContent className="w-[90%] sm:max-w-[425px] rounded-lg">
+				<DialogHeader>
+					<DialogTitle className="mb-2">Add New System</DialogTitle>
+					<DialogDescription>
+						The agent must be running on the server to connect. Copy the{' '}
+						<code className="bg-muted px-1 rounded-sm">docker-compose.yml</code> for the agent
+						below.
+					</DialogDescription>
+				</DialogHeader>
+				<form onSubmit={handleSubmit as any}>
+					<div className="grid gap-4 mt-1 mb-4">
+						<div className="grid grid-cols-4 items-center gap-4">
+							<Label htmlFor="name" className="text-right">
+								Name
+							</Label>
+							<Input id="name" name="name" className="col-span-3" required />
+						</div>
+						<div className="grid grid-cols-4 items-center gap-4">
+							<Label htmlFor="host" className="text-right">
+								Host / IP
+							</Label>
+							<Input id="host" name="host" className="col-span-3" required />
+						</div>
+						<div className="grid grid-cols-4 items-center gap-4">
+							<Label htmlFor="port" className="text-right">
+								Port
+							</Label>
+							<Input
+								ref={port}
+								name="port"
+								id="port"
+								defaultValue="45876"
+								className="col-span-3"
+								required
+							/>
+						</div>
+						<div className="grid grid-cols-4 items-center gap-4 relative">
+							<Label htmlFor="pkey" className="text-right whitespace-pre">
+								Public Key
+							</Label>
+							<Input readOnly id="pkey" value={publicKey} className="col-span-3" required></Input>
+							<div
+								className={
+									'h-6 w-24 bg-gradient-to-r from-transparent to-background to-65% absolute right-1 pointer-events-none'
+								}
+							></div>
+							<TooltipProvider delayDuration={100}>
+								<Tooltip>
+									<TooltipTrigger asChild>
+										<Button
+											type="button"
+											variant={'link'}
+											className="absolute right-0"
+											onClick={() => copyToClipboard(publicKey)}
+										>
+											<Copy className="h-4 w-4 " />
+										</Button>
+									</TooltipTrigger>
+									<TooltipContent>
+										<p>Click to copy</p>
+									</TooltipContent>
+								</Tooltip>
+							</TooltipProvider>
+						</div>
+					</div>
+					<DialogFooter className="flex justify-end gap-2">
+						<Button
+							type="button"
+							variant={'ghost'}
+							onClick={() => copyDockerCompose(port.current.value)}
+						>
+							Copy docker compose
+						</Button>
+						<Button>Add system</Button>
+					</DialogFooter>
+				</form>
+			</DialogContent>
+		</Dialog>
+	)
+}

hub/site/src/components/charts/bandwidth-chart.tsx

@@ -0,0 +1,100 @@
+import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts'
+
+import {
+	ChartConfig,
+	ChartContainer,
+	ChartTooltip,
+	ChartTooltipContent,
+} from '@/components/ui/chart'
+import { formatShortDate, hourWithMinutes } from '@/lib/utils'
+import Spinner from '../spinner'
+
+const chartConfig = {
+	recv: {
+		label: 'Received',
+		color: 'hsl(var(--chart-2))',
+	},
+	sent: {
+		label: 'Sent',
+		color: 'hsl(var(--chart-5))',
+	},
+} satisfies ChartConfig
+
+export default function BandwidthChart({
+	chartData,
+	ticks,
+}: {
+	chartData: { time: number; sent: number; recv: number }[]
+	ticks: number[]
+}) {
+	if (!chartData.length || !ticks.length) {
+		return <Spinner />
+	}
+
+	return (
+		<ChartContainer config={chartConfig} className="h-full w-full absolute aspect-auto">
+			<AreaChart
+				accessibilityLayer
+				data={chartData}
+				margin={{
+					left: 0,
+					right: 0,
+					top: 10,
+					bottom: 0,
+				}}
+			>
+				<CartesianGrid vertical={false} />
+				<YAxis
+					className="tracking-tighter"
+					width={80}
+					domain={[0, 'auto']}
+					// ticks={ticks}
+					tickCount={9}
+					minTickGap={8}
+					tickLine={false}
+					axisLine={false}
+					unit={' MB/s'}
+				/>
+				{/* todo: short time if first date is same day, otherwise short date */}
+				<XAxis
+					dataKey="time"
+					domain={[ticks[0], ticks.at(-1)!]}
+					ticks={ticks}
+					type="number"
+					scale={'time'}
+					tickLine={true}
+					axisLine={false}
+					tickMargin={8}
+					minTickGap={30}
+					tickFormatter={hourWithMinutes}
+				/>
+				<ChartTooltip
+					// cursor={false}
+					content={
+						<ChartTooltipContent
+							unit=" MB/s"
+							labelFormatter={(_, data) => formatShortDate(data[0].payload.time)}
+							indicator="line"
+						/>
+					}
+				/>
+				<Area
+					dataKey="sent"
+					type="monotoneX"
+					fill="var(--color-sent)"
+					fillOpacity={0.4}
+					stroke="var(--color-sent)"
+					animationDuration={1200}
+				/>
+				<Area
+					dataKey="recv"
+					type="monotoneX"
+					fill="var(--color-recv)"
+					fillOpacity={0.4}
+					stroke="var(--color-recv)"
+					animationDuration={1200}
+				/>
+			</AreaChart>
+		</ChartContainer>
+	)
+}

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

@@ -0,0 +1,34 @@
+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'
+
+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, 'w-40 px-5')}>
+				<SelectValue />
+			</SelectTrigger>
+			<SelectContent>
+				{Object.entries(chartTimeData).map(([value, { label }]) => (
+					<SelectItem key={label} value={value}>
+						{label}
+					</SelectItem>
+				))}
+			</SelectContent>
+		</Select>
+	)
+}

hub/site/src/components/charts/container-cpu-chart.tsx

@@ -0,0 +1,117 @@
+'use client'
+
+import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts'
+import {
+	ChartConfig,
+	ChartContainer,
+	ChartTooltip,
+	ChartTooltipContent,
+} from '@/components/ui/chart'
+import { useMemo } from 'react'
+import { formatShortDate, hourWithMinutes } from '@/lib/utils'
+import Spinner from '../spinner'
+
+export default function ContainerCpuChart({
+	chartData,
+	ticks,
+}: {
+	chartData: Record<string, number | string>[]
+	ticks: number[]
+}) {
+	const chartConfig = useMemo(() => {
+		let config = {} as Record<
+			string,
+			{
+				label: string
+				color: string
+			}
+		>
+		const totalUsage = {} as Record<string, number>
+		for (let stats of chartData) {
+			for (let key in stats) {
+				if (key === 'time') {
+					continue
+				}
+				if (!(key in totalUsage)) {
+					totalUsage[key] = 0
+				}
+				// @ts-ignore
+				totalUsage[key] += stats[key]
+			}
+		}
+		let keys = Object.keys(totalUsage)
+		keys.sort((a, b) => (totalUsage[a] > totalUsage[b] ? -1 : 1))
+		const length = keys.length
+		for (let i = 0; i < length; i++) {
+			const key = keys[i]
+			const hue = ((i * 360) / length) % 360
+			config[key] = {
+				label: key,
+				color: `hsl(${hue}, 60%, 55%)`,
+			}
+		}
+		return config satisfies ChartConfig
+	}, [chartData])
+
+	if (!chartData.length || !ticks.length) {
+		return <Spinner />
+	}
+
+	return (
+		<ChartContainer config={chartConfig} className="h-full w-full absolute aspect-auto">
+			<AreaChart
+				accessibilityLayer
+				data={chartData}
+				margin={{
+					top: 10,
+				}}
+				reverseStackOrder={true}
+			>
+				<CartesianGrid vertical={false} />
+				<YAxis
+					domain={[0, (max: number) => Math.max(Math.ceil(max), 0.4)]}
+					width={47}
+					tickLine={false}
+					axisLine={false}
+					unit={'%'}
+					tickFormatter={(x) => (x % 1 === 0 ? x : x.toFixed(1))}
+				/>
+				<XAxis
+					dataKey="time"
+					domain={[ticks[0], ticks.at(-1)!]}
+					ticks={ticks}
+					type="number"
+					scale={'time'}
+					tickLine={true}
+					axisLine={false}
+					tickMargin={8}
+					minTickGap={30}
+					tickFormatter={hourWithMinutes}
+				/>
+				<ChartTooltip
+					// cursor={false}
+					animationEasing="ease-out"
+					animationDuration={150}
+					labelFormatter={(_, data) => formatShortDate(data[0].payload.time)}
+					// @ts-ignore
+					itemSorter={(a, b) => b.value - a.value}
+					content={<ChartTooltipContent unit="%" indicator="line" />}
+				/>
+				{Object.keys(chartConfig).map((key) => (
+					<Area
+						key={key}
+						// isAnimationActive={chartData.length < 20}
+						animateNewValues={false}
+						animationDuration={1200}
+						dataKey={key}
+						type="monotoneX"
+						fill={chartConfig[key].color}
+						fillOpacity={0.4}
+						stroke={chartConfig[key].color}
+						stackId="a"
+					/>
+				))}
+			</AreaChart>
+		</ChartContainer>
+	)
+}

hub/site/src/components/charts/container-mem-chart.tsx

@@ -0,0 +1,123 @@
+'use client'
+
+import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts'
+import {
+	ChartConfig,
+	ChartContainer,
+	ChartTooltip,
+	ChartTooltipContent,
+} from '@/components/ui/chart'
+import { useMemo } from 'react'
+import { formatShortDate, hourWithMinutes } from '@/lib/utils'
+import Spinner from '../spinner'
+
+export default function ({
+	chartData,
+	ticks,
+}: {
+	chartData: Record<string, number | string>[]
+	ticks: number[]
+}) {
+	const chartConfig = useMemo(() => {
+		let config = {} as Record<
+			string,
+			{
+				label: string
+				color: string
+			}
+		>
+		const totalUsage = {} as Record<string, number>
+		for (let stats of chartData) {
+			for (let key in stats) {
+				if (key === 'time') {
+					continue
+				}
+				if (!(key in totalUsage)) {
+					totalUsage[key] = 0
+				}
+				// @ts-ignore
+				totalUsage[key] += stats[key]
+			}
+		}
+		let keys = Object.keys(totalUsage)
+		keys.sort((a, b) => (totalUsage[a] > totalUsage[b] ? -1 : 1))
+		const length = keys.length
+		for (let i = 0; i < length; i++) {
+			const key = keys[i]
+			const hue = ((i * 360) / length) % 360
+			config[key] = {
+				label: key,
+				color: `hsl(${hue}, 60%, 55%)`,
+			}
+		}
+		return config satisfies ChartConfig
+	}, [chartData])
+
+	if (!chartData.length || !ticks.length) {
+		return <Spinner />
+	}
+
+	return (
+		<ChartContainer config={chartConfig} className="h-full w-full absolute aspect-auto">
+			<AreaChart
+				accessibilityLayer
+				data={chartData}
+				reverseStackOrder={true}
+				margin={{
+					top: 10,
+				}}
+
+				// reverseStackOrder={true}
+			>
+				<CartesianGrid vertical={false} />
+				<YAxis
+					domain={[0, (max: number) => Math.ceil(max)]}
+					// tickCount={9}
+					allowDecimals={false}
+					tickLine={false}
+					axisLine={false}
+					unit={' GB'}
+					tickFormatter={(x) => {
+						x = x / 1024
+						return x % 1 === 0 ? x : x.toFixed(1)
+					}}
+				/>
+				<XAxis
+					dataKey="time"
+					domain={[ticks[0], ticks.at(-1)!]}
+					ticks={ticks}
+					type="number"
+					scale={'time'}
+					tickLine={true}
+					axisLine={false}
+					tickMargin={8}
+					minTickGap={30}
+					tickFormatter={hourWithMinutes}
+				/>
+				<ChartTooltip
+					// cursor={false}
+					animationEasing="ease-out"
+					animationDuration={150}
+					labelFormatter={(_, data) => formatShortDate(data[0].payload.time)}
+					// @ts-ignore
+					itemSorter={(a, b) => b.value - a.value}
+					content={<ChartTooltipContent unit=" MiB" indicator="line" />}
+				/>
+				{Object.keys(chartConfig).map((key) => (
+					<Area
+						key={key}
+						isAnimationActive={chartData.length < 20}
+						animateNewValues={false}
+						animationDuration={1200}
+						dataKey={key}
+						type="monotoneX"
+						fill={chartConfig[key].color}
+						fillOpacity={0.4}
+						stroke={chartConfig[key].color}
+						stackId="a"
+					/>
+				))}
+			</AreaChart>
+		</ChartContainer>
+	)
+}

hub/site/src/components/charts/cpu-chart.tsx

@@ -0,0 +1,81 @@
+import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts'
+
+import {
+	ChartConfig,
+	ChartContainer,
+	ChartTooltip,
+	ChartTooltipContent,
+} from '@/components/ui/chart'
+import { chartTimeData, formatShortDate } from '@/lib/utils'
+import Spinner from '../spinner'
+import { useStore } from '@nanostores/react'
+import { $chartTime } from '@/lib/stores'
+
+const chartConfig = {
+	cpu: {
+		label: 'CPU Usage',
+		color: 'hsl(var(--chart-1))',
+	},
+} satisfies ChartConfig
+
+export default function CpuChart({
+	chartData,
+	ticks,
+}: {
+	chartData: { time: number; cpu: number }[]
+	ticks: number[]
+}) {
+	const chartTime = useStore($chartTime)
+
+	if (!chartData.length || !ticks.length) {
+		return <Spinner />
+	}
+
+	return (
+		<ChartContainer config={chartConfig} className="h-full w-full absolute aspect-auto">
+			<AreaChart accessibilityLayer data={chartData} margin={{ top: 10 }}>
+				<CartesianGrid vertical={false} />
+				<YAxis
+					domain={[0, (max: number) => Math.ceil(max)]}
+					width={47}
+					tickLine={false}
+					axisLine={false}
+					unit={'%'}
+				/>
+				{/* todo: short time if first date is same day, otherwise short date */}
+				<XAxis
+					dataKey="time"
+					domain={[ticks[0], ticks.at(-1)!]}
+					ticks={ticks}
+					type="number"
+					scale={'time'}
+					minTickGap={35}
+					tickMargin={8}
+					axisLine={false}
+					tickFormatter={chartTimeData[chartTime].format}
+				/>
+				<ChartTooltip
+					animationEasing="ease-out"
+					animationDuration={150}
+					content={
+						<ChartTooltipContent
+							unit="%"
+							labelFormatter={(_, data) => formatShortDate(data[0].payload.time)}
+							indicator="line"
+						/>
+					}
+				/>
+				<Area
+					dataKey="cpu"
+					type="monotoneX"
+					fill="var(--color-cpu)"
+					fillOpacity={0.4}
+					stroke="var(--color-cpu)"
+					animationDuration={1200}
+					// animationEasing="ease-out"
+					// animateNewValues={false}
+				/>
+			</AreaChart>
+		</ChartContainer>
+	)
+}

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

@@ -0,0 +1,102 @@
+import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts'
+
+import {
+	ChartConfig,
+	ChartContainer,
+	ChartTooltip,
+	ChartTooltipContent,
+} from '@/components/ui/chart'
+import { formatShortDate, hourWithMinutes } from '@/lib/utils'
+import { useMemo } from 'react'
+import Spinner from '../spinner'
+
+const chartConfig = {
+	diskUsed: {
+		label: 'Disk Usage',
+		color: 'hsl(var(--chart-4))',
+	},
+} satisfies ChartConfig
+
+export default function DiskChart({
+	chartData,
+	ticks,
+}: {
+	chartData: { time: number; disk: number; diskUsed: number }[]
+	ticks: number[]
+}) {
+	const diskSize = useMemo(() => {
+		return Math.round(chartData[0]?.disk)
+	}, [chartData])
+
+	// const ticks = useMemo(() => {
+	// 	let ticks = [0]
+	// 	for (let i = 1; i < diskSize; i += diskSize / 5) {
+	// 		ticks.push(Math.trunc(i))
+	// 	}
+	// 	ticks.push(diskSize)
+	// 	return ticks
+	// }, [diskSize])
+
+	if (!chartData.length || !ticks.length) {
+		return <Spinner />
+	}
+
+	return (
+		<ChartContainer config={chartConfig} className="h-full w-full absolute aspect-auto">
+			<AreaChart
+				accessibilityLayer
+				data={chartData}
+				margin={{
+					left: 0,
+					right: 0,
+					top: 10,
+					bottom: 0,
+				}}
+			>
+				<CartesianGrid vertical={false} />
+				<YAxis
+					className="tracking-tighter"
+					width={75}
+					domain={[0, diskSize]}
+					// ticks={ticks}
+					tickCount={9}
+					minTickGap={8}
+					tickLine={false}
+					axisLine={false}
+					unit={' GB'}
+				/>
+				{/* todo: short time if first date is same day, otherwise short date */}
+				<XAxis
+					dataKey="time"
+					domain={[ticks[0], ticks.at(-1)!]}
+					ticks={ticks}
+					type="number"
+					scale={'time'}
+					tickLine={true}
+					axisLine={false}
+					tickMargin={8}
+					minTickGap={30}
+					tickFormatter={hourWithMinutes}
+				/>
+				<ChartTooltip
+					// cursor={false}
+					content={
+						<ChartTooltipContent
+							unit=" GB"
+							labelFormatter={(_, data) => formatShortDate(data[0].payload.time)}
+							indicator="line"
+						/>
+					}
+				/>
+				<Area
+					dataKey="diskUsed"
+					type="monotoneX"
+					fill="var(--color-diskUsed)"
+					fillOpacity={0.4}
+					stroke="var(--color-diskUsed)"
+					animationDuration={1200}
+				/>
+			</AreaChart>
+		</ChartContainer>
+	)
+}

hub/site/src/components/charts/disk-io-chart.tsx

@@ -0,0 +1,100 @@
+import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts'
+
+import {
+	ChartConfig,
+	ChartContainer,
+	ChartTooltip,
+	ChartTooltipContent,
+} from '@/components/ui/chart'
+import { formatShortDate, hourWithMinutes } from '@/lib/utils'
+import Spinner from '../spinner'
+
+const chartConfig = {
+	read: {
+		label: 'Read',
+		color: 'hsl(var(--chart-1))',
+	},
+	write: {
+		label: 'Write',
+		color: 'hsl(var(--chart-3))',
+	},
+} satisfies ChartConfig
+
+export default function DiskIoChart({
+	chartData,
+	ticks,
+}: {
+	chartData: { time: number; read: number; write: number }[]
+	ticks: number[]
+}) {
+	if (!chartData.length || !ticks.length) {
+		return <Spinner />
+	}
+
+	return (
+		<ChartContainer config={chartConfig} className="h-full w-full absolute aspect-auto">
+			<AreaChart
+				accessibilityLayer
+				data={chartData}
+				margin={{
+					left: 0,
+					right: 0,
+					top: 10,
+					bottom: 0,
+				}}
+			>
+				<CartesianGrid vertical={false} />
+				<YAxis
+					className="tracking-tighter"
+					width={80}
+					domain={[0, 'auto']}
+					// ticks={ticks}
+					tickCount={9}
+					minTickGap={8}
+					tickLine={false}
+					axisLine={false}
+					unit={' MB/s'}
+				/>
+				{/* todo: short time if first date is same day, otherwise short date */}
+				<XAxis
+					dataKey="time"
+					domain={[ticks[0], ticks.at(-1)!]}
+					ticks={ticks}
+					type="number"
+					scale={'time'}
+					tickLine={true}
+					axisLine={false}
+					tickMargin={8}
+					minTickGap={30}
+					tickFormatter={hourWithMinutes}
+				/>
+				<ChartTooltip
+					// cursor={false}
+					content={
+						<ChartTooltipContent
+							unit=" MB/s"
+							labelFormatter={(_, data) => formatShortDate(data[0].payload.time)}
+							indicator="line"
+						/>
+					}
+				/>
+				<Area
+					dataKey="write"
+					type="monotoneX"
+					fill="var(--color-write)"
+					fillOpacity={0.4}
+					stroke="var(--color-write)"
+					animationDuration={1200}
+				/>
+				<Area
+					dataKey="read"
+					type="monotoneX"
+					fill="var(--color-read)"
+					fillOpacity={0.4}
+					stroke="var(--color-read)"
+					animationDuration={1200}
+				/>
+			</AreaChart>
+		</ChartContainer>
+	)
+}

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

@@ -0,0 +1,110 @@
+import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts'
+
+import {
+	ChartConfig,
+	ChartContainer,
+	ChartTooltip,
+	ChartTooltipContent,
+} from '@/components/ui/chart'
+import { formatShortDate, hourWithMinutes } from '@/lib/utils'
+import { useMemo } from 'react'
+import Spinner from '../spinner'
+
+export default function MemChart({
+	chartData,
+	ticks,
+}: {
+	chartData: { time: number; mem: number; memUsed: number; memCache: number }[]
+	ticks: number[]
+}) {
+	const totalMem = useMemo(() => {
+		return Math.ceil(chartData[0]?.mem)
+	}, [chartData])
+
+	const chartConfig = useMemo(
+		() => ({
+			memCache: {
+				label: 'Cache / Buffers',
+				color: 'hsl(var(--chart-2))',
+			},
+			memUsed: {
+				label: 'Used',
+				color: 'hsl(var(--chart-2))',
+			},
+		}),
+		[]
+	) satisfies ChartConfig
+
+	if (!chartData.length || !ticks.length) {
+		return <Spinner />
+	}
+
+	return (
+		<ChartContainer config={chartConfig} className="h-full w-full absolute aspect-auto">
+			<AreaChart
+				accessibilityLayer
+				data={chartData}
+				margin={{
+					top: 10,
+				}}
+			>
+				<CartesianGrid vertical={false} />
+				<YAxis
+					// use "ticks" instead of domain / tickcount if need more control
+					domain={[0, totalMem]}
+					tickCount={9}
+					tickLine={false}
+					allowDecimals={false}
+					axisLine={false}
+					tickFormatter={(v) => `${v} GB`}
+				/>
+				{/* todo: short time if first date is same day, otherwise short date */}
+				<XAxis
+					dataKey="time"
+					domain={[ticks[0], ticks.at(-1)!]}
+					ticks={ticks}
+					type="number"
+					scale={'time'}
+					tickLine={true}
+					axisLine={false}
+					tickMargin={8}
+					minTickGap={30}
+					tickFormatter={hourWithMinutes}
+				/>
+				<ChartTooltip
+					// cursor={false}
+					animationEasing="ease-out"
+					animationDuration={150}
+					content={
+						<ChartTooltipContent
+							unit="GB"
+							// @ts-ignore
+							itemSorter={(a, b) => a.name.localeCompare(b.name)}
+							labelFormatter={(_, data) => formatShortDate(data[0].payload.time)}
+							indicator="line"
+						/>
+					}
+				/>
+				<Area
+					dataKey="memUsed"
+					type="monotoneX"
+					fill="var(--color-memUsed)"
+					fillOpacity={0.4}
+					stroke="var(--color-memUsed)"
+					stackId="a"
+					animationDuration={1200}
+				/>
+				<Area
+					dataKey="memCache"
+					type="monotoneX"
+					fill="var(--color-memCache)"
+					fillOpacity={0.2}
+					strokeOpacity={0.3}
+					stroke="var(--color-memCache)"
+					stackId="a"
+					animationDuration={1200}
+				/>
+			</AreaChart>
+		</ChartContainer>
+	)
+}

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

@@ -0,0 +1,146 @@
+'use client'
+
+import {
+	Database,
+	DatabaseBackupIcon,
+	Github,
+	LayoutDashboard,
+	LockKeyholeIcon,
+	LogsIcon,
+	MailIcon,
+	Server,
+} from 'lucide-react'
+
+import {
+	CommandDialog,
+	CommandEmpty,
+	CommandGroup,
+	CommandInput,
+	CommandItem,
+	CommandList,
+	CommandSeparator,
+	CommandShortcut,
+} from '@/components/ui/command'
+import { useEffect, useState } from 'react'
+import { useStore } from '@nanostores/react'
+import { $systems } from '@/lib/stores'
+import { isAdmin } from '@/lib/utils'
+import { navigate } from './router'
+
+export default function CommandPalette() {
+	const [open, setOpen] = useState(false)
+	const servers = useStore($systems)
+
+	useEffect(() => {
+		const down = (e: KeyboardEvent) => {
+			if (e.key === 'k' && (e.metaKey || e.ctrlKey)) {
+				e.preventDefault()
+				setOpen((open) => !open)
+			}
+		}
+
+		document.addEventListener('keydown', down)
+		return () => document.removeEventListener('keydown', down)
+	}, [])
+
+	return (
+		<CommandDialog open={open} onOpenChange={setOpen}>
+			<CommandInput placeholder="Type a command or search..." />
+			<CommandList>
+				<CommandEmpty>No results found.</CommandEmpty>
+				<CommandGroup heading="Suggestions">
+					<CommandItem
+						keywords={['home']}
+						onSelect={() => {
+							navigate('/')
+							setOpen((open) => !open)
+						}}
+					>
+						<LayoutDashboard className="mr-2 h-4 w-4" />
+						<span>Dashboard</span>
+						<CommandShortcut>Page</CommandShortcut>
+					</CommandItem>
+					<CommandItem
+						onSelect={() => {
+							window.location.href = 'https://github.com/henrygd'
+						}}
+					>
+						<Github className="mr-2 h-4 w-4" />
+						<span>Documentation</span>
+						<CommandShortcut>GitHub</CommandShortcut>
+					</CommandItem>
+				</CommandGroup>
+				<CommandSeparator />
+				<CommandGroup heading="Servers">
+					{servers.map((server) => (
+						<CommandItem
+							key={server.id}
+							onSelect={() => {
+								navigate(`/server/${server.name}`)
+								setOpen((open) => !open)
+							}}
+						>
+							<Server className="mr-2 h-4 w-4" />
+							<span>{server.name}</span>
+							<CommandShortcut>{server.host}</CommandShortcut>
+						</CommandItem>
+					))}
+				</CommandGroup>
+				{isAdmin() && (
+					<>
+						<CommandSeparator />
+						<CommandGroup heading="Admin">
+							<CommandItem
+								onSelect={() => {
+									window.location.href = '/_/'
+								}}
+							>
+								<Database className="mr-2 h-4 w-4" />
+								<span>PocketBase</span>
+								<CommandShortcut>Admin</CommandShortcut>
+							</CommandItem>
+							<CommandItem
+								onSelect={() => {
+									window.location.href = '/_/#/logs'
+								}}
+							>
+								<LogsIcon className="mr-2 h-4 w-4" />
+								<span>Logs</span>
+								<CommandShortcut>Admin</CommandShortcut>
+							</CommandItem>
+							<CommandItem
+								onSelect={() => {
+									window.location.href = '/_/#/settings/backups'
+								}}
+							>
+								<DatabaseBackupIcon className="mr-2 h-4 w-4" />
+								<span>Database backups</span>
+								<CommandShortcut>Admin</CommandShortcut>
+							</CommandItem>
+							<CommandItem
+								keywords={['oauth', 'oicd']}
+								onSelect={() => {
+									window.location.href = '/_/#/settings/auth-providers'
+								}}
+							>
+								<LockKeyholeIcon className="mr-2 h-4 w-4" />
+								<span>Auth Providers</span>
+								<CommandShortcut>Admin</CommandShortcut>
+							</CommandItem>
+							<CommandItem
+								keywords={['email']}
+								onSelect={() => {
+									window.location.href = '/_/#/settings/mail'
+								}}
+							>
+								<MailIcon className="mr-2 h-4 w-4" />
+								<span>SMTP settings</span>
+								<CommandShortcut>Admin</CommandShortcut>
+							</CommandItem>
+						</CommandGroup>
+					</>
+				)}
+			</CommandList>
+		</CommandDialog>
+	)
+}

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

@@ -0,0 +1,319 @@
+import { cn } from '@/lib/utils'
+import { buttonVariants } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { LoaderCircle, LockIcon, LogInIcon, MailIcon, UserIcon } from 'lucide-react'
+import { $authenticated, pb } 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 { useState } from 'react'
+import { AuthMethodsList } from 'pocketbase'
+import { Link } from '../router'
+
+const honeypot = v.literal('')
+const emailSchema = v.pipe(v.string(), v.email('Invalid email address.'))
+const passwordSchema = v.pipe(
+	v.string(),
+	v.minLength(10, 'Password must be at least 10 characters.')
+)
+
+const LoginSchema = v.looseObject({
+	name: honeypot,
+	email: emailSchema,
+	password: passwordSchema,
+})
+
+const RegisterSchema = v.looseObject({
+	name: honeypot,
+	username: v.pipe(
+		v.string(),
+		v.regex(
+			/^(?=.*[a-zA-Z])[a-zA-Z0-9_-]+$/,
+			'Invalid username. You may use alphanumeric characters, underscores, and hyphens.'
+		),
+		v.minLength(3, 'Username must be at least 3 characters long.')
+	),
+	email: emailSchema,
+	password: passwordSchema,
+	passwordConfirm: passwordSchema,
+})
+
+const showLoginFaliedToast = () => {
+	toast({
+		title: 'Login attempt failed',
+		description: 'Please check your credentials and try again',
+		variant: 'destructive',
+	})
+}
+
+export function UserAuthForm({
+	className,
+	isFirstRun,
+	authMethods,
+	...props
+}: {
+	className?: string
+	isFirstRun: boolean
+	authMethods: AuthMethodsList
+}) {
+	const [isLoading, setIsLoading] = useState<boolean>(false)
+	const [isGitHubLoading, setIsOauthLoading] = useState<boolean>(false)
+	const [errors, setErrors] = useState<Record<string, string | undefined>>({})
+
+	async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
+		e.preventDefault()
+		setIsLoading(true)
+		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 { email, password, passwordConfirm, username } = result.output
+			if (isFirstRun) {
+				// check that passwords match
+				if (password !== passwordConfirm) {
+					let msg = 'Passwords do not match'
+					setErrors({ passwordConfirm: msg })
+					return
+				}
+				await pb.admins.create({
+					email,
+					password,
+					passwordConfirm: password,
+				})
+				await pb.admins.authWithPassword(email, password)
+				await pb.collection('users').create({
+					username,
+					email,
+					password,
+					passwordConfirm: password,
+					role: 'admin',
+					verified: true,
+				})
+				await pb.collection('users').authWithPassword(email, password)
+			} else {
+				await pb.collection('users').authWithPassword(email, password)
+			}
+			$authenticated.set(true)
+		} catch (e) {
+			showLoginFaliedToast()
+		} finally {
+			setIsLoading(false)
+		}
+	}
+
+	if (!authMethods) {
+		return null
+	}
+
+	return (
+		<div className={cn('grid gap-6', className)} {...props}>
+			{authMethods.emailPassword && (
+				<>
+					<form onSubmit={handleSubmit} onChange={() => setErrors({})}>
+						<div className="grid gap-2.5">
+							{isFirstRun && (
+								<div className="grid gap-1 relative">
+									<UserIcon className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
+									<Label className="sr-only" htmlFor="username">
+										Username
+									</Label>
+									<Input
+										autoFocus={true}
+										id="username"
+										name="username"
+										required
+										placeholder="username"
+										type="username"
+										autoCapitalize="none"
+										autoComplete="username"
+										autoCorrect="off"
+										disabled={isLoading || isGitHubLoading}
+										className="pl-9"
+									/>
+									{errors?.username && (
+										<p className="px-1 text-xs text-red-600">{errors.username}</p>
+									)}
+								</div>
+							)}
+							<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">
+									Email
+								</Label>
+								<Input
+									id="email"
+									name="email"
+									required
+									placeholder={isFirstRun ? 'email' : 'name@example.com'}
+									type="email"
+									autoCapitalize="none"
+									autoComplete="email"
+									autoCorrect="off"
+									disabled={isLoading || isGitHubLoading}
+									className="pl-9"
+								/>
+								{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">
+									Password
+								</Label>
+								<Input
+									id="pass"
+									name="password"
+									placeholder="password"
+									required
+									type="password"
+									autoComplete="current-password"
+									disabled={isLoading || isGitHubLoading}
+									className="pl-9"
+								/>
+								{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">
+										Confirm password
+									</Label>
+									<Input
+										id="pass2"
+										name="passwordConfirm"
+										placeholder="confirm password"
+										required
+										type="password"
+										autoComplete="current-password"
+										disabled={isLoading || isGitHubLoading}
+										className="pl-9"
+									/>
+									{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} />
+							</div>
+							<button className={cn(buttonVariants())} disabled={isLoading}>
+								{isLoading ? (
+									<LoaderCircle className="mr-2 h-4 w-4 animate-spin" />
+								) : (
+									<LogInIcon className="mr-2 h-4 w-4" />
+								)}
+								{isFirstRun ? 'Create account' : 'Sign in'}
+							</button>
+						</div>
+					</form>
+					<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">Or continue with</span>
+						</div>
+					</div>
+				</>
+			)}
+
+			{authMethods.authProviders.length > 0 && (
+				<div className="grid gap-2 -mt-1">
+					{authMethods.authProviders.map((provider) => (
+						<button
+							key={provider.name}
+							type="button"
+							className={cn(buttonVariants({ variant: 'outline' }), {
+								'justify-self-center': !authMethods.emailPassword,
+								'px-5': !authMethods.emailPassword,
+							})}
+							onClick={async () => {
+								setIsOauthLoading(true)
+								try {
+									await pb.collection('users').authWithOAuth2({ provider: provider.name })
+									$authenticated.set(pb.authStore.isValid)
+								} catch (e) {
+									showLoginFaliedToast()
+								} finally {
+									setIsOauthLoading(false)
+								}
+							}}
+							disabled={isLoading || isGitHubLoading}
+						>
+							{isGitHubLoading ? (
+								<LoaderCircle className="mr-2 h-4 w-4 animate-spin" />
+							) : (
+								<img
+									className="mr-2 h-4 w-4 dark:invert"
+									src={`/static/${provider.name}.svg`}
+									alt=""
+									onError={(e) => {
+										e.currentTarget.src = '/static/lock.svg'
+									}}
+								/>
+							)}
+							<span className="translate-y-[1px]">{provider.displayName}</span>
+						</button>
+					))}
+				</div>
+			)}
+
+			{!authMethods.authProviders.length && (
+				<Dialog>
+					<DialogTrigger asChild>
+						<button type="button" className={cn(buttonVariants({ variant: 'outline' }))}>
+							<img className="mr-2 h-4 w-4 dark:invert" src="/icons/github.svg" alt="" />
+							<span className="translate-y-[1px]">GitHub</span>
+						</button>
+					</DialogTrigger>
+					<DialogContent style={{ maxWidth: 440, width: '90%' }}>
+						<DialogHeader>
+							<DialogTitle>OAuth 2 / OIDC support</DialogTitle>
+						</DialogHeader>
+						<div className="text-primary/70 text-[0.95em] contents">
+							<p>Beszel supports OpenID Connect and many OAuth2 authentication providers.</p>
+							<p>
+								Please view the{' '}
+								<a
+									href="https://github.com/henrygd/beszel/blob/main/readme.md#oauth--oidc-integration"
+									className={cn(buttonVariants({ variant: 'link' }), 'p-0 h-auto')}
+								>
+									GitHub README
+								</a>{' '}
+								for instructions.
+							</p>
+						</div>
+					</DialogContent>
+				</Dialog>
+			)}
+
+			{authMethods.emailPassword && !isFirstRun && (
+				<Link
+					href="/forgot-password"
+					className="text-sm mx-auto hover:text-brand underline underline-offset-4 opacity-70 hover:opacity-100 transition-opacity"
+				>
+					Forgot password?
+				</Link>
+			)}
+		</div>
+	)
+}

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

@@ -0,0 +1,100 @@
+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 { pb } from '@/lib/stores'
+import { Dialog, DialogHeader } from '../ui/dialog'
+import { DialogContent, DialogTrigger, DialogTitle } from '../ui/dialog'
+
+const showLoginFaliedToast = () => {
+	toast({
+		title: 'Login attempt failed',
+		description: '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: 'Password reset request received',
+					description: `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">
+							Email
+						</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="pl-9"
+						/>
+					</div>
+					<button className={cn(buttonVariants())} disabled={isLoading}>
+						{isLoading ? (
+							<LoaderCircle className="mr-2 h-4 w-4 animate-spin" />
+						) : (
+							<SendHorizonalIcon className="mr-2 h-4 w-4" />
+						)}
+						Reset password
+					</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">
+						Command line instructions
+					</button>
+				</DialogTrigger>
+				<DialogContent className="max-w-[33em]">
+					<DialogHeader>
+						<DialogTitle>Command line instructions</DialogTitle>
+					</DialogHeader>
+					<p className="text-primary/70 text-[0.95em]">
+						Use the following command to reset
+						your password:
+					</p>
+					<code className="bg-muted rounded-sm py-0.5 px-2.5 mr-auto text-sm">
+						beszel admin update youremail@example.com newpassword
+					</code>
+				</DialogContent>
+			</Dialog>
+		</>
+	)
+}

hub/site/src/components/login/login.tsx

@@ -0,0 +1,63 @@
+import { UserAuthForm } from '@/components/login/auth-form'
+import { Logo } from '../logo'
+import { useEffect, useMemo, useState } from 'react'
+import { pb } from '@/lib/stores'
+import { useStore } from '@nanostores/react'
+import ForgotPassword from './forgot-pass-form'
+import { $router } from '../router'
+import { AuthMethodsList } from 'pocketbase'
+
+export default function () {
+	const page = useStore($router)
+	const [isFirstRun, setFirstRun] = useState(false)
+	const [authMethods, setAuthMethods] = useState<AuthMethodsList>()
+
+	useEffect(() => {
+		document.title = '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 'Please create an admin account'
+		} else if (page?.path === '/forgot-password') {
+			return 'Enter email address to reset password'
+		} else {
+			return 'Please sign in to your account'
+		}
+	}, [isFirstRun, page])
+
+	if (!authMethods) {
+		return null
+	}
+
+	return (
+		<div className="min-h-screen grid items-center py-12">
+			<div className="grid gap-5 w-full px-4 mx-auto" style={{ maxWidth: '22em' }}>
+				<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?.path === '/forgot-password' ? (
+					<ForgotPassword />
+				) : (
+					<UserAuthForm isFirstRun={isFirstRun} authMethods={authMethods} />
+				)}
+			</div>
+		</div>
+	)
+}

hub/site/src/components/logo.tsx

@@ -0,0 +1,8 @@
+export function Logo({ className }: { className?: string }) {
+	return (
+		// Righteous
+		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 283.4 74.1" className={className}>
+			<path 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>
+	)
+}

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

@@ -0,0 +1,31 @@
+import { MoonStarIcon, Sun } from 'lucide-react'
+
+import { Button } from '@/components/ui/button'
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
+import { useTheme } from '@/components/theme-provider'
+
+export function ModeToggle() {
+	const { setTheme } = useTheme()
+
+	return (
+		<DropdownMenu>
+			<DropdownMenuTrigger asChild>
+				<Button variant={'ghost'} size="icon">
+					<Sun className="h-[1.2rem] w-[1.2rem] dark:opacity-0" />
+					<MoonStarIcon className="absolute h-[1.2rem] w-[1.2rem] opacity-0 dark:opacity-100" />
+					<span className="sr-only">Toggle theme</span>
+				</Button>
+			</DropdownMenuTrigger>
+			<DropdownMenuContent>
+				<DropdownMenuItem onClick={() => setTheme('light')}>Light</DropdownMenuItem>
+				<DropdownMenuItem onClick={() => setTheme('dark')}>Dark</DropdownMenuItem>
+				<DropdownMenuItem onClick={() => setTheme('system')}>System</DropdownMenuItem>
+			</DropdownMenuContent>
+		</DropdownMenu>
+	)
+}

hub/site/src/components/router.tsx

@@ -0,0 +1,24 @@
+import { createRouter } from '@nanostores/router'
+
+export const $router = createRouter(
+	{
+		home: '/',
+		server: '/server/:name',
+		'forgot-password': '/forgot-password',
+	},
+	{ links: false }
+)
+
+/** Navigate to url using router */
+export const navigate = (urlString: string) => {
+	$router.open(urlString)
+}
+
+function onClick(e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) {
+	e.preventDefault()
+	$router.open(new URL((e.target as HTMLAnchorElement).href).pathname)
+}
+
+export const Link = (props: React.AnchorHTMLAttributes<HTMLAnchorElement>) => {
+	return <a onClick={onClick} {...props}></a>
+}

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

@@ -0,0 +1,32 @@
+import { Suspense, lazy, useEffect } from 'react'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../ui/card'
+
+const SystemsTable = lazy(() => import('../server-table/systems-table'))
+
+export default function () {
+	useEffect(() => {
+		document.title = 'Dashboard / Beszel'
+	}, [])
+
+	return (
+		<>
+			<Card>
+				<CardHeader>
+					<CardTitle className={'mb-1.5'}>All Systems</CardTitle>
+					<CardDescription>
+						Updated in real time. Press{' '}
+						<kbd className="pointer-events-none inline-flex h-5 select-none items-center gap-0.5 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100">
+							<span className="text-xs">⌘</span>K
+						</kbd>{' '}
+						to open the command palette.
+					</CardDescription>
+				</CardHeader>
+				<CardContent>
+					<Suspense>
+						<SystemsTable />
+					</Suspense>
+				</CardContent>
+			</Card>
+		</>
+	)
+}

hub/site/src/components/routes/server.tsx

@@ -0,0 +1,323 @@
+import { $updatedSystem, $systems, pb, $chartTime } from '@/lib/stores'
+import { ContainerStatsRecord, SystemRecord, SystemStatsRecord } from '@/types'
+import { Suspense, lazy, useCallback, useEffect, useMemo, useState } from 'react'
+import { Card, CardHeader, CardTitle, CardDescription, CardContent } from '../ui/card'
+import { useStore } from '@nanostores/react'
+import Spinner from '../spinner'
+import { ClockArrowUp, CpuIcon, GlobeIcon } from 'lucide-react'
+import ChartTimeSelect from '../charts/chart-time-select'
+import { chartTimeData, cn, getPbTimestamp } from '@/lib/utils'
+import { Separator } from '../ui/separator'
+import { scaleTime } from 'd3-scale'
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../ui/tooltip'
+
+const CpuChart = lazy(() => import('../charts/cpu-chart'))
+const ContainerCpuChart = lazy(() => import('../charts/container-cpu-chart'))
+const MemChart = lazy(() => import('../charts/mem-chart'))
+const ContainerMemChart = lazy(() => import('../charts/container-mem-chart'))
+const DiskChart = lazy(() => import('../charts/disk-chart'))
+const DiskIoChart = lazy(() => import('../charts/disk-io-chart'))
+const BandwidthChart = lazy(() => import('../charts/bandwidth-chart'))
+
+export default function ServerDetail({ name }: { name: string }) {
+	const servers = useStore($systems)
+	const updatedSystem = useStore($updatedSystem)
+	const chartTime = useStore($chartTime)
+	const [ticks, setTicks] = useState([] as number[])
+	const [server, setServer] = useState({} as SystemRecord)
+	const [containers, setContainers] = useState([] as ContainerStatsRecord[])
+
+	const [serverStats, setServerStats] = useState([] as SystemStatsRecord[])
+	const [cpuChartData, setCpuChartData] = useState([] as { time: number; cpu: number }[])
+	const [memChartData, setMemChartData] = useState(
+		[] as { time: number; mem: number; memUsed: number; memCache: number }[]
+	)
+	const [diskChartData, setDiskChartData] = useState(
+		[] as { time: number; disk: number; diskUsed: number }[]
+	)
+	const [diskIoChartData, setDiskIoChartData] = useState(
+		[] as { time: number; read: number; write: number }[]
+	)
+	const [bandwidthChartData, setBandwidthChartData] = useState(
+		[] as { time: number; sent: number; recv: number }[]
+	)
+	const [dockerCpuChartData, setDockerCpuChartData] = useState(
+		[] as Record<string, number | string>[]
+	)
+	const [dockerMemChartData, setDockerMemChartData] = useState(
+		[] as Record<string, number | string>[]
+	)
+
+	useEffect(() => {
+		document.title = `${name} / Beszel`
+		return () => {
+			resetCharts()
+			$chartTime.set('1h')
+		}
+	}, [name])
+
+	const resetCharts = useCallback(() => {
+		setServerStats([])
+		setCpuChartData([])
+		setMemChartData([])
+		setDiskChartData([])
+		setBandwidthChartData([])
+		setDockerCpuChartData([])
+		setDockerMemChartData([])
+	}, [])
+
+	useEffect(resetCharts, [chartTime])
+
+	useEffect(() => {
+		if (server.id && server.name === name) {
+			return
+		}
+		const matchingServer = servers.find((s) => s.name === name) as SystemRecord
+		if (matchingServer) {
+			setServer(matchingServer)
+		}
+	}, [name, server, servers])
+
+	// get stats
+	useEffect(() => {
+		if (!server.id || !chartTime) {
+			return
+		}
+		pb.collection<SystemStatsRecord>('system_stats')
+			.getFullList({
+				filter: pb.filter('system={:id} && created > {:created} && type={:type}', {
+					id: server.id,
+					created: getPbTimestamp(chartTime),
+					type: chartTimeData[chartTime].type,
+				}),
+				fields: 'created,stats',
+				sort: 'created',
+			})
+			.then((records) => {
+				// console.log('sctats', records)
+				setServerStats(records)
+			})
+	}, [server, chartTime])
+
+	useEffect(() => {
+		if (updatedSystem.id === server.id) {
+			setServer(updatedSystem)
+		}
+	}, [updatedSystem])
+
+	// create cpu / mem / disk data for charts
+	useEffect(() => {
+		if (!serverStats.length) {
+			return
+		}
+		const cpuData = [] as typeof cpuChartData
+		const memData = [] as typeof memChartData
+		const diskData = [] as typeof diskChartData
+		const diskIoData = [] as typeof diskIoChartData
+		const networkData = [] as typeof bandwidthChartData
+		for (let { created, stats } of serverStats) {
+			const time = new Date(created).getTime()
+			cpuData.push({ time, cpu: stats.cpu })
+			memData.push({
+				time,
+				mem: stats.m,
+				memUsed: stats.mu,
+				memCache: stats.mb,
+			})
+			diskData.push({ time, disk: stats.d, diskUsed: stats.du })
+			diskIoData.push({ time, read: stats.dr, write: stats.dw })
+			networkData.push({ time, sent: stats.ns, recv: stats.nr })
+		}
+		setCpuChartData(cpuData)
+		setMemChartData(memData)
+		setDiskChartData(diskData)
+		setDiskIoChartData(diskIoData)
+		setBandwidthChartData(networkData)
+	}, [serverStats])
+
+	useEffect(() => {
+		if (!serverStats.length) {
+			return
+		}
+		const now = new Date()
+		const startTime = chartTimeData[chartTime].getOffset(now)
+		const scale = scaleTime([startTime.getTime(), now], [0, cpuChartData.length])
+		setTicks(scale.ticks().map((d) => d.getTime()))
+	}, [chartTime, serverStats])
+
+	// get container stats
+	useEffect(() => {
+		if (!server.id || !chartTime) {
+			return
+		}
+		pb.collection<ContainerStatsRecord>('container_stats')
+			.getFullList({
+				filter: pb.filter('system={:id} && created > {:created} && type={:type}', {
+					id: server.id,
+					created: getPbTimestamp(chartTime),
+					type: chartTimeData[chartTime].type,
+				}),
+				fields: 'created,stats',
+				sort: 'created',
+			})
+			.then((records) => {
+				setContainers(records)
+			})
+	}, [server, chartTime])
+
+	// container stats for charts
+	useEffect(() => {
+		// console.log('containers', containers)
+		const dockerCpuData = [] as Record<string, number | string>[]
+		const dockerMemData = [] as Record<string, number | string>[]
+
+		for (let { created, stats } of containers) {
+			const time = new Date(created).getTime()
+			let cpuData = { time } as (typeof dockerCpuChartData)[0]
+			let memData = { time } as (typeof dockerMemChartData)[0]
+			for (let container of stats) {
+				cpuData[container.n] = container.c
+				memData[container.n] = container.m
+			}
+			dockerCpuData.push(cpuData)
+			dockerMemData.push(memData)
+		}
+		// console.log('containerMemData', containerMemData)
+		setDockerCpuChartData(dockerCpuData)
+		setDockerMemChartData(dockerMemData)
+	}, [containers])
+	const uptime = useMemo(() => {
+		let uptime = server.info?.u || 0
+		if (uptime < 172800) {
+			return `${Math.trunc(uptime / 3600)} hours`
+		}
+		return `${Math.trunc(server.info?.u / 86400)} days`
+	}, [server.info?.u])
+
+	if (!server.id) {
+		return null
+	}
+
+	return (
+		<div className="grid gap-5 mb-10">
+			<Card>
+				<div className="grid gap-1.5 px-6 pt-4 pb-5">
+					<h1 className="text-[1.6rem] font-semibold">{server.name}</h1>
+					<div className="flex flex-wrap items-center gap-3 text-sm opacity-90">
+						<div className="capitalize flex gap-2 items-center">
+							<span className={cn('relative flex h-3 w-3')}>
+								{server.status === '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': server.status === 'up',
+										'bg-red-500': server.status === 'down',
+										'bg-primary/40': server.status === 'paused',
+										'bg-yellow-500': server.status === 'pending',
+									})}
+								></span>
+							</span>
+							{server.status}
+						</div>
+						<Separator orientation="vertical" className="h-4 bg-primary/30" />
+						<div className="flex gap-1.5 items-center">
+							<GlobeIcon className="h-4 w-4" /> {server.host}
+						</div>
+						{server.info?.u && (
+							<TooltipProvider>
+								<Tooltip>
+									<Separator orientation="vertical" className="h-4 bg-primary/30" />
+									<TooltipTrigger asChild>
+										<div className="flex gap-1.5 items-center">
+											<ClockArrowUp className="h-4 w-4" /> {uptime}
+										</div>
+									</TooltipTrigger>
+									<TooltipContent>Uptime</TooltipContent>
+								</Tooltip>
+							</TooltipProvider>
+						)}
+						{server.info?.m && (
+							<>
+								<Separator orientation="vertical" className="h-4 bg-primary/30" />
+								<div className="flex gap-1.5 items-center">
+									<CpuIcon className="h-4 w-4" />
+									{server.info.m} ({server.info.c}c / {server.info.t}t)
+								</div>
+							</>
+						)}
+					</div>
+				</div>
+			</Card>
+
+			<ChartCard
+				title="Total CPU Usage"
+				description="Average system-wide CPU utilization as a percentage"
+			>
+				<CpuChart chartData={cpuChartData} ticks={ticks} />
+			</ChartCard>
+
+			{dockerCpuChartData.length > 0 && (
+				<ChartCard title="Docker CPU Usage" description="CPU utilization of docker containers">
+					<ContainerCpuChart chartData={dockerCpuChartData} ticks={ticks} />
+				</ChartCard>
+			)}
+
+			<ChartCard title="Total Memory Usage" description="Precise utilization at the recorded time">
+				<MemChart chartData={memChartData} ticks={ticks} />
+			</ChartCard>
+
+			{dockerMemChartData.length > 0 && (
+				<ChartCard title="Docker Memory Usage" description="Memory usage of docker containers">
+					<ContainerMemChart chartData={dockerMemChartData} ticks={ticks} />
+				</ChartCard>
+			)}
+
+			<ChartCard
+				title="Disk Usage"
+				description="Usage of partition where the root filesystem is mounted"
+			>
+				<DiskChart chartData={diskChartData} ticks={ticks} />
+			</ChartCard>
+
+			<ChartCard
+				title="Disk I/O"
+				description="Throughput of disk where the root filesystem is mounted"
+			>
+				<DiskIoChart chartData={diskIoChartData} ticks={ticks} />
+			</ChartCard>
+
+			<ChartCard title="Bandwidth" description="Throughput of network interfaces">
+				<BandwidthChart chartData={bandwidthChartData} ticks={ticks} />
+			</ChartCard>
+		</div>
+	)
+}
+
+function ChartCard({
+	title,
+	description,
+	children,
+}: {
+	title: string
+	description: string
+	children: React.ReactNode
+}) {
+	return (
+		<Card className="pb-4 col-span-full">
+			<CardHeader className="pb-5 pt-4">
+				<CardTitle className="flex gap-2 items-center justify-between -mb-1.5">
+					{title}
+					<ChartTimeSelect className="translate-y-1" />
+				</CardTitle>
+				<CardDescription>{description}</CardDescription>
+			</CardHeader>
+			<CardContent className={'pl-1 w-[calc(100%-1.6em)] h-52 relative'}>
+				<Suspense fallback={<Spinner />}>{children}</Suspense>
+			</CardContent>
+		</Card>
+	)
+}

hub/site/src/components/server-table/systems-table.tsx

@@ -0,0 +1,327 @@
+import {
+	CellContext,
+	ColumnDef,
+	ColumnFiltersState,
+	getFilteredRowModel,
+	SortingState,
+	getSortedRowModel,
+	flexRender,
+	getCoreRowModel,
+	useReactTable,
+	Column,
+} from '@tanstack/react-table'
+
+import {
+	Table,
+	TableBody,
+	TableCell,
+	TableHead,
+	TableHeader,
+	TableRow,
+} from '@/components/ui/table'
+
+import { Button, buttonVariants } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuSeparator,
+	DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
+
+import {
+	AlertDialog,
+	AlertDialogAction,
+	AlertDialogCancel,
+	AlertDialogContent,
+	AlertDialogDescription,
+	AlertDialogFooter,
+	AlertDialogHeader,
+	AlertDialogTitle,
+	AlertDialogTrigger,
+} from '@/components/ui/alert-dialog'
+
+import { SystemRecord } from '@/types'
+import {
+	MoreHorizontal,
+	ArrowUpDown,
+	Server,
+	Cpu,
+	MemoryStick,
+	HardDrive,
+	CopyIcon,
+	PauseCircleIcon,
+	PlayCircleIcon,
+	Trash2Icon,
+} from 'lucide-react'
+import { useMemo, useState } from 'react'
+import { $systems, pb } from '@/lib/stores'
+import { useStore } from '@nanostores/react'
+import { AddServerButton } from '../add-server'
+import { cn, copyToClipboard, isReadOnlyUser } from '@/lib/utils'
+import AlertsButton from '../table-alerts'
+import { navigate } from '../router'
+
+function CellFormatter(info: CellContext<SystemRecord, unknown>) {
+	const val = info.getValue() as number
+	return (
+		<div className="flex gap-1 items-center tabular-nums tracking-tight">
+			<span className="min-w-[3.5em]">{val.toFixed(1)}%</span>
+			<span className="grow min-w-10 block bg-muted h-[1em] relative rounded-sm overflow-hidden">
+				<span
+					className={cn(
+						'absolute inset-0 w-full h-full origin-left',
+						(val < 50 && 'bg-green-500') || (val < 80 && 'bg-yellow-500') || 'bg-red-600'
+					)}
+					style={{ transform: `scalex(${val}%)` }}
+				></span>
+			</span>
+		</div>
+	)
+}
+
+function sortableHeader(column: Column<SystemRecord, unknown>, name: string, Icon: any) {
+	return (
+		<Button
+			variant="ghost"
+			className="h-9 px-3"
+			onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
+		>
+			<Icon className="mr-2 h-4 w-4" />
+			{name}
+			<ArrowUpDown className="ml-2 h-4 w-4" />
+		</Button>
+	)
+}
+
+export default function SystemsTable() {
+	const data = useStore($systems)
+	const [sorting, setSorting] = useState<SortingState>([])
+	const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([])
+
+	const columns: ColumnDef<SystemRecord>[] = useMemo(() => {
+		return [
+			{
+				// size: 200,
+				size: 200,
+				minSize: 0,
+				accessorKey: 'name',
+				cell: (info) => {
+					const { status } = info.row.original
+					return (
+						<span className="flex gap-0.5 items-center text-base md:pr-5">
+							<span
+								className={cn('w-2 h-2 left-0 rounded-full', {
+									'bg-green-500': status === 'up',
+									'bg-red-500': status === 'down',
+									'bg-primary/40': status === 'paused',
+									'bg-yellow-500': status === 'pending',
+								})}
+								style={{ marginBottom: '-1px' }}
+							></span>
+							<Button
+								data-nolink
+								variant={'ghost'}
+								className="text-foreground/80 h-7 px-1.5 gap-1.5"
+								onClick={() => copyToClipboard(info.getValue() as string)}
+							>
+								{info.getValue() as string}
+								<CopyIcon className="h-2.5 w-2.5" />
+							</Button>
+						</span>
+					)
+				},
+				header: ({ column }) => sortableHeader(column, 'Server', Server),
+			},
+			{
+				accessorKey: 'info.cpu',
+				cell: CellFormatter,
+				header: ({ column }) => sortableHeader(column, 'CPU', Cpu),
+			},
+			{
+				accessorKey: 'info.mp',
+				cell: CellFormatter,
+				header: ({ column }) => sortableHeader(column, 'Memory', MemoryStick),
+			},
+			{
+				accessorKey: 'info.dp',
+				cell: CellFormatter,
+				header: ({ column }) => sortableHeader(column, 'Disk', HardDrive),
+			},
+			{
+				id: 'actions',
+				size: 120,
+				// minSize: 0,
+				cell: ({ row }) => {
+					const { id, name, status, host } = row.original
+					return (
+						<div className={'flex justify-end items-center gap-1'}>
+							<AlertsButton system={row.original} />
+							<AlertDialog>
+								<DropdownMenu>
+									<DropdownMenuTrigger asChild>
+										<Button variant="ghost" size={'icon'} data-nolink>
+											<span className="sr-only">Open menu</span>
+											<MoreHorizontal className="w-5" />
+										</Button>
+									</DropdownMenuTrigger>
+									<DropdownMenuContent align="end">
+										<DropdownMenuItem
+											className={cn(isReadOnlyUser() && 'hidden')}
+											onClick={() => {
+												pb.collection('systems').update(id, {
+													status: status === 'paused' ? 'pending' : 'paused',
+												})
+											}}
+										>
+											{status === 'paused' ? (
+												<>
+													<PlayCircleIcon className="mr-2.5 h-4 w-4" />
+													Resume
+												</>
+											) : (
+												<>
+													<PauseCircleIcon className="mr-2.5 h-4 w-4" />
+													Pause
+												</>
+											)}
+										</DropdownMenuItem>
+										<DropdownMenuItem onClick={() => copyToClipboard(host)}>
+											<CopyIcon className="mr-2.5 h-4 w-4" />
+											Copy host
+										</DropdownMenuItem>
+										<DropdownMenuSeparator className={cn(isReadOnlyUser() && 'hidden')} />
+										<AlertDialogTrigger asChild>
+											<DropdownMenuItem className={cn(isReadOnlyUser() && 'hidden')}>
+												<Trash2Icon className="mr-2.5 h-4 w-4" />
+												Delete
+											</DropdownMenuItem>
+										</AlertDialogTrigger>
+									</DropdownMenuContent>
+								</DropdownMenu>
+								<AlertDialogContent>
+									<AlertDialogHeader>
+										<AlertDialogTitle>Are you sure you want to delete {name}?</AlertDialogTitle>
+										<AlertDialogDescription>
+											This action cannot be undone. This will permanently delete all current records
+											for <code className={'bg-muted rounded-sm px-1'}>{name}</code> from the
+											database.
+										</AlertDialogDescription>
+									</AlertDialogHeader>
+									<AlertDialogFooter>
+										<AlertDialogCancel>Cancel</AlertDialogCancel>
+										<AlertDialogAction
+											className={cn(buttonVariants({ variant: 'destructive' }))}
+											onClick={() => pb.collection('systems').delete(id)}
+										>
+											Continue
+										</AlertDialogAction>
+									</AlertDialogFooter>
+								</AlertDialogContent>
+							</AlertDialog>
+						</div>
+					)
+				},
+			},
+		]
+	}, [])
+
+	const table = useReactTable({
+		data,
+		columns,
+		getCoreRowModel: getCoreRowModel(),
+		onSortingChange: setSorting,
+		getSortedRowModel: getSortedRowModel(),
+		onColumnFiltersChange: setColumnFilters,
+		getFilteredRowModel: getFilteredRowModel(),
+		state: {
+			sorting,
+			columnFilters,
+		},
+		defaultColumn: {
+			minSize: 0,
+			size: Number.MAX_SAFE_INTEGER,
+			maxSize: Number.MAX_SAFE_INTEGER,
+		},
+	})
+
+	return (
+		<>
+			<div className="w-full">
+				<div className="flex items-center mb-4 gap-2">
+					<Input
+						// @ts-ignore
+						placeholder="Filter..."
+						value={(table.getColumn('name')?.getFilterValue() as string) ?? ''}
+						onChange={(event) => table.getColumn('name')?.setFilterValue(event.target.value)}
+						className="max-w-sm"
+					/>
+					<div className={cn('ml-auto flex gap-2', isReadOnlyUser() && 'hidden')}>
+						<AddServerButton />
+					</div>
+				</div>
+				<div className="rounded-md border overflow-hidden">
+					<Table>
+						<TableHeader className="bg-muted/40">
+							{table.getHeaderGroups().map((headerGroup) => (
+								<TableRow key={headerGroup.id}>
+									{headerGroup.headers.map((header) => {
+										return (
+											<TableHead className="px-2" key={header.id}>
+												{header.isPlaceholder
+													? null
+													: flexRender(header.column.columnDef.header, header.getContext())}
+											</TableHead>
+										)
+									})}
+								</TableRow>
+							))}
+						</TableHeader>
+						<TableBody>
+							{table.getRowModel().rows?.length ? (
+								table.getRowModel().rows.map((row) => (
+									<TableRow
+										key={row.original.id}
+										data-state={row.getIsSelected() && 'selected'}
+										className={cn('cursor-pointer transition-opacity', {
+											'opacity-50': row.original.status === 'paused',
+										})}
+										onClick={(e) => {
+											const target = e.target as HTMLElement
+											if (!target.closest('[data-nolink]') && e.currentTarget.contains(target)) {
+												navigate(`/server/${row.original.name}`)
+											}
+										}}
+									>
+										{row.getVisibleCells().map((cell) => (
+											<TableCell
+												key={cell.id}
+												style={{
+													width:
+														cell.column.getSize() === Number.MAX_SAFE_INTEGER
+															? 'auto'
+															: cell.column.getSize(),
+												}}
+												className={'overflow-hidden relative py-3'}
+											>
+												{flexRender(cell.column.columnDef.cell, cell.getContext())}
+											</TableCell>
+										))}
+									</TableRow>
+								))
+							) : (
+								<TableRow>
+									<TableCell colSpan={columns.length} className="h-24 text-center">
+										No servers found
+									</TableCell>
+								</TableRow>
+							)}
+						</TableBody>
+					</Table>
+				</div>
+			</div>
+		</>
+	)
+}

hub/site/src/components/spinner.tsx

@@ -0,0 +1,9 @@
+import { LoaderCircleIcon } from 'lucide-react'
+
+export default function () {
+	return (
+		<div className="grid place-content-center h-full absolute inset-0">
+			<LoaderCircleIcon className="animate-spin h-10 w-10 opacity-60" />
+		</div>
+	)
+}

hub/site/src/components/table-alerts.tsx

@@ -0,0 +1,120 @@
+import { $alerts, pb } from '@/lib/stores'
+import { useStore } from '@nanostores/react'
+import {
+	Dialog,
+	DialogTrigger,
+	DialogContent,
+	DialogDescription,
+	DialogHeader,
+	DialogTitle,
+} from '@/components/ui/dialog'
+import { BellIcon } from 'lucide-react'
+import { cn, isAdmin } from '@/lib/utils'
+import { Button } from '@/components/ui/button'
+import { Switch } from '@/components/ui/switch'
+import { AlertRecord, SystemRecord } from '@/types'
+import { useMemo, useState } from 'react'
+import { toast } from './ui/use-toast'
+
+export default function AlertsButton({ system }: { system: SystemRecord }) {
+	const alerts = useStore($alerts)
+
+	const active = useMemo(() => {
+		return alerts.find((alert) => alert.system === system.id)
+	}, [alerts, system])
+
+	const systemAlerts = useMemo(() => {
+		return alerts.filter((alert) => alert.system === system.id) as AlertRecord[]
+	}, [alerts, system])
+
+	return (
+		<Dialog>
+			<DialogTrigger asChild>
+				<Button variant="ghost" size={'icon'} aria-label="Alerts" data-nolink>
+					<BellIcon
+						className={cn('h-[1.2em] w-[1.2em] pointer-events-none', {
+							'fill-foreground': active,
+						})}
+					/>
+				</Button>
+			</DialogTrigger>
+			<DialogContent>
+				<DialogHeader>
+					<DialogTitle className="mb-1">Alerts for {system.name}</DialogTitle>
+					<DialogDescription>
+						{isAdmin() && (
+							<span>
+								Please{' '}
+								<a
+									href="/_/#/settings/mail"
+									className="font-medium text-primary opacity-80 hover:opacity-100 duration-100"
+								>
+									configure an SMTP server
+								</a>{' '}
+								to ensure alerts are delivered.{' '}
+							</span>
+						)}
+						Webhook delivery and more alert options will be added in the future.
+					</DialogDescription>
+				</DialogHeader>
+				<Alert system={system} alerts={systemAlerts} />
+			</DialogContent>
+		</Dialog>
+	)
+}
+
+function Alert({ system, alerts }: { system: SystemRecord; alerts: AlertRecord[] }) {
+	const [pendingChange, setPendingChange] = useState(false)
+
+	const alert = useMemo(() => {
+		return alerts.find((alert) => alert.name === 'status')
+	}, [alerts])
+
+	return (
+		<label
+			htmlFor="status"
+			className="space-y-2 flex flex-row items-center justify-between rounded-lg border p-4 cursor-pointer"
+		>
+			<div className="grid gap-0.5 select-none">
+				<p className="font-medium text-base">System status</p>
+				<span
+					id=":r3m:-form-item-description"
+					className="block text-[0.8rem] text-foreground opacity-80"
+				>
+					Triggers when status switches between up and down.
+				</span>
+			</div>
+			<Switch
+				id="status"
+				className={cn('transition-opacity', pendingChange && 'opacity-40')}
+				checked={!!alert}
+				value={!!alert ? 'on' : 'off'}
+				onCheckedChange={async (active) => {
+					if (pendingChange) {
+						return
+					}
+					setPendingChange(true)
+					try {
+						if (!active && alert) {
+							await pb.collection('alerts').delete(alert.id)
+						} else if (active) {
+							pb.collection('alerts').create({
+								system: system.id,
+								user: pb.authStore.model!.id,
+								name: 'status',
+							})
+						}
+					} catch (e) {
+						toast({
+							title: 'Failed to update alert',
+							description: 'Please check logs for more details.',
+							variant: 'destructive',
+						})
+					} finally {
+						setPendingChange(false)
+					}
+				}}
+			/>
+		</label>
+	)
+}

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

@@ -0,0 +1,65 @@
+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)

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

@@ -0,0 +1,115 @@
+import * as React from 'react'
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog'
+
+import { cn } from '@/lib/utils'
+import { buttonVariants } from '@/components/ui/button'
+
+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/50  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-background 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-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 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('flex flex-col space-y-2 text-center sm:text-left', 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:space-x-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,
+}

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

@@ -0,0 +1,49 @@
+import * as React from 'react'
+import { Slot } from '@radix-ui/react-slot'
+import { cva, type VariantProps } from 'class-variance-authority'
+
+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-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+	{
+		variants: {
+			variant: {
+				default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+				destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+				outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+				secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+				ghost: 'hover:bg-accent 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 }

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

@@ -0,0 +1,79 @@
+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 bg-card text-card-foreground shadow-sm",
+      className
+    )}
+    {...props}
+  />
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-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 }

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

@@ -0,0 +1,335 @@
+import * as React from 'react'
+import * as RechartsPrimitive from 'recharts'
+
+import { cn } from '@/lib/utils'
+
+// 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, config, ...props }, ref) => {
+	const uniqueId = React.useId()
+	const chartId = `chart-${id || uniqueId.replace(/:/g, '')}`
+
+	return (
+		<ChartContext.Provider value={{ config }}>
+			<div
+				data-chart={chartId}
+				ref={ref}
+				className={cn(
+					"flex aspect-video justify-center 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-none [&_.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-none [&_.recharts-surface]:outline-none",
+					className
+				)}
+				{...props}
+			>
+				<ChartStyle id={chartId} config={config} />
+				<RechartsPrimitive.ResponsiveContainer>{children}</RechartsPrimitive.ResponsiveContainer>
+			</div>
+		</ChartContext.Provider>
+	)
+})
+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
+			hideIndicator?: boolean
+			indicator?: 'line' | 'dot' | 'dashed'
+			nameKey?: string
+			labelKey?: string
+			unit?: string
+		}
+>(
+	(
+		{
+			active,
+			payload,
+			className,
+			indicator = 'dot',
+			hideLabel = false,
+			hideIndicator = false,
+			label,
+			labelFormatter,
+			labelClassName,
+			formatter,
+			color,
+			nameKey,
+			labelKey,
+			unit,
+			itemSorter,
+		},
+		ref
+	) => {
+		const { config } = useChart()
+
+		React.useMemo(() => {
+			if (itemSorter) {
+				// @ts-ignore
+				payload?.sort(itemSorter)
+			}
+		}, [itemSorter, payload])
+
+		const tooltipLabel = React.useMemo(() => {
+			if (hideLabel || !payload?.length) {
+				return null
+			}
+
+			const [item] = payload
+			const key = `${labelKey || item.dataKey || item.name || 'value'}`
+			const itemConfig = getPayloadConfigFromPayload(config, item, key)
+			const value =
+				!labelKey && typeof label === 'string'
+					? config[label as keyof typeof config]?.label || 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'
+
+		return (
+			<div
+				ref={ref}
+				className={cn(
+					'grid min-w-[7rem] 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.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 />
+										) : (
+											!hideIndicator && (
+												<div
+													className={cn(
+														'shrink-0 rounded-[2px] border-[--color-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'
+											)}
+										>
+											<div className="grid gap-1.5">
+												{nestLabel ? tooltipLabel : null}
+												<span className="text-muted-foreground">
+													{itemConfig?.label || item.name}
+												</span>
+											</div>
+											{item.value !== undefined && (
+												<span className="font-mono font-medium tabular-nums text-foreground">
+													{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, hideIcon = false, payload, verticalAlign = 'bottom', nameKey }, ref) => {
+	const { config } = useChart()
+
+	if (!payload?.length) {
+		return null
+	}
+
+	return (
+		<div
+			ref={ref}
+			className={cn(
+				'flex items-center justify-center gap-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'
+						)}
+					>
+						{itemConfig?.icon && !hideIcon ? (
+							<itemConfig.icon />
+						) : (
+							<div
+								className="h-2 w-2 shrink-0 rounded-[2px]"
+								style={{
+									backgroundColor: item.color,
+								}}
+							/>
+						)}
+						{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]
+}
+
+export {
+	ChartContainer,
+	ChartTooltip,
+	ChartTooltipContent,
+	ChartLegend,
+	ChartLegendContent,
+	ChartStyle,
+}

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

@@ -0,0 +1,146 @@
+import * as React from 'react'
+import { DialogTitle, type DialogProps } from '@radix-ui/react-dialog'
+import { Command as CommandPrimitive } from 'cmdk'
+import { Search } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+import { Dialog, DialogContent } from '@/components/ui/dialog'
+
+const Command = React.forwardRef<
+	React.ElementRef<typeof CommandPrimitive>,
+	React.ComponentPropsWithoutRef<typeof CommandPrimitive>
+>(({ className, ...props }, ref) => (
+	<CommandPrimitive
+		ref={ref}
+		className={cn(
+			'flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground',
+			className
+		)}
+		{...props}
+	/>
+))
+Command.displayName = CommandPrimitive.displayName
+
+interface CommandDialogProps extends DialogProps {}
+
+const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
+	return (
+		<Dialog {...props}>
+			<DialogContent className="overflow-hidden p-0 shadow-lg">
+				<div className="sr-only">
+					<DialogTitle>Command</DialogTitle>
+				</div>
+				<Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[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>
+	)
+}
+
+const CommandInput = React.forwardRef<
+	React.ElementRef<typeof CommandPrimitive.Input>,
+	React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
+>(({ className, ...props }, ref) => (
+	<div className="flex items-center border-b px-3" cmdk-input-wrapper="">
+		<Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+		<CommandPrimitive.Input
+			ref={ref}
+			className={cn(
+				'flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',
+				className
+			)}
+			{...props}
+		/>
+	</div>
+))
+
+CommandInput.displayName = CommandPrimitive.Input.displayName
+
+const CommandList = React.forwardRef<
+	React.ElementRef<typeof CommandPrimitive.List>,
+	React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
+>(({ className, ...props }, ref) => (
+	<CommandPrimitive.List
+		ref={ref}
+		className={cn('max-h-[300px] overflow-y-auto overflow-x-hidden', className)}
+		{...props}
+	/>
+))
+
+CommandList.displayName = CommandPrimitive.List.displayName
+
+const CommandEmpty = React.forwardRef<
+	React.ElementRef<typeof CommandPrimitive.Empty>,
+	React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
+>((props, ref) => (
+	<CommandPrimitive.Empty ref={ref} className="py-6 text-center text-sm" {...props} />
+))
+
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName
+
+const CommandGroup = React.forwardRef<
+	React.ElementRef<typeof CommandPrimitive.Group>,
+	React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
+>(({ className, ...props }, ref) => (
+	<CommandPrimitive.Group
+		ref={ref}
+		className={cn(
+			'overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground',
+			className
+		)}
+		{...props}
+	/>
+))
+
+CommandGroup.displayName = CommandPrimitive.Group.displayName
+
+const CommandSeparator = React.forwardRef<
+	React.ElementRef<typeof CommandPrimitive.Separator>,
+	React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+	<CommandPrimitive.Separator
+		ref={ref}
+		className={cn('-mx-1 h-px bg-border', className)}
+		{...props}
+	/>
+))
+CommandSeparator.displayName = CommandPrimitive.Separator.displayName
+
+const CommandItem = React.forwardRef<
+	React.ElementRef<typeof CommandPrimitive.Item>,
+	React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
+>(({ className, ...props }, ref) => (
+	<CommandPrimitive.Item
+		ref={ref}
+		className={cn(
+			"relative flex cursor-default opacity-70 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:opacity-90 data-[disabled='true']:pointer-events-none data-[disabled='true']:opacity-50",
+			className
+		)}
+		{...props}
+	/>
+))
+
+CommandItem.displayName = CommandPrimitive.Item.displayName
+
+const CommandShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
+	return (
+		<span
+			className={cn('ml-auto text-xs tracking-wide text-muted-foreground', className)}
+			{...props}
+		/>
+	)
+}
+CommandShortcut.displayName = 'CommandShortcut'
+
+export {
+	Command,
+	CommandDialog,
+	CommandInput,
+	CommandList,
+	CommandEmpty,
+	CommandGroup,
+	CommandItem,
+	CommandShortcut,
+	CommandSeparator,
+}

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

@@ -0,0 +1,102 @@
+import * as React from 'react'
+import * as DialogPrimitive from '@radix-ui/react-dialog'
+import { X } from 'lucide-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/50  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-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
+				className
+			)}
+			{...props}
+		>
+			{children}
+			<DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none 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('flex flex-col space-y-1.5 text-center sm:text-left', 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:space-x-2', 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,
+}

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

@@ -0,0 +1,198 @@
+import * as React from "react"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import { Check, ChevronRight, Circle } from "lucide-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 cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-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-[8rem] 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-[8rem] 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(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      inset && "pl-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-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent 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-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent 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 py-1.5 text-sm font-semibold",
+      inset && "pl-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("ml-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,
+}

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

@@ -0,0 +1,25 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          "flex h-10 w-full rounded-md border border-input 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-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Input.displayName = "Input"
+
+export { Input }

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

@@ -0,0 +1,24 @@
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { cva, type VariantProps } from "class-variance-authority"
+
+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 }

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

@@ -0,0 +1,158 @@
+import * as React from "react"
+import * as SelectPrimitive from "@radix-ui/react-select"
+import { Check, ChevronDown, ChevronUp } from "lucide-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 border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none 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-[8rem] 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-[var(--radix-select-trigger-height)] w-full min-w-[var(--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 pl-8 pr-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 pl-8 pr-2 text-sm outline-none focus:bg-accent 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,
+}

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

@@ -0,0 +1,29 @@
+import * as React from "react"
+import * as SeparatorPrimitive from "@radix-ui/react-separator"
+
+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-[1px] w-full" : "h-full w-[1px]",
+        className
+      )}
+      {...props}
+    />
+  )
+)
+Separator.displayName = SeparatorPrimitive.Root.displayName
+
+export { Separator }

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

@@ -0,0 +1,27 @@
+import * as React from "react"
+import * as SwitchPrimitives from "@radix-ui/react-switch"
+
+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-none 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=unchecked]:translate-x-0"
+      )}
+    />
+  </SwitchPrimitives.Root>
+))
+Switch.displayName = SwitchPrimitives.Root.displayName
+
+export { Switch }

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

@@ -0,0 +1,117 @@
+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("[&_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 [&>tr]:last: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 transition-colors hover:bg-muted/50 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-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-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])]:pr-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,
+}

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

@@ -0,0 +1,127 @@
+import * as React from "react"
+import * as ToastPrimitives from "@radix-ui/react-toast"
+import { cva, type VariantProps } from "class-variance-authority"
+import { X } from "lucide-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-screen 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 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--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 data-[state=open]:sm: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-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus: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-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus: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,
+}

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

@@ -0,0 +1,33 @@
+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(function ({ id, title, description, action, ...props }) {
+        return (
+          <Toast key={id} {...props}>
+            <div className="grid gap-1">
+              {title && <ToastTitle>{title}</ToastTitle>}
+              {description && (
+                <ToastDescription>{description}</ToastDescription>
+              )}
+            </div>
+            {action}
+            <ToastClose />
+          </Toast>
+        )
+      })}
+      <ToastViewport />
+    </ToastProvider>
+  )
+}

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

@@ -0,0 +1,28 @@
+import * as React from 'react'
+import * as TooltipPrimitive from '@radix-ui/react-tooltip'
+
+import { cn } from '@/lib/utils'
+
+const TooltipProvider = TooltipPrimitive.Provider
+
+const Tooltip = TooltipPrimitive.Root
+
+const TooltipTrigger = TooltipPrimitive.Trigger
+
+const TooltipContent = React.forwardRef<
+	React.ElementRef<typeof TooltipPrimitive.Content>,
+	React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+	<TooltipPrimitive.Content
+		ref={ref}
+		sideOffset={sideOffset}
+		className={cn(
+			'z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md 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',
+			className
+		)}
+		{...props}
+	/>
+))
+TooltipContent.displayName = TooltipPrimitive.Content.displayName
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

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

@@ -0,0 +1,192 @@
+// 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 }

hub/site/src/index.css

@@ -0,0 +1,91 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+@layer base {
+	:root {
+		--background: 30 8% 98.5%;
+		--foreground: 30 0% 0%;
+		--card: 30 0% 100%;
+		--card-foreground: 240 6.67% 2.94%;
+		--popover: 30 0% 100%;
+		--popover-foreground: 240 10% 6.2%;
+		--primary: 240 5.88% 10%;
+		--primary-foreground: 30 0% 100%;
+		--secondary: 240 4.76% 95.88%;
+		--secondary-foreground: 240 5.88% 10%;
+		--muted: 26 6% 94%;
+		--muted-foreground: 24 2.79% 35.1%;
+		--accent: 20 23.08% 94%;
+		--accent-foreground: 240 5.88% 10%;
+		--destructive: 0 66% 53%;
+		--destructive-foreground: 0 0% 98.04%;
+		--border: 30 8.11% 85.49%;
+		--input: 30 4.29% 72.55%;
+		--ring: 30 3.97% 49.41%;
+		--radius: 0.8rem;
+	}
+
+	.dark {
+		--background: 240 10% 6.2%;
+		--foreground: 0 0% 98.04%;
+		--card: 240 8.57% 8%;
+		--card-foreground: 0 0% 98.04%;
+		--popover: 240 10% 6.2%;
+		--popover-foreground: 0 0% 98.04%;
+		--primary: 0 0% 98.04%;
+		--primary-foreground: 240 5.88% 10%;
+		--secondary: 240 3.7% 15.88%;
+		--secondary-foreground: 0 0% 98.04%;
+		--muted: 240 3.7% 15.88%;
+		--muted-foreground: 240 5.03% 64.9%;
+		--accent: 240 3.7% 15.88%;
+		--accent-foreground: 0 0% 98.04%;
+		--destructive: 0 56.48% 42.35%;
+		--destructive-foreground: 0 0% 98.04%;
+		--border: 240 2.86% 12%;
+		--input: 240 3.7% 15.88%;
+		--ring: 240 4.88% 86%;
+		--radius: 0.8rem;
+	}
+}
+
+@layer base {
+	* {
+		@apply border-border;
+	}
+	body {
+		@apply bg-background text-foreground;
+	}
+}
+
+.recharts-tooltip-wrapper {
+	z-index: 1;
+}
+
+.recharts-yAxis {
+	font-variant-numeric: tabular-nums;
+}
+
+/* charts */
+@layer base {
+	:root {
+		/* --chart-1: 12 76% 61%;
+		--chart-2: 173 58% 39%;
+		--chart-3: 197 37% 24%;
+		--chart-4: 43 74% 66%;
+		--chart-5: 27 87% 67%; */
+		--chart-1: 220 70% 50%;
+		--chart-2: 160 60% 45%;
+		--chart-3: 30 80% 55%;
+		--chart-4: 280 65% 60%;
+		--chart-5: 340 75% 55%;
+	}
+	/* 
+	.dark {
+		--chart-1: 220 70% 50%;
+		--chart-2: 160 60% 45%;
+		--chart-3: 30 80% 55%;
+		--chart-4: 280 65% 60%;
+		--chart-5: 340 75% 55%;
+	} */
+}

hub/site/src/lib/stores.ts

@@ -0,0 +1,24 @@
+import PocketBase from 'pocketbase'
+import { atom, WritableAtom } from 'nanostores'
+import { AlertRecord, ChartTimes, SystemRecord } from '@/types'
+
+/** PocketBase JS Client */
+export const pb = new PocketBase('/')
+
+/** Store if user is authenticated */
+export const $authenticated = atom(pb.authStore.isValid)
+
+/** List of system records */
+export const $systems = atom([] as SystemRecord[])
+
+/** Last updated system record (realtime) */
+export const $updatedSystem = atom({} as SystemRecord)
+
+/** List of alert records */
+export const $alerts = atom([] as AlertRecord[])
+
+/** SSH public key */
+export const $publicKey = atom('')
+
+/** Chart time period */
+export const $chartTime = atom('1h') as WritableAtom<ChartTimes>

hub/site/src/lib/utils.ts

@@ -0,0 +1,155 @@
+import { toast } from '@/components/ui/use-toast'
+import { type ClassValue, clsx } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+import { $alerts, $systems, pb } from './stores'
+import { AlertRecord, ChartTimes, SystemRecord } from '@/types'
+import { RecordModel, RecordSubscription } from 'pocketbase'
+import { WritableAtom } from 'nanostores'
+import { timeDay, timeHour } from 'd3-time'
+
+export function cn(...inputs: ClassValue[]) {
+	return twMerge(clsx(inputs))
+}
+
+export async function copyToClipboard(content: string) {
+	const duration = 1500
+	try {
+		await navigator.clipboard.writeText(content)
+		toast({
+			duration,
+			description: 'Copied to clipboard',
+		})
+	} catch (e: any) {
+		toast({
+			duration,
+			description: 'Failed to copy',
+		})
+	}
+}
+
+export const updateServerList = () => {
+	pb.collection<SystemRecord>('systems')
+		.getFullList({ sort: '+name' })
+		.then((records) => {
+			$systems.set(records)
+		})
+}
+
+export const updateAlerts = () => {
+	pb.collection('alerts')
+		.getFullList<AlertRecord>({ fields: 'id,name,system' })
+		.then((records) => {
+			$alerts.set(records)
+		})
+}
+
+const hourWithMinutesFormatter = new Intl.DateTimeFormat(undefined, {
+	hour: 'numeric',
+	minute: 'numeric',
+})
+export const hourWithMinutes = (timestamp: string) => {
+	return hourWithMinutesFormatter.format(new Date(timestamp))
+}
+
+const shortDateFormatter = new Intl.DateTimeFormat(undefined, {
+	day: 'numeric',
+	month: 'short',
+	hour: 'numeric',
+	minute: 'numeric',
+})
+export const formatShortDate = (timestamp: string) => {
+	// console.log('ts', timestamp)
+	return shortDateFormatter.format(new Date(timestamp))
+}
+
+const dayFormatter = new Intl.DateTimeFormat(undefined, {
+	day: 'numeric',
+	month: 'long',
+	// dateStyle: 'medium',
+})
+export const formatDay = (timestamp: string) => {
+	// console.log('ts', timestamp)
+	return dayFormatter.format(new Date(timestamp))
+}
+
+export const updateFavicon = (newIcon: string) =>
+	((document.querySelector("link[rel='icon']") as HTMLLinkElement).href = `/static/${newIcon}`)
+
+export const isAdmin = () => pb.authStore.model?.role === 'admin'
+export const isReadOnlyUser = () => pb.authStore.model?.role === 'readonly'
+// export const isDefaultUser = () => pb.authStore.model?.role === 'user'
+
+/** Update systems / alerts list when records change  */
+export function updateRecordList<T extends RecordModel>(
+	e: RecordSubscription<T>,
+	$store: WritableAtom<T[]>
+) {
+	const curRecords = $store.get()
+	const newRecords = []
+	// console.log('e', e)
+	if (e.action === 'delete') {
+		for (const server of curRecords) {
+			if (server.id !== e.record.id) {
+				newRecords.push(server)
+			}
+		}
+	} else {
+		let found = 0
+		for (const server of curRecords) {
+			if (server.id === e.record.id) {
+				found = newRecords.push(e.record)
+			} else {
+				newRecords.push(server)
+			}
+		}
+		if (!found) {
+			newRecords.push(e.record)
+		}
+	}
+	$store.set(newRecords)
+}
+
+export function getPbTimestamp(timeString: ChartTimes) {
+	const d = chartTimeData[timeString].getOffset(new Date())
+	const year = d.getUTCFullYear()
+	const month = String(d.getUTCMonth() + 1).padStart(2, '0')
+	const day = String(d.getUTCDate()).padStart(2, '0')
+	const hours = String(d.getUTCHours()).padStart(2, '0')
+	const minutes = String(d.getUTCMinutes()).padStart(2, '0')
+	const seconds = String(d.getUTCSeconds()).padStart(2, '0')
+
+	return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
+}
+
+export const chartTimeData = {
+	'1h': {
+		type: '1m',
+		label: '1 hour',
+		format: (timestamp: string) => hourWithMinutes(timestamp),
+		getOffset: (endTime: Date) => timeHour.offset(endTime, -1),
+	},
+	'12h': {
+		type: '10m',
+		label: '12 hours',
+		format: (timestamp: string) => hourWithMinutes(timestamp),
+		getOffset: (endTime: Date) => timeHour.offset(endTime, -12),
+	},
+	'24h': {
+		type: '20m',
+		label: '24 hours',
+		format: (timestamp: string) => hourWithMinutes(timestamp),
+		getOffset: (endTime: Date) => timeHour.offset(endTime, -24),
+	},
+	'1w': {
+		type: '120m',
+		label: '1 week',
+		format: (timestamp: string) => formatDay(timestamp),
+		getOffset: (endTime: Date) => timeDay.offset(endTime, -7),
+	},
+	'30d': {
+		type: '480m',
+		label: '30 days',
+		format: (timestamp: string) => formatDay(timestamp),
+		getOffset: (endTime: Date) => timeDay.offset(endTime, -30),
+	},
+}

hub/site/src/main.tsx

@@ -0,0 +1,233 @@
+import './index.css'
+import React, { Suspense, lazy, useEffect } from 'react'
+import ReactDOM from 'react-dom/client'
+import Home from './components/routes/home.tsx'
+import { ThemeProvider } from './components/theme-provider.tsx'
+import { $alerts, $authenticated, $updatedSystem, $systems, pb } from './lib/stores.ts'
+import { ModeToggle } from './components/mode-toggle.tsx'
+import {
+	cn,
+	isAdmin,
+	updateAlerts,
+	updateFavicon,
+	updateRecordList,
+	updateServerList,
+} from './lib/utils.ts'
+import { buttonVariants } from './components/ui/button.tsx'
+import {
+	DatabaseBackupIcon,
+	GithubIcon,
+	LockKeyholeIcon,
+	LogOutIcon,
+	LogsIcon,
+	ServerIcon,
+	UserIcon,
+	UsersIcon,
+} from 'lucide-react'
+import { useStore } from '@nanostores/react'
+import { Toaster } from './components/ui/toaster.tsx'
+import { Logo } from './components/logo.tsx'
+import {
+	TooltipProvider,
+	Tooltip,
+	TooltipTrigger,
+	TooltipContent,
+} from '@/components/ui/tooltip.tsx'
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuGroup,
+	DropdownMenuItem,
+	DropdownMenuSeparator,
+	DropdownMenuTrigger,
+	DropdownMenuLabel,
+} from './components/ui/dropdown-menu.tsx'
+import { AlertRecord, SystemRecord } from './types'
+import { $router, Link, navigate } from './components/router.tsx'
+import ServerDetail from './components/routes/server.tsx'
+
+// const ServerDetail = lazy(() => import('./components/routes/server.tsx'))
+const CommandPalette = lazy(() => import('./components/command-palette.tsx'))
+const LoginPage = lazy(() => import('./components/login/login.tsx'))
+
+const App = () => {
+	const page = useStore($router)
+	const authenticated = useStore($authenticated)
+	const servers = useStore($systems)
+
+	useEffect(() => {
+		// change auth store on auth change
+		pb.authStore.onChange(() => {
+			$authenticated.set(pb.authStore.isValid)
+		})
+		// get servers / alerts
+		updateServerList()
+		updateAlerts()
+		// subscribe to real time updates for systems / alerts
+		pb.collection<SystemRecord>('systems').subscribe('*', (e) => {
+			updateRecordList(e, $systems)
+			$updatedSystem.set(e.record)
+		})
+		pb.collection<AlertRecord>('alerts').subscribe('*', (e) => {
+			updateRecordList(e, $alerts)
+		})
+		return () => {
+			pb.collection('systems').unsubscribe('*')
+			pb.collection('alerts').unsubscribe('*')
+		}
+	}, [])
+
+	// update favicon
+	useEffect(() => {
+		if (!authenticated || !servers.length) {
+			updateFavicon('favicon.svg')
+		} else {
+			let up = false
+			for (const server of servers) {
+				if (server.status === 'down') {
+					updateFavicon('favicon-red.svg')
+					return () => updateFavicon('favicon.svg')
+				} else if (server.status === 'up') {
+					up = true
+				}
+			}
+			updateFavicon(up ? 'favicon-green.svg' : 'favicon.svg')
+			return () => updateFavicon('favicon.svg')
+		}
+		return () => {
+			updateFavicon('favicon.svg')
+		}
+	}, [authenticated, servers])
+
+	if (!page) {
+		return <h1 className="text-3xl text-center my-14">404</h1>
+	} else if (page.path === '/') {
+		return <Home />
+	} else if (page.route === 'server') {
+		return <ServerDetail name={page.params.name} />
+	}
+}
+
+const Layout = () => {
+	const authenticated = useStore($authenticated)
+
+	if (!authenticated) {
+		return (
+			<Suspense>
+				<LoginPage />
+			</Suspense>
+		)
+	}
+
+	return (
+		<>
+			<div className="container">
+				<div className="flex items-center h-16 bg-card px-6 border bt-0 rounded-md my-5">
+					<Link
+						href="/"
+						aria-label="Home"
+						className={'p-2 pl-0'}
+						onClick={(e) => {
+							e.preventDefault()
+							navigate('/')
+						}}
+					>
+						<Logo className="h-[1.2em] fill-foreground" />
+					</Link>
+
+					<div className={'flex ml-auto'}>
+						<ModeToggle />
+						<TooltipProvider delayDuration={300}>
+							<Tooltip>
+								<TooltipTrigger asChild>
+									<a
+										title={'Github'}
+										aria-label="Github repo"
+										href={'https://github.com/henrygd'}
+										className={cn('', buttonVariants({ variant: 'ghost', size: 'icon' }))}
+									>
+										<GithubIcon className="h-[1.2rem] w-[1.2rem]" />
+									</a>
+								</TooltipTrigger>
+								<TooltipContent>
+									<p>Github Repository</p>
+								</TooltipContent>
+							</Tooltip>
+						</TooltipProvider>
+						<DropdownMenu>
+							<DropdownMenuTrigger asChild>
+								<a
+									aria-label="User Actions"
+									href={'https://github.com/henrygd'}
+									className={cn('', buttonVariants({ variant: 'ghost', size: 'icon' }))}
+								>
+									<UserIcon className="h-[1.2rem] w-[1.2rem]" />
+								</a>
+							</DropdownMenuTrigger>
+							<DropdownMenuContent align="end" className="min-w-44">
+								<DropdownMenuLabel>{pb.authStore.model?.email}</DropdownMenuLabel>
+								<DropdownMenuSeparator />
+								<DropdownMenuGroup>
+									{isAdmin() && (
+										<>
+											<DropdownMenuItem asChild>
+												<a href="/_/">
+													<UsersIcon className="mr-2.5 h-4 w-4" />
+													<span>Users</span>
+												</a>
+											</DropdownMenuItem>
+											<DropdownMenuItem asChild>
+												<a href="/_/#/collections?collectionId=2hz5ncl8tizk5nx">
+													<ServerIcon className="mr-2.5 h-4 w-4" />
+													<span>Systems</span>
+												</a>
+											</DropdownMenuItem>
+											<DropdownMenuItem asChild>
+												<a href="/_/#/logs">
+													<LogsIcon className="mr-2.5 h-4 w-4" />
+													<span>Logs</span>
+												</a>
+											</DropdownMenuItem>
+											<DropdownMenuItem asChild>
+												<a href="/_/#/settings/backups">
+													<DatabaseBackupIcon className="mr-2.5 h-4 w-4" />
+													<span>Backups</span>
+												</a>
+											</DropdownMenuItem>
+											<DropdownMenuItem asChild>
+												<a href="/_/#/settings/auth-providers">
+													<LockKeyholeIcon className="mr-2.5 h-4 w-4" />
+													<span>Auth providers</span>
+												</a>
+											</DropdownMenuItem>
+											<DropdownMenuSeparator />
+										</>
+									)}
+								</DropdownMenuGroup>
+								<DropdownMenuItem onSelect={() => pb.authStore.clear()}>
+									<LogOutIcon className="mr-2.5 h-4 w-4" />
+									<span>Log out</span>
+								</DropdownMenuItem>
+							</DropdownMenuContent>
+						</DropdownMenu>
+					</div>
+				</div>
+			</div>
+			<div className="container mb-14 relative">
+				<App />
+				<Suspense>
+					<CommandPalette />
+				</Suspense>
+			</div>
+		</>
+	)
+}
+
+ReactDOM.createRoot(document.getElementById('app')!).render(
+	<React.StrictMode>
+		<ThemeProvider>
+			<Layout />
+			<Toaster />
+		</ThemeProvider>
+	</React.StrictMode>
+)

hub/site/src/types.d.ts

@@ -0,0 +1,83 @@
+import { RecordModel } from 'pocketbase'
+
+export interface SystemRecord extends RecordModel {
+	name: string
+	host: string
+	status: 'up' | 'down' | 'paused' | 'pending'
+	port: string
+	info: SystemInfo
+}
+
+export interface SystemInfo {
+	/** cpu percent */
+	cpu: number
+	/** cpu threads */
+	t: number
+	/** cpu cores */
+	c: number
+	/** cpu model */
+	m: string
+	/** operating system */
+	o?: string
+	/** uptime */
+	u: number
+	/** memory percent */
+	mp: number
+	/** disk percent */
+	dp: number
+}
+
+export interface SystemStats {
+	/** cpu percent */
+	cpu: number
+	/** total memory (gb) */
+	m: number
+	/** memory used (gb) */
+	mu: number
+	/** memory percent */
+	mp: number
+	/** memory buffer + cache (gb) */
+	mb: number
+	/** disk size (gb) */
+	d: number
+	/** disk used (gb) */
+	du: number
+	/** disk percent */
+	dp: number
+	/** disk read (mb) */
+	dr: number
+	/** disk write (mb) */
+	dw: number
+	/** network sent (mb) */
+	ns: number
+	/** network received (mb) */
+	nr: number
+}
+
+export interface ContainerStatsRecord extends RecordModel {
+	system: string
+	stats: ContainerStats[]
+}
+
+interface ContainerStats {
+	/** name */
+	n: string
+	/** cpu percent */
+	c: number
+	/** memory used (gb) */
+	m: number
+}
+
+export interface SystemStatsRecord extends RecordModel {
+	system: string
+	stats: SystemStats
+}
+
+export interface AlertRecord extends RecordModel {
+	id: string
+	system: string
+	name: string
+	// user: string
+}
+
+export type ChartTimes = '1h' | '12h' | '24h' | '1w' | '30d'

hub/site/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />