Revert "Implement path-based secret loading"

This reverts commit 8ea8c7195f.

.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: mise run ci
+      - 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,9 +4,3 @@ node_modules
 /build
 /test
 .env
-app/hp_ssh.wasm
-app/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

@@ -6,20 +6,12 @@
 	},
 	"code_actions_on_format": {
 		"source.fixAll.biome": true,
-		"source.organizeImports.biome": true,
-		"source.organizeImports": true
+		"source.organizeImports.biome": true
 	},
 	"languages": {
 		"YAML": {
 			"tab_size": 2,
 			"hard_tabs": false
-		},
-		"Go": {
-			"formatter": {
-				"language_server": {
-					"name": "gopls"
-				}
-			}
 		}
 	}
 }

CHANGELOG.md

@@ -1,59 +1,5 @@
-### 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.
+- Fix an issue where other prefernences to skip onboarding affected every user.
 
 ### 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.

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,63 +1,18 @@
-FROM --platform=$BUILDPLATFORM jdxcode/mise:latest AS mise-context
-COPY mise.toml ./
-RUN --mount=type=secret,id=gh_token,env=MISE_GITHUB_TOKEN mise install
+FROM node:22-alpine AS build
+WORKDIR /app
 
-FROM --platform=$BUILDPLATFORM mise-context AS go-build
-WORKDIR /build/
-
-COPY go.mod go.sum ./
-RUN go mod download
-
-COPY cmd/ ./cmd/
-COPY internal/ ./internal/
-
-ARG TARGETOS
-ARG TARGETARCH
-ARG IMAGE_TAG
-RUN mkdir -p /build/app/ && \
-	GOOS=$TARGETOS GOARCH=$TARGETARCH CGO_ENABLED=0 IMAGE_TAG=$IMAGE_TAG \
-	mise run wasm ::: agent ::: fake-shell
-
-RUN chmod +x /build/build/hp_agent
-RUN chmod +x /build/build/sh
-
-FROM --platform=$BUILDPLATFORM mise-context AS js-build
-WORKDIR /build
-COPY patches ./patches
+RUN npm install -g pnpm@10
+RUN apk add --no-cache git
 COPY package.json pnpm-lock.yaml ./
+COPY patches ./patches
 RUN pnpm install --frozen-lockfile
 
 COPY . .
-RUN mise trust
-COPY --from=go-build /build/app/hp_ssh.wasm /build/app/hp_ssh.wasm
-COPY --from=go-build /build/app/wasm_exec.js /build/app/wasm_exec.js
+RUN pnpm run build
 
-ARG IMAGE_TAG
-RUN IMAGE_TAG=$IMAGE_TAG pnpm run build
-RUN mkdir -p /var/lib/headplane/agent
-
-FROM gcr.io/distroless/nodejs22-debian12:latest AS final
-COPY --from=js-build /build/build/ /app/build/
-COPY --from=js-build /build/drizzle /app/drizzle/
-COPY --from=js-build /var/lib/headplane /var/lib/headplane
-COPY --from=js-build /build/node_modules/ /app/node_modules/
-COPY --from=go-build /build/build/hp_agent /usr/libexec/headplane/agent
-
-# Fake shell to inform the user that they should use the debug image
-COPY --from=go-build /build/build/sh /bin/sh
-COPY --from=go-build /build/build/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 git
-
-COPY --from=js-build /build/build/ /app/build/
-COPY --from=js-build /build/drizzle /app/drizzle/
-COPY --from=js-build /var/lib/headplane /var/lib/headplane
-COPY --from=js-build /build/node_modules/ /app/node_modules/
-COPY --from=go-build /build/build/hp_agent /usr/libexec/headplane/agent
-
-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>
 
@@ -44,12 +44,12 @@ There are 2 ways to deploy Headplane:
   Simple mode does not include the automatic management of DNS and Headplane
   settings, requiring manual editing and reloading when making changes.
 
-## Versioning
+### 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.
@@ -59,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/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

@@ -41,7 +41,6 @@ export function Layout({ children }: { readonly children: React.ReactNode }) {
 					<meta name="viewport" content="width=device-width, initial-scale=1" />
 					<Meta />
 					<Links />
-					<link rel="icon" href="favicon.ico" />
 				</head>
 				<body className="overscroll-none dark:bg-headplane-900 dark:text-headplane-50">
 					{children}

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 />;
-}

app/routes/ssh/console.tsx

