release 0.1.2

close idle connections on timeout
refresh auth status if no systems are found
2025-11-18 11:06:13 +00:00 · 2024-08-07 16:19:27 -04:00 · 2024-08-07 16:12:18 -04:00 · 2024-08-07 15:07:22 -04:00 · 2024-08-06 20:23:59 -04:00 · 2024-08-06 18:50:12 -04:00
34 changed files with 1733 additions and 945 deletions
--- a/agent/.goreleaser.yml
+++ b/agent/.goreleaser.yml
@@ -12,10 +12,15 @@ builds:
    goos:
      - linux
      - darwin
+      - freebsd
    goarch:
      - amd64
      - arm64
      - arm
+      - mips64
+    ignore:
+      - goos: freebsd
+        goarch: arm

 archives:
  - format: tar.gz
--- a/agent/dockerfile
+++ b/agent/dockerfile
@@ -1,4 +1,4 @@
-FROM --platform=$BUILDPLATFORM golang:alpine as builder
+FROM --platform=$BUILDPLATFORM golang:alpine AS builder

 WORKDIR /app

--- a/agent/go.mod
+++ b/agent/go.mod
@@ -6,7 +6,7 @@ require (
 	github.com/blang/semver v3.5.1+incompatible
 	github.com/gliderlabs/ssh v0.3.7
 	github.com/rhysd/go-github-selfupdate v1.2.3
-	github.com/shirou/gopsutil/v4 v4.24.6
+	github.com/shirou/gopsutil/v4 v4.24.7
 )

 require (
@@ -23,8 +23,8 @@ require (
 	github.com/tklauser/numcpus v0.8.0 // indirect
 	github.com/ulikunitz/xz v0.5.12 // indirect
 	github.com/yusufpapurcu/wmi v1.2.4 // indirect
-	golang.org/x/crypto v0.25.0 // indirect
+	golang.org/x/crypto v0.26.0 // indirect
 	golang.org/x/net v0.27.0 // indirect
-	golang.org/x/oauth2 v0.21.0 // indirect
-	golang.org/x/sys v0.22.0 // indirect
+	golang.org/x/oauth2 v0.22.0 // indirect
+	golang.org/x/sys v0.23.0 // indirect
 )
--- a/agent/go.sum
+++ b/agent/go.sum
@@ -37,8 +37,8 @@ github.com/power-devops/perfstat v0.0.0-20240221224432-82ca36839d55 h1:o4JXh1EVt
 github.com/power-devops/perfstat v0.0.0-20240221224432-82ca36839d55/go.mod h1:OmDBASR4679mdNQnz2pUhc2G8CO2JrUAVFDRBDP/hJE=
 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/shirou/gopsutil/v4 v4.24.6 h1:9qqCSYF2pgOU+t+NgJtp7Co5+5mHF/HyKBUckySQL64=
-github.com/shirou/gopsutil/v4 v4.24.6/go.mod h1:aoebb2vxetJ/yIDZISmduFvVNPHqXQ9SEJwRXxkf0RA=
+github.com/shirou/gopsutil/v4 v4.24.7 h1:V9UGTK4gQ8HvcnPKf6Zt3XHyQq/peaekfxpJ2HSocJk=
+github.com/shirou/gopsutil/v4 v4.24.7/go.mod h1:0uW/073rP7FYLOkvxolUQM5rMOLTNmRXnFKafpb71rw=
 github.com/shoenig/go-m1cpu v0.1.6 h1:nxdKQNcEB6vzgA2E2bvzKIYRuNj7XNJ4S/aRSwKzFtM=
 github.com/shoenig/go-m1cpu v0.1.6/go.mod h1:1JJMcUBvfNwpq05QDQVAnx3gUHr9IYF7GNg9SUEw2VQ=
 github.com/shoenig/test v0.6.4 h1:kVTaSd7WLz5WZ2IaoM0RSzRsUD+m8wRR+5qvntpn4LU=
@@ -58,8 +58,8 @@ github.com/yusufpapurcu/wmi v1.2.4 h1:zFUKzehAFReQwLys1b/iSMl+JQGSCSjtVqQn9bBrPo
 github.com/yusufpapurcu/wmi v1.2.4/go.mod h1:SBZ9tNy3G9/m5Oi98Zks0QjeHVDvuK0qfxQmPyzfmi0=
 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.25.0 h1:ypSNr+bnYL2YhwoMt2zPxHFmbAN1KZs/njMG3hxUp30=
-golang.org/x/crypto v0.25.0/go.mod h1:T+wALwcMOSE0kXgUAnPAHqTLW+XHgcELELW8VaDgm/M=
+golang.org/x/crypto v0.26.0 h1:RrRspgV4mU+YwB4FYnuBoKsUapNIL5cohGAmSH3azsw=
+golang.org/x/crypto v0.26.0/go.mod h1:GY7jblb9wI+FOo5y8/S2oY4zWP07AkOJ4+jxCqdqn54=
 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=
@@ -68,8 +68,8 @@ golang.org/x/net v0.27.0 h1:5K3Njcw06/l2y9vpGCSdcxWOYHOUk3dVNGDXN+FvAys=
 golang.org/x/net v0.27.0/go.mod h1:dDi0PyhWNoiUOrAS8uXv/vnScO4wnHQO4mj9fn/RytE=
 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/oauth2 v0.21.0 h1:tsimM75w1tF/uws5rbeHzIWxEqElMehnc+iW793zsZs=
-golang.org/x/oauth2 v0.21.0/go.mod h1:XYTD2NtWslqkgxebSiOHnXEap4TF09sJSc7H1sXbhtI=
+golang.org/x/oauth2 v0.22.0 h1:BzDx2FehcG7jJwgWLELCdmLuxk2i+x9UDpSiss2u0ZA=
+golang.org/x/oauth2 v0.22.0/go.mod h1:XYTD2NtWslqkgxebSiOHnXEap4TF09sJSc7H1sXbhtI=
 golang.org/x/sync v0.0.0-20180314180146-1d60e4601c6f/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
 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=
@@ -77,15 +77,15 @@ golang.org/x/sys v0.0.0-20190916202348-b4ddaad3f8a3/go.mod h1:h1NjWce9XRLGQEsW7w
 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.22.0 h1:RI27ohtqKCnwULzJLqkv897zojh5/DwS/ENaMzUOaWI=
-golang.org/x/sys v0.22.0/go.mod h1:/VUhepiaJMQUp4+oa/7Zr1D23ma6VTLIYjOOTFZPUcA=
+golang.org/x/sys v0.23.0 h1:YfKFowiIMvtgl1UERQoTPPToxltDeZfbj4H7dVUCwmM=
+golang.org/x/sys v0.23.0/go.mod h1:/VUhepiaJMQUp4+oa/7Zr1D23ma6VTLIYjOOTFZPUcA=
 golang.org/x/term v0.0.0-20201117132131-f5c789dd3221/go.mod h1:Nr5EML6q2oocZ2LXRh80K7BxOlk5/8JxuGnuhpl+muw=
-golang.org/x/term v0.22.0 h1:BbsgPEJULsl2fV/AT3v15Mjva5yXKQDyKf+TbDz7QJk=
-golang.org/x/term v0.22.0/go.mod h1:F3qCibpT5AMpCRfhfT53vVJwhLtIVHhB9XDjfFvnMI4=
+golang.org/x/term v0.23.0 h1:F6D4vR+EHoL9/sWAWgAR1H2DcHr4PareCbAaCo1RpuU=
+golang.org/x/term v0.23.0/go.mod h1:DgV24QBUrK6jhZXl+20l6UWznPlwAHm1Q1mGHtydmSk=
 golang.org/x/text v0.3.0/go.mod h1:NqM8EUOU14njkJ3fqMW+pc6Ldnwhi/IjpwHt7yyuwOQ=
 golang.org/x/text v0.3.5/go.mod h1:5Zoc/QRtKVWzQhOtBMvqHzDpF6irO9z98xDceosuGiQ=
-golang.org/x/text v0.16.0 h1:a94ExnEXNtEwYLGJSIUxnWoxoRz/ZcCsV63ROupILh4=
-golang.org/x/text v0.16.0/go.mod h1:GhwF1Be+LQoKShO3cGOHzqOgRrGaYc9AvblQOmPVHnI=
+golang.org/x/text v0.17.0 h1:XtiM5bkSOt+ewxlOE/aE/AKEHibwj/6gvWMl9Rsh0Qc=
+golang.org/x/text v0.17.0/go.mod h1:BuEKDfySbSR4drPmRPG/7iBdf8hvFMuRexcpahXilzY=
 golang.org/x/tools v0.0.0-20180917221912-90fa682c2a6e/go.mod h1:n7NCudcB/nEzxVGmLbDWY5pfWTLqBcC2KZ6jyYvM4mQ=
 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=
--- a/agent/main.go
+++ b/agent/main.go
@@ -1,6 +1,7 @@
 package main

 import (
+	"context"
 	"encoding/json"
 	"fmt"
 	"io"
@@ -8,6 +9,7 @@ import (
 	"math"
 	"net"
 	"net/http"
+	"net/url"
 	"os"
 	"strings"
 	"sync"
@@ -22,10 +24,10 @@ import (
 	psutilNet "github.com/shirou/gopsutil/v4/net"
 )

-var Version = "0.1.1"
+var Version = "0.1.2"

-var containerCpuMap = make(map[string][2]uint64)
-var containerCpuMutex = &sync.Mutex{}
+var containerStatsMap = make(map[string]*PrevContainerStats)
+var containerStatsMutex = &sync.Mutex{}

 var sem = make(chan struct{}, 15)

@@ -52,19 +54,7 @@ var netIoStats = NetIoStats{
 }

 // client for docker engine api
-var client = &http.Client{
-	Timeout: time.Second,
-	Transport: &http.Transport{
-		Dial: func(proto, addr string) (net.Conn, error) {
-			return net.Dial("unix", "/var/run/docker.sock")
-		},
-		ForceAttemptHTTP2:   false,
-		IdleConnTimeout:     90 * time.Second,
-		DisableCompression:  true,
-		MaxIdleConnsPerHost: 50,
-		DisableKeepAlives:   false,
-	},
-}
+var dockerClient = newDockerClient()

 func getSystemStats() (*SystemInfo, *SystemStats) {
 	systemStats := &SystemStats{}
@@ -83,6 +73,8 @@ func getSystemStats() (*SystemInfo, *SystemStats) {
 		systemStats.MemUsed = bytesToGigabytes(v.Used)
 		systemStats.MemBuffCache = bytesToGigabytes(v.Total - v.Free - v.Used)
 		systemStats.MemPct = twoDecimals(v.UsedPercent)
+		systemStats.Swap = bytesToGigabytes(v.SwapTotal)
+		systemStats.SwapUsed = bytesToGigabytes(v.SwapTotal - v.SwapFree)
 	}

 	// disk usage
@@ -159,15 +151,17 @@ func getSystemStats() (*SystemInfo, *SystemStats) {
 }

 func getDockerStats() ([]*ContainerStats, error) {
-	resp, err := client.Get("http://localhost/containers/json")
+	resp, err := dockerClient.Get("http://localhost/containers/json")
 	if err != nil {
+		closeIdleConnections(err)
 		return []*ContainerStats{}, err
 	}
 	defer resp.Body.Close()

 	var containers []*Container
 	if err := json.NewDecoder(resp.Body).Decode(&containers); err != nil {
-		panic(err)
+		log.Printf("Error decoding containers: %+v\n", err)
+		return []*ContainerStats{}, err
 	}

 	containerStats := make([]*ContainerStats, 0, len(containers))
@@ -184,15 +178,22 @@ func getDockerStats() ([]*ContainerStats, error) {
 		// note: can't use Created field because it's not updated on restart
 		if strings.HasSuffix(ctr.Status, "seconds") {
 			// if so, remove old container data
-			delete(containerCpuMap, ctr.IdShort)
+			deleteContainerStatsSync(ctr.IdShort)
 		}
 		wg.Add(1)
 		go func() {
 			defer wg.Done()
 			cstats, err := getContainerStats(ctr)
 			if err != nil {
-				// delete container from map and retry once
-				delete(containerCpuMap, ctr.IdShort)
+				// Check if the error is a network timeout
+				if netErr, ok := err.(net.Error); ok && netErr.Timeout() {
+					// Close idle connections to prevent reuse of stale connections
+					closeIdleConnections(err)
+				} else {
+					// otherwise delete container from map
+					deleteContainerStatsSync(ctr.IdShort)
+				}
+				// retry once
 				cstats, err = getContainerStats(ctr)
 				if err != nil {
 					log.Printf("Error getting container stats: %+v\n", err)
@@ -205,10 +206,10 @@ func getDockerStats() ([]*ContainerStats, error) {

 	wg.Wait()

-	for id := range containerCpuMap {
+	for id := range containerStatsMap {
 		if _, exists := validIds[id]; !exists {
 			// log.Printf("Removing container cpu map entry: %+v\n", id)
-			delete(containerCpuMap, id)
+			delete(containerStatsMap, id)
 		}
 	}

@@ -219,7 +220,7 @@ func getContainerStats(ctr *Container) (*ContainerStats, error) {
 	// use semaphore to limit concurrency
 	acquireSemaphore()
 	defer releaseSemaphore()
-	resp, err := client.Get("http://localhost/containers/" + ctr.IdShort + "/stats?stream=0&one-shot=1")
+	resp, err := dockerClient.Get("http://localhost/containers/" + ctr.IdShort + "/stats?stream=0&one-shot=1")
 	if err != nil {
 		return &ContainerStats{}, err
 	}
@@ -238,32 +239,61 @@ func getContainerStats(ctr *Container) (*ContainerStats, error) {
 		memCache = statsJson.MemoryStats.Stats["cache"]
 	}
 	usedMemory := statsJson.MemoryStats.Usage - memCache
-	// pctMemory := float64(usedMemory) / float64(statsJson.MemoryStats.Limit) * 100
+
+	containerStatsMutex.Lock()
+	defer containerStatsMutex.Unlock()
+
+	// add empty values if they doesn't exist in map
+	stats, initialized := containerStatsMap[ctr.IdShort]
+	if !initialized {
+		stats = &PrevContainerStats{}
+		containerStatsMap[ctr.IdShort] = stats
+	}

 	// cpu
-	// add default values to containerCpu if it doesn't exist
-	containerCpuMutex.Lock()
-	defer containerCpuMutex.Unlock()
-	if _, ok := containerCpuMap[ctr.IdShort]; !ok {
-		containerCpuMap[ctr.IdShort] = [2]uint64{0, 0}
-	}
-	cpuDelta := statsJson.CPUStats.CPUUsage.TotalUsage - containerCpuMap[ctr.IdShort][0]
-	systemDelta := statsJson.CPUStats.SystemUsage - containerCpuMap[ctr.IdShort][1]
+	cpuDelta := statsJson.CPUStats.CPUUsage.TotalUsage - stats.Cpu[0]
+	systemDelta := statsJson.CPUStats.SystemUsage - stats.Cpu[1]
 	cpuPct := float64(cpuDelta) / float64(systemDelta) * 100
 	if cpuPct > 100 {
 		return &ContainerStats{}, fmt.Errorf("%s cpu pct greater than 100: %+v", name, cpuPct)
 	}
-	containerCpuMap[ctr.IdShort] = [2]uint64{statsJson.CPUStats.CPUUsage.TotalUsage, statsJson.CPUStats.SystemUsage}
+	stats.Cpu = [2]uint64{statsJson.CPUStats.CPUUsage.TotalUsage, statsJson.CPUStats.SystemUsage}
+
+	// network
+	var total_sent, total_recv uint64
+	for _, v := range statsJson.Networks {
+		total_sent += v.TxBytes
+		total_recv += v.RxBytes
+	}
+	var sent_delta, recv_delta float64
+	// prevent first run from sending all prev sent/recv bytes
+	if initialized {
+		secondsElapsed := time.Since(stats.Net.Time).Seconds()
+		sent_delta = float64(total_sent-stats.Net.Sent) / secondsElapsed
+		recv_delta = float64(total_recv-stats.Net.Recv) / secondsElapsed
+		// log.Printf("sent delta: %+v, recv delta: %+v\n", sent_delta, recv_delta)
+	}
+	stats.Net.Sent = total_sent
+	stats.Net.Recv = total_recv
+	stats.Net.Time = time.Now()

 	cStats := &ContainerStats{
-		Name: name,
-		Cpu:  twoDecimals(cpuPct),
-		Mem:  bytesToMegabytes(float64(usedMemory)),
-		// MemPct: twoDecimals(pctMemory),
+		Name:        name,
+		Cpu:         twoDecimals(cpuPct),
+		Mem:         bytesToMegabytes(float64(usedMemory)),
+		NetworkSent: bytesToMegabytes(sent_delta),
+		NetworkRecv: bytesToMegabytes(recv_delta),
 	}
 	return cStats, nil
 }

+// delete container stats from map using mutex
+func deleteContainerStatsSync(id string) {
+	containerStatsMutex.Lock()
+	defer containerStatsMutex.Unlock()
+	delete(containerStatsMap, id)
+}
+
 func gatherStats() *SystemData {
 	systemInfo, systemStats := getSystemStats()
 	stats := &SystemData{
@@ -404,3 +434,47 @@ func initializeNetIoStats() {
 		netIoStats.Time = time.Now()
 	}
 }
+
+func newDockerClient() *http.Client {
+	dockerHost := "unix:///var/run/docker.sock"
+	if dockerHostEnv, exists := os.LookupEnv("DOCKER_HOST"); exists {
+		dockerHost = dockerHostEnv
+	}
+
+	parsedURL, err := url.Parse(dockerHost)
+	if err != nil {
+		log.Fatal("Error parsing DOCKER_HOST: " + err.Error())
+	}
+
+	transport := &http.Transport{
+		ForceAttemptHTTP2:   false,
+		IdleConnTimeout:     90 * time.Second,
+		DisableCompression:  true,
+		MaxIdleConnsPerHost: 20,
+		DisableKeepAlives:   false,
+	}
+
+	switch parsedURL.Scheme {
+	case "unix":
+		transport.DialContext = func(ctx context.Context, proto, addr string) (net.Conn, error) {
+			return (&net.Dialer{}).DialContext(ctx, "unix", parsedURL.Path)
+		}
+	case "tcp", "http", "https":
+		log.Println("Using DOCKER_HOST: " + dockerHost)
+		transport.DialContext = func(ctx context.Context, proto, addr string) (net.Conn, error) {
+			return (&net.Dialer{}).DialContext(ctx, "tcp", parsedURL.Host)
+		}
+	default:
+		log.Fatal("Unsupported DOCKER_HOST: " + parsedURL.Scheme)
+	}
+
+	return &http.Client{
+		Timeout:   time.Second,
+		Transport: transport,
+	}
+}
+
+func closeIdleConnections(err error) {
+	log.Printf("Closing idle connections. Error: %+v\n", err)
+	dockerClient.Transport.(*http.Transport).CloseIdleConnections()
+}
--- a/agent/types.go
+++ b/agent/types.go
@@ -25,6 +25,8 @@ type SystemStats struct {
 	MemUsed      float64 `json:"mu"`
 	MemPct       float64 `json:"mp"`
 	MemBuffCache float64 `json:"mb"`
+	Swap         float64 `json:"s"`
+	SwapUsed     float64 `json:"su"`
 	Disk         float64 `json:"d"`
 	DiskUsed     float64 `json:"du"`
 	DiskPct      float64 `json:"dp"`
@@ -35,10 +37,11 @@ type SystemStats struct {
 }

 type ContainerStats struct {
-	Name string  `json:"n"`
-	Cpu  float64 `json:"c"`
-	Mem  float64 `json:"m"`
-	// MemPct float64 `json:"mp"`
+	Name        string  `json:"n"`
+	Cpu         float64 `json:"c"`
+	Mem         float64 `json:"m"`
+	NetworkSent float64 `json:"ns"`
+	NetworkRecv float64 `json:"nr"`
 }

 type Container struct {
@@ -65,20 +68,22 @@ type Container struct {

 type CStats struct {
 	// Common stats
-	Read    time.Time `json:"read"`
-	PreRead time.Time `json:"preread"`
+	// Read    time.Time `json:"read"`
+	// PreRead time.Time `json:"preread"`

 	// Linux specific stats, not populated on Windows.
 	// PidsStats  PidsStats  `json:"pids_stats,omitempty"`
 	// BlkioStats BlkioStats `json:"blkio_stats,omitempty"`

 	// Windows specific stats, not populated on Linux.
-	NumProcs uint32 `json:"num_procs"`
+	// NumProcs uint32 `json:"num_procs"`
 	// StorageStats StorageStats `json:"storage_stats,omitempty"`
+	// Networks request version >=1.21
+	Networks map[string]NetworkStats

 	// Shared stats
-	CPUStats    CPUStats    `json:"cpu_stats,omitempty"`
-	PreCPUStats CPUStats    `json:"precpu_stats,omitempty"` // "Pre"="Previous"
+	CPUStats CPUStats `json:"cpu_stats,omitempty"`
+	// PreCPUStats CPUStats    `json:"precpu_stats,omitempty"` // "Pre"="Previous"
 	MemoryStats MemoryStats `json:"memory_stats,omitempty"`
 }

@@ -90,7 +95,7 @@ type CPUStats struct {
 	SystemUsage uint64 `json:"system_cpu_usage,omitempty"`

 	// Online CPUs. Linux only.
-	OnlineCPUs uint32 `json:"online_cpus,omitempty"`
+	// OnlineCPUs uint32 `json:"online_cpus,omitempty"`

 	// Throttling Data. Linux only.
 	// ThrottlingData ThrottlingData `json:"throttling_data,omitempty"`
@@ -104,19 +109,19 @@ type CPUUsage struct {

 	// Total CPU time consumed per core (Linux). Not used on Windows.
 	// Units: nanoseconds.
-	PercpuUsage []uint64 `json:"percpu_usage,omitempty"`
+	// PercpuUsage []uint64 `json:"percpu_usage,omitempty"`

 	// Time spent by tasks of the cgroup in kernel mode (Linux).
 	// Time spent by all container processes in kernel mode (Windows).
 	// Units: nanoseconds (Linux).
 	// Units: 100's of nanoseconds (Windows). Not populated for Hyper-V Containers.
-	UsageInKernelmode uint64 `json:"usage_in_kernelmode"`
+	// UsageInKernelmode uint64 `json:"usage_in_kernelmode"`

 	// Time spent by tasks of the cgroup in user mode (Linux).
 	// Time spent by all container processes in user mode (Windows).
 	// Units: nanoseconds (Linux).
 	// Units: 100's of nanoseconds (Windows). Not populated for Hyper-V Containers
-	UsageInUsermode uint64 `json:"usage_in_usermode"`
+	// UsageInUsermode uint64 `json:"usage_in_usermode"`
 }

 type MemoryStats struct {
@@ -125,20 +130,27 @@ type MemoryStats struct {
 	Usage uint64 `json:"usage,omitempty"`
 	Cache uint64 `json:"cache,omitempty"`
 	// maximum usage ever recorded.
-	MaxUsage uint64 `json:"max_usage,omitempty"`
+	// MaxUsage uint64 `json:"max_usage,omitempty"`
 	// TODO(vishh): Export these as stronger types.
 	// all the stats exported via memory.stat.
 	Stats map[string]uint64 `json:"stats,omitempty"`
 	// number of times memory usage hits limits.
-	Failcnt uint64 `json:"failcnt,omitempty"`
-	Limit   uint64 `json:"limit,omitempty"`
+	// Failcnt uint64 `json:"failcnt,omitempty"`
+	// Limit   uint64 `json:"limit,omitempty"`

-	// committed bytes
-	Commit uint64 `json:"commitbytes,omitempty"`
-	// peak committed bytes
-	CommitPeak uint64 `json:"commitpeakbytes,omitempty"`
-	// private working set
-	PrivateWorkingSet uint64 `json:"privateworkingset,omitempty"`
+	// // committed bytes
+	// Commit uint64 `json:"commitbytes,omitempty"`
+	// // peak committed bytes
+	// CommitPeak uint64 `json:"commitpeakbytes,omitempty"`
+	// // private working set
+	// PrivateWorkingSet uint64 `json:"privateworkingset,omitempty"`
+}
+
+type NetworkStats struct {
+	// Bytes received. Windows and Linux.
+	RxBytes uint64 `json:"rx_bytes"`
+	// Bytes sent. Windows and Linux.
+	TxBytes uint64 `json:"tx_bytes"`
 }

 type DiskIoStats struct {
@@ -154,3 +166,12 @@ type NetIoStats struct {
 	Time      time.Time
 	Name      string
 }
+
+type PrevContainerStats struct {
+	Cpu [2]uint64
+	Net struct {
+		Sent uint64
+		Recv uint64
+		Time time.Time
+	}
+}
--- a/hub/alerts.go
+++ b/hub/alerts.go
@@ -1,19 +1,17 @@
 package main

 import (
-	"encoding/json"
 	"fmt"
 	"net/mail"

 	"github.com/pocketbase/dbx"
 	"github.com/pocketbase/pocketbase/models"
 	"github.com/pocketbase/pocketbase/tools/mailer"
-	"github.com/pocketbase/pocketbase/tools/types"
 )

 func handleSystemAlerts(newStatus string, newRecord *models.Record, oldRecord *models.Record) {
 	alertRecords, err := app.Dao().FindRecordsByExpr("alerts",
-		dbx.NewExp("system = {:system}", dbx.Params{"system": oldRecord.Get("id")}),
+		dbx.NewExp("system = {:system}", dbx.Params{"system": oldRecord.GetId()}),
 	)
 	if err != nil || len(alertRecords) == 0 {
 		// log.Println("no alerts found for system")
@@ -22,7 +20,7 @@ func handleSystemAlerts(newStatus string, newRecord *models.Record, oldRecord *m
 	// log.Println("found alerts", len(alertRecords))
 	var systemInfo *SystemInfo
 	for _, alertRecord := range alertRecords {
-		name := alertRecord.Get("name").(string)
+		name := alertRecord.GetString("name")
 		switch name {
 		case "Status":
 			handleStatusAlerts(newStatus, oldRecord, alertRecord)
@@ -46,24 +44,24 @@ func handleSystemAlerts(newStatus string, newRecord *models.Record, oldRecord *m

 func getSystemInfo(record *models.Record) *SystemInfo {
 	var SystemInfo SystemInfo
-	json.Unmarshal([]byte(record.Get("info").(types.JsonRaw)), &SystemInfo)
+	record.UnmarshalJSONField("info", &SystemInfo)
 	return &SystemInfo
 }

 func handleSlidingValueAlert(newRecord *models.Record, alertRecord *models.Record, name string, curValue float64) {
-	triggered := alertRecord.Get("triggered").(bool)
-	threshold := alertRecord.Get("value").(float64)
+	triggered := alertRecord.GetBool("triggered")
+	threshold := alertRecord.GetFloat("value")
 	// fmt.Println(name, curValue, "threshold", threshold, "triggered", triggered)
 	var subject string
 	var body string
 	if !triggered && curValue > threshold {
 		alertRecord.Set("triggered", true)
-		systemName := newRecord.Get("name").(string)
+		systemName := newRecord.GetString("name")
 		subject = fmt.Sprintf("%s usage threshold exceeded on %s", name, systemName)
-		body = fmt.Sprintf("%s usage on %s is %.1f%%.\n\n- Beszel", name, systemName, curValue)
+		body = fmt.Sprintf("%s usage on %s is %.1f%%.\n\n%s\n\n- Beszel", name, systemName, curValue, app.Settings().Meta.AppUrl+"/system/"+systemName)
 	} else if triggered && curValue <= threshold {
 		alertRecord.Set("triggered", false)
-		systemName := newRecord.Get("name").(string)
+		systemName := newRecord.GetString("name")
 		subject = fmt.Sprintf("%s usage returned below threshold on %s", name, systemName)
 		body = fmt.Sprintf("%s usage on %s is below threshold at %.1f%%.\n\n%s\n\n- Beszel", name, systemName, curValue, app.Settings().Meta.AppUrl+"/system/"+systemName)
 	} else {
@@ -81,7 +79,7 @@ func handleSlidingValueAlert(newRecord *models.Record, alertRecord *models.Recor
 	}
 	if user := alertRecord.ExpandedOne("user"); user != nil {
 		sendAlert(EmailData{
-			to:   user.Get("email").(string),
+			to:   user.GetString("email"),
 			subj: subject,
 			body: body,
 		})
@@ -92,11 +90,11 @@ func handleStatusAlerts(newStatus string, oldRecord *models.Record, alertRecord
 	var alertStatus string
 	switch newStatus {
 	case "up":
-		if oldRecord.Get("status") == "down" {
+		if oldRecord.GetString("status") == "down" {
 			alertStatus = "up"
 		}
 	case "down":
-		if oldRecord.Get("status") == "up" {
+		if oldRecord.GetString("status") == "up" {
 			alertStatus = "down"
 		}
 	}
@@ -116,9 +114,9 @@ func handleStatusAlerts(newStatus string, oldRecord *models.Record, alertRecord
 		emoji = "\u2705"
 	}
 	// send alert
-	systemName := oldRecord.Get("name").(string)
+	systemName := oldRecord.GetString("name")
 	sendAlert(EmailData{
-		to:   user.Get("email").(string),
+		to:   user.GetString("email"),
 		subj: fmt.Sprintf("Connection to %s is %s %v", systemName, alertStatus, emoji),
 		body: fmt.Sprintf("Connection to %s is %s\n\n- Beszel", systemName, alertStatus),
 	})
--- a/hub/dockerfile
+++ b/hub/dockerfile
@@ -1,4 +1,4 @@
-FROM --platform=$BUILDPLATFORM golang:alpine as builder
+FROM --platform=$BUILDPLATFORM golang:alpine AS builder

 WORKDIR /app

--- a/hub/main.go
+++ b/hub/main.go
@@ -25,12 +25,11 @@ import (
 	"github.com/pocketbase/pocketbase/models"
 	"github.com/pocketbase/pocketbase/plugins/migratecmd"
 	"github.com/pocketbase/pocketbase/tools/cron"
-	"github.com/pocketbase/pocketbase/tools/types"
 	"github.com/spf13/cobra"
 	"golang.org/x/crypto/ssh"
 )

-var Version = "0.1.1"
+var Version = "0.1.2"

 var app *pocketbase.PocketBase
 var serverConnections = make(map[string]*Server)
@@ -105,16 +104,12 @@ func main() {
 		// cron job to delete old records
 		scheduler := cron.New()
 		scheduler.MustAdd("delete old records", "8 * * * *", func() {
-			deleteOldRecords("system_stats", "1m", time.Hour)
-			deleteOldRecords("container_stats", "1m", time.Hour)
-			deleteOldRecords("system_stats", "10m", 12*time.Hour)
-			deleteOldRecords("container_stats", "10m", 12*time.Hour)
-			deleteOldRecords("system_stats", "20m", 24*time.Hour)
-			deleteOldRecords("container_stats", "20m", 24*time.Hour)
-			deleteOldRecords("system_stats", "120m", 7*24*time.Hour)
-			deleteOldRecords("container_stats", "120m", 7*24*time.Hour)
-			deleteOldRecords("system_stats", "480m", 30*24*time.Hour)
-			deleteOldRecords("container_stats", "480m", 30*24*time.Hour)
+			collections := []string{"system_stats", "container_stats"}
+			deleteOldRecords(collections, "1m", time.Hour)
+			deleteOldRecords(collections, "10m", 12*time.Hour)
+			deleteOldRecords(collections, "20m", 24*time.Hour)
+			deleteOldRecords(collections, "120m", 7*24*time.Hour)
+			deleteOldRecords(collections, "480m", 30*24*time.Hour)
 		})
 		scheduler.Start()
 		return nil
@@ -155,7 +150,7 @@ func main() {
 	// user creation - set default role to user if unset
 	app.OnModelBeforeCreate("users").Add(func(e *core.ModelEvent) error {
 		user := e.Model.(*models.Record)
-		if user.Get("role") == "" {
+		if user.GetString("role") == "" {
 			user.Set("role", "user")
 		}
 		return nil
@@ -164,8 +159,7 @@ func main() {
 	// system creation defaults
 	app.OnModelBeforeCreate("systems").Add(func(e *core.ModelEvent) error {
 		record := e.Model.(*models.Record)
-		var info = SystemInfo{}
-		record.Set("info", info)
+		record.Set("info", SystemInfo{})
 		record.Set("status", "pending")
 		return nil
 	})
@@ -180,7 +174,7 @@ func main() {
 	app.OnModelAfterUpdate("systems").Add(func(e *core.ModelEvent) error {
 		newRecord := e.Model.(*models.Record)
 		oldRecord := newRecord.OriginalCopy()
-		newStatus := newRecord.Get("status").(string)
+		newStatus := newRecord.GetString("status")

 		// if server is disconnected and connection exists, remove it
 		if newStatus == "down" || newStatus == "paused" {
@@ -241,12 +235,18 @@ func updateSystems() {
 	}
 	fiftySecondsAgo := time.Now().UTC().Add(-50 * time.Second)
 	batchSize := len(records)/4 + 1
-	for i := 0; i < batchSize; i++ {
-		if records[i].Get("updated").(types.DateTime).Time().After(fiftySecondsAgo) {
+	done := 0
+	for _, record := range records {
+		// break if batch size reached or if the system was updated less than 50 seconds ago
+		if done >= batchSize || record.GetDateTime("updated").Time().After(fiftySecondsAgo) {
 			break
 		}
-		// log.Println("updating", records[i].Get(("name")))
-		go updateSystem(records[i])
+		// don't increment for down systems to avoid them jamming the queue
+		// because they're always first when sorted by least recently updated
+		if record.GetString("status") != "down" {
+			done++
+		}
+		go updateSystem(record)
 	}
 }

@@ -258,8 +258,8 @@ func updateSystem(record *models.Record) {
 	} else {
 		// create server connection struct
 		server = &Server{
-			Host: record.Get("host").(string),
-			Port: record.Get("port").(string),
+			Host: record.GetString("host"),
+			Port: record.GetString("port"),
 		}
 		client, err := getServerConnection(server)
 		if err != nil {
@@ -321,7 +321,7 @@ func updateServerStatus(record *models.Record, status string) {
 	// if status == "down" || status == "paused" {
 	// 	deleteServerConnection(record)
 	// }
-	if record.Get("status") != status {
+	if record.GetString("status") != status {
 		record.Set("status", status)
 		if err := app.Dao().SaveRecord(record); err != nil {
 			app.Logger().Error("Failed to update record: ", "err", err.Error())
--- a/hub/records.go
+++ b/hub/records.go
@@ -1,21 +1,19 @@
 package main

 import (
-	"encoding/json"
 	"fmt"
-	"log"
 	"math"
 	"reflect"
 	"time"

 	"github.com/pocketbase/dbx"
+	"github.com/pocketbase/pocketbase/daos"
 	"github.com/pocketbase/pocketbase/models"
-	"github.com/pocketbase/pocketbase/tools/types"
 )

 func createLongerRecords(collectionName string, shorterRecord *models.Record) {
-	shorterRecordType := shorterRecord.Get("type").(string)
-	systemId := shorterRecord.Get("system").(string)
+	shorterRecordType := shorterRecord.GetString("type")
+	systemId := shorterRecord.GetString("system")
 	// fmt.Println("create longer records", "recordType", shorterRecordType, "systemId", systemId)
 	var longerRecordType string
 	var timeAgo time.Duration
@@ -75,11 +73,11 @@ func createLongerRecords(collectionName string, shorterRecord *models.Record) {
 		stats = averageContainerStats(allShorterRecords)
 	}
 	collection, _ := app.Dao().FindCollectionByNameOrId(collectionName)
-	tenMinRecord := models.NewRecord(collection)
-	tenMinRecord.Set("system", systemId)
-	tenMinRecord.Set("stats", stats)
-	tenMinRecord.Set("type", longerRecordType)
-	if err := app.Dao().SaveRecord(tenMinRecord); err != nil {
+	longerRecord := models.NewRecord(collection)
+	longerRecord.Set("system", systemId)
+	longerRecord.Set("stats", stats)
+	longerRecord.Set("type", longerRecordType)
+	if err := app.Dao().SaveRecord(longerRecord); err != nil {
 		fmt.Println("failed to save longer record", "err", err.Error())
 	}

@@ -92,7 +90,7 @@ func averageSystemStats(records []*models.Record) SystemStats {

 	for _, record := range records {
 		var stats SystemStats
-		json.Unmarshal([]byte(record.Get("stats").(types.JsonRaw)), &stats)
+		record.UnmarshalJSONField("stats", &stats)
 		statValue := reflect.ValueOf(stats)
 		for i := 0; i < statValue.NumField(); i++ {
 			field := sum.Field(i)
@@ -114,20 +112,24 @@ func averageContainerStats(records []*models.Record) (stats []ContainerStats) {
 	count := float64(len(records))
 	for _, record := range records {
 		var stats []ContainerStats
-		json.Unmarshal([]byte(record.Get("stats").(types.JsonRaw)), &stats)
+		record.UnmarshalJSONField("stats", &stats)
 		for _, stat := range stats {
 			if _, ok := sums[stat.Name]; !ok {
 				sums[stat.Name] = &ContainerStats{Name: stat.Name, Cpu: 0, Mem: 0}
 			}
 			sums[stat.Name].Cpu += stat.Cpu
 			sums[stat.Name].Mem += stat.Mem
+			sums[stat.Name].NetworkSent += stat.NetworkSent
+			sums[stat.Name].NetworkRecv += stat.NetworkRecv
 		}
 	}
 	for _, value := range sums {
 		stats = append(stats, ContainerStats{
-			Name: value.Name,
-			Cpu:  twoDecimals(value.Cpu / count),
-			Mem:  twoDecimals(value.Mem / count),
+			Name:        value.Name,
+			Cpu:         twoDecimals(value.Cpu / count),
+			Mem:         twoDecimals(value.Mem / count),
+			NetworkSent: twoDecimals(value.NetworkSent / count),
+			NetworkRecv: twoDecimals(value.NetworkRecv / count),
 		})
 	}
 	return stats
@@ -138,16 +140,28 @@ func twoDecimals(value float64) float64 {
 	return math.Round(value*100) / 100
 }

-/* Delete records of specified collection and type that are older than timeLimit */
-func deleteOldRecords(collection string, recordType string, timeLimit time.Duration) {
+/* Delete records of specified collections and type that are older than timeLimit */
+func deleteOldRecords(collections []string, recordType string, timeLimit time.Duration) {
 	timeLimitStamp := time.Now().UTC().Add(-timeLimit).Format("2006-01-02 15:04:05")
-	records, _ := app.Dao().FindRecordsByExpr(collection,
-		dbx.NewExp("type = {:type}", dbx.Params{"type": recordType}),
-		dbx.NewExp("created < {:created}", dbx.Params{"created": timeLimitStamp}),
-	)
-	for _, record := range records {
-		if err := app.Dao().DeleteRecord(record); err != nil {
-			log.Fatal(err)
+
+	// db query
+	expType := dbx.NewExp("type = {:type}", dbx.Params{"type": recordType})
+	expCreated := dbx.NewExp("created < {:created}", dbx.Params{"created": timeLimitStamp})
+
+	var records []*models.Record
+	for _, collection := range collections {
+		if collectionRecords, err := app.Dao().FindRecordsByExpr(collection, expType, expCreated); err == nil {
+			records = append(records, collectionRecords...)
 		}
 	}
+
+	app.Dao().RunInTransaction(func(txDao *daos.Dao) error {
+		for _, record := range records {
+			err := txDao.DeleteRecord(record)
+			if err != nil {
+				return err
+			}
+		}
+		return nil
+	})
 }
--- a/hub/site/bun.lockb
+++ b/hub/site/bun.lockb
--- a/hub/site/package.json
+++ b/hub/site/package.json
@@ -1,52 +1,53 @@
 {
-  "name": "site",
-  "private": true,
-  "version": "0.0.0",
-  "type": "module",
-  "scripts": {
-    "dev": "vite",
-    "build": "vite build",
-    "preview": "vite preview"
-  },
-  "dependencies": {
-    "@nanostores/react": "^0.7.2",
-    "@nanostores/router": "^0.15.0",
-    "@radix-ui/react-alert-dialog": "^1.1.1",
-    "@radix-ui/react-dialog": "^1.1.1",
-    "@radix-ui/react-dropdown-menu": "^2.1.1",
-    "@radix-ui/react-label": "^2.1.0",
-    "@radix-ui/react-select": "^2.1.1",
-    "@radix-ui/react-separator": "^1.1.0",
-    "@radix-ui/react-slider": "^1.2.0",
-    "@radix-ui/react-slot": "^1.1.0",
-    "@radix-ui/react-switch": "^1.1.0",
-    "@radix-ui/react-toast": "^1.2.1",
-    "@radix-ui/react-tooltip": "^1.1.2",
-    "@tanstack/react-table": "^8.19.3",
-    "@vitejs/plugin-react": "^4.3.1",
-    "class-variance-authority": "^0.7.0",
-    "clsx": "^2.1.1",
-    "cmdk": "^1.0.0",
-    "d3-scale": "^4.0.2",
-    "d3-time": "^3.1.0",
-    "lucide-react": "^0.407.0",
-    "nanostores": "^0.10.3",
-    "pocketbase": "^0.21.4",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "recharts": "^2.13.0-alpha.4",
-    "tailwind-merge": "^2.4.0",
-    "tailwindcss-animate": "^1.0.7",
-    "valibot": "^0.36.0"
-  },
-  "devDependencies": {
-    "@types/bun": "^1.1.6",
-    "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.3.0",
-    "autoprefixer": "^10.4.19",
-    "postcss": "^8.4.40",
-    "tailwindcss": "^3.4.7",
-    "typescript": "^5.5.4",
-    "vite": "^5.3.5"
-  }
+	"name": "site",
+	"private": true,
+	"version": "0.0.0",
+	"type": "module",
+	"scripts": {
+		"dev": "vite",
+		"build": "vite build",
+		"preview": "vite preview"
+	},
+	"dependencies": {
+		"@nanostores/react": "^0.7.3",
+		"@nanostores/router": "^0.15.1",
+		"@radix-ui/react-alert-dialog": "^1.1.1",
+		"@radix-ui/react-dialog": "^1.1.1",
+		"@radix-ui/react-dropdown-menu": "^2.1.1",
+		"@radix-ui/react-label": "^2.1.0",
+		"@radix-ui/react-select": "^2.1.1",
+		"@radix-ui/react-separator": "^1.1.0",
+		"@radix-ui/react-slider": "^1.2.0",
+		"@radix-ui/react-slot": "^1.1.0",
+		"@radix-ui/react-switch": "^1.1.0",
+		"@radix-ui/react-toast": "^1.2.1",
+		"@radix-ui/react-tooltip": "^1.1.2",
+		"@tanstack/react-table": "^8.20.1",
+		"@vitejs/plugin-react": "^4.3.1",
+		"class-variance-authority": "^0.7.0",
+		"clsx": "^2.1.1",
+		"cmdk": "^1.0.0",
+		"d3-scale": "^4.0.2",
+		"d3-time": "^3.1.0",
+		"lucide-react": "^0.407.0",
+		"nanostores": "^0.10.3",
+		"pocketbase": "^0.21.4",
+		"react": "^18.3.1",
+		"react-dom": "^18.3.1",
+		"recharts": "^2.13.0-alpha.4",
+		"tailwind-merge": "^2.4.0",
+		"tailwindcss-animate": "^1.0.7",
+		"use-is-in-viewport": "^1.0.9",
+		"valibot": "^0.36.0"
+	},
+	"devDependencies": {
+		"@types/bun": "^1.1.6",
+		"@types/react": "^18.3.3",
+		"@types/react-dom": "^18.3.0",
+		"autoprefixer": "^10.4.20",
+		"postcss": "^8.4.40",
+		"tailwindcss": "^3.4.7",
+		"typescript": "^5.5.4",
+		"vite": "^5.3.5"
+	}
 }
--- a/hub/site/src/components/add-system.tsx
+++ b/hub/site/src/components/add-system.tsx
@@ -17,7 +17,6 @@ import { Copy, Plus } from 'lucide-react'
 import { useState, useRef, MutableRefObject, useEffect } from 'react'
 import { useStore } from '@nanostores/react'
 import { copyToClipboard } from '@/lib/utils'
-import { SystemStats } from '@/types'

 export function AddSystemButton() {
 	const [open, setOpen] = useState(false)
@@ -75,7 +74,7 @@ export function AddSystemButton() {
 				<DialogHeader>
 					<DialogTitle className="mb-2">Add New System</DialogTitle>
 					<DialogDescription>
-						The agent must be running on the server to connect. Copy the{' '}
+						The agent must be running on the system to connect. Copy the{' '}
 						<code className="bg-muted px-1 rounded-sm">docker-compose.yml</code> for the agent
 						below.
 					</DialogDescription>
--- a/hub/site/src/components/charts/bandwidth-chart.tsx
+++ b/hub/site/src/components/charts/bandwidth-chart.tsx
@@ -1,106 +1,105 @@
 import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts'

+import { ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart'
 import {
-	ChartConfig,
-	ChartContainer,
-	ChartTooltip,
-	ChartTooltipContent,
-} from '@/components/ui/chart'
-import { chartTimeData, formatShortDate } from '@/lib/utils'
-import Spinner from '../spinner'
+	chartTimeData,
+	cn,
+	formatShortDate,
+	toFixedWithoutTrailingZeros,
+	useYaxisWidth,
+} from '@/lib/utils'
+// import Spinner from '../spinner'
 import { useStore } from '@nanostores/react'
 import { $chartTime } from '@/lib/stores'
-
-const chartConfig = {
-	recv: {
-		label: 'Received',
-		color: 'hsl(var(--chart-2))',
-	},
-	sent: {
-		label: 'Sent',
-		color: 'hsl(var(--chart-5))',
-	},
-} satisfies ChartConfig
+import { SystemStatsRecord } from '@/types'
+import { useMemo, useRef } from 'react'

 export default function BandwidthChart({
-	chartData,
 	ticks,
+	systemData,
 }: {
-	chartData: { time: number; sent: number; recv: number }[]
 	ticks: number[]
+	systemData: SystemStatsRecord[]
 }) {
+	const chartRef = useRef<HTMLDivElement>(null)
+	const yAxisWidth = useYaxisWidth(chartRef)
 	const chartTime = useStore($chartTime)

-	if (!chartData.length || !ticks.length) {
-		return <Spinner />
-	}
+	const yAxisSet = useMemo(() => yAxisWidth !== 180, [yAxisWidth])

 	return (
-		<ChartContainer config={chartConfig} className="h-full w-full absolute aspect-auto">
-			<AreaChart
-				accessibilityLayer
-				data={chartData}
-				margin={{
-					left: 0,
-					right: 0,
-					top: 10,
-					bottom: 0,
-				}}
+		<div ref={chartRef}>
+			{/* {!yAxisSet && <Spinner />} */}
+			<ChartContainer
+				config={{}}
+				className={cn('h-full w-full absolute aspect-auto bg-card opacity-0 transition-opacity', {
+					'opacity-100': yAxisSet,
+				})}
 			>
-				<CartesianGrid vertical={false} />
-				<YAxis
-					className="tracking-tighter"
-					width={75}
-					domain={[0, (max: number) => (max <= 0.4 ? 0.4 : Math.ceil(max))]}
-					tickFormatter={(value) => {
-						if (value >= 100) {
-							return value.toFixed(0)
-						}
-						return value.toFixed((value * 100) % 1 === 0 ? 1 : 2)
+				<AreaChart
+					accessibilityLayer
+					data={systemData}
+					margin={{
+						left: 0,
+						right: 0,
+						top: 10,
+						bottom: 0,
 					}}
-					tickLine={false}
-					axisLine={false}
-					unit={' MB/s'}
-				/>
-				<XAxis
-					dataKey="time"
-					domain={[ticks[0], ticks.at(-1)!]}
-					ticks={ticks}
-					type="number"
-					scale={'time'}
-					minTickGap={35}
-					tickMargin={8}
-					axisLine={false}
-					tickFormatter={chartTimeData[chartTime].format}
-				/>
-				<ChartTooltip
-					animationEasing="ease-out"
-					animationDuration={150}
-					content={
-						<ChartTooltipContent
-							unit=" MB/s"
-							labelFormatter={(_, data) => formatShortDate(data[0].payload.time)}
-							indicator="line"
-						/>
-					}
-				/>
-				<Area
-					dataKey="sent"
-					type="monotoneX"
-					fill="var(--color-sent)"
-					fillOpacity={0.4}
-					stroke="var(--color-sent)"
-					animationDuration={1200}
-				/>
-				<Area
-					dataKey="recv"
-					type="monotoneX"
-					fill="var(--color-recv)"
-					fillOpacity={0.4}
-					stroke="var(--color-recv)"
-					animationDuration={1200}
-				/>
-			</AreaChart>
-		</ChartContainer>
+				>
+					<CartesianGrid vertical={false} />
+					<YAxis
+						className="tracking-tighter"
+						width={yAxisWidth}
+						// domain={[0, (max: number) => (max <= 0.4 ? 0.4 : Math.ceil(max))]}
+						tickFormatter={(value) => toFixedWithoutTrailingZeros(value, 2)}
+						tickLine={false}
+						axisLine={false}
+						unit={' MB/s'}
+					/>
+					<XAxis
+						dataKey="created"
+						domain={[ticks[0], ticks.at(-1)!]}
+						ticks={ticks}
+						type="number"
+						scale={'time'}
+						minTickGap={35}
+						tickMargin={8}
+						axisLine={false}
+						tickFormatter={chartTimeData[chartTime].format}
+					/>
+					<ChartTooltip
+						animationEasing="ease-out"
+						animationDuration={150}
+						content={
+							<ChartTooltipContent
+								unit=" MB/s"
+								labelFormatter={(_, data) => formatShortDate(data[0].payload.created)}
+								indicator="line"
+							/>
+						}
+					/>
+					<Area
+						dataKey="stats.ns"
+						name="Sent"
+						type="monotoneX"
+						fill="hsl(var(--chart-5))"
+						fillOpacity={0.4}
+						stroke="hsl(var(--chart-5))"
+						// animationDuration={1200}
+						isAnimationActive={false}
+					/>
+					<Area
+						dataKey="stats.nr"
+						name="Received"
+						type="monotoneX"
+						fill="hsl(var(--chart-2))"
+						fillOpacity={0.4}
+						stroke="hsl(var(--chart-2))"
+						// animationDuration={1200}
+						isAnimationActive={false}
+					/>
+				</AreaChart>
+			</ChartContainer>
+		</div>
 	)
 }
--- a/hub/site/src/components/charts/container-cpu-chart.tsx
+++ b/hub/site/src/components/charts/container-cpu-chart.tsx
@@ -1,5 +1,3 @@
-'use client'
-
 import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts'
 import {
 	ChartConfig,
@@ -7,9 +5,9 @@ import {
 	ChartTooltip,
 	ChartTooltipContent,
 } from '@/components/ui/chart'
-import { useMemo } from 'react'
-import { chartTimeData, formatShortDate } from '@/lib/utils'
-import Spinner from '../spinner'
+import { useMemo, useRef } from 'react'
+import { chartTimeData, cn, formatShortDate, useYaxisWidth } from '@/lib/utils'
+// import Spinner from '../spinner'
 import { useStore } from '@nanostores/react'
 import { $chartTime } from '@/lib/stores'

@@ -20,8 +18,12 @@ export default function ContainerCpuChart({
 	chartData: Record<string, number | string>[]
 	ticks: number[]
 }) {
+	const chartRef = useRef<HTMLDivElement>(null)
+	const yAxisWidth = useYaxisWidth(chartRef)
 	const chartTime = useStore($chartTime)

+	const yAxisSet = useMemo(() => yAxisWidth !== 180, [yAxisWidth])
+
 	const chartConfig = useMemo(() => {
 		let config = {} as Record<
 			string,
@@ -57,64 +59,74 @@ export default function ContainerCpuChart({
 		return config satisfies ChartConfig
 	}, [chartData])

-	if (!chartData.length || !ticks.length) {
-		return <Spinner />
-	}
+	// if (!chartData.length || !ticks.length) {
+	// 	return <Spinner />
+	// }

 	return (
-		<ChartContainer config={chartConfig} className="h-full w-full absolute aspect-auto">
-			<AreaChart
-				accessibilityLayer
-				data={chartData}
-				margin={{
-					top: 10,
-				}}
-				reverseStackOrder={true}
+		<div ref={chartRef}>
+			{/* {!yAxisSet && <Spinner />} */}
+			<ChartContainer
+				config={{}}
+				className={cn('h-full w-full absolute aspect-auto bg-card opacity-0 transition-opacity', {
+					'opacity-100': yAxisSet,
+				})}
 			>
-				<CartesianGrid vertical={false} />
-				<YAxis
-					// domain={[0, (max: number) => Math.max(Math.ceil(max), 0.4)]}
-					width={47}
-					tickLine={false}
-					axisLine={false}
-					unit={'%'}
-					tickFormatter={(x) => (x % 1 === 0 ? x : x.toFixed(1))}
-				/>
-				<XAxis
-					dataKey="time"
-					domain={[ticks[0], ticks.at(-1)!]}
-					ticks={ticks}
-					type="number"
-					scale={'time'}
-					minTickGap={35}
-					tickMargin={8}
-					axisLine={false}
-					tickFormatter={chartTimeData[chartTime].format}
-				/>
-				<ChartTooltip
-					// cursor={false}
-					animationEasing="ease-out"
-					animationDuration={150}
-					labelFormatter={(_, data) => formatShortDate(data[0].payload.time)}
-					// @ts-ignore
-					itemSorter={(a, b) => b.value - a.value}
-					content={<ChartTooltipContent unit="%" indicator="line" />}
-				/>
-				{Object.keys(chartConfig).map((key) => (
-					<Area
-						key={key}
-						// isAnimationActive={chartData.length < 20}
-						animateNewValues={false}
-						animationDuration={1200}
-						dataKey={key}
-						type="monotoneX"
-						fill={chartConfig[key].color}
-						fillOpacity={0.4}
-						stroke={chartConfig[key].color}
-						stackId="a"
+				<AreaChart
+					accessibilityLayer
+					data={chartData}
+					margin={{
+						top: 10,
+					}}
+					reverseStackOrder={true}
+				>
+					<CartesianGrid vertical={false} />
+					<YAxis
+						className="tracking-tighter"
+						// domain={[0, (max: number) => Math.max(Math.ceil(max), 0.4)]}
+						width={yAxisWidth}
+						tickLine={false}
+						axisLine={false}
+						unit={'%'}
+						tickFormatter={(x) => (x % 1 === 0 ? x : x.toFixed(1))}
 					/>
-				))}
-			</AreaChart>
-		</ChartContainer>
+					<XAxis
+						dataKey="time"
+						domain={[ticks[0], ticks.at(-1)!]}
+						ticks={ticks}
+						type="number"
+						scale={'time'}
+						minTickGap={35}
+						tickMargin={8}
+						axisLine={false}
+						tickFormatter={chartTimeData[chartTime].format}
+					/>
+					<ChartTooltip
+						// cursor={false}
+						animationEasing="ease-out"
+						animationDuration={150}
+						labelFormatter={(_, data) => formatShortDate(data[0].payload.time)}
+						// @ts-ignore
+						itemSorter={(a, b) => b.value - a.value}
+						content={<ChartTooltipContent unit="%" indicator="line" />}
+					/>
+					{Object.keys(chartConfig).map((key) => (
+						<Area
+							key={key}
+							// isAnimationActive={chartData.length < 20}
+							isAnimationActive={false}
+							// animateNewValues={false}
+							// animationDuration={1200}
+							dataKey={key}
+							type="monotoneX"
+							fill={chartConfig[key].color}
+							fillOpacity={0.4}
+							stroke={chartConfig[key].color}
+							stackId="a"
+						/>
+					))}
+				</AreaChart>
+			</ChartContainer>
+		</div>
 	)
 }
--- a/hub/site/src/components/charts/container-mem-chart.tsx
+++ b/hub/site/src/components/charts/container-mem-chart.tsx
@@ -1,5 +1,3 @@
-'use client'
-
 import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts'
 import {
 	ChartConfig,
@@ -7,9 +5,15 @@ import {
 	ChartTooltip,
 	ChartTooltipContent,
 } from '@/components/ui/chart'
-import { useMemo } from 'react'
-import { chartTimeData, formatShortDate } from '@/lib/utils'
-import Spinner from '../spinner'
+import { useMemo, useRef } from 'react'
+import {
+	chartTimeData,
+	cn,
+	formatShortDate,
+	toFixedWithoutTrailingZeros,
+	useYaxisWidth,
+} from '@/lib/utils'
+// import Spinner from '../spinner'
 import { useStore } from '@nanostores/react'
 import { $chartTime } from '@/lib/stores'

@@ -21,6 +25,10 @@ export default function ContainerMemChart({
 	ticks: number[]
 }) {
 	const chartTime = useStore($chartTime)
+	const chartRef = useRef<HTMLDivElement>(null)
+	const yAxisWidth = useYaxisWidth(chartRef)
+
+	const yAxisSet = useMemo(() => yAxisWidth !== 180, [yAxisWidth])

 	const chartConfig = useMemo(() => {
 		let config = {} as Record<
@@ -57,69 +65,72 @@ export default function ContainerMemChart({
 		return config satisfies ChartConfig
 	}, [chartData])

-	if (!chartData.length || !ticks.length) {
-		return <Spinner />
-	}
+	// if (!chartData.length || !ticks.length) {
+	// 	return <Spinner />
+	// }

 	return (
-		<ChartContainer config={chartConfig} className="h-full w-full absolute aspect-auto">
-			<AreaChart
-				accessibilityLayer
-				data={chartData}
-				reverseStackOrder={true}
-				margin={{
-					top: 10,
-				}}
-
-				// reverseStackOrder={true}
+		<div ref={chartRef}>
+			{/* {!yAxisSet && <Spinner />} */}
+			<ChartContainer
+				config={{}}
+				className={cn('h-full w-full absolute aspect-auto bg-card opacity-0 transition-opacity', {
+					'opacity-100': yAxisSet,
+				})}
 			>
-				<CartesianGrid vertical={false} />
-				<YAxis
-					// domain={[0, (max: number) => Math.ceil(max)]}
-					tickLine={false}
-					axisLine={false}
-					unit={' GB'}
-					width={70}
-					tickFormatter={(value) => {
-						value = value / 1024
-						return value.toFixed((value * 100) % 1 === 0 ? 1 : 2)
+				<AreaChart
+					accessibilityLayer
+					data={chartData}
+					reverseStackOrder={true}
+					margin={{
+						top: 10,
 					}}
-				/>
-				<XAxis
-					dataKey="time"
-					domain={[ticks[0], ticks.at(-1)!]}
-					ticks={ticks}
-					type="number"
-					scale={'time'}
-					minTickGap={35}
-					tickMargin={8}
-					axisLine={false}
-					tickFormatter={chartTimeData[chartTime].format}
-				/>
-				<ChartTooltip
-					// cursor={false}
-					animationEasing="ease-out"
-					animationDuration={150}
-					labelFormatter={(_, data) => formatShortDate(data[0].payload.time)}
-					// @ts-ignore
-					itemSorter={(a, b) => b.value - a.value}
-					content={<ChartTooltipContent unit=" MiB" indicator="line" />}
-				/>
-				{Object.keys(chartConfig).map((key) => (
-					<Area
-						key={key}
-						isAnimationActive={chartData.length < 20}
-						animateNewValues={false}
-						animationDuration={1200}
-						dataKey={key}
-						type="monotoneX"
-						fill={chartConfig[key].color}
-						fillOpacity={0.4}
-						stroke={chartConfig[key].color}
-						stackId="a"
+				>
+					<CartesianGrid vertical={false} />
+					<YAxis
+						className="tracking-tighter"
+						// domain={[0, (max: number) => Math.ceil(max)]}
+						tickLine={false}
+						axisLine={false}
+						unit={' GB'}
+						width={yAxisWidth}
+						tickFormatter={(value) => toFixedWithoutTrailingZeros(value / 1024, 2)}
 					/>
-				))}
-			</AreaChart>
-		</ChartContainer>
+					<XAxis
+						dataKey="time"
+						domain={[ticks[0], ticks.at(-1)!]}
+						ticks={ticks}
+						type="number"
+						scale={'time'}
+						minTickGap={35}
+						tickMargin={8}
+						axisLine={false}
+						tickFormatter={chartTimeData[chartTime].format}
+					/>
+					<ChartTooltip
+						// cursor={false}
+						animationEasing="ease-out"
+						animationDuration={150}
+						labelFormatter={(_, data) => formatShortDate(data[0].payload.time)}
+						// @ts-ignore
+						itemSorter={(a, b) => b.value - a.value}
+						content={<ChartTooltipContent unit=" MB" indicator="line" />}
+					/>
+					{Object.keys(chartConfig).map((key) => (
+						<Area
+							key={key}
+							// animationDuration={1200}
+							isAnimationActive={false}
+							dataKey={key}
+							type="monotoneX"
+							fill={chartConfig[key].color}
+							fillOpacity={0.4}
+							stroke={chartConfig[key].color}
+							stackId="a"
+						/>
+					))}
+				</AreaChart>
+			</ChartContainer>
+		</div>
 	)
 }
--- a/hub/site/src/components/charts/container-net-chart.tsx
+++ b/hub/site/src/components/charts/container-net-chart.tsx
@@ -0,0 +1,157 @@
+import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts'
+import {
+	ChartConfig,
+	ChartContainer,
+	ChartTooltip,
+	ChartTooltipContent,
+} from '@/components/ui/chart'
+import { useMemo, useRef } from 'react'
+import {
+	chartTimeData,
+	cn,
+	formatShortDate,
+	toFixedWithoutTrailingZeros,
+	useYaxisWidth,
+} from '@/lib/utils'
+// import Spinner from '../spinner'
+import { useStore } from '@nanostores/react'
+import { $chartTime } from '@/lib/stores'
+import { Separator } from '@/components/ui/separator'
+
+export default function ContainerCpuChart({
+	chartData,
+	ticks,
+}: {
+	chartData: Record<string, number | number[]>[]
+	ticks: number[]
+}) {
+	const chartTime = useStore($chartTime)
+	const chartRef = useRef<HTMLDivElement>(null)
+	const yAxisWidth = useYaxisWidth(chartRef)
+
+	const yAxisSet = useMemo(() => yAxisWidth !== 180, [yAxisWidth])
+
+	const chartConfig = useMemo(() => {
+		let config = {} as Record<
+			string,
+			{
+				label: string
+				color: string
+			}
+		>
+		const totalUsage = {} as Record<string, number>
+		for (let stats of chartData) {
+			for (let key in stats) {
+				if (!Array.isArray(stats[key])) {
+					continue
+				}
+				if (!(key in totalUsage)) {
+					totalUsage[key] = 0
+				}
+				totalUsage[key] += stats[key][2] ?? 0
+			}
+		}
+		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]
+			const hue = ((i * 360) / length) % 360
+			config[key] = {
+				label: key,
+				color: `hsl(${hue}, 60%, 55%)`,
+			}
+		}
+		return config satisfies ChartConfig
+	}, [chartData])
+
+	// if (!chartData.length || !ticks.length) {
+	// 	return <Spinner />
+	// }
+
+	return (
+		<div ref={chartRef}>
+			{/* {!yAxisSet && <Spinner />} */}
+			<ChartContainer
+				config={{}}
+				className={cn('h-full w-full absolute aspect-auto bg-card opacity-0 transition-opacity', {
+					'opacity-100': yAxisSet,
+				})}
+			>
+				<AreaChart
+					accessibilityLayer
+					data={chartData}
+					margin={{
+						top: 10,
+					}}
+					reverseStackOrder={true}
+				>
+					<CartesianGrid vertical={false} />
+					<YAxis
+						className="tracking-tighter"
+						// domain={[0, (max: number) => Math.max(Math.ceil(max), 0.4)]}
+						width={yAxisWidth}
+						tickLine={false}
+						axisLine={false}
+						unit={' MB/s'}
+						tickFormatter={(value) => toFixedWithoutTrailingZeros(value, 2)}
+					/>
+					<XAxis
+						dataKey="time"
+						domain={[ticks[0], ticks.at(-1)!]}
+						ticks={ticks}
+						type="number"
+						scale={'time'}
+						minTickGap={35}
+						tickMargin={8}
+						axisLine={false}
+						tickFormatter={chartTimeData[chartTime].format}
+					/>
+					<ChartTooltip
+						// cursor={false}
+						animationEasing="ease-out"
+						animationDuration={150}
+						labelFormatter={(_, data) => formatShortDate(data[0].payload.time)}
+						// @ts-ignore
+						itemSorter={(a, b) => b.value - a.value}
+						content={
+							<ChartTooltipContent
+								indicator="line"
+								contentFormatter={(item, key) => {
+									try {
+										const sent = item?.payload?.[key][0] ?? 0
+										const received = item?.payload?.[key][1] ?? 0
+										return (
+											<span className="flex">
+												{received.toLocaleString()} MB/s
+												<span className="opacity-70 ml-0.5"> rx </span>
+												<Separator orientation="vertical" className="h-3 mx-1.5 bg-primary/40" />
+												{sent.toLocaleString()} MB/s<span className="opacity-70 ml-0.5"> tx</span>
+											</span>
+										)
+									} catch (e) {
+										return null
+									}
+								}}
+							/>
+						}
+					/>
+					{Object.keys(chartConfig).map((key) => (
+						<Area
+							key={key}
+							name={key}
+							// animationDuration={1200}
+							isAnimationActive={false}
+							dataKey={(data) => data?.[key]?.[2] ?? 0}
+							type="monotoneX"
+							fill={chartConfig[key].color}
+							fillOpacity={0.4}
+							stroke={chartConfig[key].color}
+							stackId="a"
+						/>
+					))}
+				</AreaChart>
+			</ChartContainer>
+		</div>
+	)
+}
--- a/hub/site/src/components/charts/cpu-chart.tsx
+++ b/hub/site/src/components/charts/cpu-chart.tsx
@@ -1,80 +1,80 @@
 import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts'

-import {
-	ChartConfig,
-	ChartContainer,
-	ChartTooltip,
-	ChartTooltipContent,
-} from '@/components/ui/chart'
-import { chartTimeData, formatShortDate } from '@/lib/utils'
-import Spinner from '../spinner'
+import { ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart'
+import { chartTimeData, cn, formatShortDate, useYaxisWidth } from '@/lib/utils'
+// import Spinner from '../spinner'
 import { useStore } from '@nanostores/react'
 import { $chartTime } from '@/lib/stores'
-
-const chartConfig = {
-	cpu: {
-		label: 'CPU Usage',
-		color: 'hsl(var(--chart-1))',
-	},
-} satisfies ChartConfig
+import { SystemStatsRecord } from '@/types'
+import { useMemo, useRef } from 'react'

 export default function CpuChart({
-	chartData,
 	ticks,
+	systemData,
 }: {
-	chartData: { time: number; cpu: number }[]
 	ticks: number[]
+	systemData: SystemStatsRecord[]
 }) {
 	const chartTime = useStore($chartTime)
+	const chartRef = useRef<HTMLDivElement>(null)
+	const yAxisWidth = useYaxisWidth(chartRef)

-	if (!chartData.length || !ticks.length) {
-		return <Spinner />
-	}
+	const yAxisSet = useMemo(() => yAxisWidth !== 180, [yAxisWidth])

 	return (
-		<ChartContainer config={chartConfig} className="h-full w-full absolute aspect-auto">
-			<AreaChart accessibilityLayer data={chartData} margin={{ top: 10 }}>
-				<CartesianGrid vertical={false} />
-				<YAxis
-					// domain={[0, (max: number) => Math.ceil(max)]}
-					width={48}
-					tickLine={false}
-					axisLine={false}
-					unit={'%'}
-				/>
-				<XAxis
-					dataKey="time"
-					domain={[ticks[0], ticks.at(-1)!]}
-					ticks={ticks}
-					type="number"
-					scale={'time'}
-					minTickGap={35}
-					tickMargin={8}
-					axisLine={false}
-					tickFormatter={chartTimeData[chartTime].format}
-				/>
-				<ChartTooltip
-					animationEasing="ease-out"
-					animationDuration={150}
-					content={
-						<ChartTooltipContent
-							unit="%"
-							labelFormatter={(_, data) => formatShortDate(data[0].payload.time)}
-							indicator="line"
-						/>
-					}
-				/>
-				<Area
-					dataKey="cpu"
-					type="monotoneX"
-					fill="var(--color-cpu)"
-					fillOpacity={0.4}
-					stroke="var(--color-cpu)"
-					animationDuration={1200}
-					// animationEasing="ease-out"
-					// animateNewValues={false}
-				/>
-			</AreaChart>
-		</ChartContainer>
+		<div ref={chartRef}>
+			<ChartContainer
+				config={{}}
+				className={cn('h-full w-full absolute aspect-auto bg-card opacity-0 transition-opacity', {
+					'opacity-100': yAxisSet,
+				})}
+			>
+				<AreaChart accessibilityLayer data={systemData} margin={{ top: 10 }}>
+					<CartesianGrid vertical={false} />
+					<YAxis
+						className="tracking-tighter"
+						// domain={[0, (max: number) => Math.ceil(max)]}
+						width={yAxisWidth}
+						tickLine={false}
+						axisLine={false}
+						unit={'%'}
+					/>
+					<XAxis
+						dataKey="created"
+						domain={[ticks[0], ticks.at(-1)!]}
+						ticks={ticks}
+						type="number"
+						scale={'time'}
+						minTickGap={35}
+						tickMargin={8}
+						axisLine={false}
+						tickFormatter={chartTimeData[chartTime].format}
+					/>
+					<ChartTooltip
+						animationEasing="ease-out"
+						animationDuration={150}
+						content={
+							<ChartTooltipContent
+								unit="%"
+								labelFormatter={(_, data) => formatShortDate(data[0].payload.created)}
+								indicator="line"
+							/>
+						}
+					/>
+					<Area
+						dataKey="stats.cpu"
+						name="CPU Usage"
+						type="monotoneX"
+						fill="hsl(var(--chart-1))"
+						fillOpacity={0.4}
+						stroke="hsl(var(--chart-1))"
+						isAnimationActive={false}
+						// animationEasing="ease-out"
+						// animationDuration={1200}
+						// animateNewValues={true}
+					/>
+				</AreaChart>
+			</ChartContainer>
+		</div>
 	)
 }
--- a/hub/site/src/components/charts/disk-chart.tsx
+++ b/hub/site/src/components/charts/disk-chart.tsx
@@ -1,36 +1,29 @@
 import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts'

-import {
-	ChartConfig,
-	ChartContainer,
-	ChartTooltip,
-	ChartTooltipContent,
-} from '@/components/ui/chart'
-import { chartTimeData, formatShortDate, hourWithMinutes } from '@/lib/utils'
-import { useMemo } from 'react'
-import Spinner from '../spinner'
+import { ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart'
+import { chartTimeData, cn, formatShortDate, useYaxisWidth } from '@/lib/utils'
+import { useMemo, useRef } from 'react'
+// import Spinner from '../spinner'
 import { useStore } from '@nanostores/react'
 import { $chartTime } from '@/lib/stores'
-
-const chartConfig = {
-	diskUsed: {
-		label: 'Disk Usage',
-		color: 'hsl(var(--chart-4))',
-	},
-} satisfies ChartConfig
+import { SystemStatsRecord } from '@/types'

 export default function DiskChart({
-	chartData,
 	ticks,
+	systemData,
 }: {
-	chartData: { time: number; disk: number; diskUsed: number }[]
 	ticks: number[]
+	systemData: SystemStatsRecord[]
 }) {
 	const chartTime = useStore($chartTime)
+	const chartRef = useRef<HTMLDivElement>(null)
+	const yAxisWidth = useYaxisWidth(chartRef)
+
+	const yAxisSet = useMemo(() => yAxisWidth !== 180, [yAxisWidth])

 	const diskSize = useMemo(() => {
-		return Math.round(chartData[0]?.disk)
-	}, [chartData])
+		return Math.round(systemData[0]?.stats.d)
+	}, [systemData])

 	// const ticks = useMemo(() => {
 	// 	let ticks = [0]
@@ -41,63 +34,73 @@ export default function DiskChart({
 	// 	return ticks
 	// }, [diskSize])

-	if (!chartData.length || !ticks.length) {
-		return <Spinner />
-	}
+	// if (!systemData.length || !ticks.length) {
+	// 	return <Spinner />
+	// }

 	return (
-		<ChartContainer config={chartConfig} className="h-full w-full absolute aspect-auto">
-			<AreaChart
-				accessibilityLayer
-				data={chartData}
-				margin={{
-					left: 0,
-					right: 0,
-					top: 10,
-					bottom: 0,
-				}}
+		<div ref={chartRef}>
+			{/* {!yAxisSet && <Spinner />} */}
+			<ChartContainer
+				config={{}}
+				className={cn('h-full w-full absolute aspect-auto bg-card opacity-0 transition-opacity', {
+					'opacity-100': yAxisSet,
+				})}
 			>
-				<CartesianGrid vertical={false} />
-				<YAxis
-					className="tracking-tighter"
-					width={diskSize >= 1000 ? 75 : 65}
-					domain={[0, diskSize]}
-					tickCount={9}
-					tickLine={false}
-					axisLine={false}
-					unit={' GB'}
-				/>
-				<XAxis
-					dataKey="time"
-					domain={[ticks[0], ticks.at(-1)!]}
-					ticks={ticks}
-					type="number"
-					scale={'time'}
-					minTickGap={35}
-					tickMargin={8}
-					axisLine={false}
-					tickFormatter={chartTimeData[chartTime].format}
-				/>
-				<ChartTooltip
-					animationEasing="ease-out"
-					animationDuration={150}
-					content={
-						<ChartTooltipContent
-							unit=" GB"
-							labelFormatter={(_, data) => formatShortDate(data[0].payload.time)}
-							indicator="line"
-						/>
-					}
-				/>
-				<Area
-					dataKey="diskUsed"
-					type="monotoneX"
-					fill="var(--color-diskUsed)"
-					fillOpacity={0.4}
-					stroke="var(--color-diskUsed)"
-					animationDuration={1200}
-				/>
-			</AreaChart>
-		</ChartContainer>
+				<AreaChart
+					accessibilityLayer
+					data={systemData}
+					margin={{
+						left: 0,
+						right: 0,
+						top: 10,
+						bottom: 0,
+					}}
+				>
+					<CartesianGrid vertical={false} />
+					<YAxis
+						className="tracking-tighter"
+						width={yAxisWidth}
+						domain={[0, diskSize]}
+						tickCount={9}
+						tickLine={false}
+						axisLine={false}
+						unit={' GB'}
+					/>
+					<XAxis
+						dataKey="created"
+						domain={[ticks[0], ticks.at(-1)!]}
+						ticks={ticks}
+						type="number"
+						scale={'time'}
+						minTickGap={35}
+						tickMargin={8}
+						axisLine={false}
+						tickFormatter={chartTimeData[chartTime].format}
+					/>
+					<ChartTooltip
+						animationEasing="ease-out"
+						animationDuration={150}
+						content={
+							<ChartTooltipContent
+								unit=" GB"
+								labelFormatter={(_, data) => formatShortDate(data[0].payload.created)}
+								indicator="line"
+							/>
+						}
+					/>
+					<Area
+						dataKey="stats.du"
+						name="Disk Usage"
+						type="monotoneX"
+						fill="hsl(var(--chart-4))"
+						fillOpacity={0.4}
+						stroke="hsl(var(--chart-4))"
+						// animationDuration={1200}
+						isAnimationActive={false}
+					/>
+				</AreaChart>
+			</ChartContainer>
+		</div>
 	)
 }
--- a/hub/site/src/components/charts/disk-io-chart.tsx
+++ b/hub/site/src/components/charts/disk-io-chart.tsx
@@ -1,106 +1,109 @@
 import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts'

+import { ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart'
 import {
-	ChartConfig,
-	ChartContainer,
-	ChartTooltip,
-	ChartTooltipContent,
-} from '@/components/ui/chart'
-import { chartTimeData, formatShortDate } from '@/lib/utils'
-import Spinner from '../spinner'
+	chartTimeData,
+	cn,
+	formatShortDate,
+	toFixedWithoutTrailingZeros,
+	useYaxisWidth,
+} from '@/lib/utils'
+// import Spinner from '../spinner'
 import { useStore } from '@nanostores/react'
 import { $chartTime } from '@/lib/stores'
-
-const chartConfig = {
-	read: {
-		label: 'Read',
-		color: 'hsl(var(--chart-1))',
-	},
-	write: {
-		label: 'Write',
-		color: 'hsl(var(--chart-3))',
-	},
-} satisfies ChartConfig
+import { SystemStatsRecord } from '@/types'
+import { useMemo, useRef } from 'react'

 export default function DiskIoChart({
-	chartData,
 	ticks,
+	systemData,
 }: {
-	chartData: { time: number; read: number; write: number }[]
 	ticks: number[]
+	systemData: SystemStatsRecord[]
 }) {
 	const chartTime = useStore($chartTime)
+	const chartRef = useRef<HTMLDivElement>(null)
+	const yAxisWidth = useYaxisWidth(chartRef)

-	if (!chartData.length || !ticks.length) {
-		return <Spinner />
-	}
+	const yAxisSet = useMemo(() => yAxisWidth !== 180, [yAxisWidth])
+
+	// if (!systemData.length || !ticks.length) {
+	// 	return <Spinner />
+	// }

 	return (
-		<ChartContainer config={chartConfig} className="h-full w-full absolute aspect-auto">
-			<AreaChart
-				accessibilityLayer
-				data={chartData}
-				margin={{
-					left: 0,
-					right: 0,
-					top: 10,
-					bottom: 0,
-				}}
+		<div ref={chartRef}>
+			{/* {!yAxisSet && <Spinner />} */}
+			<ChartContainer
+				config={{}}
+				className={cn('h-full w-full absolute aspect-auto bg-card opacity-0 transition-opacity', {
+					'opacity-100': yAxisSet,
+				})}
 			>
-				<CartesianGrid vertical={false} />
-				<YAxis
-					className="tracking-tighter"
-					width={75}
-					domain={[0, (max: number) => (max <= 0.4 ? 0.4 : Math.ceil(max))]}
-					tickFormatter={(value) => {
-						if (value >= 100) {
-							return value.toFixed(0)
-						}
-						return value.toFixed((value * 100) % 1 === 0 ? 1 : 2)
+				<AreaChart
+					accessibilityLayer
+					data={systemData}
+					margin={{
+						left: 0,
+						right: 0,
+						top: 10,
+						bottom: 0,
 					}}
-					tickLine={false}
-					axisLine={false}
-					unit={' MB/s'}
-				/>
-				<XAxis
-					dataKey="time"
-					domain={[ticks[0], ticks.at(-1)!]}
-					ticks={ticks}
-					type="number"
-					scale={'time'}
-					minTickGap={35}
-					tickMargin={8}
-					axisLine={false}
-					tickFormatter={chartTimeData[chartTime].format}
-				/>
-				<ChartTooltip
-					animationEasing="ease-out"
-					animationDuration={150}
-					content={
-						<ChartTooltipContent
-							unit=" MB/s"
-							labelFormatter={(_, data) => formatShortDate(data[0].payload.time)}
-							indicator="line"
-						/>
-					}
-				/>
-				<Area
-					dataKey="write"
-					type="monotoneX"
-					fill="var(--color-write)"
-					fillOpacity={0.4}
-					stroke="var(--color-write)"
-					animationDuration={1200}
-				/>
-				<Area
-					dataKey="read"
-					type="monotoneX"
-					fill="var(--color-read)"
-					fillOpacity={0.4}
-					stroke="var(--color-read)"
-					animationDuration={1200}
-				/>
-			</AreaChart>
-		</ChartContainer>
+				>
+					<CartesianGrid vertical={false} />
+					<YAxis
+						className="tracking-tighter"
+						width={yAxisWidth}
+						// domain={[0, (max: number) => (max <= 0.4 ? 0.4 : Math.ceil(max))]}
+						tickFormatter={(value) => toFixedWithoutTrailingZeros(value, 2)}
+						tickLine={false}
+						axisLine={false}
+						unit={' MB/s'}
+					/>
+					<XAxis
+						dataKey="created"
+						domain={[ticks[0], ticks.at(-1)!]}
+						ticks={ticks}
+						type="number"
+						scale={'time'}
+						minTickGap={35}
+						tickMargin={8}
+						axisLine={false}
+						tickFormatter={chartTimeData[chartTime].format}
+					/>
+					<ChartTooltip
+						animationEasing="ease-out"
+						animationDuration={150}
+						content={
+							<ChartTooltipContent
+								unit=" MB/s"
+								labelFormatter={(_, data) => formatShortDate(data[0].payload.created)}
+								indicator="line"
+							/>
+						}
+					/>
+					<Area
+						dataKey="stats.dw"
+						name="Write"
+						type="monotoneX"
+						fill="hsl(var(--chart-3))"
+						fillOpacity={0.4}
+						stroke="hsl(var(--chart-3))"
+						// animationDuration={1200}
+						isAnimationActive={false}
+					/>
+					<Area
+						dataKey="stats.dr"
+						name="Read"
+						type="monotoneX"
+						fill="hsl(var(--chart-1))"
+						fillOpacity={0.4}
+						stroke="hsl(var(--chart-1))"
+						// animationDuration={1200}
+						isAnimationActive={false}
+					/>
+				</AreaChart>
+			</ChartContainer>
+		</div>
 	)
 }
--- a/hub/site/src/components/charts/mem-chart.tsx
+++ b/hub/site/src/components/charts/mem-chart.tsx
@@ -1,113 +1,106 @@
 import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts'

-import {
-	ChartConfig,
-	ChartContainer,
-	ChartTooltip,
-	ChartTooltipContent,
-} from '@/components/ui/chart'
-import { chartTimeData, formatShortDate } from '@/lib/utils'
-import { useMemo } from 'react'
-import Spinner from '../spinner'
+import { ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart'
+import { chartTimeData, cn, formatShortDate, toFixedFloat, useYaxisWidth } from '@/lib/utils'
+import { useMemo, useRef } from 'react'
+// import Spinner from '../spinner'
 import { useStore } from '@nanostores/react'
 import { $chartTime } from '@/lib/stores'
+import { SystemStatsRecord } from '@/types'

 export default function MemChart({
-	chartData,
 	ticks,
+	systemData,
 }: {
-	chartData: { time: number; mem: number; memUsed: number; memCache: number }[]
 	ticks: number[]
+	systemData: SystemStatsRecord[]
 }) {
+	const chartRef = useRef<HTMLDivElement>(null)
+	const yAxisWidth = useYaxisWidth(chartRef)
 	const chartTime = useStore($chartTime)

+	const yAxisSet = useMemo(() => yAxisWidth !== 180, [yAxisWidth])
+
 	const totalMem = useMemo(() => {
-		const maxMem = Math.ceil(chartData[0]?.mem)
-		return maxMem > 2 && maxMem % 2 !== 0 ? maxMem + 1 : maxMem
-	}, [chartData])
-
-	const chartConfig = useMemo(
-		() => ({
-			memCache: {
-				label: 'Cache / Buffers',
-				color: 'hsl(var(--chart-2))',
-			},
-			memUsed: {
-				label: 'Used',
-				color: 'hsl(var(--chart-2))',
-			},
-		}),
-		[]
-	) satisfies ChartConfig
-
-	if (!chartData.length || !ticks.length) {
-		return <Spinner />
-	}
+		return toFixedFloat(systemData.at(-1)?.stats.m ?? 0, 1)
+	}, [systemData])

 	return (
-		<ChartContainer config={chartConfig} className="h-full w-full absolute aspect-auto">
-			<AreaChart
-				accessibilityLayer
-				data={chartData}
-				margin={{
-					top: 10,
-				}}
+		<div ref={chartRef}>
+			{/* {!yAxisSet && <Spinner />} */}
+			<ChartContainer
+				config={{}}
+				className={cn('h-full w-full absolute aspect-auto bg-card opacity-0 transition-opacity', {
+					'opacity-100': yAxisSet,
+				})}
 			>
-				<CartesianGrid vertical={false} />
-				<YAxis
-					// use "ticks" instead of domain / tickcount if need more control
-					domain={[0, totalMem]}
-					tickLine={false}
-					width={totalMem >= 100 ? 65 : 58}
-					// allowDecimals={false}
-					axisLine={false}
-					unit={' GB'}
-				/>
-				<XAxis
-					dataKey="time"
-					domain={[ticks[0], ticks.at(-1)!]}
-					ticks={ticks}
-					type="number"
-					scale={'time'}
-					minTickGap={35}
-					tickMargin={8}
-					axisLine={false}
-					tickFormatter={chartTimeData[chartTime].format}
-				/>
-				<ChartTooltip
-					// cursor={false}
-					animationEasing="ease-out"
-					animationDuration={150}
-					content={
-						<ChartTooltipContent
-							unit=" GB"
-							// @ts-ignore
-							itemSorter={(a, b) => a.name.localeCompare(b.name)}
-							labelFormatter={(_, data) => formatShortDate(data[0].payload.time)}
-							indicator="line"
+				<AreaChart
+					accessibilityLayer
+					data={systemData}
+					margin={{
+						top: 10,
+					}}
+				>
+					<CartesianGrid vertical={false} />
+					{totalMem && (
+						<YAxis
+							// use "ticks" instead of domain / tickcount if need more control
+							domain={[0, totalMem]}
+							className="tracking-tighter"
+							width={yAxisWidth}
+							tickLine={false}
+							axisLine={false}
+							unit={' GB'}
 						/>
-					}
-				/>
-				<Area
-					dataKey="memUsed"
-					type="monotoneX"
-					fill="var(--color-memUsed)"
-					fillOpacity={0.4}
-					stroke="var(--color-memUsed)"
-					stackId="a"
-					animationDuration={1200}
-				/>
-				<Area
-					dataKey="memCache"
-					type="monotoneX"
-					fill="var(--color-memCache)"
-					fillOpacity={0.2}
-					strokeOpacity={0.3}
-					stroke="var(--color-memCache)"
-					stackId="a"
-					animationDuration={1200}
-				/>
-			</AreaChart>
-		</ChartContainer>
+					)}
+					<XAxis
+						dataKey="created"
+						domain={[ticks[0], ticks.at(-1)!]}
+						ticks={ticks}
+						type="number"
+						scale={'time'}
+						minTickGap={35}
+						tickMargin={8}
+						axisLine={false}
+						tickFormatter={chartTimeData[chartTime].format}
+					/>
+					<ChartTooltip
+						// cursor={false}
+						animationEasing="ease-out"
+						animationDuration={150}
+						content={
+							<ChartTooltipContent
+								unit=" GB"
+								// @ts-ignore
+								itemSorter={(a, b) => a.name.localeCompare(b.name)}
+								labelFormatter={(_, data) => formatShortDate(data[0].payload.created)}
+								indicator="line"
+							/>
+						}
+					/>
+					<Area
+						dataKey="stats.mu"
+						name="Used"
+						type="monotoneX"
+						fill="hsl(var(--chart-2))"
+						fillOpacity={0.4}
+						stroke="hsl(var(--chart-2))"
+						stackId="1"
+						isAnimationActive={false}
+					/>
+					<Area
+						dataKey="stats.mb"
+						name="Cache / Buffers"
+						type="monotoneX"
+						fill="hsl(var(--chart-2))"
+						fillOpacity={0.2}
+						strokeOpacity={0.3}
+						stroke="hsl(var(--chart-2))"
+						stackId="1"
+						isAnimationActive={false}
+					/>
+				</AreaChart>
+			</ChartContainer>
+		</div>
 	)
 }
--- a/hub/site/src/components/charts/swap-chart.tsx
+++ b/hub/site/src/components/charts/swap-chart.tsx
@@ -0,0 +1,83 @@
+import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts'
+
+import { ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart'
+import {
+	chartTimeData,
+	cn,
+	formatShortDate,
+	toFixedWithoutTrailingZeros,
+	useYaxisWidth,
+} from '@/lib/utils'
+// import Spinner from '../spinner'
+import { useStore } from '@nanostores/react'
+import { $chartTime } from '@/lib/stores'
+import { SystemStatsRecord } from '@/types'
+import { useMemo, useRef } from 'react'
+
+export default function SwapChart({
+	ticks,
+	systemData,
+}: {
+	ticks: number[]
+	systemData: SystemStatsRecord[]
+}) {
+	const chartTime = useStore($chartTime)
+	const chartRef = useRef<HTMLDivElement>(null)
+	const yAxisWidth = useYaxisWidth(chartRef)
+
+	const yAxisSet = useMemo(() => yAxisWidth !== 180, [yAxisWidth])
+
+	return (
+		<div ref={chartRef}>
+			<ChartContainer
+				config={{}}
+				className={cn('h-full w-full absolute aspect-auto bg-card opacity-0 transition-opacity', {
+					'opacity-100': yAxisSet,
+				})}
+			>
+				<AreaChart accessibilityLayer data={systemData} margin={{ top: 10 }}>
+					<CartesianGrid vertical={false} />
+					<YAxis
+						className="tracking-tighter"
+						domain={[0, () => toFixedWithoutTrailingZeros(systemData.at(-1)?.stats.s ?? 0.04, 2)]}
+						width={yAxisWidth}
+						tickLine={false}
+						axisLine={false}
+						unit={' GB'}
+					/>
+					<XAxis
+						dataKey="created"
+						domain={[ticks[0], ticks.at(-1)!]}
+						ticks={ticks}
+						type="number"
+						scale={'time'}
+						minTickGap={35}
+						tickMargin={8}
+						axisLine={false}
+						tickFormatter={chartTimeData[chartTime].format}
+					/>
+					<ChartTooltip
+						animationEasing="ease-out"
+						animationDuration={150}
+						content={
+							<ChartTooltipContent
+								unit=" GB"
+								labelFormatter={(_, data) => formatShortDate(data[0].payload.created)}
+								indicator="line"
+							/>
+						}
+					/>
+					<Area
+						dataKey="stats.su"
+						name="Swap Usage"
+						type="monotoneX"
+						fill="hsl(var(--chart-2))"
+						fillOpacity={0.4}
+						stroke="hsl(var(--chart-2))"
+						isAnimationActive={false}
+					/>
+				</AreaChart>
+			</ChartContainer>
+		</div>
+	)
+}
--- a/hub/site/src/components/routes/home.tsx
+++ b/hub/site/src/components/routes/home.tsx
@@ -9,24 +9,22 @@ export default function () {
 	}, [])

 	return (
-		<>
-			<Card>
-				<CardHeader className="pb-5">
-					<CardTitle className={'mb-1.5'}>All Systems</CardTitle>
-					<CardDescription>
-						Updated in real time. Press{' '}
-						<kbd className="pointer-events-none inline-flex h-5 select-none items-center gap-0.5 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100">
-							<span className="text-xs">⌘</span>K
-						</kbd>{' '}
-						to open the command palette.
-					</CardDescription>
-				</CardHeader>
-				<CardContent>
-					<Suspense>
-						<SystemsTable />
-					</Suspense>
-				</CardContent>
-			</Card>
-		</>
+		<Card>
+			<CardHeader className="pb-2 md:pb-5 px-4 sm:px-7 max-sm:pt-5">
+				<CardTitle className="mb-1.5">All Systems</CardTitle>
+				<CardDescription>
+					Updated in real time. Press{' '}
+					<kbd className="pointer-events-none inline-flex h-5 select-none items-center gap-0.5 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100">
+						<span className="text-xs">⌘</span>K
+					</kbd>{' '}
+					to open the command palette.
+				</CardDescription>
+			</CardHeader>
+			<CardContent className="max-sm:p-2">
+				<Suspense>
+					<SystemsTable />
+				</Suspense>
+			</CardContent>
+		</Card>
 	)
 }
--- a/hub/site/src/components/routes/system.tsx
+++ b/hub/site/src/components/routes/system.tsx
@@ -1,12 +1,12 @@
 import { $updatedSystem, $systems, pb, $chartTime } from '@/lib/stores'
 import { ContainerStatsRecord, SystemRecord, SystemStatsRecord } from '@/types'
-import { Suspense, lazy, useCallback, useEffect, useMemo, useState } from 'react'
+import { Suspense, lazy, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { Card, CardHeader, CardTitle, CardDescription, CardContent } from '../ui/card'
 import { useStore } from '@nanostores/react'
 import Spinner from '../spinner'
 import { ClockArrowUp, CpuIcon, GlobeIcon } from 'lucide-react'
 import ChartTimeSelect from '../charts/chart-time-select'
-import { chartTimeData, cn, getPbTimestamp } from '@/lib/utils'
+import { chartTimeData, cn, getPbTimestamp, useClampedIsInViewport } from '@/lib/utils'
 import { Separator } from '../ui/separator'
 import { scaleTime } from 'd3-scale'
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../ui/tooltip'
@@ -18,6 +18,8 @@ const ContainerMemChart = lazy(() => import('../charts/container-mem-chart'))
 const DiskChart = lazy(() => import('../charts/disk-chart'))
 const DiskIoChart = lazy(() => import('../charts/disk-io-chart'))
 const BandwidthChart = lazy(() => import('../charts/bandwidth-chart'))
+const ContainerNetChart = lazy(() => import('../charts/container-net-chart'))
+const SwapChart = lazy(() => import('../charts/swap-chart'))

 export default function ServerDetail({ name }: { name: string }) {
 	const systems = useStore($systems)
@@ -25,27 +27,16 @@ export default function ServerDetail({ name }: { name: string }) {
 	const chartTime = useStore($chartTime)
 	const [ticks, setTicks] = useState([] as number[])
 	const [server, setServer] = useState({} as SystemRecord)
-	const [containers, setContainers] = useState([] as ContainerStatsRecord[])
-
 	const [systemStats, setSystemStats] = useState([] as SystemStatsRecord[])
-	const [cpuChartData, setCpuChartData] = useState([] as { time: number; cpu: number }[])
-	const [memChartData, setMemChartData] = useState(
-		[] as { time: number; mem: number; memUsed: number; memCache: number }[]
+	const [hasDockerStats, setHasDocker] = useState(false)
+	const [dockerCpuChartData, setDockerCpuChartData] = useState<Record<string, number | string>[]>(
+		[]
 	)
-	const [diskChartData, setDiskChartData] = useState(
-		[] as { time: number; disk: number; diskUsed: number }[]
+	const [dockerMemChartData, setDockerMemChartData] = useState<Record<string, number | string>[]>(
+		[]
 	)
-	const [diskIoChartData, setDiskIoChartData] = useState(
-		[] as { time: number; read: number; write: number }[]
-	)
-	const [bandwidthChartData, setBandwidthChartData] = useState(
-		[] as { time: number; sent: number; recv: number }[]
-	)
-	const [dockerCpuChartData, setDockerCpuChartData] = useState(
-		[] as Record<string, number | string>[]
-	)
-	const [dockerMemChartData, setDockerMemChartData] = useState(
-		[] as Record<string, number | string>[]
+	const [dockerNetChartData, setDockerNetChartData] = useState<Record<string, number | number[]>[]>(
+		[]
 	)

 	useEffect(() => {
@@ -53,18 +44,16 @@ export default function ServerDetail({ name }: { name: string }) {
 		return () => {
 			resetCharts()
 			$chartTime.set('1h')
+			setHasDocker(false)
 		}
 	}, [name])

-	const resetCharts = useCallback(() => {
+	function resetCharts() {
 		setSystemStats([])
-		setCpuChartData([])
-		setMemChartData([])
-		setDiskChartData([])
-		setBandwidthChartData([])
 		setDockerCpuChartData([])
 		setDockerMemChartData([])
-	}, [])
+		setDockerNetChartData([])
+	}

 	useEffect(resetCharts, [chartTime])

@@ -78,62 +67,46 @@ export default function ServerDetail({ name }: { name: string }) {
 		}
 	}, [name, server, systems])

-	// get stats
-	useEffect(() => {
-		if (!server.id || !chartTime) {
-			return
-		}
-		pb.collection<SystemStatsRecord>('system_stats')
-			.getFullList({
-				filter: pb.filter('system={:id} && created > {:created} && type={:type}', {
-					id: server.id,
-					created: getPbTimestamp(chartTime),
-					type: chartTimeData[chartTime].type,
-				}),
-				fields: 'created,stats',
-				sort: 'created',
-			})
-			.then((records) => {
-				// console.log('sctats', records)
-				setSystemStats(records)
-			})
-	}, [server, chartTime])
-
+	// update server when new data is available
 	useEffect(() => {
 		if (updatedSystem.id === server.id) {
 			setServer(updatedSystem)
 		}
 	}, [updatedSystem])

-	// create cpu / mem / disk data for charts
+	async function getStats<T>(collection: string): Promise<T[]> {
+		return await pb.collection<T>(collection).getFullList({
+			filter: pb.filter('system={:id} && created > {:created} && type={:type}', {
+				id: server.id,
+				created: getPbTimestamp(chartTime),
+				type: chartTimeData[chartTime].type,
+			}),
+			fields: 'created,stats',
+			sort: 'created',
+		})
+	}
+
+	// get stats
 	useEffect(() => {
-		if (!systemStats.length) {
+		if (!server.id || !chartTime) {
 			return
 		}
-		const cpuData = [] as typeof cpuChartData
-		const memData = [] as typeof memChartData
-		const diskData = [] as typeof diskChartData
-		const diskIoData = [] as typeof diskIoChartData
-		const networkData = [] as typeof bandwidthChartData
-		for (let { created, stats } of systemStats) {
-			const time = new Date(created).getTime()
-			cpuData.push({ time, cpu: stats.cpu })
-			memData.push({
-				time,
-				mem: stats.m,
-				memUsed: stats.mu,
-				memCache: stats.mb,
-			})
-			diskData.push({ time, disk: stats.d, diskUsed: stats.du })
-			diskIoData.push({ time, read: stats.dr, write: stats.dw })
-			networkData.push({ time, sent: stats.ns, recv: stats.nr })
-		}
-		setCpuChartData(cpuData)
-		setMemChartData(memData)
-		setDiskChartData(diskData)
-		setDiskIoChartData(diskIoData)
-		setBandwidthChartData(networkData)
-	}, [systemStats])
+		Promise.allSettled([
+			getStats<SystemStatsRecord>('system_stats'),
+			getStats<ContainerStatsRecord>('container_stats'),
+		]).then(([systemStats, containerStats]) => {
+			if (containerStats.status === 'fulfilled' && containerStats.value.length) {
+				setHasDocker(true)
+				makeContainerData(containerStats.value)
+			}
+			if (systemStats.status === 'fulfilled') {
+				for (const record of systemStats.value) {
+					record.created = new Date(record.created).getTime()
+				}
+				setSystemStats(systemStats.value)
+			}
+		})
+	}, [server, chartTime])

 	useEffect(() => {
 		if (!systemStats.length) {
@@ -141,51 +114,36 @@ export default function ServerDetail({ name }: { name: string }) {
 		}
 		const now = new Date()
 		const startTime = chartTimeData[chartTime].getOffset(now)
-		const scale = scaleTime([startTime.getTime(), now], [0, cpuChartData.length])
+		const scale = scaleTime([startTime.getTime(), now], [0, systemStats.length])
 		setTicks(scale.ticks(chartTimeData[chartTime].ticks).map((d) => d.getTime()))
 	}, [chartTime, systemStats])

-	// get container stats
-	useEffect(() => {
-		if (!server.id || !chartTime) {
-			return
-		}
-		pb.collection<ContainerStatsRecord>('container_stats')
-			.getFullList({
-				filter: pb.filter('system={:id} && created > {:created} && type={:type}', {
-					id: server.id,
-					created: getPbTimestamp(chartTime),
-					type: chartTimeData[chartTime].type,
-				}),
-				fields: 'created,stats',
-				sort: 'created',
-			})
-			.then((records) => {
-				setContainers(records)
-			})
-	}, [server, chartTime])
-
-	// container stats for charts
-	useEffect(() => {
+	// make container stats for charts
+	const makeContainerData = useCallback((containers: ContainerStatsRecord[]) => {
 		// console.log('containers', containers)
-		const dockerCpuData = [] as Record<string, number | string>[]
-		const dockerMemData = [] as Record<string, number | string>[]
-
+		const dockerCpuData = []
+		const dockerMemData = []
+		const dockerNetData = []
 		for (let { created, stats } of containers) {
 			const time = new Date(created).getTime()
-			let cpuData = { time } as (typeof dockerCpuChartData)[0]
-			let memData = { time } as (typeof dockerMemChartData)[0]
+			let cpuData = { time } as Record<string, number | string>
+			let memData = { time } as Record<string, number | string>
+			let netData = { time } as Record<string, number | number[]>
 			for (let container of stats) {
 				cpuData[container.n] = container.c
 				memData[container.n] = container.m
+				netData[container.n] = [container.ns, container.nr, container.ns + container.nr] // sent, received, total
 			}
 			dockerCpuData.push(cpuData)
 			dockerMemData.push(memData)
+			dockerNetData.push(netData)
 		}
-		// console.log('containerMemData', containerMemData)
+		// console.log('dockerMemData', dockerMemData)
 		setDockerCpuChartData(dockerCpuData)
 		setDockerMemChartData(dockerMemData)
-	}, [containers])
+		setDockerNetChartData(dockerNetData)
+	}, [])
+
 	const uptime = useMemo(() => {
 		let uptime = server.info?.u || 0
 		if (uptime < 172800) {
@@ -201,7 +159,7 @@ export default function ServerDetail({ name }: { name: string }) {
 	return (
 		<div className="grid gap-4 mb-10">
 			<Card>
-				<div className="grid gap-2 px-6 pt-4 pb-5">
+				<div className="grid gap-2 px-4 sm:px-6 pt-3 sm:pt-4 pb-5">
 					<h1 className="text-[1.6rem] font-semibold">{server.name}</h1>
 					<div className="flex flex-wrap items-center gap-3 gap-y-2 text-sm opacity-90">
 						<div className="capitalize flex gap-2 items-center">
@@ -250,43 +208,69 @@ export default function ServerDetail({ name }: { name: string }) {
 							</>
 						)}
 					</div>
+					<ChartTimeSelect className="mt-2 -ml-1 sm:hidden" />
 				</div>
 			</Card>

 			<ChartCard title="Total CPU Usage" description="Average system-wide CPU utilization">
-				<CpuChart chartData={cpuChartData} ticks={ticks} />
+				<CpuChart ticks={ticks} systemData={systemStats} />
 			</ChartCard>

-			{dockerCpuChartData.length > 0 && (
+			{hasDockerStats && (
 				<ChartCard title="Docker CPU Usage" description="CPU utilization of docker containers">
 					<ContainerCpuChart chartData={dockerCpuChartData} ticks={ticks} />
 				</ChartCard>
 			)}

 			<ChartCard title="Total Memory Usage" description="Precise utilization at the recorded time">
-				<MemChart chartData={memChartData} ticks={ticks} />
+				<MemChart ticks={ticks} systemData={systemStats} />
 			</ChartCard>

-			{dockerMemChartData.length > 0 && (
+			{hasDockerStats && (
 				<ChartCard title="Docker Memory Usage" description="Memory usage of docker containers">
 					<ContainerMemChart chartData={dockerMemChartData} ticks={ticks} />
 				</ChartCard>
 			)}

+			{(systemStats.at(-1)?.stats.s ?? 0) > 0 && (
+				<ChartCard title="Swap Usage" description="Swap space used by the system">
+					<SwapChart ticks={ticks} systemData={systemStats} />
+				</ChartCard>
+			)}
+
 			<ChartCard
 				title="Disk Usage"
 				description="Usage of partition where the root filesystem is mounted"
 			>
-				<DiskChart chartData={diskChartData} ticks={ticks} />
+				<DiskChart ticks={ticks} systemData={systemStats} />
 			</ChartCard>

 			<ChartCard title="Disk I/O" description="Throughput of root filesystem">
-				<DiskIoChart chartData={diskIoChartData} ticks={ticks} />
+				<DiskIoChart ticks={ticks} systemData={systemStats} />
 			</ChartCard>

 			<ChartCard title="Bandwidth" description="Network traffic of public interfaces">
-				<BandwidthChart chartData={bandwidthChartData} ticks={ticks} />
+				<BandwidthChart ticks={ticks} systemData={systemStats} />
 			</ChartCard>
+
+			{hasDockerStats && dockerNetChartData.length > 0 && (
+				<>
+					<ChartCard
+						title="Docker Network I/O"
+						description="Includes traffic between internal services"
+					>
+						<ContainerNetChart chartData={dockerNetChartData} ticks={ticks} />
+					</ChartCard>
+					{/* add space for tooltip if more than 12 containers */}
+					{Object.keys(dockerNetChartData[0]).length > 12 && (
+						<div
+							style={{
+								height: (Object.keys(dockerNetChartData[0]).length - 13) * 18,
+							}}
+						/>
+					)}
+				</>
+			)}
 		</div>
 	)
 }
@@ -300,17 +284,20 @@ function ChartCard({
 	description: string
 	children: React.ReactNode
 }) {
+	const target = useRef<HTMLDivElement>(null)
+	const [isInViewport, wrappedTargetRef] = useClampedIsInViewport({ target: target })
 	return (
-		<Card className="pb-4 col-span-full">
-			<CardHeader className="pb-5 pt-4 relative space-y-1">
+		<Card className="pb-2 sm:pb-4 col-span-full" ref={wrappedTargetRef}>
+			<CardHeader className="pb-5 pt-4 relative space-y-1 max-sm:py-3 max-sm:px-4">
 				<CardTitle className="text-xl sm:text-2xl">{title}</CardTitle>
 				<CardDescription>{description}</CardDescription>
-				<div className="w-full pt-1 sm:w-40 sm:absolute top-1.5 right-3.5">
+				<div className="w-full pt-1 sm:w-40 hidden sm:block absolute top-1.5 right-3.5">
 					<ChartTimeSelect />
 				</div>
 			</CardHeader>
-			<CardContent className={'pl-1 w-[calc(100%-1.6em)] h-52 relative'}>
-				<Suspense fallback={<Spinner />}>{children}</Suspense>
+			<CardContent className="pl-1 w-[calc(100%-1.6em)] h-52 relative">
+				{<Spinner />}
+				{isInViewport && <Suspense>{children}</Suspense>}
 			</CardContent>
 		</Card>
 	)
--- a/hub/site/src/components/ui/chart.tsx
+++ b/hub/site/src/components/ui/chart.tsx
@@ -100,6 +100,7 @@ const ChartTooltipContent = React.forwardRef<
 			nameKey?: string
 			labelKey?: string
 			unit?: string
+			contentFormatter?: (item: any, key: string) => React.ReactNode | string
 		}
 >(
 	(
@@ -119,6 +120,7 @@ const ChartTooltipContent = React.forwardRef<
 			labelKey,
 			unit,
 			itemSorter,
+			contentFormatter: content = undefined,
 		},
 		ref
 	) => {
@@ -180,7 +182,7 @@ const ChartTooltipContent = React.forwardRef<

 						return (
 							<div
-								key={item.dataKey}
+								key={item?.name || item.dataKey}
 								className={cn(
 									'flex w-full items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground',
 									indicator === 'dot' && 'items-center'
@@ -228,7 +230,9 @@ const ChartTooltipContent = React.forwardRef<
 											</div>
 											{item.value !== undefined && (
 												<span className="font-mono font-medium tabular-nums text-foreground">
-													{item.value.toLocaleString() + (unit ? unit : '')}
+													{content && typeof content === 'function'
+														? content(item, key)
+														: item.value.toLocaleString() + (unit ? unit : '')}
 												</span>
 											)}
 										</div>
--- a/hub/site/src/lib/utils.ts
+++ b/hub/site/src/lib/utils.ts
@@ -6,6 +6,8 @@ import { AlertRecord, ChartTimeData, ChartTimes, SystemRecord } from '@/types'
 import { RecordModel, RecordSubscription } from 'pocketbase'
 import { WritableAtom } from 'nanostores'
 import { timeDay, timeHour } from 'd3-time'
+import { useEffect, useState } from 'react'
+import useIsInViewport, { CallbackRef, HookOptions } from 'use-is-in-viewport'

 export function cn(...inputs: ClassValue[]) {
 	return twMerge(clsx(inputs))
@@ -32,16 +34,27 @@ const verifyAuth = () => {
 		.authRefresh()
 		.catch(() => {
 			pb.authStore.clear()
+			toast({
+				title: 'Failed to authenticate',
+				description: 'Please log in again',
+				variant: 'destructive',
+			})
 		})
 }

 export const updateSystemList = async () => {
-	try {
-		const records = await pb.collection<SystemRecord>('systems').getFullList({ sort: '+name' })
+	// try {
+	const records = await pb.collection<SystemRecord>('systems').getFullList({ sort: '+name' })
+	if (records.length) {
 		$systems.set(records)
-	} catch (e) {
+	} else {
 		verifyAuth()
 	}
+	// }
+	// catch (e) {
+	// 	console.log('verifying auth error', e)
+	// 	verifyAuth()
+	// }
 }

 export const updateAlerts = () => {
@@ -179,3 +192,47 @@ export const chartTimeData: ChartTimeData = {
 		getOffset: (endTime: Date) => timeDay.offset(endTime, -30),
 	},
 }
+
+/** Hacky solution to set the correct width of the yAxis in recharts */
+export function useYaxisWidth(chartRef: React.RefObject<HTMLDivElement>) {
+	const [yAxisWidth, setYAxisWidth] = useState(180)
+	useEffect(() => {
+		let interval = setInterval(() => {
+			// console.log('chartRef', chartRef.current)
+			const yAxisElement = chartRef?.current?.querySelector('.yAxis')
+			if (yAxisElement) {
+				// console.log('yAxisElement', yAxisElement)
+				clearInterval(interval)
+				setYAxisWidth(yAxisElement.getBoundingClientRect().width + 22)
+			}
+		}, 16)
+		return () => clearInterval(interval)
+	}, [])
+	return yAxisWidth
+}
+
+export function useClampedIsInViewport(options: HookOptions): [boolean | null, CallbackRef] {
+	const [isInViewport, wrappedTargetRef] = useIsInViewport(options)
+	const [wasInViewportAtleastOnce, setWasInViewportAtleastOnce] = useState(isInViewport)
+
+	useEffect(() => {
+		setWasInViewportAtleastOnce((prev) => {
+			// this will clamp it to the first true
+			// received from useIsInViewport
+			if (!prev) {
+				return isInViewport
+			}
+			return prev
+		})
+	}, [isInViewport])
+
+	return [wasInViewportAtleastOnce, wrappedTargetRef]
+}
+
+export function toFixedWithoutTrailingZeros(num: number, digits: number) {
+	return parseFloat(num.toFixed(digits)).toString()
+}
+
+export function toFixedFloat(num: number, digits: number) {
+	return parseFloat(num.toFixed(digits))
+}
--- a/hub/site/src/main.tsx
+++ b/hub/site/src/main.tsx
@@ -122,7 +122,7 @@ const Layout = () => {
 	return (
 		<>
 			<div className="container">
-				<div className="flex items-center h-16 bg-card px-6 border bt-0 rounded-md my-4">
+				<div className="flex items-center h-14 md:h-16 bg-card px-6 border bt-0 rounded-md my-4">
 					<Link
 						href="/"
 						aria-label="Home"
--- a/hub/site/src/types.d.ts
+++ b/hub/site/src/types.d.ts
@@ -38,6 +38,10 @@ export interface SystemStats {
 	mp: number
 	/** memory buffer + cache (gb) */
 	mb: number
+	/** swap space (gb) */
+	s: number
+	/** swap used (gb) */
+	su: number
 	/** disk size (gb) */
 	d: number
 	/** disk used (gb) */
@@ -57,6 +61,7 @@ export interface SystemStats {
 export interface ContainerStatsRecord extends RecordModel {
 	system: string
 	stats: ContainerStats[]
+	created: string | number
 }

 interface ContainerStats {
@@ -66,11 +71,16 @@ interface ContainerStats {
 	c: number
 	/** memory used (gb) */
 	m: number
+	// network sent (mb)
+	ns: number
+	// network received (mb)
+	nr: number
 }

 export interface SystemStatsRecord extends RecordModel {
 	system: string
 	stats: SystemStats
+	created: string | number
 }

 export interface AlertRecord extends RecordModel {
--- a/hub/types.go
+++ b/hub/types.go
@@ -34,6 +34,8 @@ type SystemStats struct {
 	MemUsed      float64 `json:"mu"`
 	MemPct       float64 `json:"mp"`
 	MemBuffCache float64 `json:"mb"`
+	Swap         float64 `json:"s"`
+	SwapUsed     float64 `json:"su"`
 	Disk         float64 `json:"d"`
 	DiskUsed     float64 `json:"du"`
 	DiskPct      float64 `json:"dp"`
@@ -44,9 +46,11 @@ type SystemStats struct {
 }

 type ContainerStats struct {
-	Name string  `json:"n"`
-	Cpu  float64 `json:"c"`
-	Mem  float64 `json:"m"`
+	Name        string  `json:"n"`
+	Cpu         float64 `json:"c"`
+	Mem         float64 `json:"m"`
+	NetworkSent float64 `json:"ns"`
+	NetworkRecv float64 `json:"nr"`
 }

 type EmailData struct {
--- a/readme.md
+++ b/readme.md
@@ -45,7 +45,7 @@ Pour le tutoriel en français, consultez https://belginux.com/installer-beszel-a

 ## Installation

-You may choose to install the hub and agent as single binaries, or as docker images.
+You may install the hub and agent as single binaries, or by using Docker.

 ### Docker

@@ -61,96 +61,38 @@ If you don't need network stats, remove that line from the compose file and map

 ### Binary

+> [!TIP]
+> If using Linux, see [guides/systemd.md](/supplemental/guides/systemd.md) for a script to install the hub or agent as a system service. The agent installer will be built into the web UI in the future.
+
 Download and run the latest binaries from the [releases page](https://github.com/henrygd/beszel/releases) or use the commands below.

-#### Hub:
+#### Hub

 ```bash
 curl -sL "https://github.com/henrygd/beszel/releases/latest/download/beszel_$(uname -s)_$(uname -m | sed 's/x86_64/amd64/' | sed 's/armv7l/arm/' | sed 's/aarch64/arm64/').tar.gz" | tar -xz -O beszel | tee ./beszel >/dev/null && chmod +x beszel && ls beszel
 ```

-##### Running the hub directly
+Running the hub directly:

 ```bash
 ./beszel serve
 ```

-##### Running the hub as a system service (Linux)
-
-This runs the hub in the background continuously.
-
-1. Create the system service at `/etc/systemd/system/beszel.service`
-
-```bash
-[Unit]
-Description=Beszel Hub Service
-After=network.target
-
-[Service]
-# update the values in the curly braces below (remove the braces)
-ExecStart={/path/to/working/directory}/beszel serve
-WorkingDirectory={/path/to/working/directory}
-User={YOUR_USERNAME}
-Restart=always
-
-[Install]
-WantedBy=multi-user.target
-```
-
-2. Start and enable the service to let it run after system boot
-
-```bash
-sudo systemctl daemon-reload
-sudo systemctl enable beszel.service
-sudo systemctl start beszel.service
-```
-
-#### Agent:
+#### Agent

 ```bash
 curl -sL "https://github.com/henrygd/beszel/releases/latest/download/beszel-agent_$(uname -s)_$(uname -m | sed 's/x86_64/amd64/' | sed 's/armv7l/arm/' | sed 's/aarch64/arm64/').tar.gz" | tar -xz -O beszel-agent | tee ./beszel-agent >/dev/null && chmod +x beszel-agent && ls beszel-agent
 ```

-##### Running the agent directly
+Running the agent directly:

 ```bash
 PORT=45876 KEY="{PASTE_YOUR_KEY}" ./beszel-agent
 ```

-##### Running the agent as a system service (Linux)
-
-This runs the agent in the background continuously.
-
-1. Create the system service at `/etc/systemd/system/beszel-agent.service`
-
-```bash
-[Unit]
-Description=Beszel Agent Service
-After=network.target
-
-[Service]
-# update the values in curly braces below (remove the braces)
-Environment="PORT={PASTE_YOUR_PORT_HERE}"
-Environment="KEY={PASTE_YOUR_KEY_HERE}"
-ExecStart={/path/to/directory}/beszel-agent
-User={YOUR_USERNAME}
-Restart=always
-
-[Install]
-WantedBy=multi-user.target
-```
-
-2. Start and enable the service to let it run after system boot
-
-```bash
-sudo systemctl daemon-reload
-sudo systemctl enable beszel-agent.service
-sudo systemctl start beszel-agent.service
-```
-
 #### Updating

-Use `beszel update` and `beszel-agent update` to update to the latest version.
+Use `./beszel update` and `./beszel-agent update` to update to the latest version.

 ## Environment Variables

@@ -162,19 +104,20 @@ Use `beszel update` and `beszel-agent update` to update to the latest version.

 ### Agent

-| Name         | Default | Description                                                |
-| ------------ | ------- | ---------------------------------------------------------- |
-| `FILESYSTEM` | unset   | Filesystem / partition to use for disk I/O stats           |
-| `KEY`        | unset   | Public SSH key to use for authentication. Provided in hub. |
-| `PORT`       | 45876   | Port to listen on                                          |
+| Name          | Default | Description                                                        |
+| ------------- | ------- | ------------------------------------------------------------------ |
+| `DOCKER_HOST` | unset   | Overrides the docker host (docker.sock) if using a proxy.[^socket] |
+| `FILESYSTEM`  | unset   | Filesystem / partition to use for disk I/O stats.                  |
+| `KEY`         | unset   | Public SSH key to use for authentication. Provided in hub.         |
+| `PORT`        | 45876   | Port or address:port to listen on.                                 |
+
+[^socket]: Beszel only needs access to read container information. For [linuxserver/docker-socket-proxy](https://github.com/linuxserver/docker-socket-proxy) you would set `CONTAINERS=1`.

 ## OAuth / OIDC setup

-Beszel supports OpenID Connect and many OAuth2 authentication providers (see list below). To enable, do the following:
+Beszel supports OpenID Connect and many OAuth2 authentication providers (see list below).

-1. Make sure your "Application URL" is set correctly in the PocketBase settings.
-2. Create an OAuth2 application using your provider of choice. The redirect / callback URL should be `<your-beszel-url>/api/oauth2-redirect`.
-3. When you have the client ID and secret, go to the "Auth providers" page and enable your provider.
+Visit the "Auth providers" page to enable your provider. The redirect / callback URL should be `<your-beszel-url>/api/oauth2-redirect`.

 <details>
  <summary>Supported provider list</summary>
@@ -237,9 +180,20 @@ Cannot create systems, but can view any system that has been shared with them by

 ### Agent is not connecting

-Assuming the agent is running, the connection is probably being blocked by a firewall. You need to add an inbound rule on the agent system to allow TCP connections to the port. Check any active firewalls, like iptables or ufw, and in your cloud provider account if applicable.
+Assuming the agent is running, the connection is probably being blocked by a firewall. You have two options:

-Connectivity can be tested by running `telnet <agent-ip> <port>` or `nc -zv <agent-ip> <port>` from a remote machine.
+1. Add an inbound rule to the agent system's firewall(s) to allow TCP connections to the port. Check any active firewalls, like iptables, and in your cloud provider account if applicable.
+2. Alternatively, software like [Cloudflare Tunnel](https://www.cloudflare.com/products/tunnel/), [WireGuard](https://www.wireguard.com/), or [Tailscale](https://tailscale.com/) can be used to securely bypass your firewall.
+
+Connectivity can be tested by running `telnet <agent-ip> <port>`.
+
+### Connecting the hub and agent on the same system using Docker
+
+If using host network mode for the agent but not the hub, you can add your system using the hostname `host.docker.internal`, which resolves to the internal IP address used by the host. See [example docker-compose.yml](/supplemental/docker/same-system/docker-compose.yml).
+
+If using host network for both, you can use `localhost` as the hostname.
+
+Otherwise you can use the agent's `container_name` as the hostname if both are in the same docker network.

 ### Finding the correct filesystem

--- a/supplemental/docker/same-system/docker-compose.yml
+++ b/supplemental/docker/same-system/docker-compose.yml
@@ -0,0 +1,23 @@
+services:
+  beszel:
+    image: 'henrygd/beszel'
+    container_name: 'beszel'
+    restart: unless-stopped
+    ports:
+      - '8090:8090'
+    volumes:
+      - ./beszel_data:/beszel_data
+    extra_hosts:
+      - 'host.docker.internal:host-gateway'
+
+  beszel-agent:
+    image: 'henrygd/beszel-agent'
+    container_name: 'beszel-agent'
+    restart: unless-stopped
+    network_mode: host
+    volumes:
+      - /var/run/docker.sock:/var/run/docker.sock:ro
+    environment:
+      PORT: 45876
+      KEY: '...'
+      # FILESYSTEM: /dev/sda1 # set to the correct filesystem for disk I/O stats
--- a/supplemental/guides/systemd.md
+++ b/supplemental/guides/systemd.md
@@ -0,0 +1,127 @@
+# Installing as a Linux systemd service
+
+This is useful if you want to run the hub or agent in the background continuously, including after a reboot.
+
+## Install script (recommended)
+
+There are two scripts, one for the hub and one for the agent. You can run either one, or both.
+
+The install script creates a dedicated user for the service (`beszel`), downloads the latest release, and installs the service.
+
+> [!NOTE]
+> You need system administrator privileges to run the install script. If you encounter a problem, please [open an issue](https://github.com/henrygd/beszel/issues/new).
+
+### Hub
+
+Download the script:
+
+```bash
+curl -sL https://raw.githubusercontent.com/henrygd/beszel/main/supplemental/scripts/install-hub.sh -o install-hub.sh && chmod +x install-hub.sh
+```
+
+#### Install
+
+```bash
+./install-hub.sh
+```
+
+#### Uninstall
+
+```bash
+./install-hub.sh -u
+```
+
+#### Update
+
+```bash
+sudo /opt/beszel/beszel update && sudo systemctl restart beszel
+```
+
+### Agent
+
+Download the script:
+
+```bash
+curl -sL https://raw.githubusercontent.com/henrygd/beszel/main/supplemental/scripts/install-agent.sh -o install-agent.sh && chmod +x install-agent.sh
+```
+
+#### Install
+
+You may optionally include the SSH key and port as arguments. Run `./install-agent.sh -h` for more info.
+
+If specifying your key with `-k`, please make sure to enclose it in quotes.
+
+```bash
+./install-agent.sh
+```
+
+#### Uninstall
+
+```bash
+./install-agent.sh -u
+```
+
+#### Update
+
+```bash
+sudo /opt/beszel-agent/beszel-agent update && sudo systemctl restart beszel-agent
+```
+
+## Manual install
+
+1. Create the system service at `/etc/systemd/system/beszel.service`
+
+```bash
+[Unit]
+Description=Beszel Hub Service
+After=network.target
+
+[Service]
+# update the values in the curly braces below (remove the braces)
+ExecStart={/path/to/working/directory}/beszel serve
+WorkingDirectory={/path/to/working/directory}
+User={YOUR_USERNAME}
+Restart=always
+
+[Install]
+WantedBy=multi-user.target
+```
+
+2. Start and enable the service to let it run after system boot
+
+```bash
+sudo systemctl daemon-reload
+sudo systemctl enable beszel.service
+sudo systemctl start beszel.service
+```
+
+## Run the agent as a system service (Linux)
+
+This runs the agent in the background continuously using systemd.
+
+1. Create the system service at `/etc/systemd/system/beszel-agent.service`
+
+```bash
+[Unit]
+Description=Beszel Agent Service
+After=network.target
+
+[Service]
+# update the values in curly braces below (remove the braces)
+Environment="PORT={PASTE_YOUR_PORT_HERE}"
+Environment="KEY={PASTE_YOUR_KEY_HERE}"
+ExecStart={/path/to/directory}/beszel-agent
+User={YOUR_USERNAME}
+Restart=always
+
+[Install]
+WantedBy=multi-user.target
+```
+
+2. Start and enable the service to let it run after system boot
+
+```bash
+sudo systemctl daemon-reload
+sudo systemctl enable beszel-agent.service
+sudo systemctl start beszel-agent.service
+```
--- a/supplemental/scripts/install-agent.sh
+++ b/supplemental/scripts/install-agent.sh
@@ -0,0 +1,134 @@
+#!/bin/bash
+version=0.0.1
+# Define default values
+PORT=45876
+
+# Read command line options
+while getopts ":k:p:uh" opt; do
+  case $opt in
+    k) KEY="$OPTARG";;
+    p) PORT="$OPTARG";;
+    u) UNINSTALL="true";;
+    h) printf "Beszel Agent installation script\n\n"
+       printf "Usage: ./install-agent.sh [options]\n\n"
+       printf "Options: \n"
+       printf "  -k  : SSH key (required, or interactive if not provided)\n"
+       printf "  -p  : Port (default: $PORT)\n"
+       printf "  -u  : Uninstall the Beszel Agent\n"
+       printf "  -h  : Display this help message\n"
+       exit 0;;
+    \?) echo "Invalid option: -$OPTARG"; exit 1;;
+  esac
+done
+
+if [ "$UNINSTALL" = "true" ]; then
+  # Stop and disable the Beszel Agent service
+  echo "Stopping and disabling the Beszel Agent service..."
+  sudo systemctl stop beszel-agent.service
+  sudo systemctl disable beszel-agent.service
+
+  # Remove the systemd service file
+  echo "Removing the systemd service file..."
+  sudo rm /etc/systemd/system/beszel-agent.service
+
+  # Reload the systemd daemon
+  echo "Reloading the systemd daemon..."
+  sudo systemctl daemon-reload
+
+  # Remove the Beszel Agent directory
+  echo "Removing the Beszel Agent directory..."
+  sudo rm -rf /opt/beszel-agent
+
+  # Remove the dedicated user for the Beszel Agent service
+  echo "Removing the dedicated user for the Beszel Agent service..."
+  sudo userdel beszel
+
+  echo "The Beszel Agent has been uninstalled successfully!"
+else
+  # Function to check if a package is installed
+  package_installed() {
+    command -v "$1" >/dev/null 2>&1
+  }
+
+  # Check for package manager and install necessary packages if not installed
+  if package_installed apt-get; then
+    if ! package_installed tar || ! package_installed curl; then
+      sudo apt-get update
+      sudo apt-get install -y tar curl
+    fi
+  elif package_installed yum; then
+    if ! package_installed tar || ! package_installed curl; then
+      sudo yum install -y tar curl
+    fi
+  elif package_installed pacman; then
+    if ! package_installed tar || ! package_installed curl; then
+      sudo pacman -Sy --noconfirm tar curl
+    fi
+  else
+    echo "Warning: Please ensure 'tar' and 'curl' are installed."
+  fi
+
+  # If no SSH key is provided, ask for the SSH key interactively
+  if [ -z "$KEY" ]; then
+    read -p "Enter your SSH key: " KEY
+  fi
+
+  # Create a dedicated user for the service if it doesn't exist
+  if ! id -u beszel > /dev/null 2>&1; then
+    echo "Creating a dedicated user for the Beszel Agent service..."
+    sudo useradd -M -s /bin/false beszel
+  fi
+  # Add the user to the docker group to allow access to the Docker socket
+  sudo usermod -aG docker beszel
+
+  # Create the directory for the Beszel Agent
+  if [ ! -d "/opt/beszel-agent" ]; then
+    echo "Creating the directory for the Beszel Agent..."
+    sudo mkdir -p /opt/beszel-agent
+    sudo chown beszel:beszel /opt/beszel-agent
+    sudo chmod 755 /opt/beszel-agent
+  fi
+
+  # Download and install the Beszel Agent
+  echo "Downloading and installing the Beszel Agent..."
+  curl -sL "https://github.com/henrygd/beszel/releases/latest/download/beszel-agent_$(uname -s)_$(uname -m | sed 's/x86_64/amd64/' | sed 's/armv7l/arm/' | sed 's/aarch64/arm64/').tar.gz" | tar -xz -O beszel-agent | tee ./beszel-agent >/dev/null
+  sudo mv ./beszel-agent /opt/beszel-agent/beszel-agent
+  sudo chown beszel:beszel /opt/beszel-agent/beszel-agent
+  sudo chmod 755 /opt/beszel-agent/beszel-agent
+
+  # Create the systemd service
+  echo "Creating the systemd service for the Beszel Agent..."
+  sudo tee /etc/systemd/system/beszel-agent.service <<EOF
+[Unit]
+Description=Beszel Agent Service
+After=network.target
+
+[Service]
+Environment="PORT=$PORT"
+Environment="KEY=$KEY"
+ExecStart=/opt/beszel-agent/beszel-agent
+User=beszel
+Restart=always
+
+[Install]
+WantedBy=multi-user.target
+EOF
+
+  # Load and start the service
+  printf "\nLoading and starting the Beszel Agent service...\n"
+  sudo systemctl daemon-reload
+  sudo systemctl enable beszel-agent.service
+  sudo systemctl start beszel-agent.service
+
+  # Wait for the service to start or fail
+  sleep 1
+
+  # Check if the service is running
+  if [ "$(systemctl is-active beszel-agent.service)" != "active" ]; then
+    echo "Error: The Beszel Agent service is not running."
+    echo "$(systemctl status beszel-agent.service)"
+    exit 1
+  fi
+
+  echo "The Beszel Agent has been installed and configured successfully! It is now running on port $PORT."
+fi
--- a/supplemental/scripts/install-hub.sh
+++ b/supplemental/scripts/install-hub.sh
@@ -0,0 +1,117 @@
+#!/bin/bash
+version=0.0.1
+# Define default values
+
+# Read command line options
+while getopts ":uh" opt; do
+  case $opt in
+    u) UNINSTALL="true";;
+    h) printf "Beszel Hub installation script\n\n";
+       printf "Usage: ./install-hub.sh [options]\n\n";
+       printf "Options: \n"
+       printf "  -u  : Uninstall the Beszel Hub\n";
+       echo "  -h  : Display this help message";
+       exit 0;;
+    \?) echo "Invalid option: -$OPTARG"; exit 1;;
+  esac
+done
+
+if [ "$UNINSTALL" = "true" ]; then
+  # Stop and disable the Beszel Hub service
+  echo "Stopping and disabling the Beszel Hub service..."
+  sudo systemctl stop beszel-hub.service
+  sudo systemctl disable beszel-hub.service
+
+  # Remove the systemd service file
+  echo "Removing the systemd service file..."
+  sudo rm /etc/systemd/system/beszel-hub.service
+
+  # Reload the systemd daemon
+  echo "Reloading the systemd daemon..."
+  sudo systemctl daemon-reload
+
+  # Remove the Beszel Hub binary
+  echo "Removing the Beszel Hub binary..."
+  sudo rm /opt/beszel/beszel
+
+  # Remove the Beszel Hub directory
+  echo "Removing the Beszel Hub directory..."
+  sudo rm -rf /opt/beszel
+
+  # Remove the dedicated user
+  echo "Removing the dedicated user..."
+  sudo userdel beszel
+
+  echo "The Beszel Hub has been uninstalled successfully!"
+else
+  # Function to check if a package is installed
+  package_installed() {
+    command -v "$1" >/dev/null 2>&1
+  }
+
+  # Check for package manager and install necessary packages if not installed
+  if package_installed apt-get; then
+    if ! package_installed tar || ! package_installed curl; then
+      sudo apt-get update
+      sudo apt-get install -y tar curl
+    fi
+  elif package_installed yum; then
+    if ! package_installed tar || ! package_installed curl; then
+      sudo yum install -y tar curl
+    fi
+  elif package_installed pacman; then
+    if ! package_installed tar || ! package_installed curl; then
+      sudo pacman -Sy --noconfirm tar curl
+    fi
+  else
+    echo "Warning: Please ensure 'tar' and 'curl' are installed."
+  fi
+
+  # Create a dedicated user for the service if it doesn't exist
+  if ! id -u beszel > /dev/null 2>&1; then
+    echo "Creating a dedicated user for the Beszel Hub service..."
+    sudo useradd -M -s /bin/false beszel
+  fi
+
+  # Download and install the Beszel Hub
+  echo "Downloading and installing the Beszel Hub..."
+  curl -sL "https://github.com/henrygd/beszel/releases/latest/download/beszel_$(uname -s)_$(uname -m | sed 's/x86_64/amd64/' | sed 's/armv7l/arm/' | sed 's/aarch64/arm64/').tar.gz" | tar -xz -O beszel | tee ./beszel >/dev/null && chmod +x beszel
+  sudo mkdir -p /opt/beszel/beszel_data
+  sudo mv ./beszel /opt/beszel/beszel
+  sudo chown -R beszel:beszel /opt/beszel
+
+  # Create the systemd service
+  printf "Creating the systemd service for the Beszel Hub...\n\n"
+  sudo tee /etc/systemd/system/beszel-hub.service <<EOF
+[Unit]
+Description=Beszel Hub Service
+After=network.target
+
+[Service]
+ExecStart=/opt/beszel/beszel serve
+WorkingDirectory=/opt/beszel
+User=beszel
+Restart=always
+
+[Install]
+WantedBy=multi-user.target
+EOF
+
+  # Load and start the service
+  printf "\nLoading and starting the Beszel Hub service...\n"
+  sudo systemctl daemon-reload
+  sudo systemctl enable beszel-hub.service
+  sudo systemctl start beszel-hub.service
+
+  # Wait for the service to start or fail
+  sleep 2
+
+  # Check if the service is running
+  if [ "$(systemctl is-active beszel-hub.service)" != "active" ]; then
+    echo "Error: The Beszel Hub service is not running."
+    echo "$(systemctl status beszel-hub.service)"
+    exit 1
+  fi
+
+  echo "The Beszel Hub has been installed and configured successfully! It is now accessible on port 8090."
+fi
Author	SHA1	Message	Date
Henry Dollman	8a04a9bed6	release 0.1.2	2024-08-07 16:19:27 -04:00
Henry Dollman	3f692ce528	close idle connections on timeout	2024-08-07 16:12:18 -04:00
Henry Dollman	876fb6e02e	refresh auth status if no systems are found	2024-08-07 15:07:22 -04:00
Henry Dollman	2eb691661c	improve y axis annoyances on charts	2024-08-06 20:23:59 -04:00
Henry Dollman	f4332d69d5	adjust y axis width	2024-08-06 18:50:12 -04:00
Henry Dollman	b958e84572	fix: down systems jamming the system update queue	2024-08-06 18:15:12 -04:00
Henry Dollman	7ce6f76315	use precise number for max mem in memory chart	2024-08-06 17:36:11 -04:00
Henry Dollman	cdd10a3011	add swap usage chart	2024-08-06 16:46:25 -04:00
Henry Dollman	dcdee1d943	update deps for agent	2024-08-06 16:25:41 -04:00
Henry Dollman	f4e82ecd59	update readme	2024-08-06 15:13:06 -04:00
Henry Dollman	b8a2d0f32f	use txDao in deleteOldRecords for deletion only	2024-08-06 15:09:46 -04:00
Henry Dollman	f13f0b2f8a	make sure deletion of container stats is thread safe	2024-08-06 14:44:31 -04:00
Henry Dollman	fdf0ce22dc	improve chart scaling + add space below docker net chart for tooltip	2024-08-05 19:17:54 -04:00
Henry Dollman	f36b0a4528	add freebsd and mips64 binaries	2024-08-05 19:04:52 -04:00
Henry Dollman	a73a01fe37	measure docker network stats per second	2024-08-05 18:58:00 -04:00
Henry Dollman	c6b9f1ab77	use promise.allsettled to stop docker chart from populating later	2024-08-04 21:51:11 -04:00
Henry Dollman	8ef30e0733	lazy load charts and disable chart animations	2024-08-04 20:14:13 -04:00
Henry Dollman	e3ed07a999	adapt y axis width in recharts	2024-08-04 16:35:12 -04:00
Henry Dollman	b05184a654	mobile style tweaks	2024-08-04 13:58:18 -04:00
Henry Dollman	2a3b228668	add docker container net stats	2024-08-04 13:26:17 -04:00
Henry Dollman	c3e3d483b0	update js deps	2024-08-04 13:19:19 -04:00
Henry Dollman	b0c6151664	simplify system chart data	2024-08-02 19:55:38 -04:00
Henry Dollman	c9196def32	update install-agent.sh to add beszel user to docker group	2024-08-02 14:59:26 -04:00
Henry Dollman	59cbaf3009	fix FromAsCasing warning	2024-08-02 13:06:49 -04:00
Henry Dollman	bc3f7257c0	update systemd guide	2024-08-01 17:49:17 -04:00
Henry Dollman	4ae65f061c	Merge branch 'delta-whiplash-main'	2024-08-01 17:44:00 -04:00
Henry Dollman	0f9aa11255	update docs for systemd / reorganize supplemental directory	2024-08-01 17:40:15 -04:00
Henry Dollman	092f09b084	update linux install scripts to work with other distros	2024-08-01 16:00:19 -04:00
DeltaWhiplash	4841b95a8d	Update the Readme for new install scripts	2024-08-01 15:50:38 +02:00
DeltaWhiplash	0ab9ba0614	add dependencies install for the hub script installer	2024-08-01 15:40:06 +02:00
DeltaWhiplash	d809704ab3	Add Automated hub install script for debian/ubuntu	2024-08-01 15:36:56 +02:00
DeltaWhiplash	8d71e95d0b	Add Automated agent install script for debian/ubuntu	2024-08-01 15:27:51 +02:00
Henry Dollman	e204bcf9ce	add support for docker socket proxy	2024-07-31 19:14:51 -04:00
Henry Dollman	e26e9fce03	move systemd instructions to the supplemental directory	2024-07-31 17:37:38 -04:00
Henry Dollman	4dd201de0d	use more specific methods to retrieve record fields	2024-07-31 16:52:26 -04:00
Henry Dollman	de7e07963d	improve efficiency of hourly cleanup operation	2024-07-31 16:26:41 -04:00
Henry Dollman	ac6f50c40c	update readme and add same-system docker example	2024-07-31 15:59:10 -04:00
hank	4c680a2ab9	update readme - add path to update commands	2024-07-28 22:30:31 -04:00