chore: v0.2.2

CHANGELOG.md

@@ -1,3 +1,19 @@
+### 0.2.2 (August 2, 2024)
+- Added a proper Kubernetes integration which utilizes `shareProcessNamespace` for PIDs.
+- Added a new logger utility that shows categories, levels, and timestamps.
+- Reimplemented the integration system to be more resilient and log more information.
+- Fixed an issue where the /proc integration found `undefined` PIDs.
+
+### 0.2.1 (July 7, 2024)
+- Added the ability to manage custom DNS records on your Tailnet.
+- ACL tags for machines are now able to be changed via the machine menu.
+- Fixed a bug where the ACL editor did not show the diffs correctly.
+- Fixed an issue that stopped the "Discard changes" button in the ACL editor from working.
+
+### 0.2.0 (June 23, 2024)
+- Fix the dropdown options for machines not working on the machines page.
+- Add an option to change the machine owner in the dropdown (aside from the users page).
+
 ### 0.1.9 (June 2, 2024)
 - Switch to Monaco editor with proper HuJSON and YAML syntax highlighting.
 - Utilize magic DNS hostnames for the machine overview page.

README.md

@@ -1,7 +1,20 @@
 # Headplane
 > An advanced UI for [juanfont/headscale](https://github.com/juanfont/headscale)
 
-![Preview](/assets/main-preview.png)
+<picture>
+    <source
+        media="(prefers-color-scheme: dark)"
+        srcset="./assets/preview-dark.png"
+    >
+    <source
+        media="(prefers-color-scheme: light)"
+        srcset="./assets/preview-light.png"
+    >
+    <img
+        alt="Preview"
+        src="./assets/preview-dark.png"
+    >
+</picture>
 
 Headscale is a self-hosted version of the Tailscale control server, however, it currently lacks a first-party web UI.
 Headplane aims to solve this issue by providing a GUI that can deeply integrate with the Headscale server.

app/components/Select.tsx

@@ -0,0 +1,82 @@
+import { ChevronDownIcon } from '@primer/octicons-react'
+import { Dispatch, ReactNode, SetStateAction } from 'react'
+import {
+	Button,
+	ListBox,
+	ListBoxItem,
+	Popover,
+	Select as AriaSelect,
+	SelectValue,
+} from 'react-aria-components'
+
+import { cn } from '~/utils/cn'
+
+type SelectProps = Parameters<typeof AriaSelect>[0] & {
+	readonly label: string
+	readonly state?: [string, Dispatch<SetStateAction<string>>]
+	readonly children: ReactNode
+}
+
+function Select(props: SelectProps) {
+	return (
+		<AriaSelect
+			{...props}
+			aria-label={props.label}
+			selectedKey={props.state?.[0]}
+			onSelectionChange={(key) => {
+				props.state?.[1](key.toString())
+			}}
+			className={cn(
+				'block w-full rounded-lg my-1',
+				'border border-ui-200 dark:border-ui-600',
+				'bg-white dark:bg-ui-800 dark:text-ui-300',
+				'focus-within:outline-6',
+				props.className,
+			)}
+		>
+			<Button className={cn(
+				'w-full flex items-center justify-between',
+				'px-2.5 py-1.5 rounded-lg',
+			)}
+			>
+				<SelectValue />
+				<ChevronDownIcon className="w-4 h-4" aria-hidden="true" />
+			</Button>
+			<Popover
+				className={cn(
+					'mt-2 rounded-md w-[var(--trigger-width)]',
+					'bg-ui-100 dark:bg-ui-800 shadow-sm',
+					'overflow-hidden z-50',
+					'border border-ui-200 dark:border-ui-600',
+					'entering:animate-in exiting:animate-out',
+					'entering:fade-in entering:zoom-in-95',
+					'exiting:fade-out exiting:zoom-out-95',
+					'fill-mode-forwards origin-left-right',
+				)}
+			>
+				<ListBox>
+					{props.children}
+				</ListBox>
+			</Popover>
+		</AriaSelect>
+	)
+}
+
+type ItemProps = Parameters<typeof ListBoxItem>[0]
+
+function Item(props: ItemProps) {
+	return (
+		<ListBoxItem
+			{...props}
+			className={cn(
+				'px-4 py-2 w-full outline-none w-full',
+				'hover:bg-ui-200 dark:hover:bg-ui-700',
+				props.className,
+			)}
+		>
+			{props.children}
+		</ListBoxItem>
+	)
+}
+
+export default Object.assign(Select, { Item })

app/integration/docker.ts

@@ -4,124 +4,171 @@ import { setTimeout } from 'node:timers/promises'
 import { Client } from 'undici'
 
 import { HeadscaleError, pull } from '~/utils/headscale'
+import log from '~/utils/log'
 
-import type { Integration } from '.'
+import { createIntegration } from './integration'
 
-// Integration name
+interface Context {
-const name = 'Docker'
+	client: Client | undefined
-
+	container: string | undefined
-let url: URL | undefined
+	maxAttempts: number
-let container: string | undefined
-
-async function preflight() {
-	const path = process.env.DOCKER_SOCK ?? 'unix:///var/run/docker.sock'
-
-	try {
-		url = new URL(path)
-	} catch {
-		return false
-	}
-
-	// The API is available as an HTTP endpoint
-	if (url.protocol === 'tcp:') {
-		url.protocol = 'http:'
-	}
-
-	// Check if the socket is accessible
-	if (url.protocol === 'unix:') {
-		try {
-			await access(path, constants.R_OK)
-		} catch {
-			return false
-		}
-	}
-
-	if (url.protocol === 'http:') {
-		try {
-			await fetch(new URL('/v1.30/version', url).href)
-		} catch {
-			return false
-		}
-	}
-
-	if (url.protocol !== 'http:' && url.protocol !== 'unix:') {
-		return false
-	}
-
-	container = process.env.HEADSCALE_CONTAINER
-		?.trim()
-		.toLowerCase()
-
-	if (!container || container.length === 0) {
-		return false
-	}
-
-	return true
 }
 
-async function sighup() {
+export default createIntegration<Context>({
-	if (!url || !container) {
+	name: 'Docker',
-		return
+	context: {
-	}
+		client: undefined,
+		container: undefined,
+		maxAttempts: 10,
+	},
+	isAvailable: async (context) => {
+		// Check for the HEADSCALE_CONTAINER environment variable first
+		// to avoid unnecessary fetching of the Docker socket
+		context.container = process.env.HEADSCALE_CONTAINER
+			?.trim()
+			.toLowerCase()
 
-	// Supports the DOCKER_SOCK environment variable
+		if (!context.container || context.container.length === 0) {
-	const client = url.protocol === 'unix:'
+			log.error('INTG', 'Missing HEADSCALE_CONTAINER variable')
-		? new Client('http://localhost', {
+			return false
-			socketPath: url.href,
+		}
-		})
-		: new Client(url.href)
 
-	const response = await client.request({
+		log.info('INTG', 'Using container: %s', context.container)
-		method: 'POST',
+		const path = process.env.DOCKER_SOCK ?? 'unix:///var/run/docker.sock'
-		path: `/v1.30/containers/${container}/kill?signal=SIGHUP`,
+		let url: URL | undefined
-	})
 
-	if (!response.statusCode || response.statusCode !== 204) {
-		throw new Error('Failed to send SIGHUP to Headscale')
-	}
-}
-
-async function restart() {
-	if (!url || !container) {
-		return
-	}
-
-	// Supports the DOCKER_SOCK environment variable
-	const client = url.protocol === 'unix:'
-		? new Client('http://localhost', {
-			socketPath: url.href,
-		})
-		: new Client(url.href)
-
-	const response = await client.request({
-		method: 'POST',
-		path: `/v1.30/containers/${container}/restart`,
-	})
-
-	if (!response.statusCode || response.statusCode !== 204) {
-		throw new Error('Failed to restart Headscale')
-	}
-
-	// Wait for Headscale to restart before continuing
-	let attempts = 0
-	// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition, no-constant-condition
-	while (true) {
 		try {
-			await pull('v1', '')
+			url = new URL(path)
+		} catch {
+			log.error('INTG', 'Invalid Docker socket path: %s', path)
+			return false
+		}
+
+		if (url.protocol !== 'tcp:' && url.protocol !== 'unix:') {
+			log.error('INTG', 'Invalid Docker socket protocol: %s',
+				url.protocol,
+			)
+			return false
+		}
+
+		// The API is available as an HTTP endpoint and this
+		// will simplify the fetching logic in undici
+		if (url.protocol === 'tcp:') {
+			url.protocol = 'http:'
+			try {
+				log.info('INTG', 'Checking API: %s', url.href)
+				await fetch(new URL('/v1.30/version', url).href)
+			} catch {
+				log.error('INTG', 'Failed to connect to Docker API')
+				return false
+			}
+
+			context.client = new Client(url.href)
+		}
+
+		// Check if the socket is accessible
+		if (url.protocol === 'unix:') {
+			try {
+				log.info('INTG', 'Checking socket: %s',
+					url.pathname,
+				)
+				await access(url.pathname, constants.R_OK)
+			} catch {
+				log.error('INTG', 'Failed to access Docker socket: %s',
+					path,
+				)
+				return false
+			}
+
+			context.client = new Client('http://localhost', {
+				socketPath: url.pathname,
+			})
+		}
+
+		return context.client !== undefined
+	},
+
+	onAclChange: async (context) => {
+		if (!context.client || !context.container) {
 			return
-		} catch (error) {
-			if (error instanceof HeadscaleError && error.status === 401) {
-				break
-			}
-
-			if (attempts > 10) {
-				throw new Error('Headscale did not restart in time')
-			}
-
-			attempts++
-			await setTimeout(1000)
 		}
-	}
-}
 
-export default { name, preflight, sighup, restart } satisfies Integration
+		log.info('INTG', 'Sending SIGHUP to Headscale via Docker')
+
+		let attempts = 0
+		while (attempts <= context.maxAttempts) {
+			const response = await context.client.request({
+				method: 'POST',
+				path: `/v1.30/containers/${context.container}/kill?signal=SIGHUP`,
+			})
+
+			if (response.statusCode !== 204) {
+				if (attempts < context.maxAttempts) {
+					attempts++
+					await setTimeout(1000)
+					continue
+				}
+
+				const stringCode = response.statusCode.toString()
+				const body = await response.body.text()
+				throw new Error(`API request failed: ${stringCode} ${body}`)
+			}
+
+			break
+		}
+	},
+
+	onConfigChange: async (context) => {
+		if (!context.client || !context.container) {
+			return
+		}
+
+		log.info('INTG', 'Restarting Headscale via Docker')
+
+		let attempts = 0
+		while (attempts <= context.maxAttempts) {
+			const response = await context.client.request({
+				method: 'POST',
+				path: `/v1.30/containers/${context.container}/restart`,
+			})
+
+			if (response.statusCode !== 204) {
+				if (attempts < context.maxAttempts) {
+					attempts++
+					await setTimeout(1000)
+					continue
+				}
+
+				const stringCode = response.statusCode.toString()
+				const body = await response.body.text()
+				throw new Error(`API request failed: ${stringCode} ${body}`)
+			}
+
+			break
+		}
+
+		attempts = 0
+		while (attempts <= context.maxAttempts) {
+			try {
+				await pull('v1', '')
+				return
+			} catch (error) {
+				if (error instanceof HeadscaleError && error.status === 401) {
+					break
+				}
+
+				if (error instanceof HeadscaleError && error.status === 404) {
+					break
+				}
+
+				if (attempts < context.maxAttempts) {
+					attempts++
+					await setTimeout(1000)
+					continue
+				}
+
+				throw new Error(`Missed restart deadline for ${context.container}`)
+			}
+		}
+	},
+})

app/integration/index.ts

@@ -1,58 +1,75 @@
-import docker from './docker'
+import log from '~/utils/log'
-import proc from './proc'
 
-export interface Integration {
+import dockerIntegration from './docker'
-	name: string
+import { IntegrationFactory } from './integration'
-	preflight: () => Promise<boolean>
+import kubernetesIntegration from './kubernetes'
-	sighup?: () => Promise<void>
+import procIntegration from './proc'
-	restart?: () => Promise<void>
-}
 
-// Because we previously supported the Docker integration by
+export * from './integration'
-// checking for the HEADSCALE_CONTAINER variable, we need to
+
-// check for it here as well.
+export async function loadIntegration() {
-//
-// This ensures that when people upgrade from older versions
-// of Headplane, they don't explicitly need to define the new
-// HEADSCALE_INTEGRATION variable that is needed to configure
-// an integration.
-export async function checkIntegration() {
 	let integration = process.env.HEADSCALE_INTEGRATION
 		?.trim()
 		.toLowerCase()
 
 	// Old HEADSCALE_CONTAINER variable upgrade path
+	// This ensures that when people upgrade from older versions of Headplane
+	// they don't explicitly need to define the new HEADSCALE_INTEGRATION
+	// variable that is needed to configure docker
 	if (!integration && process.env.HEADSCALE_CONTAINER) {
 		integration = 'docker'
 	}
 
 	if (!integration) {
-		console.log('Running Headplane without any integrations')
+		log.info('INTG', 'No integration set with HEADSCALE_INTEGRATION')
 		return
 	}
 
-	let module: Integration | undefined
+	let integrationFactory: IntegrationFactory | undefined
-	try {
+	switch (integration.toLowerCase().trim()) {
-		module = getIntegration(integration)
-		await module.preflight()
-	} catch (error) {
-		console.error('Failed to load integration', error)
-		return
-	}
-
-	return module
-}
-
-function getIntegration(name: string) {
-	switch (name) {
 		case 'docker': {
-			return docker
+			integrationFactory = dockerIntegration
+			break
 		}
-		case 'proc': {
+
-			return proc
+		case 'proc':
+		case 'native':
+		case 'linux': {
+			integrationFactory = procIntegration
+			break
 		}
+
+		case 'kubernetes':
+		case 'k8s': {
+			integrationFactory = kubernetesIntegration
+			break
+		}
+
 		default: {
-			throw new Error(`Unknown integration: ${name}`)
+			log.error('INTG', 'Unknown integration: %s', integration)
+			throw new Error(`Unknown integration: ${integration}`)
 		}
 	}
+
+	log.info('INTG', 'Loading integration: %s', integration)
+	try {
+		const res = await integrationFactory.isAvailable(
+			integrationFactory.context,
+		)
+		if (!res) {
+			log.error('INTG', 'Integration %s is not available',
+				integration,
+			)
+			return
+		}
+	} catch (error) {
+		log.error('INTG', 'Failed to load integration %s: %s',
+			integration,
+			error,
+		)
+		return
+	}
+
+	log.info('INTG', 'Loaded integration: %s', integration)
+	return integrationFactory
 }

app/integration/integration.ts

@@ -0,0 +1,14 @@
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export interface IntegrationFactory<T = any> {
+	name: string
+	context: T
+	isAvailable: (context: T) => Promise<boolean> | boolean
+	onAclChange?: (context: T) => Promise<void> | void
+	onConfigChange?: (context: T) => Promise<void> | void
+}
+
+export function createIntegration<T>(
+	options: IntegrationFactory<T>,
+) {
+	return options
+}

app/integration/kubernetes.ts

@@ -0,0 +1,197 @@
+import { readdir, readFile } from 'node:fs/promises'
+import { platform } from 'node:os'
+import { join, resolve } from 'node:path'
+import { kill } from 'node:process'
+
+import { Config, CoreV1Api, KubeConfig } from '@kubernetes/client-node'
+
+import log from '~/utils/log'
+
+import { createIntegration } from './integration'
+
+interface Context {
+	pid: number | undefined
+}
+
+export default createIntegration<Context>({
+	name: 'Kubernetes (k8s)',
+	context: {
+		pid: undefined,
+	},
+	isAvailable: async (context) => {
+		if (platform() !== 'linux') {
+			log.error('INTG', 'Kubernetes is only available on Linux')
+			return false
+		}
+
+		const svcRoot = Config.SERVICEACCOUNT_ROOT
+		try {
+			const files = await readdir(svcRoot)
+			if (files.length === 0) {
+				log.error('INTG', 'Kubernetes service account not found')
+				return false
+			}
+
+			const mappedFiles = new Set(files.map(file => join(svcRoot, file)))
+			const expectedFiles = [
+				Config.SERVICEACCOUNT_CA_PATH,
+				Config.SERVICEACCOUNT_TOKEN_PATH,
+				Config.SERVICEACCOUNT_NAMESPACE_PATH,
+			]
+
+			if (!expectedFiles.every(file => mappedFiles.has(file))) {
+				log.error('INTG', 'Malformed Kubernetes service account')
+				return false
+			}
+		} catch (error) {
+			log.error('INTG', 'Failed to access %s: %s', svcRoot, error)
+			return false
+		}
+
+		const namespace = await readFile(
+			Config.SERVICEACCOUNT_NAMESPACE_PATH,
+			'utf8',
+		)
+
+		// Some very ugly nesting but it's necessary
+		if (process.env.HEADSCALE_INTEGRATION_UNSTRICT === 'true') {
+			log.warn('INTG', 'Skipping strict Pod status check')
+		} else {
+			const pod = process.env.POD_NAME
+			if (!pod) {
+				log.error('INTG', 'Missing POD_NAME variable')
+				return false
+			}
+
+			if (pod.trim().length === 0) {
+				log.error('INTG', 'Pod name is empty')
+				return false
+			}
+
+			try {
+				const kc = new KubeConfig()
+				kc.loadFromCluster()
+
+				const cluster = kc.getCurrentCluster()
+				if (!cluster) {
+					log.error('INTG', 'Malformed kubeconfig')
+					return false
+				}
+
+				log.info('INTG', 'Service account connected to %s (%s)',
+					cluster.name,
+					cluster.server,
+				)
+
+				const kCoreV1Api = kc.makeApiClient(CoreV1Api)
+
+				log.info('INTG', 'Checking pod %s in namespace %s (%s)',
+					pod,
+					namespace,
+					kCoreV1Api.basePath,
+				)
+
+				const { response, body } = await kCoreV1Api.readNamespacedPod(
+					pod,
+					namespace,
+				)
+
+				if (response.statusCode !== 200) {
+					log.error('INTG', 'Failed to read pod info: http %d',
+						response.statusCode,
+					)
+					return false
+				}
+
+				const shared = body.spec?.shareProcessNamespace
+				if (shared === undefined) {
+					log.error(
+						'INTG',
+						'Pod does not have spec.shareProcessNamespace set',
+					)
+					return false
+				}
+
+				if (!shared) {
+					log.error(
+						'INTG',
+						'Pod has set but disabled spec.shareProcessNamespace',
+					)
+					return false
+				}
+
+				log.info('INTG', 'Pod %s enabled shared processes', pod)
+			} catch (error) {
+				log.error('INTG', 'Failed to read pod info: %s', error)
+				return false
+			}
+		}
+
+		const dir = resolve('/proc')
+		try {
+			const subdirs = await readdir(dir)
+			const promises = subdirs.map(async (dir) => {
+				const pid = Number.parseInt(dir, 10)
+
+				if (Number.isNaN(pid)) {
+					return
+				}
+
+				const path = join('/proc', dir, 'cmdline')
+				try {
+					const data = await readFile(path, 'utf8')
+					if (data.includes('headscale')) {
+						return pid
+					}
+				} catch {}
+			})
+
+			const results = await Promise.allSettled(promises)
+			const pids = []
+
+			for (const result of results) {
+				if (result.status === 'fulfilled' && result.value) {
+					pids.push(result.value)
+				}
+			}
+
+			if (pids.length > 1) {
+				log.error('INTG', 'Found %d Headscale processes: %s',
+					pids.length,
+					pids.join(', '),
+				)
+				return false
+			}
+
+			if (pids.length === 0) {
+				log.error('INTG', 'Could not find Headscale process')
+				return false
+			}
+
+			context.pid = pids[0]
+			log.info('INTG', 'Found Headscale process with PID: %d', context.pid)
+			return true
+		} catch {
+			log.error('INTG', 'Failed to read /proc')
+			return false
+		}
+	},
+
+	onAclChange: (context) => {
+		if (!context.pid) {
+			return
+		}
+
+		log.info('INTG', 'Sending SIGHUP to Headscale')
+		kill(context.pid, 'SIGHUP')
+	},
+
+	onConfigChange: (context) => {
+		if (!context.pid) {
+			return
+		}
+
+		log.info('INTG', 'Sending SIGTERM to Headscale')
+		kill(context.pid, 'SIGTERM')
+	},
+})

app/integration/proc.ts

@@ -1,83 +1,83 @@
-import { access, constants, readdir, readFile } from 'node:fs/promises'
+import { readdir, readFile } from 'node:fs/promises'
 import { platform } from 'node:os'
 import { join, resolve } from 'node:path'
 import { kill } from 'node:process'
 
-import type { Integration } from '.'
+import log from '~/utils/log'
 
-// Integration name
+import { createIntegration } from './integration'
-const name = 'Native Linux (/proc)'
 
-// Check if we have a /proc and if it's readable
+interface Context {
-async function preflight() {
+	pid: number | undefined
-	if (platform() !== 'linux') {
-		return false
-	}
-
-	const dir = resolve('/proc')
-	try {
-		await access(dir, constants.R_OK)
-		return true
-	} catch (error) {
-		console.error('Failed to access /proc', error)
-		return false
-	}
 }
 
-async function findPid() {
+export default createIntegration<Context>({
-	const dirs = await readdir('/proc')
+	name: 'Native Linux (/proc)',
+	context: {
+		pid: undefined,
+	},
+	isAvailable: async (context) => {
+		if (platform() !== 'linux') {
+			log.error('INTG', '/proc is only available on Linux')
+			return false
+		}
 
-	const promises = dirs.map(async (dir) => {
+		const dir = resolve('/proc')
-		const pid = Number.parseInt(dir, 10)
+		try {
+			const subdirs = await readdir(dir)
+			const promises = subdirs.map(async (dir) => {
+				const pid = Number.parseInt(dir, 10)
 
-		if (Number.isNaN(pid)) {
+				if (Number.isNaN(pid)) {
+					return
+				}
+
+				const path = join('/proc', dir, 'cmdline')
+				try {
+					const data = await readFile(path, 'utf8')
+					if (data.includes('headscale')) {
+						return pid
+					}
+				} catch {}
+			})
+
+			const results = await Promise.allSettled(promises)
+			const pids = []
+
+			for (const result of results) {
+				if (result.status === 'fulfilled' && result.value) {
+					pids.push(result.value)
+				}
+			}
+
+			if (pids.length > 1) {
+				log.error('INTG', 'Found %d Headscale processes: %s',
+					pids.length,
+					pids.join(', '),
+				)
+				return false
+			}
+
+			if (pids.length === 0) {
+				log.error('INTG', 'Could not find Headscale process')
+				return false
+			}
+
+			context.pid = pids[0]
+			log.info('INTG', 'Found Headscale process with PID: %d', context.pid)
+			return true
+		} catch {
+			log.error('INTG', 'Failed to read /proc')
+			return false
+		}
+	},
+
+	onAclChange: (context) => {
+		if (!context.pid) {
 			return
 		}
 
-		const path = join('/proc', dir, 'cmdline')
+		log.info('INTG', 'Sending SIGHUP to Headscale')
-		try {
+		kill(context.pid, 'SIGHUP')
-			const data = await readFile(path, 'utf8')
+	},
-			if (data.includes('headscale')) {
+})
-				return pid
-			}
-		} catch {}
-	})
-
-	const results = await Promise.allSettled(promises)
-	const pids = []
-
-	for (const result of results) {
-		if (result.status === 'fulfilled') {
-			pids.push(result.value)
-		}
-	}
-
-	if (pids.length > 1) {
-		console.warn('Found multiple Headscale processes', pids)
-		console.log('Disabling the /proc integration')
-		return
-	}
-
-	if (pids.length === 0) {
-		console.warn('Could not find Headscale process')
-		console.log('Disabling the /proc integration')
-		return
-	}
-
-	return pids[0]
-}
-
-async function sighup() {
-	const pid = await findPid()
-	if (!pid) {
-		return
-	}
-
-	try {
-		kill(pid, 'SIGHUP')
-	} catch (error) {
-		console.error('Failed to send SIGHUP to Headscale', error)
-	}
-}
-
-export default { name, preflight, sighup } satisfies Integration

app/routes/_data.acls._index/route.tsx

@@ -47,8 +47,8 @@ export async function action({ request }: ActionFunctionArgs) {
 	const data = await request.json() as { acl: string }
 	await patchAcl(data.acl)
 
-	if (context.integration?.sighup) {
+	if (context.integration?.onAclChange) {
-		await context.integration.sighup()
+		await context.integration.onAclChange(context.integration.context)
 	}
 
 	return json({ success: true })
@@ -152,7 +152,7 @@ export default function Page() {
 				</TabPanel>
 				<TabPanel id="diff">
 					<Monaco
-						variant="editor"
+						variant="diff"
 						language={data.aclType}
 						value={acl}
 						onChange={setAcl}
@@ -197,7 +197,7 @@ export default function Page() {
 						)}
 				Save
 			</Button>
-			<Button>
+			<Button onPress={() => { setAcl(data.currentAcl) }}>
 				Discard Changes
 			</Button>
 		</div>

app/routes/_data.dns._index/dialogs/dns.tsx

@@ -0,0 +1,121 @@
+import { Form, useSubmit } from '@remix-run/react'
+import { useMemo, useState } from 'react'
+
+import Code from '~/components/Code'
+import Dialog from '~/components/Dialog'
+import TextField from '~/components/TextField'
+import { cn } from '~/utils/cn'
+
+interface Props {
+	records: { name: string, type: 'A', value: string }[]
+}
+
+export default function AddDNS({ records }: Props) {
+	const submit = useSubmit()
+	const [name, setName] = useState('')
+	const [ip, setIp] = useState('')
+
+	const isDuplicate = useMemo(() => {
+		if (name.length === 0 || ip.length === 0) return false
+		const lookup = records.find(record => record.name === name)
+		if (!lookup) return false
+
+		return lookup.value === ip
+	}, [records, name, ip])
+
+	return (
+		<Dialog>
+			<Dialog.Button>
+				Add DNS record
+			</Dialog.Button>
+			<Dialog.Panel>
+				{close => (
+					<>
+						<Dialog.Title>
+							Add DNS record
+						</Dialog.Title>
+						<Dialog.Text>
+							Enter the domain and IP address for the new DNS record.
+						</Dialog.Text>
+						<Form
+							method="POST"
+							onSubmit={(event) => {
+								event.preventDefault()
+								if (!name || !ip) return
+
+								setName('')
+								setIp('')
+
+								submit({
+									'dns_config.extra_records': [
+										...records,
+										{
+											name,
+											type: 'A',
+											value: ip,
+										},
+									],
+								}, {
+									method: 'PATCH',
+									encType: 'application/json',
+								})
+
+								close()
+							}}
+						>
+							<TextField
+								label="Domain"
+								placeholder="test.example.com"
+								name="domain"
+								state={[name, setName]}
+								className={cn(
+									'mt-2',
+									isDuplicate && 'outline outline-red-500',
+								)}
+							/>
+							<TextField
+								label="IP Address"
+								placeholder="101.101.101.101"
+								name="ip"
+								state={[ip, setIp]}
+								className={cn(
+									isDuplicate && 'outline outline-red-500',
+								)}
+							/>
+							{isDuplicate
+								? (
+									<p className="text-sm opacity-50">
+										A record with the domain name
+										{' '}
+										<Code>{name}</Code>
+										{' '}
+										and IP address
+										{' '}
+										<Code>{ip}</Code>
+										{' '}
+										already exists.
+									</p>
+									)
+								: undefined}
+							<div className="mt-6 flex justify-end gap-2 mt-8">
+								<Dialog.Action
+									variant="cancel"
+									onPress={close}
+								>
+									Cancel
+								</Dialog.Action>
+								<Dialog.Action
+									variant="confirm"
+									onPress={close}
+									isDisabled={isDuplicate}
+								>
+									Add
+								</Dialog.Action>
+							</div>
+						</Form>
+					</>
+				)}
+			</Dialog.Panel>
+		</Dialog>
+	)
+}

app/routes/_data.dns._index/dns.tsx

@@ -0,0 +1,88 @@
+import { useSubmit } from '@remix-run/react'
+import { Button } from 'react-aria-components'
+
+import Code from '~/components/Code'
+import Link from '~/components/Link'
+import TableList from '~/components/TableList'
+import { cn } from '~/utils/cn'
+
+import AddDNS from './dialogs/dns'
+
+interface Props {
+	records: { name: string, type: 'A', value: string }[]
+	isDisabled: boolean
+}
+
+export default function DNS({ records, isDisabled }: Props) {
+	const submit = useSubmit()
+
+	return (
+		<div className="flex flex-col w-2/3">
+			<h1 className="text-2xl font-medium mb-4">DNS Records</h1>
+			<p className="text-gray-700 dark:text-gray-300">
+				Headscale supports adding custom DNS records to your Tailnet.
+				As of now, only
+				{' '}
+				<Code>A</Code>
+				{' '}
+				records are supported.
+				{' '}
+				<Link
+					to="https://headscale.net/dns-records/"
+					name="Headscale DNS Records documentation"
+				>
+					Learn More
+				</Link>
+			</p>
+			<div className="mt-4">
+				<TableList className="mb-8">
+					{records.length === 0
+						? (
+							<TableList.Item>
+								<p className="opacity-50 text-sm mx-auto">
+									No DNS records found
+								</p>
+							</TableList.Item>
+							)
+						: records.map((record, index) => (
+							<TableList.Item key={index}>
+								<div className="flex gap-24">
+									<div className="flex gap-2">
+										<p className="font-mono text-sm font-bold">{record.type}</p>
+										<p className="font-mono text-sm">{record.name}</p>
+									</div>
+									<p className="font-mono text-sm">{record.value}</p>
+								</div>
+								<Button
+									className={cn(
+										'text-sm',
+										'text-red-600 dark:text-red-400',
+										'hover:text-red-700 dark:hover:text-red-300',
+										isDisabled && 'opacity-50 cursor-not-allowed',
+									)}
+									isDisabled={isDisabled}
+									onPress={() => {
+										submit({
+											'dns_config.extra_records': records
+												.filter((_, i) => i !== index),
+										}, {
+											method: 'PATCH',
+											encType: 'application/json',
+										})
+									}}
+								>
+									Remove
+								</Button>
+							</TableList.Item>
+						))}
+				</TableList>
+
+				{isDisabled
+					? undefined
+					: (
+						<AddDNS records={records} />
+						)}
+			</div>
+		</div>
+	)
+}

app/routes/_data.dns._index/route.tsx

@@ -8,6 +8,7 @@ import { loadConfig, patchConfig } from '~/utils/config/headscale'
 import { getSession } from '~/utils/sessions'
 import { useLiveData } from '~/utils/useLiveData'
 
+import DNS from './dns'
 import Domains from './domains'
 import MagicModal from './magic'
 import Nameservers from './nameservers'
@@ -56,8 +57,8 @@ export async function action({ request }: ActionFunctionArgs) {
 	const data = await request.json() as Record<string, unknown>
 	await patchConfig(data)
 
-	if (context.integration?.restart) {
+	if (context.integration?.onConfigChange) {
-		await context.integration.restart()
+		await context.integration.onConfigChange(context.integration.context)
 	}
 
 	return json({ success: true })
@@ -90,6 +91,11 @@ export default function Page() {
 				isDisabled={!data.config.write}
 			/>
 
+			<DNS
+				records={data.extraRecords}
+				isDisabled={!data.config.write}
+			/>
+
 			<Domains
 				baseDomain={data.magicDns ? data.baseDomain : undefined}
 				searchDomains={data.searchDomains}

app/routes/_data.machines.$id.tsx

@@ -1,10 +1,11 @@
-import { type LoaderFunctionArgs } from '@remix-run/node'
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+import { ActionFunctionArgs, type LoaderFunctionArgs } from '@remix-run/node'
 import { Link, useLoaderData } from '@remix-run/react'
 
 import Attribute from '~/components/Attribute'
 import Card from '~/components/Card'
 import StatusCircle from '~/components/StatusCircle'
-import { type Machine, Route } from '~/types'
+import { type Machine, Route, User } from '~/types'
 import { cn } from '~/utils/cn'
 import { loadContext } from '~/utils/config/headplane'
 import { loadConfig } from '~/utils/config/headscale'
@@ -12,6 +13,7 @@ import { pull } from '~/utils/headscale'
 import { getSession } from '~/utils/sessions'
 import { useLiveData } from '~/utils/useLiveData'
 
+import { menuAction } from './_data.machines._index/action'
 import MenuOptions from './_data.machines._index/menu'
 
 export async function loader({ request, params }: LoaderFunctionArgs) {
@@ -30,22 +32,26 @@ export async function loader({ request, params }: LoaderFunctionArgs) {
 		}
 	}
 
-	const [machine, routes] = await Promise.all([
+	const [machine, routes, users] = await Promise.all([
-		// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
 		pull<{ node: Machine }>(`v1/node/${params.id}`, session.get('hsApiKey')!),
-		// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
 		pull<{ routes: Route[] }>('v1/routes', session.get('hsApiKey')!),
+		pull<{ users: User[] }>('v1/user', session.get('hsApiKey')!),
 	])
 
 	return {
 		machine: machine.node,
 		routes: routes.routes.filter(route => route.node.id === params.id),
+		users: users.users,
 		magic,
 	}
 }
 
+export async function action({ request }: ActionFunctionArgs) {
+	return menuAction(request)
+}
+
 export default function Page() {
-	const { machine, magic, routes } = useLoaderData<typeof loader>()
+	const { machine, magic, routes, users } = useLoaderData<typeof loader>()
 	useLiveData({ interval: 1000 })
 
 	const expired = machine.expiry === '0001-01-01 00:00:00'
@@ -87,6 +93,7 @@ export default function Page() {
 				<MenuOptions
 					machine={machine}
 					routes={routes}
+					users={users}
 					magic={magic}
 				/>
 			</div>

app/routes/_data.machines._index/action.tsx

@@ -0,0 +1,106 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+import { ActionFunctionArgs, json } from '@remix-run/node'
+
+import { del, post } from '~/utils/headscale'
+import { getSession } from '~/utils/sessions'
+
+export async function menuAction(request: ActionFunctionArgs['request']) {
+	const session = await getSession(request.headers.get('Cookie'))
+	if (!session.has('hsApiKey')) {
+		return json({ message: 'Unauthorized' }, {
+			status: 401,
+		})
+	}
+
+	const data = await request.formData()
+	if (!data.has('_method') || !data.has('id')) {
+		return json({ message: 'No method or ID provided' }, {
+			status: 400,
+		})
+	}
+
+	const id = String(data.get('id'))
+	const method = String(data.get('_method'))
+
+	switch (method) {
+		case 'delete': {
+			await del(`v1/node/${id}`, session.get('hsApiKey')!)
+			return json({ message: 'Machine removed' })
+		}
+
+		case 'expire': {
+			await post(`v1/node/${id}/expire`, session.get('hsApiKey')!)
+			return json({ message: 'Machine expired' })
+		}
+
+		case 'rename': {
+			if (!data.has('name')) {
+				return json({ message: 'No name provided' }, {
+					status: 400,
+				})
+			}
+
+			const name = String(data.get('name'))
+
+			await post(`v1/node/${id}/rename/${name}`, session.get('hsApiKey')!)
+			return json({ message: 'Machine renamed' })
+		}
+
+		case 'routes': {
+			if (!data.has('route') || !data.has('enabled')) {
+				return json({ message: 'No route or enabled provided' }, {
+					status: 400,
+				})
+			}
+
+			const route = String(data.get('route'))
+			const enabled = data.get('enabled') === 'true'
+			const postfix = enabled ? 'enable' : 'disable'
+
+			await post(`v1/routes/${route}/${postfix}`, session.get('hsApiKey')!)
+			return json({ message: 'Route updated' })
+		}
+
+		case 'move': {
+			if (!data.has('to')) {
+				return json({ message: 'No destination provided' }, {
+					status: 400,
+				})
+			}
+
+			const to = String(data.get('to'))
+
+			try {
+				await post(`v1/node/${id}/user?user=${to}`, session.get('hsApiKey')!)
+				return json({ message: `Moved node ${id} to ${to}` })
+			} catch {
+				return json({ message: `Failed to move node ${id} to ${to}` }, {
+					status: 500,
+				})
+			}
+		}
+
+		case 'tags': {
+			const tags = data.get('tags')?.toString()
+				.split(',') ?? []
+
+			try {
+				await post(`v1/node/${id}/tags`, session.get('hsApiKey')!, {
+					tags,
+				})
+
+				return json({ message: 'Tags updated' })
+			} catch {
+				return json({ message: 'Failed to update tags' }, {
+					status: 500,
+				})
+			}
+		}
+
+		default: {
+			return json({ message: 'Invalid method' }, {
+				status: 400,
+			})
+		}
+	}
+}

app/routes/_data.machines._index/dialogs/move.tsx

@@ -0,0 +1,119 @@
+import { Form, useSubmit } from '@remix-run/react'
+import { type Dispatch, type SetStateAction, useState } from 'react'
+
+import Code from '~/components/Code'
+import Dialog from '~/components/Dialog'
+import Select from '~/components/Select'
+import { type Machine, User } from '~/types'
+
+interface MoveProps {
+	readonly machine: Machine
+	readonly users: User[]
+	readonly state: [boolean, Dispatch<SetStateAction<boolean>>]
+	readonly magic?: string
+}
+
+export default function Move({ machine, state, magic, users }: MoveProps) {
+	const [owner, setOwner] = useState(machine.user.name)
+	const submit = useSubmit()
+
+	return (
+		<Dialog>
+			<Dialog.Panel control={state}>
+				{close => (
+					<>
+						<Dialog.Title>
+							Change the owner of
+							{' '}
+							{machine.givenName}
+						</Dialog.Title>
+						<Dialog.Text>
+							The owner of the machine is the user associated with it.
+							When MagicDNS is enabled, the username of the owner
+							will control the hostname of the machine.
+						</Dialog.Text>
+						<Form
+							method="POST"
+							onSubmit={(e) => {
+								submit(e.currentTarget)
+							}}
+						>
+							<input type="hidden" name="_method" value="move" />
+							<input type="hidden" name="id" value={machine.id} />
+							<Select
+								label="Owner"
+								name="to"
+								placeholder="Select a user"
+								state={[owner, setOwner]}
+							>
+								{users.map(user => (
+									<Select.Item key={user.id} id={user.name}>
+										{user.name}
+									</Select.Item>
+								))}
+							</Select>
+							{magic
+								? (
+										owner === machine.user.name
+											? (
+												<p className="text-sm text-gray-500 dark:text-gray-300 leading-tight">
+													This machine is accessible by the hostname
+													{' '}
+													<Code className="text-sm">
+														{machine.givenName}
+														.
+														{owner}
+														.
+														{magic}
+													</Code>
+													.
+												</p>
+												)
+											: (
+												<p className="text-sm text-gray-500 dark:text-gray-300 leading-tight">
+													This machine will be accessible by the hostname
+													{' '}
+													<Code className="text-sm">
+														{machine.givenName}
+														.
+														{owner}
+														.
+														{magic}
+													</Code>
+													{'. '}
+													The hostname
+													{' '}
+													<Code className="text-sm">
+														{machine.givenName}
+														.
+														{machine.user.name}
+														.
+														{magic}
+													</Code>
+													{' '}
+													will no longer point to this machine.
+												</p>
+												)
+									)
+								: undefined}
+							<div className="mt-6 flex justify-end gap-2 mt-6">
+								<Dialog.Action
+									variant="cancel"
+									onPress={close}
+								>
+									Cancel
+								</Dialog.Action>
+								<Dialog.Action
+									variant="confirm"
+									onPress={close}
+								>
+									Change owner
+								</Dialog.Action>
+							</div>
+						</Form>
+					</>
+				)}
+			</Dialog.Panel>
+		</Dialog>
+	)
+}

app/routes/_data.machines._index/dialogs/tags.tsx

@@ -0,0 +1,161 @@
+import { PlusIcon, XIcon } from '@primer/octicons-react'
+import { Form, useSubmit } from '@remix-run/react'
+import { type Dispatch, type SetStateAction, useState } from 'react'
+import { Button, Input } from 'react-aria-components'
+
+import Dialog from '~/components/Dialog'
+import Link from '~/components/Link'
+import { type Machine } from '~/types'
+import { cn } from '~/utils/cn'
+
+interface TagsProps {
+	readonly machine: Machine
+	readonly state: [boolean, Dispatch<SetStateAction<boolean>>]
+}
+
+export default function Tags({ machine, state }: TagsProps) {
+	const [tags, setTags] = useState(machine.forcedTags)
+	const [tag, setTag] = useState('')
+	const submit = useSubmit()
+
+	return (
+		<Dialog>
+			<Dialog.Panel control={state}>
+				{close => (
+					<>
+						<Dialog.Title>
+							Edit ACL tags for
+							{' '}
+							{machine.givenName}
+						</Dialog.Title>
+						<Dialog.Text>
+							ACL tags can be used to reference machines in your ACL policies.
+							See the
+							{' '}
+
+							<Link
+								to="https://tailscale.com/kb/1068/acl-tags"
+								name="Tailscale documentation"
+							>
+								Tailscale documentation
+							</Link>
+							{' '}
+							for more information.
+						</Dialog.Text>
+						<Form
+							method="POST"
+							onSubmit={(e) => {
+								submit(e.currentTarget)
+							}}
+						>
+							<input type="hidden" name="_method" value="tags" />
+							<input type="hidden" name="id" value={machine.id} />
+							<input type="hidden" name="tags" value={tags.join(',')} />
+							<div
+								className={cn(
+									'border border-ui-300 rounded-lg overflow-visible',
+									'dark:border-ui-700 dark:text-ui-300 mt-4',
+								)}
+							>
+								<div className="divide-y divide-ui-200 dark:divide-ui-600">
+									{tags.length === 0
+										? (
+											<div
+												className={cn(
+													'flex py-4 px-4 bg-ui-100 dark:bg-ui-800',
+													'items-center justify-center rounded-t-lg',
+													'text-ui-600 dark:text-ui-300',
+												)}
+											>
+												<p>
+													No tags are set on this machine.
+												</p>
+											</div>
+											)
+										: tags.map(item => (
+											<div
+												key={item}
+												id={item}
+												className={cn(
+													'px-2.5 py-1.5 flex',
+													'items-center justify-between',
+													'font-mono text-sm',
+												)}
+											>
+												{item}
+												<Button
+													className="rounded-full p-0 w-6 h-6"
+													onPress={() => {
+														setTags(tags.filter(tag => tag !== item))
+													}}
+												>
+													<XIcon className="w-4 h-4" />
+												</Button>
+											</div>
+										))}
+								</div>
+								<div
+									className={cn(
+										'flex px-2.5 py-1.5 w-full',
+										'border-t border-ui-300 dark:border-ui-700',
+										'rounded-b-lg justify-between items-center',
+										'dark:bg-ui-800 dark:text-ui-300',
+										'focus-within:ring-2 focus-within:ring-blue-600',
+										tag.length > 0 && !tag.startsWith('tag:')
+										&& 'outline outline-red-500',
+									)}
+								>
+									<Input
+										placeholder="tag:example"
+										className={cn(
+											'bg-transparent w-full',
+											'border-none focus:ring-0',
+											'focus:outline-none font-mono text-sm',
+											'dark:bg-transparent dark:text-ui-300',
+										)}
+										value={tag}
+										onChange={(e) => {
+											setTag(e.currentTarget.value)
+										}}
+									/>
+									<Button
+										className={cn(
+											'rounded-lg p-0 h-6 w-6',
+											!tag.startsWith('tag:')
+											&& 'opacity-50 cursor-not-allowed',
+										)}
+										isDisabled={
+											tag.length === 0
+											|| !tag.startsWith('tag:')
+											|| tags.includes(tag)
+										}
+										onPress={() => {
+											setTags([...tags, tag])
+											setTag('')
+										}}
+									>
+										<PlusIcon className="w-4 h-4" />
+									</Button>
+								</div>
+							</div>
+							<div className="mt-6 flex justify-end gap-2 mt-6">
+								<Dialog.Action
+									variant="cancel"
+									onPress={close}
+								>
+									Cancel
+								</Dialog.Action>
+								<Dialog.Action
+									variant="confirm"
+									onPress={close}
+								>
+									Save
+								</Dialog.Action>
+							</div>
+						</Form>
+					</>
+				)}
+			</Dialog.Panel>
+		</Dialog>
+	)
+}

app/routes/_data.machines._index/machine.tsx

@@ -4,7 +4,7 @@ import { Link } from '@remix-run/react'
 import Menu from '~/components/Menu'
 import StatusCircle from '~/components/StatusCircle'
 import { toast } from '~/components/Toaster'
-import { type Machine, type Route } from '~/types'
+import { type Machine, type Route, User } from '~/types'
 import { cn } from '~/utils/cn'
 
 import MenuOptions from './menu'
@@ -12,10 +12,11 @@ import MenuOptions from './menu'
 interface Props {
 	readonly machine: Machine
 	readonly routes: Route[]
+	readonly users: User[]
 	readonly magic?: string
 }
 
-export default function MachineRow({ machine, routes, magic }: Props) {
+export default function MachineRow({ machine, routes, magic, users }: Props) {
 	const expired = machine.expiry === '0001-01-01 00:00:00'
 		|| machine.expiry === '0001-01-01T00:00:00Z'
 		? false
@@ -142,6 +143,7 @@ export default function MachineRow({ machine, routes, magic }: Props) {
 				<MenuOptions
 					machine={machine}
 					routes={routes}
+					users={users}
 					magic={magic}
 				/>
 			</td>

app/routes/_data.machines._index/menu.tsx

@@ -2,25 +2,30 @@ import { KebabHorizontalIcon } from '@primer/octicons-react'
 import { useState } from 'react'
 
 import MenuComponent from '~/components/Menu'
-import { Machine, Route } from '~/types'
+import { Machine, Route, User } from '~/types'
 import { cn } from '~/utils/cn'
 
 import Delete from './dialogs/delete'
 import Expire from './dialogs/expire'
+import Move from './dialogs/move'
 import Rename from './dialogs/rename'
 import Routes from './dialogs/routes'
+import Tags from './dialogs/tags'
 
 interface MenuProps {
 	machine: Machine
 	routes: Route[]
+	users: User[]
 	magic?: string
 }
 
-export default function Menu({ machine, routes, magic }: MenuProps) {
+export default function Menu({ machine, routes, magic, users }: MenuProps) {
 	const renameState = useState(false)
 	const expireState = useState(false)
 	const removeState = useState(false)
 	const routesState = useState(false)
+	const moveState = useState(false)
+	const tagsState = useState(false)
 
 	const expired = machine.expiry === '0001-01-01 00:00:00'
 		|| machine.expiry === '0001-01-01T00:00:00Z'
@@ -51,6 +56,16 @@ export default function Menu({ machine, routes, magic }: MenuProps) {
 				routes={routes}
 				state={routesState}
 			/>
+			<Tags
+				machine={machine}
+				state={tagsState}
+			/>
+			<Move
+				machine={machine}
+				state={moveState}
+				users={users}
+				magic={magic}
+			/>
 
 			<MenuComponent>
 				<MenuComponent.Button
@@ -69,9 +84,12 @@ export default function Menu({ machine, routes, magic }: MenuProps) {
 					<MenuComponent.ItemButton control={routesState}>
 						Edit route settings
 					</MenuComponent.ItemButton>
-					<MenuComponent.Item className="opacity-50 hover:bg-transparent">
+					<MenuComponent.ItemButton control={tagsState}>
 						Edit ACL tags
-					</MenuComponent.Item>
+					</MenuComponent.ItemButton>
+					<MenuComponent.ItemButton control={moveState}>
+						Change owner
+					</MenuComponent.ItemButton>
 					{expired
 						? undefined
 						: (

app/routes/_data.machines._index/route.tsx

@@ -1,25 +1,27 @@
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
 import { InfoIcon } from '@primer/octicons-react'
-import { type ActionFunctionArgs, json, type LoaderFunctionArgs } from '@remix-run/node'
+import { type ActionFunctionArgs, type LoaderFunctionArgs } from '@remix-run/node'
 import { useLoaderData } from '@remix-run/react'
 import { Button, Tooltip, TooltipTrigger } from 'react-aria-components'
 
 import Code from '~/components/Code'
-import { type Machine, type Route } from '~/types'
+import { type Machine, type Route, User } from '~/types'
 import { cn } from '~/utils/cn'
 import { loadContext } from '~/utils/config/headplane'
 import { loadConfig } from '~/utils/config/headscale'
-import { del, post, pull } from '~/utils/headscale'
+import { pull } from '~/utils/headscale'
 import { getSession } from '~/utils/sessions'
 import { useLiveData } from '~/utils/useLiveData'
 
+import { menuAction } from './action'
 import MachineRow from './machine'
 
 export async function loader({ request }: LoaderFunctionArgs) {
 	const session = await getSession(request.headers.get('Cookie'))
-	const [machines, routes] = await Promise.all([
+	const [machines, routes, users] = await Promise.all([
 		pull<{ nodes: Machine[] }>('v1/node', session.get('hsApiKey')!),
 		pull<{ routes: Route[] }>('v1/routes', session.get('hsApiKey')!),
+		pull<{ users: User[] }>('v1/user', session.get('hsApiKey')!),
 	])
 
 	const context = await loadContext()
@@ -35,73 +37,13 @@ export async function loader({ request }: LoaderFunctionArgs) {
 	return {
 		nodes: machines.nodes,
 		routes: routes.routes,
+		users: users.users,
 		magic,
 	}
 }
 
 export async function action({ request }: ActionFunctionArgs) {
-	const session = await getSession(request.headers.get('Cookie'))
+	return menuAction(request)
-	if (!session.has('hsApiKey')) {
-		return json({ message: 'Unauthorized' }, {
-			status: 401,
-		})
-	}
-
-	const data = await request.formData()
-	if (!data.has('_method') || !data.has('id')) {
-		return json({ message: 'No method or ID provided' }, {
-			status: 400,
-		})
-	}
-
-	const id = String(data.get('id'))
-	const method = String(data.get('_method'))
-
-	switch (method) {
-		case 'delete': {
-			await del(`v1/node/${id}`, session.get('hsApiKey')!)
-			return json({ message: 'Machine removed' })
-		}
-
-		case 'expire': {
-			await post(`v1/node/${id}/expire`, session.get('hsApiKey')!)
-			return json({ message: 'Machine expired' })
-		}
-
-		case 'rename': {
-			if (!data.has('name')) {
-				return json({ message: 'No name provided' }, {
-					status: 400,
-				})
-			}
-
-			const name = String(data.get('name'))
-
-			await post(`v1/node/${id}/rename/${name}`, session.get('hsApiKey')!)
-			return json({ message: 'Machine renamed' })
-		}
-
-		case 'routes': {
-			if (!data.has('route') || !data.has('enabled')) {
-				return json({ message: 'No route or enabled provided' }, {
-					status: 400,
-				})
-			}
-
-			const route = String(data.get('route'))
-			const enabled = data.get('enabled') === 'true'
-			const postfix = enabled ? 'enable' : 'disable'
-
-			await post(`v1/routes/${route}/${postfix}`, session.get('hsApiKey')!)
-			return json({ message: 'Route updated' })
-		}
-
-		default: {
-			return json({ message: 'Invalid method' }, {
-				status: 400,
-			})
-		}
-	}
 }
 
 export default function Page() {
@@ -156,6 +98,7 @@ export default function Page() {
 							key={machine.id}
 							machine={machine}
 							routes={data.routes.filter(route => route.node.id === machine.id)}
+							users={data.users}
 							magic={data.magic}
 						/>
 					))}

app/routes/login.tsx

@@ -80,8 +80,7 @@ export async function action({ request }: ActionFunctionArgs) {
 				}),
 			},
 		})
-	} catch (error) {
+	} catch {
-		console.error(error)
 		return json({
 			error: 'Invalid API key',
 		})

app/utils/config/headplane.ts

@@ -8,14 +8,14 @@ import { resolve } from 'node:path'
 
 import { parse } from 'yaml'
 
-import { checkIntegration, Integration } from '~/integration'
+import { IntegrationFactory, loadIntegration } from '~/integration'
-
+import { HeadscaleConfig, loadConfig } from '~/utils/config/headscale'
-import { HeadscaleConfig, loadConfig } from './headscale'
+import log from '~/utils/log'
 
 export interface HeadplaneContext {
 	headscaleUrl: string
 	cookieSecret: string
-	integration: Integration | undefined
+	integration: IntegrationFactory | undefined
 
 	config: {
 		read: boolean
@@ -67,19 +67,26 @@ export async function loadContext(): Promise<HeadplaneContext> {
 	context = {
 		headscaleUrl,
 		cookieSecret,
-		integration: await checkIntegration(),
+		integration: await loadIntegration(),
 		config: contextData,
 		acl: await checkAcl(config),
 		oidc: await checkOidc(config),
 	}
 
-	console.log('Completed loading the Headplane Context')
+	log.info('CTXT', 'Starting Headplane with Context')
-	console.log('Headscale URL:', headscaleUrl)
+	log.info('CTXT', 'HEADSCALE_URL: %s', headscaleUrl)
-	console.log('Integration:', context.integration?.name ?? 'None')
+	log.info('CTXT', 'Integration: %s', context.integration?.name ?? 'None')
-	console.log('Config:', contextData.read ? `Found ${contextData.write ? '' : '(Read Only)'}` : 'Unavailable')
+	log.info('CTXT', 'Config: %s', contextData.read
-	console.log('ACL:', context.acl.read ? `Found ${context.acl.write ? '' : '(Read Only)'}` : 'Unavailable')
+		? `Found ${contextData.write ? '' : '(Read Only)'}`
-	console.log('OIDC:', context.oidc ? 'Configured' : 'Unavailable')
+		: 'Unavailable',
+	)
 
+	log.info('CTXT', 'ACL: %s', context.acl.read
+		? `Found ${context.acl.write ? '' : '(Read Only)'}`
+		: 'Unavailable',
+	)
+
+	log.info('CTXT', 'OIDC: %s', context.oidc ? 'Configured' : 'Unavailable')
 	return context
 }
 

app/utils/config/headscale.ts

@@ -12,6 +12,8 @@ import { resolve } from 'node:path'
 import { type Document, parseDocument } from 'yaml'
 import { z } from 'zod'
 
+import log from '~/utils/log'
+
 const goBool = z
 	.union([z.boolean(), z.literal('true'), z.literal('false')])
 	.transform((value) => {
@@ -183,14 +185,59 @@ export async function loadConfig(path?: string) {
 	configYaml = parseDocument(data)
 
 	if (process.env.HEADSCALE_CONFIG_UNSTRICT === 'true') {
-		config = configYaml.toJSON() as HeadscaleConfig
+		const loaded = configYaml.toJSON() as Record<string, unknown>
-		console.log('Loaded Headscale configuration in non-strict mode')
+		config = {
-		console.log('By using this mode you forfeit GitHub issue support')
+			...loaded,
-		console.log('This is very dangerous and comes with a few caveats:')
+			tls_letsencrypt_cache_dir: loaded.tls_letsencrypt_cache_dir ?? '/var/www/cache',
-		console.log('- Headplane could very easily crash')
+			tls_letsencrypt_challenge_type: loaded.tls_letsencrypt_challenge_type ?? 'HTTP-01',
-		console.log('- Headplane could break your Headscale installation')
+			grpc_listen_addr: loaded.grpc_listen_addr ?? ':50443',
-		console.log('- The UI could throw random errors/show incorrect data')
+			grpc_allow_insecure: loaded.grpc_allow_insecure ?? false,
-		console.log('')
+			randomize_client_port: loaded.randomize_client_port ?? false,
+			unix_socket: loaded.unix_socket ?? '/var/run/headscale/headscale.sock',
+			unix_socket_permission: loaded.unix_socket_permission ?? '0o770',
+			tuning: loaded.tuning ?? {
+				batch_change_delay: '800ms',
+				node_mapsession_buffered_chan_size: 30,
+			},
+
+			log: loaded.log ?? {
+				level: 'info',
+				format: 'text',
+			},
+
+			logtail: loaded.logtail ?? {
+				enabled: false,
+			},
+
+			cli: loaded.cli ?? {
+				timeout: '10s',
+				insecure: false,
+			},
+
+			prefixes: loaded.prefixes ?? {
+				allocation: 'sequential',
+				v4: '',
+				v6: '',
+			},
+
+			dns_config: loaded.dns_config ?? {
+				override_local_dns: false,
+				nameservers: [],
+				restricted_nameservers: {},
+				domains: [],
+				extra_records: [],
+				magic_dns: false,
+				base_domain: 'headscale.net',
+			},
+		} as HeadscaleConfig
+
+		log.warn('CFGX', 'Loaded Headscale configuration in non-strict mode')
+		log.warn('CFGX', 'By using this mode you forfeit GitHub issue support')
+		log.warn('CFGX', 'This is very dangerous and comes with a few caveats:')
+		log.warn('CFGX', 'Headplane could very easily crash')
+		log.warn('CFGX', 'Headplane could break your Headscale installation')
+		log.warn('CFGX', 'The UI could throw random errors/show incorrect data')
+		log.warn('CFGX', '')
 		return config
 	}
 
@@ -198,19 +245,19 @@ export async function loadConfig(path?: string) {
 		config = await HeadscaleConfig.parseAsync(configYaml.toJSON())
 	} catch (error) {
 		if (error instanceof z.ZodError) {
-			console.log('Failed to parse the Headscale configuration file!')
+			log.error('CFGX', 'Recieved invalid configuration file')
-			console.log('The following schema issues were found:')
+			log.error('CFGX', 'The following schema issues were found:')
 			for (const issue of error.issues) {
 				const path = issue.path.map(String).join('.')
 				const message = issue.message
 
-				console.log(`- '${path}': ${message}`)
+				log.error('CFGX', `  '${path}': ${message}`)
 			}
 
-			console.log('')
+			log.error('CFGX', '')
-			console.log('Please fix the configuration file and try again.')
+			log.error('CFGX', 'Resolve these issues and try again.')
-			console.log('Headplane will operate as if no config is present.')
+			log.error('CFGX', 'Headplane will operate without the config')
-			console.log('')
+			log.error('CFGX', '')
 		}
 
 		throw error

app/utils/log.ts

@@ -0,0 +1,23 @@
+export default {
+	info: (category: string, message: string, ...args: unknown[]) => {
+		defaultLog('INFO', category, message, ...args)
+	},
+
+	warn: (category: string, message: string, ...args: unknown[]) => {
+		defaultLog('WARN', category, message, ...args)
+	},
+
+	error: (category: string, message: string, ...args: unknown[]) => {
+		defaultLog('ERRO', category, message, ...args)
+	},
+}
+
+function defaultLog(
+	level: string,
+	category: string,
+	message: string,
+	...args: unknown[]
+) {
+	const date = new Date().toISOString()
+	console.log(`${date} (${level}) [${category}] ${message}`, ...args)
+}

docs/Advanced-Integration.md

@@ -1,145 +1,71 @@
 # Advanced Integration
 
-![Integration Preview](/assets/advanced-preview.png)
+The advanced integration methods unlock the full capabilities of Headplane.
+This is the closest you can get to the SaaS experience if you were paying for
+Tailscale.
 
-With the advanced integration it's possible to control Access Control Lists (ACLs) and the Headscale configuration via the Headplane UI.
+### Configuration Management
-Every single aspect of this integration is optional, meaning you can only use what you want.
-Additionally, with an integration provider, you can automatically reload the configuration or ACLs when they are changed.
 
-## Configuration Editing
+<picture>
+    <source
+        media="(prefers-color-scheme: dark)"
+        srcset="../assets/integration-dark.png"
+    >
+    <source
+        media="(prefers-color-scheme: light)"
+        srcset="../assets/integration-light.png"
+    >
+    <img
+        alt="Integration Preview"
+        src="../assets/integration-dark.png"
+    >
+</picture>
 
-When the configuration file is available to Headplane, the `DNS` and `Settings` tabs will become functional.
+The advanced integration allows you to manage the Headscale configuration via
-Similar to the Tailscale UI, you'll be able to edit the configuration without needing to manually edit the file.
+the Headplane UI. When the configuration is available for editing, the `DNS`
-Headscale will read the file from the path given in the `CONFIG_FILE` environment variable.
+and `Settings` tabs will become available. When using the Docker or Kubernetes
-By default this is set to `/etc/headscale/config.yaml`.
+integration, changes to the configuration file will be automatically applied
+to Headscale.
 
-> One important think to note is that environment variables always take priority over the configuration file.
+> By default, the configuration file is read from `/etc/headscale/config.yaml`.
-> The `HEADSCALE_URL`, `OIDC_CLIENT_ID`, `OIDFC_ISSUER`, and `OIDC_CLIENT_SECRET` will be preferred over the configuration file if available.
+This can be overridden by setting the `CONFIG_FILE` environment variable. Any
+variables including `HEADSCALE_URL`, `OIDC_CLIENT_ID`, `OIDC_ISSUER`, and
+`OIDC_CLIENT_SECRET` will take priority over the configuration file.
 
-## Access Control Lists (ACLs)
+### Access Control Lists (ACLs)
 
-![ACL Preview](/assets/acl-preview.png)
+<picture>
+    <source
+        media="(prefers-color-scheme: dark)"
+        srcset="../assets/acls-dark.png"
+    >
+    <source
+        media="(prefers-color-scheme: light)"
+        srcset="../assets/acls-light.png"
+    >
+    <img
+        alt="ACL Preview"
+        src="../assets/acls-dark.png"
+    >
+</picture>
 
-Headplane will enable the `Access Controls` tab if it is able to read an ACL file from Headscale.<br>
+The advanced integration allows you to manage the ACLs via the Headplane UI.
-The ACL file path is read from the following sources in order of priority:
+When the ACL file is available for editing, the `Access Controls` tab will
+become available. All of the integrations support automatic reloading of the
+ACLs when the file is changed.
 
-- **Environment Variable**: If you set the `ACL_FILE` environment variable, Headplane will read the file from that path.
+> By default, the ACL file is read from `/etc/headscale/acl_policy.json`. This
-- **Configuration Integration**: If you've set this up, then Headplane will read the `acl_policy_path` key from the configuration file.
+can be overridden by setting the `ACL_FILE` environment variable and is also
+overriden by the `acl_policy_path` key in the configuration file if set.
 
-## Automatic Configuration Reload
+## Deployment
-
-When the configuration file is changed, Headscale will need to be restarted to apply the changes.
-Similarly, when the ACL file is changed, Headscale will need to be sent a `SIGHUP` signal to reload the ACLs.
-Currently there are 2 integration providers that can do this for you:
-
-### Docker Integration
-
-To enable the Docker integration, set `HEADSCALE_INTEGRATION=docker` in the environment variables.
-Additionally, you'll need to pass in the `HEADSCALE_CONTAINER` environment variable.
-This should be either the name or ID of the Headscale container (you can retrieve this using `docker ps`).
-If the other integrations aren't setup, then Headplane will automatically disable the Docker integration.
-
-By default the integration will check for `/var/run/docker.sock`, however you can override this by
-setting the `DOCKER_SOCK` environment variable if you use a different configuration than the default.
-When setting `DOCKER_SOCK`, you'll need to include the protocol (e.g., `unix://` or `tcp://`).
-Headplane currently does not support the HTTPS protocol for the Docker socket.
-
-#### Example Docker Deployment
 
 Requirements:
 - Headscale 0.23 alpha or later
 - Headscale and Headplane need a Reverse Proxy (NGINX, Traefik, Caddy, etc)
-- Headscale needs to be running in a docker container
 
-Here's a good Docker Compose example:
+Currently there are 3 integration providers that can do this for you:
-```yaml
+- [Docker Integration](/docs/integration/Docker.md)
-version: '3.8'
+- [Kubernetes Integration](/docs/integration/Kubernetes.md)
-services:
+- [Native Linux Integration](/docs/integration/Native.md)
-  headscale:
-    image: 'headscale/headscale:0.23.0-alpha5'
-    container_name: 'headscale'
-    restart: 'unless-stopped'
-    command: 'serve'
-    volumes:
-      - './data:/var/lib/headscale'
-      - './configs:/etc/headscale'
-    ports:
-      - '8080:8080'
-    environment:
-      TZ: 'America/New_York'
-  headplane:
-    container_name: headplane
-    image: ghcr.io/tale/headplane:latest
-    restart: unless-stopped
-    volumes:
-      - './data:/var/lib/headscale'
-      - './configs:/etc/headscale'
-      - '/var/run/docker.sock:/var/run/docker.sock:ro'
-    ports:
-      - '3000:3000'
-    environment:
-      # This is always required for Headplane to work
-      COOKIE_SECRET: 'abcdefghijklmnopqrstuvwxyz'
 
-      HEADSCALE_INTEGRATION: 'docker'
-      HEADSCALE_CONTAINER: 'headscale'
-      DISABLE_API_KEY_LOGIN: 'true'
-      HOST: '0.0.0.0'
-      PORT: '3000'
-        
-      # Overrides the configuration file values if they are set in config.yaml
-      # If you want to share the same OIDC configuration you do not need this
-      OIDC_CLIENT_ID: 'headscale'
-      OIDC_ISSUER: 'https://sso.example.com'
-      OIDC_CLIENT_SECRET: 'super_secret_client_secret'
-
-      # This NEEDS to be set with OIDC, regardless of what's in the config
-      # This needs to be a very long-lived (999 day) API key used to create
-      # shorter ones for OIDC and allow the OIDC functionality to work
-      ROOT_API_KEY: 'abcdefghijklmnopqrstuvwxyz'
-```
-
-> For a breakdown of each configuration variable, please refer to the [Configuration](/docs/Configuration.md) guide. 
-> It explains what each variable does, how to configure them, and what the default values are.
-
-You may also choose to run it natively with the distributed binaries on the releases page.
-You'll need to manage running this yourself, and I would recommend making a `systemd` unit.
-
-### Native Linux Integration (Beta)
-
-The native integration for Linux relies on the `/proc` directory to locate the Headscale process.
-To enable it, set the `HEADSCALE_INTEGRATION=proc` value in the environment variables.
-Because of the way this integration works, it only supports automatically reloading ACLs.
-It's still very experimental and may not work in all environments.
-
-## Configuration Scenarios
-
-Since the configuration is fairly modular you can have a variety of different setups.
-This mostly applies to the Docker integration since the native integration isn't fully featured yet.
-Here are a few examples to inspire you and show you what can work and what can't:
-
-#### Full Integration
-Headscale runs in a container, Headplane can run in either a container or natively.
-Headplane is able to manage the configuration file and ACLs that Headscale uses.
-When changes happen, the Docker integration will automatically reload the configuration and ACLs.
-
-> Note that the full integration currently isn't possible if Headscale isn't running in a container.
-
-#### Configuration Only
-Headscale and Headplane can either run in containers or natively.
-Headplane is able to manage the configuration file and ACLs that Headscale uses.
-When changes are made, Headscale will need to be manually restarted to apply the changes.
-
-#### ACL Only
-Headscale and Headplane can either run in containers or natively.
-Headplane is able to manage the ACLs that Headscale uses.
-When changes are made, Headscale will need to be sent a `SIGHUP` to reload the ACLs.
-In this scenario, Headplane does not have access to the configuration file.
-
-#### Read-Only Configuration or ACLs
-If the configuration or ACLs are read-only, Headplane will not be able to manage them.
-Instead you'll only be able to view the configurations on the UI and need to edit them manually.
-
-#### No Integration
-If no integration is setup, Headplane will not be able to manage the configuration or ACLs.
-This is the simplest setup by far, however it also heavily reduces the capabilities of Headplane.

docs/Basic-Integration.md

@@ -1,12 +1,17 @@
 # Basic Integration
 
-The basic integration is not able to offer advanced features such as:
+The basic integration is the simplest way to get started with Headplane.
-- Automatic management of Access Control Lists (ACLs)
+It's more of a preview and is heavily limited in the features it can offer
-- Management of DNS settings for your tailnet
+when compared to the [Advanced Integration](/docs/Advanced-Integration.md).
-- Management of the Headscale configuration
 
-In order to support these features please refer to the [Advanced Integration](./docs/Advanced-Integration.md) guide.
+> Note that the Advanced integration is the recommend way to run
-Note that in order to use this deployment strategy you need to run Headscale in a Docker container.
+Headplane in a production environment.
+
+## Limitations
+- No automatic management of Access Control Lists (ACLs)
+- No management of DNS settings for your tailnet
+- No capability to edit the configuration
+- Limited support for OIDC authentication
 
 ## Deployment
 
@@ -14,11 +19,13 @@ Requirements:
 - Headscale 0.23 alpha or later
 - Headscale and Headplane need a Reverse Proxy (NGINX, Traefik, Caddy, etc)
 
-Headplane is currently best run in a Docker container due to the easy configuration.
+Docker heavily simplifies the deployment process, but this process can be
-Here's a very basic `docker-compose.yaml` file that utilizes each configuration variable.
+adopted to run natively. Follow the first section of the deployment guide
+in the [Native Integration](/docs/integration/Native.md#deployment) for a
+bare-metal or virtual machine deployment.
 
+Here is a simple Docker Compose deployment:
 ```yaml
-version: '3.8'
 services:
   headplane:
     container_name: headplane
@@ -42,12 +49,7 @@ services:
       PORT: '3000'
 ```
 
-> For a breakdown of each configuration variable, please refer to the [Configuration](/docs/Configuration.md) guide. 
+> For a breakdown of each configuration variable, please refer to the
-> It explains what each variable does, how to configure them, and what the default values are.
+[Configuration](/docs/Configuration.md) guide. 
-
+> It explains what each variable does, how to configure them, and what the
-You may also choose to run it natively with the distributed binaries on the releases page.
+default values are.
-You'll need to manage running this yourself, and I would recommend making a `systemd` unit.
-
-## ACL Configuration
-If you would like to get the web ACL configuration working, you'll need to pass the `ACL_FILE` environment variable.
-This should point to the path of the ACL file on the Headscale server (ie. `ACL_FILE=/etc/headscale/acl_policy.json`).

docs/integration/Docker.md

@@ -0,0 +1,86 @@
+## Docker Integration
+
+The Docker integration allows you to run Headplane and Headscale separately
+in a dockerized environment. It allows you to unlock full functionality such as
+automatic reloading of ACLs, DNS management, and Headscale configuration
+management.
+
+### Deployment
+
+> When running with the Docker integration, it's assumed that both Headscale and
+Headplane will run as containers. If you are running Headscale natively, then
+refer to the [Native Integration](/docs/integration/Native.md) guide.
+
+To enable the Docker integration, set the `HEADSCALE_INTEGRATION` environment
+variable to `docker`. You'll also need to supply `HEADSCALE_CONTAINER` with the
+name or ID of the Headscale container.
+
+By default Headplane uses `unix:///var/run/docker.sock` to connect to Docker.
+This can be overridden by setting the `DOCKER_SOCK` environment variable. For
+example, a remote socket would be `tcp://<my-remote-host>:2375`. When setting
+the variable, you'll need to specify the protocol (`unix://` or `tcp://`).
+
+> The `DOCKER_SOCK` variable does not support the HTTPS protocol.
+
+To enable the Docker integration, set `HEADSCALE_INTEGRATION=docker` in the environment variables.
+Additionally, you'll need to pass in the `HEADSCALE_CONTAINER` environment variable.
+This should be either the name or ID of the Headscale container (you can retrieve this using `docker ps`).
+If the other integrations aren't setup, then Headplane will automatically disable the Docker integration.
+
+By default the integration will check for `/var/run/docker.sock`, however you can override this by
+setting the `DOCKER_SOCK` environment variable if you use a different configuration than the default.
+When setting `DOCKER_SOCK`, you'll need to include the protocol (e.g., `unix://` or `tcp://`).
+Headplane currently does not support the HTTPS protocol for the Docker socket.
+
+Here's an example deployment using Docker Compose (recommended). Keep in mind
+that you'll NEED to setup a reverse proxy and this is incomplete:
+```yaml
+services:
+  headscale:
+    image: 'headscale/headscale:0.23.0-alpha12'
+    container_name: 'headscale'
+    restart: 'unless-stopped'
+    command: 'serve'
+    volumes:
+      - './data:/var/lib/headscale'
+      - './configs:/etc/headscale'
+    ports:
+      - '8080:8080'
+    environment:
+      TZ: 'America/New_York'
+  headplane:
+    container_name: headplane
+    image: ghcr.io/tale/headplane:latest
+    restart: unless-stopped
+    volumes:
+      - './data:/var/lib/headscale'
+      - './configs:/etc/headscale'
+      - '/var/run/docker.sock:/var/run/docker.sock:ro'
+    ports:
+      - '3000:3000'
+    environment:
+      # This is always required for Headplane to work
+      COOKIE_SECRET: 'abcdefghijklmnopqrstuvwxyz'
+
+      HEADSCALE_INTEGRATION: 'docker'
+      HEADSCALE_CONTAINER: 'headscale'
+      DISABLE_API_KEY_LOGIN: 'true'
+      HOST: '0.0.0.0'
+      PORT: '3000'
+        
+      # Overrides the configuration file values if they are set in config.yaml
+      # If you want to share the same OIDC configuration you do not need this
+      OIDC_CLIENT_ID: 'headscale'
+      OIDC_ISSUER: 'https://sso.example.com'
+      OIDC_CLIENT_SECRET: 'super_secret_client_secret'
+
+      # This NEEDS to be set with OIDC, regardless of what's in the config
+      # This needs to be a very long-lived (999 day) API key used to create
+      # shorter ones for OIDC and allow the OIDC functionality to work
+      ROOT_API_KEY: 'abcdefghijklmnopqrstuvwxyz'
+```
+
+> For a breakdown of each configuration variable, please refer to the
+[Configuration](/docs/Configuration.md) guide. 
+> It explains what each variable does, how to configure them, and what the
+default values are.

docs/integration/Kubernetes.md

@@ -0,0 +1,129 @@
+## Kubernetes Integration
+
+The Kubernetes integration allows you to run Headplane and Headscale together
+in a cluster. It allows you to unlock full functionality such as automatic
+reloading of ACLs, DNS management, and Headscale configuration management.
+
+Currently there are a few limitations to the Kubernetes integration:
+- Headplane and Headscale need to run in the same Pod and share the same
+  process space for the integration to work correctly due to a limitation in
+  the Kubernetes API.
+
+- The only supported methods of deploying the integration are through a
+  `Deployment` or `Pod` (more coming soon). You can still get around this with
+  the `HEADSCALE_INTEGRATION_UNSTRICT` variable, but it's not recommended.
+
+- The integration will assume that the Headscale container will always restart
+  because the integration relies on a system call that will exit the container.
+
+### Deployment
+
+In order to ensure Headplane can read Kubernetes resources, you'll need to
+grant additional RBAC permissions to the default `ServiceAccount` in the
+namespace. This can be done with the following:
+```yaml
+apiVersion: rbac.authorization.k8s.io/v1
+kind: Role
+metadata:
+  name: headplane-agent
+  namespace: default # Adjust namespace as needed
+rules:
+- apiGroups: ['']
+  resources: ['pods']
+  verbs: ['get', 'list']
+- apiGroups: ['apps']
+  resources: ['deployments']
+  verbs: ['get', 'list']
+---
+apiVersion: rbac.authorization.k8s.io/v1
+kind: RoleBinding
+metadata:
+  name: headplane-agent
+  namespace: default # Adjust namespace as needed
+roleRef:
+    apiGroup: rbac.authorization.k8s.io
+    kind: Role
+    name: headplane-agent
+subjects:
+- kind: ServiceAccount
+  name: default # If you use a different service account, change this
+  namespace: default # Adjust namespace as needed
+```
+
+Keep in mind you'll need to make `PersistentVolumeClaim`s for the data and that
+they need to be either `ReadWriteOnce` or `ReadWriteMany` depending on your
+topology. Additionally, you can abstract environment variables and configuration
+away into a `ConfigMap` or `Secret` for easier management.
+
+The important parts of this deployment are the `HEADSCALE_INTEGRATION` and
+`DEPLOYMENT_NAME` environment variables. The `HEADSCALE_INTEGRATION` variable
+should be set to `kubernetes` and the `POST_NAME` variable should be set
+to the name of the pod (done using the Downward API below).
+
+> If you are having issues with validating `shareProcessNamespace`, you can
+set `HEADSCALE_INTEGRATION_UNSTRICT` to `true` to disable the strict checks.
+
+A basic deployment of the integration would look like this. Keep in mind that
+you are responsible for setting up a reverse-proxy via an `Ingress` or `Service`
+otherwise Headplane will not work:
+```yaml
+apiVersion: apps/v1
+kind: Deployment
+metadata:
+  name: headplane
+  namespace: default # Adjust namespace as needed
+  labels:
+    app: headplane
+spec:
+  replicas: 1
+  selector:
+    matchLabels:
+      app: headplane
+  template:
+    metadata:
+      labels:
+        app: headplane
+    spec:
+      shareProcessNamespace: true
+      serviceAccountName: default
+      containers:
+      - name: headplane
+        image: ghcr.io/tale/headplane:latest
+        env:
+        - name: COOKIE_SECRET
+          value: 'abcdefghijklmnopqrstuvwxyz'
+        - name: HEADSCALE_INTEGRATION
+          value: 'kubernetes'
+        - name: POD_NAME
+          valueFrom:
+            fieldRef:
+              fieldPath: metadata.name
+        volumeMounts:
+        - name: headscale-config
+          mountPath: /etc/headscale
+
+      - name: headscale
+        image: headscale/headscale:0.23.0-alpha12
+        command: ['serve']
+        env:
+        - name: TZ
+          value: 'America/New_York'
+        volumeMounts:
+        - name: headscale-data
+          mountPath: /var/lib/headscale
+        - name: headscale-config
+          mountPath: /etc/headscale
+
+      volumes:
+        - name: headscale-data
+          persistentVolumeClaim:
+            claimName: headscale-data
+        - name: headscale-config
+          persistentVolumeClaim:
+            claimName: headscale-config
+```
+
+> For a breakdown of each configuration variable, please refer to the
+[Configuration](/docs/Configuration.md) guide. 
+> It explains what each variable does, how to configure them, and what the
+default values are.

docs/integration/Native.md

@@ -0,0 +1,28 @@
+## Native Integration
+
+The Native integration allows you to run both Headplane and Headscale on
+bare-metal servers or virtual machines. This integration is best suited for
+environments where Docker or Kubernetes are not available or not desired.
+
+Currently the Native integration only supports automatic reloading of ACLs. It
+cannot handle configuration changes as killing the `headscale` process can lead
+to undefined behavior or the service not restarting.
+
+### Deployment
+
+Follow the instructions to install Headscale from the
+[Linux Installation Guide](https://headscale.net/running-headscale-linux/). As
+of now, Headplane requires Node.js 20 to be installed on the system. Once you
+are ready, clone the repository (`git clone https://github.com/tale/headplane`),
+install dependencies (`npm install`), build the project (`npm run build`), and
+start the server (`npm start`).
+
+> If you'd like, you can turn this into a `systemd` unit to manage the service.
+> I plan to provide packages and unit files to make this easier in the future.
+
+When running Headplane, you'll need to set environment variables to configure
+the application. The `HEADSCALE_INTEGRATION` variable should be set to `proc`.
+
+> For a breakdown of each configuration variable, please refer to the
+[Configuration](/docs/Configuration.md) guide. 
+> It explains what each variable does, how to configure them, and what the default values are.

package.json

@@ -15,40 +15,41 @@
 		"@dnd-kit/modifiers": "^7.0.0",
 		"@dnd-kit/sortable": "^8.0.0",
 		"@dnd-kit/utilities": "^3.2.2",
+		"@kubernetes/client-node": "^0.21.0",
 		"@monaco-editor/react": "^4.6.0",
-		"@primer/octicons-react": "^19.9.0",
+		"@primer/octicons-react": "^19.10.0",
 		"@react-aria/toast": "3.0.0-beta.12",
 		"@react-stately/toast": "3.0.0-beta.4",
-		"@remix-run/node": "^2.9.2",
+		"@remix-run/node": "^2.10.2",
-		"@remix-run/react": "^2.9.2",
+		"@remix-run/react": "^2.10.2",
-		"@remix-run/serve": "^2.9.2",
+		"@remix-run/serve": "^2.10.2",
 		"clsx": "^2.1.1",
-		"isbot": "^5.1.8",
+		"isbot": "^5.1.11",
-		"oauth4webapi": "^2.10.4",
+		"oauth4webapi": "^2.11.1",
-		"react": "19.0.0-beta-26f2496093-20240514",
+		"react": "19.0.0-rc-f38c22b244-20240704",
 		"react-aria-components": "^1.2.1",
-		"react-dom": "19.0.0-beta-26f2496093-20240514",
+		"react-dom": "19.0.0-rc-f38c22b244-20240704",
 		"remix-utils": "^7.6.0",
 		"tailwind-merge": "^2.3.0",
 		"tailwindcss-react-aria-components": "^1.1.3",
-		"undici": "^6.18.2",
+		"undici": "^6.19.2",
 		"usehooks-ts": "^3.1.0",
-		"yaml": "^2.4.3",
+		"yaml": "^2.4.5",
 		"zod": "^3.23.8"
 	},
 	"devDependencies": {
-		"@remix-run/dev": "^2.9.2",
+		"@remix-run/dev": "^2.10.2",
 		"@types/react": "npm:types-react@beta",
 		"@types/react-dom": "npm:types-react-dom@beta",
 		"autoprefixer": "^10.4.19",
 		"babel-plugin-react-compiler": "0.0.0-experimental-c23de8d-20240515",
 		"eslint": "^8.57.0",
 		"eslint-config-tale": "^2.0.4",
-		"postcss": "^8.4.38",
+		"postcss": "^8.4.39",
-		"tailwindcss": "^3.4.3",
+		"tailwindcss": "^3.4.4",
 		"tailwindcss-animate": "^1.0.7",
-		"typescript": "^5.4.5",
+		"typescript": "^5.5.3",
-		"vite": "^5.2.12",
+		"vite": "^5.3.3",
 		"vite-plugin-babel": "^1.2.0",
 		"vite-tsconfig-paths": "^4.2.1"
 	},