@@ -1,281 +0,0 @@
-/** biome-ignore-all lint/correctness/noNestedComponentDefinitions: Wtf? */
-import { faker } from '@faker-js/faker';
-import { eq } from 'drizzle-orm';
-import { Loader2 } from 'lucide-react';
-import { useEffect, useState } from 'react';
-import {
-	ActionFunctionArgs,
-	data,
-	LoaderFunctionArgs,
-	ShouldRevalidateFunction,
-	useLoaderData,
-	useSubmit,
-} from 'react-router';
-import wasm from '~/hp_ssh.wasm?url';
-import { LoadContext } from '~/server';
-import { EphemeralNodeInsert, ephemeralNodes } from '~/server/db/schema';
-import { Machine, PreAuthKey, User } from '~/types';
-import { useLiveData } from '~/utils/live-data';
-import '~/wasm_exec';
-import UserPrompt from './user-prompt';
-import XTerm from './xterm.client';
-
-export const shouldRevalidate: ShouldRevalidateFunction = () => {
-	return false;
-};
-
-export async function loader({
-	request,
-	context,
-}: LoaderFunctionArgs<LoadContext>) {
-	if (!context.agents?.agentID()) {
-		throw data(
-			'WebSSH is only available with the Headplane agent integration',
-			400,
-		);
-	}
-
-	const session = await context.sessions.auth(request);
-	if (session.user.subject === 'unknown-non-oauth') {
-		throw data('Only OAuth users are allowed to use WebSSH', 403);
-	}
-	const { users } = await context.client.get<{ users: User[] }>(
-		'v1/user',
-		session.api_key,
-	);
-
-	// MARK: This assumes that a user has authenticated with Headscale first
-	// Since the only way to enforce permissions via ACLs is to generate a
-	// pre-authkey which REQUIRES a user ID, meaning the user has to have
-	// authenticated with Headscale first.
-	const lookup = users.find((u) => {
-		const subject = u.providerId?.split('/').pop();
-		if (!subject) {
-			return false;
-		}
-		return subject === session.user.subject;
-	});
-
-	if (!lookup) {
-		throw data(
-			`User with subject ${session.user.subject} not found within Headscale`,
-			404,
-		);
-	}
-
-	const { preAuthKey } = await context.client.post<{ preAuthKey: PreAuthKey }>(
-		'v1/preauthkey',
-		session.api_key,
-		{
-			user: lookup.id,
-			reusable: false,
-			ephemeral: true,
-			expiration: new Date(Date.now() + 60 * 1000).toISOString(), // 1 minute
-		},
-	);
-
-	// TODO: Enable config to enforce generate_authkeys capability
-	// For now, any user is capable of WebSSH connections
-	// const check = await context.sessions.check(
-	// 	request,
-	// 	Capabilities.generate_authkeys,
-	// );
-
-	const qp = new URL(request.url).searchParams;
-	const username = qp.get('username') || undefined;
-	const hostname = qp.get('hostname') || undefined;
-	if (!hostname) {
-		throw data('Missing required parameter:  hostname', 400);
-	}
-
-	if (!username) {
-		return {
-			ipnDetails: undefined,
-			sshDetails: {
-				username,
-				hostname,
-			},
-		};
-	}
-
-	// We're making a request to <url>/key?v=116 to check the CORS headers
-	const u = context.config.headscale.public_url ?? context.config.headscale.url;
-	// const res = await fetch(`${u}/key?v=116`, {
-	// 	method: 'GET',
-	// });
-
-	// const corsOrigin = res.headers.get('Access-Control-Allow-Origin');
-	// const corsMethods = res.headers.get('Access-Control-Allow-Methods');
-	// const corsHeaders = res.headers.get('Access-Control-Allow-Headers');
-	// console.log(corsOrigin, corsMethods, corsHeaders);
-
-	// if (!corsOrigin || !corsMethods || !corsHeaders) {
-	// 	throw data(
-	// 		'Headscale server does not have the required CORS headers for WebSSH',
-	// 		500,
-	// 	);
-	// }
-
-	const { nodes } = await context.client.get<{ nodes: Machine[] }>(
-		'v1/node',
-		session.api_key,
-	);
-
-	// node.name is the hostname, given_name is the set name
-	const lookupNode = nodes.find((n) => n.name === hostname);
-	if (!lookupNode) {
-		throw data(`Node with hostname ${hostname} not found`, 404);
-	}
-
-	// Last thing is keeping track of the ephemeral node in the database
-	// because Headscale doesn't automatically delete ephemeral nodes???
-	const [_ephemeralNode] = await context.db
-		.insert(ephemeralNodes)
-		.values({
-			auth_key: preAuthKey.key,
-		} satisfies EphemeralNodeInsert)
-		.returning();
-
-	return {
-		ipnDetails: {
-			PreAuthKey: preAuthKey.key,
-			Hostname: generateHostname(username),
-			ControlURL: u,
-		},
-
-		sshDetails: {
-			username,
-			hostname,
-		},
-	};
-}
-
-function generateHostname(username: string) {
-	const adjective = faker.word.adjective({
-		length: {
-			min: 3,
-			max: 6,
-		},
-	});
-
-	const noun = faker.word.noun({
-		length: {
-			min: 3,
-			max: 6,
-		},
-	});
-
-	return `ssh-${adjective}-${noun}-${username}`;
-}
-
-export async function action({
-	request,
-	context,
-}: ActionFunctionArgs<LoadContext>) {
-	const _session = await context.sessions.auth(request);
-	if (!context.agents?.agentID()) {
-		throw data(
-			'WebSSH is only available with the Headplane agent integration',
-			400,
-		);
-	}
-
-	const form = await request.formData();
-	const nodeKey = form.get('node_key');
-	const authKey = form.get('auth_key');
-
-	if (nodeKey === null || typeof nodeKey !== 'string') {
-		throw data('Missing node_key', 400);
-	}
-
-	if (authKey === null || typeof authKey !== 'string') {
-		throw data('Missing auth_key', 400);
-	}
-
-	await context.db
-		.update(ephemeralNodes)
-		.set({
-			node_key: nodeKey,
-		})
-		.where(eq(ephemeralNodes.auth_key, authKey));
-}
-
-export default function Page() {
-	const submit = useSubmit();
-	const { pause } = useLiveData();
-
-	const [ipn, setIpn] = useState<TsWasmNet | null>(null);
-	const [nodeKey, setNodeKey] = useState<string | null>(null);
-	const { ipnDetails, sshDetails } = useLoaderData<typeof loader>();
-
-	useEffect(() => {
-		if (!ipnDetails) {
-			return;
-		}
-
-		pause();
-		const go = new Go(); // Go is defined by wasm_exec.js
-		WebAssembly.instantiateStreaming(fetch(wasm), go.importObject).then(
-			(value) => {
-				go.run(value.instance);
-				const handle = TsWasmNet(ipnDetails, {
-					NotifyState: (state) => {
-						console.log('State changed:', state);
-						if (state === 'Running') {
-							setIpn(handle);
-						}
-					},
-					NotifyNetMap: (netmap) => {
-						// Only set NodeKey if it is not already set and then
-						// also dispatch that to the backend to track the
-						// ephemeral node.
-						//
-						// We open an SSE connection to the backend
-						// so that when the connection is closed,
-						// the backend can delete the ephemeral node.
-						if (nodeKey === null) {
-							setNodeKey(netmap.NodeKey);
-							submit(
-								{
-									node_key: netmap.NodeKey,
-									auth_key: ipnDetails.PreAuthKey,
-								},
-								{ method: 'POST' },
-							);
-						}
-					},
-					NotifyBrowseToURL: (url) => {
-						console.log('Browse to URL:', url);
-					},
-					NotifyPanicRecover: (message) => {
-						console.error('Panic recover:', message);
-					},
-				});
-
-				handle.Start();
-			},
-		);
-	}, []);
-
-	if (!sshDetails.username) {
-		return <UserPrompt hostname={sshDetails.hostname} />;
-	}
-
-	return (
-		<div className="w-screen h-screen bg-headplane-900">
-			{ipn === null ? (
-				<div className="mx-auto h-screen flex items-center justify-center">
-					<Loader2 className="animate-spin size-10 text-headplane-50" />
-				</div>
-			) : (
-				<div className="flex flex-col h-screen">
-					<XTerm
-						hostname={sshDetails.hostname}
-						ipn={ipn}
-						username={sshDetails.username}
-					/>
-				</div>
-			)}
-		</div>
-	);
-}

