0.12.6 release :)

- Also truncate long system names in tables and alerts sheet. (#1104)

.github/workflows/docker-images.yml

@@ -14,28 +14,48 @@ jobs:
         include:
           - image: henrygd/beszel
             context: ./beszel
-            dockerfile: ./beszel/dockerfile_Hub
+            dockerfile: ./beszel/dockerfile_hub
             registry: docker.io
             username_secret: DOCKERHUB_USERNAME
             password_secret: DOCKERHUB_TOKEN
+
           - image: henrygd/beszel-agent
             context: ./beszel
-            dockerfile: ./beszel/dockerfile_Agent
+            dockerfile: ./beszel/dockerfile_agent
             registry: docker.io
             username_secret: DOCKERHUB_USERNAME
             password_secret: DOCKERHUB_TOKEN
+
+          - image: henrygd/beszel-agent-nvidia
+            context: ./beszel
+            dockerfile: ./beszel/dockerfile_agent_nvidia
+            platforms: linux/amd64
+            registry: docker.io
+            username_secret: DOCKERHUB_USERNAME
+            password_secret: DOCKERHUB_TOKEN
+
           - image: ghcr.io/${{ github.repository }}/beszel
             context: ./beszel
-            dockerfile: ./beszel/dockerfile_Hub
+            dockerfile: ./beszel/dockerfile_hub
             registry: ghcr.io
             username: ${{ github.actor }}
             password_secret: GITHUB_TOKEN
+
           - image: ghcr.io/${{ github.repository }}/beszel-agent
             context: ./beszel
-            dockerfile: ./beszel/dockerfile_Agent
+            dockerfile: ./beszel/dockerfile_agent
             registry: ghcr.io
             username: ${{ github.actor }}
             password_secret: GITHUB_TOKEN
+
+          - image: ghcr.io/${{ github.repository }}/beszel-agent-nvidia
+            context: ./beszel
+            dockerfile: ./beszel/dockerfile_agent_nvidia
+            platforms: linux/amd64
+            registry: ghcr.io
+            username: ${{ github.actor }}
+            password_secret: GITHUB_TOKEN
+
     permissions:
       contents: read
       packages: write
@@ -87,7 +107,7 @@ jobs:
         with:
           context: "${{ matrix.context }}"
           file: ${{ matrix.dockerfile }}
-          platforms: linux/amd64,linux/arm64,linux/arm/v7
+          platforms: ${{ matrix.platforms || 'linux/amd64,linux/arm64,linux/arm/v7' }}
           push: ${{ github.ref_type == 'tag' }}
           tags: ${{ steps.metadata.outputs.tags }}
           labels: ${{ steps.metadata.outputs.labels }}

.gitignore

@@ -19,3 +19,4 @@ beszel/site/src/locales/**/*.ts
 __debug_*
 beszel/internal/agent/lhm/obj
 beszel/internal/agent/lhm/bin
+dockerfile_agent_dev

beszel/cmd/agent/agent.go

@@ -4,12 +4,12 @@ import (
 	"beszel"
 	"beszel/internal/agent"
 	"beszel/internal/agent/health"
-	"flag"
 	"fmt"
 	"log"
 	"os"
 	"strings"
 
+	"github.com/spf13/pflag"
 	"golang.org/x/crypto/ssh"
 )
 
@@ -17,43 +17,24 @@ import (
 type cmdOptions struct {
 	key    string // key is the public key(s) for SSH authentication.
 	listen string // listen is the address or port to listen on.
+	// TODO: add hubURL and token
+	// hubURL string // hubURL is the URL of the hub to use.
+	// token  string // token is the token to use for authentication.
 }
 
 // parse parses the command line flags and populates the config struct.
 // It returns true if a subcommand was handled and the program should exit.
 func (opts *cmdOptions) parse() bool {
-	flag.StringVar(&opts.key, "key", "", "Public key(s) for SSH authentication")
-	flag.StringVar(&opts.listen, "listen", "", "Address or port to listen on")
-
-	flag.Usage = func() {
-		builder := strings.Builder{}
-		builder.WriteString("Usage: ")
-		builder.WriteString(os.Args[0])
-		builder.WriteString(" [command] [flags]\n")
-		builder.WriteString("\nCommands:\n")
-		builder.WriteString("  health    Check if the agent is running\n")
-		builder.WriteString("  help      Display this help message\n")
-		builder.WriteString("  update    Update to the latest version\n")
-		builder.WriteString("\nFlags:\n")
-		fmt.Print(builder.String())
-		flag.PrintDefaults()
-	}
-
 	subcommand := ""
 	if len(os.Args) > 1 {
 		subcommand = os.Args[1]
 	}
 
+	// Subcommands that don't require any pflag parsing
 	switch subcommand {
 	case "-v", "version":
 		fmt.Println(beszel.AppName+"-agent", beszel.Version)
 		return true
-	case "help":
-		flag.Usage()
-		return true
-	case "update":
-		agent.Update()
-		return true
 	case "health":
 		err := health.Check()
 		if err != nil {
@@ -63,7 +44,57 @@ func (opts *cmdOptions) parse() bool {
 		return true
 	}
 
-	flag.Parse()
+	// pflag.CommandLine.ParseErrorsWhitelist.UnknownFlags = true
+	pflag.StringVarP(&opts.key, "key", "k", "", "Public key(s) for SSH authentication")
+	pflag.StringVarP(&opts.listen, "listen", "l", "", "Address or port to listen on")
+	// pflag.StringVarP(&opts.hubURL, "hub-url", "u", "", "URL of the hub to use")
+	// pflag.StringVarP(&opts.token, "token", "t", "", "Token to use for authentication")
+	chinaMirrors := pflag.BoolP("china-mirrors", "c", false, "Use mirror for update (gh.beszel.dev) instead of GitHub")
+	help := pflag.BoolP("help", "h", false, "Show this help message")
+
+	// Convert old single-dash long flags to double-dash for backward compatibility
+	flagsToConvert := []string{"key", "listen"}
+	for i, arg := range os.Args {
+		for _, flag := range flagsToConvert {
+			singleDash := "-" + flag
+			doubleDash := "--" + flag
+			if arg == singleDash {
+				os.Args[i] = doubleDash
+				break
+			} else if strings.HasPrefix(arg, singleDash+"=") {
+				os.Args[i] = doubleDash + arg[len(singleDash):]
+				break
+			}
+		}
+	}
+
+	pflag.Usage = func() {
+		builder := strings.Builder{}
+		builder.WriteString("Usage: ")
+		builder.WriteString(os.Args[0])
+		builder.WriteString(" [command] [flags]\n")
+		builder.WriteString("\nCommands:\n")
+		builder.WriteString("  health    Check if the agent is running\n")
+		// builder.WriteString("  help      Display this help message\n")
+		builder.WriteString("  update    Update to the latest version\n")
+		builder.WriteString("\nFlags:\n")
+		fmt.Print(builder.String())
+		pflag.PrintDefaults()
+	}
+
+	// Parse all arguments with pflag
+	pflag.Parse()
+
+	// Must run after pflag.Parse()
+	switch {
+	case *help || subcommand == "help":
+		pflag.Usage()
+		return true
+	case subcommand == "update":
+		agent.Update(*chinaMirrors)
+		return true
+	}
+
 	return false
 }
 

beszel/cmd/agent/agent_test.go

@@ -3,11 +3,11 @@ package main
 import (
 	"beszel/internal/agent"
 	"crypto/ed25519"
-	"flag"
 	"os"
 	"path/filepath"
 	"testing"
 
+	"github.com/spf13/pflag"
 	"github.com/stretchr/testify/assert"
 	"github.com/stretchr/testify/require"
 	"golang.org/x/crypto/ssh"
@@ -245,7 +245,7 @@ func TestParseFlags(t *testing.T) {
 	oldArgs := os.Args
 	defer func() {
 		os.Args = oldArgs
-		flag.CommandLine = flag.NewFlagSet(os.Args[0], flag.ExitOnError)
+		pflag.CommandLine = pflag.NewFlagSet(os.Args[0], pflag.ExitOnError)
 	}()
 
 	tests := []struct {
@@ -269,6 +269,22 @@ func TestParseFlags(t *testing.T) {
 				listen: "",
 			},
 		},
+		{
+			name: "key flag double dash",
+			args: []string{"cmd", "--key", "testkey"},
+			expected: cmdOptions{
+				key:    "testkey",
+				listen: "",
+			},
+		},
+		{
+			name: "key flag short",
+			args: []string{"cmd", "-k", "testkey"},
+			expected: cmdOptions{
+				key:    "testkey",
+				listen: "",
+			},
+		},
 		{
 			name: "addr flag only",
 			args: []string{"cmd", "-listen", ":8080"},
@@ -277,6 +293,22 @@ func TestParseFlags(t *testing.T) {
 				listen: ":8080",
 			},
 		},
+		{
+			name: "addr flag double dash",
+			args: []string{"cmd", "--listen", ":8080"},
+			expected: cmdOptions{
+				key:    "",
+				listen: ":8080",
+			},
+		},
+		{
+			name: "addr flag short",
+			args: []string{"cmd", "-l", ":8080"},
+			expected: cmdOptions{
+				key:    "",
+				listen: ":8080",
+			},
+		},
 		{
 			name: "both flags",
 			args: []string{"cmd", "-key", "testkey", "-listen", ":8080"},
@@ -290,12 +322,12 @@ func TestParseFlags(t *testing.T) {
 	for _, tt := range tests {
 		t.Run(tt.name, func(t *testing.T) {
 			// Reset flags for each test
-			flag.CommandLine = flag.NewFlagSet(tt.args[0], flag.ExitOnError)
+			pflag.CommandLine = pflag.NewFlagSet(tt.args[0], pflag.ExitOnError)
 			os.Args = tt.args
 
 			var opts cmdOptions
 			opts.parse()
-			flag.Parse()
+			pflag.Parse()
 
 			assert.Equal(t, tt.expected, opts)
 		})

beszel/cmd/hub/hub.go

@@ -45,11 +45,13 @@ func getBaseApp() *pocketbase.PocketBase {
 	baseApp.RootCmd.Use = beszel.AppName
 	baseApp.RootCmd.Short = ""
 	// add update command
-	baseApp.RootCmd.AddCommand(&cobra.Command{
+	updateCmd := &cobra.Command{
 		Use:   "update",
 		Short: "Update " + beszel.AppName + " to the latest version",
 		Run:   hub.Update,
-	})
+	}
+	updateCmd.Flags().Bool("china-mirrors", false, "Use mirror (gh.beszel.dev) instead of GitHub")
+	baseApp.RootCmd.AddCommand(updateCmd)
 	// add health command
 	baseApp.RootCmd.AddCommand(newHealthCmd())
 

beszel/dockerfile_agent

@@ -0,0 +1,26 @@
+FROM --platform=$BUILDPLATFORM golang:alpine AS builder
+
+WORKDIR /app
+
+COPY go.mod go.sum ./
+# RUN go mod download
+COPY *.go ./
+COPY cmd ./cmd
+COPY internal ./internal
+
+# Build
+ARG TARGETOS TARGETARCH
+RUN CGO_ENABLED=0 GOGC=75 GOOS=$TARGETOS GOARCH=$TARGETARCH go build -ldflags "-w -s" -o /agent ./cmd/agent
+
+RUN rm -rf /tmp/*
+
+# --------------------------
+# Final image: default scratch-based agent
+# --------------------------
+FROM scratch
+COPY --from=builder /agent /agent
+
+# this is so we don't need to create the /tmp directory in the scratch container
+COPY --from=builder /tmp /tmp
+
+ENTRYPOINT ["/agent"]

beszel/dockerfile_agent_nvidia

@@ -12,15 +12,10 @@ COPY internal ./internal
 ARG TARGETOS TARGETARCH
 RUN CGO_ENABLED=0 GOGC=75 GOOS=$TARGETOS GOARCH=$TARGETARCH go build -ldflags "-w -s" -o /agent ./cmd/agent
 
-RUN rm -rf /tmp/*
-
-# ? -------------------------
-FROM scratch
-
+# --------------------------
+# Final image: GPU-enabled agent with nvidia-smi
+# --------------------------
+FROM nvidia/cuda:12.2.2-base-ubuntu22.04
 COPY --from=builder /agent /agent
 
-# this is so we don't need to create the 
-# /tmp directory in the scratch container
-COPY --from=builder /tmp /tmp
-
 ENTRYPOINT ["/agent"]

beszel/go.mod

@@ -7,20 +7,20 @@ replace github.com/nicholas-fedor/shoutrrr => github.com/nicholas-fedor/shoutrrr
 
 require (
 	github.com/blang/semver v3.5.1+incompatible
+	github.com/distatus/battery v0.11.0
 	github.com/fxamacker/cbor/v2 v2.9.0
 	github.com/gliderlabs/ssh v0.3.8
 	github.com/google/uuid v1.6.0
 	github.com/lxzan/gws v1.8.9
-	github.com/nicholas-fedor/shoutrrr v0.8.15
+	github.com/nicholas-fedor/shoutrrr v0.8.17
 	github.com/pocketbase/dbx v1.11.0
-	github.com/pocketbase/pocketbase v0.29.0
-	github.com/rhysd/go-github-selfupdate v1.2.3
+	github.com/pocketbase/pocketbase v0.29.3
 	github.com/shirou/gopsutil/v4 v4.25.6
 	github.com/spf13/cast v1.9.2
 	github.com/spf13/cobra v1.9.1
-	github.com/stretchr/testify v1.10.0
-	golang.org/x/crypto v0.40.0
-	golang.org/x/exp v0.0.0-20250718183923-645b1fa84792
+	github.com/stretchr/testify v1.11.0
+	golang.org/x/crypto v0.41.0
+	golang.org/x/exp v0.0.0-20250819193227-8b4c13bb791b
 	gopkg.in/yaml.v3 v3.0.1
 )
 
@@ -39,13 +39,10 @@ require (
 	github.com/go-ole/go-ole v1.3.0 // indirect
 	github.com/go-ozzo/ozzo-validation/v4 v4.3.0 // indirect
 	github.com/go-sql-driver/mysql v1.9.1 // indirect
-	github.com/golang-jwt/jwt/v5 v5.2.3 // indirect
-	github.com/google/go-github/v30 v30.1.0 // indirect
-	github.com/google/go-querystring v1.1.0 // indirect
-	github.com/inconshreveable/go-update v0.0.0-20160112193335-8152e7eb6ccf // indirect
+	github.com/golang-jwt/jwt/v5 v5.3.0 // indirect
 	github.com/inconshreveable/mousetrap v1.1.0 // indirect
 	github.com/klauspost/compress v1.18.0 // indirect
-	github.com/lufia/plan9stats v0.0.0-20250317134145-8bc96cf8fc35 // indirect
+	github.com/lufia/plan9stats v0.0.0-20250821153705-5981dea3221d // indirect
 	github.com/mattn/go-colorable v0.1.14 // indirect
 	github.com/mattn/go-isatty v0.0.20 // indirect
 	github.com/ncruces/go-strftime v0.1.9 // indirect
@@ -53,20 +50,20 @@ require (
 	github.com/power-devops/perfstat v0.0.0-20240221224432-82ca36839d55 // indirect
 	github.com/remyoudompheng/bigfft v0.0.0-20230129092748-24d4a6f8daec // indirect
 	github.com/spf13/pflag v1.0.7 // indirect
-	github.com/tcnksm/go-gitconfig v0.1.2 // indirect
 	github.com/tklauser/go-sysconf v0.3.15 // indirect
 	github.com/tklauser/numcpus v0.10.0 // indirect
-	github.com/ulikunitz/xz v0.5.12 // indirect
 	github.com/x448/float16 v0.8.4 // indirect
 	github.com/yusufpapurcu/wmi v1.2.4 // indirect
-	golang.org/x/image v0.29.0 // indirect
-	golang.org/x/net v0.42.0 // indirect
+	golang.org/x/image v0.30.0 // indirect
+	golang.org/x/net v0.43.0 // indirect
 	golang.org/x/oauth2 v0.30.0 // indirect
 	golang.org/x/sync v0.16.0 // indirect
-	golang.org/x/sys v0.34.0 // indirect
-	golang.org/x/text v0.27.0 // indirect
-	modernc.org/libc v1.65.10 // indirect
+	golang.org/x/sys v0.35.0 // indirect
+	golang.org/x/text v0.28.0 // indirect
+	gopkg.in/check.v1 v1.0.0-20180628173108-788fd7840127 // indirect
+	howett.net/plist v1.0.1 // indirect
+	modernc.org/libc v1.66.3 // indirect
 	modernc.org/mathutil v1.7.1 // indirect
 	modernc.org/memory v1.11.0 // indirect
-	modernc.org/sqlite v1.38.0 // indirect
+	modernc.org/sqlite v1.38.2 // indirect
 )

beszel/go.sum

@@ -13,6 +13,8 @@ github.com/davecgh/go-spew v1.1.2-0.20180830191138-d8f796af33cc h1:U9qPSI2PIWSS1
 github.com/davecgh/go-spew v1.1.2-0.20180830191138-d8f796af33cc/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
 github.com/disintegration/imaging v1.6.2 h1:w1LecBlG2Lnp8B3jk5zSuNqd7b4DXhcjwek1ei82L+c=
 github.com/disintegration/imaging v1.6.2/go.mod h1:44/5580QXChDfwIclfc/PCwrr44amcmDAg8hxG0Ewe4=
+github.com/distatus/battery v0.11.0 h1:KJk89gz90Iq/wJtbjjM9yUzBXV+ASV/EG2WOOL7N8lc=
+github.com/distatus/battery v0.11.0/go.mod h1:KmVkE8A8hpIX4T78QRdMktYpEp35QfOL8A8dwZBxq2k=
 github.com/dolthub/maphash v0.1.0 h1:bsQ7JsF4FkkWyrP3oCnFJgrCUAFbFf3kOl4L/QxPDyQ=
 github.com/dolthub/maphash v0.1.0/go.mod h1:gkg4Ch4CdCDu5h6PMriVLawB7koZ+5ijb9puGMV50a4=
 github.com/domodwyer/mailyak/v3 v3.6.2 h1:x3tGMsyFhTCaxp6ycgR0FE/bu5QiNp+hetUuCOBXMn8=
@@ -25,7 +27,6 @@ github.com/fatih/color v1.18.0 h1:S8gINlzdQ840/4pfAwic/ZE0djQEH3wM94VfqLTZcOM=
 github.com/fatih/color v1.18.0/go.mod h1:4FelSpRwEGDpQ12mAdzqdOukCy4u8WUtOY6lkT/6HfU=
 github.com/frankban/quicktest v1.14.6 h1:7Xjx+VpznH+oBnejlPUj8oUpdxnVs4f8XU8WnHkI4W8=
 github.com/frankban/quicktest v1.14.6/go.mod h1:4ptaffx2x8+WTWXmUCuVU6aPUX1/Mz7zb5vbUoiM6w0=
-github.com/fsnotify/fsnotify v1.4.7/go.mod h1:jwhsz4b93w/PPRr/qN1Yymfu8t87LnFCMoQvtojpjFo=
 github.com/fxamacker/cbor/v2 v2.9.0 h1:NpKPmjDBgUfBms6tr6JZkTHtfFGcMKsw3eGcmD/sapM=
 github.com/fxamacker/cbor/v2 v2.9.0/go.mod h1:vM4b+DJCtHn+zz7h3FFp/hDAI9WNWCsZj23V5ytsSxQ=
 github.com/gabriel-vasile/mimetype v1.4.9 h1:5k+WDwEsD9eTLL8Tz3L0VnmVh9QxGjRmjBvAG7U/oYY=
@@ -46,41 +47,28 @@ github.com/go-sql-driver/mysql v1.9.1 h1:FrjNGn/BsJQjVRuSa8CBrM5BWA9BWoXXat3KrtS
 github.com/go-sql-driver/mysql v1.9.1/go.mod h1:qn46aNg1333BRMNU69Lq93t8du/dwxI64Gl8i5p1WMU=
 github.com/go-task/slim-sprig/v3 v3.0.0 h1:sUs3vkvUymDpBKi3qH1YSqBQk9+9D/8M2mN1vB6EwHI=
 github.com/go-task/slim-sprig/v3 v3.0.0/go.mod h1:W848ghGpv3Qj3dhTPRyJypKRiqCdHZiAzKg9hl15HA8=
-github.com/golang-jwt/jwt/v5 v5.2.3 h1:kkGXqQOBSDDWRhWNXTFpqGSCMyh/PLnqUvMGJPDJDs0=
-github.com/golang-jwt/jwt/v5 v5.2.3/go.mod h1:pqrtFR0X4osieyHYxtmOUWsAWrfe1Q5UVIyoH402zdk=
-github.com/golang/protobuf v1.2.0/go.mod h1:6lQm79b+lXiMfvg/cZm0SGofjICqVBUtrP5yJMmIC1U=
+github.com/golang-jwt/jwt/v5 v5.3.0 h1:pv4AsKCKKZuqlgs5sUmn4x8UlGa0kEVt/puTpKx9vvo=
+github.com/golang-jwt/jwt/v5 v5.3.0/go.mod h1:fxCRLWMO43lRc8nhHWY6LGqRcf+1gQWArsqaEUEa5bE=
 github.com/golang/protobuf v1.3.1/go.mod h1:6lQm79b+lXiMfvg/cZm0SGofjICqVBUtrP5yJMmIC1U=
-github.com/golang/protobuf v1.3.2/go.mod h1:6lQm79b+lXiMfvg/cZm0SGofjICqVBUtrP5yJMmIC1U=
-github.com/google/go-cmp v0.5.2/go.mod h1:v8dTdLbMG2kIc/vJvl+f65V22dbkXbowE6jgT/gNBxE=
 github.com/google/go-cmp v0.7.0 h1:wk8382ETsv4JYUZwIsn6YpYiWiBsYLSJiTsyBybVuN8=
 github.com/google/go-cmp v0.7.0/go.mod h1:pXiqmnSA92OHEEa9HXL2W4E7lf9JzCmGVUdgjX3N/iU=
-github.com/google/go-github/v30 v30.1.0 h1:VLDx+UolQICEOKu2m4uAoMti1SxuEBAl7RSEG16L+Oo=
-github.com/google/go-github/v30 v30.1.0/go.mod h1:n8jBpHl45a/rlBUtRJMOG4GhNADUQFEufcolZ95JfU8=
-github.com/google/go-querystring v1.0.0/go.mod h1:odCYkC5MyYFN7vkCjXpyrEuKhc/BUO6wN/zVPAxq5ck=
-github.com/google/go-querystring v1.1.0 h1:AnCroh3fv4ZBgVIf1Iwtovgjaw/GiKJo8M8yD/fhyJ8=
-github.com/google/go-querystring v1.1.0/go.mod h1:Kcdr2DB4koayq7X8pmAG4sNG59So17icRSOU623lUBU=
 github.com/google/pprof v0.0.0-20250403155104-27863c87afa6 h1:BHT72Gu3keYf3ZEu2J0b1vyeLSOYI8bm5wbJM/8yDe8=
 github.com/google/pprof v0.0.0-20250403155104-27863c87afa6/go.mod h1:boTsfXsheKC2y+lKOCMpSfarhxDeIzfZG1jqGcPl3cA=
 github.com/google/uuid v1.6.0 h1:NIvaJDMOsjHA8n1jAhLSgzrAzy1Hgr+hNrb57e+94F0=
 github.com/google/uuid v1.6.0/go.mod h1:TIyPZe4MgqvfeYDBFedMoGGpEw/LqOeaOT+nhxU+yHo=
-github.com/hpcloud/tail v1.0.0/go.mod h1:ab1qPbhIpdTxEkNHXyeSf5vhxWSCs/tWer42PpOxQnU=
-github.com/inconshreveable/go-update v0.0.0-20160112193335-8152e7eb6ccf h1:WfD7VjIE6z8dIvMsI4/s+1qr5EL+zoIGev1BQj1eoJ8=
-github.com/inconshreveable/go-update v0.0.0-20160112193335-8152e7eb6ccf/go.mod h1:hyb9oH7vZsitZCiBt0ZvifOrB+qc8PS5IiilCIb87rg=
 github.com/inconshreveable/mousetrap v1.1.0 h1:wN+x4NVGpMsO7ErUn/mUI3vEoE6Jt13X2s0bqwp9tc8=
 github.com/inconshreveable/mousetrap v1.1.0/go.mod h1:vpF70FUmC8bwa3OWnCshd2FqLfsEA9PFc4w1p2J65bw=
 github.com/jarcoal/httpmock v1.4.0 h1:BvhqnH0JAYbNudL2GMJKgOHe2CtKlzJ/5rWKyp+hc2k=
 github.com/jarcoal/httpmock v1.4.0/go.mod h1:ftW1xULwo+j0R0JJkJIIi7UKigZUXCLLanykgjwBXL0=
+github.com/jessevdk/go-flags v1.4.0/go.mod h1:4FA24M0QyGHXBuZZK/XkWh8h0e1EYbRYJSGM75WSRxI=
 github.com/klauspost/compress v1.18.0 h1:c/Cqfb0r+Yi+JtIEq73FWXVkRonBlf0CRNYc8Zttxdo=
 github.com/klauspost/compress v1.18.0/go.mod h1:2Pp+KzxcywXVXMr50+X0Q/Lsb43OQHYWRCY2AiWywWQ=
-github.com/kr/pretty v0.1.0/go.mod h1:dAy3ld7l9f0ibDNOQOHHMYYIIbhfbHSm3C4ZsoJORNo=
 github.com/kr/pretty v0.3.1 h1:flRD4NNwYAUpkphVc1HcthR4KEIFJ65n8Mw5qdRn3LE=
 github.com/kr/pretty v0.3.1/go.mod h1:hoEshYVHaxMs3cyo3Yncou5ZscifuDolrwPKZanG3xk=
-github.com/kr/pty v1.1.1/go.mod h1:pFQYn66WHrOpPYNljwOMqo10TkYh1fy3cYio2l3bCsQ=
-github.com/kr/text v0.1.0/go.mod h1:4Jbv+DJW3UT/LiOwJeYQe1efqtUx/iVham/4vfdArNI=
 github.com/kr/text v0.2.0 h1:5Nx0Ya0ZqY2ygV366QzturHI13Jq95ApcVaJBhpS+AY=
 github.com/kr/text v0.2.0/go.mod h1:eLer722TekiGuMkidMxC/pM04lWEeraHUUmBw8l2grE=
-github.com/lufia/plan9stats v0.0.0-20250317134145-8bc96cf8fc35 h1:PpXWgLPs+Fqr325bN2FD2ISlRRztXibcX6e8f5FR5Dc=
-github.com/lufia/plan9stats v0.0.0-20250317134145-8bc96cf8fc35/go.mod h1:autxFIvghDt3jPTLoqZ9OZ7s9qTGNAWmYCjVFWPX/zg=
+github.com/lufia/plan9stats v0.0.0-20250821153705-5981dea3221d h1:vFzYZc8yji+9DmNRhpEbs8VBK4CgV/DPfGzeVJSSp/8=
+github.com/lufia/plan9stats v0.0.0-20250821153705-5981dea3221d/go.mod h1:autxFIvghDt3jPTLoqZ9OZ7s9qTGNAWmYCjVFWPX/zg=
 github.com/lxzan/gws v1.8.9 h1:VU3SGUeWlQrEwfUSfokcZep8mdg/BrUF+y73YYshdBM=
 github.com/lxzan/gws v1.8.9/go.mod h1:d9yHaR1eDTBHagQC6KY7ycUOaz5KWeqQtP3xu7aMK8Y=
 github.com/mattn/go-colorable v0.1.14 h1:9A9LHSqF/7dyVVX6g0U9cwm9pG3kP9gSzcuIPHPsaIE=
@@ -91,11 +79,8 @@ github.com/ncruces/go-strftime v0.1.9 h1:bY0MQC28UADQmHmaF5dgpLmImcShSi2kHU9XLdh
 github.com/ncruces/go-strftime v0.1.9/go.mod h1:Fwc5htZGVVkseilnfgOVb9mKy6w1naJmn9CehxcKcls=
 github.com/nicholas-fedor/shoutrrr v0.8.8 h1:F/oyoatWK5cbHPPgkjRZrA0262TP7KWuUQz9KskRtR8=
 github.com/nicholas-fedor/shoutrrr v0.8.8/go.mod h1:T30Y+eoZFEjDk4HtOItcHQioZSOe3Z6a6aNfSz6jc5c=
-github.com/onsi/ginkgo v1.6.0 h1:Ix8l273rp3QzYgXSR+c8d1fTG7UPgYkOSELPhiY/YGw=
-github.com/onsi/ginkgo v1.6.0/go.mod h1:lLunBs/Ym6LB5Z9jYTR76FiuTmxDTDusOGeTQH+WWjE=
 github.com/onsi/ginkgo/v2 v2.23.4 h1:ktYTpKJAVZnDT4VjxSbiBenUjmlL/5QkBEocaWXiQus=
 github.com/onsi/ginkgo/v2 v2.23.4/go.mod h1:Bt66ApGPBFzHyR+JO10Zbt0Gsp4uWxu5mIOTusL46e8=
-github.com/onsi/gomega v1.4.2/go.mod h1:ex+gbHU/CVuBBDIJjb2X0qEXbFg53c61hWP/1CpauHY=
 github.com/onsi/gomega v1.37.0 h1:CdEG8g0S133B4OswTDC/5XPSzE1OeP29QOioj2PID2Y=
 github.com/onsi/gomega v1.37.0/go.mod h1:8D9+Txp43QWKhM24yyOBEdpkzN8FvJyAwecBgsU4KU0=
 github.com/pmezard/go-difflib v1.0.0/go.mod h1:iKH77koFhYxTK1pcRnkKkqfTogsbg7gZNVY4sRDYZ/4=
@@ -103,14 +88,12 @@ github.com/pmezard/go-difflib v1.0.1-0.20181226105442-5d4384ee4fb2 h1:Jamvg5psRI
 github.com/pmezard/go-difflib v1.0.1-0.20181226105442-5d4384ee4fb2/go.mod h1:iKH77koFhYxTK1pcRnkKkqfTogsbg7gZNVY4sRDYZ/4=
 github.com/pocketbase/dbx v1.11.0 h1:LpZezioMfT3K4tLrqA55wWFw1EtH1pM4tzSVa7kgszU=
 github.com/pocketbase/dbx v1.11.0/go.mod h1:xXRCIAKTHMgUCyCKZm55pUOdvFziJjQfXaWKhu2vhMs=
-github.com/pocketbase/pocketbase v0.29.0 h1:oL6qvkU2QSybClVtQdaq9Z1F3Wk59iKYCfIaf1R8KUs=
-github.com/pocketbase/pocketbase v0.29.0/go.mod h1:SqyH7o/3e+/uLySATlJqxH4S8gyU6R0adG56ZSV1vuU=
+github.com/pocketbase/pocketbase v0.29.3 h1:Mj8o5awsbVJIdIoTuQNhfC2oL/c4aImQ3RyfFZlzFVg=
+github.com/pocketbase/pocketbase v0.29.3/go.mod h1:oGpT67LObxCFK4V2fSL7J9YnPbBnnshOpJ5v3zcneww=
 github.com/power-devops/perfstat v0.0.0-20240221224432-82ca36839d55 h1:o4JXh1EVt9k/+g42oCprj/FisM4qX9L3sZB3upGN2ZU=
 github.com/power-devops/perfstat v0.0.0-20240221224432-82ca36839d55/go.mod h1:OmDBASR4679mdNQnz2pUhc2G8CO2JrUAVFDRBDP/hJE=
 github.com/remyoudompheng/bigfft v0.0.0-20230129092748-24d4a6f8daec h1:W09IVJc94icq4NjY3clb7Lk8O1qJ8BdBEF8z0ibU0rE=
 github.com/remyoudompheng/bigfft v0.0.0-20230129092748-24d4a6f8daec/go.mod h1:qqbHyh8v60DhA7CoWK5oRCqLrMHRGoxYCSS9EjAz6Eo=
-github.com/rhysd/go-github-selfupdate v1.2.3 h1:iaa+J202f+Nc+A8zi75uccC8Wg3omaM7HDeimXA22Ag=
-github.com/rhysd/go-github-selfupdate v1.2.3/go.mod h1:mp/N8zj6jFfBQy/XMYoWsmfzxazpPAODuqarmPDe2Rg=
 github.com/rogpeppe/go-internal v1.9.0 h1:73kH8U+JUqXU8lRuOHeVHaa/SZPifC7BkcraZVejAe8=
 github.com/rogpeppe/go-internal v1.9.0/go.mod h1:WtVeX8xhTBvf0smdhujwtBcq4Qrzq/fJaraNFVN+nFs=
 github.com/russross/blackfriday/v2 v2.1.0/go.mod h1:+Rmxgy9KzJVeS9/2gXHxylqXiyQDYRxCVz55jmeOWTM=
@@ -125,17 +108,12 @@ github.com/spf13/pflag v1.0.7 h1:vN6T9TfwStFPFM5XzjsvmzZkLuaLX+HS+0SeFLRgU6M=
 github.com/spf13/pflag v1.0.7/go.mod h1:McXfInJRrz4CZXVZOBLb0bTZqETkiAhM9Iw0y3An2Bg=
 github.com/stretchr/objx v0.1.0/go.mod h1:HFkY916IF+rwdDfMAkV7OtwuqBVzrE8GR6GFx+wExME=
 github.com/stretchr/testify v1.4.0/go.mod h1:j7eGeouHqKxXV5pUuKE4zz7dFj8WfuZ+81PSLYec5m4=
-github.com/stretchr/testify v1.10.0 h1:Xv5erBjTwe/5IxqUQTdXv5kgmIvbHo3QQyRwhJsOfJA=
-github.com/stretchr/testify v1.10.0/go.mod h1:r2ic/lqez/lEtzL7wO/rwa5dbSLXVDPFyf8C91i36aY=
-github.com/tcnksm/go-gitconfig v0.1.2 h1:iiDhRitByXAEyjgBqsKi9QU4o2TNtv9kPP3RgPgXBPw=
-github.com/tcnksm/go-gitconfig v0.1.2/go.mod h1:/8EhP4H7oJZdIPyT+/UIsG87kTzrzM4UsLGSItWYCpE=
+github.com/stretchr/testify v1.11.0 h1:ib4sjIrwZKxE5u/Japgo/7SJV3PvgjGiRNAvTVGqQl8=
+github.com/stretchr/testify v1.11.0/go.mod h1:wZwfW3scLgRK+23gO65QZefKpKQRnfz6sD981Nm4B6U=
 github.com/tklauser/go-sysconf v0.3.15 h1:VE89k0criAymJ/Os65CSn1IXaol+1wrsFHEB8Ol49K4=
 github.com/tklauser/go-sysconf v0.3.15/go.mod h1:Dmjwr6tYFIseJw7a3dRLJfsHAMXZ3nEnL/aZY+0IuI4=
 github.com/tklauser/numcpus v0.10.0 h1:18njr6LDBk1zuna922MgdjQuJFjrdppsZG60sHGfjso=
 github.com/tklauser/numcpus v0.10.0/go.mod h1:BiTKazU708GQTYF4mB+cmlpT2Is1gLk7XVuEeem8LsQ=
-github.com/ulikunitz/xz v0.5.9/go.mod h1:nbz6k7qbPmH4IRqmfOplQw/tblSgqTqBwxkY0oWt/14=
-github.com/ulikunitz/xz v0.5.12 h1:37Nm15o69RwBkXM0J6A5OlE67RZTfzUxTj8fB3dfcsc=
-github.com/ulikunitz/xz v0.5.12/go.mod h1:nbz6k7qbPmH4IRqmfOplQw/tblSgqTqBwxkY0oWt/14=
 github.com/x448/float16 v0.8.4 h1:qLwI1I70+NjRFUR3zs1JPUCgaCXSh3SW62uAKT1mSBM=
 github.com/x448/float16 v0.8.4/go.mod h1:14CWIYCyZA/cWjXOioeEpHeN/83MdbZDRQHoFcYsOfg=
 github.com/yusufpapurcu/wmi v1.2.4 h1:zFUKzehAFReQwLys1b/iSMl+JQGSCSjtVqQn9bBrPo0=
@@ -143,65 +121,50 @@ github.com/yusufpapurcu/wmi v1.2.4/go.mod h1:SBZ9tNy3G9/m5Oi98Zks0QjeHVDvuK0qfxQ
 go.uber.org/automaxprocs v1.6.0 h1:O3y2/QNTOdbF+e/dpXNNW7Rx2hZ4sTIPyybbxyNqTUs=
 go.uber.org/automaxprocs v1.6.0/go.mod h1:ifeIMSnPZuznNm6jmdzmU3/bfk01Fe2fotchwEFJ8r8=
 golang.org/x/crypto v0.0.0-20190308221718-c2843e01d9a2/go.mod h1:djNgcEr1/C05ACkg1iLfiJU5Ep61QUkGW8qpdssI0+w=
-golang.org/x/crypto v0.0.0-20201221181555-eec23a3978ad/go.mod h1:jdWPYTVW3xRLrWPugEBEK3UY2ZEsg3UU495nc5E+M+I=
-golang.org/x/crypto v0.40.0 h1:r4x+VvoG5Fm+eJcxMaY8CQM7Lb0l1lsmjGBQ6s8BfKM=
-golang.org/x/crypto v0.40.0/go.mod h1:Qr1vMER5WyS2dfPHAlsOj01wgLbsyWtFn/aY+5+ZdxY=
-golang.org/x/exp v0.0.0-20250718183923-645b1fa84792 h1:R9PFI6EUdfVKgwKjZef7QIwGcBKu86OEFpJ9nUEP2l4=
-golang.org/x/exp v0.0.0-20250718183923-645b1fa84792/go.mod h1:A+z0yzpGtvnG90cToK5n2tu8UJVP2XUATh+r+sfOOOc=
+golang.org/x/crypto v0.41.0 h1:WKYxWedPGCTVVl5+WHSSrOBT0O8lx32+zxmHxijgXp4=
+golang.org/x/crypto v0.41.0/go.mod h1:pO5AFd7FA68rFak7rOAGVuygIISepHftHnr8dr6+sUc=
+golang.org/x/exp v0.0.0-20250819193227-8b4c13bb791b h1:DXr+pvt3nC887026GRP39Ej11UATqWDmWuS99x26cD0=
+golang.org/x/exp v0.0.0-20250819193227-8b4c13bb791b/go.mod h1:4QTo5u+SEIbbKW1RacMZq1YEfOBqeXa19JeshGi+zc4=
 golang.org/x/image v0.0.0-20191009234506-e7c1f5e7dbb8/go.mod h1:FeLwcggjj3mMvU+oOTbSwawSJRM1uh48EjtB4UJZlP0=
-golang.org/x/image v0.29.0 h1:HcdsyR4Gsuys/Axh0rDEmlBmB68rW1U9BUdB3UVHsas=
-golang.org/x/image v0.29.0/go.mod h1:RVJROnf3SLK8d26OW91j4FrIHGbsJ8QnbEocVTOWQDA=
-golang.org/x/mod v0.26.0 h1:EGMPT//Ezu+ylkCijjPc+f4Aih7sZvaAr+O3EHBxvZg=
-golang.org/x/mod v0.26.0/go.mod h1:/j6NAhSk8iQ723BGAUyoAcn7SlD7s15Dp9Nd/SfeaFQ=
-golang.org/x/net v0.0.0-20180724234803-3673e40ba225/go.mod h1:mL1N/T3taQHkDXs73rZJwtUhF3w3ftmwwsq0BUmARs4=
-golang.org/x/net v0.0.0-20180906233101-161cd47e91fd/go.mod h1:mL1N/T3taQHkDXs73rZJwtUhF3w3ftmwwsq0BUmARs4=
-golang.org/x/net v0.0.0-20190311183353-d8887717615a/go.mod h1:t9HGtf8HONx5eT2rtn7q6eTqICYqUVnKs3thJo3Qplg=
-golang.org/x/net v0.0.0-20190404232315-eb5bcb51f2a3/go.mod h1:t9HGtf8HONx5eT2rtn7q6eTqICYqUVnKs3thJo3Qplg=
+golang.org/x/image v0.30.0 h1:jD5RhkmVAnjqaCUXfbGBrn3lpxbknfN9w2UhHHU+5B4=
+golang.org/x/image v0.30.0/go.mod h1:SAEUTxCCMWSrJcCy/4HwavEsfZZJlYxeHLc6tTiAe/c=
+golang.org/x/mod v0.27.0 h1:kb+q2PyFnEADO2IEF935ehFUXlWiNjJWtRNgBLSfbxQ=
+golang.org/x/mod v0.27.0/go.mod h1:rWI627Fq0DEoudcK+MBkNkCe0EetEaDSwJJkCcjpazc=
 golang.org/x/net v0.0.0-20190603091049-60506f45cf65/go.mod h1:HSz+uSET+XFnRR8LxR5pz3Of3rY3CfYBVs4xY44aLks=
-golang.org/x/net v0.42.0 h1:jzkYrhi3YQWD6MLBJcsklgQsoAcw89EcZbJw8Z614hs=
-golang.org/x/net v0.42.0/go.mod h1:FF1RA5d3u7nAYA4z2TkclSCKh68eSXtiFwcWQpPXdt8=
-golang.org/x/oauth2 v0.0.0-20180821212333-d2e6202438be/go.mod h1:N/0e6XlmueqKjAGxoOufVs8QHGRruUQn6yWY3a++T0U=
-golang.org/x/oauth2 v0.0.0-20181106182150-f42d05182288/go.mod h1:N/0e6XlmueqKjAGxoOufVs8QHGRruUQn6yWY3a++T0U=
+golang.org/x/net v0.43.0 h1:lat02VYK2j4aLzMzecihNvTlJNQUq316m2Mr9rnM6YE=
+golang.org/x/net v0.43.0/go.mod h1:vhO1fvI4dGsIjh73sWfUVjj3N7CA9WkKJNQm2svM6Jg=
 golang.org/x/oauth2 v0.30.0 h1:dnDm7JmhM45NNpd8FDDeLhK6FwqbOf4MLCM9zb1BOHI=
 golang.org/x/oauth2 v0.30.0/go.mod h1:B++QgG3ZKulg6sRPGD/mqlHQs5rB3Ml9erfeDY7xKlU=
-golang.org/x/sync v0.0.0-20180314180146-1d60e4601c6f/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
 golang.org/x/sync v0.16.0 h1:ycBJEhp9p4vXvUZNszeOq0kGTPghopOL8q0fq3vstxw=
 golang.org/x/sync v0.16.0/go.mod h1:1dzgHSNfp02xaA81J2MS99Qcpr2w7fw1gpm99rleRqA=
-golang.org/x/sys v0.0.0-20180909124046-d0be0721c37e/go.mod h1:STP8DvDyc/dI5b8T5hshtkjS+E42TnysNCUPdjciGhY=
 golang.org/x/sys v0.0.0-20190215142949-d0b11bdaac8a/go.mod h1:STP8DvDyc/dI5b8T5hshtkjS+E42TnysNCUPdjciGhY=
 golang.org/x/sys v0.0.0-20190916202348-b4ddaad3f8a3/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
-golang.org/x/sys v0.0.0-20191026070338-33540a1f6037/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
 golang.org/x/sys v0.0.0-20201204225414-ed752295db88/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
 golang.org/x/sys v0.1.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.6.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
-golang.org/x/sys v0.34.0 h1:H5Y5sJ2L2JRdyv7ROF1he/lPdvFsd0mJHFw2ThKHxLA=
-golang.org/x/sys v0.34.0/go.mod h1:BJP2sWEmIv4KK5OTEluFJCKSidICx8ciO85XgH3Ak8k=
-golang.org/x/term v0.0.0-20201117132131-f5c789dd3221/go.mod h1:Nr5EML6q2oocZ2LXRh80K7BxOlk5/8JxuGnuhpl+muw=
-golang.org/x/term v0.33.0 h1:NuFncQrRcaRvVmgRkvM3j/F00gWIAlcmlB8ACEKmGIg=
-golang.org/x/term v0.33.0/go.mod h1:s18+ql9tYWp1IfpV9DmCtQDDSRBUjKaw9M1eAv5UeF0=
+golang.org/x/sys v0.35.0 h1:vz1N37gP5bs89s7He8XuIYXpyY0+QlsKmzipCbUtyxI=
+golang.org/x/sys v0.35.0/go.mod h1:BJP2sWEmIv4KK5OTEluFJCKSidICx8ciO85XgH3Ak8k=
+golang.org/x/term v0.34.0 h1:O/2T7POpk0ZZ7MAzMeWFSg6S5IpWd/RXDlM9hgM3DR4=
+golang.org/x/term v0.34.0/go.mod h1:5jC53AEywhIVebHgPVeg0mj8OD3VO9OzclacVrqpaAw=
 golang.org/x/text v0.3.0/go.mod h1:NqM8EUOU14njkJ3fqMW+pc6Ldnwhi/IjpwHt7yyuwOQ=
 golang.org/x/text v0.3.2/go.mod h1:bEr9sfX3Q8Zfm5fL9x+3itogRgK3+ptLWKqgva+5dAk=
-golang.org/x/text v0.3.5/go.mod h1:5Zoc/QRtKVWzQhOtBMvqHzDpF6irO9z98xDceosuGiQ=
-golang.org/x/text v0.27.0 h1:4fGWRpyh641NLlecmyl4LOe6yDdfaYNrGb2zdfo4JV4=
-golang.org/x/text v0.27.0/go.mod h1:1D28KMCvyooCX9hBiosv5Tz/+YLxj0j7XhWjpSUF7CU=
+golang.org/x/text v0.28.0 h1:rhazDwis8INMIwQ4tpjLDzUhx6RlXqZNPEM0huQojng=
+golang.org/x/text v0.28.0/go.mod h1:U8nCwOR8jO/marOQ0QbDiOngZVEBB7MAiitBuMjXiNU=
 golang.org/x/tools v0.0.0-20180917221912-90fa682c2a6e/go.mod h1:n7NCudcB/nEzxVGmLbDWY5pfWTLqBcC2KZ6jyYvM4mQ=
-golang.org/x/tools v0.35.0 h1:mBffYraMEf7aa0sB+NuKnuCy8qI/9Bughn8dC2Gu5r0=
-golang.org/x/tools v0.35.0/go.mod h1:NKdj5HkL/73byiZSJjqJgKn3ep7KjFkBOkR/Hps3VPw=
-golang.org/x/xerrors v0.0.0-20191204190536-9bdfabe68543/go.mod h1:I/5z698sn9Ka8TeJc9MKroUUfqBBauWjQqLJ2OPfmY0=
-google.golang.org/appengine v1.1.0/go.mod h1:EbEs0AVv82hx2wNQdGPgUI5lhzA/G0D9YwlJXL52JkM=
-google.golang.org/appengine v1.3.0/go.mod h1:xpcJRLb0r/rnEns0DIKYYv+WjYCduHsrkT7/EB5XEv4=
+golang.org/x/tools v0.36.0 h1:kWS0uv/zsvHEle1LbV5LE8QujrxB3wfQyxHfhOk0Qkg=
+golang.org/x/tools v0.36.0/go.mod h1:WBDiHKJK8YgLHlcQPYQzNCkUxUypCaa5ZegCVutKm+s=
 google.golang.org/appengine v1.6.5/go.mod h1:8WjMMxjGQR8xUklV/ARdw2HLXBOI7O7uCIDZVag1xfc=
 google.golang.org/protobuf v1.36.6 h1:z1NpPI8ku2WgiWnf+t9wTPsn6eP1L7ksHUlkfLvd9xY=
 google.golang.org/protobuf v1.36.6/go.mod h1:jduwjTPXsFjZGTmRluh+L6NjiWu7pchiJ2/5YcXBHnY=
 gopkg.in/check.v1 v0.0.0-20161208181325-20d25e280405/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=
 gopkg.in/check.v1 v1.0.0-20180628173108-788fd7840127 h1:qIbj1fsPNlZgppZ+VLlY7N33q108Sa+fhmuc+sWQYwY=
 gopkg.in/check.v1 v1.0.0-20180628173108-788fd7840127/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=
-gopkg.in/fsnotify.v1 v1.4.7/go.mod h1:Tz8NjZHkW78fSQdbUxIjBTcgA1z1m8ZHf0WmKUhAMys=
-gopkg.in/tomb.v1 v1.0.0-20141024135613-dd632973f1e7/go.mod h1:dt/ZhP58zS4L8KSrWDmTeBkI65Dw0HsyUHuEVlX15mw=
-gopkg.in/yaml.v2 v2.2.1/go.mod h1:hI93XBmqTisBFMUTm0b8Fm+jr3Dg1NNxqwp+5A1VGuI=
+gopkg.in/yaml.v1 v1.0.0-20140924161607-9f9df34309c0/go.mod h1:WDnlLJ4WF5VGsH/HVa3CI79GS0ol3YnhVnKP89i0kNg=
 gopkg.in/yaml.v2 v2.2.2/go.mod h1:hI93XBmqTisBFMUTm0b8Fm+jr3Dg1NNxqwp+5A1VGuI=
 gopkg.in/yaml.v3 v3.0.1 h1:fxVm/GzAzEWqLHuvctI91KS9hhNmmWOoWu0XTYJS7CA=
 gopkg.in/yaml.v3 v3.0.1/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=
+howett.net/plist v1.0.1 h1:37GdZ8tP09Q35o9ych3ehygcsL+HqKSwzctveSlarvM=
+howett.net/plist v1.0.1/go.mod h1:lqaXoTrLY4hg8tnEzNru53gicrbv7rrk+2xJA/7hw9g=
 modernc.org/cc/v4 v4.26.2 h1:991HMkLjJzYBIfha6ECZdjrIYz2/1ayr+FL8GN+CNzM=
 modernc.org/cc/v4 v4.26.2/go.mod h1:uVtb5OGqUKpoLWhqwNQo/8LwvoiEBLvZXIQ/SmO6mL0=
 modernc.org/ccgo/v4 v4.28.0 h1:rjznn6WWehKq7dG4JtLRKxb52Ecv8OUGah8+Z/SfpNU=
@@ -212,8 +175,6 @@ modernc.org/gc/v2 v2.6.5 h1:nyqdV8q46KvTpZlsw66kWqwXRHdjIlJOhG6kxiV/9xI=
 modernc.org/gc/v2 v2.6.5/go.mod h1:YgIahr1ypgfe7chRuJi2gD7DBQiKSLMPgBQe9oIiito=
 modernc.org/goabi0 v0.2.0 h1:HvEowk7LxcPd0eq6mVOAEMai46V+i7Jrj13t4AzuNks=
 modernc.org/goabi0 v0.2.0/go.mod h1:CEFRnnJhKvWT1c1JTI3Avm+tgOWbkOu5oPA8eH8LnMI=
-modernc.org/libc v1.65.10 h1:ZwEk8+jhW7qBjHIT+wd0d9VjitRyQef9BnzlzGwMODc=
-modernc.org/libc v1.65.10/go.mod h1:StFvYpx7i/mXtBAfVOjaU0PWZOvIRoZSgXhrwXzr8Po=
 modernc.org/libc v1.66.3 h1:cfCbjTUcdsKyyZZfEUKfoHcP3S0Wkvz3jgSzByEWVCQ=
 modernc.org/libc v1.66.3/go.mod h1:XD9zO8kt59cANKvHPXpx7yS2ELPheAey0vjIuZOhOU8=
 modernc.org/mathutil v1.7.1 h1:GCZVGXdaN8gTqB1Mf/usp1Y/hSqgI2vAGGP4jZMCxOU=
@@ -224,8 +185,8 @@ modernc.org/opt v0.1.4 h1:2kNGMRiUjrp4LcaPuLY2PzUfqM/w9N23quVwhKt5Qm8=
 modernc.org/opt v0.1.4/go.mod h1:03fq9lsNfvkYSfxrfUhZCWPk1lm4cq4N+Bh//bEtgns=
 modernc.org/sortutil v1.2.1 h1:+xyoGf15mM3NMlPDnFqrteY07klSFxLElE2PVuWIJ7w=
 modernc.org/sortutil v1.2.1/go.mod h1:7ZI3a3REbai7gzCLcotuw9AC4VZVpYMjDzETGsSMqJE=
-modernc.org/sqlite v1.38.0 h1:+4OrfPQ8pxHKuWG4md1JpR/EYAh3Md7TdejuuzE7EUI=
-modernc.org/sqlite v1.38.0/go.mod h1:1Bj+yES4SVvBZ4cBOpVZ6QgesMCKpJZDq0nxYzOpmNE=
+modernc.org/sqlite v1.38.2 h1:Aclu7+tgjgcQVShZqim41Bbw9Cho0y/7WzYptXqkEek=
+modernc.org/sqlite v1.38.2/go.mod h1:cPTJYSlgg3Sfg046yBShXENNtPrWrDX8bsbAQBzgQ5E=
 modernc.org/strutil v1.2.1 h1:UneZBkQA+DX2Rp35KcM69cSsNES9ly8mQWD71HKlOA0=
 modernc.org/strutil v1.2.1/go.mod h1:EHkiggD70koQxjVdSBM3JKM7k6L0FbGE5eymy9i3B9A=
 modernc.org/token v1.1.0 h1:Xl7Ap9dKaEs5kLoOQeQmPWevfnk/DM5qcLcYlA8ys6Y=

beszel/internal/agent/agent_cache_test.go

@@ -14,7 +14,7 @@ import (
 )
 
 func TestSessionCache_GetSet(t *testing.T) {
-	synctest.Run(func() {
+	synctest.Test(t, func(t *testing.T) {
 		cache := NewSessionCache(69 * time.Second)
 
 		testData := &system.CombinedData{

beszel/internal/agent/battery/battery.go

@@ -0,0 +1,53 @@
+//go:build !freebsd
+
+// Package battery provides functions to check if the system has a battery and to get the battery stats.
+package battery
+
+import (
+	"errors"
+	"log/slog"
+
+	"github.com/distatus/battery"
+)
+
+var systemHasBattery = false
+var haveCheckedBattery = false
+
+// HasReadableBattery checks if the system has a battery and returns true if it does.
+func HasReadableBattery() bool {
+	if haveCheckedBattery {
+		return systemHasBattery
+	}
+	haveCheckedBattery = true
+	bat, err := battery.Get(0)
+	if err == nil && bat != nil {
+		systemHasBattery = true
+	} else {
+		slog.Debug("No battery found", "err", err)
+	}
+	return systemHasBattery
+}
+
+// GetBatteryStats returns the current battery percent and charge state
+func GetBatteryStats() (batteryPercent uint8, batteryState uint8, err error) {
+	if !systemHasBattery {
+		return batteryPercent, batteryState, errors.ErrUnsupported
+	}
+	batteries, err := battery.GetAll()
+	if err != nil || len(batteries) == 0 {
+		return batteryPercent, batteryState, err
+	}
+	totalCapacity := float64(0)
+	totalCharge := float64(0)
+	for _, bat := range batteries {
+		if bat.Design != 0 {
+			totalCapacity += bat.Design
+		} else {
+			totalCapacity += bat.Full
+		}
+		totalCharge += bat.Current
+	}
+	batteryPercent = uint8(totalCharge / totalCapacity * 100)
+	batteryState = uint8(batteries[0].State.Raw)
+	return batteryPercent, batteryState, nil
+}

beszel/internal/agent/battery/battery_freebsd.go

@@ -0,0 +1,13 @@
+//go:build freebsd
+
+package battery
+
+import "errors"
+
+func HasReadableBattery() bool {
+	return false
+}
+
+func GetBatteryStats() (uint8, uint8, error) {
+	return 0, 0, errors.ErrUnsupported
+}

beszel/internal/agent/health/health_test.go

@@ -39,7 +39,7 @@ func TestHealth(t *testing.T) {
 	// This test uses synctest to simulate time passing.
 	// NOTE: This test requires GOEXPERIMENT=synctest to run.
 	t.Run("check with simulated time", func(t *testing.T) {
-		synctest.Run(func() {
+		synctest.Test(t, func(t *testing.T) {
 			// Update the file to set the initial timestamp.
 			require.NoError(t, Update(), "Update() failed inside synctest")
 

beszel/internal/agent/system.go

@@ -2,6 +2,7 @@ package agent
 
 import (
 	"beszel"
+	"beszel/internal/agent/battery"
 	"beszel/internal/entities/system"
 	"bufio"
 	"fmt"
@@ -59,10 +60,10 @@ func (a *Agent) initializeSystemInfo() {
 	}
 
 	// zfs
-	if _, err := getARCSize(); err == nil {
-		a.zfs = true
-	} else {
+	if _, err := getARCSize(); err != nil {
 		slog.Debug("Not monitoring ZFS ARC", "err", err)
+	} else {
+		a.zfs = true
 	}
 }
 
@@ -70,6 +71,11 @@ func (a *Agent) initializeSystemInfo() {
 func (a *Agent) getSystemStats() system.Stats {
 	systemStats := system.Stats{}
 
+	// battery
+	if battery.HasReadableBattery() {
+		systemStats.Battery[0], systemStats.Battery[1], _ = battery.GetBatteryStats()
+	}
+
 	// cpu percent
 	cpuPct, err := cpu.Percent(0, false)
 	if err != nil {
@@ -80,7 +86,6 @@ func (a *Agent) getSystemStats() system.Stats {
 
 	// load average
 	if avgstat, err := load.Avg(); err == nil {
-		// TODO: remove these in future release in favor of load avg array
 		systemStats.LoadAvg[0] = avgstat.Load1
 		systemStats.LoadAvg[1] = avgstat.Load5
 		systemStats.LoadAvg[2] = avgstat.Load15

beszel/internal/agent/update.go

@@ -1,56 +1,150 @@
 package agent
 
 import (
-	"beszel"
+	"beszel/internal/ghupdate"
 	"fmt"
+	"log"
 	"os"
+	"os/exec"
 	"strings"
-
-	"github.com/blang/semver"
-	"github.com/rhysd/go-github-selfupdate/selfupdate"
 )
 
-// Update updates beszel-agent to the latest version
-func Update() {
-	var latest *selfupdate.Release
-	var found bool
-	var err error
-	currentVersion := semver.MustParse(beszel.Version)
-	fmt.Println("beszel-agent", currentVersion)
-	fmt.Println("Checking for updates...")
-	updater, _ := selfupdate.NewUpdater(selfupdate.Config{
-		Filters: []string{"beszel-agent"},
-	})
-	latest, found, err = updater.DetectLatest("henrygd/beszel")
-
-	if err != nil {
-		fmt.Println("Error checking for updates:", err)
-		os.Exit(1)
-	}
-
-	if !found {
-		fmt.Println("No updates found")
-		os.Exit(0)
-	}
-
-	fmt.Println("Latest version:", latest.Version)
-
-	if latest.Version.LTE(currentVersion) {
-		fmt.Println("You are up to date")
-		return
-	}
-
-	var binaryPath string
-	fmt.Printf("Updating from %s to %s...\n", currentVersion, latest.Version)
-	binaryPath, err = os.Executable()
-	if err != nil {
-		fmt.Println("Error getting binary path:", err)
-		os.Exit(1)
-	}
-	err = selfupdate.UpdateTo(latest.AssetURL, binaryPath)
-	if err != nil {
-		fmt.Println("Please try rerunning with sudo. Error:", err)
-		os.Exit(1)
-	}
-	fmt.Printf("Successfully updated to %s\n\n%s\n", latest.Version, strings.TrimSpace(latest.ReleaseNotes))
+// restarter knows how to restart the beszel-agent service.
+type restarter interface {
+	Restart() error
+}
+
+type systemdRestarter struct{ cmd string }
+
+func (s *systemdRestarter) Restart() error {
+	// Only restart if the service is active
+	if err := exec.Command(s.cmd, "is-active", "beszel-agent.service").Run(); err != nil {
+		return nil
+	}
+	ghupdate.ColorPrint(ghupdate.ColorYellow, "Restarting beszel-agent.service via systemd…")
+	return exec.Command(s.cmd, "restart", "beszel-agent.service").Run()
+}
+
+type openRCRestarter struct{ cmd string }
+
+func (o *openRCRestarter) Restart() error {
+	if err := exec.Command(o.cmd, "status", "beszel-agent").Run(); err != nil {
+		return nil
+	}
+	ghupdate.ColorPrint(ghupdate.ColorYellow, "Restarting beszel-agent via OpenRC…")
+	return exec.Command(o.cmd, "restart", "beszel-agent").Run()
+}
+
+type openWRTRestarter struct{ cmd string }
+
+func (w *openWRTRestarter) Restart() error {
+	if err := exec.Command(w.cmd, "running", "beszel-agent").Run(); err != nil {
+		return nil
+	}
+	ghupdate.ColorPrint(ghupdate.ColorYellow, "Restarting beszel-agent via procd…")
+	return exec.Command(w.cmd, "restart", "beszel-agent").Run()
+}
+
+func detectRestarter() restarter {
+	if path, err := exec.LookPath("systemctl"); err == nil {
+		return &systemdRestarter{cmd: path}
+	}
+	if path, err := exec.LookPath("rc-service"); err == nil {
+		return &openRCRestarter{cmd: path}
+	}
+	if path, err := exec.LookPath("service"); err == nil {
+		return &openWRTRestarter{cmd: path}
+	}
+	return nil
+}
+
+// Update checks GitHub for a newer release of beszel-agent, applies it,
+// fixes SELinux context if needed, and restarts the service.
+func Update(useMirror bool) error {
+	exePath, _ := os.Executable()
+
+	dataDir, err := getDataDir()
+	if err != nil {
+		dataDir = os.TempDir()
+	}
+	updated, err := ghupdate.Update(ghupdate.Config{
+		ArchiveExecutable: "beszel-agent",
+		DataDir:           dataDir,
+		UseMirror:         useMirror,
+	})
+	if err != nil {
+		log.Fatal(err)
+	}
+	if !updated {
+		return nil
+	}
+
+	// make sure the file is executable
+	if err := os.Chmod(exePath, 0755); err != nil {
+		ghupdate.ColorPrintf(ghupdate.ColorYellow, "Warning: failed to set executable permissions: %v", err)
+	}
+	// set ownership to beszel:beszel if possible
+	if chownPath, err := exec.LookPath("chown"); err == nil {
+		if err := exec.Command(chownPath, "beszel:beszel", exePath).Run(); err != nil {
+			ghupdate.ColorPrintf(ghupdate.ColorYellow, "Warning: failed to set file ownership: %v", err)
+		}
+	}
+
+	// 6) Fix SELinux context if necessary
+	if err := handleSELinuxContext(exePath); err != nil {
+		ghupdate.ColorPrintf(ghupdate.ColorYellow, "Warning: SELinux context handling: %v", err)
+	}
+
+	// 7) Restart service if running under a recognised init system
+	if r := detectRestarter(); r != nil {
+		if err := r.Restart(); err != nil {
+			ghupdate.ColorPrintf(ghupdate.ColorYellow, "Warning: failed to restart service: %v", err)
+			ghupdate.ColorPrint(ghupdate.ColorYellow, "Please restart the service manually.")
+		} else {
+			ghupdate.ColorPrint(ghupdate.ColorGreen, "Service restarted successfully")
+		}
+	} else {
+		ghupdate.ColorPrint(ghupdate.ColorYellow, "No supported init system detected; please restart manually if needed.")
+	}
+
+	return nil
+}
+
+// handleSELinuxContext restores or applies the correct SELinux label to the binary.
+func handleSELinuxContext(path string) error {
+	out, err := exec.Command("getenforce").Output()
+	if err != nil {
+		// SELinux not enabled or getenforce not available
+		return nil
+	}
+	state := strings.TrimSpace(string(out))
+	if state == "Disabled" {
+		return nil
+	}
+
+	ghupdate.ColorPrint(ghupdate.ColorYellow, "SELinux is enabled; applying context…")
+	var errs []string
+
+	// Try persistent context via semanage+restorecon
+	if semanagePath, err := exec.LookPath("semanage"); err == nil {
+		if err := exec.Command(semanagePath, "fcontext", "-a", "-t", "bin_t", path).Run(); err != nil {
+			errs = append(errs, "semanage fcontext failed: "+err.Error())
+		} else if restoreconPath, err := exec.LookPath("restorecon"); err == nil {
+			if err := exec.Command(restoreconPath, "-v", path).Run(); err != nil {
+				errs = append(errs, "restorecon failed: "+err.Error())
+			}
+		}
+	}
+
+	// Fallback to temporary context via chcon
+	if chconPath, err := exec.LookPath("chcon"); err == nil {
+		if err := exec.Command(chconPath, "-t", "bin_t", path).Run(); err != nil {
+			errs = append(errs, "chcon failed: "+err.Error())
+		}
+	}
+
+	if len(errs) > 0 {
+		return fmt.Errorf("SELinux context errors: %s", strings.Join(errs, "; "))
+	}
+	return nil
 }

beszel/internal/alerts/alerts.go

@@ -10,7 +10,6 @@ import (
 
 	"github.com/nicholas-fedor/shoutrrr"
 	"github.com/pocketbase/dbx"
-	"github.com/pocketbase/pocketbase/apis"
 	"github.com/pocketbase/pocketbase/core"
 	"github.com/pocketbase/pocketbase/tools/mailer"
 )
@@ -206,16 +205,14 @@ func (am *AlertManager) SendShoutrrrAlert(notificationUrl, title, message, link,
 }
 
 func (am *AlertManager) SendTestNotification(e *core.RequestEvent) error {
-	info, _ := e.RequestInfo()
-	if info.Auth == nil {
-		return apis.NewForbiddenError("Forbidden", nil)
+	var data struct {
+		URL string `json:"url"`
 	}
-	url := e.Request.URL.Query().Get("url")
-	// log.Println("url", url)
-	if url == "" {
-		return e.JSON(200, map[string]string{"err": "URL is required"})
+	err := e.BindBody(&data)
+	if err != nil || data.URL == "" {
+		return e.BadRequestError("URL is required", err)
 	}
-	err := am.SendShoutrrrAlert(url, "Test Alert", "This is a notification from Beszel.", am.hub.Settings().Meta.AppURL, "View Beszel")
+	err = am.SendShoutrrrAlert(data.URL, "Test Alert", "This is a notification from Beszel.", am.hub.Settings().Meta.AppURL, "View Beszel")
 	if err != nil {
 		return e.JSON(200, map[string]string{"err": err.Error()})
 	}

beszel/internal/alerts/alerts_api.go

@@ -0,0 +1,119 @@
+package alerts
+
+import (
+	"database/sql"
+	"errors"
+	"net/http"
+
+	"github.com/pocketbase/dbx"
+	"github.com/pocketbase/pocketbase/core"
+)
+
+// UpsertUserAlerts handles API request to create or update alerts for a user
+// across multiple systems (POST /api/beszel/user-alerts)
+func UpsertUserAlerts(e *core.RequestEvent) error {
+	userID := e.Auth.Id
+
+	reqData := struct {
+		Min       uint8    `json:"min"`
+		Value     float64  `json:"value"`
+		Name      string   `json:"name"`
+		Systems   []string `json:"systems"`
+		Overwrite bool     `json:"overwrite"`
+	}{}
+	err := e.BindBody(&reqData)
+	if err != nil || userID == "" || reqData.Name == "" || len(reqData.Systems) == 0 {
+		return e.BadRequestError("Bad data", err)
+	}
+
+	alertsCollection, err := e.App.FindCachedCollectionByNameOrId("alerts")
+	if err != nil {
+		return err
+	}
+
+	err = e.App.RunInTransaction(func(txApp core.App) error {
+		for _, systemId := range reqData.Systems {
+			// find existing matching alert
+			alertRecord, err := txApp.FindFirstRecordByFilter(alertsCollection,
+				"system={:system} && name={:name} && user={:user}",
+				dbx.Params{"system": systemId, "name": reqData.Name, "user": userID})
+
+			if err != nil && !errors.Is(err, sql.ErrNoRows) {
+				return err
+			}
+
+			// skip if alert already exists and overwrite is not set
+			if !reqData.Overwrite && alertRecord != nil {
+				continue
+			}
+
+			// create new alert if it doesn't exist
+			if alertRecord == nil {
+				alertRecord = core.NewRecord(alertsCollection)
+				alertRecord.Set("user", userID)
+				alertRecord.Set("system", systemId)
+				alertRecord.Set("name", reqData.Name)
+			}
+
+			alertRecord.Set("value", reqData.Value)
+			alertRecord.Set("min", reqData.Min)
+
+			if err := txApp.SaveNoValidate(alertRecord); err != nil {
+				return err
+			}
+		}
+		return nil
+	})
+
+	if err != nil {
+		return err
+	}
+
+	return e.JSON(http.StatusOK, map[string]any{"success": true})
+}
+
+// DeleteUserAlerts handles API request to delete alerts for a user across multiple systems
+// (DELETE /api/beszel/user-alerts)
+func DeleteUserAlerts(e *core.RequestEvent) error {
+	userID := e.Auth.Id
+
+	reqData := struct {
+		AlertName string   `json:"name"`
+		Systems   []string `json:"systems"`
+	}{}
+	err := e.BindBody(&reqData)
+	if err != nil || userID == "" || reqData.AlertName == "" || len(reqData.Systems) == 0 {
+		return e.BadRequestError("Bad data", err)
+	}
+
+	var numDeleted uint16
+
+	err = e.App.RunInTransaction(func(txApp core.App) error {
+		for _, systemId := range reqData.Systems {
+			// Find existing alert to delete
+			alertRecord, err := txApp.FindFirstRecordByFilter("alerts",
+				"system={:system} && name={:name} && user={:user}",
+				dbx.Params{"system": systemId, "name": reqData.AlertName, "user": userID})
+
+			if err != nil {
+				if errors.Is(err, sql.ErrNoRows) {
+					// alert doesn't exist, continue to next system
+					continue
+				}
+				return err
+			}
+
+			if err := txApp.Delete(alertRecord); err != nil {
+				return err
+			}
+			numDeleted++
+		}
+		return nil
+	})
+
+	if err != nil {
+		return err
+	}
+
+	return e.JSON(http.StatusOK, map[string]any{"success": true, "count": numDeleted})
+}

beszel/internal/alerts/alerts_history.go

@@ -12,7 +12,7 @@ func resolveHistoryOnAlertDelete(e *core.RecordEvent) error {
 	if !e.Record.GetBool("triggered") {
 		return e.Next()
 	}
-	_ = resolveAlertHistoryRecord(e.App, e.Record)
+	_ = resolveAlertHistoryRecord(e.App, e.Record.Id)
 	return e.Next()
 }
 
@@ -36,19 +36,19 @@ func updateHistoryOnAlertUpdate(e *core.RecordEvent) error {
 	}
 
 	// if new state is not triggered, check for matching alert history record and set it to resolved
-	_ = resolveAlertHistoryRecord(e.App, new)
+	_ = resolveAlertHistoryRecord(e.App, new.Id)
 	return e.Next()
 }
 
 // resolveAlertHistoryRecord sets the resolved field to the current time
-func resolveAlertHistoryRecord(app core.App, alertRecord *core.Record) error {
+func resolveAlertHistoryRecord(app core.App, alertRecordID string) error {
 	alertHistoryRecords, err := app.FindRecordsByFilter(
 		"alerts_history",
 		"alert_id={:alert_id} && resolved=null",
 		"-created",
 		1,
 		0,
-		dbx.Params{"alert_id": alertRecord.Id},
+		dbx.Params{"alert_id": alertRecordID},
 	)
 	if err != nil {
 		return err

beszel/internal/alerts/alerts_test.go

@@ -0,0 +1,368 @@
+//go:build testing
+// +build testing
+
+package alerts_test
+
+import (
+	"bytes"
+	"encoding/json"
+	"io"
+	"net/http"
+	"strings"
+	"testing"
+
+	beszelTests "beszel/internal/tests"
+
+	"github.com/pocketbase/dbx"
+	"github.com/pocketbase/pocketbase/core"
+	pbTests "github.com/pocketbase/pocketbase/tests"
+	"github.com/stretchr/testify/assert"
+)
+
+// marshal to json and return an io.Reader (for use in ApiScenario.Body)
+func jsonReader(v any) io.Reader {
+	data, err := json.Marshal(v)
+	if err != nil {
+		panic(err)
+	}
+	return bytes.NewReader(data)
+}
+
+func TestUserAlertsApi(t *testing.T) {
+	hub, _ := beszelTests.NewTestHub(t.TempDir())
+	defer hub.Cleanup()
+
+	hub.StartHub()
+
+	user1, _ := beszelTests.CreateUser(hub, "alertstest@example.com", "password")
+	user1Token, _ := user1.NewAuthToken()
+
+	user2, _ := beszelTests.CreateUser(hub, "alertstest2@example.com", "password")
+	user2Token, _ := user2.NewAuthToken()
+
+	system1, _ := beszelTests.CreateRecord(hub, "systems", map[string]any{
+		"name":  "system1",
+		"users": []string{user1.Id},
+		"host":  "127.0.0.1",
+	})
+
+	system2, _ := beszelTests.CreateRecord(hub, "systems", map[string]any{
+		"name":  "system2",
+		"users": []string{user1.Id, user2.Id},
+		"host":  "127.0.0.2",
+	})
+
+	userRecords, _ := hub.CountRecords("users")
+	assert.EqualValues(t, 2, userRecords, "all users should be created")
+
+	systemRecords, _ := hub.CountRecords("systems")
+	assert.EqualValues(t, 2, systemRecords, "all systems should be created")
+
+	testAppFactory := func(t testing.TB) *pbTests.TestApp {
+		return hub.TestApp
+	}
+
+	scenarios := []beszelTests.ApiScenario{
+		{
+			Name:            "GET not implemented - returns index",
+			Method:          http.MethodGet,
+			URL:             "/api/beszel/user-alerts",
+			ExpectedStatus:  200,
+			ExpectedContent: []string{"<html ", "globalThis.BESZEL"},
+			TestAppFactory:  testAppFactory,
+		},
+		{
+			Name:            "POST no auth",
+			Method:          http.MethodPost,
+			URL:             "/api/beszel/user-alerts",
+			ExpectedStatus:  401,
+			ExpectedContent: []string{"requires valid"},
+			TestAppFactory:  testAppFactory,
+		},
+		{
+			Name:   "POST no body",
+			Method: http.MethodPost,
+			URL:    "/api/beszel/user-alerts",
+			Headers: map[string]string{
+				"Authorization": user1Token,
+			},
+			ExpectedStatus:  400,
+			ExpectedContent: []string{"Bad data"},
+			TestAppFactory:  testAppFactory,
+		},
+		{
+			Name:   "POST bad data",
+			Method: http.MethodPost,
+			URL:    "/api/beszel/user-alerts",
+			Headers: map[string]string{
+				"Authorization": user1Token,
+			},
+			ExpectedStatus:  400,
+			ExpectedContent: []string{"Bad data"},
+			TestAppFactory:  testAppFactory,
+			Body: jsonReader(map[string]any{
+				"invalidField": "this should cause validation error",
+				"threshold":    "not a number",
+			}),
+		},
+		{
+			Name:   "POST malformed JSON",
+			Method: http.MethodPost,
+			URL:    "/api/beszel/user-alerts",
+			Headers: map[string]string{
+				"Authorization": user1Token,
+			},
+			ExpectedStatus:  400,
+			ExpectedContent: []string{"Bad data"},
+			TestAppFactory:  testAppFactory,
+			Body:            strings.NewReader(`{"alertType": "cpu", "threshold": 80, "enabled": true,}`),
+		},
+		{
+			Name:   "POST valid alert data multiple systems",
+			Method: http.MethodPost,
+			URL:    "/api/beszel/user-alerts",
+			Headers: map[string]string{
+				"Authorization": user1Token,
+			},
+			ExpectedStatus:  200,
+			ExpectedContent: []string{"\"success\":true"},
+			TestAppFactory:  testAppFactory,
+			Body: jsonReader(map[string]any{
+				"name":      "CPU",
+				"value":     69,
+				"min":       9,
+				"systems":   []string{system1.Id, system2.Id},
+				"overwrite": false,
+			}),
+			AfterTestFunc: func(t testing.TB, app *pbTests.TestApp, res *http.Response) {
+				// check total alerts
+				alerts, _ := app.CountRecords("alerts")
+				assert.EqualValues(t, 2, alerts, "should have 2 alerts")
+				// check alert has correct values
+				matchingAlerts, _ := app.CountRecords("alerts", dbx.HashExp{"name": "CPU", "user": user1.Id, "system": system1.Id, "value": 69, "min": 9})
+				assert.EqualValues(t, 1, matchingAlerts, "should have 1 alert")
+			},
+		},
+		{
+			Name:   "POST valid alert data single system",
+			Method: http.MethodPost,
+			URL:    "/api/beszel/user-alerts",
+			Headers: map[string]string{
+				"Authorization": user1Token,
+			},
+			ExpectedStatus:  200,
+			ExpectedContent: []string{"\"success\":true"},
+			TestAppFactory:  testAppFactory,
+			Body: jsonReader(map[string]any{
+				"name":    "Memory",
+				"systems": []string{system1.Id},
+				"value":   90,
+				"min":     10,
+			}),
+			AfterTestFunc: func(t testing.TB, app *pbTests.TestApp, res *http.Response) {
+				user1Alerts, _ := app.CountRecords("alerts", dbx.HashExp{"user": user1.Id})
+				assert.EqualValues(t, 3, user1Alerts, "should have 3 alerts")
+			},
+		},
+		{
+			Name:   "Overwrite: false, should not overwrite existing alert",
+			Method: http.MethodPost,
+			URL:    "/api/beszel/user-alerts",
+			Headers: map[string]string{
+				"Authorization": user1Token,
+			},
+			ExpectedStatus:  200,
+			ExpectedContent: []string{"\"success\":true"},
+			TestAppFactory:  testAppFactory,
+			Body: jsonReader(map[string]any{
+				"name":      "CPU",
+				"value":     45,
+				"min":       5,
+				"systems":   []string{system1.Id},
+				"overwrite": false,
+			}),
+			BeforeTestFunc: func(t testing.TB, app *pbTests.TestApp, e *core.ServeEvent) {
+				beszelTests.ClearCollection(t, app, "alerts")
+				beszelTests.CreateRecord(app, "alerts", map[string]any{
+					"name":   "CPU",
+					"system": system1.Id,
+					"user":   user1.Id,
+					"value":  80,
+					"min":    10,
+				})
+			},
+			AfterTestFunc: func(t testing.TB, app *pbTests.TestApp, res *http.Response) {
+				alerts, _ := app.CountRecords("alerts")
+				assert.EqualValues(t, 1, alerts, "should have 1 alert")
+				alert, _ := app.FindFirstRecordByFilter("alerts", "name = 'CPU' && user = {:user}", dbx.Params{"user": user1.Id})
+				assert.EqualValues(t, 80, alert.Get("value"), "should have 80 as value")
+			},
+		},
+		{
+			Name:   "Overwrite: true, should overwrite existing alert",
+			Method: http.MethodPost,
+			URL:    "/api/beszel/user-alerts",
+			Headers: map[string]string{
+				"Authorization": user2Token,
+			},
+			ExpectedStatus:  200,
+			ExpectedContent: []string{"\"success\":true"},
+			TestAppFactory:  testAppFactory,
+			Body: jsonReader(map[string]any{
+				"name":      "CPU",
+				"value":     45,
+				"min":       5,
+				"systems":   []string{system2.Id},
+				"overwrite": true,
+			}),
+			BeforeTestFunc: func(t testing.TB, app *pbTests.TestApp, e *core.ServeEvent) {
+				beszelTests.ClearCollection(t, app, "alerts")
+				beszelTests.CreateRecord(app, "alerts", map[string]any{
+					"name":   "CPU",
+					"system": system2.Id,
+					"user":   user2.Id,
+					"value":  80,
+					"min":    10,
+				})
+			},
+			AfterTestFunc: func(t testing.TB, app *pbTests.TestApp, res *http.Response) {
+				alerts, _ := app.CountRecords("alerts")
+				assert.EqualValues(t, 1, alerts, "should have 1 alert")
+				alert, _ := app.FindFirstRecordByFilter("alerts", "name = 'CPU' && user = {:user}", dbx.Params{"user": user2.Id})
+				assert.EqualValues(t, 45, alert.Get("value"), "should have 45 as value")
+			},
+		},
+		{
+			Name:            "DELETE no auth",
+			Method:          http.MethodDelete,
+			URL:             "/api/beszel/user-alerts",
+			ExpectedStatus:  401,
+			ExpectedContent: []string{"requires valid"},
+			TestAppFactory:  testAppFactory,
+			Body: jsonReader(map[string]any{
+				"name":    "CPU",
+				"systems": []string{system1.Id},
+			}),
+			BeforeTestFunc: func(t testing.TB, app *pbTests.TestApp, e *core.ServeEvent) {
+				beszelTests.ClearCollection(t, app, "alerts")
+				beszelTests.CreateRecord(app, "alerts", map[string]any{
+					"name":   "CPU",
+					"system": system1.Id,
+					"user":   user1.Id,
+					"value":  80,
+					"min":    10,
+				})
+			},
+			AfterTestFunc: func(t testing.TB, app *pbTests.TestApp, res *http.Response) {
+				alerts, _ := app.CountRecords("alerts")
+				assert.EqualValues(t, 1, alerts, "should have 1 alert")
+			},
+		},
+		{
+			Name:   "DELETE alert",
+			Method: http.MethodDelete,
+			URL:    "/api/beszel/user-alerts",
+			Headers: map[string]string{
+				"Authorization": user1Token,
+			},
+			ExpectedStatus:  200,
+			ExpectedContent: []string{"\"count\":1", "\"success\":true"},
+			TestAppFactory:  testAppFactory,
+			Body: jsonReader(map[string]any{
+				"name":    "CPU",
+				"systems": []string{system1.Id},
+			}),
+			BeforeTestFunc: func(t testing.TB, app *pbTests.TestApp, e *core.ServeEvent) {
+				beszelTests.ClearCollection(t, app, "alerts")
+				beszelTests.CreateRecord(app, "alerts", map[string]any{
+					"name":   "CPU",
+					"system": system1.Id,
+					"user":   user1.Id,
+					"value":  80,
+					"min":    10,
+				})
+			},
+			AfterTestFunc: func(t testing.TB, app *pbTests.TestApp, res *http.Response) {
+				alerts, _ := app.CountRecords("alerts")
+				assert.Zero(t, alerts, "should have 0 alerts")
+			},
+		},
+		{
+			Name:   "DELETE alert multiple systems",
+			Method: http.MethodDelete,
+			URL:    "/api/beszel/user-alerts",
+			Headers: map[string]string{
+				"Authorization": user1Token,
+			},
+			ExpectedStatus:  200,
+			ExpectedContent: []string{"\"count\":2", "\"success\":true"},
+			TestAppFactory:  testAppFactory,
+			Body: jsonReader(map[string]any{
+				"name":    "Memory",
+				"systems": []string{system1.Id, system2.Id},
+			}),
+			BeforeTestFunc: func(t testing.TB, app *pbTests.TestApp, e *core.ServeEvent) {
+				beszelTests.ClearCollection(t, app, "alerts")
+				for _, systemId := range []string{system1.Id, system2.Id} {
+					_, err := beszelTests.CreateRecord(app, "alerts", map[string]any{
+						"name":   "Memory",
+						"system": systemId,
+						"user":   user1.Id,
+						"value":  90,
+						"min":    10,
+					})
+					assert.NoError(t, err, "should create alert")
+				}
+				alerts, _ := app.CountRecords("alerts")
+				assert.EqualValues(t, 2, alerts, "should have 2 alerts")
+			},
+			AfterTestFunc: func(t testing.TB, app *pbTests.TestApp, res *http.Response) {
+				alerts, _ := app.CountRecords("alerts")
+				assert.Zero(t, alerts, "should have 0 alerts")
+			},
+		},
+		{
+			Name:   "User 2 should not be able to delete alert of user 1",
+			Method: http.MethodDelete,
+			URL:    "/api/beszel/user-alerts",
+			Headers: map[string]string{
+				"Authorization": user2Token,
+			},
+			ExpectedStatus:  200,
+			ExpectedContent: []string{"\"count\":1", "\"success\":true"},
+			TestAppFactory:  testAppFactory,
+			Body: jsonReader(map[string]any{
+				"name":    "CPU",
+				"systems": []string{system2.Id},
+			}),
+			BeforeTestFunc: func(t testing.TB, app *pbTests.TestApp, e *core.ServeEvent) {
+				beszelTests.ClearCollection(t, app, "alerts")
+				for _, user := range []string{user1.Id, user2.Id} {
+					beszelTests.CreateRecord(app, "alerts", map[string]any{
+						"name":   "CPU",
+						"system": system2.Id,
+						"user":   user,
+						"value":  80,
+						"min":    10,
+					})
+				}
+				alerts, _ := app.CountRecords("alerts")
+				assert.EqualValues(t, 2, alerts, "should have 2 alerts")
+				user1AlertCount, _ := app.CountRecords("alerts", dbx.HashExp{"user": user1.Id})
+				assert.EqualValues(t, 1, user1AlertCount, "should have 1 alert")
+				user2AlertCount, _ := app.CountRecords("alerts", dbx.HashExp{"user": user2.Id})
+				assert.EqualValues(t, 1, user2AlertCount, "should have 1 alert")
+			},
+			AfterTestFunc: func(t testing.TB, app *pbTests.TestApp, res *http.Response) {
+				user1AlertCount, _ := app.CountRecords("alerts", dbx.HashExp{"user": user1.Id})
+				assert.EqualValues(t, 1, user1AlertCount, "should have 1 alert")
+				user2AlertCount, _ := app.CountRecords("alerts", dbx.HashExp{"user": user2.Id})
+				assert.Zero(t, user2AlertCount, "should have 0 alerts")
+			},
+		},
+	}
+
+	for _, scenario := range scenarios {
+		scenario.Test(t)
+	}
+}

beszel/internal/entities/system/system.go

@@ -36,8 +36,10 @@ type Stats struct {
 	LoadAvg15      float64             `json:"l15,omitempty" cbor:"25,keyasint,omitempty"`
 	Bandwidth      [2]uint64           `json:"b,omitzero" cbor:"26,keyasint,omitzero"`  // [sent bytes, recv bytes]
 	MaxBandwidth   [2]uint64           `json:"bm,omitzero" cbor:"27,keyasint,omitzero"` // [sent bytes, recv bytes]
-	LoadAvg        [3]float64          `json:"la,omitempty" cbor:"28,keyasint"`
 	// TODO: remove other load fields in future release in favor of load avg array
+	LoadAvg [3]float64 `json:"la,omitempty" cbor:"28,keyasint"`
+	Battery [2]uint8   `json:"bat,omitzero" cbor:"29,keyasint,omitzero"` // [percent, charge state, current]
+	MaxMem  float64    `json:"mm,omitempty" cbor:"30,keyasint,omitempty"`
 }
 
 type GPUData struct {
@@ -81,27 +83,27 @@ const (
 )
 
 type Info struct {
-	Hostname       string     `json:"h" cbor:"0,keyasint"`
-	KernelVersion  string     `json:"k,omitempty" cbor:"1,keyasint,omitempty"`
-	Cores          int        `json:"c" cbor:"2,keyasint"`
-	Threads        int        `json:"t,omitempty" cbor:"3,keyasint,omitempty"`
-	CpuModel       string     `json:"m" cbor:"4,keyasint"`
-	Uptime         uint64     `json:"u" cbor:"5,keyasint"`
-	Cpu            float64    `json:"cpu" cbor:"6,keyasint"`
-	MemPct         float64    `json:"mp" cbor:"7,keyasint"`
-	DiskPct        float64    `json:"dp" cbor:"8,keyasint"`
-	Bandwidth      float64    `json:"b" cbor:"9,keyasint"`
-	AgentVersion   string     `json:"v" cbor:"10,keyasint"`
-	Podman         bool       `json:"p,omitempty" cbor:"11,keyasint,omitempty"`
-	GpuPct         float64    `json:"g,omitempty" cbor:"12,keyasint,omitempty"`
-	DashboardTemp  float64    `json:"dt,omitempty" cbor:"13,keyasint,omitempty"`
-	Os             Os         `json:"os" cbor:"14,keyasint"`
-	LoadAvg1       float64    `json:"l1,omitempty" cbor:"15,keyasint,omitempty"`
-	LoadAvg5       float64    `json:"l5,omitempty" cbor:"16,keyasint,omitempty"`
-	LoadAvg15      float64    `json:"l15,omitempty" cbor:"17,keyasint,omitempty"`
-	BandwidthBytes uint64     `json:"bb" cbor:"18,keyasint"`
-	LoadAvg        [3]float64 `json:"la,omitempty" cbor:"19,keyasint"`
+	Hostname       string  `json:"h" cbor:"0,keyasint"`
+	KernelVersion  string  `json:"k,omitempty" cbor:"1,keyasint,omitempty"`
+	Cores          int     `json:"c" cbor:"2,keyasint"`
+	Threads        int     `json:"t,omitempty" cbor:"3,keyasint,omitempty"`
+	CpuModel       string  `json:"m" cbor:"4,keyasint"`
+	Uptime         uint64  `json:"u" cbor:"5,keyasint"`
+	Cpu            float64 `json:"cpu" cbor:"6,keyasint"`
+	MemPct         float64 `json:"mp" cbor:"7,keyasint"`
+	DiskPct        float64 `json:"dp" cbor:"8,keyasint"`
+	Bandwidth      float64 `json:"b" cbor:"9,keyasint"`
+	AgentVersion   string  `json:"v" cbor:"10,keyasint"`
+	Podman         bool    `json:"p,omitempty" cbor:"11,keyasint,omitempty"`
+	GpuPct         float64 `json:"g,omitempty" cbor:"12,keyasint,omitempty"`
+	DashboardTemp  float64 `json:"dt,omitempty" cbor:"13,keyasint,omitempty"`
+	Os             Os      `json:"os" cbor:"14,keyasint"`
+	LoadAvg1       float64 `json:"l1,omitempty" cbor:"15,keyasint,omitempty"`
+	LoadAvg5       float64 `json:"l5,omitempty" cbor:"16,keyasint,omitempty"`
+	LoadAvg15      float64 `json:"l15,omitempty" cbor:"17,keyasint,omitempty"`
+	BandwidthBytes uint64  `json:"bb" cbor:"18,keyasint"`
 	// TODO: remove load fields in future release in favor of load avg array
+	LoadAvg [3]float64 `json:"la,omitempty" cbor:"19,keyasint"`
 }
 
 // Final data structure to return to the hub

beszel/internal/ghupdate/extract.go

@@ -0,0 +1,140 @@
+package ghupdate
+
+import (
+	"archive/tar"
+	"archive/zip"
+	"compress/gzip"
+	"fmt"
+	"io"
+	"os"
+	"path/filepath"
+	"strings"
+)
+
+// extract extracts an archive file to the destination directory.
+// Supports .zip and .tar.gz files based on the file extension.
+func extract(srcPath, destDir string) error {
+	if strings.HasSuffix(srcPath, ".tar.gz") {
+		return extractTarGz(srcPath, destDir)
+	}
+	// Default to zip extraction
+	return extractZip(srcPath, destDir)
+}
+
+// extractTarGz extracts a tar.gz archive to the destination directory.
+func extractTarGz(srcPath, destDir string) error {
+	src, err := os.Open(srcPath)
+	if err != nil {
+		return err
+	}
+	defer src.Close()
+
+	gz, err := gzip.NewReader(src)
+	if err != nil {
+		return err
+	}
+	defer gz.Close()
+
+	tr := tar.NewReader(gz)
+
+	for {
+		header, err := tr.Next()
+		if err == io.EOF {
+			break
+		}
+		if err != nil {
+			return err
+		}
+
+		if header.Typeflag == tar.TypeDir {
+			if err := os.MkdirAll(filepath.Join(destDir, header.Name), 0755); err != nil {
+				return err
+			}
+			continue
+		}
+
+		if err := os.MkdirAll(filepath.Dir(filepath.Join(destDir, header.Name)), 0755); err != nil {
+			return err
+		}
+
+		outFile, err := os.Create(filepath.Join(destDir, header.Name))
+		if err != nil {
+			return err
+		}
+
+		if _, err := io.Copy(outFile, tr); err != nil {
+			outFile.Close()
+			return err
+		}
+		outFile.Close()
+	}
+
+	return nil
+}
+
+// extractZip extracts the zip archive at "src" to "dest".
+//
+// Note that only dirs and regular files will be extracted.
+// Symbolic links, named pipes, sockets, or any other irregular files
+// are skipped because they come with too many edge cases and ambiguities.
+func extractZip(src, dest string) error {
+	zr, err := zip.OpenReader(src)
+	if err != nil {
+		return err
+	}
+	defer zr.Close()
+
+	// normalize dest path to check later for Zip Slip
+	dest = filepath.Clean(dest) + string(os.PathSeparator)
+
+	for _, f := range zr.File {
+		err := extractFile(f, dest)
+		if err != nil {
+			return err
+		}
+	}
+
+	return nil
+}
+
+// extractFile extracts the provided zipFile into "basePath/zipFileName" path,
+// creating all the necessary path directories.
+func extractFile(zipFile *zip.File, basePath string) error {
+	path := filepath.Join(basePath, zipFile.Name)
+
+	// check for Zip Slip
+	if !strings.HasPrefix(path, basePath) {
+		return fmt.Errorf("invalid file path: %s", path)
+	}
+
+	r, err := zipFile.Open()
+	if err != nil {
+		return err
+	}
+	defer r.Close()
+
+	// allow only dirs or regular files
+	if zipFile.FileInfo().IsDir() {
+		if err := os.MkdirAll(path, os.ModePerm); err != nil {
+			return err
+		}
+	} else if zipFile.FileInfo().Mode().IsRegular() {
+		// ensure that the file path directories are created
+		if err := os.MkdirAll(filepath.Dir(path), os.ModePerm); err != nil {
+			return err
+		}
+
+		f, err := os.OpenFile(path, os.O_WRONLY|os.O_CREATE|os.O_TRUNC, zipFile.Mode())
+		if err != nil {
+			return err
+		}
+		defer f.Close()
+
+		_, err = io.Copy(f, r)
+		if err != nil {
+			return err
+		}
+	}
+
+	return nil
+}

beszel/internal/ghupdate/ghupdate.go

@@ -0,0 +1,348 @@
+// Package ghupdate implements a new command to self update the current
+// executable with the latest GitHub release. This is based on PocketBase's
+// ghupdate package with modifications.
+package ghupdate
+
+import (
+	"beszel"
+	"context"
+	"encoding/json"
+	"fmt"
+	"io"
+	"log/slog"
+	"net/http"
+	"os"
+	"path/filepath"
+	"runtime"
+	"strings"
+
+	"github.com/blang/semver"
+)
+
+// Minimal color functions using ANSI escape codes
+const (
+	colorReset  = "\033[0m"
+	ColorYellow = "\033[33m"
+	ColorGreen  = "\033[32m"
+	colorCyan   = "\033[36m"
+	colorGray   = "\033[90m"
+)
+
+func ColorPrint(color, text string) {
+	fmt.Println(color + text + colorReset)
+}
+
+func ColorPrintf(color, format string, args ...interface{}) {
+	fmt.Printf(color+format+colorReset+"\n", args...)
+}
+
+// HttpClient is a base HTTP client interface (usually used for test purposes).
+type HttpClient interface {
+	Do(req *http.Request) (*http.Response, error)
+}
+
+// Config defines the config options of the ghupdate plugin.
+//
+// NB! This plugin is considered experimental and its config options may change in the future.
+type Config struct {
+	// Owner specifies the account owner of the repository (default to "pocketbase").
+	Owner string
+
+	// Repo specifies the name of the repository (default to "pocketbase").
+	Repo string
+
+	// ArchiveExecutable specifies the name of the executable file in the release archive
+	// (default to "pocketbase"; an additional ".exe" check is also performed as a fallback).
+	ArchiveExecutable string
+
+	// Optional context to use when fetching and downloading the latest release.
+	Context context.Context
+
+	// The HTTP client to use when fetching and downloading the latest release.
+	// Defaults to `http.DefaultClient`.
+	HttpClient HttpClient
+
+	// The data directory to use when fetching and downloading the latest release.
+	DataDir string
+
+	// UseMirror specifies whether to use the beszel.dev mirror instead of GitHub API.
+	// When false (default), always uses api.github.com. When true, uses gh.beszel.dev.
+	UseMirror bool
+}
+
+type updater struct {
+	config         Config
+	currentVersion string
+}
+
+func Update(config Config) (updated bool, err error) {
+	p := &updater{
+		currentVersion: beszel.Version,
+		config:         config,
+	}
+
+	return p.update()
+}
+
+func (p *updater) update() (updated bool, err error) {
+	ColorPrint(ColorYellow, "Fetching release information...")
+
+	if p.config.DataDir == "" {
+		p.config.DataDir = os.TempDir()
+	}
+
+	if p.config.Owner == "" {
+		p.config.Owner = "henrygd"
+	}
+
+	if p.config.Repo == "" {
+		p.config.Repo = "beszel"
+	}
+
+	if p.config.Context == nil {
+		p.config.Context = context.Background()
+	}
+
+	if p.config.HttpClient == nil {
+		p.config.HttpClient = http.DefaultClient
+	}
+
+	var latest *release
+	var useMirror bool
+
+	// Determine the API endpoint based on UseMirror flag
+	apiURL := fmt.Sprintf("https://api.github.com/repos/%s/%s/releases/latest", p.config.Owner, p.config.Repo)
+	if p.config.UseMirror {
+		useMirror = true
+		apiURL = fmt.Sprintf("https://gh.beszel.dev/repos/%s/%s/releases/latest?api=true", p.config.Owner, p.config.Repo)
+		ColorPrint(ColorYellow, "Using mirror for update.")
+	}
+
+	latest, err = fetchLatestRelease(
+		p.config.Context,
+		p.config.HttpClient,
+		apiURL,
+	)
+	if err != nil {
+		return false, err
+	}
+
+	currentVersion := semver.MustParse(strings.TrimPrefix(p.currentVersion, "v"))
+	newVersion := semver.MustParse(strings.TrimPrefix(latest.Tag, "v"))
+
+	if newVersion.LTE(currentVersion) {
+		ColorPrintf(ColorGreen, "You already have the latest version %s.", p.currentVersion)
+		return false, nil
+	}
+
+	suffix := archiveSuffix(p.config.ArchiveExecutable, runtime.GOOS, runtime.GOARCH)
+	asset, err := latest.findAssetBySuffix(suffix)
+	if err != nil {
+		return false, err
+	}
+
+	releaseDir := filepath.Join(p.config.DataDir, ".beszel_update")
+	defer os.RemoveAll(releaseDir)
+
+	ColorPrintf(ColorYellow, "Downloading %s...", asset.Name)
+
+	// download the release asset
+	assetPath := filepath.Join(releaseDir, asset.Name)
+	if err := downloadFile(p.config.Context, p.config.HttpClient, asset.DownloadUrl, assetPath, useMirror); err != nil {
+		return false, err
+	}
+
+	ColorPrintf(ColorYellow, "Extracting %s...", asset.Name)
+
+	extractDir := filepath.Join(releaseDir, "extracted_"+asset.Name)
+	defer os.RemoveAll(extractDir)
+
+	// Extract the archive (automatically detects format)
+	if err := extract(assetPath, extractDir); err != nil {
+		return false, err
+	}
+
+	ColorPrint(ColorYellow, "Replacing the executable...")
+
+	oldExec, err := os.Executable()
+	if err != nil {
+		return false, err
+	}
+	renamedOldExec := oldExec + ".old"
+	defer os.Remove(renamedOldExec)
+
+	newExec := filepath.Join(extractDir, p.config.ArchiveExecutable)
+	if _, err := os.Stat(newExec); err != nil {
+		// try again with an .exe extension
+		newExec = newExec + ".exe"
+		if _, fallbackErr := os.Stat(newExec); fallbackErr != nil {
+			return false, fmt.Errorf("the executable in the extracted path is missing or it is inaccessible: %v, %v", err, fallbackErr)
+		}
+	}
+
+	// rename the current executable
+	if err := os.Rename(oldExec, renamedOldExec); err != nil {
+		return false, fmt.Errorf("failed to rename the current executable: %w", err)
+	}
+
+	tryToRevertExecChanges := func() {
+		if revertErr := os.Rename(renamedOldExec, oldExec); revertErr != nil {
+			slog.Debug(
+				"Failed to revert executable",
+				slog.String("old", renamedOldExec),
+				slog.String("new", oldExec),
+				slog.String("error", revertErr.Error()),
+			)
+		}
+	}
+
+	// replace with the extracted binary
+	if err := os.Rename(newExec, oldExec); err != nil {
+		// If rename fails due to cross-device link, try copying instead
+		if isCrossDeviceError(err) {
+			if err := copyFile(newExec, oldExec); err != nil {
+				tryToRevertExecChanges()
+				return false, fmt.Errorf("failed replacing the executable: %w", err)
+			}
+		} else {
+			tryToRevertExecChanges()
+			return false, fmt.Errorf("failed replacing the executable: %w", err)
+		}
+	}
+
+	ColorPrint(colorGray, "---")
+	ColorPrint(ColorGreen, "Update completed successfully!")
+
+	// print the release notes
+	if latest.Body != "" {
+		fmt.Print("\n")
+		releaseNotes := strings.TrimSpace(strings.Replace(latest.Body, "> _To update the prebuilt executable you can run `./"+p.config.ArchiveExecutable+" update`._", "", 1))
+		ColorPrint(colorCyan, releaseNotes)
+		fmt.Print("\n")
+	}
+
+	return true, nil
+}
+
+func fetchLatestRelease(
+	ctx context.Context,
+	client HttpClient,
+	url string,
+) (*release, error) {
+	req, err := http.NewRequestWithContext(ctx, "GET", url, nil)
+	if err != nil {
+		return nil, err
+	}
+
+	res, err := client.Do(req)
+	if err != nil {
+		return nil, err
+	}
+	defer res.Body.Close()
+
+	rawBody, err := io.ReadAll(res.Body)
+	if err != nil {
+		return nil, err
+	}
+
+	// http.Client doesn't treat non 2xx responses as error
+	if res.StatusCode >= 400 {
+		return nil, fmt.Errorf(
+			"(%d) failed to fetch latest releases:\n%s",
+			res.StatusCode,
+			string(rawBody),
+		)
+	}
+
+	result := &release{}
+	if err := json.Unmarshal(rawBody, result); err != nil {
+		return nil, err
+	}
+
+	return result, nil
+}
+
+func downloadFile(
+	ctx context.Context,
+	client HttpClient,
+	url string,
+	destPath string,
+	useMirror bool,
+) error {
+	if useMirror {
+		url = strings.Replace(url, "github.com", "gh.beszel.dev", 1)
+	}
+	req, err := http.NewRequestWithContext(ctx, "GET", url, nil)
+	if err != nil {
+		return err
+	}
+
+	res, err := client.Do(req)
+	if err != nil {
+		return err
+	}
+	defer res.Body.Close()
+
+	// http.Client doesn't treat non 2xx responses as error
+	if res.StatusCode >= 400 {
+		return fmt.Errorf("(%d) failed to send download file request", res.StatusCode)
+	}
+
+	// ensure that the dest parent dir(s) exist
+	if err := os.MkdirAll(filepath.Dir(destPath), os.ModePerm); err != nil {
+		return err
+	}
+
+	dest, err := os.Create(destPath)
+	if err != nil {
+		return err
+	}
+	defer dest.Close()
+
+	if _, err := io.Copy(dest, res.Body); err != nil {
+		return err
+	}
+
+	return nil
+}
+
+// isCrossDeviceError checks if the error is due to a cross-device link
+func isCrossDeviceError(err error) bool {
+	return err != nil && (strings.Contains(err.Error(), "cross-device") ||
+		strings.Contains(err.Error(), "EXDEV"))
+}
+
+// copyFile copies a file from src to dst, preserving permissions
+func copyFile(src, dst string) error {
+	sourceFile, err := os.Open(src)
+	if err != nil {
+		return err
+	}
+	defer sourceFile.Close()
+
+	destFile, err := os.Create(dst)
+	if err != nil {
+		return err
+	}
+	defer destFile.Close()
+
+	// Copy the file contents
+	if _, err := io.Copy(destFile, sourceFile); err != nil {
+		return err
+	}
+
+	// Preserve the original file permissions
+	sourceInfo, err := sourceFile.Stat()
+	if err != nil {
+		return err
+	}
+
+	return destFile.Chmod(sourceInfo.Mode())
+}
+
+func archiveSuffix(binaryName, goos, goarch string) string {
+	if goos == "windows" {
+		return fmt.Sprintf("%s_%s_%s.zip", binaryName, goos, goarch)
+	}
+	return fmt.Sprintf("%s_%s_%s.tar.gz", binaryName, goos, goarch)
+}

beszel/internal/ghupdate/ghupdate_test.go

@@ -0,0 +1,45 @@
+package ghupdate
+
+import (
+	"path/filepath"
+	"testing"
+)
+
+func TestReleaseFindAssetBySuffix(t *testing.T) {
+	r := release{
+		Assets: []*releaseAsset{
+			{Name: "test1.zip", Id: 1},
+			{Name: "test2.zip", Id: 2},
+			{Name: "test22.zip", Id: 22},
+			{Name: "test3.zip", Id: 3},
+		},
+	}
+
+	asset, err := r.findAssetBySuffix("2.zip")
+	if err != nil {
+		t.Fatalf("Expected nil, got err: %v", err)
+	}
+
+	if asset.Id != 2 {
+		t.Fatalf("Expected asset with id %d, got %v", 2, asset)
+	}
+}
+
+func TestExtractFailure(t *testing.T) {
+	testDir := t.TempDir()
+
+	// Test with missing zip file
+	missingZipPath := filepath.Join(testDir, "missing_test.zip")
+	extractedPath := filepath.Join(testDir, "zip_extract")
+
+	if err := extract(missingZipPath, extractedPath); err == nil {
+		t.Fatal("Expected Extract to fail due to missing zip file")
+	}
+
+	// Test with missing tar.gz file
+	missingTarPath := filepath.Join(testDir, "missing_test.tar.gz")
+
+	if err := extract(missingTarPath, extractedPath); err == nil {
+		t.Fatal("Expected Extract to fail due to missing tar.gz file")
+	}
+}

beszel/internal/ghupdate/release.go

@@ -0,0 +1,36 @@
+package ghupdate
+
+import (
+	"errors"
+	"strings"
+)
+
+type releaseAsset struct {
+	Name        string `json:"name"`
+	DownloadUrl string `json:"browser_download_url"`
+	Id          int    `json:"id"`
+	Size        int    `json:"size"`
+}
+
+type release struct {
+	Name      string          `json:"name"`
+	Tag       string          `json:"tag_name"`
+	Published string          `json:"published_at"`
+	Url       string          `json:"html_url"`
+	Body      string          `json:"body"`
+	Assets    []*releaseAsset `json:"assets"`
+	Id        int             `json:"id"`
+}
+
+// findAssetBySuffix returns the first available asset containing the specified suffix.
+func (r *release) findAssetBySuffix(suffix string) (*releaseAsset, error) {
+	if suffix != "" {
+		for _, asset := range r.Assets {
+			if strings.HasSuffix(asset.Name, suffix) {
+				return asset, nil
+			}
+		}
+	}
+
+	return nil, errors.New("missing asset containing " + suffix)
+}

beszel/internal/hub/config/config.go

@@ -10,7 +10,6 @@ import (
 
 	"github.com/google/uuid"
 	"github.com/pocketbase/dbx"
-	"github.com/pocketbase/pocketbase/apis"
 	"github.com/pocketbase/pocketbase/core"
 	"github.com/spf13/cast"
 	"gopkg.in/yaml.v3"
@@ -279,9 +278,8 @@ func createFingerprintRecord(app core.App, systemID, token string) error {
 
 // Returns the current config.yml file as a JSON object
 func GetYamlConfig(e *core.RequestEvent) error {
-	info, _ := e.RequestInfo()
-	if info.Auth == nil || info.Auth.GetString("role") != "admin" {
-		return apis.NewForbiddenError("Forbidden", nil)
+	if e.Auth.GetString("role") != "admin" {
+		return e.ForbiddenError("Requires admin role", nil)
 	}
 	configContent, err := generateYAML(e.App)
 	if err != nil {

beszel/internal/hub/hub.go

@@ -224,48 +224,48 @@ func (h *Hub) registerCronJobs(_ *core.ServeEvent) error {
 
 // custom api routes
 func (h *Hub) registerApiRoutes(se *core.ServeEvent) error {
-	// returns public key and version
-	se.Router.GET("/api/beszel/getkey", func(e *core.RequestEvent) error {
-		info, _ := e.RequestInfo()
-		if info.Auth == nil {
-			return apis.NewForbiddenError("Forbidden", nil)
-		}
-		return e.JSON(http.StatusOK, map[string]string{"key": h.pubKey, "v": beszel.Version})
-	})
+	// auth protected routes
+	apiAuth := se.Router.Group("/api/beszel")
+	apiAuth.Bind(apis.RequireAuth())
+	// auth optional routes
+	apiNoAuth := se.Router.Group("/api/beszel")
+
+	// create first user endpoint only needed if no users exist
+	if totalUsers, _ := se.App.CountRecords("users"); totalUsers == 0 {
+		apiNoAuth.POST("/create-user", h.um.CreateFirstUser)
+	}
 	// check if first time setup on login page
-	se.Router.GET("/api/beszel/first-run", func(e *core.RequestEvent) error {
-		total, err := h.CountRecords("users")
+	apiNoAuth.GET("/first-run", func(e *core.RequestEvent) error {
+		total, err := e.App.CountRecords("users")
 		return e.JSON(http.StatusOK, map[string]bool{"firstRun": err == nil && total == 0})
 	})
+	// get public key and version
+	apiAuth.GET("/getkey", func(e *core.RequestEvent) error {
+		return e.JSON(http.StatusOK, map[string]string{"key": h.pubKey, "v": beszel.Version})
+	})
 	// send test notification
-	se.Router.GET("/api/beszel/send-test-notification", h.SendTestNotification)
-	// API endpoint to get config.yml content
-	se.Router.GET("/api/beszel/config-yaml", config.GetYamlConfig)
+	apiAuth.POST("/test-notification", h.SendTestNotification)
+	// get config.yml content
+	apiAuth.GET("/config-yaml", config.GetYamlConfig)
 	// handle agent websocket connection
-	se.Router.GET("/api/beszel/agent-connect", h.handleAgentConnect)
+	apiNoAuth.GET("/agent-connect", h.handleAgentConnect)
 	// get or create universal tokens
-	se.Router.GET("/api/beszel/universal-token", h.getUniversalToken)
-	// create first user endpoint only needed if no users exist
-	if totalUsers, _ := h.CountRecords("users"); totalUsers == 0 {
-		se.Router.POST("/api/beszel/create-user", h.um.CreateFirstUser)
-	}
+	apiAuth.GET("/universal-token", h.getUniversalToken)
+	// update / delete user alerts
+	apiAuth.POST("/user-alerts", alerts.UpsertUserAlerts)
+	apiAuth.DELETE("/user-alerts", alerts.DeleteUserAlerts)
+
 	return nil
 }
 
 // Handler for universal token API endpoint (create, read, delete)
 func (h *Hub) getUniversalToken(e *core.RequestEvent) error {
-	info, err := e.RequestInfo()
-	if err != nil || info.Auth == nil {
-		return apis.NewForbiddenError("Forbidden", nil)
-	}
-
 	tokenMap := universalTokenMap.GetMap()
-	userID := info.Auth.Id
+	userID := e.Auth.Id
 	query := e.Request.URL.Query()
 	token := query.Get("token")
-	tokenSet := token != ""
 
-	if !tokenSet {
+	if token == "" {
 		// return existing token if it exists
 		if token, _, ok := tokenMap.GetByValue(userID); ok {
 			return e.JSON(http.StatusOK, map[string]any{"token": token, "active": true})

beszel/internal/hub/hub_test.go

@@ -4,27 +4,37 @@
 package hub_test
 
 import (
-	"beszel/internal/tests"
+	beszelTests "beszel/internal/tests"
 	"testing"
 
+	"bytes"
 	"crypto/ed25519"
+	"encoding/json"
 	"encoding/pem"
+	"io"
+	"net/http"
 	"os"
 	"path/filepath"
 	"strings"
 
+	"github.com/pocketbase/pocketbase/core"
+	pbTests "github.com/pocketbase/pocketbase/tests"
 	"github.com/stretchr/testify/assert"
 	"github.com/stretchr/testify/require"
 	"golang.org/x/crypto/ssh"
 )
 
-func getTestHub(t testing.TB) *tests.TestHub {
-	hub, _ := tests.NewTestHub(t.TempDir())
-	return hub
+// marshal to json and return an io.Reader (for use in ApiScenario.Body)
+func jsonReader(v any) io.Reader {
+	data, err := json.Marshal(v)
+	if err != nil {
+		panic(err)
+	}
+	return bytes.NewReader(data)
 }
 
 func TestMakeLink(t *testing.T) {
-	hub := getTestHub(t)
+	hub, _ := beszelTests.NewTestHub(t.TempDir())
 
 	tests := []struct {
 		name     string
@@ -114,7 +124,7 @@ func TestMakeLink(t *testing.T) {
 }
 
 func TestGetSSHKey(t *testing.T) {
-	hub := getTestHub(t)
+	hub, _ := beszelTests.NewTestHub(t.TempDir())
 
 	// Test Case 1: Key generation (no existing key)
 	t.Run("KeyGeneration", func(t *testing.T) {
@@ -254,3 +264,340 @@ func TestGetSSHKey(t *testing.T) {
 		}
 	})
 }
+
+func TestApiRoutesAuthentication(t *testing.T) {
+	hub, _ := beszelTests.NewTestHub(t.TempDir())
+	defer hub.Cleanup()
+
+	hub.StartHub()
+
+	// Create test user and get auth token
+	user, err := beszelTests.CreateUser(hub, "testuser@example.com", "password123")
+	require.NoError(t, err, "Failed to create test user")
+
+	adminUser, err := beszelTests.CreateRecord(hub, "users", map[string]any{
+		"email":    "admin@example.com",
+		"password": "password123",
+		"role":     "admin",
+	})
+	require.NoError(t, err, "Failed to create admin user")
+	adminUserToken, err := adminUser.NewAuthToken()
+
+	// superUser, err := beszelTests.CreateRecord(hub, core.CollectionNameSuperusers, map[string]any{
+	// 	"email":    "superuser@example.com",
+	// 	"password": "password123",
+	// })
+	// require.NoError(t, err, "Failed to create superuser")
+
+	userToken, err := user.NewAuthToken()
+	require.NoError(t, err, "Failed to create auth token")
+
+	// Create test system for user-alerts endpoints
+	system, err := beszelTests.CreateRecord(hub, "systems", map[string]any{
+		"name":  "test-system",
+		"users": []string{user.Id},
+		"host":  "127.0.0.1",
+	})
+	require.NoError(t, err, "Failed to create test system")
+
+	testAppFactory := func(t testing.TB) *pbTests.TestApp {
+		return hub.TestApp
+	}
+
+	scenarios := []beszelTests.ApiScenario{
+		// Auth Protected Routes - Should require authentication
+		{
+			Name:            "POST /test-notification - no auth should fail",
+			Method:          http.MethodPost,
+			URL:             "/api/beszel/test-notification",
+			ExpectedStatus:  401,
+			ExpectedContent: []string{"requires valid"},
+			TestAppFactory:  testAppFactory,
+			Body: jsonReader(map[string]any{
+				"url": "generic://127.0.0.1",
+			}),
+		},
+		{
+			Name:           "POST /test-notification - with auth should succeed",
+			Method:         http.MethodPost,
+			URL:            "/api/beszel/test-notification",
+			TestAppFactory: testAppFactory,
+			Headers: map[string]string{
+				"Authorization": userToken,
+			},
+			Body: jsonReader(map[string]any{
+				"url": "generic://127.0.0.1",
+			}),
+			ExpectedStatus:  200,
+			ExpectedContent: []string{"sending message"},
+		},
+		{
+			Name:            "GET /config-yaml - no auth should fail",
+			Method:          http.MethodGet,
+			URL:             "/api/beszel/config-yaml",
+			ExpectedStatus:  401,
+			ExpectedContent: []string{"requires valid"},
+			TestAppFactory:  testAppFactory,
+		},
+		{
+			Name:   "GET /config-yaml - with user auth should fail",
+			Method: http.MethodGet,
+			URL:    "/api/beszel/config-yaml",
+			Headers: map[string]string{
+				"Authorization": userToken,
+			},
+			ExpectedStatus:  403,
+			ExpectedContent: []string{"Requires admin"},
+			TestAppFactory:  testAppFactory,
+		},
+		{
+			Name:   "GET /config-yaml - with admin auth should succeed",
+			Method: http.MethodGet,
+			URL:    "/api/beszel/config-yaml",
+			Headers: map[string]string{
+				"Authorization": adminUserToken,
+			},
+			ExpectedStatus:  200,
+			ExpectedContent: []string{"test-system"},
+			TestAppFactory:  testAppFactory,
+		},
+		{
+			Name:            "GET /universal-token - no auth should fail",
+			Method:          http.MethodGet,
+			URL:             "/api/beszel/universal-token",
+			ExpectedStatus:  401,
+			ExpectedContent: []string{"requires valid"},
+			TestAppFactory:  testAppFactory,
+		},
+		{
+			Name:   "GET /universal-token - with auth should succeed",
+			Method: http.MethodGet,
+			URL:    "/api/beszel/universal-token",
+			Headers: map[string]string{
+				"Authorization": userToken,
+			},
+			ExpectedStatus:  200,
+			ExpectedContent: []string{"active", "token"},
+			TestAppFactory:  testAppFactory,
+		},
+		{
+			Name:            "POST /user-alerts - no auth should fail",
+			Method:          http.MethodPost,
+			URL:             "/api/beszel/user-alerts",
+			ExpectedStatus:  401,
+			ExpectedContent: []string{"requires valid"},
+			TestAppFactory:  testAppFactory,
+			Body: jsonReader(map[string]any{
+				"name":    "CPU",
+				"value":   80,
+				"min":     10,
+				"systems": []string{system.Id},
+			}),
+		},
+		{
+			Name:   "POST /user-alerts - with auth should succeed",
+			Method: http.MethodPost,
+			URL:    "/api/beszel/user-alerts",
+			Headers: map[string]string{
+				"Authorization": userToken,
+			},
+			ExpectedStatus:  200,
+			ExpectedContent: []string{"\"success\":true"},
+			TestAppFactory:  testAppFactory,
+			Body: jsonReader(map[string]any{
+				"name":    "CPU",
+				"value":   80,
+				"min":     10,
+				"systems": []string{system.Id},
+			}),
+		},
+		{
+			Name:            "DELETE /user-alerts - no auth should fail",
+			Method:          http.MethodDelete,
+			URL:             "/api/beszel/user-alerts",
+			ExpectedStatus:  401,
+			ExpectedContent: []string{"requires valid"},
+			TestAppFactory:  testAppFactory,
+			Body: jsonReader(map[string]any{
+				"name":    "CPU",
+				"systems": []string{system.Id},
+			}),
+		},
+		{
+			Name:   "DELETE /user-alerts - with auth should succeed",
+			Method: http.MethodDelete,
+			URL:    "/api/beszel/user-alerts",
+			Headers: map[string]string{
+				"Authorization": userToken,
+			},
+			ExpectedStatus:  200,
+			ExpectedContent: []string{"\"success\":true"},
+			TestAppFactory:  testAppFactory,
+			Body: jsonReader(map[string]any{
+				"name":    "CPU",
+				"systems": []string{system.Id},
+			}),
+			BeforeTestFunc: func(t testing.TB, app *pbTests.TestApp, e *core.ServeEvent) {
+				// Create an alert to delete
+				beszelTests.CreateRecord(app, "alerts", map[string]any{
+					"name":   "CPU",
+					"system": system.Id,
+					"user":   user.Id,
+					"value":  80,
+					"min":    10,
+				})
+			},
+		},
+
+		// Auth Optional Routes - Should work without authentication
+		{
+			Name:            "GET /getkey - no auth should fail",
+			Method:          http.MethodGet,
+			URL:             "/api/beszel/getkey",
+			ExpectedStatus:  401,
+			ExpectedContent: []string{"requires valid"},
+			TestAppFactory:  testAppFactory,
+		},
+		{
+			Name:   "GET /getkey - with auth should also succeed",
+			Method: http.MethodGet,
+			URL:    "/api/beszel/getkey",
+			Headers: map[string]string{
+				"Authorization": userToken,
+			},
+			ExpectedStatus:  200,
+			ExpectedContent: []string{"\"key\":", "\"v\":"},
+			TestAppFactory:  testAppFactory,
+		},
+		{
+			Name:            "GET /first-run - no auth should succeed",
+			Method:          http.MethodGet,
+			URL:             "/api/beszel/first-run",
+			ExpectedStatus:  200,
+			ExpectedContent: []string{"\"firstRun\":false"},
+			TestAppFactory:  testAppFactory,
+		},
+		{
+			Name:   "GET /first-run - with auth should also succeed",
+			Method: http.MethodGet,
+			URL:    "/api/beszel/first-run",
+			Headers: map[string]string{
+				"Authorization": userToken,
+			},
+			ExpectedStatus:  200,
+			ExpectedContent: []string{"\"firstRun\":false"},
+			TestAppFactory:  testAppFactory,
+		},
+		{
+			Name:            "GET /agent-connect - no auth should succeed (websocket upgrade fails but route is accessible)",
+			Method:          http.MethodGet,
+			URL:             "/api/beszel/agent-connect",
+			ExpectedStatus:  400,
+			ExpectedContent: []string{},
+			TestAppFactory:  testAppFactory,
+		},
+		{
+			Name:   "POST /test-notification - invalid auth token should fail",
+			Method: http.MethodPost,
+			URL:    "/api/beszel/test-notification",
+			Body: jsonReader(map[string]any{
+				"url": "generic://127.0.0.1",
+			}),
+			Headers: map[string]string{
+				"Authorization": "invalid-token",
+			},
+			ExpectedStatus:  401,
+			ExpectedContent: []string{"requires valid"},
+			TestAppFactory:  testAppFactory,
+		},
+		{
+			Name:   "POST /user-alerts - invalid auth token should fail",
+			Method: http.MethodPost,
+			URL:    "/api/beszel/user-alerts",
+			Headers: map[string]string{
+				"Authorization": "invalid-token",
+			},
+			ExpectedStatus:  401,
+			ExpectedContent: []string{"requires valid"},
+			TestAppFactory:  testAppFactory,
+			Body: jsonReader(map[string]any{
+				"name":    "CPU",
+				"value":   80,
+				"min":     10,
+				"systems": []string{system.Id},
+			}),
+		},
+	}
+
+	for _, scenario := range scenarios {
+		scenario.Test(t)
+	}
+}
+
+func TestCreateUserEndpointAvailability(t *testing.T) {
+	t.Run("CreateUserEndpoint available when no users exist", func(t *testing.T) {
+		hub, _ := beszelTests.NewTestHub(t.TempDir())
+		defer hub.Cleanup()
+
+		// Ensure no users exist
+		userCount, err := hub.CountRecords("users")
+		require.NoError(t, err)
+		require.Zero(t, userCount, "Should start with no users")
+
+		hub.StartHub()
+
+		testAppFactory := func(t testing.TB) *pbTests.TestApp {
+			return hub.TestApp
+		}
+
+		scenario := beszelTests.ApiScenario{
+			Name:   "POST /create-user - should be available when no users exist",
+			Method: http.MethodPost,
+			URL:    "/api/beszel/create-user",
+			Body: jsonReader(map[string]any{
+				"email":    "firstuser@example.com",
+				"password": "password123",
+			}),
+			ExpectedStatus:  200,
+			ExpectedContent: []string{"User created"},
+			TestAppFactory:  testAppFactory,
+		}
+
+		scenario.Test(t)
+
+		// Verify user was created
+		userCount, err = hub.CountRecords("users")
+		require.NoError(t, err)
+		require.EqualValues(t, 1, userCount, "Should have created one user")
+	})
+
+	t.Run("CreateUserEndpoint not available when users exist", func(t *testing.T) {
+		hub, _ := beszelTests.NewTestHub(t.TempDir())
+		defer hub.Cleanup()
+
+		// Create a user first
+		_, err := beszelTests.CreateUser(hub, "existing@example.com", "password")
+		require.NoError(t, err)
+
+		hub.StartHub()
+
+		testAppFactory := func(t testing.TB) *pbTests.TestApp {
+			return hub.TestApp
+		}
+
+		scenario := beszelTests.ApiScenario{
+			Name:   "POST /create-user - should not be available when users exist",
+			Method: http.MethodPost,
+			URL:    "/api/beszel/create-user",
+			Body: jsonReader(map[string]any{
+				"email":    "another@example.com",
+				"password": "password123",
+			}),
+			ExpectedStatus:  404,
+			ExpectedContent: []string{"wasn't found"},
+			TestAppFactory:  testAppFactory,
+		}
+
+		scenario.Test(t)
+	})
+}

beszel/internal/hub/systems/systems_test.go

@@ -29,7 +29,7 @@ func TestSystemManagerNew(t *testing.T) {
 	user, err := tests.CreateUser(hub, "test@test.com", "testtesttest")
 	require.NoError(t, err)
 
-	synctest.Run(func() {
+	synctest.Test(t, func(t *testing.T) {
 		sm.Initialize()
 
 		record, err := tests.CreateRecord(hub, "systems", map[string]any{
@@ -110,9 +110,11 @@ func TestSystemManagerNew(t *testing.T) {
 		err = hub.Delete(record)
 		require.NoError(t, err)
 		assert.False(t, sm.HasSystem(record.Id), "System should not exist in the store after deletion")
+	})
 
-		testOld(t, hub)
+	testOld(t, hub)
 
+	synctest.Test(t, func(t *testing.T) {
 		time.Sleep(time.Second)
 		synctest.Wait()
 

beszel/internal/hub/update.go

@@ -1,57 +1,85 @@
 package hub
 
 import (
-	"beszel"
+	"beszel/internal/ghupdate"
 	"fmt"
+	"log"
 	"os"
-	"strings"
+	"os/exec"
 
-	"github.com/blang/semver"
-	"github.com/rhysd/go-github-selfupdate/selfupdate"
 	"github.com/spf13/cobra"
 )
 
 // Update updates beszel to the latest version
-func Update(_ *cobra.Command, _ []string) {
-	var latest *selfupdate.Release
-	var found bool
-	var err error
-	currentVersion := semver.MustParse(beszel.Version)
-	fmt.Println("beszel", currentVersion)
-	fmt.Println("Checking for updates...")
-	updater, _ := selfupdate.NewUpdater(selfupdate.Config{
-		Filters: []string{"beszel_"},
+func Update(cmd *cobra.Command, _ []string) {
+	dataDir := os.TempDir()
+
+	// set dataDir to ./beszel_data if it exists
+	if _, err := os.Stat("./beszel_data"); err == nil {
+		dataDir = "./beszel_data"
+	}
+
+	// Check if china-mirrors flag is set
+	useMirror, _ := cmd.Flags().GetBool("china-mirrors")
+
+	updated, err := ghupdate.Update(ghupdate.Config{
+		ArchiveExecutable: "beszel",
+		DataDir:           dataDir,
+		UseMirror:         useMirror,
 	})
-	latest, found, err = updater.DetectLatest("henrygd/beszel")
-
 	if err != nil {
-		fmt.Println("Error checking for updates:", err)
-		os.Exit(1)
+		log.Fatal(err)
 	}
-
-	if !found {
-		fmt.Println("No updates found")
-		os.Exit(0)
-	}
-
-	fmt.Println("Latest version:", latest.Version)
-
-	if latest.Version.LTE(currentVersion) {
-		fmt.Println("You are up to date")
+	if !updated {
 		return
 	}
 
-	var binaryPath string
-	fmt.Printf("Updating from %s to %s...\n", currentVersion, latest.Version)
-	binaryPath, err = os.Executable()
-	if err != nil {
-		fmt.Println("Error getting binary path:", err)
-		os.Exit(1)
+	// make sure the file is executable
+	exePath, err := os.Executable()
+	if err == nil {
+		if err := os.Chmod(exePath, 0755); err != nil {
+			fmt.Printf("Warning: failed to set executable permissions: %v\n", err)
+		}
 	}
-	err = selfupdate.UpdateTo(latest.AssetURL, binaryPath)
-	if err != nil {
-		fmt.Println("Please try rerunning with sudo. Error:", err)
-		os.Exit(1)
-	}
-	fmt.Printf("Successfully updated to %s\n\n%s\n", latest.Version, strings.TrimSpace(latest.ReleaseNotes))
+
+	// Try to restart the service if it's running
+	restartService()
+}
+
+// restartService attempts to restart the beszel service
+func restartService() {
+	// Check if we're running as a service by looking for systemd
+	if _, err := exec.LookPath("systemctl"); err == nil {
+		// Check if beszel service exists and is active
+		cmd := exec.Command("systemctl", "is-active", "beszel.service")
+		if err := cmd.Run(); err == nil {
+			ghupdate.ColorPrint(ghupdate.ColorYellow, "Restarting beszel service...")
+			restartCmd := exec.Command("systemctl", "restart", "beszel.service")
+			if err := restartCmd.Run(); err != nil {
+				ghupdate.ColorPrintf(ghupdate.ColorYellow, "Warning: Failed to restart service: %v\n", err)
+				ghupdate.ColorPrint(ghupdate.ColorYellow, "Please restart the service manually: sudo systemctl restart beszel")
+			} else {
+				ghupdate.ColorPrint(ghupdate.ColorGreen, "Service restarted successfully")
+			}
+			return
+		}
+	}
+
+	// Check for OpenRC (Alpine Linux)
+	if _, err := exec.LookPath("rc-service"); err == nil {
+		cmd := exec.Command("rc-service", "beszel", "status")
+		if err := cmd.Run(); err == nil {
+			ghupdate.ColorPrint(ghupdate.ColorYellow, "Restarting beszel service...")
+			restartCmd := exec.Command("rc-service", "beszel", "restart")
+			if err := restartCmd.Run(); err != nil {
+				ghupdate.ColorPrintf(ghupdate.ColorYellow, "Warning: Failed to restart service: %v\n", err)
+				ghupdate.ColorPrint(ghupdate.ColorYellow, "Please restart the service manually: sudo rc-service beszel restart")
+			} else {
+				ghupdate.ColorPrint(ghupdate.ColorGreen, "Service restarted successfully")
+			}
+			return
+		}
+	}
+
+	ghupdate.ColorPrint(ghupdate.ColorYellow, "Service restart not attempted. If running as a service, restart manually.")
 }

beszel/internal/records/records.go

@@ -172,6 +172,8 @@ func (rm *RecordManager) AverageSystemStats(db dbx.Builder, records RecordIds) *
 	tempStats = system.Stats{}
 	sum := &sumStats
 	stats := &tempStats
+	// necessary because uint8 is not big enough for the sum
+	batterySum := 0
 
 	count := float64(len(records))
 	tempCount := float64(0)
@@ -208,8 +210,11 @@ func (rm *RecordManager) AverageSystemStats(db dbx.Builder, records RecordIds) *
 		sum.LoadAvg[2] += stats.LoadAvg[2]
 		sum.Bandwidth[0] += stats.Bandwidth[0]
 		sum.Bandwidth[1] += stats.Bandwidth[1]
+		batterySum += int(stats.Battery[0])
+		sum.Battery[1] = stats.Battery[1]
 		// Set peak values
 		sum.MaxCpu = max(sum.MaxCpu, stats.MaxCpu, stats.Cpu)
+		sum.MaxMem = max(sum.MaxMem, stats.MaxMem, stats.MemUsed)
 		sum.MaxNetworkSent = max(sum.MaxNetworkSent, stats.MaxNetworkSent, stats.NetworkSent)
 		sum.MaxNetworkRecv = max(sum.MaxNetworkRecv, stats.MaxNetworkRecv, stats.NetworkRecv)
 		sum.MaxDiskReadPs = max(sum.MaxDiskReadPs, stats.MaxDiskReadPs, stats.DiskReadPs)
@@ -290,6 +295,7 @@ func (rm *RecordManager) AverageSystemStats(db dbx.Builder, records RecordIds) *
 		sum.LoadAvg[2] = twoDecimals(sum.LoadAvg[2] / count)
 		sum.Bandwidth[0] = sum.Bandwidth[0] / uint64(count)
 		sum.Bandwidth[1] = sum.Bandwidth[1] / uint64(count)
+		sum.Battery[0] = uint8(batterySum / int(count))
 		// Average temperatures
 		if sum.Temperatures != nil && tempCount > 0 {
 			for key := range sum.Temperatures {

beszel/internal/tests/api.go

@@ -0,0 +1,309 @@
+package tests
+
+import (
+	"bytes"
+	"context"
+	"encoding/json"
+	"fmt"
+	"io"
+	"maps"
+	"net/http"
+	"net/http/httptest"
+	"strings"
+	"testing"
+	"time"
+
+	"github.com/pocketbase/pocketbase/apis"
+	"github.com/pocketbase/pocketbase/core"
+	pbtests "github.com/pocketbase/pocketbase/tests"
+	"github.com/pocketbase/pocketbase/tools/hook"
+)
+
+// NOTE: This is a copy of https://github.com/pocketbase/pocketbase/blob/master/tests/api.go
+// with the following changes:
+// - Removed automatic cleanup of the test app in ApiScenario.Test (Aug 17 2025)
+
+// ApiScenario defines a single api request test case/scenario.
+type ApiScenario struct {
+	// Name is the test name.
+	Name string
+
+	// Method is the HTTP method of the test request to use.
+	Method string
+
+	// URL is the url/path of the endpoint you want to test.
+	URL string
+
+	// Body specifies the body to send with the request.
+	//
+	// For example:
+	//
+	//	strings.NewReader(`{"title":"abc"}`)
+	Body io.Reader
+
+	// Headers specifies the headers to send with the request (e.g. "Authorization": "abc")
+	Headers map[string]string
+
+	// Delay adds a delay before checking the expectations usually
+	// to ensure that all fired non-awaited go routines have finished
+	Delay time.Duration
+
+	// Timeout specifies how long to wait before cancelling the request context.
+	//
+	// A zero or negative value means that there will be no timeout.
+	Timeout time.Duration
+
+	// expectations
+	// ---------------------------------------------------------------
+
+	// ExpectedStatus specifies the expected response HTTP status code.
+	ExpectedStatus int
+
+	// List of keywords that MUST exist in the response body.
+	//
+	// Either ExpectedContent or NotExpectedContent must be set if the response body is non-empty.
+	// Leave both fields empty if you want to ensure that the response didn't have any body (e.g. 204).
+	ExpectedContent []string
+
+	// List of keywords that MUST NOT exist in the response body.
+	//
+	// Either ExpectedContent or NotExpectedContent must be set if the response body is non-empty.
+	// Leave both fields empty if you want to ensure that the response didn't have any body (e.g. 204).
+	NotExpectedContent []string
+
+	// List of hook events to check whether they were fired or not.
+	//
+	// You can use the wildcard "*" event key if you want to ensure
+	// that no other hook events except those listed have been fired.
+	//
+	// For example:
+	//
+	//	map[string]int{ "*": 0 } // no hook events were fired
+	//	map[string]int{ "*": 0, "EventA": 2 } // no hook events, except EventA were fired
+	//	map[string]int{ "EventA": 2, "EventB": 0 } // ensures that EventA was fired exactly 2 times and EventB exactly 0 times.
+	ExpectedEvents map[string]int
+
+	// test hooks
+	// ---------------------------------------------------------------
+
+	TestAppFactory func(t testing.TB) *pbtests.TestApp
+	BeforeTestFunc func(t testing.TB, app *pbtests.TestApp, e *core.ServeEvent)
+	AfterTestFunc  func(t testing.TB, app *pbtests.TestApp, res *http.Response)
+}
+
+// Test executes the test scenario.
+//
+// Example:
+//
+//	func TestListExample(t *testing.T) {
+//	    scenario := tests.ApiScenario{
+//	        Name:           "list example collection",
+//	        Method:         http.MethodGet,
+//	        URL:            "/api/collections/example/records",
+//	        ExpectedStatus: 200,
+//	        ExpectedContent: []string{
+//	            `"totalItems":3`,
+//	            `"id":"0yxhwia2amd8gec"`,
+//	            `"id":"achvryl401bhse3"`,
+//	            `"id":"llvuca81nly1qls"`,
+//	        },
+//	        ExpectedEvents: map[string]int{
+//	            "OnRecordsListRequest": 1,
+//	            "OnRecordEnrich":       3,
+//	        },
+//	    }
+//
+//	    scenario.Test(t)
+//	}
+func (scenario *ApiScenario) Test(t *testing.T) {
+	t.Run(scenario.normalizedName(), func(t *testing.T) {
+		scenario.test(t)
+	})
+}
+
+// Benchmark benchmarks the test scenario.
+//
+// Example:
+//
+//	func BenchmarkListExample(b *testing.B) {
+//	    scenario := tests.ApiScenario{
+//	        Name:           "list example collection",
+//	        Method:         http.MethodGet,
+//	        URL:            "/api/collections/example/records",
+//	        ExpectedStatus: 200,
+//	        ExpectedContent: []string{
+//	            `"totalItems":3`,
+//	            `"id":"0yxhwia2amd8gec"`,
+//	            `"id":"achvryl401bhse3"`,
+//	            `"id":"llvuca81nly1qls"`,
+//	        },
+//	        ExpectedEvents: map[string]int{
+//	            "OnRecordsListRequest": 1,
+//	            "OnRecordEnrich":       3,
+//	        },
+//	    }
+//
+//	    scenario.Benchmark(b)
+//	}
+func (scenario *ApiScenario) Benchmark(b *testing.B) {
+	b.Run(scenario.normalizedName(), func(b *testing.B) {
+		for i := 0; i < b.N; i++ {
+			scenario.test(b)
+		}
+	})
+}
+
+func (scenario *ApiScenario) normalizedName() string {
+	var name = scenario.Name
+
+	if name == "" {
+		name = fmt.Sprintf("%s:%s", scenario.Method, scenario.URL)
+	}
+
+	return name
+}
+
+func (scenario *ApiScenario) test(t testing.TB) {
+	var testApp *pbtests.TestApp
+	if scenario.TestAppFactory != nil {
+		testApp = scenario.TestAppFactory(t)
+		if testApp == nil {
+			t.Fatal("TestAppFactory must return a non-nill app instance")
+		}
+	} else {
+		var testAppErr error
+		testApp, testAppErr = pbtests.NewTestApp()
+		if testAppErr != nil {
+			t.Fatalf("Failed to initialize the test app instance: %v", testAppErr)
+		}
+	}
+	// defer testApp.Cleanup()
+
+	baseRouter, err := apis.NewRouter(testApp)
+	if err != nil {
+		t.Fatal(err)
+	}
+
+	// manually trigger the serve event to ensure that custom app routes and middlewares are registered
+	serveEvent := new(core.ServeEvent)
+	serveEvent.App = testApp
+	serveEvent.Router = baseRouter
+
+	serveErr := testApp.OnServe().Trigger(serveEvent, func(e *core.ServeEvent) error {
+		if scenario.BeforeTestFunc != nil {
+			scenario.BeforeTestFunc(t, testApp, e)
+		}
+
+		// reset the event counters in case a hook was triggered from a before func (eg. db save)
+		testApp.ResetEventCalls()
+
+		// add middleware to timeout long-running requests (eg. keep-alive routes)
+		e.Router.Bind(&hook.Handler[*core.RequestEvent]{
+			Func: func(re *core.RequestEvent) error {
+				slowTimer := time.AfterFunc(3*time.Second, func() {
+					t.Logf("[WARN] Long running test %q", scenario.Name)
+				})
+				defer slowTimer.Stop()
+
+				if scenario.Timeout > 0 {
+					ctx, cancelFunc := context.WithTimeout(re.Request.Context(), scenario.Timeout)
+					defer cancelFunc()
+					re.Request = re.Request.Clone(ctx)
+				}
+
+				return re.Next()
+			},
+			Priority: -9999,
+		})
+
+		recorder := httptest.NewRecorder()
+
+		req := httptest.NewRequest(scenario.Method, scenario.URL, scenario.Body)
+
+		// set default header
+		req.Header.Set("content-type", "application/json")
+
+		// set scenario headers
+		for k, v := range scenario.Headers {
+			req.Header.Set(k, v)
+		}
+
+		// execute request
+		mux, err := e.Router.BuildMux()
+		if err != nil {
+			t.Fatalf("Failed to build router mux: %v", err)
+		}
+		mux.ServeHTTP(recorder, req)
+
+		res := recorder.Result()
+
+		if res.StatusCode != scenario.ExpectedStatus {
+			t.Errorf("Expected status code %d, got %d", scenario.ExpectedStatus, res.StatusCode)
+		}
+
+		if scenario.Delay > 0 {
+			time.Sleep(scenario.Delay)
+		}
+
+		if len(scenario.ExpectedContent) == 0 && len(scenario.NotExpectedContent) == 0 {
+			if len(recorder.Body.Bytes()) != 0 {
+				t.Errorf("Expected empty body, got \n%v", recorder.Body.String())
+			}
+		} else {
+			// normalize json response format
+			buffer := new(bytes.Buffer)
+			err := json.Compact(buffer, recorder.Body.Bytes())
+			var normalizedBody string
+			if err != nil {
+				// not a json...
+				normalizedBody = recorder.Body.String()
+			} else {
+				normalizedBody = buffer.String()
+			}
+
+			for _, item := range scenario.ExpectedContent {
+				if !strings.Contains(normalizedBody, item) {
+					t.Errorf("Cannot find %v in response body \n%v", item, normalizedBody)
+					break
+				}
+			}
+
+			for _, item := range scenario.NotExpectedContent {
+				if strings.Contains(normalizedBody, item) {
+					t.Errorf("Didn't expect %v in response body \n%v", item, normalizedBody)
+					break
+				}
+			}
+		}
+
+		remainingEvents := maps.Clone(testApp.EventCalls)
+
+		var noOtherEventsShouldRemain bool
+		for event, expectedNum := range scenario.ExpectedEvents {
+			if event == "*" && expectedNum <= 0 {
+				noOtherEventsShouldRemain = true
+				continue
+			}
+
+			actualNum := remainingEvents[event]
+			if actualNum != expectedNum {
+				t.Errorf("Expected event %s to be called %d, got %d", event, expectedNum, actualNum)
+			}
+
+			delete(remainingEvents, event)
+		}
+
+		if noOtherEventsShouldRemain && len(remainingEvents) > 0 {
+			t.Errorf("Missing expected remaining events:\n%#v\nAll triggered app events are:\n%#v", remainingEvents, testApp.EventCalls)
+		}
+
+		if scenario.AfterTestFunc != nil {
+			scenario.AfterTestFunc(t, testApp, res)
+		}
+
+		return nil
+	})
+	if serveErr != nil {
+		t.Fatalf("Failed to trigger app serve hook: %v", serveErr)
+	}
+}

beszel/internal/tests/hub.go

@@ -6,9 +6,12 @@ package tests
 
 import (
 	"beszel/internal/hub"
+	"fmt"
+	"testing"
 
 	"github.com/pocketbase/pocketbase/core"
 	"github.com/pocketbase/pocketbase/tests"
+	"github.com/stretchr/testify/assert"
 
 	_ "github.com/pocketbase/pocketbase/migrations"
 )
@@ -86,3 +89,10 @@ func CreateRecord(app core.App, collectionName string, fields map[string]any) (*
 
 	return record, app.Save(record)
 }
+
+func ClearCollection(t testing.TB, app core.App, collectionName string) error {
+	_, err := app.DB().NewQuery(fmt.Sprintf("DELETE from %s", collectionName)).Execute()
+	recordCount, err := app.CountRecords(collectionName)
+	assert.EqualValues(t, recordCount, 0, "should have 0 records after clearing")
+	return err
+}

beszel/internal/users/users.go

@@ -14,18 +14,6 @@ type UserManager struct {
 	app core.App
 }
 
-type UserSettings struct {
-	ChartTime            string   `json:"chartTime"`
-	NotificationEmails   []string `json:"emails"`
-	NotificationWebhooks []string `json:"webhooks"`
-	// UnitTemp             uint8    `json:"unitTemp"` // 0 for Celsius, 1 for Fahrenheit
-	// UnitNet              uint8    `json:"unitNet"`  // 0 for bytes, 1 for bits
-	// UnitDisk             uint8    `json:"unitDisk"` // 0 for bytes, 1 for bits
-
-	// New field for alert history retention (e.g., "1m", "3m", "6m", "1y")
-	AlertHistoryRetention string `json:"alertHistoryRetention,omitempty"`
-}
-
 func NewUserManager(app core.App) *UserManager {
 	return &UserManager{
 		app: app,
@@ -44,7 +32,10 @@ func (um *UserManager) InitializeUserRole(e *core.RecordEvent) error {
 func (um *UserManager) InitializeUserSettings(e *core.RecordEvent) error {
 	record := e.Record
 	// intialize settings with defaults (zero values can be ignored)
-	settings := UserSettings{
+	settings := struct {
+		ChartTime string   `json:"chartTime"`
+		Emails    []string `json:"emails"`
+	}{
 		ChartTime: "1h",
 	}
 	record.UnmarshalJSONField("settings", &settings)
@@ -59,10 +50,7 @@ func (um *UserManager) InitializeUserSettings(e *core.RecordEvent) error {
 		log.Println("failed to get user email", "err", err)
 		return err
 	}
-	settings.NotificationEmails = []string{user.Email}
-	if len(settings.NotificationWebhooks) == 0 {
-		settings.NotificationWebhooks = []string{""}
-	}
+	settings.Emails = []string{user.Email}
 	record.Set("settings", settings)
 	return e.Next()
 }

beszel/site/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "beszel",
 	"private": true,
-	"version": "0.12.2",
+	"version": "0.12.6",
 	"type": "module",
 	"scripts": {
 		"dev": "vite",
@@ -13,26 +13,27 @@
 	"dependencies": {
 		"@henrygd/queue": "^1.0.7",
 		"@henrygd/semaphore": "^0.0.2",
-		"@lingui/detect-locale": "^5.3.3",
-		"@lingui/macro": "^5.3.3",
-		"@lingui/react": "^5.3.3",
+		"@lingui/detect-locale": "^5.4.1",
+		"@lingui/macro": "^5.4.1",
+		"@lingui/react": "^5.4.1",
 		"@nanostores/react": "^0.7.3",
 		"@nanostores/router": "^0.11.0",
-		"@radix-ui/react-alert-dialog": "^1.1.14",
-		"@radix-ui/react-checkbox": "^1.3.2",
-		"@radix-ui/react-dialog": "^1.1.14",
+		"@radix-ui/react-alert-dialog": "^1.1.15",
+		"@radix-ui/react-checkbox": "^1.3.3",
+		"@radix-ui/react-dialog": "^1.1.15",
 		"@radix-ui/react-direction": "^1.1.1",
-		"@radix-ui/react-dropdown-menu": "^2.1.15",
+		"@radix-ui/react-dropdown-menu": "^2.1.16",
 		"@radix-ui/react-label": "^2.1.7",
-		"@radix-ui/react-select": "^2.2.5",
+		"@radix-ui/react-select": "^2.2.6",
 		"@radix-ui/react-separator": "^1.1.7",
-		"@radix-ui/react-slider": "^1.3.5",
+		"@radix-ui/react-slider": "^1.3.6",
 		"@radix-ui/react-slot": "^1.2.3",
-		"@radix-ui/react-switch": "^1.2.5",
-		"@radix-ui/react-tabs": "^1.1.12",
-		"@radix-ui/react-toast": "^1.2.14",
-		"@radix-ui/react-tooltip": "^1.2.7",
+		"@radix-ui/react-switch": "^1.2.6",
+		"@radix-ui/react-tabs": "^1.1.13",
+		"@radix-ui/react-toast": "^1.2.15",
+		"@radix-ui/react-tooltip": "^1.2.8",
 		"@tanstack/react-table": "^8.21.3",
+		"@tanstack/react-virtual": "^3.13.12",
 		"class-variance-authority": "^0.7.1",
 		"clsx": "^2.1.1",
 		"cmdk": "^1.1.1",
@@ -40,28 +41,26 @@
 		"lucide-react": "^0.452.0",
 		"nanostores": "^0.11.4",
 		"pocketbase": "^0.26.2",
-		"react": "^18.3.1",
-		"react-dom": "^18.3.1",
+		"react": "^19.1.1",
+		"react-dom": "^19.1.1",
 		"recharts": "^2.15.4",
-		"tailwind-merge": "^2.6.0",
-		"tailwindcss-animate": "^1.0.7",
+		"tailwind-merge": "^3.3.1",
 		"valibot": "^0.42.1"
 	},
 	"devDependencies": {
-		"@lingui/cli": "^5.3.3",
-		"@lingui/swc-plugin": "^5.5.2",
-		"@lingui/vite-plugin": "^5.3.3",
+		"@lingui/cli": "^5.4.1",
+		"@lingui/swc-plugin": "^5.6.1",
+		"@lingui/vite-plugin": "^5.4.1",
 		"@tailwindcss/container-queries": "^0.1.1",
-		"@types/bun": "^1.2.19",
-		"@types/react": "^18.3.23",
-		"@types/react-dom": "^18.3.7",
-		"@vitejs/plugin-react-swc": "^3.11.0",
-		"autoprefixer": "^10.4.21",
-		"postcss": "^8.5.6",
-		"tailwindcss": "^3.4.17",
-		"tailwindcss-rtl": "^0.9.0",
-		"typescript": "^5.8.3",
-		"vite": "^6.3.5"
+		"@tailwindcss/vite": "^4.1.12",
+		"@types/bun": "^1.2.20",
+		"@types/react": "^19.1.11",
+		"@types/react-dom": "^19.1.7",
+		"@vitejs/plugin-react-swc": "^4.0.1",
+		"tailwindcss": "^4.1.12",
+		"tw-animate-css": "^1.3.7",
+		"typescript": "^5.9.2",
+		"vite": "^7.1.3"
 	},
 	"overrides": {
 		"@nanostores/router": {

beszel/site/postcss.config.js

@@ -1,6 +0,0 @@
-export default {
-	plugins: {
-		tailwindcss: {},
-		autoprefixer: {},
-	},
-}

beszel/site/src/components/add-system.tsx

@@ -13,13 +13,15 @@ import {
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
 import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
-import { $publicKey, pb } from "@/lib/stores"
-import { cn, generateToken, isReadOnlyUser, tokenMap, useLocalStorage } from "@/lib/utils"
+import { $publicKey } from "@/lib/stores"
+import { cn, generateToken, tokenMap, useLocalStorage } from "@/lib/utils"
+import { pb, isReadOnlyUser } from "@/lib/api"
 import { useStore } from "@nanostores/react"
 import { ChevronDownIcon, ExternalLinkIcon, PlusIcon } from "lucide-react"
 import { memo, useEffect, useRef, useState } from "react"
 import { $router, basePath, Link, navigate } from "./router"
 import { SystemRecord } from "@/types"
+import { SystemStatus } from "@/lib/enums"
 import { AppleIcon, DockerIcon, TuxIcon, WindowsIcon } from "./ui/icons"
 import { InputCopy } from "./ui/input-copy"
 import { getPagePath } from "@nanostores/router"
@@ -105,7 +107,7 @@ export const SystemDialog = ({ setOpen, system }: { setOpen: (open: boolean) =>
 		try {
 			setOpen(false)
 			if (system) {
-				await pb.collection("systems").update(system.id, { ...data, status: "pending" })
+				await pb.collection("systems").update(system.id, { ...data, status: SystemStatus.Pending })
 			} else {
 				const createdSystem = await pb.collection("systems").create(data)
 				await pb.collection("fingerprints").create({
@@ -131,7 +133,7 @@ export const SystemDialog = ({ setOpen, system }: { setOpen: (open: boolean) =>
 		>
 			<Tabs defaultValue={tab} onValueChange={setTab}>
 				<DialogHeader>
-					<DialogTitle className="mb-2">
+					<DialogTitle className="mb-2 max-w-100 truncate pr-8">
 						{system ? `${t`Edit`} ${system?.name}` : <Trans>Add New System</Trans>}
 					</DialogTitle>
 					<TabsList className="grid w-full grid-cols-2">
@@ -165,9 +167,7 @@ export const SystemDialog = ({ setOpen, system }: { setOpen: (open: boolean) =>
 						<Trans>
 							Copy the installation command for the agent below, or register agents automatically with a{" "}
 							<Link
-								onClick={() => {
-									setOpen(false)
-								}}
+								onClick={() => setOpen(false)}
 								href={getPagePath($router, "settings", { name: "tokens" })}
 								className="link"
 							>
@@ -274,7 +274,7 @@ interface CopyButtonProps {
 	text: string
 	onClick: () => void
 	dropdownItems: DropdownItem[]
-	icon?: React.ReactElement
+	icon?: React.ReactElement<any>
 }
 
 const CopyButton = memo((props: CopyButtonProps) => {

beszel/site/src/components/alerts-history-columns.tsx

@@ -2,7 +2,8 @@ import { ColumnDef } from "@tanstack/react-table"
 import { AlertsHistoryRecord } from "@/types"
 import { Button } from "@/components/ui/button"
 import { Badge } from "@/components/ui/badge"
-import { alertInfo, formatShortDate, toFixedFloat, formatDuration, cn } from "@/lib/utils"
+import { formatShortDate, toFixedFloat, formatDuration, cn } from "@/lib/utils"
+import { alertInfo } from "@/lib/alerts"
 import { Trans } from "@lingui/react/macro"
 import { t } from "@lingui/core/macro"
 
@@ -15,7 +16,9 @@ export const alertsHistoryColumns: ColumnDef<AlertsHistoryRecord>[] = [
 				<Trans>System</Trans>
 			</Button>
 		),
-		cell: ({ row }) => <span className="ps-2">{row.original.expand?.system?.name || row.original.system}</span>,
+		cell: ({ row }) => (
+			<div className="ps-2 max-w-60 truncate">{row.original.expand?.system?.name || row.original.system}</div>
+		),
 		filterFn: (row, _, filterValue) => {
 			const display = row.original.expand?.system?.name || row.original.system || ""
 			return display.toLowerCase().includes(filterValue.toLowerCase())

beszel/site/src/components/alerts/alert-button.tsx

@@ -1,153 +1,36 @@
 import { t } from "@lingui/core/macro"
-import { Trans } from "@lingui/react/macro"
 import { memo, useMemo, useState } from "react"
 import { useStore } from "@nanostores/react"
 import { $alerts } from "@/lib/stores"
-import {
-	Dialog,
-	DialogTrigger,
-	DialogContent,
-	DialogDescription,
-	DialogHeader,
-	DialogTitle,
-} from "@/components/ui/dialog"
-import { BellIcon, GlobeIcon, ServerIcon } from "lucide-react"
-import { alertInfo, cn } from "@/lib/utils"
+import { BellIcon } from "lucide-react"
+import { cn } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
-import { AlertRecord, SystemRecord } from "@/types"
-import { $router, Link } from "../router"
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
-import { Checkbox } from "../ui/checkbox"
-import { SystemAlert, SystemAlertGlobal } from "./alerts-system"
-import { getPagePath } from "@nanostores/router"
+import { SystemRecord } from "@/types"
+import { AlertDialogContent } from "./alerts-sheet"
+import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet"
 
 export default memo(function AlertsButton({ system }: { system: SystemRecord }) {
-	const alerts = useStore($alerts)
 	const [opened, setOpened] = useState(false)
+	const alerts = useStore($alerts)
 
-	const hasAlert = alerts.some((alert) => alert.system === system.id)
-
+	const hasSystemAlert = alerts[system.id]?.size > 0
 	return useMemo(
 		() => (
-			<Dialog>
-				<DialogTrigger asChild>
+			<Sheet>
+				<SheetTrigger asChild>
 					<Button variant="ghost" size="icon" aria-label={t`Alerts`} data-nolink onClick={() => setOpened(true)}>
 						<BellIcon
 							className={cn("h-[1.2em] w-[1.2em] pointer-events-none", {
-								"fill-primary": hasAlert,
+								"fill-primary": hasSystemAlert,
 							})}
 						/>
 					</Button>
-				</DialogTrigger>
-				<DialogContent className="max-h-full sm:max-h-[95svh] overflow-auto max-w-[37rem]">
+				</SheetTrigger>
+				<SheetContent className="max-h-full overflow-auto w-145 !max-w-full p-4 sm:p-6">
 					{opened && <AlertDialogContent system={system} />}
-				</DialogContent>
-			</Dialog>
+				</SheetContent>
+			</Sheet>
 		),
-		[opened, hasAlert]
+		[opened, hasSystemAlert]
 	)
-
-	// return useMemo(
-	// 	() => (
-	// 		<Sheet>
-	// 			<SheetTrigger asChild>
-	// 				<Button variant="ghost" size="icon" aria-label={t`Alerts`} data-nolink onClick={() => setOpened(true)}>
-	// 					<BellIcon
-	// 						className={cn("h-[1.2em] w-[1.2em] pointer-events-none", {
-	// 							"fill-primary": hasAlert,
-	// 						})}
-	// 					/>
-	// 				</Button>
-	// 			</SheetTrigger>
-	// 			<SheetContent className="max-h-full overflow-auto w-[35em] p-4 sm:p-5">
-	// 				{opened && <AlertDialogContent system={system} />}
-	// 			</SheetContent>
-	// 		</Sheet>
-	// 	),
-	// 	[opened, hasAlert]
-	// )
 })
-
-function AlertDialogContent({ system }: { system: SystemRecord }) {
-	const alerts = useStore($alerts)
-	const [overwriteExisting, setOverwriteExisting] = useState<boolean | "indeterminate">(false)
-
-	/* key to prevent re-rendering */
-	const alertsSignature: string[] = []
-
-	const systemAlerts = alerts.filter((alert) => {
-		if (alert.system === system.id) {
-			alertsSignature.push(alert.name, alert.min, alert.value)
-			return true
-		}
-		return false
-	}) as AlertRecord[]
-
-	return useMemo(() => {
-		const data = Object.keys(alertInfo).map((name) => {
-			const alert = alertInfo[name as keyof typeof alertInfo]
-			return {
-				name: name as keyof typeof alertInfo,
-				alert,
-				system,
-			}
-		})
-
-		return (
-			<>
-				<DialogHeader>
-					<DialogTitle className="text-xl">
-						<Trans>Alerts</Trans>
-					</DialogTitle>
-					<DialogDescription>
-						<Trans>
-							See{" "}
-							<Link href={getPagePath($router, "settings", { name: "notifications" })} className="link">
-								notification settings
-							</Link>{" "}
-							to configure how you receive alerts.
-						</Trans>
-					</DialogDescription>
-				</DialogHeader>
-				<Tabs defaultValue="system">
-					<TabsList className="mb-1 -mt-0.5">
-						<TabsTrigger value="system">
-							<ServerIcon className="me-2 h-3.5 w-3.5" />
-							{system.name}
-						</TabsTrigger>
-						<TabsTrigger value="global">
-							<GlobeIcon className="me-1.5 h-3.5 w-3.5" />
-							<Trans>All Systems</Trans>
-						</TabsTrigger>
-					</TabsList>
-					<TabsContent value="system">
-						<div className="grid gap-3">
-							{data.map((d) => (
-								<SystemAlert key={d.name} system={system} data={d} systemAlerts={systemAlerts} />
-							))}
-						</div>
-					</TabsContent>
-					<TabsContent value="global">
-						<label
-							htmlFor="ovw"
-							className="mb-3 flex gap-2 items-center justify-center cursor-pointer border rounded-sm py-3 px-4 border-destructive text-destructive font-semibold text-sm"
-						>
-							<Checkbox
-								id="ovw"
-								className="text-destructive border-destructive data-[state=checked]:bg-destructive"
-								checked={overwriteExisting}
-								onCheckedChange={setOverwriteExisting}
-							/>
-							<Trans>Overwrite existing alerts</Trans>
-						</label>
-						<div className="grid gap-3">
-							{data.map((d) => (
-								<SystemAlertGlobal key={d.name} data={d} overwrite={overwriteExisting} />
-							))}
-						</div>
-					</TabsContent>
-				</Tabs>
-			</>
-		)
-	}, [alertsSignature.join(""), overwriteExisting])
-}

beszel/site/src/components/alerts/alerts-sheet.tsx

@@ -0,0 +1,299 @@
+import { t } from "@lingui/core/macro"
+import { Trans, Plural } from "@lingui/react/macro"
+import { $alerts, $systems } from "@/lib/stores"
+import { cn, debounce } from "@/lib/utils"
+import { alertInfo } from "@/lib/alerts"
+import { Switch } from "@/components/ui/switch"
+import { AlertInfo, AlertRecord, SystemRecord } from "@/types"
+import { lazy, memo, Suspense, useMemo, useState } from "react"
+import { toast } from "@/components/ui/use-toast"
+import { useStore } from "@nanostores/react"
+import { getPagePath } from "@nanostores/router"
+import { Checkbox } from "@/components/ui/checkbox"
+import { DialogTitle, DialogDescription } from "@/components/ui/dialog"
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs"
+import { ServerIcon, GlobeIcon } from "lucide-react"
+import { $router, Link } from "@/components/router"
+import { DialogHeader } from "@/components/ui/dialog"
+import { pb } from "@/lib/api"
+
+const Slider = lazy(() => import("@/components/ui/slider"))
+
+const endpoint = "/api/beszel/user-alerts"
+
+const alertDebounce = 100
+
+const alertKeys = Object.keys(alertInfo) as (keyof typeof alertInfo)[]
+
+const failedUpdateToast = (error: unknown) => {
+	console.error(error)
+	toast({
+		title: t`Failed to update alert`,
+		description: t`Please check logs for more details.`,
+		variant: "destructive",
+	})
+}
+
+/** Create or update alerts for a given name and systems */
+const upsertAlerts = debounce(
+	async ({ name, value, min, systems }: { name: string; value: number; min: number; systems: string[] }) => {
+		try {
+			await pb.send<{ success: boolean }>(endpoint, {
+				method: "POST",
+				// overwrite is always true because we've done filtering client side
+				body: { name, value, min, systems, overwrite: true },
+			})
+		} catch (error) {
+			failedUpdateToast(error)
+		}
+	},
+	alertDebounce
+)
+
+/** Delete alerts for a given name and systems */
+const deleteAlerts = debounce(async ({ name, systems }: { name: string; systems: string[] }) => {
+	try {
+		await pb.send<{ success: boolean }>(endpoint, {
+			method: "DELETE",
+			body: { name, systems },
+		})
+	} catch (error) {
+		failedUpdateToast(error)
+	}
+}, alertDebounce)
+
+export const AlertDialogContent = memo(function AlertDialogContent({ system }: { system: SystemRecord }) {
+	const alerts = useStore($alerts)
+	const [overwriteExisting, setOverwriteExisting] = useState<boolean | "indeterminate">(false)
+	const [currentTab, setCurrentTab] = useState("system")
+
+	const systemAlerts = alerts[system.id] ?? new Map()
+
+	// We need to keep a copy of alerts when we switch to global tab. If we always compare to
+	// current alerts, it will only be updated when first checked, then won't be updated because
+	// after that it exists.
+	const alertsWhenGlobalSelected = useMemo(() => {
+		return currentTab === "global" ? structuredClone(alerts) : alerts
+	}, [currentTab])
+
+	return (
+		<>
+			<DialogHeader>
+				<DialogTitle className="text-xl">
+					<Trans>Alerts</Trans>
+				</DialogTitle>
+				<DialogDescription>
+					<Trans>
+						See{" "}
+						<Link href={getPagePath($router, "settings", { name: "notifications" })} className="link">
+							notification settings
+						</Link>{" "}
+						to configure how you receive alerts.
+					</Trans>
+				</DialogDescription>
+			</DialogHeader>
+			<Tabs defaultValue="system" onValueChange={setCurrentTab}>
+				<TabsList className="mb-1 -mt-0.5">
+					<TabsTrigger value="system">
+						<ServerIcon className="me-2 h-3.5 w-3.5" />
+						<span className="truncate max-w-60">{system.name}</span>
+					</TabsTrigger>
+					<TabsTrigger value="global">
+						<GlobeIcon className="me-1.5 h-3.5 w-3.5" />
+						<Trans>All Systems</Trans>
+					</TabsTrigger>
+				</TabsList>
+				<TabsContent value="system">
+					<div className="grid gap-3">
+						{alertKeys.map((name) => (
+							<AlertContent
+								key={name}
+								alertKey={name}
+								data={alertInfo[name as keyof typeof alertInfo]}
+								alert={systemAlerts.get(name)}
+								system={system}
+							/>
+						))}
+					</div>
+				</TabsContent>
+				<TabsContent value="global">
+					<label
+						htmlFor="ovw"
+						className="mb-3 flex gap-2 items-center justify-center cursor-pointer border rounded-sm py-3 px-4 border-destructive text-destructive font-semibold text-sm"
+					>
+						<Checkbox
+							id="ovw"
+							className="text-destructive border-destructive data-[state=checked]:bg-destructive"
+							checked={overwriteExisting}
+							onCheckedChange={setOverwriteExisting}
+						/>
+						<Trans>Overwrite existing alerts</Trans>
+					</label>
+					<div className="grid gap-3">
+						{alertKeys.map((name) => (
+							<AlertContent
+								key={name}
+								alertKey={name}
+								system={system}
+								alert={systemAlerts.get(name)}
+								data={alertInfo[name as keyof typeof alertInfo]}
+								global={true}
+								overwriteExisting={!!overwriteExisting}
+								initialAlertsState={alertsWhenGlobalSelected}
+							/>
+						))}
+					</div>
+				</TabsContent>
+			</Tabs>
+		</>
+	)
+})
+
+export function AlertContent({
+	alertKey,
+	data: alertData,
+	system,
+	alert,
+	global = false,
+	overwriteExisting = false,
+	initialAlertsState = {},
+}: {
+	alertKey: string
+	data: AlertInfo
+	system: SystemRecord
+	alert?: AlertRecord
+	global?: boolean
+	overwriteExisting?: boolean
+	initialAlertsState?: Record<string, Map<string, AlertRecord>>
+}) {
+	const { name } = alertData
+
+	const singleDescription = alertData.singleDesc?.()
+
+	const [checked, setChecked] = useState(global ? false : !!alert)
+	const [min, setMin] = useState(alert?.min || 10)
+	const [value, setValue] = useState(alert?.value || (singleDescription ? 0 : alertData.start ?? 80))
+
+	const Icon = alertData.icon
+
+	/** Get system ids to update */
+	function getSystemIds(): string[] {
+		// if not global, update only the current system
+		if (!global) {
+			return [system.id]
+		}
+		// if global, update all systems when overwriteExisting is true
+		// update only systems without an existing alert when overwriteExisting is false
+		const allSystems = $systems.get()
+		const systemIds: string[] = []
+		for (const system of allSystems) {
+			if (overwriteExisting || !initialAlertsState[system.id]?.has(alertKey)) {
+				systemIds.push(system.id)
+			}
+		}
+		return systemIds
+	}
+
+	function sendUpsert(min: number, value: number) {
+		const systems = getSystemIds()
+		systems.length &&
+			upsertAlerts({
+				name: alertKey,
+				value,
+				min,
+				systems,
+			})
+	}
+
+	return (
+		<div className="rounded-lg border border-muted-foreground/15 hover:border-muted-foreground/20 transition-colors duration-100 group">
+			<label
+				htmlFor={`s${name}`}
+				className={cn("flex flex-row items-center justify-between gap-4 cursor-pointer p-4", {
+					"pb-0": checked,
+				})}
+			>
+				<div className="grid gap-1 select-none">
+					<p className="font-semibold flex gap-3 items-center">
+						<Icon className="h-4 w-4 opacity-85" /> {alertData.name()}
+					</p>
+					{!checked && <span className="block text-sm text-muted-foreground">{alertData.desc()}</span>}
+				</div>
+				<Switch
+					id={`s${name}`}
+					checked={checked}
+					onCheckedChange={(newChecked) => {
+						setChecked(newChecked)
+						if (newChecked) {
+							// if alert checked, create or update alert
+							sendUpsert(min, value)
+						} else {
+							// if unchecked, delete alert (unless global and overwriteExisting is false)
+							deleteAlerts({ name: alertKey, systems: getSystemIds() })
+							// when force deleting all alerts of a type, also remove them from initialAlertsState
+							if (overwriteExisting) {
+								for (const curAlerts of Object.values(initialAlertsState)) {
+									curAlerts.delete(alertKey)
+								}
+							}
+						}
+					}}
+				/>
+			</label>
+			{checked && (
+				<div className="grid sm:grid-cols-2 mt-1.5 gap-5 px-4 pb-5 tabular-nums text-muted-foreground">
+					<Suspense fallback={<div className="h-10" />}>
+						{!singleDescription && (
+							<div>
+								<p id={`v${name}`} className="text-sm block h-8">
+									<Trans>
+										Average exceeds{" "}
+										<strong className="text-foreground">
+											{value}
+											{alertData.unit}
+										</strong>
+									</Trans>
+								</p>
+								<div className="flex gap-3">
+									<Slider
+										aria-labelledby={`v${name}`}
+										defaultValue={[value]}
+										onValueCommit={(val) => sendUpsert(min, val[0])}
+										onValueChange={(val) => setValue(val[0])}
+										step={alertData.step ?? 1}
+										min={alertData.min ?? 1}
+										max={alertData.max ?? 99}
+									/>
+								</div>
+							</div>
+						)}
+						<div className={cn(singleDescription && "col-span-full lowercase")}>
+							<p id={`t${name}`} className="text-sm block h-8 first-letter:uppercase">
+								{singleDescription && (
+									<>
+										{singleDescription}
+										{` `}
+									</>
+								)}
+								<Trans>
+									For <strong className="text-foreground">{min}</strong>{" "}
+									<Plural value={min} one="minute" other="minutes" />
+								</Trans>
+							</p>
+							<div className="flex gap-3">
+								<Slider
+									aria-labelledby={`v${name}`}
+									defaultValue={[min]}
+									onValueCommit={(minVal) => sendUpsert(minVal[0], value)}
+									onValueChange={(val) => setMin(val[0])}
+									min={1}
+									max={60}
+								/>
+							</div>
+						</div>
+					</Suspense>
+				</div>
+			)}
+		</div>
+	)
+}

beszel/site/src/components/alerts/alerts-system.tsx

@@ -1,311 +0,0 @@
-import { t } from "@lingui/core/macro"
-import { Trans, Plural } from "@lingui/react/macro"
-import { $alerts, $systems, pb } from "@/lib/stores"
-import { alertInfo, cn } from "@/lib/utils"
-import { Switch } from "@/components/ui/switch"
-import { AlertInfo, AlertRecord, SystemRecord } from "@/types"
-import { lazy, Suspense, useMemo, useState } from "react"
-import { toast } from "../ui/use-toast"
-import { BatchService } from "pocketbase"
-import { getSemaphore } from "@henrygd/semaphore"
-
-interface AlertData {
-	checked?: boolean
-	val?: number
-	min?: number
-	updateAlert?: (checked: boolean, value: number, min: number) => void
-	name: keyof typeof alertInfo
-	alert: AlertInfo
-	system: SystemRecord
-}
-
-const Slider = lazy(() => import("@/components/ui/slider"))
-
-const failedUpdateToast = () =>
-	toast({
-		title: t`Failed to update alert`,
-		description: t`Please check logs for more details.`,
-		variant: "destructive",
-	})
-
-export function SystemAlert({
-	system,
-	systemAlerts,
-	data,
-}: {
-	system: SystemRecord
-	systemAlerts: AlertRecord[]
-	data: AlertData
-}) {
-	const alert = systemAlerts.find((alert) => alert.name === data.name)
-
-	data.updateAlert = async (checked: boolean, value: number, min: number) => {
-		try {
-			if (alert && !checked) {
-				await pb.collection("alerts").delete(alert.id)
-			} else if (alert && checked) {
-				await pb.collection("alerts").update(alert.id, { value, min, triggered: false })
-			} else if (checked) {
-				pb.collection("alerts").create({
-					system: system.id,
-					user: pb.authStore.record!.id,
-					name: data.name,
-					value: value,
-					min: min,
-				})
-			}
-		} catch (e) {
-			failedUpdateToast()
-		}
-	}
-
-	if (alert) {
-		data.checked = true
-		data.val = alert.value
-		data.min = alert.min || 1
-	}
-
-	return <AlertContent data={data} />
-}
-
-export const SystemAlertGlobal = ({ data, overwrite }: { data: AlertData; overwrite: boolean | "indeterminate" }) => {
-	data.checked = false
-	data.val = data.min = 0
-
-	// set of system ids that have an alert for this name when the component is mounted
-	const existingAlertsSystems = useMemo(() => {
-		const map = new Set<string>()
-		const alerts = $alerts.get()
-		for (const alert of alerts) {
-			if (alert.name === data.name) {
-				map.add(alert.system)
-			}
-		}
-		return map
-	}, [])
-
-	data.updateAlert = async (checked: boolean, value: number, min: number) => {
-		const sem = getSemaphore("alerts")
-		await sem.acquire()
-		try {
-			// if another update is waiting behind, don't start this one
-			if (sem.size() > 1) {
-				return
-			}
-
-			const recordData: Partial<AlertRecord> = {
-				value,
-				min,
-				triggered: false,
-			}
-
-			const batch = batchWrapper("alerts", 25)
-			const systems = $systems.get()
-			const currentAlerts = $alerts.get()
-
-			// map of current alerts with this name right now by system id
-			const currentAlertsSystems = new Map<string, AlertRecord>()
-			for (const alert of currentAlerts) {
-				if (alert.name === data.name) {
-					currentAlertsSystems.set(alert.system, alert)
-				}
-			}
-
-			if (overwrite) {
-				existingAlertsSystems.clear()
-			}
-
-			const processSystem = async (system: SystemRecord): Promise<void> => {
-				const existingAlert = existingAlertsSystems.has(system.id)
-
-				if (!overwrite && existingAlert) {
-					return
-				}
-
-				const currentAlert = currentAlertsSystems.get(system.id)
-
-				// delete existing alert if unchecked
-				if (!checked && currentAlert) {
-					return batch.remove(currentAlert.id)
-				}
-				if (checked && currentAlert) {
-					// update existing alert if checked
-					return batch.update(currentAlert.id, recordData)
-				}
-				if (checked) {
-					// create new alert if checked and not existing
-					return batch.create({
-						system: system.id,
-						user: pb.authStore.record!.id,
-						name: data.name,
-						...recordData,
-					})
-				}
-			}
-
-			// make sure current system is updated in the first batch
-			await processSystem(data.system)
-			for (const system of systems) {
-				if (system.id === data.system.id) {
-					continue
-				}
-				if (sem.size() > 1) {
-					return
-				}
-				await processSystem(system)
-			}
-			await batch.send()
-		} finally {
-			sem.release()
-		}
-	}
-
-	return <AlertContent data={data} />
-}
-
-/**
- * Creates a wrapper for performing batch operations on a specified collection.
- */
-function batchWrapper(collection: string, batchSize: number) {
-	let batch: BatchService | undefined
-	let count = 0
-
-	const create = async <T extends Record<string, any>>(options: T) => {
-		batch ||= pb.createBatch()
-		batch.collection(collection).create(options)
-		if (++count >= batchSize) {
-			await send()
-		}
-	}
-
-	const update = async <T extends Record<string, any>>(id: string, data: T) => {
-		batch ||= pb.createBatch()
-		batch.collection(collection).update(id, data)
-		if (++count >= batchSize) {
-			await send()
-		}
-	}
-
-	const remove = async (id: string) => {
-		batch ||= pb.createBatch()
-		batch.collection(collection).delete(id)
-		if (++count >= batchSize) {
-			await send()
-		}
-	}
-
-	const send = async () => {
-		if (count) {
-			await batch?.send({ requestKey: null })
-			batch = undefined
-			count = 0
-		}
-	}
-
-	return {
-		update,
-		remove,
-		send,
-		create,
-	}
-}
-
-function AlertContent({ data }: { data: AlertData }) {
-	const { name } = data
-
-	const singleDescription = data.alert.singleDesc?.()
-
-	const [checked, setChecked] = useState(data.checked || false)
-	const [min, setMin] = useState(data.min || 10)
-	const [value, setValue] = useState(data.val || (singleDescription ? 0 : data.alert.start ?? 80))
-
-	const Icon = alertInfo[name].icon
-
-	return (
-		<div className="rounded-lg border border-muted-foreground/15 hover:border-muted-foreground/20 transition-colors duration-100 group">
-			<label
-				htmlFor={`s${name}`}
-				className={cn("flex flex-row items-center justify-between gap-4 cursor-pointer p-4", {
-					"pb-0": checked,
-				})}
-			>
-				<div className="grid gap-1 select-none">
-					<p className="font-semibold flex gap-3 items-center">
-						<Icon className="h-4 w-4 opacity-85" /> {data.alert.name()}
-					</p>
-					{!checked && <span className="block text-sm text-muted-foreground">{data.alert.desc()}</span>}
-				</div>
-				<Switch
-					id={`s${name}`}
-					checked={checked}
-					onCheckedChange={(newChecked) => {
-						setChecked(newChecked)
-						data.updateAlert?.(newChecked, value, min)
-					}}
-				/>
-			</label>
-			{checked && (
-				<div className="grid sm:grid-cols-2 mt-1.5 gap-5 px-4 pb-5 tabular-nums text-muted-foreground">
-					<Suspense fallback={<div className="h-10" />}>
-						{!singleDescription && (
-							<div>
-								<p id={`v${name}`} className="text-sm block h-8">
-									<Trans>
-										Average exceeds{" "}
-										<strong className="text-foreground">
-											{value}
-											{data.alert.unit}
-										</strong>
-									</Trans>
-								</p>
-								<div className="flex gap-3">
-									<Slider
-										aria-labelledby={`v${name}`}
-										defaultValue={[value]}
-										onValueCommit={(val) => {
-											data.updateAlert?.(true, val[0], min)
-										}}
-										onValueChange={(val) => {
-											setValue(val[0])
-										}}
-										step={data.alert.step ?? 1}
-										min={data.alert.min ?? 1}
-										max={alertInfo[name].max ?? 99}
-									/>
-								</div>
-							</div>
-						)}
-						<div className={cn(singleDescription && "col-span-full lowercase")}>
-							<p id={`t${name}`} className="text-sm block h-8 first-letter:uppercase">
-								{singleDescription && (
-									<>
-										{singleDescription}
-										{` `}
-									</>
-								)}
-								<Trans>
-									For <strong className="text-foreground">{min}</strong>{" "}
-									<Plural value={min} one="minute" other="minutes" />
-								</Trans>
-							</p>
-							<div className="flex gap-3">
-								<Slider
-									aria-labelledby={`v${name}`}
-									defaultValue={[min]}
-									onValueCommit={(min) => {
-										data.updateAlert?.(true, value, min[0])
-									}}
-									onValueChange={(val) => {
-										setMin(val[0])
-									}}
-									min={1}
-									max={60}
-								/>
-							</div>
-						</div>
-					</Suspense>
-				</div>
-			)}
-		</div>
-	)
-}

beszel/site/src/components/charts/area-chart.tsx

@@ -7,7 +7,7 @@ import { useMemo } from "react"
 export type DataPoint = {
 	label: string
 	dataKey: (data: SystemStatsRecord) => number | undefined
-	color: string
+	color: number | string
 	opacity: number
 }
 
@@ -18,6 +18,7 @@ export default function AreaChartDefault({
 	tickFormatter,
 	contentFormatter,
 	dataPoints,
+	domain,
 }: // logRender = false,
 {
 	chartData: ChartData
@@ -26,6 +27,7 @@ export default function AreaChartDefault({
 	tickFormatter: (value: number, index: number) => string
 	contentFormatter: ({ value, payload }: { value: number; payload: SystemStatsRecord }) => string
 	dataPoints?: DataPoint[]
+	domain?: [number, number]
 	// logRender?: boolean
 }) {
 	const { yAxisWidth, updateYAxisWidth } = useYAxisWidth()
@@ -51,7 +53,7 @@ export default function AreaChartDefault({
 							orientation={chartData.orientation}
 							className="tracking-tighter"
 							width={yAxisWidth}
-							domain={[0, max ?? "auto"]}
+							domain={domain ?? [0, max ?? "auto"]}
 							tickFormatter={(value, index) => updateYAxisWidth(tickFormatter(value, index))}
 							tickLine={false}
 							axisLine={false}
@@ -68,7 +70,7 @@ export default function AreaChartDefault({
 							}
 						/>
 						{dataPoints?.map((dataPoint, i) => {
-							const color = `hsl(var(--chart-${dataPoint.color}))`
+							const color = `var(--chart-${dataPoint.color})`
 							return (
 								<Area
 									key={i}

beszel/site/src/components/charts/container-chart.tsx

@@ -29,41 +29,36 @@ export default memo(function ContainerChart({
 	const isNetChart = chartType === ChartType.Network
 
 	const chartConfig = useMemo(() => {
-		let config = {} as Record<
-			string,
-			{
-				label: string
-				color: string
-			}
-		>
-		const totalUsage = {} as Record<string, number>
-		for (let stats of containerData) {
-			for (let key in stats) {
-				if (!key || key === "created") {
-					continue
-				}
-				if (!(key in totalUsage)) {
-					totalUsage[key] = 0
-				}
-				if (isNetChart) {
-					totalUsage[key] += (stats[key]?.nr ?? 0) + (stats[key]?.ns ?? 0)
-				} else {
-					// @ts-ignore
-					totalUsage[key] += stats[key]?.[dataKey] ?? 0
-				}
+		const config = {} as Record<string, { label: string; color: string }>
+		const totalUsage = new Map<string, number>()
+
+		// calculate total usage of each container
+		for (const stats of containerData) {
+			for (const key in stats) {
+				if (!key || key === "created") continue
+
+				const currentTotal = totalUsage.get(key) ?? 0
+				const increment = isNetChart
+					? (stats[key]?.nr ?? 0) + (stats[key]?.ns ?? 0)
+					: // @ts-ignore
+					  stats[key]?.[dataKey] ?? 0
+
+				totalUsage.set(key, currentTotal + increment)
 			}
 		}
-		let keys = Object.keys(totalUsage)
-		keys.sort((a, b) => (totalUsage[a] > totalUsage[b] ? -1 : 1))
-		const length = keys.length
-		for (let i = 0; i < length; i++) {
-			const key = keys[i]
+
+		// Sort keys and generate colors based on usage
+		const sortedEntries = Array.from(totalUsage.entries()).sort(([, a], [, b]) => b - a)
+
+		const length = sortedEntries.length
+		sortedEntries.forEach(([key], i) => {
 			const hue = ((i * 360) / length) % 360
 			config[key] = {
 				label: key,
 				color: `hsl(${hue}, 60%, 55%)`,
 			}
-		}
+		})
+
 		return config satisfies ChartConfig
 	}, [chartData])
 
@@ -124,6 +119,8 @@ export default memo(function ContainerChart({
 		return obj
 	}, [])
 
+	const filterLower = filter?.toLowerCase()
+
 	// console.log('rendered at', new Date())
 
 	if (containerData.length === 0) {
@@ -165,7 +162,7 @@ export default memo(function ContainerChart({
 						content={<ChartTooltipContent filter={filter} contentFormatter={toolTipFormatter} />}
 					/>
 					{Object.keys(chartConfig).map((key) => {
-						const filtered = filter && !key.toLowerCase().includes(filter.toLowerCase())
+						const filtered = filterLower && !key.toLowerCase().includes(filterLower)
 						let fillOpacity = filtered ? 0.05 : 0.4
 						let strokeOpacity = filtered ? 0.1 : 1
 						return (

beszel/site/src/components/charts/disk-chart.tsx

@@ -69,9 +69,9 @@ export default memo(function DiskChart({
 						dataKey={dataKey}
 						name={t`Disk Usage`}
 						type="monotoneX"
-						fill="hsl(var(--chart-4))"
+						fill="var(--chart-4)"
 						fillOpacity={0.4}
-						stroke="hsl(var(--chart-4))"
+						stroke="var(--chart-4)"
 						// animationDuration={1200}
 						isAnimationActive={false}
 					/>

beszel/site/src/components/charts/mem-chart.tsx

@@ -6,7 +6,7 @@ import { ChartData } from "@/types"
 import { useLingui } from "@lingui/react/macro"
 import { Unit } from "@/lib/enums"
 
-export default memo(function MemChart({ chartData }: { chartData: ChartData }) {
+export default memo(function MemChart({ chartData, showMax }: { chartData: ChartData; showMax: boolean }) {
 	const { yAxisWidth, updateYAxisWidth } = useYAxisWidth()
 	const { t } = useLingui()
 
@@ -66,39 +66,39 @@ export default memo(function MemChart({ chartData }: { chartData: ChartData }) {
 					<Area
 						name={t`Used`}
 						order={3}
-						dataKey="stats.mu"
+						dataKey={({ stats }) => (showMax ? stats?.mm : stats?.mu)}
 						type="monotoneX"
-						fill="hsl(var(--chart-2))"
+						fill="var(--chart-2)"
 						fillOpacity={0.4}
-						stroke="hsl(var(--chart-2))"
+						stroke="var(--chart-2)"
 						stackId="1"
 						isAnimationActive={false}
 					/>
-					{chartData.systemStats.at(-1)?.stats.mz && (
-						<Area
-							name="ZFS ARC"
-							order={2}
-							dataKey="stats.mz"
-							type="monotoneX"
-							fill="hsla(175 60% 45% / 0.8)"
-							fillOpacity={0.5}
-							stroke="hsla(175 60% 45% / 0.8)"
-							stackId="1"
-							isAnimationActive={false}
-						/>
-					)}
+					{/* {chartData.systemStats.at(-1)?.stats.mz && ( */}
+					<Area
+						name="ZFS ARC"
+						order={2}
+						dataKey={({ stats }) => (showMax ? null : stats?.mz)}
+						type="monotoneX"
+						fill="hsla(175 60% 45% / 0.8)"
+						fillOpacity={0.5}
+						stroke="hsla(175 60% 45% / 0.8)"
+						stackId="1"
+						isAnimationActive={false}
+					/>
+					{/* )} */}
 					<Area
 						name={t`Cache / Buffers`}
 						order={1}
-						dataKey="stats.mb"
+						dataKey={({ stats }) => (showMax ? null : stats?.mb)}
 						type="monotoneX"
 						fill="hsla(160 60% 45% / 0.5)"
 						fillOpacity={0.4}
-						// strokeOpacity={1}
 						stroke="hsla(160 60% 45% / 0.5)"
 						stackId="1"
 						isAnimationActive={false}
 					/>
+					{/* <ChartLegend content={<ChartLegendContent />} /> */}
 				</AreaChart>
 			</ChartContainer>
 		</div>

beszel/site/src/components/charts/swap-chart.tsx

@@ -58,9 +58,9 @@ export default memo(function SwapChart({ chartData }: { chartData: ChartData })
 						dataKey="stats.su"
 						name={t`Used`}
 						type="monotoneX"
-						fill="hsl(var(--chart-2))"
+						fill="var(--chart-2)"
 						fillOpacity={0.4}
-						stroke="hsl(var(--chart-2))"
+						stroke="var(--chart-2)"
 						isAnimationActive={false}
 					/>
 				</AreaChart>

beszel/site/src/components/command-palette.tsx

@@ -23,11 +23,13 @@ import {
 } from "@/components/ui/command"
 import { memo, useEffect, useMemo } from "react"
 import { $systems } from "@/lib/stores"
-import { getHostDisplayValue, isAdmin, listen } from "@/lib/utils"
+import { getHostDisplayValue, listen } from "@/lib/utils"
 import { $router, basePath, navigate, prependBasePath } from "./router"
 import { Trans } from "@lingui/react/macro"
 import { t } from "@lingui/core/macro"
 import { getPagePath } from "@nanostores/router"
+import { DialogDescription } from "@radix-ui/react-dialog"
+import { isAdmin } from "@/lib/api"
 
 export default memo(function CommandPalette({ open, setOpen }: { open: boolean; setOpen: (open: boolean) => void }) {
 	useEffect(() => {
@@ -54,11 +56,9 @@ export default memo(function CommandPalette({ open, setOpen }: { open: boolean;
 		)
 		return (
 			<CommandDialog open={open} onOpenChange={setOpen}>
+				<DialogDescription className="sr-only">Command palette</DialogDescription>
 				<CommandInput placeholder={t`Search for systems or settings...`} />
 				<CommandList>
-					<CommandEmpty>
-						<Trans>No results found.</Trans>
-					</CommandEmpty>
 					{systems.length > 0 && (
 						<>
 							<CommandGroup>
@@ -71,7 +71,7 @@ export default memo(function CommandPalette({ open, setOpen }: { open: boolean;
 										}}
 									>
 										<Server className="me-2 size-4" />
-										<span>{system.name}</span>
+										<span className="max-w-60 truncate">{system.name}</span>
 										<CommandShortcut>{getHostDisplayValue(system)}</CommandShortcut>
 									</CommandItem>
 								))}
@@ -214,6 +214,9 @@ export default memo(function CommandPalette({ open, setOpen }: { open: boolean;
 							</CommandGroup>
 						</>
 					)}
+					<CommandEmpty>
+						<Trans>No results found.</Trans>
+					</CommandEmpty>
 				</CommandList>
 			</CommandDialog>
 		)

beszel/site/src/components/lang-toggle.tsx

@@ -22,7 +22,7 @@ export function LangToggle() {
 				{languages.map(({ lang, label, e }) => (
 					<DropdownMenuItem
 						key={lang}
-						className={cn("px-2.5 flex gap-2.5", lang === i18n.locale && "font-semibold")}
+						className={cn("px-2.5 flex gap-2.5 cursor-pointer", lang === i18n.locale && "bg-accent/70 font-medium")}
 						onClick={() => dynamicActivate(lang)}
 					>
 						<span>{e}</span> {label}

beszel/site/src/components/login/auth-form.tsx

@@ -5,7 +5,7 @@ import { buttonVariants } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
 import { LoaderCircle, LockIcon, LogInIcon, MailIcon } from "lucide-react"
-import { $authenticated, pb } from "@/lib/stores"
+import { $authenticated } from "@/lib/stores"
 import * as v from "valibot"
 import { toast } from "../ui/use-toast"
 import { Dialog, DialogContent, DialogTrigger, DialogHeader, DialogTitle } from "@/components/ui/dialog"
@@ -13,6 +13,7 @@ import { useCallback, useEffect, useState } from "react"
 import { AuthMethodsList, AuthProviderInfo, OAuth2AuthConfig } from "pocketbase"
 import { $router, Link, prependBasePath } from "../router"
 import { getPagePath } from "@nanostores/router"
+import { pb } from "@/lib/api"
 
 const honeypot = v.literal("")
 const emailSchema = v.pipe(v.string(), v.email(t`Invalid email address.`))
@@ -288,7 +289,7 @@ export function UserAuthForm({
 									// }}
 								/>
 							)}
-							<span className="translate-y-[1px]">{provider.displayName}</span>
+							<span className="translate-y-px">{provider.displayName}</span>
 						</button>
 					))}
 				</div>
@@ -299,7 +300,7 @@ export function UserAuthForm({
 					<DialogTrigger asChild>
 						<button type="button" className={cn(buttonVariants({ variant: "outline" }))}>
 							<img className="me-2 h-4 w-4 dark:invert" src={prependBasePath("/_/images/oauth2/github.svg")} alt="" />
-							<span className="translate-y-[1px]">GitHub</span>
+							<span className="translate-y-px">GitHub</span>
 						</button>
 					</DialogTrigger>
 					<DialogContent style={{ maxWidth: 440, width: "90%" }}>

beszel/site/src/components/login/forgot-pass-form.tsx

@@ -1,5 +1,5 @@
-import { Trans } from "@lingui/react/macro";
-import { t } from "@lingui/core/macro";
+import { Trans } from "@lingui/react/macro"
+import { t } from "@lingui/core/macro"
 import { LoaderCircle, MailIcon, SendHorizonalIcon } from "lucide-react"
 import { Input } from "../ui/input"
 import { Label } from "../ui/label"
@@ -7,9 +7,9 @@ import { useCallback, useState } from "react"
 import { toast } from "../ui/use-toast"
 import { buttonVariants } from "../ui/button"
 import { cn } from "@/lib/utils"
-import { pb } from "@/lib/stores"
 import { Dialog, DialogHeader } from "../ui/dialog"
 import { DialogContent, DialogTrigger, DialogTitle } from "../ui/dialog"
+import { pb } from "@/lib/api"
 
 const showLoginFaliedToast = () => {
 	toast({

beszel/site/src/components/login/login.tsx

@@ -1,13 +1,14 @@
-import { t } from "@lingui/core/macro";
+import { t } from "@lingui/core/macro"
 import { UserAuthForm } from "@/components/login/auth-form"
 import { Logo } from "../logo"
 import { useEffect, useMemo, useState } from "react"
-import { pb } from "@/lib/stores"
 import { useStore } from "@nanostores/react"
 import ForgotPassword from "./forgot-pass-form"
 import { $router } from "../router"
 import { AuthMethodsList } from "pocketbase"
 import { useTheme } from "../theme-provider"
+import { pb } from "@/lib/api"
+import { ModeToggle } from "../mode-toggle"
 
 export default function () {
 	const page = useStore($router)
@@ -50,8 +51,11 @@ export default function () {
 			<div
 				className="grid gap-5 w-full px-4 mx-auto"
 				// @ts-ignore
-				style={{ maxWidth: "22em", "--border": theme == "light" ? "30 8% 80%" : "220 3% 20%" }}
+				style={{ maxWidth: "22em", "--border": theme == "light" ? "hsl(30, 8%, 70%)" : "hsl(220, 3%, 25%)" }}
 			>
+				<div className="absolute top-3 right-3">
+					<ModeToggle />
+				</div>
 				<div className="text-center">
 					<h1 className="mb-3">
 						<Logo className="h-7 fill-foreground mx-auto" />

beszel/site/src/components/mode-toggle.tsx

@@ -1,56 +1,21 @@
-import { Trans } from "@lingui/react/macro";
-import { t } from "@lingui/core/macro";
-import { LaptopIcon, MoonStarIcon, SunIcon } from "lucide-react"
+import { t } from "@lingui/core/macro"
+import { MoonStarIcon, SunIcon } from "lucide-react"
 
 import { Button } from "@/components/ui/button"
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
 import { useTheme } from "@/components/theme-provider"
-import { cn } from "@/lib/utils"
 
 export function ModeToggle() {
 	const { theme, setTheme } = useTheme()
 
-	const options = [
-		{
-			theme: "light",
-			Icon: SunIcon,
-			label: <Trans comment="Light theme">Light</Trans>,
-		},
-		{
-			theme: "dark",
-			Icon: MoonStarIcon,
-			label: <Trans comment="Dark theme">Dark</Trans>,
-		},
-		{
-			theme: "system",
-			Icon: LaptopIcon,
-			label: <Trans comment="System theme">System</Trans>,
-		},
-	]
-
 	return (
-		<DropdownMenu>
-			<DropdownMenuTrigger asChild>
-				<Button variant={"ghost"} size="icon" aria-label={t`Toggle theme`}>
-					<SunIcon className="h-[1.2rem] w-[1.2rem] dark:opacity-0" />
-					<MoonStarIcon className="absolute h-[1.2rem] w-[1.2rem] opacity-0 dark:opacity-100" />
-				</Button>
-			</DropdownMenuTrigger>
-			<DropdownMenuContent>
-				{options.map((opt) => {
-					const selected = opt.theme === theme
-					return (
-						<DropdownMenuItem
-							key={opt.theme}
-							className={cn("px-2.5", selected ? "font-semibold" : "")}
-							onClick={() => setTheme(opt.theme as "dark" | "light" | "system")}
-						>
-							<opt.Icon className={cn("me-2 h-4 w-4 opacity-80", selected && "opacity-100")} />
-							{opt.label}
-						</DropdownMenuItem>
-					)
-				})}
-			</DropdownMenuContent>
-		</DropdownMenu>
+		<Button
+			variant={"ghost"}
+			size="icon"
+			aria-label={t`Toggle theme`}
+			onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
+		>
+			<SunIcon className="h-[1.2rem] w-[1.2rem] transition-all -rotate-90 dark:opacity-0 dark:rotate-0" />
+			<MoonStarIcon className="absolute h-[1.2rem] w-[1.2rem] transition-all opacity-0 -rotate-90 dark:opacity-100 dark:rotate-0" />
+		</Button>
 	)
 }

beszel/site/src/components/navbar.tsx

@@ -1,4 +1,4 @@
-import { Trans } from "@lingui/react/macro";
+import { Trans } from "@lingui/react/macro"
 import { useState, lazy, Suspense } from "react"
 import { Button, buttonVariants } from "@/components/ui/button"
 import {
@@ -15,8 +15,8 @@ import { $router, basePath, Link, prependBasePath } from "./router"
 import { LangToggle } from "./lang-toggle"
 import { ModeToggle } from "./mode-toggle"
 import { Logo } from "./logo"
-import { pb } from "@/lib/stores"
-import { cn, isReadOnlyUser, isAdmin, logOut } from "@/lib/utils"
+import { cn, runOnce } from "@/lib/utils"
+import { isReadOnlyUser, isAdmin, logOut, pb } from "@/lib/api"
 import {
 	DropdownMenu,
 	DropdownMenuTrigger,
@@ -36,12 +36,17 @@ const isMac = navigator.platform.toUpperCase().indexOf("MAC") >= 0
 export default function Navbar() {
 	return (
 		<div className="flex items-center h-14 md:h-16 bg-card px-4 pe-3 sm:px-6 border border-border/60 bt-0 rounded-md my-4">
-			<Link href={basePath} aria-label="Home" className="p-2 ps-0 me-3">
+			<Link
+				href={basePath}
+				aria-label="Home"
+				className="p-2 ps-0 me-3"
+				onMouseEnter={runOnce(() => import("@/components/routes/home"))}
+			>
 				<Logo className="h-[1.1rem] md:h-5 fill-foreground" />
 			</Link>
 			<SearchButton />
 
-			<div className="flex items-center ms-auto">
+			<div className="flex items-center ms-auto" onMouseEnter={() => import("@/components/routes/settings/general")}>
 				<LangToggle />
 				<ModeToggle />
 				<Link

beszel/site/src/components/router.tsx

@@ -35,18 +35,20 @@ export const navigate = (urlString: string) => {
 	$router.open(urlString)
 }
 
-function onClick(e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) {
-	e.preventDefault()
-	$router.open(new URL((e.currentTarget as HTMLAnchorElement).href).pathname)
-}
-
-export const Link = (props: React.AnchorHTMLAttributes<HTMLAnchorElement>) => {
-	let clickFn = onClick
-	if (props.onClick) {
-		clickFn = (e) => {
-			onClick(e)
-			props.onClick?.(e)
-		}
-	}
-	return <a {...props} onClick={clickFn}></a>
+export function Link(props: React.AnchorHTMLAttributes<HTMLAnchorElement>) {
+	return (
+		<a
+			{...props}
+			onClick={(e) => {
+				e.preventDefault()
+				const href = props.href || ""
+				if (e.ctrlKey || e.metaKey) {
+					window.open(href, "_blank")
+				} else {
+					navigate(href)
+					props.onClick?.(e)
+				}
+			}}
+		></a>
+	)
 }

beszel/site/src/components/routes/home.tsx

@@ -1,39 +1,24 @@
-import { Suspense, lazy, memo, useEffect, useMemo } from "react"
+import { Suspense, memo, useEffect, useMemo } from "react"
 import { Card, CardContent, CardHeader, CardTitle } from "../ui/card"
-import { $alerts, $systems, pb } from "@/lib/stores"
+import { $alerts, $systems } from "@/lib/stores"
 import { useStore } from "@nanostores/react"
 import { GithubIcon } from "lucide-react"
 import { Separator } from "../ui/separator"
-import { alertInfo, updateRecordList, updateSystemList } from "@/lib/utils"
+import { getSystemNameFromId } from "@/lib/utils"
+import { pb, updateRecordList, updateSystemList } from "@/lib/api"
 import { AlertRecord, SystemRecord } from "@/types"
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
 import { $router, Link } from "../router"
 import { Plural, Trans, useLingui } from "@lingui/react/macro"
 import { getPagePath } from "@nanostores/router"
+import { alertInfo } from "@/lib/alerts"
+import SystemsTable from "@/components/systems-table/systems-table"
 
-const SystemsTable = lazy(() => import("../systems-table/systems-table"))
+// const SystemsTable = lazy(() => import("../systems-table/systems-table"))
 
-export const Home = memo(() => {
-	const alerts = useStore($alerts)
-	const systems = useStore($systems)
+export default memo(function () {
 	const { t } = useLingui()
 
-	/* key to prevent re-rendering of active alerts */
-	const alertsKey: string[] = []
-
-	const activeAlerts = useMemo(() => {
-		const activeAlerts = alerts.filter((alert) => {
-			const active = alert.triggered && alert.name in alertInfo
-			if (!active) {
-				return false
-			}
-			alert.sysname = systems.find((system) => system.id === alert.system)?.name
-			alertsKey.push(alert.id)
-			return true
-		})
-		return activeAlerts
-	}, [systems, alerts])
-
 	useEffect(() => {
 		document.title = t`Dashboard` + " / Beszel"
 	}, [t])
@@ -46,25 +31,20 @@ export const Home = memo(() => {
 		pb.collection<SystemRecord>("systems").subscribe("*", (e) => {
 			updateRecordList(e, $systems)
 		})
-		pb.collection<AlertRecord>("alerts").subscribe("*", (e) => {
-			updateRecordList(e, $alerts)
-		})
 		return () => {
 			pb.collection("systems").unsubscribe("*")
-			// pb.collection('alerts').unsubscribe('*')
 		}
 	}, [])
 
 	return useMemo(
 		() => (
 			<>
-				{/* show active alerts */}
-				{activeAlerts.length > 0 && <ActiveAlerts key={activeAlerts.length} activeAlerts={activeAlerts} />}
+				<ActiveAlerts />
 				<Suspense>
 					<SystemsTable />
 				</Suspense>
 
-				<div className="flex gap-1.5 justify-end items-center pe-3 sm:pe-6 mt-3.5 text-xs opacity-80">
+				<div className="flex gap-1.5 justify-end items-center pe-3 sm:pe-6 mt-3.5 mb-4 text-xs opacity-80">
 					<a
 						href="https://github.com/henrygd/beszel"
 						target="_blank"
@@ -83,55 +63,79 @@ export const Home = memo(() => {
 				</div>
 			</>
 		),
-		[alertsKey.join("")]
+		[]
 	)
 })
 
-const ActiveAlerts = memo(({ activeAlerts }: { activeAlerts: AlertRecord[] }) => {
-	return (
-		<Card className="mb-4">
-			<CardHeader className="pb-4 px-2 sm:px-6 max-sm:pt-5 max-sm:pb-1">
-				<div className="px-2 sm:px-1">
-					<CardTitle>
-						<Trans>Active Alerts</Trans>
-					</CardTitle>
-				</div>
-			</CardHeader>
-			<CardContent className="max-sm:p-2">
-				{activeAlerts.length > 0 && (
-					<div className="grid sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 gap-3">
-						{activeAlerts.map((alert) => {
-							const info = alertInfo[alert.name as keyof typeof alertInfo]
-							return (
-								<Alert
-									key={alert.id}
-									className="hover:-translate-y-[1px] duration-200 bg-transparent border-foreground/10  hover:shadow-md shadow-black"
-								>
-									<info.icon className="h-4 w-4" />
-									<AlertTitle>
-										{alert.sysname} {info.name().toLowerCase().replace("cpu", "CPU")}
-									</AlertTitle>
-									<AlertDescription>
-										{alert.name === "Status" ? (
-											<Trans>Connection is down</Trans>
-										) : (
-											<Trans>
-												Exceeds {alert.value}
-												{info.unit} in last <Plural value={alert.min} one="# minute" other="# minutes" />
-											</Trans>
-										)}
-									</AlertDescription>
-									<Link
-										href={getPagePath($router, "system", { name: alert.sysname! })}
-										className="absolute inset-0 w-full h-full"
-										aria-label="View system"
-									></Link>
-								</Alert>
-							)
-						})}
+const ActiveAlerts = () => {
+	const alerts = useStore($alerts)
+
+	const { activeAlerts, alertsKey } = useMemo(() => {
+		const activeAlerts: AlertRecord[] = []
+		// key to prevent re-rendering if alerts change but active alerts didn't
+		const alertsKey: string[] = []
+
+		for (const systemId of Object.keys(alerts)) {
+			for (const alert of alerts[systemId].values()) {
+				if (alert.triggered && alert.name in alertInfo) {
+					activeAlerts.push(alert)
+					alertsKey.push(`${alert.system}${alert.value}${alert.min}`)
+				}
+			}
+		}
+
+		return { activeAlerts, alertsKey }
+	}, [alerts])
+
+	return useMemo(() => {
+		if (activeAlerts.length === 0) {
+			return null
+		}
+		return (
+			<Card className="mb-4">
+				<CardHeader className="pb-4 px-2 sm:px-6 max-sm:pt-5 max-sm:pb-1">
+					<div className="px-2 sm:px-1">
+						<CardTitle>
+							<Trans>Active Alerts</Trans>
+						</CardTitle>
 					</div>
-				)}
-			</CardContent>
-		</Card>
-	)
-})
+				</CardHeader>
+				<CardContent className="max-sm:p-2">
+					{activeAlerts.length > 0 && (
+						<div className="grid sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 gap-3">
+							{activeAlerts.map((alert) => {
+								const info = alertInfo[alert.name as keyof typeof alertInfo]
+								return (
+									<Alert
+										key={alert.id}
+										className="hover:-translate-y-px duration-200 bg-transparent border-foreground/10 hover:shadow-md shadow-black/5"
+									>
+										<info.icon className="h-4 w-4" />
+										<AlertTitle>
+											{getSystemNameFromId(alert.system)} {info.name().toLowerCase().replace("cpu", "CPU")}
+										</AlertTitle>
+										<AlertDescription>
+											{alert.name === "Status" ? (
+												<Trans>Connection is down</Trans>
+											) : (
+												<Trans>
+													Exceeds {alert.value}
+													{info.unit} in last <Plural value={alert.min} one="# minute" other="# minutes" />
+												</Trans>
+											)}
+										</AlertDescription>
+										<Link
+											href={getPagePath($router, "system", { name: getSystemNameFromId(alert.system) })}
+											className="absolute inset-0 w-full h-full"
+											aria-label="View system"
+										></Link>
+									</Alert>
+								)
+							})}
+						</div>
+					)}
+				</CardContent>
+			</Card>
+		)
+	}, [alertsKey.join("")])
+}

beszel/site/src/components/routes/settings/alerts-history-data-table.tsx

@@ -1,5 +1,6 @@
-import { pb } from "@/lib/stores"
-import { alertInfo, cn, formatDuration, formatShortDate } from "@/lib/utils"
+import { pb } from "@/lib/api"
+import { cn, formatDuration, formatShortDate } from "@/lib/utils"
+import { alertInfo } from "@/lib/alerts"
 import { AlertsHistoryRecord } from "@/types"
 import {
 	getCoreRowModel,
@@ -272,13 +273,13 @@ export default function AlertsHistoryDataTable() {
 				<Table>
 					<TableHeader>
 						{table.getHeaderGroups().map((headerGroup) => (
-							<TableRow key={headerGroup.id}>
+							<tr key={headerGroup.id} className="border-border/50">
 								{headerGroup.headers.map((header) => (
 									<TableHead className="px-2" key={header.id}>
 										{header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
 									</TableHead>
 								))}
-							</TableRow>
+							</tr>
 						))}
 					</TableHeader>
 					<TableBody>

beszel/site/src/components/routes/settings/config-yaml.tsx

@@ -1,17 +1,16 @@
-import { t } from "@lingui/core/macro";
-import { Trans } from "@lingui/react/macro";
-import { isAdmin } from "@/lib/utils"
+import { t } from "@lingui/core/macro"
+import { Trans } from "@lingui/react/macro"
 import { Separator } from "@/components/ui/separator"
 import { Button } from "@/components/ui/button"
 import { redirectPage } from "@nanostores/router"
 import { $router } from "@/components/router"
 import { AlertCircleIcon, FileSlidersIcon, LoaderCircleIcon } from "lucide-react"
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
-import { pb } from "@/lib/stores"
 import { useState } from "react"
 import { Textarea } from "@/components/ui/textarea"
 import { toast } from "@/components/ui/use-toast"
 import clsx from "clsx"
+import { isAdmin, pb } from "@/lib/api"
 
 export default function ConfigYaml() {
 	const [configContent, setConfigContent] = useState<string>("")

beszel/site/src/components/routes/settings/general.tsx

@@ -12,29 +12,17 @@ import languages from "@/lib/languages"
 import { dynamicActivate } from "@/lib/i18n"
 import { useLingui } from "@lingui/react/macro"
 import { Input } from "@/components/ui/input"
-// import { setLang } from "@/lib/i18n"
 import { Unit } from "@/lib/enums"
 
 export default function SettingsProfilePage({ userSettings }: { userSettings: UserSettings }) {
 	const [isLoading, setIsLoading] = useState(false)
 	const { i18n } = useLingui()
 
-	// Remove all per-metric threshold state and UI
-	// Only keep general yellow/red threshold state and UI
-	const [yellow, setYellow] = useState(userSettings.meterThresholds?.yellow ?? 65)
-	const [red, setRed] = useState(userSettings.meterThresholds?.red ?? 90)
-
-	function handleResetThresholds() {
-		setYellow(65)
-		setRed(90)
-	}
-
 	async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
 		e.preventDefault()
 		setIsLoading(true)
 		const formData = new FormData(e.target as HTMLFormElement)
 		const data = Object.fromEntries(formData) as Partial<UserSettings>
-		data.meterThresholds = { yellow, red }
 		await saveSettings(data)
 		setIsLoading(false)
 	}
@@ -51,8 +39,8 @@ export default function SettingsProfilePage({ userSettings }: { userSettings: Us
 			</div>
 			<Separator className="my-4" />
 			<form onSubmit={handleSubmit} className="space-y-5">
-				<div className="space-y-2">
-					<div className="mb-4">
+				<div className="grid gap-2">
+					<div className="mb-2">
 						<h3 className="mb-1 text-lg font-medium flex items-center gap-2">
 							<LanguagesIcon className="h-4 w-4" />
 							<Trans>Language</Trans>
@@ -85,8 +73,8 @@ export default function SettingsProfilePage({ userSettings }: { userSettings: Us
 					</Select>
 				</div>
 				<Separator />
-				<div className="space-y-2">
-					<div className="mb-4">
+				<div className="grid gap-2">
+					<div className="mb-2">
 						<h3 className="mb-1 text-lg font-medium">
 							<Trans>Chart options</Trans>
 						</h3>
@@ -114,47 +102,8 @@ export default function SettingsProfilePage({ userSettings }: { userSettings: Us
 					</p>
 				</div>
 				<Separator />
-				<div className="space-y-2">
-					<div className="mb-4">
-						<h3 className="mb-1 text-lg font-medium">
-							<Trans>Dashboard meter thresholds</Trans>
-						</h3>
-						<p className="text-sm text-muted-foreground leading-relaxed">
-							<Trans>Choose when the dashboard meters changes colors, based on percentage values.</Trans>
-						</p>
-					</div>
-					<div className="flex gap-4 items-end">
-						<div>
-							<Label htmlFor="yellow-threshold"><Trans>Warning threshold (%)</Trans></Label>
-							<Input
-								type="number"
-								id="yellow-threshold"
-								min={1}
-								max={100}
-								value={yellow}
-								onChange={e => setYellow(Number(e.target.value))}
-							/>
-						</div>
-						<div>
-							<Label htmlFor="red-threshold"><Trans>Danger threshold (%)</Trans></Label>
-							<Input
-								type="number"
-								id="red-threshold"
-								min={1}
-								max={100}
-								value={red}
-								onChange={e => setRed(Number(e.target.value))}
-							/>
-						</div>
-						<Button type="button" variant="outline" onClick={handleResetThresholds} disabled={isLoading} className="mt-4">
-							<Trans>Reset to default</Trans>
-						</Button>
-					</div>
-				</div>
-				<Separator />
-				{/* Unit preferences section fixed and wrapped in a div */}
-				<div className="space-y-2">
-					<div className="mb-4">
+				<div className="grid gap-2">
+					<div className="mb-2">
 						<h3 className="mb-1 text-lg font-medium">
 							<Trans comment="Temperature / network units">Unit preferences</Trans>
 						</h3>
@@ -163,7 +112,7 @@ export default function SettingsProfilePage({ userSettings }: { userSettings: Us
 						</p>
 					</div>
 					<div className="grid sm:grid-cols-3 gap-4">
-						<div className="space-y-2">
+						<div className="grid gap-2">
 							<Label className="block" htmlFor="unitTemp">
 								<Trans>Temperature unit</Trans>
 							</Label>
@@ -185,7 +134,7 @@ export default function SettingsProfilePage({ userSettings }: { userSettings: Us
 								</SelectContent>
 							</Select>
 						</div>
-						<div className="space-y-2">
+						<div className="grid gap-2">
 							<Label className="block" htmlFor="unitNet">
 								<Trans comment="Context: Bytes or bits">Network unit</Trans>
 							</Label>
@@ -207,7 +156,7 @@ export default function SettingsProfilePage({ userSettings }: { userSettings: Us
 								</SelectContent>
 							</Select>
 						</div>
-						<div className="space-y-2">
+						<div className="grid gap-2">
 							<Label className="block" htmlFor="unitDisk">
 								<Trans>Disk unit</Trans>
 							</Label>
@@ -232,6 +181,47 @@ export default function SettingsProfilePage({ userSettings }: { userSettings: Us
 					</div>
 				</div>
 				<Separator />
+				<div className="grid gap-2">
+					<div className="mb-2">
+						<h3 className="mb-1 text-lg font-medium">
+							<Trans>Warning thresholds</Trans>
+						</h3>
+						<p className="text-sm text-muted-foreground leading-relaxed">
+							<Trans>Set percentage thresholds for meter colors.</Trans>
+						</p>
+					</div>
+					<div className="grid grid-cols-2 lg:grid-cols-3 gap-4 items-end">
+						<div className="grid gap-2">
+							<Label htmlFor="colorWarn">
+								<Trans>Warning (%)</Trans>
+							</Label>
+							<Input
+								id="colorWarn"
+								name="colorWarn"
+								type="number"
+								min={1}
+								max={100}
+								className="min-w-24"
+								defaultValue={userSettings.colorWarn ?? 65}
+							/>
+						</div>
+						<div className="grid gap-1">
+							<Label htmlFor="colorCrit">
+								<Trans>Critical (%)</Trans>
+							</Label>
+							<Input
+								id="colorCrit"
+								name="colorCrit"
+								type="number"
+								min={1}
+								max={100}
+								className="min-w-24"
+								defaultValue={userSettings.colorCrit ?? 90}
+							/>
+						</div>
+					</div>
+				</div>
+				<Separator />
 				<Button type="submit" className="flex items-center gap-1.5 disabled:opacity-100" disabled={isLoading}>
 					{isLoading ? <LoaderCircleIcon className="h-4 w-4 animate-spin" /> : <SaveIcon className="h-4 w-4" />}
 					<Trans>Save Settings</Trans>

beszel/site/src/components/routes/settings/layout.tsx

@@ -1,6 +1,6 @@
 import { t } from "@lingui/core/macro"
 import { Trans } from "@lingui/react/macro"
-import { useEffect } from "react"
+import { lazy, useEffect } from "react"
 import { Separator } from "../../ui/separator"
 import { SidebarNav } from "./sidebar-nav.tsx"
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card.tsx"
@@ -8,15 +8,23 @@ import { useStore } from "@nanostores/react"
 import { $router } from "@/components/router.tsx"
 import { getPagePath, redirectPage } from "@nanostores/router"
 import { BellIcon, FileSlidersIcon, FingerprintIcon, SettingsIcon, AlertOctagonIcon } from "lucide-react"
-import { $userSettings, pb } from "@/lib/stores.ts"
+import { $userSettings } from "@/lib/stores.ts"
 import { toast } from "@/components/ui/use-toast.ts"
-import { UserSettings } from "@/types.js"
-import General from "./general.tsx"
-import Notifications from "./notifications.tsx"
-import ConfigYaml from "./config-yaml.tsx"
+import { UserSettings } from "@/types"
 import { useLingui } from "@lingui/react/macro"
-import Fingerprints from "./tokens-fingerprints.tsx"
-import AlertsHistoryDataTable from "./alerts-history-data-table"
+import { pb } from "@/lib/api"
+
+const generalSettingsImport = () => import("./general.tsx")
+const notificationsSettingsImport = () => import("./notifications.tsx")
+const configYamlSettingsImport = () => import("./config-yaml.tsx")
+const fingerprintsSettingsImport = () => import("./tokens-fingerprints.tsx")
+const alertsHistoryDataTableSettingsImport = () => import("./alerts-history-data-table.tsx")
+
+const GeneralSettings = lazy(generalSettingsImport)
+const NotificationsSettings = lazy(notificationsSettingsImport)
+const ConfigYamlSettings = lazy(configYamlSettingsImport)
+const FingerprintsSettings = lazy(fingerprintsSettingsImport)
+const AlertsHistoryDataTableSettings = lazy(alertsHistoryDataTableSettingsImport)
 
 export async function saveSettings(newSettings: Partial<UserSettings>) {
 	try {
@@ -59,23 +67,27 @@ export default function SettingsLayout() {
 			title: t`Notifications`,
 			href: getPagePath($router, "settings", { name: "notifications" }),
 			icon: BellIcon,
+			preload: notificationsSettingsImport,
 		},
 		{
 			title: t`Tokens & Fingerprints`,
 			href: getPagePath($router, "settings", { name: "tokens" }),
 			icon: FingerprintIcon,
 			noReadOnly: true,
+			preload: fingerprintsSettingsImport,
 		},
 		{
 			title: t`Alert History`,
 			href: getPagePath($router, "settings", { name: "alert-history" }),
 			icon: AlertOctagonIcon,
+			preload: alertsHistoryDataTableSettingsImport,
 		},
 		{
 			title: t`YAML Config`,
 			href: getPagePath($router, "settings", { name: "config" }),
 			icon: FileSlidersIcon,
 			admin: true,
+			preload: configYamlSettingsImport,
 		},
 	]
 
@@ -90,7 +102,7 @@ export default function SettingsLayout() {
 	}, [])
 
 	return (
-		<Card className="pt-5 px-4 pb-8 min-h-96 sm:pt-6 sm:px-7">
+		<Card className="pt-5 px-4 pb-8 min-h-96 mb-14 sm:pt-6 sm:px-7">
 			<CardHeader className="p-0">
 				<CardTitle className="mb-1">
 					<Trans>Settings</Trans>
@@ -120,14 +132,14 @@ function SettingsContent({ name }: { name: string }) {
 
 	switch (name) {
 		case "general":
-			return <General userSettings={userSettings} />
+			return <GeneralSettings userSettings={userSettings} />
 		case "notifications":
-			return <Notifications userSettings={userSettings} />
+			return <NotificationsSettings userSettings={userSettings} />
 		case "config":
-			return <ConfigYaml />
+			return <ConfigYamlSettings />
 		case "tokens":
-			return <Fingerprints />
+			return <FingerprintsSettings />
 		case "alert-history":
-			return <AlertsHistoryDataTable />
+			return <AlertsHistoryDataTableSettings />
 	}
 }

beszel/site/src/components/routes/settings/notifications.tsx

@@ -3,7 +3,6 @@ import { Trans } from "@lingui/react/macro"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
-import { pb } from "@/lib/stores"
 import { Separator } from "@/components/ui/separator"
 import { Card } from "@/components/ui/card"
 import { BellIcon, LoaderCircleIcon, PlusIcon, SaveIcon, Trash2Icon } from "lucide-react"
@@ -13,8 +12,8 @@ import { InputTags } from "@/components/ui/input-tags"
 import { UserSettings } from "@/types"
 import { saveSettings } from "./layout"
 import * as v from "valibot"
-import { isAdmin } from "@/lib/utils"
 import { prependBasePath } from "@/components/router"
+import { isAdmin, pb } from "@/lib/api"
 
 interface ShoutrrrUrlCardProps {
 	url: string
@@ -87,8 +86,8 @@ const SettingsNotificationsPage = ({ userSettings }: { userSettings: UserSetting
 			</div>
 			<Separator className="my-4" />
 			<div className="space-y-5">
-				<div className="space-y-2">
-					<div className="mb-4">
+				<div className="grid gap-2">
+					<div className="mb-2">
 						<h3 className="mb-1 text-lg font-medium">
 							<Trans>Email notifications</Trans>
 						</h3>
@@ -178,7 +177,7 @@ const ShoutrrrUrlCard = ({ url, onUrlChange, onRemove }: ShoutrrrUrlCardProps) =
 
 	const sendTestNotification = async () => {
 		setIsLoading(true)
-		const res = await pb.send("/api/beszel/send-test-notification", { url })
+		const res = await pb.send("/api/beszel/test-notification", { method: "POST", body: { url } })
 		if ("err" in res && !res.err) {
 			toast({
 				title: t`Test notification sent`,

beszel/site/src/components/routes/settings/sidebar-nav.tsx

@@ -1,5 +1,6 @@
 import React from "react"
-import { cn, isAdmin, isReadOnlyUser } from "@/lib/utils"
+import { cn } from "@/lib/utils"
+import { isAdmin, isReadOnlyUser } from "@/lib/api"
 import { buttonVariants } from "../../ui/button"
 import { $router, Link, navigate } from "../../router"
 import { useStore } from "@nanostores/react"
@@ -13,6 +14,7 @@ interface SidebarNavProps extends React.HTMLAttributes<HTMLElement> {
 		icon?: React.FC<React.SVGProps<SVGSVGElement>>
 		admin?: boolean
 		noReadOnly?: boolean
+		preload?: () => Promise<{ default: React.ComponentType<any> }>
 	}[]
 }
 
@@ -52,12 +54,13 @@ export function SidebarNav({ className, items, ...props }: SidebarNavProps) {
 					}
 					return (
 						<Link
+							onMouseEnter={() => item.preload?.()}
 							key={item.href}
 							href={item.href}
 							className={cn(
 								buttonVariants({ variant: "ghost" }),
-								"flex items-center gap-3 justify-start truncate",
-								page?.path === item.href ? "bg-muted hover:bg-muted" : "hover:bg-muted/50"
+								"flex items-center gap-3 justify-start truncate duration-50",
+								page?.path === item.href ? "bg-muted hover:bg-accent/70" : "hover:bg-accent/50"
 							)}
 						>
 							{item.icon && <item.icon className="size-4 shrink-0" />}

beszel/site/src/components/routes/settings/tokens-fingerprints.tsx

@@ -1,6 +1,6 @@
 import { Trans, useLingui } from "@lingui/react/macro"
 import { t } from "@lingui/core/macro"
-import { $publicKey, pb } from "@/lib/stores"
+import { $publicKey } from "@/lib/stores"
 import { memo, useEffect, useMemo, useState } from "react"
 import { Table, TableCell, TableHead, TableBody, TableRow, TableHeader } from "@/components/ui/table"
 import { FingerprintRecord } from "@/types"
@@ -14,7 +14,8 @@ import {
 	Trash2Icon,
 } from "lucide-react"
 import { toast } from "@/components/ui/use-toast"
-import { cn, copyToClipboard, generateToken, getHubURL, isReadOnlyUser, tokenMap } from "@/lib/utils"
+import { cn, copyToClipboard, generateToken, getHubURL, tokenMap } from "@/lib/utils"
+import { isReadOnlyUser, pb } from "@/lib/api"
 import {
 	DropdownMenu,
 	DropdownMenuContent,
@@ -271,7 +272,7 @@ const SectionTable = memo(({ fingerprints = [] }: { fingerprints: FingerprintRec
 		<div className="rounded-md border overflow-hidden w-full mt-4">
 			<Table>
 				<TableHeader>
-					<TableRow>
+					<tr className="border-border/50">
 						{headerCols.map((col) => (
 							<TableHead key={col.label} style={{ minWidth: col.w }}>
 								<span className="flex items-center gap-2">
@@ -287,16 +288,18 @@ const SectionTable = memo(({ fingerprints = [] }: { fingerprints: FingerprintRec
 								</span>
 							</TableHead>
 						)}
-					</TableRow>
+					</tr>
 				</TableHeader>
 				<TableBody className="whitespace-pre">
 					{fingerprints.map((fingerprint, i) => (
 						<TableRow key={i}>
-							<TableCell className="font-medium ps-5 py-2.5">{fingerprint.expand.system.name}</TableCell>
-							<TableCell className="font-mono text-[0.95em] py-2.5">{fingerprint.token}</TableCell>
-							<TableCell className="font-mono text-[0.95em] py-2.5">{fingerprint.fingerprint}</TableCell>
+							<TableCell className="font-medium ps-5 py-2 max-w-60 truncate">
+								{fingerprint.expand.system.name}
+							</TableCell>
+							<TableCell className="font-mono text-[0.95em] py-2">{fingerprint.token}</TableCell>
+							<TableCell className="font-mono text-[0.95em] py-2">{fingerprint.fingerprint}</TableCell>
 							{!isReadOnly && (
-								<TableCell className="py-2.5 px-4 xl:px-2">
+								<TableCell className="py-2 px-4 xl:px-2">
 									<ActionsButtonTable fingerprint={fingerprint} />
 								</TableCell>
 							)}

beszel/site/src/components/routes/system.tsx

@@ -2,7 +2,6 @@ import { t } from "@lingui/core/macro"
 import { Plural, Trans } from "@lingui/react/macro"
 import {
 	$systems,
-	pb,
 	$chartTime,
 	$containerFilter,
 	$userSettings,
@@ -11,8 +10,8 @@ import {
 	$temperatureFilter,
 } from "@/lib/stores"
 import { ChartData, ChartTimes, ContainerStatsRecord, GPUData, SystemRecord, SystemStatsRecord } from "@/types"
-import { ChartType, Unit, Os } from "@/lib/enums"
-import React, { lazy, memo, useCallback, useEffect, useMemo, useRef, useState } from "react"
+import { ChartType, Unit, Os, SystemStatus } from "@/lib/enums"
+import React, { memo, useCallback, useEffect, useMemo, useRef, useState, type JSX } from "react"
 import { Card, CardHeader, CardTitle, CardDescription } from "../ui/card"
 import { useStore } from "@nanostores/react"
 import Spinner from "../spinner"
@@ -24,12 +23,12 @@ import {
 	decimalString,
 	formatBytes,
 	getHostDisplayValue,
-	getPbTimestamp,
 	listen,
 	parseSemVer,
 	toFixedFloat,
 	useLocalStorage,
 } from "@/lib/utils"
+import { getPbTimestamp, pb } from "@/lib/api"
 import { Separator } from "../ui/separator"
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../ui/tooltip"
 import { Button } from "../ui/button"
@@ -41,15 +40,15 @@ import { timeTicks } from "d3-time"
 import { useLingui } from "@lingui/react/macro"
 import { $router, navigate } from "../router"
 import { getPagePath } from "@nanostores/router"
-
-const AreaChartDefault = lazy(() => import("../charts/area-chart"))
-const ContainerChart = lazy(() => import("../charts/container-chart"))
-const MemChart = lazy(() => import("../charts/mem-chart"))
-const DiskChart = lazy(() => import("../charts/disk-chart"))
-const SwapChart = lazy(() => import("../charts/swap-chart"))
-const TemperatureChart = lazy(() => import("../charts/temperature-chart"))
-const GpuPowerChart = lazy(() => import("../charts/gpu-power-chart"))
-const LoadAverageChart = lazy(() => import("../charts/load-average-chart"))
+import { batteryStateTranslations } from "@/lib/i18n"
+import AreaChartDefault from "@/components/charts/area-chart"
+import ContainerChart from "@/components/charts/container-chart"
+import MemChart from "@/components/charts/mem-chart"
+import DiskChart from "@/components/charts/disk-chart"
+import SwapChart from "@/components/charts/swap-chart"
+import TemperatureChart from "@/components/charts/temperature-chart"
+import GpuPowerChart from "@/components/charts/gpu-power-chart"
+import LoadAverageChart from "@/components/charts/load-average-chart"
 
 const cache = new Map<string, any>()
 
@@ -286,9 +285,11 @@ export default function SystemDetail({ name }: { name: string }) {
 				value: system.info.k,
 			},
 		}
-
 		let uptime: React.ReactNode
-		if (system.info.u < 172800) {
+		if (system.info.u < 3600) {
+			const mins = Math.trunc(system.info.u / 60)
+			uptime = <Plural value={mins} one="# minute" other="# minutes" />
+		} else if (system.info.u < 172800) {
 			const hours = Math.trunc(system.info.u / 3600)
 			uptime = <Plural value={hours} one="# hour" other="# hours" />
 		} else {
@@ -316,7 +317,7 @@ export default function SystemDetail({ name }: { name: string }) {
 			Icon: any
 			hide?: boolean
 		}[]
-	}, [system.info])
+	}, [system.info, t])
 
 	/** Space for tooltip if more than 12 containers */
 	useEffect(() => {
@@ -382,15 +383,15 @@ export default function SystemDetail({ name }: { name: string }) {
 	const hasGpuPowerData = lastGpuVals.some((gpu) => gpu.p !== undefined)
 
 	let translatedStatus: string = system.status
-	if (system.status === "up") {
+	if (system.status === SystemStatus.Up) {
 		translatedStatus = t({ message: "Up", comment: "Context: System is up" })
-	} else if (system.status === "down") {
+	} else if (system.status === SystemStatus.Down) {
 		translatedStatus = t({ message: "Down", comment: "Context: System is down" })
 	}
 
 	return (
 		<>
-			<div id="chartwrap" className="grid gap-4 mb-10 overflow-x-clip">
+			<div id="chartwrap" className="grid gap-4 mb-14 overflow-x-clip">
 				{/* system info */}
 				<Card>
 					<div className="grid xl:flex gap-4 px-4 sm:px-6 pt-3 sm:pt-4 pb-5">
@@ -399,7 +400,7 @@ export default function SystemDetail({ name }: { name: string }) {
 							<div className="flex flex-wrap items-center gap-3 gap-y-2 text-sm opacity-90">
 								<div className="capitalize flex gap-2 items-center">
 									<span className={cn("relative flex h-3 w-3")}>
-										{system.status === "up" && (
+										{system.status === SystemStatus.Up && (
 											<span
 												className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"
 												style={{ animationDuration: "1.5s" }}
@@ -407,10 +408,10 @@ export default function SystemDetail({ name }: { name: string }) {
 										)}
 										<span
 											className={cn("relative inline-flex rounded-full h-3 w-3", {
-												"bg-green-500": system.status === "up",
-												"bg-red-500": system.status === "down",
-												"bg-primary/40": system.status === "paused",
-												"bg-yellow-500": system.status === "pending",
+												"bg-green-500": system.status === SystemStatus.Up,
+												"bg-red-500": system.status === SystemStatus.Down,
+												"bg-primary/40": system.status === SystemStatus.Paused,
+												"bg-yellow-500": system.status === SystemStatus.Pending,
 											})}
 										></span>
 									</span>
@@ -456,9 +457,9 @@ export default function SystemDetail({ name }: { name: string }) {
 											onClick={() => setGrid(!grid)}
 										>
 											{grid ? (
-												<LayoutGridIcon className="h-[1.2rem] w-[1.2rem] opacity-85" />
+												<LayoutGridIcon className="h-[1.2rem] w-[1.2rem] opacity-75" />
 											) : (
-												<Rows className="h-[1.3rem] w-[1.3rem] opacity-85" />
+												<Rows className="h-[1.3rem] w-[1.3rem] opacity-75" />
 											)}
 										</Button>
 									</TooltipTrigger>
@@ -485,7 +486,7 @@ export default function SystemDetail({ name }: { name: string }) {
 								{
 									label: t`CPU Usage`,
 									dataKey: ({ stats }) => (showMax ? stats?.cpum : stats?.cpu),
-									color: "1",
+									color: 1,
 									opacity: 0.4,
 								},
 							]}
@@ -511,8 +512,9 @@ export default function SystemDetail({ name }: { name: string }) {
 						grid={grid}
 						title={t`Memory Usage`}
 						description={t`Precise utilization at the recorded time`}
+						cornerEl={maxValSelect}
 					>
-						<MemChart chartData={chartData} />
+						<MemChart chartData={chartData} showMax={showMax} />
 					</ChartCard>
 
 					{containerFilterBar && (
@@ -545,13 +547,13 @@ export default function SystemDetail({ name }: { name: string }) {
 								{
 									label: t({ message: "Write", comment: "Disk write" }),
 									dataKey: ({ stats }) => (showMax ? stats?.dwm : stats?.dw),
-									color: "3",
+									color: 3,
 									opacity: 0.3,
 								},
 								{
 									label: t({ message: "Read", comment: "Disk read" }),
 									dataKey: ({ stats }) => (showMax ? stats?.drm : stats?.dr),
-									color: "1",
+									color: 1,
 									opacity: 0.3,
 								},
 							]}
@@ -586,7 +588,7 @@ export default function SystemDetail({ name }: { name: string }) {
 										}
 										return data?.stats?.b?.[0] ?? data?.stats?.ns * 1024 * 1024
 									},
-									color: "5",
+									color: 5,
 									opacity: 0.2,
 								},
 								{
@@ -597,7 +599,7 @@ export default function SystemDetail({ name }: { name: string }) {
 										}
 										return data?.stats?.b?.[1] ?? data?.stats?.nr * 1024 * 1024
 									},
-									color: "2",
+									color: 2,
 									opacity: 0.2,
 								},
 							]}
@@ -668,6 +670,35 @@ export default function SystemDetail({ name }: { name: string }) {
 						</ChartCard>
 					)}
 
+					{/* Battery chart */}
+					{systemStats.at(-1)?.stats.bat && (
+						<ChartCard
+							empty={dataEmpty}
+							grid={grid}
+							title={t`Battery`}
+							description={`${t({
+								message: "Current state",
+								comment: "Context: Battery state",
+							})}: ${batteryStateTranslations[systemStats.at(-1)?.stats.bat![1] ?? 0]()}`}
+						>
+							<AreaChartDefault
+								chartData={chartData}
+								maxToggled={maxValues}
+								dataPoints={[
+									{
+										label: t`Charge`,
+										dataKey: ({ stats }) => stats?.bat?.[0],
+										color: 1,
+										opacity: 0.35,
+									},
+								]}
+								domain={[0, 100]}
+								tickFormatter={(val) => `${val}%`}
+								contentFormatter={({ value }) => `${value}%`}
+							/>
+						</ChartCard>
+					)}
+
 					{/* GPU power draw chart */}
 					{hasGpuPowerData && (
 						<ChartCard
@@ -700,7 +731,7 @@ export default function SystemDetail({ name }: { name: string }) {
 												{
 													label: t`Usage`,
 													dataKey: ({ stats }) => stats?.g?.[id]?.u ?? 0,
-													color: "1",
+													color: 1,
 													opacity: 0.35,
 												},
 											]}
@@ -720,7 +751,7 @@ export default function SystemDetail({ name }: { name: string }) {
 												{
 													label: t`Usage`,
 													dataKey: ({ stats }) => stats?.g?.[id]?.mu ?? 0,
-													color: "2",
+													color: 2,
 													opacity: 0.25,
 												},
 											]}
@@ -772,13 +803,13 @@ export default function SystemDetail({ name }: { name: string }) {
 												{
 													label: t`Write`,
 													dataKey: ({ stats }) => stats?.efs?.[extraFsName]?.[showMax ? "wm" : "w"] ?? 0,
-													color: "3",
+													color: 3,
 													opacity: 0.3,
 												},
 												{
 													label: t`Read`,
 													dataKey: ({ stats }) => stats?.efs?.[extraFsName]?.[showMax ? "rm" : "r"] ?? 0,
-													color: "1",
+													color: 1,
 													opacity: 0.3,
 												},
 											]}
@@ -872,10 +903,10 @@ function ChartCard({
 
 	return (
 		<Card className={cn("pb-2 sm:pb-4 odd:last-of-type:col-span-full", { "col-span-full": !grid })} ref={ref}>
-			<CardHeader className="pb-5 pt-4 relative space-y-1 max-sm:py-3 max-sm:px-4">
+			<CardHeader className="pb-5 pt-4 gap-1 relative max-sm:py-3 max-sm:px-4">
 				<CardTitle className="text-xl sm:text-2xl">{title}</CardTitle>
 				<CardDescription>{description}</CardDescription>
-				{cornerEl && <div className="relative py-1 block sm:w-44 sm:absolute sm:top-2.5 sm:end-3.5">{cornerEl}</div>}
+				{cornerEl && <div className="relative py-1 block sm:w-44 sm:absolute sm:top-3.5 sm:end-3.5">{cornerEl}</div>}
 			</CardHeader>
 			<div className="ps-0 w-[calc(100%-1.5em)] h-48 md:h-52 relative group">
 				{

beszel/site/src/components/systems-table/systems-table-columns.tsx

@@ -22,12 +22,12 @@ import {
 	decimalString,
 	formatBytes,
 	formatTemperature,
-	isReadOnlyUser,
+	getMeterState,
 	parseSemVer,
 } from "@/lib/utils"
 import { EthernetIcon, GpuIcon, HourglassIcon, ThermometerIcon } from "../ui/icons"
 import { useStore } from "@nanostores/react"
-import { $userSettings, pb } from "@/lib/stores"
+import { $longestSystemNameLen, $userSettings } from "@/lib/stores"
 import { Trans, useLingui } from "@lingui/react/macro"
 import { useMemo, useRef, useState } from "react"
 import { memo } from "react"
@@ -53,52 +53,90 @@ import {
 } from "../ui/alert-dialog"
 import { buttonVariants } from "../ui/button"
 import { t } from "@lingui/core/macro"
+import { MeterState, SystemStatus } from "@/lib/enums"
+import { $router, Link } from "../router"
+import { getPagePath } from "@nanostores/router"
+import { isReadOnlyUser, pb } from "@/lib/api"
+
+const STATUS_COLORS = {
+	[SystemStatus.Up]: "bg-green-500",
+	[SystemStatus.Down]: "bg-red-500",
+	[SystemStatus.Paused]: "bg-primary/40",
+	[SystemStatus.Pending]: "bg-yellow-500",
+} as const
 
 /**
  * @param viewMode - "table" or "grid"
  * @returns - Column definitions for the systems table
  */
 export default function SystemsTableColumns(viewMode: "table" | "grid"): ColumnDef<SystemRecord>[] {
-	const statusTranslations = {
-		up: () => t`Up`.toLowerCase(),
-		down: () => t`Down`.toLowerCase(),
-		paused: () => t`Paused`.toLowerCase(),
-	}
 	return [
 		{
-			size: 200,
+			// size: 200,
+			size: 100,
 			minSize: 0,
 			accessorKey: "name",
 			id: "system",
 			name: () => t`System`,
-			filterFn: (row, _, filterVal) => {
-				const filterLower = filterVal.toLowerCase()
-				const { name, status } = row.original
-				// Check if the filter matches the name or status for this row
-				if (
-					name.toLowerCase().includes(filterLower) ||
-					statusTranslations[status as keyof typeof statusTranslations]?.().includes(filterLower)
-				) {
-					return true
+			filterFn: (() => {
+				let filterInput = ""
+				let filterInputLower = ""
+				const nameCache = new Map<string, string>()
+				const statusTranslations = {
+					[SystemStatus.Up]: t`Up`.toLowerCase(),
+					[SystemStatus.Down]: t`Down`.toLowerCase(),
+					[SystemStatus.Paused]: t`Paused`.toLowerCase(),
+				} as const
+
+				// match filter value against name or translated status
+				return (row, _, newFilterInput) => {
+					const { name, status } = row.original
+					if (newFilterInput !== filterInput) {
+						filterInput = newFilterInput
+						filterInputLower = newFilterInput.toLowerCase()
+					}
+					let nameLower = nameCache.get(name)
+					if (nameLower === undefined) {
+						nameLower = name.toLowerCase()
+						nameCache.set(name, nameLower)
+					}
+					if (nameLower.includes(filterInputLower)) {
+						return true
+					}
+					const statusLower = statusTranslations[status as keyof typeof statusTranslations]
+					return statusLower?.includes(filterInputLower) || false
 				}
-				return false
-			},
+			})(),
 			enableHiding: false,
 			invertSorting: false,
 			Icon: ServerIcon,
-			cell: (info) => (
-				<span className="flex gap-2 items-center font-medium text-sm text-nowrap md:ps-1 md:pe-5">
-					<IndicatorDot system={info.row.original} />
-					{info.getValue() as string}
-				</span>
-			),
+			cell: (info) => {
+				const { name } = info.row.original
+				const longestName = useStore($longestSystemNameLen)
+				return (
+					<>
+						<span className="flex gap-2 items-center font-medium text-sm text-nowrap md:ps-1">
+							<IndicatorDot system={info.row.original} />
+							{/* NOTE: change to 1 ch if switching to monospace font */}
+							<span className="truncate" style={{ width: `${longestName / 1.1}ch` }}>
+								{name}
+							</span>
+						</span>
+						<Link
+							href={getPagePath($router, "system", { name })}
+							className="inset-0 absolute size-full"
+							aria-label={name}
+						></Link>
+					</>
+				)
+			},
 			header: sortableHeader,
 		},
 		{
 			accessorFn: ({ info }) => info.cpu,
 			id: "cpu",
 			name: () => t`CPU`,
-			cell: CellFormatter,
+			cell: TableCellWithMeter,
 			Icon: CpuIcon,
 			header: sortableHeader,
 		},
@@ -107,7 +145,7 @@ export default function SystemsTableColumns(viewMode: "table" | "grid"): ColumnD
 			accessorFn: ({ info }) => info.mp,
 			id: "memory",
 			name: () => t`Memory`,
-			cell: CellFormatter,
+			cell: TableCellWithMeter,
 			Icon: MemoryStickIcon,
 			header: sortableHeader,
 		},
@@ -115,7 +153,7 @@ export default function SystemsTableColumns(viewMode: "table" | "grid"): ColumnD
 			accessorFn: ({ info }) => info.dp,
 			id: "disk",
 			name: () => t`Disk`,
-			cell: CellFormatter,
+			cell: TableCellWithMeter,
 			Icon: HardDriveIcon,
 			header: sortableHeader,
 		},
@@ -123,7 +161,7 @@ export default function SystemsTableColumns(viewMode: "table" | "grid"): ColumnD
 			accessorFn: ({ info }) => info.g,
 			id: "gpu",
 			name: () => "GPU",
-			cell: CellFormatter,
+			cell: TableCellWithMeter,
 			Icon: GpuIcon,
 			header: sortableHeader,
 		},
@@ -153,21 +191,23 @@ export default function SystemsTableColumns(viewMode: "table" | "grid"): ColumnD
 				}
 
 				const max = Math.max(...loadAverages)
-				if (max === 0 && (status === "paused" || minor < 12)) {
+				if (max === 0 && (status === SystemStatus.Paused || minor < 12)) {
 					return null
 				}
 
-				function getDotColor() {
-					const normalized = max / (sysInfo.t ?? 1)
-					if (status !== "up") return "bg-primary/30"
-					if (normalized < 0.7) return "bg-green-500"
-					if (normalized < 1) return "bg-yellow-500"
-					return "bg-red-600"
-				}
+				const normalizedLoad = max / (sysInfo.t ?? 1)
+				const threshold = getMeterState(normalizedLoad * 100)
 
 				return (
 					<div className="flex items-center gap-[.35em] w-full tabular-nums tracking-tight">
-						<span className={cn("inline-block size-2 rounded-full me-0.5", getDotColor())} />
+						<span
+							className={cn("inline-block size-2 rounded-full me-0.5", {
+								[STATUS_COLORS[SystemStatus.Up]]: threshold === MeterState.Good,
+								[STATUS_COLORS[SystemStatus.Pending]]: threshold === MeterState.Warn,
+								[STATUS_COLORS[SystemStatus.Down]]: threshold === MeterState.Crit,
+								[STATUS_COLORS[SystemStatus.Paused]]: status !== SystemStatus.Up,
+							})}
+						/>
 						{loadAverages?.map((la, i) => (
 							<span key={i}>{decimalString(la, la >= 10 ? 1 : 2)}</span>
 						))}
@@ -184,10 +224,10 @@ export default function SystemsTableColumns(viewMode: "table" | "grid"): ColumnD
 			header: sortableHeader,
 			cell(info) {
 				const sys = info.row.original
-				if (sys.status === "paused") {
+				const userSettings = useStore($userSettings, { keys: ["unitNet"] })
+				if (sys.status === SystemStatus.Paused) {
 					return null
 				}
-				const userSettings = useStore($userSettings)
 				const { value, unit } = formatBytes(info.getValue() as number, true, userSettings.unitNet, false)
 				return (
 					<span className="tabular-nums whitespace-nowrap">
@@ -206,10 +246,10 @@ export default function SystemsTableColumns(viewMode: "table" | "grid"): ColumnD
 			header: sortableHeader,
 			cell(info) {
 				const val = info.getValue() as number
+				const userSettings = useStore($userSettings, { keys: ["unitTemp"] })
 				if (!val) {
 					return null
 				}
-				const userSettings = useStore($userSettings)
 				const { value, unit } = formatTemperature(val, userSettings.unitTemp)
 				return (
 					<span className={cn("tabular-nums whitespace-nowrap", viewMode === "table" && "ps-0.5")}>
@@ -234,13 +274,13 @@ export default function SystemsTableColumns(viewMode: "table" | "grid"): ColumnD
 				}
 				const system = info.row.original
 				return (
-					<span className={cn("flex gap-2 items-center md:pe-5 tabular-nums", viewMode === "table" && "ps-0.5")}>
+					<span className={cn("flex gap-1.5 items-center md:pe-5 tabular-nums", viewMode === "table" && "ps-0.5")}>
 						<IndicatorDot
 							system={system}
 							className={
-								(system.status !== "up" && "bg-primary/30") ||
-								(version === globalThis.BESZEL.HUB_VERSION && "bg-green-500") ||
-								"bg-yellow-500"
+								(system.status !== SystemStatus.Up && STATUS_COLORS[SystemStatus.Paused]) ||
+								(version === globalThis.BESZEL.HUB_VERSION && STATUS_COLORS[SystemStatus.Up]) ||
+								STATUS_COLORS[SystemStatus.Pending]
 							}
 						/>
 						<span className="truncate max-w-14">{info.getValue() as string}</span>
@@ -254,7 +294,7 @@ export default function SystemsTableColumns(viewMode: "table" | "grid"): ColumnD
 			name: () => t({ message: "Actions", comment: "Table column" }),
 			size: 50,
 			cell: ({ row }) => (
-				<div className="flex justify-end items-center gap-1 -ms-3">
+				<div className="relative z-10 flex justify-end items-center gap-1 -ms-3">
 					<AlertButton system={row.original} />
 					<ActionsButton system={row.original} />
 				</div>
@@ -279,39 +319,32 @@ function sortableHeader(context: HeaderContext<SystemRecord, unknown>) {
 		</Button>
 	)
 }
-function CellFormatter(info: CellContext<SystemRecord, unknown>) {
+
+function TableCellWithMeter(info: CellContext<SystemRecord, unknown>) {
 	const val = Number(info.getValue()) || 0
+	const threshold = getMeterState(val)
+	const meterClass = cn(
+		"h-full",
+		(info.row.original.status !== SystemStatus.Up && STATUS_COLORS.paused) ||
+			(threshold === MeterState.Good && STATUS_COLORS.up) ||
+			(threshold === MeterState.Warn && STATUS_COLORS.pending) ||
+			STATUS_COLORS.down
+	)
 	return (
-		<div className="flex gap-2 items-center tabular-nums tracking-tight">
-			<span className="min-w-8">{decimalString(val, val >= 10 ? 1 : 2)}%</span>
-			<span className="grow min-w-8 block bg-muted h-[1em] relative rounded-sm overflow-hidden">
-				<span
-					className={cn(
-						"absolute inset-0 w-full h-full origin-left",
-						(info.row.original.status !== "up" && "bg-primary/30") ||
-							(val < 65 && "bg-green-500") ||
-							(val < 90 && "bg-yellow-500") ||
-							"bg-red-600"
-					)}
-					style={{
-						transform: `scalex(${val / 100})`,
-					}}
-				></span>
+		<div className="flex gap-2 items-center tabular-nums tracking-tight w-full">
+			<span className="min-w-8 shrink-0">{decimalString(val, val >= 10 ? 1 : 2)}%</span>
+			<span className="flex-1 min-w-8 grid bg-muted h-[1em] rounded-sm overflow-hidden">
+				<span className={meterClass} style={{ width: `${val}%` }}></span>
 			</span>
 		</div>
 	)
 }
 
 export function IndicatorDot({ system, className }: { system: SystemRecord; className?: ClassValue }) {
-	className ||= {
-		"bg-green-500": system.status === "up",
-		"bg-red-500": system.status === "down",
-		"bg-primary/40": system.status === "paused",
-		"bg-yellow-500": system.status === "pending",
-	}
+	className ||= STATUS_COLORS[system.status as keyof typeof STATUS_COLORS] || ""
 	return (
 		<span
-			className={cn("flex-shrink-0 size-2 rounded-full", className)}
+			className={cn("shrink-0 size-2 rounded-full", className)}
 			// style={{ marginBottom: "-1px" }}
 		/>
 	)
@@ -329,7 +362,7 @@ export const ActionsButton = memo(({ system }: { system: SystemRecord }) => {
 			<>
 				<DropdownMenu>
 					<DropdownMenuTrigger asChild>
-						<Button variant="ghost" size={"icon"} data-nolink>
+						<Button variant="ghost" size={"icon"}>
 							<span className="sr-only">
 								<Trans>Open menu</Trans>
 							</span>
@@ -352,11 +385,11 @@ export const ActionsButton = memo(({ system }: { system: SystemRecord }) => {
 							className={cn(isReadOnlyUser() && "hidden")}
 							onClick={() => {
 								pb.collection("systems").update(id, {
-									status: status === "paused" ? "pending" : "paused",
+									status: status === SystemStatus.Paused ? SystemStatus.Pending : SystemStatus.Paused,
 								})
 							}}
 						>
-							{status === "paused" ? (
+							{status === SystemStatus.Paused ? (
 								<>
 									<PlayCircleIcon className="me-2.5 size-4" />
 									<Trans>Resume</Trans>

beszel/site/src/components/systems-table/systems-table.tsx

@@ -11,11 +11,8 @@ import {
 	Row,
 	Table as TableType,
 } from "@tanstack/react-table"
-
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
-
+import { TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
 import { Button } from "@/components/ui/button"
-
 import {
 	DropdownMenu,
 	DropdownMenuCheckboxItem,
@@ -36,85 +33,61 @@ import {
 	ArrowUpIcon,
 	Settings2Icon,
 	EyeIcon,
+	FilterIcon,
 } from "lucide-react"
-import { memo, useEffect, useMemo, useState } from "react"
+import { memo, useEffect, useMemo, useRef, useState } from "react"
 import { $systems } from "@/lib/stores"
 import { useStore } from "@nanostores/react"
-import { cn, useLocalStorage } from "@/lib/utils"
-import { $router, Link, navigate } from "../router"
+import { cn, runOnce, useLocalStorage } from "@/lib/utils"
+import { $router, Link } from "../router"
 import { useLingui, Trans } from "@lingui/react/macro"
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../ui/card"
-import { Input } from "../ui/input"
+import { Input } from "@/components/ui/input"
 import { getPagePath } from "@nanostores/router"
 import SystemsTableColumns, { ActionsButton, IndicatorDot } from "./systems-table-columns"
 import AlertButton from "../alerts/alert-button"
+import { SystemStatus } from "@/lib/enums"
+import { useVirtualizer, VirtualItem } from "@tanstack/react-virtual"
 
 type ViewMode = "table" | "grid"
+type StatusFilter = "all" | "up" | "down" | "paused"
 
-function CellFormatter(info: CellContext<SystemRecord, unknown>) {
-	const val = (info.getValue() as number) || 0
-	const userSettings = useStore($userSettings)
-	const yellow = userSettings?.meterThresholds?.yellow ?? 65
-	const red = userSettings?.meterThresholds?.red ?? 90
-	return (
-		<div className="flex gap-2 items-center tabular-nums tracking-tight">
-			<span className="min-w-8">{decimalString(val, 1)}%</span>
-			<span className="grow min-w-8 block bg-muted h-[1em] relative rounded-sm overflow-hidden">
-				<span
-					className={cn(
-						"absolute inset-0 w-full h-full origin-left",
-						(info.row.original.status !== "up" && "bg-primary/30") ||
-						(val < yellow! && "bg-green-500") ||
-						(val < red! && "bg-yellow-500") ||
-						"bg-red-600"
-					)}
-					style={{
-						transform: `scalex(${val / 100})`,
-					}}
-				></span>
-			</span>
-		</div>
-	)
-}
-
-function sortableHeader(context: HeaderContext<SystemRecord, unknown>) {
-	const { column } = context
-	// @ts-ignore
-	const { Icon, hideSort, name }: { Icon: React.ElementType; name: () => string; hideSort: boolean } = column.columnDef
-	return (
-		<Button
-			variant="ghost"
-			className="h-9 px-3 flex"
-			onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
-		>
-			{Icon && <Icon className="me-2 size-4" />}
-			{name()}
-			{hideSort || <ArrowUpDownIcon className="ms-2 size-4" />}
-		</Button>
-	)
-}
+const preloadSystemDetail = runOnce(() => import("@/components/routes/system.tsx"))
 
 export default function SystemsTable() {
 	const data = useStore($systems)
 	const { i18n, t } = useLingui()
 	const [filter, setFilter] = useState<string>()
+	const [statusFilter, setStatusFilter] = useState<StatusFilter>("all")
 	const [sorting, setSorting] = useState<SortingState>([{ id: "system", desc: false }])
 	const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([])
 	const [columnVisibility, setColumnVisibility] = useLocalStorage<VisibilityState>("cols", {})
-	const [viewMode, setViewMode] = useLocalStorage<ViewMode>("viewMode", window.innerWidth > 1024 ? "table" : "grid")
+	const [viewMode, setViewMode] = useLocalStorage<ViewMode>(
+		"viewMode",
+		// show grid view on mobile if there are less than 200 systems (looks better but table is more efficient)
+		window.innerWidth < 1024 && data.length < 200 ? "grid" : "table"
+	)
 
 	const locale = i18n.locale
 
+	// Filter data based on status filter
+	const filteredData = useMemo(() => {
+		if (statusFilter === "all") {
+			return data
+		}
+		return data.filter((system) => system.status === statusFilter)
+	}, [data, statusFilter])
+
 	useEffect(() => {
 		if (filter !== undefined) {
 			table.getColumn("system")?.setFilterValue(filter)
 		}
 	}, [filter])
 
-	const columnDefs = useMemo(() => SystemsTableColumns(viewMode), [])
+	const columnDefs = useMemo(() => SystemsTableColumns(viewMode), [viewMode])
 
 	const table = useReactTable({
-		data,
+		data: filteredData,
 		columns: columnDefs,
 		getCoreRowModel: getCoreRowModel(),
 		onSortingChange: setSorting,
@@ -153,6 +126,7 @@ export default function SystemsTable() {
 							<Trans>Updated in real time. Click on a system to view information.</Trans>
 						</CardDescription>
 					</div>
+
 					<div className="flex gap-2 ms-auto w-full md:w-80">
 						<Input placeholder={t`Filter...`} onChange={(e) => setFilter(e.target.value)} className="px-4" />
 						<DropdownMenu>
@@ -163,8 +137,8 @@ export default function SystemsTable() {
 								</Button>
 							</DropdownMenuTrigger>
 							<DropdownMenuContent align="end" className="h-72 md:h-auto min-w-48 md:min-w-auto overflow-y-auto">
-								<div className="grid grid-cols-1 md:grid-cols-3 divide-y md:divide-s md:divide-y-0">
-									<div>
+								<div className="grid grid-cols-1 md:grid-cols-4 divide-y md:divide-s md:divide-y-0">
+									<div className="border-r">
 										<DropdownMenuLabel className="pt-2 px-3.5 flex items-center gap-2">
 											<LayoutGridIcon className="size-4" />
 											<Trans>Layout</Trans>
@@ -186,7 +160,33 @@ export default function SystemsTable() {
 										</DropdownMenuRadioGroup>
 									</div>
 
-									<div>
+									<div className="border-r">
+										<DropdownMenuLabel className="pt-2 px-3.5 flex items-center gap-2">
+											<FilterIcon className="size-4" />
+											<Trans>Status</Trans>
+										</DropdownMenuLabel>
+										<DropdownMenuSeparator />
+										<DropdownMenuRadioGroup
+											className="px-1 pb-1"
+											value={statusFilter}
+											onValueChange={(value) => setStatusFilter(value as StatusFilter)}
+										>
+											<DropdownMenuRadioItem value="all" onSelect={(e) => e.preventDefault()}>
+												<Trans>All Systems</Trans>
+											</DropdownMenuRadioItem>
+											<DropdownMenuRadioItem value="up" onSelect={(e) => e.preventDefault()}>
+												<Trans>Up</Trans>
+											</DropdownMenuRadioItem>
+											<DropdownMenuRadioItem value="down" onSelect={(e) => e.preventDefault()}>
+												<Trans>Down</Trans>
+											</DropdownMenuRadioItem>
+											<DropdownMenuRadioItem value="paused" onSelect={(e) => e.preventDefault()}>
+												<Trans>Paused</Trans>
+											</DropdownMenuRadioItem>
+										</DropdownMenuRadioGroup>
+									</div>
+
+									<div className="border-r">
 										<DropdownMenuLabel className="pt-2 px-3.5 flex items-center gap-2">
 											<ArrowUpDownIcon className="size-4" />
 											<Trans>Sort By</Trans>
@@ -252,7 +252,7 @@ export default function SystemsTable() {
 				</div>
 			</CardHeader>
 		)
-	}, [visibleColumns.length, sorting, viewMode, locale])
+	}, [visibleColumns.length, sorting, viewMode, locale, statusFilter])
 
 	return (
 		<Card>
@@ -260,7 +260,7 @@ export default function SystemsTable() {
 			<div className="p-6 pt-0 max-sm:py-3 max-sm:px-2">
 				{viewMode === "table" ? (
 					// table layout
-					<div className="rounded-md border overflow-hidden">
+					<div className="rounded-md">
 						<AllSystemsTable table={table} rows={rows} colLength={visibleColumns.length} />
 					</div>
 				) : (
@@ -282,36 +282,78 @@ export default function SystemsTable() {
 	)
 }
 
-const AllSystemsTable = memo(
-	({ table, rows, colLength }: { table: TableType<SystemRecord>; rows: Row<SystemRecord>[]; colLength: number }) => {
-		return (
-			<Table>
-				<SystemsTableHead table={table} colLength={colLength} />
-				<TableBody>
-					{rows.length ? (
-						rows.map((row) => (
-							<SystemTableRow key={row.original.id} row={row} length={rows.length} colLength={colLength} />
-						))
-					) : (
-						<TableRow>
-							<TableCell colSpan={colLength} className="h-24 text-center">
-								<Trans>No systems found.</Trans>
-							</TableCell>
-						</TableRow>
-					)}
-				</TableBody>
-			</Table>
-		)
-	}
-)
+const AllSystemsTable = memo(function ({
+	table,
+	rows,
+	colLength,
+}: {
+	table: TableType<SystemRecord>
+	rows: Row<SystemRecord>[]
+	colLength: number
+}) {
+	// The virtualizer will need a reference to the scrollable container element
+	const scrollRef = useRef<HTMLDivElement>(null)
+
+	const virtualizer = useVirtualizer<HTMLDivElement, HTMLTableRowElement>({
+		count: rows.length,
+		estimateSize: () => (rows.length > 10 ? 56 : 60),
+		getScrollElement: () => scrollRef.current,
+		overscan: 5,
+	})
+	const virtualRows = virtualizer.getVirtualItems()
+
+	const paddingTop = Math.max(0, virtualRows[0]?.start ?? 0 - virtualizer.options.scrollMargin)
+	const paddingBottom = Math.max(0, virtualizer.getTotalSize() - (virtualRows[virtualRows.length - 1]?.end ?? 0))
+
+	return (
+		<div
+			className={cn(
+				"h-min max-h-[calc(100dvh-17rem)] max-w-full relative overflow-auto border rounded-md",
+				// don't set min height if there are less than 2 rows, do set if we need to display the empty state
+				(!rows.length || rows.length > 2) && "min-h-50"
+			)}
+			ref={scrollRef}
+		>
+			{/* add header height to table size */}
+			<div style={{ height: `${virtualizer.getTotalSize() + 50}px`, paddingTop, paddingBottom }}>
+				<table className="text-sm w-full h-full">
+					<SystemsTableHead table={table} colLength={colLength} />
+					<TableBody onMouseEnter={preloadSystemDetail}>
+						{rows.length ? (
+							virtualRows.map((virtualRow) => {
+								const row = rows[virtualRow.index] as Row<SystemRecord>
+								return (
+									<SystemTableRow
+										key={row.id}
+										row={row}
+										virtualRow={virtualRow}
+										length={rows.length}
+										colLength={colLength}
+									/>
+								)
+							})
+						) : (
+							<TableRow>
+								<TableCell colSpan={colLength} className="h-37 text-center pointer-events-none">
+									<Trans>No systems found.</Trans>
+								</TableCell>
+							</TableRow>
+						)}
+					</TableBody>
+				</table>
+			</div>
+		</div>
+	)
+})
 
 function SystemsTableHead({ table, colLength }: { table: TableType<SystemRecord>; colLength: number }) {
 	const { i18n } = useLingui()
+
 	return useMemo(() => {
 		return (
-			<TableHeader>
+			<TableHeader className="sticky top-0 z-20 w-full border-b-2">
 				{table.getHeaderGroups().map((headerGroup) => (
-					<TableRow key={headerGroup.id}>
+					<tr key={headerGroup.id}>
 						{headerGroup.headers.map((header) => {
 							return (
 								<TableHead className="px-1.5" key={header.id}>
@@ -319,47 +361,49 @@ function SystemsTableHead({ table, colLength }: { table: TableType<SystemRecord>
 								</TableHead>
 							)
 						})}
-					</TableRow>
+					</tr>
 				))}
 			</TableHeader>
 		)
 	}, [i18n.locale, colLength])
 }
 
-const SystemTableRow = memo(
-	({ row, length, colLength }: { row: Row<SystemRecord>; length: number; colLength: number }) => {
-		const system = row.original
-		const { t } = useLingui()
-		return useMemo(() => {
-			return (
-				<TableRow
-					// data-state={row.getIsSelected() && "selected"}
-					className={cn("cursor-pointer transition-opacity", {
-						"opacity-50": system.status === "paused",
-					})}
-					onClick={(e) => {
-						const target = e.target as HTMLElement
-						if (!target.closest("[data-nolink]") && e.currentTarget.contains(target)) {
-							navigate(getPagePath($router, "system", { name: system.name }))
-						}
-					}}
-				>
-					{row.getVisibleCells().map((cell) => (
-						<TableCell
-							key={cell.id}
-							style={{
-								width: cell.column.getSize(),
-							}}
-							className={cn("overflow-hidden relative", length > 10 ? "py-2" : "py-2.5")}
-						>
-							{flexRender(cell.column.columnDef.cell, cell.getContext())}
-						</TableCell>
-					))}
-				</TableRow>
-			)
-		}, [system, system.status, colLength, t])
-	}
-)
+const SystemTableRow = memo(function ({
+	row,
+	virtualRow,
+	colLength,
+}: {
+	row: Row<SystemRecord>
+	virtualRow: VirtualItem
+	length: number
+	colLength: number
+}) {
+	const system = row.original
+	const { t } = useLingui()
+	return useMemo(() => {
+		return (
+			<TableRow
+				// data-state={row.getIsSelected() && "selected"}
+				className={cn("cursor-pointer transition-opacity relative safari:transform-3d", {
+					"opacity-50": system.status === SystemStatus.Paused,
+				})}
+			>
+				{row.getVisibleCells().map((cell) => (
+					<TableCell
+						key={cell.id}
+						style={{
+							width: cell.column.getSize(),
+							height: virtualRow.size,
+						}}
+						className="py-0"
+					>
+						{flexRender(cell.column.columnDef.cell, cell.getContext())}
+					</TableCell>
+				))}
+			</TableRow>
+		)
+	}, [system, system.status, colLength, t])
+})
 
 const SystemCard = memo(
 	({ row, table, colLength }: { row: Row<SystemRecord>; table: TableType<SystemRecord>; colLength: number }) => {
@@ -369,49 +413,58 @@ const SystemCard = memo(
 		return useMemo(() => {
 			return (
 				<Card
+					onMouseEnter={preloadSystemDetail}
 					key={system.id}
 					className={cn(
 						"cursor-pointer hover:shadow-md transition-all bg-transparent w-full dark:border-border duration-200 relative",
 						{
-							"opacity-50": system.status === "paused",
+							"opacity-50": system.status === SystemStatus.Paused,
 						}
 					)}
 				>
 					<CardHeader className="py-1 ps-5 pe-3 bg-muted/30 border-b border-border/60">
-						<div className="flex items-center justify-between gap-2">
-							<CardTitle className="text-base tracking-normal shrink-1 text-primary/90 flex items-center min-h-10 gap-2.5 min-w-0">
-								<div className="flex items-center gap-2.5 min-w-0">
+						<div className="flex items-center gap-2 w-full overflow-hidden">
+							<CardTitle className="text-base tracking-normal text-primary/90 flex items-center min-w-0 flex-1 gap-2.5">
+								<div className="flex items-center gap-2.5 min-w-0 flex-1">
 									<IndicatorDot system={system} />
-									<CardTitle className="text-[.95em]/normal tracking-normal truncate text-primary/90">
-										{system.name}
-									</CardTitle>
+									<span className="text-[.95em]/normal tracking-normal text-primary/90 truncate">{system.name}</span>
 								</div>
 							</CardTitle>
 							{table.getColumn("actions")?.getIsVisible() && (
-								<div className="flex gap-1 flex-shrink-0 relative z-10">
+								<div className="flex gap-1 shrink-0 relative z-10">
 									<AlertButton system={system} />
 									<ActionsButton system={system} />
 								</div>
 							)}
 						</div>
 					</CardHeader>
-					<CardContent className="space-y-2.5 text-sm px-5 pt-3.5 pb-4">
-						{table.getAllColumns().map((column) => {
-							if (!column.getIsVisible() || column.id === "system" || column.id === "actions") return null
-							const cell = row.getAllCells().find((cell) => cell.column.id === column.id)
-							if (!cell) return null
-							// @ts-ignore
-							const { Icon, name } = column.columnDef as ColumnDef<SystemRecord, unknown>
-							return (
-								<div key={column.id} className="flex items-center gap-3">
-									{Icon && <Icon className="size-4 text-muted-foreground" />}
-									<div className="flex items-center gap-3 flex-1">
-										<span className="text-muted-foreground min-w-16">{name()}:</span>
-										<div className="flex-1">{flexRender(cell.column.columnDef.cell, cell.getContext())}</div>
-									</div>
-								</div>
-							)
-						})}
+					<CardContent className="text-sm px-5 pt-3.5 pb-4">
+						<div className="grid gap-2.5" style={{ gridTemplateColumns: "24px minmax(80px, max-content) 1fr" }}>
+							{table.getAllColumns().map((column) => {
+								if (!column.getIsVisible() || column.id === "system" || column.id === "actions") return null
+								const cell = row.getAllCells().find((cell) => cell.column.id === column.id)
+								if (!cell) return null
+								// @ts-ignore
+								const { Icon, name } = column.columnDef as ColumnDef<SystemRecord, unknown>
+								return (
+									<>
+										<div key={`${column.id}-icon`} className="flex items-center">
+											{column.id === "lastSeen" ? (
+												<EyeIcon className="size-4 text-muted-foreground" />
+											) : (
+												Icon && <Icon className="size-4 text-muted-foreground" />
+											)}
+										</div>
+										<div key={`${column.id}-label`} className="flex items-center text-muted-foreground pr-3">
+											{name()}:
+										</div>
+										<div key={`${column.id}-value`} className="flex items-center">
+											{flexRender(cell.column.columnDef.cell, cell.getContext())}
+										</div>
+									</>
+								)
+							})}
+						</div>
 					</CardContent>
 					<Link
 						href={getPagePath($router, "system", { name: row.original.name })}

beszel/site/src/components/ui/alert-dialog.tsx

@@ -34,7 +34,7 @@ const AlertDialogContent = React.forwardRef<
 		<AlertDialogPrimitive.Content
 			ref={ref}
 			className={cn(
-				"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+				"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-card p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-50% data-[state=closed]:slide-out-to-top-48% data-[state=open]:slide-in-from-left-50% data-[state=open]:slide-in-from-top-48% sm:rounded-lg",
 				className
 			)}
 			{...props}
@@ -44,7 +44,7 @@ const AlertDialogContent = React.forwardRef<
 AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
 
 const AlertDialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-	<div className={cn("flex flex-col space-y-2 text-center sm:text-start", className)} {...props} />
+	<div className={cn("grid gap-2 text-center sm:text-start", className)} {...props} />
 )
 AlertDialogHeader.displayName = "AlertDialogHeader"
 

beszel/site/src/components/ui/badge.tsx

@@ -4,7 +4,7 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"
 
 const badgeVariants = cva(
-	"inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+	"inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2",
 	{
 		variants: {
 			variant: {

beszel/site/src/components/ui/button.tsx

@@ -5,7 +5,7 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"
 
 const buttonVariants = cva(
-	"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+	"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 cursor-pointer",
 	{
 		variants: {
 			variant: {
@@ -13,7 +13,7 @@ const buttonVariants = cva(
 				destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
 				outline: "border bg-background hover:bg-accent/70 dark:hover:bg-accent/50 hover:text-accent-foreground",
 				secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-				ghost: "hover:bg-accent hover:text-accent-foreground",
+				ghost: "hover:bg-accent/70 hover:text-accent-foreground",
 				link: "text-primary underline-offset-4 hover:underline",
 			},
 			size: {

beszel/site/src/components/ui/card.tsx

@@ -5,16 +5,14 @@ import { cn } from "@/lib/utils"
 const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => (
 	<div
 		ref={ref}
-		className={cn("rounded-lg border border-border/60 bg-card text-card-foreground shadow-sm", className)}
+		className={cn("rounded-lg border border-border/60 bg-card text-card-foreground shadow-xs", className)}
 		{...props}
 	/>
 ))
 Card.displayName = "Card"
 
 const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-	({ className, ...props }, ref) => (
-		<div ref={ref} className={cn("flex flex-col space-y-1.5 p-6", className)} {...props} />
-	)
+	({ className, ...props }, ref) => <div ref={ref} className={cn("grid gap-1.5 p-6", className)} {...props} />
 )
 CardHeader.displayName = "CardHeader"
 

beszel/site/src/components/ui/chart.tsx

@@ -4,6 +4,8 @@ import * as RechartsPrimitive from "recharts"
 import { chartTimeData, cn } from "@/lib/utils"
 import { ChartData } from "@/types"
 
+import type { JSX } from "react"
+
 // Format: { THEME_NAME: CSS_SELECTOR }
 const THEMES = { light: "", dark: ".dark" } as const
 
@@ -42,11 +44,12 @@ const ChartContainer = React.forwardRef<
 
 	return (
 		//<ChartContext.Provider value={{ config }}>
+		//</ChartContext.Provider>
 		<div
 			data-chart={chartId}
 			ref={ref}
 			className={cn(
-				"text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line-line]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
+				"text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line-line]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-hidden [&_.recharts-surface]:outline-hidden",
 				className
 			)}
 			{...props}
@@ -54,7 +57,6 @@ const ChartContainer = React.forwardRef<
 			{/* <ChartStyle id={chartId} config={config} /> */}
 			<RechartsPrimitive.ResponsiveContainer>{children}</RechartsPrimitive.ResponsiveContainer>
 		</div>
-		//</ChartContext.Provider>
 	)
 })
 ChartContainer.displayName = "Chart"
@@ -169,7 +171,7 @@ const ChartTooltipContent = React.forwardRef<
 			<div
 				ref={ref}
 				className={cn(
-					"grid min-w-[7rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
+					"grid min-w-28 items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
 					className
 				)}
 			>
@@ -196,7 +198,7 @@ const ChartTooltipContent = React.forwardRef<
 											<itemConfig.icon />
 										) : (
 											<div
-												className={cn("shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]", {
+												className={cn("shrink-0 rounded-[2px] border-border bg-(--color-bg)", {
 													"h-2.5 w-2.5": indicator === "dot",
 													"w-1": indicator === "line",
 													"w-0 border-[1.5px] border-dashed bg-transparent": indicator === "dashed",
@@ -226,7 +228,7 @@ const ChartTooltipContent = React.forwardRef<
 												{itemConfig?.label || item.name}
 											</span>
 											{item.value !== undefined && (
-												<span className="font-medium tabular-nums text-foreground">
+												<span className="font-medium text-foreground">
 													{content && typeof content === "function"
 														? content(item, key)
 														: item.value.toLocaleString() + (unit ? unit : "")}
@@ -265,7 +267,7 @@ const ChartLegendContent = React.forwardRef<
 		<div
 			ref={ref}
 			className={cn(
-				"flex items-center justify-center gap-4 gap-y-1 flex-wrap",
+				"flex items-center justify-center gap-4 gap-y-1 flex-wrap ps-4",
 				verticalAlign === "top" ? "pb-3" : "pt-3",
 				className
 			)}

beszel/site/src/components/ui/checkbox.tsx

@@ -13,7 +13,7 @@ const Checkbox = React.forwardRef<
 	<CheckboxPrimitive.Root
 		ref={ref}
 		className={cn(
-			"peer size-4 flex items-center justify-center shrink-0 rounded-[.3em] border border-input ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+			"peer size-4 flex items-center justify-center shrink-0 rounded-[.3em] border border-input ring-offset-background focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
 
 			className
 		)}

beszel/site/src/components/ui/command.tsx

@@ -1,33 +1,41 @@
 import * as React from "react"
-import { DialogTitle, type DialogProps } from "@radix-ui/react-dialog"
 import { Command as CommandPrimitive } from "cmdk"
-import { Search } from "lucide-react"
+import { SearchIcon } from "lucide-react"
 
 import { cn } from "@/lib/utils"
-import { Dialog, DialogContent } from "@/components/ui/dialog"
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog"
 
-const Command = React.forwardRef<
-	React.ElementRef<typeof CommandPrimitive>,
-	React.ComponentPropsWithoutRef<typeof CommandPrimitive>
->(({ className, ...props }, ref) => (
-	<CommandPrimitive
-		ref={ref}
-		className={cn("flex h-full w-full flex-col overflow-hidden bg-popover text-popover-foreground", className)}
-		{...props}
-	/>
-))
-Command.displayName = CommandPrimitive.displayName
+function Command({ className, ...props }: React.ComponentProps<typeof CommandPrimitive>) {
+	return (
+		<CommandPrimitive
+			data-slot="command"
+			className={cn("bg-card flex h-full w-full flex-col overflow-hidden rounded-md", className)}
+			{...props}
+		/>
+	)
+}
 
-interface CommandDialogProps extends DialogProps {}
-
-const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
+function CommandDialog({
+	title = "Command Palette",
+	description = "Search for a command to run...",
+	children,
+	className,
+	showCloseButton = true,
+	...props
+}: React.ComponentProps<typeof Dialog> & {
+	title?: string
+	description?: string
+	className?: string
+	showCloseButton?: boolean
+}) {
 	return (
 		<Dialog {...props}>
-			<DialogContent className="overflow-hidden p-0 shadow-lg">
-				<div className="sr-only">
-					<DialogTitle>Command</DialogTitle>
-				</div>
-				<Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+			<DialogHeader className="sr-only">
+				<DialogTitle>{title}</DialogTitle>
+				<DialogDescription>{description}</DialogDescription>
+			</DialogHeader>
+			<DialogContent className={cn("overflow-hidden p-0", className)}>
+				<Command className="[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
 					{children}
 				</Command>
 			</DialogContent>
@@ -35,89 +43,81 @@ const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
 	)
 }
 
-const CommandInput = React.forwardRef<
-	React.ElementRef<typeof CommandPrimitive.Input>,
-	React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
->(({ className, ...props }, ref) => (
-	<div className="flex items-center border-b px-3" cmdk-input-wrapper="">
-		<Search className="me-2 h-4 w-4 shrink-0 opacity-50" />
-		<CommandPrimitive.Input
-			ref={ref}
+function CommandInput({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Input>) {
+	return (
+		<div data-slot="command-input-wrapper" className="flex h-9 items-center gap-2 border-b px-3">
+			<SearchIcon className="size-4 shrink-0 opacity-50" />
+			<CommandPrimitive.Input
+				data-slot="command-input"
+				className={cn(
+					"placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
+					className
+				)}
+				{...props}
+			/>
+		</div>
+	)
+}
+
+function CommandList({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.List>) {
+	return (
+		<CommandPrimitive.List
+			data-slot="command-list"
+			className={cn("max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto", className)}
+			{...props}
+		/>
+	)
+}
+
+function CommandEmpty({ ...props }: React.ComponentProps<typeof CommandPrimitive.Empty>) {
+	return <CommandPrimitive.Empty data-slot="command-empty" className="py-6 text-center text-sm" {...props} />
+}
+
+function CommandGroup({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Group>) {
+	return (
+		<CommandPrimitive.Group
+			data-slot="command-group"
 			className={cn(
-				"flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+				"text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
 				className
 			)}
 			{...props}
 		/>
-	</div>
-))
-
-CommandInput.displayName = CommandPrimitive.Input.displayName
-
-const CommandList = React.forwardRef<
-	React.ElementRef<typeof CommandPrimitive.List>,
-	React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
->(({ className, ...props }, ref) => (
-	<CommandPrimitive.List
-		ref={ref}
-		className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
-		{...props}
-	/>
-))
-
-CommandList.displayName = CommandPrimitive.List.displayName
-
-const CommandEmpty = React.forwardRef<
-	React.ElementRef<typeof CommandPrimitive.Empty>,
-	React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
->((props, ref) => <CommandPrimitive.Empty ref={ref} className="py-6 text-center text-sm" {...props} />)
-
-CommandEmpty.displayName = CommandPrimitive.Empty.displayName
-
-const CommandGroup = React.forwardRef<
-	React.ElementRef<typeof CommandPrimitive.Group>,
-	React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
->(({ className, ...props }, ref) => (
-	<CommandPrimitive.Group
-		ref={ref}
-		className={cn(
-			"overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
-			className
-		)}
-		{...props}
-	/>
-))
-
-CommandGroup.displayName = CommandPrimitive.Group.displayName
-
-const CommandSeparator = React.forwardRef<
-	React.ElementRef<typeof CommandPrimitive.Separator>,
-	React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
->(({ className, ...props }, ref) => (
-	<CommandPrimitive.Separator ref={ref} className={cn("-mx-1 h-px bg-border", className)} {...props} />
-))
-CommandSeparator.displayName = CommandPrimitive.Separator.displayName
-
-const CommandItem = React.forwardRef<
-	React.ElementRef<typeof CommandPrimitive.Item>,
-	React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
->(({ className, ...props }, ref) => (
-	<CommandPrimitive.Item
-		ref={ref}
-		className={cn(
-			"relative flex cursor-default opacity-70 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:opacity-90 data-[disabled='true']:pointer-events-none data-[disabled='true']:opacity-50",
-			className
-		)}
-		{...props}
-	/>
-))
-
-CommandItem.displayName = CommandPrimitive.Item.displayName
-
-const CommandShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
-	return <span className={cn("ms-auto text-xs tracking-wide text-muted-foreground", className)} {...props} />
+	)
+}
+
+function CommandSeparator({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Separator>) {
+	return (
+		<CommandPrimitive.Separator
+			data-slot="command-separator"
+			className={cn("bg-border -mx-1 h-px", className)}
+			{...props}
+		/>
+	)
+}
+
+function CommandItem({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Item>) {
+	return (
+		<CommandPrimitive.Item
+			data-slot="command-item"
+			className={cn(
+				"data-[selected=true]:bg-accent/70 data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+				className
+			)}
+			{...props}
+		/>
+	)
+}
+
+function CommandShortcut({ className, ...props }: React.ComponentProps<"span">) {
+	return (
+		<span
+			data-slot="command-shortcut"
+			className={cn("text-muted-foreground ml-auto text-xs tracking-wide", className)}
+			{...props}
+		/>
+	)
 }
-CommandShortcut.displayName = "CommandShortcut"
 
 export {
 	Command,

beszel/site/src/components/ui/dialog.tsx

@@ -36,13 +36,13 @@ const DialogContent = React.forwardRef<
 		<DialogPrimitive.Content
 			ref={ref}
 			className={cn(
-				"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-card p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+				"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-card p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-50% data-[state=closed]:slide-out-to-top-48% data-[state=open]:slide-in-from-left-50% data-[state=open]:slide-in-from-top-48% sm:rounded-lg",
 				className
 			)}
 			{...props}
 		>
 			{children}
-			<DialogPrimitive.Close className="absolute end-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+			<DialogPrimitive.Close className="absolute end-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
 				<X className="h-4 w-4" />
 				<span className="sr-only">Close</span>
 			</DialogPrimitive.Close>
@@ -52,7 +52,7 @@ const DialogContent = React.forwardRef<
 DialogContent.displayName = DialogPrimitive.Content.displayName
 
 const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-	<div className={cn("flex flex-col space-y-1.5 text-center sm:text-start", className)} {...props} />
+	<div className={cn("grid gap-1.5 text-center sm:text-start", className)} {...props} />
 )
 DialogHeader.displayName = "DialogHeader"
 

beszel/site/src/components/ui/dropdown-menu.tsx

@@ -25,7 +25,7 @@ const DropdownMenuSubTrigger = React.forwardRef<
 	<DropdownMenuPrimitive.SubTrigger
 		ref={ref}
 		className={cn(
-			"flex cursor-default select-none items-center rounded-sm px-2.5 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
+			"flex select-none items-center rounded-sm px-2.5 py-1.5 text-sm outline-hidden focus:bg-accent/70 data-[state=open]:bg-accent/70",
 			inset && "ps-8",
 			className
 		)}
@@ -44,7 +44,7 @@ const DropdownMenuSubContent = React.forwardRef<
 	<DropdownMenuPrimitive.SubContent
 		ref={ref}
 		className={cn(
-			"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+			"z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
 			className
 		)}
 		{...props}
@@ -61,7 +61,7 @@ const DropdownMenuContent = React.forwardRef<
 			ref={ref}
 			sideOffset={sideOffset}
 			className={cn(
-				"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+				"z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
 				className
 			)}
 			{...props}
@@ -79,7 +79,7 @@ const DropdownMenuItem = React.forwardRef<
 	<DropdownMenuPrimitive.Item
 		ref={ref}
 		className={cn(
-			"relative flex cursor-default select-none items-center rounded-sm px-2.5 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+			"cursor-pointer relative flex select-none items-center rounded-sm px-2.5 py-1.5 text-sm outline-hidden focus:bg-accent/70 focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
 			inset && "ps-8",
 			className
 		)}
@@ -95,7 +95,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
 	<DropdownMenuPrimitive.CheckboxItem
 		ref={ref}
 		className={cn(
-			"relative flex cursor-default select-none items-center rounded-sm py-1.5 ps-8 pe-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+			"relative flex cursor-pointer select-none items-center rounded-sm py-1.5 ps-8 pe-2.5 text-sm outline-hidden focus:bg-accent/70 focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
 			className
 		)}
 		checked={checked}
@@ -118,7 +118,7 @@ const DropdownMenuRadioItem = React.forwardRef<
 	<DropdownMenuPrimitive.RadioItem
 		ref={ref}
 		className={cn(
-			"relative flex cursor-default select-none items-center rounded-sm py-1.5 ps-8 pe-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+			"relative flex cursor-pointer select-none items-center rounded-sm py-1.5 ps-8 pe-2.5 text-sm outline-hidden focus:bg-accent/70 focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
 			className
 		)}
 		{...props}

beszel/site/src/components/ui/input-copy.tsx

@@ -11,11 +11,11 @@ export function InputCopy({ value, id, name }: { value: string; id: string; name
 			<Input readOnly id={id} name={name} value={value} required></Input>
 			<div
 				className={
-					"h-6 w-24 bg-gradient-to-r rtl:bg-gradient-to-l from-transparent to-background to-65% absolute top-2 end-1 pointer-events-none"
+					"h-6 w-24 bg-linear-to-r rtl:bg-linear-to-l from-transparent to-background to-65% absolute top-2 end-1 pointer-events-none"
 				}
 			></div>
 			<TooltipProvider delayDuration={100} disableHoverableContent>
-				<Tooltip>
+				<Tooltip disableHoverableContent={true}>
 					<TooltipTrigger asChild>
 						<Button
 							type="button"

beszel/site/src/components/ui/input-tags.tsx

@@ -33,7 +33,7 @@ const InputTags = React.forwardRef<HTMLInputElement, InputTagsProps>(
 		return (
 			<div
 				className={cn(
-					"bg-background min-h-10 flex w-full flex-wrap gap-2 rounded-md border px-3 py-2 text-sm  placeholder:text-muted-foreground has-[:focus-visible]:outline-none ring-offset-background has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-ring has-[:focus-visible]:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+					"bg-background min-h-10 flex w-full flex-wrap gap-2 rounded-md border px-3 py-2 text-sm  placeholder:text-muted-foreground has-focus-visible:outline-hidden ring-offset-background has-focus-visible:ring-2 has-focus-visible:ring-ring has-focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
 					className
 				)}
 			>
@@ -53,7 +53,7 @@ const InputTags = React.forwardRef<HTMLInputElement, InputTagsProps>(
 					</Badge>
 				))}
 				<input
-					className="flex-1 outline-none bg-background placeholder:text-muted-foreground"
+					className="flex-1 outline-hidden bg-background placeholder:text-muted-foreground"
 					value={pendingDataPoint}
 					onChange={(e) => setPendingDataPoint(e.target.value)}
 					onKeyDown={(e) => {

beszel/site/src/components/ui/input.tsx

@@ -2,21 +2,19 @@ import * as React from "react"
 
 import { cn } from "@/lib/utils"
 
-export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {}
-
-const Input = React.forwardRef<HTMLInputElement, InputProps>(({ className, type, ...props }, ref) => {
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
 	return (
 		<input
 			type={type}
+			data-slot="input"
 			className={cn(
-				"flex h-10 w-full rounded-md border bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+				"flex h-10 w-full rounded-md border bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+				"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
 				className
 			)}
-			ref={ref}
 			{...props}
 		/>
 	)
-})
-Input.displayName = "Input"
+}
 
 export { Input }

beszel/site/src/components/ui/select.tsx

@@ -17,7 +17,7 @@ const SelectTrigger = React.forwardRef<
 	<SelectPrimitive.Trigger
 		ref={ref}
 		className={cn(
-			"flex h-10 w-full items-center justify-between rounded-md border bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+			"flex h-10 w-full items-center justify-between rounded-md border bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
 			className
 		)}
 		{...props}
@@ -66,7 +66,7 @@ const SelectContent = React.forwardRef<
 		<SelectPrimitive.Content
 			ref={ref}
 			className={cn(
-				"relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+				"relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
 				position === "popper" &&
 					"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
 				className
@@ -79,7 +79,7 @@ const SelectContent = React.forwardRef<
 				className={cn(
 					"p-1",
 					position === "popper" &&
-						"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+						"h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width)"
 				)}
 			>
 				{children}
@@ -105,7 +105,7 @@ const SelectItem = React.forwardRef<
 	<SelectPrimitive.Item
 		ref={ref}
 		className={cn(
-			"relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 ps-8 pe-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+			"relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 ps-8 pe-2 text-sm outline-hidden focus:bg-accent/70 focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
 			className
 		)}
 		{...props}

beszel/site/src/components/ui/separator.tsx

@@ -11,7 +11,7 @@ const Separator = React.forwardRef<
 		ref={ref}
 		decorative={decorative}
 		orientation={orientation}
-		className={cn("shrink-0 bg-border", orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]", className)}
+		className={cn("shrink-0 bg-border", orientation === "horizontal" ? "h-px w-full" : "h-full w-px", className)}
 		{...props}
 	/>
 ))

beszel/site/src/components/ui/sheet.tsx

@@ -0,0 +1,101 @@
+import * as React from "react"
+import * as SheetPrimitive from "@radix-ui/react-dialog"
+import { XIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
+	return <SheetPrimitive.Root data-slot="sheet" {...props} />
+}
+
+function SheetTrigger({ ...props }: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
+	return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
+}
+
+function SheetClose({ ...props }: React.ComponentProps<typeof SheetPrimitive.Close>) {
+	return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
+}
+
+function SheetPortal({ ...props }: React.ComponentProps<typeof SheetPrimitive.Portal>) {
+	return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
+}
+
+function SheetOverlay({ className, ...props }: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
+	return (
+		<SheetPrimitive.Overlay
+			data-slot="sheet-overlay"
+			className={cn(
+				"data-[state=open]:animate-in duration-500 isolate data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/40",
+				className
+			)}
+			{...props}
+		/>
+	)
+}
+
+function SheetContent({
+	className,
+	children,
+	side = "right",
+	...props
+}: React.ComponentProps<typeof SheetPrimitive.Content> & {
+	side?: "top" | "right" | "bottom" | "left"
+}) {
+	return (
+		<SheetPortal>
+			<SheetOverlay />
+			<SheetPrimitive.Content
+				data-slot="sheet-content"
+				className={cn(
+					"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-[400ms]",
+					side === "right" &&
+						"data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
+					side === "left" &&
+						"data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
+					side === "top" &&
+						"data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
+					side === "bottom" &&
+						"data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
+					className
+				)}
+				{...props}
+			>
+				{children}
+				<SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
+					<XIcon className="size-4" />
+					<span className="sr-only">Close</span>
+				</SheetPrimitive.Close>
+			</SheetPrimitive.Content>
+		</SheetPortal>
+	)
+}
+
+function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
+	return <div data-slot="sheet-header" className={cn("flex flex-col gap-1.5 p-4", className)} {...props} />
+}
+
+function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
+	return <div data-slot="sheet-footer" className={cn("mt-auto flex flex-col gap-2 p-4", className)} {...props} />
+}
+
+function SheetTitle({ className, ...props }: React.ComponentProps<typeof SheetPrimitive.Title>) {
+	return (
+		<SheetPrimitive.Title
+			data-slot="sheet-title"
+			className={cn("text-foreground font-semibold", className)}
+			{...props}
+		/>
+	)
+}
+
+function SheetDescription({ className, ...props }: React.ComponentProps<typeof SheetPrimitive.Description>) {
+	return (
+		<SheetPrimitive.Description
+			data-slot="sheet-description"
+			className={cn("text-muted-foreground text-sm", className)}
+			{...props}
+		/>
+	)
+}
+
+export { Sheet, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription }

beszel/site/src/components/ui/slider.tsx

@@ -15,7 +15,7 @@ const Slider = React.forwardRef<
 		<SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary">
 			<SliderPrimitive.Range className="absolute h-full bg-primary" />
 		</SliderPrimitive.Track>
-		<SliderPrimitive.Thumb className="block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
+		<SliderPrimitive.Thumb className="block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
 	</SliderPrimitive.Root>
 ))
 Slider.displayName = SliderPrimitive.Root.displayName

beszel/site/src/components/ui/switch.tsx

@@ -9,7 +9,7 @@ const Switch = React.forwardRef<
 >(({ className, ...props }, ref) => (
 	<SwitchPrimitives.Root
 		className={cn(
-			"peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+			"peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
 			className
 		)}
 		{...props}
@@ -17,7 +17,7 @@ const Switch = React.forwardRef<
 	>
 		<SwitchPrimitives.Thumb
 			className={cn(
-				"pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 rtl:data-[state=checked]:-translate-x-5 data-[state=unchecked]:translate-x-0"
+				"pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=checked]:rtl:-translate-x-5 data-[state=unchecked]:translate-x-0"
 			)}
 		/>
 	</SwitchPrimitives.Root>

beszel/site/src/components/ui/table.tsx

@@ -13,7 +13,11 @@ Table.displayName = "Table"
 
 const TableHeader = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
 	({ className, ...props }, ref) => (
-		<thead ref={ref} className={cn("bg-muted/30 [&_tr]:border-b", className)} {...props} />
+		<thead
+			ref={ref}
+			className={cn("bg-table-header border-b border-border/50 [&_tr]:border-b", className)}
+			{...props}
+		/>
 	)
 )
 TableHeader.displayName = "TableHeader"
@@ -27,7 +31,7 @@ TableBody.displayName = "TableBody"
 
 const TableFooter = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
 	({ className, ...props }, ref) => (
-		<tfoot ref={ref} className={cn("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", className)} {...props} />
+		<tfoot ref={ref} className={cn("border-t bg-muted/50 font-medium last:[&>tr]:border-b-0", className)} {...props} />
 	)
 )
 TableFooter.displayName = "TableFooter"
@@ -37,7 +41,7 @@ const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTML
 		<tr
 			ref={ref}
 			className={cn(
-				"border-b border-border/60 hover:bg-muted/40 dark:hover:bg-muted/20 data-[state=selected]:!bg-muted",
+				"border-b border-border/60 hover:bg-muted/40 dark:hover:bg-muted/20 data-[state=selected]:bg-muted!",
 				className
 			)}
 			{...props}

beszel/site/src/components/ui/tabs.tsx

@@ -27,7 +27,7 @@ const TabsTrigger = React.forwardRef<
 	<TabsPrimitive.Trigger
 		ref={ref}
 		className={cn(
-			"inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
+			"inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-xs cursor-pointer",
 			className
 		)}
 		{...props}
@@ -42,7 +42,7 @@ const TabsContent = React.forwardRef<
 	<TabsPrimitive.Content
 		ref={ref}
 		className={cn(
-			"mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+			"mt-2 ring-offset-background focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
 			className
 		)}
 		{...props}

beszel/site/src/components/ui/textarea.tsx

@@ -8,7 +8,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(({ classNa
 	return (
 		<textarea
 			className={cn(
-				"flex min-h-14 w-full rounded-md border bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+				"flex min-h-14 w-full rounded-md border bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
 				className
 			)}
 			ref={ref}

beszel/site/src/components/ui/toast.tsx

@@ -14,7 +14,7 @@ const ToastViewport = React.forwardRef<
 	<ToastPrimitives.Viewport
 		ref={ref}
 		className={cn(
-			"fixed top-0 z-[100] flex max-h-dvh w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
+			"fixed top-0 z-100 flex max-h-dvh w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
 			className
 		)}
 		{...props}
@@ -23,7 +23,7 @@ const ToastViewport = React.forwardRef<
 ToastViewport.displayName = ToastPrimitives.Viewport.displayName
 
 const toastVariants = cva(
-	"group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pe-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
+	"group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pe-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-(--radix-toast-swipe-end-x) data-[swipe=move]:translate-x-(--radix-toast-swipe-move-x) data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full sm:data-[state=open]:slide-in-from-bottom-full",
 	{
 		variants: {
 			variant: {
@@ -52,7 +52,7 @@ const ToastAction = React.forwardRef<
 	<ToastPrimitives.Action
 		ref={ref}
 		className={cn(
-			"inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
+			"inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 hover:group-[.destructive]:border-destructive/30 hover:group-[.destructive]:bg-destructive hover:group-[.destructive]:text-destructive-foreground focus:group-[.destructive]:ring-destructive",
 			className
 		)}
 		{...props}
@@ -67,7 +67,7 @@ const ToastClose = React.forwardRef<
 	<ToastPrimitives.Close
 		ref={ref}
 		className={cn(
-			"absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
+			"absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-hidden focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 hover:group-[.destructive]:text-red-50 focus:group-[.destructive]:ring-red-400 focus:group-[.destructive]:ring-offset-red-600",
 			className
 		)}
 		toast-close=""

beszel/site/src/components/ui/tooltip.tsx

@@ -3,26 +3,47 @@ import * as TooltipPrimitive from "@radix-ui/react-tooltip"
 
 import { cn } from "@/lib/utils"
 
-const TooltipProvider = TooltipPrimitive.Provider
+function TooltipProvider({ delayDuration = 0, ...props }: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+	return <TooltipPrimitive.Provider data-slot="tooltip-provider" delayDuration={delayDuration} {...props} />
+}
 
-const Tooltip = TooltipPrimitive.Root
+function Tooltip({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+	return (
+		<TooltipProvider>
+			<TooltipPrimitive.Root data-slot="tooltip" {...props} />
+		</TooltipProvider>
+	)
+}
 
-const TooltipTrigger = TooltipPrimitive.Trigger
+function TooltipTrigger({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+	return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+}
 
-const TooltipContent = React.forwardRef<
-	React.ElementRef<typeof TooltipPrimitive.Content>,
-	React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
->(({ className, sideOffset = 4, ...props }, ref) => (
-	<TooltipPrimitive.Content
-		ref={ref}
-		sideOffset={sideOffset}
-		className={cn(
-			"z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-			className
-		)}
-		{...props}
-	/>
-))
-TooltipContent.displayName = TooltipPrimitive.Content.displayName
+function TooltipContent({
+	className,
+	sideOffset = 0,
+	children,
+	...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+	return (
+		<TooltipPrimitive.Portal>
+			<TooltipPrimitive.Content
+				data-slot="tooltip-content"
+				sideOffset={sideOffset}
+				className={cn(
+					"bg-popover text-popover-foreground border animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-sm text-balance",
+					className
+				)}
+				{...props}
+			>
+				{children}
+				<TooltipPrimitive.Arrow
+					className="bg-popover border z-50 fill-popover size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] will-change-transform"
+					style={{ clipPath: "inset(25% 0 0 25%)" }}
+				/>
+			</TooltipPrimitive.Content>
+		</TooltipPrimitive.Portal>
+	)
+}
 
 export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

beszel/site/src/index.css

@@ -1,101 +1,162 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
+@import "tw-animate-css";
 
-@layer base {
-	:root {
-		--background: 30 8% 98.5%;
-		--foreground: 30 0% 0%;
-		--card: 30 0% 100%;
-		--card-foreground: 240 6.67% 2.94%;
-		--popover: 30 0% 100%;
-		--popover-foreground: 240 10% 6.2%;
-		--primary: 240 5.88% 10%;
-		--primary-foreground: 30 0% 100%;
-		--secondary: 240 4.76% 95.88%;
-		--secondary-foreground: 240 5.88% 10%;
-		--muted: 26 6% 94%;
-		--muted-foreground: 24 2.79% 35.1%;
-		--accent: 20 23.08% 94%;
-		--accent-foreground: 240 5.88% 10%;
-		--destructive: 0 66% 53%;
-		--destructive-foreground: 0 0% 98.04%;
-		--border: 30 8.11% 85.49%;
-		--input: 30 4.29% 72.55%;
-		--ring: 30 3.97% 49.41%;
-		--radius: 0.8rem;
-		/* charts */
-		--chart-1: 220 70% 50%;
-		--chart-2: 160 60% 45%;
-		--chart-3: 30 80% 55%;
-		--chart-4: 280 65% 60%;
-		--chart-5: 340 75% 55%;
-	}
+@custom-variant light (&:is(.light *));
+@custom-variant dark (&:is(.dark *));
+@custom-variant safari (@supports (hanging-punctuation: first) and (-webkit-appearance: none));
 
-	.dark {
-		color-scheme: dark;
-		--background: 220 5.5% 9%;
-		--foreground: 220 2% 97%;
-		--card: 220 5.5% 10.5%;
-		--card-foreground: 220 2% 97%;
-		--popover: 220 5.5% 9%;
-		--popover-foreground: 220 2% 97%;
-		--primary: 220 2% 96%;
-		--primary-foreground: 220 4% 10%;
-		--secondary: 220 4% 16%;
-		--secondary-foreground: 220 0% 98%;
-		--muted: 220 6% 16%;
-		--muted-foreground: 220 4% 67%;
-		--accent: 220 5% 15.5%;
-		--accent-foreground: 220 2% 98%;
-		--destructive: 0 62% 46%;
-		--destructive-foreground: 0 0% 97%;
-		--border: 220 3% 16%;
-		--input: 220 4% 22%;
-		--ring: 220 4% 80%;
-		--radius: 0.8rem;
-	}
+:root {
+	--background: hsl(30 8% 98%);
+	--foreground: hsl(30 0% 10%);
+	--card: hsl(30 0% 100%);
+	--card-foreground: hsl(240 6% 12%);
+	--popover: hsl(30 0% 100%);
+	--popover-foreground: hsl(240 10% 6.2%);
+	--primary: hsl(240 5.88% 10%);
+	--primary-foreground: hsl(30 0% 100%);
+	--secondary: hsl(240 4.76% 95.88%);
+	--secondary-foreground: hsl(240 5.88% 10%);
+	--muted: hsl(26 6% 94%);
+	--muted-foreground: hsl(24 2.79% 35.1%);
+	--accent: hsl(20 23.08% 94%);
+	--accent-foreground: hsl(240 5.88% 10%);
+	--destructive: hsl(0 66% 53%);
+	--destructive-foreground: hsl(0 0% 97%);
+	--border: hsl(30 8.11% 85.49%);
+	--input: hsl(30 4.29% 72.55%);
+	--ring: hsl(30 3.97% 49.41%);
+	--radius: 0.8rem;
+	--chart-1: hsl(220 70% 50%);
+	--chart-2: hsl(160 60% 45%);
+	--chart-3: hsl(30 80% 55%);
+	--chart-4: hsl(280 65% 60%);
+	--chart-5: hsl(340 75% 55%);
+	--table-header: hsl(225, 6%, 97%);
 }
 
-/* Fonts */
-@supports (font-variation-settings: normal) {
-	:root {
-		font-family: Inter, InterVariable, sans-serif;
-	}
+.dark {
+	color-scheme: dark;
+	--background: hsl(220 5.5% 9%);
+	--foreground: hsl(220 2% 97%);
+	--card: hsl(220 5.5% 10.5%);
+	--card-foreground: hsl(220 2% 97%);
+	--popover: hsl(220 5.5% 9%);
+	--popover-foreground: hsl(220 2% 97%);
+	--primary: hsl(220 2% 96%);
+	--primary-foreground: hsl(220 4% 10%);
+	--secondary: hsl(220 4% 16%);
+	--secondary-foreground: hsl(220 0% 98%);
+	--muted: hsl(220 6% 16%);
+	--muted-foreground: hsl(220 4% 67%);
+	--accent: hsl(220 5% 15.5%);
+	--accent-foreground: hsl(220 2% 98%);
+	--destructive: hsl(0 62% 46%);
+	--border: hsl(220 3% 16%);
+	--input: hsl(220 4% 22%);
+	--ring: hsl(220 4% 80%);
+	--table-header: hsl(220, 6%, 13%);
+	--radius: 0.8rem;
 }
-@font-face {
-	font-family: InterVariable;
-	font-style: normal;
-	font-weight: 100 900;
-	font-display: swap;
-	src: url("/static/InterVariable.woff2?v=4.0") format("woff2");
+
+@theme inline {
+	--font-sans: Inter, InterVariable, sans-serif;
+
+	--breakpoint-xs: 26.6rem;
+	--breakpoint-450: 28rem;
+	--breakpoint-2xl: 90rem;
+
+	--radius-sm: calc(var(--radius) - 4px);
+	--radius-md: calc(var(--radius) - 2px);
+	--radius-lg: var(--radius);
+	--radius-xl: calc(var(--radius) + 4px);
+
+	--color-green-50: hsl(140 60% 95%);
+	--color-green-100: hsl(140 50% 90%);
+	--color-green-200: hsl(140 49% 80%);
+	--color-green-300: hsl(140 48% 70%);
+	--color-green-400: hsl(140 49% 60%);
+	--color-green-500: hsl(140 50% 48%);
+	--color-green-600: hsl(140 52% 38%);
+	--color-green-700: hsl(140 53% 29%);
+	--color-green-800: hsl(140 54% 20%);
+	--color-green-900: hsl(140 54% 12%);
+	--color-green-950: hsl(140 57% 6%);
+
+	--color-background: var(--background);
+	--color-foreground: var(--foreground);
+	--color-card: var(--card);
+	--color-card-foreground: var(--card-foreground);
+	--color-popover: var(--popover);
+	--color-popover-foreground: var(--popover-foreground);
+	--color-primary: var(--primary);
+	--color-primary-foreground: var(--primary-foreground);
+	--color-secondary: var(--secondary);
+	--color-secondary-foreground: var(--secondary-foreground);
+	--color-muted: var(--muted);
+	--color-muted-foreground: var(--muted-foreground);
+	--color-accent: var(--accent);
+	--color-accent-foreground: var(--accent-foreground);
+	--color-destructive: var(--destructive);
+	--color-destructive-foreground: var(--destructive-foreground);
+	--color-border: var(--border);
+	--color-input: var(--input);
+	--color-ring: var(--ring);
+	--color-chart-1: var(--chart-1);
+	--color-chart-2: var(--chart-2);
+	--color-chart-3: var(--chart-3);
+	--color-chart-4: var(--chart-4);
+	--color-chart-5: var(--chart-5);
+	--color-table-header: var(--table-header);
+}
+
+@layer utilities {
+	/* Fonts */
+	@supports (font-variation-settings: normal) {
+		:root {
+			font-family: Inter, InterVariable, sans-serif;
+		}
+	}
+	@font-face {
+		font-family: InterVariable;
+		font-style: normal;
+		font-weight: 100 900;
+		font-display: swap;
+		src: url("/static/InterVariable.woff2?v=4.0") format("woff2");
+	}
 }
 
 @layer base {
 	* {
-		@apply border-border;
+		@apply border-border outline-ring/50;
 		overflow-anchor: none;
 	}
 	body {
 		@apply bg-background text-foreground;
 	}
+	button {
+		cursor: pointer;
+	}
 }
 
-@layer utilities {
-	.link {
-		@apply text-primary font-medium underline-offset-4 hover:underline;
-	}
+@utility container {
+	@apply max-w-360 mx-auto px-4;
+}
+
+@utility link {
+	@apply text-primary font-medium underline-offset-4 hover:underline;
+}
+
+@utility ns-dialog {
 	/* New system dialog width */
-	.ns-dialog {
-		min-width: 30.3rem;
-	}
-	:where(:lang(zh), :lang(zh-CN), :lang(ko)) .ns-dialog {
+	min-width: 30.3rem;
+	:where(:lang(zh), :lang(zh-CN), :lang(ko)) & {
 		min-width: 27.9rem;
 	}
 }
 
 .recharts-tooltip-wrapper {
 	z-index: 1;
+	@apply tabular-nums;
 }
 
 .recharts-yAxis {

beszel/site/src/lib/alerts.ts

@@ -0,0 +1,171 @@
+import type { AlertInfo, AlertRecord } from "@/types"
+import type { RecordSubscription } from "pocketbase"
+import { $alerts } from "@/lib/stores"
+import { EthernetIcon } from "@/components/ui/icons"
+import { ServerIcon, CpuIcon, MemoryStickIcon, HardDriveIcon, ThermometerIcon, HourglassIcon } from "lucide-react"
+import { t } from "@lingui/core/macro"
+import { pb } from "./api"
+
+/** Alert info for each alert type */
+export const alertInfo: Record<string, AlertInfo> = {
+	Status: {
+		name: () => t`Status`,
+		unit: "",
+		icon: ServerIcon,
+		desc: () => t`Triggers when status switches between up and down`,
+		/** "for x minutes" is appended to desc when only one value */
+		singleDesc: () => t`System` + " " + t`Down`,
+	},
+	CPU: {
+		name: () => t`CPU Usage`,
+		unit: "%",
+		icon: CpuIcon,
+		desc: () => t`Triggers when CPU usage exceeds a threshold`,
+	},
+	Memory: {
+		name: () => t`Memory Usage`,
+		unit: "%",
+		icon: MemoryStickIcon,
+		desc: () => t`Triggers when memory usage exceeds a threshold`,
+	},
+	Disk: {
+		name: () => t`Disk Usage`,
+		unit: "%",
+		icon: HardDriveIcon,
+		desc: () => t`Triggers when usage of any disk exceeds a threshold`,
+	},
+	Bandwidth: {
+		name: () => t`Bandwidth`,
+		unit: " MB/s",
+		icon: EthernetIcon,
+		desc: () => t`Triggers when combined up/down exceeds a threshold`,
+		max: 125,
+	},
+	Temperature: {
+		name: () => t`Temperature`,
+		unit: "°C",
+		icon: ThermometerIcon,
+		desc: () => t`Triggers when any sensor exceeds a threshold`,
+	},
+	LoadAvg1: {
+		name: () => t`Load Average 1m`,
+		unit: "",
+		icon: HourglassIcon,
+		max: 100,
+		min: 0.1,
+		start: 10,
+		step: 0.1,
+		desc: () => t`Triggers when 1 minute load average exceeds a threshold`,
+	},
+	LoadAvg5: {
+		name: () => t`Load Average 5m`,
+		unit: "",
+		icon: HourglassIcon,
+		max: 100,
+		min: 0.1,
+		start: 10,
+		step: 0.1,
+		desc: () => t`Triggers when 5 minute load average exceeds a threshold`,
+	},
+	LoadAvg15: {
+		name: () => t`Load Average 15m`,
+		unit: "",
+		icon: HourglassIcon,
+		min: 0.1,
+		max: 100,
+		start: 10,
+		step: 0.1,
+		desc: () => t`Triggers when 15 minute load average exceeds a threshold`,
+	},
+} as const
+
+/** Helper to manage user alerts */
+export const alertManager = (() => {
+	const collection = pb.collection<AlertRecord>("alerts")
+	let unsub: () => void
+
+	/** Fields to fetch from alerts collection */
+	const fields = "id,name,system,value,min,triggered"
+
+	/** Fetch alerts from collection */
+	async function fetchAlerts(): Promise<AlertRecord[]> {
+		return await collection.getFullList<AlertRecord>({ fields, sort: "updated" })
+	}
+
+	/** Format alerts into a map of system id to alert name to alert record */
+	function add(alerts: AlertRecord[]) {
+		for (const alert of alerts) {
+			const systemId = alert.system
+			const systemAlerts = $alerts.get()[systemId] ?? new Map()
+			const newAlerts = new Map(systemAlerts)
+			newAlerts.set(alert.name, alert)
+			$alerts.setKey(systemId, newAlerts)
+		}
+	}
+
+	function remove(alerts: Pick<AlertRecord, "name" | "system">[]) {
+		for (const alert of alerts) {
+			const systemId = alert.system
+			const systemAlerts = $alerts.get()[systemId]
+			const newAlerts = new Map(systemAlerts)
+			newAlerts.delete(alert.name)
+			$alerts.setKey(systemId, newAlerts)
+		}
+	}
+
+	const actionFns = {
+		create: add,
+		update: add,
+		delete: remove,
+	}
+
+	// batch alert updates to prevent unnecessary re-renders when adding many alerts at once
+	const batchUpdate = (() => {
+		const batch = new Map<string, RecordSubscription<AlertRecord>>()
+		let timeout: ReturnType<typeof setTimeout>
+
+		return (data: RecordSubscription<AlertRecord>) => {
+			const { record } = data
+			batch.set(`${record.system}${record.name}`, data)
+			clearTimeout(timeout!)
+			timeout = setTimeout(() => {
+				const groups = { create: [], update: [], delete: [] } as Record<string, AlertRecord[]>
+				for (const { action, record } of batch.values()) {
+					groups[action]?.push(record)
+				}
+				for (const key in groups) {
+					if (groups[key].length) {
+						actionFns[key as keyof typeof actionFns]?.(groups[key])
+					}
+				}
+				batch.clear()
+			}, 50)
+		}
+	})()
+
+	async function subscribe() {
+		unsub = await collection.subscribe("*", batchUpdate, { fields })
+	}
+
+	function unsubscribe() {
+		unsub?.()
+	}
+
+	async function refresh() {
+		const records = await fetchAlerts()
+		add(records)
+	}
+
+	return {
+		/** Add alerts to store */
+		add,
+		/** Remove alerts from store */
+		remove,
+		/** Subscribe to alerts */
+		subscribe,
+		/** Unsubscribe from alerts */
+		unsubscribe,
+		/** Refresh alerts with latest data from hub */
+		refresh,
+	}
+})()

beszel/site/src/lib/api.ts

@@ -0,0 +1,136 @@
+import { ChartTimes, SystemRecord, UserSettings } from "@/types"
+import { $alerts, $longestSystemNameLen, $systems, $userSettings } from "./stores"
+import { toast } from "@/components/ui/use-toast"
+import { t } from "@lingui/core/macro"
+import { chartTimeData } from "./utils"
+import { WritableAtom } from "nanostores"
+import { RecordModel, RecordSubscription } from "pocketbase"
+import PocketBase from "pocketbase"
+import { basePath } from "@/components/router"
+
+/** PocketBase JS Client */
+export const pb = new PocketBase(basePath)
+
+export const isAdmin = () => pb.authStore.record?.role === "admin"
+export const isReadOnlyUser = () => pb.authStore.record?.role === "readonly"
+
+const verifyAuth = () => {
+	pb.collection("users")
+		.authRefresh()
+		.catch(() => {
+			logOut()
+			toast({
+				title: t`Failed to authenticate`,
+				description: t`Please log in again`,
+				variant: "destructive",
+			})
+		})
+}
+
+/** Logs the user out by clearing the auth store and unsubscribing from realtime updates. */
+export async function logOut() {
+	$systems.set([])
+	$alerts.set({})
+	$userSettings.set({} as UserSettings)
+	sessionStorage.setItem("lo", "t") // prevent auto login on logout
+	pb.authStore.clear()
+	pb.realtime.unsubscribe()
+}
+
+/** Fetch or create user settings in database */
+export async function updateUserSettings() {
+	try {
+		const req = await pb.collection("user_settings").getFirstListItem("", { fields: "settings" })
+		$userSettings.set(req.settings)
+		return
+	} catch (e) {
+		console.error("get settings", e)
+	}
+	// create user settings if error fetching existing
+	try {
+		const createdSettings = await pb.collection("user_settings").create({ user: pb.authStore.record!.id })
+		$userSettings.set(createdSettings.settings)
+	} catch (e) {
+		console.error("create settings", e)
+	}
+}
+/** Update systems / alerts list when records change  */
+export function updateRecordList<T extends RecordModel>(e: RecordSubscription<T>, $store: WritableAtom<T[]>) {
+	const curRecords = $store.get()
+	const newRecords = []
+	if (e.action === "delete") {
+		for (const server of curRecords) {
+			if (server.id !== e.record.id) {
+				newRecords.push(server)
+			}
+		}
+	} else {
+		let found = 0
+		for (const server of curRecords) {
+			if (server.id === e.record.id) {
+				found = newRecords.push(e.record)
+			} else {
+				newRecords.push(server)
+			}
+		}
+		if (!found) {
+			newRecords.push(e.record)
+		}
+	}
+	$store.set(newRecords)
+}
+/** Fetches updated system list from database */
+export const updateSystemList = (() => {
+	let isFetchingSystems = false
+	return async () => {
+		if (isFetchingSystems) {
+			return
+		}
+		isFetchingSystems = true
+		try {
+			let records = await pb
+				.collection<SystemRecord>("systems")
+				.getFullList({ sort: "+name", fields: "id,name,host,port,info,status" })
+
+			if (records.length) {
+				// records = [
+				// 	...records,
+				// 	...records,
+				// 	...records,
+				// 	...records,
+				// 	...records,
+				// 	...records,
+				// 	...records,
+				// 	...records,
+				// 	...records,
+				// ]
+				// we need to loop once to get the longest name
+				let longestName = $longestSystemNameLen.get()
+				for (const { name } of records) {
+					const nameLen = Math.min(20, name.length)
+					if (nameLen > longestName) {
+						$longestSystemNameLen.set(nameLen)
+						longestName = nameLen
+					}
+				}
+				$systems.set(records)
+			} else {
+				verifyAuth()
+			}
+		} finally {
+			isFetchingSystems = false
+		}
+	}
+})()
+
+export function getPbTimestamp(timeString: ChartTimes, d?: Date) {
+	d ||= chartTimeData[timeString].getOffset(new Date())
+	const year = d.getUTCFullYear()
+	const month = String(d.getUTCMonth() + 1).padStart(2, "0")
+	const day = String(d.getUTCDate()).padStart(2, "0")
+	const hours = String(d.getUTCHours()).padStart(2, "0")
+	const minutes = String(d.getUTCMinutes()).padStart(2, "0")
+	const seconds = String(d.getUTCSeconds()).padStart(2, "0")
+
+	return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
+}

beszel/site/src/lib/enums.ts

@@ -21,3 +21,28 @@ export enum Unit {
 	Celsius,
 	Fahrenheit,
 }
+
+/** Meter state for color */
+export enum MeterState {
+	Good,
+	Warn,
+	Crit,
+}
+
+/** System status states */
+export enum SystemStatus {
+	Up = "up",
+	Down = "down",
+	Pending = "pending",
+	Paused = "paused",
+}
+
+/** Battery state */
+export enum BatteryState {
+	Unknown,
+	Empty,
+	Full,
+	Charging,
+	Discharging,
+	Idle,
+}

beszel/site/src/lib/i18n.ts

@@ -4,6 +4,8 @@ import type { Messages } from "@lingui/core"
 import languages from "@/lib/languages"
 import { detect, fromStorage, fromNavigator } from "@lingui/detect-locale"
 import { messages as enMessages } from "@/locales/en/en"
+import { BatteryState } from "./enums"
+import { t } from "@lingui/core/macro"
 
 // activates locale
 function activateLocale(locale: string, messages: Messages = enMessages) {
@@ -54,3 +56,14 @@ export function getLocale() {
 	}
 	return locale
 }
+
+////////////////////////////////////////////////////////
+
+export const batteryStateTranslations = {
+	[BatteryState.Unknown]: () => t({ message: "Unknown", comment: "Context: Battery state" }),
+	[BatteryState.Empty]: () => t({ message: "Empty", comment: "Context: Battery state" }),
+	[BatteryState.Full]: () => t({ message: "Full", comment: "Context: Battery state" }),
+	[BatteryState.Charging]: () => t({ message: "Charging", comment: "Context: Battery state" }),
+	[BatteryState.Discharging]: () => t({ message: "Discharging", comment: "Context: Battery state" }),
+	[BatteryState.Idle]: () => t({ message: "Idle", comment: "Context: Battery state" }),
+} as const

beszel/site/src/lib/stores.ts

@@ -1,46 +1,46 @@
-import PocketBase from "pocketbase"
-import { atom, map, PreinitializedWritableAtom } from "nanostores"
-import { AlertRecord, ChartTimes, SystemRecord, UserSettings } from "@/types"
-import { basePath } from "@/components/router"
-
-/** PocketBase JS Client */
-export const pb = new PocketBase(basePath)
+import { atom, map } from "nanostores"
+import { AlertMap, ChartTimes, SystemRecord, UserSettings } from "@/types"
+import { Unit } from "./enums"
+import { pb } from "./api"
 
 /** Store if user is authenticated */
 export const $authenticated = atom(pb.authStore.isValid)
 
 /** List of system records */
-export const $systems = atom([] as SystemRecord[])
+export const $systems = atom<SystemRecord[]>([])
 
-/** List of alert records */
-export const $alerts = atom([] as AlertRecord[])
+/** Map of alert records by system id and alert name */
+export const $alerts = map<AlertMap>({})
 
 /** SSH public key */
 export const $publicKey = atom("")
 
 /** Chart time period */
-export const $chartTime = atom("1h") as PreinitializedWritableAtom<ChartTimes>
+export const $chartTime = atom<ChartTimes>("1h")
 
 /** Whether to display average or max chart values */
 export const $maxValues = atom(false)
 
+// export const UserSettingsSchema = v.object({
+// 	chartTime: v.picklist(["1h", "12h", "24h", "1w", "30d"]),
+// 	emails: v.optional(v.array(v.pipe(v.string(), v.email())), [pb?.authStore?.record?.email ?? ""]),
+// 	webhooks: v.optional(v.array(v.string())),
+// 	colorWarn: v.optional(v.pipe(v.number(), v.minValue(1), v.maxValue(100))),
+// 	colorDanger: v.optional(v.pipe(v.number(), v.minValue(1), v.maxValue(100))),
+// 	unitTemp: v.optional(v.enum(Unit)),
+// 	unitNet: v.optional(v.enum(Unit)),
+// 	unitDisk: v.optional(v.enum(Unit)),
+// })
+
 /** User settings */
 export const $userSettings = map<UserSettings>({
 	chartTime: "1h",
 	emails: [pb.authStore.record?.email || ""],
-	meterThresholds: {
-		yellow: 65,
-		red: 90,
-	},
-	// unitTemp: "celsius",
-	// unitNet: "mbps",
-	// unitDisk: "mbps",
-})
-// update local storage on change
-$userSettings.subscribe((value) => {
-	// console.log('user settings changed', value)
-	$chartTime.set(value.chartTime)
+	unitNet: Unit.Bytes,
+	unitTemp: Unit.Celsius,
 })
+// update chart time on change
+$userSettings.subscribe((value) => $chartTime.set(value.chartTime))
 
 /** Container chart filter */
 export const $containerFilter = atom("")
@@ -53,3 +53,8 @@ export const $copyContent = atom("")
 
 /** Direction for localization */
 export const $direction = atom<"ltr" | "rtl">("ltr")
+
+/** Longest system name length. Used to set table column width. I know this
+ *  is stupid but the table is virtualized and I know this will work.
+ */
+export const $longestSystemNameLen = atom(8)

beszel/site/src/lib/use-intersection-observer.ts

@@ -84,7 +84,7 @@ export function useIntersectionObserver({
 		entry: undefined,
 	}))
 
-	const callbackRef = useRef<UseIntersectionObserverOptions["onChange"]>()
+	const callbackRef = useRef<UseIntersectionObserverOptions["onChange"]>(undefined)
 
 	callbackRef.current = onChange
 

beszel/site/src/lib/utils.ts

@@ -2,25 +2,12 @@ import { t } from "@lingui/core/macro"
 import { toast } from "@/components/ui/use-toast"
 import { type ClassValue, clsx } from "clsx"
 import { twMerge } from "tailwind-merge"
-import { $alerts, $copyContent, $systems, $userSettings, pb } from "./stores"
-import {
-	AlertInfo,
-	AlertRecord,
-	ChartTimeData,
-	ChartTimes,
-	FingerprintRecord,
-	SemVer,
-	SystemRecord,
-	UserSettings,
-} from "@/types"
-import { RecordModel, RecordSubscription } from "pocketbase"
-import { WritableAtom } from "nanostores"
+import { $copyContent, $systems, $userSettings } from "./stores"
+import type { ChartTimeData, FingerprintRecord, SemVer, SystemRecord } from "@/types"
 import { timeDay, timeHour } from "d3-time"
 import { useEffect, useState } from "react"
-import { CpuIcon, HardDriveIcon, MemoryStickIcon, ServerIcon } from "lucide-react"
-import { EthernetIcon, HourglassIcon, ThermometerIcon } from "@/components/ui/icons"
+import { MeterState, Unit } from "./enums"
 import { prependBasePath } from "@/components/router"
-import { Unit } from "./enums"
 
 export function cn(...inputs: ClassValue[]) {
 	return twMerge(clsx(inputs))
@@ -45,60 +32,6 @@ export async function copyToClipboard(content: string) {
 	}
 }
 
-const verifyAuth = () => {
-	pb.collection("users")
-		.authRefresh()
-		.catch(() => {
-			logOut()
-			toast({
-				title: t`Failed to authenticate`,
-				description: t`Please log in again`,
-				variant: "destructive",
-			})
-		})
-}
-
-export const updateSystemList = (() => {
-	let isFetchingSystems = false
-	return async () => {
-		if (isFetchingSystems) {
-			return
-		}
-		isFetchingSystems = true
-		try {
-			const records = await pb
-				.collection<SystemRecord>("systems")
-				.getFullList({ sort: "+name", fields: "id,name,host,port,info,status" })
-
-			if (records.length) {
-				$systems.set(records)
-			} else {
-				verifyAuth()
-			}
-		} finally {
-			isFetchingSystems = false
-		}
-	}
-})()
-
-/** Logs the user out by clearing the auth store and unsubscribing from realtime updates. */
-export async function logOut() {
-	$systems.set([])
-	$alerts.set([])
-	$userSettings.set({} as UserSettings)
-	sessionStorage.setItem("lo", "t") // prevent auto login on logout
-	pb.authStore.clear()
-	pb.realtime.unsubscribe()
-}
-
-export const updateAlerts = () => {
-	pb.collection("alerts")
-		.getFullList<AlertRecord>({ fields: "id,name,system,value,min,triggered", sort: "updated" })
-		.then((records) => {
-			$alerts.set(records)
-		})
-}
-
 const hourWithMinutesFormatter = new Intl.DateTimeFormat(undefined, {
 	hour: "numeric",
 	minute: "numeric",
@@ -129,47 +62,6 @@ export const updateFavicon = (newIcon: string) => {
 	;(document.querySelector("link[rel='icon']") as HTMLLinkElement).href = prependBasePath(`/static/${newIcon}`)
 }
 
-export const isAdmin = () => pb.authStore.record?.role === "admin"
-export const isReadOnlyUser = () => pb.authStore.record?.role === "readonly"
-
-/** Update systems / alerts list when records change  */
-export function updateRecordList<T extends RecordModel>(e: RecordSubscription<T>, $store: WritableAtom<T[]>) {
-	const curRecords = $store.get()
-	const newRecords = []
-	if (e.action === "delete") {
-		for (const server of curRecords) {
-			if (server.id !== e.record.id) {
-				newRecords.push(server)
-			}
-		}
-	} else {
-		let found = 0
-		for (const server of curRecords) {
-			if (server.id === e.record.id) {
-				found = newRecords.push(e.record)
-			} else {
-				newRecords.push(server)
-			}
-		}
-		if (!found) {
-			newRecords.push(e.record)
-		}
-	}
-	$store.set(newRecords)
-}
-
-export function getPbTimestamp(timeString: ChartTimes, d?: Date) {
-	d ||= chartTimeData[timeString].getOffset(new Date())
-	const year = d.getUTCFullYear()
-	const month = String(d.getUTCMonth() + 1).padStart(2, "0")
-	const day = String(d.getUTCDate()).padStart(2, "0")
-	const hours = String(d.getUTCHours()).padStart(2, "0")
-	const minutes = String(d.getUTCMinutes()).padStart(2, "0")
-	const seconds = String(d.getUTCSeconds()).padStart(2, "0")
-
-	return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
-}
-
 export const chartTimeData: ChartTimeData = {
 	"1h": {
 		type: "1m",
@@ -348,99 +240,8 @@ export function formatBytes(
 	}
 }
 
-/** Fetch or create user settings in database */
-export async function updateUserSettings() {
-	try {
-		const req = await pb.collection("user_settings").getFirstListItem("", { fields: "settings" })
-		$userSettings.set(req.settings)
-		return
-	} catch (e) {
-		console.error("get settings", e)
-	}
-	// create user settings if error fetching existing
-	try {
-		const createdSettings = await pb.collection("user_settings").create({ user: pb.authStore.record!.id })
-		$userSettings.set(createdSettings.settings)
-	} catch (e) {
-		console.error("create settings", e)
-	}
-}
-
 export const chartMargin = { top: 12 }
 
-/** Alert info for each alert type */
-export const alertInfo: Record<string, AlertInfo> = {
-	Status: {
-		name: () => t`Status`,
-		unit: "",
-		icon: ServerIcon,
-		desc: () => t`Triggers when status switches between up and down`,
-		/** "for x minutes" is appended to desc when only one value */
-		singleDesc: () => t`System` + " " + t`Down`,
-	},
-	CPU: {
-		name: () => t`CPU Usage`,
-		unit: "%",
-		icon: CpuIcon,
-		desc: () => t`Triggers when CPU usage exceeds a threshold`,
-	},
-	Memory: {
-		name: () => t`Memory Usage`,
-		unit: "%",
-		icon: MemoryStickIcon,
-		desc: () => t`Triggers when memory usage exceeds a threshold`,
-	},
-	Disk: {
-		name: () => t`Disk Usage`,
-		unit: "%",
-		icon: HardDriveIcon,
-		desc: () => t`Triggers when usage of any disk exceeds a threshold`,
-	},
-	Bandwidth: {
-		name: () => t`Bandwidth`,
-		unit: " MB/s",
-		icon: EthernetIcon,
-		desc: () => t`Triggers when combined up/down exceeds a threshold`,
-		max: 125,
-	},
-	Temperature: {
-		name: () => t`Temperature`,
-		unit: "°C",
-		icon: ThermometerIcon,
-		desc: () => t`Triggers when any sensor exceeds a threshold`,
-	},
-	LoadAvg1: {
-		name: () => t`Load Average 1m`,
-		unit: "",
-		icon: HourglassIcon,
-		max: 100,
-		min: 0.1,
-		start: 10,
-		step: 0.1,
-		desc: () => t`Triggers when 1 minute load average exceeds a threshold`,
-	},
-	LoadAvg5: {
-		name: () => t`Load Average 5m`,
-		unit: "",
-		icon: HourglassIcon,
-		max: 100,
-		min: 0.1,
-		start: 10,
-		step: 0.1,
-		desc: () => t`Triggers when 5 minute load average exceeds a threshold`,
-	},
-	LoadAvg15: {
-		name: () => t`Load Average 15m`,
-		unit: "",
-		icon: HourglassIcon,
-		min: 0.1,
-		max: 100,
-		start: 10,
-		step: 0.1,
-		desc: () => t`Triggers when 15 minute load average exceeds a threshold`,
-	},
-}
-
 /**
  * Retuns value of system host, truncating full path if socket.
  * @example
@@ -449,8 +250,29 @@ export const alertInfo: Record<string, AlertInfo> = {
  */
 export const getHostDisplayValue = (system: SystemRecord): string => system.host.slice(system.host.lastIndexOf("/") + 1)
 
+// export function formatUptimeString(uptimeSeconds: number): string {
+// 	if (!uptimeSeconds || isNaN(uptimeSeconds)) return ""
+// 	if (uptimeSeconds < 3600) {
+// 		const minutes = Math.trunc(uptimeSeconds / 60)
+// 		return plural({ minutes }, { one: "# minute", other: "# minutes" })
+// 	} else if (uptimeSeconds < 172800) {
+// 		const hours = Math.trunc(uptimeSeconds / 3600)
+// 		console.log(hours)
+// 		return plural({ hours }, { one: "# hour", other: "# hours" })
+// 	} else {
+// 		const days = Math.trunc(uptimeSeconds / 86400)
+// 		return plural({ days }, { one: "# day", other: "# days" })
+// 	}
+// }
+
 /** Generate a random token for the agent */
-export const generateToken = () => crypto?.randomUUID() ?? (performance.now() * Math.random()).toString(16)
+export const generateToken = () => {
+	try {
+		return crypto?.randomUUID()
+	} catch (e) {
+		return Array.from({ length: 2 }, () => (performance.now() * Math.random()).toString(16).replace(".", "-")).join("-")
+	}
+}
 
 /** Get the hub URL from the global BESZEL object */
 export const getHubURL = () => BESZEL?.HUB_URL || window.location.origin
@@ -507,3 +329,43 @@ export const parseSemVer = (semVer = ""): SemVer => {
 	const parts = semVer.split(".").map(Number)
 	return { major: parts?.[0] ?? 0, minor: parts?.[1] ?? 0, patch: parts?.[2] ?? 0 }
 }
+
+/** Get meter state from 0-100 value. Used for color coding meters. */
+export function getMeterState(value: number): MeterState {
+	const { colorWarn = 65, colorCrit = 90 } = $userSettings.get()
+	return value >= colorCrit ? MeterState.Crit : value >= colorWarn ? MeterState.Warn : MeterState.Good
+}
+
+export function debounce<T extends (...args: any[]) => any>(func: T, wait: number): (...args: Parameters<T>) => void {
+	let timeout: ReturnType<typeof setTimeout>
+	return (...args: Parameters<T>) => {
+		clearTimeout(timeout)
+		timeout = setTimeout(() => func(...args), wait)
+	}
+}
+
+/* returns the name of a system from its id */
+export const getSystemNameFromId = (() => {
+	const cache = new Map<string, string>()
+	return (systemId: string): string => {
+		if (cache.has(systemId)) {
+			return cache.get(systemId)!
+		}
+		const sysName = $systems.get().find((s) => s.id === systemId)?.name ?? ""
+		cache.set(systemId, sysName)
+		return sysName
+	}
+})()
+
+/** Run a function only once */
+export function runOnce<T extends (...args: any[]) => any>(fn: T): (...args: Parameters<T>) => ReturnType<T> {
+	let done = false
+	let result: any
+	return (...args: any) => {
+		if (!done) {
+			result = fn(...args)
+			done = true
+		}
+		return result
+	}
+}

beszel/site/src/locales/ar/ar.po

@@ -8,7 +8,7 @@ msgstr ""
 "Language: ar\n"
 "Project-Id-Version: beszel\n"
 "Report-Msgid-Bugs-To: \n"
-"PO-Revision-Date: 2025-07-25 22:44\n"
+"PO-Revision-Date: 2025-08-25 01:15\n"
 "Last-Translator: \n"
 "Language-Team: Arabic\n"
 "Plural-Forms: nplurals=6; plural=(n==0 ? 0 : n==1 ? 1 : n==2 ? 2 : n%100>=3 && n%100<=10 ? 3 : n%100>=11 && n%100<=99 ? 4 : 5);\n"
@@ -33,6 +33,10 @@ msgstr "تم تحديد {0} من {1} صف"
 msgid "{hours, plural, one {# hour} other {# hours}}"
 msgstr "{hours, plural, one {# ساعة} other {# ساعات}}"
 
+#: src/components/routes/system.tsx
+msgid "{mins, plural, one {# minute} other {# minutes}}"
+msgstr ""
+
 #: src/lib/utils.ts
 msgid "1 hour"
 msgstr "1 ساعة"
@@ -69,8 +73,8 @@ msgid "5 min"
 msgstr "5 دقائق"
 
 #. Table column
-#: src/components/systems-table/systems-table.tsx
 #: src/components/routes/settings/tokens-fingerprints.tsx
+#: src/components/systems-table/systems-table-columns.tsx
 msgid "Actions"
 msgstr "إجراءات"
 
@@ -108,27 +112,28 @@ msgstr "تعديل خيارات العرض للرسوم البيانية."
 msgid "Admin"
 msgstr "مسؤول"
 
-#: src/components/systems-table/systems-table.tsx
+#: src/components/systems-table/systems-table-columns.tsx
 msgid "Agent"
 msgstr "وكيل"
 
 #: src/components/command-palette.tsx
-#: src/components/routes/settings/layout.tsx
 #: src/components/routes/settings/alerts-history-data-table.tsx
+#: src/components/routes/settings/layout.tsx
 msgid "Alert History"
 msgstr "سجل التنبيهات"
 
 #: src/components/alerts/alert-button.tsx
-#: src/components/alerts/alert-button.tsx
+#: src/components/alerts/alerts-sheet.tsx
 msgid "Alerts"
 msgstr "التنبيهات"
 
+#: src/components/alerts/alerts-sheet.tsx
+#: src/components/systems-table/systems-table.tsx
 #: src/components/systems-table/systems-table.tsx
-#: src/components/alerts/alert-button.tsx
 msgid "All Systems"
 msgstr "جميع الأنظمة"
 
-#: src/components/systems-table/systems-table.tsx
+#: src/components/systems-table/systems-table-columns.tsx
 msgid "Are you sure you want to delete {name}?"
 msgstr "هل أنت متأكد أنك تريد حذف {name}؟"
 
@@ -148,8 +153,8 @@ msgstr "متوسط"
 msgid "Average CPU utilization of containers"
 msgstr "متوسط استخدام وحدة المعالجة المركزية للحاويات"
 
-#. placeholder {0}: data.alert.unit
-#: src/components/alerts/alerts-system.tsx
+#. placeholder {0}: alertData.unit
+#: src/components/alerts/alerts-sheet.tsx
 msgid "Average exceeds <0>{value}{0}</0>"
 msgstr "المتوسط يتجاوز <0>{value}{0}</0>"
 
@@ -166,16 +171,20 @@ msgstr "متوسط استخدام وحدة المعالجة المركزية ع
 msgid "Average utilization of {0}"
 msgstr "متوسط ​​استخدام {0}"
 
-#: src/components/navbar.tsx
 #: src/components/command-palette.tsx
+#: src/components/navbar.tsx
 msgid "Backups"
 msgstr "النسخ الاحتياطية"
 
-#: src/lib/utils.ts
 #: src/components/routes/system.tsx
+#: src/lib/alerts.ts
 msgid "Bandwidth"
 msgstr "عرض النطاق الترددي"
 
+#: src/components/routes/system.tsx
+msgid "Battery"
+msgstr "البطارية"
+
 #: src/components/login/auth-form.tsx
 msgid "Beszel supports OpenID Connect and many OAuth2 authentication providers."
 msgstr "يدعم بيزيل بروتوكول OpenID Connect والعديد من مزوّدي المصادقة عبر بروتوكول OAuth2."
@@ -202,8 +211,8 @@ msgstr "بايت (كيلوبايت/ثانية، ميجابايت/ثانية، ج
 msgid "Cache / Buffers"
 msgstr "ذاكرة التخزين المؤقت / المخازن المؤقتة"
 
-#: src/components/systems-table/systems-table.tsx
 #: src/components/routes/settings/alerts-history-data-table.tsx
+#: src/components/systems-table/systems-table-columns.tsx
 msgid "Cancel"
 msgstr "إلغاء"
 
@@ -223,6 +232,15 @@ msgstr "تغيير وحدات عرض المقاييس."
 msgid "Change general application options."
 msgstr "تغيير خيارات التطبيق العامة."
 
+#: src/components/routes/system.tsx
+msgid "Charge"
+msgstr "الشحن"
+
+#. Context: Battery state
+#: src/lib/i18n.ts
+msgid "Charging"
+msgstr "قيد الشحن"
+
 #: src/components/routes/settings/general.tsx
 msgid "Chart options"
 msgstr "خيارات الرسم البياني"
@@ -261,8 +279,8 @@ msgstr "تأكيد كلمة المرور"
 msgid "Connection is down"
 msgstr "الاتصال مقطوع"
 
-#: src/components/systems-table/systems-table.tsx
 #: src/components/routes/settings/alerts-history-data-table.tsx
+#: src/components/systems-table/systems-table-columns.tsx
 msgid "Continue"
 msgstr "متابعة"
 
@@ -287,7 +305,7 @@ msgctxt "Environment variables"
 msgid "Copy env"
 msgstr "نسخ متغيرات البيئة"
 
-#: src/components/systems-table/systems-table.tsx
+#: src/components/systems-table/systems-table-columns.tsx
 msgid "Copy host"
 msgstr "نسخ المضيف"
 
@@ -296,7 +314,7 @@ msgstr "نسخ المضيف"
 msgid "Copy Linux command"
 msgstr "نسخ أمر لينكس"
 
-#: src/components/systems-table/systems-table.tsx
+#: src/components/systems-table/systems-table-columns.tsx
 msgid "Copy name"
 msgstr "نسخ الاسم"
 
@@ -316,13 +334,13 @@ msgstr "انسخ محتوى <0>docker-compose.yml</0> للوكيل أدناه،
 msgid "Copy YAML"
 msgstr "نسخ YAML"
 
-#: src/components/systems-table/systems-table.tsx
+#: src/components/systems-table/systems-table-columns.tsx
 msgid "CPU"
 msgstr "المعالج"
 
-#: src/lib/utils.ts
 #: src/components/routes/system.tsx
 #: src/components/routes/system.tsx
+#: src/lib/alerts.ts
 msgid "CPU Usage"
 msgstr "استخدام وحدة المعالجة المركزية"
 
@@ -335,10 +353,14 @@ msgstr "إنشاء حساب"
 msgid "Created"
 msgstr "أنشئت"
 
-#. Dark theme
-#: src/components/mode-toggle.tsx
-msgid "Dark"
-msgstr "داكن"
+#: src/components/routes/settings/general.tsx
+msgid "Critical (%)"
+msgstr "حرج (%)"
+
+#. Context: Battery state
+#: src/components/routes/system.tsx
+msgid "Current state"
+msgstr "الحالة الحالية"
 
 #: src/components/command-palette.tsx
 #: src/components/routes/home.tsx
@@ -349,8 +371,8 @@ msgstr "لوحة التحكم"
 msgid "Default time period"
 msgstr "الفترة الزمنية الافتراضية"
 
-#: src/components/systems-table/systems-table.tsx
 #: src/components/routes/settings/alerts-history-data-table.tsx
+#: src/components/systems-table/systems-table-columns.tsx
 msgid "Delete"
 msgstr "حذف"
 
@@ -358,7 +380,12 @@ msgstr "حذف"
 msgid "Delete fingerprint"
 msgstr "حذف البصمة"
 
-#: src/components/systems-table/systems-table.tsx
+#. Context: Battery state
+#: src/lib/i18n.ts
+msgid "Discharging"
+msgstr "قيد التفريغ"
+
+#: src/components/systems-table/systems-table-columns.tsx
 msgid "Disk"
 msgstr "القرص"
 
@@ -370,9 +397,9 @@ msgstr "إدخال/إخراج القرص"
 msgid "Disk unit"
 msgstr "وحدة القرص"
 
-#: src/lib/utils.ts
-#: src/components/routes/system.tsx
 #: src/components/charts/disk-chart.tsx
+#: src/components/routes/system.tsx
+#: src/lib/alerts.ts
 msgid "Disk Usage"
 msgstr "استخدام القرص"
 
@@ -397,10 +424,11 @@ msgid "Documentation"
 msgstr "التوثيق"
 
 #. Context: System is down
-#: src/lib/utils.ts
 #: src/components/alerts-history-columns.tsx
-#: src/components/systems-table/systems-table.tsx
 #: src/components/routes/system.tsx
+#: src/components/systems-table/systems-table-columns.tsx
+#: src/components/systems-table/systems-table.tsx
+#: src/lib/alerts.ts
 msgid "Down"
 msgstr "معطل"
 
@@ -409,12 +437,12 @@ msgid "Duration"
 msgstr "المدة"
 
 #: src/components/add-system.tsx
-#: src/components/systems-table/systems-table.tsx
+#: src/components/systems-table/systems-table-columns.tsx
 msgid "Edit"
 msgstr "تعديل"
 
-#: src/components/login/forgot-pass-form.tsx
 #: src/components/login/auth-form.tsx
+#: src/components/login/forgot-pass-form.tsx
 msgid "Email"
 msgstr "البريد الإشباكي"
 
@@ -422,6 +450,11 @@ msgstr "البريد الإشباكي"
 msgid "Email notifications"
 msgstr "إشعارات البريد الإشباكي"
 
+#. Context: Battery state
+#: src/lib/i18n.ts
+msgid "Empty"
+msgstr "فارغة"
+
 #: src/components/login/login.tsx
 msgid "Enter email address to reset password"
 msgstr "أدخل عنوان البريد الإشباكي لإعادة تعيين كلمة المرور"
@@ -430,11 +463,11 @@ msgstr "أدخل عنوان البريد الإشباكي لإعادة تعيي
 msgid "Enter email address..."
 msgstr "أدخل عنوان البريد الإشباكي..."
 
-#: src/components/routes/settings/tokens-fingerprints.tsx
-#: src/components/routes/settings/notifications.tsx
-#: src/components/routes/settings/config-yaml.tsx
-#: src/components/routes/settings/alerts-history-data-table.tsx
 #: src/components/login/auth-form.tsx
+#: src/components/routes/settings/alerts-history-data-table.tsx
+#: src/components/routes/settings/config-yaml.tsx
+#: src/components/routes/settings/notifications.tsx
+#: src/components/routes/settings/tokens-fingerprints.tsx
 msgid "Error"
 msgstr "خطأ"
 
@@ -465,12 +498,12 @@ msgstr "تصدير تكوين الأنظمة الحالية الخاصة بك."
 msgid "Fahrenheit (°F)"
 msgstr "فهرنهايت (°ف)"
 
-#: src/lib/utils.ts
+#: src/lib/api.ts
 msgid "Failed to authenticate"
 msgstr "فشل في المصادقة"
 
-#: src/components/routes/settings/notifications.tsx
 #: src/components/routes/settings/layout.tsx
+#: src/components/routes/settings/notifications.tsx
 msgid "Failed to save settings"
 msgstr "فشل في حفظ الإعدادات"
 
@@ -478,13 +511,13 @@ msgstr "فشل في حفظ الإعدادات"
 msgid "Failed to send test notification"
 msgstr "فشل في إرسال إشعار الاختبار"
 
-#: src/components/alerts/alerts-system.tsx
+#: src/components/alerts/alerts-sheet.tsx
 msgid "Failed to update alert"
 msgstr "فشل في تحديث التنبيه"
 
-#: src/components/systems-table/systems-table.tsx
-#: src/components/routes/system.tsx
 #: src/components/routes/settings/alerts-history-data-table.tsx
+#: src/components/routes/system.tsx
+#: src/components/systems-table/systems-table.tsx
 msgid "Filter..."
 msgstr "تصفية..."
 
@@ -492,7 +525,7 @@ msgstr "تصفية..."
 msgid "Fingerprint"
 msgstr "البصمة"
 
-#: src/components/alerts/alerts-system.tsx
+#: src/components/alerts/alerts-sheet.tsx
 msgid "For <0>{min}</0> {min, plural, one {minute} other {minutes}}"
 msgstr "لمدة <0>{min}</0> {min, plural, one {دقيقة} other {دقائق}}"
 
@@ -500,9 +533,14 @@ msgstr "لمدة <0>{min}</0> {min, plural, one {دقيقة} other {دقائق}}
 msgid "Forgot password?"
 msgstr "هل نسيت كلمة المرور؟"
 
+#. Context: Battery state
+#: src/lib/i18n.ts
+msgid "Full"
+msgstr "ممتلئة"
+
 #. Context: General settings
-#: src/components/routes/settings/layout.tsx
 #: src/components/routes/settings/general.tsx
+#: src/components/routes/settings/layout.tsx
 msgid "General"
 msgstr "عام"
 
@@ -524,6 +562,11 @@ msgstr "أمر Homebrew"
 msgid "Host / IP"
 msgstr "مضيف / IP"
 
+#. Context: Battery state
+#: src/lib/i18n.ts
+msgid "Idle"
+msgstr "خاملة"
+
 #: src/components/login/forgot-pass-form.tsx
 msgid "If you've lost the password to your admin account, you may reset it using the following command."
 msgstr "إذا فقدت كلمة المرور لحساب المسؤول الخاص بك، يمكنك إعادة تعيينها باستخدام الأمر التالي."
@@ -545,29 +588,24 @@ msgstr "اللغة"
 msgid "Layout"
 msgstr "التخطيط"
 
-#. Light theme
-#: src/components/mode-toggle.tsx
-msgid "Light"
-msgstr "فاتح"
-
 #: src/components/routes/system.tsx
 msgid "Load Average"
 msgstr "متوسط التحميل"
 
-#: src/lib/utils.ts
+#: src/lib/alerts.ts
 msgid "Load Average 15m"
 msgstr "متوسط التحميل 15 دقيقة"
 
-#: src/lib/utils.ts
+#: src/lib/alerts.ts
 msgid "Load Average 1m"
 msgstr "متوسط التحميل 1 دقيقة"
 
-#: src/lib/utils.ts
+#: src/lib/alerts.ts
 msgid "Load Average 5m"
 msgstr "متوسط التحميل 5 دقائق"
 
 #. Short label for load average
-#: src/components/systems-table/systems-table.tsx
+#: src/components/systems-table/systems-table-columns.tsx
 msgid "Load Avg"
 msgstr "متوسط التحميل"
 
@@ -579,13 +617,13 @@ msgstr "تسجيل الخروج"
 msgid "Login"
 msgstr "تسجيل الدخول"
 
-#: src/components/login/forgot-pass-form.tsx
 #: src/components/login/auth-form.tsx
+#: src/components/login/forgot-pass-form.tsx
 msgid "Login attempt failed"
 msgstr "فشل محاولة تسجيل الدخول"
 
-#: src/components/navbar.tsx
 #: src/components/command-palette.tsx
+#: src/components/navbar.tsx
 msgid "Logs"
 msgstr "السجلات"
 
@@ -606,12 +644,12 @@ msgstr "تعليمات الإعداد اليدوي"
 msgid "Max 1 min"
 msgstr "الحد الأقصى دقيقة"
 
-#: src/components/systems-table/systems-table.tsx
+#: src/components/systems-table/systems-table-columns.tsx
 msgid "Memory"
 msgstr "الذاكرة"
 
-#: src/lib/utils.ts
 #: src/components/routes/system.tsx
+#: src/lib/alerts.ts
 msgid "Memory Usage"
 msgstr "استخدام الذاكرة"
 
@@ -619,12 +657,12 @@ msgstr "استخدام الذاكرة"
 msgid "Memory usage of docker containers"
 msgstr "استخدام الذاكرة لحاويات دوكر"
 
-#: src/components/alerts-history-columns.tsx
 #: src/components/add-system.tsx
+#: src/components/alerts-history-columns.tsx
 msgid "Name"
 msgstr "الاسم"
 
-#: src/components/systems-table/systems-table.tsx
+#: src/components/systems-table/systems-table-columns.tsx
 msgid "Net"
 msgstr "الشبكة"
 
@@ -655,8 +693,8 @@ msgid "No systems found."
 msgstr "لم يتم العثور على أنظمة."
 
 #: src/components/command-palette.tsx
-#: src/components/routes/settings/notifications.tsx
 #: src/components/routes/settings/layout.tsx
+#: src/components/routes/settings/notifications.tsx
 msgid "Notifications"
 msgstr "الإشعارات"
 
@@ -668,9 +706,9 @@ msgstr "دعم OAuth 2 / OIDC"
 msgid "On each restart, systems in the database will be updated to match the systems defined in the file."
 msgstr "في كل إعادة تشغيل، سيتم تحديث الأنظمة في قاعدة البيانات لتتطابق مع الأنظمة المعرفة في الملف."
 
-#: src/components/systems-table/systems-table.tsx
 #: src/components/routes/settings/tokens-fingerprints.tsx
 #: src/components/routes/settings/tokens-fingerprints.tsx
+#: src/components/systems-table/systems-table-columns.tsx
 msgid "Open menu"
 msgstr "فتح القائمة"
 
@@ -678,7 +716,7 @@ msgstr "فتح القائمة"
 msgid "Or continue with"
 msgstr "أو المتابعة باستخدام"
 
-#: src/components/alerts/alert-button.tsx
+#: src/components/alerts/alerts-sheet.tsx
 msgid "Overwrite existing alerts"
 msgstr "الكتابة فوق التنبيهات الحالية"
 
@@ -713,10 +751,11 @@ msgstr "يجب أن تكون كلمة المرور أقل من 72 بايت."
 msgid "Password reset request received"
 msgstr "تم استلام طلب إعادة تعيين كلمة المرور"
 
-#: src/components/systems-table/systems-table.tsx
+#: src/components/systems-table/systems-table-columns.tsx
 msgid "Pause"
 msgstr "إيقاف مؤقت"
 
+#: src/components/systems-table/systems-table-columns.tsx
 #: src/components/systems-table/systems-table.tsx
 msgid "Paused"
 msgstr "متوقف مؤقتا"
@@ -725,12 +764,12 @@ msgstr "متوقف مؤقتا"
 msgid "Please <0>configure an SMTP server</0> to ensure alerts are delivered."
 msgstr "يرجى <0>تكوين خادم SMTP</0> لضمان تسليم التنبيهات."
 
-#: src/components/alerts/alerts-system.tsx
+#: src/components/alerts/alerts-sheet.tsx
 msgid "Please check logs for more details."
 msgstr "يرجى التحقق من السجلات لمزيد من التفاصيل."
 
-#: src/components/login/forgot-pass-form.tsx
 #: src/components/login/auth-form.tsx
+#: src/components/login/forgot-pass-form.tsx
 msgid "Please check your credentials and try again"
 msgstr "يرجى التحقق من بيانات الاعتماد الخاصة بك والمحاولة مرة أخرى"
 
@@ -742,7 +781,7 @@ msgstr "يرجى إنشاء حساب مسؤول"
 msgid "Please enable pop-ups for this site"
 msgstr "يرجى تمكين النوافذ المنبثقة لهذا الموقع"
 
-#: src/lib/utils.ts
+#: src/lib/api.ts
 msgid "Please log in again"
 msgstr "يرجى تسجيل الدخول مرة أخرى"
 
@@ -792,7 +831,7 @@ msgstr "إعادة تعيين كلمة المرور"
 msgid "Resolved"
 msgstr "تم حلها"
 
-#: src/components/systems-table/systems-table.tsx
+#: src/components/systems-table/systems-table-columns.tsx
 msgid "Resume"
 msgstr "استئناف"
 
@@ -808,8 +847,8 @@ msgstr "صفوف لكل صفحة"
 msgid "Save address using enter key or comma. Leave blank to disable email notifications."
 msgstr "احفظ العنوان باستخدام مفتاح الإدخال أو الفاصلة. اتركه فارغًا لتعطيل إشعارات البريد الإشباكي."
 
-#: src/components/routes/settings/notifications.tsx
 #: src/components/routes/settings/general.tsx
+#: src/components/routes/settings/notifications.tsx
 msgid "Save Settings"
 msgstr "حفظ الإعدادات"
 
@@ -825,7 +864,7 @@ msgstr "بحث"
 msgid "Search for systems or settings..."
 msgstr "البحث عن الأنظمة أو الإعدادات..."
 
-#: src/components/alerts/alert-button.tsx
+#: src/components/alerts/alerts-sheet.tsx
 msgid "See <0>notification settings</0> to configure how you receive alerts."
 msgstr "راجع <0>إعدادات الإشعارات</0> لتكوين كيفية تلقي التنبيهات."
 
@@ -833,6 +872,10 @@ msgstr "راجع <0>إعدادات الإشعارات</0> لتكوين كيفي
 msgid "Sent"
 msgstr "تم الإرسال"
 
+#: src/components/routes/settings/general.tsx
+msgid "Set percentage thresholds for meter colors."
+msgstr "تعيين عتبات النسبة المئوية لألوان العداد."
+
 #: src/components/routes/settings/general.tsx
 msgid "Sets the default time range for charts when a system is viewed."
 msgstr "يحدد النطاق الزمني الافتراضي للرسوم البيانية عند عرض النظام."
@@ -865,7 +908,8 @@ msgstr "الترتيب حسب"
 msgid "State"
 msgstr "الحالة"
 
-#: src/lib/utils.ts
+#: src/components/systems-table/systems-table.tsx
+#: src/lib/alerts.ts
 msgid "Status"
 msgstr "الحالة"
 
@@ -877,12 +921,10 @@ msgstr "مساحة التبديل المستخدمة من قبل النظام"
 msgid "Swap Usage"
 msgstr "استخدام التبديل"
 
-#. System theme
-#: src/lib/utils.ts
-#: src/components/mode-toggle.tsx
 #: src/components/alerts-history-columns.tsx
-#: src/components/systems-table/systems-table.tsx
 #: src/components/routes/settings/tokens-fingerprints.tsx
+#: src/components/systems-table/systems-table-columns.tsx
+#: src/lib/alerts.ts
 msgid "System"
 msgstr "النظام"
 
@@ -903,12 +945,12 @@ msgid "Table"
 msgstr "جدول"
 
 #. Temperature label in systems table
-#: src/components/systems-table/systems-table.tsx
+#: src/components/systems-table/systems-table-columns.tsx
 msgid "Temp"
 msgstr "درجة الحرارة"
 
-#: src/lib/utils.ts
 #: src/components/routes/system.tsx
+#: src/lib/alerts.ts
 msgid "Temperature"
 msgstr "درجة الحرارة"
 
@@ -932,7 +974,7 @@ msgstr "تم إرسال إشعار الاختبار"
 msgid "Then log into the backend and reset your user account password in the users table."
 msgstr "ثم قم بتسجيل الدخول إلى الواجهة الخلفية وأعد تعيين كلمة مرور حساب المستخدم الخاص بك في جدول المستخدمين."
 
-#: src/components/systems-table/systems-table.tsx
+#: src/components/systems-table/systems-table-columns.tsx
 msgid "This action cannot be undone. This will permanently delete all current records for {name} from the database."
 msgstr "لا يمكن التراجع عن هذا الإجراء. سيؤدي ذلك إلى حذف جميع السجلات الحالية لـ {name} من قاعدة البيانات بشكل دائم."
 
@@ -967,8 +1009,8 @@ msgid "Token"
 msgstr "رمز مميز"
 
 #: src/components/command-palette.tsx
-#: src/components/routes/settings/tokens-fingerprints.tsx
 #: src/components/routes/settings/layout.tsx
+#: src/components/routes/settings/tokens-fingerprints.tsx
 msgid "Tokens & Fingerprints"
 msgstr "الرموز المميزة والبصمات"
 
@@ -980,39 +1022,39 @@ msgstr "تسمح الرموز المميزة للوكلاء بالاتصال و
 msgid "Tokens and fingerprints are used to authenticate WebSocket connections to the hub."
 msgstr "تُستخدم الرموز المميزة والبصمات للمصادقة على اتصالات WebSocket إلى المحور."
 
-#: src/lib/utils.ts
+#: src/lib/alerts.ts
 msgid "Triggers when 1 minute load average exceeds a threshold"
 msgstr "يتم التفعيل عندما يتجاوز متوسط التحميل لمدة دقيقة واحدة عتبة معينة"
 
-#: src/lib/utils.ts
+#: src/lib/alerts.ts
 msgid "Triggers when 15 minute load average exceeds a threshold"
 msgstr "يتم التفعيل عندما يتجاوز متوسط التحميل لمدة 15 دقيقة عتبة معينة"
 
-#: src/lib/utils.ts
+#: src/lib/alerts.ts
 msgid "Triggers when 5 minute load average exceeds a threshold"
 msgstr "يتم التفعيل عندما يتجاوز متوسط التحميل لمدة 5 دقائق عتبة معينة"
 
-#: src/lib/utils.ts
+#: src/lib/alerts.ts
 msgid "Triggers when any sensor exceeds a threshold"
 msgstr "يتم التفعيل عندما <20><>تجاوز أي مستشعر عتبة معينة"
 
-#: src/lib/utils.ts
+#: src/lib/alerts.ts
 msgid "Triggers when combined up/down exceeds a threshold"
 msgstr "يتم التفعيل عندما يتجاوز الجمع بين الصعود/الهبوط عتبة معينة"
 
-#: src/lib/utils.ts
+#: src/lib/alerts.ts
 msgid "Triggers when CPU usage exceeds a threshold"
 msgstr "يتم التفعيل عندما يتجاوز استخدام وحدة المعالجة المركزية عتبة معينة"
 
-#: src/lib/utils.ts
+#: src/lib/alerts.ts
 msgid "Triggers when memory usage exceeds a threshold"
 msgstr "يتم التفعيل عندما يتجاوز استخدام الذاكرة عتبة معينة"
 
-#: src/lib/utils.ts
+#: src/lib/alerts.ts
 msgid "Triggers when status switches between up and down"
 msgstr "يتم التفعيل عندما يتغير الحالة بين التشغيل والإيقاف"
 
-#: src/lib/utils.ts
+#: src/lib/alerts.ts
 msgid "Triggers when usage of any disk exceeds a threshold"
 msgstr "يتم التفعيل عندما يتجاوز استخدام أي قرص عتبة معينة"
 
@@ -1025,9 +1067,15 @@ msgstr "تفضيلات الوحدة"
 msgid "Universal token"
 msgstr "رمز مميز عالمي"
 
+#. Context: Battery state
+#: src/lib/i18n.ts
+msgid "Unknown"
+msgstr "غير معروفة"
+
 #. Context: System is up
-#: src/components/systems-table/systems-table.tsx
 #: src/components/routes/system.tsx
+#: src/components/systems-table/systems-table-columns.tsx
+#: src/components/systems-table/systems-table.tsx
 msgid "Up"
 msgstr "قيد التشغيل"
 
@@ -1050,13 +1098,13 @@ msgstr "الاستخدام"
 msgid "Usage of root partition"
 msgstr "استخدام القسم الجذر"
 
-#: src/components/charts/swap-chart.tsx
 #: src/components/charts/mem-chart.tsx
+#: src/components/charts/swap-chart.tsx
 msgid "Used"
 msgstr "مستخدم"
 
-#: src/components/navbar.tsx
 #: src/components/command-palette.tsx
+#: src/components/navbar.tsx
 msgid "Users"
 msgstr "المستخدمون"
 
@@ -1084,6 +1132,14 @@ msgstr "في انتظار وجود سجلات كافية للعرض"
 msgid "Want to help improve our translations? Check <0>Crowdin</0> for details."
 msgstr "هل تريد مساعدتنا في تحسين ترجماتنا؟ تحقق من <0>Crowdin</0> لمزيد من التفاصيل."
 
+#: src/components/routes/settings/general.tsx
+msgid "Warning (%)"
+msgstr "تحذير (%)"
+
+#: src/components/routes/settings/general.tsx
+msgid "Warning thresholds"
+msgstr "عتبات التحذير"
+
 #: src/components/routes/settings/notifications.tsx
 msgid "Webhook / Push notifications"
 msgstr "إشعارات Webhook / Push"

beszel/site/src/locales/bg/bg.po

@@ -8,7 +8,7 @@ msgstr ""
 "Language: bg\n"
 "Project-Id-Version: beszel\n"
 "Report-Msgid-Bugs-To: \n"
-"PO-Revision-Date: 2025-07-25 22:44\n"
+"PO-Revision-Date: 2025-08-25 01:16\n"
 "Last-Translator: \n"
 "Language-Team: Bulgarian\n"
 "Plural-Forms: nplurals=2; plural=(n != 1);\n"
@@ -27,12 +27,16 @@ msgstr "{0, plural, one {# ден} other {# дни}}"
 #. placeholder {1}: table.getFilteredRowModel().rows.length
 #: src/components/routes/settings/alerts-history-data-table.tsx
 msgid "{0} of {1} row(s) selected."
-msgstr ""
+msgstr "{0} от {1} селектирани."
 
 #: src/components/routes/system.tsx
 msgid "{hours, plural, one {# hour} other {# hours}}"
 msgstr "{hours, plural, one {# час} other {# часа}}"
 
+#: src/components/routes/system.tsx
+msgid "{mins, plural, one {# minute} other {# minutes}}"
+msgstr ""
+
 #: src/lib/utils.ts
 msgid "1 hour"
 msgstr "1 час"
@@ -40,7 +44,7 @@ msgstr "1 час"
 #. Load average
 #: src/components/charts/load-average-chart.tsx
 msgid "1 min"
-msgstr ""
+msgstr "1 минута"
 
 #: src/lib/utils.ts
 msgid "1 week"
@@ -53,7 +57,7 @@ msgstr "12 часа"
 #. Load average
 #: src/components/charts/load-average-chart.tsx
 msgid "15 min"
-msgstr ""
+msgstr "15 минути"
 
 #: src/lib/utils.ts
 msgid "24 hours"
@@ -66,18 +70,18 @@ msgstr "30 дни"
 #. Load average
 #: src/components/charts/load-average-chart.tsx
 msgid "5 min"
-msgstr ""
+msgstr "5 минути"
 
 #. Table column
-#: src/components/systems-table/systems-table.tsx
 #: src/components/routes/settings/tokens-fingerprints.tsx
+#: src/components/systems-table/systems-table-columns.tsx
 msgid "Actions"
 msgstr "Действия"
 
 #: src/components/alerts-history-columns.tsx
 #: src/components/routes/settings/alerts-history-data-table.tsx
 msgid "Active"
-msgstr ""
+msgstr "Активен"
 
 #: src/components/routes/home.tsx
 msgid "Active Alerts"
@@ -108,33 +112,34 @@ msgstr "Настрой опциите за показване на диагра
 msgid "Admin"
 msgstr "Администратор"
 
-#: src/components/systems-table/systems-table.tsx
+#: src/components/systems-table/systems-table-columns.tsx
 msgid "Agent"
 msgstr "Агент"
 
 #: src/components/command-palette.tsx
-#: src/components/routes/settings/layout.tsx
 #: src/components/routes/settings/alerts-history-data-table.tsx
+#: src/components/routes/settings/layout.tsx
 msgid "Alert History"
-msgstr ""
+msgstr "История на нотификациите"
 
 #: src/components/alerts/alert-button.tsx
-#: src/components/alerts/alert-button.tsx
+#: src/components/alerts/alerts-sheet.tsx
 msgid "Alerts"
 msgstr "Тревоги"
 
+#: src/components/alerts/alerts-sheet.tsx
+#: src/components/systems-table/systems-table.tsx
 #: src/components/systems-table/systems-table.tsx
-#: src/components/alerts/alert-button.tsx
 msgid "All Systems"
 msgstr "Всички системи"
 
-#: src/components/systems-table/systems-table.tsx
+#: src/components/systems-table/systems-table-columns.tsx
 msgid "Are you sure you want to delete {name}?"
 msgstr "Сигурен ли си, че искаш да изтриеш {name}?"
 
 #: src/components/routes/settings/alerts-history-data-table.tsx
 msgid "Are you sure?"
-msgstr ""
+msgstr "Сигурни ли сте?"
 
 #: src/components/copy-to-clipboard.tsx
 msgid "Automatic copy requires a secure context."
@@ -148,8 +153,8 @@ msgstr "Средно"
 msgid "Average CPU utilization of containers"
 msgstr "Средно използване на процесора на контейнерите"
 
-#. placeholder {0}: data.alert.unit
-#: src/components/alerts/alerts-system.tsx
+#. placeholder {0}: alertData.unit
+#: src/components/alerts/alerts-sheet.tsx
 msgid "Average exceeds <0>{value}{0}</0>"
 msgstr "Средната стойност надхвърля <0>{value}{0}</0>"
 
@@ -166,16 +171,20 @@ msgstr "Средно използване на процесора на цяла
 msgid "Average utilization of {0}"
 msgstr "Средно използване на {0}"
 
-#: src/components/navbar.tsx
 #: src/components/command-palette.tsx
+#: src/components/navbar.tsx
 msgid "Backups"
 msgstr "Архиви"
 
-#: src/lib/utils.ts
 #: src/components/routes/system.tsx
+#: src/lib/alerts.ts
 msgid "Bandwidth"
 msgstr "Bandwidth на мрежата"
 
+#: src/components/routes/system.tsx
+msgid "Battery"
+msgstr "Батерия"
+
 #: src/components/login/auth-form.tsx
 msgid "Beszel supports OpenID Connect and many OAuth2 authentication providers."
 msgstr "Beszel поддържа OpenID Connect и много други OAuth2 доставчици за удостоверяване."
@@ -191,19 +200,19 @@ msgstr "Двоичен код"
 #: src/components/routes/settings/general.tsx
 #: src/components/routes/settings/general.tsx
 msgid "Bits (Kbps, Mbps, Gbps)"
-msgstr ""
+msgstr "Бита (Kbps, Mbps, Gbps)"
 
 #: src/components/routes/settings/general.tsx
 #: src/components/routes/settings/general.tsx
 msgid "Bytes (KB/s, MB/s, GB/s)"
-msgstr ""
+msgstr "Байта (KB/s, MB/s, GB/s)"
 
 #: src/components/charts/mem-chart.tsx
 msgid "Cache / Buffers"
 msgstr "Кеш / Буфери"
 
-#: src/components/systems-table/systems-table.tsx
 #: src/components/routes/settings/alerts-history-data-table.tsx
+#: src/components/systems-table/systems-table-columns.tsx
 msgid "Cancel"
 msgstr "Откажи"
 
@@ -213,16 +222,25 @@ msgstr "Внимание - възможност за загуба на данн
 
 #: src/components/routes/settings/general.tsx
 msgid "Celsius (°C)"
-msgstr ""
+msgstr "Целзий (°C)"
 
 #: src/components/routes/settings/general.tsx
 msgid "Change display units for metrics."
-msgstr ""
+msgstr "Промяна на единиците за показване на метриките."
 
 #: src/components/routes/settings/general.tsx
 msgid "Change general application options."
 msgstr "Смени общите опции на приложението."
 
+#: src/components/routes/system.tsx
+msgid "Charge"
+msgstr "Заряд"
+
+#. Context: Battery state
+#: src/lib/i18n.ts
+msgid "Charging"
+msgstr "Зареждане"
+
 #: src/components/routes/settings/general.tsx
 msgid "Chart options"
 msgstr "Опции на диаграмата"
@@ -259,10 +277,10 @@ msgstr "Потвърди парола"
 
 #: src/components/routes/home.tsx
 msgid "Connection is down"
-msgstr ""
+msgstr "Връзката е прекъсната"
 
-#: src/components/systems-table/systems-table.tsx
 #: src/components/routes/settings/alerts-history-data-table.tsx
+#: src/components/systems-table/systems-table-columns.tsx
 msgid "Continue"
 msgstr "Продължи"
 
@@ -285,9 +303,9 @@ msgstr "Копирай docker run"
 #: src/components/routes/settings/tokens-fingerprints.tsx
 msgctxt "Environment variables"
 msgid "Copy env"
-msgstr ""
+msgstr "Копирай еnv"
 
-#: src/components/systems-table/systems-table.tsx
+#: src/components/systems-table/systems-table-columns.tsx
 msgid "Copy host"
 msgstr "Копирай хоста"
 
@@ -296,7 +314,7 @@ msgstr "Копирай хоста"
 msgid "Copy Linux command"
 msgstr "Копирай linux командата"
 
-#: src/components/systems-table/systems-table.tsx
+#: src/components/systems-table/systems-table-columns.tsx
 msgid "Copy name"
 msgstr "Копирай име"
 
@@ -306,23 +324,23 @@ msgstr "Копирай текста"
 
 #: src/components/add-system.tsx
 msgid "Copy the installation command for the agent below, or register agents automatically with a <0>universal token</0>."
-msgstr ""
+msgstr "Копирайте командата за инсталиране на агента по-долу или регистрирайте агентите автоматично с <0>универсален токен</0>."
 
 #: src/components/add-system.tsx
 msgid "Copy the<0>docker-compose.yml</0> content for the agent below, or register agents automatically with a <1>universal token</1>."
-msgstr ""
+msgstr "Копирайте съдържанието на<0>docker-compose.yml</0> за агента по-долу или регистрирайте агентите автоматично с <1>универсален токен</1>."
 
 #: src/components/routes/settings/tokens-fingerprints.tsx
 msgid "Copy YAML"
-msgstr ""
+msgstr "Копирай YAML"
 
-#: src/components/systems-table/systems-table.tsx
+#: src/components/systems-table/systems-table-columns.tsx
 msgid "CPU"
 msgstr "Процесор"
 
-#: src/lib/utils.ts
 #: src/components/routes/system.tsx
 #: src/components/routes/system.tsx
+#: src/lib/alerts.ts
 msgid "CPU Usage"
 msgstr "Употреба на процесор"
 
@@ -333,12 +351,16 @@ msgstr "Създай акаунт"
 #. Context: date created
 #: src/components/alerts-history-columns.tsx
 msgid "Created"
-msgstr ""
+msgstr "Създаден"
 
-#. Dark theme
-#: src/components/mode-toggle.tsx
-msgid "Dark"
-msgstr "Тъмно"
+#: src/components/routes/settings/general.tsx
+msgid "Critical (%)"
+msgstr "Критично (%)"
+
+#. Context: Battery state
+#: src/components/routes/system.tsx
+msgid "Current state"
+msgstr "Текущо състояние"
 
 #: src/components/command-palette.tsx
 #: src/components/routes/home.tsx
@@ -349,16 +371,21 @@ msgstr "Табло"
 msgid "Default time period"
 msgstr "Времеви диапазон по подразбиране"
 
-#: src/components/systems-table/systems-table.tsx
 #: src/components/routes/settings/alerts-history-data-table.tsx
+#: src/components/systems-table/systems-table-columns.tsx
 msgid "Delete"
 msgstr "Изтрий"
 
 #: src/components/routes/settings/tokens-fingerprints.tsx
 msgid "Delete fingerprint"
-msgstr ""
+msgstr "Изтрий пръстов отпечатък"
 
-#: src/components/systems-table/systems-table.tsx
+#. Context: Battery state
+#: src/lib/i18n.ts
+msgid "Discharging"
+msgstr "Разреждане"
+
+#: src/components/systems-table/systems-table-columns.tsx
 msgid "Disk"
 msgstr "Диск"
 
@@ -368,11 +395,11 @@ msgstr "Диск I/O"
 
 #: src/components/routes/settings/general.tsx
 msgid "Disk unit"
-msgstr ""
+msgstr "Единица за диск"
 
-#: src/lib/utils.ts
-#: src/components/routes/system.tsx
 #: src/components/charts/disk-chart.tsx
+#: src/components/routes/system.tsx
+#: src/lib/alerts.ts
 msgid "Disk Usage"
 msgstr "Използване на диск"
 
@@ -397,24 +424,25 @@ msgid "Documentation"
 msgstr "Документация"
 
 #. Context: System is down
-#: src/lib/utils.ts
 #: src/components/alerts-history-columns.tsx
-#: src/components/systems-table/systems-table.tsx
 #: src/components/routes/system.tsx
+#: src/components/systems-table/systems-table-columns.tsx
+#: src/components/systems-table/systems-table.tsx
+#: src/lib/alerts.ts
 msgid "Down"
-msgstr ""
+msgstr "Офлайн"
 
 #: src/components/alerts-history-columns.tsx
 msgid "Duration"
-msgstr ""
+msgstr "Продължителност"
 
 #: src/components/add-system.tsx
-#: src/components/systems-table/systems-table.tsx
+#: src/components/systems-table/systems-table-columns.tsx
 msgid "Edit"
-msgstr ""
+msgstr "Редактирай"
 
-#: src/components/login/forgot-pass-form.tsx
 #: src/components/login/auth-form.tsx
+#: src/components/login/forgot-pass-form.tsx
 msgid "Email"
 msgstr "Имейл"
 
@@ -422,6 +450,11 @@ msgstr "Имейл"
 msgid "Email notifications"
 msgstr "Имейл нотификации"
 
+#. Context: Battery state
+#: src/lib/i18n.ts
+msgid "Empty"
+msgstr "Празна"
+
 #: src/components/login/login.tsx
 msgid "Enter email address to reset password"
 msgstr "Въведи имейл адрес за да нулираш паролата"
@@ -430,11 +463,11 @@ msgstr "Въведи имейл адрес за да нулираш парола
 msgid "Enter email address..."
 msgstr "Въведи имейл адрес..."
 
-#: src/components/routes/settings/tokens-fingerprints.tsx
-#: src/components/routes/settings/notifications.tsx
-#: src/components/routes/settings/config-yaml.tsx
-#: src/components/routes/settings/alerts-history-data-table.tsx
 #: src/components/login/auth-form.tsx
+#: src/components/routes/settings/alerts-history-data-table.tsx
+#: src/components/routes/settings/config-yaml.tsx
+#: src/components/routes/settings/notifications.tsx
+#: src/components/routes/settings/tokens-fingerprints.tsx
 msgid "Error"
 msgstr "Грешка"
 
@@ -451,7 +484,7 @@ msgstr "Съществуващи системи които не са дефин
 
 #: src/components/routes/settings/alerts-history-data-table.tsx
 msgid "Export"
-msgstr ""
+msgstr "Експортиране"
 
 #: src/components/routes/settings/config-yaml.tsx
 msgid "Export configuration"
@@ -463,14 +496,14 @@ msgstr "Експортирай конфигурацията на системи
 
 #: src/components/routes/settings/general.tsx
 msgid "Fahrenheit (°F)"
-msgstr ""
+msgstr "Фаренхайт (°F)"
 
-#: src/lib/utils.ts
+#: src/lib/api.ts
 msgid "Failed to authenticate"
 msgstr "Неуспешно удостоверяване"
 
-#: src/components/routes/settings/notifications.tsx
 #: src/components/routes/settings/layout.tsx
+#: src/components/routes/settings/notifications.tsx
 msgid "Failed to save settings"
 msgstr "Неуспешно запазване на настройки"
 
@@ -478,21 +511,21 @@ msgstr "Неуспешно запазване на настройки"
 msgid "Failed to send test notification"
 msgstr "Неуспешно изпрати тестова нотификация"
 
-#: src/components/alerts/alerts-system.tsx
+#: src/components/alerts/alerts-sheet.tsx
 msgid "Failed to update alert"
 msgstr "Неуспешно обнови тревога"
 
-#: src/components/systems-table/systems-table.tsx
-#: src/components/routes/system.tsx
 #: src/components/routes/settings/alerts-history-data-table.tsx
+#: src/components/routes/system.tsx
+#: src/components/systems-table/systems-table.tsx
 msgid "Filter..."
 msgstr "Филтрирай..."
 
 #: src/components/routes/settings/tokens-fingerprints.tsx
 msgid "Fingerprint"
-msgstr ""
+msgstr "Пръстов отпечатък"
 
-#: src/components/alerts/alerts-system.tsx
+#: src/components/alerts/alerts-sheet.tsx
 msgid "For <0>{min}</0> {min, plural, one {minute} other {minutes}}"
 msgstr "За <0>{min}</0> {min, plural, one {минута} other {минути}}"
 
@@ -500,9 +533,14 @@ msgstr "За <0>{min}</0> {min, plural, one {минута} other {минути}}
 msgid "Forgot password?"
 msgstr "Забравена парола?"
 
+#. Context: Battery state
+#: src/lib/i18n.ts
+msgid "Full"
+msgstr "Пълна"
+
 #. Context: General settings
-#: src/components/routes/settings/layout.tsx
 #: src/components/routes/settings/general.tsx
+#: src/components/routes/settings/layout.tsx
 msgid "General"
 msgstr "Общо"
 
@@ -524,6 +562,11 @@ msgstr "Команда Homebrew"
 msgid "Host / IP"
 msgstr "Хост / IP"
 
+#. Context: Battery state
+#: src/lib/i18n.ts
+msgid "Idle"
+msgstr "Неактивна"
+
 #: src/components/login/forgot-pass-form.tsx
 msgid "If you've lost the password to your admin account, you may reset it using the following command."
 msgstr "Ако си загубил паролата до администраторския акаунт, можеш да я нулираш със следващата команда."
@@ -545,31 +588,26 @@ msgstr "Език"
 msgid "Layout"
 msgstr "Подреждане"
 
-#. Light theme
-#: src/components/mode-toggle.tsx
-msgid "Light"
-msgstr "Светъл"
-
 #: src/components/routes/system.tsx
 msgid "Load Average"
-msgstr ""
+msgstr "Средно натоварване"
 
-#: src/lib/utils.ts
+#: src/lib/alerts.ts
 msgid "Load Average 15m"
-msgstr ""
+msgstr "Средно натоварване 15 минути"
 
-#: src/lib/utils.ts
+#: src/lib/alerts.ts
 msgid "Load Average 1m"
-msgstr ""
+msgstr "Средно натоварване 1 минута"
 
-#: src/lib/utils.ts
+#: src/lib/alerts.ts
 msgid "Load Average 5m"
-msgstr ""
+msgstr "Средно натоварване 5 минути"
 
 #. Short label for load average
-#: src/components/systems-table/systems-table.tsx
+#: src/components/systems-table/systems-table-columns.tsx
 msgid "Load Avg"
-msgstr ""
+msgstr "Средно натоварване"
 
 #: src/components/navbar.tsx
 msgid "Log Out"
@@ -579,13 +617,13 @@ msgstr "Изход"
 msgid "Login"
 msgstr "Вход"
 
-#: src/components/login/forgot-pass-form.tsx
 #: src/components/login/auth-form.tsx
+#: src/components/login/forgot-pass-form.tsx
 msgid "Login attempt failed"
 msgstr "Неуспешен опит за вход"
 
-#: src/components/navbar.tsx
 #: src/components/command-palette.tsx
+#: src/components/navbar.tsx
 msgid "Logs"
 msgstr "Логове"
 
@@ -599,19 +637,19 @@ msgstr "Управление на предпочитанията за показ
 
 #: src/components/add-system.tsx
 msgid "Manual setup instructions"
-msgstr ""
+msgstr "Инструкции за ръчна настройка"
 
 #. Chart select field. Please try to keep this short.
 #: src/components/routes/system.tsx
 msgid "Max 1 min"
 msgstr "Максимум 1 минута"
 
-#: src/components/systems-table/systems-table.tsx
+#: src/components/systems-table/systems-table-columns.tsx
 msgid "Memory"
 msgstr "Памет"
 
-#: src/lib/utils.ts
 #: src/components/routes/system.tsx
+#: src/lib/alerts.ts
 msgid "Memory Usage"
 msgstr "Употреба на паметта"
 
@@ -619,12 +657,12 @@ msgstr "Употреба на паметта"
 msgid "Memory usage of docker containers"
 msgstr "Използването на памет от docker контейнерите"
 
-#: src/components/alerts-history-columns.tsx
 #: src/components/add-system.tsx
+#: src/components/alerts-history-columns.tsx
 msgid "Name"
 msgstr "Име"
 
-#: src/components/systems-table/systems-table.tsx
+#: src/components/systems-table/systems-table-columns.tsx
 msgid "Net"
 msgstr "Мрежа"
 
@@ -639,7 +677,7 @@ msgstr "Мрежов трафик на публични интерфейси"
 #. Context: Bytes or bits
 #: src/components/routes/settings/general.tsx
 msgid "Network unit"
-msgstr ""
+msgstr "Единица за измерване на скорост"
 
 #: src/components/command-palette.tsx
 msgid "No results found."
@@ -647,7 +685,7 @@ msgstr "Няма намерени резултати."
 
 #: src/components/routes/settings/alerts-history-data-table.tsx
 msgid "No results."
-msgstr ""
+msgstr "Няма резултати."
 
 #: src/components/systems-table/systems-table.tsx
 #: src/components/systems-table/systems-table.tsx
@@ -655,8 +693,8 @@ msgid "No systems found."
 msgstr "Няма намерени системи."
 
 #: src/components/command-palette.tsx
-#: src/components/routes/settings/notifications.tsx
 #: src/components/routes/settings/layout.tsx
+#: src/components/routes/settings/notifications.tsx
 msgid "Notifications"
 msgstr "Нотификации"
 
@@ -668,9 +706,9 @@ msgstr "Поддръжка на OAuth 2 / OIDC"
 msgid "On each restart, systems in the database will be updated to match the systems defined in the file."
 msgstr "На всеки рестарт, системите в датабазата ще бъдат обновени да съвпадат със системите зададени във файла."
 
-#: src/components/systems-table/systems-table.tsx
 #: src/components/routes/settings/tokens-fingerprints.tsx
 #: src/components/routes/settings/tokens-fingerprints.tsx
+#: src/components/systems-table/systems-table-columns.tsx
 msgid "Open menu"
 msgstr "Отвори менюто"
 
@@ -678,7 +716,7 @@ msgstr "Отвори менюто"
 msgid "Or continue with"
 msgstr "Или продължи с"
 
-#: src/components/alerts/alert-button.tsx
+#: src/components/alerts/alerts-sheet.tsx
 msgid "Overwrite existing alerts"
 msgstr "Презапиши съществуващи тревоги"
 
@@ -690,7 +728,7 @@ msgstr "Страница"
 #. placeholder {1}: table.getPageCount()
 #: src/components/routes/settings/alerts-history-data-table.tsx
 msgid "Page {0} of {1}"
-msgstr ""
+msgstr "Страница {0} от {1}"
 
 #: src/components/command-palette.tsx
 msgid "Pages / Settings"
@@ -707,16 +745,17 @@ msgstr "Паролата трябва да е поне 8 символа."
 
 #: src/components/login/auth-form.tsx
 msgid "Password must be less than 72 bytes."
-msgstr ""
+msgstr "Паролата трябва да е по-малка от 72 байта."
 
 #: src/components/login/forgot-pass-form.tsx
 msgid "Password reset request received"
 msgstr "Получено е искането за нулиране на паролата"
 
-#: src/components/systems-table/systems-table.tsx
+#: src/components/systems-table/systems-table-columns.tsx
 msgid "Pause"
 msgstr "Пауза"
 
+#: src/components/systems-table/systems-table-columns.tsx
 #: src/components/systems-table/systems-table.tsx
 msgid "Paused"
 msgstr "На пауза"
@@ -725,12 +764,12 @@ msgstr "На пауза"
 msgid "Please <0>configure an SMTP server</0> to ensure alerts are delivered."
 msgstr "Моля <0>конфигурурай SMTP сървър</0> за да се подсигуриш, че тревогите са доставени."
 
-#: src/components/alerts/alerts-system.tsx
+#: src/components/alerts/alerts-sheet.tsx
 msgid "Please check logs for more details."
 msgstr "Моля провери log-овете за повече информация."
 
-#: src/components/login/forgot-pass-form.tsx
 #: src/components/login/auth-form.tsx
+#: src/components/login/forgot-pass-form.tsx
 msgid "Please check your credentials and try again"
 msgstr "Моля провери дадената информация и опитай отново"
 
@@ -742,7 +781,7 @@ msgstr "Моля създай администраторски акаунт"
 msgid "Please enable pop-ups for this site"
 msgstr "Моля активирай изскачащите прозорци за този сайт"
 
-#: src/lib/utils.ts
+#: src/lib/api.ts
 msgid "Please log in again"
 msgstr "Моля влез отново"
 
@@ -790,32 +829,32 @@ msgstr "Нулиране на парола"
 #: src/components/alerts-history-columns.tsx
 #: src/components/routes/settings/alerts-history-data-table.tsx
 msgid "Resolved"
-msgstr ""
+msgstr "Решен"
 
-#: src/components/systems-table/systems-table.tsx
+#: src/components/systems-table/systems-table-columns.tsx
 msgid "Resume"
 msgstr "Възобнови"
 
 #: src/components/routes/settings/tokens-fingerprints.tsx
 msgid "Rotate token"
-msgstr ""
+msgstr "Пресъздаване на идентификатора"
 
 #: src/components/routes/settings/alerts-history-data-table.tsx
 msgid "Rows per page"
-msgstr ""
+msgstr "Редове на страница"
 
 #: src/components/routes/settings/notifications.tsx
 msgid "Save address using enter key or comma. Leave blank to disable email notifications."
 msgstr "Запази адреса с enter или запетая. Остави празно за да изключиш нотификациите чрез имейл."
 
-#: src/components/routes/settings/notifications.tsx
 #: src/components/routes/settings/general.tsx
+#: src/components/routes/settings/notifications.tsx
 msgid "Save Settings"
 msgstr "Запази настройките"
 
 #: src/components/add-system.tsx
 msgid "Save system"
-msgstr ""
+msgstr "Запази система"
 
 #: src/components/navbar.tsx
 msgid "Search"
@@ -825,7 +864,7 @@ msgstr "Търси"
 msgid "Search for systems or settings..."
 msgstr "Търси за системи или настройки..."
 
-#: src/components/alerts/alert-button.tsx
+#: src/components/alerts/alerts-sheet.tsx
 msgid "See <0>notification settings</0> to configure how you receive alerts."
 msgstr "Виж <0>настройките за нотификациите</0> за да конфигурираш как получаваш тревоги."
 
@@ -833,6 +872,10 @@ msgstr "Виж <0>настройките за нотификациите</0> з
 msgid "Sent"
 msgstr "Изпратени"
 
+#: src/components/routes/settings/general.tsx
+msgid "Set percentage thresholds for meter colors."
+msgstr "Задайте процентни прагове за цветовете на измервателните уреди."
+
 #: src/components/routes/settings/general.tsx
 msgid "Sets the default time range for charts when a system is viewed."
 msgstr "Задава диапазона за време за диаграмите, когато се разглежда система."
@@ -863,9 +906,10 @@ msgstr "Сортиране по"
 #. Context: alert state (active or resolved)
 #: src/components/alerts-history-columns.tsx
 msgid "State"
-msgstr ""
+msgstr "Състояние"
 
-#: src/lib/utils.ts
+#: src/components/systems-table/systems-table.tsx
+#: src/lib/alerts.ts
 msgid "Status"
 msgstr "Статус"
 
@@ -877,18 +921,16 @@ msgstr "Изполван swap от системата"
 msgid "Swap Usage"
 msgstr "Използване на swap"
 
-#. System theme
-#: src/lib/utils.ts
-#: src/components/mode-toggle.tsx
 #: src/components/alerts-history-columns.tsx
-#: src/components/systems-table/systems-table.tsx
 #: src/components/routes/settings/tokens-fingerprints.tsx
+#: src/components/systems-table/systems-table-columns.tsx
+#: src/lib/alerts.ts
 msgid "System"
 msgstr "Система"
 
 #: src/components/routes/system.tsx
 msgid "System load averages over time"
-msgstr ""
+msgstr "Средно натоварване на системата във времето"
 
 #: src/components/navbar.tsx
 msgid "Systems"
@@ -903,18 +945,18 @@ msgid "Table"
 msgstr "Таблица"
 
 #. Temperature label in systems table
-#: src/components/systems-table/systems-table.tsx
+#: src/components/systems-table/systems-table-columns.tsx
 msgid "Temp"
-msgstr ""
+msgstr "Температура"
 
-#: src/lib/utils.ts
 #: src/components/routes/system.tsx
+#: src/lib/alerts.ts
 msgid "Temperature"
 msgstr "Температура"
 
 #: src/components/routes/settings/general.tsx
 msgid "Temperature unit"
-msgstr ""
+msgstr "Единица за температура"
 
 #: src/components/routes/system.tsx
 msgid "Temperatures of system sensors"
@@ -932,13 +974,13 @@ msgstr "Тестова нотификация изпратена"
 msgid "Then log into the backend and reset your user account password in the users table."
 msgstr "След това влез в backend-а и нулирай паролата за потребителския акаунт в таблицата за потребители."
 
-#: src/components/systems-table/systems-table.tsx
+#: src/components/systems-table/systems-table-columns.tsx
 msgid "This action cannot be undone. This will permanently delete all current records for {name} from the database."
 msgstr "Това действие не може да бъде отменено. Това ще изтрие всички записи за {name} от датабазата."
 
 #: src/components/routes/settings/alerts-history-data-table.tsx
 msgid "This will permanently delete all selected records from the database."
-msgstr ""
+msgstr "Това ще доведе до трайно изтриване на всички избрани записи от базата данни."
 
 #: src/components/routes/system.tsx
 msgid "Throughput of {extraFsName}"
@@ -964,72 +1006,78 @@ msgstr "Включи тема"
 #: src/components/add-system.tsx
 #: src/components/routes/settings/tokens-fingerprints.tsx
 msgid "Token"
-msgstr ""
+msgstr "Токен"
 
 #: src/components/command-palette.tsx
-#: src/components/routes/settings/tokens-fingerprints.tsx
 #: src/components/routes/settings/layout.tsx
+#: src/components/routes/settings/tokens-fingerprints.tsx
 msgid "Tokens & Fingerprints"
-msgstr ""
+msgstr "Токен & Пръстов отпечатък"
 
 #: src/components/routes/settings/tokens-fingerprints.tsx
 msgid "Tokens allow agents to connect and register. Fingerprints are stable identifiers unique to each system, set on first connection."
-msgstr ""
+msgstr "Токените позволяват на агентите да се свързват и регистрират. Отпечатъците са стабилни идентификатори, уникални за всяка система, които се задават при първото свързване."
 
 #: src/components/routes/settings/tokens-fingerprints.tsx
 msgid "Tokens and fingerprints are used to authenticate WebSocket connections to the hub."
-msgstr ""
+msgstr "Токените и пръстовите отпечатъци се използват за удостоверяване на WebSocket връзките към концентратора."
 
-#: src/lib/utils.ts
+#: src/lib/alerts.ts
 msgid "Triggers when 1 minute load average exceeds a threshold"
-msgstr ""
+msgstr "Задейства се, когато употребата на паметта за 1 минута надвиши зададен праг"
 
-#: src/lib/utils.ts
+#: src/lib/alerts.ts
 msgid "Triggers when 15 minute load average exceeds a threshold"
-msgstr ""
+msgstr "Задейства се, когато употребата на паметта за 15 минута надвиши зададен праг"
 
-#: src/lib/utils.ts
+#: src/lib/alerts.ts
 msgid "Triggers when 5 minute load average exceeds a threshold"
-msgstr ""
+msgstr "Задейства се, когато употребата на паметта за 5 минута надвиши зададен праг"
 
-#: src/lib/utils.ts
+#: src/lib/alerts.ts
 msgid "Triggers when any sensor exceeds a threshold"
 msgstr "Задейства се, когато някой даден сензор надвиши зададен праг"
 
-#: src/lib/utils.ts
+#: src/lib/alerts.ts
 msgid "Triggers when combined up/down exceeds a threshold"
 msgstr "Задейства се, когато комбинираното качване/сваляне надвиши зададен праг"
 
-#: src/lib/utils.ts
+#: src/lib/alerts.ts
 msgid "Triggers when CPU usage exceeds a threshold"
 msgstr "Задейства се, когато употребата на процесора надвиши зададен праг"
 
-#: src/lib/utils.ts
+#: src/lib/alerts.ts
 msgid "Triggers when memory usage exceeds a threshold"
 msgstr "Задейства се, когато употребата на паметта надвиши зададен праг"
 
-#: src/lib/utils.ts
+#: src/lib/alerts.ts
 msgid "Triggers when status switches between up and down"
 msgstr "Задейства се, когато статуса превключва между долу и горе"
 
-#: src/lib/utils.ts
+#: src/lib/alerts.ts
 msgid "Triggers when usage of any disk exceeds a threshold"
 msgstr "Задейства се, когато употребата на някой диск надивши зададен праг"
 
 #. Temperature / network units
 #: src/components/routes/settings/general.tsx
 msgid "Unit preferences"
-msgstr ""
+msgstr "Предпочитания на единицата"
 
 #: src/components/routes/settings/tokens-fingerprints.tsx
 msgid "Universal token"
-msgstr ""
+msgstr "Универсален тоукън"
+
+#. Context: Battery state
+#: src/lib/i18n.ts
+msgid "Unknown"
+msgstr "Неизвестна"
 
 #. Context: System is up
-#: src/components/systems-table/systems-table.tsx
 #: src/components/routes/system.tsx
+#: src/components/systems-table/systems-table-columns.tsx
+#: src/components/systems-table/systems-table.tsx
 msgid "Up"
-msgstr ""
+msgstr "Нагоре"
 
 #: src/components/systems-table/systems-table.tsx
 msgid "Updated in real time. Click on a system to view information."
@@ -1050,19 +1098,19 @@ msgstr "Употреба"
 msgid "Usage of root partition"
 msgstr "Употреба на root partition-а"
 
-#: src/components/charts/swap-chart.tsx
 #: src/components/charts/mem-chart.tsx
+#: src/components/charts/swap-chart.tsx
 msgid "Used"
 msgstr "Използвани"
 
-#: src/components/navbar.tsx
 #: src/components/command-palette.tsx
+#: src/components/navbar.tsx
 msgid "Users"
 msgstr "Потребители"
 
 #: src/components/alerts-history-columns.tsx
 msgid "Value"
-msgstr ""
+msgstr "Стойност"
 
 #: src/components/systems-table/systems-table.tsx
 msgid "View"
@@ -1070,7 +1118,7 @@ msgstr "Изглед"
 
 #: src/components/routes/settings/alerts-history-data-table.tsx
 msgid "View your 200 most recent alerts."
-msgstr ""
+msgstr "Прегледайте последните си 200 сигнала."
 
 #: src/components/systems-table/systems-table.tsx
 msgid "Visible Fields"
@@ -1084,13 +1132,21 @@ msgstr "Изчаква се за достатъчно записи за пока
 msgid "Want to help improve our translations? Check <0>Crowdin</0> for details."
 msgstr "Искаш да помогнеш да направиш преводите още по-добри? Провери нашия <0>Crowdin</0> за повече детайли."
 
+#: src/components/routes/settings/general.tsx
+msgid "Warning (%)"
+msgstr "Предупреждение (%)"
+
+#: src/components/routes/settings/general.tsx
+msgid "Warning thresholds"
+msgstr "Прагове за предупреждение"
+
 #: src/components/routes/settings/notifications.tsx
 msgid "Webhook / Push notifications"
 msgstr "Webhook / Пуш нотификации"
 
 #: src/components/routes/settings/tokens-fingerprints.tsx
 msgid "When enabled, this token allows agents to self-register without prior system creation. Expires after one hour or on hub restart."
-msgstr ""
+msgstr "Когато е активиран, този символ позволява на агентите да се регистрират сами без предварително създаване на система. Изтича след един час или при рестартиране на хъба."
 
 #: src/components/add-system.tsx
 #: src/components/routes/settings/tokens-fingerprints.tsx

beszel/site/src/locales/cs/cs.po

@@ -8,7 +8,7 @@ msgstr ""
 "Language: cs\n"
 "Project-Id-Version: beszel\n"
 "Report-Msgid-Bugs-To: \n"
-"PO-Revision-Date: 2025-07-25 22:44\n"
+"PO-Revision-Date: 2025-08-25 01:16\n"
 "Last-Translator: \n"
 "Language-Team: Czech\n"
 "Plural-Forms: nplurals=4; plural=(n==1) ? 0 : (n>=2 && n<=4) ? 1 : 3;\n"
@@ -27,12 +27,16 @@ msgstr "{0, plural, one {# den} few {# dny} other {# dní}}"
 #. placeholder {1}: table.getFilteredRowModel().rows.length
 #: src/components/routes/settings/alerts-history-data-table.tsx
 msgid "{0} of {1} row(s) selected."
-msgstr ""
+msgstr "{0} z {1} vybraných řádků."
 
 #: src/components/routes/system.tsx
 msgid "{hours, plural, one {# hour} other {# hours}}"
 msgstr "{hours, plural, one {# Hodina} few {# Hodiny} many {# Hodin} other {# Hodin}}"
 
+#: src/components/routes/system.tsx
+msgid "{mins, plural, one {# minute} other {# minutes}}"
+msgstr ""
+
 #: src/lib/utils.ts
 msgid "1 hour"
 msgstr "1 hodina"
@@ -40,7 +44,7 @@ msgstr "1 hodina"
 #. Load average
 #: src/components/charts/load-average-chart.tsx
 msgid "1 min"
-msgstr ""
+msgstr "1 min"
 
 #: src/lib/utils.ts
 msgid "1 week"
@@ -53,7 +57,7 @@ msgstr "12 hodin"
 #. Load average
 #: src/components/charts/load-average-chart.tsx
 msgid "15 min"
-msgstr ""
+msgstr "15 min"
 
 #: src/lib/utils.ts
 msgid "24 hours"
@@ -66,18 +70,18 @@ msgstr "30 dní"
 #. Load average
 #: src/components/charts/load-average-chart.tsx
 msgid "5 min"
-msgstr ""
+msgstr "5 min"
 
 #. Table column
-#: src/components/systems-table/systems-table.tsx
 #: src/components/routes/settings/tokens-fingerprints.tsx
+#: src/components/systems-table/systems-table-columns.tsx
 msgid "Actions"
 msgstr "Akce"
 
 #: src/components/alerts-history-columns.tsx
 #: src/components/routes/settings/alerts-history-data-table.tsx
 msgid "Active"
-msgstr ""
+msgstr "Aktivní"
 
 #: src/components/routes/home.tsx
 msgid "Active Alerts"
@@ -108,33 +112,34 @@ msgstr "Upravit možnosti zobrazení pro grafy."
 msgid "Admin"
 msgstr "Admin"
 
-#: src/components/systems-table/systems-table.tsx
+#: src/components/systems-table/systems-table-columns.tsx
 msgid "Agent"
 msgstr "Agent"
 
 #: src/components/command-palette.tsx
-#: src/components/routes/settings/layout.tsx
 #: src/components/routes/settings/alerts-history-data-table.tsx
+#: src/components/routes/settings/layout.tsx
 msgid "Alert History"
-msgstr ""
+msgstr "Historie upozornění"
 
 #: src/components/alerts/alert-button.tsx
-#: src/components/alerts/alert-button.tsx
+#: src/components/alerts/alerts-sheet.tsx
 msgid "Alerts"
 msgstr "Výstrahy"
 
+#: src/components/alerts/alerts-sheet.tsx
+#: src/components/systems-table/systems-table.tsx
 #: src/components/systems-table/systems-table.tsx
-#: src/components/alerts/alert-button.tsx
 msgid "All Systems"
 msgstr "Všechny systémy"
 
-#: src/components/systems-table/systems-table.tsx
+#: src/components/systems-table/systems-table-columns.tsx
 msgid "Are you sure you want to delete {name}?"
 msgstr "Opravdu chcete odstranit {name}?"
 
 #: src/components/routes/settings/alerts-history-data-table.tsx
 msgid "Are you sure?"
-msgstr ""
+msgstr "Jste si jistý?"
 
 #: src/components/copy-to-clipboard.tsx
 msgid "Automatic copy requires a secure context."
@@ -148,8 +153,8 @@ msgstr "Průměr"
 msgid "Average CPU utilization of containers"
 msgstr "Průměrné využití CPU kontejnerů"
 
-#. placeholder {0}: data.alert.unit
-#: src/components/alerts/alerts-system.tsx
+#. placeholder {0}: alertData.unit
+#: src/components/alerts/alerts-sheet.tsx
 msgid "Average exceeds <0>{value}{0}</0>"
 msgstr "Průměr je vyšší než <0>{value}{0}</0>"
 
@@ -166,16 +171,20 @@ msgstr "Průměrné využití CPU v celém systému"
 msgid "Average utilization of {0}"
 msgstr "Průměrné využití {0}"
 
-#: src/components/navbar.tsx
 #: src/components/command-palette.tsx
+#: src/components/navbar.tsx
 msgid "Backups"
 msgstr "Zálohy"
 
-#: src/lib/utils.ts
 #: src/components/routes/system.tsx
+#: src/lib/alerts.ts
 msgid "Bandwidth"
 msgstr "Přenos"
 
+#: src/components/routes/system.tsx
+msgid "Battery"
+msgstr "Baterie"
+
 #: src/components/login/auth-form.tsx
 msgid "Beszel supports OpenID Connect and many OAuth2 authentication providers."
 msgstr "Beszel podporuje OpenID Connect a mnoho poskytovatelů OAuth2 ověřování."
@@ -191,19 +200,19 @@ msgstr "Binary"
 #: src/components/routes/settings/general.tsx
 #: src/components/routes/settings/general.tsx
 msgid "Bits (Kbps, Mbps, Gbps)"
-msgstr ""
+msgstr "Bits (Kbps, Mbps, Gbps)"
 
 #: src/components/routes/settings/general.tsx
 #: src/components/routes/settings/general.tsx
 msgid "Bytes (KB/s, MB/s, GB/s)"
-msgstr ""
+msgstr "Bytes (KB/s, MB/s, GB/s)"
 
 #: src/components/charts/mem-chart.tsx
 msgid "Cache / Buffers"
 msgstr "Cache / vyrovnávací paměť"
 
-#: src/components/systems-table/systems-table.tsx
 #: src/components/routes/settings/alerts-history-data-table.tsx
+#: src/components/systems-table/systems-table-columns.tsx
 msgid "Cancel"
 msgstr "Zrušit"
 
@@ -213,16 +222,25 @@ msgstr "Upozornění - možná ztráta dat"
 
 #: src/components/routes/settings/general.tsx
 msgid "Celsius (°C)"
-msgstr ""
+msgstr "Celsia (°C)"
 
 #: src/components/routes/settings/general.tsx
 msgid "Change display units for metrics."
-msgstr ""
+msgstr "Změnit jednotky zobrazení metrik."
 
 #: src/components/routes/settings/general.tsx
 msgid "Change general application options."
 msgstr "Změnit obecné nastavení aplikace."
 
+#: src/components/routes/system.tsx
+msgid "Charge"
+msgstr "Nabíjení"
+
+#. Context: Battery state
+#: src/lib/i18n.ts
+msgid "Charging"
+msgstr "Nabíjení"
+
 #: src/components/routes/settings/general.tsx
 msgid "Chart options"
 msgstr "Možnosti grafu"
@@ -259,10 +277,10 @@ msgstr "Potvrdit heslo"
 
 #: src/components/routes/home.tsx
 msgid "Connection is down"
-msgstr ""
+msgstr "Připojení je nedostupné"
 
-#: src/components/systems-table/systems-table.tsx
 #: src/components/routes/settings/alerts-history-data-table.tsx
+#: src/components/systems-table/systems-table-columns.tsx
 msgid "Continue"
 msgstr "Pokračovat"
 
@@ -285,9 +303,9 @@ msgstr "Zkopírovat příkaz na spuštění dockeru"
 #: src/components/routes/settings/tokens-fingerprints.tsx
 msgctxt "Environment variables"
 msgid "Copy env"
-msgstr ""
+msgstr "Kopírovat env"
 
-#: src/components/systems-table/systems-table.tsx
+#: src/components/systems-table/systems-table-columns.tsx
 msgid "Copy host"
 msgstr "Kopírovat hostitele"
 
@@ -296,7 +314,7 @@ msgstr "Kopírovat hostitele"
 msgid "Copy Linux command"
 msgstr "Kopírovat příkaz Linux"
 
-#: src/components/systems-table/systems-table.tsx
+#: src/components/systems-table/systems-table-columns.tsx
 msgid "Copy name"
 msgstr "Kopírovat název"
 
@@ -306,23 +324,23 @@ msgstr "Kopírovat text"
 
 #: src/components/add-system.tsx
 msgid "Copy the installation command for the agent below, or register agents automatically with a <0>universal token</0>."
-msgstr ""
+msgstr "Zkopírujte instalační příkaz pro agenta níže nebo automaticky registrujte agenty s <0>univerzálním token</0>."
 
 #: src/components/add-system.tsx
 msgid "Copy the<0>docker-compose.yml</0> content for the agent below, or register agents automatically with a <1>universal token</1>."
-msgstr ""
+msgstr "Zkopírujte obsah <0>docker-compose.yml</0> pro agenta níže nebo automaticky registrujte agenty s <1>univerzálním token</1>."
 
 #: src/components/routes/settings/tokens-fingerprints.tsx
 msgid "Copy YAML"
-msgstr ""
+msgstr "Kopírovat YAML"
 
-#: src/components/systems-table/systems-table.tsx
+#: src/components/systems-table/systems-table-columns.tsx
 msgid "CPU"
 msgstr "Procesor"
 
-#: src/lib/utils.ts
 #: src/components/routes/system.tsx
 #: src/components/routes/system.tsx
+#: src/lib/alerts.ts
 msgid "CPU Usage"
 msgstr "Využití procesoru"
 
@@ -333,12 +351,16 @@ msgstr "Vytvořit účet"
 #. Context: date created
 #: src/components/alerts-history-columns.tsx
 msgid "Created"
-msgstr ""
+msgstr "Vytvořeno"
 
-#. Dark theme
-#: src/components/mode-toggle.tsx
-msgid "Dark"
-msgstr "Tmavý"
+#: src/components/routes/settings/general.tsx
+msgid "Critical (%)"
+msgstr "Kritické (%)"
+
+#. Context: Battery state
+#: src/components/routes/system.tsx
+msgid "Current state"
+msgstr "Aktuální stav"
 
 #: src/components/command-palette.tsx
 #: src/components/routes/home.tsx
@@ -349,16 +371,21 @@ msgstr "Přehled"
 msgid "Default time period"
 msgstr "Výchozí doba"
 
-#: src/components/systems-table/systems-table.tsx
 #: src/components/routes/settings/alerts-history-data-table.tsx
+#: src/components/systems-table/systems-table-columns.tsx
 msgid "Delete"
 msgstr "Odstranit"
 
 #: src/components/routes/settings/tokens-fingerprints.tsx
 msgid "Delete fingerprint"
-msgstr ""
+msgstr "Smazat identifikátor"
 
-#: src/components/systems-table/systems-table.tsx
+#. Context: Battery state
+#: src/lib/i18n.ts
+msgid "Discharging"
+msgstr "Vybíjení"
+
+#: src/components/systems-table/systems-table-columns.tsx
 msgid "Disk"
 msgstr "Disk"
 
@@ -368,11 +395,11 @@ msgstr "Disk I/O"
 
 #: src/components/routes/settings/general.tsx
 msgid "Disk unit"
-msgstr ""
+msgstr "Disková jednotka"
 
-#: src/lib/utils.ts
-#: src/components/routes/system.tsx
 #: src/components/charts/disk-chart.tsx
+#: src/components/routes/system.tsx
+#: src/lib/alerts.ts
 msgid "Disk Usage"
 msgstr "Využití disku"
 
@@ -397,24 +424,25 @@ msgid "Documentation"
 msgstr "Dokumentace"
 
 #. Context: System is down
-#: src/lib/utils.ts
 #: src/components/alerts-history-columns.tsx
-#: src/components/systems-table/systems-table.tsx
 #: src/components/routes/system.tsx
+#: src/components/systems-table/systems-table-columns.tsx
+#: src/components/systems-table/systems-table.tsx
+#: src/lib/alerts.ts
 msgid "Down"
 msgstr "Nefunkční"
 
 #: src/components/alerts-history-columns.tsx
 msgid "Duration"
-msgstr ""
+msgstr "Doba trvání"
 
 #: src/components/add-system.tsx
-#: src/components/systems-table/systems-table.tsx
+#: src/components/systems-table/systems-table-columns.tsx
 msgid "Edit"
 msgstr "Upravit"
 
-#: src/components/login/forgot-pass-form.tsx
 #: src/components/login/auth-form.tsx
+#: src/components/login/forgot-pass-form.tsx
 msgid "Email"
 msgstr "Email"
 
@@ -422,6 +450,11 @@ msgstr "Email"
 msgid "Email notifications"
 msgstr "Emailová upozornění"
 
+#. Context: Battery state
+#: src/lib/i18n.ts
+msgid "Empty"
+msgstr "Prázdná"
+
 #: src/components/login/login.tsx
 msgid "Enter email address to reset password"
 msgstr "Zadejte e-mailovou adresu pro obnovu hesla"
@@ -430,11 +463,11 @@ msgstr "Zadejte e-mailovou adresu pro obnovu hesla"
 msgid "Enter email address..."
 msgstr "Zadejte e-mailovou adresu..."
 
-#: src/components/routes/settings/tokens-fingerprints.tsx
-#: src/components/routes/settings/notifications.tsx
-#: src/components/routes/settings/config-yaml.tsx
-#: src/components/routes/settings/alerts-history-data-table.tsx
 #: src/components/login/auth-form.tsx
+#: src/components/routes/settings/alerts-history-data-table.tsx
+#: src/components/routes/settings/config-yaml.tsx
+#: src/components/routes/settings/notifications.tsx
+#: src/components/routes/settings/tokens-fingerprints.tsx
 msgid "Error"
 msgstr "Chyba"
 
@@ -451,7 +484,7 @@ msgstr "Stávající systémy, které nejsou definovány v <0>config.yml</0>, bu
 
 #: src/components/routes/settings/alerts-history-data-table.tsx
 msgid "Export"
-msgstr ""
+msgstr "Export"
 
 #: src/components/routes/settings/config-yaml.tsx
 msgid "Export configuration"
@@ -463,14 +496,14 @@ msgstr "Exportovat aktuální konfiguraci systémů."
 
 #: src/components/routes/settings/general.tsx
 msgid "Fahrenheit (°F)"
-msgstr ""
+msgstr "Fahrenheita (°F)"
 
-#: src/lib/utils.ts
+#: src/lib/api.ts
 msgid "Failed to authenticate"
 msgstr "Ověření se nezdařilo"
 
-#: src/components/routes/settings/notifications.tsx
 #: src/components/routes/settings/layout.tsx
+#: src/components/routes/settings/notifications.tsx
 msgid "Failed to save settings"
 msgstr "Nepodařilo se uložit nastavení"
 
@@ -478,21 +511,21 @@ msgstr "Nepodařilo se uložit nastavení"
 msgid "Failed to send test notification"
 msgstr "Nepodařilo se odeslat testovací oznámení"
 
-#: src/components/alerts/alerts-system.tsx
+#: src/components/alerts/alerts-sheet.tsx
 msgid "Failed to update alert"
 msgstr "Nepodařilo se aktualizovat upozornění"
 
-#: src/components/systems-table/systems-table.tsx
-#: src/components/routes/system.tsx
 #: src/components/routes/settings/alerts-history-data-table.tsx
+#: src/components/routes/system.tsx
+#: src/components/systems-table/systems-table.tsx
 msgid "Filter..."
 msgstr "Filtr..."
 
 #: src/components/routes/settings/tokens-fingerprints.tsx
 msgid "Fingerprint"
-msgstr ""
+msgstr "Otisk"
 
-#: src/components/alerts/alerts-system.tsx
+#: src/components/alerts/alerts-sheet.tsx
 msgid "For <0>{min}</0> {min, plural, one {minute} other {minutes}}"
 msgstr "Za <0>{min}</0> {min, plural, one {minutu} few {minuty} other {minut}}"
 
@@ -500,9 +533,14 @@ msgstr "Za <0>{min}</0> {min, plural, one {minutu} few {minuty} other {minut}}"
 msgid "Forgot password?"
 msgstr "Zapomněli jste heslo?"
 
+#. Context: Battery state
+#: src/lib/i18n.ts
+msgid "Full"
+msgstr "Plná"
+
 #. Context: General settings
-#: src/components/routes/settings/layout.tsx
 #: src/components/routes/settings/general.tsx
+#: src/components/routes/settings/layout.tsx
 msgid "General"
 msgstr "Obecné"
 
@@ -524,6 +562,11 @@ msgstr "Homebrew příkaz"
 msgid "Host / IP"
 msgstr "Hostitel / IP"
 
+#. Context: Battery state
+#: src/lib/i18n.ts
+msgid "Idle"
+msgstr "Neaktivní"
+
 #: src/components/login/forgot-pass-form.tsx
 msgid "If you've lost the password to your admin account, you may reset it using the following command."
 msgstr "Pokud jste ztratili heslo k vašemu účtu správce, můžete jej obnovit pomocí následujícího příkazu."
@@ -545,31 +588,26 @@ msgstr "Jazyk"
 msgid "Layout"
 msgstr "Rozvržení"
 
-#. Light theme
-#: src/components/mode-toggle.tsx
-msgid "Light"
-msgstr "Světlý"
-
 #: src/components/routes/system.tsx
 msgid "Load Average"
-msgstr ""
+msgstr "Průměrné vytížení"
 
-#: src/lib/utils.ts
+#: src/lib/alerts.ts
 msgid "Load Average 15m"
-msgstr ""
+msgstr "Průměrná zátěž 15m"
 
-#: src/lib/utils.ts
+#: src/lib/alerts.ts
 msgid "Load Average 1m"
-msgstr ""
+msgstr "Průměrná zátěž 1m"
 
-#: src/lib/utils.ts
+#: src/lib/alerts.ts
 msgid "Load Average 5m"
-msgstr ""
+msgstr "Průměrná zátěž 5m"
 
 #. Short label for load average
-#: src/components/systems-table/systems-table.tsx
+#: src/components/systems-table/systems-table-columns.tsx
 msgid "Load Avg"
-msgstr ""
+msgstr "Prům. zatížení"
 
 #: src/components/navbar.tsx
 msgid "Log Out"
@@ -579,13 +617,13 @@ msgstr "Odhlásit"
 msgid "Login"
 msgstr "Přihlásit"
 
-#: src/components/login/forgot-pass-form.tsx
 #: src/components/login/auth-form.tsx
+#: src/components/login/forgot-pass-form.tsx
 msgid "Login attempt failed"
 msgstr "Pokus o přihlášení selhal"
 
-#: src/components/navbar.tsx
 #: src/components/command-palette.tsx
+#: src/components/navbar.tsx
 msgid "Logs"
 msgstr "Logy"
 
@@ -606,12 +644,12 @@ msgstr "Pokyny k manuálnímu nastavení"
 msgid "Max 1 min"
 msgstr "Max. 1 min"
 
-#: src/components/systems-table/systems-table.tsx
+#: src/components/systems-table/systems-table-columns.tsx
 msgid "Memory"
 msgstr "Paměť"
 
-#: src/lib/utils.ts
 #: src/components/routes/system.tsx
+#: src/lib/alerts.ts
 msgid "Memory Usage"
 msgstr "Využití paměti"
 
@@ -619,12 +657,12 @@ msgstr "Využití paměti"
 msgid "Memory usage of docker containers"
 msgstr "Využití paměti docker kontejnerů"
 
-#: src/components/alerts-history-columns.tsx
 #: src/components/add-system.tsx
+#: src/components/alerts-history-columns.tsx
 msgid "Name"
 msgstr "Název"
 
-#: src/components/systems-table/systems-table.tsx
+#: src/components/systems-table/systems-table-columns.tsx
 msgid "Net"
 msgstr "Síť"
 
@@ -639,7 +677,7 @@ msgstr "Síťový provoz veřejných rozhraní"
 #. Context: Bytes or bits
 #: src/components/routes/settings/general.tsx
 msgid "Network unit"
-msgstr ""
+msgstr "Síťová jednotka"
 
 #: src/components/command-palette.tsx
 msgid "No results found."
@@ -647,7 +685,7 @@ msgstr "Nenalezeny žádné výskyty."
 
 #: src/components/routes/settings/alerts-history-data-table.tsx
 msgid "No results."
-msgstr ""
+msgstr "Žádné výsledky."
 
 #: src/components/systems-table/systems-table.tsx
 #: src/components/systems-table/systems-table.tsx
@@ -655,8 +693,8 @@ msgid "No systems found."
 msgstr "Nenalezeny žádné systémy."
 
 #: src/components/command-palette.tsx
-#: src/components/routes/settings/notifications.tsx
 #: src/components/routes/settings/layout.tsx
+#: src/components/routes/settings/notifications.tsx
 msgid "Notifications"
 msgstr "Upozornění"
 
@@ -668,9 +706,9 @@ msgstr "Podpora OAuth 2 / OIDC"
 msgid "On each restart, systems in the database will be updated to match the systems defined in the file."
 msgstr "Při každém restartu budou systémy v databázi aktualizovány tak, aby odpovídaly systémům definovaným v souboru."
 
-#: src/components/systems-table/systems-table.tsx
 #: src/components/routes/settings/tokens-fingerprints.tsx
 #: src/components/routes/settings/tokens-fingerprints.tsx
+#: src/components/systems-table/systems-table-columns.tsx
 msgid "Open menu"
 msgstr "Otevřít menu"
 
@@ -678,7 +716,7 @@ msgstr "Otevřít menu"
 msgid "Or continue with"
 msgstr "Nebo pokračujte s"
 
-#: src/components/alerts/alert-button.tsx
+#: src/components/alerts/alerts-sheet.tsx
 msgid "Overwrite existing alerts"
 msgstr "Přepsat existující upozornění"
 
@@ -690,7 +728,7 @@ msgstr "Stránka"
 #. placeholder {1}: table.getPageCount()
 #: src/components/routes/settings/alerts-history-data-table.tsx
 msgid "Page {0} of {1}"
-msgstr ""
+msgstr "Stránka {0} z {1}"
 
 #: src/components/command-palette.tsx
 msgid "Pages / Settings"
@@ -713,10 +751,11 @@ msgstr "Heslo musí být menší než 72 bytů."
 msgid "Password reset request received"
 msgstr "Žádost o obnovu hesla byla přijata"
 
-#: src/components/systems-table/systems-table.tsx
+#: src/components/systems-table/systems-table-columns.tsx
 msgid "Pause"
 msgstr "Pozastavit"
 
+#: src/components/systems-table/systems-table-columns.tsx
 #: src/components/systems-table/systems-table.tsx
 msgid "Paused"
 msgstr "Pozastaveno"
@@ -725,12 +764,12 @@ msgstr "Pozastaveno"
 msgid "Please <0>configure an SMTP server</0> to ensure alerts are delivered."
 msgstr "<0>nakonfigurujte SMTP server</0> pro zajištění toho, aby byla upozornění doručena."
 
-#: src/components/alerts/alerts-system.tsx
+#: src/components/alerts/alerts-sheet.tsx
 msgid "Please check logs for more details."
 msgstr "Pro více informací zkontrolujte logy."
 
-#: src/components/login/forgot-pass-form.tsx
 #: src/components/login/auth-form.tsx
+#: src/components/login/forgot-pass-form.tsx
 msgid "Please check your credentials and try again"
 msgstr "Zkontrolujte prosím Vaše přihlašovací údaje a zkuste to znovu"
 
@@ -742,7 +781,7 @@ msgstr "Vytvořte si prosím účet administrátora"
 msgid "Please enable pop-ups for this site"
 msgstr "Prosím povolte vyskakovací okna pro tento web"
 
-#: src/lib/utils.ts
+#: src/lib/api.ts
 msgid "Please log in again"
 msgstr "Přihlaste se prosím znovu"
 
@@ -790,26 +829,26 @@ msgstr "Obnovit heslo"
 #: src/components/alerts-history-columns.tsx
 #: src/components/routes/settings/alerts-history-data-table.tsx
 msgid "Resolved"
-msgstr ""
+msgstr "Vyřešeno"
 
-#: src/components/systems-table/systems-table.tsx
+#: src/components/systems-table/systems-table-columns.tsx
 msgid "Resume"
 msgstr "Pokračovat"
 
 #: src/components/routes/settings/tokens-fingerprints.tsx
 msgid "Rotate token"
-msgstr ""
+msgstr "Změnit token"
 
 #: src/components/routes/settings/alerts-history-data-table.tsx
 msgid "Rows per page"
-msgstr ""
+msgstr "Řádků na stránku"
 
 #: src/components/routes/settings/notifications.tsx
 msgid "Save address using enter key or comma. Leave blank to disable email notifications."
 msgstr "Adresu uložte pomocí klávesy enter nebo čárky. Pro deaktivaci e-mailových oznámení ponechte prázdné pole."
 
-#: src/components/routes/settings/notifications.tsx
 #: src/components/routes/settings/general.tsx
+#: src/components/routes/settings/notifications.tsx
 msgid "Save Settings"
 msgstr "Uložit nastavení"
 
@@ -825,7 +864,7 @@ msgstr "Hledat"
 msgid "Search for systems or settings..."
 msgstr "Hledat systémy nebo nastavení..."
 
-#: src/components/alerts/alert-button.tsx
+#: src/components/alerts/alerts-sheet.tsx
 msgid "See <0>notification settings</0> to configure how you receive alerts."
 msgstr "Podívejte se na <0>nastavení upozornění</0> pro nastavení toho, jak přijímáte upozornění."
 
@@ -833,6 +872,10 @@ msgstr "Podívejte se na <0>nastavení upozornění</0> pro nastavení toho, jak
 msgid "Sent"
 msgstr "Odeslat"
 
+#: src/components/routes/settings/general.tsx
+msgid "Set percentage thresholds for meter colors."
+msgstr "Nastavte procentuální prahové hodnoty pro barvy měřičů."
+
 #: src/components/routes/settings/general.tsx
 msgid "Sets the default time range for charts when a system is viewed."
 msgstr "Nastaví výchozí časový rozsah grafů, když je systém zobrazen."
@@ -863,9 +906,10 @@ msgstr "Seřadit podle"
 #. Context: alert state (active or resolved)
 #: src/components/alerts-history-columns.tsx
 msgid "State"
-msgstr ""
+msgstr "Stav"
 
-#: src/lib/utils.ts
+#: src/components/systems-table/systems-table.tsx
+#: src/lib/alerts.ts
 msgid "Status"
 msgstr "Stav"
 
@@ -877,18 +921,16 @@ msgstr "Swap prostor využívaný systémem"
 msgid "Swap Usage"
 msgstr "Swap využití"
 
-#. System theme
-#: src/lib/utils.ts
-#: src/components/mode-toggle.tsx
 #: src/components/alerts-history-columns.tsx
-#: src/components/systems-table/systems-table.tsx
 #: src/components/routes/settings/tokens-fingerprints.tsx
+#: src/components/systems-table/systems-table-columns.tsx
+#: src/lib/alerts.ts
 msgid "System"
 msgstr "Systém"
 
 #: src/components/routes/system.tsx
 msgid "System load averages over time"
-msgstr ""
+msgstr "Průměry zatížení systému v průběhu času"
 
 #: src/components/navbar.tsx
 msgid "Systems"
@@ -903,18 +945,18 @@ msgid "Table"
 msgstr "Tabulka"
 
 #. Temperature label in systems table
-#: src/components/systems-table/systems-table.tsx
+#: src/components/systems-table/systems-table-columns.tsx
 msgid "Temp"
 msgstr "Teplota"
 
-#: src/lib/utils.ts
 #: src/components/routes/system.tsx
+#: src/lib/alerts.ts
 msgid "Temperature"
 msgstr "Teplota"
 
 #: src/components/routes/settings/general.tsx
 msgid "Temperature unit"
-msgstr ""
+msgstr "Jednotky teploty"
 
 #: src/components/routes/system.tsx
 msgid "Temperatures of system sensors"
@@ -932,13 +974,13 @@ msgstr "Testovací oznámení odesláno"
 msgid "Then log into the backend and reset your user account password in the users table."
 msgstr "Poté se přihlaste do backendu a obnovte heslo k uživatelskému účtu v tabulce uživatelů."
 
-#: src/components/systems-table/systems-table.tsx
+#: src/components/systems-table/systems-table-columns.tsx
 msgid "This action cannot be undone. This will permanently delete all current records for {name} from the database."
 msgstr "Tuto akci nelze vzít zpět. Tím se z databáze trvale odstraní všechny aktuální záznamy pro {name}."
 
 #: src/components/routes/settings/alerts-history-data-table.tsx
 msgid "This will permanently delete all selected records from the database."
-msgstr ""
+msgstr "Tímto trvale odstraníte všechny vybrané záznamy z databáze."
 
 #: src/components/routes/system.tsx
 msgid "Throughput of {extraFsName}"
@@ -964,70 +1006,76 @@ msgstr "Přepnout motiv"
 #: src/components/add-system.tsx
 #: src/components/routes/settings/tokens-fingerprints.tsx
 msgid "Token"
-msgstr ""
+msgstr "Token"
 
 #: src/components/command-palette.tsx
-#: src/components/routes/settings/tokens-fingerprints.tsx
 #: src/components/routes/settings/layout.tsx
+#: src/components/routes/settings/tokens-fingerprints.tsx
 msgid "Tokens & Fingerprints"
-msgstr ""
+msgstr "Tokeny & Otisky"
 
 #: src/components/routes/settings/tokens-fingerprints.tsx
 msgid "Tokens allow agents to connect and register. Fingerprints are stable identifiers unique to each system, set on first connection."
-msgstr ""
+msgstr "Tokeny umožňují agentům připojení a registraci. Otisky jsou stabilní identifikátory jedinečné pro každý systém, nastavené na první připojení."
 
 #: src/components/routes/settings/tokens-fingerprints.tsx
 msgid "Tokens and fingerprints are used to authenticate WebSocket connections to the hub."
-msgstr ""
+msgstr "Tokeny a otisky slouží k ověření připojení WebSocket k uzlu."
 
-#: src/lib/utils.ts
+#: src/lib/alerts.ts
 msgid "Triggers when 1 minute load average exceeds a threshold"
-msgstr ""
+msgstr "Spustí se, když využití paměti během 1 minuty překročí prahovou hodnotu"
 
-#: src/lib/utils.ts
+#: src/lib/alerts.ts
 msgid "Triggers when 15 minute load average exceeds a threshold"
-msgstr ""
+msgstr "Spustí se, když využití paměti během 15 minut překročí prahovou hodnotu"
 
-#: src/lib/utils.ts
+#: src/lib/alerts.ts
 msgid "Triggers when 5 minute load average exceeds a threshold"
-msgstr ""
+msgstr "Spustí se, když využití paměti během 5 minut překročí prahovou hodnotu"
 
-#: src/lib/utils.ts
+#: src/lib/alerts.ts
 msgid "Triggers when any sensor exceeds a threshold"
 msgstr "Spustí se, když některý senzor překročí prahovou hodnotu"
 
-#: src/lib/utils.ts
+#: src/lib/alerts.ts
 msgid "Triggers when combined up/down exceeds a threshold"
 msgstr "Spustí se, když kombinace up/down překročí prahovou hodnotu"
 
-#: src/lib/utils.ts
+#: src/lib/alerts.ts
 msgid "Triggers when CPU usage exceeds a threshold"
 msgstr "Spustí se, když využití procesoru překročí prahovou hodnotu"
 
-#: src/lib/utils.ts
+#: src/lib/alerts.ts
 msgid "Triggers when memory usage exceeds a threshold"
 msgstr "Spustí se, když využití paměti překročí prahovou hodnotu"
 
-#: src/lib/utils.ts
+#: src/lib/alerts.ts
 msgid "Triggers when status switches between up and down"
 msgstr "Spouští se, když se změní dostupnost"
 
-#: src/lib/utils.ts
+#: src/lib/alerts.ts
 msgid "Triggers when usage of any disk exceeds a threshold"
 msgstr "Spustí se, když využití disku překročí prahovou hodnotu"
 
 #. Temperature / network units
 #: src/components/routes/settings/general.tsx
 msgid "Unit preferences"
-msgstr ""
+msgstr "Předvolby jednotek"
 
 #: src/components/routes/settings/tokens-fingerprints.tsx
 msgid "Universal token"
-msgstr ""
+msgstr "Univerzální token"
+
+#. Context: Battery state
+#: src/lib/i18n.ts
+msgid "Unknown"
+msgstr "Neznámá"
 
 #. Context: System is up
-#: src/components/systems-table/systems-table.tsx
 #: src/components/routes/system.tsx
+#: src/components/systems-table/systems-table-columns.tsx
+#: src/components/systems-table/systems-table.tsx
 msgid "Up"
 msgstr "Funkční"
 
@@ -1050,19 +1098,19 @@ msgstr "Využití"
 msgid "Usage of root partition"
 msgstr "Využití kořenového oddílu"
 
-#: src/components/charts/swap-chart.tsx
 #: src/components/charts/mem-chart.tsx
+#: src/components/charts/swap-chart.tsx
 msgid "Used"
 msgstr "Využito"
 
-#: src/components/navbar.tsx
 #: src/components/command-palette.tsx
+#: src/components/navbar.tsx
 msgid "Users"
 msgstr "Uživatelé"
 
 #: src/components/alerts-history-columns.tsx
 msgid "Value"
-msgstr ""
+msgstr "Hodnota"
 
 #: src/components/systems-table/systems-table.tsx
 msgid "View"
@@ -1070,7 +1118,7 @@ msgstr "Zobrazení"
 
 #: src/components/routes/settings/alerts-history-data-table.tsx
 msgid "View your 200 most recent alerts."
-msgstr ""
+msgstr "Zobrazit vašich 200 nejnovějších upozornění."
 
 #: src/components/systems-table/systems-table.tsx
 msgid "Visible Fields"
@@ -1084,13 +1132,21 @@ msgstr "Čeká se na dostatek záznamů k zobrazení"
 msgid "Want to help improve our translations? Check <0>Crowdin</0> for details."
 msgstr "Chcete nám pomoci s našimi překlady ještě lépe? Podívejte se na <0>Crowdin</0> pro více informací."
 
+#: src/components/routes/settings/general.tsx
+msgid "Warning (%)"
+msgstr "Varování (%)"
+
+#: src/components/routes/settings/general.tsx
+msgid "Warning thresholds"
+msgstr "Prahové hodnoty pro varování"
+
 #: src/components/routes/settings/notifications.tsx
 msgid "Webhook / Push notifications"
 msgstr "Webhook / Push oznámení"
 
 #: src/components/routes/settings/tokens-fingerprints.tsx
 msgid "When enabled, this token allows agents to self-register without prior system creation. Expires after one hour or on hub restart."
-msgstr ""
+msgstr "Pokud je povoleno, tento token umožňuje agentům, aby se sami zaregistrovali bez předchozího vytvoření systému. Vyprší po jedné hodině nebo po restartu uzlu."
 
 #: src/components/add-system.tsx
 #: src/components/routes/settings/tokens-fingerprints.tsx