Revert "Implement path-based secret loading"

This reverts commit 8ea8c7195f.

.dockerignore

@@ -1,11 +1,7 @@
-/.cache
-/.github
-/.react-router
-/node_modules
-/build
-/docs
-/nix
-
+node_modules
 .dockerignore
-.env
 Dockerfile
+
+/.cache
+/build
+.env

.envrc

@@ -0,0 +1 @@
+use_flake

.github/CODEOWNERS

@@ -1,3 +0,0 @@
-*   @tale
-
-/nix    @tale @StealthBadger747

.github/workflows/build.yaml

@@ -28,15 +28,20 @@ jobs:
       - name: Check out the repo
         uses: actions/checkout@v4
 
-      - name: Setup Mise
-        uses: jdx/mise-action@v2
+      - name: Install node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
 
-      - name: Set caching paths
+      - uses: pnpm/action-setup@v4
+        name: Install pnpm
+        with:
+          run_install: false
+
+      - name: Get pnpm store directory
         shell: bash
         run: |
           echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
-          echo "GO_CACHE=$(go env GOCACHE)" >> $GITHUB_ENV
-          echo "GO_MODCACHE=$(go env GOMODCACHE)" >> $GITHUB_ENV
 
       - uses: actions/cache@v4
         name: Setup pnpm cache
@@ -46,16 +51,11 @@ jobs:
           restore-keys: |
             ${{ runner.os }}-pnpm-store-
 
-      - name: Setup Go cache
-        uses: actions/cache@v4
-        with:
-          path: |
-            ${{ env.GO_CACHE }}
-            ${{ env.GO_MODCACHE }}
-          key: ${{ runner.os }}-go-${{ hashFiles('**/go.mod', '**/go.sum') }}
+      - name: Install dependencies
+        run: pnpm install
 
-      - name: CI pipeline
-        run: ./build.sh --skip-pnpm-prune
+      - name: Build
+        run: pnpm build
 
   nix:
     name: nix

.github/workflows/next.yaml

@@ -12,8 +12,6 @@ permissions:
   actions: write # Allow canceling in-progress runs
   contents: read # Read access to the repository
   packages: write # Write access to the container registry
-  id-token: write # For the attest action to push
-  attestations: write # For the attest action to push
 
 jobs:
   publish:
@@ -21,14 +19,6 @@ jobs:
     if: ${{ github.event_name == 'workflow_dispatch' || (github.event.pull_request && github.event.pull_request.head.repo.full_name == github.repository && github.event.pull_request.head.ref == 'next') }}
     name: Docker Pre-release
     runs-on: ubuntu-latest
-    strategy:
-      matrix:
-        include:
-          - target: final
-            tag: 'next'
-          - target: debug-shell
-            tag: 'next-shell'
-
     steps:
       - name: Check out the repo
         uses: actions/checkout@v4
@@ -39,7 +29,7 @@ jobs:
         with:
           images: ghcr.io/${{ github.repository }}
           tags: |
-            type=raw,value=${{ matrix.tag }}
+            type=raw,value=next
 
       - name: Set up QEMU
         uses: docker/setup-qemu-action@v3
@@ -54,28 +44,12 @@ jobs:
           username: ${{ github.actor }}
           password: ${{ secrets.GITHUB_TOKEN }}
 
-      - name: Build and publish ghcr.io/${{ github.repository }}:${{ matrix.tag }}
-        uses: docker/build-push-action@v6
-        id: push
+      - name: Build and push Docker image
+        uses: docker/build-push-action@v5
         with:
           context: .
           file: ./Dockerfile
-          target: ${{ matrix.target }}
           push: true
           tags: ${{ steps.meta.outputs.tags }}
           labels: ${{ steps.meta.outputs.labels }}
           platforms: linux/amd64, linux/arm64
-          cache-from: type=gha
-          cache-to: type=gha,mode=max
-          build-args: |
-            IMAGE_TAG=ghcr.io/${{ github.repository }}:${{ matrix.tag }}
-          secrets: |
-            gh_token=${{ secrets.GITHUB_TOKEN }}
-
-      - name: Attestation Provenance for ghcr.io/${{ github.repository }}:${{ matrix.tag }}
-        uses: actions/attest-build-provenance@v2
-        id: attest
-        with:
-          subject-name: ghcr.io/${{ github.repository }}
-          subject-digest: ${{ steps.push.outputs.digest }}
-          push-to-registry: true

.github/workflows/release.yaml

@@ -12,21 +12,11 @@ permissions:
   actions: write # Allow canceling in-progress runs
   contents: read # Read access to the repository
   packages: write # Write access to the container registry
-  id-token: write # For the attest action to push
-  attestations: write # For the attest action to push
 
 jobs:
   docker:
     name: Docker Release
     runs-on: ubuntu-latest
-    strategy:
-      matrix:
-        include:
-          - target: final
-            tag_suffix: ''
-          - target: debug-shell
-            tag_suffix: '-shell'
-
     steps:
       - name: Check out the repo
         uses: actions/checkout@v4
@@ -38,9 +28,6 @@ jobs:
           images: ghcr.io/${{ github.repository }}
           tags: |
             type=semver,pattern={{version}}
-          flavor: |
-            latest=auto
-            suffix=${{ matrix.tag_suffix }},onlatest=true
 
       - name: Set up QEMU
         uses: docker/setup-qemu-action@v3
@@ -55,25 +42,12 @@ jobs:
           username: ${{ github.actor }}
           password: ${{ secrets.GITHUB_TOKEN }}
 
-      - name: Build and push ${{ fromJSON(steps.meta.outputs.json).tags[0] }}
-        uses: docker/build-push-action@v6
-        id: push
+      - name: Build and push Docker image
+        uses: docker/build-push-action@v5
         with:
           context: .
           file: ./Dockerfile
-          target: ${{ matrix.target }}
           push: true
           tags: ${{ steps.meta.outputs.tags }}
           labels: ${{ steps.meta.outputs.labels }}
           platforms: linux/amd64, linux/arm64
-          cache-from: type=gha
-          cache-to: type=gha,mode=max
-          build-args: |
-            IMAGE_TAG=ghcr.io/${{ github.repository }}:${{ fromJSON(steps.meta.outputs.json).labels['org.opencontainers.image.version'] }}
-      - name: Attestation Provenance for ${{ fromJSON(steps.meta.outputs.json).tags[0] }}
-        uses: actions/attest-build-provenance@v2
-        id: attest
-        with:
-          subject-name: ghcr.io/${{ github.repository }}
-          subject-digest: ${{ steps.push.outputs.digest }}
-          push-to-registry: true

.gitignore

@@ -4,12 +4,3 @@ node_modules
 /build
 /test
 .env
-/app/hp_ssh.wasm
-/app/wasm_exec.js
-
-/public/hp_ssh.wasm
-/public/wasm_exec.js
-
-/docs/.vitepress/dist/
-/docs/.vitepress/cache/
-/.direnv

.npmrc

@@ -1 +1,2 @@
 side-effects-cache = false
+public-hoist-pattern[]=*hono*

.tool-versions

@@ -0,0 +1,2 @@
+pnpm 10.4.0
+node 22

.zed/settings.json

@@ -0,0 +1,17 @@
+{
+	"formatter": {
+		"language_server": {
+			"name": "biome"
+		}
+	},
+	"code_actions_on_format": {
+		"source.fixAll.biome": true,
+		"source.organizeImports.biome": true
+	},
+	"languages": {
+		"YAML": {
+			"tab_size": 2,
+			"hard_tabs": false
+		}
+	}
+}

CHANGELOG.md

