chore: upgrade dev to 0.28

chore: update flake.lock

.dockerignore

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

.env.example

@@ -1,7 +0,0 @@
-ROOT_API_KEY=abcdefghijklmnopqrstuvwxyz
-COOKIE_SECRET=abcdefghijklmnopqrstuvwxyz
-DISABLE_API_KEY_LOGIN=true
-HEADSCALE_CONTAINER=headscale
-HOST=0.0.0.0
-PORT=3000
-CONFIG_FILE=/etc/headscale/config.yaml

.github/CODEOWNERS

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

.github/FUNDING.yml

@@ -0,0 +1,2 @@
+github: tale
+ko_fi: atale

.github/ISSUE_TEMPLATE/bug-report.yaml

@@ -0,0 +1,31 @@
+name: Bug Report
+description: Report an issue with Headplane
+assignees: [tale]
+labels: ["Bug", "Needs Triage"]
+body:
+  - type: textarea
+    attributes:
+      label: Description
+      description: |
+        A detailed description of the issue and steps to reproduce it.
+        If applicable, include any error messages or screenshots.
+
+        If this is not an issue with Headplane, but an issue with your
+        environment, please consider opening a discussion instead.
+      placeholder: e.g. "When I try to upload a file, I get an error message."
+    validations:
+      required: true
+  - type: input
+    attributes:
+      label: Headplane Version
+      description: What version of Headplane are you using?
+      placeholder: e.g. "v0.6.2"
+    validations:
+      required: true
+  - type: input
+    attributes:
+      label: Headscale Version
+      description: What version of Headscale are you using?
+      placeholder: e.g. "v0.27.1"
+    validations:
+      required: true

.github/ISSUE_TEMPLATE/config.yml

@@ -0,0 +1 @@
+blank_issues_enabled: false

.github/ISSUE_TEMPLATE/feature-request.yaml

@@ -0,0 +1,15 @@
+name: Feature Request
+description: Request a new feature or enhancement for Headplane
+assignees: [tale]
+labels: ["Feature", "Needs Triage"]
+body:
+  - type: textarea
+    attributes:
+      label: Description
+      description: |
+        A detailed description of the feature you would like to see added.
+        Please include any relevant context, such as why this feature is
+        important and how it would benefit other users beyond yourself.
+      placeholder: e.g. "I would like to see support for custom themes in Headplane so that I can personalize the interface to my liking."
+    validations:
+      required: true

.github/workflows/automated.yaml

@@ -0,0 +1,33 @@
+name: Automated
+on:
+  schedule:
+    - cron: "0 8 * * 0"
+  workflow_dispatch:
+
+concurrency:
+  group: automation-${{ github.ref }}
+  cancel-in-progress: true
+
+permissions:
+  actions: write # Allow canceling in-progress runs
+  contents: write # Read/write access to the repository
+  pull-requests: write # Allow creating pull requests
+
+jobs:
+  flake-inputs:
+    name: flake-inputs
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out the repo
+        uses: actions/checkout@v4
+
+      - name: Install Nix
+        uses: DeterminateSystems/nix-installer-action@main
+        with:
+          determinate: true
+
+      - uses: DeterminateSystems/update-flake-lock@main
+        with:
+          pr-title: "chore: update flake.lock"
+          pr-labels: |
+            automated

.github/workflows/build.yaml

@@ -0,0 +1,70 @@
+name: Build
+on:
+  push:
+    paths-ignore:
+      - "assets/**"
+      - "docs/**"
+      - "CHANGELOG.md"
+      - "README.md"
+    branches:
+      - "main"
+  pull_request:
+
+concurrency:
+  group: ci-${{ github.ref }}
+  cancel-in-progress: true
+
+permissions:
+  actions: write # Allow canceling in-progress runs
+  contents: read # Read access to the repository
+
+jobs:
+  ci:
+    name: Build and Test
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out the repo
+        uses: actions/checkout@v4
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          run_install: false
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v6
+        with:
+          node-version-file: package.json
+          cache: pnpm
+
+      - name: Setup Go
+        uses: actions/setup-go@v6
+        with:
+          go-version-file: go.mod
+
+      - name: CI pipeline
+        run: ./build.sh --skip-pnpm-prune
+
+      - name: Run unit tests
+        run: pnpm run test:unit
+
+      - name: Run integration tests
+        run: pnpm run test:integration
+
+  nix:
+    name: nix
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out the repo
+        uses: actions/checkout@v4
+
+      - name: Install Nix
+        uses: DeterminateSystems/nix-installer-action@main
+        with:
+          determinate: true
+
+      - name: Check flake inputs
+        uses: DeterminateSystems/flake-checker-action@main
+
+      - name: Check flake outputs
+        run: nix flake check --all-systems

.github/workflows/next.yaml

@@ -0,0 +1,81 @@
+name: Pre-release (next)
+on:
+  workflow_dispatch:
+  pull_request:
+    types: [opened, synchronize, reopened]
+
+concurrency:
+  group: pre-release-${{ github.ref }}
+  cancel-in-progress: true
+
+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:
+    # Ensure the action only runs if manually dispatched or a PR on the `next` branch in the *main* repository is opened or synchronized.
+    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
+
+      - name: Docker Metadata
+        id: meta
+        uses: docker/metadata-action@v5
+        with:
+          images: ghcr.io/${{ github.repository }}
+          tags: |
+            type=raw,value=${{ matrix.tag }}
+
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v3
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Log in to ghcr.io
+        uses: docker/login-action@v3
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Build and publish ghcr.io/${{ github.repository }}:${{ matrix.tag }}
+        uses: docker/build-push-action@v6
+        id: push
+        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/nightly.yaml

@@ -1,44 +0,0 @@
-name: Publish Nightly Docker Image
-on:
-  schedule:
-    - cron: '0 8 * * *'
-  workflow_dispatch:
-
-jobs:
-  publish:
-    name: Build and Publish Nightly
-    runs-on: ubuntu-latest
-    steps:
-      - name: Check out the repo
-        uses: actions/checkout@v4
-
-      - name: Set up QEMU
-        uses: docker/setup-qemu-action@v3
-
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3
-
-      - name: Log in to ghcr.io
-        uses: docker/login-action@v3
-        with:
-          registry: ghcr.io
-          username: ${{ github.actor }}
-          password: ${{ secrets.GITHUB_TOKEN }}
-
-      - name: Docker Metadata
-        id: meta
-        uses: docker/metadata-action@v5
-        with:
-          images: ghcr.io/${{ github.repository }}
-          tags: |
-            type=edge,branch=main
-
-      - name: Build and push Docker image
-        uses: docker/build-push-action@v5
-        with:
-          context: .
-          file: ./Dockerfile
-          push: true
-          tags: ${{ steps.meta.outputs.tags }}
-          labels: ${{ steps.meta.outputs.labels }}
-          platforms: linux/amd64, linux/arm64

.github/workflows/publish.yaml

@@ -1,42 +0,0 @@
-name: Publish Docker Image
-on:
-  push:
-    tags:
-      - '*'
-
-jobs:
-  publish:
-    name: Build and Publish
-    runs-on: ubuntu-latest
-    steps:
-      - name: Check out the repo
-        uses: actions/checkout@v4
-
-      - name: Set up QEMU
-        uses: docker/setup-qemu-action@v3
-
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3
-
-      - name: Log in to ghcr.io
-        uses: docker/login-action@v3
-        with:
-          registry: ghcr.io
-          username: ${{ github.actor }}
-          password: ${{ secrets.GITHUB_TOKEN }}
-
-      - name: Docker Metadata
-        id: meta
-        uses: docker/metadata-action@v5
-        with:
-          images: ghcr.io/${{ github.repository }}
-
-      - name: Build and push Docker image
-        uses: docker/build-push-action@v5
-        with:
-          context: .
-          file: ./Dockerfile
-          push: true
-          tags: ${{ steps.meta.outputs.tags }}
-          labels: ${{ steps.meta.outputs.labels }}
-          platforms: linux/amd64, linux/arm64

.github/workflows/push.yaml

@@ -1,44 +0,0 @@
-name: 'Build'
-on:
-  push:
-    branches:
-      - 'main'
-  pull_request:
-
-jobs:
-  build:
-    name: Build
-    runs-on: ubuntu-latest
-    steps:
-      - name: Check out the repo
-        uses: actions/checkout@v4
-
-      - name: Install node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: 20
-
-      - uses: pnpm/action-setup@v4
-        name: Install pnpm
-        with:
-          version: 9
-          run_install: false
-
-      - name: Get pnpm store directory
-        shell: bash
-        run: |
-          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
-
-      - uses: actions/cache@v4
-        name: Setup pnpm cache
-        with:
-          path: ${{ env.STORE_PATH }}
-          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
-          restore-keys: |
-            ${{ runner.os }}-pnpm-store-
-
-      - name: Install dependencies
-        run: pnpm install
-
-      - name: Build
-        run: pnpm build

.github/workflows/release.yaml

@@ -0,0 +1,79 @@
+name: Release
+on:
+  push:
+    tags:
+      - "*"
+
+concurrency:
+  group: release-${{ github.ref }}
+  cancel-in-progress: true
+
+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
+
+      - name: Docker Metadata
+        id: meta
+        uses: docker/metadata-action@v5
+        with:
+          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
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Log in to ghcr.io
+        uses: docker/login-action@v3
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Build and push ${{ fromJSON(steps.meta.outputs.json).tags[0] }}
+        uses: docker/build-push-action@v6
+        id: push
+        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

@@ -2,4 +2,14 @@ node_modules
 /.react-router
 /.cache
 /build
+/test
 .env
+/app/hp_ssh.wasm
+/app/wasm_exec.js
+
+/public/hp_ssh.wasm
+/public/wasm_exec.js
+
+/docs/.vitepress/dist/
+/docs/.vitepress/cache/
+/.direnv

.npmrc

@@ -0,0 +1 @@
+side-effects-cache = false

.oxfmtrc.json

@@ -0,0 +1,10 @@
+{
+  "$schema": "./node_modules/oxfmt/configuration_schema.json",
+  "endOfLine": "lf",
+  "experimentalSortImports": {},
+  "experimentalTailwindcss": {},
+  "ignorePatterns": [],
+  "printWidth": 100,
+  "tabWidth": 2,
+  "useTabs": false
+}

.oxlintrc.json

@@ -0,0 +1,144 @@
+{
+  "$schema": "./node_modules/oxlint/configuration_schema.json",
+  "plugins": ["unicorn", "typescript", "oxc"],
+  "categories": {},
+  "rules": {
+    "constructor-super": "warn",
+    "for-direction": "warn",
+    "no-async-promise-executor": "warn",
+    "no-caller": "warn",
+    "no-class-assign": "warn",
+    "no-compare-neg-zero": "warn",
+    "no-cond-assign": "warn",
+    "no-const-assign": "warn",
+    "no-constant-binary-expression": "warn",
+    "no-constant-condition": "warn",
+    "no-control-regex": "warn",
+    "no-debugger": "warn",
+    "no-delete-var": "warn",
+    "no-dupe-class-members": "warn",
+    "no-dupe-else-if": "warn",
+    "no-dupe-keys": "warn",
+    "no-duplicate-case": "warn",
+    "no-empty-character-class": "warn",
+    "no-empty-pattern": "warn",
+    "no-empty-static-block": "warn",
+    "no-eval": "warn",
+    "no-ex-assign": "warn",
+    "no-extra-boolean-cast": "warn",
+    "no-func-assign": "warn",
+    "no-global-assign": "warn",
+    "no-import-assign": "warn",
+    "no-invalid-regexp": "warn",
+    "no-irregular-whitespace": "warn",
+    "no-loss-of-precision": "warn",
+    "no-new-native-nonconstructor": "warn",
+    "no-nonoctal-decimal-escape": "warn",
+    "no-obj-calls": "warn",
+    "no-self-assign": "warn",
+    "no-setter-return": "warn",
+    "no-shadow-restricted-names": "warn",
+    "no-sparse-arrays": "warn",
+    "no-this-before-super": "warn",
+    "no-unassigned-vars": "warn",
+    "no-unsafe-finally": "warn",
+    "no-unsafe-negation": "warn",
+    "no-unsafe-optional-chaining": "warn",
+    "no-unused-expressions": "warn",
+    "no-unused-labels": "warn",
+    "no-unused-private-class-members": "warn",
+    "no-unused-vars": "warn",
+    "no-useless-backreference": "warn",
+    "no-useless-catch": "warn",
+    "no-useless-escape": "warn",
+    "no-useless-rename": "warn",
+    "no-with": "warn",
+    "require-yield": "warn",
+    "use-isnan": "warn",
+    "valid-typeof": "warn",
+    "oxc/bad-array-method-on-arguments": "warn",
+    "oxc/bad-char-at-comparison": "warn",
+    "oxc/bad-comparison-sequence": "warn",
+    "oxc/bad-min-max-func": "warn",
+    "oxc/bad-object-literal-comparison": "warn",
+    "oxc/bad-replace-all-arg": "warn",
+    "oxc/const-comparisons": "warn",
+    "oxc/double-comparisons": "warn",
+    "oxc/erasing-op": "warn",
+    "oxc/missing-throw": "warn",
+    "oxc/number-arg-out-of-range": "warn",
+    "oxc/only-used-in-recursion": "warn",
+    "oxc/uninvoked-array-callback": "warn",
+    "typescript/await-thenable": "warn",
+    "typescript/no-array-delete": "warn",
+    "typescript/no-base-to-string": "warn",
+    "typescript/no-duplicate-enum-values": "warn",
+    "typescript/no-duplicate-type-constituents": "warn",
+    "typescript/no-extra-non-null-assertion": "warn",
+    "typescript/no-floating-promises": "warn",
+    "typescript/no-for-in-array": "warn",
+    "typescript/no-implied-eval": "warn",
+    "typescript/no-meaningless-void-operator": "warn",
+    "typescript/no-misused-new": "warn",
+    "typescript/no-misused-spread": "warn",
+    "typescript/no-non-null-asserted-optional-chain": "warn",
+    "typescript/no-redundant-type-constituents": "warn",
+    "typescript/no-this-alias": "warn",
+    "typescript/no-unnecessary-parameter-property-assignment": "warn",
+    "typescript/no-unsafe-declaration-merging": "warn",
+    "typescript/no-unsafe-unary-minus": "warn",
+    "typescript/no-useless-empty-export": "warn",
+    "typescript/no-wrapper-object-types": "warn",
+    "typescript/prefer-as-const": "warn",
+    "typescript/require-array-sort-compare": "warn",
+    "typescript/restrict-template-expressions": "warn",
+    "typescript/triple-slash-reference": "warn",
+    "typescript/unbound-method": "warn",
+    "unicorn/no-await-in-promise-methods": "warn",
+    "unicorn/no-empty-file": "warn",
+    "unicorn/no-invalid-fetch-options": "warn",
+    "unicorn/no-invalid-remove-event-listener": "warn",
+    "unicorn/no-new-array": "warn",
+    "unicorn/no-single-promise-in-promise-methods": "warn",
+    "unicorn/no-thenable": "warn",
+    "unicorn/no-unnecessary-await": "warn",
+    "unicorn/no-useless-fallback-in-spread": "warn",
+    "unicorn/no-useless-length-check": "warn",
+    "unicorn/no-useless-spread": "warn",
+    "unicorn/prefer-set-size": "warn",
+    "unicorn/prefer-string-starts-ends-with": "warn"
+  },
+  "settings": {
+    "jsx-a11y": {
+      "polymorphicPropName": null,
+      "components": {},
+      "attributes": {}
+    },
+    "next": {
+      "rootDir": []
+    },
+    "react": {
+      "formComponents": [],
+      "linkComponents": [],
+      "version": null
+    },
+    "jsdoc": {
+      "ignorePrivate": false,
+      "ignoreInternal": false,
+      "ignoreReplacesDocs": true,
+      "overrideReplacesDocs": true,
+      "augmentsExtendsReplacesDocs": false,
+      "implementsReplacesDocs": false,
+      "exemptDestructuredRootsFromChecks": false,
+      "tagNamePreference": {}
+    },
+    "vitest": {
+      "typecheck": false
+    }
+  },
+  "env": {
+    "builtin": true
+  },
+  "globals": {},
+  "ignorePatterns": []
+}

CHANGELOG.md

