progress on client site

site/src/components/login.tsx

@@ -0,0 +1,62 @@
+import { Link } from 'wouter-preact'
+
+import { cn } from '@/lib/utils'
+import { buttonVariants } from '@/components/ui/button'
+import { UserAuthForm } from '@/components/user-auth-form'
+import { ChevronLeft } from 'lucide-react'
+
+export default function LoginPage() {
+	return (
+		<div className="container relative hidden h-screen flex-col items-center justify-center md:grid lg:max-w-none lg:grid-cols-2 lg:px-0">
+			<div className="lg:p-8">
+				<div className="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]">
+					<div className="flex flex-col space-y-2 text-center">
+						<ChevronLeft className="mx-auto h-6 w-6" />
+						<h1 className="text-2xl font-semibold tracking-tight">Welcome back</h1>
+						<p className="text-sm text-muted-foreground">
+							Enter your email to sign in to your account
+						</p>
+					</div>
+					<UserAuthForm />
+					<p className="px-8 text-center text-sm text-muted-foreground">
+						<Link href="/register" className="hover:text-brand underline underline-offset-4">
+							Don&apos;t have an account? Sign Up
+						</Link>
+					</p>
+				</div>
+			</div>
+			<div class="relative hidden h-full flex-col bg-muted p-10 text-white dark:border-r lg:flex">
+				<div
+					class="absolute inset-0 bg-slate-900 bg-cover opacity-80"
+					style={{
+						backgroundImage: `url(https://directus.cloud/assets/waves.2b156907.svg)`,
+					}}
+				></div>
+				<div class="relative z-20 flex gap-2 items-center text-lg font-medium ml-auto">
+					Melon
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						viewBox="0 0 24 24"
+						fill="none"
+						stroke="currentColor"
+						stroke-width="2"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						class="h-6 w-6"
+					>
+						<path d="M15 6v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3V6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3"></path>
+					</svg>
+				</div>
+				{/* <div class="relative z-20 mt-auto">
+					<blockquote class="space-y-2">
+						<p class="text-lg">
+							“This library has saved me countless hours of work and helped me deliver stunning
+							designs to my clients faster than ever before.”
+						</p>
+						<footer class="text-sm">Sofia Davis</footer>
+					</blockquote>
+				</div> */}
+			</div>
+		</div>
+	)
+}

site/src/components/mode-toggle.tsx

@@ -0,0 +1,31 @@
+import { Moon, 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="outline" size="icon">
+					<Sun className="h-[1.2rem] w-[1.2rem] dark:opacity-0" />
+					<Moon className="absolute h-[1.2rem] w-[1.2rem] opacity-0 dark:opacity-100" />
+					<span className="sr-only">Toggle theme</span>
+				</Button>
+			</DropdownMenuTrigger>
+			<DropdownMenuContent align="end">
+				<DropdownMenuItem onClick={() => setTheme('light')}>Light</DropdownMenuItem>
+				<DropdownMenuItem onClick={() => setTheme('dark')}>Dark</DropdownMenuItem>
+				<DropdownMenuItem onClick={() => setTheme('system')}>System</DropdownMenuItem>
+			</DropdownMenuContent>
+		</DropdownMenu>
+	)
+}

site/src/components/routes/home.tsx

@@ -0,0 +1,38 @@
+import { useEffect, useState } from 'preact/hooks'
+import { pb } from '@/lib/stores'
+import { SystemRecord } from '@/types'
+import { DataTable } from '../server-table/data-table'
+
+export function Home() {
+	const [systems, setSystems] = useState([] as SystemRecord[])
+
+	useEffect(() => {
+		pb.collection<SystemRecord>('systems')
+			.getList(1, 20)
+			.then(({ items }) => {
+				setSystems(items)
+			})
+
+		pb.collection<SystemRecord>('systems').subscribe('*', (e) => {
+			setSystems((curSystems) => {
+				const i = curSystems.findIndex((s) => s.id === e.record.id)
+				if (i > -1) {
+					const newSystems = [...systems]
+					newSystems[i] = e.record
+					return newSystems
+				} else {
+					return [...curSystems, e.record]
+				}
+			})
+		})
+		return () => pb.collection('systems').unsubscribe('*')
+	}, [])
+
+	return (
+		<>
+			<h1>Dashboard</h1>
+			{systems.length && <DataTable data={systems} />}
+			<pre>{JSON.stringify(systems, null, 2)}</pre>
+		</>
+	)
+}

