chore: v0.5.5

fix: do not require authkey
fix: ignore ws_agents if there are no agents connected
2026-07-26 15:58:14 +00:00 · 2025-03-18 00:46:54 -04:00 · 2025-03-18 00:46:35 -04:00 · 2025-03-18 00:43:52 -04:00 · 2025-03-18 00:34:49 -04:00 · 2025-03-18 00:33:14 -04:00
236 changed files with 13734 additions and 12963 deletions
@@ -0,0 +1 @@
+use_flake
@@ -1,44 +1,44 @@
 name: Publish Nightly Docker Image
 on:
-  schedule:
-    - cron: '0 8 * * *'
-  workflow_dispatch:
+    schedule:
+        - cron: "0 8 * * *"
+    workflow_dispatch:

 jobs:
-  publish:
-    name: Build and Publish Nightly
-    runs-on: ubuntu-latest
-    steps:
-      - name: Check out the repo
-        uses: actions/checkout@v4
+    publish:
+        name: Build and Publish Nightly
+        runs-on: ubuntu-latest
+        steps:
+            - name: Check out the repo
+              uses: actions/checkout@v4

-      - name: Set up QEMU
-        uses: docker/setup-qemu-action@v3
+            - name: Set up QEMU
+              uses: docker/setup-qemu-action@v3

-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3
+            - name: Set up Docker Buildx
+              uses: docker/setup-buildx-action@v3

-      - name: Log in to ghcr.io
-        uses: docker/login-action@v3
-        with:
-          registry: ghcr.io
-          username: ${{ github.actor }}
-          password: ${{ secrets.GITHUB_TOKEN }}
+            - name: Log in to ghcr.io
+              uses: docker/login-action@v3
+              with:
+                  registry: ghcr.io
+                  username: ${{ github.actor }}
+                  password: ${{ secrets.GITHUB_TOKEN }}

-      - name: Docker Metadata
-        id: meta
-        uses: docker/metadata-action@v5
-        with:
-          images: ghcr.io/${{ github.repository }}
-          tags: |
-            type=edge,branch=main
+            - name: Docker Metadata
+              id: meta
+              uses: docker/metadata-action@v5
+              with:
+                  images: ghcr.io/${{ github.repository }}
+                  tags: |
+                      type=edge,branch=main

-      - name: Build and push Docker image
-        uses: docker/build-push-action@v5
-        with:
-          context: .
-          file: ./Dockerfile
-          push: true
-          tags: ${{ steps.meta.outputs.tags }}
-          labels: ${{ steps.meta.outputs.labels }}
-          platforms: linux/amd64, linux/arm64
+            - name: Build and push Docker image
+              uses: docker/build-push-action@v5
+              with:
+                  context: .
+                  file: ./Dockerfile
+                  push: true
+                  tags: ${{ steps.meta.outputs.tags }}
+                  labels: ${{ steps.meta.outputs.labels }}
+                  platforms: linux/amd64, linux/arm64
@@ -0,0 +1,20 @@
+name: Update flake.lock
+on:
+    workflow_dispatch:
+    schedule:
+        - cron: "0 0 * * 0"
+
+jobs:
+    update-flake-inputs:
+        runs-on: ubuntu-latest
+        steps:
+            - uses: actions/checkout@v4
+            - uses: DeterminateSystems/nix-installer-action@main
+            - uses: DeterminateSystems/update-flake-lock@main
+              with:
+                  pr-title: "chore: update flake.lock"
+                  pr-labels: |
+                      dependencies
+                      automated
+            - uses: DeterminateSystems/flake-checker-action@main
+            - run: nix flake check --all-systems
@@ -0,0 +1,24 @@
+name: Nix CI
+on:
+    pull_request:
+    workflow_dispatch:
+    push:
+        branches:
+            - main
+        tags:
+            - v?[0-9]+.[0-9]+.[0-9]+*
+
+concurrency:
+    group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+    cancel-in-progress: true
+
+jobs:
+    nix-ci:
+        runs-on: ubuntu-latest
+        steps:
+            - uses: actions/checkout@v4
+            - uses: DeterminateSystems/nix-installer-action@main
+              with:
+                  determinate: true
+            - uses: DeterminateSystems/flake-checker-action@main
+            - run: nix flake check --all-systems
@@ -1,42 +1,46 @@
 name: Publish Docker Image
 on:
-  push:
-    tags:
-      - '*'
+    push:
+        tags:
+            - "*"

 jobs:
-  publish:
-    name: Build and Publish
-    runs-on: ubuntu-latest
-    steps:
-      - name: Check out the repo
-        uses: actions/checkout@v4
+    publish:
+        name: Build and Publish
+        runs-on: ubuntu-latest
+        steps:
+            - name: Check out the repo
+              uses: actions/checkout@v4

-      - name: Set up QEMU
-        uses: docker/setup-qemu-action@v3
+            - name: Set up QEMU
+              uses: docker/setup-qemu-action@v3

-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3
+            - name: Set up Docker Buildx
+              uses: docker/setup-buildx-action@v3

-      - name: Log in to ghcr.io
-        uses: docker/login-action@v3
-        with:
-          registry: ghcr.io
-          username: ${{ github.actor }}
-          password: ${{ secrets.GITHUB_TOKEN }}
+            - name: Log in to ghcr.io
+              uses: docker/login-action@v3
+              with:
+                  registry: ghcr.io
+                  username: ${{ github.actor }}
+                  password: ${{ secrets.GITHUB_TOKEN }}

-      - name: Docker Metadata
-        id: meta
-        uses: docker/metadata-action@v5
-        with:
-          images: ghcr.io/${{ github.repository }}
+            - name: Docker Metadata
+              id: meta
+              uses: docker/metadata-action@v5
+              with:
+                  images: ghcr.io/${{ github.repository }}
+                  tags: |
+                      type=semver,pattern={{version}}
+                      type=semver,pattern={{major}}.{{minor}}
+                      type=raw,value=latest,enable=false

-      - name: Build and push Docker image
-        uses: docker/build-push-action@v5
-        with:
-          context: .
-          file: ./Dockerfile
-          push: true
-          tags: ${{ steps.meta.outputs.tags }}
-          labels: ${{ steps.meta.outputs.labels }}
-          platforms: linux/amd64, linux/arm64
+            - name: Build and push Docker image
+              uses: docker/build-push-action@v5
+              with:
+                  context: .
+                  file: ./Dockerfile
+                  push: true
+                  tags: ${{ steps.meta.outputs.tags }}
+                  labels: ${{ steps.meta.outputs.labels }}
+                  platforms: linux/amd64, linux/arm64
@@ -1,44 +1,44 @@
-name: 'Build'
+name: "Build"
 on:
-  push:
-    branches:
-      - 'main'
-  pull_request:
+    push:
+        branches:
+            - "main"
+    pull_request:

 jobs:
-  build:
-    name: Build
-    runs-on: ubuntu-latest
-    steps:
-      - name: Check out the repo
-        uses: actions/checkout@v4
+    build:
+        name: Build
+        runs-on: ubuntu-latest
+        steps:
+            - name: Check out the repo
+              uses: actions/checkout@v4

-      - name: Install node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: 20
+            - name: Install node.js
+              uses: actions/setup-node@v4
+              with:
+                  node-version: 22

-      - uses: pnpm/action-setup@v4
-        name: Install pnpm
-        with:
-          version: 9
-          run_install: false
+            - uses: pnpm/action-setup@v4
+              name: Install pnpm
+              with:
+                  version: 10
+                  run_install: false

-      - name: Get pnpm store directory
-        shell: bash
-        run: |
-          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+            - name: Get pnpm store directory
+              shell: bash
+              run: |
+                  echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV

-      - uses: actions/cache@v4
-        name: Setup pnpm cache
-        with:
-          path: ${{ env.STORE_PATH }}
-          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
-          restore-keys: |
-            ${{ runner.os }}-pnpm-store-
+            - uses: actions/cache@v4
+              name: Setup pnpm cache
+              with:
+                  path: ${{ env.STORE_PATH }}
+                  key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+                  restore-keys: |
+                      ${{ runner.os }}-pnpm-store-

-      - name: Install dependencies
-        run: pnpm install
+            - name: Install dependencies
+              run: pnpm install

-      - name: Build
-        run: pnpm build
+            - name: Build
+              run: pnpm build
@@ -1,5 +1,5 @@
 node_modules
-
+/.react-router
 /.cache
 /build
 .env