@@ -1,4 +1,224 @@
-### 0.4.0 (January 6, 2025)
+# 0.6.2 (Next)
+
+- Added search and sortable columns to the machines list page (closes [#351](https://github.com/tale/headplane/issues/351)).
+- Added support for Headscale 0.27.0 and 0.27.1
+- Bundle all `node_modules` aside from native ones to reduce bundle and container size (closes [#331](https://github.com/tale/headplane/issues/331)).
+- Allow conditionally compiling the SSH WASM integration when building (closes [#337](https://github.com/tale/headplane/issues/337)).
+- Implemented the ability to customize the build with a custom script (see `./build.sh --help` for more information).
+- Attempt to warn against misconfigured cookie settings on the login page.
+- Made `server.cookie_max_age` and `server.cookie_domain` configurable (closes [#348](https://github.com/tale/headplane/issues/348)).
+- Re-worked the configuration loading system with several enhancements:
+  - It is now possible to skip a configuration file and only use environment variables (closes [#150](https://github.com/tale/headplane/issues/150)).
+  - Secret path loading has been reworked from the ground up to be more reliable (closes [#334](https://github.com/tale/headplane/issues/334)).
+  - Added better testing and validation for configuration loading
+- Re-worked the OIDC integration to adhere to the correct standards and surface more errors to the user.
+  - Deprecated `oidc.redirect_uri` and automated callback URL detection in favor of setting `server.base_url` correctly.
+  - Explicitly added `oidc.use_pkce` to correctly determine PKCE configuration.
+  - `oidc.token_endpoint_auth_method` is now optional and will attempt to be auto-detected, defaulting to `client_secret_basic` if unavailable (closes [#410](https://github.com/tale/headplane/issues/410)).
+- Removed several unnecessarily verbose or spammy log messages.
+- Updated the minimum Docker API used to support the latest Docker versions (via [#370](https://github.com/tale/headplane/pull/370)).
+- Enhanced the node tag dialog to show a dropdown of assignable tags (via [#362](https://github.com/tale/headplane/pull/362)).
+- Fixed an issue where the website favicon would not load correctly (closes [#323](https://github.com/tale/headplane/issues/323)).
+- Correctly handle invalid ACL policy inserts on Headscale 0.27+ (closes [#383](https://github.com/tale/headplane/issues/383)).
+- Prevent a machine from changing its owner to itself (closes [#373](https://github.com/tale/headplane/issues/373)).
+- Added an `/admin/api/info` route that can expose sensitive information if `server.info_secret` is set in the configuration (closes [#324](https://github.com/tale/headplane/issues/324)).
+- Correctly apply Gravatar profile pictures on the user page if applicable (closes [#405](https://github.com/tale/headplane/issues/405)).
+- Machine key registration no longer works if the key isn't 24 characters long (closes [#415](https://github.com/tale/headplane/issues/415)).
+- Fixed some mobile CSS issues across the application (closes [#401](https://github.com/tale/headplane/issues/401)).
+- Added a Docker healthcheck to the container (closes [#411](https://github.com/tale/headplane/issues/411)).
+- Strengthened the validation for the `/proc` integration to correctly discover the Headscale PID.
+- Added lazy retry logic for OIDC providers if they initially fail to respond (closes [#423](https://github.com/tale/headplane/issues/423)).
+- Fixed API key login on Headcale 0.28.0-beta.1+ (closes [#429](https://github.com/tale/headplane/issues/429)).
+- Fixed an issue that prevented the pre-auth-key UI from being usable on Headscale 0.28 and later.
+
+---
+
+# 0.6.1 (October 12, 2025)
+
+- **Headplane now supports connecting to machines via SSH in the web browser.**
+  - This is an experimental feature and requires the `integration.agent` section to be set up in the config file.
+  - This is built on top of a Go binary that runs in WebAssembly, using Xterm.js for the terminal interface.
+- Begin using a new SQLite database file in `/var/lib/headplane/hp_persist.db`.
+  - The database is created automatically if it does not exist.
+  - It currently stores SSH connection details and HostInfo for the agent.
+  - User information is automatically migrated from the previous database.
+- The docker container now runs in a distroless image (closes [#255](https://github.com/tale/headplane/issues/255)).
+  - A debug version of the container that runs as root and has a shell is available as `ghcr.io/tale/headplane:<version>-shell`.
+- Removing a Split DNS record will no longer make the split domain unresolvable by clients (closes [#231](https://github.com/tale/headplane/issues/231)).
+- Reintroduce the toggle for overriding local DNS settings in the Headscale config (closes [#236](https://github.com/tale/headplane/issues/236)).
+- Prefer cross-compiling in the Dockerfile to speed up builds while still supporting multiple architectures.
+- Add a build attestation to validate SLSA provenance for the Docker image.
+- Implement more accurate guessing on the PID with the `/proc` integration (via [#219](https://github.com/tale/headplane/pull/219)).
+- Usernames will now correctly fall back to emails if not provided (via [#257](https://github.com/tale/headplane/pull/257)).
+- Configuration loading via paths is now supported for sensitive values (via [#283](https://github.com/tale/headplane/pulls/283))
+  - Options like `server.cookie_secret_path` can override `server.cookie_secret`
+  - Environment variables are interpolatable into these paths
+  - See the full reference in the [docs](https://github.com/tale/headplane/blob/main/docs/Configuration.md#sensitive-values)
+- The nix overlay build is fixed for the SSH module (via [#282](https://github.com/tale/headplane/pull/282))
+- Switch our build processes to use TypeScript Go and Rolldown Vite for better build and type-check performance.
+- Cookies are now encrypted JWTs, preserving API key secrets (_GHSA-wrqq-v7qw-r5w7_)
+- OIDC profile pictures are now available from Gravatar by setting `oidc.profile_picture_source` to `gravatar` (closes [#232](https://github.com/tale/headplane/issues/232)).
+- OIDC now allows passing many custom parameters:
+  - `oidc.authorization_endpoint`, `oidc.token_endpoint`, and `oidc.userinfo_endpoint` can be overridden to support non-standard providers or scenarios without discovery (closes [#117](https://github.com/tale/headplane/issues/117)).
+  - `oidc.scope` can be set to specify custom scopes (defaults to `openid email profile`).
+  - `oidc.extra_params` can be set to pass arbitrary query parameters to the authorization endpoint (closes [#197](https://github.com/tale/headplane/issues/197)).
+
+---
+
+# 0.6.0 (May 25, 2025)
+
+- Headplane 0.6.0 now requires **Headscale 0.26.0** or newer.
+  - Breaking API changes with routes and pre auth keys are now supported (closes [#204](https://github.com/tale/headplane/issues/204)).
+  - Older versions of Headscale will not work with Headplane.
+
+- OIDC authorization restrictions can now be controlled from the settings UI. (closes [#102](https://github.com/tale/headplane/issues/102))
+  - The required permission role for this is **IT Admin** or **Admin/Owner** and require the Headscale configuration.
+  - Changes made will modify the `oidc.allowed_{domains,groups,users}` fields in the Headscale config file.
+- The Pre-Auth keys page has been fully reworked (closes [#179](https://github.com/tale/headplane/issues/179), [#143](https://github.com/tale/headplane/issues/143)).
+- The Headplane agent is now available as an integration (closes [#65](https://github.com/tale/headplane/issues/65)).
+  - The agent runs as an embedded process alongside the Headplane server and reports host information and system metrics.
+  - Refer to the `integrations.agent` section of the config file for more information and how to enable it.
+- Requests to `/admin` will now be redirected to `/admin/` to prevent issues with the React Router (works with custom prefixes, closes [#173](https://github.com/tale/headplane/issues/173)).
+- The Login page has been simplified and separately reports errors versus incorrect API keys (closes [#186](https://github.com/tale/headplane/issues/186)).
+- The machine actions backend has been reworked to better handle errors and provide more information to the user (closes [#185](https://github.com/tale/headplane/issues/185)).
+- Machine tags now show states when waiting for subnet or exit node approval and when expiry is disabled.
+- Expiry status on the UI was incorrectly showing as never due to changes in the Headscale API.
+- Added validation for machine renaming to prevent invalid submissions (closes [#192](https://github.com/tale/headplane/issues/192)).
+- Unmanaged (non-OIDC) users cannot have a role assigned to them so the menu option was disabled.
+- Support Docker container discovery through labels (via [#194](https://github.com/tale/headplane/pull/194)).
+- AAAA records are now supported on the DNS page (closes [#189](https://github.com/tale/headplane/issues/189)).
+- Add support for `dns.extra_records_path` in the Headscale config (closes [#144](https://github.com/tale/headplane/issues/144)).
+- Tighten `proc` integration logic by checking for the `headscale serve` command (via #[195](https://github.com/tale/headplane/pull/195)).
+- Strip newlines in the OIDC `client_secret_path` file if provided (closes [#199](https://github.com/tale/headplane/issues/199)).
+
+---
+
+# 0.5.10 (April 4, 2025)
+
+- Fix an issue where other preferences to skip onboarding affected every user.
+
+---
+
+# 0.5.9 (April 3, 2025)
+
+- Filter out empty users from the pre-auth keys page which could possibly cause a crash with unmigrated users.
+- OIDC users cannot be renamed, so that functionality has been disabled in the menu options.
+- Suppress hydration errors for any fields with a date in it.
+
+---
+
+# 0.5.8 (April 3, 2025)
+
+- You can now skip the onboarding page if desired.
+- Added the UI to change user roles in the dashboard.
+- Fixed an issue where integrations would throw instead of loading properly.
+- Loading the ACL page no longer spams blank updates to the Headscale database (fixes [#151](https://github.com/tale/headplane/issues/151))
+- Automatically create `/var/lib/headplane` in the Docker container (fixes [#166](https://github.com/tale/headplane/issues/166))
+- OIDC logout with `disable_api_key_login` set to true will not automatically login again (fixes [#149](https://github.com/tale/headplane/issues/149))
+
+---
+
+# 0.5.7 (April 2, 2025)
+
+- Hotfix an issue where assets aren't served under `/admin` or the prefix.
+
+---
+
+# 0.5.6 (April 2, 2025)
+
+### IMPORTANT
+
+> **PLEASE** update to this ASAP if you were using Google OIDC. This is because previously _ANY_ accounts have admin access to your Tailnet if they discover the URL that Headplane is being hosted on. This new change enforces that new logins by default are not given any permissions. You will need to re-login to Headplane to generate an owner account and prevent unauthorized access.
+
+Implemented _proper_ authentication methods for OIDC.
+This is a large update and copies the permission system from Tailscale.
+Permissions are not automatically derived from OIDC, but they can be configured via the UI.
+Additionally, certain roles give certain capabilities, limiting access to parts of the dashboard.
+By default, new users will have a `member` role which forbids access to the UI.
+If there are no users, the first user will be given an `owner` role which cannot be removed.
+
+**Changes**:
+
+- Switched the internal server to use `hono` for better performance.
+- Fixed an issue that caused dialogs to randomly refocus every 3 seconds.
+- Headplane will not send API requests when the tab is not focused.
+- Continue loosening the configuration requirements for Headscale (part of an ongoing effort).
+- Unknown values in the Headplane config no longer cause a crash.
+- Fixed an issue that caused copied commands to have a random space (fixes [#161](https://github.com/tale/headplane/issues/161))
+
+---
+
+# 0.5.5 (March 18, 2025)
+
+- Hotfix an issue that caused Headplane to crash if no agents are available
+
+---
+
+# 0.5.4 (March 18, 2025)
+
+- Fixed a typo in the Kubernetes documentation
+- Handle split and global DNS records not being set in the Headscale config (via [#129](https://github.com/tale/headplane/pull/129))
+- Stop checking for the `mkey:` prefix on machine registration (via [#131](https://github.com/tale/headplane/pull/131))
+- OIDC auth was not using information from the `user_info` endpoint.
+- Support the picture of the user who is logged in via OIDC if available.
+- Rewrote the Agent implementation to better utilize disk space and perform better (coming soon).
+- Loosened checking for the Headscale configuration as it was too strict and required certain optional fields.
+- Deleting a node will now correctly redirect back to the nodes page (fixes [#137](https://github.com/tale/headplane/issues/137))
+- Supports connecting to Headscale via TLS and can accept a certificate file (partially fixes [#82](https://github.com/tale/headplane/issues/82))
+- Add support for running Headplane through Nix, though currently unsupported (via [#132](https://github.com/tale/headplane/pull/132))
+- You can now pass in an OIDC client secret through `oidc.client_secret_path` in the config (fixes [#126](https://github.com/tale/headplane/issues/126))
+- Correctly handle differently localized number inputs (fixes [#125](https://github.com/tale/headplane/issues/125))
+
+---
+
+# 0.5.3 (March 1, 2025)
+
+- Fixed an issue where Headplane expected the incorrect config value for OIDC scope (fixes [#111](https://github.com/tale/headplane/issues/111))
+- Added an ARIA indicator for when an input is required and fixed the confirm buttons (fixed [#116](https://github.com/tale/headplane/issues/116))
+- Fixed a typo in the docs that defaulted to `/var/run/docker.dock` for the Docker socket (via [#112](https://github.com/tale/headplane/pull/112))
+
+---
+
+# 0.5.2 (February 28, 2025)
+
+- Hotfixed an issue where the server bundle got reloaded on each request
+
+---
+
+# 0.5.1 (February 28, 2025)
+
+- Fixed an issue that caused the entire server to crash on start
+- Fixed the published semver tags from Docker
+- Fixed the Kubernetes integration not reading the config
+
+---
+
+# 0.5 (February 27, 2025)
+
+> This release is a major overhaul and contains a significant breaking change.
+> We now use a config file for all settings instead of environment variables.
+> Please see [config.example.yaml](/config.example.yaml) for the new format.
+
+- Completely redesigned the UI from the ground up for accessibility and performance.
+- Switched to a config-file setup (this introduces breaking changes, see [config.example.yaml](/config.example.yaml) for the new format).
+- If the config is read-only, the options are still visible, just disabled (fixes [#48](https://github.com/tale/headplane/issues/48))
+- Added support for Headscale 0.25.0 (this drops support for any older versions).
+- Fixed issues where renaming, deleting, and changing node owners via users was not possible (fixes [#91](https://github.com/tale/headplane/issues/91))
+- Operations now have significantly less moving parts and better error handling.
+- Updated to `pnpm` 10 and Node.js 22.
+- Settings that were previously shared like `public_url` or `oidc` are now separate within Headplane/Headscale. This is a rather large breaking change but fixes cases where a user may choose to utilize Headscale OIDC for Tailscale but not for the Headplane UI.
+- Deprecate the `latest` tag in Docker for explicit versioning and `edge` for nightly builds.
+
+---
+
+# 0.4.1 (January 18, 2025)
+
+- Fixed an urgent issue where the OIDC redirect URI would mismatch.
+
+---
+
+# 0.4.0 (January 18, 2025)
+
 - Switched from Remix.run to React-Router
 - Fixed an issue where some config fields were marked as required even if they weren't (fixes [#66](https://github.com/tale/headplane/issues/66))
 - Fixed an issue where the toasts would be obscured by the footer (fixes [#68](https://github.com/tale/headplane/issues/68))
@@ -11,29 +231,47 @@
 - Reusable Pre-Auth Keys no longer show expired when used (PR [#88](https://github.com/tale/headplane/pull/88))
 - Tweaked some CSS issues in the UI
 
-### 0.3.9 (December 6, 2024)
+---
+
+# 0.3.9 (December 6, 2024)
+
 - Fixed a race condition bug in the OIDC validation code
 
-### 0.3.8 (December 6, 2024)
+---
+
+# 0.3.8 (December 6, 2024)
+
 - Added a little HTML footer to show the login page and link to a donation page.
 - Allow creating pre-auth keys that expire past 90 days (fixes [#58](https://github.com/tale/headplane/issues/58))
 - Validates OIDC config and ignores validation if specified via variables or Headscale config (fixes [#63](https://github.com/tale/headplane/issues/63))
 
-### 0.3.7 (November 30, 2024)
+---
+
+# 0.3.7 (November 30, 2024)
+
 - Allow customizing the OIDC token endpoint auth method via `OIDC_CLIENT_SECRET_METHOD` (fixes [#57](https://github.com/tale/headplane/issues/57))
 - Added a `/healthz` endpoint for Kubernetes and other health checks (fixes [#59](https://github.com/tale/headplane/issues/59))
 - Allow `HEADSCALE_PUBLIC_URL` to be set if `HEADSCALE_URL` points to a different internal address (fixes [#60](https://github.com/tale/headplane/issues/60))
 - Fixed an issue where the copy machine registration command had a typo.
 
-### 0.3.6 (November 20, 2024)
+---
+
+# 0.3.6 (November 20, 2024)
+
 - Fixed an issue where select dropdowns would not scroll (fixes [#53](https://github.com/tale/headplane/issues/53))
 - Added a button to copy the machine registration command to the clipboard (fixes [#52](https://github.com/tale/headplane/issues/52))
 
-### 0.3.5 (November 8, 2024)
+---
+
+# 0.3.5 (November 8, 2024)
+
 - Quickfix a bug where environment variables are ignored on the server.
 - Remove a nagging error about missing cookie since that happens when signed out.
 
-### 0.3.4 (November 7, 2024)
+---
+
+# 0.3.4 (November 7, 2024)
+
 - Clicking on the machine name in the users page now takes you to the machine overview page.
 - Completely rebuilt the production server to work better outside of Docker and be lighter. More specifically, we've switched from the `@remix-run/serve` package to our own custom built server.
 - Fixed a bunch of silly issues introduced by me not typechecking the codebase.
@@ -43,70 +281,106 @@
 - Added full support for Exit Nodes in the UI and redesigned the machines page (fixes [#36](https://github.com/tale/headplane/issues/36))
 - Added a basic check to see if the API keys passed via cookies are invalid.
 
-### 0.3.3 (October 28, 2024)
+---
+
+# 0.3.3 (October 28, 2024)
+
 - Added the ability to load a `.env` file from the PWD when `LOAD_ENV_FILE=true` is set as an environment variable.
 - Fixed an issue where non-English languages could not create Pre-auth keys due to a localization error
 - Improved ACL editor performance by switching back to CodeMirror 6
 - Fixed an issue where editing the ACL policy would cause it to revert on the UI (fixes [#34](https://github.com/tale/headplane/issues/34))
 - Updated to the next stable beta of the React 19 Compiler ([See More](https://react.dev/learn/react-compiler))
 
-### 0.3.2 (October 11, 2024)
+---
+
+# 0.3.2 (October 11, 2024)
+
 - Implement the ability to create and expire pre-auth keys (fixes [#22](https://github.com/tale/headplane/issues/22))
 - Fix machine registration not working as expected (fixes [#27](https://github.com/tale/headplane/issues/27))
 - Removed more references to usernames in MagicDNS hostnames (fixes [#35](https://github.com/tale/headplane/issues/35))
 - Handle `null` values on machine expiry when using a database like PostgreSQL.
 - Use `X-Forwarded-Proto` and `Host` headers for building the OIDC callback URL.
 
-### 0.3.1 (October 3, 2024)
+---
+
+# 0.3.1 (October 3, 2024)
+
 - Fixed the Docker integration to properly support custom socket paths. This regressed at some point previously.
 - Allow you to register a machine using machine keys (`nodekey:...`) on the machines page.
 - Added the option for debug logs with the `DEBUG=true` environment variable.
 
-### 0.3.0 (September 25, 2024)
+---
+
+# 0.3.0 (September 25, 2024)
+
 - Bumped the minimum supported version of Headscale to 0.23.
 - Updated the UI to respect `dns.use_username_in_magic_dns`.
 
-### 0.2.4 (August 24, 2024)
+---
+
+# 0.2.4 (August 24, 2024)
+
 - Removed ACL management from the integration since Headscale 0.23-beta2 now supports it natively.
 - Removed the `ACL_FILE` environment variable since it's no longer needed.
 - Introduce a `COOKIE_SECURE=false` environment variable to disable HTTPS requirements for cookies.
 - Fixed a bug where removing Split DNS configurations would crash the UI.
 
-### 0.2.3 (August 23, 2024)
+---
+
+# 0.2.3 (August 23, 2024)
+
 - Change the minimum required version of Headscale to 0.23-beta2
 - Support the new API policy mode for Headscale 0.23-beta1
 - Switch to the new DNS configuration in Headscale 0.23-beta2 (fixes [#29](https://github.com/tale/headplane/issues/29))
 - If OIDC environment variables are defined, don't use configuration file values (fixes [#24](https://github.com/tale/headplane/issues/24))
 
-### 0.2.2 (August 2, 2024)
+---
+
+# 0.2.2 (August 2, 2024)
+
 - Added a proper Kubernetes integration which utilizes `shareProcessNamespace` for PIDs.
 - Added a new logger utility that shows categories, levels, and timestamps.
 - Reimplemented the integration system to be more resilient and log more information.
 - Fixed an issue where the /proc integration found `undefined` PIDs.
 
-### 0.2.1 (July 7, 2024)
+---
+
+# 0.2.1 (July 7, 2024)
+
 - Added the ability to manage custom DNS records on your Tailnet.
 - ACL tags for machines are now able to be changed via the machine menu.
 - Fixed a bug where the ACL editor did not show the diffs correctly.
 - Fixed an issue that stopped the "Discard changes" button in the ACL editor from working.
 
-### 0.2.0 (June 23, 2024)
+---
+
+# 0.2.0 (June 23, 2024)
+
 - Fix the dropdown options for machines not working on the machines page.
 - Add an option to change the machine owner in the dropdown (aside from the users page).
 
-### 0.1.9 (June 2, 2024)
+---
+
+# 0.1.9 (June 2, 2024)
+
 - Switch to Monaco editor with proper HuJSON and YAML syntax highlighting.
 - Utilize magic DNS hostnames for the machine overview page.
 - Fixed the expiry issue once and for all.
 - Add a nightly build with the `ghcr.io/tale/headplane:edge` tag
 
-### 0.1.8 (June 2, 2024)
+---
+
+# 0.1.8 (June 2, 2024)
+
 - Built basic functionality for the machine overview page (by machine ID).
 - Possibly fixed an issue where expiry disabled machines' timestamps weren't handled correctly.
 - Prevent users from being deleted if they still have ownership of machines.
 - Fixed some type issues where `Date` was being used instead of `string` for timestamps.
 
-### 0.1.7 (May 30, 2024)
+---
+
+# 0.1.7 (May 30, 2024)
+
 - Added support for the `HEADSCALE_INTEGRATION` variable to allow for advanced integration without Docker.
 - Fixed a bug where the `expiry` field on the Headscale configuration could cause crashes.
 - Made the strict configuration loader more lenient to allow for more flexibility.
@@ -114,19 +388,27 @@
 - Headplane's context now only loads once at start instead of being lazy-loaded.
 - Improved logging and error propagation so that it's easier to debug issues.
 
-### 0.1.6 (May 22, 2024)
+---
+
+# 0.1.6 (May 22, 2024)
+
 - Added experimental support for advanced integration without Docker.
 - Fixed a crash where the Docker integration tried to use `process.env.API_KEY` instead of context.
 - Fixed a crash where `ROOT_API_KEY` was not respected in the OIDC flow.
 
-### 0.1.5 (May 20, 2024)
+---
+
+# 0.1.5 (May 20, 2024)
+
 - Robust configuration handling with fallbacks based on the headscale source.
 - Support for `client_secret_path` on configuration file based OIDC.
 - `DISABLE_API_KEY_LOGIN` now works as expected (non 'true' values work).
 - `API_KEY` is renamed to `ROOT_API_KEY` for better clarity (old variable still works).
 - Fixed button responders not actually being invoked (should fix the ACL page).
 
-### 0.1.4 (May 15, 2024)
+---
+
+# 0.1.4 (May 15, 2024)
 
 - Users can now be created, renamed, and deleted on the users page.
 - Machines can be dragged between users to change their ownership.
@@ -135,13 +417,17 @@
 - Upgrade to React 19 beta to take advantage of the compiler (may revert if it causes issues).
 - Upgrade other dependencies
 
-### 0.1.3 (May 4, 2024)
+---
+
+# 0.1.3 (May 4, 2024)
 
 - Switched to a better icon set for the UI.
 - Support stable scrollbar gutter if supported by the browser.
 - Cleaned up the header which fixed a bug that could crash the entire application on fetch errors.
 
-### 0.1.2 (May 1, 2024)
+---
+
+# 0.1.2 (May 1, 2024)
 
 - Added support for renaming, expiring, removing, and managing the routes of a machine.
 - Implemented an expiry check for machines which now reflect on the machine table.

Caddyfile

@@ -0,0 +1,10 @@
+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,23 +1,76 @@
-FROM node:20-alpine AS build
-WORKDIR /app
+FROM --platform=$BUILDPLATFORM golang:1.25.1 AS go-base
+WORKDIR /run
 
-RUN npm install -g pnpm
-RUN apk add --no-cache git
-COPY package.json pnpm-lock.yaml ./
+COPY go.mod go.sum build.sh ./
+RUN go mod download
+
+COPY cmd/ ./cmd/
+COPY internal/ ./internal/
+
+ARG TARGETOS
+ARG TARGETARCH
+ARG IMAGE_TAG
+RUN GOOS=$TARGETOS GOARCH=$TARGETARCH CGO_ENABLED=0 IMAGE_TAG=$IMAGE_TAG \
+	./build.sh --wasm --agent --fake-shell --healthcheck \
+		--wasm-output /bin/hp_ssh.wasm \
+		--agent-output /bin/hp_agent \
+		--fake-shell-output /bin/fake-sh \
+		--healthcheck-output /bin/hp_healthcheck
+
+RUN chmod +x /bin/hp_ssh.wasm
+RUN chmod +x /bin/hp_agent
+RUN chmod +x /bin/fake-sh
+RUN chmod +x /bin/hp_healthcheck
+
+# Folder needs to exist for later stages
+RUN mkdir -p /var/lib/headplane/agent
+
+FROM --platform=$BUILDPLATFORM node:22.16-slim AS js-base
+WORKDIR /run
+
+RUN corepack enable
 COPY patches ./patches
-RUN pnpm install --frozen-lockfile
+COPY package.json pnpm-lock.yaml build.sh ./
+
+COPY --from=go-base /bin/hp_ssh.wasm /run/app/hp_ssh.wasm
+COPY --from=go-base /bin/wasm_exec.js /run/app/wasm_exec.js
+RUN ./build.sh --app --app-install-only
 
 COPY . .
-RUN pnpm run build
-RUN pnpm prune --prod
+RUN ./build.sh --app
+
+FROM gcr.io/distroless/nodejs22-debian12:latest AS final
+COPY --from=js-base /run/build /app/build
+COPY --from=js-base /run/drizzle /app/drizzle
+COPY --from=js-base /run/node_modules /app/node_modules
+
+COPY --from=go-base /bin/hp_agent /usr/libexec/headplane/agent
+COPY --from=go-base /var/lib/headplane /var/lib/headplane
+
+# Fake shell to inform the user that they should use the debug image
+COPY --from=go-base /bin/fake-sh /bin/sh
+COPY --from=go-base /bin/fake-sh /bin/bash
+
+COPY --from=go-base /bin/hp_healthcheck /bin/hp_healthcheck
+HEALTHCHECK --interval=30s --timeout=5s --start-period=5s --retries=3 \
+	CMD ["/bin/hp_healthcheck"]
 
-FROM node:20-alpine
 WORKDIR /app
-COPY --from=build /app/build /app/build
-COPY --from=build /app/node_modules /app/node_modules
-RUN echo '{"type":"module"}' > /app/package.json
+CMD [ "/app/build/server/index.js" ]
 
-EXPOSE 3000
-ENV NODE_ENV=production
-ENV HOST=0.0.0.0
-CMD [ "node", "./build/headplane/server.js" ]
+FROM node:22-alpine AS debug-shell
+RUN apk add --no-cache bash curl
+
+COPY --from=js-base /run/build /app/build
+COPY --from=js-base /run/drizzle /app/drizzle
+COPY --from=js-base /run/node_modules /app/node_modules
+
+COPY --from=go-base /bin/hp_agent /usr/libexec/headplane/agent
+COPY --from=go-base /var/lib/headplane /var/lib/headplane
+COPY --from=go-base /bin/hp_healthcheck /bin/hp_healthcheck
+
+HEALTHCHECK --interval=30s --timeout=5s --start-period=5s --retries=3 \
+	CMD ["/bin/hp_healthcheck"]
+
+WORKDIR /app
+CMD [ "node", "/app/build/server/index.js" ]

README.md

@@ -1,45 +1,79 @@
 # Headplane
-> An advanced UI for [juanfont/headscale](https://github.com/juanfont/headscale)
+> A feature-complete web UI for [Headscale](https://headscale.net)
 
 <picture>
     <source
         media="(prefers-color-scheme: dark)"
-        srcset="./assets/preview-dark.png"
+        srcset="./docs/assets/preview-dark.png"
     >
     <source
         media="(prefers-color-scheme: light)"
-        srcset="./assets/preview-light.png"
+        srcset="./docs/assets/preview-light.png"
     >
     <img
         alt="Preview"
-        src="./assets/preview-dark.png"
+        src="./docs/assets/preview-dark.png"
     >
 </picture>
 
-Headscale is a self-hosted version of the Tailscale control server, however, it currently lacks a first-party web UI.
-Headplane aims to solve this issue by providing a GUI that can deeply integrate with the Headscale server.
-It's able to replicate nearly all of the functions of the official Tailscale SaaS UI, including:
+Headscale is the de-facto self-hosted version of Tailscale, a popular Wireguard
+based VPN service. By default, it does not ship with a web UI, which is where
+Headplane comes in. Headplane is a feature-complete web UI for Headscale, allowing
+you to manage your nodes, networks, and ACLs with ease.
 
-- Machine/Node expiry, network routing, name, and owner management
-- Access Control List (ACL) and tagging configuration
+Headplane aims to replicate the functionality offered by the official Tailscale
+product and dashboard, being one of the most feature complete Headscale UIs available.
+These are some of the features that Headplane offers:
+
+- Machine management, including expiry, network routing, name, and owner management
+- Access Control List (ACL) and tagging configuration for ACL enforcement
 - Support for OpenID Connect (OIDC) as a login provider
-- DNS and *safe* Headscale configuration management
+- The ability to edit DNS settings and automatically provision Headscale
+- Configurability for Headscale's settings
 
 ## Deployment
-> For more configuration options, refer to the [Configuration](/docs/Configuration.md) guide.
+Refer to the [website](https://headplane.net) for detailed installation instructions.
 
-For fully-featured deployments, see the [Advanced Deployment](/docs/Advanced-Integration.md) guide.
-This includes automatic management of ACLs, DNS settings, and Headscale configuration.
-*This is the closest experience to the Tailscale UI that can be achieved with Headscale and Headplane.*
-*If you aren't sure which one to pick, we recommend this.*
-
-If your environment is not able to support the advanced deployment, you can still use the basic deployment.
-For basic deployments, see the [Basic Deployment](/docs/Basic-Integration.md) guide.
-It does not include automatic management of ACLs, DNS settings, or the Headscale configuration,
-instead requiring manual editing and reloading when making changes.
+## 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
-If you would like to contribute, please install a relatively modern version of Node.js and PNPM.
-Clone this repository, run `pnpm install`, and then run `pnpm dev` to start the development server.
+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.
 
-> Copyright (c) 2024 Aarnav Tale
+---
+
+<picture>
+    <source
+        media="(prefers-color-scheme: dark)"
+        srcset="./docs/assets/acls-dark.png"
+    >
+    <source
+        media="(prefers-color-scheme: light)"
+        srcset="./docs/assets/acls-light.png"
+    >
+    <img
+        alt="ACLs"
+        src="./docs/assets/acls-dark.png"
+    >
+</picture>
+
+<picture>
+    <source
+        media="(prefers-color-scheme: dark)"
+        srcset="./docs/assets/machine-dark.png"
+    >
+    <source
+        media="(prefers-color-scheme: light)"
+        srcset="./docs/assets/machine-light.png"
+    >
+    <img
+        alt="Machine Management"
+        src="./docs/assets/machine-dark.png"
+    >
+</picture>
+
+> Copyright (c) 2025 Aarnav Tale

agent.Dockerfile

@@ -1,15 +0,0 @@
-FROM golang:1.23 AS builder
-WORKDIR /app
-
-COPY go.mod go.sum ./
-RUN go mod download
-
-COPY agent/ ./agent
-RUN CGO_ENABLED=0 GOOS=linux go build \
-	-trimpath \
-	-ldflags "-s -w" \
-	-o /app/hp_agent ./agent/cmd/hp_agent
-
-FROM scratch
-COPY --from=builder /app/hp_agent /hp_agent
-ENTRYPOINT ["/hp_agent"]

agent/cmd/hp_agent/hp_agent.go

@@ -1,40 +0,0 @@
-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/hpagent/handler.go

@@ -1,83 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

@@ -1,56 +0,0 @@
-package hpagent
-
-import (
-	"fmt"
-	"github.com/gorilla/websocket"
-	"github.com/tale/headplane/agent/tsnet"
-	"log"
-	"net/http"
-	"net/url"
-)
-
-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-TS-Node-ID", agent.ID)
-
-	auth := fmt.Sprintf("Bearer %s", authKey)
-	headers.Add("Authorization", auth)
-
-	log.Printf("dialing websocket at %s", wsURL)
-	ws, _, err := websocket.DefaultDialer.Dial(wsURL, headers)
-	if err != nil {
-		return nil, err
-	}
-
-	return &Socket{ws, debug, agent}, nil
-}
-
-// We need to convert the control URL to a websocket URL
-func httpToWs(controlURL string) (string, error) {
-	u, err := url.Parse(controlURL)
-	if err != nil {
-		return "", err
-	}
-
-	if u.Scheme == "http" {
-		u.Scheme = "ws"
-	} else if u.Scheme == "https" {
-		u.Scheme = "wss"
-	} else {
-		return "", fmt.Errorf("unsupported scheme: %s", u.Scheme)
-	}
-
-	return u.String(), nil
-}

agent/tsnet/peers.go

@@ -1,47 +0,0 @@
-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

@@ -1,61 +0,0 @@
-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,42 +1,86 @@
-import { CopyIcon } from '@primer/octicons-react';
-import { toast } from './Toaster';
+import { Check, Copy, Info } from 'lucide-react';
+import cn from '~/utils/cn';
+import toast from '~/utils/toast';
+import Tooltip from './Tooltip';
 
-interface Props {
+export interface AttributeProps {
 	name: string;
 	value: string;
+	tooltip?: string;
 	isCopyable?: boolean;
-	link?: string;
 }
 
-export default function Attribute({ name, value, link, isCopyable }: Props) {
-	const canCopy = isCopyable ?? false;
+export default function Attribute({
+	name,
+	value,
+	tooltip,
+	isCopyable,
+}: AttributeProps) {
 	return (
-		<dl className="flex gap-1 text-sm w-full">
-			<dt className="w-1/2 shrink-0 min-w-0 truncate text-gray-700 dark:text-gray-300 py-1">
-				{link ? (
-					<a className="hover:underline" href={link}>
-						{name}
-					</a>
-				) : (
-					name
+		<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,
 				)}
+			>
+				{name}
+				{tooltip ? (
+					<Tooltip>
+						<Info className="size-4" />
+						<Tooltip.Body>{tooltip}</Tooltip.Body>
+					</Tooltip>
+				) : undefined}
 			</dt>
+			<dd
+				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',
+							]
+						: []),
+				)}
+			>
+				{isCopyable ? (
+					<button
+						type="button"
+						className="flex items-center gap-1.5 relative min-w-0 w-full"
+						onClick={async (event) => {
+							const svgs = event.currentTarget.querySelectorAll('svg');
+							for (const svg of svgs) {
+								svg.toggleAttribute('data-copied', true);
+							}
 
-			{canCopy ? (
-				<button
-					type="button"
-					className="focus:outline-none flex items-center gap-x-1 truncate hover:bg-zinc-100 dark:hover:bg-zinc-800 rounded-md"
-					onClick={async () => {
-						await navigator.clipboard.writeText(value);
-						toast(`Copied ${name}`);
-					}}
-				>
-					<dd className="min-w-0 truncate px-2 py-1">{value}</dd>
-					<CopyIcon className="text-gray-600 dark:text-gray-200 pr-2 w-max h-3" />
-				</button>
-			) : (
-				<dd className="min-w-0 truncate px-2 py-1">{value}</dd>
-			)}
+							await navigator.clipboard.writeText(value);
+							toast(`Copied ${name} to clipboard`);
+
+							setTimeout(() => {
+								for (const svg of svgs) {
+									svg.toggleAttribute('data-copied', false);
+								}
+							}, 1000);
+						}}
+					>
+						<div 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}
+					</button>
+				) : (
+					<div className="relative min-w-0 truncate" suppressHydrationWarning>
+						{value}
+					</div>
+				)}
+			</dd>
 		</dl>
 	);
 }

app/components/Button.tsx

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

app/components/Card.tsx

@@ -1,37 +1,22 @@
-import type { HTMLProps } from 'react';
-import { Heading as AriaHeading } from 'react-aria-components';
-import { cn } from '~/utils/cn';
+import React from 'react';
+import Text from '~/components/Text';
+import Title from '~/components/Title';
+import cn from '~/utils/cn';
 
-function Title(props: Parameters<typeof AriaHeading>[0]) {
-	return (
-		<AriaHeading
-			{...props}
-			slot="title"
-			className={cn('text-lg font-semibold leading-6 mb-5', props.className)}
-		/>
-	);
-}
-
-function Text(props: React.HTMLProps<HTMLParagraphElement>) {
-	return (
-		<p {...props} className={cn('text-base leading-6 my-0', props.className)} />
-	);
-}
-
-type Props = HTMLProps<HTMLDivElement> & {
+interface Props extends React.HTMLProps<HTMLDivElement> {
 	variant?: 'raised' | 'flat';
-};
+}
 
-function Card(props: Props) {
+function Card({ variant = 'raised', ...props }: Props) {
 	return (
 		<div
 			{...props}
 			className={cn(
-				'w-full max-w-md overflow-hidden rounded-xl p-4',
-				props.variant === 'flat'
+				'w-full max-w-md rounded-3xl p-5',
+				variant === 'flat'
 					? 'bg-transparent shadow-none'
-					: 'bg-ui-50 dark:bg-ui-900 shadow-sm',
-				'border border-ui-200 dark:border-ui-700',
+					: 'bg-headplane-50/50 dark:bg-headplane-950/50 shadow-xs',
+				'border border-headplane-100 dark:border-headplane-800',
 				props.className,
 			)}
 		>

app/components/Chip.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import cn from '~/utils/cn';
+
+export interface ChipProps {
+	text: string;
+	className?: string;
+	leftIcon?: React.ReactNode;
+	rightIcon?: React.ReactNode;
+}
+
+export default function Chip({
+	text,
+	className,
+	leftIcon,
+	rightIcon,
+}: ChipProps) {
+	return (
+		<span
+			className={cn(
+				'h-5 text-xs py-0.5 px-1 rounded-md text-nowrap',
+				'text-headplane-700 dark:text-headplane-100',
+				'bg-headplane-100 dark:bg-headplane-700',
+				'inline-flex items-center gap-x-1',
+				className,
+			)}
+		>
+			{leftIcon}
+			{text}
+			{rightIcon}
+		</span>
+	);
+}

app/components/Code.tsx

@@ -1,51 +1,50 @@
-import { useState, HTMLProps } from 'react';
-import { CopyIcon, CheckIcon } from '@primer/octicons-react';
-import { cn } from '~/utils/cn';
-import { toast } from '~/components/Toaster';
+import { Check, Copy } from 'lucide-react';
+import { HTMLProps } from 'react';
+import cn from '~/utils/cn';
+import toast from '~/utils/toast';
 
-interface Props extends HTMLProps<HTMLSpanElement> {
+export interface CodeProps extends HTMLProps<HTMLSpanElement> {
 	isCopyable?: boolean;
+	children: string | string[] | number;
 }
 
-export default function Code(props: Props) {
-	const [isCopied, setIsCopied] = useState(false);
-
+export default function Code({ isCopyable, children, className }: CodeProps) {
 	return (
-		<>
-			<code
-				className={cn(
-					'bg-ui-100 dark:bg-ui-800 p-0.5 rounded-md',
-					props.className,
-				)}
-			>
-				{props.children}
-			</code>
-			{props.isCopyable ? (
+		<code
+			className={cn(
+				'bg-headplane-100 dark:bg-headplane-800 px-1 py-0.5 font-mono',
+				'rounded-lg focus-within:outline-hidden focus-within:ring-2',
+				isCopyable && 'relative pr-7',
+				className,
+			)}
+		>
+			{children}
+			{isCopyable && (
 				<button
-					className={cn(
-						'ml-1 p-1 rounded-md',
-						'bg-ui-100 dark:bg-ui-800',
-						'text-ui-500 dark:text-ui-400',
-						'inline-flex items-center justify-center',
-					)}
-					onClick={() => {
-						if (!props.children) {
-							throw new Error('Made copyable without children');
+					className="bottom-0 right-0 absolute"
+					onClick={async (event) => {
+						const text = Array.isArray(children) ? children.join('') : children;
+
+						const svgs = event.currentTarget.querySelectorAll('svg');
+						for (const svg of svgs) {
+							svg.toggleAttribute('data-copied', true);
 						}
 
-						navigator.clipboard.writeText(props.children.join(''));
+						await navigator.clipboard.writeText(text);
 						toast('Copied to clipboard');
-						setIsCopied(true);
-						setTimeout(() => setIsCopied(false), 1000);
+
+						setTimeout(() => {
+							for (const svg of svgs) {
+								svg.toggleAttribute('data-copied', false);
+							}
+						}, 1000);
 					}}
+					type="button"
 				>
-					{isCopied ? (
-						<CheckIcon className="h-3 w-3" />
-					) : (
-						<CopyIcon className="h-3 w-3" />
-					)}
+					<Check className="h-4.5 w-4.5 p-1 hidden data-copied:block" />
+					<Copy className="h-4.5 w-4.5 p-1 block data-copied:hidden" />
 				</button>
-			) : undefined}
-		</>
+			)}
+		</code>
 	);
 }

app/components/Dialog.tsx

@@ -1,132 +1,194 @@
-import type { Dispatch, ReactNode, SetStateAction } from 'react';
+import React, { cloneElement, useEffect, useRef } from 'react';
 import {
-	Button as AriaButton,
-	Dialog as AriaDialog,
-	DialogTrigger,
-	Heading as AriaHeading,
-	Modal,
-	ModalOverlay,
-} from 'react-aria-components';
-import { cn } from '~/utils/cn';
+	type AriaDialogProps,
+	type AriaModalOverlayProps,
+	Overlay,
+	useDialog,
+	useModalOverlay,
+	useOverlayTrigger,
+} from 'react-aria';
+import { Form, type HTMLFormMethod } from 'react-router';
+import {
+	type OverlayTriggerProps,
+	type OverlayTriggerState,
+	useOverlayTriggerState,
+} from 'react-stately';
+import Button, { ButtonProps } from '~/components/Button';
+import Card from '~/components/Card';
+import IconButton, { IconButtonProps } from '~/components/IconButton';
+import Text from '~/components/Text';
+import Title from '~/components/Title';
+import cn from '~/utils/cn';
+import { useLiveData } from '~/utils/live-data';
 
-type ButtonProps = Parameters<typeof AriaButton>[0] & {
-	readonly control?: [boolean, Dispatch<SetStateAction<boolean>>];
-};
+export interface DialogProps extends OverlayTriggerProps {
+	children:
+		| [
+				React.ReactElement<ButtonProps> | React.ReactElement<IconButtonProps>,
+				React.ReactElement<DialogPanelProps>,
+		  ]
+		| React.ReactElement<DialogPanelProps>;
+}
 
-function Button(props: ButtonProps) {
-	return (
-		<AriaButton
-			{...props}
-			aria-label="Dialog"
-			className={cn(
-				'w-fit text-sm rounded-lg px-4 py-2',
-				'bg-main-700 dark:bg-main-800 text-white',
-				'hover:bg-main-800 dark:hover:bg-main-700',
-				props.isDisabled && 'opacity-50 cursor-not-allowed',
-				props.className,
-			)}
-			// If control is passed, set the state value
-			onPress={
-				props.control
-					? () => {
-							props.control?.[1](true);
-						}
-					: undefined
-			}
-		/>
+function Dialog(props: DialogProps) {
+	const { pause, resume } = useLiveData();
+	const state = useOverlayTriggerState(props);
+	const { triggerProps, overlayProps } = useOverlayTrigger(
+		{
+			type: 'dialog',
+		},
+		state,
 	);
-}
 
-type ActionProps = Parameters<typeof AriaButton>[0] & {
-	readonly variant: 'cancel' | 'confirm';
-};
+	useEffect(() => {
+		if (state.isOpen) {
+			pause();
+		} else {
+			resume();
+		}
+	}, [state.isOpen]);
 
-function Action(props: ActionProps) {
-	return (
-		<AriaButton
-			{...props}
-			type={props.variant === 'confirm' ? 'submit' : 'button'}
-			className={cn(
-				'px-4 py-2 rounded-lg',
-				props.isDisabled && 'opacity-50 cursor-not-allowed',
-				props.variant === 'cancel'
-					? 'text-ui-700 dark:text-ui-300'
-					: 'text-ui-300 dark:text-ui-300',
-				props.variant === 'confirm'
-					? 'bg-main-700 dark:bg-main-700 pressed:bg-main-800 dark:pressed:bg-main-800'
-					: 'bg-ui-200 dark:bg-ui-800 pressed:bg-ui-300 dark:pressed:bg-ui-700',
-				props.className,
-			)}
-		/>
-	);
-}
-
-function Title(props: Parameters<typeof AriaHeading>[0]) {
-	return (
-		<AriaHeading
-			{...props}
-			slot="title"
-			className={cn('text-lg font-semibold leading-6 mb-5', props.className)}
-		/>
-	);
-}
-
-function Text(props: React.HTMLProps<HTMLParagraphElement>) {
-	return (
-		<p {...props} className={cn('text-base leading-6 my-0', props.className)} />
-	);
-}
-
-interface PanelProps {
-	children: (close: () => void) => ReactNode;
-	control?: [boolean, Dispatch<SetStateAction<boolean>>];
-	className?: string;
-}
-
-function Panel({ children, control, className }: PanelProps) {
-	return (
-		<ModalOverlay
-			aria-hidden="true"
-			className={cn(
-				'fixed inset-0 h-screen w-screen z-50 bg-black/30',
-				'flex items-center justify-center dark:bg-black/70',
-				'entering:animate-in exiting:animate-out',
-				'entering:fade-in entering:duration-200 entering:ease-out',
-				'exiting:fade-out exiting:duration-100 exiting:ease-in',
-				className,
-			)}
-			isOpen={control ? control[0] : undefined}
-			onOpenChange={control ? control[1] : undefined}
-		>
-			<Modal
-				className={cn(
-					'w-full max-w-md overflow-hidden rounded-xl p-4',
-					'bg-ui-50 dark:bg-ui-900 shadow-lg',
-					'entering:animate-in exiting:animate-out',
-					'dark:border dark:border-ui-700',
-					'entering:zoom-in-95 entering:ease-out entering:duration-200',
-					'exiting:zoom-out-95 exiting:ease-in exiting:duration-100',
+	if (Array.isArray(props.children)) {
+		const [button, panel] = props.children;
+		return (
+			<>
+				{cloneElement(button, triggerProps)}
+				{state.isOpen && (
+					<DModal state={state}>
+						{cloneElement(panel, {
+							...overlayProps,
+							close: () => state.close(),
+						})}
+					</DModal>
 				)}
-			>
-				<AriaDialog role="alertdialog" className="outline-none relative">
-					{({ close }) => children(close)}
-				</AriaDialog>
-			</Modal>
-		</ModalOverlay>
-	);
-}
-
-interface DialogProps {
-	children: ReactNode;
-	control?: [boolean, Dispatch<SetStateAction<boolean>>];
-}
-
-function Dialog({ children, control }: DialogProps) {
-	if (control) {
-		return children;
+			</>
+		);
 	}
 
-	return <DialogTrigger>{children}</DialogTrigger>;
+	return (
+		<DModal state={state}>
+			{cloneElement(props.children, {
+				...overlayProps,
+				close: () => state.close(),
+			})}
+		</DModal>
+	);
 }
 
-export default Object.assign(Dialog, { Button, Title, Text, Panel, Action });
+export interface DialogPanelProps extends AriaDialogProps {
+	children: React.ReactNode;
+	variant?: 'normal' | 'destructive' | 'unactionable';
+	onSubmit?: React.FormEventHandler<HTMLFormElement>;
+	method?: HTMLFormMethod;
+	isDisabled?: boolean;
+
+	// Anonymous (passed by parent)
+	close?: () => void;
+}
+
+function Panel(props: DialogPanelProps) {
+	const {
+		children,
+		onSubmit,
+		isDisabled,
+		close,
+		variant,
+		method = 'POST',
+	} = props;
+	const ref = useRef<HTMLFormElement | null>(null);
+	const { dialogProps } = useDialog(
+		{
+			...props,
+			role: 'alertdialog',
+		},
+		ref,
+	);
+
+	return (
+		<Form
+			{...dialogProps}
+			className={cn(
+				'outline-hidden rounded-3xl w-full max-w-lg',
+				'bg-white dark:bg-headplane-900',
+			)}
+			method={method ?? 'POST'}
+			onSubmit={(event) => {
+				if (onSubmit) {
+					onSubmit(event);
+				}
+
+				close?.();
+			}}
+			ref={ref}
+		>
+			<Card className="w-full max-w-lg" variant="flat">
+				{children}
+				<div className="mt-6 flex justify-end gap-4">
+					{variant === 'unactionable' ? (
+						<Button onPress={close}>Close</Button>
+					) : (
+						<>
+							<Button onPress={close}>Cancel</Button>
+							<Button
+								isDisabled={isDisabled}
+								type="submit"
+								variant={variant === 'destructive' ? 'danger' : 'heavy'}
+							>
+								Confirm
+							</Button>
+						</>
+					)}
+				</div>
+			</Card>
+		</Form>
+	);
+}
+
+interface DModalProps extends AriaModalOverlayProps {
+	children: React.ReactNode;
+	state: OverlayTriggerState;
+}
+
+function DModal(props: DModalProps) {
+	const { children, state } = props;
+	const ref = useRef<HTMLDivElement>(null);
+	const { modalProps, underlayProps } = useModalOverlay(props, state, ref);
+
+	if (!state.isOpen) {
+		return null;
+	}
+
+	return (
+		<Overlay>
+			<div
+				{...underlayProps}
+				aria-hidden="true"
+				className={cn(
+					'fixed inset-0 h-screen w-screen z-20',
+					'flex items-center justify-center',
+					'bg-headplane-900/15 dark:bg-headplane-900/30',
+					'entering:animate-in exiting:animate-out',
+					'entering:fade-in entering:duration-100 entering:ease-out',
+					'exiting:fade-out exiting:duration-50 exiting:ease-in',
+				)}
+			/>
+			<div
+				{...modalProps}
+				className={cn(
+					'fixed inset-0 h-screen w-screen z-20',
+					'flex items-center justify-center',
+				)}
+			>
+				{children}
+			</div>
+		</Overlay>
+	);
+}
+
+export default Object.assign(Dialog, {
+	Button,
+	IconButton,
+	Panel,
+	Title,
+	Text,
+});

app/components/Error.tsx

@@ -1,61 +0,0 @@
-import { AlertIcon } from '@primer/octicons-react';
-import { isRouteErrorResponse, useRouteError } from 'react-router';
-import { cn } from '~/utils/cn';
-import Card from './Card';
-import Code from './Code';
-
-interface Props {
-	type?: 'full' | 'embedded';
-}
-
-function getMessage(error: Error | unknown) {
-	if (!(error instanceof Error)) {
-		return "An unknown error occurred";
-	}
-
-	let rootError = error;
-
-	// Traverse the error chain to find the root cause
-	if (error.cause) {
-		rootError = error.cause as Error;
-		while (rootError.cause) {
-			rootError = rootError.cause as Error;
-		}
-	}
-
-	// If we are aggregate, concat into a single message
-	if (rootError instanceof AggregateError) {
-		return rootError.errors.map((error) => error.message).join('\n');
-	}
-
-	return rootError.message;
-}
-
-export function ErrorPopup({ type = 'full' }: Props) {
-	const error = useRouteError();
-	const routing = isRouteErrorResponse(error);
-	const message = getMessage(error);
-
-	return (
-		<div
-			className={cn(
-				'flex items-center justify-center',
-				type === 'embedded'
-					? 'pointer-events-none mt-24'
-					: 'fixed inset-0 h-screen w-screen z-50',
-			)}
-		>
-			<Card>
-				<div className="flex items-center justify-between">
-					<Card.Title className="text-3xl mb-0">
-						{routing ? error.status : 'Error'}
-					</Card.Title>
-					<AlertIcon className="w-12 h-12 text-red-500" />
-				</div>
-				<Card.Text className="mt-4 text-lg">
-					{routing ? error.statusText : <Code>{message}</Code>}
-				</Card.Text>
-			</Card>
-		</div>
-	);
-}

app/components/Footer.tsx

@@ -1,46 +1,71 @@
-import { cn } from '~/utils/cn';
+import { CircleX } from 'lucide-react';
 import Link from '~/components/Link';
-import Tooltip from '~/components/Tooltip';
-
-declare global {
-	const __VERSION__: string;
-}
+import cn from '~/utils/cn';
 
 interface FooterProps {
 	url: string;
 	debug: boolean;
+	healthy: boolean;
 }
 
-export default function Footer({ url, debug }: FooterProps) {
+export default function Footer({ url, debug, healthy }: FooterProps) {
 	return (
 		<footer
 			className={cn(
-				'fixed bottom-0 left-0 z-40 w-full h-14',
-				'bg-ui-100 dark:bg-ui-900 text-ui-500',
-				'flex flex-col justify-center gap-1',
-				'border-t border-ui-200 dark:border-ui-800',
+				'fixed w-full bottom-0 left-0 z-40 h-12',
+				'flex items-center justify-center',
+				'bg-headplane-50 dark:bg-headplane-950',
+				'dark:border-t dark:border-headplane-800',
 			)}
 		>
-			<p className="container text-xs">
-				Headplane is entirely free to use. If you find it useful, consider{' '}
-				<Link
-					to="https://github.com/sponsors/tale"
-					name="Aarnav's GitHub Sponsors"
+			<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')}
 				>
-					donating
-				</Link>{' '}
-				to support development.{' '}
-			</p>
-			<p className="container text-xs opacity-75">
-				Version: {__VERSION__}
-				{' | '}
-				Connecting to
-				{' '}
-				<strong className="blur-xs hover:blur-none">
-					{url}
-				</strong>
-				{debug && ' (Debug mode enabled)'}
-			</p>
+					<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>
 		</footer>
 	);
 }

app/components/Header.tsx

@@ -1,42 +1,76 @@
 import {
-	GearIcon,
-	GlobeIcon,
-	LockIcon,
-	PaperAirplaneIcon,
-	PeopleIcon,
-	PersonIcon,
-	ServerIcon,
-} from '@primer/octicons-react';
-import { Form } from 'react-router';
-
-import { cn } from '~/utils/cn';
-import type { HeadplaneContext } from '~/utils/config/headplane';
-import type { SessionData } from '~/utils/sessions.server';
-
-import Menu from './Menu';
-import TabLink from './TabLink';
+	CircleUser,
+	Globe2,
+	Lock,
+	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';
 
 interface Props {
-	config: HeadplaneContext['config'];
-	user?: SessionData['user'];
+	configAvailable: boolean;
+	onboarding: boolean;
+	user?: AuthSession['user'];
+	access: {
+		ui: boolean;
+		machines: boolean;
+		dns: boolean;
+		users: boolean;
+		policy: boolean;
+		settings: boolean;
+	};
 }
 
 interface LinkProps {
 	href: string;
 	text: string;
-	isMenu?: boolean;
 }
 
-function Link({ href, text, isMenu }: LinkProps) {
+interface TabLinkProps {
+	name: string;
+	to: string;
+	icon: ReactNode;
+}
+
+function TabLink({ name, to, icon }: TabLinkProps) {
+	return (
+		<div className="relative py-2">
+			<NavLink
+				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',
+						isActive ? 'after:visible' : 'after:invisible',
+					)
+				}
+				prefetch="intent"
+				to={to}
+			>
+				{icon} {name}
+			</NavLink>
+		</div>
+	);
+}
+
+function Link({ href, text }: LinkProps) {
 	return (
 		<a
-			href={href}
-			target="_blank"
-			rel="noreferrer"
 			className={cn(
-				!isMenu &&
-					'text-ui-300 hover:text-ui-50 hover:underline hidden sm:block',
+				'hidden sm:block hover:underline text-sm',
+				'focus:outline-hidden focus:ring-3 rounded-md',
 			)}
+			href={href}
+			rel="noreferrer"
+			target="_blank"
 		>
 			{text}
 		</a>
@@ -44,12 +78,21 @@ function Link({ href, text, isMenu }: LinkProps) {
 }
 
 export default function Header(data: Props) {
+	const submit = useSubmit();
+
 	return (
-		<header className="bg-main-700 dark:bg-main-800 text-ui-50">
+		<header
+			className={cn(
+				'bg-headplane-100 dark:bg-headplane-950',
+				'text-headplane-800 dark:text-headplane-200',
+				'dark:border-b dark:border-headplane-800',
+				'shadow-inner',
+			)}
+		>
 			<div className="container flex items-center justify-between py-4">
 				<div className="flex items-center gap-x-2">
-					<PaperAirplaneIcon className="w-6 h-6" />
-					<h1 className="text-2xl">Headplane</h1>
+					<Logo />
+					<h1 className="text-2xl font-semibold">headplane</h1>
 				</div>
 				<div className="flex items-center gap-x-4">
 					<Link href="https://tailscale.com/download" text="Download" />
@@ -57,85 +100,93 @@ export default function Header(data: Props) {
 					<Link href="https://github.com/juanfont/headscale" text="Headscale" />
 					{data.user ? (
 						<Menu>
-							<Menu.Button
-								className={cn(
-									'rounded-full h-9 w-9',
-									'border border-main-600 dark:border-main-700',
-									'hover:bg-main-600 dark:hover:bg-main-700',
-									'flex items-center justify-center',
-								)}
+							<Menu.IconButton
+								className={cn(data.user.picture ? 'p-0' : '')}
+								label="User"
 							>
-								<PersonIcon className="h-5 w-5 mt-0.5" />
-							</Menu.Button>
-							<Menu.Items>
-								<Menu.Item className="text-right">
-									<p className="font-bold">{data.user.name}</p>
-									<p>{data.user.email}</p>
-								</Menu.Item>
-								<Menu.Item className="text-right sm:hidden">
-									<Link
-										isMenu
-										href="https://tailscale.com/download"
-										text="Download"
+								{data.user.picture ? (
+									<img
+										alt={data.user.name}
+										className="w-8 h-8 rounded-full"
+										src={data.user.picture}
 									/>
-								</Menu.Item>
-								<Menu.Item className="text-right sm:hidden">
-									<Link
-										isMenu
-										href="https://github.com/tale/headplane"
-										text="GitHub"
-									/>
-								</Menu.Item>
-								<Menu.Item className="text-right sm:hidden">
-									<Link
-										isMenu
-										href="https://github.com/juanfont/headscale"
-										text="Headscale"
-									/>
-								</Menu.Item>
-								<Menu.Item className="text-red-500 dark:text-red-400">
-									<Form method="POST" action="/logout">
-										<button type="submit" className="w-full text-right">
-											Logout
-										</button>
-									</Form>
-								</Menu.Item>
-							</Menu.Items>
+								) : (
+									<CircleUser />
+								)}
+							</Menu.IconButton>
+							<Menu.Panel
+								disabledKeys={['profile']}
+								onAction={(key) => {
+									if (key === 'logout') {
+										submit(
+											{},
+											{
+												method: 'POST',
+												action: '/logout',
+											},
+										);
+									}
+								}}
+							>
+								<Menu.Section>
+									<Menu.Item key="profile" textValue="Profile">
+										<div className="text-black dark:text-headplane-50">
+											<p className="font-bold">{data.user.name}</p>
+											<p>{data.user.email}</p>
+										</div>
+									</Menu.Item>
+									<Menu.Item key="logout" textValue="Logout">
+										<p className="text-red-500 dark:text-red-400">Logout</p>
+									</Menu.Item>
+								</Menu.Section>
+							</Menu.Panel>
 						</Menu>
 					) : undefined}
 				</div>
 			</div>
-			<nav className="container flex items-center gap-x-4 overflow-x-auto">
-				<TabLink
-					to="/machines"
-					name="Machines"
-					icon={<ServerIcon className="w-4 h-4" />}
-				/>
-				<TabLink
-					to="/users"
-					name="Users"
-					icon={<PeopleIcon className="w-4 h-4" />}
-				/>
-				<TabLink
-					to="/acls"
-					name="Access Control"
-					icon={<LockIcon className="w-4 h-4" />}
-				/>
-				{data.config.read ? (
-					<>
+			{data.access.ui && !data.onboarding ? (
+				<nav className="container flex items-center gap-x-4 overflow-x-auto font-semibold">
+					{data.access.machines ? (
 						<TabLink
-							to="/dns"
-							name="DNS"
-							icon={<GlobeIcon className="w-4 h-4" />}
+							icon={<Server className="w-5" />}
+							name="Machines"
+							to="/machines"
 						/>
+					) : undefined}
+					{data.access.users ? (
 						<TabLink
-							to="/settings"
-							name="Settings"
-							icon={<GearIcon className="w-4 h-4" />}
+							icon={<Users className="w-5" />}
+							name="Users"
+							to="/users"
 						/>
-					</>
-				) : undefined}
-			</nav>
+					) : undefined}
+					{data.access.policy ? (
+						<TabLink
+							icon={<Lock className="w-5" />}
+							name="Access Control"
+							to="/acls"
+						/>
+					) : undefined}
+					{data.configAvailable ? (
+						<>
+							{data.access.dns ? (
+								<TabLink
+									icon={<Globe2 className="w-5" />}
+									name="DNS"
+									to="/dns"
+								/>
+							) : undefined}
+							{data.access.settings ? (
+								<TabLink
+									icon={<Settings className="w-5" />}
+									name="Settings"
+									to="/settings"
+								/>
+							) : undefined}
+						</>
+					) : undefined}
+				</nav>
+			) : undefined}
 		</header>
 	);
 }

app/components/IconButton.tsx

@@ -0,0 +1,46 @@
+import React, { useRef } from 'react';
+import { type AriaButtonOptions, useButton } from 'react-aria';
+import cn from '~/utils/cn';
+
+export interface IconButtonProps extends AriaButtonOptions<'button'> {
+	variant?: 'heavy' | 'light';
+	className?: string;
+	children: React.ReactNode;
+	label: string;
+	ref?: React.RefObject<HTMLButtonElement | null>;
+}
+
+export default function IconButton({
+	variant = 'light',
+	...props
+}: IconButtonProps) {
+	// In case the button is used as a trigger ref
+	const ref = props.ref ?? useRef<HTMLButtonElement | null>(null);
+	const { buttonProps } = useButton(props, ref);
+
+	return (
+		<button
+			ref={ref}
+			{...buttonProps}
+			aria-label={props.label}
+			className={cn(
+				'rounded-full flex items-center justify-center p-1',
+				'focus:outline-hidden focus:ring-3',
+				props.isDisabled && 'opacity-60 cursor-not-allowed',
+				...(variant === 'heavy'
+					? [
+							'bg-headplane-900 dark:bg-headplane-50 font-semibold',
+							'hover:bg-headplane-900/90 dark:hover:bg-headplane-50/90',
+							'text-headplane-200 dark:text-headplane-800',
+						]
+					: [
+							'bg-headplane-100 dark:bg-headplane-700/30 font-medium',
+							'hover:bg-headplane-200/90 dark:hover:bg-headplane-800/30',
+						]),
+				props.className,
+			)}
+		>
+			{props.children}
+		</button>
+	);
+}

app/components/Input.tsx

@@ -0,0 +1,93 @@
+import { Asterisk } from 'lucide-react';
+import { useRef } from 'react';
+import { type AriaTextFieldProps, useId, useTextField } from 'react-aria';
+import cn from '~/utils/cn';
+
+export interface InputProps extends AriaTextFieldProps<HTMLInputElement> {
+	label: string;
+	labelHidden?: boolean;
+	isRequired?: boolean;
+	className?: string;
+	isInvalid?: boolean;
+	errorMessage?: string;
+}
+
+export default function Input(props: InputProps) {
+	const {
+		label,
+		labelHidden,
+		className,
+		isInvalid: customIsInvalid,
+		errorMessage,
+	} = props;
+	const ref = useRef<HTMLInputElement | null>(null);
+	const id = useId(props.id);
+
+	const {
+		labelProps,
+		inputProps,
+		descriptionProps,
+		errorMessageProps,
+		isInvalid: ariaIsInvalid,
+		validationErrors,
+	} = useTextField(
+		{
+			...props,
+			label,
+			'aria-label': label,
+		},
+		ref,
+	);
+
+	const isInvalid = customIsInvalid ?? ariaIsInvalid;
+
+	return (
+		<div className="flex flex-col w-full">
+			<label
+				{...labelProps}
+				className={cn(
+					'text-xs font-medium px-3 mb-0.5',
+					'text-headplane-700 dark:text-headplane-100',
+					labelHidden && 'sr-only',
+				)}
+				htmlFor={id}
+			>
+				{label}
+				{props.isRequired && (
+					<Asterisk className="inline w-3.5 text-red-500 pb-1 ml-0.5" />
+				)}
+			</label>
+			<input
+				{...inputProps}
+				className={cn(
+					'rounded-xl px-3 py-2',
+					'focus:outline-hidden focus:ring-3',
+					'bg-white dark:bg-headplane-900',
+					'border border-headplane-100 dark:border-headplane-800',
+					className,
+				)}
+				ref={ref}
+				required={props.isRequired}
+			/>
+			{props.description && (
+				<div
+					{...descriptionProps}
+					className={cn(
+						'text-xs px-3 mt-1',
+						'text-headplane-500 dark:text-headplane-400',
+					)}
+				>
+					{props.description}
+				</div>
+			)}
+			{isInvalid ? (
+				<div
+					{...errorMessageProps}
+					className={cn('text-xs px-3 mt-1', 'text-red-500 dark:text-red-400')}
+				>
+					{errorMessage ?? validationErrors.join(' ')}
+				</div>
+			) : null}
+		</div>
+	);
+}

app/components/Link.tsx

@@ -1,14 +1,19 @@
-import { LinkExternalIcon } from '@primer/octicons-react';
-import { cn } from '~/utils/cn';
+import { ExternalLink } from 'lucide-react';
+import cn from '~/utils/cn';
 
-interface Props {
+export interface LinkProps {
 	to: string;
 	name: string;
 	children: string;
 	className?: string;
 }
 
-export default function Link({ to, name: alt, children, className }: Props) {
+export default function Link({
+	to,
+	name: alt,
+	children,
+	className,
+}: LinkProps) {
 	return (
 		<a
 			href={to}
@@ -16,14 +21,15 @@ export default function Link({ to, name: alt, children, className }: Props) {
 			target="_blank"
 			rel="noreferrer"
 			className={cn(
-				'inline-flex items-center gap-x-1',
+				'inline-flex items-center gap-x-0.5',
 				'text-blue-500 hover:text-blue-700',
 				'dark:text-blue-400 dark:hover:text-blue-300',
+				'focus:outline-hidden focus:ring-3 rounded-md',
 				className,
 			)}
 		>
 			{children}
-			<LinkExternalIcon className="h-3 w-3" />
+			<ExternalLink className="w-3.5" />
 		</a>
 	);
 }

app/components/Logo.tsx

@@ -0,0 +1,10 @@
+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

@@ -1,91 +1,170 @@
-import type { Dispatch, ReactNode, SetStateAction } from 'react';
+import React, { useRef, cloneElement } from 'react';
+import { type AriaMenuProps, Key, Placement, useMenuTrigger } from 'react-aria';
+import { useMenu, useMenuItem, useMenuSection, useSeparator } from 'react-aria';
+import { Item, Section } from 'react-stately';
 import {
-	Button as AriaButton,
-	Menu as AriaMenu,
-	MenuItem,
-	MenuTrigger,
-	Popover,
-} from 'react-aria-components';
-import { cn } from '~/utils/cn';
+	type MenuTriggerProps,
+	Node,
+	TreeState,
+	useMenuTriggerState,
+	useTreeState,
+} from 'react-stately';
+import Button, { ButtonProps } from '~/components/Button';
+import IconButton, { IconButtonProps } from '~/components/IconButton';
+import Popover from '~/components/Popover';
+import cn from '~/utils/cn';
 
-function Button(props: Parameters<typeof AriaButton>[0]) {
+interface MenuProps extends MenuTriggerProps {
+	placement?: Placement;
+	isDisabled?: boolean;
+	disabledKeys?: Key[];
+	children: [
+		React.ReactElement<ButtonProps> | React.ReactElement<IconButtonProps>,
+		React.ReactElement<MenuPanelProps>,
+	];
+}
+
+// TODO: onAction is called twice for some reason?
+// TODO: isDisabled per-prop
+function Menu(props: MenuProps) {
+	const { placement = 'bottom', isDisabled, disabledKeys = [] } = props;
+	const state = useMenuTriggerState(props);
+	const ref = useRef<HTMLButtonElement | null>(null);
+	const { menuTriggerProps, menuProps } = useMenuTrigger<object>(
+		{},
+		state,
+		ref,
+	);
+
+	// cloneElement is necessary because the button is a union type
+	// of multiple things and we need to join props from our hooks
+	const [button, panel] = props.children;
 	return (
-		<AriaButton
-			{...props}
-			className={cn('outline-none', props.className)}
-			aria-label="Menu"
-		/>
+		<div>
+			{cloneElement(button, {
+				...menuTriggerProps,
+				isDisabled: isDisabled,
+				ref,
+			})}
+			{state.isOpen && (
+				<Popover state={state} triggerRef={ref} placement={placement}>
+					{cloneElement(panel, {
+						...menuProps,
+						autoFocus: state.focusStrategy ?? true,
+						onClose: () => state.close(),
+						disabledKeys,
+					})}
+				</Popover>
+			)}
+		</div>
 	);
 }
 
-function Items(props: Parameters<typeof AriaMenu>[0]) {
+interface MenuPanelProps extends AriaMenuProps<object> {
+	onClose?: () => void;
+	disabledKeys?: Key[];
+}
+
+function Panel(props: MenuPanelProps) {
+	const state = useTreeState(props);
+	const ref = useRef(null);
+
+	const { menuProps } = useMenu(props, state, ref);
 	return (
-		<Popover
+		<ul
+			{...menuProps}
+			ref={ref}
+			className="pt-1 pb-1 shadow-2xs rounded-md min-w-[200px] focus:outline-hidden"
+		>
+			{[...state.collection].map((item) => (
+				<MenuSection
+					key={item.key}
+					section={item}
+					state={state}
+					disabledKeys={props.disabledKeys}
+				/>
+			))}
+		</ul>
+	);
+}
+
+interface MenuSectionProps<T> {
+	section: Node<T>;
+	state: TreeState<T>;
+	disabledKeys?: Key[];
+}
+
+function MenuSection<T>({ section, state, disabledKeys }: MenuSectionProps<T>) {
+	const { itemProps, groupProps } = useMenuSection({
+		heading: section.rendered,
+		'aria-label': section['aria-label'],
+	});
+
+	const { separatorProps } = useSeparator({
+		elementType: 'li',
+	});
+
+	return (
+		<>
+			{section.key !== state.collection.getFirstKey() ? (
+				<li
+					{...separatorProps}
+					className={cn(
+						'mx-2 mt-1 mb-1 border-t',
+						'border-headplane-200 dark:border-headplane-800',
+					)}
+				/>
+			) : undefined}
+			<li {...itemProps}>
+				<ul {...groupProps}>
+					{[...section.childNodes].map((item) => (
+						<MenuItem
+							key={item.key}
+							item={item}
+							state={state}
+							isDisabled={disabledKeys?.includes(item.key)}
+						/>
+					))}
+				</ul>
+			</li>
+		</>
+	);
+}
+
+interface MenuItemProps<T> {
+	item: Node<T>;
+	state: TreeState<T>;
+	isDisabled?: boolean;
+}
+
+function MenuItem<T>({ item, state, isDisabled }: MenuItemProps<T>) {
+	const ref = useRef<HTMLLIElement | null>(null);
+	const { menuItemProps } = useMenuItem({ key: item.key }, state, ref);
+
+	const isFocused = state.selectionManager.focusedKey === item.key;
+
+	return (
+		<li
+			{...menuItemProps}
+			ref={ref}
 			className={cn(
-				'mt-2 rounded-md',
-				'bg-ui-50 dark:bg-ui-800',
-				'overflow-hidden z-50',
-				'border border-ui-200 dark:border-ui-600',
-				'entering:animate-in exiting:animate-out',
-				'entering:fade-in entering:zoom-in-95',
-				'exiting:fade-out exiting:zoom-out-95',
-				'fill-mode-forwards origin-left-right',
+				'py-2 px-3 mx-1 rounded-lg',
+				'focus:outline-hidden select-none',
+				isFocused && 'bg-headplane-100/50 dark:bg-headplane-800',
+				isDisabled
+					? 'text-headplane-400 dark:text-headplane-600'
+					: 'hover:bg-headplane-100/50 dark:hover:bg-headplane-800 cursor-pointer',
 			)}
 		>
-			<AriaMenu
-				{...props}
-				className={cn(
-					'outline-none',
-					'divide-y divide-ui-200 dark:divide-ui-600',
-					props.className,
-				)}
-			>
-				{props.children}
-			</AriaMenu>
-		</Popover>
+			{item.rendered}
+		</li>
 	);
 }
 
-type ButtonProps = Parameters<typeof AriaButton>[0] & {
-	readonly control?: [boolean, Dispatch<SetStateAction<boolean>>];
-};
-
-function ItemButton(props: ButtonProps) {
-	return (
-		<MenuItem className="outline-none">
-			<AriaButton
-				{...props}
-				className={cn(
-					'px-4 py-2 w-full outline-none text-left',
-					'hover:bg-ui-200 dark:hover:bg-ui-700',
-					props.className,
-				)}
-				aria-label="Menu Dialog"
-				// If control is passed, set the state value
-				onPress={(event) => {
-					props.onPress?.(event);
-					props.control?.[1](true);
-				}}
-			/>
-		</MenuItem>
-	);
-}
-
-function Item(props: Parameters<typeof MenuItem>[0]) {
-	return (
-		<MenuItem
-			{...props}
-			className={cn(
-				'px-4 py-2 w-full outline-none',
-				'hover:bg-ui-200 dark:hover:bg-ui-700',
-				props.className,
-			)}
-		/>
-	);
-}
-
-function Menu({ children }: { children: ReactNode }) {
-	return <MenuTrigger>{children}</MenuTrigger>;
-}
-
-export default Object.assign(Menu, { Button, Item, ItemButton, Items });
+export default Object.assign(Menu, {
+	Button,
+	IconButton,
+	Panel,
+	Section,
+	Item,
+});

app/components/Notice.tsx

@@ -1,23 +1,45 @@
-import { InfoIcon } from '@primer/octicons-react';
-import type { ReactNode } from 'react';
-import { cn } from '~/utils/cn';
+import {
+	CircleAlert,
+	CircleSlash2,
+	LucideProps,
+	TriangleAlert,
+} from 'lucide-react';
+import React from 'react';
+import Card from '~/components/Card';
 
-interface Props {
-	className?: string;
-	children: ReactNode;
+export interface NoticeProps {
+	children: React.ReactNode;
+	title?: string;
+	variant?: 'default' | 'error' | 'warning';
+	icon?: React.ReactElement<LucideProps>;
 }
 
-export default function Notice({ children, className }: Props) {
+export default function Notice({
+	children,
+	title,
+	variant,
+	icon,
+}: NoticeProps) {
 	return (
-		<div
-			className={cn(
-				'p-4 rounded-md w-full flex items-center gap-3',
-				'bg-ui-200 dark:bg-ui-800',
-				className,
-			)}
-		>
-			<InfoIcon className="h-6 w-6 text-ui-700 dark:text-ui-200" />
-			{children}
-		</div>
+		<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>
 	);
 }
+
+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/NumberField.tsx

@@ -1,46 +0,0 @@
-import { PlusIcon, DashIcon } from '@primer/octicons-react';
-import type { Dispatch, SetStateAction } from 'react';
-import {
-	Button,
-	Group,
-	Input,
-	NumberField as AriaNumberField,
-} from 'react-aria-components';
-import { cn } from '~/utils/cn';
-
-type NumberFieldProps = Parameters<typeof AriaNumberField>[0] & {
-	label: string;
-	state?: [number, Dispatch<SetStateAction<number>>];
-};
-
-export default function NumberField(props: NumberFieldProps) {
-	return (
-		<AriaNumberField
-			{...props}
-			aria-label={props.label}
-			className="w-full"
-			value={props.state?.[0]}
-			onChange={(value) => {
-				props.state?.[1](value);
-			}}
-		>
-			<Group
-				className={cn(
-					'flex px-2.5 py-1.5 w-full rounded-lg my-1',
-					'border border-ui-200 dark:border-ui-600',
-					'dark:bg-ui-800 dark:text-ui-300 gap-2',
-					'focus-within:ring-2 focus-within:ring-blue-600',
-					props.className,
-				)}
-			>
-				<Input className="w-full bg-transparent focus:outline-none" />
-				<Button slot="decrement">
-					<DashIcon className="w-4 h-4" />
-				</Button>
-				<Button slot="increment">
-					<PlusIcon className="w-4 h-4" />
-				</Button>
-			</Group>
-		</AriaNumberField>
-	);
-}

app/components/NumberInput.tsx

@@ -0,0 +1,102 @@
+import { Minus, Plus } from 'lucide-react';
+import { useRef } from 'react';
+import {
+	type AriaNumberFieldProps,
+	useId,
+	useLocale,
+	useNumberField,
+} from 'react-aria';
+import { useNumberFieldState } from 'react-stately';
+import IconButton from '~/components/IconButton';
+import cn from '~/utils/cn';
+
+export interface InputProps extends AriaNumberFieldProps {
+	isRequired?: boolean;
+	name?: string;
+}
+
+export default function NumberInput(props: InputProps) {
+	const { label, name } = props;
+	const { locale } = useLocale();
+	const state = useNumberFieldState({ ...props, locale });
+	const ref = useRef<HTMLInputElement | null>(null);
+	const id = useId(props.id);
+
+	const {
+		labelProps,
+		inputProps,
+		groupProps,
+		incrementButtonProps,
+		decrementButtonProps,
+		descriptionProps,
+		errorMessageProps,
+		isInvalid,
+		validationErrors,
+	} = useNumberField(props, state, ref);
+
+	return (
+		<div className="flex flex-col">
+			<label
+				{...labelProps}
+				htmlFor={id}
+				className={cn(
+					'text-xs font-medium px-3 mb-0.5',
+					'text-headplane-700 dark:text-headplane-100',
+				)}
+			>
+				{label}
+			</label>
+			<div
+				{...groupProps}
+				className={cn(
+					'flex items-center gap-1 rounded-xl pr-1',
+					'focus-within:outline-hidden focus-within:ring-3',
+					'bg-white dark:bg-headplane-900',
+					'border border-headplane-100 dark:border-headplane-800',
+				)}
+			>
+				<input
+					{...inputProps}
+					required={props.isRequired}
+					ref={ref}
+					id={id}
+					className="w-full pl-3 py-2 rounded-l-xl bg-transparent focus:outline-hidden"
+				/>
+				<input type="hidden" name={name} value={state.numberValue} />
+				<IconButton
+					{...decrementButtonProps}
+					label="Decrement"
+					className="w-7.5 h-7.5 rounded-lg"
+				>
+					<Minus className="p-1" />
+				</IconButton>
+				<IconButton
+					{...incrementButtonProps}
+					label="Increment"
+					className="w-7.5 h-7.5 rounded-lg"
+				>
+					<Plus className="p-1" />
+				</IconButton>
+			</div>
+			{props.description && (
+				<div
+					{...descriptionProps}
+					className={cn(
+						'text-xs px-3 mt-1',
+						'text-headplane-500 dark:text-headplane-400',
+					)}
+				>
+					{props.description}
+				</div>
+			)}
+			{isInvalid && (
+				<div
+					{...errorMessageProps}
+					className={cn('text-xs px-3 mt-1', 'text-red-500 dark:text-red-400')}
+				>
+					{validationErrors.join(' ')}
+				</div>
+			)}
+		</div>
+	);
+}

app/components/Options.tsx

@@ -0,0 +1,78 @@
+import { useRef } from 'react';
+import {
+	AriaTabListProps,
+	AriaTabPanelProps,
+	useTab,
+	useTabList,
+	useTabPanel,
+} from 'react-aria';
+import { Item, Node, TabListState, useTabListState } from 'react-stately';
+import cn from '~/utils/cn';
+
+export interface OptionsProps extends AriaTabListProps<object> {
+	label: string;
+	className?: string;
+}
+
+function Options({ label, className, ...props }: OptionsProps) {
+	const state = useTabListState(props);
+	const ref = useRef<HTMLDivElement | null>(null);
+
+	const { tabListProps } = useTabList(props, state, ref);
+	return (
+		<div className={cn('flex flex-col', className)}>
+			<div
+				{...tabListProps}
+				ref={ref}
+				className="flex items-center gap-2 overflow-x-scroll"
+			>
+				{[...state.collection].map((item) => (
+					<Option key={item.key} item={item} state={state} />
+				))}
+			</div>
+			<OptionsPanel key={state.selectedItem?.key} state={state} />
+		</div>
+	);
+}
+
+export interface OptionsOptionProps {
+	item: Node<object>;
+	state: TabListState<object>;
+}
+
+function Option({ item, state }: OptionsOptionProps) {
+	const { key, rendered } = item;
+	const ref = useRef<HTMLDivElement | null>(null);
+
+	const { tabProps } = useTab({ key }, state, ref);
+	return (
+		<div
+			{...tabProps}
+			ref={ref}
+			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',
+				'border border-headplane-100 dark:border-headplane-800',
+			)}
+		>
+			{rendered}
+		</div>
+	);
+}
+
+export interface OptionsPanelProps extends AriaTabPanelProps {
+	state: TabListState<object>;
+}
+
+function OptionsPanel({ state, ...props }: OptionsPanelProps) {
+	const ref = useRef<HTMLDivElement | null>(null);
+	const { tabPanelProps } = useTabPanel(props, state, ref);
+	return (
+		<div {...tabPanelProps} ref={ref} className="w-full mt-2">
+			{state.selectedItem?.props.children}
+		</div>
+	);
+}
+
+export default Object.assign(Options, { Item });

app/components/Popover.tsx

@@ -0,0 +1,49 @@
+import React, { useRef } from 'react';
+import {
+	type AriaPopoverProps,
+	DismissButton,
+	Overlay,
+	usePopover,
+} from 'react-aria';
+import type { OverlayTriggerState } from 'react-stately';
+import cn from '~/utils/cn';
+
+export interface PopoverProps extends Omit<AriaPopoverProps, 'popoverRef'> {
+	children: React.ReactNode;
+	state: OverlayTriggerState;
+	popoverRef?: React.RefObject<HTMLDivElement | null>;
+	className?: string;
+}
+
+export default function Popover(props: PopoverProps) {
+	const ref = props.popoverRef ?? useRef<HTMLDivElement | null>(null);
+	const { state, children, className } = props;
+	const { popoverProps, underlayProps } = usePopover(
+		{
+			...props,
+			popoverRef: ref,
+			offset: 8,
+		},
+		state,
+	);
+
+	return (
+		<Overlay>
+			<div {...underlayProps} className="fixed inset-0" />
+			<div
+				{...popoverProps}
+				ref={ref}
+				className={cn(
+					'z-10 shadow-xs rounded-xl',
+					'bg-white dark:bg-headplane-900',
+					'border border-headplane-200 dark:border-headplane-800',
+					className,
+				)}
+			>
+				<DismissButton onDismiss={state.close} />
+				{children}
+				<DismissButton onDismiss={state.close} />
+			</div>
+		</Overlay>
+	);
+}

app/components/ProgressBar.tsx

@@ -0,0 +1,26 @@
+import { useProgressBar } from 'react-aria';
+import cn from '~/utils/cn';
+
+export interface ProgressBarProps {
+	isVisible: boolean;
+}
+
+export default function ProgressBar(props: ProgressBarProps) {
+	const { isVisible } = props;
+	const { progressBarProps } = useProgressBar({
+		label: 'Loading...',
+		isIndeterminate: true,
+	});
+
+	return (
+		<div
+			{...progressBarProps}
+			aria-hidden={!isVisible}
+			className={cn(
+				'fixed top-0 left-0 z-50 w-1/2 h-1 opacity-0',
+				'bg-headplane-950 dark:bg-headplane-50',
+				isVisible && 'animate-loading opacity-100',
+			)}
+		/>
+	);
+}

app/components/RadioGroup.tsx

@@ -0,0 +1,83 @@
+import React, { createContext, useContext, useRef } from 'react';
+import {
+	AriaRadioGroupProps,
+	AriaRadioProps,
+	VisuallyHidden,
+	useFocusRing,
+} from 'react-aria';
+import { RadioGroupState } from 'react-stately';
+import cn from '~/utils/cn';
+
+import { useRadio, useRadioGroup } from 'react-aria';
+import { useRadioGroupState } from 'react-stately';
+
+interface RadioGroupProps extends AriaRadioGroupProps {
+	children: React.ReactElement<RadioProps>[];
+	label: string;
+	className?: string;
+}
+
+const RadioContext = createContext<RadioGroupState | null>(null);
+
+function RadioGroup({ children, label, className, ...props }: RadioGroupProps) {
+	const state = useRadioGroupState(props);
+	const { radioGroupProps, labelProps } = useRadioGroup(
+		{
+			...props,
+			'aria-label': label,
+		},
+		state,
+	);
+
+	return (
+		<div {...radioGroupProps} className={cn('flex flex-col gap-2', className)}>
+			<VisuallyHidden>
+				<span {...labelProps}>{label}</span>
+			</VisuallyHidden>
+			<RadioContext.Provider value={state}>{children}</RadioContext.Provider>
+		</div>
+	);
+}
+
+interface RadioProps extends AriaRadioProps {
+	label: string;
+	className?: string;
+}
+
+function Radio({ children, label, className, ...props }: RadioProps) {
+	const state = useContext(RadioContext);
+	const ref = useRef(null);
+	const { inputProps, isSelected, isDisabled } = useRadio(
+		{
+			...props,
+			'aria-label': label,
+		},
+		state!,
+		ref,
+	);
+	const { isFocusVisible, focusProps } = useFocusRing();
+
+	return (
+		<label className="flex items-center gap-2 text-sm">
+			<VisuallyHidden>
+				<input {...inputProps} {...focusProps} ref={ref} className="peer" />
+			</VisuallyHidden>
+			<div
+				aria-hidden="true"
+				className={cn(
+					'w-5 h-5 aspect-square rounded-full p-1 border-2',
+					'border border-headplane-600 dark:border-headplane-300',
+					isFocusVisible ? 'ring-4' : '',
+					isDisabled ? 'opacity-50 cursor-not-allowed' : '',
+					isSelected
+						? 'border-[6px] border-headplane-900 dark:border-headplane-100'
+						: '',
+					className,
+				)}
+			/>
+			{children}
+		</label>
+	);
+}
+
+export default Object.assign(RadioGroup, { Radio });

app/components/Select.tsx

@@ -1,79 +1,173 @@
-import { ChevronDownIcon } from '@primer/octicons-react';
-import type { Dispatch, ReactNode, SetStateAction } from 'react';
+import { Check, ChevronDown } from 'lucide-react';
+import { useRef } from 'react';
 import {
-	Button,
-	ListBox,
-	ListBoxItem,
-	Popover,
-	Select as AriaSelect,
-	SelectValue,
-} from 'react-aria-components';
-import { cn } from '~/utils/cn';
+	AriaComboBoxProps,
+	AriaListBoxOptions,
+	useButton,
+	useComboBox,
+	useFilter,
+	useId,
+	useListBox,
+	useOption,
+} from 'react-aria';
+import { Item, ListState, Node, useComboBoxState } from 'react-stately';
+import Popover from '~/components/Popover';
+import cn from '~/utils/cn';
 
-type SelectProps = Parameters<typeof AriaSelect>[0] & {
-	readonly label: string;
-	readonly state?: [string, Dispatch<SetStateAction<string>>];
-	readonly children: ReactNode;
-};
+export interface SelectProps extends AriaComboBoxProps<object> {
+	className?: string;
+}
 
 function Select(props: SelectProps) {
+	const { contains } = useFilter({ sensitivity: 'base' });
+	const state = useComboBoxState({ ...props, defaultFilter: contains });
+	const id = useId(props.id);
+
+	const buttonRef = useRef<HTMLButtonElement | null>(null);
+	const inputRef = useRef<HTMLInputElement | null>(null);
+	const listBoxRef = useRef<HTMLUListElement | null>(null);
+	const popoverRef = useRef<HTMLDivElement | null>(null);
+
+	const {
+		buttonProps: triggerProps,
+		inputProps,
+		listBoxProps,
+		labelProps,
+		descriptionProps,
+	} = useComboBox(
+		{
+			...props,
+			inputRef,
+			buttonRef,
+			listBoxRef,
+			popoverRef,
+		},
+		state,
+	);
+
+	const { buttonProps } = useButton(triggerProps, buttonRef);
 	return (
-		<AriaSelect
-			{...props}
-			aria-label={props.label}
-			selectedKey={props.state?.[0]}
-			onSelectionChange={(key) => {
-				props.state?.[1](key.toString());
-			}}
-			className={cn(
-				'block w-full rounded-lg my-1',
-				'border border-ui-200 dark:border-ui-600',
-				'bg-white dark:bg-ui-800 dark:text-ui-300',
-				'focus-within:outline-6',
-				props.className,
+		<div className={cn('flex flex-col', props.className)}>
+			<label
+				{...labelProps}
+				className={cn(
+					'text-xs font-medium px-3 mb-0.5',
+					'text-headplane-700 dark:text-headplane-100',
+				)}
+				htmlFor={id}
+			>
+				{props.label}
+			</label>
+			<div
+				className={cn(
+					'flex rounded-xl focus:outline-hidden focus-within:ring-3',
+					'bg-white dark:bg-headplane-900',
+					'border border-headplane-100 dark:border-headplane-800',
+					props.isInvalid && 'ring-red-400',
+				)}
+			>
+				<input
+					{...inputProps}
+					className="outline-hidden px-3 py-2 rounded-l-xl w-full bg-transparent"
+					data-1p-ignore
+					id={id}
+					ref={inputRef}
+				/>
+				<button
+					{...buttonProps}
+					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',
+					)}
+					ref={buttonRef}
+				>
+					<ChevronDown className="p-0.5" />
+				</button>
+			</div>
+			{props.description && (
+				<div
+					{...descriptionProps}
+					className={cn(
+						'text-xs px-3 mt-1',
+						'text-headplane-500 dark:text-headplane-400',
+					)}
+				>
+					{props.description}
+				</div>
 			)}
-		>
-			<Button
-				className={cn(
-					'w-full flex items-center justify-between',
-					'px-2.5 py-1.5 rounded-lg',
-				)}
-			>
-				<SelectValue />
-				<ChevronDownIcon className="w-4 h-4" aria-hidden="true" />
-			</Button>
-			<Popover
-				className={cn(
-					'mt-2 rounded-md w-[var(--trigger-width)]',
-					'bg-ui-100 dark:bg-ui-800 shadow-sm',
-					'z-50 overflow-y-auto',
-					'border border-ui-200 dark:border-ui-600',
-					'entering:animate-in exiting:animate-out',
-					'entering:fade-in entering:zoom-in-95',
-					'exiting:fade-out exiting:zoom-out-95',
-					'fill-mode-forwards origin-left-right',
-				)}
-			>
-				<ListBox orientation="vertical">{props.children}</ListBox>
-			</Popover>
-		</AriaSelect>
+			{state.isOpen && (
+				<Popover
+					className="w-full max-w-xs"
+					isNonModal
+					placement="bottom start"
+					popoverRef={popoverRef}
+					state={state}
+					triggerRef={inputRef}
+				>
+					<ListBox {...listBoxProps} listBoxRef={listBoxRef} state={state} />
+				</Popover>
+			)}
+		</div>
 	);
 }
 
-type ItemProps = Parameters<typeof ListBoxItem>[0];
+interface ListBoxProps extends AriaListBoxOptions<object> {
+	listBoxRef: React.RefObject<HTMLUListElement | null>;
+	state: ListState<object>;
+}
+
+function ListBox(props: ListBoxProps) {
+	const { listBoxRef, state } = props;
+	const { listBoxProps } = useListBox(props, state, listBoxRef);
 
-function Item(props: ItemProps) {
 	return (
-		<ListBoxItem
-			{...props}
-			className={cn(
-				'px-4 py-2 w-full outline-none w-full',
-				'hover:bg-ui-200 dark:hover:bg-ui-700',
-				props.className,
-			)}
+		<ul
+			{...listBoxProps}
+			className="w-full max-h-72 overflow-auto outline-hidden pt-1"
+			ref={listBoxRef}
 		>
-			{props.children}
-		</ListBoxItem>
+			{[...state.collection].map((item) => (
+				<Option item={item} key={item.key} state={state} />
+			))}
+		</ul>
+	);
+}
+
+interface OptionProps {
+	item: Node<unknown>;
+	state: ListState<unknown>;
+}
+
+function Option({ item, state }: OptionProps) {
+	const ref = useRef<HTMLLIElement | null>(null);
+	const { optionProps, isDisabled, isSelected, isFocused } = useOption(
+		{
+			key: item.key,
+		},
+		state,
+		ref,
+	);
+
+	return (
+		<li
+			{...optionProps}
+			className={cn(
+				'flex items-center justify-between',
+				'py-2 px-3 mx-1 rounded-lg mb-1',
+				'focus:outline-hidden select-none',
+				isFocused || isSelected
+					? 'bg-headplane-100/50 dark:bg-headplane-800'
+					: 'hover:bg-headplane-100/50 dark:hover:bg-headplane-800',
+				isDisabled && 'text-headplane-300 dark:text-headplane-600',
+			)}
+			ref={ref}
+		>
+			{item.rendered}
+			{isSelected && <Check className="p-0.5" />}
+		</li>
 	);
 }
 

app/components/Spinner.tsx

@@ -6,14 +6,13 @@ interface Props {
 
 export default function Spinner({ className }: Props) {
 	return (
-		<div className={clsx('mr-1.5 inline-block align-middle mb-0.5', className)}>
+		<div className={clsx('inline-block align-middle mb-0.5', className)}>
 			<div
 				className={clsx(
 					'animate-spin rounded-full w-full h-full',
 					'border-2 border-current border-t-transparent',
 					className,
 				)}
-				role="status"
 			>
 				<span className="sr-only">Loading...</span>
 			</div>

app/components/StatusCircle.tsx

@@ -1,23 +1,26 @@
-import clsx from 'clsx';
-import type { HTMLProps } from 'react';
+import cn from '~/utils/cn';
 
-type Props = HTMLProps<SVGElement> & {
-	readonly isOnline: boolean;
-};
+export interface StatusCircleProps {
+	isOnline: boolean;
+	className?: string;
+}
 
-// eslint-disable-next-line unicorn/no-keyword-prefix
-export default function StatusCircle({ isOnline, className }: Props) {
+export default function StatusCircle({
+	isOnline,
+	className,
+}: StatusCircleProps) {
 	return (
 		<svg
-			className={clsx(
-				className,
+			className={cn(
 				isOnline
-					? 'text-green-700 dark:text-green-400'
-					: 'text-gray-300 dark:text-gray-500',
+					? 'text-green-600 dark:text-green-500'
+					: 'text-headplane-200 dark:text-headplane-800',
+				className,
 			)}
 			viewBox="0 0 24 24"
 			fill="currentColor"
 		>
+			<title>{isOnline ? 'Online' : 'Offline'}</title>
 			<circle cx="12" cy="12" r="8" />
 		</svg>
 	);

app/components/Switch.tsx

@@ -1,34 +1,64 @@
-import { Switch as AriaSwitch } from 'react-aria-components';
-import { cn } from '~/utils/cn';
+import { useRef } from 'react';
+import {
+	AriaSwitchProps,
+	VisuallyHidden,
+	useFocusRing,
+	useSwitch,
+} from 'react-aria';
+import { useToggleState } from 'react-stately';
+import cn from '~/utils/cn';
 
-type SwitchProps = Parameters<typeof AriaSwitch>[0] & {
-	readonly label: string;
-};
+export interface SwitchProps extends AriaSwitchProps {
+	label: string;
+	className?: string;
+	switchClassName?: string;
+}
 
 export default function Switch(props: SwitchProps) {
+	const state = useToggleState(props);
+	const ref = useRef<HTMLInputElement | null>(null);
+	const { focusProps, isFocusVisible } = useFocusRing();
+	const { inputProps } = useSwitch(
+		{
+			...props,
+			'aria-label': props.label,
+		},
+		state,
+		ref,
+	);
+
 	return (
-		<AriaSwitch
-			{...props}
-			aria-label={props.label}
-			className="group flex gap-2 items-center"
-		>
+		<label className="flex items-center gap-x-2">
+			<VisuallyHidden elementType="span">
+				<input
+					{...inputProps}
+					{...focusProps}
+					aria-label={props.label}
+					ref={ref}
+				/>
+			</VisuallyHidden>
 			<div
+				aria-hidden
 				className={cn(
-					'flex h-[26px] w-[44px] p-[4px] shrink-0',
-					'rounded-full outline-none group-focus-visible:ring-2',
-					'bg-main-600/50 dark:bg-main-600/20 group-selected:bg-main-700',
-					props.isDisabled && 'opacity-50 cursor-not-allowed',
+					'flex h-[28px] w-[46px] p-[4px] shrink-0 rounded-full',
+					'bg-headplane-300 dark:bg-headplane-700',
+					'border border-transparent dark:border-headplane-800',
+					state.isSelected && 'bg-headplane-900 dark:bg-headplane-950',
+					isFocusVisible && 'ring-2',
+					props.isDisabled && 'opacity-50',
 					props.className,
 				)}
 			>
 				<span
 					className={cn(
 						'h-[18px] w-[18px] transform rounded-full',
-						'bg-white transition duration-100 ease-in-out',
-						'translate-x-0 group-selected:translate-x-[100%]',
+						'bg-white transition duration-50 ease-in-out',
+						'translate-x-0 group-selected:translate-x-full',
+						state.isSelected && 'translate-x-full',
+						props.switchClassName,
 					)}
 				/>
 			</div>
-		</AriaSwitch>
+		</label>
 	);
 }

app/components/TabLink.tsx

@@ -1,33 +0,0 @@
-import { NavLink } from 'react-router';
-import type { ReactNode } from 'react';
-import { cn } from '~/utils/cn';
-
-interface Props {
-	name: string;
-	to: string;
-	icon: ReactNode;
-}
-
-export default function TabLink({ name, to, icon }: Props) {
-	return (
-		<NavLink
-			to={to}
-			prefetch="intent"
-			className={({ isActive }) =>
-				cn(
-					'border-b-2 py-1.5',
-					isActive ? 'border-white' : 'border-transparent',
-				)
-			}
-		>
-			<div
-				className={cn(
-					'flex items-center gap-x-2 px-2.5 py-1.5 text-md text-nowrap',
-					'hover:bg-ui-100/5 dark:hover:bg-ui-900/40 rounded-md',
-				)}
-			>
-				{icon} {name}
-			</div>
-		</NavLink>
-	);
-}

app/components/TableList.tsx

@@ -1,14 +1,13 @@
-import clsx from 'clsx';
 import type { HTMLProps } from 'react';
+import cn from '~/utils/cn';
 
 function TableList(props: HTMLProps<HTMLDivElement>) {
 	return (
 		<div
 			{...props}
-			className={clsx(
-				'border border-gray-300 rounded-lg overflow-clip',
-				'dark:border-zinc-700 dark:text-gray-300',
-				// 'dark:bg-zinc-800',
+			className={cn(
+				'rounded-xl',
+				'border border-headplane-100 dark:border-headplane-800',
 				props.className,
 			)}
 		>
@@ -21,10 +20,9 @@ function Item(props: HTMLProps<HTMLDivElement>) {
 	return (
 		<div
 			{...props}
-			className={clsx(
-				'flex items-center justify-between px-3 py-2',
-				'border-b border-gray-200 last:border-b-0',
-				'dark:border-zinc-800',
+			className={cn(
+				'flex items-center justify-between p-2 last:border-b-0',
+				'border-b border-headplane-100 dark:border-headplane-800',
 				props.className,
 			)}
 		>

app/components/Tabs.tsx

@@ -0,0 +1,90 @@
+import { useRef } from 'react';
+import {
+	AriaTabListProps,
+	AriaTabPanelProps,
+	useTab,
+	useTabList,
+	useTabPanel,
+} from 'react-aria';
+import { Item, Node, TabListState, useTabListState } from 'react-stately';
+import cn from '~/utils/cn';
+
+export interface TabsProps extends AriaTabListProps<object> {
+	label: string;
+	className?: string;
+}
+
+function Tabs({ label, className, ...props }: TabsProps) {
+	const state = useTabListState(props);
+	const ref = useRef<HTMLDivElement | null>(null);
+
+	const { tabListProps } = useTabList(props, state, ref);
+	return (
+		<div className={cn('flex flex-col', className)}>
+			<div
+				{...tabListProps}
+				className={cn(
+					'flex items-center rounded-t-xl w-fit max-w-full overflow-x-auto',
+					'border-headplane-100 dark:border-headplane-800',
+					'border-t border-x',
+				)}
+				ref={ref}
+			>
+				{[...state.collection].map((item) => (
+					<Tab item={item} key={item.key} state={state} />
+				))}
+			</div>
+			<TabsPanel key={state.selectedItem?.key} state={state} />
+		</div>
+	);
+}
+
+export interface TabsTabProps {
+	item: Node<object>;
+	state: TabListState<object>;
+}
+
+function Tab({ item, state }: TabsTabProps) {
+	const { key, rendered } = item;
+	const ref = useRef<HTMLDivElement | null>(null);
+
+	const { tabProps } = useTab({ key }, state, ref);
+	return (
+		<div
+			{...tabProps}
+			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',
+				'border-r border-headplane-100 dark:border-headplane-800',
+				'first:rounded-tl-xl last:rounded-tr-xl last:border-r-0',
+			)}
+			ref={ref}
+		>
+			{rendered}
+		</div>
+	);
+}
+
+export interface TabsPanelProps extends AriaTabPanelProps {
+	state: TabListState<object>;
+}
+
+function TabsPanel({ state, ...props }: TabsPanelProps) {
+	const ref = useRef<HTMLDivElement | null>(null);
+	const { tabPanelProps } = useTabPanel(props, state, ref);
+	return (
+		<div
+			{...tabPanelProps}
+			className={cn(
+				'w-full overflow-clip rounded-b-xl rounded-r-xl',
+				'border border-headplane-100 dark:border-headplane-800',
+			)}
+			ref={ref}
+		>
+			{state.selectedItem?.props.children}
+		</div>
+	);
+}
+
+export default Object.assign(Tabs, { Item });

app/components/Text.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import cn from '~/utils/cn';
+
+export interface TextProps {
+	children: React.ReactNode;
+	className?: string;
+}
+
+export default function Text({ children, className }: TextProps) {
+	return <p className={cn('text-md my-0', className)}>{children}</p>;
+}

app/components/TextField.tsx

@@ -1,30 +0,0 @@
-import type { Dispatch, SetStateAction } from 'react';
-import { Input, TextField as AriaTextField } from 'react-aria-components';
-import { cn } from '~/utils/cn';
-
-type TextFieldProps = Parameters<typeof AriaTextField>[0] & {
-	readonly label: string;
-	readonly placeholder: string;
-	readonly state?: [string, Dispatch<SetStateAction<string>>];
-};
-
-export default function TextField(props: TextFieldProps) {
-	return (
-		<AriaTextField {...props} aria-label={props.label} className="w-full">
-			<Input
-				placeholder={props.placeholder}
-				value={props.state?.[0]}
-				name={props.name}
-				className={cn(
-					'block px-2.5 py-1.5 w-full rounded-lg my-1',
-					'border border-ui-200 dark:border-ui-600',
-					'dark:bg-ui-800 dark:text-ui-300',
-					props.className,
-				)}
-				onChange={(event) => {
-					props.state?.[1](event.target.value);
-				}}
-			/>
-		</AriaTextField>
-	);
-}

app/components/Title.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import cn from '~/utils/cn';
+
+export interface TitleProps {
+	children: React.ReactNode;
+	className?: string;
+}
+
+export default function Title({ children, className }: TitleProps) {
+	return (
+		<h3 className={cn('text-2xl font-bold mb-2', className)}>{children}</h3>
+	);
+}

app/components/ToastProvider.tsx

@@ -0,0 +1,87 @@
+import {
+	AriaToastProps,
+	AriaToastRegionProps,
+	useToast,
+	useToastRegion,
+} from '@react-aria/toast';
+import { ToastQueue, ToastState, useToastQueue } from '@react-stately/toast';
+import { X } from 'lucide-react';
+import React, { useRef } from 'react';
+import IconButton from '~/components/IconButton';
+import cn from '~/utils/cn';
+
+interface ToastProps extends AriaToastProps<React.ReactNode> {
+	state: ToastState<React.ReactNode>;
+}
+
+function Toast({ state, ...props }: ToastProps) {
+	const ref = useRef<HTMLDivElement | null>(null);
+	const { toastProps, contentProps, titleProps, closeButtonProps } = useToast(
+		props,
+		state,
+		ref,
+	);
+
+	return (
+		<div
+			{...toastProps}
+			ref={ref}
+			className={cn(
+				'flex items-center justify-between gap-x-3 pl-4 pr-3',
+				'text-white shadow-lg dark:shadow-md rounded-xl py-3',
+				'bg-headplane-900 dark:bg-headplane-950',
+			)}
+		>
+			<div {...contentProps} className="flex flex-col gap-2">
+				<div {...titleProps}>{props.toast.content}</div>
+			</div>
+			<IconButton
+				{...closeButtonProps}
+				label="Close"
+				className={cn(
+					'bg-transparent hover:bg-headplane-700',
+					'dark:bg-transparent dark:hover:bg-headplane-800',
+				)}
+			>
+				<X className="p-1" />
+			</IconButton>
+		</div>
+	);
+}
+
+interface ToastRegionProps extends AriaToastRegionProps {
+	state: ToastState<React.ReactNode>;
+}
+
+function ToastRegion({ state, ...props }: ToastRegionProps) {
+	const ref = useRef<HTMLDivElement | null>(null);
+	const { regionProps } = useToastRegion(props, state, ref);
+
+	return (
+		<div
+			{...regionProps}
+			ref={ref}
+			className={cn('fixed bottom-20 right-4', 'flex flex-col gap-4')}
+		>
+			{state.visibleToasts.map((toast) => (
+				<Toast key={toast.key} toast={toast} state={state} />
+			))}
+		</div>
+	);
+}
+
+export interface ToastProviderProps extends AriaToastRegionProps {
+	queue: ToastQueue<React.ReactNode>;
+}
+
+export default function ToastProvider({ queue, ...props }: ToastProviderProps) {
+	const state = useToastQueue(queue);
+
+	return (
+		<>
+			{state.visibleToasts.length > 0 && (
+				<ToastRegion {...props} state={state} />
+			)}
+		</>
+	);
+}

app/components/Toaster.tsx

@@ -1,91 +0,0 @@
-import { XIcon } from '@primer/octicons-react';
-import {
-	AriaToastProps,
-	useToast,
-	useToastRegion,
-} from '@react-aria/toast';
-import {
-	ToastQueue,
-	ToastState,
-	useToastQueue,
-} from '@react-stately/toast';
-import { ReactNode, useRef } from 'react';
-import { Button } from 'react-aria-components';
-import { createPortal } from 'react-dom';
-import { ClientOnly } from 'remix-utils/client-only';
-import { cn } from '~/utils/cn';
-
-type ToastProps = AriaToastProps<ReactNode> & {
-	readonly state: ToastState<ReactNode>;
-};
-
-function Toast({ state, ...properties }: ToastProps) {
-	const reference = useRef(null);
-
-	const { toastProps, titleProps, closeButtonProps } = useToast(
-		properties,
-		state,
-		reference,
-	);
-
-	return (
-		<div
-			{...toastProps}
-			ref={reference}
-			className={cn(
-				'bg-main-700 dark:bg-main-800 rounded-lg',
-				'text-main-100 dark:text-main-200 z-50',
-				'border border-main-600 dark:border-main-700',
-				'flex items-center justify-between p-3 pl-4 w-80',
-			)}
-		>
-			<div {...titleProps}>{properties.toast.content}</div>
-			<Button
-				{...closeButtonProps}
-				className={cn(
-					'outline-none rounded-full p-1',
-					'hover:bg-main-600 dark:hover:bg-main-700',
-				)}
-			>
-				<XIcon className="w-4 h-4" />
-			</Button>
-		</div>
-	);
-}
-
-const toasts = new ToastQueue<ReactNode>({
-	maxVisibleToasts: 5,
-});
-
-export function toast(text: string) {
-	return toasts.add(text, { timeout: 5000 });
-}
-
-export function Toaster() {
-	const reference = useRef(null);
-	const state = useToastQueue(toasts);
-
-	const { regionProps } = useToastRegion({}, state, reference);
-
-	return (
-		<ClientOnly>
-			{
-				() =>
-					createPortal(
-						state.visibleToasts.length >= 0 ? (
-							<div
-								className={cn('fixed bottom-20 right-4', 'flex flex-col gap-4')}
-								{...regionProps}
-								ref={reference}
-							>
-								{state.visibleToasts.map((toast) => (
-									<Toast key={toast.key} toast={toast} state={state} />
-								))}
-							</div>
-						) : undefined,
-						document.body,
-					)
-			}
-		</ClientOnly>
-	);
-}

app/components/Tooltip.tsx

@@ -1,37 +1,83 @@
-import type { ReactNode } from 'react';
+import React, { cloneElement, useRef } from 'react';
 import {
-	Button as AriaButton,
-	Tooltip as AriaTooltip,
-	TooltipTrigger,
-} from 'react-aria-components';
-import { cn } from '~/utils/cn';
+	AriaTooltipProps,
+	mergeProps,
+	useTooltip,
+	useTooltipTrigger,
+} from 'react-aria';
+import { TooltipTriggerState, useTooltipTriggerState } from 'react-stately';
+import cn from '~/utils/cn';
 
-interface Props {
-	children: ReactNode;
-	className?: string;
+export interface TooltipProps extends AriaTooltipProps {
+	children: [React.ReactElement, React.ReactElement<TooltipBodyProps>];
 }
 
-function Tooltip({ children }: Props) {
-	return <TooltipTrigger delay={0}>{children}</TooltipTrigger>;
-}
+function Tooltip(props: TooltipProps) {
+	const state = useTooltipTriggerState({
+		...props,
+		delay: 0,
+		closeDelay: 0,
+	});
 
-function Button(props: Parameters<typeof AriaButton>[0]) {
-	return <AriaButton {...props} />;
-}
+	const ref = useRef<HTMLButtonElement | null>(null);
+	const { triggerProps, tooltipProps } = useTooltipTrigger(
+		{
+			...props,
+			delay: 0,
+			closeDelay: 0,
+		},
+		state,
+		ref,
+	);
 
-function Body({ children, className }: Props) {
+	const [component, body] = props.children;
 	return (
-		<AriaTooltip
-			className={cn(
-				'text-sm max-w-xs p-2 rounded-lg mb-2',
-				'bg-white dark:bg-ui-900 drop-shadow-sm',
-				'border border-gray-200 dark:border-zinc-700',
-				className,
-			)}
-		>
-			{children}
-		</AriaTooltip>
+		<span className="relative">
+			<button
+				ref={ref}
+				{...triggerProps}
+				className={cn(
+					'flex items-center justify-center',
+					'focus:outline-hidden focus:ring-3 rounded-xl',
+				)}
+			>
+				{component}
+			</button>
+			{state.isOpen &&
+				cloneElement(body, {
+					...tooltipProps,
+					state,
+				})}
+		</span>
 	);
 }
 
-export default Object.assign(Tooltip, { Button, Body });
+interface TooltipBodyProps extends AriaTooltipProps {
+	children: React.ReactNode;
+	state?: TooltipTriggerState;
+	className?: string;
+}
+
+function Body({ state, className, ...props }: TooltipBodyProps) {
+	const { tooltipProps } = useTooltip(props, state);
+	return (
+		<span
+			{...mergeProps(props, tooltipProps)}
+			className={cn(
+				'absolute z-50 p-3 top-full mt-1',
+				'outline-hidden rounded-3xl text-sm w-48',
+				'bg-white dark:bg-headplane-950',
+				'text-black dark:text-white',
+				'shadow-lg dark:shadow-md rounded-xl',
+				'border border-headplane-100 dark:border-headplane-800',
+				className,
+			)}
+		>
+			{props.children}
+		</span>
+	);
+}
+
+export default Object.assign(Tooltip, {
+	Body,
+});

app/components/error-banner.tsx

@@ -0,0 +1,211 @@
+import { AlertCircle } from 'lucide-react';
+import { isRouteErrorResponse } from 'react-router';
+import {
+	isApiError,
+	isConnectionError,
+} from '~/server/headscale/api/error-client';
+import cn from '~/utils/cn';
+import Card from './Card';
+import Code from './Code';
+import Link from './Link';
+
+export function getErrorMessage(error: Error | unknown): {
+	title: string;
+	jsxMessage: React.ReactNode;
+} {
+	if (isRouteErrorResponse(error)) {
+		if (isApiError(error.data)) {
+			const { statusCode, rawData, data, requestUrl } = error.data;
+			if (statusCode >= 500) {
+				return {
+					title: 'Headscale API Error',
+					jsxMessage: (
+						<>
+							<Card.Text>
+								There was an error communicating with the Headscale API.
+								<br />
+								The server responded with a status code of{' '}
+								<strong>{statusCode}</strong>, indicating a server-side issue.
+								Please check the Headscale server status and try again later.
+							</Card.Text>
+							{(error.data.data != null || error.data.rawData != null) && (
+								<pre className="mt-2 p-2 bg-headplane-100 dark:bg-headplane-800 rounded-lg overflow-x-auto">
+									{error.data.data != null ? (
+										<code>{JSON.stringify(error.data.data, null, 2)}</code>
+									) : (
+										<code>{error.data.rawData}</code>
+									)}
+								</pre>
+							)}
+						</>
+					),
+				};
+			}
+
+			const authError =
+				error.data.statusCode === 401 || error.data.statusCode === 403;
+
+			return {
+				title: 'Invalid response from Headscale API',
+				jsxMessage: (
+					<>
+						<Card.Text className="leading-snug">
+							The Headscale API returned an unexpected response.
+							{authError ? (
+								<>
+									{' '}
+									The status code indicates an authentication error. Please
+									verify your API key and Headplane configuration.
+								</>
+							) : (
+								<>
+									{' '}
+									You may be using an unsupported version of Headscale or this
+									may be a bug.
+								</>
+							)}
+						</Card.Text>
+						<ul className="list-disc list-inside mt-2">
+							<li>
+								Request URL: <Code>{requestUrl}</Code>
+							</li>
+							<li>
+								Status Code:{' '}
+								<Code>
+									{/* @ts-expect-error */}
+									{data === null ? (
+										<>
+											{statusCode} {rawData}
+										</>
+									) : (
+										<>
+											{statusCode} {error.statusText}
+										</>
+									)}
+								</Code>
+							</li>
+						</ul>
+						<Card.Text className="text-lg font-semibold mt-4">
+							Error Details
+						</Card.Text>
+						<pre className="mt-2 p-2 bg-headplane-100 dark:bg-headplane-800 rounded-lg overflow-x-auto">
+							<code>{JSON.stringify(error.data, null, 2)}</code>
+						</pre>
+					</>
+				),
+			};
+		}
+
+		if (isConnectionError(error.data)) {
+			const { requestUrl, errorCode, errorMessage, extraData } = error.data;
+			return {
+				title: 'Cannot connect to Headscale API',
+				jsxMessage: (
+					<>
+						<Card.Text className="leading-snug">
+							Headplane was unable to reach the Headscale API. Please check your
+							network setup and configuration to ensure Headplane is able to
+							connect.
+						</Card.Text>
+						<Card.Text className="text-lg font-semibold mt-4">
+							Error Details
+						</Card.Text>
+						<pre className="mt-2 p-2 bg-headplane-100 dark:bg-headplane-800 rounded-lg overflow-x-auto">
+							{requestUrl}
+							<br />
+							{errorCode}: {errorMessage}
+							{extraData != null && (
+								<>
+									<br />
+									<br />
+									<code>{JSON.stringify(extraData, null, 2)}</code>
+								</>
+							)}
+						</pre>
+					</>
+				),
+			};
+		}
+
+		return {
+			title: `Error ${error.status}`,
+			jsxMessage: (
+				<>
+					There was an error processing your request.
+					<br />
+					Status Code: <strong>{error.status}</strong>
+					<br />
+					Status Text: <strong>{error.data}</strong>
+				</>
+			),
+		};
+	}
+
+	if (!(error instanceof Error)) {
+		return {
+			title: 'Unexpected Error',
+			jsxMessage: (
+				<>
+					<Card.Text>
+						An unexpected error occurred which is most likely a bug. Please
+						consider reporting filing an issue on the{' '}
+						<Link
+							name="Headplane GitHub"
+							to="https://github.com/tale/headplane/issues"
+						>
+							Headplane GitHub
+						</Link>{' '}
+						repository with the details below.
+					</Card.Text>
+					<Card.Text className="text-lg font-semibold mt-4">
+						Error Details
+					</Card.Text>
+					<pre className="mt-2 p-2 bg-headplane-100 dark:bg-headplane-800 rounded-lg overflow-x-auto">
+						<code>{JSON.stringify(error, null, 2)}</code>
+					</pre>
+				</>
+			),
+		};
+	}
+
+	// Traverse the error chain to find the root cause
+	let rootError = error;
+	if (error.cause != null) {
+		rootError = error.cause as Error;
+		while (rootError.cause != null) {
+			rootError = rootError.cause as Error;
+		}
+	}
+
+	// TODO: If we are aggregate, concat into a single message
+	if (rootError instanceof AggregateError) {
+		throw new Error('AggregateError handling not implemented yet');
+	}
+
+	return {
+		title:
+			rootError.name.length > 0 && rootError.name !== 'Error'
+				? `Error: ${rootError.name}`
+				: 'Error',
+		jsxMessage: rootError.message,
+	};
+}
+
+interface ErrorBannerProps {
+	error: unknown;
+	className?: string;
+}
+
+export function ErrorBanner({ error, className }: ErrorBannerProps) {
+	const { title, jsxMessage } = getErrorMessage(error);
+
+	return (
+		<Card className={cn('w-screen', className)} variant="flat">
+			<div className="flex items-center justify-between gap-4">
+				<Card.Title>{title}</Card.Title>
+				<AlertCircle className="w-6 h-6 mb-2 text-red-500" />
+			</div>
+			{jsxMessage}
+		</Card>
+	);
+}

app/components/tags/ExitNode.tsx

@@ -0,0 +1,32 @@
+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

@@ -0,0 +1,42 @@
+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

@@ -0,0 +1,20 @@
+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

@@ -0,0 +1,32 @@
+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

@@ -0,0 +1,21 @@
+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/entry.client.tsx

@@ -1,12 +1,12 @@
-import { startTransition, StrictMode } from "react";
-import { hydrateRoot } from "react-dom/client";
-import { HydratedRouter } from "react-router/dom";
+import { StrictMode, startTransition } from 'react';
+import { hydrateRoot } from 'react-dom/client';
+import { HydratedRouter } from 'react-router/dom';
 
 startTransition(() => {
-  hydrateRoot(
-    document,
-    <StrictMode>
-      <HydratedRouter />
-    </StrictMode>
-  );
+	hydrateRoot(
+		document,
+		<StrictMode>
+			<HydratedRouter />
+		</StrictMode>,
+	);
 });

app/entry.server.tsx

@@ -1,23 +1,19 @@
-import { PassThrough } from "node:stream";
-
-import type { AppLoadContext, EntryContext } from "react-router";
-import { createReadableStreamFromReadable } from "@react-router/node";
-import { ServerRouter } from "react-router";
-import { isbot } from "isbot";
 import type { RenderToPipeableStreamOptions } from "react-dom/server";
-import { renderToPipeableStream } from "react-dom/server";
-import { loadContext } from "~/utils/config/headplane";
+import type { AppLoadContext, EntryContext } from "react-router";
 
-loadContext();
+import { createReadableStreamFromReadable } from "@react-router/node";
+import { isbot } from "isbot";
+import { PassThrough } from "node:stream";
+import { renderToPipeableStream } from "react-dom/server";
+import { ServerRouter } from "react-router";
 
 export const streamTimeout = 5_000;
-
 export default function handleRequest(
   request: Request,
   responseStatusCode: number,
   responseHeaders: Headers,
   routerContext: EntryContext,
-  loadContext: AppLoadContext
+  _loadContext: AppLoadContext,
 ) {
   return new Promise((resolve, reject) => {
     let shellRendered = false;
@@ -26,9 +22,7 @@ export default function handleRequest(
     // Ensure requests from bots and SPA Mode renders wait for all content to load before responding
     // https://react.dev/reference/react-dom/server/renderToPipeableStream#waiting-for-all-content-to-load-for-crawlers-and-static-generation
     const readyOption: keyof RenderToPipeableStreamOptions =
-      (userAgent && isbot(userAgent)) || routerContext.isSpaMode
-        ? "onAllReady"
-        : "onShellReady";
+      (userAgent && isbot(userAgent)) || routerContext.isSpaMode ? "onAllReady" : "onShellReady";
 
     const { pipe, abort } = renderToPipeableStream(
       <ServerRouter context={routerContext} url={request.url} />,
@@ -44,7 +38,7 @@ export default function handleRequest(
             new Response(stream, {
               headers: responseHeaders,
               status: responseStatusCode,
-            })
+            }),
           );
 
           pipe(body);
@@ -61,7 +55,7 @@ export default function handleRequest(
             console.error(error);
           }
         },
-      }
+      },
     );
 
     // Abort the rendering stream after the `streamTimeout` so it has tine to

app/integration/docker.ts

@@ -1,149 +0,0 @@
-import { access, constants } from 'node:fs/promises';
-import { setTimeout } from 'node:timers/promises';
-
-import { Client } from 'undici';
-
-import { HeadscaleError, pull } from '~/utils/headscale';
-import log from '~/utils/log';
-
-import { createIntegration } from './integration';
-
-interface Context {
-	client: Client | undefined;
-	container: string | undefined;
-	maxAttempts: number;
-}
-
-export default createIntegration<Context>({
-	name: 'Docker',
-	context: {
-		client: undefined,
-		container: undefined,
-		maxAttempts: 10,
-	},
-	isAvailable: async (context) => {
-		// Check for the HEADSCALE_CONTAINER environment variable first
-		// to avoid unnecessary fetching of the Docker socket
-		log.debug('INTG', 'Checking Docker integration availability');
-		context.container = process.env.HEADSCALE_CONTAINER?.trim().toLowerCase();
-
-		if (!context.container || context.container.length === 0) {
-			log.error('INTG', 'Missing HEADSCALE_CONTAINER variable');
-			return false;
-		}
-
-		log.info('INTG', 'Using container: %s', context.container);
-		const path = process.env.DOCKER_SOCK ?? 'unix:///var/run/docker.sock';
-		let url: URL | undefined;
-
-		try {
-			url = new URL(path);
-		} catch {
-			log.error('INTG', 'Invalid Docker socket path: %s', path);
-			return false;
-		}
-
-		if (url.protocol !== 'tcp:' && url.protocol !== 'unix:') {
-			log.error('INTG', 'Invalid Docker socket protocol: %s', url.protocol);
-			return false;
-		}
-
-		// The API is available as an HTTP endpoint and this
-		// will simplify the fetching logic in undici
-		if (url.protocol === 'tcp:') {
-			// Apparently setting url.protocol doesn't work anymore?
-			const fetchU = url.href.replace(url.protocol, 'http:');
-
-			try {
-				log.info('INTG', 'Checking API: %s', fetchU);
-				await fetch(new URL('/v1.30/version', fetchU).href);
-			} catch (error) {
-				log.debug('INTG', 'Failed to connect to Docker API', error);
-				log.error('INTG', 'Failed to connect to Docker API');
-				return false;
-			}
-
-			context.client = new Client(fetchU);
-		}
-
-		// Check if the socket is accessible
-		if (url.protocol === 'unix:') {
-			try {
-				log.info('INTG', 'Checking socket: %s', url.pathname);
-				await access(url.pathname, constants.R_OK);
-			} catch (error) {
-				log.debug('INTG', 'Failed to access Docker socket: %s', error);
-				log.error('INTG', 'Failed to access Docker socket: %s', path);
-				return false;
-			}
-
-			context.client = new Client('http://localhost', {
-				socketPath: url.pathname,
-			});
-		}
-
-		return context.client !== undefined;
-	},
-
-	onConfigChange: async (context) => {
-		if (!context.client || !context.container) {
-			return;
-		}
-
-		log.info('INTG', 'Restarting Headscale via Docker');
-
-		let attempts = 0;
-		while (attempts <= context.maxAttempts) {
-			log.debug(
-				'INTG',
-				'Restarting container: %s (attempt %d)',
-				context.container,
-				attempts,
-			);
-
-			const response = await context.client.request({
-				method: 'POST',
-				path: `/v1.30/containers/${context.container}/restart`,
-			});
-
-			if (response.statusCode !== 204) {
-				if (attempts < context.maxAttempts) {
-					attempts++;
-					await setTimeout(1000);
-					continue;
-				}
-
-				const stringCode = response.statusCode.toString();
-				const body = await response.body.text();
-				throw new Error(`API request failed: ${stringCode} ${body}`);
-			}
-
-			break;
-		}
-
-		attempts = 0;
-		while (attempts <= context.maxAttempts) {
-			try {
-				log.debug('INTG', 'Checking Headscale status (attempt %d)', attempts);
-				await pull('v1', '');
-				return;
-			} catch (error) {
-				if (error instanceof HeadscaleError && error.status === 401) {
-					break;
-				}
-
-				if (error instanceof HeadscaleError && error.status === 404) {
-					break;
-				}
-
-				if (attempts < context.maxAttempts) {
-					attempts++;
-					await setTimeout(1000);
-					continue;
-				}
-
-				throw new Error(`Missed restart deadline for ${context.container}`);
-			}
-		}
-	},
-});

app/integration/index.ts

@@ -1,68 +0,0 @@
-import log from '~/utils/log';
-
-import dockerIntegration from './docker';
-import type { IntegrationFactory } from './integration';
-import kubernetesIntegration from './kubernetes';
-import procIntegration from './proc';
-
-export * from './integration';
-
-export async function loadIntegration() {
-	let integration = process.env.HEADSCALE_INTEGRATION?.trim().toLowerCase();
-
-	// Old HEADSCALE_CONTAINER variable upgrade path
-	// This ensures that when people upgrade from older versions of Headplane
-	// they don't explicitly need to define the new HEADSCALE_INTEGRATION
-	// variable that is needed to configure docker
-	if (!integration && process.env.HEADSCALE_CONTAINER) {
-		integration = 'docker';
-	}
-
-	if (!integration) {
-		log.info('INTG', 'No integration set with HEADSCALE_INTEGRATION');
-		return;
-	}
-
-	let integrationFactory: IntegrationFactory | undefined;
-	switch (integration.toLowerCase().trim()) {
-		case 'docker': {
-			integrationFactory = dockerIntegration;
-			break;
-		}
-
-		case 'proc':
-		case 'native':
-		case 'linux': {
-			integrationFactory = procIntegration;
-			break;
-		}
-
-		case 'kubernetes':
-		case 'k8s': {
-			integrationFactory = kubernetesIntegration;
-			break;
-		}
-
-		default: {
-			log.error('INTG', 'Unknown integration: %s', integration);
-			throw new Error(`Unknown integration: ${integration}`);
-		}
-	}
-
-	log.info('INTG', 'Loading integration: %s', integration);
-	try {
-		const res = await integrationFactory.isAvailable(
-			integrationFactory.context,
-		);
-		if (!res) {
-			log.error('INTG', 'Integration %s is not available', integration);
-			return;
-		}
-	} catch (error) {
-		log.error('INTG', 'Failed to load integration %s: %s', integration, error);
-		return;
-	}
-
-	log.info('INTG', 'Loaded integration: %s', integration);
-	return integrationFactory;
-}

app/integration/integration.ts

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

app/integration/kubernetes.ts

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

app/integration/proc.ts

@@ -1,81 +0,0 @@
-import { readdir, readFile } from 'node:fs/promises';
-import { platform } from 'node:os';
-import { join, resolve } from 'node:path';
-import { kill } from 'node:process';
-
-import log from '~/utils/log';
-
-import { createIntegration } from './integration';
-
-interface Context {
-	pid: number | undefined;
-}
-
-export default createIntegration<Context>({
-	name: 'Native Linux (/proc)',
-	context: {
-		pid: undefined,
-	},
-	isAvailable: async (context) => {
-		if (platform() !== 'linux') {
-			log.error('INTG', '/proc is only available on Linux');
-			return false;
-		}
-
-		log.debug('INTG', 'Checking /proc for Headscale process');
-		const dir = resolve('/proc');
-		try {
-			const subdirs = await readdir(dir);
-			const promises = subdirs.map(async (dir) => {
-				const pid = Number.parseInt(dir, 10);
-
-				if (Number.isNaN(pid)) {
-					return;
-				}
-
-				const path = join('/proc', dir, 'cmdline');
-				try {
-					log.debug('INTG', 'Reading %s', path);
-					const data = await readFile(path, 'utf8');
-					if (data.includes('headscale')) {
-						return pid;
-					}
-				} catch (error) {
-					log.error('INTG', 'Failed to read %s: %s', path, error);
-				}
-			});
-
-			const results = await Promise.allSettled(promises);
-			const pids = [];
-
-			for (const result of results) {
-				if (result.status === 'fulfilled' && result.value) {
-					pids.push(result.value);
-				}
-			}
-
-			log.debug('INTG', 'Found Headscale processes: %o', pids);
-			if (pids.length > 1) {
-				log.error(
-					'INTG',
-					'Found %d Headscale processes: %s',
-					pids.length,
-					pids.join(', '),
-				);
-				return false;
-			}
-
-			if (pids.length === 0) {
-				log.error('INTG', 'Could not find Headscale process');
-				return false;
-			}
-
-			context.pid = pids[0];
-			log.info('INTG', 'Found Headscale process with PID: %d', context.pid);
-			return true;
-		} catch {
-			log.error('INTG', 'Failed to read /proc');
-			return false;
-		}
-	},
-});

app/layouts/dashboard.tsx

@@ -1,42 +1,30 @@
-import { type LoaderFunctionArgs, redirect } from 'react-router';
-import { Outlet, useLoaderData } from 'react-router';
-import { useEffect } from 'react'
-
-import { ErrorPopup } from '~/components/Error';
-import Header from '~/components/Header';
-import { toast } from '~/components/Toaster';
-import Footer from '~/components/Footer';
-import Link from '~/components/Link';
-import { useLiveData } from '~/utils/useLiveData'
-import { cn } from '~/utils/cn';
-import { loadContext } from '~/utils/config/headplane';
-import { HeadscaleError, pull, healthcheck } from '~/utils/headscale';
-import { destroySession, getSession } from '~/utils/sessions.server';
-import { XCircleFillIcon } from '@primer/octicons-react';
+import { Outlet, redirect } from 'react-router';
+import { ErrorBanner } from '~/components/error-banner';
+import { pruneEphemeralNodes } from '~/server/db/pruner';
+import { isDataUnauthorizedError } from '~/server/headscale/api/error-client';
 import log from '~/utils/log';
+import type { Route } from './+types/dashboard';
 
-export async function loader({ request }: LoaderFunctionArgs) {
-	let healthy = false;
-	try {
-		healthy = await healthcheck();
-	} catch (error) {
-		log.debug('APIC', 'Healthcheck failed %o', error);
-	}
+export async function loader({ request, context, ...rest }: Route.LoaderArgs) {
+	const session = await context.sessions.auth(request);
+	const api = context.hsApi.getRuntimeClient(session.api_key);
 
-	// We shouldn't session invalidate if Headscale is down
+	// MARK: The session should stay valid if Headscale isn't healthy
+	const healthy = await api.isHealthy();
 	if (healthy) {
-		// We can assert because shell ensures this is set
-		const session = await getSession(request.headers.get('Cookie'));
-		const apiKey = session.get('hsApiKey')!;
-
 		try {
-			await pull('v1/apikey', apiKey);
+			await api.getApiKeys();
+			await pruneEphemeralNodes({ context, request, ...rest });
 		} catch (error) {
-			if (error instanceof HeadscaleError) {
-				log.debug('APIC', 'API Key validation failed %o', error);
+			if (isDataUnauthorizedError(error)) {
+				log.warn(
+					'auth',
+					'Logging out %s due to expired API key',
+					session.user.name,
+				);
 				return redirect('/login', {
 					headers: {
-						'Set-Cookie': await destroySession(session),
+						'Set-Cookie': await context.sessions.destroySession(),
 					},
 				});
 			}
@@ -45,33 +33,21 @@ export async function loader({ request }: LoaderFunctionArgs) {
 
 	return {
 		healthy,
-	}
+	};
 }
 
 export default function Layout() {
-	useLiveData({ interval: 3000 });
-	const { healthy } = useLoaderData<typeof loader>()
-
 	return (
-		<>
-			{!healthy ? (
-				<div className={cn(
-					'fixed bottom-0 right-0 z-50 w-fit h-14',
-					'flex flex-col justify-center gap-1',
-				)}>
-					<div className={cn(
-						'flex items-center gap-1.5 mr-1.5 py-2 px-1.5',
-						'border rounded-lg text-white bg-red-500',
-						'border-red-600 dark:border-red-400 shadow-sm',
-					)}>
-						<XCircleFillIcon className="w-4 h-4 text-white" />
-						Headscale is unreachable
-					</div>
-				</div>
-			) : undefined}
-			<main className="container mx-auto overscroll-contain mt-4 mb-24">
-				<Outlet />
-			</main>
-		</>
+		<main className="container mx-auto overscroll-contain mt-4 mb-24">
+			<Outlet />
+		</main>
+	);
+}
+
+export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
+	return (
+		<div className="w-fit mx-auto overscroll-contain my-24">
+			<ErrorBanner className="max-w-2xl" error={error} />
+		</div>
 	);
 }

app/layouts/shell.tsx

@@ -1,33 +1,110 @@
-import Header from '~/components/Header';
+import { eq } from 'drizzle-orm';
+import { CircleCheckIcon } from 'lucide-react';
+import { Outlet, redirect } from 'react-router';
+import Button from '~/components/Button';
+import Card from '~/components/Card';
 import Footer from '~/components/Footer';
-import { getSession } from '~/utils/sessions.server';
-import { loadContext } from '~/utils/config/headplane';
-import { useLoaderData, LoaderFunctionArgs, Outlet, redirect } from 'react-router';
+import Header from '~/components/Header';
+import { users } from '~/server/db/schema';
+import { Capabilities } from '~/server/web/roles';
+import toast from '~/utils/toast';
+import { Route } from './+types/shell';
 
 // This loads the bare minimum for the application to function
 // So we know that if context fails to load then well, oops?
-export async function loader({ request }: LoaderFunctionArgs) {
-	const session = await getSession(request.headers.get('Cookie'));
-	if (!session.has('hsApiKey')) {
-		return redirect('/login');
-	}
+export async function loader({ request, context }: Route.LoaderArgs) {
+	try {
+		const session = await context.sessions.auth(request);
+		if (
+			typeof context.oidc === 'object' &&
+			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);
 
-	const context = await loadContext();
-	return {
-		config: context.config,
-		url: context.headscalePublicUrl ?? context.headscaleUrl,
-		debug: context.debug,
-		user: session.get('user'),
-	};
+			if (!user?.onboarded) {
+				return redirect('/onboarding');
+			}
+		}
+
+		const api = context.hsApi.getRuntimeClient(session.api_key);
+		const check = await context.sessions.check(request, Capabilities.ui_access);
+		return {
+			config: context.hs.c,
+			url: context.config.headscale.public_url ?? context.config.headscale.url,
+			configAvailable: context.hs.readable(),
+			debug: context.config.debug,
+			user: session.user,
+			uiAccess: check,
+			access: {
+				ui: await context.sessions.check(request, Capabilities.ui_access),
+				dns: await context.sessions.check(request, Capabilities.read_network),
+				users: await context.sessions.check(request, Capabilities.read_users),
+				policy: await context.sessions.check(request, Capabilities.read_policy),
+				machines: await context.sessions.check(
+					request,
+					Capabilities.read_machines,
+				),
+				settings: await context.sessions.check(
+					request,
+					Capabilities.read_feature,
+				),
+			},
+			onboarding: request.url.endsWith('/onboarding'),
+			healthy: await api.isHealthy(),
+		};
+	} catch {
+		return redirect('/login', {
+			headers: {
+				'Set-Cookie': await context.sessions.destroySession(),
+			},
+		});
+	}
 }
 
-export default function Shell() {
-	const data = useLoaderData<typeof loader>();
+export default function Shell({ loaderData }: Route.ComponentProps) {
 	return (
 		<>
-			<Header {...data} />
-			<Outlet />
-			<Footer {...data} />
+			<Header {...loaderData} />
+			{/* Always show the outlet if we are onboarding */}
+			{(loaderData.onboarding ? true : loaderData.uiAccess) ? (
+				<Outlet />
+			) : (
+				<Card className="mx-auto w-fit mt-24">
+					<div className="flex items-center justify-between">
+						<Card.Title className="text-3xl mb-0">Connected</Card.Title>
+						<CircleCheckIcon className="w-10 h-10" />
+					</div>
+					<Card.Text className="my-4 text-lg">
+						Connect to Tailscale with your devices to access this Tailnet. Use
+						this command to help you get started:
+					</Card.Text>
+					<Button
+						className="flex text-md font-mono"
+						onPress={async () => {
+							await navigator.clipboard.writeText(
+								`tailscale up --login-server=${loaderData.url}`,
+							);
+
+							toast('Copied to clipboard');
+						}}
+					>
+						tailscale up --login-server={loaderData.url}
+					</Button>
+					<p className="text-xs mt-1 opacity-50 text-center">
+						Click this button to copy the command.
+					</p>
+					<p className="mt-4 text-sm opacity-50">
+						Your account does not have access to the UI. Please contact your
+						administrator if you believe this is a mistake.
+					</p>
+				</Card>
+			)}
+			<Footer {...loaderData} />
 		</>
-	)
+	);
 }

app/openapi-canonical-families.json

@@ -0,0 +1,6 @@
+{
+  "0.26.1": ["0.26.0", "0.26.1"],
+  "0.27.0": ["0.27.0"],
+  "0.27.1": ["0.27.1"],
+  "0.28.0": ["0.28.0"]
+}

app/openapi-operation-hashes.json

@@ -0,0 +1,135 @@
+{
+  "0.26.0": {
+    "GET /api/v1/apikey": "efe31b6dc980e158",
+    "POST /api/v1/apikey": "39953a96c1da5312",
+    "POST /api/v1/apikey/expire": "ca56add866802f17",
+    "DELETE /api/v1/apikey/{prefix}": "3f0125f7abe7abb1",
+    "POST /api/v1/debug/node": "204f9ae3f9f738c6",
+    "GET /api/v1/node": "8bb18b8c7cfb4f20",
+    "POST /api/v1/node/backfillips": "6da4d1d3922a8001",
+    "POST /api/v1/node/register": "539f7cb3a84d43d4",
+    "GET /api/v1/node/{nodeId}": "8a7da3d24dc82c37",
+    "DELETE /api/v1/node/{nodeId}": "f832f33d84fd3724",
+    "POST /api/v1/node/{nodeId}/approve_routes": "e6c22e46ad44903d",
+    "POST /api/v1/node/{nodeId}/expire": "ac9ffcd6243a9784",
+    "POST /api/v1/node/{nodeId}/rename/{newName}": "d355388ac934dc90",
+    "POST /api/v1/node/{nodeId}/tags": "b6a8296dcc2939b5",
+    "POST /api/v1/node/{nodeId}/user": "ae3a30b43ffd1922",
+    "GET /api/v1/policy": "d6c639be304cd3c0",
+    "PUT /api/v1/policy": "6cbe80bde771a388",
+    "GET /api/v1/preauthkey": "14db6a04f90d7a7e",
+    "POST /api/v1/preauthkey": "0b4308e049d4eb58",
+    "POST /api/v1/preauthkey/expire": "31f377a66d3a5c4f",
+    "GET /api/v1/user": "228831b58ccc5a17",
+    "POST /api/v1/user": "a4e1d889d7962da5",
+    "DELETE /api/v1/user/{id}": "3d553e4b74296884",
+    "POST /api/v1/user/{oldId}/rename/{newName}": "996c03ebf81576d7"
+  },
+  "0.26.1": {
+    "GET /api/v1/apikey": "efe31b6dc980e158",
+    "POST /api/v1/apikey": "39953a96c1da5312",
+    "POST /api/v1/apikey/expire": "ca56add866802f17",
+    "DELETE /api/v1/apikey/{prefix}": "3f0125f7abe7abb1",
+    "POST /api/v1/debug/node": "204f9ae3f9f738c6",
+    "GET /api/v1/node": "8bb18b8c7cfb4f20",
+    "POST /api/v1/node/backfillips": "6da4d1d3922a8001",
+    "POST /api/v1/node/register": "539f7cb3a84d43d4",
+    "GET /api/v1/node/{nodeId}": "8a7da3d24dc82c37",
+    "DELETE /api/v1/node/{nodeId}": "f832f33d84fd3724",
+    "POST /api/v1/node/{nodeId}/approve_routes": "e6c22e46ad44903d",
+    "POST /api/v1/node/{nodeId}/expire": "ac9ffcd6243a9784",
+    "POST /api/v1/node/{nodeId}/rename/{newName}": "d355388ac934dc90",
+    "POST /api/v1/node/{nodeId}/tags": "b6a8296dcc2939b5",
+    "POST /api/v1/node/{nodeId}/user": "ae3a30b43ffd1922",
+    "GET /api/v1/policy": "d6c639be304cd3c0",
+    "PUT /api/v1/policy": "6cbe80bde771a388",
+    "GET /api/v1/preauthkey": "14db6a04f90d7a7e",
+    "POST /api/v1/preauthkey": "0b4308e049d4eb58",
+    "POST /api/v1/preauthkey/expire": "31f377a66d3a5c4f",
+    "GET /api/v1/user": "228831b58ccc5a17",
+    "POST /api/v1/user": "a4e1d889d7962da5",
+    "DELETE /api/v1/user/{id}": "3d553e4b74296884",
+    "POST /api/v1/user/{oldId}/rename/{newName}": "996c03ebf81576d7"
+  },
+  "0.27.0": {
+    "GET /api/v1/apikey": "efe31b6dc980e158",
+    "POST /api/v1/apikey": "39953a96c1da5312",
+    "POST /api/v1/apikey/expire": "ca56add866802f17",
+    "DELETE /api/v1/apikey/{prefix}": "3f0125f7abe7abb1",
+    "POST /api/v1/debug/node": "204f9ae3f9f738c6",
+    "GET /api/v1/health": "5e447272e72b2e5f",
+    "GET /api/v1/node": "8bb18b8c7cfb4f20",
+    "POST /api/v1/node/backfillips": "6da4d1d3922a8001",
+    "POST /api/v1/node/register": "539f7cb3a84d43d4",
+    "GET /api/v1/node/{nodeId}": "8a7da3d24dc82c37",
+    "DELETE /api/v1/node/{nodeId}": "f832f33d84fd3724",
+    "POST /api/v1/node/{nodeId}/approve_routes": "e6c22e46ad44903d",
+    "POST /api/v1/node/{nodeId}/expire": "ac9ffcd6243a9784",
+    "POST /api/v1/node/{nodeId}/rename/{newName}": "d355388ac934dc90",
+    "POST /api/v1/node/{nodeId}/tags": "b6a8296dcc2939b5",
+    "POST /api/v1/node/{nodeId}/user": "ae3a30b43ffd1922",
+    "GET /api/v1/policy": "d6c639be304cd3c0",
+    "PUT /api/v1/policy": "6cbe80bde771a388",
+    "GET /api/v1/preauthkey": "14db6a04f90d7a7e",
+    "POST /api/v1/preauthkey": "0b4308e049d4eb58",
+    "POST /api/v1/preauthkey/expire": "31f377a66d3a5c4f",
+    "GET /api/v1/user": "228831b58ccc5a17",
+    "POST /api/v1/user": "a4e1d889d7962da5",
+    "DELETE /api/v1/user/{id}": "3d553e4b74296884",
+    "POST /api/v1/user/{oldId}/rename/{newName}": "996c03ebf81576d7"
+  },
+  "0.27.1": {
+    "GET /api/v1/apikey": "efe31b6dc980e158",
+    "POST /api/v1/apikey": "39953a96c1da5312",
+    "POST /api/v1/apikey/expire": "ca56add866802f17",
+    "DELETE /api/v1/apikey/{prefix}": "3f0125f7abe7abb1",
+    "POST /api/v1/debug/node": "204f9ae3f9f738c6",
+    "GET /api/v1/health": "5e447272e72b2e5f",
+    "GET /api/v1/node": "8bb18b8c7cfb4f20",
+    "POST /api/v1/node/backfillips": "6da4d1d3922a8001",
+    "POST /api/v1/node/register": "539f7cb3a84d43d4",
+    "GET /api/v1/node/{nodeId}": "8a7da3d24dc82c37",
+    "DELETE /api/v1/node/{nodeId}": "f832f33d84fd3724",
+    "POST /api/v1/node/{nodeId}/approve_routes": "e6c22e46ad44903d",
+    "POST /api/v1/node/{nodeId}/expire": "53efc8e2017c16ae",
+    "POST /api/v1/node/{nodeId}/rename/{newName}": "d355388ac934dc90",
+    "POST /api/v1/node/{nodeId}/tags": "b6a8296dcc2939b5",
+    "POST /api/v1/node/{nodeId}/user": "ae3a30b43ffd1922",
+    "GET /api/v1/policy": "d6c639be304cd3c0",
+    "PUT /api/v1/policy": "6cbe80bde771a388",
+    "GET /api/v1/preauthkey": "14db6a04f90d7a7e",
+    "POST /api/v1/preauthkey": "0b4308e049d4eb58",
+    "POST /api/v1/preauthkey/expire": "31f377a66d3a5c4f",
+    "GET /api/v1/user": "228831b58ccc5a17",
+    "POST /api/v1/user": "a4e1d889d7962da5",
+    "DELETE /api/v1/user/{id}": "3d553e4b74296884",
+    "POST /api/v1/user/{oldId}/rename/{newName}": "996c03ebf81576d7"
+  },
+  "0.28.0": {
+    "GET /api/v1/apikey": "efe31b6dc980e158",
+    "POST /api/v1/apikey": "39953a96c1da5312",
+    "POST /api/v1/apikey/expire": "ca56add866802f17",
+    "DELETE /api/v1/apikey/{prefix}": "b10ca7d2750405b2",
+    "POST /api/v1/debug/node": "204f9ae3f9f738c6",
+    "GET /api/v1/health": "5e447272e72b2e5f",
+    "GET /api/v1/node": "8bb18b8c7cfb4f20",
+    "POST /api/v1/node/backfillips": "6da4d1d3922a8001",
+    "POST /api/v1/node/register": "539f7cb3a84d43d4",
+    "GET /api/v1/node/{nodeId}": "8a7da3d24dc82c37",
+    "DELETE /api/v1/node/{nodeId}": "f832f33d84fd3724",
+    "POST /api/v1/node/{nodeId}/approve_routes": "e6c22e46ad44903d",
+    "POST /api/v1/node/{nodeId}/expire": "53efc8e2017c16ae",
+    "POST /api/v1/node/{nodeId}/rename/{newName}": "d355388ac934dc90",
+    "POST /api/v1/node/{nodeId}/tags": "b6a8296dcc2939b5",
+    "GET /api/v1/policy": "d6c639be304cd3c0",
+    "PUT /api/v1/policy": "6cbe80bde771a388",
+    "GET /api/v1/preauthkey": "8428b44e3a821e9e",
+    "DELETE /api/v1/preauthkey": "f05ea1bc8ad89a09",
+    "POST /api/v1/preauthkey": "0b4308e049d4eb58",
+    "POST /api/v1/preauthkey/expire": "31f377a66d3a5c4f",
+    "GET /api/v1/user": "228831b58ccc5a17",
+    "POST /api/v1/user": "a4e1d889d7962da5",
+    "DELETE /api/v1/user/{id}": "3d553e4b74296884",
+    "POST /api/v1/user/{oldId}/rename/{newName}": "996c03ebf81576d7"
+  }
+}

app/root.tsx

@@ -1,13 +1,21 @@
-import type { LoaderFunctionArgs, LinksFunction, MetaFunction } from 'react-router';
-import { Links, Meta, Outlet, Scripts, ScrollRestoration, useNavigation } from 'react-router';
-import { loadContext } from '~/utils/config/headplane';
-
-import { ProgressBar } from 'react-aria-components';
-import { ErrorPopup } from '~/components/Error';
-// TODO: Make this a default export
-import { Toaster } from '~/components/Toaster';
+import type { LinksFunction, MetaFunction } from 'react-router';
+import {
+	Links,
+	Meta,
+	Outlet,
+	Scripts,
+	ScrollRestoration,
+	useNavigation,
+} from 'react-router';
+import '@fontsource-variable/inter';
+import { ExternalScripts } from 'remix-utils/external-scripts';
+import ProgressBar from '~/components/ProgressBar';
+import ToastProvider from '~/components/ToastProvider';
 import stylesheet from '~/tailwind.css?url';
-import { cn } from '~/utils/cn';
+import { LiveDataProvider } from '~/utils/live-data';
+import { useToastQueue } from '~/utils/toast';
+import type { Route } from './+types/root';
+import { ErrorBanner } from './components/error-banner';
 
 export const meta: MetaFunction = () => [
 	{ title: 'Headplane' },
@@ -22,26 +30,39 @@ export const links: LinksFunction = () => [
 ];
 
 export function Layout({ children }: { readonly children: React.ReactNode }) {
+	const toastQueue = useToastQueue();
+
+	// LiveDataProvider is wrapped at the top level since dialogs and things
+	// that control its state are usually open in portal containers which
+	// are not a part of the normal React tree.
 	return (
-		<html lang="en">
-			<head>
-				<meta charSet="utf-8" />
-				<meta name="viewport" content="width=device-width, initial-scale=1" />
-				<Meta />
-				<Links />
-			</head>
-			<body className="overscroll-none dark:bg-ui-950 dark:text-ui-50">
-				{children}
-				<Toaster />
-				<ScrollRestoration />
-				<Scripts />
-			</body>
-		</html>
+		<LiveDataProvider>
+			<html lang="en">
+				<head>
+					<meta charSet="utf-8" />
+					<meta content="width=device-width, initial-scale=1" name="viewport" />
+					<Meta />
+					<Links />
+					<link href="favicon.ico" rel="icon" />
+				</head>
+				<body className="overscroll-none overflow-x-hidden dark:bg-headplane-900 dark:text-headplane-50">
+					{children}
+					<ToastProvider queue={toastQueue} />
+					<ScrollRestoration />
+					<Scripts />
+					<ExternalScripts />
+				</body>
+			</html>
+		</LiveDataProvider>
 	);
 }
 
-export function ErrorBoundary() {
-	return <ErrorPopup />;
+export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
+	return (
+		<div className="w-screen h-screen flex items-center justify-center p-4">
+			<ErrorBanner className="max-w-2xl" error={error} />
+		</div>
+	);
 }
 
 export default function App() {
@@ -49,16 +70,8 @@ export default function App() {
 
 	return (
 		<>
-			<ProgressBar aria-label="Loading...">
-				<div
-					className={cn(
-						'fixed top-0 left-0 z-50 w-1/2 h-1',
-						'bg-blue-500 dark:bg-blue-400 opacity-0',
-						nav.state === 'loading' && 'animate-loading opacity-100',
-					)}
-				/>
-			</ProgressBar>
+			<ProgressBar isVisible={nav.state === 'loading'} />
 			<Outlet />
 		</>
-	)
+	);
 }

app/routes.ts

@@ -5,15 +5,21 @@ export default [
 	index('routes/util/redirect.ts'),
 	route('/healthz', 'routes/util/healthz.ts'),
 
+	// API Routes
+	...prefix('/api', [route('/info', 'routes/util/info.ts')]),
+
 	// Authentication Routes
-	route('/login', 'routes/auth/login.tsx'),
+	route('/login', 'routes/auth/login/page.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
 	layout('layouts/shell.tsx', [
+		route('/onboarding', 'routes/users/onboarding.tsx'),
+		route('/onboarding/skip', 'routes/users/onboarding-skip.tsx'),
 		layout('layouts/dashboard.tsx', [
 			...prefix('/machines', [
 				index('routes/machines/overview.tsx'),
@@ -21,12 +27,13 @@ export default [
 			]),
 
 			route('/users', 'routes/users/overview.tsx'),
-			route('/acls', 'routes/acls/editor.tsx'),
+			route('/acls', 'routes/acls/overview.tsx'),
 			route('/dns', 'routes/dns/overview.tsx'),
 
 			...prefix('/settings', [
 				index('routes/settings/overview.tsx'),
-				route('/auth-keys', 'routes/settings/auth-keys.tsx'),
+				route('/auth-keys', 'routes/settings/auth-keys/overview.tsx'),
+				route('/restrictions', 'routes/settings/restrictions/overview.tsx'),
 				// route('/local-agent', 'routes/settings/local-agent.tsx'),
 			]),
 		]),

app/routes/acls/acl-action.ts

@@ -0,0 +1,139 @@
+import { data } from 'react-router';
+import { isDataWithApiError } from '~/server/headscale/api/error-client';
+import { Capabilities } from '~/server/web/roles';
+import type { Route } from './+types/overview';
+
+// We only check capabilities here and assume it is writable
+// If it isn't, it'll gracefully error anyways, since this means some
+// fishy client manipulation is happening.
+export async function aclAction({ request, context }: Route.ActionArgs) {
+	const session = await context.sessions.auth(request);
+	const check = await context.sessions.check(
+		request,
+		Capabilities.write_policy,
+	);
+	if (!check) {
+		throw data('You do not have permission to write to the ACL policy', {
+			status: 403,
+		});
+	}
+
+	// Try to write to the ACL policy via the API or via config file (TODO).
+	const formData = await request.formData();
+	const policyData = formData.get('policy')?.toString();
+	if (!policyData) {
+		throw data('Missing `policy` in the form data.', {
+			status: 400,
+		});
+	}
+
+	const api = context.hsApi.getRuntimeClient(session.api_key);
+	try {
+		const { policy, updatedAt } = await api.setPolicy(policyData);
+		return data({
+			success: true,
+			error: undefined,
+			policy,
+			updatedAt,
+		});
+	} catch (error) {
+		if (isDataWithApiError(error)) {
+			const rawData = error.data.rawData;
+			// https://github.com/juanfont/headscale/blob/c4600346f9c29b514dc9725ac103efb9d0381f23/hscontrol/types/policy.go#L11
+			if (rawData.includes('update is disabled')) {
+				throw data('Policy is not writable', { status: 403 });
+			}
+
+			const message =
+				error.data.data != null &&
+				'message' in error.data.data &&
+				typeof error.data.data.message === 'string'
+					? error.data.data.message
+					: undefined;
+
+			if (message == null) {
+				throw error;
+			}
+
+			// Starting in Headscale 0.27.0 the ACLs parsing was changed meaning
+			// we need to reference other error messages based on API version.
+			if (context.hsApi.clientHelpers.isAtleast('0.27.0')) {
+				if (message.includes('parsing HuJSON:')) {
+					const cutIndex = message.indexOf('parsing HuJSON:');
+					const trimmed =
+						cutIndex > -1
+							? `Syntax error: ${message.slice(cutIndex + 16).trim()}`
+							: message;
+
+					return data(
+						{
+							success: false,
+							error: trimmed,
+							policy: undefined,
+							updatedAt: undefined,
+						},
+						400,
+					);
+				}
+
+				if (message.includes('parsing policy from bytes:')) {
+					const cutIndex = message.indexOf('parsing policy from bytes:');
+					const trimmed =
+						cutIndex > -1
+							? `Syntax error: ${message.slice(cutIndex + 26).trim()}`
+							: message;
+
+					return data(
+						{
+							success: false,
+							error: trimmed,
+							policy: undefined,
+							updatedAt: undefined,
+						},
+						400,
+					);
+				}
+			} else {
+				// Pre-0.27.0 error messages
+				if (message.includes('parsing hujson')) {
+					const cutIndex = message.indexOf('err: hujson:');
+					const trimmed =
+						cutIndex > -1
+							? `Syntax error: ${message.slice(cutIndex + 12)}`
+							: message;
+
+					return data(
+						{
+							success: false,
+							error: trimmed,
+							policy: undefined,
+							updatedAt: undefined,
+						},
+						400,
+					);
+				}
+
+				if (message.includes('unmarshalling policy')) {
+					const cutIndex = message.indexOf('err:');
+					const trimmed =
+						cutIndex > -1
+							? `Syntax error: ${message.slice(cutIndex + 5)}`
+							: message;
+
+					return data(
+						{
+							success: false,
+							error: trimmed,
+							policy: undefined,
+							updatedAt: undefined,
+						},
+						400,
+					);
+				}
+			}
+		}
+
+		// Otherwise, this is a Headscale error that we can just propagate.
+		throw error;
+	}
+}

app/routes/acls/acl-loader.ts

@@ -0,0 +1,48 @@
+import { data } from 'react-router';
+import { isDataWithApiError } from '~/server/headscale/api/error-client';
+import { Capabilities } from '~/server/web/roles';
+import type { Route } from './+types/overview';
+
+// The logic for deciding policy factors is very complicated because
+// there are so many factors that need to be accounted for:
+// 1. Does the user have permission to read the policy?
+// 2. Does the user have permission to write to the policy?
+// 3. Is the Headscale policy in file or database mode?
+//    If database, we can read/write easily via the API.
+//    If in file mode, we can only write if context.config is available.
+export async function aclLoader({ request, context }: Route.LoaderArgs) {
+	const session = await context.sessions.auth(request);
+	const check = await context.sessions.check(request, Capabilities.read_policy);
+	if (!check) {
+		throw data('You do not have permission to read the ACL policy.', {
+			status: 403,
+		});
+	}
+
+	const flags = {
+		// Can the user write to the ACL policy
+		access: await context.sessions.check(request, Capabilities.write_policy),
+		writable: false,
+		policy: '',
+	};
+
+	// Try to load the ACL policy from the API.
+	const api = context.hsApi.getRuntimeClient(session.api_key);
+	try {
+		const { policy, updatedAt } = await api.getPolicy();
+		flags.writable = updatedAt !== null;
+		flags.policy = policy;
+		return flags;
+	} catch (error) {
+		if (isDataWithApiError(error)) {
+			// https://github.com/juanfont/headscale/blob/c4600346f9c29b514dc9725ac103efb9d0381f23/hscontrol/types/policy.go#L10
+			if (error.data.rawData.includes('acl policy not found')) {
+				flags.policy = '';
+				flags.writable = true;
+				return flags;
+			}
+		}
+
+		throw error;
+	}
+}

app/routes/acls/components/cm.client.tsx

@@ -1,13 +1,11 @@
-import React, { useEffect } from 'react';
-import Merge from 'react-codemirror-merge';
-import CodeMirror from '@uiw/react-codemirror';
 import * as shopify from '@shopify/lang-jsonc';
-import { ClientOnly } from 'remix-utils/client-only';
+import { xcodeDark, xcodeLight } from '@uiw/codemirror-theme-xcode';
+import CodeMirror from '@uiw/react-codemirror';
+import { BookCopy, CircleX } from 'lucide-react';
+import { useEffect, useState } from 'react';
+import Merge from 'react-codemirror-merge';
 import { ErrorBoundary } from 'react-error-boundary';
-import { githubDark, githubLight } from '@uiw/codemirror-theme-github';
-import { useState } from 'react';
-import { cn } from '~/utils/cn';
-
+import { ClientOnly } from 'remix-utils/client-only';
 import Fallback from './fallback';
 
 interface EditorProps {
@@ -16,6 +14,7 @@ interface EditorProps {
 	onChange: (value: string) => void;
 }
 
+// TODO: Remove ClientOnly
 export function Editor(props: EditorProps) {
 	const [light, setLight] = useState(false);
 	useEffect(() => {
@@ -27,39 +26,30 @@ export function Editor(props: EditorProps) {
 	});
 
 	return (
-		<div
-			className={cn(
-				'border border-gray-200 dark:border-gray-700',
-				'rounded-b-lg rounded-tr-lg mb-2 z-10 overflow-x-hidden',
-			)}
-		>
-			<div className="overflow-y-scroll h-editor text-sm">
-				<ErrorBoundary
-					fallback={
-						<p
-							className={cn(
-								'w-full h-full flex items-center justify-center',
-								'text-gray-400 dark:text-gray-500 text-xl',
-							)}
-						>
-							Failed to load the editor.
-						</p>
-					}
-				>
-					<ClientOnly fallback={<Fallback acl={props.value} />}>
-						{() => (
-							<CodeMirror
-								value={props.value}
-								height="100%"
-								extensions={[shopify.jsonc()]}
-								style={{ height: '100%' }}
-								theme={light ? githubLight : githubDark}
-								onChange={(value) => props.onChange(value)}
-							/>
-						)}
-					</ClientOnly>
-				</ErrorBoundary>
-			</div>
+		<div className="overflow-y-scroll h-editor text-sm">
+			<ErrorBoundary
+				fallback={
+					<div className="flex flex-col items-center gap-2.5 py-8">
+						<CircleX />
+						<p className="text-lg font-semibold">Failed to load the editor.</p>
+					</div>
+				}
+			>
+				<ClientOnly fallback={<Fallback acl={props.value} />}>
+					{() => (
+						<CodeMirror
+							editable={!props.isDisabled}
+							extensions={[shopify.jsonc()]} // Allow editing unless disabled
+							height="100%" // Use readOnly if disabled
+							onChange={(value) => props.onChange(value)}
+							readOnly={props.isDisabled}
+							style={{ height: '100%' }}
+							theme={light ? xcodeLight : xcodeDark}
+							value={props.value}
+						/>
+					)}
+				</ClientOnly>
+			</ErrorBoundary>
 		</div>
 	);
 }
@@ -80,57 +70,43 @@ export function Differ(props: DifferProps) {
 	});
 
 	return (
-		<div
-			className={cn(
-				'border border-gray-200 dark:border-gray-700',
-				'rounded-b-lg rounded-tr-lg mb-2 z-10 overflow-x-hidden',
-			)}
-		>
-			<div className="overflow-y-scroll h-editor text-sm">
-				{props.left === props.right ? (
-					<p
-						className={cn(
-							'w-full h-full flex items-center justify-center',
-							'text-gray-400 dark:text-gray-500 text-xl',
-						)}
-					>
-						No changes
-					</p>
-				) : (
+		<div className="text-sm">
+			{props.left === props.right ? (
+				<div className="flex flex-col items-center gap-2.5 py-8">
+					<BookCopy />
+					<p className="text-lg font-semibold">No changes</p>
+				</div>
+			) : (
+				<div className="h-editor overflow-y-scroll">
 					<ErrorBoundary
 						fallback={
-							<p
-								className={cn(
-									'w-full h-full flex items-center justify-center',
-									'text-gray-400 dark:text-gray-500 text-xl',
-								)}
-							>
-								Failed to load the editor.
-							</p>
+							<div className="flex flex-col items-center gap-2.5 py-8">
+								<CircleX />
+								<p className="text-lg font-semibold">
+									Failed to load the editor.
+								</p>
+							</div>
 						}
 					>
 						<ClientOnly fallback={<Fallback acl={props.right} />}>
 							{() => (
-								<Merge
-									orientation="a-b"
-									theme={light ? githubLight : githubDark}
-								>
+								<Merge orientation="a-b" theme={light ? xcodeLight : xcodeDark}>
 									<Merge.Original
+										extensions={[shopify.jsonc()]}
 										readOnly
 										value={props.left}
-										extensions={[shopify.jsonc()]}
 									/>
 									<Merge.Modified
+										extensions={[shopify.jsonc()]}
 										readOnly
 										value={props.right}
-										extensions={[shopify.jsonc()]}
 									/>
 								</Merge>
 							)}
 						</ClientOnly>
 					</ErrorBoundary>
-				)}
-			</div>
+				</div>
+			)}
 		</div>
 	);
 }

app/routes/acls/components/error.tsx

@@ -1,25 +0,0 @@
-import { cn } from '~/utils/cn';
-import { AlertIcon } from '@primer/octicons-react';
-
-import Card from '~/components/Card';
-import Code from '~/components/Code';
-
-interface Props {
-	message: string;
-}
-
-export function ErrorView({ message }: Props) {
-	return (
-		<Card variant="flat" className="max-w-full mb-4">
-			<div className="flex items-center justify-between">
-				<Card.Title className="text-xl mb-0">Error</Card.Title>
-				<AlertIcon className="w-8 h-8 text-red-500" />
-			</div>
-			<Card.Text className="mt-4">
-				Could not apply changes to your ACL policy due to the following error:
-				<br />
-				<Code>{message}</Code>
-			</Card.Text>
-		</Card>
-	);
-}

app/routes/acls/components/fallback.tsx

@@ -1,5 +1,4 @@
-import Spinner from '~/components/Spinner';
-import { cn } from '~/utils/cn';
+import cn from '~/utils/cn';
 
 interface Props {
 	readonly acl: string;
@@ -7,16 +6,29 @@ interface Props {
 
 export default function Fallback({ acl }: Props) {
 	return (
-		<div className="inline-block relative w-full h-editor">
-			<Spinner className="w-4 h-4 absolute p-2" />
-			<textarea
-				readOnly
+		<div className="relative w-full h-editor flex">
+			<div
 				className={cn(
-					'w-full h-editor font-mono resize-none',
-					'text-sm text-gray-600 dark:text-gray-300',
-					'bg-ui-100 dark:bg-ui-800',
-					'pl-10 pt-1 leading-snug',
+					'h-full w-8 flex justify-center p-1',
+					'border-r border-headscale-400 dark:border-headscale-800',
 				)}
+			>
+				<div
+					aria-hidden
+					className={cn(
+						'h-5 w-5 animate-spin rounded-full',
+						'border-headplane-900 dark:border-headplane-100',
+						'border-2 border-t-transparent dark:border-t-transparent',
+					)}
+				/>
+			</div>
+			<textarea
+				className={cn(
+					'w-full h-editor font-mono resize-none text-sm',
+					'bg-headplane-50 dark:bg-headplane-950 opacity-60',
+					'pl-1 pt-1 leading-snug',
+				)}
+				readOnly
 				value={acl}
 			/>
 		</div>

app/routes/acls/components/unavailable.tsx

@@ -1,39 +0,0 @@
-import { cn } from '~/utils/cn';
-import { AlertIcon } from '@primer/octicons-react';
-
-import Code from '~/components/Code';
-import Card from '~/components/Card';
-
-interface Props {
-	mode: 'file' | 'database';
-}
-
-export function Unavailable({ mode }: Props) {
-	return (
-		<Card variant="flat" className="max-w-prose mt-12">
-			<div className="flex items-center justify-between">
-				<Card.Title className="text-xl mb-0">ACL Policy Unavailable</Card.Title>
-				<AlertIcon className="w-8 h-8 text-red-500" />
-			</div>
-			<Card.Text className="mt-4">
-				Unable to load a valid ACL policy configuration. This is most likely due
-				to a misconfiguration in your Headscale configuration file.
-			</Card.Text>
-
-			{mode !== 'file' ? (
-				<p className="mt-4 text-sm">
-					According to your configuration, the ACL policy mode is set to{' '}
-					<Code>file</Code> but the ACL file is not available. Ensure that the{' '}
-					<Code>policy.path</Code> is set to a valid path in your Headscale
-					configuration.
-				</p>
-			) : (
-				<p className="mt-4 text-sm">
-					In order to fully utilize the ACL management features of Headplane,
-					please set <Code>policy.mode</Code> to either <Code>file</Code> or{' '}
-					<Code>database</Code> in your Headscale configuration.
-				</p>
-			)}
-		</Card>
-	);
-}

app/routes/acls/editor.tsx

@@ -1,352 +0,0 @@
-import {
-	BeakerIcon,
-	EyeIcon,
-	IssueDraftIcon,
-	PencilIcon,
-} from '@primer/octicons-react';
-import type { ActionFunctionArgs, LoaderFunctionArgs } from 'react-router';
-import { useLoaderData, useRevalidator, useFetcher } from 'react-router';
-//import { useDebounceFetcher } from 'remix-utils/use-debounce-fetcher';
-import { useEffect, useState, useMemo } from 'react';
-import { Tab, TabList, TabPanel, Tabs } from 'react-aria-components';
-import { setTimeout } from 'node:timers/promises';
-
-import Button from '~/components/Button';
-import Code from '~/components/Code';
-import Link from '~/components/Link';
-import Notice from '~/components/Notice';
-import Spinner from '~/components/Spinner';
-import { toast } from '~/components/Toaster';
-import { cn } from '~/utils/cn';
-import { loadContext } from '~/utils/config/headplane';
-import { loadConfig } from '~/utils/config/headscale';
-import { HeadscaleError, pull, put } from '~/utils/headscale';
-import { getSession } from '~/utils/sessions.server';
-import { send } from '~/utils/res';
-import log from '~/utils/log';
-
-import { Editor, Differ } from './components/cm.client';
-import { Unavailable } from './components/unavailable';
-import { ErrorView } from './components/error';
-
-export async function loader({ request }: LoaderFunctionArgs) {
-	const session = await getSession(request.headers.get('Cookie'));
-
-	// The way policy is handled in 0.23 of Headscale and later is verbose.
-	// The 2 ACL policy modes are either the database one or file one
-	//
-	// File: The ACL policy is readonly to the API and manually edited
-	// Database: The ACL policy is read/write to the API
-	//
-	// To determine if we first have an ACL policy available we need to check
-	// if fetching the v1/policy route gives us a 500 status code or a 200.
-	//
-	// 500 can mean many different things here unfortunately:
-	// - In file based that means the file is not accessible
-	// - In database mode this can mean that we have never set an ACL policy
-	// - In database mode this can mean that the ACL policy is not available
-	// - A general server error may have occurred
-	//
-	// Unfortunately the server errors are not very descriptive so we have to
-	// do some silly guesswork here. If we are running in an integration mode
-	// and have the Headscale configuration available to us, our assumptions
-	// can be more accurate, otherwise we just HAVE to assume that the ACL
-	// policy has never been set.
-	//
-	// We can do damage control by checking for write access and if we are not
-	// able to PUT an ACL policy on the v1/policy route, we can already know
-	// that the policy is at the very-least readonly or not available.
-	const context = await loadContext();
-	let modeGuess = 'database'; // Assume database mode
-	if (context.config.read) {
-		const config = await loadConfig();
-		modeGuess = config.policy?.mode ?? 'database';
-	}
-
-	// Attempt to load the policy, for both the frontend and for checking
-	// if we are able to write to the policy for write access
-	try {
-		const { policy } = await pull<{ policy: string }>(
-			'v1/policy',
-			session.get('hsApiKey')!,
-		);
-
-		let write = false; // On file mode we already know it's readonly
-		if (modeGuess === 'database' && policy.length > 0) {
-			try {
-				await put('v1/policy', session.get('hsApiKey')!, {
-					policy: policy,
-				});
-
-				write = true;
-			} catch (error) {
-				write = false;
-				log.debug('APIC', 'Failed to write to ACL policy with error %s', error);
-			}
-		}
-
-		return {
-			read: true,
-			write,
-			mode: modeGuess,
-			policy,
-		};
-	} catch {
-		// If we are explicit on file mode then this is the end of the road
-		if (modeGuess === 'file') {
-			return {
-				read: false,
-				write: false,
-				mode: modeGuess,
-				policy: null,
-			};
-		}
-
-		// Assume that we have write access otherwise?
-		// This is sort of a brittle assumption to make but we don't want
-		// to create a default policy if we don't have to.
-		return {
-			read: true,
-			write: true,
-			mode: modeGuess,
-			policy: null,
-		};
-	}
-}
-
-export async function action({ request }: ActionFunctionArgs) {
-	const session = await getSession(request.headers.get('Cookie'));
-	if (!session.has('hsApiKey')) {
-		return send({ success: false, error: null }, 401);
-	}
-
-	try {
-		const { acl } = (await request.json()) as { acl: string };
-		const { policy } = await put<{ policy: string }>(
-			'v1/policy',
-			session.get('hsApiKey')!,
-			{
-				policy: acl,
-			},
-		);
-
-		return { success: true, policy, error: null };
-	} catch (error) {
-		log.debug('APIC', 'Failed to update ACL policy with error %s', error);
-
-		// @ts-ignore: Shut UP we know it's a string most of the time
-		const text = JSON.parse(error.message);
-		return send(
-			{ success: false, error: text.message },
-			{
-				status: error instanceof HeadscaleError ? error.status : 500,
-			},
-		);
-	}
-
-	return { success: true, error: null };
-}
-
-export default function Page() {
-	const data = useLoaderData<typeof loader>();
-	const fetcher = useFetcher<typeof action>();
-	const revalidator = useRevalidator();
-
-	const [acl, setAcl] = useState(data.policy ?? '');
-	const [toasted, setToasted] = useState(false);
-
-	useEffect(() => {
-		if (!fetcher.data || toasted) {
-			return;
-		}
-
-		// @ts-ignore: useDebounceFetcher is not typed correctly
-		if (fetcher.data.success) {
-			toast('Updated tailnet ACL policy');
-		} else {
-			toast('Failed to update tailnet ACL policy');
-		}
-
-		setToasted(true);
-		if (revalidator.state === 'idle') {
-			revalidator.revalidate();
-		}
-	}, [fetcher.data, toasted, data.policy]);
-
-	// The state for if the save and discard buttons should be disabled
-	// is pretty complicated to calculate and varies on different states.
-	const disabled = useMemo(() => {
-		if (!data.read || !data.write) {
-			return true;
-		}
-
-		// First check our fetcher states
-		if (fetcher.state === 'loading') {
-			return true;
-		}
-
-		if (revalidator.state === 'loading') {
-			return true;
-		}
-
-		// If we have a failed fetcher state allow the user to try again
-		// @ts-ignore: useDebounceFetcher is not typed correctly
-		if (fetcher.data?.success === false) {
-			return false;
-		}
-
-		return data.policy === acl;
-	}, [data, revalidator.state, fetcher.state, fetcher.data, data.policy, acl]);
-
-	return (
-		<div>
-			{data.read && !data.write ? (
-				<div className="mb-4">
-					<Notice className="w-fit">
-						The ACL policy is read-only. You can view the current policy but you
-						cannot make changes to it.
-						<br />
-						To resolve this, you need to set the ACL policy mode to database in
-						your Headscale configuration.
-					</Notice>
-				</div>
-			) : undefined}
-			<h1 className="text-2xl font-medium mb-4">Access Control List (ACL)</h1>
-			<p className="mb-4 max-w-prose">
-				The ACL file is used to define the access control rules for your
-				network. You can find more information about the ACL file in the{' '}
-				<Link
-					to="https://tailscale.com/kb/1018/acls"
-					name="Tailscale ACL documentation"
-				>
-					Tailscale ACL guide
-				</Link>{' '}
-				and the{' '}
-				<Link
-					to="https://headscale.net/stable/ref/acls/"
-					name="Headscale ACL documentation"
-				>
-					Headscale docs
-				</Link>
-				.
-			</p>
-			{
-				// @ts-ignore: useDebounceFetcher is not typed correctly
-				fetcher.data?.success === false ? (
-					// @ts-ignore: useDebounceFetcher is not typed correctly
-					<ErrorView message={fetcher.data.error} />
-				) : undefined
-			}
-			{data.read ? (
-				<>
-					<Tabs>
-						<TabList
-							className={cn(
-								'flex border-t border-gray-200 dark:border-gray-700',
-								'w-fit rounded-t-lg overflow-hidden',
-								'text-gray-400 dark:text-gray-500',
-							)}
-						>
-							<Tab
-								id="edit"
-								className={({ isSelected }) =>
-									cn(
-										'px-4 py-2 rounded-tl-lg',
-										'focus:outline-none flex items-center gap-2',
-										'border-x border-gray-200 dark:border-gray-700',
-										isSelected ? 'text-gray-900 dark:text-gray-100' : '',
-									)
-								}
-							>
-								<PencilIcon className="w-5 h-5" />
-								<p>Edit file</p>
-							</Tab>
-							<Tab
-								id="diff"
-								className={({ isSelected }) =>
-									cn(
-										'px-4 py-2',
-										'focus:outline-none flex items-center gap-2',
-										'border-x border-gray-200 dark:border-gray-700',
-										isSelected ? 'text-gray-900 dark:text-gray-100' : '',
-									)
-								}
-							>
-								<EyeIcon className="w-5 h-5" />
-								<p>Preview changes</p>
-							</Tab>
-							<Tab
-								id="preview"
-								className={({ isSelected }) =>
-									cn(
-										'px-4 py-2 rounded-tr-lg',
-										'focus:outline-none flex items-center gap-2',
-										'border-x border-gray-200 dark:border-gray-700',
-										isSelected ? 'text-gray-900 dark:text-gray-100' : '',
-									)
-								}
-							>
-								<BeakerIcon className="w-5 h-5" />
-								<p>Preview rules</p>
-							</Tab>
-						</TabList>
-						<TabPanel id="edit">
-							<Editor isDisabled={!data.write} value={acl} onChange={setAcl} />
-						</TabPanel>
-						<TabPanel id="diff">
-							<Differ left={data?.policy ?? ''} right={acl} />
-						</TabPanel>
-						<TabPanel id="preview">
-							<div
-								className={cn(
-									'border border-gray-200 dark:border-gray-700',
-									'rounded-b-lg rounded-tr-lg mb-4 overflow-hidden',
-									'p-16 flex flex-col items-center justify-center',
-								)}
-							>
-								<IssueDraftIcon className="w-24 h-24 text-gray-300 dark:text-gray-500" />
-								<p className="w-1/2 text-center mt-4">
-									The Preview rules is very much still a work in progress. It is
-									a bit complicated to implement right now but hopefully it will
-									be available soon.
-								</p>
-							</div>
-						</TabPanel>
-					</Tabs>
-					<Button
-						variant="heavy"
-						className="mr-2"
-						isDisabled={disabled}
-						onPress={() => {
-							setToasted(false);
-							fetcher.submit(
-								{
-									acl,
-								},
-								{
-									method: 'PATCH',
-									encType: 'application/json',
-								},
-							);
-						}}
-					>
-						{fetcher.state === 'idle' ? undefined : (
-							<Spinner className="w-3 h-3" />
-						)}
-						Save
-					</Button>
-					<Button
-						isDisabled={disabled}
-						onPress={() => {
-							setAcl(data?.policy ?? '');
-						}}
-					>
-						Discard Changes
-					</Button>
-				</>
-			) : (
-				<Unavailable mode={data.mode as 'database' | 'file'} />
-			)}
-		</div>
-	);
-}

app/routes/acls/overview.tsx

@@ -0,0 +1,220 @@
+import {
+	AlertCircle,
+	Construction,
+	Eye,
+	FlaskConical,
+	Pencil,
+} from 'lucide-react';
+import { useEffect, useState } from 'react';
+import { isRouteErrorResponse, useFetcher, useRevalidator } from 'react-router';
+import Button from '~/components/Button';
+import Card from '~/components/Card';
+import Code from '~/components/Code';
+import Link from '~/components/Link';
+import Notice from '~/components/Notice';
+import Tabs from '~/components/Tabs';
+import { isApiError } from '~/server/headscale/api/error-client';
+import toast from '~/utils/toast';
+import type { Route } from './+types/overview';
+import { aclAction } from './acl-action';
+import { aclLoader } from './acl-loader';
+import { Differ, Editor } from './components/cm.client';
+
+export const loader = aclLoader;
+export const action = aclAction;
+
+export default function Page({
+	loaderData: { access, writable, policy },
+}: Route.ComponentProps) {
+	const [codePolicy, setCodePolicy] = useState(policy);
+	const fetcher = useFetcher<typeof action>();
+	const { revalidate } = useRevalidator();
+	const disabled = !access || !writable; // Disable if no permission or not writable
+
+	useEffect(() => {
+		// Update the codePolicy when the loader data changes
+		if (policy !== codePolicy) {
+			setCodePolicy(policy);
+		}
+	}, [policy]);
+
+	useEffect(() => {
+		if (!fetcher.data) {
+			// No data yet, return
+			return;
+		}
+
+		if (fetcher.data.success === true) {
+			toast('Updated policy');
+			revalidate();
+		}
+	}, [fetcher.data]);
+
+	return (
+		<div>
+			{!access ? (
+				<Notice title="ACL Policy restricted" variant="warning">
+					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>
+			) : !writable ? (
+				<Notice title="Read-only ACL Policy" variant="error">
+					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>
+			) : undefined}
+			<h1 className="text-2xl font-medium mb-4">Access Control List (ACL)</h1>
+			<p className="mb-4 max-w-prose">
+				The ACL file is used to define the access control rules for your
+				network. You can find more information about the ACL file in the{' '}
+				<Link
+					name="Tailscale ACL documentation"
+					to="https://tailscale.com/kb/1018/acls"
+				>
+					Tailscale ACL guide
+				</Link>{' '}
+				and the{' '}
+				<Link
+					name="Headscale ACL documentation"
+					to="https://headscale.net/stable/ref/acls/"
+				>
+					Headscale docs
+				</Link>
+				.
+			</p>
+			{fetcher.data?.error !== undefined ? (
+				<Notice
+					title={fetcher.data.error.split(':')[0] ?? 'Error'}
+					variant="error"
+				>
+					{fetcher.data.error.split(':').slice(1).join(': ') ??
+						'An unknown error occurred while trying to update the ACL policy.'}
+				</Notice>
+			) : undefined}
+			<Tabs className="mb-4" label="ACL Editor">
+				<Tabs.Item
+					key="edit"
+					title={
+						<div className="flex items-center gap-2">
+							<Pencil className="p-1" />
+							<span>Edit file</span>
+						</div>
+					}
+				>
+					<Editor
+						isDisabled={disabled}
+						onChange={setCodePolicy}
+						value={codePolicy}
+					/>
+				</Tabs.Item>
+				<Tabs.Item
+					key="diff"
+					title={
+						<div className="flex items-center gap-2">
+							<Eye className="p-1" />
+							<span>Preview changes</span>
+						</div>
+					}
+				>
+					<Differ left={policy} right={codePolicy} />
+				</Tabs.Item>
+				<Tabs.Item
+					key="preview"
+					title={
+						<div className="flex items-center gap-2">
+							<FlaskConical className="p-1" />
+							<span>Preview rules</span>
+						</div>
+					}
+				>
+					<div className="flex flex-col items-center py-8">
+						<Construction />
+						<p className="w-1/2 text-center mt-4">
+							Previewing rules is not available yet. This feature is still in
+							development and is pretty complicated to implement. Hopefully I
+							will be able to get to it soon.
+						</p>
+					</div>
+				</Tabs.Item>
+			</Tabs>
+			<Button
+				className="mr-2"
+				isDisabled={
+					disabled ||
+					fetcher.state !== 'idle' ||
+					codePolicy.length === 0 ||
+					codePolicy === policy
+				}
+				onPress={() => {
+					const formData = new FormData();
+					formData.append('policy', codePolicy);
+					fetcher.submit(formData, { method: 'PATCH' });
+				}}
+				variant="heavy"
+			>
+				Save
+			</Button>
+			<Button
+				isDisabled={
+					disabled || fetcher.state !== 'idle' || codePolicy === policy
+				}
+				onPress={() => {
+					// Reset the editor to the original policy
+					setCodePolicy(policy);
+				}}
+			>
+				Discard Changes
+			</Button>
+		</div>
+	);
+}
+
+export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
+	if (
+		isRouteErrorResponse(error) &&
+		isApiError(error.data) &&
+		error.data.rawData.includes('reading policy from path') &&
+		error.data.rawData.includes('no such file or directory')
+	) {
+		return (
+			<div className="flex flex-col gap-4">
+				<Card className="max-w-2xl" variant="flat">
+					<div className="flex items-center justify-between gap-4">
+						<Card.Title>ACL Policy Unavailable</Card.Title>
+						<AlertCircle className="w-6 h-6 mb-2 text-red-500" />
+					</div>
+					<Card.Text>
+						The ACL policy is currently unavailable because the policy file does
+						not exist on the server. This usually indicates that Headscale is
+						running in <Code>file</Code> mode for ACLs, and the specified policy
+						file is missing.
+					</Card.Text>
+				</Card>
+				<Card className="max-w-2xl" variant="flat">
+					<Card.Text>
+						In order to resolve this issue, there are two possible actions you
+						can take:
+					</Card.Text>
+					<ul className="list-disc list-outside mt-2 ml-4 space-y-1 text-sm">
+						<li>
+							Create the ACL policy file at the specified path in your Headscale
+							configuration.
+						</li>
+						<li>
+							Alternatively, you can switch Headscale to use{' '}
+							<Code>database</Code> mode for ACLs by updating your Headscale
+							configuration. This will allow Headplane to manage the ACL policy
+							directly through the web interface.
+						</li>
+					</ul>
+				</Card>
+			</div>
+		);
+	}
+
+	throw error;
+}

app/routes/auth/login.tsx

@@ -1,142 +0,0 @@
-import {
-	type ActionFunctionArgs,
-	type LoaderFunctionArgs,
-	redirect,
-} from 'react-router';
-import { Form, useActionData, useLoaderData } from 'react-router';
-import { useMemo } from 'react';
-
-import Button from '~/components/Button';
-import Card from '~/components/Card';
-import Code from '~/components/Code';
-import TextField from '~/components/TextField';
-import type { Key } from '~/types';
-import { loadContext } from '~/utils/config/headplane';
-import { pull } from '~/utils/headscale';
-import { beginAuthFlow, getRedirectUri } from '~/utils/oidc';
-import { commitSession, getSession } from '~/utils/sessions.server';
-
-export async function loader({ request }: LoaderFunctionArgs) {
-	const session = await getSession(request.headers.get('Cookie'));
-	if (session.has('hsApiKey')) {
-		return redirect('/machines', {
-			headers: {
-				'Set-Cookie': await commitSession(session),
-			},
-		});
-	}
-
-	const context = await loadContext();
-
-	// Only set if OIDC is properly enabled anyways
-	if (context.oidc?.disableKeyLogin) {
-		return redirect('/oidc/start');
-	}
-
-	return {
-		oidc: context.oidc?.issuer,
-		apiKey: !context.oidc?.disableKeyLogin,
-	};
-}
-
-export async function action({ request }: ActionFunctionArgs) {
-	const formData = await request.formData();
-	const oidcStart = formData.get('oidc-start');
-	const session = await getSession(request.headers.get('Cookie'));
-
-	if (oidcStart) {
-		const context = await loadContext();
-
-		if (!context.oidc) {
-			throw new Error('An invalid OIDC configuration was provided');
-		}
-
-		return redirect('/oidc/start');
-	}
-
-	const apiKey = String(formData.get('api-key'));
-
-	// Test the API key
-	try {
-		const apiKeys = await pull<{ apiKeys: Key[] }>('v1/apikey', apiKey);
-		const key = apiKeys.apiKeys.find((k) => apiKey.startsWith(k.prefix));
-		if (!key) {
-			throw new 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('hsApiKey', apiKey);
-		session.set('user', {
-			subject: 'unknown-non-oauth',
-			name: key.prefix,
-			email: `${expiresDays.toString()} days`,
-		});
-
-		return redirect('/machines', {
-			headers: {
-				'Set-Cookie': await commitSession(session, {
-					maxAge: expiresIn,
-				}),
-			},
-		});
-	} catch {
-		return {
-			error: 'Invalid API key',
-		};
-	}
-}
-
-export default function Page() {
-	const data = useLoaderData<typeof loader>();
-	const actionData = useActionData<typeof action>();
-	const showOr = useMemo(() => data.oidc && data.apiKey, [data]);
-
-	return (
-		<div className="flex min-h-screen items-center justify-center">
-			<Card className="max-w-sm m-4 sm:m-0 rounded-2xl">
-				<Card.Title>Welcome to Headplane</Card.Title>
-				{data.apiKey ? (
-					<Form method="post">
-						<Card.Text className="mb-8 text-sm">
-							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}
-						<TextField
-							isRequired
-							label="API Key"
-							name="api-key"
-							placeholder="API Key"
-							type="password"
-						/>
-						<Button className="w-full mt-2.5" variant="heavy" type="submit">
-							Login
-						</Button>
-					</Form>
-				) : undefined}
-				{showOr ? (
-					<div className="flex items-center gap-x-1.5 py-1">
-						<hr className="flex-1 border-ui-300 dark:border-ui-800" />
-						<span className="text-gray-500 text-sm">or</span>
-						<hr className="flex-1 border-ui-300 dark:border-ui-800" />
-					</div>
-				) : undefined}
-				{data.oidc ? (
-					<Form method="POST">
-						<input type="hidden" name="oidc-start" value="true" />
-						<Button className="w-full" variant="heavy" type="submit">
-							Login with SSO
-						</Button>
-					</Form>
-				) : undefined}
-			</Card>
-		</div>
-	);
-}

app/routes/auth/login/action.ts

@@ -0,0 +1,102 @@
+import { data, redirect } from "react-router";
+
+import { isDataWithApiError } from "~/server/headscale/api/error-client";
+import log from "~/utils/log";
+
+import type { Route } from "./+types/page";
+
+export async function loginAction({ request, context }: Route.LoaderArgs) {
+  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 });
+  }
+
+  const api = context.hsApi.getRuntimeClient(apiKey);
+  try {
+    const apiKeys = await api.getApiKeys();
+    console.log(apiKeys);
+
+    // We don't need to check for 0 API keys because this request cannot
+    // be authenticated correctly without an API key
+    //
+    // 0.28.0 pointlessly added asterisks to the prefixes of API keys, which is
+    // the dumbest thing I've ever seen.
+    const lookup = apiKeys.find((key) => apiKey.startsWith(key.prefix.replaceAll("*", "")));
+    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) {
+    // Check if this is a React Router DataWithResponseInit wrapping a Headscale API error
+    if (isDataWithApiError(error)) {
+      const apiError = error.data;
+      // TODO: What in gods name is wrong with the headscale API?
+      if (
+        apiError.statusCode === 401 ||
+        apiError.statusCode === 403 ||
+        (apiError.statusCode === 500 && apiError.rawData.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/config-error.tsx

@@ -0,0 +1,131 @@
+import { AlertCircle, CloudOff } from "lucide-react";
+
+import Card from "~/components/Card";
+import Code from "~/components/Code";
+import Link from "~/components/Link";
+import { OidcConnectorError } from "~/server/web/oidc-connector";
+
+export function OidcDiscoveryFailedNotice() {
+  return (
+    <Card className="m-4 mb-4 max-w-md border border-yellow-500 sm:m-0 sm:mb-4">
+      <div className="flex items-center justify-between gap-4">
+        <Card.Title className="text-yellow-500">SSO Temporarily Unavailable</Card.Title>
+        <CloudOff className="mb-2 h-6 w-6 text-yellow-500" />
+      </div>
+      <Card.Text className="text-sm">
+        Unable to reach the identity provider. Single Sign-On will be available once the provider is
+        reachable again. You can still sign in with an API key.
+      </Card.Text>
+    </Card>
+  );
+}
+
+export function OidcConfigErrorNotice({ errors }: { errors: OidcConnectorError[] }) {
+  return (
+    <Card className="m-4 mb-4 max-w-md border border-red-500 sm:m-0 sm:mb-4">
+      <div className="flex items-center justify-between gap-4">
+        <Card.Title className="text-red-500">Authentication Error</Card.Title>
+        <AlertCircle className="mb-2 h-6 w-6 text-red-500" />
+      </div>
+      <Card.Text className="text-sm">
+        The OpenID Connect (OIDC) Single Sign-On (SSO) configuration has issues:{" "}
+        <ul className="mt-2 mb-1 list-inside list-disc">
+          {mapOidcErrorsToMessages(errors).map((code) => (
+            <li key={code.key}>{code.node}</li>
+          ))}
+        </ul>{" "}
+        <Link
+          name="Headplane OIDC Issues"
+          to="https://headplane.net/configuration/sso#troubleshooting"
+        >
+          Learn more
+        </Link>
+      </Card.Text>
+    </Card>
+  );
+}
+
+function mapOidcErrorsToMessages(errors: OidcConnectorError[]) {
+  const messages: {
+    key: string;
+    node: React.ReactNode;
+  }[] = [];
+
+  for (const error of errors) {
+    switch (error) {
+      case "INVALID_API_KEY":
+        messages.push({
+          key: error,
+          node: (
+            <Card.Text className="inline">
+              The provided API key for OIDC authentication is invalid. Ensure that{" "}
+              <Code>oidc.headscale_api_key</Code> is a valid API key.
+            </Card.Text>
+          ),
+        });
+        break;
+
+      case "MISSING_AUTHORIZATION_ENDPOINT":
+        messages.push({
+          key: error,
+          node: (
+            <Card.Text className="inline">
+              The OIDC provided does not have a configured <Code>authorization_endpoint</Code>.
+              Ensure discovery URL or manual configuration is correct.
+            </Card.Text>
+          ),
+        });
+        break;
+
+      case "MISSING_TOKEN_ENDPOINT":
+        messages.push({
+          key: error,
+          node: (
+            <Card.Text className="inline">
+              The OIDC provided does not have a configured <Code>token_endpoint</Code>. Ensure
+              discovery URL or manual configuration is correct.
+            </Card.Text>
+          ),
+        });
+        break;
+
+      case "MISSING_USERINFO_ENDPOINT":
+        messages.push({
+          key: error,
+          node: (
+            <Card.Text className="inline">
+              The OIDC provided does not have a configured <Code>user_endpoint</Code>. Ensure
+              discovery URL or manual configuration is correct.
+            </Card.Text>
+          ),
+        });
+        break;
+
+      case "MISSING_REQUIRED_CLAIMS":
+        messages.push({
+          key: error,
+          node: (
+            <Card.Text className="inline">
+              The OIDC provider does not support the <Code>sub</Code> claim, which is required for
+              authentication. Your OIDC provider may be misconfigured.
+            </Card.Text>
+          ),
+        });
+        break;
+
+      case "UNKNOWN_ERROR":
+        messages.push({
+          key: error,
+          node: (
+            <Card.Text className="inline">
+              An unknown error occurred during OIDC configuration. Please check the Headplane logs
+              for more information.
+            </Card.Text>
+          ),
+        });
+        break;
+    }
+  }
+
+  return messages;
+}

app/routes/auth/login/logout.tsx

@@ -0,0 +1,15 @@
+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/oidc-error.tsx

@@ -0,0 +1,63 @@
+import { AlertCircle } from 'lucide-react';
+import Card from '~/components/Card';
+import Code from '~/components/Code';
+
+export function OidcErrorNotice({ code }: { code: string }) {
+	return (
+		<Card className="max-w-md m-4 sm:m-0 mb-4 sm:mb-4 border border-red-500">
+			<div className="flex items-center justify-between gap-4">
+				<Card.Title className="text-red-500">Configuration Issue(s)</Card.Title>
+				<AlertCircle className="w-6 h-6 mb-2 text-red-500" />
+			</div>
+			{getErrorMessage(code)}
+		</Card>
+	);
+}
+
+function getErrorMessage(code: string) {
+	switch (code) {
+		case 'error_no_query':
+			return (
+				<Card.Text>
+					The SSO provider did not correctly redirect back to Headplane with the
+					required parameters. Please ensure your SSO provider is configured
+					correctly.
+				</Card.Text>
+			);
+
+		case 'error_no_session':
+		case 'error_invalid_session':
+			return (
+				<Card.Text>
+					Unable to complete SSO login due to missing or invalid session data.
+					Ensure that your Headplane cookie configuration is correct and that
+					your browser is accepting cookies.
+				</Card.Text>
+			);
+
+		case 'error_no_sub':
+			return (
+				<Card.Text>
+					The SSO provider did not return a valid user identifier. Please ensure
+					your SSO provider is correctly configured to provide the{' '}
+					<Code>sub</Code> claim.
+				</Card.Text>
+			);
+
+		case 'error_auth_failed':
+			return (
+				<Card.Text>
+					Authentication with the SSO provider failed. Please try again later.
+					Headplane logs may provide more information.
+				</Card.Text>
+			);
+
+		default:
+			return (
+				<Card.Text>
+					An unknown error occurred during OIDC authentication. Please try again
+					later.
+				</Card.Text>
+			);
+	}
+}

app/routes/auth/login/page.tsx

@@ -0,0 +1,156 @@
+import { AlertCircle } from "lucide-react";
+import { useEffect, useState } from "react";
+import { Form, Link as RemixLink, redirect, 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 Link from "~/components/Link";
+import { useLiveData } from "~/utils/live-data";
+
+import type { Route } from "./+types/page";
+
+import { loginAction } from "./action";
+import { OidcConfigErrorNotice, OidcDiscoveryFailedNotice } from "./config-error";
+import Logout from "./logout";
+import { OidcErrorNotice } from "./oidc-error";
+
+export async function loader({ request, context }: Route.LoaderArgs) {
+  try {
+    await context.sessions.auth(request);
+    return redirect("/machines");
+  } catch {}
+
+  const qp = new URL(request.url).searchParams;
+  const urlState = qp.get("s") ?? undefined;
+
+  const oidcConnector = await context.oidcConnector?.get();
+
+  // MARK: This works because the OIDC connector will always return false
+  // for `isExclusive` if the OIDC config isn't usable.
+  if (oidcConnector?.isExclusive && urlState !== "logout") {
+    return redirect("/oidc/start");
+  }
+
+  const isOidcConnectorEnabled = oidcConnector?.isValid;
+  const oidcErrorCodes = !isOidcConnectorEnabled ? (oidcConnector?.errors ?? []) : [];
+
+  return {
+    isCookieSecureEnabled: context.config.server.cookie_secure,
+    isOidcConnectorEnabled,
+    oidcErrorCodes,
+    urlState,
+  };
+}
+
+export const action = loginAction;
+
+export default function Page({ loaderData, actionData }: Route.ComponentProps) {
+  const { isCookieSecureEnabled, isOidcConnectorEnabled, oidcErrorCodes, urlState } = loaderData;
+
+  const [showCookieWarning, setShowCookieWarning] = useState(false);
+  const [params] = useSearchParams();
+  const { pause } = useLiveData();
+
+  useEffect(() => {
+    // This page does NOT need stale while revalidate logic
+    pause();
+
+    if (isCookieSecureEnabled && window.location.protocol !== "https:") {
+      setShowCookieWarning(true);
+    }
+  });
+
+  useEffect(() => {
+    // State is a one time thing, we need to remove it after it has
+    // been consumed to prevent logic loops.
+    if (urlState !== 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);
+    }
+  }, [urlState, params]);
+
+  if (urlState === "logout") {
+    return <Logout />;
+  }
+
+  return (
+    <div className="flex h-screen w-screen items-center justify-center">
+      <div>
+        {urlState?.startsWith("error_") ? (
+          <OidcErrorNotice code={urlState} />
+        ) : oidcErrorCodes.includes("DISCOVERY_FAILED") ? (
+          <OidcDiscoveryFailedNotice />
+        ) : oidcErrorCodes.length > 0 ? (
+          <OidcConfigErrorNotice errors={oidcErrorCodes} />
+        ) : showCookieWarning ? (
+          <Card className="m-4 mb-4 max-w-md border border-red-500 sm:m-0 sm:mb-4">
+            <div className="flex items-center justify-between gap-4">
+              <Card.Title className="text-red-500">Configuration Issue</Card.Title>
+              <AlertCircle className="mb-2 h-6 w-6 text-red-500" />
+            </div>
+            {showCookieWarning ? (
+              <Card.Text className="text-sm">
+                Headplane is configured to use secure cookies, but this site is being served over an
+                insecure connection and login will not work correctly.{" "}
+                <Link
+                  name="Headplane Common Issues"
+                  to="https://headplane.net/configuration/common-issues#issue-logging-in-does-not-do-anything"
+                >
+                  Learn more.
+                </Link>
+              </Card.Text>
+            ) : undefined}
+          </Card>
+        ) : undefined}
+        <Card className="m-4 max-w-md 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"
+            />
+            {actionData?.success === false ? (
+              <Card.Text className="mb-2 text-sm text-red-600 dark:text-red-300">
+                {actionData.message}
+              </Card.Text>
+            ) : undefined}
+            <Button className="w-full" type="submit" variant="heavy">
+              Sign In
+            </Button>
+          </Form>
+          {isOidcConnectorEnabled ? (
+            <RemixLink to="/oidc/start">
+              <Button
+                className="mt-2 w-full"
+                isDisabled={oidcErrorCodes.length > 0}
+                variant="light"
+              >
+                Single Sign-On
+              </Button>
+            </RemixLink>
+          ) : undefined}
+        </Card>
+      </div>
+    </div>
+  );
+}

app/routes/auth/logout.ts

@@ -1,15 +1,29 @@
 import { type ActionFunctionArgs, redirect } from 'react-router';
-import { destroySession, getSession } from '~/utils/sessions.server';
+import type { LoadContext } from '~/server';
 
 export async function loader() {
 	return redirect('/machines');
 }
 
-export async function action({ request }: ActionFunctionArgs) {
-	const session = await getSession(request.headers.get('Cookie'));
-	return redirect('/login', {
+export async function action({
+	request,
+	context,
+}: ActionFunctionArgs<LoadContext>) {
+	try {
+		await context.sessions.auth(request);
+	} catch {
+		redirect('/login');
+	}
+
+	// When API key is disabled, we need to explicitly redirect
+	// with a logout state to prevent auto login again.
+	const url = context.config.oidc?.disable_api_key_login
+		? '/login?s=logout'
+		: '/login';
+
+	return redirect(url, {
 		headers: {
-			'Set-Cookie': await destroySession(session),
+			'Set-Cookie': await context.sessions.destroySession(),
 		},
 	});
 }

app/routes/auth/oidc-callback.ts

@@ -1,77 +1,155 @@
-import { type LoaderFunctionArgs, redirect } from 'react-router';
-import { loadContext } from '~/utils/config/headplane';
-import { getSession, commitSession } from '~/utils/sessions.server';
-import { finishAuthFlow, getRedirectUri, formatError } from '~/utils/oidc';
-import { send } from '~/utils/res';
+import { count, eq } from "drizzle-orm";
+import { createHash } from "node:crypto";
+import * as oidc from "openid-client";
+import { data, redirect } from "react-router";
+import { ulid } from "ulidx";
 
-export async function loader({ request }: LoaderFunctionArgs) {
-	// Check if we have 0 query parameters
-	const url = new URL(request.url);
-	if (url.searchParams.toString().length === 0) {
-		return redirect('/machines');
-	}
+import { users } from "~/server/db/schema";
+import { Roles } from "~/server/web/roles";
+import log from "~/utils/log";
+import { createOidcStateCookie } from "~/utils/oidc-state";
 
-	const session = await getSession(request.headers.get('Cookie'));
-	if (session.has('hsApiKey')) {
-		return redirect('/machines')
-	}
+import type { Route } from "./+types/oidc-callback";
 
-	// This is a hold-over from the old code
-	// TODO: Rewrite checkOIDC in the context loader
-	const { oidc } = await loadContext();
-	if (!oidc) {
-		throw new Error('An invalid OIDC configuration was provided');
-	}
+export async function loader({ request, context }: Route.LoaderArgs) {
+  const oidcConnector = await context.oidcConnector?.get();
+  if (!oidcConnector?.isValid) {
+    throw data("OIDC is not enabled or misconfigured", { status: 501 });
+  }
 
-	const oidcConfig = {
-		issuer: oidc.issuer,
-		clientId: oidc.client,
-		clientSecret: oidc.secret,
-		redirectUri: oidc.redirectUri,
-		tokenEndpointAuthMethod: oidc.method,
-	}
+  const url = new URL(request.url);
+  if (url.searchParams.toString().length === 0) {
+    return redirect("/login?s=error_no_query");
+  }
 
-	const codeVerifier = session.get('oidc_code_verif');
-	const state = session.get('oidc_state');
-	const nonce = session.get('oidc_nonce');
+  const cookie = createOidcStateCookie(context.config);
+  const oidcCookieState = await cookie.parse(request.headers.get("Cookie"));
 
-	if (!codeVerifier || !state || !nonce) {
-		return send({ error: 'Missing OIDC state' }, { status: 400 });
-	}
+  if (oidcCookieState == null) {
+    log.warn("auth", "Called OIDC callback without session cookie");
+    return redirect("/login?s=error_no_session");
+  }
 
-	const flowOptions = {
-		redirect_uri: request.url,
-		codeVerifier,
-		state,
-		nonce: nonce === '<none>' ? undefined : nonce,
-	}
+  const { state, nonce, redirect_uri, verifier } = oidcCookieState;
+  if (!state || !nonce || !redirect_uri || !verifier) {
+    log.warn("auth", "OIDC session cookie is missing required fields");
+    return redirect("/login?s=error_invalid_session");
+  }
 
-	try {
-		const user = await finishAuthFlow(oidcConfig, flowOptions);
-		session.set('user', user);
-		session.unset('oidc_code_verif');
-		session.unset('oidc_state');
-		session.unset('oidc_nonce');
+  try {
+    const callbackUrl = new URL(redirect_uri);
+    const currentUrl = new URL(request.url);
+    callbackUrl.search = currentUrl.search;
 
-		// 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.
-		session.set('hsApiKey', oidc.rootKey);
-		return redirect('/machines', {
-			headers: {
-				'Set-Cookie': await commitSession(session),
-			},
-		});
-	} catch (error) {
-		return new Response(
-			JSON.stringify(formatError(error)),
-			{
-				status: 500,
-				headers: {
-					'Content-Type': 'application/json',
-				},
-			}
-		);
-	}
+    const tokens = await oidc.authorizationCodeGrant(oidcConnector.client, callbackUrl, {
+      expectedState: state,
+      expectedNonce: nonce,
+      ...(oidcConnector.usePKCE ? { pkceCodeVerifier: verifier } : {}),
+    });
+
+    const claims = tokens.claims();
+    if (claims?.sub == null) {
+      log.warn("auth", "No subject found in OIDC claims");
+      return redirect("/login?s=error_no_sub");
+    }
+
+    const userInfo = await oidc.fetchUserInfo(
+      oidcConnector.client,
+      tokens.access_token,
+      claims.sub,
+    );
+
+    // We have defaults that closely follow what Headscale uses, maybe we
+    // can make it configurable in the future, but for now we only need the
+    // `sub` claim.
+    const username = userInfo.preferred_username ?? userInfo.email?.split("@")[0] ?? "user";
+    const name =
+      userInfo.name ??
+      (userInfo.given_name && userInfo.family_name
+        ? `${userInfo.given_name} ${userInfo.family_name}`
+        : (userInfo.preferred_username ?? "SSO User"));
+
+    const picture =
+      context.config.oidc?.profile_picture_source === "gravatar"
+        ? (() => {
+            if (!userInfo.email) {
+              return undefined;
+            }
+
+            const emailHash = userInfo.email.trim().toLowerCase();
+            const hash = createHash("sha256").update(emailHash).digest("hex");
+            return `https://www.gravatar.com/avatar/${hash}?s=200&d=identicon&r=x`;
+          })()
+        : userInfo.picture;
+
+    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: claims.sub,
+        caps: userCount === 0 ? Roles.owner : Roles.member,
+      })
+      .onConflictDoNothing();
+
+    return redirect("/", {
+      headers: {
+        "Set-Cookie": await context.sessions.createSession({
+          api_key: oidcConnector.apiKey,
+          user: {
+            subject: claims.sub,
+            username,
+            name,
+            email: userInfo.email,
+            picture,
+          },
+        }),
+      },
+    });
+  } catch (error) {
+    if (error instanceof oidc.ResponseBodyError) {
+      log.error("auth", "Got an OIDC response error body: %s", JSON.stringify(error.cause));
+
+      // Check for PKCE-related errors
+      if (
+        error.error.toLowerCase().includes("code_verifier") ||
+        error.error.toLowerCase().includes("code verifier") ||
+        error.error.toLowerCase().includes("pkce")
+      ) {
+        log.error(
+          "auth",
+          "PKCE error detected. Your OIDC provider may require PKCE to be enabled. Current setting: use_pkce=%s",
+          oidcConnector.usePKCE,
+        );
+
+        if (!oidcConnector.usePKCE) {
+          log.error(
+            "auth",
+            "Consider setting oidc.use_pkce=true in your configuration if your provider requires PKCE",
+          );
+        }
+      }
+    } else if (error instanceof oidc.AuthorizationResponseError) {
+      log.error("auth", "Got an OIDC authorization response error: %s", error.error);
+    } else if (error instanceof oidc.WWWAuthenticateChallengeError) {
+      log.error("auth", "Got an OIDC WWW-Authenticate challenge error");
+    } else if (error instanceof oidc.ClientError) {
+      log.error(
+        "auth",
+        "Got an OIDC authorization client error: %s",
+        error.cause instanceof Error ? error.cause.message : String(error.cause),
+      );
+    } else {
+      log.error(
+        "auth",
+        "Got an OIDC error: %s",
+        error instanceof Error && error.cause ? JSON.stringify(error.cause) : String(error),
+      );
+    }
+    return redirect("/login?s=error_auth_failed");
+  }
 }

app/routes/auth/oidc-start.ts

@@ -1,40 +1,81 @@
-import { type LoaderFunctionArgs, data, redirect } from 'react-router';
-import { commitSession, getSession } from '~/utils/sessions.server';
-import { send } from '~/utils/res';
-import { beginAuthFlow, getRedirectUri } from '~/utils/oidc';
-import { loadContext } from '~/utils/config/headplane';
+import * as oidc from "openid-client";
+import { data, redirect } from "react-router";
 
-export async function loader({ request }: LoaderFunctionArgs) {
-	const session = await getSession(request.headers.get('Cookie'));
-	if (session.has('hsApiKey')) {
-		return redirect('/machines')
-	}
+import { HeadplaneConfig } from "~/server/config/config-schema";
+import { createOidcStateCookie } from "~/utils/oidc-state";
 
-	// This is a hold-over from the old code
-	// TODO: Rewrite checkOIDC in the context loader
-	const { oidc } = await loadContext();
-	if (!oidc) {
-		throw new Error('An invalid OIDC configuration was provided');
-	}
+import type { Route } from "./+types/oidc-start";
 
-	const oidcConfig = {
-		issuer: oidc.issuer,
-		clientId: oidc.client,
-		clientSecret: oidc.secret,
-		redirectUri: oidc.redirectUri,
-		tokenEndpointAuthMethod: oidc.method,
-	}
+export async function loader({ request, context }: Route.LoaderArgs) {
+  try {
+    await context.sessions.auth(request);
+    return redirect("/");
+  } catch {}
 
-	const redirectUri = oidcConfig.redirectUri ?? getRedirectUri(request);
-	const data = await beginAuthFlow(oidcConfig, redirectUri);
-	session.set('oidc_code_verif', data.codeVerifier);
-	session.set('oidc_state', data.state);
-	session.set('oidc_nonce', data.nonce);
+  const oidcConnector = await context.oidcConnector?.get();
+  if (!oidcConnector?.isValid) {
+    throw data("OIDC is not enabled or misconfigured", { status: 501 });
+  }
 
-	return redirect(data.url, {
-		status: 302,
-		headers: {
-			'Set-Cookie': await commitSession(session),
-		},
-	});
+  const cookie = createOidcStateCookie(context.config);
+  const redirect_uri = getRedirectUri(context.config, request);
+
+  const nonce = oidc.randomNonce();
+  const verifier = oidc.randomPKCECodeVerifier();
+  const state = oidc.randomState();
+
+  const url = oidc.buildAuthorizationUrl(oidcConnector.client, {
+    ...oidcConnector.extraParams,
+    scope: oidcConnector.scope,
+    redirect_uri,
+    state,
+    nonce,
+    ...(oidcConnector.usePKCE
+      ? {
+          code_challenge_method: "S256",
+          code_challenge: await oidc.calculatePKCECodeChallenge(verifier),
+        }
+      : {}),
+  });
+
+  return redirect(url.href, {
+    status: 302,
+    headers: {
+      "Set-Cookie": await cookie.serialize({
+        state,
+        nonce,
+        verifier,
+        redirect_uri,
+      }),
+    },
+  });
+}
+
+function getRedirectUri(config: HeadplaneConfig, req: Request): string {
+  if (config.server.base_url != null) {
+    const url = new URL(`${__PREFIX__}/oidc/callback`, config.server.base_url);
+    return url.href;
+  }
+
+  if (config.oidc?.redirect_uri != null) {
+    const url = new URL(`${__PREFIX__}/oidc/callback`, config.oidc.redirect_uri);
+    return url.href;
+  }
+
+  const url = new URL(`${__PREFIX__}/oidc/callback`, req.url);
+  let host = req.headers.get("Host");
+  if (!host) {
+    host = req.headers.get("X-Forwarded-Host");
+  }
+
+  if (!host) {
+    throw data("Cannot determine redirect URI: no Host or X-Forwarded-Host header", {
+      status: 500,
+    });
+  }
+
+  const proto = req.headers.get("X-Forwarded-Proto");
+  url.protocol = proto ?? "http:";
+  url.host = host;
+  return url.href;
 }

app/routes/dns/components/dns.tsx

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