@@ -1,81 +1,12 @@
-# 0.6.2 (Next)
-- Bundle all `node_modules` aside from native ones to reduce bundle and container size (closes [#331](https://github.com/tale/headplane/issues/331)).
-- Allow conditionally compiling the SSH WASM integration when building (closes [#337](https://github.com/tale/headplane/issues/337)).
-- Implemented the ability to customize the build with a custom script (see `./build.sh --help` for more information).
+### 0.5.10 (April 4, 2025)
+- Fix an issue where other prefernences to skip onboarding affected every user.
 
----
-
-# 0.6.1 (October 12, 2025)
-- **Headplane now supports connecting to machines via SSH in the web browser.**
-	- This is an experimental feature and requires the `integration.agent` section to be set up in the config file.
-	- This is built on top of a Go binary that runs in WebAssembly, using Xterm.js for the terminal interface.
-- Begin using a new SQLite database file in `/var/lib/headplane/hp_persist.db`.
-	- The database is created automatically if it does not exist.
-	- It currently stores SSH connection details and HostInfo for the agent.
-	- User information is automatically migrated from the previous database.
-- The docker container now runs in a distroless image (closes [#255](https://github.com/tale/headplane/issues/255)).
-	- A debug version of the container that runs as root and has a shell is available as `ghcr.io/tale/headplane:<version>-shell`.
-- Removing a Split DNS record will no longer make the split domain unresolvable by clients (closes [#231](https://github.com/tale/headplane/issues/231)).
-- Reintroduce the toggle for overriding local DNS settings in the Headscale config (closes [#236](https://github.com/tale/headplane/issues/236)).
-- Prefer cross-compiling in the Dockerfile to speed up builds while still supporting multiple architectures.
-- Add a build attestation to validate SLSA provenance for the Docker image.
-- Implement more accurate guessing on the PID with the `/proc` integration (via [#219](https://github.com/tale/headplane/pull/219)).
-- Usernames will now correctly fall back to emails if not provided (via [#257](https://github.com/tale/headplane/pull/257)).
-- Configuration loading via paths is now supported for sensitive values (via [#283](https://github.com/tale/headplane/pulls/283))
-    - Options like `server.cookie_secret_path` can override `server.cookie_secret`
-    - Environment variables are interpolatable into these paths
-    - See the full reference in the [docs](https://github.com/tale/headplane/blob/main/docs/Configuration.md#sensitive-values)
-- The nix overlay build is fixed for the SSH module (via [#282](https://github.com/tale/headplane/pull/282))
-- Switch our build processes to use TypeScript Go and Rolldown Vite for better build and type-check performance.
-- Cookies are now encrypted JWTs, preserving API key secrets (*GHSA-wrqq-v7qw-r5w7*)
-- OIDC profile pictures are now available from Gravatar by setting `oidc.profile_picture_source` to `gravatar` (closes [#232](https://github.com/tale/headplane/issues/232)).
-- OIDC now allows passing many custom parameters:
-	- `oidc.authorization_endpoint`, `oidc.token_endpoint`, and `oidc.userinfo_endpoint` can be overridden to support non-standard providers or scenarios without discovery (closes [#117](https://github.com/tale/headplane/issues/117)).
-	- `oidc.scope` can be set to specify custom scopes (defaults to `openid email profile`).
-	- `oidc.extra_params` can be set to pass arbitrary query parameters to the authorization endpoint (closes [#197](https://github.com/tale/headplane/issues/197)).
-
----
-
-# 0.6.0 (May 25, 2025)
-- Headplane 0.6.0 now requires **Headscale 0.26.0** or newer.
-    - Breaking API changes with routes and pre auth keys are now supported (closes [#204](https://github.com/tale/headplane/issues/204)).
-    - Older versions of Headscale will not work with Headplane.
-
-- OIDC authorization restrictions can now be controlled from the settings UI. (closes [#102](https://github.com/tale/headplane/issues/102))
-	- The required permission role for this is **IT Admin** or **Admin/Owner** and require the Headscale configuration.
-	- Changes made will modify the `oidc.allowed_{domains,groups,users}` fields in the Headscale config file.
-- The Pre-Auth keys page has been fully reworked (closes [#179](https://github.com/tale/headplane/issues/179), [#143](https://github.com/tale/headplane/issues/143)).
-- The Headplane agent is now available as an integration (closes [#65](https://github.com/tale/headplane/issues/65)).
-	- The agent runs as an embedded process alongside the Headplane server and reports host information and system metrics.
-	- Refer to the `integrations.agent` section of the config file for more information and how to enable it.
-- Requests to `/admin` will now be redirected to `/admin/` to prevent issues with the React Router (works with custom prefixes, closes [#173](https://github.com/tale/headplane/issues/173)).
-- The Login page has been simplified and separately reports errors versus incorrect API keys (closes [#186](https://github.com/tale/headplane/issues/186)).
-- The machine actions backend has been reworked to better handle errors and provide more information to the user (closes [#185](https://github.com/tale/headplane/issues/185)).
-- Machine tags now show states when waiting for subnet or exit node approval and when expiry is disabled.
-- Expiry status on the UI was incorrectly showing as never due to changes in the Headscale API.
-- Added validation for machine renaming to prevent invalid submissions (closes [#192](https://github.com/tale/headplane/issues/192)).
-- Unmanaged (non-OIDC) users cannot have a role assigned to them so the menu option was disabled.
-- Support Docker container discovery through labels (via [#194](https://github.com/tale/headplane/pull/194)).
-- AAAA records are now supported on the DNS page (closes [#189](https://github.com/tale/headplane/issues/189)).
-- Add support for `dns.extra_records_path` in the Headscale config (closes [#144](https://github.com/tale/headplane/issues/144)).
-- Tighten `proc` integration logic by checking for the `headscale serve` command (via #[195](https://github.com/tale/headplane/pull/195)).
-- Strip newlines in the OIDC `client_secret_path` file if provided (closes [#199](https://github.com/tale/headplane/issues/199)).
-
----
-
-# 0.5.10 (April 4, 2025)
-- Fix an issue where other preferences to skip onboarding affected every user.
-
----
-
-# 0.5.9 (April 3, 2025)
+### 0.5.9 (April 3, 2025)
 - Filter out empty users from the pre-auth keys page which could possibly cause a crash with unmigrated users.
 - OIDC users cannot be renamed, so that functionality has been disabled in the menu options.
 - Suppress hydration errors for any fields with a date in it.
 
----
-
-# 0.5.8 (April 3, 2025)
+### 0.5.8 (April 3, 2025)
 - You can now skip the onboarding page if desired.
 - Added the UI to change user roles in the dashboard.
 - Fixed an issue where integrations would throw instead of loading properly.
@@ -83,14 +14,10 @@
 - Automatically create `/var/lib/headplane` in the Docker container (fixes [#166](https://github.com/tale/headplane/issues/166))
 - OIDC logout with `disable_api_key_login` set to true will not automatically login again (fixes [#149](https://github.com/tale/headplane/issues/149))
 
----
-
-# 0.5.7 (April 2, 2025)
+### 0.5.7 (April 2, 2025)
 - Hotfix an issue where assets aren't served under `/admin` or the prefix.
 
----
-
-# 0.5.6 (April 2, 2025)
+### 0.5.6 (April 2, 2025)
 
 ### IMPORTANT
 > **PLEASE** update to this ASAP if you were using Google OIDC. This is because previously *ANY* accounts have admin access to your Tailnet if they discover the URL that Headplane is being hosted on. This new change enforces that new logins by default are not given any permissions. You will need to re-login to Headplane to generate an owner account and prevent unauthorized access.
@@ -110,14 +37,10 @@ If there are no users, the first user will be given an `owner` role which cannot
 - Unknown values in the Headplane config no longer cause a crash.
 - Fixed an issue that caused copied commands to have a random space (fixes [#161](https://github.com/tale/headplane/issues/161))
 
----
-
-# 0.5.5 (March 18, 2025)
+### 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)
+### 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))
@@ -131,28 +54,20 @@ If there are no users, the first user will be given an `owner` role which cannot
 - 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)
+### 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)
+### 0.5.2 (February 28, 2025)
 - Hotfixed an issue where the server bundle got reloaded on each request
 
----
-
-# 0.5.1 (February 28, 2025)
+### 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)
+### 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.
@@ -167,14 +82,10 @@ If there are no users, the first user will be given an `owner` role which cannot
 - 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)
+### 0.4.1 (January 18, 2025)
 - Fixed an urgent issue where the OIDC redirect URI would mismatch.
 
----
-
-# 0.4.0 (January 18, 2025)
+### 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))
@@ -187,41 +98,29 @@ If there are no users, the first user will be given an `owner` role which cannot
 - 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)
+### 0.3.9 (December 6, 2024)
 - Fixed a race condition bug in the OIDC validation code
 
----
-
-# 0.3.8 (December 6, 2024)
+### 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))
 - Validates OIDC config and ignores validation if specified via variables or Headscale config (fixes [#63](https://github.com/tale/headplane/issues/63))
 
----
-
-# 0.3.7 (November 30, 2024)
+### 0.3.7 (November 30, 2024)
 - Allow customizing the OIDC token endpoint auth method via `OIDC_CLIENT_SECRET_METHOD` (fixes [#57](https://github.com/tale/headplane/issues/57))
 - Added a `/healthz` endpoint for Kubernetes and other health checks (fixes [#59](https://github.com/tale/headplane/issues/59))
 - Allow `HEADSCALE_PUBLIC_URL` to be set if `HEADSCALE_URL` points to a different internal address (fixes [#60](https://github.com/tale/headplane/issues/60))
 - Fixed an issue where the copy machine registration command had a typo.
 
----
-
-# 0.3.6 (November 20, 2024)
+### 0.3.6 (November 20, 2024)
 - Fixed an issue where select dropdowns would not scroll (fixes [#53](https://github.com/tale/headplane/issues/53))
 - Added a button to copy the machine registration command to the clipboard (fixes [#52](https://github.com/tale/headplane/issues/52))
 
----
-
-# 0.3.5 (November 8, 2024)
+### 0.3.5 (November 8, 2024)
 - Quickfix a bug where environment variables are ignored on the server.
 - Remove a nagging error about missing cookie since that happens when signed out.
 
----
-
-# 0.3.4 (November 7, 2024)
+### 0.3.4 (November 7, 2024)
 - Clicking on the machine name in the users page now takes you to the machine overview page.
 - Completely rebuilt the production server to work better outside of Docker and be lighter. More specifically, we've switched from the `@remix-run/serve` package to our own custom built server.
 - Fixed a bunch of silly issues introduced by me not typechecking the codebase.
@@ -231,94 +130,70 @@ If there are no users, the first user will be given an `owner` role which cannot
 - Added full support for Exit Nodes in the UI and redesigned the machines page (fixes [#36](https://github.com/tale/headplane/issues/36))
 - Added a basic check to see if the API keys passed via cookies are invalid.
 
----
-
-# 0.3.3 (October 28, 2024)
+### 0.3.3 (October 28, 2024)
 - Added the ability to load a `.env` file from the PWD when `LOAD_ENV_FILE=true` is set as an environment variable.
 - Fixed an issue where non-English languages could not create Pre-auth keys due to a localization error
 - Improved ACL editor performance by switching back to CodeMirror 6
 - Fixed an issue where editing the ACL policy would cause it to revert on the UI (fixes [#34](https://github.com/tale/headplane/issues/34))
 - Updated to the next stable beta of the React 19 Compiler ([See More](https://react.dev/learn/react-compiler))
 
----
-
-# 0.3.2 (October 11, 2024)
+### 0.3.2 (October 11, 2024)
 - Implement the ability to create and expire pre-auth keys (fixes [#22](https://github.com/tale/headplane/issues/22))
 - Fix machine registration not working as expected (fixes [#27](https://github.com/tale/headplane/issues/27))
 - Removed more references to usernames in MagicDNS hostnames (fixes [#35](https://github.com/tale/headplane/issues/35))
 - Handle `null` values on machine expiry when using a database like PostgreSQL.
 - Use `X-Forwarded-Proto` and `Host` headers for building the OIDC callback URL.
 
----
-
-# 0.3.1 (October 3, 2024)
+### 0.3.1 (October 3, 2024)
 - Fixed the Docker integration to properly support custom socket paths. This regressed at some point previously.
 - Allow you to register a machine using machine keys (`nodekey:...`) on the machines page.
 - Added the option for debug logs with the `DEBUG=true` environment variable.
 
----
-
-# 0.3.0 (September 25, 2024)
+### 0.3.0 (September 25, 2024)
 - Bumped the minimum supported version of Headscale to 0.23.
 - Updated the UI to respect `dns.use_username_in_magic_dns`.
 
----
-
-# 0.2.4 (August 24, 2024)
+### 0.2.4 (August 24, 2024)
 - Removed ACL management from the integration since Headscale 0.23-beta2 now supports it natively.
 - Removed the `ACL_FILE` environment variable since it's no longer needed.
 - Introduce a `COOKIE_SECURE=false` environment variable to disable HTTPS requirements for cookies.
 - Fixed a bug where removing Split DNS configurations would crash the UI.
 
----
-
-# 0.2.3 (August 23, 2024)
+### 0.2.3 (August 23, 2024)
 - Change the minimum required version of Headscale to 0.23-beta2
 - Support the new API policy mode for Headscale 0.23-beta1
 - Switch to the new DNS configuration in Headscale 0.23-beta2 (fixes [#29](https://github.com/tale/headplane/issues/29))
 - If OIDC environment variables are defined, don't use configuration file values (fixes [#24](https://github.com/tale/headplane/issues/24))
 
----
-
-# 0.2.2 (August 2, 2024)
+### 0.2.2 (August 2, 2024)
 - Added a proper Kubernetes integration which utilizes `shareProcessNamespace` for PIDs.
 - Added a new logger utility that shows categories, levels, and timestamps.
 - Reimplemented the integration system to be more resilient and log more information.
 - Fixed an issue where the /proc integration found `undefined` PIDs.
 
----
-
-# 0.2.1 (July 7, 2024)
+### 0.2.1 (July 7, 2024)
 - Added the ability to manage custom DNS records on your Tailnet.
 - ACL tags for machines are now able to be changed via the machine menu.
 - Fixed a bug where the ACL editor did not show the diffs correctly.
 - Fixed an issue that stopped the "Discard changes" button in the ACL editor from working.
 
----
-
-# 0.2.0 (June 23, 2024)
+### 0.2.0 (June 23, 2024)
 - Fix the dropdown options for machines not working on the machines page.
 - Add an option to change the machine owner in the dropdown (aside from the users page).
 
----
-
-# 0.1.9 (June 2, 2024)
+### 0.1.9 (June 2, 2024)
 - Switch to Monaco editor with proper HuJSON and YAML syntax highlighting.
 - Utilize magic DNS hostnames for the machine overview page.
 - Fixed the expiry issue once and for all.
 - Add a nightly build with the `ghcr.io/tale/headplane:edge` tag
 
----
-
-# 0.1.8 (June 2, 2024)
+### 0.1.8 (June 2, 2024)
 - Built basic functionality for the machine overview page (by machine ID).
 - Possibly fixed an issue where expiry disabled machines' timestamps weren't handled correctly.
 - Prevent users from being deleted if they still have ownership of machines.
 - Fixed some type issues where `Date` was being used instead of `string` for timestamps.
 
----
-
-# 0.1.7 (May 30, 2024)
+### 0.1.7 (May 30, 2024)
 - Added support for the `HEADSCALE_INTEGRATION` variable to allow for advanced integration without Docker.
 - Fixed a bug where the `expiry` field on the Headscale configuration could cause crashes.
 - Made the strict configuration loader more lenient to allow for more flexibility.
@@ -326,25 +201,19 @@ If there are no users, the first user will be given an `owner` role which cannot
 - Headplane's context now only loads once at start instead of being lazy-loaded.
 - Improved logging and error propagation so that it's easier to debug issues.
 
----
-
-# 0.1.6 (May 22, 2024)
+### 0.1.6 (May 22, 2024)
 - Added experimental support for advanced integration without Docker.
 - Fixed a crash where the Docker integration tried to use `process.env.API_KEY` instead of context.
 - Fixed a crash where `ROOT_API_KEY` was not respected in the OIDC flow.
 
----
-
-# 0.1.5 (May 20, 2024)
+### 0.1.5 (May 20, 2024)
 - Robust configuration handling with fallbacks based on the headscale source.
 - Support for `client_secret_path` on configuration file based OIDC.
 - `DISABLE_API_KEY_LOGIN` now works as expected (non 'true' values work).
 - `API_KEY` is renamed to `ROOT_API_KEY` for better clarity (old variable still works).
 - Fixed button responders not actually being invoked (should fix the ACL page).
 
----
-
-# 0.1.4 (May 15, 2024)
+### 0.1.4 (May 15, 2024)
 
 - Users can now be created, renamed, and deleted on the users page.
 - Machines can be dragged between users to change their ownership.
@@ -353,17 +222,13 @@ If there are no users, the first user will be given an `owner` role which cannot
 - Upgrade to React 19 beta to take advantage of the compiler (may revert if it causes issues).
 - Upgrade other dependencies
 
----
-
-# 0.1.3 (May 4, 2024)
+### 0.1.3 (May 4, 2024)
 
 - Switched to a better icon set for the UI.
 - Support stable scrollbar gutter if supported by the browser.
 - Cleaned up the header which fixed a bug that could crash the entire application on fetch errors.
 
----
-
-# 0.1.2 (May 1, 2024)
+### 0.1.2 (May 1, 2024)
 
 - Added support for renaming, expiring, removing, and managing the routes of a machine.
 - Implemented an expiry check for machines which now reflect on the machine table.

Caddyfile

@@ -1,10 +0,0 @@
-https://localhost {
-    reverse_proxy headscale:8080
-	tls /certs/localhost.pem /certs/localhost-key.pem
-
-    header {
-        Access-Control-Allow-Origin  *
-        Access-Control-Allow-Headers *
-        Access-Control-Allow-Methods GET, POST, OPTIONS
-    }
-}

Dockerfile

@@ -1,66 +1,18 @@
-FROM --platform=$BUILDPLATFORM golang:1.25.1 AS go-base
-WORKDIR /run
+FROM node:22-alpine AS build
+WORKDIR /app
 
-COPY go.mod go.sum build.sh ./
-RUN go mod download
-
-COPY cmd/ ./cmd/
-COPY internal/ ./internal/
-
-ARG TARGETOS
-ARG TARGETARCH
-ARG IMAGE_TAG
-RUN GOOS=$TARGETOS GOARCH=$TARGETARCH CGO_ENABLED=0 IMAGE_TAG=$IMAGE_TAG \
-	./build.sh --wasm --agent --fake-shell \
-		--wasm-output /bin/hp_ssh.wasm \
-		--agent-output /bin/hp_agent \
-		--fake-shell-output /bin/fake-sh
-
-RUN chmod +x /bin/hp_ssh.wasm
-RUN chmod +x /bin/hp_agent
-RUN chmod +x /bin/fake-sh
-
-# Folder needs to exist for later stages
-RUN mkdir -p /var/lib/headplane/agent
-
-FROM --platform=$BUILDPLATFORM node:22.16-slim AS js-base
-WORKDIR /run
-
-RUN corepack enable
+RUN npm install -g pnpm@10
+RUN apk add --no-cache git
+COPY package.json pnpm-lock.yaml ./
 COPY patches ./patches
-COPY package.json pnpm-lock.yaml build.sh ./
-
-COPY --from=go-base /bin/hp_ssh.wasm /run/app/hp_ssh.wasm
-COPY --from=go-base /bin/wasm_exec.js /run/app/wasm_exec.js
-RUN ./build.sh --app --app-install-only
+RUN pnpm install --frozen-lockfile
 
 COPY . .
-RUN ./build.sh --app
+RUN pnpm run build
 
-FROM gcr.io/distroless/nodejs22-debian12:latest AS final
-COPY --from=js-base /run/build /app/build
-COPY --from=js-base /run/drizzle /app/drizzle
-COPY --from=js-base /run/node_modules /app/node_modules
-
-COPY --from=go-base /bin/hp_agent /usr/libexec/headplane/agent
-COPY --from=go-base /var/lib/headplane /var/lib/headplane
-
-# Fake shell to inform the user that they should use the debug image
-COPY --from=go-base /bin/fake-sh /bin/sh
-COPY --from=go-base /bin/fake-sh /bin/bash
+FROM node:22-alpine
+RUN mkdir -p /var/lib/headplane
 
 WORKDIR /app
-CMD [ "/app/build/server/index.js" ]
-
-FROM node:22-alpine AS debug-shell
-RUN apk add --no-cache bash curl
-
-COPY --from=js-base /run/build /app/build
-COPY --from=js-base /run/drizzle /app/drizzle
-COPY --from=js-base /run/node_modules /app/node_modules
-
-COPY --from=go-base /bin/hp_agent /usr/libexec/headplane/agent
-COPY --from=go-base /var/lib/headplane /var/lib/headplane
-
-WORKDIR /app
-CMD [ "node", "/app/build/server/index.js" ]
+COPY --from=build /app/build /app/build
+CMD [ "node", "./build/server/index.js" ]

README.md

@@ -4,15 +4,15 @@
 <picture>
     <source
         media="(prefers-color-scheme: dark)"
-        srcset="./docs/assets/preview-dark.png"
+        srcset="./assets/preview-dark.png"
     >
     <source
         media="(prefers-color-scheme: light)"
-        srcset="./docs/assets/preview-light.png"
+        srcset="./assets/preview-light.png"
     >
     <img
         alt="Preview"
-        src="./docs/assets/preview-dark.png"
+        src="./assets/preview-dark.png"
     >
 </picture>
 
@@ -32,14 +32,24 @@ These are some of the features that Headplane offers:
 - Configurability for Headscale's settings
 
 ## Deployment
-Refer to the [website](https://headplane.net) for detailed installation instructions.
+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:
 
-## Versioning
+- ### [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.
+
+- ### [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.
+
+### Versioning
 Headplane uses [semantic versioning](https://semver.org/) for its releases (since v0.6.0).
 Pre-release builds are available under the `next` tag and get updated when a new release
 PR is opened and actively in testing.
 
-## Contributing
+### Contributing
 Headplane is an open-source project and contributions are welcome! If you have
 any suggestions, bug reports, or feature requests, please open an issue. Also
 refer to the [contributor guidelines](./docs/CONTRIBUTING.md) for more info.
@@ -49,30 +59,30 @@ refer to the [contributor guidelines](./docs/CONTRIBUTING.md) for more info.
 <picture>
     <source
         media="(prefers-color-scheme: dark)"
-        srcset="./docs/assets/acls-dark.png"
+        srcset="./assets/acls-dark.png"
     >
     <source
         media="(prefers-color-scheme: light)"
-        srcset="./docs/assets/acls-light.png"
+        srcset="./assets/acls-light.png"
     >
     <img
         alt="ACLs"
-        src="./docs/assets/acls-dark.png"
+        src="./assets/acls-dark.png"
     >
 </picture>
 
 <picture>
     <source
         media="(prefers-color-scheme: dark)"
-        srcset="./docs/assets/machine-dark.png"
+        srcset="./assets/machine-dark.png"
     >
     <source
         media="(prefers-color-scheme: light)"
-        srcset="./docs/assets/machine-light.png"
+        srcset="./assets/machine-light.png"
     >
     <img
         alt="Machine Management"
-        src="./docs/assets/machine-dark.png"
+        src="./assets/machine-dark.png"
     >
 </picture>
 

agent.Dockerfile

@@ -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"]

agent/cmd/hp_agent/hp_agent.go

@@ -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()
+}

agent/config/config.go

@@ -1,6 +1,10 @@
 package config
 
-import "os"
+import (
+	"os"
+
+	_ "github.com/joho/godotenv/autoload"
+)
 
 // Config represents the configuration for the agent.
 type Config struct {
@@ -8,7 +12,8 @@ type Config struct {
 	Hostname     string
 	TSControlURL string
 	TSAuthKey    string
-	WorkDir      string
+	HPControlURL string
+	HPAuthKey    string
 }
 
 const (
@@ -16,7 +21,8 @@ const (
 	HostnameEnv     = "HEADPLANE_AGENT_HOSTNAME"
 	TSControlURLEnv = "HEADPLANE_AGENT_TS_SERVER"
 	TSAuthKeyEnv    = "HEADPLANE_AGENT_TS_AUTHKEY"
-	WorkDirEnv      = "HEADPLANE_AGENT_WORK_DIR"
+	HPControlURLEnv = "HEADPLANE_AGENT_HP_SERVER"
+	HPAuthKeyEnv    = "HEADPLANE_AGENT_HP_AUTHKEY"
 )
 
 // Load reads the agent configuration from environment variables.
@@ -26,7 +32,8 @@ func Load() (*Config, error) {
 		Hostname:     os.Getenv(HostnameEnv),
 		TSControlURL: os.Getenv(TSControlURLEnv),
 		TSAuthKey:    os.Getenv(TSAuthKeyEnv),
-		WorkDir:      os.Getenv(WorkDirEnv),
+		HPControlURL: os.Getenv(HPControlURLEnv),
+		HPAuthKey:    os.Getenv(HPAuthKeyEnv),
 	}
 
 	if os.Getenv(DebugEnv) == "true" {
@@ -41,5 +48,9 @@ func Load() (*Config, error) {
 		return nil, err
 	}
 
+	if err := validateHPReady(c); err != nil {
+		return nil, err
+	}
+
 	return c, nil
 }

agent/config/preflight.go

@@ -16,12 +16,16 @@ func validateRequired(config *Config) error {
 		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.WorkDir == "" {
-		return fmt.Errorf("%s is required", WorkDirEnv)
+	if config.HPAuthKey == "" {
+		return fmt.Errorf("%s is required", HPAuthKeyEnv)
 	}
 
 	return nil
@@ -34,7 +38,8 @@ func validateTSReady(config *Config) error {
 		testURL = testURL[:len(testURL)-1]
 	}
 
-	testURL = fmt.Sprintf("%s/key?v=116", testURL)
+	// 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)
@@ -46,3 +51,23 @@ func validateTSReady(config *Config) error {
 
 	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
+}

agent/hpagent/handler.go

@@ -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()
+}

agent/hpagent/sender.go

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

agent/hpagent/websocket.go

@@ -0,0 +1,63 @@
+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)
+	}
+
+	// We also need to append /_dial to the path
+	if u.Path[len(u.Path)-1] != '/' {
+		u.Path += "/"
+	}
+
+	u.Path += "_dial"
+	return u.String(), nil
+}

agent/tsnet/peers.go

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

agent/tsnet/server.go

@@ -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()
+}

app/components/Attribute.tsx

@@ -1,54 +1,46 @@
-import { Check, Copy, Info } from 'lucide-react';
+import { Check, Copy } from 'lucide-react';
 import cn from '~/utils/cn';
 import toast from '~/utils/toast';
-import Tooltip from './Tooltip';
 
 export interface AttributeProps {
 	name: string;
 	value: string;
-	tooltip?: string;
 	isCopyable?: boolean;
+	link?: string;
+	suppressHydrationWarning?: boolean;
 }
 
 export default function Attribute({
 	name,
 	value,
-	tooltip,
+	link,
 	isCopyable,
+	suppressHydrationWarning,
 }: AttributeProps) {
 	return (
-		<dl className="flex gap-1 items-center text-sm">
-			<dt
-				className={cn(
-					'w-1/3 sm:w-1/4 lg:w-1/3 shrink-0 min-w-0',
-					'text-headplane-500 dark:text-headplane-400',
-					tooltip ? 'flex items-center gap-1' : undefined,
+		<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}
-				{tooltip ? (
-					<Tooltip>
-						<Info className="size-4" />
-						<Tooltip.Body>{tooltip}</Tooltip.Body>
-					</Tooltip>
-				) : undefined}
 			</dt>
 			<dd
+				suppressHydrationWarning={suppressHydrationWarning}
 				className={cn(
-					'min-w-0 px-1.5 py-1 rounded-lg border border-transparent',
-					...(isCopyable
-						? [
-								'cursor-pointer hover:shadow-xs',
-								'hover:bg-headplane-50 dark:hover:bg-headplane-800',
-								'hover:border-headplane-100 dark:hover:border-headplane-700',
-							]
-						: []),
+					'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="flex items-center gap-1.5 relative min-w-0 w-full"
+						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) {
@@ -56,7 +48,7 @@ export default function Attribute({
 							}
 
 							await navigator.clipboard.writeText(value);
-							toast(`Copied ${name} to clipboard`);
+							toast('Copied to clipboard');
 
 							setTimeout(() => {
 								for (const svg of svgs) {
@@ -65,20 +57,17 @@ export default function Attribute({
 							}, 1000);
 						}}
 					>
-						<div suppressHydrationWarning className="truncate">
+						<p
+							suppressHydrationWarning={suppressHydrationWarning}
+							className="truncate"
+						>
 							{value}
-						</div>
-						{isCopyable ? (
-							<div>
-								<Check className="size-4 hidden data-copied:block" />
-								<Copy className="size-4 block data-copied:hidden" />
-							</div>
-						) : undefined}
+						</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>
 				) : (
-					<div className="relative min-w-0 truncate" suppressHydrationWarning>
-						{value}
-					</div>
+					value
 				)}
 			</dd>
 		</dl>

app/components/Button.tsx

@@ -20,7 +20,7 @@ export default function Button({ variant = 'light', ...props }: ButtonProps) {
 			{...buttonProps}
 			className={cn(
 				'w-fit text-sm rounded-xl px-3 py-2',
-				'focus:outline-hidden focus:ring-3',
+				'focus:outline-none focus:ring',
 				props.isDisabled && 'opacity-60 cursor-not-allowed',
 				...(variant === 'heavy'
 					? [

app/components/Card.tsx

@@ -15,7 +15,7 @@ function Card({ variant = 'raised', ...props }: Props) {
 				'w-full max-w-md rounded-3xl p-5',
 				variant === 'flat'
 					? 'bg-transparent shadow-none'
-					: 'bg-headplane-50/50 dark:bg-headplane-950/50 shadow-xs',
+					: 'bg-headplane-50/50 dark:bg-headplane-950/50 shadow-sm',
 				'border border-headplane-100 dark:border-headplane-800',
 				props.className,
 			)}

app/components/Chip.tsx

@@ -17,10 +17,10 @@ export default function Chip({
 	return (
 		<span
 			className={cn(
-				'h-5 text-xs py-0.5 px-1 rounded-md text-nowrap',
+				'text-xs px-2 py-0.5 rounded-full',
 				'text-headplane-700 dark:text-headplane-100',
 				'bg-headplane-100 dark:bg-headplane-700',
-				'inline-flex items-center gap-x-1',
+				leftIcon || rightIcon ? 'inline-flex items-center gap-x-1' : '',
 				className,
 			)}
 		>

app/components/Code.tsx

@@ -13,7 +13,7 @@ export default function Code({ isCopyable, children, className }: CodeProps) {
 		<code
 			className={cn(
 				'bg-headplane-100 dark:bg-headplane-800 px-1 py-0.5 font-mono',
-				'rounded-lg focus-within:outline-hidden focus-within:ring-2',
+				'rounded-lg focus-within:outline-none focus-within:ring-2',
 				isCopyable && 'relative pr-7',
 				className,
 			)}
@@ -21,6 +21,7 @@ export default function Code({ isCopyable, children, className }: CodeProps) {
 			{children}
 			{isCopyable && (
 				<button
+					type="button"
 					className="bottom-0 right-0 absolute"
 					onClick={async (event) => {
 						const text = Array.isArray(children) ? children.join('') : children;
@@ -39,10 +40,9 @@ export default function Code({ isCopyable, children, className }: CodeProps) {
 							}
 						}, 1000);
 					}}
-					type="button"
 				>
-					<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" />
+					<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>

app/components/Dialog.tsx

@@ -117,7 +117,7 @@ function Panel(props: DialogPanelProps) {
 			method={method ?? 'POST'}
 			ref={ref}
 			className={cn(
-				'outline-hidden rounded-3xl w-full max-w-lg',
+				'outline-none rounded-3xl w-full max-w-lg',
 				'bg-white dark:bg-headplane-900',
 			)}
 		>

app/components/Error.tsx

@@ -1,15 +1,14 @@
-import { AlertCircle } from 'lucide-react';
+import { AlertIcon } from '@primer/octicons-react';
 import { isRouteErrorResponse, useRouteError } from 'react-router';
 import ResponseError from '~/server/headscale/api-error';
 import cn from '~/utils/cn';
 import Card from './Card';
-import Code from './Code';
 
 interface Props {
 	type?: 'full' | 'embedded';
 }
 
-export function getErrorMessage(error: Error | unknown): {
+function getMessage(error: Error | unknown): {
 	title: string;
 	message: string;
 } {
@@ -46,7 +45,10 @@ export function getErrorMessage(error: Error | unknown): {
 
 	// If we are aggregate, concat into a single message
 	if (rootError instanceof AggregateError) {
-		throw new Error('Unhandled AggregateError');
+		return {
+			title: 'Errors',
+			message: rootError.errors.map((error) => error.message).join('\n'),
+		};
 	}
 
 	return {
@@ -58,7 +60,7 @@ export function getErrorMessage(error: Error | unknown): {
 export function ErrorPopup({ type = 'full' }: Props) {
 	const error = useRouteError();
 	const routing = isRouteErrorResponse(error);
-	const { title, message } = getErrorMessage(error);
+	const { title, message } = getMessage(error);
 
 	return (
 		<div
@@ -70,18 +72,16 @@ export function ErrorPopup({ type = 'full' }: Props) {
 			)}
 		>
 			<Card>
-				<div className="flex items-center gap-4">
-					<AlertCircle className="w-8 h-8 text-red-500" />
-					<div className="flex justify-between items-center gap-2 w-full">
-						<Card.Title className="text-3xl mb-0">{title}</Card.Title>
-						{routing && <Code className="text-2xl">{`${error.status}`}</Code>}
-					</div>
+				<div className="flex items-center justify-between">
+					<Card.Title className="text-3xl mb-0">
+						{routing ? error.status : title}
+					</Card.Title>
+					<AlertIcon className="w-12 h-12 text-red-500" />
 				</div>
-				<hr className="my-4 text-headplane-100 dark:text-headplane-800" />
 				<Card.Text
-					className={cn('py-4 text-lg', routing ? 'font-normal' : 'font-mono')}
+					className={cn('mt-4 text-lg', routing ? 'font-normal' : 'font-mono')}
 				>
-					{routing ? error.data : message}
+					{routing ? error.data.message : message}
 				</Card.Text>
 			</Card>
 		</div>

app/components/Footer.tsx

@@ -1,71 +1,49 @@
-import { CircleX } from 'lucide-react';
 import Link from '~/components/Link';
 import cn from '~/utils/cn';
 
 interface FooterProps {
 	url: string;
 	debug: boolean;
-	healthy: boolean;
 }
 
-export default function Footer({ url, debug, healthy }: FooterProps) {
+export default function Footer({ url, debug }: FooterProps) {
 	return (
 		<footer
 			className={cn(
-				'fixed w-full bottom-0 left-0 z-40 h-12',
-				'flex items-center justify-center',
-				'bg-headplane-50 dark:bg-headplane-950',
+				'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',
 			)}
 		>
-			<div
-				className={cn(
-					'grid grid-rows-1 items-center container mx-auto',
-					!healthy && 'md:grid-cols-[1fr_auto] grid-cols-1',
-				)}
-			>
-				<div
-					className={cn('text-xs leading-none', !healthy && 'hidden md:block')}
+			<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"
 				>
-					<p>
-						Headplane is free. Please consider{' '}
-						<Link
-							to="https://github.com/sponsors/tale"
-							name="Aarnav's GitHub Sponsors"
-						>
-							donating
-						</Link>{' '}
-						to support development.{' '}
-					</p>
-					<p className="opacity-75">
-						Version: {__VERSION__}
-						{' — '}
-						Connecting to{' '}
-						<button
-							type="button"
-							tabIndex={0} // Allows keyboard focus
-							className={cn(
-								'blur-sm hover:blur-none focus:blur-none transition',
-								'focus:outline-hidden focus:ring-2 rounded-xs',
-							)}
-						>
-							{url}
-						</button>
-						{debug && ' (Debug mode enabled)'}
-					</p>
-				</div>
-				{!healthy ? (
-					<div
-						className={cn(
-							'flex gap-1.5 items-center p-2 rounded-xl text-sm',
-							'bg-red-500 text-white font-semibold',
-						)}
-					>
-						<CircleX size={16} strokeWidth={3} />
-						<p className="text-nowrap">Headscale is unreachable</p>
-					</div>
-				) : undefined}
-			</div>
+					donating
+				</Link>{' '}
+				to support development.{' '}
+			</p>
+			<p className="container text-xs opacity-75">
+				Version: {__VERSION__}
+				{' — '}
+				Connecting to{' '}
+				<button
+					type="button"
+					tabIndex={0} // Allows keyboard focus
+					className={cn(
+						'blur-sm hover:blur-none focus:blur-none transition',
+						'focus:outline-none focus:ring-2 rounded-sm',
+					)}
+				>
+					{url}
+				</button>
+				{/* Connecting to <strong className="blur-xs hover:blur-none">{url}</strong> */}
+				{debug && ' (Debug mode enabled)'}
+			</p>
 		</footer>
 	);
 }

app/components/Header.tsx

@@ -2,13 +2,13 @@ import {
 	CircleUser,
 	Globe2,
 	Lock,
+	PlaneTakeoff,
 	Server,
 	Settings,
 	Users,
 } from 'lucide-react';
 import type { ReactNode } from 'react';
 import { NavLink, useSubmit } from 'react-router';
-import Logo from '~/components/Logo';
 import Menu from '~/components/Menu';
 import { AuthSession } from '~/server/web/sessions';
 import cn from '~/utils/cn';
@@ -42,18 +42,18 @@ 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-hidden focus:ring-3',
+						'focus:outline-none focus:ring',
 						isActive ? 'after:visible' : 'after:invisible',
 					)
 				}
-				prefetch="intent"
-				to={to}
 			>
 				{icon} {name}
 			</NavLink>
@@ -64,13 +64,13 @@ function TabLink({ name, to, icon }: TabLinkProps) {
 function Link({ href, text }: LinkProps) {
 	return (
 		<a
+			href={href}
+			target="_blank"
+			rel="noreferrer"
 			className={cn(
 				'hidden sm:block hover:underline text-sm',
-				'focus:outline-hidden focus:ring-3 rounded-md',
+				'focus:outline-none focus:ring rounded-md',
 			)}
-			href={href}
-			rel="noreferrer"
-			target="_blank"
 		>
 			{text}
 		</a>
@@ -91,7 +91,7 @@ export default function Header(data: Props) {
 		>
 			<div className="container flex items-center justify-between py-4">
 				<div className="flex items-center gap-x-2">
-					<Logo />
+					<PlaneTakeoff />
 					<h1 className="text-2xl font-semibold">headplane</h1>
 				</div>
 				<div className="flex items-center gap-x-4">
@@ -101,21 +101,20 @@ export default function Header(data: Props) {
 					{data.user ? (
 						<Menu>
 							<Menu.IconButton
-								className={cn(data.user.picture ? 'p-0' : '')}
 								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"
-										src={data.user.picture}
 									/>
 								) : (
 									<CircleUser />
 								)}
 							</Menu.IconButton>
 							<Menu.Panel
-								disabledKeys={['profile']}
 								onAction={(key) => {
 									if (key === 'logout') {
 										submit(
@@ -127,6 +126,7 @@ export default function Header(data: Props) {
 										);
 									}
 								}}
+								disabledKeys={['profile']}
 							>
 								<Menu.Section>
 									<Menu.Item key="profile" textValue="Profile">
@@ -148,39 +148,39 @@ export default function Header(data: Props) {
 				<nav className="container flex items-center gap-x-4 overflow-x-auto font-semibold">
 					{data.access.machines ? (
 						<TabLink
-							icon={<Server className="w-5" />}
-							name="Machines"
 							to="/machines"
+							name="Machines"
+							icon={<Server className="w-5" />}
 						/>
 					) : undefined}
 					{data.access.users ? (
 						<TabLink
-							icon={<Users className="w-5" />}
-							name="Users"
 							to="/users"
+							name="Users"
+							icon={<Users className="w-5" />}
 						/>
 					) : undefined}
 					{data.access.policy ? (
 						<TabLink
-							icon={<Lock className="w-5" />}
-							name="Access Control"
 							to="/acls"
+							name="Access Control"
+							icon={<Lock className="w-5" />}
 						/>
 					) : undefined}
 					{data.configAvailable ? (
 						<>
 							{data.access.dns ? (
 								<TabLink
-									icon={<Globe2 className="w-5" />}
-									name="DNS"
 									to="/dns"
+									name="DNS"
+									icon={<Globe2 className="w-5" />}
 								/>
 							) : undefined}
 							{data.access.settings ? (
 								<TabLink
-									icon={<Settings className="w-5" />}
-									name="Settings"
 									to="/settings"
+									name="Settings"
+									icon={<Settings className="w-5" />}
 								/>
 							) : undefined}
 						</>

app/components/IconButton.tsx

@@ -25,7 +25,7 @@ export default function IconButton({
 			aria-label={props.label}
 			className={cn(
 				'rounded-full flex items-center justify-center p-1',
-				'focus:outline-hidden focus:ring-3',
+				'focus:outline-none focus:ring',
 				props.isDisabled && 'opacity-60 cursor-not-allowed',
 				...(variant === 'heavy'
 					? [

app/components/Input.tsx

@@ -54,7 +54,7 @@ export default function Input(props: InputProps) {
 				ref={ref}
 				className={cn(
 					'rounded-xl px-3 py-2',
-					'focus:outline-hidden focus:ring-3',
+					'focus:outline-none focus:ring',
 					'bg-white dark:bg-headplane-900',
 					'border border-headplane-100 dark:border-headplane-800',
 					className,
@@ -71,14 +71,14 @@ export default function Input(props: InputProps) {
 					{props.description}
 				</div>
 			)}
-			{isInvalid ? (
+			{isInvalid && (
 				<div
 					{...errorMessageProps}
 					className={cn('text-xs px-3 mt-1', 'text-red-500 dark:text-red-400')}
 				>
 					{validationErrors.join(' ')}
 				</div>
-			) : null}
+			)}
 		</div>
 	);
 }

app/components/Link.tsx

@@ -24,7 +24,7 @@ export default function Link({
 				'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-hidden focus:ring-3 rounded-md',
+				'focus:outline-none focus:ring rounded-md',
 				className,
 			)}
 		>

app/components/Logo.tsx

@@ -1,10 +0,0 @@
-import cn from '~/utils/cn';
-import LogoSvg from '../../public/logo-light.svg';
-
-export interface LogoProps {
-	className?: string;
-}
-
-export default function Logo({ className }: LogoProps) {
-	return <img alt="Logo" className={cn(className)} src={LogoSvg} />;
-}

app/components/Menu.tsx

@@ -74,7 +74,7 @@ function Panel(props: MenuPanelProps) {
 		<ul
 			{...menuProps}
 			ref={ref}
-			className="pt-1 pb-1 shadow-2xs rounded-md min-w-[200px] focus:outline-hidden"
+			className="pt-1 pb-1 shadow-xs rounded-md min-w-[200px] focus:outline-none"
 		>
 			{[...state.collection].map((item) => (
 				<MenuSection
@@ -149,7 +149,7 @@ function MenuItem<T>({ item, state, isDisabled }: MenuItemProps<T>) {
 			ref={ref}
 			className={cn(
 				'py-2 px-3 mx-1 rounded-lg',
-				'focus:outline-hidden select-none',
+				'focus:outline-none select-none',
 				isFocused && 'bg-headplane-100/50 dark:bg-headplane-800',
 				isDisabled
 					? 'text-headplane-400 dark:text-headplane-600'

app/components/Notice.tsx

@@ -1,45 +1,16 @@
-import {
-	CircleAlert,
-	CircleSlash2,
-	LucideProps,
-	TriangleAlert,
-} from 'lucide-react';
+import { CircleSlash2 } from 'lucide-react';
 import React from 'react';
 import Card from '~/components/Card';
 
 export interface NoticeProps {
 	children: React.ReactNode;
-	title?: string;
-	variant?: 'default' | 'error' | 'warning';
-	icon?: React.ReactElement<LucideProps>;
 }
 
-export default function Notice({
-	children,
-	title,
-	variant,
-	icon,
-}: NoticeProps) {
+export default function Notice({ children }: NoticeProps) {
 	return (
-		<Card variant="flat" className="max-w-2xl my-6">
-			<div className="flex items-center justify-between">
-				{title ? (
-					<Card.Title className="text-xl mb-0">{title}</Card.Title>
-				) : undefined}
-				{!variant && icon ? icon : iconForVariant(variant)}
-			</div>
-			<Card.Text className="mt-4">{children}</Card.Text>
+		<Card className="flex w-full max-w-full gap-4 font-semibold">
+			<CircleSlash2 />
+			{children}
 		</Card>
 	);
 }
-
-function iconForVariant(variant?: 'default' | 'error' | 'warning') {
-	switch (variant) {
-		case 'error':
-			return <TriangleAlert className="text-red-500" />;
-		case 'warning':
-			return <CircleAlert className="text-yellow-500" />;
-		default:
-			return <CircleSlash2 />;
-	}
-}

app/components/NumberInput.tsx

@@ -50,7 +50,7 @@ export default function NumberInput(props: InputProps) {
 				{...groupProps}
 				className={cn(
 					'flex items-center gap-1 rounded-xl pr-1',
-					'focus-within:outline-hidden focus-within:ring-3',
+					'focus-within:outline-none focus-within:ring',
 					'bg-white dark:bg-headplane-900',
 					'border border-headplane-100 dark:border-headplane-800',
 				)}
@@ -60,7 +60,7 @@ export default function NumberInput(props: InputProps) {
 					required={props.isRequired}
 					ref={ref}
 					id={id}
-					className="w-full pl-3 py-2 rounded-l-xl bg-transparent focus:outline-hidden"
+					className="w-full pl-3 py-2 rounded-l-xl bg-transparent focus:outline-none"
 				/>
 				<input type="hidden" name={name} value={state.numberValue} />
 				<IconButton

app/components/Options.tsx

@@ -52,7 +52,7 @@ function Option({ item, state }: OptionsOptionProps) {
 			className={cn(
 				'pl-0.5 pr-2 py-0.5 rounded-lg cursor-pointer',
 				'aria-selected:bg-headplane-100 dark:aria-selected:bg-headplane-950',
-				'focus:outline-hidden focus:ring-3 z-10',
+				'focus:outline-none focus:ring z-10',
 				'border border-headplane-100 dark:border-headplane-800',
 			)}
 		>

app/components/Popover.tsx

@@ -34,7 +34,7 @@ export default function Popover(props: PopoverProps) {
 				{...popoverProps}
 				ref={ref}
 				className={cn(
-					'z-10 shadow-xs rounded-xl',
+					'z-10 shadow-sm rounded-xl',
 					'bg-white dark:bg-headplane-900',
 					'border border-headplane-200 dark:border-headplane-800',
 					className,

app/components/Select.tsx

@@ -60,7 +60,7 @@ function Select(props: SelectProps) {
 			</label>
 			<div
 				className={cn(
-					'flex rounded-xl focus:outline-hidden focus-within:ring-3',
+					'flex rounded-xl focus:outline-none focus-within:ring',
 					'bg-white dark:bg-headplane-900',
 					'border border-headplane-100 dark:border-headplane-800',
 				)}
@@ -69,7 +69,7 @@ function Select(props: SelectProps) {
 					{...inputProps}
 					ref={inputRef}
 					id={id}
-					className="outline-hidden px-3 py-2 rounded-l-xl w-full bg-transparent"
+					className="outline-none px-3 py-2 rounded-l-xl w-full bg-transparent"
 					data-1p-ignore
 				/>
 				<button
@@ -78,9 +78,7 @@ function Select(props: SelectProps) {
 					className={cn(
 						'flex items-center justify-center p-1 rounded-lg m-1',
 						'bg-headplane-100 dark:bg-headplane-700/30 font-medium',
-						props.isDisabled
-							? 'opacity-50 cursor-not-allowed'
-							: 'hover:bg-headplane-200/90 dark:hover:bg-headplane-800/30',
+						'hover:bg-headplane-200/90 dark:hover:bg-headplane-800/30',
 					)}
 				>
 					<ChevronDown className="p-0.5" />
@@ -127,7 +125,7 @@ function ListBox(props: ListBoxProps) {
 		<ul
 			{...listBoxProps}
 			ref={listBoxRef}
-			className="w-full max-h-72 overflow-auto outline-hidden pt-1"
+			className="w-full max-h-72 overflow-auto outline-none pt-1"
 		>
 			{[...state.collection].map((item) => (
 				<Option key={item.key} item={item} state={state} />
@@ -158,7 +156,7 @@ function Option({ item, state }: OptionProps) {
 			className={cn(
 				'flex items-center justify-between',
 				'py-2 px-3 mx-1 rounded-lg mb-1',
-				'focus:outline-hidden select-none',
+				'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',

app/components/Switch.tsx

@@ -11,7 +11,6 @@ import cn from '~/utils/cn';
 export interface SwitchProps extends AriaSwitchProps {
 	label: string;
 	className?: string;
-	switchClassName?: string;
 }
 
 export default function Switch(props: SwitchProps) {
@@ -46,16 +45,14 @@ export default function Switch(props: SwitchProps) {
 					state.isSelected && 'bg-headplane-900 dark:bg-headplane-950',
 					isFocusVisible && 'ring-2',
 					props.isDisabled && 'opacity-50',
-					props.className,
 				)}
 			>
 				<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-full',
-						state.isSelected && 'translate-x-full',
-						props.switchClassName,
+						'translate-x-0 group-selected:translate-x-[100%]',
+						state.isSelected && 'translate-x-[100%]',
 					)}
 				/>
 			</div>

app/components/Tabs.tsx

@@ -56,7 +56,7 @@ function Tab({ item, state }: TabsTabProps) {
 			className={cn(
 				'pl-2 pr-3 py-2.5',
 				'aria-selected:bg-headplane-100 dark:aria-selected:bg-headplane-950',
-				'focus:outline-hidden focus:ring-3 z-10',
+				'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',
 			)}

app/components/Tooltip.tsx

@@ -38,7 +38,7 @@ function Tooltip(props: TooltipProps) {
 				{...triggerProps}
 				className={cn(
 					'flex items-center justify-center',
-					'focus:outline-hidden focus:ring-3 rounded-xl',
+					'focus:outline-none focus:ring rounded-xl',
 				)}
 			>
 				{component}
@@ -65,7 +65,7 @@ function Body({ state, className, ...props }: TooltipBodyProps) {
 			{...mergeProps(props, tooltipProps)}
 			className={cn(
 				'absolute z-50 p-3 top-full mt-1',
-				'outline-hidden rounded-3xl text-sm w-48',
+				'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',

app/components/tags/ExitNode.tsx

@@ -1,32 +0,0 @@
-import { Info } from 'lucide-react';
-import cn from '~/utils/cn';
-import Chip from '../Chip';
-import Tooltip from '../Tooltip';
-
-export interface ExitNodeTagProps {
-	isEnabled?: boolean;
-}
-
-export function ExitNodeTag({ isEnabled }: ExitNodeTagProps) {
-	return (
-		<Tooltip>
-			<Chip
-				text="Exit Node"
-				className={cn(
-					'bg-blue-300 text-blue-900 dark:bg-blue-900 dark:text-blue-300',
-				)}
-				rightIcon={isEnabled ? undefined : <Info className="h-full w-fit" />}
-			/>
-			<Tooltip.Body>
-				{isEnabled ? (
-					<>This machine is acting as an exit node.</>
-				) : (
-					<>
-						This machine is requesting to be used as an exit node. Review this
-						from the "Edit route settings..." option in the machine's menu.
-					</>
-				)}
-			</Tooltip.Body>
-		</Tooltip>
-	);
-}

app/components/tags/Expiry.tsx

@@ -1,42 +0,0 @@
-import Chip from '../Chip';
-import Tooltip from '../Tooltip';
-
-export interface ExpiryTagProps {
-	variant: 'expired' | 'no-expiry';
-	expiry?: string;
-}
-
-export function ExpiryTag({ variant, expiry }: ExpiryTagProps) {
-	const formatter = new Intl.DateTimeFormat('en-US', {
-		month: 'short',
-		day: 'numeric',
-		year: 'numeric',
-	});
-
-	return (
-		<Tooltip>
-			<Chip
-				text={
-					variant === 'expired'
-						? `Expired ${formatter.format(new Date(expiry!))}`
-						: 'No expiry'
-				}
-				className="bg-headplane-200 text-headplane-800 dark:bg-headplane-800 dark:text-headplane-200"
-			/>
-			<Tooltip.Body>
-				{variant === 'expired' ? (
-					<>
-						This machine is expired and will not be able to connect to the
-						network. Re-authenticate with Tailscale on the machine to re-enable
-						it.
-					</>
-				) : (
-					<>
-						This machine has key expiry disabled and will never need to
-						re-authenticate.
-					</>
-				)}
-			</Tooltip.Body>
-		</Tooltip>
-	);
-}

app/components/tags/HeadplaneAgent.tsx

@@ -1,20 +0,0 @@
-import cn from '~/utils/cn';
-import Chip from '../Chip';
-import Tooltip from '../Tooltip';
-
-export function HeadplaneAgentTag() {
-	return (
-		<Tooltip>
-			<Chip
-				text="Headplane Agent"
-				className={cn(
-					'bg-purple-300 text-purple-900 dark:bg-purple-900 dark:text-purple-300',
-				)}
-			/>
-			<Tooltip.Body>
-				This machine is running the Headplane agent, which allows it to provide
-				host information in the web UI.
-			</Tooltip.Body>
-		</Tooltip>
-	);
-}

app/components/tags/Subnet.tsx

@@ -1,32 +0,0 @@
-import { Info } from 'lucide-react';
-import cn from '~/utils/cn';
-import Chip from '../Chip';
-import Tooltip from '../Tooltip';
-
-export interface SubnetTagProps {
-	isEnabled?: boolean;
-}
-
-export function SubnetTag({ isEnabled }: SubnetTagProps) {
-	return (
-		<Tooltip>
-			<Chip
-				text="Subnets"
-				className={cn(
-					'bg-blue-300 text-blue-900 dark:bg-blue-900 dark:text-blue-300',
-				)}
-				rightIcon={isEnabled ? undefined : <Info className="h-full w-fit" />}
-			/>
-			<Tooltip.Body>
-				{isEnabled ? (
-					<>This machine advertises subnet routes.</>
-				) : (
-					<>
-						This machine has unadvertised subnet routes. Review this from the
-						"Edit route settings..." option in the machine's menu.
-					</>
-				)}
-			</Tooltip.Body>
-		</Tooltip>
-	);
-}

app/components/tags/TailscaleSSH.tsx

@@ -1,21 +0,0 @@
-import cn from '~/utils/cn';
-import Chip from '../Chip';
-import Tooltip from '../Tooltip';
-
-export function TailscaleSSHTag() {
-	return (
-		<Tooltip>
-			<Chip
-				text="Tailscale SSH"
-				className={cn(
-					'bg-lime-500 text-lime-900 dark:bg-lime-900 dark:text-lime-500',
-				)}
-			/>
-			<Tooltip.Body>
-				This machine advertises Tailscale SSH, which allows you to authenticate
-				SSH credentials using your Tailscale account and via the Headplane web
-				UI.
-			</Tooltip.Body>
-		</Tooltip>
-	);
-}

app/layouts/dashboard.tsx

@@ -1,30 +1,30 @@
-import { type LoaderFunctionArgs, Outlet, redirect } from 'react-router';
+import { XCircleFillIcon } from '@primer/octicons-react';
+import { type LoaderFunctionArgs, redirect } from 'react-router';
+import { Outlet, useLoaderData } from 'react-router';
 import { ErrorPopup } from '~/components/Error';
 import type { LoadContext } from '~/server';
-import { pruneEphemeralNodes } from '~/server/db/pruner';
 import ResponseError from '~/server/headscale/api-error';
+import cn from '~/utils/cn';
 import log from '~/utils/log';
 
 export async function loader({
 	request,
 	context,
-	...rest
 }: LoaderFunctionArgs<LoadContext>) {
 	const healthy = await context.client.healthcheck();
 	const session = await context.sessions.auth(request);
-	await pruneEphemeralNodes({ context, request, ...rest });
 
 	// We shouldn't session invalidate if Headscale is down
 	// TODO: Notify in the logs or the UI that OIDC auth key is wrong if enabled
 	if (healthy) {
 		try {
-			await context.client.get('v1/apikey', session.api_key);
+			await context.client.get('v1/apikey', session.get('api_key')!);
 		} catch (error) {
 			if (error instanceof ResponseError) {
 				log.debug('api', 'API Key validation failed %o', error);
 				return redirect('/login', {
 					headers: {
-						'Set-Cookie': await context.sessions.destroySession(),
+						'Set-Cookie': await context.sessions.destroy(session),
 					},
 				});
 			}
@@ -37,10 +37,33 @@ export async function loader({
 }
 
 export default function Layout() {
+	const { healthy } = useLoaderData<typeof loader>();
+
 	return (
-		<main className="container mx-auto overscroll-contain mt-4 mb-24">
-			<Outlet />
-		</main>
+		<>
+			{!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>
+		</>
 	);
 }
 

app/layouts/shell.tsx

@@ -1,4 +1,3 @@
-import { eq } from 'drizzle-orm';
 import { CircleCheckIcon } from 'lucide-react';
 import {
 	LoaderFunctionArgs,
@@ -11,8 +10,9 @@ import Card from '~/components/Card';
 import Footer from '~/components/Footer';
 import Header from '~/components/Header';
 import type { LoadContext } from '~/server';
-import { users } from '~/server/db/schema';
 import { Capabilities } from '~/server/web/roles';
+import { User } from '~/types';
+import log from '~/utils/log';
 import toast from '~/utils/toast';
 
 // This loads the bare minimum for the application to function
@@ -23,18 +23,72 @@ export async function loader({
 }: LoaderFunctionArgs<LoadContext>) {
 	try {
 		const session = await context.sessions.auth(request);
-		if (
-			context.oidc &&
-			session.user.subject !== 'unknown-non-oauth' &&
-			!request.url.endsWith('/onboarding')
-		) {
-			const [user] = await context.db
-				.select()
-				.from(users)
-				.where(eq(users.sub, session.user.subject))
-				.limit(1);
+		if (!session.has('api_key')) {
+			// There is a session, but it's not valid
+			return redirect('/login', {
+				headers: {
+					'Set-Cookie': await context.sessions.destroy(session),
+				},
+			});
+		}
 
-			if (!user?.onboarded) {
+		// Onboarding is only a feature of the OIDC flow
+		if (context.oidc && !request.url.endsWith('/onboarding')) {
+			let onboarded = false;
+
+			const sessionUser = session.get('user');
+			if (sessionUser) {
+				if (context.sessions.onboardForSubject(sessionUser.subject)) {
+					// Assume onboarded
+					onboarded = true;
+				} else {
+					try {
+						const { users } = await context.client.get<{ users: User[] }>(
+							'v1/user',
+							session.get('api_key')!,
+						);
+
+						if (users.length === 0) {
+							onboarded = false;
+						}
+
+						const user = users.find((u) => {
+							if (u.provider !== 'oidc') {
+								return false;
+							}
+
+							// For some reason, headscale makes providerID a url where the
+							// last component is the subject, so we need to strip that out
+							const subject = u.providerId?.split('/').pop();
+							if (!subject) {
+								return false;
+							}
+
+							const sessionUser = session.get('user');
+							if (!sessionUser) {
+								return false;
+							}
+
+							if (context.sessions.onboardForSubject(sessionUser.subject)) {
+								// Assume onboarded
+								return true;
+							}
+
+							return subject === sessionUser.subject;
+						});
+
+						if (user) {
+							onboarded = true;
+						}
+					} catch (e) {
+						// If we cannot lookup users, just assume our user is onboarded
+						log.debug('api', 'Failed to lookup users %o', e);
+						onboarded = true;
+					}
+				}
+			}
+
+			if (!onboarded) {
 				return redirect('/onboarding');
 			}
 		}
@@ -45,7 +99,7 @@ export async function loader({
 			url: context.config.headscale.public_url ?? context.config.headscale.url,
 			configAvailable: context.hs.readable(),
 			debug: context.config.debug,
-			user: session.user,
+			user: session.get('user'),
 			uiAccess: check,
 			access: {
 				ui: await context.sessions.check(request, Capabilities.ui_access),
@@ -62,14 +116,10 @@ export async function loader({
 				),
 			},
 			onboarding: request.url.endsWith('/onboarding'),
-			healthy: await context.client.healthcheck(),
 		};
 	} catch {
-		return redirect('/login', {
-			headers: {
-				'Set-Cookie': await context.sessions.destroySession(),
-			},
-		});
+		// No session, so we can just return
+		return redirect('/login');
 	}
 }
 

app/root.tsx

@@ -8,7 +8,6 @@ import {
 	useNavigation,
 } from 'react-router';
 import '@fontsource-variable/inter';
-import { ExternalScripts } from 'remix-utils/external-scripts';
 import { ErrorPopup } from '~/components/Error';
 import ProgressBar from '~/components/ProgressBar';
 import ToastProvider from '~/components/ToastProvider';
@@ -39,17 +38,15 @@ export function Layout({ children }: { readonly children: React.ReactNode }) {
 			<html lang="en">
 				<head>
 					<meta charSet="utf-8" />
-					<meta content="width=device-width, initial-scale=1" name="viewport" />
+					<meta name="viewport" content="width=device-width, initial-scale=1" />
 					<Meta />
 					<Links />
-					<link href="favicon.ico" rel="icon" />
 				</head>
 				<body className="overscroll-none dark:bg-headplane-900 dark:text-headplane-50">
 					{children}
 					<ToastProvider queue={toastQueue} />
 					<ScrollRestoration />
 					<Scripts />
-					<ExternalScripts />
 				</body>
 			</html>
 		</LiveDataProvider>

app/routes.ts

@@ -6,11 +6,10 @@ export default [
 	route('/healthz', 'routes/util/healthz.ts'),
 
 	// Authentication Routes
-	route('/login', 'routes/auth/login/page.tsx'),
+	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'),
-	route('/ssh', 'routes/ssh/console.tsx'),
 
 	// All the main logged-in dashboard routes
 	// Double nested to separate error propagations
@@ -29,8 +28,7 @@ export default [
 
 			...prefix('/settings', [
 				index('routes/settings/overview.tsx'),
-				route('/auth-keys', 'routes/settings/auth-keys/overview.tsx'),
-				route('/restrictions', 'routes/settings/restrictions/overview.tsx'),
+				route('/auth-keys', 'routes/settings/auth-keys.tsx'),
 				// route('/local-agent', 'routes/settings/local-agent.tsx'),
 			]),
 		]),

app/routes/acls/acl-action.ts

@@ -31,7 +31,7 @@ export async function aclAction({
 		const { policy, updatedAt } = await context.client.put<{
 			policy: string;
 			updatedAt: string;
-		}>('v1/policy', session.api_key, {
+		}>('v1/policy', session.get('api_key')!, {
 			policy: policyData,
 		});
 

app/routes/acls/acl-loader.ts

@@ -34,7 +34,7 @@ export async function aclLoader({
 		const { policy, updatedAt } = await context.client.get<{
 			policy: string;
 			updatedAt: string | null;
-		}>('v1/policy', session.api_key);
+		}>('v1/policy', session.get('api_key')!);
 
 		// Successfully loaded the policy, mark it as readable
 		// If `updatedAt` is null, it means the policy is in file mode.

app/routes/acls/components/error.tsx

@@ -0,0 +1,45 @@
+import { AlertIcon } from '@primer/octicons-react';
+import React from 'react';
+import Card from '~/components/Card';
+
+interface NoticeViewProps {
+	title: string;
+	children: React.ReactNode;
+}
+
+export function NoticeView({ children, title }: NoticeViewProps) {
+	return (
+		<Card variant="flat" className="max-w-2xl my-8">
+			<div className="flex items-center justify-between">
+				<Card.Title className="text-xl mb-0">{title}</Card.Title>
+				<AlertIcon className="w-8 h-8 text-yellow-500" />
+			</div>
+			<Card.Text className="mt-4">{children}</Card.Text>
+		</Card>
+	);
+}
+
+interface ErrorViewProps {
+	children: string;
+}
+
+export function ErrorView({ children }: ErrorViewProps) {
+	const [title, ...rest] = children.split(':');
+	const formattedMessage = rest.length > 0 ? rest.join(':').trim() : children;
+
+	return (
+		<Card variant="flat" className="max-w-2xl mb-4">
+			<div className="flex items-center justify-between">
+				<Card.Title className="text-xl mb-0">
+					{title.trim() ?? 'Error'}
+				</Card.Title>
+				<AlertIcon className="w-8 h-8 text-red-500" />
+			</div>
+			<Card.Text className="mt-4">
+				Could not apply changes to the ACL policy:
+				<br />
+				<span className="font-mono">{formattedMessage}</span>
+			</Card.Text>
+		</Card>
+	);
+}

app/routes/acls/overview.tsx

@@ -17,6 +17,7 @@ import toast from '~/utils/toast';
 import { aclAction } from './acl-action';
 import { aclLoader } from './acl-loader';
 import { Differ, Editor } from './components/cm.client';
+import { ErrorView, NoticeView } from './components/error';
 
 export async function loader(request: LoaderFunctionArgs<LoadContext>) {
 	return aclLoader(request);
@@ -56,19 +57,19 @@ export default function Page() {
 	return (
 		<div>
 			{!access ? (
-				<Notice title="ACL Policy restricted" variant="warning">
+				<NoticeView title="ACL Policy restricted">
 					You do not have the necessary permissions to edit the Access Control
 					List policy. Please contact your administrator to request access or to
 					make changes to the ACL policy.
-				</Notice>
+				</NoticeView>
 			) : !writable ? (
-				<Notice title="Read-only ACL Policy" variant="error">
+				<NoticeView title="Read-only ACL Policy">
 					The ACL policy mode is most likely set to <Code>file</Code> in your
 					Headscale configuration. This means that the ACL file cannot be edited
 					through the web interface. In order to resolve this, you'll need to
-					set <Code>policy.mode</Code> to <Code>database</Code> in your
-					Headscale configuration.
-				</Notice>
+					set <Code>acl.mode</Code> to <Code>database</Code> in your Headscale
+					configuration.
+				</NoticeView>
 			) : undefined}
 			<h1 className="text-2xl font-medium mb-4">Access Control List (ACL)</h1>
 			<p className="mb-4 max-w-prose">
@@ -90,13 +91,7 @@ export default function Page() {
 				.
 			</p>
 			{fetcher.data?.error !== undefined ? (
-				<Notice
-					variant="error"
-					title={fetcher.data.error.split(':')[0] ?? 'Error'}
-				>
-					{fetcher.data.error.split(':').slice(1).join(': ') ??
-						'An unknown error occurred while trying to update the ACL policy.'}
-				</Notice>
+				<ErrorView>{fetcher.data.error}</ErrorView>
 			) : undefined}
 			<Tabs label="ACL Editor" className="mb-4">
 				<Tabs.Item
@@ -155,6 +150,7 @@ export default function Page() {
 				}
 				onPress={() => {
 					const formData = new FormData();
+					console.log(codePolicy);
 					formData.append('policy', codePolicy);
 					fetcher.submit(formData, { method: 'PATCH' });
 				}}

app/routes/auth/login.tsx

@@ -0,0 +1,186 @@
+import { useEffect } from 'react';
+import {
+	type ActionFunctionArgs,
+	type LoaderFunctionArgs,
+	redirect,
+	useSearchParams,
+} from 'react-router';
+import { Form, useActionData, useLoaderData } from 'react-router';
+import Button from '~/components/Button';
+import Card from '~/components/Card';
+import Code from '~/components/Code';
+import Input from '~/components/Input';
+import type { LoadContext } from '~/server';
+import type { Key } from '~/types';
+
+export async function loader({
+	request,
+	context,
+}: LoaderFunctionArgs<LoadContext>) {
+	const qp = new URL(request.url).searchParams;
+	const state = qp.get('s');
+
+	try {
+		const session = await context.sessions.auth(request);
+		if (session.has('api_key')) {
+			return redirect('/machines');
+		}
+	} catch {}
+
+	const disableApiKeyLogin = context.config.oidc?.disable_api_key_login;
+	if (context.oidc && disableApiKeyLogin) {
+		// Prevents automatic redirect loop if OIDC is enabled and API key login is disabled
+		// Since logging out would just log back in based on the redirects
+
+		if (state !== 'logout') {
+			return redirect('/oidc/start');
+		}
+	}
+
+	return {
+		oidc: context.oidc,
+		disableApiKeyLogin,
+		state,
+	};
+}
+
+export async function action({
+	request,
+	context,
+}: ActionFunctionArgs<LoadContext>) {
+	const formData = await request.formData();
+	const oidcStart = formData.get('oidc-start');
+	const session = await context.sessions.getOrCreate(request);
+
+	if (oidcStart) {
+		if (!context.oidc) {
+			throw new Error('OIDC is not enabled');
+		}
+
+		return redirect('/oidc/start');
+	}
+
+	const apiKey = String(formData.get('api-key'));
+
+	// Test the API key
+	try {
+		const apiKeys = await context.client.get<{ apiKeys: Key[] }>(
+			'v1/apikey',
+			apiKey,
+		);
+
+		const key = apiKeys.apiKeys.find((k) => apiKey.startsWith(k.prefix));
+		if (!key) {
+			return {
+				error: 'Invalid API key',
+			};
+		}
+
+		const expiry = new Date(key.expiration);
+		const expiresIn = expiry.getTime() - Date.now();
+		const expiresDays = Math.round(expiresIn / 1000 / 60 / 60 / 24);
+
+		session.set('state', 'auth');
+		session.set('api_key', apiKey);
+		session.set('user', {
+			subject: 'unknown-non-oauth',
+			name: key.prefix,
+			email: `${expiresDays.toString()} days`,
+		});
+
+		return redirect('/machines', {
+			headers: {
+				'Set-Cookie': await context.sessions.commit(session, {
+					maxAge: expiresIn,
+				}),
+			},
+		});
+	} catch {
+		return {
+			error: 'Invalid API key',
+		};
+	}
+}
+
+export default function Page() {
+	const { state, disableApiKeyLogin, oidc } = useLoaderData<typeof loader>();
+	const actionData = useActionData<typeof action>();
+	const [params] = useSearchParams();
+
+	useEffect(() => {
+		// State is a one time thing, we need to remove it after it has
+		// been consumed to prevent logic loops.
+		if (state !== null) {
+			const searchParams = new URLSearchParams(params);
+			searchParams.delete('s');
+
+			// Replacing because it's not a navigation, just a cleanup of the URL
+			// We can't use the useSearchParams method since it revalidates
+			// which will trigger a full reload
+			const newUrl = searchParams.toString()
+				? `{${window.location.pathname}?${searchParams.toString()}`
+				: window.location.pathname;
+
+			window.history.replaceState(null, '', newUrl);
+		}
+	}, [state, params]);
+
+	if (state === 'logout') {
+		return (
+			<div className="flex min-h-screen items-center justify-center">
+				<Card className="max-w-sm m-4 sm:m-0" variant="raised">
+					<Card.Title>You have been logged out</Card.Title>
+					<Card.Text>
+						You can now close this window. If you would like to log in again,
+						please refresh the page.
+					</Card.Text>
+				</Card>
+			</div>
+		);
+	}
+
+	return (
+		<div className="flex min-h-screen items-center justify-center">
+			<Card className="max-w-sm m-4 sm:m-0" variant="raised">
+				<Card.Title>Welcome to Headplane</Card.Title>
+				{!disableApiKeyLogin ? (
+					<Form method="post">
+						<Card.Text>
+							Enter an API key to authenticate with Headplane. You can generate
+							one by running <Code>headscale apikeys create</Code> in your
+							terminal.
+						</Card.Text>
+
+						{actionData?.error ? (
+							<p className="text-red-500 text-sm mb-2">{actionData.error}</p>
+						) : undefined}
+						<Input
+							isRequired
+							labelHidden
+							label="API Key"
+							name="api-key"
+							placeholder="API Key"
+							type="password"
+							className="mt-4 mb-2"
+						/>
+						<Button className="w-full" variant="heavy" type="submit">
+							Sign In
+						</Button>
+					</Form>
+				) : undefined}
+				{oidc ? (
+					<Form method="POST">
+						<input type="hidden" name="oidc-start" value="true" />
+						<Button
+							className="w-full mt-2"
+							variant={disableApiKeyLogin ? 'heavy' : 'light'}
+							type="submit"
+						>
+							Single Sign-On
+						</Button>
+					</Form>
+				) : undefined}
+			</Card>
+		</div>
+	);
+}

app/routes/auth/login/action.ts

@@ -1,104 +0,0 @@
-import { ActionFunctionArgs, data, redirect } from 'react-router';
-import { LoadContext } from '~/server';
-import ResponseError from '~/server/headscale/api-error';
-import { Key } from '~/types';
-import log from '~/utils/log';
-
-export async function loginAction({
-	request,
-	context,
-}: ActionFunctionArgs<LoadContext>) {
-	const formData = await request.formData();
-	const apiKey = formData.has('api_key')
-		? String(formData.get('api_key'))
-		: undefined;
-
-	if (apiKey === undefined) {
-		log.warn('auth', 'Request made without API key');
-		log.warn(
-			'auth',
-			'If this is unexpected, ensure your reverse proxy (if applicable) is configured correctly',
-		);
-		throw data('Missing `api_key`', { status: 400 });
-	}
-
-	if (apiKey.length === 0) {
-		log.warn('auth', 'Request made with empty API key');
-		log.warn(
-			'auth',
-			'If this is unexpected, ensure your reverse proxy (if applicable) is configured correctly',
-		);
-		throw data('Received an empty `api_key`', { status: 400 });
-	}
-
-	try {
-		const { apiKeys } = await context.client.get<{ apiKeys: Key[] }>(
-			'v1/apikey',
-			apiKey,
-		);
-
-		// We don't need to check for 0 API keys because this request cannot
-		// be authenticated correctly without an API key
-		const lookup = apiKeys.find((key) => apiKey.startsWith(key.prefix));
-		if (!lookup) {
-			return {
-				success: false,
-				message: 'API key was not found in the Headscale database',
-			};
-		}
-
-		if (lookup.expiration === null || lookup.expiration === undefined) {
-			log.error('auth', 'Got an API key without an expiration');
-			throw data('API key is malformed', { status: 500 });
-		}
-
-		const expiry = new Date(lookup.expiration);
-		if (expiry.getTime() < Date.now()) {
-			return {
-				success: false,
-				message: 'API key has expired',
-			};
-		}
-
-		const expiresDays = Math.round(
-			(expiry.getTime() - Date.now()) / 1000 / 60 / 60 / 24,
-		);
-
-		return redirect('/machines', {
-			headers: {
-				'Set-Cookie': await context.sessions.createSession(
-					{
-						api_key: apiKey,
-						user: {
-							subject: 'unknown-non-oauth',
-							name: `${lookup.prefix}...`,
-							email: `expires@${expiresDays.toString()}-days`,
-						},
-					},
-					expiry.getTime() - Date.now(),
-				),
-			},
-		});
-	} catch (error) {
-		if (error instanceof ResponseError) {
-			// TODO: What in gods name is wrong with the headscale API?
-			if (
-				error.status === 401 ||
-				error.status === 403 ||
-				(error.status === 500 && error.response.trim() === 'Unauthorized')
-			) {
-				return {
-					success: false,
-					message: 'API key is invalid (it may be incorrect or expired)',
-				};
-			}
-		}
-
-		log.error('auth', 'Error while validating API key: %s', error);
-		log.debug('auth', 'Error details: %o', error);
-		return {
-			success: false,
-			message: 'Error while validating API key (see logs for details)',
-		};
-	}
-}

app/routes/auth/login/logout.tsx

@@ -1,15 +0,0 @@
-import Card from '~/components/Card';
-
-export default function Logout() {
-	return (
-		<div className="flex w-screen h-screen items-center justify-center">
-			<Card className="max-w-md m-4 sm:m-0">
-				<Card.Title>You have been logged out</Card.Title>
-				<Card.Text>
-					You can now close this window. If you would like to log in again,
-					please refresh the page.
-				</Card.Text>
-			</Card>
-		</div>
-	);
-}

app/routes/auth/login/page.tsx

@@ -1,132 +0,0 @@
-import { useEffect } from 'react';
-import {
-	ActionFunctionArgs,
-	data,
-	Form,
-	LoaderFunctionArgs,
-	Link as RemixLink,
-	redirect,
-	useActionData,
-	useLoaderData,
-	useSearchParams,
-} from 'react-router';
-import Button from '~/components/Button';
-import Card from '~/components/Card';
-import Code from '~/components/Code';
-import Input from '~/components/Input';
-import type { LoadContext } from '~/server';
-import { useLiveData } from '~/utils/live-data';
-import { loginAction } from './action';
-import Logout from './logout';
-
-export async function loader({
-	request,
-	context,
-}: LoaderFunctionArgs<LoadContext>) {
-	try {
-		await context.sessions.auth(request);
-		return redirect('/machines');
-	} catch {}
-
-	const qp = new URL(request.url).searchParams;
-	const state = qp.get('s') ?? undefined;
-
-	// OIDC config cannot be undefined if an OIDC client is set
-	// Also check if we are in a logout state and skip redirect if we are
-	const ssoOnly = context.config.oidc?.disable_api_key_login;
-	if (state !== 'logout' && ssoOnly) {
-		// This shouldn't be possible, but still a safe sanity check
-		if (!context.oidc) {
-			throw data(
-				'`oidc.disable_api_key_login` was set without a valid OIDC configuration',
-				{
-					status: 400,
-				},
-			);
-		}
-
-		return redirect('/oidc/start');
-	}
-
-	return {
-		oidc: context.oidc,
-		state,
-	};
-}
-
-export async function action(request: ActionFunctionArgs<LoadContext>) {
-	return loginAction(request);
-}
-
-export default function Page() {
-	const { state, oidc } = useLoaderData<typeof loader>();
-	const formData = useActionData<typeof action>();
-	const [params] = useSearchParams();
-	const { pause } = useLiveData();
-
-	useEffect(() => {
-		// This page does NOT need stale while revalidate logic
-		pause();
-	});
-
-	useEffect(() => {
-		// State is a one time thing, we need to remove it after it has
-		// been consumed to prevent logic loops.
-		if (state !== null) {
-			const searchParams = new URLSearchParams(params);
-			searchParams.delete('s');
-
-			// Replacing because it's not a navigation, just a cleanup of the URL
-			// We can't use the useSearchParams method since it revalidates
-			// which will trigger a full reload
-			const newUrl = searchParams.toString()
-				? `{${window.location.pathname}?${searchParams.toString()}`
-				: window.location.pathname;
-
-			window.history.replaceState(null, '', newUrl);
-		}
-	}, [state, params]);
-
-	if (state === 'logout') {
-		return <Logout />;
-	}
-
-	return (
-		<div className="flex w-screen h-screen items-center justify-center">
-			<Card className="max-w-md m-4 sm:m-0">
-				<Card.Title>Welcome to Headplane</Card.Title>
-				<Form method="POST">
-					<Card.Text>
-						Enter an API key to authenticate with Headplane. You can generate
-						one by running <Code>headscale apikeys create</Code> in your
-						terminal.
-					</Card.Text>
-					<Input
-						className="mt-8 mb-2"
-						isRequired
-						label="API Key"
-						labelHidden
-						name="api_key"
-						placeholder="API Key"
-						type="password"
-					/>
-					{formData?.success === false ? (
-						<Card.Text className="text-sm mb-2 text-red-600 dark:text-red-300">
-							{formData.message}
-						</Card.Text>
-					) : undefined}
-					<Button className="w-full" type="submit" variant="heavy">
-						Sign In
-					</Button>
-				</Form>
-				{oidc ? (
-					<RemixLink to="/oidc/start">
-						<Button className="w-full mt-2" variant="light">
-							Single Sign-On
-						</Button>
-					</RemixLink>
-				) : undefined}
-			</Card>
-		</div>
-	);
-}

app/routes/auth/logout.ts

@@ -9,10 +9,9 @@ export async function action({
 	request,
 	context,
 }: ActionFunctionArgs<LoadContext>) {
-	try {
-		await context.sessions.auth(request);
-	} catch {
-		redirect('/login');
+	const session = await context.sessions.auth(request);
+	if (!session.has('api_key')) {
+		return redirect('/login');
 	}
 
 	// When API key is disabled, we need to explicitly redirect
@@ -23,7 +22,7 @@ export async function action({
 
 	return redirect(url, {
 		headers: {
-			'Set-Cookie': await context.sessions.destroySession(),
+			'Set-Cookie': await context.sessions.destroy(session),
 		},
 	});
 }

app/routes/auth/oidc-callback.ts

@@ -1,21 +1,9 @@
-import { createHash } from 'node:crypto';
-import { count, eq } from 'drizzle-orm';
-import { createCookie, type LoaderFunctionArgs, redirect } from 'react-router';
-import { ulid } from 'ulidx';
+import { type LoaderFunctionArgs, Session, redirect } from 'react-router';
 import type { LoadContext } from '~/server';
-import { HeadplaneConfig } from '~/server/config/schema';
-import { users } from '~/server/db/schema';
-import { Roles } from '~/server/web/roles';
-import { FlowUser, finishAuthFlow, formatError } from '~/utils/oidc';
+import type { AuthSession, OidcFlowSession } from '~/server/web/sessions';
+import { finishAuthFlow, formatError } from '~/utils/oidc';
 import { send } from '~/utils/res';
 
-interface OidcFlowSession {
-	state: string;
-	nonce: string;
-	code_verifier: string;
-	redirect_uri: string;
-}
-
 export async function loader({
 	request,
 	context,
@@ -30,21 +18,13 @@ export async function loader({
 		return redirect('/login');
 	}
 
-	const cookie = createCookie('__oidc_auth_flow', {
-		httpOnly: true,
-		maxAge: 300, // 5 minutes
-	});
-
-	const data: OidcFlowSession | null = await cookie.parse(
-		request.headers.get('Cookie'),
-	);
-
-	if (data === null) {
-		console.warn('OIDC flow session not found');
-		return redirect('/login');
+	const session = await context.sessions.getOrCreate<OidcFlowSession>(request);
+	if (session.get('state') !== 'flow') {
+		return redirect('/login'); // Haven't started an OIDC flow
 	}
 
-	const { code_verifier, state, nonce, redirect_uri } = data;
+	const payload = session.get('oidc')!;
+	const { code_verifier, state, nonce, redirect_uri } = payload;
 	if (!code_verifier || !state || !nonce || !redirect_uri) {
 		return send({ error: 'Missing OIDC state' }, { status: 400 });
 	}
@@ -62,39 +42,20 @@ export async function loader({
 	};
 
 	try {
-		let user = await finishAuthFlow(context.oidc, flowOptions);
-		user = {
-			...user,
-			picture: setOidcPictureForSource(
-				user,
-				context.config.oidc?.profile_picture_source ?? 'oidc',
-			),
-		};
-
-		const [{ count: userCount }] = await context.db
-			.select({ count: count() })
-			.from(users)
-			.where(eq(users.caps, Roles.owner));
-
-		await context.db
-			.insert(users)
-			.values({
-				id: ulid(),
-				sub: user.subject,
-				caps: userCount === 0 ? Roles.owner : Roles.member,
-			})
-			.onConflictDoNothing();
+		const user = await finishAuthFlow(context.oidc, flowOptions);
+		session.unset('oidc');
+		const userSession = session as Session<AuthSession>;
 
+		// TODO: This is breaking, to stop the "over-generation" of API
+		// keys because they are currently non-deletable in the headscale
+		// database. Look at this in the future once we have a solution
+		// or we have permissioned API keys.
+		userSession.set('user', user);
+		userSession.set('api_key', context.config.oidc?.headscale_api_key!);
+		userSession.set('state', 'auth');
 		return redirect('/machines', {
 			headers: {
-				'Set-Cookie': await context.sessions.createSession({
-					// TODO: This is breaking, to stop the "over-generation" of API
-					// keys because they are currently non-deletable in the headscale
-					// database. Look at this in the future once we have a solution
-					// or we have permissioned API keys.
-					api_key: context.config.oidc?.headscale_api_key!,
-					user,
-				}),
+				'Set-Cookie': await context.sessions.commit(userSession),
 			},
 		});
 	} catch (error) {
@@ -106,26 +67,3 @@ export async function loader({
 		});
 	}
 }
-
-type PictureSource = NonNullable<
-	HeadplaneConfig['oidc']
->['profile_picture_source'];
-
-function setOidcPictureForSource(user: FlowUser, source: PictureSource) {
-	// Already set by default in the callback, so we can just return it
-	if (source === 'oidc') {
-		return user.picture;
-	}
-
-	if (source === 'gravatar') {
-		if (!user.email) {
-			return undefined;
-		}
-
-		const emailHash = user.email.trim().toLowerCase();
-		const hash = createHash('sha256').update(emailHash).digest('hex');
-		return `https://www.gravatar.com/avatar/${hash}?s=200&d=identicon&r=x`;
-	}
-
-	return undefined;
-}

app/routes/auth/oidc-start.ts

@@ -1,43 +1,42 @@
-import { createCookie, type LoaderFunctionArgs, redirect } from 'react-router';
+import { type LoaderFunctionArgs, Session, redirect } from 'react-router';
 import type { LoadContext } from '~/server';
+import { AuthSession, OidcFlowSession } from '~/server/web/sessions';
 import { beginAuthFlow, getRedirectUri } from '~/utils/oidc';
 
 export async function loader({
 	request,
 	context,
 }: LoaderFunctionArgs<LoadContext>) {
-	try {
-		await context.sessions.auth(request);
+	const session = await context.sessions.getOrCreate<OidcFlowSession>(request);
+	if ((session as Session<AuthSession>).has('api_key')) {
 		return redirect('/machines');
-	} catch {}
-
-	if (!context.oidc || !context.config.oidc) {
-		throw new Error('OIDC is not enabled');
 	}
 
-	const cookie = createCookie('__oidc_auth_flow', {
-		httpOnly: true,
-		maxAge: 300, // 5 minutes
-	});
+	if (!context.oidc) {
+		throw new Error('OIDC is not enabled');
+	}
 
 	const redirectUri =
 		context.config.oidc?.redirect_uri ?? getRedirectUri(request);
 	const data = await beginAuthFlow(
 		context.oidc,
 		redirectUri,
-		context.config.oidc.scope,
-		context.config.oidc.extra_params,
+		// We can't get here without the OIDC config being defined
+		context.config.oidc!.token_endpoint_auth_method,
 	);
 
+	session.set('state', 'flow');
+	session.set('oidc', {
+		state: data.state,
+		nonce: data.nonce,
+		code_verifier: data.codeVerifier,
+		redirect_uri: redirectUri,
+	});
+
 	return redirect(data.url, {
 		status: 302,
 		headers: {
-			'Set-Cookie': await cookie.serialize({
-				state: data.state,
-				nonce: data.nonce,
-				code_verifier: data.codeVerifier,
-				redirect_uri: redirectUri,
-			}),
+			'Set-Cookie': await context.sessions.commit(session),
 		},
 	});
 }

app/routes/dns/components/manage-domains.tsx

@@ -167,7 +167,7 @@ function Domain({ domain, id, isDragging, isDisabled }: DomainProps) {
 			ref={setNodeRef}
 			className={cn(
 				isSortableDragging ? 'opacity-50' : '',
-				isDragging ? 'ring-3 bg-white dark:bg-headplane-900' : '',
+				isDragging ? 'ring bg-white dark:bg-headplane-900' : '',
 			)}
 			style={{
 				transform: CSS.Transform.toString(transform),
@@ -179,7 +179,7 @@ function Domain({ domain, id, isDragging, isDisabled }: DomainProps) {
 					<GripVertical
 						{...attributes}
 						{...listeners}
-						className="p-0.5 focus:ring-3 outline-hidden rounded-md"
+						className="p-0.5 focus:ring outline-none rounded-md"
 					/>
 				)}
 				{domain}

app/routes/dns/components/manage-ns.tsx

@@ -1,24 +1,16 @@
-import { Info } from 'lucide-react';
-import { Form, useSubmit } from 'react-router';
+import { Form } from 'react-router';
 import Button from '~/components/Button';
 import Link from '~/components/Link';
-import Switch from '~/components/Switch';
 import TableList from '~/components/TableList';
-import Tooltip from '~/components/Tooltip';
 import cn from '~/utils/cn';
 import AddNS from '../dialogs/add-ns';
 
 interface Props {
 	nameservers: Record<string, string[]>;
-	overrideLocalDns: boolean;
 	isDisabled: boolean;
 }
 
-export default function ManageNS({
-	nameservers,
-	isDisabled,
-	overrideLocalDns,
-}: Props) {
+export default function ManageNS({ nameservers, isDisabled }: Props) {
 	return (
 		<div className="flex flex-col w-2/3">
 			<h1 className="text-2xl font-medium mb-4">Nameservers</h1>
@@ -39,7 +31,6 @@ export default function ManageNS({
 						isGlobal={key === 'global'}
 						isDisabled={isDisabled}
 						nameservers={nameservers}
-						overrideLocalDns={overrideLocalDns}
 						name={key}
 					/>
 				))}
@@ -54,7 +45,6 @@ interface ListProps {
 	isGlobal: boolean;
 	isDisabled: boolean;
 	nameservers: Record<string, string[]>;
-	overrideLocalDns: boolean;
 	name: string;
 }
 
@@ -62,7 +52,6 @@ function NameserverList({
 	isGlobal,
 	isDisabled,
 	nameservers,
-	overrideLocalDns,
 	name,
 }: ListProps) {
 	const list = isGlobal ? nameservers.global : nameservers[name];
@@ -70,54 +59,12 @@ function NameserverList({
 		return null;
 	}
 
-	const submit = useSubmit();
 	return (
 		<div className="mb-8">
 			<div className="flex items-center justify-between mb-2">
-				{isGlobal ? (
-					<div className="flex items-center justify-between w-full">
-						<h2 className="text-md font-medium opacity-80">
-							Global Nameservers
-						</h2>
-						<div className="flex items-center gap-2 text-sm">
-							<Tooltip>
-								<Info className="size-4" />
-								<Tooltip.Body>
-									When enabled, use the DNS servers listed below to resolve
-									names outside the tailnet. When disabled (default), devices
-									will prefer their local DNS configuration.
-									<Link
-										to="https://tailscale.com/kb/1054/dns#global-nameservers"
-										name="Tailscale Global Nameservers Documentation"
-									>
-										Learn More
-									</Link>
-								</Tooltip.Body>
-							</Tooltip>
-							<p>Override DNS servers</p>
-							<Switch
-								label="Override local DNS settings"
-								className="h-[15px] w-[23px] p-[2px]"
-								switchClassName="h-[9px] w-[9px]"
-								name="override_dns"
-								defaultSelected={overrideLocalDns}
-								onChange={(v) => {
-									submit(
-										{
-											action_id: 'override_dns',
-											override_dns: v ? 'true' : 'false',
-										},
-										{
-											method: 'POST',
-										},
-									);
-								}}
-							/>
-						</div>
-					</div>
-				) : (
-					<h2 className="text-md font-medium opacity-80">{name}</h2>
-				)}
+				<h2 className="text-md font-medium opacity-80">
+					{isGlobal ? 'Global Nameservers' : name}
+				</h2>
 			</div>
 			<TableList>
 				{list.length > 0

app/routes/dns/components/manage-records.tsx

@@ -17,7 +17,7 @@ export default function ManageRecords({ records, isDisabled }: Props) {
 			<h1 className="text-2xl font-medium mb-4">DNS Records</h1>
 			<p>
 				Headscale supports adding custom DNS records to your Tailnet. As of now,
-				only <Code>A</Code> and <Code>AAAA</Code> records are supported.{' '}
+				only <Code>A</Code> records are supported.{' '}
 				<Link
 					to="https://headscale.net/stable/ref/dns"
 					name="Headscale DNS Records documentation"
@@ -34,19 +34,19 @@ export default function ManageRecords({ records, isDisabled }: Props) {
 					) : (
 						records.map((record, index) => (
 							<TableList.Item key={`${record.name}-${record.value}`}>
-								<div className="flex gap-2 items-center w-full">
-									<p
-										className={cn(
-											'font-mono text-sm font-bold py-1 px-2 rounded-md text-center',
-											'bg-headplane-100 dark:bg-headplane-700/30 min-w-12',
-										)}
-									>
-										{record.type}
-									</p>
-									<div className="grid grid-cols-2 gap-2 w-full">
+								<div className="flex gap-24 items-center">
+									<div className="flex gap-4 items-center">
+										<p
+											className={cn(
+												'font-mono text-sm font-bold py-1 px-2 rounded-md',
+												'bg-headplane-100 dark:bg-headplane-700/30',
+											)}
+										>
+											{record.type}
+										</p>
 										<p className="font-mono text-sm">{record.name}</p>
-										<p className="font-mono text-sm">{record.value}</p>
 									</div>
+									<p className="font-mono text-sm">{record.value}</p>
 								</div>
 								<Form method="POST">
 									<input type="hidden" name="action_id" value="remove_record" />

app/routes/dns/dialogs/add-ns.tsx

@@ -1,4 +1,4 @@
-import { Split } from 'lucide-react';
+import { RepoForkedIcon } from '@primer/octicons-react';
 import { useMemo, useState } from 'react';
 import Chip from '~/components/Chip';
 import Dialog from '~/components/Dialog';
@@ -35,15 +35,15 @@ export default function AddNameserver({ nameservers }: Props) {
 			<Dialog.Button>Add nameserver</Dialog.Button>
 			<Dialog.Panel>
 				<Dialog.Title className="mb-4">Add nameserver</Dialog.Title>
-				<input name="action_id" type="hidden" value="add_ns" />
+				<input type="hidden" name="action_id" value="add_ns" />
 				<Input
-					description="Use this IPv4 or IPv6 address to resolve names."
-					isInvalid={isInvalid}
 					isRequired
 					label="Nameserver"
+					description="Use this IPv4 or IPv6 address to resolve names."
+					placeholder="1.2.3.4"
 					name="ns"
 					onChange={setNs}
-					placeholder="1.2.3.4"
+					isInvalid={isInvalid}
 				/>
 				<div className="flex items-center justify-between mt-8">
 					<div className="block">
@@ -53,9 +53,9 @@ export default function AddNameserver({ nameservers }: Props) {
 							</Dialog.Text>
 							<Tooltip>
 								<Chip
-									className={cn('inline-flex items-center')}
-									leftIcon={<Split className="w-3 h-3 mr-0.5" />}
 									text="Split DNS"
+									leftIcon={<RepoForkedIcon className="w-4 h-4 mr-0.5" />}
+									className={cn('inline-flex items-center')}
 								/>
 								<Tooltip.Body>
 									Only clients that support split DNS (Tailscale v1.8 or later
@@ -76,9 +76,9 @@ export default function AddNameserver({ nameservers }: Props) {
 						<Input
 							isRequired={split === true}
 							label="Domain"
+							placeholder="example.com"
 							name="split_name"
 							onChange={setDomain}
-							placeholder="example.com"
 						/>
 						<Dialog.Text className="text-sm">
 							Only single-label or fully-qualified queries matching this suffix
@@ -86,7 +86,7 @@ export default function AddNameserver({ nameservers }: Props) {
 						</Dialog.Text>
 					</>
 				) : (
-					<input name="split_name" type="hidden" value="global" />
+					<input type="hidden" name="split_name" value="global" />
 				)}
 			</Dialog.Panel>
 		</Dialog>

app/routes/dns/dialogs/add-record.tsx

@@ -2,14 +2,12 @@ import { useMemo, useState } from 'react';
 import Code from '~/components/Code';
 import Dialog from '~/components/Dialog';
 import Input from '~/components/Input';
-import Select from '~/components/Select';
 
 interface Props {
-	records: { name: string; type: 'A' | 'AAAA' | string; value: string }[];
+	records: { name: string; type: 'A' | string; value: string }[];
 }
 
 export default function AddRecord({ records }: Props) {
-	const [type, setType] = useState<'A' | 'AAAA' | string>('A');
 	const [name, setName] = useState('');
 	const [ip, setIp] = useState('');
 
@@ -24,30 +22,14 @@ export default function AddRecord({ records }: Props) {
 	return (
 		<Dialog>
 			<Dialog.Button>Add DNS record</Dialog.Button>
-			<Dialog.Panel
-				onSubmit={() => {
-					setName('');
-					setIp('');
-				}}
-			>
+			<Dialog.Panel>
 				<Dialog.Title>Add DNS record</Dialog.Title>
 				<Dialog.Text>
 					Enter the domain and IP address for the new DNS record.
 				</Dialog.Text>
 				<div className="flex flex-col gap-2 mt-4">
 					<input type="hidden" name="action_id" value="add_record" />
-					<Select
-						isRequired
-						label="Record Type"
-						name="record_type"
-						defaultInputValue={type}
-						onSelectionChange={(v) => {
-							if (v) setType(v.toString() as 'A' | 'AAAA');
-						}}
-					>
-						<Select.Item key="A">A</Select.Item>
-						<Select.Item key="AAAA">AAAA</Select.Item>
-					</Select>
+					<input type="hidden" name="record_type" value="A" />
 					<Input
 						isRequired
 						label="Domain"
@@ -59,9 +41,7 @@ export default function AddRecord({ records }: Props) {
 					<Input
 						isRequired
 						label="IP Address"
-						placeholder={
-							type === 'AAAA' ? '2001:db8::ff00:42:8329' : '101.101.101.101'
-						}
+						placeholder="101.101.101.101"
 						name="record_value"
 						onChange={setIp}
 						isInvalid={isDuplicate}

app/routes/dns/dns-actions.ts

@@ -42,8 +42,6 @@ export async function dnsAction({
 			return removeRecord(formData, context);
 		case 'add_record':
 			return addRecord(formData, context);
-		case 'override_dns':
-			return overrideDns(formData, context);
 		default:
 			return data({ success: false }, 400);
 	}
@@ -106,7 +104,7 @@ async function removeNs(formData: FormData, context: LoadContext) {
 		await context.hs.patch([
 			{
 				path: `dns.nameservers.split."${splitName}"`,
-				value: servers.length > 0 ? servers : null,
+				value: servers,
 			},
 		]);
 	}
@@ -196,16 +194,16 @@ async function removeRecord(formData: FormData, context: LoadContext) {
 		return data({ success: false }, 400);
 	}
 
-	// Value is not needed for removal
-	const restart = await context.hs.removeDNS({
-		name: recordName,
-		type: recordType,
-		value: '',
-	});
+	const records = config.dns.extra_records.filter(
+		(i) => i.name !== recordName || i.type !== recordType,
+	);
 
-	if (!restart) {
-		return;
-	}
+	await context.hs.patch([
+		{
+			path: 'dns.extra_records',
+			value: records,
+		},
+	]);
 
 	await context.integration?.onConfigChange(context.client);
 }
@@ -220,30 +218,13 @@ async function addRecord(formData: FormData, context: LoadContext) {
 		return data({ success: false }, 400);
 	}
 
-	const restart = await context.hs.addDNS({
-		name: recordName,
-		type: recordType,
-		value: recordValue,
-	});
+	const records = config.dns.extra_records;
+	records.push({ name: recordName, type: recordType, value: recordValue });
 
-	if (!restart) {
-		return;
-	}
-
-	await context.integration?.onConfigChange(context.client);
-}
-
-async function overrideDns(formData: FormData, context: LoadContext) {
-	const override = formData.get('override_dns')?.toString();
-	if (!override) {
-		return data({ success: false }, 400);
-	}
-
-	const overrideValue = override === 'true';
 	await context.hs.patch([
 		{
-			path: 'dns.override_local_dns',
-			value: overrideValue,
+			path: 'dns.extra_records',
+			value: records,
 		},
 	]);
 

app/routes/dns/overview.tsx

@@ -44,8 +44,7 @@ export async function loader({
 		nameservers: config.dns.nameservers.global,
 		splitDns: config.dns.nameservers.split,
 		searchDomains: config.dns.search_domains,
-		overrideDns: config.dns.override_local_dns,
-		extraRecords: context.hs.d,
+		extraRecords: config.dns.extra_records,
 	};
 
 	return {
@@ -71,7 +70,7 @@ export default function Page() {
 	const isDisabled = data.access === false || data.writable === false;
 
 	return (
-		<div className="flex flex-col gap-16 max-w-(--breakpoint-lg)">
+		<div className="flex flex-col gap-16 max-w-screen-lg">
 			{data.writable ? undefined : (
 				<Notice>
 					The Headscale configuration is read-only. You cannot make changes to
@@ -85,11 +84,7 @@ export default function Page() {
 				</Notice>
 			)}
 			<RenameTailnet name={data.baseDomain} isDisabled={isDisabled} />
-			<ManageNS
-				nameservers={allNs}
-				isDisabled={isDisabled}
-				overrideLocalDns={data.overrideDns}
-			/>
+			<ManageNS nameservers={allNs} isDisabled={isDisabled} />
 			<ManageRecords records={data.extraRecords} isDisabled={isDisabled} />
 			<ManageDomains
 				searchDomains={data.searchDomains}

app/routes/machines/components/machine-row.tsx

@@ -1,74 +1,122 @@
-import { ChevronDown, Copy } from 'lucide-react';
+import { ChevronDownIcon, CopyIcon } from '@primer/octicons-react';
 import { useMemo } from 'react';
 import { Link } from 'react-router';
 import Chip from '~/components/Chip';
 import Menu from '~/components/Menu';
 import StatusCircle from '~/components/StatusCircle';
-import { ExitNodeTag } from '~/components/tags/ExitNode';
-import { ExpiryTag } from '~/components/tags/Expiry';
-import { HeadplaneAgentTag } from '~/components/tags/HeadplaneAgent';
-import { SubnetTag } from '~/components/tags/Subnet';
-import { TailscaleSSHTag } from '~/components/tags/TailscaleSSH';
-import type { User } from '~/types';
+import type { HostInfo, Machine, Route, User } from '~/types';
 import cn from '~/utils/cn';
 import * as hinfo from '~/utils/host-info';
-import { PopulatedNode } from '~/utils/node-info';
+
 import toast from '~/utils/toast';
 import MenuOptions from './menu';
 
 interface Props {
-	node: PopulatedNode;
+	machine: Machine;
+	routes: Route[];
 	users: User[];
 	isAgent?: boolean;
 	magic?: string;
+	stats?: HostInfo;
 	isDisabled?: boolean;
 }
 
 export default function MachineRow({
-	node,
+	machine,
+	routes,
 	users,
 	isAgent,
 	magic,
+	stats,
 	isDisabled,
 }: Props) {
-	const uiTags = useMemo(() => {
-		const tags = uiTagsForNode(node, isAgent);
-		return tags;
-	}, [node, isAgent]);
+	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 = [...new Set([...machine.forcedTags, ...machine.validTags])];
+
+	if (expired) {
+		tags.unshift('Expired');
+	}
+
+	const 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<{
+		exit: Route[];
+		subnetApproved: Route[];
+		subnet: Route[];
+	}>(
+		(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');
+	}
+
+	if (isAgent) {
+		tags.unshift('Headplane Agent');
+	}
 
 	const ipOptions = useMemo(() => {
 		if (magic) {
-			return [...node.ipAddresses, `${node.givenName}.${magic}`];
+			return [...machine.ipAddresses, `${machine.givenName}.${prefix}`];
 		}
 
-		return node.ipAddresses;
-	}, [magic, node.ipAddresses]);
+		return machine.ipAddresses;
+	}, [magic, machine.ipAddresses]);
 
 	return (
 		<tr
+			key={machine.id}
 			className="group hover:bg-headplane-50 dark:hover:bg-headplane-950"
-			key={node.id}
 		>
-			<td className="pl-0.5 py-2 focus-within:ring-3">
+			<td className="pl-0.5 py-2 focus-within:ring">
 				<Link
-					className={cn('group/link h-full focus:outline-hidden')}
-					to={`/machines/${node.id}`}
+					to={`/machines/${machine.id}`}
+					className={cn('group/link h-full focus:outline-none')}
 				>
 					<p
 						className={cn(
 							'font-semibold leading-snug',
 							'group-hover/link:text-blue-600',
-							'dark:group-hover/link:text-blue-400',
+							'group-hover/link:dark:text-blue-400',
 						)}
 					>
-						{node.givenName}
+						{machine.givenName}
 					</p>
-					<p className="text-sm opacity-50">
-						{node.user.name || node.user.displayName || node.user.email || node.user.id}
-					</p>
-					<div className="flex gap-1 flex-wrap mt-1.5">
-						{mapTagsToComponents(node, uiTags)}
-						{node.validTags.map((tag) => (
+					<p className="text-sm font-mono opacity-50">{machine.name}</p>
+					<div className="flex gap-1 mt-1">
+						{tags.map((tag) => (
 							<Chip key={tag} text={tag} />
 						))}
 					</div>
@@ -76,10 +124,10 @@ export default function MachineRow({
 			</td>
 			<td className="py-2">
 				<div className="flex items-center gap-x-1">
-					{node.ipAddresses[0]}
+					{machine.ipAddresses[0]}
 					<Menu placement="bottom end">
 						<Menu.IconButton className="bg-transparent" label="IP Addresses">
-							<ChevronDown className="w-4 h-4" />
+							<ChevronDownIcon className="w-4 h-4" />
 						</Menu.IconButton>
 						<Menu.Panel
 							onAction={async (key) => {
@@ -97,7 +145,7 @@ export default function MachineRow({
 											)}
 										>
 											{ip}
-											<Copy className="w-3 h-3" />
+											<CopyIcon className="w-3 h-3" />
 										</div>
 									</Menu.Item>
 								))}
@@ -109,13 +157,11 @@ export default function MachineRow({
 			{/* We pass undefined when agents are not enabled */}
 			{isAgent !== undefined ? (
 				<td className="py-2">
-					{node.hostInfo !== undefined ? (
+					{stats !== undefined ? (
 						<>
-							<p className="leading-snug">
-								{hinfo.getTSVersion(node.hostInfo)}
-							</p>
+							<p className="leading-snug">{hinfo.getTSVersion(stats)}</p>
 							<p className="text-sm opacity-50 max-w-48 truncate">
-								{hinfo.getOSInfo(node.hostInfo)}
+								{hinfo.getOSInfo(stats)}
 							</p>
 						</>
 					) : (
@@ -131,92 +177,25 @@ export default function MachineRow({
 					)}
 				>
 					<StatusCircle
+						isOnline={machine.online && !expired}
 						className="w-4 h-4"
-						isOnline={node.online && !node.expired}
 					/>
 					<p suppressHydrationWarning>
-						{node.online && !node.expired
+						{machine.online && !expired
 							? 'Connected'
-							: new Date(node.lastSeen).toLocaleString()}
+							: new Date(machine.lastSeen).toLocaleString()}
 					</p>
 				</span>
 			</td>
 			<td className="py-2 pr-0.5">
 				<MenuOptions
-					isDisabled={isDisabled}
-					magic={magic}
-					node={node}
+					machine={machine}
+					routes={routes}
 					users={users}
+					magic={magic}
+					isDisabled={isDisabled}
 				/>
 			</td>
 		</tr>
 	);
 }
-
-export function uiTagsForNode(node: PopulatedNode, isAgent?: boolean) {
-	const uiTags: string[] = [];
-	if (node.expired) {
-		uiTags.push('expired');
-	}
-
-	if (node.expiry === null) {
-		uiTags.push('no-expiry');
-	}
-
-	if (node.customRouting.exitRoutes.length > 0) {
-		if (node.customRouting.exitApproved) {
-			uiTags.push('exit-approved');
-		} else {
-			uiTags.push('exit-waiting');
-		}
-	}
-
-	if (node.customRouting.subnetWaitingRoutes.length > 0) {
-		uiTags.push('subnet-waiting');
-	} else if (node.customRouting.subnetApprovedRoutes.length > 0) {
-		uiTags.push('subnet-approved');
-	}
-
-	if (node.hostInfo?.sshHostKeys && node.hostInfo?.sshHostKeys.length > 0) {
-		uiTags.push('tailscale-ssh');
-	}
-
-	if (isAgent === true) {
-		uiTags.push('headplane-agent');
-	}
-
-	return uiTags;
-}
-
-export function mapTagsToComponents(node: PopulatedNode, uiTags: string[]) {
-	return uiTags.map((tag) => {
-		switch (tag) {
-			case 'exit-approved':
-			case 'exit-waiting':
-				return <ExitNodeTag isEnabled={tag === 'exit-approved'} key={tag} />;
-
-			case 'subnet-approved':
-			case 'subnet-waiting':
-				return <SubnetTag isEnabled={tag === 'subnet-approved'} key={tag} />;
-
-			case 'expired':
-			case 'no-expiry':
-				return (
-					<ExpiryTag
-						expiry={node.expiry ?? undefined}
-						key={tag}
-						variant={tag}
-					/>
-				);
-
-			case 'tailscale-ssh':
-				return <TailscaleSSHTag key={tag} />;
-
-			case 'headplane-agent':
-				return <HeadplaneAgentTag key={tag} />;
-
-			default:
-				return null;
-		}
-	});
-}

app/routes/machines/components/menu.tsx

@@ -1,18 +1,18 @@
-import { Cog, Ellipsis, SquareTerminal } from 'lucide-react';
+import { Cog, Ellipsis } from 'lucide-react';
 import { useState } from 'react';
-import Button from '~/components/Button';
 import Menu from '~/components/Menu';
-import type { User } from '~/types';
+import type { Machine, Route, User } from '~/types';
 import cn from '~/utils/cn';
-import { PopulatedNode } from '~/utils/node-info';
 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 {
-	node: PopulatedNode;
+	machine: Machine;
+	routes: Route[];
 	users: User[];
 	magic?: string;
 	isFullButton?: boolean;
@@ -22,21 +22,27 @@ interface MenuProps {
 type Modal = 'rename' | 'expire' | 'remove' | 'routes' | 'move' | 'tags' | null;
 
 export default function MachineMenu({
-	node,
+	machine,
+	routes,
 	magic,
 	users,
 	isFullButton,
 	isDisabled,
 }: MenuProps) {
 	const [modal, setModal] = useState<Modal>(null);
-	const supportsTailscaleSSH =
-		node.hostInfo?.sshHostKeys && node.hostInfo?.sshHostKeys.length > 0;
+
+	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 (
-		<div className="flex items-center justify-end px-4 gap-1.5">
+		<>
 			{modal === 'remove' && (
 				<Delete
-					machine={node}
+					machine={machine}
 					isOpen={modal === 'remove'}
 					setIsOpen={(isOpen) => {
 						if (!isOpen) setModal(null);
@@ -45,7 +51,7 @@ export default function MachineMenu({
 			)}
 			{modal === 'move' && (
 				<Move
-					machine={node}
+					machine={machine}
 					users={users}
 					isOpen={modal === 'move'}
 					setIsOpen={(isOpen) => {
@@ -55,7 +61,7 @@ export default function MachineMenu({
 			)}
 			{modal === 'rename' && (
 				<Rename
-					machine={node}
+					machine={machine}
 					magic={magic}
 					isOpen={modal === 'rename'}
 					setIsOpen={(isOpen) => {
@@ -65,7 +71,8 @@ export default function MachineMenu({
 			)}
 			{modal === 'routes' && (
 				<Routes
-					node={node}
+					machine={machine}
+					routes={routes}
 					isOpen={modal === 'routes'}
 					setIsOpen={(isOpen) => {
 						if (!isOpen) setModal(null);
@@ -74,16 +81,16 @@ export default function MachineMenu({
 			)}
 			{modal === 'tags' && (
 				<Tags
-					machine={node}
+					machine={machine}
 					isOpen={modal === 'tags'}
 					setIsOpen={(isOpen) => {
 						if (!isOpen) setModal(null);
 					}}
 				/>
 			)}
-			{node.expired && modal === 'expire' ? undefined : (
+			{expired && modal === 'expire' ? undefined : (
 				<Expire
-					machine={node}
+					machine={machine}
 					isOpen={modal === 'expire'}
 					setIsOpen={(isOpen) => {
 						if (!isOpen) setModal(null);
@@ -91,49 +98,6 @@ export default function MachineMenu({
 				/>
 			)}
 
-			{supportsTailscaleSSH ? (
-				isFullButton ? (
-					<Button
-						className="flex items-center gap-x-2"
-						variant="heavy"
-						onPress={() => {
-							// We need to use JS to open the SSH URL
-							// in a new WINDOW since href can only
-							// do a new TAB.
-							window.open(
-								`${__PREFIX__}/ssh?hostname=${node.name}`,
-								'_blank',
-								'noopener,noreferrer,width=800,height=600',
-							);
-						}}
-					>
-						<SquareTerminal className="h-5" />
-						<p>SSH</p>
-					</Button>
-				) : (
-					<Button
-						onPress={() => {
-							// We need to use JS to open the SSH URL
-							// in a new WINDOW since href can only
-							// do a new TAB.
-							window.open(
-								`${__PREFIX__}/ssh?hostname=${node.name}`,
-								'_blank',
-								'noopener,noreferrer,width=800,height=600',
-							);
-						}}
-						className={cn(
-							'py-0.5 w-fit bg-transparent border-transparent',
-							'border group-hover:border-headplane-200',
-							'dark:group-hover:border-headplane-700',
-							'opacity-0 pointer-events-none group-hover:opacity-100',
-							'group-hover:pointer-events-auto',
-						)}
-					>
-						SSH
-					</Button>
-				)
-			) : undefined}
 			<Menu isDisabled={isDisabled}>
 				{isFullButton ? (
 					<Menu.Button className="flex items-center gap-x-2">
@@ -152,10 +116,7 @@ export default function MachineMenu({
 						<Ellipsis className="h-5" />
 					</Menu.IconButton>
 				)}
-				<Menu.Panel
-					onAction={(key) => setModal(key as Modal)}
-					disabledKeys={node.expired ? ['expire'] : []}
-				>
+				<Menu.Panel onAction={(key) => setModal(key as Modal)}>
 					<Menu.Section>
 						<Menu.Item key="rename">Edit machine name</Menu.Item>
 						<Menu.Item key="routes">Edit route settings</Menu.Item>
@@ -163,15 +124,19 @@ export default function MachineMenu({
 						<Menu.Item key="move">Change owner</Menu.Item>
 					</Menu.Section>
 					<Menu.Section>
-						<Menu.Item key="expire" textValue="Expire">
-							<p className="text-red-500 dark:text-red-400">Expire</p>
-						</Menu.Item>
+						{expired ? (
+							<></>
+						) : (
+							<Menu.Item key="expire" textValue="Expire">
+								<p className="text-red-500 dark:text-red-400">Expire</p>
+							</Menu.Item>
+						)}
 						<Menu.Item key="remove" textValue="Remove">
 							<p className="text-red-500 dark:text-red-400">Remove</p>
 						</Menu.Item>
 					</Menu.Section>
 				</Menu.Panel>
 			</Menu>
-		</div>
+		</>
 	);
 }

app/routes/machines/dialogs/delete.tsx

@@ -22,8 +22,8 @@ export default function Delete({ machine, isOpen, setIsOpen }: DeleteProps) {
 					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>
-				<input type="hidden" name="action_id" value="delete" />
-				<input type="hidden" name="node_id" value={machine.id} />
+				<input type="hidden" name="_method" value="delete" />
+				<input type="hidden" name="id" value={machine.id} />
 			</Dialog.Panel>
 		</Dialog>
 	);

app/routes/machines/dialogs/expire.tsx

@@ -16,8 +16,8 @@ export default function Expire({ machine, isOpen, setIsOpen }: ExpireProps) {
 					This will disconnect the machine from your Tailnet. In order to
 					reconnect, you will need to re-authenticate from the device.
 				</Dialog.Text>
-				<input name="action_id" type="hidden" value="expire" />
-				<input name="node_id" type="hidden" value={machine.id} />
+				<input type="hidden" name="_method" value="expire" />
+				<input type="hidden" name="id" value={machine.id} />
 			</Dialog.Panel>
 		</Dialog>
 	);

app/routes/machines/dialogs/move.tsx

@@ -1,4 +1,3 @@
-import { Key, useState } from 'react';
 import Dialog from '~/components/Dialog';
 import Select from '~/components/Select';
 import type { Machine, User } from '~/types';
@@ -11,8 +10,6 @@ interface MoveProps {
 }
 
 export default function Move({ machine, users, isOpen, setIsOpen }: MoveProps) {
-	const [userId, setUserId] = useState<Key | null>(null);
-
 	return (
 		<Dialog isOpen={isOpen} onOpenChange={setIsOpen}>
 			<Dialog.Panel>
@@ -20,21 +17,16 @@ export default function Move({ machine, users, isOpen, setIsOpen }: MoveProps) {
 				<Dialog.Text>
 					The owner of the machine is the user associated with it.
 				</Dialog.Text>
-				<input type="hidden" name="action_id" value="reassign" />
-				<input type="hidden" name="node_id" value={machine.id} />
-				<input type="hidden" name="user_id" value={userId?.toString()} />
+				<input type="hidden" name="_method" value="move" />
+				<input type="hidden" name="id" value={machine.id} />
 				<Select
-					isRequired
 					label="Owner"
-					name="user"
+					name="to"
 					placeholder="Select a user"
 					defaultSelectedKey={machine.user.id}
-					onSelectionChange={(key) => {
-						setUserId(key);
-					}}
 				>
 					{users.map((user) => (
-					    <Select.Item key={user.id}>{user.name || user.displayName || user.email || user.id}</Select.Item>
+						<Select.Item key={user.id}>{user.name}</Select.Item>
 					))}
 				</Select>
 			</Dialog.Panel>

app/routes/machines/dialogs/new.tsx

@@ -1,4 +1,4 @@
-import { Computer, FileKey2 } from 'lucide-react';
+import { Computer, KeySquare } from 'lucide-react';
 import { useState } from 'react';
 import { useNavigate } from 'react-router';
 import Code from '~/components/Code';
@@ -12,7 +12,6 @@ export interface NewMachineProps {
 	server: string;
 	users: User[];
 	isDisabled?: boolean;
-	disabledKeys?: string[];
 }
 
 export default function NewMachine(data: NewMachineProps) {
@@ -30,13 +29,14 @@ export default function NewMachine(data: NewMachineProps) {
 						<Code isCopyable>tailscale up --login-server={data.server}</Code> on
 						your device.
 					</Dialog.Text>
-					<input type="hidden" name="action_id" value="register" />
+					<input type="hidden" name="_method" value="register" />
+					<input type="hidden" name="id" value="_" />
 					<Input
 						isRequired
 						label="Machine Key"
 						placeholder="AbCd..."
 						validationBehavior="native"
-						name="register_key"
+						name="mkey"
 						onChange={setMkey}
 					/>
 					<Select
@@ -46,12 +46,12 @@ export default function NewMachine(data: NewMachineProps) {
 						placeholder="Select a user"
 					>
 						{data.users.map((user) => (
-						    <Select.Item key={user.id}>{user.name || user.displayName || user.email || user.id}</Select.Item>
+							<Select.Item key={user.id}>{user.name}</Select.Item>
 						))}
 					</Select>
 				</Dialog.Panel>
 			</Dialog>
-			<Menu isDisabled={data.isDisabled} disabledKeys={data.disabledKeys}>
+			<Menu isDisabled={data.isDisabled}>
 				<Menu.Button variant="heavy">Add Device</Menu.Button>
 				<Menu.Panel
 					onAction={(key) => {
@@ -74,7 +74,7 @@ export default function NewMachine(data: NewMachineProps) {
 						</Menu.Item>
 						<Menu.Item key="pre-auth" textValue="Generate Pre-auth Key">
 							<div className="flex items-center gap-x-3">
-								<FileKey2 className="w-4" />
+								<KeySquare className="w-4" />
 								Generate Pre-auth Key
 							</div>
 						</Menu.Item>

app/routes/machines/dialogs/rename.tsx

@@ -27,45 +27,14 @@ export default function Rename({
 					This name is shown in the admin panel, in Tailscale clients, and used
 					when generating MagicDNS names.
 				</Dialog.Text>
-				<input type="hidden" name="action_id" value="rename" />
-				<input type="hidden" name="node_id" value={machine.id} />
+				<input type="hidden" name="_method" value="rename" />
+				<input type="hidden" name="id" value={machine.id} />
 				<Input
-					isRequired
 					label="Machine name"
 					placeholder="Machine name"
-					validationBehavior="native"
 					name="name"
 					defaultValue={machine.givenName}
 					onChange={setName}
-					validate={(value) => {
-						if (value.length === 0) {
-							return 'Cannot be empty';
-						}
-
-						// DNS hostname validation
-						if (value.toLowerCase() !== value) {
-							return 'Cannot contain uppercase letters';
-						}
-
-						if (value.length > 63) {
-							return 'DNS hostnames cannot be 64+ characters';
-						}
-
-						// Test for invalid characters
-						if (!/^[a-z0-9-]+$/.test(value)) {
-							return 'Cannot contain special characters';
-						}
-
-						// Test for leading/trailing hyphens
-						if (value.startsWith('-') || value.endsWith('-')) {
-							return 'Cannot start or end with a hyphen';
-						}
-
-						// Test for consecutive hyphens
-						if (value.includes('--')) {
-							return 'Cannot contain consecutive hyphens';
-						}
-					}}
 				/>
 				{magic ? (
 					name.length > 0 && name !== machine.givenName ? (

app/routes/machines/dialogs/routes.tsx

@@ -1,30 +1,55 @@
 import { GlobeLock, RouteOff } from 'lucide-react';
+import { useMemo } from 'react';
 import { useFetcher } from 'react-router';
 import Dialog from '~/components/Dialog';
 import Link from '~/components/Link';
 import Switch from '~/components/Switch';
 import TableList from '~/components/TableList';
-import { PopulatedNode } from '~/utils/node-info';
+import type { Machine, Route } from '~/types';
+import cn from '~/utils/cn';
 
 interface RoutesProps {
-	node: PopulatedNode;
+	machine: Machine;
+	routes: Route[];
 	isOpen: boolean;
 	setIsOpen: (isOpen: boolean) => void;
 }
 
 // TODO: Support deleting routes
-export default function Routes({ node, isOpen, setIsOpen }: RoutesProps) {
+export default function Routes({
+	machine,
+	routes,
+	isOpen,
+	setIsOpen,
+}: RoutesProps) {
 	const fetcher = useFetcher();
 
-	const subnets = [
-		...node.customRouting.subnetApprovedRoutes,
-		...node.customRouting.subnetWaitingRoutes,
-	];
+	// This is much easier with Object.groupBy but it's too new for us
+	const { exit, subnet } = routes.reduce<{
+		exit: Route[];
+		subnet: Route[];
+	}>(
+		(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 isOpen={isOpen} onOpenChange={setIsOpen}>
 			<Dialog.Panel variant="unactionable">
-				<Dialog.Title>Edit route settings of {node.givenName}</Dialog.Title>
+				<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
@@ -37,7 +62,7 @@ export default function Routes({ node, isOpen, setIsOpen }: RoutesProps) {
 					</Link>
 				</Dialog.Text>
 				<TableList className="mt-4">
-					{subnets.length === 0 ? (
+					{subnet.length === 0 ? (
 						<TableList.Item className="flex flex-col items-center gap-2.5 py-4 opacity-70">
 							<RouteOff />
 							<p className="font-semibold">
@@ -45,17 +70,17 @@ export default function Routes({ node, isOpen, setIsOpen }: RoutesProps) {
 							</p>
 						</TableList.Item>
 					) : undefined}
-					{subnets.map((route) => (
-						<TableList.Item key={route}>
-							<p>{route}</p>
+					{subnet.map((route) => (
+						<TableList.Item key={route.id}>
+							<p>{route.prefix}</p>
 							<Switch
-								defaultSelected={node.approvedRoutes.includes(route)}
+								defaultSelected={route.enabled}
 								label="Enabled"
 								onChange={(checked) => {
 									const form = new FormData();
-									form.set('action_id', 'update_routes');
-									form.set('node_id', node.id);
-									form.set('routes', [route].join(','));
+									form.set('id', machine.id);
+									form.set('_method', 'routes');
+									form.set('route', route.id);
 
 									form.set('enabled', String(checked));
 									fetcher.submit(form, {
@@ -77,7 +102,7 @@ export default function Routes({ node, isOpen, setIsOpen }: RoutesProps) {
 					</Link>
 				</Dialog.Text>
 				<TableList className="mt-4">
-					{node.customRouting.exitRoutes.length === 0 ? (
+					{exit.length === 0 ? (
 						<TableList.Item className="flex flex-col items-center gap-2.5 py-4 opacity-70">
 							<GlobeLock />
 							<p className="font-semibold">This machine is not an exit node</p>
@@ -86,18 +111,13 @@ export default function Routes({ node, isOpen, setIsOpen }: RoutesProps) {
 						<TableList.Item>
 							<p>Use as exit node</p>
 							<Switch
-								defaultSelected={node.customRouting.exitApproved}
+								defaultSelected={exitEnabled}
 								label="Enabled"
 								onChange={(checked) => {
 									const form = new FormData();
-									form.set('action_id', 'update_routes');
-									form.set('node_id', node.id);
-									form.set(
-										'routes',
-										node.customRouting.exitRoutes
-											.map((route) => route)
-											.join(','),
-									);
+									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, {

app/routes/machines/dialogs/tags.tsx

@@ -33,8 +33,8 @@ export default function Tags({ machine, isOpen, setIsOpen }: TagsProps) {
 					</Link>{' '}
 					for more information.
 				</Dialog.Text>
-				<input type="hidden" name="action_id" value="update_tags" />
-				<input type="hidden" name="node_id" value={machine.id} />
+				<input type="hidden" name="_method" value="tags" />
+				<input type="hidden" name="id" value={machine.id} />
 				<input type="hidden" name="tags" value={tags.join(',')} />
 				<TableList className="mt-4">
 					{tags.length === 0 ? (
@@ -59,10 +59,10 @@ export default function Tags({ machine, isOpen, setIsOpen }: TagsProps) {
 					)}
 					<TableList.Item
 						className={cn(
-							'rounded-b-xl focus-within:ring-3',
+							'rounded-b-xl focus-within:ring',
 							tag.length > 0 &&
 								(!tag.startsWith('tag:') || tags.includes(tag)) &&
-								'ring-3 ring-red-500 ring-opacity-50',
+								'ring ring-red-500 ring-opacity-50',
 						)}
 					>
 						<Input

app/routes/machines/machine-actions.ts

@@ -1,8 +1,11 @@
-import { type ActionFunctionArgs, data, redirect } from 'react-router';
+import type { ActionFunctionArgs } from 'react-router';
 import type { LoadContext } from '~/server';
 import { Capabilities } from '~/server/web/roles';
 import { Machine } from '~/types';
+import log from '~/utils/log';
+import { data400, data403, data404, send } from '~/utils/res';
 
+// TODO: Clean this up like dns-actions and user-actions
 export async function machineAction({
 	request,
 	context,
@@ -13,33 +16,14 @@ export async function machineAction({
 		Capabilities.write_machines,
 	);
 
+	const apiKey = session.get('api_key')!;
 	const formData = await request.formData();
-	const apiKey = session.api_key;
 
-	const action = formData.get('action_id')?.toString();
-	if (!action) {
-		throw data('Missing `action_id` in the form data.', {
-			status: 400,
-		});
-	}
-
-	// Fast track register since it doesn't require an existing machine
-	if (action === 'register') {
-		if (!check) {
-			throw data('You do not have permission to manage machines', {
-				status: 403,
-			});
-		}
-
-		return registerMachine(formData, apiKey, context);
-	}
-
-	// Check if the user has permission to manage this machine
-	const nodeId = formData.get('node_id')?.toString();
-	if (!nodeId) {
-		throw data('Missing `node_id` in the form data.', {
-			status: 400,
-		});
+	// TODO: Rename this to 'action_id' and 'node_id'
+	const action = formData.get('_method')?.toString();
+	const nodeId = formData.get('id')?.toString();
+	if (!action || !nodeId) {
+		return data400('Missing required parameters: _method and id');
 	}
 
 	const { nodes } = await context.client.get<{ nodes: Machine[] }>(
@@ -49,218 +33,215 @@ export async function machineAction({
 
 	const node = nodes.find((node) => node.id === nodeId);
 	if (!node) {
-		throw data(`Machine with ID ${nodeId} not found`, {
-			status: 404,
-		});
+		return data404(`Node with ID ${nodeId} not found`);
 	}
 
-	if (
-		node.user.providerId?.split('/').pop() !== session.user.subject &&
-		!check
-	) {
-		throw data('You do not have permission to act on this machine', {
-			status: 403,
-		});
-	}
-
-	switch (action) {
-		case 'rename': {
-			return renameMachine(formData, apiKey, nodeId, context);
+	const subject = session.get('user')!.subject;
+	if (node.user.providerId?.split('/').pop() !== subject) {
+		if (!check) {
+			return data403('You do not have permission to act on this machine');
 		}
+	}
 
+	// TODO: Split up into methods
+	switch (action) {
 		case 'delete': {
-			return deleteMachine(apiKey, nodeId, context);
+			await context.client.delete(`v1/node/${nodeId}`, session.get('api_key')!);
+			return { message: 'Machine removed' };
 		}
 
 		case 'expire': {
-			return expireMachine(apiKey, nodeId, context);
+			await context.client.post(
+				`v1/node/${nodeId}/expire`,
+				session.get('api_key')!,
+			);
+			return { message: 'Machine expired' };
 		}
 
-		case 'update_tags': {
-			return updateTags(formData, apiKey, nodeId, context);
-		}
-
-		case 'update_routes': {
-			return updateRoutes(formData, apiKey, nodeId, context);
-		}
-
-		case 'reassign': {
-			return reassignMachine(formData, apiKey, nodeId, context);
-		}
-
-		default:
-			throw data('Invalid action', {
-				status: 400,
-			});
-	}
-}
-
-async function registerMachine(
-	formData: FormData,
-	apiKey: string,
-	context: LoadContext,
-) {
-	const registrationKey = formData.get('register_key')?.toString();
-	if (!registrationKey) {
-		throw data('Missing `register_key` in the form data.', {
-			status: 400,
-		});
-	}
-
-	const user = formData.get('user')?.toString();
-	if (!user) {
-		throw data('Missing `user` in the form data.', {
-			status: 400,
-		});
-	}
-
-	const qp = new URLSearchParams();
-	qp.append('user', user);
-	qp.append('key', registrationKey);
-	const url = `v1/node/register?${qp.toString()}`;
-	const { node } = await context.client.post<{ node: Machine }>(url, apiKey, {
-		user,
-		key: registrationKey,
-	});
-
-	return redirect(`/machines/${node.id}`);
-}
-
-async function renameMachine(
-	formData: FormData,
-	apiKey: string,
-	nodeId: string,
-	context: LoadContext,
-) {
-	const newName = formData.get('name')?.toString();
-	if (!newName) {
-		throw data('Missing `name` in the form data.', {
-			status: 400,
-		});
-	}
-
-	const name = String(formData.get('name'));
-	await context.client.post(`v1/node/${nodeId}/rename/${name}`, apiKey);
-	return { message: 'Machine renamed' };
-}
-
-async function deleteMachine(
-	apiKey: string,
-	nodeId: string,
-	context: LoadContext,
-) {
-	await context.client.delete(`v1/node/${nodeId}`, apiKey);
-	return redirect('/machines');
-}
-
-async function expireMachine(
-	apiKey: string,
-	nodeId: string,
-	context: LoadContext,
-) {
-	await context.client.post(`v1/node/${nodeId}/expire`, apiKey);
-	return { message: 'Machine expired' };
-}
-
-async function updateTags(
-	formData: FormData,
-	apiKey: string,
-	nodeId: string,
-	context: LoadContext,
-) {
-	const tags = formData.get('tags')?.toString().split(',') ?? [];
-	if (tags.length === 0) {
-		throw data('Missing `tags` in the form data.', {
-			status: 400,
-		});
-	}
-
-	await context.client.post(`v1/node/${nodeId}/tags`, apiKey, {
-		tags: tags.map((tag) => tag.trim()).filter((tag) => tag !== ''),
-	});
-
-	return { message: 'Tags updated' };
-}
-
-async function updateRoutes(
-	formData: FormData,
-	apiKey: string,
-	nodeId: string,
-	context: LoadContext,
-) {
-	const { node } = await context.client.get<{ node: Machine }>(
-		`v1/node/${nodeId}`,
-		apiKey,
-	);
-
-	const newApproved = node.approvedRoutes;
-	const routes = formData.get('routes')?.toString();
-	if (!routes) {
-		throw data('Missing `routes` in the form data.', {
-			status: 400,
-		});
-	}
-
-	const allRoutes = routes.split(',').map((route) => route.trim());
-	if (allRoutes.length === 0) {
-		throw data('No routes provided to update', {
-			status: 400,
-		});
-	}
-
-	const enabled = formData.get('enabled')?.toString();
-	if (enabled === undefined) {
-		throw data('Missing `enabled` in the form data.', {
-			status: 400,
-		});
-	}
-
-	if (enabled === 'true') {
-		for (const route of allRoutes) {
-			// If already approved, skip, otherwise add to approved
-			if (newApproved.includes(route)) {
-				continue;
+		case 'rename': {
+			if (!formData.has('name')) {
+				return send(
+					{ message: 'No name provided' },
+					{
+						status: 400,
+					},
+				);
 			}
 
-			newApproved.push(route);
+			const name = String(formData.get('name'));
+			await context.client.post(
+				`v1/node/${nodeId}/rename/${name}`,
+				session.get('api_key')!,
+			);
+			return { message: 'Machine renamed' };
 		}
-	} else {
-		for (const route of allRoutes) {
-			// If not approved, skip, otherwise remove from approved
-			if (!newApproved.includes(route)) {
-				continue;
+
+		case 'routes': {
+			if (!formData.has('route') || !formData.has('enabled')) {
+				return send(
+					{ message: 'No route or enabled provided' },
+					{
+						status: 400,
+					},
+				);
 			}
 
-			const index = newApproved.indexOf(route);
-			if (index > -1) {
-				newApproved.splice(index, 1);
+			const route = String(formData.get('route'));
+			const enabled = formData.get('enabled') === 'true';
+			const postfix = enabled ? 'enable' : 'disable';
+
+			await context.client.post(
+				`v1/routes/${route}/${postfix}`,
+				session.get('api_key')!,
+			);
+			return { message: 'Route updated' };
+		}
+
+		case 'exit-node': {
+			if (!formData.has('routes') || !formData.has('enabled')) {
+				return send(
+					{ message: 'No route or enabled provided' },
+					{
+						status: 400,
+					},
+				);
+			}
+
+			const routes = formData.get('routes')?.toString().split(',') ?? [];
+			const enabled = formData.get('enabled') === 'true';
+			const postfix = enabled ? 'enable' : 'disable';
+
+			await Promise.all(
+				routes.map(async (route) => {
+					await context.client.post(
+						`v1/routes/${route}/${postfix}`,
+						session.get('api_key')!,
+					);
+				}),
+			);
+
+			return { message: 'Exit node updated' };
+		}
+
+		case 'move': {
+			if (!formData.has('to')) {
+				return send(
+					{ message: 'No destination provided' },
+					{
+						status: 400,
+					},
+				);
+			}
+
+			const to = String(formData.get('to'));
+
+			try {
+				await context.client.post(
+					`v1/node/${nodeId}/user`,
+					session.get('api_key')!,
+					{
+						user: to,
+					},
+				);
+
+				return { message: `Moved node ${nodeId} to ${to}` };
+			} catch (error) {
+				console.error(error);
+				return send(
+					{ message: `Failed to move node ${nodeId} to ${to}` },
+					{
+						status: 500,
+					},
+				);
 			}
 		}
+
+		case 'tags': {
+			const tags =
+				formData
+					.get('tags')
+					?.toString()
+					.split(',')
+					.filter((tag) => tag.trim() !== '') ?? [];
+
+			try {
+				await context.client.post(
+					`v1/node/${nodeId}/tags`,
+					session.get('api_key')!,
+					{
+						tags,
+					},
+				);
+
+				return { message: 'Tags updated' };
+			} catch (error) {
+				log.debug('api', 'Failed to update tags: %s', error);
+				return send(
+					{ message: 'Failed to update tags' },
+					{
+						status: 500,
+					},
+				);
+			}
+		}
+
+		case 'register': {
+			const key = formData.get('mkey')?.toString();
+			const user = formData.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 context.client.post(url, session.get('api_key')!, {
+					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,
+				},
+			);
+		}
 	}
-
-	await context.client.post(`v1/node/${nodeId}/approve_routes`, apiKey, {
-		routes: newApproved,
-	});
-
-	return { message: 'Routes updated' };
-}
-
-async function reassignMachine(
-	formData: FormData,
-	apiKey: string,
-	nodeId: string,
-	context: LoadContext,
-) {
-	const user = formData.get('user_id')?.toString();
-	if (!user) {
-		throw data('Missing `user_id` in the form data.', {
-			status: 400,
-		});
-	}
-
-	await context.client.post(`v1/node/${nodeId}/user`, apiKey, {
-		user,
-	});
-
-	return { message: 'Machine reassigned' };
 }

app/routes/machines/machine.tsx

@@ -10,11 +10,8 @@ import Link from '~/components/Link';
 import StatusCircle from '~/components/StatusCircle';
 import Tooltip from '~/components/Tooltip';
 import type { LoadContext } from '~/server';
-import type { Machine, User } from '~/types';
+import type { Machine, Route, User } from '~/types';
 import cn from '~/utils/cn';
-import { getOSInfo, getTSVersion } from '~/utils/host-info';
-import { mapNodes } from '~/utils/node-info';
-import { mapTagsToComponents, uiTagsForNode } from './components/machine-row';
 import MenuOptions from './components/menu';
 import Routes from './dialogs/routes';
 import { machineAction } from './machine-actions';
@@ -36,27 +33,28 @@ export async function loader({
 		}
 	}
 
-	const [machine, { users }] = await Promise.all([
+	const [machine, routes, users] = await Promise.all([
 		context.client.get<{ node: Machine }>(
 			`v1/node/${params.id}`,
-			session.api_key,
+			session.get('api_key')!,
 		),
-		context.client.get<{ users: User[] }>('v1/user', session.api_key),
+		context.client.get<{ routes: Route[] }>(
+			'v1/routes',
+			session.get('api_key')!,
+		),
+		context.client.get<{ users: User[] }>('v1/user', session.get('api_key')!),
 	]);
 
-	const lookup = await context.agents?.lookup([machine.node.nodeKey]);
-	const [node] = mapNodes([machine.node], lookup);
-	const tags = Array.from(
-		new Set([...node.validTags, ...node.forcedTags]),
-	).sort();
-
 	return {
-		node,
-		tags,
-		users,
+		machine: machine.node,
+		routes: routes.routes.filter((route) => route.node.id === params.id),
+		users: users.users,
 		magic,
-		agent: context.agents?.agentID(),
-		stats: lookup?.[node.nodeKey],
+		// TODO: Fix agent
+		agent: false,
+		// agent: [...(hp_getSingletonUnsafe('ws_agents') ?? []).keys()].includes(
+		// 	machine.node.id,
+		// ),
 	};
 }
 
@@ -65,23 +63,71 @@ export async function action(request: ActionFunctionArgs) {
 }
 
 export default function Page() {
-	const { node, tags, magic, users, agent, stats } =
+	const { machine, magic, routes, users, agent } =
 		useLoaderData<typeof loader>();
 	const [showRouting, setShowRouting] = useState(false);
 
-	const uiTags = useMemo(() => {
-		const tags = uiTagsForNode(node, agent === node.nodeKey);
-		return tags;
-	}, [node, agent]);
+	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 = [...new Set([...machine.forcedTags, ...machine.validTags])];
+
+	if (expired) {
+		tags.unshift('Expired');
+	}
+
+	if (agent) {
+		tags.unshift('Headplane Agent');
+	}
+
+	// This is much easier with Object.groupBy but it's too new for us
+	const { exit, subnet, subnetApproved } = routes.reduce<{
+		exit: Route[];
+		subnet: Route[];
+		subnetApproved: Route[];
+	}>(
+		(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 className="font-medium" to="/machines">
+				<RemixLink to="/machines" className="font-medium">
 					All Machines
 				</RemixLink>
 				<span className="mx-2">/</span>
-				{node.givenName}
+				{machine.givenName}
 			</p>
 			<div
 				className={cn(
@@ -90,10 +136,17 @@ export default function Page() {
 				)}
 			>
 				<span className="flex items-baseline gap-x-4 text-sm">
-					<h1 className="text-2xl font-medium">{node.givenName}</h1>
-					<StatusCircle className="w-4 h-4" isOnline={node.online} />
+					<h1 className="text-2xl font-medium">{machine.givenName}</h1>
+					<StatusCircle isOnline={machine.online} className="w-4 h-4" />
 				</span>
-				<MenuOptions isFullButton magic={magic} node={node} users={users} />
+
+				<MenuOptions
+					isFullButton
+					machine={machine}
+					routes={routes}
+					users={users}
+					magic={magic}
+				/>
 			</div>
 			<div className="flex gap-1 mb-4">
 				<div className="border-r border-headplane-100 dark:border-headplane-800 p-2 pr-4">
@@ -108,32 +161,35 @@ export default function Page() {
 					</span>
 					<div className="flex items-center gap-x-2.5 mt-1">
 						<UserCircle />
-						{node.user.name ||
-							node.user.displayName ||
-							node.user.email ||
-							node.user.id}
+						{machine.user.name}
 					</div>
 				</div>
-				<div className="p-2 pl-4">
-					<p className="text-sm text-headplane-600 dark:text-headplane-300">
-						Status
-					</p>
-					<div className="flex gap-1 mt-1 mb-8">
-						{mapTagsToComponents(node, uiTags)}
-						{tags.map((tag) => (
-							<Chip key={tag} text={tag} />
-						))}
+				{tags.length > 0 ? (
+					<div className="p-2 pl-4">
+						<p className="text-sm text-headplane-600 dark:text-headplane-300">
+							Status
+						</p>
+						<div className="flex gap-1 mt-1 mb-8">
+							{tags.map((tag) => (
+								<Chip key={tag} text={tag} />
+							))}
+						</div>
 					</div>
-				</div>
+				) : undefined}
 			</div>
-			<Routes isOpen={showRouting} node={node} setIsOpen={setShowRouting} />
-			<h2 className="text-xl font-medium mt-8">Subnets & Routing</h2>
+			<h2 className="text-xl font-medium mb-4 mt-8">Subnets & Routing</h2>
+			<Routes
+				machine={machine}
+				routes={routes}
+				isOpen={showRouting}
+				setIsOpen={setShowRouting}
+			/>
 			<div className="flex items-center justify-between mb-4">
 				<p>
 					Subnets let you expose physical network routes onto Tailscale.{' '}
 					<Link
-						name="Tailscale Subnets Documentation"
 						to="https://tailscale.com/kb/1019/subnets"
+						name="Tailscale Subnets Documentation"
 					>
 						Learn More
 					</Link>
@@ -141,11 +197,11 @@ export default function Page() {
 				<Button onPress={() => setShowRouting(true)}>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',
 				)}
-				variant="flat"
 			>
 				<div>
 					<span className="text-headplane-600 dark:text-headplane-300 flex items-center gap-x-1">
@@ -158,22 +214,22 @@ export default function Page() {
 						</Tooltip>
 					</span>
 					<div className="mt-1">
-						{node.customRouting.subnetApprovedRoutes.length === 0 ? (
+						{subnetApproved.length === 0 ? (
 							<span className="opacity-50">—</span>
 						) : (
 							<ul className="leading-normal">
-								{node.customRouting.subnetApprovedRoutes.map((route) => (
-									<li key={route}>{route}</li>
+								{subnetApproved.map((route) => (
+									<li key={route.id}>{route.prefix}</li>
 								))}
 							</ul>
 						)}
 					</div>
 					<Button
+						onPress={() => setShowRouting(true)}
 						className={cn(
 							'px-1.5 py-0.5 rounded-md mt-1.5',
 							'text-blue-500 dark:text-blue-400',
 						)}
-						onPress={() => setShowRouting(true)}
 					>
 						Edit
 					</Button>
@@ -190,22 +246,22 @@ export default function Page() {
 						</Tooltip>
 					</span>
 					<div className="mt-1">
-						{node.customRouting.subnetWaitingRoutes.length === 0 ? (
+						{subnet.length === 0 ? (
 							<span className="opacity-50">—</span>
 						) : (
 							<ul className="leading-normal">
-								{node.customRouting.subnetWaitingRoutes.map((route) => (
-									<li key={route}>{route}</li>
+								{subnet.map((route) => (
+									<li key={route.id}>{route.prefix}</li>
 								))}
 							</ul>
 						)}
 					</div>
 					<Button
+						onPress={() => setShowRouting(true)}
 						className={cn(
 							'px-1.5 py-0.5 rounded-md mt-1.5',
 							'text-blue-500 dark:text-blue-400',
 						)}
-						onPress={() => setShowRouting(true)}
 					>
 						Edit
 					</Button>
@@ -221,9 +277,9 @@ export default function Page() {
 						</Tooltip>
 					</span>
 					<div className="mt-1">
-						{node.customRouting.exitRoutes.length === 0 ? (
+						{exit.length === 0 ? (
 							<span className="opacity-50">—</span>
-						) : node.customRouting.exitApproved ? (
+						) : exitEnabled ? (
 							<span className="flex items-center gap-x-1">
 								<CheckCircle className="w-3.5 h-3.5 text-green-700" />
 								Allowed
@@ -236,174 +292,46 @@ export default function Page() {
 						)}
 					</div>
 					<Button
+						onPress={() => setShowRouting(true)}
 						className={cn(
 							'px-1.5 py-0.5 rounded-md mt-1.5',
 							'text-blue-500 dark:text-blue-400',
 						)}
-						onPress={() => setShowRouting(true)}
 					>
 						Edit
 					</Button>
 				</div>
 			</Card>
-			<h2 className="text-xl font-medium">Machine Details</h2>
-			<p className="mb-4">
-				Information about this machine’s network. Used to debug connection
-				issues.
-			</p>
-			<Card
-				className="w-full max-w-full grid grid-cols-1 lg:grid-cols-2 gap-y-2 sm:gap-x-12"
-				variant="flat"
-			>
-				<div className="flex flex-col gap-1">
-					<Attribute
-						name="Creator"
-						value={
-							node.user.name ||
-							node.user.displayName ||
-							node.user.email ||
-							node.user.id
-						}
-					/>
-					<Attribute name="Machine name" value={node.givenName} />
-					<Attribute
-						name="OS hostname"
-						tooltip="OS hostname is published by the machine’s operating system and is used as the default name for the machine."
-						value={node.name}
-					/>
-					{stats ? (
-						<>
-							<Attribute name="OS" value={getOSInfo(stats)} />
-							<Attribute name="Tailscale version" value={getTSVersion(stats)} />
-						</>
-					) : undefined}
-					<Attribute
-						name="ID"
-						tooltip="ID for this machine. Used in the Headscale API."
-						value={node.id}
-					/>
+			<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
+					suppressHydrationWarning
+					name="Created"
+					value={new Date(machine.createdAt).toLocaleString()}
+				/>
+				<Attribute
+					suppressHydrationWarning
+					name="Last Seen"
+					value={new Date(machine.lastSeen).toLocaleString()}
+				/>
+				<Attribute
+					suppressHydrationWarning
+					name="Expiry"
+					value={expired ? new Date(machine.expiry).toLocaleString() : 'Never'}
+				/>
+				{magic ? (
 					<Attribute
 						isCopyable
-						name="Node key"
-						tooltip="Public key which uniquely identifies this machine."
-						value={node.nodeKey}
+						name="Domain"
+						value={`${machine.givenName}.${magic}`}
 					/>
-					<Attribute
-						name="Created"
-						value={new Date(node.createdAt).toLocaleString()}
-					/>
-					<Attribute
-						name="Last Seen"
-						value={
-							node.online
-								? 'Connected'
-								: new Date(node.lastSeen).toLocaleString()
-						}
-					/>
-					<Attribute
-						name="Key expiry"
-						value={
-							node.expiry !== null
-								? new Date(node.expiry).toLocaleString()
-								: 'Never'
-						}
-					/>
-					{magic ? (
-						<Attribute
-							isCopyable
-							name="Domain"
-							value={`${node.givenName}.${magic}`}
-						/>
-					) : undefined}
-				</div>
-				<div className="flex flex-col gap-1">
-					<p className="uppercase text-sm font-semibold opacity-75">
-						Addresses
-					</p>
-					<Attribute
-						isCopyable
-						name="Tailscale IPv4"
-						tooltip="This machine’s IPv4 address within your tailnet (your private Tailscale network)."
-						value={getIpv4Address(node.ipAddresses)}
-					/>
-					<Attribute
-						isCopyable
-						name="Tailscale IPv6"
-						tooltip="This machine’s IPv6 address within your tailnet (your private Tailscale network). Connections within your tailnet support IPv6 even if your ISP does not."
-						value={getIpv6Address(node.ipAddresses)}
-					/>
-					<Attribute
-						isCopyable
-						name="Short domain"
-						tooltip="Users of your tailnet can use this DNS short name to access this machine."
-						value={node.givenName}
-					/>
-					{magic ? (
-						<Attribute
-							isCopyable
-							name="Full domain"
-							tooltip="Users of your tailnet can use this DNS name to access this machine."
-							value={`${node.givenName}.${magic}`}
-						/>
-					) : undefined}
-					{stats ? (
-						<>
-							<p className="uppercase text-sm font-semibold opacity-75 mt-4">
-								Client Connectivity
-							</p>
-							<Attribute
-								name="Varies"
-								tooltip="Whether the machine is behind a difficult NAT that varies the machine’s IP address depending on the destination."
-								value={stats.NetInfo?.MappingVariesByDestIP ? 'Yes' : 'No'}
-							/>
-							<Attribute
-								name="Hairpinning"
-								tooltip="Whether the machine needs to traverse NATs with hairpinning."
-								value={stats.NetInfo?.HairPinning ? 'Yes' : 'No'}
-							/>
-							<Attribute
-								name="IPv6"
-								value={stats.NetInfo?.WorkingIPv6 ? 'Yes' : 'No'}
-							/>
-							<Attribute
-								name="UDP"
-								value={stats.NetInfo?.WorkingUDP ? 'Yes' : 'No'}
-							/>
-							<Attribute
-								name="UPnP"
-								value={stats.NetInfo?.UPnP ? 'Yes' : 'No'}
-							/>
-							<Attribute name="PCP" value={stats.NetInfo?.PCP ? 'Yes' : 'No'} />
-							<Attribute
-								name="NAT-PMP"
-								value={stats.NetInfo?.PMP ? 'Yes' : 'No'}
-							/>
-						</>
-					) : undefined}
-				</div>
+				) : undefined}
 			</Card>
 		</div>
 	);
 }
-
-function getIpv4Address(addresses: string[]) {
-	for (const address of addresses) {
-		if (address.startsWith('100.')) {
-			// Return the first CGNAT address
-			return address;
-		}
-	}
-
-	return '—';
-}
-
-function getIpv6Address(addresses: string[]) {
-	for (const address of addresses) {
-		if (address.startsWith('fd')) {
-			// Return the first IPv6 address
-			return address;
-		}
-	}
-
-	return '—';
-}

app/routes/machines/overview.tsx

@@ -1,14 +1,14 @@
-import { Info } from 'lucide-react';
+import { InfoIcon } from '@primer/octicons-react';
 import type { ActionFunctionArgs, LoaderFunctionArgs } from 'react-router';
 import { useLoaderData } from 'react-router';
 import Code from '~/components/Code';
+import { ErrorPopup } from '~/components/Error';
 import Link from '~/components/Link';
 import Tooltip from '~/components/Tooltip';
 import type { LoadContext } from '~/server';
 import { Capabilities } from '~/server/web/roles';
-import type { Machine, User } from '~/types';
+import type { Machine, Route, User } from '~/types';
 import cn from '~/utils/cn';
-import { mapNodes } from '~/utils/node-info';
 import MachineRow from './components/machine-row';
 import NewMachine from './dialogs/new';
 import { machineAction } from './machine-actions';
@@ -18,7 +18,7 @@ export async function loader({
 	context,
 }: LoaderFunctionArgs<LoadContext>) {
 	const session = await context.sessions.auth(request);
-	const user = session.user;
+	const user = session.get('user');
 	if (!user) {
 		throw new Error('Missing user session. Please log in again.');
 	}
@@ -40,9 +40,16 @@ export async function loader({
 		Capabilities.write_machines,
 	);
 
-	const [{ nodes }, { users }] = await Promise.all([
-		context.client.get<{ nodes: Machine[] }>('v1/node', session.api_key),
-		context.client.get<{ users: User[] }>('v1/user', session.api_key),
+	const [machines, routes, users] = await Promise.all([
+		context.client.get<{ nodes: Machine[] }>(
+			'v1/node',
+			session.get('api_key')!,
+		),
+		context.client.get<{ routes: Route[] }>(
+			'v1/routes',
+			session.get('api_key')!,
+		),
+		context.client.get<{ users: User[] }>('v1/user', session.get('api_key')!),
 	]);
 
 	let magic: string | undefined;
@@ -52,22 +59,16 @@ export async function loader({
 		}
 	}
 
-	const stats = await context.agents?.lookup(nodes.map((node) => node.nodeKey));
-	const populatedNodes = mapNodes(nodes, stats);
-
 	return {
-		populatedNodes,
-		nodes,
-		users,
+		nodes: machines.nodes,
+		routes: routes.routes,
+		users: users.users,
 		magic,
 		server: context.config.headscale.url,
 		publicServer: context.config.headscale.public_url,
-		agent: context.agents?.agentID(),
+		agents: context.agents?.tailnetIDs(),
+		stats: context.agents?.lookup(machines.nodes.map((node) => node.nodeKey)),
 		writable: writablePermission,
-		preAuth: await context.sessions.check(
-			request,
-			Capabilities.generate_authkeys,
-		),
 		subject: user.subject,
 	};
 }
@@ -87,18 +88,17 @@ export default function Page() {
 					<p>
 						Manage the devices connected to your Tailnet.{' '}
 						<Link
-							name="Tailscale Manage Devices Documentation"
 							to="https://tailscale.com/kb/1372/manage-devices"
+							name="Tailscale Manage Devices Documentation"
 						>
 							Learn more
 						</Link>
 					</p>
 				</div>
 				<NewMachine
-					disabledKeys={data.preAuth ? [] : ['pre-auth']}
-					isDisabled={!data.writable}
 					server={data.publicServer ?? data.server}
 					users={data.users}
+					isDisabled={!data.writable}
 				/>
 			</div>
 			<table className="table-auto w-full rounded-lg">
@@ -110,7 +110,7 @@ export default function Page() {
 								<p className="uppercase text-xs font-bold">Addresses</p>
 								{data.magic ? (
 									<Tooltip>
-										<Info className="w-4 h-4" />
+										<InfoIcon className="w-4 h-4" />
 										<Tooltip.Body className="font-normal">
 											Since MagicDNS is enabled, you can access devices based on
 											their name and also at{' '}
@@ -124,7 +124,7 @@ export default function Page() {
 							</div>
 						</th>
 						{/* We only want to show the version column if there are agents */}
-						{data.agent !== undefined ? (
+						{data.agents !== undefined ? (
 							<th className="uppercase text-xs font-bold pb-2">Version</th>
 						) : undefined}
 						<th className="uppercase text-xs font-bold pb-2">Last Seen</th>
@@ -136,18 +136,24 @@ export default function Page() {
 						'border-t border-headplane-100 dark:border-headplane-800',
 					)}
 				>
-					{data.populatedNodes.map((machine) => (
+					{data.nodes.map((machine) => (
 						<MachineRow
-							isAgent={data.agent ? data.agent === machine.nodeKey : undefined}
+							key={machine.id}
+							machine={machine}
+							routes={data.routes.filter(
+								(route) => route.node.id === machine.id,
+							)}
+							users={data.users}
+							magic={data.magic}
+							// If we pass undefined, the column will not be rendered
+							// This is useful for when there are no agents configured
+							isAgent={data.agents?.includes(machine.id)}
+							stats={data.stats?.[machine.nodeKey]}
 							isDisabled={
 								data.writable
 									? false // If the user has write permissions, they can edit all machines
 									: machine.user.providerId?.split('/').pop() !== data.subject
 							}
-							key={machine.id}
-							magic={data.magic}
-							node={machine}
-							users={data.users}
 						/>
 					))}
 				</tbody>
@@ -155,3 +161,7 @@ export default function Page() {
 		</>
 	);
 }
+
+export function ErrorBoundary() {
+	return <ErrorPopup type="embedded" />;
+}

app/routes/settings/auth-keys.tsx

@@ -0,0 +1,216 @@
+import { useState } from 'react';
+import type { ActionFunctionArgs, LoaderFunctionArgs } from 'react-router';
+import { useLoaderData } from 'react-router';
+import { Link as RemixLink } from 'react-router';
+import Link from '~/components/Link';
+import Select from '~/components/Select';
+import TableList from '~/components/TableList';
+import type { LoadContext } from '~/server';
+import type { PreAuthKey, User } from '~/types';
+import { send } from '~/utils/res';
+import AuthKeyRow from './components/key';
+import AddPreAuthKey from './dialogs/new';
+
+export async function loader({
+	request,
+	context,
+}: LoaderFunctionArgs<LoadContext>) {
+	const session = await context.sessions.auth(request);
+	const users = await context.client.get<{ users: User[] }>(
+		'v1/user',
+		session.get('api_key')!,
+	);
+
+	const preAuthKeys = await Promise.all(
+		users.users
+			.filter((user) => user.name?.length > 0) // Filter out any invalid users
+			.map((user) => {
+				const qp = new URLSearchParams();
+				qp.set('user', user.name);
+
+				return context.client.get<{ preAuthKeys: PreAuthKey[] }>(
+					`v1/preauthkey?${qp.toString()}`,
+					session.get('api_key')!,
+				);
+			}),
+	);
+
+	return {
+		keys: preAuthKeys.flatMap((keys) => keys.preAuthKeys),
+		users: users.users,
+		server: context.config.headscale.public_url ?? context.config.headscale.url,
+	};
+}
+
+export async function action({
+	request,
+	context,
+}: ActionFunctionArgs<LoadContext>) {
+	const session = await context.sessions.auth(request);
+	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 context.client.post<{ preAuthKey: PreAuthKey }>(
+			'v1/preauthkey/expire',
+			session.get('api_key')!,
+			{
+				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 context.client.post<{ preAuthKey: PreAuthKey }>(
+			'v1/preauthkey',
+			session.get('api_key')!,
+			{
+				user: user,
+				ephemeral: ephemeral === 'on',
+				reusable: reusable === 'on',
+				expiration: date.toISOString(),
+				aclTags: [], // TODO
+			},
+		);
+
+		return { message: 'Pre-auth key created', key };
+	}
+}
+
+export default function Page() {
+	const { keys, users, server } = useLoaderData<typeof loader>();
+	const [user, setUser] = useState('__headplane_all');
+	const [status, setStatus] = useState('active');
+
+	const filteredKeys = keys.filter((key) => {
+		if (user !== '__headplane_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 || key.reusable);
+			}
+
+			if (status === 'expired') {
+				return key.used || expiry < now;
+			}
+
+			if (status === 'reusable') {
+				return key.reusable;
+			}
+
+			if (status === 'ephemeral') {
+				return key.ephemeral;
+			}
+		}
+
+		return true;
+	});
+
+	// TODO: Fix the selects
+	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-2">Pre-Auth Keys</h1>
+			<p className="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 items-center gap-4 mt-4">
+				<Select
+					label="Filter by User"
+					placeholder="Select a user"
+					className="w-full"
+					defaultSelectedKey="__headplane_all"
+					onSelectionChange={(value) => setUser(value?.toString() ?? '')}
+				>
+					{[
+						<Select.Item key="__headplane_all">All</Select.Item>,
+						...users.map((user) => (
+							<Select.Item key={user.name}>{user.name}</Select.Item>
+						)),
+					]}
+				</Select>
+				<Select
+					label="Filter by status"
+					placeholder="Select a status"
+					className="w-full"
+					defaultSelectedKey="active"
+					onSelectionChange={(value) => setStatus(value?.toString() ?? '')}
+				>
+					<Select.Item key="all">All</Select.Item>
+					<Select.Item key="active">Active</Select.Item>
+					<Select.Item key="expired">Used/Expired</Select.Item>
+					<Select.Item key="reusable">Reusable</Select.Item>
+					<Select.Item key="ephemeral">Ephemeral</Select.Item>
+				</Select>
+			</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>
+	);
+}

app/routes/settings/auth-keys/actions.ts

@@ -1,118 +0,0 @@
-import { ActionFunctionArgs, data } from 'react-router';
-import { LoadContext } from '~/server';
-import { Capabilities } from '~/server/web/roles';
-import { PreAuthKey } from '~/types';
-
-export async function authKeysAction({
-	request,
-	context,
-}: ActionFunctionArgs<LoadContext>) {
-	const session = await context.sessions.auth(request);
-	const check = await context.sessions.check(
-		request,
-		Capabilities.generate_authkeys,
-	);
-
-	if (!check) {
-		throw data('You do not have permission to manage pre-auth keys', {
-			status: 403,
-		});
-	}
-
-	const formData = await request.formData();
-	const apiKey = session.api_key;
-	const action = formData.get('action_id')?.toString();
-	if (!action) {
-		throw data('Missing `action_id` in the form data.', {
-			status: 400,
-		});
-	}
-
-	switch (action) {
-		case 'add_preauthkey':
-			return await addPreAuthKey(formData, apiKey, context);
-		case 'expire_preauthkey':
-			return await expirePreAuthKey(formData, apiKey, context);
-		default:
-			return data('Invalid action', {
-				status: 400,
-			});
-	}
-}
-
-async function addPreAuthKey(
-	formData: FormData,
-	apiKey: string,
-	context: LoadContext,
-) {
-	const user = formData.get('user_id')?.toString();
-	if (!user) {
-		return data('Missing `user_id` in the form data.', {
-			status: 400,
-		});
-	}
-
-	const expiry = formData.get('expiry')?.toString();
-	if (!expiry) {
-		return data('Missing `expiry` in the form data.', {
-			status: 400,
-		});
-	}
-
-	const reusable = formData.get('reusable')?.toString();
-	if (!reusable) {
-		return data('Missing `reusable` in the form data.', {
-			status: 400,
-		});
-	}
-
-	const ephemeral = formData.get('ephemeral')?.toString();
-	if (!ephemeral) {
-		return data('Missing `ephemeral` in the form data.', {
-			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);
-
-	await context.client.post<{ preAuthKey: PreAuthKey }>(
-		'v1/preauthkey',
-		apiKey,
-		{
-			user,
-			ephemeral: ephemeral === 'on',
-			reusable: reusable === 'on',
-			expiration: date.toISOString(),
-			aclTags: [], // TODO
-		},
-	);
-
-	return data('Pre-auth key created');
-}
-
-async function expirePreAuthKey(
-	formData: FormData,
-	apiKey: string,
-	context: LoadContext,
-) {
-	const key = formData.get('key')?.toString();
-	if (!key) {
-		return data('Missing `key` in the form data.', {
-			status: 400,
-		});
-	}
-
-	const user = formData.get('user_id')?.toString();
-	if (!user) {
-		return data('Missing `user_id` in the form data.', {
-			status: 400,
-		});
-	}
-
-	await context.client.post('v1/preauthkey/expire', apiKey, { user, key });
-	return data('Pre-auth key expired');
-}

app/routes/settings/auth-keys/overview.tsx

@@ -1,256 +0,0 @@
-import { FileKey2 } from 'lucide-react';
-import { useMemo, useState } from 'react';
-import type { ActionFunctionArgs, LoaderFunctionArgs } from 'react-router';
-import { Link as RemixLink, useLoaderData } from 'react-router';
-import Code from '~/components/Code';
-import Link from '~/components/Link';
-import Notice from '~/components/Notice';
-import Select from '~/components/Select';
-import TableList from '~/components/TableList';
-import type { LoadContext } from '~/server';
-import { Capabilities } from '~/server/web/roles';
-import type { PreAuthKey, User } from '~/types';
-import log from '~/utils/log';
-import { authKeysAction } from './actions';
-import AuthKeyRow from './auth-key-row';
-import AddAuthKey from './dialogs/add-auth-key';
-
-export async function loader({
-	request,
-	context,
-}: LoaderFunctionArgs<LoadContext>) {
-	const session = await context.sessions.auth(request);
-	const { users } = await context.client.get<{ users: User[] }>(
-		'v1/user',
-		session.api_key,
-	);
-
-	const preAuthKeys = await Promise.all(
-		users
-			.filter((user) => user.name?.length > 0) // Filter out any invalid users
-			.map(async (user) => {
-				const qp = new URLSearchParams();
-				qp.set('user', user.id);
-
-				try {
-					const { preAuthKeys } = await context.client.get<{
-						preAuthKeys: PreAuthKey[];
-					}>(`v1/preauthkey?${qp.toString()}`, session.api_key);
-					return {
-						success: true,
-						user,
-						preAuthKeys,
-					};
-				} catch (error) {
-					log.error('api', 'GET /v1/preauthkey for %s: %o', user.name, error);
-					return {
-						success: false,
-						user,
-						error,
-						preAuthKeys: [] as PreAuthKey[],
-					};
-				}
-			}),
-	);
-
-	const keys = preAuthKeys
-		.filter(({ success }) => success)
-		.map(({ user, preAuthKeys }) => ({
-			user,
-			preAuthKeys,
-		}));
-
-	const missing = preAuthKeys
-		.filter(({ success }) => !success)
-		.map(({ user, error }) => ({
-			user,
-			error,
-		}));
-
-	return {
-		keys,
-		missing,
-		users,
-		access: await context.sessions.check(
-			request,
-			Capabilities.generate_authkeys,
-		),
-		url: context.config.headscale.public_url ?? context.config.headscale.url,
-	};
-}
-
-export async function action(request: ActionFunctionArgs<LoadContext>) {
-	return authKeysAction(request);
-}
-
-type Status = 'all' | 'active' | 'expired' | 'reusable' | 'ephemeral';
-export default function Page() {
-	const { keys, missing, users, url, access } = useLoaderData<typeof loader>();
-	const [selectedUser, setSelectedUser] = useState('__headplane_all');
-	const [status, setStatus] = useState<Status>('active');
-	const isDisabled =
-		!access || keys.flatMap(({ preAuthKeys }) => preAuthKeys).length === 0;
-
-	const filteredKeys = useMemo(() => {
-		const now = new Date();
-		return keys
-			.filter(({ user }) => {
-				if (selectedUser === '__headplane_all') {
-					return true;
-				}
-
-				return user.id === selectedUser;
-			})
-			.flatMap(({ preAuthKeys }) => preAuthKeys)
-			.filter((key) => {
-				if (status === 'all') {
-					return true;
-				}
-
-				if (status === 'ephemeral') {
-					return key.ephemeral;
-				}
-
-				if (status === 'reusable') {
-					return key.reusable;
-				}
-
-				const expiry = new Date(key.expiration);
-				if (status === 'expired') {
-					// Expired keys are either used or expired
-					// BUT only used if they are not reusable
-					if (key.used && !key.reusable) {
-						return true;
-					}
-
-					return expiry < now;
-				}
-
-				if (status === 'active') {
-					// Active keys are either not expired or reusable
-					if (expiry < now) {
-						return false;
-					}
-
-					if (!key.used) {
-						return true;
-					}
-
-					return key.reusable;
-				}
-
-				return false;
-			});
-	}, [keys, selectedUser, status]);
-
-	return (
-		<div className="flex flex-col md:w-2/3">
-			<p className="mb-8 text-md">
-				<RemixLink className="font-medium" to="/settings">
-					Settings
-				</RemixLink>
-				<span className="mx-2">/</span> Pre-Auth Keys
-			</p>
-			{!access ? (
-				<Notice title="Pre-auth key permissions restricted" variant="warning">
-					You do not have the necessary permissions to generate pre-auth keys.
-					Please contact your administrator to request access or to generate a
-					pre-auth key for you.
-				</Notice>
-			) : missing.length > 0 ? (
-				<Notice title="Missing authentication keys" variant="error">
-					An error occurred while fetching the authentication keys for the
-					following users:{' '}
-					{missing.map(({ user }, index) => (
-						<>
-							<Code key={user.name}>{user.name}</Code>
-							{index < missing.length - 1 ? ', ' : '. '}
-						</>
-					))}
-					Their keys may not be listed correctly. Please check the server logs
-					for more information.
-				</Notice>
-			) : undefined}
-			<h1 className="text-2xl font-medium mb-2">Pre-Auth Keys</h1>
-			<p className="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
-					name="Tailscale Auth Keys documentation"
-					to="https://tailscale.com/kb/1085/auth-keys/"
-				>
-					Tailscale documentation
-				</Link>
-			</p>
-			<AddAuthKey users={users} />
-			<div className="flex items-center gap-4 mt-4">
-				<Select
-					className="w-full"
-					defaultSelectedKey="__headplane_all"
-					isDisabled={isDisabled}
-					label="User"
-					onSelectionChange={(value) =>
-						setSelectedUser(value?.toString() ?? '')
-					}
-					placeholder="Select a user"
-				>
-					{[
-						<Select.Item key="__headplane_all">All</Select.Item>,
-						...keys.map(({ user }) => (
-							<Select.Item key={user.id}>{user.name || user.displayName || user.email || user.id}</Select.Item>
-						)),
-					]}
-				</Select>
-				<Select
-					className="w-full"
-					defaultSelectedKey="active"
-					isDisabled={isDisabled}
-					label="Status"
-					onSelectionChange={(value) =>
-						setStatus((value?.toString() ?? 'active') as Status)
-					}
-					placeholder="Select a status"
-				>
-					<Select.Item key="all">All</Select.Item>
-					<Select.Item key="active">Active</Select.Item>
-					<Select.Item key="expired">Used/Expired</Select.Item>
-					<Select.Item key="reusable">Reusable</Select.Item>
-					<Select.Item key="ephemeral">Ephemeral</Select.Item>
-				</Select>
-			</div>
-			<TableList className="mt-4">
-				{keys.flatMap(({ preAuthKeys }) => preAuthKeys).length === 0 ? (
-					<TableList.Item className="flex flex-col items-center gap-2.5 py-4 opacity-70">
-						<FileKey2 />
-						<p className="font-semibold">
-							No pre-auth keys have been created yet.
-						</p>
-					</TableList.Item>
-				) : filteredKeys.length === 0 ? (
-					<TableList.Item className="flex flex-col items-center gap-2.5 py-4 opacity-70">
-						<FileKey2 />
-						<p className="font-semibold">
-							No pre-auth keys match the selected filters.
-						</p>
-					</TableList.Item>
-				) : (
-					filteredKeys.map((key) => {
-						// TODO: Why is Headscale using email as the user ID here?
-						// https://github.com/juanfont/headscale/issues/2520
-						const user = users.find((user) => user.id === key.user.id);
-						if (!user) {
-							return null;
-						}
-
-						return (
-							<TableList.Item key={key.id}>
-								<AuthKeyRow authKey={key} url={url} user={user} />
-							</TableList.Item>
-						);
-					})
-				)}
-			</TableList>
-		</div>
-	);
-}

app/routes/settings/components/agent.tsx

@@ -0,0 +1,33 @@
+import { ArrowRightIcon } from '@primer/octicons-react';
+import { Link as RemixLink } from 'react-router';
+import Button from '~/components/Button';
+import Link from '~/components/Link';
+import cn from '~/utils/cn';
+
+export default function AgentSection() {
+	return (
+		<>
+			<div className="flex flex-col w-2/3">
+				<h1 className="text-2xl font-medium mb-4">Local Agent</h1>
+				<p>
+					Headplane provides a local agent that can be installed on a server to
+					provide additional features including viewing device information and
+					SSH access via the web interface (soon). To learn more about the agent
+					visit the{' '}
+					<Link
+						to="https://github.com/tale/headplane/blob/main/docs/Headplane-Agent.md"
+						name="Headplane Agent Documentation"
+					>
+						Headplane documentation
+					</Link>
+				</p>
+			</div>
+			<RemixLink to="/settings/local-agent">
+				<div className={cn('text-lg font-medium flex items-center')}>
+					Manage Agent
+					<ArrowRightIcon className="w-5 h-5 ml-2" />
+				</div>
+			</RemixLink>
+		</>
+	);
+}

app/routes/settings/components/agent/manage.tsx

@@ -0,0 +1,39 @@
+import Card from '~/components/Card';
+import StatusCircle from '~/components/StatusCircle';
+import type { HostInfo } from '~/types';
+import * as hinfo from '~/utils/host-info';
+
+export type Props = {
+	reachable: boolean;
+	hostInfo: HostInfo;
+};
+
+export default function AgentManagement({ reachable, hostInfo }: Props) {
+	console.log('hostInfo:', hostInfo);
+	return (
+		<div className="flex flex-col w-2/3">
+			<h1 className="text-2xl font-medium mb-4">Local Agent Configuration</h1>
+			<p className="mb-8">
+				A local agent has already been configured for this Headplane instance.
+				You can manage the agent settings here.
+			</p>
+			<Card>
+				<div className="flex items-center gap-2">
+					<StatusCircle isOnline={reachable} className="w-4 h-4 px-1" />
+					<div>
+						<p className="text-lg font-bold">
+							{hostInfo.Hostname ?? 'Unknown'}
+						</p>
+						<p className="leading-snug">
+							{hinfo.getTSVersion(hostInfo)}
+							<span className="ml-2 text-sm text-headplane-600 dark:text-headplane-300">
+								{hinfo.getOSInfo(hostInfo)}
+							</span>
+						</p>
+					</div>
+				</div>
+				{JSON.stringify(hostInfo)}
+			</Card>
+		</div>
+	);
+}

app/routes/settings/components/key.tsx

@@ -1,54 +1,54 @@
+import type { PreAuthKey } from '~/types';
+
 import Attribute from '~/components/Attribute';
 import Button from '~/components/Button';
 import Code from '~/components/Code';
-import type { PreAuthKey, User } from '~/types';
 import toast from '~/utils/toast';
-import ExpireAuthKey from './dialogs/expire-auth-key';
+import ExpireKey from '../dialogs/expire';
 
 interface Props {
 	authKey: PreAuthKey;
-	user: User;
-	url: string;
+	server: string;
 }
 
-export default function AuthKeyRow({ authKey, user, url }: Props) {
+export default function AuthKeyRow({ authKey, server }: Props) {
 	const createdAt = new Date(authKey.createdAt).toLocaleString();
 	const expiration = new Date(authKey.expiration).toLocaleString();
 
 	return (
 		<div className="w-full">
-			<Attribute isCopyable name="Key" value={authKey.key} />
-			<Attribute
-				isCopyable
-				name="User"
-				value={user.name || user.displayName || user.email || user.id}
-			/>
+			<Attribute name="Key" value={authKey.key} isCopyable />
+			<Attribute name="User" value={authKey.user} isCopyable />
 			<Attribute name="Reusable" value={authKey.reusable ? 'Yes' : 'No'} />
 			<Attribute name="Ephemeral" value={authKey.ephemeral ? 'Yes' : 'No'} />
 			<Attribute name="Used" value={authKey.used ? 'Yes' : 'No'} />
-			<Attribute name="Created" value={createdAt} />
-			<Attribute name="Expiration" value={expiration} />
+			<Attribute suppressHydrationWarning name="Created" value={createdAt} />
+			<Attribute
+				suppressHydrationWarning
+				name="Expiration"
+				value={expiration}
+			/>
 			<p className="mb-1 mt-4">
 				To use this key, run the following command on your device:
 			</p>
 			<Code className="text-sm">
-				tailscale up --login-server={url} --authkey {authKey.key}
+				tailscale up --login-server {server} --authkey {authKey.key}
 			</Code>
-			<div className="flex gap-4 items-center" suppressHydrationWarning>
+			<div suppressHydrationWarning className="flex gap-4 items-center">
 				{(authKey.used && !authKey.reusable) ||
 				new Date(authKey.expiration) < new Date() ? undefined : (
-					<ExpireAuthKey authKey={authKey} user={user} />
+					<ExpireKey authKey={authKey} />
 				)}
 				<Button
+					variant="light"
 					className="my-4"
 					onPress={async () => {
 						await navigator.clipboard.writeText(
-							`tailscale up --login-server=${url} --authkey ${authKey.key}`,
+							`tailscale up --login-server ${server} --authkey ${authKey.key}`,
 						);
 
 						toast('Copied command to clipboard');
 					}}
-					variant="light"
 				>
 					Copy Tailscale Command
 				</Button>

app/routes/settings/dialogs/expire.tsx

@@ -1,19 +1,17 @@
 import Dialog from '~/components/Dialog';
-import type { PreAuthKey, User } from '~/types';
+import type { PreAuthKey } from '~/types';
 
-interface ExpireAuthKeyProps {
+interface Props {
 	authKey: PreAuthKey;
-	user: User;
 }
 
-export default function ExpireAuthKey({ authKey, user }: ExpireAuthKeyProps) {
+export default function ExpireKey({ authKey }: Props) {
 	return (
 		<Dialog>
-			<Dialog.Button variant="heavy">Expire Key</Dialog.Button>
-			<Dialog.Panel variant="destructive">
+			<Dialog.Button>Expire Key</Dialog.Button>
+			<Dialog.Panel method="DELETE" variant="destructive">
 				<Dialog.Title>Expire auth key?</Dialog.Title>
-				<input type="hidden" name="action_id" value="expire_preauthkey" />
-				<input type="hidden" name="user_id" value={user.id} />
+				<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

app/routes/settings/dialogs/new.tsx

@@ -1,4 +1,4 @@
-import { Key, useState } from 'react';
+import { useState } from 'react';
 import { useFetcher } from 'react-router';
 import Dialog from '~/components/Dialog';
 import Link from '~/components/Link';
@@ -7,36 +7,30 @@ import Select from '~/components/Select';
 import Switch from '~/components/Switch';
 import type { User } from '~/types';
 
-interface AddAuthKeyProps {
+interface Props {
 	users: User[];
 }
 
 // TODO: Tags
-export default function AddAuthKey(data: AddAuthKeyProps) {
+export default function AddPreAuthKey(data: Props) {
 	const [reusable, setReusable] = useState(false);
 	const [ephemeral, setEphemeral] = useState(false);
-	const [userId, setUserId] = useState<Key | null>(data.users[0]?.id);
 
 	return (
 		<Dialog>
 			<Dialog.Button className="my-4">Create pre-auth key</Dialog.Button>
 			<Dialog.Panel>
 				<Dialog.Title>Generate auth key</Dialog.Title>
-				<input type="hidden" name="action_id" value="add_preauthkey" />
-				<input type="hidden" name="user_id" value={userId?.toString()} />
+				<Dialog.Text className="font-semibold">User</Dialog.Text>
+				<Dialog.Text className="text-sm">Attach this key to a user</Dialog.Text>
 				<Select
 					isRequired
-					label="User"
+					label="Owner"
 					name="user"
 					placeholder="Select a user"
-					description="This is the user machines will belong to when they authenticate."
-					className="mb-2"
-					onSelectionChange={(value) => {
-						setUserId(value);
-					}}
 				>
 					{data.users.map((user) => (
-					    <Select.Item key={user.id}>{user.name || user.displayName || user.email || user.id}</Select.Item>
+						<Select.Item key={user.name}>{user.name}</Select.Item>
 					))}
 				</Select>
 				<NumberInput
@@ -53,7 +47,7 @@ export default function AddAuthKey(data: AddAuthKeyProps) {
 						unitDisplay: 'short',
 					}}
 				/>
-				<div className="flex justify-between items-center gap-2 mt-6">
+				<div className="flex justify-between items-center mt-6">
 					<div>
 						<Dialog.Text className="font-semibold">Reusable</Dialog.Text>
 						<Dialog.Text className="text-sm">
@@ -70,7 +64,7 @@ export default function AddAuthKey(data: AddAuthKeyProps) {
 					/>
 				</div>
 				<input type="hidden" name="reusable" value={reusable.toString()} />
-				<div className="flex justify-between items-center gap-2 mt-6">
+				<div className="flex justify-between items-center mt-6">
 					<div>
 						<Dialog.Text className="font-semibold">Ephemeral</Dialog.Text>
 						<Dialog.Text className="text-sm">

app/routes/settings/local-agent.tsx

@@ -0,0 +1,42 @@
+import { useMemo } from 'react';
+import { type LoaderFunctionArgs, useLoaderData } from 'react-router';
+import { commitSession, getSession } from '~/utils/sessions.server';
+import { queryAgent } from '~/utils/ws-agent';
+import AgentManagement from './components/agent/manage';
+
+export async function loader({ request, context }: LoaderFunctionArgs) {
+	const { ws, wsAuthKey } = context;
+	const session = await getSession(request.headers.get('Cookie'));
+	const onboarding = session.get('agent_onboarding') ?? false;
+
+	const nodeKey =
+		'nodekey:542dad28354eb8d51e240aada7adf0222ba3ecc74af0bbd56123f03eefdb391b';
+	const stats = await queryAgent([nodeKey]);
+
+	return {
+		configured: wsAuthKey !== undefined,
+		onboarding,
+		stats: stats?.[nodeKey],
+	};
+}
+
+export default function Page() {
+	const data = useLoaderData<typeof loader>();
+
+	// Whether we show the onboarding or management UI
+	const management = useMemo(() => {
+		return data.configured && data.onboarding === false;
+	}, [data.configured, data.onboarding]);
+
+	return (
+		<div className="flex flex-col gap-8 max-w-screen-lg">
+			{management ? (
+				<AgentManagement reachable={true} hostInfo={data.stats} />
+			) : (
+				<div>
+					<h1>Local Agent Coming Soon</h1>
+				</div>
+			)}
+		</div>
+	);
+}

app/routes/settings/overview.tsx

@@ -1,24 +1,14 @@
-import { ArrowRight } from 'lucide-react';
-import {
-	LoaderFunctionArgs,
-	Link as RemixLink,
-	useLoaderData,
-} from 'react-router';
+import { ArrowRightIcon } from '@primer/octicons-react';
+import { Link as RemixLink } from 'react-router';
+import Button from '~/components/Button';
 import Link from '~/components/Link';
-import { LoadContext } from '~/server';
+import cn from '~/utils/cn';
 
-export async function loader({ context }: LoaderFunctionArgs<LoadContext>) {
-	return {
-		config: context.hs.writable(),
-		oidc: context.oidc,
-	};
-}
+import AgentSection from './components/agent';
 
 export default function Page() {
-	const { config, oidc } = useLoaderData<typeof loader>();
-
 	return (
-		<div className="flex flex-col gap-8 max-w-(--breakpoint-lg)">
+		<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>
@@ -34,8 +24,8 @@ export default function Page() {
 					add devices to your Tailnet. To learn more about using
 					pre-authentication keys, visit the{' '}
 					<Link
-						name="Tailscale Auth Keys documentation"
 						to="https://tailscale.com/kb/1085/auth-keys/"
+						name="Tailscale Auth Keys documentation"
 					>
 						Tailscale documentation
 					</Link>
@@ -44,37 +34,10 @@ export default function Page() {
 			<RemixLink to="/settings/auth-keys">
 				<div className="text-lg font-medium flex items-center">
 					Manage Auth Keys
-					<ArrowRight className="w-5 h-5 ml-2" />
+					<ArrowRightIcon className="w-5 h-5 ml-2" />
 				</div>
 			</RemixLink>
-			{config && oidc ? (
-				<>
-					<div className="flex flex-col w-2/3">
-						<h1 className="text-2xl font-medium mb-4">
-							Authentication Restrictions
-						</h1>
-						<p>
-							Headscale supports restricting OIDC authentication to only allow
-							certain email domains, groups, or users to authenticate. This can
-							be used to limit access to your Tailnet to only certain users or
-							groups and Headplane will also respect these settings when
-							authenticating.{' '}
-							<Link
-								name="Headscale OIDC documentation"
-								to="https://headscale.net/stable/ref/oidc/#basic-configuration"
-							>
-								Learn More
-							</Link>
-						</p>
-					</div>
-					<RemixLink to="/settings/restrictions">
-						<div className="text-lg font-medium flex items-center">
-							Manage Restrictions
-							<ArrowRight className="w-5 h-5 ml-2" />
-						</div>
-					</RemixLink>
-				</>
-			) : undefined}
+			{/**<AgentSection />**/}
 		</div>
 	);
 }

app/routes/settings/restrictions/actions.ts

@@ -1,221 +0,0 @@
-import { ActionFunctionArgs, data } from 'react-router';
-import { LoadContext } from '~/server';
-import { Capabilities } from '~/server/web/roles';
-
-export async function restrictionAction({
-	request,
-	context,
-}: ActionFunctionArgs<LoadContext>) {
-	const check = await context.sessions.check(
-		request,
-		Capabilities.configure_iam,
-	);
-
-	if (!check) {
-		throw data('You do not have permission to modify IAM settings.', {
-			status: 403,
-		});
-	}
-
-	if (!context.hs.writable()) {
-		throw data('The Headscale configuration file is not editable.', {
-			status: 403,
-		});
-	}
-
-	const formData = await request.formData();
-	const action = formData.get('action_id')?.toString();
-	if (!action) {
-		throw data('No action provided.', {
-			status: 400,
-		});
-	}
-
-	switch (action) {
-		case 'add_domain': {
-			return addDomain(formData, context);
-		}
-
-		case 'remove_domain': {
-			return removeDomain(formData, context);
-		}
-
-		case 'add_group': {
-			return addGroup(formData, context);
-		}
-
-		case 'remove_group': {
-			return removeGroup(formData, context);
-		}
-
-		case 'add_user': {
-			return addUser(formData, context);
-		}
-
-		case 'remove_user': {
-			return removeUser(formData, context);
-		}
-
-		default: {
-			throw data('Invalid action provided.', {
-				status: 400,
-			});
-		}
-	}
-}
-
-async function addDomain(formData: FormData, context: LoadContext) {
-	const domain = formData.get('domain')?.toString()?.trim();
-	if (!domain) {
-		throw data('No domain provided.', {
-			status: 400,
-		});
-	}
-
-	const domains = [
-		...new Set([...(context.hs.c?.oidc?.allowed_domains ?? []), domain]),
-	];
-
-	await context.hs.patch([
-		{
-			path: 'oidc.allowed_domains',
-			value: domains,
-		},
-	]);
-
-	context.integration?.onConfigChange(context.client);
-	return data('Domain added successfully.');
-}
-
-async function removeDomain(formData: FormData, context: LoadContext) {
-	const domain = formData.get('domain')?.toString()?.trim();
-	if (!domain) {
-		throw data('No domain provided.', {
-			status: 400,
-		});
-	}
-
-	const storedDomains = context.hs.c?.oidc?.allowed_domains ?? [];
-	if (!storedDomains.includes(domain)) {
-		// Domain not found in the list
-		throw data(`Domain "${domain}" not found in allowed domains.`, {
-			status: 400,
-		});
-	}
-
-	// Filter out the domain to remove it from the list
-	const domains = storedDomains.filter((d: string) => d !== domain);
-	await context.hs.patch([
-		{
-			path: 'oidc.allowed_domains',
-			value: domains,
-		},
-	]);
-
-	context.integration?.onConfigChange(context.client);
-	return data('Domain removed successfully.');
-}
-
-async function addUser(formData: FormData, context: LoadContext) {
-	const user = formData.get('user')?.toString()?.trim();
-	if (!user) {
-		throw data('No user provided.', {
-			status: 400,
-		});
-	}
-
-	const users = [
-		...new Set([...(context.hs.c?.oidc?.allowed_users ?? []), user]),
-	];
-
-	await context.hs.patch([
-		{
-			path: 'oidc.allowed_users',
-			value: users,
-		},
-	]);
-
-	context.integration?.onConfigChange(context.client);
-	return data('User added successfully.');
-}
-
-async function removeUser(formData: FormData, context: LoadContext) {
-	const user = formData.get('user')?.toString()?.trim();
-	if (!user) {
-		throw data('No user provided.', {
-			status: 400,
-		});
-	}
-
-	const storedUsers = context.hs.c?.oidc?.allowed_users ?? [];
-	if (!storedUsers.includes(user)) {
-		// User not found in the list
-		throw data(`User "${user}" not found in allowed users.`, {
-			status: 400,
-		});
-	}
-
-	// Filter out the user to remove it from the list
-	const users = storedUsers.filter((d: string) => d !== user);
-	await context.hs.patch([
-		{
-			path: 'oidc.allowed_users',
-			value: users,
-		},
-	]);
-
-	context.integration?.onConfigChange(context.client);
-	return data('User removed successfully.');
-}
-
-async function addGroup(formData: FormData, context: LoadContext) {
-	const group = formData.get('group')?.toString()?.trim();
-	if (!group) {
-		throw data('No group provided.', {
-			status: 400,
-		});
-	}
-
-	const groups = [
-		...new Set([...(context.hs.c?.oidc?.allowed_groups ?? []), group]),
-	];
-
-	await context.hs.patch([
-		{
-			path: 'oidc.allowed_groups',
-			value: groups,
-		},
-	]);
-
-	context.integration?.onConfigChange(context.client);
-	return data('Group added successfully.');
-}
-
-async function removeGroup(formData: FormData, context: LoadContext) {
-	const group = formData.get('group')?.toString()?.trim();
-	if (!group) {
-		throw data('No group provided.', {
-			status: 400,
-		});
-	}
-
-	const storedGroups = context.hs.c?.oidc?.allowed_groups ?? [];
-	if (!storedGroups.includes(group)) {
-		// Group not found in the list
-		throw data(`Group "${group}" not found in allowed groups.`, {
-			status: 400,
-		});
-	}
-
-	// Filter out the group to remove it from the list
-	const groups = storedGroups.filter((d: string) => d !== group);
-	await context.hs.patch([
-		{
-			path: 'oidc.allowed_groups',
-			value: groups,
-		},
-	]);
-
-	context.integration?.onConfigChange(context.client);
-	return data('Group removed successfully.');
-}

app/routes/settings/restrictions/dialogs/add-domain.tsx

@@ -1,64 +0,0 @@
-import { useMemo, useState } from 'react';
-import Dialog from '~/components/Dialog';
-import Input from '~/components/Input';
-
-interface AddDomainProps {
-	domains: string[];
-	isDisabled?: boolean;
-}
-
-export default function AddDomain({ domains, isDisabled }: AddDomainProps) {
-	const [domain, setDomain] = useState('');
-
-	const isInvalid = useMemo(() => {
-		if (!domain || domain.trim().length === 0) {
-			// Empty domain is invalid, but no error shown
-			return false;
-		}
-
-		if (domains.includes(domain.trim())) {
-			return true;
-		}
-
-		try {
-			// Check if domain is a valid FQDN
-			const url = new URL(`http://${domain.trim()}`);
-			return url.hostname !== domain.trim();
-		} catch (e) {
-			// If URL constructor fails, it's not a valid domain
-			return true;
-		}
-	}, [domain, domains]);
-
-	return (
-		<Dialog>
-			<Dialog.Button isDisabled={isDisabled}>Add domain</Dialog.Button>
-			<Dialog.Panel>
-				<Dialog.Title>Add domain</Dialog.Title>
-				<Dialog.Text className="mb-4">
-					Add this domain to a list of allowed email domains that can
-					authenticate with Headscale via OIDC.
-				</Dialog.Text>
-				<input type="hidden" name="action_id" value="add_domain" />
-				<Input
-					isRequired
-					label="Domain"
-					description={
-						domain.trim().length > 0
-							? `Matches users with <user>@${domain.trim()}`
-							: 'Enter a domain to match users with their email addresses.'
-					}
-					placeholder="example.com"
-					name="domain"
-					onChange={setDomain}
-					isInvalid={domain.trim().length === 0 || isInvalid}
-				/>
-				{isInvalid && (
-					<p className="text-red-500 text-sm mt-2">
-						The domain you entered is invalid or already exists in the list.
-					</p>
-				)}
-			</Dialog.Panel>
-		</Dialog>
-	);
-}

app/routes/settings/restrictions/dialogs/add-group.tsx

@@ -1,51 +0,0 @@
-import { useMemo, useState } from 'react';
-import Dialog from '~/components/Dialog';
-import Input from '~/components/Input';
-
-interface AddGroupProps {
-	groups: string[];
-	isDisabled?: boolean;
-}
-
-export default function AddGroup({ groups, isDisabled }: AddGroupProps) {
-	const [group, setGroup] = useState('');
-
-	const isInvalid = useMemo(() => {
-		if (!group || group.trim().length === 0) {
-			// Empty group is invalid, but no error shown
-			return false;
-		}
-
-		if (groups.includes(group.trim())) {
-			return true;
-		}
-	}, [group, groups]);
-
-	return (
-		<Dialog>
-			<Dialog.Button isDisabled={isDisabled}>Add group</Dialog.Button>
-			<Dialog.Panel>
-				<Dialog.Title>Add group</Dialog.Title>
-				<Dialog.Text className="mb-4">
-					Add this group to a list of allowed groups that can authenticate with
-					Headscale via OIDC.
-				</Dialog.Text>
-				<input type="hidden" name="action_id" value="add_group" />
-				<Input
-					isRequired
-					label="Group"
-					description="The group to allow for OIDC authentication."
-					placeholder="admin"
-					name="group"
-					onChange={setGroup}
-					isInvalid={group.trim().length === 0 || isInvalid}
-				/>
-				{isInvalid && (
-					<p className="text-red-500 text-sm mt-2">
-						The group you entered already exists in the list of allowed groups.
-					</p>
-				)}
-			</Dialog.Panel>
-		</Dialog>
-	);
-}

app/routes/settings/restrictions/dialogs/add-user.tsx

@@ -1,51 +0,0 @@
-import { useMemo, useState } from 'react';
-import Dialog from '~/components/Dialog';
-import Input from '~/components/Input';
-
-interface AddUserProps {
-	users: string[];
-	isDisabled?: boolean;
-}
-
-export default function AddUser({ users, isDisabled }: AddUserProps) {
-	const [user, setUser] = useState('');
-
-	const isInvalid = useMemo(() => {
-		if (!user || user.trim().length === 0) {
-			// Empty user is invalid, but no error shown
-			return false;
-		}
-
-		if (users.includes(user.trim())) {
-			return true;
-		}
-	}, [user, users]);
-
-	return (
-		<Dialog>
-			<Dialog.Button isDisabled={isDisabled}>Add user</Dialog.Button>
-			<Dialog.Panel>
-				<Dialog.Title>Add user</Dialog.Title>
-				<Dialog.Text className="mb-4">
-					Add this user to a list of allowed users that can authenticate with
-					Headscale via OIDC.
-				</Dialog.Text>
-				<input type="hidden" name="action_id" value="add_user" />
-				<Input
-					isRequired
-					label="User"
-					description="The user to allow for OIDC authentication."
-					placeholder="john_doe"
-					name="user"
-					onChange={setUser}
-					isInvalid={user.trim().length === 0 || isInvalid}
-				/>
-				{isInvalid && (
-					<p className="text-red-500 text-sm mt-2">
-						The user you entered already exists in the list of allowed users.
-					</p>
-				)}
-			</Dialog.Panel>
-		</Dialog>
-	);
-}

app/routes/settings/restrictions/overview.tsx

@@ -1,118 +0,0 @@
-import {
-	ActionFunctionArgs,
-	LoaderFunctionArgs,
-	Link as RemixLink,
-	data,
-	useLoaderData,
-} from 'react-router';
-import Link from '~/components/Link';
-import Notice from '~/components/Notice';
-import { LoadContext } from '~/server';
-import { Capabilities } from '~/server/web/roles';
-import { restrictionAction } from './actions';
-import AddDomain from './dialogs/add-domain';
-import AddGroup from './dialogs/add-group';
-import AddUser from './dialogs/add-user';
-import RestrictionTable from './table';
-
-export async function loader({
-	request,
-	context,
-}: LoaderFunctionArgs<LoadContext>) {
-	const check = await context.sessions.check(request, Capabilities.read_users);
-	if (!check) {
-		throw data('You do not have permission to view IAM settings.', {
-			status: 403,
-		});
-	}
-
-	if (!context.hs.c?.oidc) {
-		throw data('OIDC is not configured on this Headscale instance.', {
-			status: 501,
-		});
-	}
-
-	return {
-		access: await context.sessions.check(request, Capabilities.configure_iam),
-		writable: context.hs.writable(),
-		settings: {
-			domains: [...new Set(context.hs.c.oidc.allowed_domains)],
-			groups: [...new Set(context.hs.c.oidc.allowed_groups)],
-			users: [...new Set(context.hs.c.oidc.allowed_users)],
-		},
-	};
-}
-
-export async function action(request: ActionFunctionArgs) {
-	return restrictionAction(request);
-}
-
-export default function Page() {
-	const { access, writable, settings } = useLoaderData<typeof loader>();
-	const isDisabled = writable ? !access : true;
-
-	return (
-		<div className="flex flex-col gap-4 max-w-(--breakpoint-lg)">
-			<div className="flex flex-col w-2/3">
-				<p className="mb-4 text-md">
-					<RemixLink to="/settings" className="font-medium">
-						Settings
-					</RemixLink>
-					<span className="mx-2">/</span> Authentication Restrictions
-				</p>
-				{!access ? (
-					<Notice
-						title="Authentication permissions restricted"
-						variant="warning"
-					>
-						You do not have the necessary permissions to edit the Authentication
-						Restrictions settings. Please contact your administrator to request
-						access or to make changes to these settings.
-					</Notice>
-				) : !writable ? (
-					<Notice title="Configuration Locked" variant="error">
-						The Headscale configuration file is not editable through the web
-						interface. Please ensure that you have correctly given Headplane
-						write access to the file.
-					</Notice>
-				) : undefined}
-				<h1 className="text-2xl font-medium mb-2 mt-4">
-					Authentication Restrictions
-				</h1>
-				<p>
-					Headscale supports restricting OIDC authentication to only allow
-					certain email domains, groups, or users to authenticate. This can be
-					used to limit access to your Tailnet to only certain users or groups
-					and Headplane will also respect these settings when authenticating.{' '}
-					<Link
-						to="https://headscale.net/stable/ref/oidc/#basic-configuration"
-						name="Headscale OIDC documentation"
-					>
-						Learn More
-					</Link>
-				</p>
-			</div>
-			<RestrictionTable
-				type="domain"
-				values={settings.domains}
-				isDisabled={isDisabled}
-			>
-				<AddDomain domains={settings.domains} isDisabled={isDisabled} />
-			</RestrictionTable>
-			<RestrictionTable
-				type="group"
-				values={settings.groups}
-				isDisabled={isDisabled}
-			>
-				<AddGroup groups={settings.groups} isDisabled={isDisabled} />
-			</RestrictionTable>
-			<RestrictionTable
-				type="user"
-				values={settings.users}
-				isDisabled={isDisabled}
-			>
-				<AddUser users={settings.users} isDisabled={isDisabled} />
-			</RestrictionTable>
-		</div>
-	);
-}

app/routes/settings/restrictions/table.tsx

@@ -1,85 +0,0 @@
-import { GlobeLock, Group, User2 } from 'lucide-react';
-import React from 'react';
-import { Form } from 'react-router';
-import Button from '~/components/Button';
-import TableList from '~/components/TableList';
-import cn from '~/utils/cn';
-
-interface RestrictionProps {
-	children: React.ReactNode;
-	type: 'domain' | 'group' | 'user';
-	values: string[];
-	isDisabled?: boolean;
-}
-
-export default function RestrictionTable({
-	children,
-	type,
-	values,
-	isDisabled,
-}: RestrictionProps) {
-	return (
-		<div className="w-2/3">
-			<h2 className="text-2xl font-medium mt-8">
-				Permitted {type.charAt(0).toUpperCase() + type.slice(1)}s
-			</h2>
-			<TableList className="my-4">
-				{values.length > 0 ? (
-					values.map((value) => (
-						<TableList.Item key={`${type}-${value}`}>
-							{type === 'domain' ? (
-								<p>
-									<span className="text-headplane-600 dark:text-headplane-300">
-										{'<user>'}
-									</span>
-									<span className="font-bold">@</span>
-									<span>{value}</span>
-								</p>
-							) : (
-								<p>{value}</p>
-							)}
-							<Form method="POST">
-								<input
-									type="hidden"
-									name="action_id"
-									value={`remove_${type}`}
-								/>
-								<input type="hidden" name={type} value={value} />
-								<Button
-									isDisabled={isDisabled}
-									type="submit"
-									className={cn(
-										'px-2 py-1 rounded-md',
-										'text-red-500 dark:text-red-400',
-									)}
-								>
-									Remove
-								</Button>
-							</Form>
-						</TableList.Item>
-					))
-				) : (
-					<TableList.Item className="flex flex-col items-center gap-2.5 py-4 opacity-70">
-						{iconForType(type)}
-						<p className="font-semibold">
-							All {type}s are permitted to authenticate.
-						</p>
-					</TableList.Item>
-				)}
-			</TableList>
-			{children}
-		</div>
-	);
-}
-
-function iconForType(type: 'domain' | 'group' | 'user') {
-	if (type === 'domain') {
-		return <GlobeLock />;
-	}
-
-	if (type === 'group') {
-		return <Group />;
-	}
-
-	return <User2 />;
-}