app/routes/ssh/hp_ssh.d.ts

@@ -1,57 +0,0 @@
-declare function TsWasmNet(
-	options: TsWasmNetOptions,
-	callbacks: TsWasmNetCallbacks,
-): TsWasmNet;
-
-interface TsWasmNetOptions {
-	ControlURL: string;
-	PreAuthKey: string;
-	Hostname: string;
-}
-
-interface TsWasmNetCallbacks {
-	NotifyState: (state: IPNState) => void;
-	NotifyNetMap: (netmap: TsWasmNetMap) => void;
-	NotifyBrowseToURL: (url: string) => void;
-	NotifyPanicRecover: (err: string) => void;
-}
-
-interface TsWasmNetMap {
-	NodeKey: string;
-}
-
-interface TsWasmNet {
-	Start: () => void;
-	OpenSSH: (
-		hostname: string,
-		username: string,
-		options: XtermConfig,
-	) => SSHSession;
-}
-
-type IPNState =
-	| 'NoState'
-	| 'InUseOtherUser'
-	| 'NeedsLogin'
-	| 'NeedsMachineAuth'
-	| 'Stopped'
-	| 'Starting'
-	| 'Running';
-
-interface XtermConfig {
-	rows: number;
-	cols: number;
-	timeout?: number;
-
-	onStdout: (data: Uint8Array) => void;
-	onStderr: (data: Uint8Array) => void;
-	onStdin: (func: (input: Uint8Array) => void) => void;
-
-	onConnect: () => void;
-	onDisconnect: () => void;
-}
-
-interface SSHSession {
-	Close(): boolean;
-	Resize(rows: number, cols: number): boolean;
-}