fix: only sighup if we have docker

.github/workflows/publish.yaml

@@ -2,7 +2,7 @@ name: Publish Docker Image
 on:
   push:
     tags:
-      - 'v*'
+      - '*'
 
 jobs:
   publish:
@@ -39,3 +39,4 @@ jobs:
           push: true
           tags: ${{ steps.meta.outputs.tags }}
           labels: ${{ steps.meta.outputs.labels }}
+          platforms: linux/amd64, linux/arm64

README.md

@@ -8,7 +8,7 @@ This is a relatively tiny Remix app that aims to provide a usable GUI for the He
 It's still very early in it's development, however these are some of the features that are planned.
 
 - [ ] Editable tags, machine names, users, etc
-- [ ] ACL control through Docker integration
+- [x] ACL control through Docker integration
 - [x] OIDC based login for the web UI
 - [x] Automated API key regeneration
 - [x] Editable headscale configuration
@@ -16,6 +16,7 @@ It's still very early in it's development, however these are some of the feature
 ## Deployment
 - If you run Headscale in a Docker container, see the [Advanced Deployment](/docs/Advanced-Integration.md) guide.
 - If you run Headscale natively, see the [Basic Deployment](/docs/Basic-Integration.md) guide.
+- For more configuration options, refer to the [Configuration](/docs/Configuration.md) guide.
 
 ## Contributing
 If you would like to contribute, please install a relatively modern version of Node.js and PNPM.

app/components/Dropdown.tsx

@@ -0,0 +1,86 @@
+import { Menu, type MenuButtonProps, Transition } from '@headlessui/react'
+import clsx from 'clsx'
+import { Fragment, type HTMLProps, type ReactNode } from 'react'
+
+type Properties = {
+	readonly children: ReactNode;
+	readonly button: ReactNode;
+	// eslint-disable-next-line unicorn/no-keyword-prefix
+	readonly className?: string;
+	readonly width?: string;
+}
+
+function Dropdown(properties: Properties) {
+	return (
+		<div className={clsx('relative', properties.className)}>
+			<Menu>
+				<Button className='flex flex-col items-center'>
+					{properties.button}
+				</Button>
+				<Transition
+					as={Fragment}
+					enter='transition ease-out duration-100'
+					enterFrom='transform opacity-0 scale-95'
+					enterTo='transform opacity-100 scale-100'
+					leave='transition ease-in duration-75'
+					leaveFrom='transform opacity-100 scale-100'
+					leaveTo='transform opacity-0 scale-95'
+				>
+					<Menu.Items className={clsx(
+						'absolute right-0 mt-2 rounded-md',
+						'text-gray-700 dark:text-gray-300',
+						'bg-white dark:bg-zinc-800',
+						'overflow-hidden z-50',
+						'border border-gray-200 dark:border-zinc-700',
+						'divide-y divide-gray-200 dark:divide-zinc-700',
+						properties.width ?? 'w-36'
+					)}
+					>
+						{properties.children}
+					</Menu.Items>
+				</Transition>
+			</Menu>
+		</div>
+	)
+}
+
+function Button(properties: MenuButtonProps<'button'>) {
+	return (
+		<Menu.Button
+			{...properties}
+			className={clsx(
+				properties.className
+			)}
+		>
+			{properties.children}
+		</Menu.Button>
+	)
+}
+
+type ItemProperties = HTMLProps<HTMLDivElement> & {
+	variant?: 'static' | 'normal';
+}
+
+function Item(properties: ItemProperties) {
+	return (
+		<Menu.Item>
+			{({ active }) => (
+				<div
+					{...properties}
+					className={clsx(
+						'px-4 py-2 w-full',
+						'focus:outline-none focus:ring',
+						'focus:ring-gray-300 dark:focus:ring-zinc-700',
+						properties.className,
+						properties.variant !== 'static' && active
+							? 'bg-gray-100 dark:bg-zinc-500' : ''
+					)}
+				>
+					{properties.children}
+				</div>
+			)}
+		</Menu.Item>
+	)
+}
+
+export default Object.assign(Dropdown, { Item })

app/components/Modal.tsx

@@ -0,0 +1,158 @@
+import { Dialog, Transition } from '@headlessui/react'
+import { XMarkIcon } from '@heroicons/react/24/outline'
+import clsx from 'clsx'
+import { Fragment, type ReactNode, type SetStateAction, useState } from 'react'
+
+import Button from './Button'
+
+type HookParameters = {
+	title: string;
+	description?: string;
+	buttonText?: string;
+	variant?: 'danger' | 'confirm';
+	children?: ReactNode;
+
+	// Optional because the button submits
+	onConfirm?: () => void | Promise<void>;
+	onOpen?: () => void | Promise<void>;
+	onClose?: () => void | Promise<void>;
+}
+
+type Overrides = Omit<HookParameters, 'onOpen' | 'onClose'>
+
+type Properties = {
+	readonly isOpen: boolean;
+	readonly setIsOpen: (value: SetStateAction<boolean>) => void;
+	readonly parameters?: HookParameters;
+}
+
+export default function useModal(properties?: HookParameters) {
+	const [isOpen, setIsOpen] = useState(false)
+	const [liveProperties, setLiveProperties] = useState(properties)
+
+	return {
+		Modal: (
+			<Modal
+				isOpen={isOpen}
+				setIsOpen={setIsOpen}
+				parameters={liveProperties}
+			/>
+		),
+
+		open: (overrides?: Overrides) => {
+			if (!overrides && !properties) {
+				throw new Error('No properties provided')
+			}
+
+			setIsOpen(true)
+			if (properties?.onOpen) {
+				void properties.onOpen()
+			}
+
+			if (overrides) {
+				setLiveProperties(overrides)
+			}
+		},
+
+		close: () => {
+			setIsOpen(false)
+			if (properties?.onClose) {
+				void properties.onClose()
+			}
+		}
+	}
+}
+
+function Modal({ parameters, isOpen, setIsOpen }: Properties) {
+	if (!parameters) {
+		return
+	}
+
+	return (
+		<Transition
+			show={isOpen}
+			as={Fragment}
+		>
+			<Dialog
+				as='div'
+				className='relative z-50'
+				onClose={() => {
+					setIsOpen(false)
+				}}
+			>
+				<Transition.Child
+					enter='ease-out duration-100'
+					enterFrom='opacity-0'
+					enterTo='opacity-100'
+					leave='ease-in duration-75'
+					leaveFrom='opacity-100'
+					leaveTo='opacity-0'
+					as={Fragment}
+				>
+					<div className='fixed inset-0 bg-black/30' aria-hidden='true'/>
+				</Transition.Child>
+				<div className='fixed inset-0 flex w-screen items-center justify-center'>
+					<Transition.Child
+						enter='transition ease-out duration-100'
+						enterFrom='transform opacity-0 scale-95'
+						enterTo='transform opacity-100 scale-100'
+						leave='transition ease-in duration-75'
+						leaveFrom='transform opacity-100 scale-100'
+						leaveTo='transform opacity-0 scale-95'
+						as={Fragment}
+					>
+						<Dialog.Panel className={clsx(
+							'rounded-lg p-4 w-full max-w-md',
+							'bg-white dark:bg-black relative',
+							'border border-gray-200 dark:border-zinc-800'
+						)}
+						>
+							<XMarkIcon
+								className={clsx(
+									'absolute top-3 right-3 rounded-lg p-1.5',
+									'w-8 h-8 text-gray-500 dark:text-gray-400',
+									'hover:bg-gray-100 dark:hover:bg-zinc-800'
+								)}
+								onClick={() => {
+									setIsOpen(false)
+								}}
+							/>
+							<Dialog.Title className='text-xl font-bold'>
+								{parameters.title}
+							</Dialog.Title>
+							{parameters.description ? (
+								<Dialog.Description className='text-gray-500 dark:text-gray-400 mt-1'>
+									{parameters.description}
+								</Dialog.Description>
+							) : undefined}
+							{parameters.children ? (
+								<div className='w-full mt-4'>
+									{parameters.children}
+								</div>
+							) : undefined}
+							<Button
+								variant='emphasized'
+								type='submit'
+								className={clsx(
+									'w-full mt-12',
+									parameters.variant === 'danger'
+										? 'bg-red-800 dark:bg-red-500 focus:ring-red-500 dark:focus:ring-red-500'
+										: ''
+								)}
+								onClick={async () => {
+									if (parameters.onConfirm) {
+										await parameters.onConfirm()
+									}
+
+									setIsOpen(false)
+								}}
+							>
+								{parameters.buttonText ?? 'Confirm'}
+							</Button>
+						</Dialog.Panel>
+					</Transition.Child>
+				</div>
+			</Dialog>
+		</Transition>
+	)
+}

app/root.tsx