site/src/components/routes/server.tsx

@@ -0,0 +1,12 @@
+import { useEffect } from 'preact/hooks'
+import { useRoute } from 'wouter-preact'
+
+export function ServerDetail() {
+	const [_, params] = useRoute('/server/:name')
+
+	useEffect(() => {
+		document.title = `Server: ${params!.name}`
+	}, [])
+
+	return <>Info for {params!.name}</>
+}

site/src/components/server-table/data-table.tsx

@@ -0,0 +1,111 @@
+import {
+	CellContext,
+	ColumnDef,
+	flexRender,
+	getCoreRowModel,
+	useReactTable,
+} from '@tanstack/react-table'
+
+import {
+	Table,
+	TableBody,
+	TableCell,
+	TableHead,
+	TableHeader,
+	TableRow,
+} from '@/components/ui/table'
+
+import { SystemRecord } from '@/types'
+
+function CellFormatter(info: CellContext<SystemRecord, unknown>) {
+	const val = info.getValue() as number
+	let background = '#42b768'
+	if (val > 25) {
+		background = '#da2a49'
+	} else if (val > 10) {
+		background = '#daa42a'
+	}
+	return (
+		<div class="flex gap-2 items-center">
+			<span>{val.toFixed(2)}%</span>
+			<span class="grow block bg-secondary h-4 relative rounded-sm overflow-hidden">
+				<span
+					className="absolute inset-0 w-full h-full origin-left"
+					style={{ transform: `scalex(${val}%)`, background }}
+				></span>
+			</span>
+		</div>
+	)
+}
+
+export function DataTable({ data }: { data: SystemRecord[] }) {
+	// console.log('data', data)
+	const columns: ColumnDef<SystemRecord>[] = [
+		{
+			header: 'Node',
+			accessorKey: 'name',
+		},
+		{
+			header: 'CPU Load',
+			accessorKey: 'stats.cpu',
+			cell: CellFormatter,
+		},
+		{
+			header: 'RAM',
+			accessorKey: 'stats.memPct',
+			cell: CellFormatter,
+		},
+		{
+			header: 'Disk Usage',
+			accessorKey: 'stats.diskPct',
+			cell: CellFormatter,
+		},
+	]
+
+	const table = useReactTable({
+		data,
+		columns,
+		getCoreRowModel: getCoreRowModel(),
+	})
+
+	return (
+		<div className="rounded-md border tabular-nums">
+			<Table>
+				<TableHeader>
+					{table.getHeaderGroups().map((headerGroup) => (
+						<TableRow key={headerGroup.id}>
+							{headerGroup.headers.map((header) => {
+								return (
+									<TableHead 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.id} data-state={row.getIsSelected() && 'selected'}>
+								{row.getVisibleCells().map((cell) => (
+									<TableCell key={cell.id}>
+										{flexRender(cell.column.columnDef.cell, cell.getContext())}
+									</TableCell>
+								))}
+							</TableRow>
+						))
+					) : (
+						<TableRow>
+							<TableCell colSpan={columns.length} className="h-24 text-center">
+								No results.
+							</TableCell>
+						</TableRow>
+					)}
+				</TableBody>
+			</Table>
+		</div>
+	)
+}

site/src/components/theme-provider.tsx

@@ -0,0 +1,71 @@
+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 = 'vite-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 = () => {
+	const context = useContext(ThemeProviderContext)
+
+	if (context === undefined) throw new Error('useTheme must be used within a ThemeProvider')
+
+	return context
+}

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 }

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,
+}

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 }

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 }

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,
+}

site/src/components/user-auth-form.tsx