@@ -0,0 +1,2 @@
+side-effects-cache = false
+shamefully-hoist = true
@@ -1,3 +1,67 @@
+### 0.5.5 (March 18, 2025)
+- Hotfix an issue that caused Headplane to crash if no agents are available
+
+### 0.5.4 (March 18, 2025)
+- Fixed a typo in the Kubernetes documentation
+- Handle split and global DNS records not being set in the Headscale config (via [#129](https://github.com/tale/headplane/pull/129))
+- Stop checking for the `mkey:` prefix on machine registration (via [#131](https://github.com/tale/headplane/pull/131))
+- OIDC auth was not using information from the `user_info` endpoint.
+- Support the picture of the user who is logged in via OIDC if available.
+- Rewrote the Agent implementation to better utilize disk space and perform better (coming soon).
+- Loosened checking for the Headscale configuration as it was too strict and required certain optional fields.
+- Deleting a node will now correctly redirect back to the nodes page (fixes [#137](https://github.com/tale/headplane/issues/137))
+- Supports connecting to Headscale via TLS and can accept a certificate file (partially fixes [#82](https://github.com/tale/headplane/issues/82))
+- Add support for running Headplane through Nix, though currently unsupported (via [#132](https://github.com/tale/headplane/pull/132))
+- You can now pass in an OIDC client secret through `oidc.client_secret_path` in the config (fixes [#126](https://github.com/tale/headplane/issues/126))
+- Correctly handle differently localized number inputs (fixes [#125](https://github.com/tale/headplane/issues/125))
+
+### 0.5.3 (March 1, 2025)
+- Fixed an issue where Headplane expected the incorrect config value for OIDC scope (fixes [#111](https://github.com/tale/headplane/issues/111))
+- Added an ARIA indicator for when an input is required and fixed the confirm buttons (fixed [#116](https://github.com/tale/headplane/issues/116))
+- Fixed a typo in the docs that defaulted to `/var/run/docker.dock` for the Docker socket (via [#112](https://github.com/tale/headplane/pull/112))
+
+### 0.5.2 (February 28, 2025)
+- Hotfixed an issue where the server bundle got reloaded on each request
+
+### 0.5.1 (February 28, 2025)
+- Fixed an issue that caused the entire server to crash on start
+- Fixed the published semver tags from Docker
+- Fixed the Kubernetes integration not reading the config
+
+### 0.5 (February 27, 2025)
+> This release is a major overhaul and contains a significant breaking change.
+> We now use a config file for all settings instead of environment variables.
+> Please see [config.example.yaml](/config.example.yaml) for the new format.
+
+- Completely redesigned the UI from the ground up for accessibility and performance.
+- Switched to a config-file setup (this introduces breaking changes, see [config.example.yaml](/config.example.yaml) for the new format).
+- If the config is read-only, the options are still visible, just disabled (fixes [#48](https://github.com/tale/headplane/issues/48))
+- Added support for Headscale 0.25.0 (this drops support for any older versions).
+- Fixed issues where renaming, deleting, and changing node owners via users was not possible (fixes [#91](https://github.com/tale/headplane/issues/91))
+- Operations now have significantly less moving parts and better error handling.
+- Updated to `pnpm` 10 and Node.js 22.
+- Settings that were previously shared like `public_url` or `oidc` are now separate within Headplane/Headscale. This is a rather large breaking change but fixes cases where a user may choose to utilize Headscale OIDC for Tailscale but not for the Headplane UI.
+- Deprecate the `latest` tag in Docker for explicit versioning and `edge` for nightly builds.
+
+### 0.4.1 (January 18, 2025)
+- Fixed an urgent issue where the OIDC redirect URI would mismatch.
+
+### 0.4.0 (January 18, 2025)
+- Switched from Remix.run to React-Router
+- Fixed an issue where some config fields were marked as required even if they weren't (fixes [#66](https://github.com/tale/headplane/issues/66))
+- Fixed an issue where the toasts would be obscured by the footer (fixes [#68](https://github.com/tale/headplane/issues/68))
+- The footer now blurs your Headscale URL as a privacy measure
+- Updated to the next stable beta of the React Compiler
+- Changed `/healthz` to use a well-known endpoint instead of trying an invalid API key
+- Support `OIDC_REDIRECT_URI` to force a specific redirect URI
+- Redo the OIDC integration for better error handling and configuration
+- Gracefully handle when Headscale is unreachable instead of crashing the dashboard
+- Reusable Pre-Auth Keys no longer show expired when used (PR [#88](https://github.com/tale/headplane/pull/88))
+- Tweaked some CSS issues in the UI
+
+### 0.3.9 (December 6, 2024)
+- Fixed a race condition bug in the OIDC validation code
+
 ### 0.3.8 (December 6, 2024)
 - Added a little HTML footer to show the login page and link to a donation page.
 - Allow creating pre-auth keys that expire past 90 days (fixes [#58](https://github.com/tale/headplane/issues/58))
@@ -1,7 +1,7 @@
-FROM node:20-alpine AS build
+FROM node:22-alpine AS build
 WORKDIR /app

-RUN npm install -g pnpm
+RUN npm install -g pnpm@10
 RUN apk add --no-cache git
 COPY package.json pnpm-lock.yaml ./
 COPY patches ./patches
@@ -11,7 +11,7 @@ COPY . .
 RUN pnpm run build
 RUN pnpm prune --prod

-FROM node:20-alpine
+FROM node:22-alpine
 WORKDIR /app
 COPY --from=build /app/build /app/build
 COPY --from=build /app/node_modules /app/node_modules
@@ -1,5 +1,5 @@
 # Headplane
-> An advanced UI for [juanfont/headscale](https://github.com/juanfont/headscale)
+> A feature-complete web UI for [Headscale](https://headscale.net)

 <picture>
    <source
@@ -16,30 +16,62 @@
    >
 </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.
-It's able to replicate nearly all of the functions of the official Tailscale SaaS UI, including:
+Headscale is the de-facto self-hosted version of Tailscale, a popular Wireguard
+based VPN service. By default, it does not ship with a web UI, which is where
+Headplane comes in. Headplane is a feature-complete web UI for Headscale, allowing
+you to manage your nodes, networks, and ACLs with ease.

- Machine/Node expiry, network routing, name, and owner management
- Access Control List (ACL) and tagging configuration
+Headplane aims to replicate the functionality offered by the official Tailscale
+product and dashboard, being one of the most feature complete Headscale UIs available.
+These are some of the features that Headplane offers:
+
+- Machine management, including expiry, network routing, name, and owner management
+- Access Control List (ACL) and tagging configuration for ACL enforcement
 - Support for OpenID Connect (OIDC) as a login provider
- DNS and *safe* Headscale configuration management
+- The ability to edit DNS settings and automatically provision Headscale
+- Configurability for Headscale's settings

 ## Deployment
-> For more configuration options, refer to the [Configuration](/docs/Configuration.md) guide.
+Headplane runs as a server-based web-application, meaning you'll need a server to run it.
+It's available as a Docker image (recommended) or through a manual installation.
+There are 2 ways to deploy Headplane:

-For fully-featured deployments, see the [Advanced Deployment](/docs/Advanced-Integration.md) guide.
-This includes automatic management of ACLs, DNS settings, and Headscale configuration.
-*This is the closest experience to the Tailscale UI that can be achieved with Headscale and Headplane.*
-*If you aren't sure which one to pick, we recommend this.*
+- ### [Integrated Mode (Recommended)](/docs/Integrated-Mode.md)
+  Integrated mode unlocks all the features of Headplane and is the most
+  feature-complete deployment method. It communicates with Headscale directly.

-If your environment is not able to support the advanced deployment, you can still use the basic deployment.
-For basic deployments, see the [Basic Deployment](/docs/Basic-Integration.md) guide.
-It does not include automatic management of ACLs, DNS settings, or the Headscale configuration,
-instead requiring manual editing and reloading when making changes.
+- ### [Simple Mode](/docs/Simple-Mode.md)
+  Simple mode does not include the automatic management of DNS and Headplane
+  settings, requiring manual editing and reloading when making changes.

-## Contributing
-If you would like to contribute, please install a relatively modern version of Node.js and PNPM.
-Clone this repository, run `pnpm install`, and then run `pnpm dev` to start the development server.
+<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="ACLs"
+        src="./assets/acls-dark.png"
+    >
+</picture>

-> Copyright (c) 2024 Aarnav Tale
+<picture>
+    <source
+        media="(prefers-color-scheme: dark)"
+        srcset="./assets/machine-dark.png"
+    >
+    <source
+        media="(prefers-color-scheme: light)"
+        srcset="./assets/machine-light.png"
+    >
+    <img
+        alt="Machine Management"
+        src="./assets/machine-dark.png"
+    >
+</picture>
+
+> Copyright (c) 2025 Aarnav Tale
@@ -0,0 +1,15 @@
+FROM golang:1.23 AS builder
+WORKDIR /app
+
+COPY go.mod go.sum ./
+RUN go mod download
+
+COPY agent/ ./agent
+RUN CGO_ENABLED=0 GOOS=linux go build \
+	-trimpath \
+	-ldflags "-s -w" \
+	-o /app/hp_agent ./agent/cmd/hp_agent
+
+FROM scratch
+COPY --from=builder /app/hp_agent /hp_agent
+ENTRYPOINT ["/hp_agent"]
@@ -0,0 +1,40 @@
+package main
+
+import (
+	_ "github.com/joho/godotenv/autoload"
+	"github.com/tale/headplane/agent/config"
+	"github.com/tale/headplane/agent/tsnet"
+	"github.com/tale/headplane/agent/hpagent"
+	"log"
+)
+
+func main() {
+	cfg, err := config.Load()
+	if err != nil {
+		log.Fatalf("Failed to load configuration: %s", err)
+	}
+
+	agent := tsnet.NewAgent(
+		cfg.Hostname,
+		cfg.TSControlURL,
+		cfg.TSAuthKey,
+		cfg.Debug,
+	)
+
+	agent.StartAndFetchID()
+	defer agent.Shutdown()
+
+	ws, err := hpagent.NewSocket(
+		agent,
+		cfg.HPControlURL,
+		cfg.HPAuthKey,
+		cfg.Debug,
+	)
+
+	if err != nil {
+		log.Fatalf("Failed to create websocket: %s", err)
+	}
+
+	defer ws.StopListening()
+	ws.StartListening()
+}
@@ -0,0 +1,56 @@
+package config
+
+import (
+	"os"
+
+	_ "github.com/joho/godotenv/autoload"
+)
+
+// Config represents the configuration for the agent.
+type Config struct {
+	Debug        bool
+	Hostname     string
+	TSControlURL string
+	TSAuthKey    string
+	HPControlURL string
+	HPAuthKey    string
+}
+
+const (
+	DebugEnv        = "HEADPLANE_AGENT_DEBUG"
+	HostnameEnv     = "HEADPLANE_AGENT_HOSTNAME"
+	TSControlURLEnv = "HEADPLANE_AGENT_TS_SERVER"
+	TSAuthKeyEnv    = "HEADPLANE_AGENT_TS_AUTHKEY"
+	HPControlURLEnv = "HEADPLANE_AGENT_HP_SERVER"
+	HPAuthKeyEnv    = "HEADPLANE_AGENT_HP_AUTHKEY"
+)
+
+// Load reads the agent configuration from environment variables.
+func Load() (*Config, error) {
+	c := &Config{
+		Debug:        false,
+		Hostname:     os.Getenv(HostnameEnv),
+		TSControlURL: os.Getenv(TSControlURLEnv),
+		TSAuthKey:    os.Getenv(TSAuthKeyEnv),
+		HPControlURL: os.Getenv(HPControlURLEnv),
+		HPAuthKey:    os.Getenv(HPAuthKeyEnv),
+	}
+
+	if os.Getenv(DebugEnv) == "true" {
+		c.Debug = true
+	}
+
+	if err := validateRequired(c); err != nil {
+		return nil, err
+	}
+
+	if err := validateTSReady(c); err != nil {
+		return nil, err
+	}
+
+	if err := validateHPReady(c); err != nil {
+		return nil, err
+	}
+
+	return c, nil
+}
@@ -0,0 +1,73 @@
+package config
+
+import (
+	"fmt"
+	"net/http"
+	"strings"
+)
+
+// Checks to make sure all required environment variables are set
+func validateRequired(config *Config) error {
+	if config.Hostname == "" {
+		return fmt.Errorf("%s is required", HostnameEnv)
+	}
+
+	if config.TSControlURL == "" {
+		return fmt.Errorf("%s is required", TSControlURLEnv)
+	}
+
+	if config.HPControlURL == "" {
+		return fmt.Errorf("%s is required", HPControlURLEnv)
+	}
+
+	if config.TSAuthKey == "" {
+		return fmt.Errorf("%s is required", TSAuthKeyEnv)
+	}
+
+	if config.HPAuthKey == "" {
+		return fmt.Errorf("%s is required", HPAuthKeyEnv)
+	}
+
+	return nil
+}
+
+// Pings the Tailscale control server to make sure it's up and running
+func validateTSReady(config *Config) error {
+	testURL := config.TSControlURL
+	if strings.HasSuffix(testURL, "/") {
+		testURL = testURL[:len(testURL)-1]
+	}
+
+	// TODO: Consequences of switching to /health (headscale only)
+	testURL = fmt.Sprintf("%s/key?v=109", testURL)
+	resp, err := http.Get(testURL)
+	if err != nil {
+		return fmt.Errorf("Failed to connect to TS control server: %s", err)
+	}
+
+	if resp.StatusCode != 200 {
+		return fmt.Errorf("Failed to connect to TS control server: %s", resp.Status)
+	}
+
+	return nil
+}
+
+// Pings the Headplane server to make sure it's up and running
+func validateHPReady(config *Config) error {
+	testURL := config.HPControlURL
+	if strings.HasSuffix(testURL, "/") {
+		testURL = testURL[:len(testURL)-1]
+	}
+
+	testURL = fmt.Sprintf("%s/healthz", testURL)
+	resp, err := http.Get(testURL)
+	if err != nil {
+		return fmt.Errorf("Failed to connect to HP control server: %s", err)
+	}
+
+	if resp.StatusCode != 200 {
+		return fmt.Errorf("Failed to connect to HP control server: %s", resp.Status)
+	}
+
+	return nil
+}
@@ -0,0 +1,83 @@
+package hpagent
+
+import (
+	"encoding/json"
+	"log"
+	"sync"
+	"tailscale.com/tailcfg"
+)
+
+// Represents messages from the Headplane master
+type RecvMessage struct {
+	NodeIDs []string `json:omitempty`
+}
+
+// Starts listening for messages from the Headplane master
+func (s *Socket) StartListening() {
+	for {
+		_, message, err := s.ReadMessage()
+		if err != nil {
+			log.Printf("error reading message: %v", err)
+			return
+		}
+
+		var msg RecvMessage
+		err = json.Unmarshal(message, &msg)
+		if err != nil {
+			log.Printf("error unmarshalling message: %v", err)
+			continue
+		}
+
+		if s.Debug {
+			log.Printf("got message: %s", message)
+		}
+
+		if len(msg.NodeIDs) == 0 {
+			log.Printf("got a message with no node IDs? %s", message)
+			continue
+		}
+
+		// Accumulate the results since we invoke via gofunc
+		results := make(map[string]*tailcfg.HostinfoView)
+		mu := sync.Mutex{}
+		wg := sync.WaitGroup{}
+
+		for _, nodeID := range msg.NodeIDs {
+			wg.Add(1)
+			go func(nodeID string) {
+				defer wg.Done()
+				result, err := s.Agent.GetStatusForPeer(nodeID)
+				if err != nil {
+					log.Printf("error getting status: %v", err)
+					return
+				}
+
+				if result == nil {
+					return
+				}
+
+				mu.Lock()
+				results[nodeID] = result
+				mu.Unlock()
+			}(nodeID)
+		}
+
+		wg.Wait()
+
+		// Send the results back to the Headplane master
+		err = s.SendStatus(results)
+		if err != nil {
+			log.Printf("error sending status: %v", err)
+			return
+		}
+
+		if s.Debug {
+			log.Printf("sent status: %s", results)
+		}
+	}
+}
+
+// Stops listening for messages from the Headplane master
+func (s *Socket) StopListening() {
+	s.Close()
+}
@@ -0,0 +1,11 @@
+package hpagent
+
+import (
+	"tailscale.com/tailcfg"
+)
+
+// Sends the status to the Headplane master
+func (s *Socket) SendStatus(status map[string]*tailcfg.HostinfoView) error {
+	err := s.WriteJSON(status)
+	return err
+}
@@ -0,0 +1,57 @@
+package hpagent
+
+import (
+	"fmt"
+	"log"
+	"net/http"
+	"net/url"
+
+	"github.com/gorilla/websocket"
+	"github.com/tale/headplane/agent/tsnet"
+)
+
+type Socket struct {
+	*websocket.Conn
+	Debug bool
+	Agent *tsnet.TSAgent
+}
+
+// Creates a new websocket connection to the Headplane server.
+func NewSocket(agent *tsnet.TSAgent, controlURL, authKey string, debug bool) (*Socket, error) {
+	wsURL, err := httpToWs(controlURL)
+	if err != nil {
+		return nil, err
+	}
+
+	headers := http.Header{}
+	headers.Add("X-Headplane-Tailnet-ID", agent.ID)
+
+	auth := fmt.Sprintf("Bearer %s", authKey)
+	headers.Add("Authorization", auth)
+
+	log.Printf("dialing websocket at %s", wsURL)
+	ws, _, err := websocket.DefaultDialer.Dial(wsURL, headers)
+	if err != nil {
+		return nil, err
+	}
+
+	return &Socket{ws, debug, agent}, nil
+}
+
+// We need to convert the control URL to a websocket URL
+func httpToWs(controlURL string) (string, error) {
+	u, err := url.Parse(controlURL)
+	if err != nil {
+		return "", err
+	}
+
+	if u.Scheme == "http" {
+		u.Scheme = "ws"
+	} else if u.Scheme == "https" {
+		u.Scheme = "wss"
+	} else {
+		return "", fmt.Errorf("unsupported scheme: %s", u.Scheme)
+	}
+
+	return u.String(), nil
+}
@@ -0,0 +1,47 @@
+package tsnet
+
+import (
+	"context"
+	"fmt"
+	"log"
+	"strings"
+	"tailscale.com/tailcfg"
+	"tailscale.com/types/key"
+
+	"go4.org/mem"
+)
+
+// Returns the raw hostinfo for a peer based on node ID.
+func (s *TSAgent) GetStatusForPeer(id string) (*tailcfg.HostinfoView, error) {
+	if !strings.HasPrefix(id, "nodekey:") {
+		return nil, fmt.Errorf("invalid node ID: %s", id)
+	}
+
+	if s.Debug {
+		log.Printf("querying peer state for %s", id)
+	}
+
+	status, err := s.Lc.Status(context.Background())
+	if err != nil {
+		return nil, fmt.Errorf("failed to get status: %w", err)
+	}
+
+	nodeKey, err := key.ParseNodePublicUntyped(mem.S(id[8:]))
+	peer := status.Peer[nodeKey]
+	if peer == nil {
+		// Check if we are on Self.
+		if status.Self.PublicKey == nodeKey {
+			peer = status.Self
+		} else {
+			return nil, nil
+		}
+	}
+
+	ip := peer.TailscaleIPs[0].String()
+	whois, err := s.Lc.WhoIs(context.Background(), ip)
+	if err != nil {
+		return nil, fmt.Errorf("failed to get whois: %w", err)
+	}
+
+	return &whois.Node.Hostinfo, nil
+}
@@ -0,0 +1,61 @@
+package tsnet
+
+import (
+	"context"
+	"fmt"
+	"log"
+	"os"
+
+	"tailscale.com/client/tailscale"
+	"tailscale.com/tsnet"
+)
+
+// Wrapper type so we can add methods to the server.
+type TSAgent struct {
+	*tsnet.Server
+	Lc *tailscale.LocalClient
+	ID string
+	Debug bool
+}
+
+// Creates a new tsnet agent and returns an instance of the server.
+func NewAgent(hostname, controlURL, authKey string, debug bool) *TSAgent {
+	s := &tsnet.Server{
+		Hostname:   hostname,
+		ControlURL: controlURL,
+		AuthKey:    authKey,
+		Logf:       func(string, ...interface{}) {}, // Disabled by default
+	}
+
+	if debug {
+		s.Logf = log.New(
+			os.Stderr,
+			fmt.Sprintf("[DBG:%s] ", hostname),
+			log.LstdFlags,
+		).Printf
+	}
+
+	return &TSAgent{s, nil, "", debug}
+}
+
+// Starts the tsnet agent and sets the node ID.
+func (s *TSAgent) StartAndFetchID() {
+	// Waits until the agent is up and running.
+	status, err := s.Up(context.Background())
+	if err != nil {
+		log.Fatalf("Failed to start agent: %v", err)
+	}
+
+	s.Lc, err = s.LocalClient()
+	if err != nil {
+		log.Fatalf("Failed to create local client: %v", err)
+	}
+
+	log.Printf("Agent running with ID: %s", status.Self.PublicKey)
+	s.ID = string(status.Self.ID)
+}
+
+// Shuts down the tsnet agent.
+func (s *TSAgent) Shutdown() {
+	s.Close()
+}
@@ -1,48 +1,67 @@
-import { CopyIcon } from '@primer/octicons-react'
+import { Check, Copy } from 'lucide-react';
+import cn from '~/utils/cn';
+import toast from '~/utils/toast';

-import { toast } from './Toaster'
-
-interface Props {
-	name: string
-	value: string
-	isCopyable?: boolean
-	link?: string
+export interface AttributeProps {
+	name: string;
+	value: string;
+	isCopyable?: boolean;
+	link?: string;
 }

-export default function Attribute({ name, value, link, isCopyable }: Props) {
-	const canCopy = isCopyable ?? false
+export default function Attribute({
+	name,
+	value,
+	link,
+	isCopyable,
+}: AttributeProps) {
 	return (
-		<dl className="flex gap-1 text-sm w-full">
-			<dt className="w-1/2 shrink-0 min-w-0 truncate text-gray-700 dark:text-gray-300 py-1">
+		<dl className="flex items-center w-full gap-x-1">
+			<dt className="font-semibold w-1/4 shrink-0 text-sm">
 				{link ? (
 					<a className="hover:underline" href={link}>
 						{name}
 					</a>
-				) : name}
+				) : (
+					name
+				)}
 			</dt>
-
-			{canCopy
-				? (
+			<dd
+				className={cn(
+					'rounded-lg truncate w-full px-2.5 py-1 text-sm',
+					'flex items-center gap-x-1',
+					'focus-within:outline-none focus-within:ring-2',
+					isCopyable && 'hover:bg-headplane-100 dark:hover:bg-headplane-800',
+				)}
+			>
+				{isCopyable ? (
 					<button
 						type="button"
-						className="focus:outline-none flex items-center gap-x-1 truncate hover:bg-zinc-100 dark:hover:bg-zinc-800 rounded-md"
-						// eslint-disable-next-line @typescript-eslint/no-misused-promises
-						onClick={async () => {
-							await navigator.clipboard.writeText(value)
-							toast(`Copied ${name}`)
+						className="w-full flex items-center gap-x-1 outline-none"
+						onClick={async (event) => {
+							const svgs = event.currentTarget.querySelectorAll('svg');
+							for (const svg of svgs) {
+								svg.toggleAttribute('data-copied', true);
+							}
+
+							await navigator.clipboard.writeText(value);
+							toast('Copied to clipboard');
+
+							setTimeout(() => {
+								for (const svg of svgs) {
+									svg.toggleAttribute('data-copied', false);
+								}
+							}, 1000);
 						}}
 					>
-						<dd className="min-w-0 truncate px-2 py-1">
-							{value}
-						</dd>
-						<CopyIcon className="text-gray-600 dark:text-gray-200 pr-2 w-max h-3" />
+						<p className="truncate">{value}</p>
+						<Check className="h-4.5 w-4.5 p-1 hidden data-[copied]:block" />
+						<Copy className="h-4.5 w-4.5 p-1 block data-[copied]:hidden" />
 					</button>
-					)
-				: (
-					<dd className="min-w-0 truncate px-2 py-1">
-						{value}
-					</dd>
-					)}
+				) : (
+					value
+				)}
+			</dd>
 		</dl>
-	)
+	);
 }
@@ -1,37 +1,43 @@
-import { type Dispatch, type SetStateAction } from 'react'
-import { Button as AriaButton } from 'react-aria-components'
+import React, { useRef } from 'react';
+import { type AriaButtonOptions, useButton } from 'react-aria';
+import cn from '~/utils/cn';

-import { cn } from '~/utils/cn'
-
-type ButtonProperties = Parameters<typeof AriaButton>[0] & {
-	readonly control?: [boolean, Dispatch<SetStateAction<boolean>>]
-	readonly variant?: 'heavy' | 'light'
+export interface ButtonProps extends AriaButtonOptions<'button'> {
+	variant?: 'heavy' | 'light' | 'danger';
+	className?: string;
+	children?: React.ReactNode;
+	ref?: React.RefObject<HTMLButtonElement | null>;
 }

-export default function Button(properties: ButtonProperties) {
+export default function Button({ variant = 'light', ...props }: ButtonProps) {
+	// In case the button is used as a trigger ref
+	const ref = props.ref ?? useRef<HTMLButtonElement | null>(null);
+	const { buttonProps } = useButton(props, ref);
+
 	return (
-		<AriaButton
-			{...properties}
+		<button
+			ref={ref}
+			{...buttonProps}
 			className={cn(
-				'w-fit text-sm rounded-lg px-4 py-2',
-				properties.variant === 'heavy'
-					? 'bg-main-700 dark:bg-main-800'
-					: 'bg-main-200 dark:bg-main-700/30',
-				properties.variant === 'heavy'
-					? 'hover:bg-main-800 dark:hover:bg-main-700'
-					: 'hover:bg-main-300 dark:hover:bg-main-600/30',
-				properties.variant === 'heavy'
-					? 'text-white'
-					: 'text-ui-700 dark:text-ui-300',
-				properties.isDisabled && 'opacity-50 cursor-not-allowed',
-				properties.className,
+				'w-fit text-sm rounded-xl px-3 py-2',
+				'focus:outline-none focus:ring',
+				props.isDisabled && 'opacity-60 cursor-not-allowed',
+				...(variant === 'heavy'
+					? [
+							'bg-headplane-900 dark:bg-headplane-50 font-semibold',
+							'hover:bg-headplane-900/90 dark:hover:bg-headplane-50/90',
+							'text-headplane-200 dark:text-headplane-800',
+						]
+					: variant === 'danger'
+						? ['bg-red-500 text-white font-semibold', 'hover:bg-red-500/90']
+						: [
+								'bg-headplane-100 dark:bg-headplane-700/30 font-medium',
+								'hover:bg-headplane-200/90 dark:hover:bg-headplane-800/30',
+							]),
+				props.className,
 			)}
-			// If control is passed, set the state value
-			onPress={properties.control
-				? () => {
-						properties.control?.[1](true)
-					}
-				: properties.onPress}
-		/>
-	)
+		>
+			{props.children}
+		</button>
+	);
 }
@@ -1,53 +1,28 @@
-import { type HTMLProps } from 'react'
-import { Heading as AriaHeading } from 'react-aria-components'
+import React from 'react';
+import Text from '~/components/Text';
+import Title from '~/components/Title';
+import cn from '~/utils/cn';

-import { cn } from '~/utils/cn'
-
-function Title(properties: Parameters<typeof AriaHeading>[0]) {
-	return (
-		<AriaHeading
-			{...properties}
-			slot='title'
-			className={cn(
-				'text-lg font-semibold leading-6 mb-5',
-				properties.className
-			)}
-		/>
-	)
-}
-
-function Text(properties: React.HTMLProps<HTMLParagraphElement>) {
-	return (
-		<p
-			{...properties}
-			className={cn(
-				'text-base leading-6 my-0',
-				properties.className
-			)}
-		/>
-	)
-}
-
-type Properties = HTMLProps<HTMLDivElement> & {
+interface Props extends React.HTMLProps<HTMLDivElement> {
 	variant?: 'raised' | 'flat';
 }

-function Card(properties: Properties) {
+function Card({ variant = 'raised', ...props }: Props) {
 	return (
 		<div
-			{...properties}
+			{...props}
 			className={cn(
-				'w-full max-w-md overflow-hidden rounded-xl p-4',
-				properties.variant === 'flat'
+				'w-full max-w-md rounded-3xl p-5',
+				variant === 'flat'
 					? 'bg-transparent shadow-none'
-					: 'bg-ui-50 dark:bg-ui-900 shadow-sm',
-				'border border-ui-200 dark:border-ui-700',
-				properties.className
+					: 'bg-headplane-50/50 dark:bg-headplane-950/50 shadow-sm',
+				'border border-headplane-100 dark:border-headplane-800',
+				props.className,
 			)}
 		>
-			{properties.children}
+			{props.children}
 		</div>
-	)
+	);
 }

-export default Object.assign(Card, { Title, Text })
+export default Object.assign(Card, { Title, Text });
@@ -0,0 +1,32 @@
+import React from 'react';
+import cn from '~/utils/cn';
+
+export interface ChipProps {
+	text: string;
+	className?: string;
+	leftIcon?: React.ReactNode;
+	rightIcon?: React.ReactNode;
+}
+
+export default function Chip({
+	text,
+	className,
+	leftIcon,
+	rightIcon,
+}: ChipProps) {
+	return (
+		<span
+			className={cn(
+				'text-xs px-2 py-0.5 rounded-full',
+				'text-headplane-700 dark:text-headplane-100',
+				'bg-headplane-100 dark:bg-headplane-700',
+				leftIcon || rightIcon ? 'inline-flex items-center gap-x-1' : '',
+				className,
+			)}
+		>
+			{leftIcon}
+			{text}
+			{rightIcon}
+		</span>
+	);
+}
@@ -1,45 +1,52 @@
-import { useState, HTMLProps } from 'react'
-import { CopyIcon, CheckIcon } from '@primer/octicons-react'
+import { Check, Copy } from 'lucide-react';
+import { HTMLProps } from 'react';
+import cn from '~/utils/cn';
+import toast from '~/utils/toast';

-import { cn } from '~/utils/cn'
-import { toast } from '~/components/Toaster'
-
-interface Props extends HTMLProps<HTMLSpanElement> {
-	isCopyable?: boolean
+export interface CodeProps extends HTMLProps<HTMLSpanElement> {
+	isCopyable?: boolean;
+	children: string | string[];
 }

-export default function Code(props: Props) {
-	const [isCopied, setIsCopied] = useState(false)
-
+export default function Code({ isCopyable, children, className }: CodeProps) {
 	return (
-		<>
-			<code className={cn(
-				'bg-ui-100 dark:bg-ui-800 p-0.5 rounded-md',
-				props.className
-			)}>
-				{props.children}
-			</code>
-			{props.isCopyable && (
+		<code
+			className={cn(
+				'bg-headplane-100 dark:bg-headplane-800 px-1 py-0.5 font-mono',
+				'rounded-lg focus-within:outline-none focus-within:ring-2',
+				isCopyable && 'relative pr-7',
+				className,
+			)}
+		>
+			{children}
+			{isCopyable && (
 				<button
-					className={cn(
-						'ml-1 p-1 rounded-md',
-						'bg-ui-100 dark:bg-ui-800',
-						'text-ui-500 dark:text-ui-400',
-						'inline-flex items-center justify-center'
-					)}
-					onClick={() => {
-						navigator.clipboard.writeText(props.children.join(''))
-						toast('Copied to clipboard')
-						setIsCopied(true)
-						setTimeout(() => setIsCopied(false), 1000)
+					type="button"
+					className="bottom-0 right-0 absolute"
+					onClick={async (event) => {
+						const text = Array.isArray(children)
+							? children.join(' ')
+							: children;
+
+						const svgs = event.currentTarget.querySelectorAll('svg');
+						for (const svg of svgs) {
+							svg.toggleAttribute('data-copied', true);
+						}
+
+						await navigator.clipboard.writeText(text);
+						toast('Copied to clipboard');
+
+						setTimeout(() => {
+							for (const svg of svgs) {
+								svg.toggleAttribute('data-copied', false);
+							}
+						}, 1000);
 					}}
 				>
-					{isCopied ?
-						<CheckIcon className="h-3 w-3" /> :
-						<CopyIcon className="h-3 w-3" />
-					}
+					<Check className="h-4.5 w-4.5 p-1 hidden data-[copied]:block" />
+					<Copy className="h-4.5 w-4.5 p-1 block data-[copied]:hidden" />
 				</button>
 			)}
-		</>
-	)
+		</code>
+	);
 }
@@ -1,143 +1,184 @@
-/* eslint-disable unicorn/no-keyword-prefix */
-import { type Dispatch, type ReactNode, type SetStateAction } from 'react'
+import React, { cloneElement, useRef } from 'react';
 import {
-	Button as AriaButton,
-	Dialog as AriaDialog,
-	DialogTrigger,
-	Heading as AriaHeading,
-	Modal,
-	ModalOverlay
-} from 'react-aria-components'
+	type AriaDialogProps,
+	type AriaModalOverlayProps,
+	Overlay,
+	useDialog,
+	useModalOverlay,
+	useOverlayTrigger,
+} from 'react-aria';
+import { Form, type HTMLFormMethod } from 'react-router';
+import {
+	type OverlayTriggerProps,
+	type OverlayTriggerState,
+	useOverlayTriggerState,
+} from 'react-stately';
+import Button, { ButtonProps } from '~/components/Button';
+import Card from '~/components/Card';
+import IconButton, { IconButtonProps } from '~/components/IconButton';
+import Text from '~/components/Text';
+import Title from '~/components/Title';
+import cn from '~/utils/cn';

-import { cn } from '~/utils/cn'
-
-type ButtonProperties = Parameters<typeof AriaButton>[0] & {
-	readonly control?: [boolean, Dispatch<SetStateAction<boolean>>];
+export interface DialogProps extends OverlayTriggerProps {
+	children:
+		| [
+				React.ReactElement<ButtonProps> | React.ReactElement<IconButtonProps>,
+				React.ReactElement<DialogPanelProps>,
+		  ]
+		| React.ReactElement<DialogPanelProps>;
 }

-function Button(properties: ButtonProperties) {
-	return (
-		<AriaButton
-			{...properties}
-			aria-label='Dialog'
-			className={cn(
-				'w-fit text-sm rounded-lg px-4 py-2',
-				'bg-main-700 dark:bg-main-800 text-white',
-				'hover:bg-main-800 dark:hover:bg-main-700',
-				properties.isDisabled && 'opacity-50 cursor-not-allowed',
-				properties.className
-			)}
-			// If control is passed, set the state value
-			onPress={properties.control ? () => {
-				properties.control?.[1](true)
-			} : undefined}
-		/>
-	)
-}
+function Dialog(props: DialogProps) {
+	const state = useOverlayTriggerState(props);
+	const { triggerProps, overlayProps } = useOverlayTrigger(
+		{
+			type: 'dialog',
+		},
+		state,
+	);

-type ActionProperties = Parameters<typeof AriaButton>[0] & {
-	readonly variant: 'cancel' | 'confirm';
-}
-
-function Action(properties: ActionProperties) {
-	return (
-		<AriaButton
-			{...properties}
-			type={properties.variant === 'confirm' ? 'submit' : 'button'}
-			className={cn(
-				'px-4 py-2 rounded-lg',
-				properties.isDisabled && 'opacity-50 cursor-not-allowed',
-				properties.variant === 'cancel'
-					? 'text-ui-700 dark:text-ui-300'
-					: 'text-ui-300 dark:text-ui-300',
-				properties.variant === 'confirm'
-					? 'bg-main-700 dark:bg-main-700 pressed:bg-main-800 dark:pressed:bg-main-800'
-					: 'bg-ui-200 dark:bg-ui-800 pressed:bg-ui-300 dark:pressed:bg-ui-700',
-				properties.className
-			)}
-		/>
-	)
-}
-
-function Title(properties: Parameters<typeof AriaHeading>[0]) {
-	return (
-		<AriaHeading
-			{...properties}
-			slot='title'
-			className={cn(
-				'text-lg font-semibold leading-6 mb-5',
-				properties.className
-			)}
-		/>
-	)
-}
-
-function Text(properties: React.HTMLProps<HTMLParagraphElement>) {
-	return (
-		<p
-			{...properties}
-			className={cn(
-				'text-base leading-6 my-0',
-				properties.className
-			)}
-		/>
-	)
-}
-
-type PanelProperties = {
-	readonly children: (close: () => void) => ReactNode;
-	readonly control?: [boolean, Dispatch<SetStateAction<boolean>>];
-	readonly className?: string;
-}
-
-function Panel({ children, control, className }: PanelProperties) {
-	return (
-		<ModalOverlay
-			aria-hidden='true'
-			className={cn(
-				'fixed inset-0 h-screen w-screen z-50 bg-black/30',
-				'flex items-center justify-center dark:bg-black/70',
-				'entering:animate-in exiting:animate-out',
-				'entering:fade-in entering:duration-200 entering:ease-out',
-				'exiting:fade-out exiting:duration-100 exiting:ease-in',
-				className
-			)}
-			isOpen={control ? control[0] : undefined}
-			onOpenChange={control ? control[1] : undefined}
-		>
-			<Modal
-				className={cn(
-					'w-full max-w-md overflow-hidden rounded-xl p-4',
-					'bg-ui-50 dark:bg-ui-900 shadow-lg',
-					'entering:animate-in exiting:animate-out',
-					'dark:border dark:border-ui-700',
-					'entering:zoom-in-95 entering:ease-out entering:duration-200',
-					'exiting:zoom-out-95 exiting:ease-in exiting:duration-100'
+	if (Array.isArray(props.children)) {
+		const [button, panel] = props.children;
+		return (
+			<>
+				{cloneElement(button, triggerProps)}
+				{state.isOpen && (
+					<DModal state={state}>
+						{cloneElement(panel, {
+							...overlayProps,
+							close: () => state.close(),
+						})}
+					</DModal>
 				)}
-			>
-				<AriaDialog role='alertdialog' className='outline-none relative'>
-					{({ close }) => children(close)}
-				</AriaDialog>
-			</Modal>
-		</ModalOverlay>
-	)
-}
-
-type DialogProperties = {
-	readonly children: ReactNode;
-	readonly control?: [boolean, Dispatch<SetStateAction<boolean>>];
-}
-
-function Dialog({ children, control }: DialogProperties) {
-	if (control) {
-		return children
+			</>
+		);
 	}

 	return (
-		<DialogTrigger>
-			{children}
-		</DialogTrigger>
-	)
+		<DModal state={state}>
+			{cloneElement(props.children, {
+				...overlayProps,
+				close: () => state.close(),
+			})}
+		</DModal>
+	);
 }

-export default Object.assign(Dialog, { Button, Title, Text, Panel, Action })
+export interface DialogPanelProps extends AriaDialogProps {
+	children: React.ReactNode;
+	variant?: 'normal' | 'destructive' | 'unactionable';
+	onSubmit?: React.FormEventHandler<HTMLFormElement>;
+	method?: HTMLFormMethod;
+	isDisabled?: boolean;
+
+	// Anonymous (passed by parent)
+	close?: () => void;
+}
+
+function Panel(props: DialogPanelProps) {
+	const {
+		children,
+		onSubmit,
+		isDisabled,
+		close,
+		variant,
+		method = 'POST',
+	} = props;
+	const ref = useRef<HTMLFormElement | null>(null);
+	const { dialogProps } = useDialog(
+		{
+			...props,
+			role: 'alertdialog',
+		},
+		ref,
+	);
+
+	return (
+		<Form
+			{...dialogProps}
+			onSubmit={(event) => {
+				if (onSubmit) {
+					onSubmit(event);
+				}
+
+				close?.();
+			}}
+			method={method ?? 'POST'}
+			ref={ref}
+			className={cn(
+				'outline-none rounded-3xl w-full max-w-lg',
+				'bg-white dark:bg-headplane-900',
+			)}
+		>
+			<Card className="w-full max-w-lg" variant="flat">
+				{children}
+				<div className="mt-6 flex justify-end gap-4">
+					{variant === 'unactionable' ? (
+						<Button onPress={close}>Close</Button>
+					) : (
+						<>
+							<Button onPress={close}>Cancel</Button>
+							<Button
+								type="submit"
+								variant={variant === 'destructive' ? 'danger' : 'heavy'}
+								isDisabled={isDisabled}
+							>
+								Confirm
+							</Button>
+						</>
+					)}
+				</div>
+			</Card>
+		</Form>
+	);
+}
+
+interface DModalProps extends AriaModalOverlayProps {
+	children: React.ReactNode;
+	state: OverlayTriggerState;
+}
+
+function DModal(props: DModalProps) {
+	const { children, state } = props;
+	const ref = useRef<HTMLDivElement>(null);
+	const { modalProps, underlayProps } = useModalOverlay(props, state, ref);
+
+	if (!state.isOpen) {
+		return null;
+	}
+
+	return (
+		<Overlay>
+			<div
+				{...underlayProps}
+				aria-hidden="true"
+				className={cn(
+					'fixed inset-0 h-screen w-screen z-20',
+					'flex items-center justify-center',
+					'bg-headplane-900/15 dark:bg-headplane-900/30',
+					'entering:animate-in exiting:animate-out',
+					'entering:fade-in entering:duration-100 entering:ease-out',
+					'exiting:fade-out exiting:duration-50 exiting:ease-in',
+				)}
+			/>
+			<div
+				{...modalProps}
+				className={cn(
+					'fixed inset-0 h-screen w-screen z-20',
+					'flex items-center justify-center',
+				)}
+			>
+				{children}
+			</div>
+		</Overlay>
+	);
+}
+
+export default Object.assign(Dialog, {
+	Button,
+	IconButton,
+	Panel,
+	Title,
+	Text,
+});
@@ -1,19 +1,40 @@
-import { AlertIcon } from '@primer/octicons-react'
-import { isRouteErrorResponse, useRouteError } from '@remix-run/react'
+import { AlertIcon } from '@primer/octicons-react';
+import { isRouteErrorResponse, useRouteError } from 'react-router';
+import cn from '~/utils/cn';
+import Card from './Card';
+import Code from './Code';

-import { cn } from '~/utils/cn'
-
-import Card from './Card'
-import Code from './Code'
-
-type Properties = {
-	readonly type?: 'full' | 'embedded';
+interface Props {
+	type?: 'full' | 'embedded';
 }

-export function ErrorPopup({ type = 'full' }: Properties) {
-	const error = useRouteError()
-	const routing = isRouteErrorResponse(error)
-	const message = (error instanceof Error ? error.message : 'An unexpected error occurred')
+function getMessage(error: Error | unknown) {
+	if (!(error instanceof Error)) {
+		return 'An unknown error occurred';
+	}
+
+	let rootError = error;
+
+	// Traverse the error chain to find the root cause
+	if (error.cause) {
+		rootError = error.cause as Error;
+		while (rootError.cause) {
+			rootError = rootError.cause as Error;
+		}
+	}
+
+	// If we are aggregate, concat into a single message
+	if (rootError instanceof AggregateError) {
+		return rootError.errors.map((error) => error.message).join('\n');
+	}
+
+	return rootError.message;
+}
+
+export function ErrorPopup({ type = 'full' }: Props) {
+	const error = useRouteError();
+	const routing = isRouteErrorResponse(error);
+	const message = getMessage(error);

 	return (
 		<div
@@ -21,26 +42,20 @@ export function ErrorPopup({ type = 'full' }: Properties) {
 				'flex items-center justify-center',
 				type === 'embedded'
 					? 'pointer-events-none mt-24'
-					: 'fixed inset-0 h-screen w-screen z-50'
+					: 'fixed inset-0 h-screen w-screen z-50',
 			)}
 		>
 			<Card>
-				<div className='flex items-center justify-between'>
-					<Card.Title className='text-3xl mb-0'>
+				<div className="flex items-center justify-between">
+					<Card.Title className="text-3xl mb-0">
 						{routing ? error.status : 'Error'}
 					</Card.Title>
-					<AlertIcon className='w-12 h-12 text-red-500'/>
+					<AlertIcon className="w-12 h-12 text-red-500" />
 				</div>
-				<Card.Text className='mt-4 text-lg'>
-					{routing ? (
-						error.statusText
-					) : (
-						<Code>
-							{message}
-						</Code>
-					)}
+				<Card.Text className="mt-4 text-lg">
+					{routing ? error.statusText : <Code>{message}</Code>}
 				</Card.Text>
 			</Card>
 		</div>
-	)
+	);
 }
@@ -0,0 +1,42 @@
+import Link from '~/components/Link';
+import cn from '~/utils/cn';
+
+declare global {
+	const __VERSION__: string;
+}
+
+interface FooterProps {
+	url: string;
+	debug: boolean;
+}
+
+export default function Footer({ url, debug }: FooterProps) {
+	return (
+		<footer
+			className={cn(
+				'fixed bottom-0 left-0 z-40 w-full h-14',
+				'flex flex-col justify-center gap-1 shadow-inner',
+				'bg-headplane-100 dark:bg-headplane-950',
+				'text-headplane-800 dark:text-headplane-200',
+				'dark:border-t dark:border-headplane-800',
+			)}
+		>
+			<p className="container text-xs">
+				Headplane is entirely free to use. If you find it useful, consider{' '}
+				<Link
+					to="https://github.com/sponsors/tale"
+					name="Aarnav's GitHub Sponsors"
+				>
+					donating
+				</Link>{' '}
+				to support development.{' '}
+			</p>
+			<p className="container text-xs opacity-75">
+				Version: {__VERSION__}
+				{' — '}
+				Connecting to <strong className="blur-xs hover:blur-none">{url}</strong>
+				{debug && ' (Debug mode enabled)'}
+			</p>
+		</footer>
+	);
+}
@@ -1,116 +1,163 @@
-import { GearIcon, GlobeIcon, LockIcon, PaperAirplaneIcon, PeopleIcon, PersonIcon, ServerIcon } from '@primer/octicons-react'
-import { Form } from '@remix-run/react'
+import {
+	CircleUser,
+	Globe2,
+	Lock,
+	PlaneTakeoff,
+	Server,
+	Settings,
+	Users,
+} from 'lucide-react';
+import type { ReactNode } from 'react';
+import { NavLink, useSubmit } from 'react-router';
+import Menu from '~/components/Menu';
+import cn from '~/utils/cn';
+import type { SessionData } from '~/utils/sessions.server';

-import { cn } from '~/utils/cn'
-import { HeadplaneContext } from '~/utils/config/headplane'
-import { type SessionData } from '~/utils/sessions'
-
-import Menu from './Menu'
-import TabLink from './TabLink'
-
-interface Properties {
-	readonly data?: {
-		config: HeadplaneContext['config']
-		user?: SessionData['user']
-	}
+interface Props {
+	configAvailable: boolean;
+	user?: SessionData['user'];
 }

-interface LinkProperties {
-	readonly href: string
-	readonly text: string
-	readonly isMenu?: boolean
+interface LinkProps {
+	href: string;
+	text: string;
 }

-function Link({ href, text, isMenu }: LinkProperties) {
+interface TabLinkProps {
+	name: string;
+	to: string;
+	icon: ReactNode;
+}
+
+function TabLink({ name, to, icon }: TabLinkProps) {
+	return (
+		<div className="relative py-2">
+			<NavLink
+				to={to}
+				prefetch="intent"
+				className={({ isActive }) =>
+					cn(
+						'px-3 py-2 flex items-center rounded-md text-nowrap gap-x-2.5',
+						'after:absolute after:bottom-0 after:left-3 after:right-3',
+						'after:h-0.5 after:bg-headplane-900 dark:after:bg-headplane-200',
+						'hover:bg-headplane-200 dark:hover:bg-headplane-900',
+						'focus:outline-none focus:ring',
+						isActive ? 'after:visible' : 'after:invisible',
+					)
+				}
+			>
+				{icon} {name}
+			</NavLink>
+		</div>
+	);
+}
+
+function Link({ href, text }: LinkProps) {
 	return (
 		<a
 			href={href}
 			target="_blank"
 			rel="noreferrer"
 			className={cn(
-				!isMenu && 'text-ui-300 hover:text-ui-50 hover:underline hidden sm:block',
+				'hidden sm:block hover:underline text-sm',
+				'focus:outline-none focus:ring rounded-md',
 			)}
 		>
 			{text}
 		</a>
-	)
+	);
 }

-export default function Header({ data }: Properties) {
+export default function Header(data: Props) {
+	const submit = useSubmit();
+
 	return (
-		<header className="bg-main-700 dark:bg-main-800 text-ui-50">
+		<header
+			className={cn(
+				'bg-headplane-100 dark:bg-headplane-950',
+				'text-headplane-800 dark:text-headplane-200',
+				'dark:border-b dark:border-headplane-800',
+				'shadow-inner',
+			)}
+		>
 			<div className="container flex items-center justify-between py-4">
 				<div className="flex items-center gap-x-2">
-					<PaperAirplaneIcon className="w-6 h-6" />
-					<h1 className="text-2xl">Headplane</h1>
+					<PlaneTakeoff />
+					<h1 className="text-2xl font-semibold">headplane</h1>
 				</div>
 				<div className="flex items-center gap-x-4">
 					<Link href="https://tailscale.com/download" text="Download" />
 					<Link href="https://github.com/tale/headplane" text="GitHub" />
 					<Link href="https://github.com/juanfont/headscale" text="Headscale" />
-					{data?.user
-						? (
-							<Menu>
-								<Menu.Button className={cn(
-									'rounded-full h-9 w-9',
-									'border border-main-600 dark:border-main-700',
-									'hover:bg-main-600 dark:hover:bg-main-700',
+					{data.user ? (
+						<Menu>
+							<Menu.IconButton
+								label="User"
+								className={cn(data.user.picture ? 'p-0' : '')}
+							>
+								{data.user.picture ? (
+									<img
+										src={data.user.picture}
+										alt={data.user.name}
+										className="w-8 h-8 rounded-full"
+									/>
+								) : (
+									<CircleUser />
 								)}
-								>
-									<PersonIcon className="h-5 w-5 mt-0.5" />
-								</Menu.Button>
-								<Menu.Items>
-									<Menu.Item className="text-right">
-										<p className="font-bold">{data.user.name}</p>
-										<p>{data.user.email}</p>
+							</Menu.IconButton>
+							<Menu.Panel
+								onAction={(key) => {
+									if (key === 'logout') {
+										submit(
+											{},
+											{
+												method: 'POST',
+												action: '/logout',
+											},
+										);
+									}
+								}}
+								disabledKeys={['profile']}
+							>
+								<Menu.Section>
+									<Menu.Item key="profile" textValue="Profile">
+										<div className="text-black dark:text-headplane-50">
+											<p className="font-bold">{data.user.name}</p>
+											<p>{data.user.email}</p>
+										</div>
 									</Menu.Item>
-									<Menu.Item className="text-right sm:hidden">
-										<Link
-											isMenu
-											href="https://tailscale.com/download"
-											text="Download"
-										/>
+									<Menu.Item key="logout" textValue="Logout">
+										<p className="text-red-500 dark:text-red-400">Logout</p>
 									</Menu.Item>
-									<Menu.Item className="text-right sm:hidden">
-										<Link
-											isMenu
-											href="https://github.com/tale/headplane"
-											text="GitHub"
-										/>
-									</Menu.Item>
-									<Menu.Item className="text-right sm:hidden">
-										<Link
-											isMenu
-											href="https://github.com/juanfont/headscale"
-											text="Headscale"
-										/>
-									</Menu.Item>
-									<Menu.Item className="text-red-500 dark:text-red-400">
-										<Form method="POST" action="/logout">
-											<button type="submit" className="w-full text-right">
-												Logout
-											</button>
-										</Form>
-									</Menu.Item>
-								</Menu.Items>
-							</Menu>
-							)
-						: undefined}
+								</Menu.Section>
+							</Menu.Panel>
+						</Menu>
+					) : undefined}
 				</div>
 			</div>
-			<nav className="container flex items-center gap-x-4 overflow-x-auto">
-				<TabLink to="/machines" name="Machines" icon={<ServerIcon className="w-4 h-4" />} />
-				<TabLink to="/users" name="Users" icon={<PeopleIcon className="w-4 h-4" />} />
-				<TabLink to="/acls" name="Access Control" icon={<LockIcon className="w-4 h-4" />} />
-				{data?.config.read
-					? (
-						<>
-							<TabLink to="/dns" name="DNS" icon={<GlobeIcon className="w-4 h-4" />} />
-							<TabLink to="/settings" name="Settings" icon={<GearIcon className="w-4 h-4" />} />
-						</>
-						)
-					: undefined}
+			<nav className="container flex items-center gap-x-4 overflow-x-auto font-semibold">
+				<TabLink
+					to="/machines"
+					name="Machines"
+					icon={<Server className="w-5" />}
+				/>
+				<TabLink to="/users" name="Users" icon={<Users className="w-5" />} />
+				<TabLink
+					to="/acls"
+					name="Access Control"
+					icon={<Lock className="w-5" />}
+				/>
+				{data.configAvailable ? (
+					<>
+						<TabLink to="/dns" name="DNS" icon={<Globe2 className="w-5" />} />
+						<TabLink
+							to="/settings"
+							name="Settings"
+							icon={<Settings className="w-5" />}
+						/>
+					</>
+				) : undefined}
 			</nav>
 		</header>
-	)
+	);
 }
@@ -0,0 +1,46 @@
+import React, { useRef } from 'react';
+import { type AriaButtonOptions, useButton } from 'react-aria';
+import cn from '~/utils/cn';
+
+export interface IconButtonProps extends AriaButtonOptions<'button'> {
+	variant?: 'heavy' | 'light';
+	className?: string;
+	children: React.ReactNode;
+	label: string;
+	ref?: React.RefObject<HTMLButtonElement | null>;
+}
+
+export default function IconButton({
+	variant = 'light',
+	...props
+}: IconButtonProps) {
+	// In case the button is used as a trigger ref
+	const ref = props.ref ?? useRef<HTMLButtonElement | null>(null);
+	const { buttonProps } = useButton(props, ref);
+
+	return (
+		<button
+			ref={ref}
+			{...buttonProps}
+			aria-label={props.label}
+			className={cn(
+				'rounded-full flex items-center justify-center p-1',
+				'focus:outline-none focus:ring',
+				props.isDisabled && 'opacity-60 cursor-not-allowed',
+				...(variant === 'heavy'
+					? [
+							'bg-headplane-900 dark:bg-headplane-50 font-semibold',
+							'hover:bg-headplane-900/90 dark:hover:bg-headplane-50/90',
+							'text-headplane-200 dark:text-headplane-800',
+						]
+					: [
+							'bg-headplane-100 dark:bg-headplane-700/30 font-medium',
+							'hover:bg-headplane-200/90 dark:hover:bg-headplane-800/30',
+						]),
+				props.className,
+			)}
+		>
+			{props.children}
+		</button>
+	);
+}
@@ -0,0 +1,84 @@
+import { Asterisk } from 'lucide-react';
+import { useRef } from 'react';
+import { type AriaTextFieldProps, useId, useTextField } from 'react-aria';
+import cn from '~/utils/cn';
+
+export interface InputProps extends AriaTextFieldProps<HTMLInputElement> {
+	label: string;
+	labelHidden?: boolean;
+	isRequired?: boolean;
+	className?: string;
+}
+
+// TODO: Custom isInvalid logic for custom error messages
+export default function Input(props: InputProps) {
+	const { label, labelHidden, className } = props;
+	const ref = useRef<HTMLInputElement | null>(null);
+	const id = useId(props.id);
+
+	const {
+		labelProps,
+		inputProps,
+		descriptionProps,
+		errorMessageProps,
+		isInvalid,
+		validationErrors,
+	} = useTextField(
+		{
+			...props,
+			label,
+			'aria-label': label,
+		},
+		ref,
+	);
+
+	return (
+		<div className="flex flex-col w-full" aria-label={label}>
+			<label
+				{...labelProps}
+				htmlFor={id}
+				className={cn(
+					'text-xs font-medium px-3 mb-0.5',
+					'text-headplane-700 dark:text-headplane-100',
+					labelHidden && 'sr-only',
+				)}
+			>
+				{label}
+				{props.isRequired && (
+					<Asterisk className="inline w-3.5 text-red-500 pb-1 ml-0.5" />
+				)}
+			</label>
+			<input
+				{...inputProps}
+				required={props.isRequired}
+				ref={ref}
+				className={cn(
+					'rounded-xl px-3 py-2',
+					'focus:outline-none focus:ring',
+					'bg-white dark:bg-headplane-900',
+					'border border-headplane-100 dark:border-headplane-800',
+					className,
+				)}
+			/>
+			{props.description && (
+				<div
+					{...descriptionProps}
+					className={cn(
+						'text-xs px-3 mt-1',
+						'text-headplane-500 dark:text-headplane-400',
+					)}
+				>
+					{props.description}
+				</div>
+			)}
+			{isInvalid && (
+				<div
+					{...errorMessageProps}
+					className={cn('text-xs px-3 mt-1', 'text-red-500 dark:text-red-400')}
+				>
+					{validationErrors.join(' ')}
+				</div>
+			)}
+		</div>
+	);
+}
@@ -1,15 +1,19 @@
-import { LinkExternalIcon } from '@primer/octicons-react'
+import { ExternalLink } from 'lucide-react';
+import cn from '~/utils/cn';

-import { cn } from '~/utils/cn'
-
-interface Props {
-	to: string
-	name: string
-	children: string
-	className?: string
+export interface LinkProps {
+	to: string;
+	name: string;
+	children: string;
+	className?: string;
 }

-export default function Link({ to, name: alt, children, className }: Props) {
+export default function Link({
+	to,
+	name: alt,
+	children,
+	className,
+}: LinkProps) {
 	return (
 		<a
 			href={to}
@@ -17,14 +21,15 @@ export default function Link({ to, name: alt, children, className }: Props) {
 			target="_blank"
 			rel="noreferrer"
 			className={cn(
-				'inline-flex items-center gap-x-1',
+				'inline-flex items-center gap-x-0.5',
 				'text-blue-500 hover:text-blue-700',
 				'dark:text-blue-400 dark:hover:text-blue-300',
+				'focus:outline-none focus:ring rounded-md',
 				className,
 			)}
 		>
 			{children}
-			<LinkExternalIcon className="h-3 w-3" />
+			<ExternalLink className="w-3.5" />
 		</a>
-	)
+	);
 }
@@ -1,98 +1,153 @@
-import { type Dispatch, type ReactNode, type SetStateAction } from 'react'
+import React, { useRef, cloneElement } from 'react';
+import { type AriaMenuProps, Key, Placement, useMenuTrigger } from 'react-aria';
+import { useMenu, useMenuItem, useMenuSection, useSeparator } from 'react-aria';
+import { Item, Section } from 'react-stately';
 import {
-	Button as AriaButton,
-	Menu as AriaMenu,
-	MenuItem,
-	MenuTrigger,
-	Popover
-} from 'react-aria-components'
+	type MenuTriggerProps,
+	Node,
+	TreeState,
+	useMenuTriggerState,
+	useTreeState,
+} from 'react-stately';
+import Button, { ButtonProps } from '~/components/Button';
+import IconButton, { IconButtonProps } from '~/components/IconButton';
+import Popover from '~/components/Popover';
+import cn from '~/utils/cn';

-import { cn } from '~/utils/cn'
-
-function Button(properties: Parameters<typeof AriaButton>[0]) {
-	return (
-		<AriaButton
-			{...properties}
-			className={cn(
-				'outline-none',
-				properties.className
-			)}
-			aria-label='Menu'
-		/>
-	)
+interface MenuProps extends MenuTriggerProps {
+	placement?: Placement;
+	children: [
+		React.ReactElement<ButtonProps> | React.ReactElement<IconButtonProps>,
+		React.ReactElement<MenuPanelProps>,
+	];
 }

-function Items(properties: Parameters<typeof AriaMenu>[0]) {
+// TODO: onAction is called twice for some reason?
+function Menu(props: MenuProps) {
+	const { placement = 'bottom' } = props;
+	const state = useMenuTriggerState(props);
+	const ref = useRef<HTMLButtonElement | null>(null);
+	const { menuTriggerProps, menuProps } = useMenuTrigger<object>(
+		{},
+		state,
+		ref,
+	);
+
+	// cloneElement is necessary because the button is a union type
+	// of multiple things and we need to join props from our hooks
+	const [button, panel] = props.children;
 	return (
-		<Popover className={cn(
-			'mt-2 rounded-md',
-			'bg-ui-50 dark:bg-ui-800',
-			'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'
-		)}
+		<div>
+			{cloneElement(button, {
+				...menuTriggerProps,
+				ref,
+			})}
+			{state.isOpen && (
+				<Popover state={state} triggerRef={ref} placement={placement}>
+					{cloneElement(panel, {
+						...menuProps,
+						autoFocus: state.focusStrategy ?? true,
+						onClose: () => state.close(),
+					})}
+				</Popover>
+			)}
+		</div>
+	);
+}
+
+interface MenuPanelProps extends AriaMenuProps<object> {
+	onClose?: () => void;
+}
+
+function Panel(props: MenuPanelProps) {
+	const state = useTreeState(props);
+	const ref = useRef(null);
+
+	const { menuProps } = useMenu(props, state, ref);
+	return (
+		<ul
+			{...menuProps}
+			ref={ref}
+			className="pt-1 pb-1 shadow-xs rounded-md min-w-[200px] focus:outline-none"
 		>
-			<AriaMenu
-				{...properties}
-				className={cn(
-					'outline-none',
-					'divide-y divide-ui-200 dark:divide-ui-600',
-					properties.className
-				)}
-			>
-				{properties.children}
-			</AriaMenu>
-		</Popover>
-	)
+			{[...state.collection].map((item) => (
+				<MenuSection key={item.key} section={item} state={state} />
+			))}
+		</ul>
+	);
 }

-type ButtonProperties = Parameters<typeof AriaButton>[0] & {
-	readonly control?: [boolean, Dispatch<SetStateAction<boolean>>];
+interface MenuSectionProps<T> {
+	section: Node<T>;
+	state: TreeState<T>;
 }

-function ItemButton(properties: ButtonProperties) {
+function MenuSection<T>({ section, state }: MenuSectionProps<T>) {
+	const { itemProps, groupProps } = useMenuSection({
+		heading: section.rendered,
+		'aria-label': section['aria-label'],
+	});
+
+	const { separatorProps } = useSeparator({
+		elementType: 'li',
+	});
+
 	return (
-		<MenuItem className='outline-none'>
-			<AriaButton
-				{...properties}
-				className={cn(
-					'px-4 py-2 w-full outline-none text-left',
-					'hover:bg-ui-200 dark:hover:bg-ui-700',
-					properties.className
-				)}
-				aria-label='Menu Dialog'
-				// If control is passed, set the state value
-				onPress={event => {
-					properties.onPress?.(event)
-					properties.control?.[1](true)
-				}}
-			/>
-		</MenuItem>
-	)
+		<>
+			{section.key !== state.collection.getFirstKey() ? (
+				<li
+					{...separatorProps}
+					className={cn(
+						'mx-2 mt-1 mb-1 border-t',
+						'border-headplane-200 dark:border-headplane-800',
+					)}
+				/>
+			) : undefined}
+			<li {...itemProps}>
+				<ul {...groupProps}>
+					{[...section.childNodes].map((item) => (
+						<MenuItem key={item.key} item={item} state={state} />
+					))}
+				</ul>
+			</li>
+		</>
+	);
 }

-function Item(properties: Parameters<typeof MenuItem>[0]) {
+interface MenuItemProps<T> {
+	item: Node<T>;
+	state: TreeState<T>;
+}
+
+function MenuItem<T>({ item, state }: MenuItemProps<T>) {
+	const ref = useRef<HTMLLIElement | null>(null);
+	const { menuItemProps } = useMenuItem({ key: item.key }, state, ref);
+
+	const isFocused = state.selectionManager.focusedKey === item.key;
+	const isDisabled = state.selectionManager.isDisabled(item.key);
+
 	return (
-		<MenuItem
-			{...properties}
+		<li
+			{...menuItemProps}
+			ref={ref}
 			className={cn(
-				'px-4 py-2 w-full outline-none',
-				'hover:bg-ui-200 dark:hover:bg-ui-700',
-				properties.className
+				'py-2 px-3 mx-1 rounded-lg',
+				'focus:outline-none select-none',
+				isFocused && 'bg-headplane-100/50 dark:bg-headplane-800',
+				isDisabled
+					? 'text-headplane-400 dark:text-headplane-600'
+					: 'hover:bg-headplane-100/50 dark:hover:bg-headplane-800 cursor-pointer',
 			)}
-		/>
-	)
+		>
+			{item.rendered}
+		</li>
+	);
 }

-function Menu({ children }: { readonly children: ReactNode }) {
-	return (
-		<MenuTrigger>
-			{children}
-		</MenuTrigger>
-	)
-}
-
-export default Object.assign(Menu, { Button, Item, ItemButton, Items })
+export default Object.assign(Menu, {
+	Button,
+	IconButton,
+	Panel,
+	Section,
+	Item,
+});
@@ -1,23 +1,16 @@
-import { InfoIcon } from '@primer/octicons-react'
-import type { ReactNode } from 'react'
+import { CircleSlash2 } from 'lucide-react';
+import React from 'react';
+import Card from '~/components/Card';

-import { cn } from '~/utils/cn'
-
-interface Props {
-	className?: string
-	children: ReactNode
+export interface NoticeProps {
+	children: React.ReactNode;
 }

-export default function Notice({ children, className }: Props) {
+export default function Notice({ children }: NoticeProps) {
 	return (
-		<div className={cn(
-			'p-4 rounded-md w-full flex items-center gap-3',
-			'bg-ui-200 dark:bg-ui-800',
-			className,
-		)}
-		>
-			<InfoIcon className="h-6 w-6 text-ui-700 dark:text-ui-200" />
+		<Card className="flex w-full max-w-full gap-4 font-semibold">
+			<CircleSlash2 />
 			{children}
-		</div>
-	)
+		</Card>
+	);
 }
@@ -1,47 +0,0 @@
-import { PlusIcon, DashIcon } from '@primer/octicons-react'
-import { Dispatch, SetStateAction } from 'react'
-import {
-	Button,
-	Group,
-	Input,
-	NumberField as AriaNumberField
-} from 'react-aria-components'
-
-import { cn } from '~/utils/cn'
-
-type NumberFieldProps = Parameters<typeof AriaNumberField>[0] & {
-	label: string;
-	state?: [number, Dispatch<SetStateAction<number>>];
-}
-
-export default function NumberField(props: NumberFieldProps) {
-	return (
-		<AriaNumberField
-			{...props}
-			aria-label={props.label}
-			className="w-full"
-			value={props.state?.[0]}
-			onChange={value => {
-				props.state?.[1](value)
-			}}
-		>
-			<Group className={cn(
-				'flex px-2.5 py-1.5 w-full rounded-lg my-1',
-				'border border-ui-200 dark:border-ui-600',
-				'dark:bg-ui-800 dark:text-ui-300 gap-2',
-				'focus-within:ring-2 focus-within:ring-blue-600',
-				props.className
-			)}>
-				<Input
-					className="w-full bg-transparent focus:outline-none"
-				/>
-				<Button slot="decrement">
-					<DashIcon className="w-4 h-4" />
-				</Button>
-				<Button slot="increment">
-					<PlusIcon className="w-4 h-4" />
-				</Button>
-			</Group>
-		</AriaNumberField>
-	)
-}
@@ -0,0 +1,102 @@
+import { Minus, Plus } from 'lucide-react';
+import { useRef } from 'react';
+import {
+	type AriaNumberFieldProps,
+	useId,
+	useLocale,
+	useNumberField,
+} from 'react-aria';
+import { useNumberFieldState } from 'react-stately';
+import IconButton from '~/components/IconButton';
+import cn from '~/utils/cn';
+
+export interface InputProps extends AriaNumberFieldProps {
+	isRequired?: boolean;
+	name?: string;
+}
+
+export default function NumberInput(props: InputProps) {
+	const { label, name } = props;
+	const { locale } = useLocale();
+	const state = useNumberFieldState({ ...props, locale });
+	const ref = useRef<HTMLInputElement | null>(null);
+	const id = useId(props.id);
+
+	const {
+		labelProps,
+		inputProps,
+		groupProps,
+		incrementButtonProps,
+		decrementButtonProps,
+		descriptionProps,
+		errorMessageProps,
+		isInvalid,
+		validationErrors,
+	} = useNumberField(props, state, ref);
+
+	return (
+		<div className="flex flex-col">
+			<label
+				{...labelProps}
+				htmlFor={id}
+				className={cn(
+					'text-xs font-medium px-3 mb-0.5',
+					'text-headplane-700 dark:text-headplane-100',
+				)}
+			>
+				{label}
+			</label>
+			<div
+				{...groupProps}
+				className={cn(
+					'flex items-center gap-1 rounded-xl pr-1',
+					'focus-within:outline-none focus-within:ring',
+					'bg-white dark:bg-headplane-900',
+					'border border-headplane-100 dark:border-headplane-800',
+				)}
+			>
+				<input
+					{...inputProps}
+					required={props.isRequired}
+					ref={ref}
+					id={id}
+					className="w-full pl-3 py-2 rounded-l-xl bg-transparent focus:outline-none"
+				/>
+				<input type="hidden" name={name} value={state.numberValue} />
+				<IconButton
+					{...decrementButtonProps}
+					label="Decrement"
+					className="w-7.5 h-7.5 rounded-lg"
+				>
+					<Minus className="p-1" />
+				</IconButton>
+				<IconButton
+					{...incrementButtonProps}
+					label="Increment"
+					className="w-7.5 h-7.5 rounded-lg"
+				>
+					<Plus className="p-1" />
+				</IconButton>
+			</div>
+			{props.description && (
+				<div
+					{...descriptionProps}
+					className={cn(
+						'text-xs px-3 mt-1',
+						'text-headplane-500 dark:text-headplane-400',
+					)}
+				>
+					{props.description}
+				</div>
+			)}
+			{isInvalid && (
+				<div
+					{...errorMessageProps}
+					className={cn('text-xs px-3 mt-1', 'text-red-500 dark:text-red-400')}
+				>
+					{validationErrors.join(' ')}
+				</div>
+			)}
+		</div>
+	);
+}
@@ -0,0 +1,49 @@
+import React, { useRef } from 'react';
+import {
+	type AriaPopoverProps,
+	DismissButton,
+	Overlay,
+	usePopover,
+} from 'react-aria';
+import type { OverlayTriggerState } from 'react-stately';
+import cn from '~/utils/cn';
+
+export interface PopoverProps extends Omit<AriaPopoverProps, 'popoverRef'> {
+	children: React.ReactNode;
+	state: OverlayTriggerState;
+	popoverRef?: React.RefObject<HTMLDivElement | null>;
+	className?: string;
+}
+
+export default function Popover(props: PopoverProps) {
+	const ref = props.popoverRef ?? useRef<HTMLDivElement | null>(null);
+	const { state, children, className } = props;
+	const { popoverProps, underlayProps } = usePopover(
+		{
+			...props,
+			popoverRef: ref,
+			offset: 8,
+		},
+		state,
+	);
+
+	return (
+		<Overlay>
+			<div {...underlayProps} className="fixed inset-0" />
+			<div
+				{...popoverProps}
+				ref={ref}
+				className={cn(
+					'z-10 shadow-sm rounded-xl',
+					'bg-white dark:bg-headplane-900',
+					'border border-headplane-200 dark:border-headplane-800',
+					className,
+				)}
+			>
+				<DismissButton onDismiss={state.close} />
+				{children}
+				<DismissButton onDismiss={state.close} />
+			</div>
+		</Overlay>
+	);
+}
@@ -0,0 +1,26 @@
+import { useProgressBar } from 'react-aria';
+import cn from '~/utils/cn';
+
+export interface ProgressBarProps {
+	isVisible: boolean;
+}
+
+export default function ProgressBar(props: ProgressBarProps) {
+	const { isVisible } = props;
+	const { progressBarProps } = useProgressBar({
+		label: 'Loading...',
+		isIndeterminate: true,
+	});
+
+	return (
+		<div
+			{...progressBarProps}
+			aria-hidden={!isVisible}
+			className={cn(
+				'fixed top-0 left-0 z-50 w-1/2 h-1 opacity-0',
+				'bg-headplane-950 dark:bg-headplane-50',
+				isVisible && 'animate-loading opacity-100',
+			)}
+		/>
+	);
+}
@@ -1,82 +1,172 @@
-import { ChevronDownIcon } from '@primer/octicons-react'
-import { Dispatch, ReactNode, SetStateAction } from 'react'
+import { Check, ChevronDown } from 'lucide-react';
+import { useRef } from 'react';
 import {
-	Button,
-	ListBox,
-	ListBoxItem,
-	Popover,
-	Select as AriaSelect,
-	SelectValue,
-} from 'react-aria-components'
+	AriaComboBoxProps,
+	AriaListBoxOptions,
+	useButton,
+	useComboBox,
+	useFilter,
+	useId,
+	useListBox,
+	useOption,
+} from 'react-aria';
+import { Item, ListState, Node, useComboBoxState } from 'react-stately';
+import Popover from '~/components/Popover';
+import cn from '~/utils/cn';

-import { cn } from '~/utils/cn'
-
-type SelectProps = Parameters<typeof AriaSelect>[0] & {
-	readonly label: string
-	readonly state?: [string, Dispatch<SetStateAction<string>>]
-	readonly children: ReactNode
+export interface SelectProps extends AriaComboBoxProps<object> {
+	className?: string;
 }

 function Select(props: SelectProps) {
+	const { contains } = useFilter({ sensitivity: 'base' });
+	const state = useComboBoxState({ ...props, defaultFilter: contains });
+	const id = useId(props.id);
+
+	const buttonRef = useRef<HTMLButtonElement | null>(null);
+	const inputRef = useRef<HTMLInputElement | null>(null);
+	const listBoxRef = useRef<HTMLUListElement | null>(null);
+	const popoverRef = useRef<HTMLDivElement | null>(null);
+
+	const {
+		buttonProps: triggerProps,
+		inputProps,
+		listBoxProps,
+		labelProps,
+		descriptionProps,
+	} = useComboBox(
+		{
+			...props,
+			inputRef,
+			buttonRef,
+			listBoxRef,
+			popoverRef,
+		},
+		state,
+	);
+
+	const { buttonProps } = useButton(triggerProps, buttonRef);
 	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
+		<div className={cn('flex flex-col', props.className)}>
+			<label
+				{...labelProps}
+				htmlFor={id}
 				className={cn(
-					'mt-2 rounded-md w-[var(--trigger-width)]',
-					'bg-ui-100 dark:bg-ui-800 shadow-sm',
-					'z-50 overflow-y-auto',
-					'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',
+					'text-xs font-medium px-3 mb-0.5',
+					'text-headplane-700 dark:text-headplane-100',
 				)}
 			>
-				<ListBox orientation="vertical">
-					{props.children}
-				</ListBox>
-			</Popover>
-		</AriaSelect>
-	)
+				{props.label}
+			</label>
+			<div
+				className={cn(
+					'flex rounded-xl focus:outline-none focus-within:ring',
+					'bg-white dark:bg-headplane-900',
+					'border border-headplane-100 dark:border-headplane-800',
+				)}
+			>
+				<input
+					{...inputProps}
+					ref={inputRef}
+					id={id}
+					className="outline-none px-3 py-2 rounded-l-xl w-full bg-transparent"
+					data-1p-ignore
+				/>
+				<button
+					{...buttonProps}
+					ref={buttonRef}
+					className={cn(
+						'flex items-center justify-center p-1 rounded-lg m-1',
+						'bg-headplane-100 dark:bg-headplane-700/30 font-medium',
+						'hover:bg-headplane-200/90 dark:hover:bg-headplane-800/30',
+					)}
+				>
+					<ChevronDown className="p-0.5" />
+				</button>
+			</div>
+			{props.description && (
+				<div
+					{...descriptionProps}
+					className={cn(
+						'text-xs px-3 mt-1',
+						'text-headplane-500 dark:text-headplane-400',
+					)}
+				>
+					{props.description}
+				</div>
+			)}
+			{state.isOpen && (
+				<Popover
+					popoverRef={popoverRef}
+					triggerRef={inputRef}
+					state={state}
+					isNonModal
+					placement="bottom start"
+					className="w-full max-w-xs"
+				>
+					<ListBox {...listBoxProps} listBoxRef={listBoxRef} state={state} />
+				</Popover>
+			)}
+		</div>
+	);
 }

-type ItemProps = Parameters<typeof ListBoxItem>[0]
+interface ListBoxProps extends AriaListBoxOptions<object> {
+	listBoxRef?: React.RefObject<HTMLUListElement | null>;
+	state: ListState<object>;
+}
+
+function ListBox(props: ListBoxProps) {
+	const { listBoxRef, state } = props;
+	const ref = listBoxRef ?? useRef<HTMLUListElement | null>(null);
+	const { listBoxProps } = useListBox(props, state, ref);

-function Item(props: ItemProps) {
 	return (
-		<ListBoxItem
-			{...props}
+		<ul
+			{...listBoxProps}
+			ref={listBoxRef}
+			className="w-full max-h-72 overflow-auto outline-none pt-1"
+		>
+			{[...state.collection].map((item) => (
+				<Option key={item.key} item={item} state={state} />
+			))}
+		</ul>
+	);
+}
+
+interface OptionProps {
+	item: Node<unknown>;
+	state: ListState<unknown>;
+}
+
+function Option({ item, state }: OptionProps) {
+	const ref = useRef<HTMLLIElement | null>(null);
+	const { optionProps, isDisabled, isSelected, isFocused } = useOption(
+		{
+			key: item.key,
+		},
+		state,
+		ref,
+	);
+
+	return (
+		<li
+			{...optionProps}
+			ref={ref}
 			className={cn(
-				'px-4 py-2 w-full outline-none w-full',
-				'hover:bg-ui-200 dark:hover:bg-ui-700',
-				props.className,
+				'flex items-center justify-between',
+				'py-2 px-3 mx-1 rounded-lg mb-1',
+				'focus:outline-none select-none',
+				isFocused || isSelected
+					? 'bg-headplane-100/50 dark:bg-headplane-800'
+					: 'hover:bg-headplane-100/50 dark:hover:bg-headplane-800',
+				isDisabled && 'text-headplane-300 dark:text-headplane-600',
 			)}
 		>
-			{props.children}
-		</ListBoxItem>
-	)
+			{item.rendered}
+			{isSelected && <Check className="p-0.5" />}
+		</li>
+	);
 }

-export default Object.assign(Select, { Item })
+export default Object.assign(Select, { Item });
@@ -1,23 +1,21 @@
-import clsx from 'clsx'
+import clsx from 'clsx';

-type Properties = {
-	// eslint-disable-next-line unicorn/no-keyword-prefix
+interface Props {
 	className?: string;
 }

-export default function Spinner(properties: Properties) {
+export default function Spinner({ className }: Props) {
 	return (
-		<div className={clsx('mr-1.5 inline-block align-middle mb-0.5', properties.className)}>
+		<div className={clsx('inline-block align-middle mb-0.5', className)}>
 			<div
 				className={clsx(
 					'animate-spin rounded-full w-full h-full',
 					'border-2 border-current border-t-transparent',
-					properties.className
+					className,
 				)}
-				role='status'
 			>
-				<span className='sr-only'>Loading...</span>
+				<span className="sr-only">Loading...</span>
 			</div>
 		</div>
-	)
+	);
 }
@@ -1,24 +1,27 @@
-import clsx from 'clsx'
-import { type HTMLProps } from 'react'
+import cn from '~/utils/cn';

-type Properties = HTMLProps<SVGElement> & {
-	readonly isOnline: boolean;
+export interface StatusCircleProps {
+	isOnline: boolean;
+	className?: string;
 }

-// eslint-disable-next-line unicorn/no-keyword-prefix
-export default function StatusCircle({ isOnline, className }: Properties) {
+export default function StatusCircle({
+	isOnline,
+	className,
+}: StatusCircleProps) {
 	return (
 		<svg
-			className={clsx(
-				className,
+			className={cn(
 				isOnline
-					? 'text-green-700 dark:text-green-400'
-					: 'text-gray-300 dark:text-gray-500'
+					? 'text-green-600 dark:text-green-500'
+					: 'text-headplane-200 dark:text-headplane-800',
+				className,
 			)}
-			viewBox='0 0 24 24'
-			fill='currentColor'
+			viewBox="0 0 24 24"
+			fill="currentColor"
 		>
-			<circle cx='12' cy='12' r='8'/>
+			<title>{isOnline ? 'Online' : 'Offline'}</title>
+			<circle cx="12" cy="12" r="8" />
 		</svg>
-	)
+	);
 }
@@ -1,34 +1,61 @@
-import { Switch as AriaSwitch } from 'react-aria-components'
+import { useRef } from 'react';
+import {
+	AriaSwitchProps,
+	VisuallyHidden,
+	useFocusRing,
+	useSwitch,
+} from 'react-aria';
+import { useToggleState } from 'react-stately';
+import cn from '~/utils/cn';

-import { cn } from '~/utils/cn'
-
-type SwitchProperties = Parameters<typeof AriaSwitch>[0] & {
-	readonly label: string;
+export interface SwitchProps extends AriaSwitchProps {
+	label: string;
+	className?: string;
 }

-export default function Switch(properties: SwitchProperties) {
+export default function Switch(props: SwitchProps) {
+	const state = useToggleState(props);
+	const ref = useRef<HTMLInputElement | null>(null);
+	const { focusProps, isFocusVisible } = useFocusRing();
+	const { inputProps } = useSwitch(
+		{
+			...props,
+			'aria-label': props.label,
+		},
+		state,
+		ref,
+	);
+
 	return (
-		<AriaSwitch
-			{...properties}
-			aria-label={properties.label}
-			className='group flex gap-2 items-center'
-		>
+		<label className="flex items-center gap-x-2">
+			<VisuallyHidden elementType="span">
+				<input
+					{...inputProps}
+					{...focusProps}
+					aria-label={props.label}
+					ref={ref}
+				/>
+			</VisuallyHidden>
 			<div
+				aria-hidden
 				className={cn(
-					'flex h-[26px] w-[44px] p-[4px] shrink-0',
-					'rounded-full outline-none group-focus-visible:ring-2',
-					'bg-main-600/50 dark:bg-main-600/20 group-selected:bg-main-700',
-					properties.isDisabled && 'opacity-50 cursor-not-allowed',
-					properties.className
+					'flex h-[28px] w-[46px] p-[4px] shrink-0 rounded-full',
+					'bg-headplane-300 dark:bg-headplane-700',
+					'border border-transparent dark:border-headplane-800',
+					state.isSelected && 'bg-headplane-900 dark:bg-headplane-950',
+					isFocusVisible && 'ring-2',
+					props.isDisabled && 'opacity-50',
 				)}
 			>
-				<span className={cn(
-					'h-[18px] w-[18px] transform rounded-full',
-					'bg-white transition duration-100 ease-in-out',
-					'translate-x-0 group-selected:translate-x-[100%]'
-				)}
+				<span
+					className={cn(
+						'h-[18px] w-[18px] transform rounded-full',
+						'bg-white transition duration-50 ease-in-out',
+						'translate-x-0 group-selected:translate-x-[100%]',
+						state.isSelected && 'translate-x-[100%]',
+					)}
 				/>
 			</div>
-		</AriaSwitch>
-	)
+		</label>
+	);
 }
@@ -1,32 +0,0 @@
-import { NavLink } from '@remix-run/react'
-import type { ReactNode } from 'react'
-
-import { cn } from '~/utils/cn'
-
-type Properties = {
-	readonly name: string;
-	readonly to: string;
-	readonly icon: ReactNode;
-}
-
-export default function TabLink({ name, to, icon }: Properties) {
-	return (
-		<NavLink
-			to={to}
-			prefetch='intent'
-			className={({ isActive }) => cn(
-				'border-b-2 py-1.5',
-				isActive ? 'border-white' : 'border-transparent'
-			)}
-		>
-			<div
-				className={cn(
-					'flex items-center gap-x-2 px-2.5 py-1.5 text-md text-nowrap',
-					'hover:bg-ui-100/5 dark:hover:bg-ui-900/40 rounded-md'
-				)}
-			>
-				{icon} {name}
-			</div>
-		</NavLink>
-	)
-}
@@ -1,37 +1,34 @@
-import clsx from 'clsx'
-import { type HTMLProps } from 'react'
+import type { HTMLProps } from 'react';
+import cn from '~/utils/cn';

-function TableList(properties: HTMLProps<HTMLDivElement>) {
+function TableList(props: HTMLProps<HTMLDivElement>) {
 	return (
 		<div
-			{...properties}
-			className={clsx(
-				'border border-gray-300 rounded-lg overflow-clip',
-				'dark:border-zinc-700 dark:text-gray-300',
-				// 'dark:bg-zinc-800',
-				properties.className
+			{...props}
+			className={cn(
+				'rounded-xl',
+				'border border-headplane-100 dark:border-headplane-800',
+				props.className,
 			)}
 		>
-			{properties.children}
+			{props.children}
 		</div>
-	)
+	);
 }

-function Item(properties: HTMLProps<HTMLDivElement>) {
+function Item(props: HTMLProps<HTMLDivElement>) {
 	return (
 		<div
-			{...properties}
-			className={clsx(
-
-				'flex items-center justify-between px-3 py-2',
-				'border-b border-gray-200 last:border-b-0',
-				'dark:border-zinc-800',
-				properties.className
+			{...props}
+			className={cn(
+				'flex items-center justify-between p-2 last:border-b-0',
+				'border-b border-headplane-100 dark:border-headplane-800',
+				props.className,
 			)}
 		>
-			{properties.children}
+			{props.children}
 		</div>
-	)
+	);
 }

-export default Object.assign(TableList, { Item })
+export default Object.assign(TableList, { Item });
@@ -0,0 +1,90 @@
+import { useRef } from 'react';
+import {
+	AriaTabListProps,
+	AriaTabPanelProps,
+	useTab,
+	useTabList,
+	useTabPanel,
+} from 'react-aria';
+import { Item, Node, TabListState, useTabListState } from 'react-stately';
+import cn from '~/utils/cn';
+
+export interface TabsProps extends AriaTabListProps<object> {
+	label: string;
+	className?: string;
+}
+
+function Tabs({ label, className, ...props }: TabsProps) {
+	const state = useTabListState(props);
+	const ref = useRef<HTMLDivElement | null>(null);
+
+	const { tabListProps } = useTabList(props, state, ref);
+	return (
+		<div className={cn('flex flex-col', className)}>
+			<div
+				{...tabListProps}
+				ref={ref}
+				className={cn(
+					'flex items-center rounded-t-xl w-fit',
+					'border-headplane-100 dark:border-headplane-800',
+					'border-t border-x',
+				)}
+			>
+				{[...state.collection].map((item) => (
+					<Tab key={item.key} item={item} state={state} />
+				))}
+			</div>
+			<TabsPanel key={state.selectedItem?.key} state={state} />
+		</div>
+	);
+}
+
+export interface TabsTabProps {
+	item: Node<object>;
+	state: TabListState<object>;
+}
+
+function Tab({ item, state }: TabsTabProps) {
+	const { key, rendered } = item;
+	const ref = useRef<HTMLDivElement | null>(null);
+
+	const { tabProps } = useTab({ key }, state, ref);
+	return (
+		<div
+			{...tabProps}
+			ref={ref}
+			className={cn(
+				'pl-2 pr-3 py-2.5',
+				'aria-selected:bg-headplane-100 dark:aria-selected:bg-headplane-950',
+				'focus:outline-none focus:ring z-10',
+				'border-r border-headplane-100 dark:border-headplane-800',
+				'first:rounded-tl-xl last:rounded-tr-xl last:border-r-0',
+			)}
+		>
+			{rendered}
+		</div>
+	);
+}
+
+export interface TabsPanelProps extends AriaTabPanelProps {
+	state: TabListState<object>;
+}
+
+function TabsPanel({ state, ...props }: TabsPanelProps) {
+	const ref = useRef<HTMLDivElement | null>(null);
+	const { tabPanelProps } = useTabPanel(props, state, ref);
+	return (
+		<div
+			{...tabPanelProps}
+			ref={ref}
+			className={cn(
+				'w-full overflow-clip rounded-b-xl rounded-r-xl',
+				'border border-headplane-100 dark:border-headplane-800',
+			)}
+		>
+			{state.selectedItem?.props.children}
+		</div>
+	);
+}
+
+export default Object.assign(Tabs, { Item });
@@ -0,0 +1,11 @@
+import React from 'react';
+import cn from '~/utils/cn';
+
+export interface TextProps {
+	children: React.ReactNode;
+	className?: string;
+}
+
+export default function Text({ children, className }: TextProps) {
+	return <p className={cn('text-md my-0', className)}>{children}</p>;
+}
@@ -1,38 +0,0 @@
-import { type Dispatch, type SetStateAction } from 'react'
-import {
-	Input,
-	TextField as AriaTextField
-} from 'react-aria-components'
-
-import { cn } from '~/utils/cn'
-
-type TextFieldProperties = Parameters<typeof AriaTextField>[0] & {
-	readonly label: string;
-	readonly placeholder: string;
-	readonly state?: [string, Dispatch<SetStateAction<string>>];
-}
-
-export default function TextField(properties: TextFieldProperties) {
-	return (
-		<AriaTextField
-			{...properties}
-			aria-label={properties.label}
-			className='w-full'
-		>
-			<Input
-				placeholder={properties.placeholder}
-				value={properties.state?.[0]}
-				name={properties.name}
-				className={cn(
-					'block px-2.5 py-1.5 w-full rounded-lg my-1',
-					'border border-ui-200 dark:border-ui-600',
-					'dark:bg-ui-800 dark:text-ui-300',
-					properties.className
-				)}
-				onChange={event => {
-					properties.state?.[1](event.target.value)
-				}}
-			/>
-		</AriaTextField>
-	)
-}
@@ -0,0 +1,13 @@
+import React from 'react';
+import cn from '~/utils/cn';
+
+export interface TitleProps {
+	children: React.ReactNode;
+	className?: string;
+}
+
+export default function Title({ children, className }: TitleProps) {
+	return (
+		<h3 className={cn('text-2xl font-bold mb-2', className)}>{children}</h3>
+	);
+}
@@ -0,0 +1,87 @@
+import {
+	AriaToastProps,
+	AriaToastRegionProps,
+	useToast,
+	useToastRegion,
+} from '@react-aria/toast';
+import { ToastQueue, ToastState, useToastQueue } from '@react-stately/toast';
+import { X } from 'lucide-react';
+import React, { useRef } from 'react';
+import IconButton from '~/components/IconButton';
+import cn from '~/utils/cn';
+
+interface ToastProps extends AriaToastProps<React.ReactNode> {
+	state: ToastState<React.ReactNode>;
+}
+
+function Toast({ state, ...props }: ToastProps) {
+	const ref = useRef<HTMLDivElement | null>(null);
+	const { toastProps, contentProps, titleProps, closeButtonProps } = useToast(
+		props,
+		state,
+		ref,
+	);
+
+	return (
+		<div
+			{...toastProps}
+			ref={ref}
+			className={cn(
+				'flex items-center justify-between gap-x-3 pl-4 pr-3',
+				'text-white shadow-lg dark:shadow-md rounded-xl py-3',
+				'bg-headplane-900 dark:bg-headplane-950',
+			)}
+		>
+			<div {...contentProps} className="flex flex-col gap-2">
+				<div {...titleProps}>{props.toast.content}</div>
+			</div>
+			<IconButton
+				{...closeButtonProps}
+				label="Close"
+				className={cn(
+					'bg-transparent hover:bg-headplane-700',
+					'dark:bg-transparent dark:hover:bg-headplane-800',
+				)}
+			>
+				<X className="p-1" />
+			</IconButton>
+		</div>
+	);
+}
+
+interface ToastRegionProps extends AriaToastRegionProps {
+	state: ToastState<React.ReactNode>;
+}
+
+function ToastRegion({ state, ...props }: ToastRegionProps) {
+	const ref = useRef<HTMLDivElement | null>(null);
+	const { regionProps } = useToastRegion(props, state, ref);
+
+	return (
+		<div
+			{...regionProps}
+			ref={ref}
+			className={cn('fixed bottom-20 right-4', 'flex flex-col gap-4')}
+		>
+			{state.visibleToasts.map((toast) => (
+				<Toast key={toast.key} toast={toast} state={state} />
+			))}
+		</div>
+	);
+}
+
+export interface ToastProviderProps extends AriaToastRegionProps {
+	queue: ToastQueue<React.ReactNode>;
+}
+
+export default function ToastProvider({ queue, ...props }: ToastProviderProps) {
+	const state = useToastQueue(queue);
+
+	return (
+		<>
+			{state.visibleToasts.length > 0 && (
+				<ToastRegion {...props} state={state} />
+			)}
+		</>
+	);
+}
@@ -1,85 +0,0 @@
-import { XIcon } from '@primer/octicons-react'
-import { AriaToastProps, useToast, useToastRegion } from '@react-aria/toast'
-import { ToastQueue, ToastState, useToastQueue } from '@react-stately/toast'
-import { ReactNode, useRef } from 'react'
-import { Button } from 'react-aria-components'
-import { createPortal } from 'react-dom'
-import { ClientOnly } from 'remix-utils/client-only'
-
-import { cn } from '~/utils/cn'
-
-type ToastProperties = AriaToastProps<ReactNode> & {
-	readonly state: ToastState<ReactNode>;
-}
-
-function Toast({ state, ...properties }: ToastProperties) {
-	const reference = useRef(null)
-
-	// @ts-expect-error: RefObject doesn't map to FocusableElement?
-	const { toastProps, titleProps, closeButtonProps } = useToast(properties, state, reference)
-
-	return (
-		<div
-			{...toastProps}
-			ref={reference}
-			className={cn(
-				'bg-main-700 dark:bg-main-800 rounded-lg',
-				'text-main-100 dark:text-main-200 z-50',
-				'border border-main-600 dark:border-main-700',
-				'flex items-center justify-between p-3 pl-4 w-80'
-			)}
-		>
-			<div {...titleProps}>{properties.toast.content}</div>
-			<Button
-				{...closeButtonProps}
-				className={cn(
-					'outline-none rounded-full p-1',
-					'hover:bg-main-600 dark:hover:bg-main-700'
-				)}
-			>
-				<XIcon className='w-4 h-4'/>
-			</Button>
-		</div>
-	)
-}
-
-const toasts = new ToastQueue<ReactNode>({
-	maxVisibleToasts: 5
-})
-
-export function toast(text: string) {
-	return toasts.add(text, { timeout: 5000 })
-}
-
-export function Toaster() {
-	const reference = useRef(null)
-	const state = useToastQueue(toasts)
-
-	// @ts-expect-error: React 19 has weird types for Portal vs Node
-	const { regionProps } = useToastRegion({}, state, reference)
-
-	return (
-		<ClientOnly>
-			{
-				// @ts-expect-error: Portal doesn't match Node in React 19 yet
-				() => createPortal(
-				state.visibleToasts.length >= 0 ? (
-					<div
-						className={cn(
-							'fixed bottom-4 right-4',
-							'flex flex-col gap-4'
-						)}
-						{...regionProps}
-						ref={reference}
-					>
-						{state.visibleToasts.map(toast => (
-							<Toast key={toast.key} toast={toast} state={state}/>
-						))}
-					</div>
-				) : undefined,
-				document.body
-			)}
-		</ClientOnly>
-	)
-}
-
@@ -1,43 +1,83 @@
-import { ReactNode } from 'react'
+import React, { cloneElement, useRef } from 'react';
 import {
-	Button as AriaButton,
-	Tooltip as AriaTooltip,
-	TooltipTrigger,
-} from 'react-aria-components'
+	AriaTooltipProps,
+	mergeProps,
+	useTooltip,
+	useTooltipTrigger,
+} from 'react-aria';
+import { TooltipTriggerState, useTooltipTriggerState } from 'react-stately';
+import cn from '~/utils/cn';

-import { cn } from '~/utils/cn'
-
-interface Props {
-	children: ReactNode
-	className?: string
+export interface TooltipProps extends AriaTooltipProps {
+	children: [React.ReactElement, React.ReactElement<TooltipBodyProps>];
 }

-function Tooltip({ children }: Props) {
+function Tooltip(props: TooltipProps) {
+	const state = useTooltipTriggerState({
+		...props,
+		delay: 0,
+		closeDelay: 0,
+	});
+
+	const ref = useRef<HTMLButtonElement | null>(null);
+	const { triggerProps, tooltipProps } = useTooltipTrigger(
+		{
+			...props,
+			delay: 0,
+			closeDelay: 0,
+		},
+		state,
+		ref,
+	);
+
+	const [component, body] = props.children;
 	return (
-		<TooltipTrigger delay={0}>
-			{children}
-		</TooltipTrigger>
-	)
+		<span className="relative">
+			<button
+				ref={ref}
+				{...triggerProps}
+				className={cn(
+					'flex items-center justify-center',
+					'focus:outline-none focus:ring rounded-xl',
+				)}
+			>
+				{component}
+			</button>
+			{state.isOpen &&
+				cloneElement(body, {
+					...tooltipProps,
+					state,
+				})}
+		</span>
+	);
 }

-function Button(props: Parameters<typeof AriaButton>[0]) {
-	return (
-		<AriaButton {...props} />
-	)
+interface TooltipBodyProps extends AriaTooltipProps {
+	children: React.ReactNode;
+	state?: TooltipTriggerState;
+	className?: string;
 }

-function Body({ children, className }: Props) {
+function Body({ state, className, ...props }: TooltipBodyProps) {
+	const { tooltipProps } = useTooltip(props, state);
 	return (
-		<AriaTooltip className={cn(
-			'text-sm max-w-xs p-2 rounded-lg mb-2',
-			'bg-white dark:bg-ui-900 drop-shadow-sm',
-			'border border-gray-200 dark:border-zinc-700',
-			className,
-		)}
+		<span
+			{...mergeProps(props, tooltipProps)}
+			className={cn(
+				'absolute z-50 p-3 top-full mt-1',
+				'outline-none rounded-3xl text-sm w-48',
+				'bg-white dark:bg-headplane-950',
+				'text-black dark:text-white',
+				'shadow-lg dark:shadow-md rounded-xl',
+				'border border-headplane-100 dark:border-headplane-800',
+				className,
+			)}
 		>
-			{children}
-		</AriaTooltip>
-	)
+			{props.children}
+		</span>
+	);
 }

-export default Object.assign(Tooltip, { Button, Body })
+export default Object.assign(Tooltip, {
+	Body,
+});
@@ -0,0 +1,18 @@
+import { StrictMode, startTransition } from 'react';
+import { hydrateRoot } from 'react-dom/client';
+import { HydratedRouter } from 'react-router/dom';
+
+if (import.meta.env.DEV) {
+	import('react-scan').then(({ scan }) => {
+		scan({ enabled: true });
+	});
+}
+
+startTransition(() => {
+	hydrateRoot(
+		document,
+		<StrictMode>
+			<HydratedRouter />
+		</StrictMode>,
+	);
+});
@@ -1,62 +1,66 @@
-import { PassThrough } from 'node:stream'
+import { PassThrough } from 'node:stream';
+import { createReadableStreamFromReadable } from '@react-router/node';
+import { isbot } from 'isbot';
+import type { RenderToPipeableStreamOptions } from 'react-dom/server';
+import { renderToPipeableStream } from 'react-dom/server';
+import { AppLoadContext, EntryContext, ServerRouter } from 'react-router';

-import type { AppLoadContext, EntryContext } from '@remix-run/node'
-import { createReadableStreamFromReadable } from '@remix-run/node'
-import { RemixServer } from '@remix-run/react'
-import { isbot } from 'isbot'
-import { renderToPipeableStream } from 'react-dom/server'
-
-import { loadContext } from './utils/config/headplane'
-
-await loadContext()
-
-export const streamTimeout = 5000
+export const streamTimeout = 5_000;
 export default function handleRequest(
 	request: Request,
 	responseStatusCode: number,
 	responseHeaders: Headers,
-	remixContext: EntryContext,
-	// eslint-disable-next-line @typescript-eslint/no-unused-vars
-	_loadContext: AppLoadContext,
+	routerContext: EntryContext,
+	loadContext: AppLoadContext,
 ) {
-	const ua = request.headers.get('user-agent')
-	const isBot = ua ? isbot(ua) : false
-
 	return new Promise((resolve, reject) => {
-		let shellRendered = false
+		let shellRendered = false;
+		const userAgent = request.headers.get('user-agent');
+
+		// Ensure requests from bots and SPA Mode renders wait for all content to load before responding
+		// https://react.dev/reference/react-dom/server/renderToPipeableStream#waiting-for-all-content-to-load-for-crawlers-and-static-generation
+		const readyOption: keyof RenderToPipeableStreamOptions =
+			(userAgent && isbot(userAgent)) || routerContext.isSpaMode
+				? 'onAllReady'
+				: 'onShellReady';
+
 		const { pipe, abort } = renderToPipeableStream(
-			<RemixServer
-				context={remixContext}
-				url={request.url}
-			/>,
+			<ServerRouter context={routerContext} url={request.url} />,
 			{
-				[isBot ? 'onAllReady' : 'onShellReady']() {
-					shellRendered = true
-					const body = new PassThrough()
-					const stream = createReadableStreamFromReadable(body)
-					responseHeaders.set('Content-Type', 'text/html')
+				[readyOption]() {
+					shellRendered = true;
+					const body = new PassThrough();
+					const stream = createReadableStreamFromReadable(body);
+
+					responseHeaders.set('Content-Type', 'text/html');

 					resolve(
 						new Response(stream, {
 							headers: responseHeaders,
 							status: responseStatusCode,
 						}),
-					)
+					);

-					pipe(body)
+					pipe(body);
 				},
 				onShellError(error: unknown) {
-					reject(error as Error)
+					reject(error);
 				},
 				onError(error: unknown) {
-					responseStatusCode = 500
+					// biome-ignore lint/style/noParameterAssign: Lazy
+					responseStatusCode = 500;
+					// Log streaming rendering errors from inside the shell.  Don't log
+					// errors encountered during initial shell rendering since they'll
+					// reject and get logged in handleDocumentRequest.
 					if (shellRendered) {
-						console.error(error)
+						console.error(error);
 					}
 				},
 			},
-		)
+		);

-		setTimeout(abort, streamTimeout + 1000)
-	})
+		// Abort the rendering stream after the `streamTimeout` so it has tine to
+		// flush down the rejected boundaries
+		setTimeout(abort, streamTimeout + 1000);
+	});
 }
@@ -1,156 +0,0 @@
-import { access, constants } from 'node:fs/promises'
-import { setTimeout } from 'node:timers/promises'
-
-import { Client } from 'undici'
-
-import { HeadscaleError, pull } from '~/utils/headscale'
-import log from '~/utils/log'
-
-import { createIntegration } from './integration'
-
-interface Context {
-	client: Client | undefined
-	container: string | undefined
-	maxAttempts: number
-}
-
-export default createIntegration<Context>({
-	name: 'Docker',
-	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
-		log.debug('INTG', 'Checking Docker integration availability')
-		context.container = process.env.HEADSCALE_CONTAINER
-			?.trim()
-			.toLowerCase()
-
-		if (!context.container || context.container.length === 0) {
-			log.error('INTG', 'Missing HEADSCALE_CONTAINER variable')
-			return false
-		}
-
-		log.info('INTG', 'Using container: %s', context.container)
-		const path = process.env.DOCKER_SOCK ?? 'unix:///var/run/docker.sock'
-		let url: URL | undefined
-
-		try {
-			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:') {
-			// Apparently setting url.protocol doesn't work anymore?
-			const fetchU = url.href.replace(url.protocol, 'http:')
-
-			try {
-				log.info('INTG', 'Checking API: %s', fetchU)
-				await fetch(new URL('/v1.30/version', fetchU).href)
-			} catch (error) {
-				log.debug('INTG', 'Failed to connect to Docker API', error)
-				log.error('INTG', 'Failed to connect to Docker API')
-				return false
-			}
-
-			context.client = new Client(fetchU)
-		}
-
-		// 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 (error) {
-				log.debug('INTG', 'Failed to access Docker socket: %s', error)
-				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
-	},
-
-	onConfigChange: async (context) => {
-		if (!context.client || !context.container) {
-			return
-		}
-
-		log.info('INTG', 'Restarting Headscale via Docker')
-
-		let attempts = 0
-		while (attempts <= context.maxAttempts) {
-			log.debug(
-				'INTG', 'Restarting container: %s (attempt %d)',
-				context.container,
-				attempts,
-			)
-
-			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 {
-				log.debug('INTG', 'Checking Headscale status (attempt %d)', attempts)
-				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}`)
-			}
-		}
-	},
-})
@@ -1,75 +0,0 @@
-import log from '~/utils/log'
-
-import dockerIntegration from './docker'
-import { IntegrationFactory } from './integration'
-import kubernetesIntegration from './kubernetes'
-import procIntegration from './proc'
-
-export * from './integration'
-
-export async function loadIntegration() {
-	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) {
-		log.info('INTG', 'No integration set with HEADSCALE_INTEGRATION')
-		return
-	}
-
-	let integrationFactory: IntegrationFactory | undefined
-	switch (integration.toLowerCase().trim()) {
-		case 'docker': {
-			integrationFactory = dockerIntegration
-			break
-		}
-
-		case 'proc':
-		case 'native':
-		case 'linux': {
-			integrationFactory = procIntegration
-			break
-		}
-
-		case 'kubernetes':
-		case 'k8s': {
-			integrationFactory = kubernetesIntegration
-			break
-		}
-
-		default: {
-			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
-}
@@ -1,13 +0,0 @@
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export interface IntegrationFactory<T = any> {
-	name: string
-	context: T
-	isAvailable: (context: T) => Promise<boolean> | boolean
-	onConfigChange?: (context: T) => Promise<void> | void
-}
-
-export function createIntegration<T>(
-	options: IntegrationFactory<T>,
-) {
-	return options
-}
@@ -1,204 +0,0 @@
-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 {
-			log.debug('INTG', 'Checking Kubernetes service account at %s', svcRoot)
-			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,
-			]
-
-			log.debug('INTG', 'Looking for %s', expectedFiles.join(', '))
-			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
-		}
-
-		log.debug('INTG', 'Reading Kubernetes service account at %s', svcRoot)
-		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
-			}
-
-			log.debug('INTG', 'Checking Kubernetes pod %s in namespace %s',
-				pod,
-				namespace,
-			)
-
-			try {
-				log.debug('INTG', 'Attempgin to get cluster KubeConfig')
-				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,
-				)
-
-				log.debug('INTG', 'Reading pod info for %s', pod)
-				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
-				}
-
-				log.debug('INTG', 'Got pod info: %o', body.spec)
-				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
-			}
-		}
-
-		log.debug('INTG', 'Looking for namespaced process in /proc')
-		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 {
-					log.debug('INTG', 'Reading %s', path)
-					const data = await readFile(path, 'utf8')
-					if (data.includes('headscale')) {
-						return pid
-					}
-				} catch (error) {
-					log.debug('INTG', 'Failed to read %s: %s', path, error)
-				}
-			})
-
-			const results = await Promise.allSettled(promises)
-			const pids = []
-
-			for (const result of results) {
-				if (result.status === 'fulfilled' && result.value) {
-					pids.push(result.value)
-				}
-			}
-
-			log.debug('INTG', 'Found Headscale processes: %o', pids)
-			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
-		}
-	},
-
-	onConfigChange: (context) => {
-		if (!context.pid) {
-			return
-		}
-
-		log.info('INTG', 'Sending SIGTERM to Headscale')
-		kill(context.pid, 'SIGTERM')
-	},
-})
@@ -1,79 +0,0 @@
-import { readdir, readFile } from 'node:fs/promises'
-import { platform } from 'node:os'
-import { join, resolve } from 'node:path'
-import { kill } from 'node:process'
-
-import log from '~/utils/log'
-
-import { createIntegration } from './integration'
-
-interface Context {
-	pid: number | undefined
-}
-
-export default createIntegration<Context>({
-	name: 'Native Linux (/proc)',
-	context: {
-		pid: undefined,
-	},
-	isAvailable: async (context) => {
-		if (platform() !== 'linux') {
-			log.error('INTG', '/proc is only available on Linux')
-			return false
-		}
-
-		log.debug('INTG', 'Checking /proc for Headscale process')
-		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 {
-					log.debug('INTG', 'Reading %s', path)
-					const data = await readFile(path, 'utf8')
-					if (data.includes('headscale')) {
-						return pid
-					}
-				} catch (error) {
-					log.error('INTG', 'Failed to read %s: %s', path, error)
-				}
-			})
-
-			const results = await Promise.allSettled(promises)
-			const pids = []
-
-			for (const result of results) {
-				if (result.status === 'fulfilled' && result.value) {
-					pids.push(result.value)
-				}
-			}
-
-			log.debug('INTG', 'Found Headscale processes: %o', pids)
-			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
-		}
-	}
-})
@@ -0,0 +1,73 @@
+import { XCircleFillIcon } from '@primer/octicons-react';
+import { type LoaderFunctionArgs, redirect } from 'react-router';
+import { Outlet, useLoaderData } from 'react-router';
+import cn from '~/utils/cn';
+import { HeadscaleError, healthcheck, pull } from '~/utils/headscale';
+import { destroySession, getSession } from '~/utils/sessions.server';
+import { useLiveData } from '~/utils/useLiveData';
+import log from '~server/utils/log';
+
+export async function loader({ request }: LoaderFunctionArgs) {
+	let healthy = false;
+	try {
+		healthy = await healthcheck();
+	} catch (error) {
+		log.debug('APIC', 'Healthcheck failed %o', error);
+	}
+
+	// We shouldn't session invalidate if Headscale is down
+	if (healthy) {
+		// We can assert because shell ensures this is set
+		const session = await getSession(request.headers.get('Cookie'));
+		const apiKey = session.get('hsApiKey')!;
+
+		try {
+			await pull('v1/apikey', apiKey);
+		} catch (error) {
+			if (error instanceof HeadscaleError) {
+				log.debug('APIC', 'API Key validation failed %o', error);
+				return redirect('/login', {
+					headers: {
+						'Set-Cookie': await destroySession(session),
+					},
+				});
+			}
+		}
+	}
+
+	return {
+		healthy,
+	};
+}
+
+export default function Layout() {
+	useLiveData({ interval: 3000 });
+	const { healthy } = useLoaderData<typeof loader>();
+
+	return (
+		<>
+			{!healthy ? (
+				<div
+					className={cn(
+						'fixed bottom-0 right-0 z-50 w-fit h-14',
+						'flex flex-col justify-center gap-1',
+					)}
+				>
+					<div
+						className={cn(
+							'flex items-center gap-1.5 mr-1.5 py-2 px-1.5',
+							'border rounded-lg text-white bg-red-500',
+							'border-red-600 dark:border-red-400 shadow-sm',
+						)}
+					>
+						<XCircleFillIcon className="w-4 h-4 text-white" />
+						Headscale is unreachable
+					</div>
+				</div>
+			) : undefined}
+			<main className="container mx-auto overscroll-contain mt-4 mb-24">
+				<Outlet />
+			</main>
+		</>
+	);
+}
@@ -0,0 +1,43 @@
+import {
+	LoaderFunctionArgs,
+	Outlet,
+	redirect,
+	useLoaderData,
+} from 'react-router';
+import Footer from '~/components/Footer';
+import Header from '~/components/Header';
+import { hs_getConfig } from '~/utils/config/loader';
+import { getSession } from '~/utils/sessions.server';
+import type { AppContext } from '~server/context/app';
+import { hp_getConfig } from '~server/context/global';
+
+// This loads the bare minimum for the application to function
+// So we know that if context fails to load then well, oops?
+export async function loader({ request }: LoaderFunctionArgs) {
+	const session = await getSession(request.headers.get('Cookie'));
+	if (!session.has('hsApiKey')) {
+		return redirect('/login');
+	}
+
+	const context = hp_getConfig();
+	const { mode, config } = hs_getConfig();
+
+	return {
+		config,
+		url: context.headscale.public_url ?? context.headscale.url,
+		configAvailable: mode !== 'no',
+		debug: context.debug,
+		user: session.get('user'),
+	};
+}
+
+export default function Shell() {
+	const data = useLoaderData<typeof loader>();
+	return (
+		<>
+			<Header {...data} />
+			<Outlet />
+			<Footer {...data} />
+		</>
+	);
+}
@@ -1,26 +1,34 @@
-import type { LinksFunction, MetaFunction } from '@remix-run/node'
+import type { LinksFunction, MetaFunction } from 'react-router';
 import {
 	Links,
 	Meta,
 	Outlet,
 	Scripts,
 	ScrollRestoration,
-} from '@remix-run/react'
-
-import { ErrorPopup } from '~/components/Error'
-import { Toaster } from '~/components/Toaster'
-import stylesheet from '~/tailwind.css?url'
+	useNavigation,
+} from 'react-router';
+import '@fontsource-variable/inter';
+import { ErrorPopup } from '~/components/Error';
+import ProgressBar from '~/components/ProgressBar';
+import ToastProvider from '~/components/ToastProvider';
+import stylesheet from '~/tailwind.css?url';
+import { useToastQueue } from '~/utils/toast';

 export const meta: MetaFunction = () => [
 	{ title: 'Headplane' },
-	{ name: 'description', content: 'A frontend for the headscale coordination server' },
-]
+	{
+		name: 'description',
+		content: 'A frontend for the headscale coordination server',
+	},
+];

 export const links: LinksFunction = () => [
 	{ rel: 'stylesheet', href: stylesheet },
-]
+];

 export function Layout({ children }: { readonly children: React.ReactNode }) {
+	const toastQueue = useToastQueue();
+
 	return (
 		<html lang="en">
 			<head>
@@ -29,20 +37,27 @@ export function Layout({ children }: { readonly children: React.ReactNode }) {
 				<Meta />
 				<Links />
 			</head>
-			<body className="overscroll-none dark:bg-ui-950 dark:text-ui-50">
+			<body className="overscroll-none dark:bg-headplane-900 dark:text-headplane-50">
 				{children}
-				<Toaster />
+				<ToastProvider queue={toastQueue} />
 				<ScrollRestoration />
 				<Scripts />
 			</body>
 		</html>
-	)
+	);
 }

 export function ErrorBoundary() {
-	return <ErrorPopup />
+	return <ErrorPopup />;
 }

 export default function App() {
-	return <Outlet />
+	const nav = useNavigation();
+
+	return (
+		<>
+			<ProgressBar isVisible={nav.state === 'loading'} />
+			<Outlet />
+		</>
+	);
 }
@@ -1,3 +1,37 @@
-import { flatRoutes } from '@remix-run/fs-routes'
+import { index, layout, prefix, route } from '@react-router/dev/routes';

-export default flatRoutes()
+export default [
+	// Utility Routes
+	index('routes/util/redirect.ts'),
+	route('/healthz', 'routes/util/healthz.ts'),
+
+	// Authentication Routes
+	route('/login', 'routes/auth/login.tsx'),
+	route('/logout', 'routes/auth/logout.ts'),
+	route('/oidc/callback', 'routes/auth/oidc-callback.ts'),
+	route('/oidc/start', 'routes/auth/oidc-start.ts'),
+
+	// API
+	route('/api/agent', 'routes/api/agent.ts'),
+
+	// All the main logged-in dashboard routes
+	// Double nested to separate error propagations
+	layout('layouts/shell.tsx', [
+		layout('layouts/dashboard.tsx', [
+			...prefix('/machines', [
+				index('routes/machines/overview.tsx'),
+				route('/:id', 'routes/machines/machine.tsx'),
+			]),
+
+			route('/users', 'routes/users/overview.tsx'),
+			route('/acls', 'routes/acls/editor.tsx'),
+			route('/dns', 'routes/dns/overview.tsx'),
+
+			...prefix('/settings', [
+				index('routes/settings/overview.tsx'),
+				route('/auth-keys', 'routes/settings/auth-keys.tsx'),
+				// route('/local-agent', 'routes/settings/local-agent.tsx'),
+			]),
+		]),
+	]),
+];
@@ -1,122 +0,0 @@
-import React, { useEffect } from 'react'
-import Merge from 'react-codemirror-merge'
-import CodeMirror from '@uiw/react-codemirror'
-import * as shopify from '@shopify/lang-jsonc'
-import { ClientOnly } from 'remix-utils/client-only'
-import { ErrorBoundary } from 'react-error-boundary'
-import { githubDark, githubLight } from '@uiw/codemirror-theme-github'
-import { useState } from 'react'
-import { cn } from '~/utils/cn'
-
-import Fallback from './fallback'
-
-interface EditorProps {
-	isDisabled?: boolean
-	value: string
-	onChange: (value: string) => void
-}
-
-export function Editor(props: EditorProps) {
-	const [light, setLight] = useState(false)
-	useEffect(() => {
-		const theme = window.matchMedia('(prefers-color-scheme: light)')
-		setLight(theme.matches)
-		theme.addEventListener('change', (theme) => {
-			setLight(theme.matches)
-		})
-	})
-
-	return (
-		<div className={cn(
-			'border border-gray-200 dark:border-gray-700',
-			'rounded-b-lg rounded-tr-lg mb-2 z-10 overflow-x-hidden',
-		)}>
-			<div className="overflow-y-scroll h-editor text-sm">
-				<ErrorBoundary fallback={
-					<p className={cn(
-						'w-full h-full flex items-center justify-center',
-						'text-gray-400 dark:text-gray-500 text-xl',
-					)}>
-						Failed to load the editor.
-					</p>
-				}>
-					<ClientOnly fallback={<Fallback acl={props.value} />}>
-					{() => (
-						<CodeMirror
-							value={props.value}
-							height="100%"
-							extensions={[shopify.jsonc()]}
-							style={{ height: "100%" }}
-							theme={light ? githubLight : githubDark}
-							onChange={(value) => props.onChange(value)}
-						/>
-					)}
-					</ClientOnly>
-				</ErrorBoundary>
-			</div>
-		</div>
-	)
-}
-
-interface DifferProps {
-	left: string
-	right: string
-}
-
-export function Differ(props: DifferProps) {
-	const [light, setLight] = useState(false)
-	useEffect(() => {
-		const theme = window.matchMedia('(prefers-color-scheme: light)')
-		setLight(theme.matches)
-		theme.addEventListener('change', (theme) => {
-			setLight(theme.matches)
-		})
-	})
-
-	return (
-		<div className={cn(
-			'border border-gray-200 dark:border-gray-700',
-			'rounded-b-lg rounded-tr-lg mb-2 z-10 overflow-x-hidden',
-		)}>
-			<div className="overflow-y-scroll h-editor text-sm">
-				{props.left === props.right ? (
-					<p className={cn(
-						'w-full h-full flex items-center justify-center',
-						'text-gray-400 dark:text-gray-500 text-xl',
-					)}>
-						No changes
-					</p>
-				) : (
-					<ErrorBoundary fallback={
-						<p className={cn(
-							'w-full h-full flex items-center justify-center',
-							'text-gray-400 dark:text-gray-500 text-xl',
-						)}>
-							Failed to load the editor.
-						</p>
-					}>
-						<ClientOnly fallback={<Fallback acl={props.right} />}>
-						{() => (
-							<Merge
-								orientation="a-b"
-								theme={light ? githubLight : githubDark}
-							>
-								<Merge.Original
-									readOnly
-									value={props.left}
-									extensions={[shopify.jsonc()]}
-								/>
-								<Merge.Modified
-									readOnly
-									value={props.right}
-									extensions={[shopify.jsonc()]}
-								/>
-							</Merge>
-						)}
-						</ClientOnly>
-					</ErrorBoundary>
-				)}
-			</div>
-		</div>
-	)
-}
@@ -1,30 +0,0 @@
-import { cn } from '~/utils/cn'
-import { AlertIcon } from '@primer/octicons-react'
-
-import Card from '~/components/Card'
-import Code from '~/components/Code'
-
-interface Props {
-	message: string
-}
-
-export function ErrorView({ message }: Props) {
-	return (
-		<Card variant="flat" className="max-w-full mb-4">
-			<div className="flex items-center justify-between">
-				<Card.Title className="text-xl mb-0">
-					Error
-				</Card.Title>
-				<AlertIcon className="w-8 h-8 text-red-500"/>
-			</div>
-			<Card.Text className="mt-4">
-				Could not apply changes to your ACL policy
-				due to the following error:
-				<br />
-				<Code>
-					{message}
-				</Code>
-			</Card.Text>
-		</Card>
-	)
-}
@@ -1,24 +0,0 @@
-import Spinner from '~/components/Spinner'
-import { cn } from '~/utils/cn'
-
-interface Props {
-	readonly acl: string
-}
-
-export default function Fallback({ acl }: Props) {
-	return (
-		<div className="inline-block relative w-full h-editor">
-			<Spinner className="w-4 h-4 absolute p-2" />
-			<textarea
-				readOnly
-				className={cn(
-					'w-full h-editor font-mono resize-none',
-					'text-sm text-gray-600 dark:text-gray-300',
-					'bg-ui-100 dark:bg-ui-800',
-					'pl-10 pt-1 leading-snug',
-				)}
-				value={acl}
-			/>
-		</div>
-	)
-}
@@ -1,355 +0,0 @@
-/* eslint-disable @typescript-eslint/no-non-null-assertion */
-import { BeakerIcon, EyeIcon, IssueDraftIcon, PencilIcon } from '@primer/octicons-react'
-import { ActionFunctionArgs, LoaderFunctionArgs } from '@remix-run/node'
-import { useLoaderData, useRevalidator } from '@remix-run/react'
-import { useDebounceFetcher } from 'remix-utils/use-debounce-fetcher'
-import { useEffect, useState, useMemo } from 'react'
-import { Tab, TabList, TabPanel, Tabs } from 'react-aria-components'
-import { setTimeout } from 'node:timers/promises'
-
-import Button from '~/components/Button'
-import Code from '~/components/Code'
-import Link from '~/components/Link'
-import Notice from '~/components/Notice'
-import Spinner from '~/components/Spinner'
-import { toast } from '~/components/Toaster'
-import { cn } from '~/utils/cn'
-import { loadContext } from '~/utils/config/headplane'
-import { loadConfig } from '~/utils/config/headscale'
-import { HeadscaleError, pull, put } from '~/utils/headscale'
-import { getSession } from '~/utils/sessions'
-import { send } from '~/utils/res'
-import log from '~/utils/log'
-
-import { Editor, Differ } from './cm.client'
-import { Unavailable } from './unavailable'
-import { ErrorView } from './error'
-
-export async function loader({ request }: LoaderFunctionArgs) {
-	const session = await getSession(request.headers.get('Cookie'))
-	
-	// The way policy is handled in 0.23 of Headscale and later is verbose.
-	// The 2 ACL policy modes are either the database one or file one
-	//
-	// File: The ACL policy is readonly to the API and manually edited
-	// Database: The ACL policy is read/write to the API
-	//
-	// To determine if we first have an ACL policy available we need to check
-	// if fetching the v1/policy route gives us a 500 status code or a 200.
-	//
-	// 500 can mean many different things here unfortunately:
-	// - In file based that means the file is not accessible
-	// - In database mode this can mean that we have never set an ACL policy
-	// - In database mode this can mean that the ACL policy is not available
-	// - A general server error may have occurred
-	//
-	// Unfortunately the server errors are not very descriptive so we have to
-	// do some silly guesswork here. If we are running in an integration mode
-	// and have the Headscale configuration available to us, our assumptions
-	// can be more accurate, otherwise we just HAVE to assume that the ACL
-	// policy has never been set.
-	//
-	// We can do damage control by checking for write access and if we are not
-	// able to PUT an ACL policy on the v1/policy route, we can already know
-	// that the policy is at the very-least readonly or not available.
-	const context = await loadContext()
-	let modeGuess = 'database' // Assume database mode
-	if (context.config.read) {
-		const config = await loadConfig()
-		modeGuess = config.policy?.mode ?? 'database'
-	}
-
-	// Attempt to load the policy, for both the frontend and for checking
-	// if we are able to write to the policy for write access
-	try {
-		const { policy } = await pull<{ policy: string }>(
-			'v1/policy',
-			session.get('hsApiKey')!,
-		)
-
-		let write = false // On file mode we already know it's readonly
-		if (modeGuess === 'database' && policy.length > 0) {
-			try {
-				await put('v1/policy', session.get('hsApiKey')!, {
-					policy: policy,
-				})
-
-				write = true
-			} catch (error) {
-				write = false
-				log.debug(
-					'APIC',
-					'Failed to write to ACL policy with error %s',
-					error
-				)
-			}
-		}
-
-		return {
-			read: true,
-			write,
-			mode: modeGuess,
-			policy
-		}
-	} catch {
-		// If we are explicit on file mode then this is the end of the road
-		if (modeGuess === 'file') {
-			return {
-				read: false,
-				write: false,
-				mode: modeGuess,
-				policy: null
-			}
-		}
-
-		// Assume that we have write access otherwise?
-		// This is sort of a brittle assumption to make but we don't want
-		// to create a default policy if we don't have to.
-		return {
-			read: true,
-			write: true,
-			mode: modeGuess,
-			policy: null
-		}
-	}
-}
-
-export async function action({ request }: ActionFunctionArgs) {
-	const session = await getSession(request.headers.get('Cookie'))
-	if (!session.has('hsApiKey')) {
-		return send({ success: false, error: null }, 401)
-	}
-
-	try {
-		const { acl } = await request.json() as { acl: string }
-		const { policy } = await put<{ policy: string }>(
-			'v1/policy',
-			session.get('hsApiKey')!,
-			{
-				policy: acl,
-			}
-		)
-
-		return { success: true, policy, error: null }
-	} catch (error) {
-		log.debug('APIC', 'Failed to update ACL policy with error %s', error)
-
-		// @ts-ignore: Shut UP we know it's a string most of the time
-		const text = JSON.parse(error.message)
-		return send({ success: false, error: text.message }, {
-			status: error instanceof HeadscaleError ? error.status : 500,
-		})
-	}
-
-	return { success: true, error: null }
-}
-
-export default function Page() {
-	const data = useLoaderData<typeof loader>()
-	const fetcher = useDebounceFetcher<typeof action>()
-	const revalidator = useRevalidator()
-
-	const [acl, setAcl] = useState(data.policy ?? '')
-	const [toasted, setToasted] = useState(false)
-
-	useEffect(() => {
-		if (!fetcher.data || toasted) {
-			return
-		}
-
-		// @ts-ignore: useDebounceFetcher is not typed correctly
-		if (fetcher.data.success) {
-			toast('Updated tailnet ACL policy')
-		} else {
-			toast('Failed to update tailnet ACL policy')
-		}
-
-		setToasted(true)
-		if (revalidator.state === 'idle') {
-			revalidator.revalidate()
-		}
-	}, [fetcher.data, toasted, data.policy])
-
-	// The state for if the save and discard buttons should be disabled
-	// is pretty complicated to calculate and varies on different states.
-	const disabled = useMemo(() => {
-		if (!data.read || !data.write) {
-			return true
-		}
-
-		// First check our fetcher states
-		if (fetcher.state === 'loading') {
-			return true
-		}
-
-		if (revalidator.state === 'loading') {
-			return true
-		}
-
-		// If we have a failed fetcher state allow the user to try again
-		// @ts-ignore: useDebounceFetcher is not typed correctly
-		if (fetcher.data?.success === false) {
-			return false
-		}
-
-		return data.policy === acl
-	}, [data, revalidator.state, fetcher.state, fetcher.data, data.policy, acl])
-
-	return (
-		<div>
-			{data.read && !data.write
-				? (
-					<div className="mb-4">
-						<Notice className="w-fit">
-							The ACL policy is read-only. You can view the current policy
-							but you cannot make changes to it.
-							<br />
-							To resolve this, you need to set the ACL policy mode to
-							database in your Headscale configuration.
-						</Notice>
-					</div>
-				) : undefined}
-
-			<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
-				{' '}
-				<Link
-					to="https://tailscale.com/kb/1018/acls"
-					name="Tailscale ACL documentation"
-				>
-					Tailscale ACL guide
-				</Link>
-				{' '}
-				and the
-				{' '}
-				<Link
-					to="https://headscale.net/acls"
-					name="Headscale ACL documentation"
-				>
-					Headscale docs
-				</Link>
-				.
-			</p>
-
-			{
-				// @ts-ignore: useDebounceFetcher is not typed correctly
-				fetcher.data?.success === false
-				? (
-					// @ts-ignore: useDebounceFetcher is not typed correctly
-					<ErrorView message={fetcher.data.error} />
-				) : undefined}
-
-			{data.read ? (
-				<>
-					<Tabs>
-						<TabList className={cn(
-							'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
-								id="edit"
-								className={({ isSelected }) => cn(
-									'px-4 py-2 rounded-tl-lg',
-									'focus:outline-none flex items-center gap-2',
-									'border-x border-gray-200 dark:border-gray-700',
-									isSelected ? 'text-gray-900 dark:text-gray-100' : '',
-								)}
-							>
-								<PencilIcon className="w-5 h-5" />
-								<p>Edit file</p>
-							</Tab>
-							<Tab
-								id="diff"
-								className={({ isSelected }) => cn(
-									'px-4 py-2',
-									'focus:outline-none flex items-center gap-2',
-									'border-x border-gray-200 dark:border-gray-700',
-									isSelected ? 'text-gray-900 dark:text-gray-100' : '',
-								)}
-							>
-								<EyeIcon className="w-5 h-5" />
-								<p>Preview changes</p>
-							</Tab>
-							<Tab
-								id="preview"
-								className={({ isSelected }) => cn(
-									'px-4 py-2 rounded-tr-lg',
-									'focus:outline-none flex items-center gap-2',
-									'border-x border-gray-200 dark:border-gray-700',
-									isSelected ? 'text-gray-900 dark:text-gray-100' : '',
-								)}
-							>
-								<BeakerIcon className="w-5 h-5" />
-								<p>Preview rules</p>
-							</Tab>
-						</TabList>
-						<TabPanel id="edit">
-							<Editor
-								isDisabled={!data.write}
-								value={acl}
-								onChange={setAcl}
-							/>
-						</TabPanel>
-						<TabPanel id="diff">
-							<Differ
-								left={data?.policy ?? ''}
-								right={acl}
-							/>
-						</TabPanel>
-						<TabPanel id="preview">
-							<div
-								className={cn(
-									'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',
-								)}
-							>
-								<IssueDraftIcon 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>
-						</TabPanel>
-					</Tabs>
-					<Button
-						variant="heavy"
-						className="mr-2"
-						isDisabled={disabled}
-						onPress={() => {
-							setToasted(false)
-							fetcher.submit({
-								acl,
-							}, {
-								method: 'PATCH',
-								encType: 'application/json',
-							})
-						}}
-					>
-						{fetcher.state === 'idle'
-							? undefined
-							: (
-								<Spinner className="w-3 h-3" />
-								)}
-						Save
-					</Button>
-					<Button
-						isDisabled={disabled}
-						onPress={() => {
-							setAcl(data?.policy ?? '')
-						}}
-					>
-						Discard Changes
-					</Button>
-				</>
-			) : <Unavailable mode={data.mode as "database" | "file"} />}
-		</div>
-	)
-}
@@ -1,43 +0,0 @@
-import { cn } from '~/utils/cn'
-import { AlertIcon } from '@primer/octicons-react'
-
-import Code from '~/components/Code'
-import Card from '~/components/Card'
-
-interface Props {
-	mode: 'file' | 'database'
-}
-
-export function Unavailable({ mode }: Props) {
-	return (
-		<Card variant="flat" className="max-w-prose mt-12">
-			<div className="flex items-center justify-between">
-				<Card.Title className="text-xl mb-0">
-					ACL Policy Unavailable
-				</Card.Title>
-				<AlertIcon className="w-8 h-8 text-red-500"/>
-			</div>
-			<Card.Text className="mt-4">
-				Unable to load a valid ACL policy configuration.
-				This is most likely due to a misconfiguration in your
-				Headscale configuration file.
-			</Card.Text>
-
-			{mode !== 'file' ? (
-				<p className="mt-4 text-sm">
-					According to your configuration, the ACL policy mode
-					is set to <Code>file</Code> but the ACL file is not
-					available. Ensure that the <Code>policy.path</Code> is
-					set to a valid path in your Headscale configuration.
-				</p>
-			) : (
-				<p className="mt-4 text-sm">
-					In order to fully utilize the ACL management features of
-					Headplane, please set <Code>policy.mode</Code> to either
-					{' '}<Code>file</Code> or <Code>database</Code> in your
-					Headscale configuration.
-				</p>
-			)}
-		</Card>
-	)
-}
@@ -1,121 +0,0 @@
-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.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>
-	)
-}
@@ -1,162 +0,0 @@
-import { RepoForkedIcon } from '@primer/octicons-react'
-import { Form, useSubmit } from '@remix-run/react'
-import { useState } from 'react'
-
-import Dialog from '~/components/Dialog'
-import Switch from '~/components/Switch'
-import TextField from '~/components/TextField'
-import Tooltip from '~/components/Tooltip'
-import { cn } from '~/utils/cn'
-
-interface Props {
-	nameservers: Record<string, string[]>
-}
-
-export default function AddNameserver({ nameservers }: Props) {
-	const submit = useSubmit()
-	const [split, setSplit] = useState(false)
-	const [ns, setNs] = useState('')
-	const [domain, setDomain] = useState('')
-
-	return (
-		<Dialog>
-			<Dialog.Button>
-				Add nameserver
-			</Dialog.Button>
-			<Dialog.Panel>
-				{close => (
-					<>
-						<Dialog.Title>
-							Add nameserver
-						</Dialog.Title>
-						<Dialog.Text className="font-semibold">
-							Nameserver
-						</Dialog.Text>
-						<Dialog.Text className="text-sm">
-							Use this IPv4 or IPv6 address to resolve names.
-						</Dialog.Text>
-						<Form
-							method="POST"
-							onSubmit={(event) => {
-								event.preventDefault()
-								if (!ns) return
-
-								if (split) {
-									const splitNs: Record<string, string[]> = {}
-									for (const [key, value] of Object.entries(nameservers)) {
-										if (key === 'global') continue
-										splitNs[key] = value
-									}
-
-									if (Object.keys(splitNs).includes(domain)) {
-										splitNs[domain].push(ns)
-									} else {
-										splitNs[domain] = [ns]
-									}
-
-									submit({
-										'dns.nameservers.split': splitNs,
-									}, {
-										method: 'PATCH',
-										encType: 'application/json',
-									})
-								} else {
-									const globalNs = nameservers.global
-									globalNs.push(ns)
-
-									submit({
-										'dns.nameservers.global': globalNs,
-									}, {
-										method: 'PATCH',
-										encType: 'application/json',
-									})
-								}
-
-								setNs('')
-								setDomain('')
-								setSplit(false)
-								close()
-							}}
-						>
-							<TextField
-								label="DNS Server"
-								placeholder="1.2.3.4"
-								name="ns"
-								state={[ns, setNs]}
-								className="mt-2 mb-8"
-							/>
-							<div className="flex items-center justify-between">
-								<div className="block">
-									<div className="inline-flex items-center gap-2">
-										<Dialog.Text className="font-semibold">
-											Restrict to domain
-										</Dialog.Text>
-										<Tooltip>
-											<Tooltip.Button className={cn(
-												'text-xs rounded-md px-1.5 py-0.5',
-												'bg-ui-200 dark:bg-ui-800',
-												'text-ui-600 dark:text-ui-300',
-											)}
-											>
-												<RepoForkedIcon className="w-4 h-4 mr-0.5" />
-												Split DNS
-											</Tooltip.Button>
-											<Tooltip.Body>
-												Only clients that support split DNS
-												(Tailscale v1.8 or later for most platforms)
-												will use this nameserver. Older clients
-												will ignore it.
-											</Tooltip.Body>
-										</Tooltip>
-									</div>
-									<Dialog.Text className="text-sm">
-										This nameserver will only be used for some domains.
-									</Dialog.Text>
-								</div>
-								<Switch
-									label="Split DNS"
-									defaultSelected={split}
-									onChange={() => { setSplit(!split) }}
-								/>
-							</div>
-							{split
-								? (
-									<>
-										<Dialog.Text className="font-semibold mt-8">
-											Domain
-										</Dialog.Text>
-										<TextField
-											label="Domain"
-											placeholder="example.com"
-											name="domain"
-											state={[domain, setDomain]}
-											className="my-2"
-										/>
-										<Dialog.Text className="text-sm">
-											Only single-label or fully-qualified queries
-											matching this suffix should use the nameserver.
-										</Dialog.Text>
-									</>
-									)
-								: 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}
-								>
-									Add
-								</Dialog.Action>
-							</div>
-						</Form>
-					</>
-				)}
-			</Dialog.Panel>
-		</Dialog>
-	)
-}
@@ -1,88 +0,0 @@
-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.extra_records': records
-												.filter((_, i) => i !== index),
-										}, {
-											method: 'PATCH',
-											encType: 'application/json',
-										})
-									}}
-								>
-									Remove
-								</Button>
-							</TableList.Item>
-						))}
-				</TableList>
-
-				{isDisabled
-					? undefined
-					: (
-						<AddDNS records={records} />
-						)}
-			</div>
-		</div>
-	)
-}
@@ -1,227 +0,0 @@
-/* eslint-disable unicorn/no-keyword-prefix */
-import {
-	closestCorners,
-	DndContext,
-	DragOverlay
-} from '@dnd-kit/core'
-import {
-	restrictToParentElement,
-	restrictToVerticalAxis
-} from '@dnd-kit/modifiers'
-import {
-	arrayMove,
-	SortableContext,
-	useSortable,
-	verticalListSortingStrategy
-} from '@dnd-kit/sortable'
-import { CSS } from '@dnd-kit/utilities'
-import { LockIcon, ThreeBarsIcon } from '@primer/octicons-react'
-import { type FetcherWithComponents, useFetcher } from '@remix-run/react'
-import { useEffect, useState } from 'react'
-import { Button, Input } from 'react-aria-components'
-
-import Spinner from '~/components/Spinner'
-import TableList from '~/components/TableList'
-import { cn } from '~/utils/cn'
-
-type Properties = {
-	readonly baseDomain?: string;
-	readonly searchDomains: string[];
-	// eslint-disable-next-line react/boolean-prop-naming
-	readonly disabled?: boolean;
-}
-
-export default function Domains({ baseDomain, searchDomains, disabled }: Properties) {
-	// eslint-disable-next-line unicorn/no-null, @typescript-eslint/ban-types
-	const [activeId, setActiveId] = useState<number | string | null>(null)
-	const [localDomains, setLocalDomains] = useState(searchDomains)
-	const [newDomain, setNewDomain] = useState('')
-	const fetcher = useFetcher()
-
-	useEffect(() => {
-		setLocalDomains(searchDomains)
-	}, [searchDomains])
-
-	return (
-		<div className='flex flex-col w-2/3'>
-			<h1 className='text-2xl font-medium mb-4'>Search Domains</h1>
-			<p className='text-gray-700 dark:text-gray-300 mb-2'>
-				Set custom DNS search domains for your Tailnet.
-				When using Magic DNS, your tailnet domain is used as the first search domain.
-			</p>
-			<DndContext
-				modifiers={[restrictToVerticalAxis, restrictToParentElement]}
-				collisionDetection={closestCorners}
-				onDragStart={event => {
-					setActiveId(event.active.id)
-				}}
-				onDragEnd={event => {
-					// eslint-disable-next-line unicorn/no-null
-					setActiveId(null)
-					const { active, over } = event
-					if (!over) {
-						return
-					}
-
-					const activeItem = localDomains[active.id as number - 1]
-					const overItem = localDomains[over.id as number - 1]
-
-					if (!activeItem || !overItem) {
-						return
-					}
-
-					const oldIndex = localDomains.indexOf(activeItem)
-					const newIndex = localDomains.indexOf(overItem)
-
-					if (oldIndex !== newIndex) {
-						setLocalDomains(arrayMove(localDomains, oldIndex, newIndex))
-					}
-				}}
-			>
-				<TableList>
-					{baseDomain ? (
-						<TableList.Item key='magic-dns-sd'>
-							<p className='font-mono text-sm'>{baseDomain}</p>
-							<LockIcon className='h-4 w-4'/>
-						</TableList.Item>
-					) : undefined}
-					<SortableContext
-						items={localDomains}
-						strategy={verticalListSortingStrategy}
-					>
-						{localDomains.map((sd, index) => (
-							<Domain
-								// eslint-disable-next-line react/no-array-index-key
-								key={index}
-								domain={sd}
-								id={index + 1}
-								localDomains={localDomains}
-								disabled={disabled}
-								fetcher={fetcher}
-							/>
-						))}
-						<DragOverlay adjustScale>
-							{activeId ? <Domain
-								isDrag
-								domain={localDomains[activeId as number - 1]}
-								localDomains={localDomains}
-								id={activeId as number - 1}
-								disabled={disabled}
-								fetcher={fetcher}
-							/> : undefined}
-						</DragOverlay>
-					</SortableContext>
-					{disabled ? undefined : (
-						<TableList.Item key='add-sd'>
-							<Input
-								type='text'
-								className='font-mono text-sm bg-transparent w-full mr-2'
-								placeholder='Search Domain'
-								value={newDomain}
-								onChange={event => {
-									setNewDomain(event.target.value)
-								}}
-							/>
-							{fetcher.state === 'idle' ? (
-								<Button
-									className={cn(
-										'text-sm font-semibold',
-										'text-blue-600 dark:text-blue-400',
-										'hover:text-blue-700 dark:hover:text-blue-300',
-										newDomain.length === 0 && 'opacity-50 cursor-not-allowed'
-									)}
-									isDisabled={newDomain.length === 0}
-									onPress={() => {
-										fetcher.submit({
-										// eslint-disable-next-line @typescript-eslint/naming-convention
-											'dns.search_domains': [...localDomains, newDomain]
-										}, {
-											method: 'PATCH',
-											encType: 'application/json'
-										})
-
-										setNewDomain('')
-									}}
-								>
-									Add
-								</Button>
-							) : (
-								<Spinner className='w-3 h-3 mr-0'/>
-							)}
-						</TableList.Item>
-					)}
-				</TableList>
-			</DndContext>
-		</div>
-	)
-}
-
-type DomainProperties = {
-	readonly domain: string;
-	readonly id: number;
-	readonly isDrag?: boolean;
-	readonly localDomains: string[];
-	// eslint-disable-next-line react/boolean-prop-naming
-	readonly disabled?: boolean;
-	readonly fetcher: FetcherWithComponents<unknown>;
-}
-
-function Domain({ domain, id, localDomains, isDrag, disabled, fetcher }: DomainProperties) {
-	const {
-		attributes,
-		listeners,
-		setNodeRef,
-		transform,
-		transition,
-		isDragging
-	} = useSortable({ id })
-
-	// TODO: Figure out why TableList.Item breaks dndkit
-	return (
-		<div
-			ref={setNodeRef}
-			className={cn(
-				'flex items-center justify-between px-3 py-2',
-				'border-b border-gray-200 last:border-b-0 dark:border-zinc-800',
-				isDragging ? 'text-gray-400' : '',
-				isDrag ? 'outline outline-1 outline-gray-500 bg-gray-200 dark:bg-zinc-800' : ''
-			)}
-			style={{
-				transform: CSS.Transform.toString(transform),
-				transition
-			}}
-		>
-			<p className='font-mono text-sm flex items-center gap-4'>
-				{disabled ? undefined : (
-					<ThreeBarsIcon
-						className='h-4 w-4 text-gray-400 focus:outline-none'
-						{...attributes}
-						{...listeners}
-					/>
-				)}
-				{domain}
-			</p>
-			{isDrag ? undefined : (
-				<Button
-					className={cn(
-						'text-sm',
-						'text-red-600 dark:text-red-400',
-						'hover:text-red-700 dark:hover:text-red-300',
-						disabled && 'opacity-50 cursor-not-allowed'
-					)}
-					isDisabled={disabled}
-					onPress={() => {
-						fetcher.submit({
-							'dns.search_domains': localDomains.filter((_, index) => index !== id - 1)
-						}, {
-							method: 'PATCH',
-							encType: 'application/json'
-						})
-					}}
-				>
-					Remove
-				</Button>
-			)}
-		</div>
-	)
-}
@@ -1,62 +0,0 @@
-import { useFetcher } from '@remix-run/react'
-
-import Dialog from '~/components/Dialog'
-import Spinner from '~/components/Spinner'
-
-type Properties = {
-	readonly isEnabled: boolean;
-	// eslint-disable-next-line react/boolean-prop-naming
-	readonly disabled?: boolean;
-}
-
-export default function Modal({ isEnabled, disabled }: Properties) {
-	const fetcher = useFetcher()
-
-	return (
-		<Dialog>
-			<Dialog.Button isDisabled={disabled}>
-				{fetcher.state === 'idle' ? undefined : (
-					<Spinner className='w-3 h-3'/>
-				)}
-				{isEnabled ? 'Disable' : 'Enable'} Magic DNS
-			</Dialog.Button>
-			<Dialog.Panel>
-				{close => (
-					<>
-						<Dialog.Title>
-							{isEnabled ? 'Disable' : 'Enable'} Magic DNS
-						</Dialog.Title>
-						<Dialog.Text>
-							Devices will no longer be accessible via your tailnet domain.
-							The search domain will also be disabled.
-						</Dialog.Text>
-						<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={() => {
-									fetcher.submit({
-										// eslint-disable-next-line @typescript-eslint/naming-convention
-										'dns.magic_dns': !isEnabled
-									}, {
-										method: 'PATCH',
-										encType: 'application/json'
-									})
-
-									close()
-								}}
-							>
-								{isEnabled ? 'Disable' : 'Enable'} Magic DNS
-							</Dialog.Action>
-						</div>
-					</>
-				)}
-			</Dialog.Panel>
-		</Dialog>
-	)
-}
@@ -1,116 +0,0 @@
-import { useSubmit } from '@remix-run/react'
-import { useState } from 'react'
-import { Button } from 'react-aria-components'
-
-import Link from '~/components/Link'
-import Switch from '~/components/Switch'
-import TableList from '~/components/TableList'
-import { cn } from '~/utils/cn'
-
-import AddNameserver from './dialogs/nameserver'
-
-interface Props {
-	nameservers: Record<string, string[]>
-	isDisabled: boolean
-}
-
-export default function Nameservers({ nameservers, isDisabled }: Props) {
-	return (
-		<div className="flex flex-col w-2/3">
-			<h1 className="text-2xl font-medium mb-4">Nameservers</h1>
-			<p className="text-gray-700 dark:text-gray-300">
-				Set the nameservers used by devices on the Tailnet
-				to resolve DNS queries.
-				{' '}
-				<Link
-					to="https://tailscale.com/kb/1054/dns"
-					name="Tailscale DNS Documentation"
-				>
-					Learn more
-				</Link>
-			</p>
-			<div className="mt-4">
-				{Object.keys(nameservers).map(key => (
-					<NameserverList
-						key={key}
-						isGlobal={key === 'global'}
-						isDisabled={isDisabled}
-						nameservers={nameservers}
-						name={key}
-					/>
-				))}
-
-				{isDisabled
-					? undefined
-					: (
-						<AddNameserver nameservers={nameservers} />
-						)}
-			</div>
-		</div>
-	)
-}
-
-interface ListProps {
-	isGlobal: boolean
-	isDisabled: boolean
-	nameservers: string[]
-	name: string
-}
-
-function NameserverList({ isGlobal, isDisabled, nameservers, name }: ListProps) {
-	const submit = useSubmit()
-	const list = isGlobal ? nameservers['global'] : nameservers[name]
-	if (list.length === 0) {
-		return null
-	}
-
-	return (
-		<div className="mb-8">
-			<div className="flex items-center justify-between mb-2">
-				<h2 className="text-md font-medium opacity-80">
-					{isGlobal ? 'Global Nameservers' : name}
-				</h2>
-			</div>
-			<TableList>
-				{list.length > 0 ? list.map((ns, index) => (
-					// eslint-disable-next-line react/no-array-index-key
-					<TableList.Item key={index}>
-						<p className="font-mono text-sm">{ns}</p>
-						<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={() => {
-								if (isGlobal) {
-									submit({
-										'dns.nameservers.global': list
-											.filter((_, i) => i !== index),
-									}, {
-										method: 'PATCH',
-										encType: 'application/json',
-									})
-								} else {
-									submit({
-										'dns.nameservers.split': {
-											...nameservers,
-											[name]: list.filter((_, i) => i !== index),
-										}
-									}, {
-										method: 'PATCH',
-										encType: 'application/json',
-									})
-								}
-							}}
-						>
-							Remove
-						</Button>
-					</TableList.Item>
-				)) : undefined}
-			</TableList>
-		</div>
-	)
-}
@@ -1,101 +0,0 @@
-/* eslint-disable @typescript-eslint/naming-convention */
-/* eslint-disable unicorn/no-keyword-prefix */
-import { useFetcher } from '@remix-run/react'
-import { useState } from 'react'
-import { Input } from 'react-aria-components'
-
-import Code from '~/components/Code'
-import Dialog from '~/components/Dialog'
-import Spinner from '~/components/Spinner'
-import TextField from '~/components/TextField'
-import { cn } from '~/utils/cn'
-
-type Properties = {
-	readonly name: string;
-	// eslint-disable-next-line react/boolean-prop-naming
-	readonly disabled?: boolean;
-}
-
-export default function Modal({ name, disabled }: Properties) {
-	const [newName, setNewName] = useState(name)
-	const fetcher = useFetcher()
-
-	return (
-		<div className='flex flex-col w-2/3'>
-			<h1 className='text-2xl font-medium mb-4'>Tailnet Name</h1>
-			<p className='text-gray-700 dark:text-gray-300'>
-				This is the base domain name of your Tailnet.
-				Devices are accessible at
-				{' '}
-				<Code>
-					[device].{name}
-				</Code>
-				{' '}
-				when Magic DNS is enabled.
-			</p>
-			<Input
-				readOnly
-				className={cn(
-					'block px-2.5 py-1.5 w-1/2 rounded-lg my-4',
-					'border border-ui-200 dark:border-ui-600',
-					'dark:bg-ui-800 dark:text-ui-300 text-sm',
-					'outline-none'
-				)}
-				type='text'
-				value={name}
-				onFocus={event => {
-					event.target.select()
-				}}
-			/>
-			<Dialog>
-				<Dialog.Button isDisabled={disabled}>
-					{fetcher.state === 'idle' ? undefined : (
-						<Spinner className='w-3 h-3'/>
-					)}
-					Rename Tailnet
-				</Dialog.Button>
-				<Dialog.Panel>
-					{close => (
-						<>
-							<Dialog.Title>
-								Rename Tailnet
-							</Dialog.Title>
-							<Dialog.Text>
-								Keep in mind that changing this can lead to all sorts of unexpected behavior and may break existing devices in your tailnet.
-							</Dialog.Text>
-							<TextField
-								label='Tailnet name'
-								placeholder='ts.net'
-								state={[newName, setNewName]}
-								className='my-2'
-							/>
-							<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={() => {
-										fetcher.submit({
-											'dns.base_domain': newName
-										}, {
-											method: 'PATCH',
-											encType: 'application/json'
-										})
-
-										close()
-									}}
-								>
-									Rename
-								</Dialog.Action>
-							</div>
-						</>
-					)}
-				</Dialog.Panel>
-			</Dialog>
-		</div>
-	)
-}
@@ -1,118 +0,0 @@
-import { type ActionFunctionArgs } from '@remix-run/node'
-import { json, useLoaderData } from '@remix-run/react'
-
-import Code from '~/components/Code'
-import Notice from '~/components/Notice'
-import { loadContext } from '~/utils/config/headplane'
-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'
-import RenameModal from './rename'
-
-// We do not want to expose every config value
-export async function loader() {
-	const context = await loadContext()
-	if (!context.config.read) {
-		throw new Error('No configuration is available')
-	}
-
-	const config = await loadConfig()
-	const dns = {
-		prefixes: config.prefixes,
-		magicDns: config.dns.magic_dns,
-		baseDomain: config.dns.use_username_in_magic_dns
-			? `[user].${config.dns.base_domain}`
-			: config.dns.base_domain,
-		nameservers: config.dns.nameservers.global,
-		splitDns: config.dns.nameservers.split,
-		searchDomains: config.dns.search_domains,
-		extraRecords: config.dns.extra_records,
-	}
-
-	return {
-		...dns,
-		...context,
-	}
-}
-
-export async function action({ request }: ActionFunctionArgs) {
-	const session = await getSession(request.headers.get('Cookie'))
-	if (!session.has('hsApiKey')) {
-		return send({ success: false }, 401)
-	}
-
-	const context = await loadContext()
-	if (!context.config.write) {
-		return send({ success: false }, 403)
-	}
-
-	const data = await request.json() as Record<string, unknown>
-	await patchConfig(data)
-
-	if (context.integration?.onConfigChange) {
-		await context.integration.onConfigChange(context.integration.context)
-	}
-
-	return { success: true }
-}
-
-export default function Page() {
-	useLiveData({ interval: 5000 })
-	const data = useLoaderData<typeof loader>()
-
-	const allNs: Record<string, string[]> = {}
-	for (const key of Object.keys(data.splitDns)) {
-		allNs[key] = data.splitDns[key]
-	}
-
-	allNs.global = data.nameservers
-
-	return (
-		<div className="flex flex-col gap-16 max-w-screen-lg">
-			{data.config.write
-				? undefined
-				: (
-					<Notice>
-						The Headscale configuration is read-only. You cannot make changes to the configuration
-					</Notice>
-					)}
-			<RenameModal name={data.baseDomain} disabled={!data.config.write} />
-			<Nameservers
-				nameservers={allNs}
-				isDisabled={!data.config.write}
-			/>
-
-			<DNS
-				records={data.extraRecords}
-				isDisabled={!data.config.write}
-			/>
-
-			<Domains
-				baseDomain={data.magicDns ? data.baseDomain : undefined}
-				searchDomains={data.searchDomains}
-				disabled={!data.config.write}
-			/>
-
-			<div className="flex flex-col w-2/3">
-				<h1 className="text-2xl font-medium mb-4">Magic DNS</h1>
-				<p className="text-gray-700 dark:text-gray-300 mb-4">
-					Automatically register domain names for each device
-					on the tailnet. Devices will be accessible at
-					{' '}
-					<Code>
-						[device].
-						{data.baseDomain}
-					</Code>
-					{' '}
-					when Magic DNS is enabled.
-				</p>
-				<MagicModal isEnabled={data.magicDns} disabled={!data.config.write} />
-			</div>
-		</div>
-	)
-}
@@ -1,396 +0,0 @@
-/* eslint-disable @typescript-eslint/no-non-null-assertion */
-import { ActionFunctionArgs, LoaderFunctionArgs } from '@remix-run/node'
-import { Link as RemixLink, useLoaderData } from '@remix-run/react'
-import { InfoIcon, GearIcon, CheckCircleIcon, SkipIcon, PersonIcon } from '@primer/octicons-react'
-import { useMemo, useState } from 'react'
-
-import Attribute from '~/components/Attribute'
-import Button from '~/components/Button'
-import Card from '~/components/Card'
-import Menu from '~/components/Menu'
-import Tooltip from '~/components/Tooltip'
-import StatusCircle from '~/components/StatusCircle'
-import { Machine, Route, User } from '~/types'
-import { cn } from '~/utils/cn'
-import { loadContext } from '~/utils/config/headplane'
-import { loadConfig } from '~/utils/config/headscale'
-import { pull } from '~/utils/headscale'
-import { getSession } from '~/utils/sessions'
-import { useLiveData } from '~/utils/useLiveData'
-import Link from '~/components/Link'
-
-import { menuAction } from '../_data.machines._index/action'
-import MenuOptions from '../_data.machines._index/menu'
-import Routes from '../_data.machines._index/dialogs/routes'
-
-export async function loader({ request, params }: LoaderFunctionArgs) {
-	const session = await getSession(request.headers.get('Cookie'))
-	if (!params.id) {
-		throw new Error('No machine ID provided')
-	}
-
-	const context = await loadContext()
-	let magic: string | undefined
-
-	if (context.config.read) {
-		const config = await loadConfig()
-		if (config.dns.magic_dns) {
-			magic = config.dns.base_domain
-		}
-	}
-
-	const [machine, routes, users] = await Promise.all([
-		pull<{ node: Machine }>(`v1/node/${params.id}`, session.get('hsApiKey')!),
-		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, users } = useLoaderData<typeof loader>()
-	const routesState = useState(false)
-	useLiveData({ interval: 1000 })
-
-	const expired = machine.expiry === '0001-01-01 00:00:00'
-		|| machine.expiry === '0001-01-01T00:00:00Z'
-		|| machine.expiry === null
-		? false
-		: new Date(machine.expiry).getTime() < Date.now()
-
-	const tags = [
-		...machine.forcedTags,
-		...machine.validTags,
-	]
-
-	if (expired) {
-		tags.unshift('Expired')
-	}
-
-	// This is much easier with Object.groupBy but it's too new for us
-	const { exit, subnet, subnetApproved } = routes.reduce((acc, route) => {
-		if (route.prefix === '::/0' || route.prefix === '0.0.0.0/0') {
-			acc.exit.push(route)
-			return acc
-		}
-
-		if (route.enabled) {
-			acc.subnetApproved.push(route)
-			return acc
-		}
-
-		acc.subnet.push(route)
-		return acc
-	}, { exit: [], subnetApproved: [], subnet: [] })
-
-	const exitEnabled = useMemo(() => {
-		if (exit.length !== 2) return false
-		return exit[0].enabled && exit[1].enabled
-	}, [exit])
-
-	if (exitEnabled) {
-		tags.unshift('Exit Node')
-	}
-
-	if (subnetApproved.length > 0) {
-		tags.unshift('Subnets')
-	}
-
-	return (
-		<div>
-			<p className="mb-8 text-md">
-				<RemixLink
-					to="/machines"
-					className="font-medium"
-				>
-					All Machines
-				</RemixLink>
-				<span className="mx-2">
-					/
-				</span>
-				{machine.givenName}
-			</p>
-			<div className={cn(
-				'flex justify-between items-center',
-				'border-b border-ui-100 dark:border-ui-800',
-			)}>
-				<span className="flex items-baseline gap-x-4 text-sm mb-4">
-					<h1 className="text-2xl font-medium">
-						{machine.givenName}
-					</h1>
-					<StatusCircle isOnline={machine.online} className="w-4 h-4" />
-				</span>
-
-				<MenuOptions
-					className={cn(
-						'bg-ui-100 dark:bg-ui-800',
-					)}
-					machine={machine}
-					routes={routes}
-					users={users}
-					magic={magic}
-					buttonChild={
-						<Menu.Button className={cn(
-							'flex items-center justify-center gap-x-2',
-							'bg-main-200 dark:bg-main-700/30',
-							'hover:bg-main-300 dark:hover:bg-main-600/30',
-							'text-ui-700 dark:text-ui-300 mb-2',
-							'w-fit text-sm rounded-lg px-3 py-2'
-						)}>
-							<GearIcon className="w-5" />
-							Machine Settings
-						</Menu.Button>
-					}
-				/>
-			</div>
-			<div className="flex gap-1 mb-4">
-				<div className="border-r border-ui-100 dark:border-ui-800 p-2 pr-4">
-					<span className="text-sm text-ui-600 dark:text-ui-300 flex items-center gap-x-1">
-						Managed by
-						<Tooltip>
-							<Tooltip.Button>
-								<InfoIcon className="w-3.5 h-3.5" />
-							</Tooltip.Button>
-							<Tooltip.Body>
-								By default, a machine’s permissions match its creator’s.
-							</Tooltip.Body>
-						</Tooltip>
-					</span>
-					<div className="flex items-center gap-x-2.5 mt-1">
-						<div className={cn(
-							'rounded-full h-7 w-7 flex items-center justify-center',
-							'border border-ui-200 dark:border-ui-700',
-						)}>
-							<PersonIcon className="w-4 h-4" />
-						</div>
-						{machine.user.name}
-					</div>
-				</div>
-				<div className="p-2 pl-4">
-					<p className="text-sm text-ui-600 dark:text-ui-300">
-						Status
-					</p>
-					<div className="flex gap-1 mt-1 mb-8">
-						{tags.map(tag => (
-							<span
-								key={tag}
-								className={cn(
-									'text-xs rounded-md px-1.5 py-0.5',
-									'bg-ui-200 dark:bg-ui-800',
-									'text-ui-600 dark:text-ui-300',
-								)}
-							>
-								{tag}
-							</span>
-						))}
-					</div>
-				</div>
-			</div>
-			<h2 className="text-xl font-medium mb-4 mt-8">
-				Subnets & Routing
-			</h2>
-			<Routes
-				machine={machine}
-				routes={routes}
-				state={routesState}
-			/>
-			<div className="flex items-center justify-between mb-4">
-				<p>
-					Subnets let you expose physical network routes onto Tailscale.
-					{' '}
-					<Link
-						to="https://tailscale.com/kb/1019/subnets"
-						name="Tailscale Subnets Documentation"
-					>
-						Learn More
-					</Link>
-				</p>
-				<Button
-					variant="light"
-					control={routesState}
-				>
-					Review
-				</Button>
-			</div>
-			<Card
-				variant="flat"
-				className={cn(
-					'w-full max-w-full grid sm:grid-cols-2',
-					'md:grid-cols-4 gap-8 mr-2 text-sm mb-8',
-				)}
-			>
-				<div>
-					<span className="text-ui-600 dark:text-ui-300 flex items-center gap-x-1">
-						Approved
-						<Tooltip>
-							<Tooltip.Button>
-								<InfoIcon className="w-3.5 h-3.5" />
-							</Tooltip.Button>
-							<Tooltip.Body>
-								Traffic to these routes are being
-								routed through this machine.
-							</Tooltip.Body>
-						</Tooltip>
-					</span>
-					<div className="mt-1">
-						{subnetApproved.length === 0 ? (
-							<span className="text-ui-400 dark:text-ui-300">
-								—
-							</span>
-						) : (
-							<ul className="leading-normal">
-								{subnetApproved.map(route => (
-									<li key={route.id}>
-										{route.prefix}
-									</li>
-								))}
-							</ul>
-						)}
-					</div>
-					<Button
-						className={cn(
-							'p-0 rounded-sm bg-transparent mt-1',
-							'text-blue-500 dark:text-blue-400',
-							'hover:bg-transparent',
-							'hover:text-blue-600 dark:hover:text-blue-500',
-						)}
-						control={routesState}
-					>
-						Edit
-					</Button>
-				</div>
-				<div>
-					<span className="text-ui-600 dark:text-ui-300 flex items-center gap-x-1">
-						Awaiting Approval
-						<Tooltip>
-							<Tooltip.Button>
-								<InfoIcon className="w-3.5 h-3.5" />
-							</Tooltip.Button>
-							<Tooltip.Body>
-								This machine is advertising these routes,
-								but they must be approved before traffic
-								will be routed to them.
-							</Tooltip.Body>
-						</Tooltip>
-					</span>
-					<div className="mt-1">
-						{subnet.length === 0 ? (
-							<span className="text-ui-400 dark:text-ui-300">
-								—
-							</span>
-						) : (
-							<ul className="leading-normal">
-								{subnet.map(route => (
-									<li key={route.id}>
-										{route.prefix}
-									</li>
-								))}
-							</ul>
-						)}
-					</div>
-					<Button
-						className={cn(
-							'p-0 rounded-sm bg-transparent mt-1',
-							'text-blue-500 dark:text-blue-400',
-							'hover:bg-transparent',
-							'hover:text-blue-600 dark:hover:text-blue-500',
-						)}
-						control={routesState}
-					>
-						Edit
-					</Button>
-				</div>
-				<div>
-					<span className="text-ui-600 dark:text-ui-300 flex items-center gap-x-1">
-						Exit Node
-						<Tooltip>
-							<Tooltip.Button>
-								<InfoIcon className="w-3.5 h-3.5" />
-							</Tooltip.Button>
-							<Tooltip.Body>
-								Whether this machine can act as an
-								exit node for your tailnet.
-							</Tooltip.Body>
-						</Tooltip>
-					</span>
-					<div className="mt-1">
-						{exit.length === 0 ? (
-							<span className="text-ui-400 dark:text-ui-300">
-								—
-							</span>
-						) : exitEnabled ? (
-							<span className="flex items-center gap-x-1">
-								<CheckCircleIcon className="w-3.5 h-3.5 text-green-700" />
-								Allowed
-							</span>
-						) : (
-							<span className="flex items-center gap-x-1">
-								<SkipIcon className="w-3.5 h-3.5 text-red-700" />
-								Awaiting Approval
-							</span>
-						)}
-					</div>
-					<Button
-						className={cn(
-							'p-0 rounded-sm bg-transparent mt-1',
-							'text-blue-500 dark:text-blue-400',
-							'hover:bg-transparent',
-							'hover:text-blue-600 dark:hover:text-blue-500',
-						)}
-						control={routesState}
-					>
-						Edit
-					</Button>
-				</div>
-			</Card>
-			<h2 className="text-xl font-medium mb-4">
-				Machine Details
-			</h2>
-			<Card variant="flat" className="w-full max-w-full">
-				<Attribute name="Creator" value={machine.user.name} />
-				<Attribute name="Node ID" value={machine.id} />
-				<Attribute name="Node Name" value={machine.givenName} />
-				<Attribute name="Hostname" value={machine.name} />
-				<Attribute
-					isCopyable
-					name="Node Key"
-					value={machine.nodeKey}
-				/>
-				<Attribute
-					name="Created"
-					value={new Date(machine.createdAt).toLocaleString()}
-				/>
-				<Attribute
-					name="Last Seen"
-					value={new Date(machine.lastSeen).toLocaleString()}
-				/>
-				<Attribute
-					name="Expiry"
-					value={expired
-						? new Date(machine.expiry).toLocaleString()
-						: 'Never'
-					}
-				/>
-				{magic
-					? (
-						<Attribute
-							isCopyable
-							name="Domain"
-							value={`${machine.givenName}.${magic}`}
-						/>
-						)
-					: undefined}
-			</Card>
-		</div>
-	)
-}
@@ -1,167 +0,0 @@
-import { ActionFunctionArgs } from '@remix-run/node'
-import { del, post } from '~/utils/headscale'
-import { getSession } from '~/utils/sessions'
-import { send } from '~/utils/res'
-import log from '~/utils/log'
-
-export async function menuAction(request: ActionFunctionArgs['request']) {
-	const session = await getSession(request.headers.get('Cookie'))
-	if (!session.has('hsApiKey')) {
-		return send({ message: 'Unauthorized' }, {
-			status: 401,
-		})
-	}
-
-	const data = await request.formData()
-	if (!data.has('_method') || !data.has('id')) {
-		return send({ 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 { message: 'Machine removed' }
-		}
-
-		case 'expire': {
-			await post(`v1/node/${id}/expire`, session.get('hsApiKey')!)
-			return { message: 'Machine expired' }
-		}
-
-		case 'rename': {
-			if (!data.has('name')) {
-				return send({ message: 'No name provided' }, {
-					status: 400,
-				})
-			}
-
-			const name = String(data.get('name'))
-
-			await post(`v1/node/${id}/rename/${name}`, session.get('hsApiKey')!)
-			return { message: 'Machine renamed' }
-		}
-
-		case 'routes': {
-			if (!data.has('route') || !data.has('enabled')) {
-				return send({ 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 { message: 'Route updated' }
-		}
-
-		case 'exit-node': {
-			if (!data.has('routes') || !data.has('enabled')) {
-				return send({ message: 'No route or enabled provided' }, {
-					status: 400,
-				})
-			}
-
-			const routes = data.get('routes')?.toString().split(',') ?? []
-			const enabled = data.get('enabled') === 'true'
-			const postfix = enabled ? 'enable' : 'disable'
-
-			await Promise.all(routes.map(async (route) => {
-				await post(`v1/routes/${route}/${postfix}`, session.get('hsApiKey')!)
-			}))
-
-			return { message: 'Exit node updated' }
-		}
-
-		case 'move': {
-			if (!data.has('to')) {
-				return send({ 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 { message: `Moved node ${id} to ${to}` }
-			} catch {
-				return send({ message: `Failed to move node ${id} to ${to}` }, {
-					status: 500,
-				})
-			}
-		}
-
-		case 'tags': {
-			const tags = data.get('tags')?.toString()
-				.split(',')
-				.filter((tag) => tag.trim() !== '')
-					?? []
-
-			try {
-				await post(`v1/node/${id}/tags`, session.get('hsApiKey')!, {
-					tags,
-				})
-
-				return { message: 'Tags updated' }
-			} catch (error) {
-				log.debug('APIC', 'Failed to update tags: %s', error)
-				return send({ message: 'Failed to update tags' }, {
-					status: 500,
-				})
-			}
-		}
-
-		case 'register': {
-			const key = data.get('mkey')?.toString()
-			const user = data.get('user')?.toString()
-
-			if (!key) {
-				return send({ message: 'No machine key provided' }, {
-					status: 400,
-				})
-			}
-
-			if (!user) {
-				return send({ message: 'No user provided' }, {
-					status: 400,
-				})
-			}
-
-			try {
-				const qp = new URLSearchParams()
-				qp.append('user', user)
-				qp.append('key', key)
-
-				const url = `v1/node/register?${qp.toString()}`
-				await post(url, session.get('hsApiKey')!, {
-					user, key,
-				})
-
-				return {
-					success: true,
-					message: 'Machine registered'
-				}
-			} catch {
-				return send({
-					success: false,
-					message: 'Failed to register machine'
-				}, {
-					status: 500,
-				})
-			}
-		}
-
-		default: {
-			return send({ message: 'Invalid method' }, {
-				status: 400,
-			})
-		}
-	}
-}
@@ -1,65 +0,0 @@
-import { Form, useSubmit } from '@remix-run/react'
-import { type Dispatch, type SetStateAction } from 'react'
-
-import Dialog from '~/components/Dialog'
-import { type Machine } from '~/types'
-import { cn } from '~/utils/cn'
-
-interface DeleteProps {
-	readonly machine: Machine
-	readonly state: [boolean, Dispatch<SetStateAction<boolean>>]
-}
-
-export default function Delete({ machine, state }: DeleteProps) {
-	const submit = useSubmit()
-
-	return (
-		<Dialog>
-			<Dialog.Panel control={state}>
-				{close => (
-					<>
-						<Dialog.Title>
-							Remove
-							{' '}
-							{machine.givenName}
-						</Dialog.Title>
-						<Dialog.Text>
-							This machine will be permanently removed from
-							your network. To re-add it, you will need to
-							reauthenticate to your tailnet from the device.
-						</Dialog.Text>
-						<Form
-							method="POST"
-							onSubmit={(e) => {
-								submit(e.currentTarget)
-							}}
-						>
-							<input type="hidden" name="_method" value="delete" />
-							<input type="hidden" name="id" value={machine.id} />
-							<div className="mt-6 flex justify-end gap-2 mt-6">
-								<Dialog.Action
-									variant="cancel"
-									onPress={close}
-								>
-									Cancel
-								</Dialog.Action>
-								<Dialog.Action
-									variant="confirm"
-									className={cn(
-										'bg-red-500 hover:border-red-700',
-										'dark:bg-red-600 dark:hover:border-red-700',
-										'pressed:bg-red-600 hover:bg-red-600',
-										'text-white dark:text-white',
-									)}
-									onPress={close}
-								>
-									Remove
-								</Dialog.Action>
-							</div>
-						</Form>
-					</>
-				)}
-			</Dialog.Panel>
-		</Dialog>
-	)
-}
@@ -1,65 +0,0 @@
-import { Form, useSubmit } from '@remix-run/react'
-import { type Dispatch, type SetStateAction } from 'react'
-
-import Dialog from '~/components/Dialog'
-import { type Machine } from '~/types'
-import { cn } from '~/utils/cn'
-
-interface ExpireProps {
-	readonly machine: Machine
-	readonly state: [boolean, Dispatch<SetStateAction<boolean>>]
-}
-
-export default function Expire({ machine, state }: ExpireProps) {
-	const submit = useSubmit()
-
-	return (
-		<Dialog>
-			<Dialog.Panel control={state}>
-				{close => (
-					<>
-						<Dialog.Title>
-							Expire
-							{' '}
-							{machine.givenName}
-						</Dialog.Title>
-						<Dialog.Text>
-							This will disconnect the machine from your Tailnet.
-							In order to reconnect, you will need to re-authenticate
-							from the device.
-						</Dialog.Text>
-						<Form
-							method="POST"
-							onSubmit={(e) => {
-								submit(e.currentTarget)
-							}}
-						>
-							<input type="hidden" name="_method" value="expire" />
-							<input type="hidden" name="id" value={machine.id} />
-							<div className="mt-6 flex justify-end gap-2 mt-6">
-								<Dialog.Action
-									variant="cancel"
-									onPress={close}
-								>
-									Cancel
-								</Dialog.Action>
-								<Dialog.Action
-									variant="confirm"
-									className={cn(
-										'bg-red-500 hover:border-red-700',
-										'dark:bg-red-600 dark:hover:border-red-700',
-										'pressed:bg-red-600 hover:bg-red-600',
-										'text-white dark:text-white',
-									)}
-									onPress={close}
-								>
-									Expire
-								</Dialog.Action>
-							</div>
-						</Form>
-					</>
-				)}
-			</Dialog.Panel>
-		</Dialog>
-	)
-}
@@ -1,87 +0,0 @@
-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.
-						</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
-								? (
-									<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}
-											.
-											{magic}
-										</Code>
-										.
-									</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>
-	)
-}
@@ -1,134 +0,0 @@
-import { Form, useFetcher, Link } from '@remix-run/react'
-import { Dispatch, SetStateAction, useState, useEffect } from 'react'
-import { PlusIcon, ServerIcon, KeyIcon } from '@primer/octicons-react'
-import { cn } from '~/utils/cn'
-
-import Code from '~/components/Code'
-import Dialog from '~/components/Dialog'
-import TextField from '~/components/TextField'
-import Select from '~/components/Select'
-import Menu from '~/components/Menu'
-import Spinner from '~/components/Spinner'
-import { toast } from '~/components/Toaster'
-import { Machine, User } from '~/types'
-
-export interface NewProps {
-	server: string
-	users: User[]
-}
-
-export default function New(data: NewProps) {
-	const fetcher = useFetcher<{ success?: boolean }>()
-	const mkeyState = useState(false)
-	const [mkey, setMkey] = useState('')
-	const [user, setUser] = useState('')
-	const [toasted, setToasted] = useState(false)
-
-	useEffect(() => {
-		if (!fetcher.data || toasted) {
-			return
-		}
-
-		if (fetcher.data.success) {
-			toast('Registered new machine')
-		} else {
-			toast('Failed to register machine due to an invalid key')
-		}
-
-		setToasted(true)
-	}, [fetcher.data, toasted, mkey])
-
-	return (
-		<>
-			<Dialog>
-				<Dialog.Panel control={mkeyState}>
-					{close => (
-						<>
-							<Dialog.Title>
-								Register Machine Key
-							</Dialog.Title>
-							<Dialog.Text className='mb-4'>
-								The machine key is given when you run
-								{' '}
-								<Code isCopyable>
-									tailscale up --login-server=
-									{data.server}
-								</Code>
-								{' '}
-								on your device.
-							</Dialog.Text>
-							<fetcher.Form method="POST" onSubmit={e => {
-								fetcher.submit(e.currentTarget)
-								close()
-							}}>
-								<input type="hidden" name="_method" value="register" />
-								<input type="hidden" name="id" value="_" />
-								<TextField
-									label='Machine Key'
-									placeholder='mkey:ff.....'
-									name="mkey"
-									state={[mkey, setMkey]}
-									className='my-2 font-mono'
-								/>
-								<Select
-									label="Owner"
-									name="user"
-									placeholder="Select a user"
-									state={[user, setUser]}
-								>
-									{data.users.map(user => (
-										<Select.Item key={user.id} id={user.name}>
-											{user.name}
-										</Select.Item>
-									))}
-								</Select>
-								<div className='mt-6 flex justify-end gap-2 mt-6'>
-									<Dialog.Action
-										variant="cancel"
-										onPress={close}
-									>
-										Cancel
-									</Dialog.Action>
-									<Dialog.Action
-										variant="confirm"
-										isDisabled={!mkey || !mkey.trim().startsWith('mkey:') || !user}
-									>
-										{fetcher.state === 'idle'
-											? undefined
-											: (
-												<Spinner className="w-3 h-3" />
-												)}
-										Register
-									</Dialog.Action>
-								</div>
-							</fetcher.Form>
-						</>
-					)}
-				</Dialog.Panel>
-			</Dialog>
-			<Menu>
-				<Menu.Button
-					className={cn(
-						'w-fit text-sm rounded-lg px-4 py-2',
-						'bg-main-700 dark:bg-main-800 text-white',
-						'hover:bg-main-800 dark:hover:bg-main-700',
-					)}
-				>
-					Add Device
-				</Menu.Button>
-				<Menu.Items>
-					<Menu.ItemButton control={mkeyState}>
-						<ServerIcon className='w-4 h-4 mr-2'/>
-						Register Machine Key
-					</Menu.ItemButton>
-					<Menu.ItemButton>
-						<Link to="/settings/auth-keys">
-							<KeyIcon className='w-4 h-4 mr-2'/>
-							Generate Pre-auth Key
-						</Link>
-					</Menu.ItemButton>
-				</Menu.Items>
-			</Menu>
-		</>
-	)
-}
@@ -1,100 +0,0 @@
-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 TextField from '~/components/TextField'
-import { type Machine } from '~/types'
-
-interface RenameProps {
-	readonly machine: Machine
-	readonly state: [boolean, Dispatch<SetStateAction<boolean>>]
-	readonly magic?: string
-}
-
-export default function Rename({ machine, state, magic }: RenameProps) {
-	const [name, setName] = useState(machine.givenName)
-	const submit = useSubmit()
-
-	return (
-		<Dialog>
-			<Dialog.Panel control={state}>
-				{close => (
-					<>
-						<Dialog.Title>
-							Edit machine name for
-							{' '}
-							{machine.givenName}
-						</Dialog.Title>
-						<Dialog.Text>
-							This name is shown in the admin panel, in Tailscale clients,
-							and used when generating MagicDNS names.
-						</Dialog.Text>
-						<Form
-							method="POST"
-							onSubmit={(e) => {
-								submit(e.currentTarget)
-							}}
-						>
-							<input type="hidden" name="_method" value="rename" />
-							<input type="hidden" name="id" value={machine.id} />
-							<TextField
-								label="Machine name"
-								placeholder="Machine name"
-								name="name"
-								state={[name, setName]}
-								className="my-2"
-							/>
-							{magic
-								? (
-										name.length > 0 && name !== machine.givenName
-											? (
-												<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">
-														{name.toLowerCase().replaceAll(/\s+/g, '-')}
-													</Code>
-													{'. '}
-													The hostname
-													{' '}
-													<Code className="text-sm">
-														{machine.givenName}
-													</Code>
-													{' '}
-													will no longer point to this machine.
-												</p>
-												)
-											: (
-												<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}
-													</Code>
-													.
-												</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}
-								>
-									Rename
-								</Dialog.Action>
-							</div>
-						</Form>
-					</>
-				)}
-			</Dialog.Panel>
-		</Dialog>
-	)
-}
@@ -1,184 +0,0 @@
-import { useFetcher } from '@remix-run/react'
-import { Dispatch, SetStateAction, useMemo } from 'react'
-
-import Dialog from '~/components/Dialog'
-import Switch from '~/components/Switch'
-import Link from '~/components/Link'
-import { Machine, Route } from '~/types'
-import { cn } from '~/utils/cn'
-
-interface RoutesProps {
-	readonly machine: Machine
-	readonly routes: Route[]
-	readonly state: [boolean, Dispatch<SetStateAction<boolean>>]
-}
-
-// TODO: Support deleting routes
-export default function Routes({ machine, routes, state }: RoutesProps) {
-	const fetcher = useFetcher()
-
-	// This is much easier with Object.groupBy but it's too new for us
-	const { exit, subnet } = routes.reduce((acc, route) => {
-		if (route.prefix === '::/0' || route.prefix === '0.0.0.0/0') {
-			acc.exit.push(route)
-			return acc
-		}
-
-		acc.subnet.push(route)
-		return acc
-	}, { exit: [], subnet: [] })
-
-	const exitEnabled = useMemo(() => {
-		if (exit.length !== 2) return false
-		return exit[0].enabled && exit[1].enabled
-	}, [exit])
-
-	return (
-		<Dialog>
-			<Dialog.Panel control={state}>
-				{close => (
-					<>
-						<Dialog.Title>
-							Edit route settings of
-							{' '}
-							{machine.givenName}
-						</Dialog.Title>
-						<Dialog.Text className="font-bold">
-							Subnet routes
-						</Dialog.Text>
-						<Dialog.Text>
-							Connect to devices you can&apos;t install Tailscale on
-							by advertising IP ranges as subnet routes.
-							{' '}
-							<Link
-								to="https://tailscale.com/kb/1019/subnets"
-								name="Tailscale Subnets Documentation"
-							>
-								Learn More
-							</Link>
-						</Dialog.Text>
-						<div className={cn(
-							'rounded-lg overflow-y-auto my-2',
-							'divide-y divide-zinc-200 dark:divide-zinc-700 align-top',
-							'border border-zinc-200 dark:border-zinc-700',
-						)}
-						>
-							{subnet.length === 0
-								? (
-									<div
-										className={cn(
-											'flex py-4 px-4 bg-ui-100 dark:bg-ui-800',
-											'items-center justify-center',
-											'text-ui-600 dark:text-ui-300',
-										)}
-									>
-										<p>
-											No routes are advertised on this machine.
-										</p>
-									</div>
-									)
-								: undefined}
-							{subnet.map(route => (
-								<div
-									key={route.id}
-									className={cn(
-										'flex py-2 px-4 bg-ui-100 dark:bg-ui-800',
-										'items-center justify-between',
-									)}
-								>
-									<p>
-										{route.prefix}
-									</p>
-									<Switch
-										defaultSelected={route.enabled}
-										label="Enabled"
-										onChange={(checked) => {
-											const form = new FormData()
-											form.set('id', machine.id)
-											form.set('_method', 'routes')
-											form.set('route', route.id)
-
-											form.set('enabled', String(checked))
-											fetcher.submit(form, {
-												method: 'POST',
-											})
-										}}
-									/>
-								</div>
-							))}
-						</div>
-						<Dialog.Text className="font-bold mt-8">
-							Exit nodes
-						</Dialog.Text>
-						<Dialog.Text>
-							Allow your network to route internet traffic through this machine.
-							{' '}
-							<Link
-								to="https://tailscale.com/kb/1103/exit-nodes"
-								name="Tailscale Exit-node Documentation"
-							>
-								Learn More
-							</Link>
-						</Dialog.Text>
-						<div className={cn(
-							'rounded-lg overflow-y-auto my-2',
-							'divide-y divide-zinc-200 dark:divide-zinc-700 align-top',
-							'border border-zinc-200 dark:border-zinc-700',
-						)}
-						>
-							{exit.length === 0
-								? (
-									<div
-										className={cn(
-											'flex py-4 px-4 bg-ui-100 dark:bg-ui-800',
-											'items-center justify-center',
-											'text-ui-600 dark:text-ui-300',
-										)}
-									>
-										<p>
-											This machine is not an exit node.
-										</p>
-									</div>
-								) : (
-									<div
-										className={cn(
-											'flex py-2 px-4 bg-ui-100 dark:bg-ui-800',
-											'items-center justify-between',
-										)}
-									>
-										<p>
-											Use as exit node
-										</p>
-										<Switch
-											defaultSelected={exitEnabled}
-											label="Enabled"
-											onChange={(checked) => {
-												const form = new FormData()
-												form.set('id', machine.id)
-												form.set('_method', 'exit-node')
-												form.set('routes', exit.map(route => route.id).join(','))
-
-												form.set('enabled', String(checked))
-												fetcher.submit(form, {
-													method: 'POST',
-												})
-											}}
-										/>
-									</div>
-								)}
-						</div>
-						<div className="mt-6 flex justify-end gap-2 mt-6">
-							<Dialog.Action
-								variant="cancel"
-								isDisabled={fetcher.state === 'submitting'}
-								onPress={close}
-							>
-								Close
-							</Dialog.Action>
-						</div>
-					</>
-				)}
-			</Dialog.Panel>
-		</Dialog>
-	)
-}
@@ -1,161 +0,0 @@
-import { PlusIcon, XIcon } from '@primer/octicons-react'
-import { Form, useSubmit } from '@remix-run/react'
-import { Dispatch, SetStateAction, useState } from 'react'
-import { Button, Input } from 'react-aria-components'
-
-import Dialog from '~/components/Dialog'
-import Link from '~/components/Link'
-import { 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>
-	)
-}
@@ -1,184 +0,0 @@
-import { ChevronDownIcon, CopyIcon } from '@primer/octicons-react'
-import { Link } from '@remix-run/react'
-
-import Menu from '~/components/Menu'
-import StatusCircle from '~/components/StatusCircle'
-import { toast } from '~/components/Toaster'
-import { Machine, Route, User } from '~/types'
-import { cn } from '~/utils/cn'
-
-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, users }: Props) {
-	const expired = machine.expiry === '0001-01-01 00:00:00'
-		|| machine.expiry === '0001-01-01T00:00:00Z'
-		|| machine.expiry === null
-		? false
-		: new Date(machine.expiry).getTime() < Date.now()
-
-	const tags = [
-		...machine.forcedTags,
-		...machine.validTags,
-	]
-
-	if (expired) {
-		tags.unshift('Expired')
-	}
-
-	let prefix = magic?.startsWith('[user]')
-		? magic.replace('[user]', machine.user.name)
-		: magic
-
-	// This is much easier with Object.groupBy but it's too new for us
-	const { exit, subnet, subnetApproved } = routes.reduce((acc, route) => {
-		if (route.prefix === '::/0' || route.prefix === '0.0.0.0/0') {
-			acc.exit.push(route)
-			return acc
-		}
-
-		if (route.enabled) {
-			acc.subnetApproved.push(route)
-			return acc
-		}
-
-		acc.subnet.push(route)
-		return acc
-	}, { exit: [], subnetApproved: [], subnet: [] })
-
-	const exitEnabled = useMemo(() => {
-		if (exit.length !== 2) return false
-		return exit[0].enabled && exit[1].enabled
-	}, [exit])
-
-	if (exitEnabled) {
-		tags.unshift('Exit Node')
-	}
-
-	if (subnetApproved.length > 0) {
-		tags.unshift('Subnets')
-	}
-
-	return (
-		<tr
-			key={machine.id}
-			className="hover:bg-zinc-100 dark:hover:bg-zinc-800 group"
-		>
-			<td className="pl-0.5 py-2">
-				<Link
-					to={`/machines/${machine.id}`}
-					className="group/link h-full"
-				>
-					<p className={cn(
-						'font-semibold leading-snug',
-						'group-hover/link:text-blue-600',
-						'group-hover/link:dark:text-blue-400',
-					)}
-					>
-						{machine.givenName}
-					</p>
-					<p className="text-sm text-gray-500 dark:text-gray-300 font-mono">
-						{machine.name}
-					</p>
-					<div className="flex gap-1 mt-1">
-						{tags.map(tag => (
-							<span
-								key={tag}
-								className={cn(
-									'text-xs rounded-md px-1.5 py-0.5',
-									'bg-ui-200 dark:bg-ui-800',
-									'text-ui-600 dark:text-ui-300',
-								)}
-							>
-								{tag}
-							</span>
-						))}
-					</div>
-				</Link>
-			</td>
-			<td className="py-2">
-				<div className="flex items-center gap-x-1">
-					{machine.ipAddresses[0]}
-					<Menu>
-						<Menu.Button>
-							<ChevronDownIcon className="w-4 h-4" />
-						</Menu.Button>
-						<Menu.Items>
-							{machine.ipAddresses.map(ip => (
-								<Menu.ItemButton
-									key={ip}
-									type="button"
-									className={cn(
-										'flex items-center gap-x-1.5 text-sm',
-										'justify-between w-full',
-									)}
-									onPress={async () => {
-										await navigator.clipboard.writeText(ip)
-										toast('Copied IP address to clipboard')
-									}}
-								>
-									{ip}
-									<CopyIcon className="w-3 h-3" />
-								</Menu.ItemButton>
-							))}
-							{magic
-								? (
-									<Menu.ItemButton
-										type="button"
-										className={cn(
-											'flex items-center gap-x-1.5 text-sm',
-											'justify-between w-full break-keep',
-										)}
-										onPress={async () => {
-											const ip = `${machine.givenName}.${prefix}`
-											await navigator.clipboard.writeText(ip)
-											toast('Copied hostname to clipboard')
-										}}
-									>
-										{machine.givenName}
-										.
-										{prefix}
-										<CopyIcon className="w-3 h-3" />
-									</Menu.ItemButton>
-									)
-								: undefined}
-						</Menu.Items>
-					</Menu>
-				</div>
-			</td>
-			<td className="py-2">
-				<span className={cn(
-					'flex items-center gap-x-1 text-sm',
-					'text-gray-500 dark:text-gray-400',
-				)}
-				>
-					<StatusCircle
-						isOnline={machine.online && !expired}
-						className="w-4 h-4"
-					/>
-					<p>
-						{machine.online && !expired
-							? 'Connected'
-							: new Date(
-								machine.lastSeen,
-							).toLocaleString()}
-					</p>
-				</span>
-			</td>
-			<td className="py-2 pr-0.5">
-				<MenuOptions
-					machine={machine}
-					routes={routes}
-					users={users}
-					magic={magic}
-				/>
-			</td>
-		</tr>
-	)
-}
@@ -1,114 +0,0 @@
-import { KebabHorizontalIcon } from '@primer/octicons-react'
-import { ReactNode, useState } from 'react'
-
-import MenuComponent from '~/components/Menu'
-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
-	buttonChild?: ReactNode
-}
-
-export default function Menu({ machine, routes, magic, users, buttonChild }: 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'
-		|| machine.expiry === null
-		? false
-		: new Date(machine.expiry).getTime() < Date.now()
-
-	return (
-		<>
-			<Rename
-				machine={machine}
-				state={renameState}
-				magic={magic}
-			/>
-			<Delete
-				machine={machine}
-				state={removeState}
-			/>
-			{expired
-				? undefined
-				: (
-					<Expire
-						machine={machine}
-						state={expireState}
-					/>
-					)}
-			<Routes
-				machine={machine}
-				routes={routes}
-				state={routesState}
-			/>
-			<Tags
-				machine={machine}
-				state={tagsState}
-			/>
-			<Move
-				machine={machine}
-				state={moveState}
-				users={users}
-				magic={magic}
-			/>
-
-			<MenuComponent>
-				{buttonChild ?? (
-					<MenuComponent.Button
-						className={cn(
-							'flex items-center justify-center',
-							'border border-transparent rounded-lg py-0.5 w-10',
-							'group-hover:border-gray-200 dark:group-hover:border-zinc-700',
-						)}
-					>
-						<KebabHorizontalIcon className="w-5" />
-					</MenuComponent.Button>
-				)}
-				<MenuComponent.Items>
-					<MenuComponent.ItemButton control={renameState}>
-						Edit machine name
-					</MenuComponent.ItemButton>
-					<MenuComponent.ItemButton control={routesState}>
-						Edit route settings
-					</MenuComponent.ItemButton>
-					<MenuComponent.ItemButton control={tagsState}>
-						Edit ACL tags
-					</MenuComponent.ItemButton>
-					<MenuComponent.ItemButton control={moveState}>
-						Change owner
-					</MenuComponent.ItemButton>
-					{expired
-						? undefined
-						: (
-							<MenuComponent.ItemButton control={expireState}>
-								Expire
-							</MenuComponent.ItemButton>
-							)}
-					<MenuComponent.ItemButton
-						className="text-red-500 dark:text-red-400"
-						control={removeState}
-					>
-						Remove
-					</MenuComponent.ItemButton>
-				</MenuComponent.Items>
-			</MenuComponent>
-		</>
-	)
-}
@@ -1,135 +0,0 @@
-/* eslint-disable @typescript-eslint/no-non-null-assertion */
-import { InfoIcon } from '@primer/octicons-react'
-import { ActionFunctionArgs, 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 Link from '~/components/Link'
-import { cn } from '~/utils/cn'
-import { loadContext } from '~/utils/config/headplane'
-import { loadConfig } from '~/utils/config/headscale'
-import { pull } from '~/utils/headscale'
-import { getSession } from '~/utils/sessions'
-import { useLiveData } from '~/utils/useLiveData'
-import type { Machine, Route, User } from '~/types'
-
-import { menuAction } from './action'
-import MachineRow from './machine'
-import NewMachine from './dialogs/new'
-
-export async function loader({ request }: LoaderFunctionArgs) {
-	const session = await getSession(request.headers.get('Cookie'))
-	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()
-	let magic: string | undefined
-
-	if (context.config.read) {
-		const config = await loadConfig()
-		if (config.dns.magic_dns) {
-			magic = config.dns.base_domain
-		}
-
-		if (config.dns.use_username_in_magic_dns) {
-			magic = `[user].${magic}`
-		}
-	}
-
-	return {
-		nodes: machines.nodes,
-		routes: routes.routes,
-		users: users.users,
-		magic,
-		server: context.headscaleUrl,
-		publicServer: context.headscalePublicUrl,
-	}
-}
-
-export async function action({ request }: ActionFunctionArgs) {
-	return menuAction(request)
-}
-
-export default function Page() {
-	useLiveData({ interval: 3000 })
-	const data = useLoaderData<typeof loader>()
-
-	return (
-		<>
-			<div className="flex justify-between items-center mb-8">
-				<div className="flex flex-col w-2/3">
-					<h1 className='text-2xl font-medium mb-4'>Machines</h1>
-					<p className='text-gray-700 dark:text-gray-300'>
-						Manage the devices connected to your Tailnet.
-						{' '}
-						<Link
-							to="https://tailscale.com/kb/1372/manage-devices"
-							name="Tailscale Manage Devices Documentation"
-						>
-							Learn more
-						</Link>
-					</p>
-				</div>
-				<NewMachine
-					server={data.publicServer ?? data.server}
-					users={data.users}
-				/>
-			</div>
-			<table className="table-auto w-full rounded-lg">
-				<thead className="text-gray-500 dark:text-gray-400">
-					<tr className="text-left uppercase text-xs font-bold px-0.5">
-						<th className="pb-2">Name</th>
-						<th className="pb-2">
-							<div className="flex items-center gap-x-1">
-								Addresses
-								{data.magic
-									? (
-										<TooltipTrigger delay={0}>
-											<Button>
-												<InfoIcon className="w-4 h-4" />
-											</Button>
-											<Tooltip className={cn(
-												'text-sm max-w-xs p-2 rounded-lg mb-2',
-												'bg-white dark:bg-zinc-800',
-												'border border-gray-200 dark:border-zinc-700',
-											)}
-											>
-												Since MagicDNS is enabled, you can access devices
-												based on their name and also at
-												{' '}
-												<Code>
-													[name].
-													{data.magic}
-												</Code>
-											</Tooltip>
-										</TooltipTrigger>
-										)
-									: undefined}
-							</div>
-						</th>
-						<th className="pb-2">Last Seen</th>
-					</tr>
-				</thead>
-				<tbody className={cn(
-					'divide-y divide-zinc-200 dark:divide-zinc-700 align-top',
-					'border-t border-zinc-200 dark:border-zinc-700',
-				)}
-				>
-					{data.nodes.map(machine => (
-						<MachineRow
-							key={machine.id}
-							machine={machine}
-							routes={data.routes.filter(route => route.node.id === machine.id)}
-							users={data.users}
-							magic={data.magic}
-						/>
-					))}
-				</tbody>
-			</table>
-		</>
-	)
-}
@@ -1,45 +0,0 @@
-import Link from '~/components/Link'
-import Button from '~/components/Button'
-import { Link as RemixLink } from '@remix-run/react'
-import { ArrowRightIcon } from '@primer/octicons-react'
-import { cn } from '~/utils/cn'
-
-export default function Page() {
-	return (
-		<div className="flex flex-col gap-8 max-w-screen-lg">
-			<div className='flex flex-col w-2/3'>
-				<h1 className='text-2xl font-medium mb-4'>Settings</h1>
-				<p className="text-gray-700 dark:text-gray-300">
-					The settings page is still under construction.
-					As I'm able to add more features, I'll be adding them here.
-					If you require any features, feel free to open an issue on
-					the GitHub repository.
-				</p>
-			</div>
-			<div className='flex flex-col w-2/3'>
-				<h1 className='text-2xl font-medium mb-4'>Pre-Auth Keys</h1>
-				<p className="text-gray-700 dark:text-gray-300">
-					Headscale fully supports pre-authentication keys in order to
-					easily add devices to your Tailnet.
-					To learn more about using pre-authentication keys, visit the
-					{' '}
-					<Link
-						to="https://tailscale.com/kb/1085/auth-keys/"
-						name="Tailscale Auth Keys documentation"
-					>
-						Tailscale documentation
-					</Link>
-				</p>
-			</div>
-			<RemixLink to="/settings/auth-keys">
-				<span className={cn(
-					'text-lg font-medium',
-					'text-gray-700 dark:text-gray-300',
-				)}>
-					Manage Auth Keys
-					<ArrowRightIcon className="w-5 h-5 ml-2" />
-				</span>
-			</RemixLink>
-		</div>
-	)
-}
@@ -1,69 +0,0 @@
-import { useFetcher } from '@remix-run/react'
-import type { PreAuthKey } from '~/types'
-import { cn } from '~/utils/cn'
-
-import Dialog from '~/components/Dialog'
-import Spinner from '~/components/Spinner'
-
-interface Props {
-	authKey: PreAuthKey
-}
-
-export default function ExpireKey({ authKey }: Props) {
-	const fetcher = useFetcher()
-
-	return (
-		<Dialog>
-			<Dialog.Button className="my-4">
-				Expire Key
-			</Dialog.Button>
-			<Dialog.Panel>
-				{close => (
-					<>
-						<Dialog.Title>
-							Expire auth key?
-						</Dialog.Title>
-						<fetcher.Form method="DELETE" onSubmit={e => {
-							fetcher.submit(e.currentTarget)
-							close()
-						}}>
-							<input type="hidden" name="user" value={authKey.user} />
-							<input type="hidden" name="key" value={authKey.key} />
-							<Dialog.Text>
-								Expiring this authentication key will immediately
-								prevent it from being used to authenticate new devices.
-								{' '}
-								This action cannot be undone.
-							</Dialog.Text>
-							<div className="mt-6 flex justify-end gap-2 mt-6">
-								<Dialog.Action
-									variant="cancel"
-									onPress={close}
-								>
-									Cancel
-								</Dialog.Action>
-								<Dialog.Action
-									variant="confirm"
-									className={cn(
-										'bg-red-500 hover:border-red-700',
-										'dark:bg-red-600 dark:hover:border-red-700',
-										'pressed:bg-red-600 hover:bg-red-600',
-										'text-white dark:text-white',
-									)}
-									onPress={close}
-								>
-									{fetcher.state === 'idle'
-										? undefined
-										: (
-											<Spinner className="w-3 h-3" />
-											)}
-									Expire
-								</Dialog.Action>
-							</div>
-						</fetcher.Form>
-					</>
-				)}
-			</Dialog.Panel>
-		</Dialog>
-	)
-}
@@ -1,151 +0,0 @@
-import { RepoForkedIcon } from '@primer/octicons-react'
-import { useFetcher } from '@remix-run/react'
-import { useState } from 'react'
-
-import Dialog from '~/components/Dialog'
-import TextField from '~/components/TextField'
-import NumberField from '~/components/NumberField'
-import Tooltip from '~/components/Tooltip'
-import Select from '~/components/Select'
-import Switch from '~/components/Switch'
-import Link from '~/components/Link'
-import Spinner from '~/components/Spinner'
-
-import { cn } from '~/utils/cn'
-import { User } from '~/types'
-
-interface Props {
-	users: User[]
-}
-
-// TODO: Tags
-export default function AddPreAuthKey(data: Props) {
-	const fetcher = useFetcher()
-	const [user, setUser] = useState('')
-	const [reusable, setReusable] = useState(false)
-	const [ephemeral, setEphemeral] = useState(false)
-	const [aclTags, setAclTags] = useState([])
-	const [expiry, setExpiry] = useState(90)
-
-	return (
-		<Dialog>
-			<Dialog.Button className="my-4">
-				Create pre-auth key
-			</Dialog.Button>
-			<Dialog.Panel>
-				{close => (
-					<>
-						<Dialog.Title>
-							Generate auth key
-						</Dialog.Title>
-						<fetcher.Form method="POST" onSubmit={e => {
-							fetcher.submit(e.currentTarget)
-							close()
-						}}>
-							<Dialog.Text className="font-semibold">
-								User
-							</Dialog.Text>
-							<Dialog.Text className="text-sm">
-								Attach this key to a user
-							</Dialog.Text>
-							<Select
-								label="Owner"
-								name="user"
-								placeholder="Select a user"
-								state={[user, setUser]}
-							>
-								{data.users.map(user => (
-									<Select.Item key={user.id} id={user.name}>
-										{user.name}
-									</Select.Item>
-								))}
-							</Select>
-							<Dialog.Text className="font-semibold mt-4">
-								Key Expiration
-							</Dialog.Text>
-							<Dialog.Text className="text-sm">
-								Set this key to expire after a certain number of days.
-							</Dialog.Text>
-							<NumberField
-								label="Expiry"
-								name="expiry"
-								minValue={1}
-								maxValue={365_000} // 1000 years
-								state={[expiry, setExpiry]}
-								formatOptions={{
-									style: 'unit',
-									unit: 'day',
-									unitDisplay: 'short',
-								}}
-							/>
-							<div className="flex justify-between items-center mt-6">
-								<div>
-									<Dialog.Text className="font-semibold">
-										Reusable
-									</Dialog.Text>
-									<Dialog.Text className="text-sm">
-										Use this key to authenticate more than one device.
-									</Dialog.Text>
-								</div>
-								<Switch
-									label="Reusable"
-									name="reusable"
-									defaultSelected={reusable}
-									onChange={() => { setReusable(!reusable) }}
-								/>
-							</div>
-							<input type="hidden" name="reusable" value={reusable.toString()} />
-							<div className="flex justify-between items-center mt-6">
-								<div>
-									<Dialog.Text className="font-semibold">
-										Ephemeral
-									</Dialog.Text>
-									<Dialog.Text className="text-sm">
-										Devices authenticated with this key will
-										be automatically removed once they go offline.
-										{' '}
-										<Link
-											to="https://tailscale.com/kb/1111/ephemeral-nodes"
-											name="Tailscale Ephemeral Nodes Documentation"
-										>
-											Learn more
-										</Link>
-									</Dialog.Text>
-								</div>
-								<Switch
-									label="Ephemeral"
-									name="ephemeral"
-									defaultSelected={ephemeral}
-									onChange={() => {
-										setEphemeral(!ephemeral)
-									}}
-								/>
-							</div>
-							<input type="hidden" name="ephemeral" value={ephemeral.toString()} />
-							<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}
-									isDisabled={!user || !expiry}
-								>
-									{fetcher.state === 'idle'
-										? undefined
-										: (
-											<Spinner className="w-3 h-3" />
-											)}
-									Generate
-								</Dialog.Action>
-							</div>
-						</fetcher.Form>
-					</>
-				)}
-			</Dialog.Panel>
-		</Dialog>
-	)
-}
@@ -1,224 +0,0 @@
-import { LoaderFunctionArgs, ActionFunctionArgs } from '@remix-run/node'
-import { useLoaderData } from '@remix-run/react'
-import { useLiveData } from '~/utils/useLiveData'
-import { getSession } from '~/utils/sessions'
-import { Link as RemixLink } from '@remix-run/react'
-import { PreAuthKey, User } from '~/types'
-import { pull, post } from '~/utils/headscale'
-import { loadContext } from '~/utils/config/headplane'
-import { useState } from 'react'
-import { send } from '~/utils/res'
-
-import Link from '~/components/Link'
-import TableList from '~/components/TableList'
-import Select from '~/components/Select'
-import Switch from '~/components/Switch'
-
-import AddPreAuthKey from './dialogs/new'
-import AuthKeyRow from './key'
-
-export async function action({ request }: ActionFunctionArgs) {
-	const session = await getSession(request.headers.get('Cookie'))
-	if (!session.has('hsApiKey')) {
-		return send({ message: 'Unauthorized' }, {
-			status: 401,
-		})
-	}
-
-	const data = await request.formData()
-
-	// Expiring a pre-auth key
-	if (request.method === 'DELETE') {
-		const key = data.get('key')
-		const user = data.get('user')
-
-		if (!key || !user) {
-			return send({ message: 'Missing parameters' }, {
-				status: 400,
-			})
-		}
-
-		await post<{ preAuthKey: PreAuthKey }>(
-			'v1/preauthkey/expire',
-			session.get('hsApiKey')!, 
-			{
-				user: user,
-				key: key,
-			}
-		)
-
-		return { message: 'Pre-auth key expired' }
-	}
-
-	// Creating a new pre-auth key
-	if (request.method === 'POST') {
-		const user = data.get('user')
-		const expiry = data.get('expiry')
-		const reusable = data.get('reusable')
-		const ephemeral = data.get('ephemeral')
-
-		if (!user || !expiry || !reusable || !ephemeral) {
-			return send({ message: 'Missing parameters' }, {
-				status: 400,
-			})
-		}
-
-		// Extract the first "word" from expiry which is the day number
-		// Calculate the date X days from now using the day number
-		const day = Number(expiry.toString().split(' ')[0])
-		const date = new Date()
-		date.setDate(date.getDate() + day)
-
-		const key = await post<{ preAuthKey: PreAuthKey }>(
-			'v1/preauthkey',
-			session.get('hsApiKey')!, 
-			{
-				user: user,
-				ephemeral: ephemeral === 'on',
-				reusable: reusable === 'on',
-				expiration: date.toISOString(),
-				aclTags: [], // TODO
-			}
-		)
-
-		return { message: 'Pre-auth key created', key }
-	}
-}
-
-export async function loader({ request }: LoaderFunctionArgs) {
-	const context = await loadContext()
-	const session = await getSession(request.headers.get('Cookie'))
-	const users = await pull<{ users: User[] }>('v1/user', session.get('hsApiKey')!)
-
-	const preAuthKeys = await Promise.all(users.users.map(user => {
-		const qp = new URLSearchParams()
-		qp.set('user', user.name)
-
-		return pull<{ preAuthKeys: PreAuthKey[] }>(
-			`v1/preauthkey?${qp.toString()}`,
-			session.get('hsApiKey')!
-		)
-	}))
-
-	return {
-		keys: preAuthKeys.flatMap(keys => keys.preAuthKeys),
-		users: users.users,
-		server: context.headscalePublicUrl ?? context.headscaleUrl,
-	}
-}
-
-export default function Page() {
-	const { keys, users, server } = useLoaderData<typeof loader>()
-	const [user, setUser] = useState('All')
-	const [status, setStatus] = useState('Active')
-	useLiveData({ interval: 3000 })
-
-	const filteredKeys = keys.filter(key => {
-		if (user !== 'All' && key.user !== user) {
-			return false
-		}
-
-		if (status !== 'All') {
-			const now = new Date()
-			const expiry = new Date(key.expiration)
-
-			if (status === 'Active') {
-				return !(expiry < now) && !key.used
-			}
-
-			if (status === 'Used/Expired') {
-				return key.used || expiry < now
-			}
-
-			if (status === 'Reusable') {
-				return key.reusable
-			}
-
-			if (status === 'Ephemeral') {
-				return key.ephemeral
-			}
-		}
-
-		return true
-	})
-
-	return (
-		<div className='flex flex-col w-2/3'>
-			<p className="mb-8 text-md">
-				<RemixLink
-					to="/settings"
-					className="font-medium"
-				>
-					Settings
-				</RemixLink>
-				<span className="mx-2">
-					/
-				</span>
-				{' '}
-				Pre-Auth Keys
-			</p>
-			<h1 className='text-2xl font-medium mb-4'>Pre-Auth Keys</h1>
-			<p className="text-gray-700 dark:text-gray-300 mb-4">
-				Headscale fully supports pre-authentication keys in order to
-				easily add devices to your Tailnet.
-				To learn more about using pre-authentication keys, visit the
-				{' '}
-				<Link
-					to="https://tailscale.com/kb/1085/auth-keys/"
-					name="Tailscale Auth Keys documentation"
-				>
-					Tailscale documentation
-				</Link>
-			</p>
-			<AddPreAuthKey users={users} />
-			<div className="flex justify-between gap-4 mt-4">
-				<div className="w-full">
-					<p className="text-sm text-gray-500 dark:text-gray-300">
-						Filter by user
-					</p>
-					<Select
-						label="Filter by User"
-						placeholder="Select a user"
-						state={[user, setUser]}
-					>
-						<Select.Item id="All">All</Select.Item>
-						{users.map(user => (
-							<Select.Item key={user.id} id={user.name}>
-								{user.name}
-							</Select.Item>
-						))}
-					</Select>
-				</div>
-				<div className="w-full">
-					<p className="text-sm text-gray-500 dark:text-gray-300">
-						Filter by status
-					</p>
-					<Select
-						label="Filter by status"
-						placeholder="Select a status"
-						state={[status, setStatus]}
-					>
-						<Select.Item id="All">All</Select.Item>
-						<Select.Item id="Active">Active</Select.Item>
-						<Select.Item id="Used/Expired">Used/Expired</Select.Item>
-						<Select.Item id="Reusable">Reusable</Select.Item>
-						<Select.Item id="Ephemeral">Ephemeral</Select.Item>
-					</Select>
-				</div>
-			</div>
-			<TableList className="mt-4">
-				{filteredKeys.length === 0 ? (
-					<TableList.Item>
-						<p className="opacity-50 text-sm mx-auto">
-							No pre-auth keys
-						</p>
-					</TableList.Item>
-				) : filteredKeys.map(key => (
-					<TableList.Item key={key.id}>
-						<AuthKeyRow authKey={key} server={server} />
-					</TableList.Item>
-				))}
-			</TableList>
-		</div>
-	)
-}
@@ -1,121 +0,0 @@
-import { LoaderFunctionArgs, redirect } from '@remix-run/node'
-import { Outlet, useLoaderData, useNavigation } from '@remix-run/react'
-import { ProgressBar } from 'react-aria-components'
-
-import { ErrorPopup } from '~/components/Error'
-import Header from '~/components/Header'
-import Link from '~/components/Link'
-import { cn } from '~/utils/cn'
-import { loadContext } from '~/utils/config/headplane'
-import { HeadscaleError, pull } from '~/utils/headscale'
-import { destroySession, getSession } from '~/utils/sessions'
-
-export async function loader({ request }: LoaderFunctionArgs) {
-	const session = await getSession(request.headers.get('Cookie'))
-	if (!session.has('hsApiKey')) {
-		return redirect('/login')
-	}
-
-	try {
-		// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-		await pull('v1/apikey', session.get('hsApiKey')!)
-	} catch (error) {
-		if (error instanceof HeadscaleError) {
-			// Safest to just redirect to login if we can't pull
-			return redirect('/login', {
-				headers: {
-					// eslint-disable-next-line @typescript-eslint/naming-convention
-					'Set-Cookie': await destroySession(session),
-				},
-			})
-		}
-
-		// Otherwise propagate to boundary
-		throw error
-	}
-
-	const context = await loadContext()
-	return {
-		config: context.config,
-		url: context.headscalePublicUrl ?? context.headscaleUrl,
-		debug: context.debug,
-		user: session.get('user'),
-	}
-}
-
-interface FooterProps {
-	url: string
-	debug: boolean
-}
-
-function Footer({ url, debug, integration }: FooterProps) {
-	return (
-		<footer className={cn(
-			'fixed bottom-0 left-0 z-50 w-full h-14',
-			'bg-ui-100 dark:bg-ui-900 text-ui-500',
-			'flex flex-col justify-center gap-1',
-			'border-t border-ui-200 dark:border-ui-800',
-		)}>
-			<p className="container text-xs">
-				Headplane is entirely free to use.
-				{' '}
-				If you find it useful, consider
-				{' '}
-				<Link
-					to="https://github.com/sponsors/tale"
-					name="Aarnav's GitHub Sponsors"
-				>
-					donating
-				</Link>
-				{' '}
-				to support development.
-				{' '}
-			</p>
-			<p className="container text-xs opacity-75">
-				Version: {__VERSION__}
-				{' | '}
-				Connecting to
-				{' '}
-				<strong>{url}</strong>
-				{' '}
-				{debug && '(Debug mode enabled)'}
-			</p>
-		</footer>
-	)
-}
-
-export default function Layout() {
-	const data = useLoaderData<typeof loader>()
-	const nav = useNavigation()
-
-	return (
-		<>
-			<ProgressBar
-				aria-label="Loading..."
-			>
-				<div
-					className={cn(
-						'fixed top-0 left-0 z-50 w-1/2 h-1',
-						'bg-blue-500 dark:bg-blue-400 opacity-0',
-						nav.state === 'loading' && 'animate-loading opacity-100',
-					)}
-				/>
-			</ProgressBar>
-			<Header data={data} />
-			<main className="container mx-auto overscroll-contain mt-4 mb-24">
-				<Outlet />
-			</main>
-			<Footer {...data} />
-		</>
-	)
-}
-
-export function ErrorBoundary() {
-	return (
-		<>
-			<Header />
-			<ErrorPopup type="embedded" />
-			<Footer url="Unknown" debug={false} />
-		</>
-	)
-}
@@ -1,81 +0,0 @@
-import { Form, useSubmit } from '@remix-run/react'
-import { useState } from 'react'
-
-import Code from '~/components/Code'
-import Dialog from '~/components/Dialog'
-import TextField from '~/components/TextField'
-
-interface Props {
-	magic?: string
-}
-
-export default function Add({ magic }: Props) {
-	const [username, setUsername] = useState('')
-	const submit = useSubmit()
-
-	return (
-		<Dialog>
-			<Dialog.Button>
-				Add a new user
-			</Dialog.Button>
-
-			<Dialog.Panel>
-				{close => (
-					<>
-						<Dialog.Title>
-							Add a new user
-						</Dialog.Title>
-						<Dialog.Text className="mb-8">
-							Enter a username to create a new user.
-							{' '}
-							{magic
-								? (
-									<>
-										Since Magic DNS is enabled, machines will be
-										accessible via
-										{' '}
-										<Code>
-											[machine].
-											.
-											{magic}
-										</Code>
-										.
-									</>
-									)
-								: undefined}
-						</Dialog.Text>
-						<Form
-							method="POST"
-							onSubmit={(event) => {
-								submit(event.currentTarget)
-							}}
-						>
-							<input type="hidden" name="_method" value="create" />
-							<TextField
-								label="Username"
-								placeholder="my-new-user"
-								name="username"
-								state={[username, setUsername]}
-								className="my-2"
-							/>
-							<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}
-								>
-									Create
-								</Dialog.Action>
-							</div>
-						</Form>
-					</>
-				)}
-			</Dialog.Panel>
-		</Dialog>
-	)
-}
@@ -1,49 +0,0 @@
-import { HomeIcon, PasskeyFillIcon } from '@primer/octicons-react'
-
-import Card from '~/components/Card'
-import Link from '~/components/Link'
-
-import Add from './add'
-
-interface Props {
-	readonly magic: string | undefined
-}
-
-export default function Auth({ magic }: Props) {
-	return (
-		<Card variant="flat" className="mb-8 w-full max-w-full p-0">
-			<div className="flex flex-col md:flex-row">
-				<div className="w-full p-4 border-b md:border-b-0 border-ui-200 dark:border-ui-700">
-					<HomeIcon className="w-5 h-5 mb-2" />
-					<h2 className="font-medium mb-1">
-						Basic Authentication
-					</h2>
-					<p className="text-sm text-ui-600 dark:text-ui-300">
-						Users are not managed externally.
-						Using OpenID Connect can create a better
-						experience when using Headscale.
-						{' '}
-						<Link
-							to="https://headscale.net/oidc"
-							name="Headscale OIDC Documentation"
-						>
-							Learn more
-						</Link>
-					</p>
-				</div>
-				<div className="w-full p-4 md:border-l border-ui-200 dark:border-ui-700">
-					<PasskeyFillIcon className="w-5 h-5 mb-2" />
-					<h2 className="font-medium mb-1">
-						User Management
-					</h2>
-					<p className="text-sm text-ui-600 dark:text-ui-300">
-						You can add, remove, and rename users here.
-					</p>
-					<div className="flex items-center gap-2 mt-4">
-						<Add magic={magic} />
-					</div>
-				</div>
-			</div>
-		</Card>
-	)
-}
@@ -1,56 +0,0 @@
-import { OrganizationIcon, PasskeyFillIcon } from '@primer/octicons-react'
-
-import Card from '~/components/Card'
-import Link from '~/components/Link'
-import { HeadplaneContext } from '~/utils/config/headplane'
-
-import Add from './add'
-
-interface Props {
-	readonly oidc: NonNullable<HeadplaneContext['oidc']>
-	readonly magic: string | undefined
-}
-
-export default function Oidc({ oidc, magic }: Props) {
-	return (
-		<Card variant="flat" className="mb-8 w-full max-w-full p-0">
-			<div className="flex flex-col md:flex-row">
-				<div className="w-full p-4 border-b md:border-b-0 border-ui-200 dark:border-ui-700">
-					<OrganizationIcon className="w-5 h-5 mb-2" />
-					<h2 className="font-medium mb-1">
-						OpenID Connect
-					</h2>
-					<p className="text-sm text-ui-600 dark:text-ui-300">
-						Users are managed through your
-						{' '}
-						<Link to={oidc.issuer} name="OIDC Provider">
-							OpenID Connect provider
-						</Link>
-						{'. '}
-						Groups and user information do not automatically sync.
-						{' '}
-						<Link
-							to="https://headscale.net/oidc"
-							name="Headscale OIDC Documentation"
-						>
-							Learn more
-						</Link>
-					</p>
-				</div>
-				<div className="w-full p-4 md:border-l border-ui-200 dark:border-ui-700">
-					<PasskeyFillIcon className="w-5 h-5 mb-2" />
-					<h2 className="font-medium mb-1">
-						User Management
-					</h2>
-					<p className="text-sm text-ui-600 dark:text-ui-300">
-						You can still add users manually, however it is recommended
-						that you manage users through your OIDC provider.
-					</p>
-					<div className="flex items-center gap-2 mt-4">
-						<Add magic={magic} />
-					</div>
-				</div>
-			</div>
-		</Card>
-	)
-}
@@ -1,73 +0,0 @@
-import { XIcon } from '@primer/octicons-react'
-import { Form, useSubmit } from '@remix-run/react'
-import { useState } from 'react'
-
-import Button from '~/components/Button'
-import Code from '~/components/Code'
-import Dialog from '~/components/Dialog'
-
-interface Props {
-	username: string
-}
-
-export default function Remove({ username }: Props) {
-	const submit = useSubmit()
-	const dialogState = useState(false)
-
-	return (
-		<>
-			<Button
-				variant="light"
-				control={dialogState}
-				className="rounded-full p-0 w-8 h-8"
-			>
-				<XIcon className="w-4 h-4" />
-			</Button>
-			<Dialog control={dialogState}>
-				<Dialog.Panel control={dialogState}>
-					{close => (
-						<>
-							<Dialog.Title>
-								Delete
-								{' '}
-								{username}
-								?
-							</Dialog.Title>
-							<Dialog.Text className="mb-8">
-								Are you sure you want to delete
-								{' '}
-								{username}
-								?
-								{' '}
-								A deleted user cannot be recovered.
-							</Dialog.Text>
-							<Form
-								method="POST"
-								onSubmit={(event) => {
-									submit(event.currentTarget)
-								}}
-							>
-								<input type="hidden" name="_method" value="delete" />
-								<input type="hidden" name="username" value={username} />
-								<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}
-									>
-										Delete
-									</Dialog.Action>
-								</div>
-							</Form>
-						</>
-					)}
-				</Dialog.Panel>
-			</Dialog>
-		</>
-	)
-}
@@ -1,79 +0,0 @@
-import { PencilIcon } from '@primer/octicons-react'
-import { Form, useSubmit } from '@remix-run/react'
-import { useState } from 'react'
-
-import Button from '~/components/Button'
-import Dialog from '~/components/Dialog'
-import TextField from '~/components/TextField'
-
-interface Props {
-	username: string
-	magic?: string
-}
-
-export default function Rename({ username, magic }: Props) {
-	const submit = useSubmit()
-	const dialogState = useState(false)
-	const [newName, setNewName] = useState(username)
-
-	return (
-		<>
-			<Button
-				variant="light"
-				control={dialogState}
-				className="rounded-full p-0 w-8 h-8"
-			>
-				<PencilIcon className="w-4 h-4" />
-			</Button>
-			<Dialog control={dialogState}>
-				<Dialog.Panel control={dialogState}>
-					{close => (
-						<>
-							<Dialog.Title>
-								Rename
-								{' '}
-								{username}
-								?
-							</Dialog.Title>
-							<Dialog.Text className="mb-8">
-								Enter a new username for
-								{' '}
-								{username}
-							</Dialog.Text>
-							<Form
-								method="POST"
-								onSubmit={(event) => {
-									submit(event.currentTarget)
-								}}
-							>
-								<input type="hidden" name="_method" value="rename" />
-								<input type="hidden" name="old" value={username} />
-								<TextField
-									label="Username"
-									placeholder="my-new-name"
-									name="new"
-									state={[newName, setNewName]}
-									className="my-2"
-								/>
-								<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}
-									>
-										Rename
-									</Dialog.Action>
-								</div>
-							</Form>
-						</>
-					)}
-				</Dialog.Panel>
-			</Dialog>
-		</>
-	)
-}
@@ -1,337 +0,0 @@
-/* eslint-disable @typescript-eslint/no-non-null-assertion */
-import { DataRef, DndContext, useDraggable, useDroppable } from '@dnd-kit/core'
-import { PersonIcon } from '@primer/octicons-react'
-import { ActionFunctionArgs, LoaderFunctionArgs } from '@remix-run/node'
-import { useActionData, useLoaderData, useSubmit } from '@remix-run/react'
-import { useEffect, useState } from 'react'
-import { ClientOnly } from 'remix-utils/client-only'
-
-import Attribute from '~/components/Attribute'
-import Card from '~/components/Card'
-import StatusCircle from '~/components/StatusCircle'
-import { toast } from '~/components/Toaster'
-import { Machine, 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 { getSession } from '~/utils/sessions'
-import { useLiveData } from '~/utils/useLiveData'
-import { send } from '~/utils/res'
-
-import Auth from './auth'
-import Oidc from './oidc'
-import Remove from './remove'
-import Rename from './rename'
-
-export async function loader({ request }: LoaderFunctionArgs) {
-	const session = await getSession(request.headers.get('Cookie'))
-
-	const [machines, apiUsers] = await Promise.all([
-		pull<{ nodes: Machine[] }>('v1/node', session.get('hsApiKey')!),
-		pull<{ users: User[] }>('v1/user', session.get('hsApiKey')!),
-	])
-
-	const users = apiUsers.users.map(user => ({
-		...user,
-		machines: machines.nodes.filter(machine => machine.user.id === user.id),
-	}))
-
-	const context = await loadContext()
-	let magic: string | undefined
-
-	if (context.config.read) {
-		const config = await loadConfig()
-		if (config.dns.magic_dns) {
-			magic = config.dns.base_domain
-		}
-	}
-
-	return {
-		oidc: context.oidc,
-		magic,
-		users,
-	}
-}
-
-export async function action({ request }: ActionFunctionArgs) {
-	const session = await getSession(request.headers.get('Cookie'))
-	if (!session.has('hsApiKey')) {
-		return send({ message: 'Unauthorized' }, 401)
-	}
-
-	const data = await request.formData()
-	if (!data.has('_method')) {
-		return send({ message: 'No method provided' }, 400)
-	}
-
-	const method = String(data.get('_method'))
-
-	switch (method) {
-		case 'create': {
-			if (!data.has('username')) {
-				return send({ message: 'No name provided' }, 400)
-			}
-
-			const username = String(data.get('username'))
-			await post('v1/user', session.get('hsApiKey')!, {
-				name: username,
-			})
-
-			return { message: `User ${username} created` }
-		}
-
-		case 'delete': {
-			if (!data.has('username')) {
-				return send({ message: 'No name provided' }, 400)
-			}
-
-			const username = String(data.get('username'))
-			await del(`v1/user/${username}`, session.get('hsApiKey')!)
-			return { message: `User ${username} deleted` }
-		}
-
-		case 'rename': {
-			if (!data.has('old') || !data.has('new')) {
-				return send({ message: 'No old or new name provided' }, 400)
-			}
-
-			const old = String(data.get('old'))
-			const newName = String(data.get('new'))
-			await post(`v1/user/${old}/rename/${newName}`, session.get('hsApiKey')!)
-			return { message: `User ${old} renamed to ${newName}` }
-		}
-
-		case 'move': {
-			if (!data.has('id') || !data.has('to') || !data.has('name')) {
-				return send({ message: 'No ID or destination provided' }, 400)
-			}
-
-			const id = String(data.get('id'))
-			const to = String(data.get('to'))
-			const name = String(data.get('name'))
-
-			try {
-				await post(`v1/node/${id}/user?user=${to}`, session.get('hsApiKey')!)
-				return { message: `Moved ${name} to ${to}` }
-			} catch {
-				return send({ message: `Failed to move ${name} to ${to}` }, 500)
-			}
-		}
-
-		default: {
-			return send({ message: 'Invalid method' }, 400)
-		}
-	}
-}
-
-export default function Page() {
-	const data = useLoaderData<typeof loader>()
-	const [users, setUsers] = useState(data.users)
-	const actionData = useActionData<typeof action>()
-	useLiveData({ interval: 3000 })
-
-	useEffect(() => {
-		if (!actionData) {
-			return
-		}
-
-		toast(actionData.message)
-		if (actionData.message.startsWith('Failed')) {
-			setUsers(data.users)
-		}
-	// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [actionData])
-
-	useEffect(() => {
-		setUsers(data.users)
-	}, [data.users])
-
-	return (
-		<>
-			<h1 className="text-2xl font-medium mb-1.5">
-				Users
-			</h1>
-			<p className="mb-8 text-md">
-				Manage the users in your network and their permissions.
-				Tip: You can drag machines between users to change ownership.
-			</p>
-			{data.oidc
-				? (
-					<Oidc
-						oidc={data.oidc}
-						magic={data.magic}
-					/>
-					)
-				: (
-					<Auth magic={data.magic} />
-					)}
-			<ClientOnly fallback={
-				<Users users={users} />
-			}
-			>
-				{() => (
-					<InteractiveUsers
-						users={users}
-						setUsers={setUsers}
-						magic={data.magic}
-					/>
-				)}
-			</ClientOnly>
-		</>
-	)
-}
-
-type UserMachine = User & { machines: Machine[] }
-
-interface UserProps {
-	users: UserMachine[]
-	setUsers?: (users: UserMachine[]) => void
-	magic?: string
-}
-
-function Users({ users, magic }: UserProps) {
-	return (
-		<div className="grid grid-cols-1 md:grid-cols-2 gap-4 auto-rows-min">
-			{users.map(user => (
-				<UserCard
-					key={user.id}
-					user={user}
-					magic={magic}
-				/>
-			))}
-		</div>
-	)
-}
-
-function InteractiveUsers({ users, setUsers, magic }: UserProps) {
-	const submit = useSubmit()
-
-	return (
-		<DndContext onDragEnd={(event) => {
-			const { over, active } = event
-			if (!over) {
-				return
-			}
-
-			// Update the UI optimistically
-			const newUsers = new Array<UserMachine>()
-			const reference = active.data as DataRef<Machine>
-			if (!reference.current) {
-				return
-			}
-
-			// Ignore if the user is unchanged
-			if (reference.current.user.name === over.id) {
-				return
-			}
-
-			for (const user of users) {
-				newUsers.push({
-					...user,
-					machines: over.id === user.name
-						? [...user.machines, reference.current]
-						: user.machines.filter(m => m.id !== active.id),
-				})
-			}
-
-			setUsers?.(newUsers)
-			const data = new FormData()
-			data.append('_method', 'move')
-			data.append('id', active.id.toString())
-			data.append('to', over.id.toString())
-			data.append('name', reference.current.givenName)
-
-			submit(data, {
-				method: 'POST',
-			})
-		}}
-		>
-			<div className="grid grid-cols-1 md:grid-cols-2 gap-4 auto-rows-min">
-				{users.map(user => (
-					<UserCard
-						key={user.id}
-						user={user}
-						magic={magic}
-					/>
-				))}
-			</div>
-		</DndContext>
-	)
-}
-
-function MachineChip({ machine }: { readonly machine: Machine }) {
-	const { attributes, listeners, setNodeRef, transform } = useDraggable({
-		id: machine.id,
-		data: machine,
-	})
-
-	return (
-		<div
-			ref={setNodeRef}
-			className={cn(
-				'flex items-center w-full gap-2 py-1',
-				'hover:bg-ui-100 dark:hover:bg-ui-800 rounded-lg',
-			)}
-			style={{
-				transform: transform
-					? `translate3d(${transform.x.toString()}px, ${transform.y.toString()}px, 0)`
-					: undefined,
-			}}
-			{...listeners}
-			{...attributes}
-		>
-			<StatusCircle isOnline={machine.online} className="w-4 h-4 px-1 w-fit" />
-			<Attribute
-				name={machine.givenName}
-				link={`machines/${machine.id}`}
-				value={machine.ipAddresses[0]}
-			/>
-		</div>
-	)
-}
-
-interface CardProps {
-	user: UserMachine
-	magic?: string
-}
-
-function UserCard({ user, magic }: CardProps) {
-	const { isOver, setNodeRef } = useDroppable({
-		id: user.name,
-	})
-
-	return (
-		<div ref={setNodeRef}>
-			<Card
-				variant="flat"
-				className={cn(
-					'max-w-full w-full overflow-visible h-full',
-					isOver ? 'bg-ui-100 dark:bg-ui-800' : '',
-				)}
-			>
-				<div className="flex items-center justify-between">
-					<div className="flex items-center gap-4">
-						<PersonIcon className="w-6 h-6" />
-						<span className="text-lg font-mono">
-							{user.name}
-						</span>
-					</div>
-					<div className="flex items-center gap-2">
-						<Rename username={user.name} magic={magic} />
-						{user.machines.length === 0
-							? (
-								<Remove username={user.name} />
-								)
-							: undefined}
-					</div>
-				</div>
-				<div className="mt-4">
-					{user.machines.map(machine => (
-						<MachineChip key={machine.id} machine={machine} />
-					))}
-				</div>
-			</Card>
-		</div>
-	)
-}
@@ -1,5 +0,0 @@
-import { redirect } from '@remix-run/node'
-
-export function loader() {
-	return redirect('/machines')
-}
@@ -0,0 +1,109 @@
+import * as shopify from '@shopify/lang-jsonc';
+import { xcodeDark, xcodeLight } from '@uiw/codemirror-theme-xcode';
+import CodeMirror from '@uiw/react-codemirror';
+import { BookCopy, CircleX } from 'lucide-react';
+import { useEffect, useState } from 'react';
+import Merge from 'react-codemirror-merge';
+import { ErrorBoundary } from 'react-error-boundary';
+import { ClientOnly } from 'remix-utils/client-only';
+import Fallback from './fallback';
+
+interface EditorProps {
+	isDisabled?: boolean;
+	value: string;
+	onChange: (value: string) => void;
+}
+
+export function Editor(props: EditorProps) {
+	const [light, setLight] = useState(false);
+	useEffect(() => {
+		const theme = window.matchMedia('(prefers-color-scheme: light)');
+		setLight(theme.matches);
+		theme.addEventListener('change', (theme) => {
+			setLight(theme.matches);
+		});
+	});
+
+	return (
+		<div className="overflow-y-scroll h-editor text-sm">
+			<ErrorBoundary
+				fallback={
+					<div className="flex flex-col items-center gap-2.5 py-8">
+						<CircleX />
+						<p className="text-lg font-semibold">Failed to load the editor.</p>
+					</div>
+				}
+			>
+				<ClientOnly fallback={<Fallback acl={props.value} />}>
+					{() => (
+						<CodeMirror
+							value={props.value}
+							height="100%"
+							extensions={[shopify.jsonc()]}
+							style={{ height: '100%' }}
+							theme={light ? xcodeLight : xcodeDark}
+							onChange={(value) => props.onChange(value)}
+						/>
+					)}
+				</ClientOnly>
+			</ErrorBoundary>
+		</div>
+	);
+}
+
+interface DifferProps {
+	left: string;
+	right: string;
+}
+
+export function Differ(props: DifferProps) {
+	const [light, setLight] = useState(false);
+	useEffect(() => {
+		const theme = window.matchMedia('(prefers-color-scheme: light)');
+		setLight(theme.matches);
+		theme.addEventListener('change', (theme) => {
+			setLight(theme.matches);
+		});
+	});
+
+	return (
+		<div className="text-sm">
+			{props.left === props.right ? (
+				<div className="flex flex-col items-center gap-2.5 py-8">
+					<BookCopy />
+					<p className="text-lg font-semibold">No changes</p>
+				</div>
+			) : (
+				<div className="h-editor overflow-y-scroll">
+					<ErrorBoundary
+						fallback={
+							<div className="flex flex-col items-center gap-2.5 py-8">
+								<CircleX />
+								<p className="text-lg font-semibold">
+									Failed to load the editor.
+								</p>
+							</div>
+						}
+					>
+						<ClientOnly fallback={<Fallback acl={props.right} />}>
+							{() => (
+								<Merge orientation="a-b" theme={light ? xcodeLight : xcodeDark}>
+									<Merge.Original
+										readOnly
+										value={props.left}
+										extensions={[shopify.jsonc()]}
+									/>
+									<Merge.Modified
+										readOnly
+										value={props.right}
+										extensions={[shopify.jsonc()]}
+									/>
+								</Merge>
+							)}
+						</ClientOnly>
+					</ErrorBoundary>
+				</div>
+			)}
+		</div>
+	);
+}
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Aarnav Tale	29424366a8	chore: v0.5.5	2025-03-18 00:46:54 -04:00
Aarnav Tale	c47346df52	fix: do not require authkey	2025-03-18 00:46:35 -04:00
Aarnav Tale	92dedf51aa	fix: ignore ws_agents if there are no agents connected	2025-03-18 00:43:52 -04:00
Aarnav Tale	8f7a85f47d	chore: v0.5.4	2025-03-18 00:34:49 -04:00
Aarnav Tale	ed1cf188dc	style: format github actions	2025-03-18 00:33:14 -04:00
Igor Ramazanov	03a7e51384	feat: add a `nix` flake (#132 ) * feat: wip `nix` Add initial code to be used when working with `nix` and `NixOS`. * a Nix flake * building a package * a NixOS module * feat: build `hp_agent` with `nix` * feat: add `hp_agent` as a flake output * feat: nix: start `headplane` after `headscale` * feat: do not rely on `git` for versioning It causes lots of pain when building with `nix` for a local `flake.nix`. Not sure if it's a good general solution: * now it requires a manual step of updating `./version` on each release. * we're losing commit hash abbreviation, like `0.5.3-5-gbe5a291` I guess, this can be fixed by installing git-pre-commit-hook, but even then it'd be wrong, because the output of `git describe --tags --always` won't be the same before and after commit. * feat: include `hp_agent` to the NixOS module * fix: version error message * fix: use relative path imports in `nix` * fix: NixOS module: generate `/etc/headplane/config.yaml` from `services.headplane.settings` * fix: NixOS module: allow passing `bool` in `services.headplane.settings.` fix: NixOS module: fix `/etc/headplane/config.yaml` generation * docs: add Nix/NixOS docs * feat: nix: read version from `package.json` * fix: nix: fix `agent` env vars configuration * feat: nix: add `services.headplane.agent.debug` option * fix: delete unnecessary `version` file * fix: nix: remove unnecessary `sed` substitutions A left over from previous versions. See: https://github.com/tale/headplane/issues/95#issue-2807487849 * feat: nix: do not hardcode `headplane-agent` configuration environment variables To make the module more flexible and to reduce the dependency on the config API. * docs: improve `Nix` documentation * Reflect recent changes. * Link `Nix` in README * feat: nix: setup Nix CI * feat: nix: CI without depending on flakehub.com * chore: begin bundling all deps into the server * fix: loosen headscale config validation * fix: navigate back to machines page on node deletion * fix: slice off trailing slash if present on headscale url * feat: switch to a central singleton handler This also adds support for Headscale TLS installations * fix: shamefully-hoist dependencies * fix: handle localized number fields * fix: revert dependency bundling for now * chore: cleanup and remove from readme for now --------- Co-authored-by: Aarnav Tale <aarnavtale@icloud.com>	2025-03-18 00:31:37 -04:00
Aarnav Tale	483f86c457	fix: revert dependency bundling for now	2025-03-18 00:24:25 -04:00
Aarnav Tale	a8a4d2a6f8	fix: handle localized number fields	2025-03-17 22:45:31 -04:00
Aarnav Tale	eef5bd0648	fix: shamefully-hoist dependencies	2025-03-17 22:25:41 -04:00
Aarnav Tale	6108de52e7	feat: switch to a central singleton handler This also adds support for Headscale TLS installations	2025-03-17 22:21:16 -04:00
Aarnav Tale	43e06987ad	fix: slice off trailing slash if present on headscale url	2025-03-17 16:47:27 -04:00
Aarnav Tale	7741ab88bf	fix: navigate back to machines page on node deletion	2025-03-17 10:46:31 -04:00
Aarnav Tale	3bdbfdc033	fix: loosen headscale config validation	2025-03-17 10:44:13 -04:00
Aarnav Tale	e701e16112	chore: begin bundling all deps into the server	2025-03-17 10:39:38 -04:00
Aarnav Tale	79d83537d5	chore: track semver in package.json	2025-03-11 22:44:23 -04:00
Aarnav Tale	251c16ca48	fix: handle ws upgrade smoothly	2025-03-11 22:39:49 -04:00
Aarnav Tale	134b38ceda	chore: update agent var scheme	2025-03-11 22:39:05 -04:00
Aarnav Tale	b8fb1fa40f	chore: switch to x-headplane-tailnet-id	2025-03-11 22:35:52 -04:00
Aarnav Tale	951a96fad6	fix: set id ref to none to fetch agent data on first change	2025-03-11 22:35:02 -04:00
Aarnav Tale	5b9dc7cfc6	feat: ingest data from new agent system	2025-03-11 22:34:30 -04:00
Aarnav Tale	e36352b7f3	fix: define globals for context	2025-03-11 21:59:26 -04:00
Aarnav Tale	296e4d489c	fix: set a default for global dns nameservers	2025-03-11 21:57:40 -04:00
Aarnav Tale	c3ddac42a0	fix: memoize agent query params to prevent infinite refetching	2025-03-11 18:16:47 -04:00
Aarnav Tale	01f432cedc	feat: support oidc client_secret_path with env interpolation	2025-03-11 18:15:56 -04:00
Aarnav Tale	9c8a2c0120	feat: support oidc picture if available	2025-03-11 15:35:11 -04:00
Aarnav Tale	5f6460f42f	fix: use the userinfo endpoint for oidc	2025-03-11 15:29:45 -04:00
Aarnav Tale	d9314887fb	feat: keep track of agent ids	2025-03-11 15:29:45 -04:00
Aarnav Tale	5dd4c41291	feat: use a new ws implementation thats encapsulated	2025-03-11 15:29:45 -04:00
bitbronze	45537620a6	fix: stop checking for mkey prefix on registration (#131 ) String "mkey:" was being appended to the node registration http request causing it to fail. Removed mkey presence check and changed default hint. Form validation is based on length instead.	2025-03-11 15:24:31 -04:00
Gage Orsburn	21af5c4a4d	fix: handle missing split dns config (#129 ) Closes #127	2025-03-11 15:12:49 -04:00
Steve Wills	983356611e	docs: fix mistake in env docs (#119 )	2025-03-03 14:32:05 -05:00
Aarnav Tale	41ca4c40ad	chore: v0.5.3	2025-03-01 10:37:18 -05:00
Aarnav Tale	f7c9a14e92	chore: temporarily halt full form validation	2025-03-01 10:36:58 -05:00
Aarnav Tale	6e514a9064	fix: handle oidc scope types correctly	2025-03-01 10:36:58 -05:00
Aarnav Tale	631ea15895	docs: warn on breaking change	2025-03-01 10:36:58 -05:00
nerdlich	762bc6a793	fix: cosmetic docs/config fixes (#112 ) * fix config path * fix typo	2025-03-01 10:30:15 -05:00
Aarnav Tale	6c83e96341	chore: v0.5.2	2025-02-28 13:07:14 -05:00
Aarnav Tale	03e6a26b3a	fix: don't reload the prod bundle on refresh	2025-02-28 13:06:38 -05:00
Aarnav Tale	5b716ab5ce	chore: update docs to reflect 0.5.1	2025-02-28 12:22:20 -05:00
Aarnav Tale	a7e4f3e4d2	chore: v0.5.1	2025-02-28 12:21:00 -05:00
Aarnav Tale	40ddb69bc9	fix: resolve latest tags being set	2025-02-28 12:19:14 -05:00
Aarnav Tale	6aa6e77611	chore: fix globalThis typings	2025-02-28 12:17:58 -05:00
Aarnav Tale	c5c2f8a93b	fix: use context for k8s config	2025-02-28 11:29:31 -05:00
Aarnav Tale	acd042b4de	fix: define globals correctly	2025-02-28 11:29:11 -05:00
Aarnav Tale	a563d4c0b3	chore: v0.5.0	2025-02-27 21:52:42 -05:00
Aarnav Tale	7117060863	chore: stop publishing latest tag	2025-02-27 21:52:22 -05:00
Aarnav Tale	30a1153fa5	docs: cleanup integrated docker formatting	2025-02-27 15:33:06 -05:00
Aarnav Tale	870680b6c5	docs: redo docs	2025-02-27 15:31:16 -05:00
Aarnav Tale	25e6410c65	feat: reimplement integrations	2025-02-27 13:42:36 -05:00
Aarnav Tale	f982217dd0	fix: use globals to avoid loader race conditions	2025-02-20 10:45:52 -05:00
Aarnav Tale	f5436f5ee3	feat: respect context in server	2025-02-19 18:09:42 -05:00
Leo Wilkin	06049169a2	chore(docs): Fix broken link to Linux setup on Headscale docs! (#107 ) * Update Headscale install link * Update Native.md	2025-02-19 13:06:08 -05:00
Aarnav Tale	774fdb7be2	fix: use new headscale user api routes	2025-02-19 13:01:20 -05:00
Aarnav Tale	e6580eed2c	fix: no top level await	2025-02-19 13:00:21 -05:00
Aarnav Tale	56b660b30c	chore: switch to 0.25.0 in dev	2025-02-19 10:37:10 -05:00
Aarnav Tale	85c31ca5bf	feat: use new config env	2025-02-14 00:04:01 -05:00
Aarnav Tale	44d08169a9	fix: use ring instead of outline on components	2025-02-14 00:03:46 -05:00
Aarnav Tale	76d263b7e6	feat: switch to config file system	2025-02-13 12:35:12 -05:00
Aarnav Tale	5be3cb345e	feat: switch to normal form actions for dns	2025-02-13 12:29:16 -05:00
Aarnav Tale	2a1c795d46	feat: update to node 22, pnpm 10	2025-02-04 17:25:39 -05:00
Aarnav Tale	316e5b501f	fix: pin to pnpm 9	2025-02-04 17:21:57 -05:00
Aarnav Tale	287ac2dff0	feat: unify all colors	2025-02-04 17:21:03 -05:00
Aarnav Tale	d1f6c450c0	feat: remove react-aria-components	2025-02-04 11:42:57 -05:00
Aarnav Tale	0a14533756	fix: copyable code cannot be a button	2025-02-04 11:39:17 -05:00
Aarnav Tale	347c6698ee	chore: fix aria label warnings	2025-02-04 11:27:29 -05:00
Aarnav Tale	771b87ae41	chore: only invoke useLiveData in root	2025-02-02 00:54:42 -05:00
Aarnav Tale	31ac25d510	feat: redesign code and attribute	2025-02-01 18:11:33 -05:00
Aarnav Tale	68babd7fe9	feat: redesign tooltips	2025-02-01 15:28:04 -05:00
Aarnav Tale	c9d8052e39	chore: remove cn non-default exports	2025-01-28 17:46:16 -05:00
Aarnav Tale	843cfc4d4f	chore: fix build issues	2025-01-28 16:18:51 -05:00
Aarnav Tale	6922548317	chore: switch to headscale 24 in dev	2025-01-28 16:07:44 -05:00
Aarnav Tale	07cee17501	style: temporarily disable some naggy lints	2025-01-28 16:07:15 -05:00
Aarnav Tale	2c8880c84d	feat: switch to new toast provider	2025-01-28 16:06:41 -05:00
Aarnav Tale	a19eb6bcda	feat: add new menu	2025-01-28 16:04:42 -05:00
Aarnav Tale	28e40eecbf	fix: switch to new aria components	2025-01-28 16:02:47 -05:00
Aarnav Tale	741f9aa6b5	feat: switch to new dialog across all code	2025-01-26 15:04:13 -05:00
Aarnav Tale	0f75636342	feat: add react-scan in dev	2025-01-25 12:51:32 -05:00
Aarnav Tale	665509e710	chore: extract tags to shared chip component	2025-01-23 11:28:42 -05:00
Aarnav Tale	ac937f9014	fix: dedupe machine tags	2025-01-23 11:16:56 -05:00
Aarnav Tale	8d3f31e7f9	chore: add lefthook for lint staged	2025-01-20 08:26:00 +00:00
Aarnav Tale	2d47f1b952	chore: switch tailwind fonts	2025-01-20 08:15:14 +00:00
Aarnav Tale	c24cd34925	feat: switch to new dialog gutter	2025-01-20 08:14:42 +00:00
Aarnav Tale	af248df648	feat: redesign buttons and share them in dialogs	2025-01-19 17:31:46 +00:00
Aarnav Tale	b9a708b2e9	chore: update deps and add react-aria	2025-01-19 15:24:14 +00:00
Aarnav Tale	ec36876b9f	feat: begin redesign and component unification	2025-01-19 15:24:03 +00:00
Aarnav Tale	ed0cdbdf4d	chore: add lucide-react icons	2025-01-18 18:42:57 +00:00
Aarnav Tale	fd506ba474	feat: redesign header and footer	2025-01-18 18:42:49 +00:00
Aarnav Tale	9734f0c704	chore: remove old username in dns option	2025-01-18 13:22:43 +00:00
Aarnav Tale	156d7c9ee7	chore: v0.4.1	2025-01-18 08:18:28 +00:00
Aarnav Tale	bd11453593	fix: store oidc redirect_uri in session for parity	2025-01-18 08:18:19 +00:00
Aarnav Tale	0f92f09796	chore: v0.4.0	2025-01-18 07:52:04 +00:00
kevinf100	9bb20024fa	fix: Reusable Pre-Auth Keys no longer show expired when used (#88 )	2025-01-18 07:48:50 +00:00
Aarnav Tale	698122068d	fix: center user icon in profile	2025-01-18 07:48:05 +00:00
Aarnav Tale	e6a66d5804	fix: don't propagate errors on user page to root	2025-01-18 07:41:08 +00:00
Aarnav Tale	d524f927a4	fix: don't throw when session manager isn't available	2025-01-18 07:39:12 +00:00
Aarnav Tale	539c76dfb3	chore: switch to shared healtcheck func	2025-01-18 07:38:55 +00:00
Aarnav Tale	51fa7c14d0	fix: handle prod config for server correctly	2025-01-18 07:37:51 +00:00
Aarnav Tale	b92c4ce2e8	chore: remove broken vite plugin import	2025-01-18 07:37:26 +00:00
Aarnav Tale	325e9ba43d	chore: push disabled local-agent code	2025-01-18 07:37:03 +00:00
Aarnav Tale	de9a938da2	chore: use healthcheck method in healthz	2025-01-17 11:46:36 +00:00
Aarnav Tale	1b45b0917f	fix: handle headscale unavailability gracefully	2025-01-17 11:45:36 +00:00
Aarnav Tale	e01fd8d50c	fix: handle undefined websocket in context	2025-01-17 08:34:19 +00:00
Aarnav Tale	c9603ba38a	chore: switch to vite for server dev	2025-01-17 08:33:22 +00:00
Aarnav Tale	377641265b	fix: require auth for agent ws	2025-01-15 15:14:37 +05:30
Aarnav Tale	5bc313e5fe	feat: containerize agent	2025-01-15 10:17:30 +05:30
Aarnav Tale	af919b2d34	fix: support the agent querying itself	2025-01-10 14:49:13 +05:30
Aarnav Tale	f464c42802	fix: format hostinfo in overview correctly	2025-01-10 14:41:05 +05:30
Aarnav Tale	e667e112cb	chore: add @types/ws	2025-01-10 14:24:23 +05:30
Aarnav Tale	39546849ae	fix: mix cached and uncached data on the ws-agent	2025-01-10 14:24:15 +05:30
Aarnav Tale	eb922c9318	fix: implement write-lock for agent cache	2025-01-10 14:06:22 +05:30
Aarnav Tale	5569ba4660	feat: rework oidc to be more resilient This includes setting a custom redirect URI, handling errors, and using a better library. As an API decision I've also disabled per session API keys as it clutters up too much.	2025-01-10 13:55:24 +05:30
Aarnav Tale	dfd03e77bb	fix: use headscale health route for healthz	2025-01-10 10:55:35 +05:30
Aarnav Tale	e33504016b	feat: integrate hostinfo into ui	2025-01-08 14:34:53 +05:30
Aarnav Tale	7d4da73141	fix: relax config requirement for paths by using nullish	2025-01-06 08:49:26 +05:30
Aarnav Tale	1316439786	fix: read aggregate and error cause bubbles	2025-01-06 08:47:24 +05:30
Aarnav Tale	888c1a5fb6	fix: resolve css issues with button icons	2025-01-06 08:39:15 +05:30
Aarnav Tale	328302cd81	fix: show toasts above the footer	2025-01-06 08:35:25 +05:30
Aarnav Tale	b060700dfe	fix: blur footer URL for screenshots	2025-01-06 08:31:49 +05:30
Aarnav Tale	69783f0d05	chore: re-stage entry files	2025-01-06 08:19:41 +05:30
Aarnav Tale	55c832c536	feat: do partial client method validation	2025-01-06 08:19:41 +05:30
Aarnav Tale	fc5028994a	chore: remove old import for fs-routes	2025-01-06 08:19:41 +05:30
Aarnav Tale	6745ee8529	fix: resolve type errors and lint components/routes	2025-01-06 08:19:41 +05:30
Aarnav Tale	414b95c293	fix: separate vite builds for server and framework	2025-01-06 08:19:41 +05:30
Aarnav Tale	7217659720	fix: prevent cookie manager from racing env init this fixes a bug where using LOAD_ENV_FILE did not work with COOKIE_SECRET	2025-01-06 08:19:40 +05:30
Aarnav Tale	a4bb3cce5f	feat: fix build scripts and server	2025-01-06 08:19:40 +05:30
Aarnav Tale	f3c9d8b54c	style: run biome lint	2025-01-06 08:19:40 +05:30
Aarnav Tale	aa9872a45b	chore: switch to react-router v7	2025-01-06 08:19:40 +05:30
Artur Motyka	39504e2487	chore: update outdated docs links (#74 )	2025-01-03 10:31:12 +05:30
Aarnav Tale	719d7a5e76	feat: create initial agent for localapi	2024-12-30 13:48:49 +05:30
Aarnav Tale	6156d78907	feat: add ws server for agent	2024-12-30 13:48:18 +05:30
Aarnav Tale	1c2c374ada	feat: switch to server in dev & prod	2024-12-23 10:27:05 -05:00
Aarnav Tale	6cf343d623	feat: refactor all dashboard routes	2024-12-08 13:52:02 -05:00
Aarnav Tale	50e43bc0c3	feat: refactor/reorganize auth routes	2024-12-08 13:27:51 -05:00
Aarnav Tale	9d64a5beac	chore: switch to react-router routes.ts config	2024-12-08 13:11:26 -05:00
Aarnav Tale	240d8d6197	chore: v0.3.9	2024-12-06 19:30:12 -05:00
Aarnav Tale	b80bb0cc09	fix: await testOidc	2024-12-06 19:29:44 -05:00