@@ -22,11 +22,11 @@ export const links: LinksFunction = () => [
 ]
 
 export async function loader() {
-	await getContext()
+	const context = await getContext()
 	registerConfigWatcher()
 
-	if (!process.env.HEADSCALE_URL) {
-		throw new Error('The HEADSCALE_URL environment variable is required')
+	if (context.headscaleUrl.length === 0) {
+		throw new Error('No headscale URL was provided either by the HEADSCALE_URL environment variable or the config file')
 	}
 
 	if (!process.env.COOKIE_SECRET) {

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

@@ -0,0 +1,126 @@
+import { json } from '@codemirror/lang-json'
+import { yaml } from '@codemirror/lang-yaml'
+import { useFetcher } from '@remix-run/react'
+import { githubDark, githubLight } from '@uiw/codemirror-theme-github'
+import CodeMirror from '@uiw/react-codemirror'
+import clsx from 'clsx'
+import { useEffect, useMemo, useState } from 'react'
+import CodeMirrorMerge from 'react-codemirror-merge'
+import { toast } from 'react-hot-toast/headless'
+
+import Button from '~/components/Button'
+import Spinner from '~/components/Spinner'
+
+import Fallback from './fallback'
+
+type EditorProperties = {
+	readonly acl: string;
+	readonly setAcl: (acl: string) => void;
+	readonly mode: 'edit' | 'diff';
+
+	readonly data: {
+		hasAclWrite: boolean;
+		currentAcl: string;
+		aclType: string;
+	};
+}
+
+export default function Editor({ data, acl, setAcl, mode }: EditorProperties) {
+	const [light, setLight] = useState(false)
+	const [loading, setLoading] = useState(true)
+
+	const fetcher = useFetcher()
+	const aclType = useMemo(() => data.aclType === 'json' ? json() : yaml(), [data.aclType])
+
+	useEffect(() => {
+		const theme = window.matchMedia('(prefers-color-scheme: light)')
+		setLight(theme.matches)
+
+		theme.addEventListener('change', theme => {
+			setLight(theme.matches)
+		})
+
+		// Prevents the FOUC
+		setLoading(false)
+	}, [])
+
+	return (
+		<>
+			<div className={clsx(
+				'border border-gray-200 dark:border-gray-700',
+				'rounded-b-lg rounded-tr-lg mb-2 overflow-hidden'
+			)}
+			>
+				{loading ? (
+					<Fallback acl={acl} where='client'/>
+				) : (
+					mode === 'edit' ? (
+						<CodeMirror
+							value={acl}
+							className='h-editor text-sm'
+							theme={light ? githubLight : githubDark}
+							extensions={[aclType]}
+							readOnly={!data.hasAclWrite}
+							onChange={value => {
+								setAcl(value)
+							}}
+						/>
+					) : (
+						<div
+							className='overflow-y-scroll'
+							style={{ height: 'calc(100vh - 20rem)' }}
+						>
+							<CodeMirrorMerge
+								theme={light ? githubLight : githubDark}
+								orientation='a-b'
+							>
+								<CodeMirrorMerge.Original
+									readOnly
+									value={data.currentAcl}
+									extensions={[aclType]}
+								/>
+								<CodeMirrorMerge.Modified
+									readOnly
+									value={acl}
+									extensions={[aclType]}
+								/>
+							</CodeMirrorMerge>
+						</div>
+					)
+				)}
+			</div>
+
+			<Button
+				variant='emphasized'
+				className='text-sm w-fit mr-2'
+				onClick={() => {
+					fetcher.submit({
+						acl
+					}, {
+						method: 'PATCH',
+						encType: 'application/json'
+					})
+
+					toast('Updated tailnet ACL policy')
+				}}
+			>
+				{fetcher.state === 'idle' ? undefined : (
+					<Spinner className='w-3 h-3'/>
+				)}
+				Save
+			</Button>
+			<Button
+				variant='emphasized'
+				className={clsx(
+					'text-sm w-fit bg-gray-100 dark:bg-transparent',
+					'border border-gray-200 dark:border-gray-700'
+				)}
+				onClick={() => {
+					setAcl(data.currentAcl)
+				}}
+			>
+				Discard Changes
+			</Button>
+		</>
+	)
+}

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

@@ -0,0 +1,51 @@
+import clsx from 'clsx'
+
+import Button from '~/components/Button'
+
+type FallbackProperties = {
+	readonly acl: string;
+	readonly where: 'client' | 'server';
+}
+
+export default function Fallback({ acl, where }: FallbackProperties) {
+	return (
+		<>
+			<div className={clsx(
+				where === 'server' ? 'mb-2 overflow-hidden rounded-tr-lg rounded-b-lg' : '',
+				where === 'server' ? 'border border-gray-200 dark:border-gray-700' : ''
+			)}
+			>
+				<textarea
+					readOnly
+					className={clsx(
+						'w-full h-editor font-mono resize-none',
+						'text-sm text-gray-600 dark:text-gray-300',
+						'pl-10 pt-1 leading-snug'
+					)}
+					value={acl}
+				/>
+			</div>
+			{where === 'server' ? (
+				<>
+					<Button
+						disabled
+						variant='emphasized'
+						className='text-sm w-fit mr-2'
+					>
+						Save
+					</Button>
+					<Button
+						disabled
+						variant='emphasized'
+						className={clsx(
+							'text-sm w-fit bg-gray-100 dark:bg-transparent',
+							'border border-gray-200 dark:border-gray-700'
+						)}
+					>
+						Discard Changes
+					</Button>
+				</>
+			) : undefined}
+		</>
+	)
+}

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

@@ -1,13 +1,186 @@
-import { CubeTransparentIcon } from '@heroicons/react/24/outline'
+import { Tab } from '@headlessui/react'
+import { BeakerIcon, CubeTransparentIcon, EyeIcon, PencilSquareIcon } from '@heroicons/react/24/outline'
+import { type ActionFunctionArgs, json } from '@remix-run/node'
+import { useLoaderData } from '@remix-run/react'
+import clsx from 'clsx'
+import { useState } from 'react'
+import { Fragment } from 'react/jsx-runtime'
+import { ClientOnly } from 'remix-utils/client-only'
+
+import Notice from '~/components/Notice'
+import { getAcl, getContext, patchAcl } from '~/utils/config'
+import { sighupHeadscale } from '~/utils/docker'
+import { getSession } from '~/utils/sessions'
+
+import Editor from './editor'
+import Fallback from './fallback'
+
+export async function loader() {
+	const context = await getContext()
+	if (!context.hasAcl) {
+		throw new Error('No ACL configuration is available')
+	}
+
+	const { data, type } = await getAcl()
+	return {
+		hasAclWrite: context.hasAclWrite,
+		currentAcl: data,
+		aclType: type
+	}
+}
+
+export async function action({ request }: ActionFunctionArgs) {
+	const session = await getSession(request.headers.get('Cookie'))
+	if (!session.has('hsApiKey')) {
+		return json({ success: false }, {
+			status: 401
+		})
+	}
+
+	const context = await getContext()
+	if (!context.hasAclWrite) {
+		return json({ success: false }, {
+			status: 403
+		})
+	}
+
+	const data = await request.json() as { acl: string }
+	await patchAcl(data.acl)
+
+	if (context.hasDockerSock) {
+		await sighupHeadscale()
+	}
+
+	return json({ success: true })
+}
 
 export default function Page() {
+	const data = useLoaderData<typeof loader>()
+	const [acl, setAcl] = useState(data.currentAcl)
+
 	return (
-		<div className='w-96 mx-auto flex flex-col justify-center items-center text-center'>
-			<CubeTransparentIcon className='w-32 h-32 text-gray-500'/>
-			<p className='text-lg mt-8'>
-				Access Control Lists are currently unavailable.
-				They will be available in a future release.
+		<div className='mx-16'>
+			{data.hasAclWrite ? undefined : (
+				<div className='mb-4'>
+					<Notice>
+						The ACL policy file is readonly to Headplane.
+						You will not be able to make changes here.
+					</Notice>
+				</div>
+			)}
+
+			<h1 className='text-2xl font-medium mb-4'>
+				Access Control List (ACL)
+			</h1>
+
+			<p className='mb-4 max-w-prose'>
+				The ACL file is used to define the access control rules for your network.
+				You can find more information about the ACL file in the Tailscale documentation.
+				{' '}
+				<a
+					target='_blank'
+					rel='noreferrer'
+					href='https://tailscale.com/kb/1018/acls'
+					className='text-blue-500 dark:text-blue-400 hover:underline'
+				>
+					More information
+				</a>
 			</p>
+
+			<Tab.Group>
+				<Tab.List className={clsx(
+					'flex border-t border-gray-200 dark:border-gray-700',
+					'w-fit rounded-t-lg overflow-hidden',
+					'text-gray-400 dark:text-gray-500'
+				)}
+				>
+					<Tab as={Fragment}>
+						{({ selected }) => (
+							<button
+								type='button'
+								className={clsx(
+									'px-4 py-2 rounded-tl-lg',
+									'focus:outline-none flex items-center gap-2',
+									'border-l border-gray-200 dark:border-gray-700',
+									selected ? 'text-gray-900 dark:text-gray-100' : ''
+								)}
+							>
+								<PencilSquareIcon className='w-5 h-5'/>
+								<p>
+									Edit file
+								</p>
+							</button>
+						)}
+					</Tab>
+					<Tab as={Fragment}>
+						{({ selected }) => (
+							<button
+								type='button'
+								className={clsx(
+									'px-4 py-2',
+									'focus:outline-none flex items-center gap-2',
+									'border-x border-gray-200 dark:border-gray-700',
+									selected ? 'text-gray-900 dark:text-gray-100' : ''
+								)}
+							>
+								<EyeIcon className='w-5 h-5'/>
+								<p>
+									Preview changes
+								</p>
+							</button>
+						)}
+					</Tab>
+					<Tab as={Fragment}>
+						{({ selected }) => (
+							<button
+								type='button'
+								className={clsx(
+									'px-4 py-2 rounded-tr-lg',
+									'focus:outline-none flex items-center gap-2',
+									'border-r border-gray-200 dark:border-gray-700',
+									selected ? 'text-gray-900 dark:text-gray-100' : ''
+								)}
+							>
+								<BeakerIcon className='w-5 h-5'/>
+								<p>
+									Preview rules
+								</p>
+							</button>
+						)}
+					</Tab>
+				</Tab.List>
+				<Tab.Panels>
+					<Tab.Panel>
+						<ClientOnly fallback={<Fallback acl={acl} where='server'/>}>
+							{() => (
+								<Editor data={data} acl={acl} setAcl={setAcl} mode='edit'/>
+							)}
+						</ClientOnly>
+					</Tab.Panel>
+					<Tab.Panel>
+						<ClientOnly fallback={<Fallback acl={acl} where='server'/>}>
+							{() => (
+								<Editor data={data} acl={acl} setAcl={setAcl} mode='diff'/>
+							)}
+						</ClientOnly>
+					</Tab.Panel>
+					<Tab.Panel>
+						<div
+							className={clsx(
+								'border border-gray-200 dark:border-gray-700',
+								'rounded-b-lg rounded-tr-lg mb-4 overflow-hidden',
+								'p-16 flex flex-col items-center justify-center'
+							)}
+						>
+							<CubeTransparentIcon className='w-24 h-24 text-gray-300 dark:text-gray-500'/>
+							<p className='w-1/2 text-center mt-4'>
+								The Preview rules is very much still a work in progress.
+								It is a bit complicated to implement right now but hopefully it will be available soon.
+							</p>
+						</div>
+					</Tab.Panel>
+				</Tab.Panels>
+			</Tab.Group>
 		</div>
 	)
 }

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

@@ -1,9 +1,7 @@
-import { Dialog } from '@headlessui/react'
 import { useFetcher } from '@remix-run/react'
-import clsx from 'clsx'
-import { useState } from 'react'
 
 import Button from '~/components/Button'
+import useModal from '~/components/Modal'
 import Spinner from '~/components/Spinner'
 
 type Properties = {
@@ -13,8 +11,22 @@ type Properties = {
 }
 
 export default function Modal({ isEnabled, disabled }: Properties) {
-	const [isOpen, setIsOpen] = useState(false)
 	const fetcher = useFetcher()
+	const { Modal, open } = useModal({
+		title: `${isEnabled ? 'Disable' : 'Enable'} Magic DNS`,
+		variant: isEnabled ? 'danger' : 'confirm',
+		buttonText: `${isEnabled ? 'Disable' : 'Enable'} Magic DNS`,
+		description: 'Devices will no longer be accessible via your tailnet domain. The search domain will also be disabled.',
+		onConfirm: () => {
+			fetcher.submit({
+				// eslint-disable-next-line @typescript-eslint/naming-convention
+				'dns_config.magic_dns': !isEnabled
+			}, {
+				method: 'PATCH',
+				encType: 'application/json'
+			})
+		}
+	})
 
 	return (
 		<>
@@ -23,7 +35,7 @@ export default function Modal({ isEnabled, disabled }: Properties) {
 				className='w-fit text-sm'
 				disabled={disabled}
 				onClick={() => {
-					setIsOpen(true)
+					open()
 				}}
 			>
 				{fetcher.state === 'idle' ? undefined : (
@@ -31,46 +43,7 @@ export default function Modal({ isEnabled, disabled }: Properties) {
 				)}
 				{isEnabled ? 'Disable' : 'Enable'} Magic DNS
 			</Button>
-			<Dialog
-				className='relative z-50'
-				open={isOpen} onClose={() => {
-					setIsOpen(false)
-				}}
-			>
-				<div className='fixed inset-0 bg-black/30' aria-hidden='true'/>
-				<div className='fixed inset-0 flex w-screen items-center justify-center'>
-					<Dialog.Panel className='bg-white rounded-lg p-4 w-full max-w-md'>
-						<Dialog.Title className='text-lg font-bold'>
-							{isEnabled ? 'Disable' : 'Enable'} Magic DNS
-						</Dialog.Title>
-						<Dialog.Description className='text-gray-500 dark:text-gray-400'>
-							Devices will no longer be accessible via your tailnet domain.
-							The search domain will also be disabled.
-						</Dialog.Description>
-						<Button
-							variant='emphasized'
-							type='submit'
-							className={clsx(
-								'w-full mt-12',
-								isEnabled ? 'bg-red-800 dark:bg-red-500' : ''
-							)}
-							onClick={() => {
-								fetcher.submit({
-									// eslint-disable-next-line @typescript-eslint/naming-convention
-									'dns_config.magic_dns': !isEnabled
-								}, {
-									method: 'PATCH',
-									encType: 'application/json'
-								})
-
-								setIsOpen(false)
-							}}
-						>
-							{isEnabled ? 'Disable' : 'Enable'}
-						</Button>
-					</Dialog.Panel>
-				</div>
-			</Dialog>
+			{Modal}
 		</>
 	)
 }

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

@@ -7,6 +7,7 @@ import { useState } from 'react'
 import Button from '~/components/Button'
 import Code from '~/components/Code'
 import Input from '~/components/Input'
+import useModal from '~/components/Modal'
 import Spinner from '~/components/Spinner'
 
 type Properties = {
@@ -16,9 +17,31 @@ type Properties = {
 }
 
 export default function Modal({ name, disabled }: Properties) {
-	const [isOpen, setIsOpen] = useState(false)
 	const [newName, setNewName] = useState(name)
 	const fetcher = useFetcher()
+	const { Modal, open } = useModal({
+		title: 'Rename Tailnet',
+		description: 'Keep in mind that changing this can lead to all sorts of unexpected behavior and may break existing devices in your tailnet.',
+		buttonText: 'Rename',
+		children: (
+			<Input
+				type='text'
+				className='font-mono mt-4'
+				value={newName}
+				onChange={event => {
+					setNewName(event.target.value)
+				}}
+			/>
+		),
+		onConfirm: () => {
+			fetcher.submit({
+				'dns_config.base_domain': newName
+			}, {
+				method: 'PATCH',
+				encType: 'application/json'
+			})
+		}
+	})
 
 	return (
 		<div className='flex flex-col w-2/3'>
@@ -47,7 +70,7 @@ export default function Modal({ name, disabled }: Properties) {
 				className='text-sm w-fit'
 				disabled={disabled}
 				onClick={() => {
-					setIsOpen(true)
+					open()
 				}}
 			>
 				{fetcher.state === 'idle' ? undefined : (
@@ -55,50 +78,7 @@ export default function Modal({ name, disabled }: Properties) {
 				)}
 				Rename Tailnet...
 			</Button>
-			<Dialog
-				className='relative z-50'
-				open={isOpen} onClose={() => {
-					setIsOpen(false)
-				}}
-			>
-				<div className='fixed inset-0 bg-black/30' aria-hidden='true'/>
-				<div className='fixed inset-0 flex w-screen items-center justify-center'>
-					<Dialog.Panel className='bg-white rounded-lg p-4 w-full max-w-md dark:bg-zinc-800'>
-						<Dialog.Title className='text-lg font-bold'>
-							Rename {name}
-						</Dialog.Title>
-						<Dialog.Description className='text-gray-500 dark:text-gray-400'>
-							Keep in mind that changing this can lead to all sorts
-							of unexpected behavior and may break existing devices
-							in your tailnet.
-						</Dialog.Description>
-						<Input
-							type='text'
-							className='font-mono mt-4'
-							value={newName}
-							onChange={event => {
-								setNewName(event.target.value)
-							}}
-						/>
-						<button
-							type='submit'
-							className='rounded-lg py-2 bg-gray-800 text-white w-full mt-2'
-							onClick={() => {
-								fetcher.submit({
-									'dns_config.base_domain': newName
-								}, {
-									method: 'PATCH',
-									encType: 'application/json'
-								})
-
-								setIsOpen(false)
-							}}
-						>
-							Rename
-						</button>
-					</Dialog.Panel>
-				</div>
-			</Dialog>
+			{Modal}
 		</div>
 	)
 }

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

@@ -12,6 +12,7 @@ import Spinner from '~/components/Spinner'
 import TableList from '~/components/TableList'
 import { getConfig, getContext, patchConfig } from '~/utils/config'
 import { restartHeadscale } from '~/utils/docker'
+import { getSession } from '~/utils/sessions'
 import { useLiveData } from '~/utils/useLiveData'
 
 import Domains from './domains'
@@ -45,9 +46,18 @@ export async function loader() {
 }
 
 export async function action({ request }: ActionFunctionArgs) {
+	const session = await getSession(request.headers.get('Cookie'))
+	if (!session.has('hsApiKey')) {
+		return json({ success: false }, {
+			status: 401
+		})
+	}
+
 	const context = await getContext()
 	if (!context.hasConfigWrite) {
-		return json({ success: false })
+		return json({ success: false }, {
+			status: 403
+		})
 	}
 
 	const data = await request.json() as Record<string, unknown>

app/routes/_data.machines._index.tsx

@@ -1,98 +1,208 @@
 /* eslint-disable unicorn/filename-case */
-import { ClipboardIcon } from '@heroicons/react/24/outline'
-import { type LoaderFunctionArgs } from '@remix-run/node'
-import { Link, useLoaderData } from '@remix-run/react'
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+
+import { ClipboardIcon, EllipsisHorizontalIcon } from '@heroicons/react/24/outline'
+import { type ActionFunctionArgs, json, type LoaderFunctionArgs } from '@remix-run/node'
+import { Link, useFetcher, useLoaderData } from '@remix-run/react'
 import clsx from 'clsx'
+import { useState } from 'react'
 import { toast } from 'react-hot-toast/headless'
 
+import Dropdown from '~/components/Dropdown'
+import useModal from '~/components/Modal'
 import StatusCircle from '~/components/StatusCircle'
 import { type Machine } from '~/types'
-import { pull } from '~/utils/headscale'
+import { del, pull } from '~/utils/headscale'
 import { getSession } from '~/utils/sessions'
 import { useLiveData } from '~/utils/useLiveData'
 
 export async function loader({ request }: LoaderFunctionArgs) {
 	const session = await getSession(request.headers.get('Cookie'))
 
-	// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
 	const data = await pull<{ nodes: Machine[] }>('v1/node', session.get('hsApiKey')!)
 	return data.nodes
 }
 
+export async function action({ request }: ActionFunctionArgs) {
+	const data = await request.json() as { id?: string }
+	if (!data.id) {
+		return json({ message: 'No ID provided' }, {
+			status: 400
+		})
+	}
+
+	const session = await getSession(request.headers.get('Cookie'))
+	if (!session.has('hsApiKey')) {
+		return json({ message: 'Unauthorized' }, {
+			status: 401
+		})
+	}
+
+	await del(`v1/node/${data.id}`, session.get('hsApiKey')!)
+	return json({ message: 'Machine removed' })
+}
+
 export default function Page() {
-	const data = useLoaderData<typeof loader>()
 	useLiveData({ interval: 3000 })
+	const data = useLoaderData<typeof loader>()
+	const fetcher = useFetcher()
+
+	const { Modal, open } = useModal()
 
 	return (
-		<table className='table-auto w-full rounded-lg'>
-			<thead className='text-gray-500 dark:text-gray-400'>
-				<tr className='text-left uppercase text-sm font-bold'>
-					<th className='pl-4'>Name</th>
-					<th>IP Addresses</th>
-					<th>Last Seen</th>
-				</tr>
-			</thead>
-			<tbody className={clsx(
-				'divide-y divide-zinc-200 dark:divide-zinc-700 align-top',
-				'border-t border-zinc-200 dark:border-zinc-700'
-			)}
-			>
-				{data.map(machine => {
-					const tags = [...machine.forcedTags, ...machine.validTags]
-
-					return (
-						<tr key={machine.id} className='hover:bg-zinc-100 dark:hover:bg-zinc-800'>
-							<td className='py-2 pl-4'>
-								<Link to={`/machines/${machine.id}`}>
-									<h1>{machine.givenName}</h1>
-									<span className='text-sm font-mono text-gray-500 dark:text-gray-400'>
-										{machine.name}
-									</span>
-									<div className='flex gap-1 mt-1'>
-										{tags.map(tag => (
-											<span key={tag} className='text-xs bg-gray-200 text-gray-600 rounded-sm px-1 py-0.5'>
-												{tag}
-											</span>
-										))}
-									</div>
-								</Link>
-							</td>
-							<td className='pt-2 pb-4 font-mono text-gray-600 dark:text-gray-300'>
-								{machine.ipAddresses.map((ip, index) => (
-									<button
-										key={ip}
-										type='button'
-										className='flex items-center gap-x-1 w-full'
-										onClick={async () => {
-											await navigator.clipboard.writeText(ip)
-											toast('Copied IP address to clipboard')
-										}}
-									>
-										<span className={clsx(index === 0 ? 'text-gray-600 dark:text-gray-300' : 'text-gray-400 dark:text-gray-500')}>
-											{ip}
+		<>
+			{Modal}
+			<table className='table-auto w-full rounded-lg'>
+				<thead className='text-gray-500 dark:text-gray-400'>
+					<tr className='text-left uppercase text-sm font-bold'>
+						<th className='pl-4'>Name</th>
+						<th>IP Addresses</th>
+						<th>Last Seen</th>
+					</tr>
+				</thead>
+				<tbody className={clsx(
+					'divide-y divide-zinc-200 dark:divide-zinc-700 align-top',
+					'border-t border-zinc-200 dark:border-zinc-700'
+				)}
+				>
+					{data.map(machine => {
+						const tags = [...machine.forcedTags, ...machine.validTags]
+						return (
+							<tr key={machine.id} className='hover:bg-zinc-100 dark:hover:bg-zinc-800 group'>
+								<td className='py-2 pl-4'>
+									<Link to={`/machines/${machine.id}`}>
+										<h1>{machine.givenName}</h1>
+										<span className='text-sm font-mono text-gray-500 dark:text-gray-400'>
+											{machine.name}
 										</span>
-										<ClipboardIcon className='text-gray-400 dark:text-gray-500 w-4 h-4'/>
-									</button>
-								))}
-							</td>
-							<td className='py-2'>
-								<span
-									className='flex items-center gap-x-1 text-sm text-gray-500 dark:text-gray-400'
-								>
-									<StatusCircle isOnline={machine.online} className='w-4 h-4'/>
-									<p>
-										{machine.online
-											? 'Connected'
-											: new Date(
-												machine.lastSeen
-											).toLocaleString()}
-									</p>
-								</span>
-							</td>
-						</tr>
-					)
-				})}
-			</tbody>
-		</table>
+										<div className='flex gap-1 mt-1'>
+											{tags.map(tag => (
+												<span key={tag} className='text-xs bg-gray-200 text-gray-600 rounded-sm px-1 py-0.5'>
+													{tag}
+												</span>
+											))}
+										</div>
+									</Link>
+								</td>
+								<td className='pt-2 pb-4 font-mono text-gray-600 dark:text-gray-300'>
+									{machine.ipAddresses.map((ip, index) => (
+										<button
+											key={ip}
+											type='button'
+											className='flex items-center gap-x-1 w-full'
+											onClick={async () => {
+												await navigator.clipboard.writeText(ip)
+												toast('Copied IP address to clipboard')
+											}}
+										>
+											<span className={clsx(index === 0 ? 'text-gray-600 dark:text-gray-300' : 'text-gray-400 dark:text-gray-500')}>
+												{ip}
+											</span>
+											<ClipboardIcon className='text-gray-400 dark:text-gray-500 w-4 h-4'/>
+										</button>
+									))}
+								</td>
+								<td className='py-2'>
+									<span
+										className='flex items-center gap-x-1 text-sm text-gray-500 dark:text-gray-400'
+									>
+										<StatusCircle isOnline={machine.online} className='w-4 h-4'/>
+										<p>
+											{machine.online
+												? 'Connected'
+												: new Date(
+													machine.lastSeen
+												).toLocaleString()}
+										</p>
+									</span>
+								</td>
+								<td className='py-2 pr-4'>
+									<div className={clsx(
+										'border border-transparent rounded-lg py-0.5 w-10',
+										'group-hover:border-gray-200 dark:group-hover:border-zinc-700'
+									)}
+									>
+										<Dropdown
+											className='left-1/4'
+											width='w-48'
+											button={(
+												<EllipsisHorizontalIcon className='w-5 h-5'/>
+											)}
+										>
+											<Dropdown.Item variant='static'>
+												<button
+													disabled
+													type='button'
+													className='text-left w-full opacity-50'
+													onClick={() => {
+														open()
+													}}
+												>
+													Edit machine name
+												</button>
+											</Dropdown.Item>
+											<Dropdown.Item variant='static'>
+												<button
+													disabled
+													type='button'
+													className='text-left w-full opacity-50'
+													onClick={() => {
+														open()
+													}}
+												>
+													Edit route settings
+												</button>
+											</Dropdown.Item>
+											<Dropdown.Item variant='static'>
+												<button
+													disabled
+													type='button'
+													className='text-left w-full opacity-50'
+													onClick={() => {
+														open()
+													}}
+												>
+													Edit ACL tags
+												</button>
+											</Dropdown.Item>
+											<Dropdown.Item>
+												<button
+													type='button'
+													className='text-left text-red-700 w-full'
+													onClick={() => {
+														open({
+															title: 'Remove Machine',
+															description: [
+																'This action is irreversible and will disconnect the machine from the Headscale server.',
+																'All data associated with this machine including ACLs and tags will be lost.'
+															].join('\n'),
+															variant: 'danger',
+															buttonText: 'Remove',
+															onConfirm: () => {
+																fetcher.submit(
+																	{
+																		id: machine.id
+																	},
+																	{
+																		method: 'DELETE',
+																		encType: 'application/json'
+																	}
+																)
+															}
+														})
+													}}
+												>
+													Remove
+												</button>
+											</Dropdown.Item>
+										</Dropdown>
+									</div>
+								</td>
+							</tr>
+						)
+					})}
+				</tbody>
+			</table>
+		</>
 	)
 }

app/routes/_data.tsx

@@ -1,10 +1,8 @@
-import { Menu, Transition } from '@headlessui/react'
 import { Cog8ToothIcon, CpuChipIcon, GlobeAltIcon, LockClosedIcon, ServerStackIcon, UserCircleIcon, UsersIcon } from '@heroicons/react/24/outline'
 import { type LoaderFunctionArgs, redirect } from '@remix-run/node'
 import { Form, Outlet, useLoaderData, useRouteError } from '@remix-run/react'
-import clsx from 'clsx'
-import { Fragment } from 'react/jsx-runtime'
 
+import Dropdown from '~/components/Dropdown'
 import { ErrorPopup } from '~/components/Error'
 import TabLink from '~/components/TabLink'
 import { getContext } from '~/utils/config'
@@ -64,56 +62,21 @@ export default function Layout() {
 							<a href='https://github.com/juanfont/headscale' target='_blank' rel='noreferrer' className='text-gray-300 hover:text-white'>
 								Headscale
 							</a>
-							<div className='relative'>
-								<Menu>
-									<Menu.Button>
-										<UserCircleIcon className='w-8 h-8'/>
-									</Menu.Button>
-									<Transition
-										as={Fragment}
-										enter='transition ease-out duration-100'
-										enterFrom='transform opacity-0 scale-95'
-										enterTo='transform opacity-100 scale-100'
-										leave='transition ease-in duration-75'
-										leaveFrom='transform opacity-100 scale-100'
-										leaveTo='transform opacity-0 scale-95'
-									>
-										<Menu.Items className={clsx(
-											'absolute right-0 w-36 mt-2 rounded-md',
-											'text-gray-700 dark:text-gray-300',
-											'bg-white dark:bg-zinc-800 text-right',
-											'overflow-hidden',
-											'border border-gray-200 dark:border-zinc-500',
-											'divide-y divide-gray-200 dark:divide-zinc-500'
-										)}
-										>
-											<Menu.Item>
-												{() => (
-													<div className='px-4 py-2'>
-														<p>{data.user?.name}</p>
-														<p>{data.user?.email}</p>
-													</div>
-												)}
-											</Menu.Item>
-											<Menu.Item>
-												{({ active }) => (
-													<Form method='POST' action='/logout'>
-														<button
-															type='submit'
-															className={clsx(
-																'px-4 py-2 w-full text-right',
-																active ? 'bg-gray-200 dark:bg-zinc-500' : ''
-															)}
-														>
-															Logout
-														</button>
-													</Form>
-												)}
-											</Menu.Item>
-										</Menu.Items>
-									</Transition>
-								</Menu>
-							</div>
+							<Dropdown
+								button={<UserCircleIcon className='w-8 h-8'/>}
+							>
+								<Dropdown.Item variant='static'>
+									<p className='font-bold'>{data.user?.name}</p>
+									<p>{data.user?.email}</p>
+								</Dropdown.Item>
+								<Dropdown.Item className='text-red-700 cursor-pointer'>
+									<Form method='POST' action='/logout'>
+										<button type='submit' className='w-full'>
+											Logout
+										</button>
+									</Form>
+								</Dropdown.Item>
+							</Dropdown>
 						</div>
 					</div>
 					<div className='flex items-center gap-x-4'>

app/routes/login.tsx

@@ -7,6 +7,7 @@ import Card from '~/components/Card'
 import Code from '~/components/Code'
 import Input from '~/components/Input'
 import { type Key } from '~/types'
+import { getContext } from '~/utils/config'
 import { pull } from '~/utils/headscale'
 import { startOidc } from '~/utils/oidc'
 import { commitSession, getSession } from '~/utils/sessions'
@@ -22,9 +23,10 @@ export async function loader({ request }: LoaderFunctionArgs) {
 		})
 	}
 
-	const issuer = process.env.OIDC_ISSUER
-	const id = process.env.OIDC_CLIENT_ID
-	const secret = process.env.OIDC_CLIENT_SECRET
+	const context = await getContext()
+	const issuer = context.oidcConfig?.issuer
+	const id = context.oidcConfig?.client
+	const secret = context.oidcConfig?.secret
 	const normal = process.env.DISABLE_API_KEY_LOGIN
 
 	if (issuer && (!id || !secret)) {
@@ -50,10 +52,14 @@ export async function loader({ request }: LoaderFunctionArgs) {
 
 export async function action({ request }: ActionFunctionArgs) {
 	const formData = await request.formData()
-	const oidcStart = String(formData.get('oidc-start'))
+	const oidcStart = formData.get('oidc-start')
+
 	if (oidcStart) {
-		const issuer = process.env.OIDC_ISSUER
-		const id = process.env.OIDC_CLIENT_ID
+		const context = await getContext()
+		const issuer = context.oidcConfig?.issuer
+		const id = context.oidcConfig?.client
+
+		// We know it exists here because this action only happens on OIDC
 		// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
 		return startOidc(issuer!, id!, request)
 	}

app/routes/oidc.callback.tsx

@@ -1,15 +1,15 @@
 import { type LoaderFunctionArgs } from '@remix-run/node'
 
+import { getContext } from '~/utils/config'
 import { finishOidc } from '~/utils/oidc'
 
 export async function loader({ request }: LoaderFunctionArgs) {
-	const issuer = process.env.OIDC_ISSUER
-	const id = process.env.OIDC_CLIENT_ID
-	const secret = process.env.OIDC_CLIENT_SECRET
+	const context = await getContext()
+	const oidc = context.oidcConfig
 
-	if (!issuer || !id || !secret) {
+	if (!oidc) {
 		throw new Error('An invalid OIDC configuration was provided')
 	}
 
-	return finishOidc(issuer, id, secret, request)
+	return finishOidc(oidc.issuer, oidc.client, oidc.secret, request)
 }

app/utils/config.ts

@@ -2,7 +2,7 @@ import { type FSWatcher, watch } from 'node:fs'
 import { access, constants, readFile, writeFile } from 'node:fs/promises'
 import { resolve } from 'node:path'
 
-import { type Document, parseDocument } from 'yaml'
+import { type Document, parse, parseDocument } from 'yaml'
 
 type Duration = `${string}s` | `${string}h` | `${string}m` | `${string}d` | `${string}y`
 
@@ -131,6 +131,31 @@ export async function getConfig(force = false) {
 	return config.toJSON() as Config
 }
 
+export async function getAcl() {
+	let path = process.env.ACL_FILE
+	if (!path) {
+		try {
+			const config = await getConfig()
+			path = config.acl_policy_path
+		} catch {}
+	}
+
+	if (!path) {
+		return { data: '', type: 'json' }
+	}
+
+	const data = await readFile(path, 'utf8')
+
+	// Naive check for YAML over JSON
+	// This is because JSON.parse doesn't support comments
+	try {
+		parse(data)
+		return { data, type: 'yaml' }
+	} catch {
+		return { data, type: 'json' }
+	}
+}
+
 // This is so obscenely dangerous, please have a check around it
 export async function patchConfig(partial: Record<string, unknown>) {
 	for (const [key, value] of Object.entries(partial)) {
@@ -141,6 +166,22 @@ export async function patchConfig(partial: Record<string, unknown>) {
 	await writeFile(path, config.toString(), 'utf8')
 }
 
+export async function patchAcl(data: string) {
+	let path = process.env.ACL_FILE
+	if (!path) {
+		try {
+			const config = await getConfig()
+			path = config.acl_policy_path
+		} catch {}
+	}
+
+	if (!path) {
+		throw new Error('No ACL file defined')
+	}
+
+	await writeFile(path, data, 'utf8')
+}
+
 let watcher: FSWatcher
 
 export function registerConfigWatcher() {
@@ -161,6 +202,12 @@ type Context = {
 	hasConfigWrite: boolean;
 	hasAcl: boolean;
 	hasAclWrite: boolean;
+	headscaleUrl: string;
+	oidcConfig?: {
+		issuer: string;
+		client: string;
+		secret: string;
+	};
 }
 
 export let context: Context
@@ -172,13 +219,55 @@ export async function getContext() {
 			hasConfig: await hasConfig(),
 			hasConfigWrite: await hasConfigW(),
 			hasAcl: await hasAcl(),
-			hasAclWrite: await hasAclW()
+			hasAclWrite: await hasAclW(),
+			headscaleUrl: await getHeadscaleUrl(),
+			oidcConfig: await getOidcConfig()
 		}
 	}
 
 	return context
 }
 
+async function getOidcConfig() {
+	// Check for the OIDC environment variables first
+	let issuer = process.env.OIDC_ISSUER
+	let client = process.env.OIDC_CLIENT
+	let secret = process.env.OIDC_SECRET
+
+	if (!issuer || !client || !secret) {
+		const config = await getConfig()
+		issuer = config.oidc?.issuer
+		client = config.oidc?.client_id
+		secret = config.oidc?.client_secret
+	}
+
+	// If atleast one is defined but not all 3, throw an error
+	if ((issuer || client || secret) && !(issuer && client && secret)) {
+		throw new Error('OIDC configuration is incomplete')
+	}
+
+	if (!issuer || !client || !secret) {
+		return
+	}
+
+	return { issuer, client, secret }
+}
+
+async function getHeadscaleUrl() {
+	if (process.env.HEADSCALE_URL) {
+		return process.env.HEADSCALE_URL
+	}
+
+	try {
+		const config = await getConfig()
+		if (config.server_url) {
+			return config.server_url
+		}
+	} catch {}
+
+	return ''
+}
+
 async function checkSock() {
 	try {
 		await access('/var/run/docker.sock', constants.R_OK)
@@ -218,8 +307,6 @@ async function hasAcl() {
 			const config = await getConfig()
 			path = config.acl_policy_path
 		} catch {}
-
-		return false
 	}
 
 	if (!path) {
@@ -230,7 +317,9 @@ async function hasAcl() {
 		path = resolve(path)
 		await access(path, constants.R_OK)
 		return true
-	} catch {}
+	} catch (error) {
+		console.log('Cannot acquire read access to ACL file', error)
+	}
 
 	return false
 }
@@ -242,8 +331,6 @@ async function hasAclW() {
 			const config = await getConfig()
 			path = config.acl_policy_path
 		} catch {}
-
-		return false
 	}
 
 	if (!path) {
@@ -254,7 +341,10 @@ async function hasAclW() {
 		path = resolve(path)
 		await access(path, constants.W_OK)
 		return true
-	} catch {}
+	} catch (error) {
+		console.log('Cannot acquire read access to ACL file', error)
+	}
 
 	return false
 }
+

app/utils/docker.ts

@@ -8,6 +8,31 @@ import { Client } from 'undici'
 import { getContext } from './config'
 import { pull } from './headscale'
 
+export async function sighupHeadscale() {
+	const context = await getContext()
+	if (!context.hasDockerSock) {
+		return
+	}
+
+	if (!process.env.HEADSCALE_CONTAINER) {
+		throw new Error('HEADSCALE_CONTAINER is not set')
+	}
+
+	const client = new Client('http://localhost', {
+		socketPath: '/var/run/docker.sock'
+	})
+
+	const container = process.env.HEADSCALE_CONTAINER
+	const response = await client.request({
+		method: 'POST',
+		path: `/v1.30/containers/${container}/kill?signal=SIGHUP`
+	})
+
+	if (!response.statusCode || response.statusCode !== 204) {
+		throw new Error('Failed to send SIGHUP to Headscale')
+	}
+}
+
 export async function restartHeadscale() {
 	const context = await getContext()
 	if (!context.hasDockerSock) {

app/utils/headscale.ts

@@ -1,3 +1,5 @@
+import { getContext } from './config'
+
 export class HeadscaleError extends Error {
 	status: number
 
@@ -15,9 +17,9 @@ export class FatalError extends Error {
 	}
 }
 
-/* eslint-disable @typescript-eslint/no-non-null-assertion */
 export async function pull<T>(url: string, key: string) {
-	const prefix = process.env.HEADSCALE_URL!
+	const context = await getContext()
+	const prefix = context.headscaleUrl
 	const response = await fetch(`${prefix}/api/${url}`, {
 		headers: {
 			Authorization: `Bearer ${key}`
@@ -32,7 +34,8 @@ export async function pull<T>(url: string, key: string) {
 }
 
 export async function post<T>(url: string, key: string, body?: unknown) {
-	const prefix = process.env.HEADSCALE_URL!
+	const context = await getContext()
+	const prefix = context.headscaleUrl
 	const response = await fetch(`${prefix}/api/${url}`, {
 		method: 'POST',
 		body: body ? JSON.stringify(body) : undefined,
@@ -48,3 +51,19 @@ export async function post<T>(url: string, key: string, body?: unknown) {
 	return (response.json() as Promise<T>)
 }
 
+export async function del<T>(url: string, key: string) {
+	const context = await getContext()
+	const prefix = context.headscaleUrl
+	const response = await fetch(`${prefix}/api/${url}`, {
+		method: 'DELETE',
+		headers: {
+			Authorization: `Bearer ${key}`
+		}
+	})
+
+	if (!response.ok) {
+		throw new HeadscaleError(await response.text(), response.status)
+	}
+
+	return (response.json() as Promise<T>)
+}

app/utils/oidc.ts

@@ -43,7 +43,10 @@ export async function startOidc(issuer: string, client: string, request: Request
 	const nonce = generateRandomNonce()
 	const verifier = generateRandomCodeVerifier()
 	const challenge = await calculatePKCECodeChallenge(verifier)
+
 	const callback = new URL('/admin/oidc/callback', request.url)
+	callback.protocol = request.url.includes('localhost') ? 'http:' : 'https:'
+	callback.hostname = request.headers.get('Host') ?? ''
 	const authUrl = new URL(processed.authorization_endpoint)
 
 	authUrl.searchParams.set('client_id', oidcClient.client_id)
@@ -106,6 +109,9 @@ export async function finishOidc(issuer: string, client: string, secret: string,
 	}
 
 	const callback = new URL('/admin/oidc/callback', request.url)
+	callback.protocol = request.url.includes('localhost') ? 'http:' : 'https:'
+	callback.hostname = request.headers.get('Host') ?? ''
+
 	const tokenResponse = await authorizationCodeGrantRequest(processed, oidcClient, parameters, callback.href, verifier)
 	const challenges = parseWwwAuthenticateChallenges(tokenResponse)
 	if (challenges) {

compose.yaml

@@ -1,3 +1,7 @@
+# THIS IS A DEVELOPER CONFIGURATION FILE
+# IT IS NOT AN EXAMPLE OF SOMETHING YOU DEPLOY
+# I ONLY USE IT FOR DEVELOPING HEADPLANE
+
 version: '3.9'
 networks:
   headplane-dev:

docs/Basic-Integration.md

@@ -44,3 +44,7 @@ services:
 
 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.
+
+## 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/Configuration.md

@@ -13,7 +13,7 @@ You can configure Headplane using environment variables.
 - **`HOST`**: The host to bind the server to (default: `0.0.0.0`).
 - **`PORT`**: The port to bind the server to (default: `3000`).
 - **`CONFIG_FILE`**: The path to the Headscale `config.yaml` (default: `/etc/headscale/config.yaml`).
-- **`ACL_FILE`**: The path to the ACL file (default: `/etc/headscale/acl_policy.json`).
+- **`ACL_FILE`**: The path to the ACL file (default: `/etc/headscale/acl_policy.json`, not needed if you have `acl_policy_path` in your config).
 - **`HEADSCALE_CONTAINER`**: The name of the Headscale container (required for Docker integration).
 
 ### SSO/OpenID Connect

package.json

@@ -11,6 +11,8 @@
 		"typecheck": "tsc"
 	},
 	"dependencies": {
+		"@codemirror/lang-json": "^6.0.1",
+		"@codemirror/lang-yaml": "^6.1.1",
 		"@dnd-kit/core": "^6.1.0",
 		"@dnd-kit/modifiers": "^7.0.0",
 		"@dnd-kit/sortable": "^8.0.0",
@@ -20,12 +22,16 @@
 		"@remix-run/node": "^2.8.1",
 		"@remix-run/react": "^2.8.1",
 		"@remix-run/serve": "^2.8.1",
+		"@uiw/codemirror-theme-github": "^4.21.25",
+		"@uiw/react-codemirror": "^4.21.25",
 		"clsx": "^2.1.0",
 		"isbot": "^4.1.0",
 		"oauth4webapi": "^2.10.3",
 		"react": "^18.2.0",
+		"react-codemirror-merge": "^4.21.25",
 		"react-dom": "^18.2.0",
 		"react-hot-toast": "^2.4.1",
+		"remix-utils": "^7.6.0",
 		"undici": "^6.10.2",
 		"usehooks-ts": "^3.0.2",
 		"yaml": "^2.4.1"

pnpm-lock.yaml

@@ -5,6 +5,12 @@ settings:
   excludeLinksFromLockfile: false
 
 dependencies:
+  '@codemirror/lang-json':
+    specifier: ^6.0.1
+    version: 6.0.1
+  '@codemirror/lang-yaml':
+    specifier: ^6.1.1
+    version: 6.1.1(@codemirror/view@6.26.3)
   '@dnd-kit/core':
     specifier: ^6.1.0
     version: 6.1.0(react-dom@18.2.0)(react@18.2.0)
@@ -32,6 +38,12 @@ dependencies:
   '@remix-run/serve':
     specifier: ^2.8.1
     version: 2.8.1(typescript@5.4.3)
+  '@uiw/codemirror-theme-github':
+    specifier: ^4.21.25
+    version: 4.21.25(@codemirror/language@6.10.1)(@codemirror/state@6.4.1)(@codemirror/view@6.26.3)
+  '@uiw/react-codemirror':
+    specifier: ^4.21.25
+    version: 4.21.25(@babel/runtime@7.24.1)(@codemirror/autocomplete@6.16.0)(@codemirror/language@6.10.1)(@codemirror/lint@6.5.0)(@codemirror/search@6.5.6)(@codemirror/state@6.4.1)(@codemirror/theme-one-dark@6.1.2)(@codemirror/view@6.26.3)(codemirror@6.0.1)(react-dom@18.2.0)(react@18.2.0)
   clsx:
     specifier: ^2.1.0
     version: 2.1.0
@@ -44,12 +56,18 @@ dependencies:
   react:
     specifier: ^18.2.0
     version: 18.2.0
+  react-codemirror-merge:
+    specifier: ^4.21.25
+    version: 4.21.25(@babel/runtime@7.24.1)(@codemirror/autocomplete@6.16.0)(@codemirror/language@6.10.1)(@codemirror/lint@6.5.0)(@codemirror/search@6.5.6)(@codemirror/state@6.4.1)(@codemirror/theme-one-dark@6.1.2)(@codemirror/view@6.26.3)(codemirror@6.0.1)(react-dom@18.2.0)(react@18.2.0)
   react-dom:
     specifier: ^18.2.0
     version: 18.2.0(react@18.2.0)
   react-hot-toast:
     specifier: ^2.4.1
     version: 2.4.1(csstype@3.1.3)(react-dom@18.2.0)(react@18.2.0)
+  remix-utils:
+    specifier: ^7.6.0
+    version: 7.6.0(@remix-run/node@2.8.1)(@remix-run/react@2.8.1)(react@18.2.0)
   undici:
     specifier: ^6.10.2
     version: 6.10.2
@@ -408,7 +426,6 @@ packages:
     engines: {node: '>=6.9.0'}
     dependencies:
       regenerator-runtime: 0.14.1
-    dev: true
 
   /@babel/template@7.24.0:
     resolution: {integrity: sha512-Bkf2q8lMB0AFpX0NFEqSbx1OkTHf0f+0j82mkw+ZpzBnkk7e9Ql0891vlfgi+kHwOk8tQjiQHpqh4LaSa0fKEA==}
@@ -446,6 +463,107 @@ packages:
       to-fast-properties: 2.0.0
     dev: true
 
+  /@codemirror/autocomplete@6.16.0(@codemirror/language@6.10.1)(@codemirror/state@6.4.1)(@codemirror/view@6.26.3)(@lezer/common@1.2.1):
+    resolution: {integrity: sha512-P/LeCTtZHRTCU4xQsa89vSKWecYv1ZqwzOd5topheGRf+qtacFgBeIMQi3eL8Kt/BUNvxUWkx+5qP2jlGoARrg==}
+    peerDependencies:
+      '@codemirror/language': ^6.0.0
+      '@codemirror/state': ^6.0.0
+      '@codemirror/view': ^6.0.0
+      '@lezer/common': ^1.0.0
+    dependencies:
+      '@codemirror/language': 6.10.1
+      '@codemirror/state': 6.4.1
+      '@codemirror/view': 6.26.3
+      '@lezer/common': 1.2.1
+    dev: false
+
+  /@codemirror/commands@6.3.3:
+    resolution: {integrity: sha512-dO4hcF0fGT9tu1Pj1D2PvGvxjeGkbC6RGcZw6Qs74TH+Ed1gw98jmUgd2axWvIZEqTeTuFrg1lEB1KV6cK9h1A==}
+    dependencies:
+      '@codemirror/language': 6.10.1
+      '@codemirror/state': 6.4.1
+      '@codemirror/view': 6.26.3
+      '@lezer/common': 1.2.1
+    dev: false
+
+  /@codemirror/lang-json@6.0.1:
+    resolution: {integrity: sha512-+T1flHdgpqDDlJZ2Lkil/rLiRy684WMLc74xUnjJH48GQdfJo/pudlTRreZmKwzP8/tGdKf83wlbAdOCzlJOGQ==}
+    dependencies:
+      '@codemirror/language': 6.10.1
+      '@lezer/json': 1.0.2
+    dev: false
+
+  /@codemirror/lang-yaml@6.1.1(@codemirror/view@6.26.3):
+    resolution: {integrity: sha512-HV2NzbK9bbVnjWxwObuZh5FuPCowx51mEfoFT9y3y+M37fA3+pbxx4I7uePuygFzDsAmCTwQSc/kXh/flab4uw==}
+    dependencies:
+      '@codemirror/autocomplete': 6.16.0(@codemirror/language@6.10.1)(@codemirror/state@6.4.1)(@codemirror/view@6.26.3)(@lezer/common@1.2.1)
+      '@codemirror/language': 6.10.1
+      '@codemirror/state': 6.4.1
+      '@lezer/common': 1.2.1
+      '@lezer/highlight': 1.2.0
+      '@lezer/yaml': 1.0.2
+    transitivePeerDependencies:
+      - '@codemirror/view'
+    dev: false
+
+  /@codemirror/language@6.10.1:
+    resolution: {integrity: sha512-5GrXzrhq6k+gL5fjkAwt90nYDmjlzTIJV8THnxNFtNKWotMIlzzN+CpqxqwXOECnUdOndmSeWntVrVcv5axWRQ==}
+    dependencies:
+      '@codemirror/state': 6.4.1
+      '@codemirror/view': 6.26.3
+      '@lezer/common': 1.2.1
+      '@lezer/highlight': 1.2.0
+      '@lezer/lr': 1.4.0
+      style-mod: 4.1.2
+    dev: false
+
+  /@codemirror/lint@6.5.0:
+    resolution: {integrity: sha512-+5YyicIaaAZKU8K43IQi8TBy6mF6giGeWAH7N96Z5LC30Wm5JMjqxOYIE9mxwMG1NbhT2mA3l9hA4uuKUM3E5g==}
+    dependencies:
+      '@codemirror/state': 6.4.1
+      '@codemirror/view': 6.26.3
+      crelt: 1.0.6
+    dev: false
+
+  /@codemirror/merge@6.6.1:
+    resolution: {integrity: sha512-7wuc0R8+CSMlGZzEpxphQVkoBYb4D+M/MeB7/8g1ZrmLuP1wxhyOy7xWftmCzjKlVuRAUaKgBoA3LHS42H8eKA==}
+    dependencies:
+      '@codemirror/language': 6.10.1
+      '@codemirror/state': 6.4.1
+      '@codemirror/view': 6.26.3
+      '@lezer/highlight': 1.2.0
+      style-mod: 4.1.2
+    dev: false
+
+  /@codemirror/search@6.5.6:
+    resolution: {integrity: sha512-rpMgcsh7o0GuCDUXKPvww+muLA1pDJaFrpq/CCHtpQJYz8xopu4D1hPcKRoDD0YlF8gZaqTNIRa4VRBWyhyy7Q==}
+    dependencies:
+      '@codemirror/state': 6.4.1
+      '@codemirror/view': 6.26.3
+      crelt: 1.0.6
+    dev: false
+
+  /@codemirror/state@6.4.1:
+    resolution: {integrity: sha512-QkEyUiLhsJoZkbumGZlswmAhA7CBU02Wrz7zvH4SrcifbsqwlXShVXg65f3v/ts57W3dqyamEriMhij1Z3Zz4A==}
+    dev: false
+
+  /@codemirror/theme-one-dark@6.1.2:
+    resolution: {integrity: sha512-F+sH0X16j/qFLMAfbciKTxVOwkdAS336b7AXTKOZhy8BR3eH/RelsnLgLFINrpST63mmN2OuwUt0W2ndUgYwUA==}
+    dependencies:
+      '@codemirror/language': 6.10.1
+      '@codemirror/state': 6.4.1
+      '@codemirror/view': 6.26.3
+      '@lezer/highlight': 1.2.0
+    dev: false
+
+  /@codemirror/view@6.26.3:
+    resolution: {integrity: sha512-gmqxkPALZjkgSxIeeweY/wGQXBfwTUaLs8h7OKtSwfbj9Ct3L11lD+u1sS7XHppxFQoMDiMDp07P9f3I2jWOHw==}
+    dependencies:
+      '@codemirror/state': 6.4.1
+      style-mod: 4.1.2
+      w3c-keyname: 2.2.8
+    dev: false
+
   /@dnd-kit/accessibility@3.1.0(react@18.2.0):
     resolution: {integrity: sha512-ea7IkhKvlJUv9iSHJOnxinBcoOI3ppGnnL+VDJ75O45Nss6HtZd8IdN8touXPDtASfeI2T2LImb8VOZcL47wjQ==}
     peerDependencies:
@@ -1034,6 +1152,38 @@ packages:
     resolution: {integrity: sha512-Lg3PnLp0QXpxwLIAuuJboLeRaIhrgJjeuh797QADg3xz8wGLugQOS5DpsE8A6i6Adgzf+bacllkKZG3J0tGfDw==}
     dev: true
 
+  /@lezer/common@1.2.1:
+    resolution: {integrity: sha512-yemX0ZD2xS/73llMZIK6KplkjIjf2EvAHcinDi/TfJ9hS25G0388+ClHt6/3but0oOxinTcQHJLDXh6w1crzFQ==}
+    dev: false
+
+  /@lezer/highlight@1.2.0:
+    resolution: {integrity: sha512-WrS5Mw51sGrpqjlh3d4/fOwpEV2Hd3YOkp9DBt4k8XZQcoTHZFB7sx030A6OcahF4J1nDQAa3jXlTVVYH50IFA==}
+    dependencies:
+      '@lezer/common': 1.2.1
+    dev: false
+
+  /@lezer/json@1.0.2:
+    resolution: {integrity: sha512-xHT2P4S5eeCYECyKNPhr4cbEL9tc8w83SPwRC373o9uEdrvGKTZoJVAGxpOsZckMlEh9W23Pc72ew918RWQOBQ==}
+    dependencies:
+      '@lezer/common': 1.2.1
+      '@lezer/highlight': 1.2.0
+      '@lezer/lr': 1.4.0
+    dev: false
+
+  /@lezer/lr@1.4.0:
+    resolution: {integrity: sha512-Wst46p51km8gH0ZUmeNrtpRYmdlRHUpN1DQd3GFAyKANi8WVz8c2jHYTf1CVScFaCjQw1iO3ZZdqGDxQPRErTg==}
+    dependencies:
+      '@lezer/common': 1.2.1
+    dev: false
+
+  /@lezer/yaml@1.0.2:
+    resolution: {integrity: sha512-XCkwuxe+eumJ28nA9e1S6XKsXz9W7V/AG+WBiWOtiIuUpKcZ/bHuvN8bLxSDREIcybSRpEd/jvphh4vgm6Ed2g==}
+    dependencies:
+      '@lezer/common': 1.2.1
+      '@lezer/highlight': 1.2.0
+      '@lezer/lr': 1.4.0
+    dev: false
+
   /@mdx-js/mdx@2.3.0:
     resolution: {integrity: sha512-jLuwRlz8DQfQNiUCJR50Y09CGPq3fLtmtUQfVrj79E0JWu3dvsVcxVIcfhR5h0iXu+/z++zDrYeiJqifRynJkA==}
     dependencies:
@@ -1689,6 +1839,75 @@ packages:
       eslint-visitor-keys: 3.4.3
     dev: true
 
+  /@uiw/codemirror-extensions-basic-setup@4.21.25(@codemirror/autocomplete@6.16.0)(@codemirror/commands@6.3.3)(@codemirror/language@6.10.1)(@codemirror/lint@6.5.0)(@codemirror/search@6.5.6)(@codemirror/state@6.4.1)(@codemirror/view@6.26.3):
+    resolution: {integrity: sha512-eeUKlmEE8aSoSgelS8OR2elcPGntpRo669XinAqPCLa0eKorT2B0d3ts+AE+njAeGk744tiyAEbHb2n+6OQmJw==}
+    peerDependencies:
+      '@codemirror/autocomplete': '>=6.0.0'
+      '@codemirror/commands': '>=6.0.0'
+      '@codemirror/language': '>=6.0.0'
+      '@codemirror/lint': '>=6.0.0'
+      '@codemirror/search': '>=6.0.0'
+      '@codemirror/state': '>=6.0.0'
+      '@codemirror/view': '>=6.0.0'
+    dependencies:
+      '@codemirror/autocomplete': 6.16.0(@codemirror/language@6.10.1)(@codemirror/state@6.4.1)(@codemirror/view@6.26.3)(@lezer/common@1.2.1)
+      '@codemirror/commands': 6.3.3
+      '@codemirror/language': 6.10.1
+      '@codemirror/lint': 6.5.0
+      '@codemirror/search': 6.5.6
+      '@codemirror/state': 6.4.1
+      '@codemirror/view': 6.26.3
+    dev: false
+
+  /@uiw/codemirror-theme-github@4.21.25(@codemirror/language@6.10.1)(@codemirror/state@6.4.1)(@codemirror/view@6.26.3):
+    resolution: {integrity: sha512-RDS9s/Lbi1uIvupIXNiREFMryZjd7X4xRMKzmf6NfZuXWVdDATTA1b5smzxXldJgl8bY4QoOevczRncFTVRfGA==}
+    dependencies:
+      '@uiw/codemirror-themes': 4.21.25(@codemirror/language@6.10.1)(@codemirror/state@6.4.1)(@codemirror/view@6.26.3)
+    transitivePeerDependencies:
+      - '@codemirror/language'
+      - '@codemirror/state'
+      - '@codemirror/view'
+    dev: false
+
+  /@uiw/codemirror-themes@4.21.25(@codemirror/language@6.10.1)(@codemirror/state@6.4.1)(@codemirror/view@6.26.3):
+    resolution: {integrity: sha512-C3t/voELxQj0eaVhrlgzaOnSALNf8bOcRbL5xN9r2+RkdsbFOmvNl3VVhlxEB7PSGc1jUZwVO4wQsB2AP178ag==}
+    peerDependencies:
+      '@codemirror/language': '>=6.0.0'
+      '@codemirror/state': '>=6.0.0'
+      '@codemirror/view': '>=6.0.0'
+    dependencies:
+      '@codemirror/language': 6.10.1
+      '@codemirror/state': 6.4.1
+      '@codemirror/view': 6.26.3
+    dev: false
+
+  /@uiw/react-codemirror@4.21.25(@babel/runtime@7.24.1)(@codemirror/autocomplete@6.16.0)(@codemirror/language@6.10.1)(@codemirror/lint@6.5.0)(@codemirror/search@6.5.6)(@codemirror/state@6.4.1)(@codemirror/theme-one-dark@6.1.2)(@codemirror/view@6.26.3)(codemirror@6.0.1)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-mBrCoiffQ+hbTqV1JoixFEcH7BHXkS3PjTyNH7dE8Gzf3GSBRazhtSM5HrAFIiQ5FIRGFs8Gznc4UAdhtevMmw==}
+    peerDependencies:
+      '@babel/runtime': '>=7.11.0'
+      '@codemirror/state': '>=6.0.0'
+      '@codemirror/theme-one-dark': '>=6.0.0'
+      '@codemirror/view': '>=6.0.0'
+      codemirror: '>=6.0.0'
+      react: '>=16.8.0'
+      react-dom: '>=16.8.0'
+    dependencies:
+      '@babel/runtime': 7.24.1
+      '@codemirror/commands': 6.3.3
+      '@codemirror/state': 6.4.1
+      '@codemirror/theme-one-dark': 6.1.2
+      '@codemirror/view': 6.26.3
+      '@uiw/codemirror-extensions-basic-setup': 4.21.25(@codemirror/autocomplete@6.16.0)(@codemirror/commands@6.3.3)(@codemirror/language@6.10.1)(@codemirror/lint@6.5.0)(@codemirror/search@6.5.6)(@codemirror/state@6.4.1)(@codemirror/view@6.26.3)
+      codemirror: 6.0.1(@lezer/common@1.2.1)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    transitivePeerDependencies:
+      - '@codemirror/autocomplete'
+      - '@codemirror/language'
+      - '@codemirror/lint'
+      - '@codemirror/search'
+    dev: false
+
   /@ungap/structured-clone@1.2.0:
     resolution: {integrity: sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==}
     dev: true
@@ -2232,6 +2451,20 @@ packages:
     engines: {node: '>=6'}
     dev: false
 
+  /codemirror@6.0.1(@lezer/common@1.2.1):
+    resolution: {integrity: sha512-J8j+nZ+CdWmIeFIGXEFbFPtpiYacFMDR8GlHK3IyHQJMCaVRfGx9NT+Hxivv1ckLWPvNdZqndbr/7lVhrf/Svg==}
+    dependencies:
+      '@codemirror/autocomplete': 6.16.0(@codemirror/language@6.10.1)(@codemirror/state@6.4.1)(@codemirror/view@6.26.3)(@lezer/common@1.2.1)
+      '@codemirror/commands': 6.3.3
+      '@codemirror/language': 6.10.1
+      '@codemirror/lint': 6.5.0
+      '@codemirror/search': 6.5.6
+      '@codemirror/state': 6.4.1
+      '@codemirror/view': 6.26.3
+    transitivePeerDependencies:
+      - '@lezer/common'
+    dev: false
+
   /color-convert@1.9.3:
     resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==}
     dependencies:
@@ -2319,6 +2552,10 @@ packages:
     resolution: {integrity: sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==}
     dev: true
 
+  /crelt@1.0.6:
+    resolution: {integrity: sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g==}
+    dev: false
+
   /cross-spawn@7.0.3:
     resolution: {integrity: sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==}
     engines: {node: '>= 8'}
@@ -5311,6 +5548,33 @@ packages:
       iconv-lite: 0.4.24
       unpipe: 1.0.0
 
+  /react-codemirror-merge@4.21.25(@babel/runtime@7.24.1)(@codemirror/autocomplete@6.16.0)(@codemirror/language@6.10.1)(@codemirror/lint@6.5.0)(@codemirror/search@6.5.6)(@codemirror/state@6.4.1)(@codemirror/theme-one-dark@6.1.2)(@codemirror/view@6.26.3)(codemirror@6.0.1)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-k0OYi70B36O/059p5llx55E857Wam20aWwALymXmQr9YtC83X7OqKWj4/8iPpxB3aIK5H/smmMAjlky7u7ecMQ==}
+    peerDependencies:
+      '@babel/runtime': '>=7.11.0'
+      '@codemirror/state': '>=6.0.0'
+      '@codemirror/theme-one-dark': '>=6.0.0'
+      '@codemirror/view': '>=6.0.0'
+      codemirror: '>=6.0.0'
+      react: '>=16.8.0'
+      react-dom: '>=16.8.0'
+    dependencies:
+      '@babel/runtime': 7.24.1
+      '@codemirror/merge': 6.6.1
+      '@codemirror/state': 6.4.1
+      '@codemirror/theme-one-dark': 6.1.2
+      '@codemirror/view': 6.26.3
+      '@uiw/react-codemirror': 4.21.25(@babel/runtime@7.24.1)(@codemirror/autocomplete@6.16.0)(@codemirror/language@6.10.1)(@codemirror/lint@6.5.0)(@codemirror/search@6.5.6)(@codemirror/state@6.4.1)(@codemirror/theme-one-dark@6.1.2)(@codemirror/view@6.26.3)(codemirror@6.0.1)(react-dom@18.2.0)(react@18.2.0)
+      codemirror: 6.0.1(@lezer/common@1.2.1)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    transitivePeerDependencies:
+      - '@codemirror/autocomplete'
+      - '@codemirror/language'
+      - '@codemirror/lint'
+      - '@codemirror/search'
+    dev: false
+
   /react-dom@18.2.0(react@18.2.0):
     resolution: {integrity: sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==}
     peerDependencies:
@@ -5441,7 +5705,6 @@ packages:
 
   /regenerator-runtime@0.14.1:
     resolution: {integrity: sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==}
-    dev: true
 
   /regexp-tree@0.1.27:
     resolution: {integrity: sha512-iETxpjK6YoRWJG5o6hXLwvjYAoW+FEZn9os0PD/b6AP6xQwsa/Y7lCVgIixBbUPMfhu+i2LtdeAqVTgGlQarfA==}
@@ -5512,6 +5775,48 @@ packages:
       unified: 10.1.2
     dev: true
 
+  /remix-utils@7.6.0(@remix-run/node@2.8.1)(@remix-run/react@2.8.1)(react@18.2.0):
+    resolution: {integrity: sha512-BPhCUEy+nwrhDDDg2v3+LFSszV6tluMbeSkbffj2o4tqZxt5Kn69Y9sNpGxYLAj8gjqeYDuxjv55of+gYnnykA==}
+    engines: {node: '>=18.0.0'}
+    peerDependencies:
+      '@remix-run/cloudflare': ^2.0.0
+      '@remix-run/deno': ^2.0.0
+      '@remix-run/node': ^2.0.0
+      '@remix-run/react': ^2.0.0
+      '@remix-run/router': ^1.7.2
+      crypto-js: ^4.1.1
+      intl-parse-accept-language: ^1.0.0
+      is-ip: ^5.0.1
+      react: ^18.0.0
+      zod: ^3.22.4
+    peerDependenciesMeta:
+      '@remix-run/cloudflare':
+        optional: true
+      '@remix-run/deno':
+        optional: true
+      '@remix-run/node':
+        optional: true
+      '@remix-run/react':
+        optional: true
+      '@remix-run/router':
+        optional: true
+      crypto-js:
+        optional: true
+      intl-parse-accept-language:
+        optional: true
+      is-ip:
+        optional: true
+      react:
+        optional: true
+      zod:
+        optional: true
+    dependencies:
+      '@remix-run/node': 2.8.1(typescript@5.4.3)
+      '@remix-run/react': 2.8.1(react-dom@18.2.0)(react@18.2.0)(typescript@5.4.3)
+      react: 18.2.0
+      type-fest: 4.15.0
+    dev: false
+
   /require-like@0.1.2:
     resolution: {integrity: sha512-oyrU88skkMtDdauHDuKVrgR+zuItqr6/c//FXzvmxRGMexSDc6hNvJInGW3LL46n+8b50RykrvwSUIIQH2LQ5A==}
     dev: true
@@ -5941,6 +6246,10 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
+  /style-mod@4.1.2:
+    resolution: {integrity: sha512-wnD1HyVqpJUI2+eKZ+eo1UwghftP6yuFheBqqe+bWCotBjC2K1YnteJILRMs3SM4V/0dLEW1SC27MWP5y+mwmw==}
+    dev: false
+
   /style-to-object@0.4.4:
     resolution: {integrity: sha512-HYNoHZa2GorYNyqiCaBgsxvcJIn7OHq6inEga+E6Ke3m5JkoqpQbnFssk4jwe+K7AhGa2fcha4wSOf1Kn01dMg==}
     dependencies:
@@ -6160,6 +6469,11 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
+  /type-fest@4.15.0:
+    resolution: {integrity: sha512-tB9lu0pQpX5KJq54g+oHOLumOx+pMep4RaM6liXh2PKmVRFF+/vAtUP0ZaJ0kOySfVNjF6doBWPHhBhISKdlIA==}
+    engines: {node: '>=16'}
+    dev: false
+
   /type-is@1.6.18:
     resolution: {integrity: sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==}
     engines: {node: '>= 0.6'}
@@ -6485,6 +6799,10 @@ packages:
       fsevents: 2.3.3
     dev: true
 
+  /w3c-keyname@2.2.8:
+    resolution: {integrity: sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==}
+    dev: false
+
   /wcwidth@1.0.1:
     resolution: {integrity: sha512-XHPEwS0q6TaxcvG85+8EYkbiCux2XtWG2mkc47Ng2A77BQu9+DqIOJldST4HgPkuea7dvKSj5VgX3P1d4rW8Tg==}
     dependencies:

tailwind.config.ts

@@ -3,7 +3,11 @@ import type { Config } from 'tailwindcss'
 export default {
 	content: ['./app/**/*.{js,jsx,ts,tsx}'],
 	theme: {
-		extend: {}
+		extend: {
+			height: {
+				editor: 'calc(100vh - 20rem)'
+			}
+		}
 	},
 	plugins: []
 } satisfies Config