@@ -0,0 +1,125 @@
+'use client'
+
+import * as React from 'react'
+// import { useSearchParams } from 'next/navigation'
+// import { zodResolver } from '@hookform/resolvers/zod'
+// import { signIn } from 'next-auth/react'
+// import { useForm } from 'react-hook-form'
+// import * as z from 'zod'
+
+import { cn } from '@/lib/utils'
+import { userAuthSchema } from '@/lib/validations/auth'
+import { buttonVariants } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+// import { toast } from '@/components/ui/use-toast'
+import { Github, LoaderCircle } from 'lucide-react'
+
+interface UserAuthFormProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+type FormData = z.infer<typeof userAuthSchema>
+
+export function UserAuthForm({ className, ...props }: UserAuthFormProps) {
+	const signIn = (s: string) => console.log(s)
+	const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+		// e.preventDefault()
+		signIn('github')
+	}
+
+	const errors = {
+		email: 'This field is required',
+		password: 'This field is required',
+	}
+
+	// const {
+	// 	register,
+	// 	handleSubmit,
+	// 	formState: { errors },
+	// } = useForm<FormData>({
+	// 	resolver: zodResolver(userAuthSchema),
+	// })
+	const [isLoading, setIsLoading] = React.useState<boolean>(false)
+	const [isGitHubLoading, setIsGitHubLoading] = React.useState<boolean>(false)
+	// const searchParams = useSearchParams()
+
+	async function onSubmit(data: FormData) {
+		setIsLoading(true)
+
+		alert('do pb stuff')
+
+		// const signInResult = await signIn('email', {
+		// 	email: data.email.toLowerCase(),
+		// 	redirect: false,
+		// 	callbackUrl: searchParams?.get('from') || '/dashboard',
+		// })
+
+		setIsLoading(false)
+
+		if (!signInResult?.ok) {
+			alert('Your sign in request failed. Please try again.')
+			// return toast({
+			// 	title: 'Something went wrong.',
+			// 	description: 'Your sign in request failed. Please try again.',
+			// 	variant: 'destructive',
+			// })
+		}
+
+		// return toast({
+		// 	title: 'Check your email',
+		// 	description: 'We sent you a login link. Be sure to check your spam too.',
+		// })
+	}
+
+	return (
+		<div className={cn('grid gap-6', className)} {...props}>
+			<form onSubmit={handleSubmit}>
+				<div className="grid gap-2">
+					<div className="grid gap-1">
+						<Label className="sr-only" htmlFor="email">
+							Email
+						</Label>
+						<Input
+							id="email"
+							placeholder="name@example.com"
+							type="email"
+							autoCapitalize="none"
+							autoComplete="email"
+							autoCorrect="off"
+							disabled={isLoading || isGitHubLoading}
+						/>
+						{errors?.email && <p className="px-1 text-xs text-red-600">{errors.email.message}</p>}
+					</div>
+					<button className={cn(buttonVariants())} disabled={isLoading}>
+						{isLoading && <LoaderCircle className="mr-2 h-4 w-4 animate-spin" />}
+						Sign In with Email
+					</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>
+			<button
+				type="button"
+				className={cn(buttonVariants({ variant: 'outline' }))}
+				onClick={() => {
+					localStorage.setItem('auth', 'true')
+					setIsGitHubLoading(true)
+					signIn('github')
+				}}
+				disabled={isLoading || isGitHubLoading}
+			>
+				{isGitHubLoading ? (
+					<LoaderCircle className="mr-2 h-4 w-4 animate-spin" />
+				) : (
+					<Github className="mr-2 h-4 w-4" />
+				)}{' '}
+				Github
+			</button>
+		</div>
+	)
+}

site/src/index.css

@@ -0,0 +1,76 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+	:root {
+		--background: 0 0% 100%;
+		--foreground: 224 71.4% 4.1%;
+
+		--card: 0 0% 100%;
+		--card-foreground: 224 71.4% 4.1%;
+
+		--popover: 0 0% 100%;
+		--popover-foreground: 224 71.4% 4.1%;
+
+		--primary: 220.9 39.3% 11%;
+		--primary-foreground: 210 20% 98%;
+
+		--secondary: 220 14.3% 95.9%;
+		--secondary-foreground: 220.9 39.3% 11%;
+
+		--muted: 220 14.3% 95.9%;
+		--muted-foreground: 220 8.9% 46.1%;
+
+		--accent: 220 14.3% 95.9%;
+		--accent-foreground: 220.9 39.3% 11%;
+
+		--destructive: 0 84.2% 60.2%;
+		--destructive-foreground: 210 20% 98%;
+
+		--border: 220 13% 91%;
+		--input: 220 13% 91%;
+		--ring: 224 71.4% 4.1%;
+
+		--radius: 0.5rem;
+	}
+
+	.dark {
+		--background: 224 71.4% 4.1%;
+		--foreground: 210 20% 98%;
+
+		--card: 224 71.4% 4.1%;
+		--card-foreground: 210 20% 98%;
+
+		--popover: 224 71.4% 4.1%;
+		--popover-foreground: 210 20% 98%;
+
+		--primary: 210 20% 98%;
+		--primary-foreground: 220.9 39.3% 11%;
+
+		--secondary: 215 27.9% 16.9%;
+		--secondary-foreground: 210 20% 98%;
+
+		--muted: 215 27.9% 16.9%;
+		--muted-foreground: 217.9 10.6% 64.9%;
+
+		--accent: 215 27.9% 16.9%;
+		--accent-foreground: 210 20% 98%;
+
+		--destructive: 0 62.8% 30.6%;
+		--destructive-foreground: 210 20% 98%;
+
+		--border: 215 27.9% 16.9%;
+		--input: 215 27.9% 16.9%;
+		--ring: 216 12.2% 83.9%;
+	}
+}
+
+@layer base {
+	* {
+		@apply border-border;
+	}
+	body {
+		@apply bg-background text-foreground;
+	}
+}

site/src/lib/stores.ts

@@ -0,0 +1,3 @@
+import PocketBase from 'pocketbase'
+
+export const pb = new PocketBase('/')

site/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

site/src/main.tsx

@@ -0,0 +1,45 @@
+import './index.css'
+import { render } from 'preact'
+import { Link, Route, Switch } from 'wouter-preact'
+import { Home } from './components/routes/home.tsx'
+import { ThemeProvider } from './components/theme-provider.tsx'
+import LoginPage from './components/login.tsx'
+import { pb } from './lib/stores.ts'
+import { ServerDetail } from './components/routes/server.tsx'
+
+// import { ModeToggle } from './components/mode-toggle.tsx'
+
+// const ls = localStorage.getItem('auth')
+// console.log('ls', ls)
+// @ts-ignore
+pb.authStore.storageKey = 'pb_admin_auth'
+
+console.log('pb.authStore', pb.authStore)
+
+const App = () => <ThemeProvider>{pb.authStore.isValid ? <Main /> : <LoginPage />}</ThemeProvider>
+
+const Main = () => (
+	<div className="container">
+		<nav class="flex gap-5 bg-white/10 p-4 rounded-md mb-3">
+			<Link href="/">Home</Link>
+			<Link href="/server/kagemusha">kagemusha</Link>
+			<Link href="/server/rashomon">rashomon</Link>
+			{/* <ModeToggle /> */}
+		</nav>
+
+		{/* 
+      Routes below are matched exclusively -
+      the first matched route gets rendered
+    */}
+		<Switch>
+			<Route path="/" component={Home} />
+
+			<Route path="/server/:name" component={ServerDetail}></Route>
+
+			{/* Default route in a switch */}
+			<Route>404: No such page!</Route>
+		</Switch>
+	</div>
+)
+
+render(<App />, document.getElementById('app')!)

site/src/types.d.ts

@@ -0,0 +1,16 @@
+import { RecordModel } from 'pocketbase'
+
+export interface SystemRecord extends RecordModel {
+	name: string
+	stats: SystemStats
+}
+
+export interface SystemStats {
+	cpu: number
+	disk: number
+	diskPct: number
+	diskUsed: number
+	mem: number
+	memPct: number
+	memUsed: number
+}

site/src/vite-env.d.ts

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