add system_details collection for infrequently updated data

- add includedetails flag to data requests for better efficiency
- integrate docker host info api for better os detection
- pull more OS details as well as cpu arch
- separate info bar component and refactor for new info

internal/alerts/alerts_battery_test.go

@@ -60,10 +60,10 @@ func TestBatteryAlertLogic(t *testing.T) {
 	combinedDataHigh := &system.CombinedData{
 		Stats: statsHigh,
 		Info: system.Info{
-			Hostname: "test-host",
-			Cpu:      10,
-			MemPct:   30,
-			DiskPct:  40,
+			AgentVersion: "0.12.0",
+			Cpu:          10,
+			MemPct:       30,
+			DiskPct:      40,
 		},
 	}
 
@@ -100,10 +100,10 @@ func TestBatteryAlertLogic(t *testing.T) {
 	combinedDataLow := &system.CombinedData{
 		Stats: statsLow,
 		Info: system.Info{
-			Hostname: "test-host",
-			Cpu:      10,
-			MemPct:   30,
-			DiskPct:  40,
+			AgentVersion: "0.12.0",
+			Cpu:          10,
+			MemPct:       30,
+			DiskPct:      40,
 		},
 	}
 
@@ -142,10 +142,10 @@ func TestBatteryAlertLogic(t *testing.T) {
 	combinedDataRecovered := &system.CombinedData{
 		Stats: statsRecovered,
 		Info: system.Info{
-			Hostname: "test-host",
-			Cpu:      10,
-			MemPct:   30,
-			DiskPct:  40,
+			AgentVersion: "0.12.0",
+			Cpu:          10,
+			MemPct:       30,
+			DiskPct:      40,
 		},
 	}
 
@@ -198,10 +198,10 @@ func TestBatteryAlertNoBattery(t *testing.T) {
 	combinedData := &system.CombinedData{
 		Stats: statsNoBattery,
 		Info: system.Info{
-			Hostname: "test-host",
-			Cpu:      10,
-			MemPct:   30,
-			DiskPct:  40,
+			AgentVersion: "0.12.0",
+			Cpu:          10,
+			MemPct:       30,
+			DiskPct:      40,
 		},
 	}
 
@@ -294,10 +294,10 @@ func TestBatteryAlertAveragedSamples(t *testing.T) {
 			Battery: [2]uint8{15, 1},
 		},
 		Info: system.Info{
-			Hostname: "test-host",
-			Cpu:      10,
-			MemPct:   30,
-			DiskPct:  40,
+			AgentVersion: "0.12.0",
+			Cpu:          10,
+			MemPct:       30,
+			DiskPct:      40,
 		},
 	}
 
@@ -360,10 +360,10 @@ func TestBatteryAlertAveragedSamples(t *testing.T) {
 			Battery: [2]uint8{50, 1},
 		},
 		Info: system.Info{
-			Hostname: "test-host",
-			Cpu:      10,
-			MemPct:   30,
-			DiskPct:  40,
+			AgentVersion: "0.12.0",
+			Cpu:          10,
+			MemPct:       30,
+			DiskPct:      40,
 		},
 	}
 

internal/common/common-ws.go

@@ -58,8 +58,8 @@ type FingerprintResponse struct {
 }
 
 type DataRequestOptions struct {
-	CacheTimeMs uint16 `cbor:"0,keyasint"`
-	// ResourceType uint8  `cbor:"1,keyasint,omitempty,omitzero"`
+	CacheTimeMs    uint16 `cbor:"0,keyasint"`
+	IncludeDetails bool   `cbor:"1,keyasint"`
 }
 
 type ContainerLogsRequest struct {

internal/entities/container/container.go

@@ -34,6 +34,14 @@ type ApiStats struct {
 	MemoryStats MemoryStats `json:"memory_stats"`
 }
 
+// Docker system info from /info API endpoint
+type HostInfo struct {
+	OperatingSystem string `json:"OperatingSystem"`
+	KernelVersion   string `json:"KernelVersion"`
+	NCPU            int    `json:"NCPU"`
+	MemTotal        uint64 `json:"MemTotal"`
+}
+
 func (s *ApiStats) CalculateCpuPercentLinux(prevCpuContainer uint64, prevCpuSystem uint64) float64 {
 	cpuDelta := s.CPUStats.CPUUsage.TotalUsage - prevCpuContainer
 	systemDelta := s.CPUStats.SystemUsage - prevCpuSystem

internal/entities/system/system.go

@@ -123,27 +123,29 @@ const (
 	ConnectionTypeWebSocket
 )
 
+// Core system data that is needed in All Systems table
 type Info struct {
-	Hostname       string  `json:"h" cbor:"0,keyasint"`
-	KernelVersion  string  `json:"k,omitempty" cbor:"1,keyasint,omitempty"`
-	Cores          int     `json:"c" cbor:"2,keyasint"`
+	Hostname      string `json:"h,omitempty" cbor:"0,keyasint,omitempty"` // deprecated - moved to Details struct
+	KernelVersion string `json:"k,omitempty" cbor:"1,keyasint,omitempty"` // deprecated - moved to Details struct
+	Cores         int    `json:"c,omitzero" cbor:"2,keyasint,omitzero"`   // deprecated - moved to Details struct
+	// Threads is needed in Info struct to calculate load average thresholds
 	Threads        int     `json:"t,omitempty" cbor:"3,keyasint,omitempty"`
-	CpuModel       string  `json:"m" cbor:"4,keyasint"`
+	CpuModel       string  `json:"m,omitempty" cbor:"4,keyasint,omitempty"` // deprecated - moved to Details struct
 	Uptime         uint64  `json:"u" cbor:"5,keyasint"`
 	Cpu            float64 `json:"cpu" cbor:"6,keyasint"`
 	MemPct         float64 `json:"mp" cbor:"7,keyasint"`
 	DiskPct        float64 `json:"dp" cbor:"8,keyasint"`
 	Bandwidth      float64 `json:"b" cbor:"9,keyasint"`
 	AgentVersion   string  `json:"v" cbor:"10,keyasint"`
-	Podman         bool    `json:"p,omitempty" cbor:"11,keyasint,omitempty"`
+	Podman         bool    `json:"p,omitempty" cbor:"11,keyasint,omitempty"` // deprecated - moved to Details struct
 	GpuPct         float64 `json:"g,omitempty" cbor:"12,keyasint,omitempty"`
 	DashboardTemp  float64 `json:"dt,omitempty" cbor:"13,keyasint,omitempty"`
-	Os             Os      `json:"os" cbor:"14,keyasint"`
-	LoadAvg1       float64 `json:"l1,omitempty" cbor:"15,keyasint,omitempty"`
-	LoadAvg5       float64 `json:"l5,omitempty" cbor:"16,keyasint,omitempty"`
-	LoadAvg15      float64 `json:"l15,omitempty" cbor:"17,keyasint,omitempty"`
+	Os             Os      `json:"os,omitempty" cbor:"14,keyasint,omitempty"`  // deprecated - moved to Details struct
+	LoadAvg1       float64 `json:"l1,omitempty" cbor:"15,keyasint,omitempty"`  // deprecated - use `la` array instead
+	LoadAvg5       float64 `json:"l5,omitempty" cbor:"16,keyasint,omitempty"`  // deprecated - use `la` array instead
+	LoadAvg15      float64 `json:"l15,omitempty" cbor:"17,keyasint,omitempty"` // deprecated - use `la` array instead
 	BandwidthBytes uint64  `json:"bb" cbor:"18,keyasint"`
-	// TODO: remove load fields in future release in favor of load avg array
+
 	LoadAvg        [3]float64         `json:"la,omitempty" cbor:"19,keyasint"`
 	ConnectionType ConnectionType     `json:"ct,omitempty" cbor:"20,keyasint,omitempty,omitzero"`
 	ExtraFsPct     map[string]float64 `json:"efs,omitempty" cbor:"21,keyasint,omitempty"`
@@ -151,10 +153,25 @@ type Info struct {
 	Battery        [2]uint8           `json:"bat,omitzero" cbor:"23,keyasint,omitzero"`  // [percent, charge state]
 }
 
+// Data that does not change during process lifetime and is not needed in All Systems table
+type Details struct {
+	Hostname    string `cbor:"0,keyasint"`
+	Kernel      string `cbor:"1,keyasint,omitempty"`
+	Cores       int    `cbor:"2,keyasint"`
+	Threads     int    `cbor:"3,keyasint"`
+	CpuModel    string `cbor:"4,keyasint"`
+	Os          Os     `cbor:"5,keyasint"`
+	OsName      string `cbor:"6,keyasint"`
+	Arch        string `cbor:"7,keyasint"`
+	Podman      bool   `cbor:"8,keyasint,omitempty"`
+	MemoryTotal uint64 `cbor:"9,keyasint"`
+}
+
 // Final data structure to return to the hub
 type CombinedData struct {
 	Stats           Stats              `json:"stats" cbor:"0,keyasint"`
 	Info            Info               `json:"info" cbor:"1,keyasint"`
 	Containers      []*container.Stats `json:"container" cbor:"2,keyasint"`
 	SystemdServices []*systemd.Service `json:"systemd,omitempty" cbor:"3,keyasint,omitempty"`
+	Details         *Details           `cbor:"4,keyasint,omitempty"`
 }

internal/hub/expirymap/expirymap_test.go

@@ -415,7 +415,11 @@ func TestExpiryMap_RemoveValue_WithExpiration(t *testing.T) {
 	// Wait for first value to expire
 	time.Sleep(time.Millisecond * 20)
 
-	// Try to remove the expired value - should remove one of the "value1" entries
+	// Trigger lazy cleanup of the expired key
+	_, ok := em.GetOk("key1")
+	assert.False(t, ok)
+
+	// Try to remove the remaining "value1" entry (key3)
 	removedValue, ok := em.RemovebyValue("value1")
 	assert.True(t, ok)
 	assert.Equal(t, "value1", removedValue)
@@ -423,14 +427,9 @@ func TestExpiryMap_RemoveValue_WithExpiration(t *testing.T) {
 	// Should still have key2 (different value)
 	assert.True(t, em.Has("key2"))
 
-	// Should have removed one of the "value1" entries (either key1 or key3)
-	// But we can't predict which one due to map iteration order
-	key1Exists := em.Has("key1")
-	key3Exists := em.Has("key3")
-
-	// Exactly one of key1 or key3 should be gone
-	assert.False(t, key1Exists && key3Exists) // Both shouldn't exist
-	assert.True(t, key1Exists || key3Exists)  // At least one should still exist
+	// key1 should be gone due to expiration and key3 should be removed by value.
+	assert.False(t, em.Has("key1"))
+	assert.False(t, em.Has("key3"))
 }
 
 func TestExpiryMap_ValueOperations_Integration(t *testing.T) {

internal/hub/systems/system.go

@@ -9,7 +9,7 @@ import (
 	"math/rand"
 	"net"
 	"strings"
-	"sync"
+	"sync/atomic"
 	"time"
 
 	"github.com/henrygd/beszel/internal/common"
@@ -29,19 +29,21 @@ import (
 )
 
 type System struct {
-	Id           string               `db:"id"`
-	Host         string               `db:"host"`
-	Port         string               `db:"port"`
-	Status       string               `db:"status"`
-	manager      *SystemManager       // Manager that this system belongs to
-	client       *ssh.Client          // SSH client for fetching data
-	data         *system.CombinedData // system data from agent
-	ctx          context.Context      // Context for stopping the updater
-	cancel       context.CancelFunc   // Stops and removes system from updater
-	WsConn       *ws.WsConn           // Handler for agent WebSocket connection
-	agentVersion semver.Version       // Agent version
-	updateTicker *time.Ticker         // Ticker for updating the system
-	smartOnce    sync.Once            // Once for fetching and saving smart devices
+	Id             string               `db:"id"`
+	Host           string               `db:"host"`
+	Port           string               `db:"port"`
+	Status         string               `db:"status"`
+	manager        *SystemManager       // Manager that this system belongs to
+	client         *ssh.Client          // SSH client for fetching data
+	data           *system.CombinedData // system data from agent
+	ctx            context.Context      // Context for stopping the updater
+	cancel         context.CancelFunc   // Stops and removes system from updater
+	WsConn         *ws.WsConn           // Handler for agent WebSocket connection
+	agentVersion   semver.Version       // Agent version
+	updateTicker   *time.Ticker         // Ticker for updating the system
+	detailsFetched atomic.Bool          // True if static system details have been fetched and saved
+	smartFetched   atomic.Bool          // True if SMART devices have been fetched and saved
+	smartFetching  atomic.Bool          // True if SMART devices are currently being fetched
 }
 
 func (sm *SystemManager) NewSystem(systemId string) *System {
@@ -114,10 +116,32 @@ func (sys *System) update() error {
 		sys.handlePaused()
 		return nil
 	}
-	data, err := sys.fetchDataFromAgent(common.DataRequestOptions{CacheTimeMs: uint16(interval)})
-	if err == nil {
-		_, err = sys.createRecords(data)
+	options := common.DataRequestOptions{
+		CacheTimeMs: uint16(interval),
 	}
+	// fetch system details if not already fetched
+	if !sys.detailsFetched.Load() {
+		options.IncludeDetails = true
+	}
+
+	data, err := sys.fetchDataFromAgent(options)
+	if err != nil {
+		return err
+	}
+
+	// create system records
+	_, err = sys.createRecords(data)
+
+	// Fetch and save SMART devices when system first comes online
+	if backgroundSmartFetchEnabled() && !sys.smartFetched.Load() && sys.smartFetching.CompareAndSwap(false, true) {
+		go func() {
+			defer sys.smartFetching.Store(false)
+			if err := sys.FetchAndSaveSmartDevices(); err == nil {
+				sys.smartFetched.Store(true)
+			}
+		}()
+	}
+
 	return err
 }
 
@@ -142,12 +166,11 @@ func (sys *System) createRecords(data *system.CombinedData) (*core.Record, error
 	}
 	hub := sys.manager.hub
 	err = hub.RunInTransaction(func(txApp core.App) error {
-		// add system_stats and container_stats records
+		// add system_stats record
 		systemStatsCollection, err := txApp.FindCachedCollectionByNameOrId("system_stats")
 		if err != nil {
 			return err
 		}
-
 		systemStatsRecord := core.NewRecord(systemStatsCollection)
 		systemStatsRecord.Set("system", systemRecord.Id)
 		systemStatsRecord.Set("stats", data.Stats)
@@ -155,14 +178,14 @@ func (sys *System) createRecords(data *system.CombinedData) (*core.Record, error
 		if err := txApp.SaveNoValidate(systemStatsRecord); err != nil {
 			return err
 		}
+
+		// add containers and container_stats records
 		if len(data.Containers) > 0 {
-			// add / update containers records
 			if data.Containers[0].Id != "" {
 				if err := createContainerRecords(txApp, data.Containers, sys.Id); err != nil {
 					return err
 				}
 			}
-			// add new container_stats record
 			containerStatsCollection, err := txApp.FindCachedCollectionByNameOrId("container_stats")
 			if err != nil {
 				return err
@@ -183,9 +206,16 @@ func (sys *System) createRecords(data *system.CombinedData) (*core.Record, error
 			}
 		}
 
+		// add system details record
+		if data.Details != nil {
+			if err := createSystemDetailsRecord(txApp, data.Details, sys.Id); err != nil {
+				return err
+			}
+			sys.detailsFetched.Store(true)
+		}
+
 		// update system record (do this last because it triggers alerts and we need above records to be inserted first)
 		systemRecord.Set("status", up)
-
 		systemRecord.Set("info", data.Info)
 		if err := txApp.SaveNoValidate(systemRecord); err != nil {
 			return err
@@ -193,16 +223,34 @@ func (sys *System) createRecords(data *system.CombinedData) (*core.Record, error
 		return nil
 	})
 
-	// Fetch and save SMART devices when system first comes online
-	if err == nil {
-		sys.smartOnce.Do(func() {
-			go sys.FetchAndSaveSmartDevices()
-		})
-	}
-
 	return systemRecord, err
 }
 
+func createSystemDetailsRecord(app core.App, data *system.Details, systemId string) error {
+	collectionName := "system_details"
+	params := dbx.Params{
+		"id":       systemId,
+		"system":   systemId,
+		"hostname": data.Hostname,
+		"kernel":   data.Kernel,
+		"cores":    data.Cores,
+		"threads":  data.Threads,
+		"cpu":      data.CpuModel,
+		"os":       data.Os,
+		"os_name":  data.OsName,
+		"arch":     data.Arch,
+		"memory":   data.MemoryTotal,
+		"podman":   data.Podman,
+		"updated":  time.Now().UTC(),
+	}
+	result, err := app.DB().Update(collectionName, params, dbx.HashExp{"id": systemId}).Execute()
+	rowsAffected, _ := result.RowsAffected()
+	if err != nil || rowsAffected == 0 {
+		_, err = app.DB().Insert(collectionName, params).Execute()
+	}
+	return err
+}
+
 func createSystemdStatsRecords(app core.App, data []*systemd.Service, systemId string) error {
 	if len(data) == 0 {
 		return nil

internal/hub/systems/systems_production.go

@@ -0,0 +1,10 @@
+//go:build !testing
+// +build !testing
+
+package systems
+
+// Background SMART fetching is enabled in production but disabled for tests (systems_test_helpers.go).
+//
+// The hub integration tests create/replace systems and clean up the test apps quickly.
+// Background SMART fetching can outlive teardown and crash in PocketBase internals (nil DB).
+func backgroundSmartFetchEnabled() bool { return true }

internal/hub/systems/systems_test.go

@@ -266,18 +266,20 @@ func testOld(t *testing.T, hub *tests.TestHub) {
 
 		// Create test system data
 		testData := &system.CombinedData{
+			Details: &system.Details{
+				Hostname: "data-test.example.com",
+				Kernel:   "5.15.0-generic",
+				Cores:    4,
+				Threads:  8,
+				CpuModel: "Test CPU",
+			},
 			Info: system.Info{
-				Hostname:      "data-test.example.com",
-				KernelVersion: "5.15.0-generic",
-				Cores:         4,
-				Threads:       8,
-				CpuModel:      "Test CPU",
-				Uptime:        3600,
-				Cpu:           25.5,
-				MemPct:        40.2,
-				DiskPct:       60.0,
-				Bandwidth:     100.0,
-				AgentVersion:  "1.0.0",
+				Uptime:       3600,
+				Cpu:          25.5,
+				MemPct:       40.2,
+				DiskPct:      60.0,
+				Bandwidth:    100.0,
+				AgentVersion: "1.0.0",
 			},
 			Stats: system.Stats{
 				Cpu:         25.5,

internal/hub/systems/systems_test_helpers.go

@@ -10,6 +10,13 @@ import (
 	entities "github.com/henrygd/beszel/internal/entities/system"
 )
 
+// The hub integration tests create/replace systems and cleanup the test apps quickly.
+// Background SMART fetching can outlive teardown and crash in PocketBase internals (nil DB).
+//
+// We keep the explicit SMART refresh endpoint / method available, but disable
+// the automatic background fetch during tests.
+func backgroundSmartFetchEnabled() bool { return false }
+
 // TESTING ONLY: GetSystemCount returns the number of systems in the store
 func (sm *SystemManager) GetSystemCount() int {
 	return sm.systems.Length()

internal/migrations/0_collections_snapshot_0_18_0_dev_1.go

@@ -1439,6 +1439,184 @@ func init() {
 		"type": "base",
 		"updateRule": null,
 		"viewRule": "@request.auth.id != \"\" && system.users.id ?= @request.auth.id"
+	},
+	{
+		"createRule": "",
+		"deleteRule": "",
+		"fields": [
+			{
+				"autogeneratePattern": "[a-z0-9]{15}",
+				"hidden": false,
+				"id": "text3208210256",
+				"max": 15,
+				"min": 15,
+				"name": "id",
+				"pattern": "^[a-z0-9]+$",
+				"presentable": false,
+				"primaryKey": true,
+				"required": true,
+				"system": true,
+				"type": "text"
+			},
+			{
+				"cascadeDelete": true,
+				"collectionId": "2hz5ncl8tizk5nx",
+				"hidden": false,
+				"id": "relation3377271179",
+				"maxSelect": 1,
+				"minSelect": 0,
+				"name": "system",
+				"presentable": false,
+				"required": true,
+				"system": false,
+				"type": "relation"
+			},
+			{
+				"autogeneratePattern": "",
+				"hidden": false,
+				"id": "text3847340049",
+				"max": 0,
+				"min": 0,
+				"name": "hostname",
+				"pattern": "",
+				"presentable": false,
+				"primaryKey": false,
+				"required": false,
+				"system": false,
+				"type": "text"
+			},
+			{
+				"hidden": false,
+				"id": "number1789936913",
+				"max": null,
+				"min": null,
+				"name": "os",
+				"onlyInt": false,
+				"presentable": false,
+				"required": false,
+				"system": false,
+				"type": "number"
+			},
+			{
+				"autogeneratePattern": "",
+				"hidden": false,
+				"id": "text2818598173",
+				"max": 0,
+				"min": 0,
+				"name": "os_name",
+				"pattern": "",
+				"presentable": false,
+				"primaryKey": false,
+				"required": false,
+				"system": false,
+				"type": "text"
+			},
+			{
+				"autogeneratePattern": "",
+				"hidden": false,
+				"id": "text1574083243",
+				"max": 0,
+				"min": 0,
+				"name": "kernel",
+				"pattern": "",
+				"presentable": false,
+				"primaryKey": false,
+				"required": false,
+				"system": false,
+				"type": "text"
+			},
+			{
+				"autogeneratePattern": "",
+				"hidden": false,
+				"id": "text3128971310",
+				"max": 0,
+				"min": 0,
+				"name": "cpu",
+				"pattern": "",
+				"presentable": false,
+				"primaryKey": false,
+				"required": false,
+				"system": false,
+				"type": "text"
+			},
+			{
+				"autogeneratePattern": "",
+				"hidden": false,
+				"id": "text4161937994",
+				"max": 0,
+				"min": 0,
+				"name": "arch",
+				"pattern": "",
+				"presentable": false,
+				"primaryKey": false,
+				"required": false,
+				"system": false,
+				"type": "text"
+			},
+			{
+				"hidden": false,
+				"id": "number4245036687",
+				"max": null,
+				"min": null,
+				"name": "cores",
+				"onlyInt": false,
+				"presentable": false,
+				"required": false,
+				"system": false,
+				"type": "number"
+			},
+			{
+				"hidden": false,
+				"id": "number1871592925",
+				"max": null,
+				"min": null,
+				"name": "threads",
+				"onlyInt": false,
+				"presentable": false,
+				"required": false,
+				"system": false,
+				"type": "number"
+			},
+			{
+				"hidden": false,
+				"id": "number3933025333",
+				"max": null,
+				"min": null,
+				"name": "memory",
+				"onlyInt": false,
+				"presentable": false,
+				"required": false,
+				"system": false,
+				"type": "number"
+			},
+			{
+				"hidden": false,
+				"id": "bool2200265312",
+				"name": "podman",
+				"presentable": false,
+				"required": false,
+				"system": false,
+				"type": "bool"
+			},
+			{
+				"hidden": false,
+				"id": "autodate3332085495",
+				"name": "updated",
+				"onCreate": true,
+				"onUpdate": true,
+				"presentable": false,
+				"system": false,
+				"type": "autodate"
+			}
+		],
+		"id": "pbc_3116237454",
+		"indexes": [],
+		"listRule": "@request.auth.id != \"\" && system.users.id ?= @request.auth.id",
+		"name": "system_details",
+		"system": false,
+		"type": "base",
+		"updateRule": "",
+		"viewRule": "@request.auth.id != \"\" && system.users.id ?= @request.auth.id"
 	}
 ]`
 

internal/site/biome.json

@@ -33,10 +33,7 @@
 				"noUnusedFunctionParameters": "error",
 				"noUnusedPrivateClassMembers": "error",
 				"useExhaustiveDependencies": {
-					"level": "warn",
-					"options": {
-						"reportUnnecessaryDependencies": false
-					}
+					"level": "off"
 				},
 				"useUniqueElementIds": "off",
 				"noUnusedVariables": "error"

internal/site/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "beszel",
 	"private": true,
-	"version": "0.17.0",
+	"version": "0.18.0-beta.1",
 	"type": "module",
 	"scripts": {
 		"dev": "vite --host",

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

@@ -3,15 +3,7 @@ import { Trans, useLingui } from "@lingui/react/macro"
 import { useStore } from "@nanostores/react"
 import { getPagePath } from "@nanostores/router"
 import { timeTicks } from "d3-time"
-import {
-	ChevronRightSquareIcon,
-	ClockArrowUp,
-	CpuIcon,
-	GlobeIcon,
-	LayoutGridIcon,
-	MonitorIcon,
-	XIcon,
-} from "lucide-react"
+import { XIcon } from "lucide-react"
 import { subscribeKeys } from "nanostores"
 import React, { type JSX, lazy, memo, useCallback, useEffect, useMemo, useRef, useState } from "react"
 import AreaChartDefault, { type DataPoint } from "@/components/charts/area-chart"
@@ -24,7 +16,7 @@ import MemChart from "@/components/charts/mem-chart"
 import SwapChart from "@/components/charts/swap-chart"
 import TemperatureChart from "@/components/charts/temperature-chart"
 import { getPbTimestamp, pb } from "@/lib/api"
-import { ChartType, ConnectionType, connectionTypeLabels, Os, SystemStatus, Unit } from "@/lib/enums"
+import { ChartType, Os, SystemStatus, Unit } from "@/lib/enums"
 import { batteryStateTranslations } from "@/lib/i18n"
 import {
 	$allSystemsById,
@@ -44,8 +36,6 @@ import {
 	compareSemVer,
 	decimalString,
 	formatBytes,
-	secondsToString,
-	getHostDisplayValue,
 	listen,
 	parseSemVer,
 	toFixedFloat,
@@ -56,25 +46,24 @@ import type {
 	ChartTimes,
 	ContainerStatsRecord,
 	GPUData,
+	SystemDetailsRecord,
 	SystemInfo,
 	SystemRecord,
 	SystemStats,
 	SystemStatsRecord,
 } from "@/types"
-import ChartTimeSelect from "../charts/chart-time-select"
 import { $router, navigate } from "../router"
 import Spinner from "../spinner"
 import { Button } from "../ui/button"
 import { Card, CardDescription, CardHeader, CardTitle } from "../ui/card"
-import { AppleIcon, ChartAverage, ChartMax, FreeBsdIcon, Rows, TuxIcon, WebSocketIcon, WindowsIcon } from "../ui/icons"
+import { ChartAverage, ChartMax } from "../ui/icons"
 import { Input } from "../ui/input"
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../ui/select"
-import { Separator } from "../ui/separator"
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../ui/tooltip"
 import NetworkSheet from "./system/network-sheet"
 import CpuCoresSheet from "./system/cpu-sheet"
 import LineChartDefault from "../charts/line-chart"
 import { pinnedAxisDomain } from "../ui/chart"
+import InfoBar from "./system/info-bar"
 
 type ChartTimeData = {
 	time: number
@@ -154,8 +143,8 @@ async function getStats<T extends SystemStatsRecord | ContainerStatsRecord>(
 	})
 }
 
-function dockerOrPodman(str: string, system: SystemRecord): string {
-	if (system.info.p) {
+function dockerOrPodman(str: string, isPodman: boolean): string {
+	if (isPodman) {
 		return str.replace("docker", "podman").replace("Docker", "Podman")
 	}
 	return str
@@ -178,6 +167,8 @@ export default memo(function SystemDetail({ id }: { id: string }) {
 	const isLongerChart = !["1m", "1h"].includes(chartTime) // true if chart time is not 1m or 1h
 	const userSettings = $userSettings.get()
 	const chartWrapRef = useRef<HTMLDivElement>(null)
+	const [details, setDetails] = useState<SystemDetailsRecord | null>(null)
+	const isPodman = useMemo(() => details?.podman ?? system.info?.p ?? false, [details, system.info?.p])
 
 	useEffect(() => {
 		return () => {
@@ -187,6 +178,7 @@ export default memo(function SystemDetail({ id }: { id: string }) {
 			persistChartTime.current = false
 			setSystemStats([])
 			setContainerData([])
+			setDetails(null)
 			$containerFilter.set("")
 		}
 	}, [id])
@@ -214,10 +206,26 @@ export default memo(function SystemDetail({ id }: { id: string }) {
 		}
 	}, [system?.info?.v])
 
+	// fetch system details
+	useEffect(() => {
+		// if system.info.m exists, agent is old version without system details
+		if (!system.id || system.info?.m) {
+			return
+		}
+		pb.collection<SystemDetailsRecord>("system_details")
+			.getOne(system.id, {
+				fields: "hostname,kernel,cores,threads,cpu,os,os_name,arch,memory,podman",
+				headers: {
+					"Cache-Control": "public, max-age=60",
+				},
+			})
+			.then(setDetails)
+	}, [system.id])
+
 	// subscribe to realtime metrics if chart time is 1m
 	// biome-ignore lint/correctness/useExhaustiveDependencies: not necessary
 	useEffect(() => {
-		let unsub = () => { }
+		let unsub = () => {}
 		if (!system.id || chartTime !== "1m") {
 			return
 		}
@@ -333,63 +341,6 @@ export default memo(function SystemDetail({ id }: { id: string }) {
 		})
 	}, [system, chartTime])
 
-	// values for system info bar
-	const systemInfo = useMemo(() => {
-		if (!system.info) {
-			return []
-		}
-
-		const osInfo = {
-			[Os.Linux]: {
-				Icon: TuxIcon,
-				value: system.info.k,
-				label: t({ comment: "Linux kernel", message: "Kernel" }),
-			},
-			[Os.Darwin]: {
-				Icon: AppleIcon,
-				value: `macOS ${system.info.k}`,
-			},
-			[Os.Windows]: {
-				Icon: WindowsIcon,
-				value: system.info.k,
-			},
-			[Os.FreeBSD]: {
-				Icon: FreeBsdIcon,
-				value: system.info.k,
-			},
-		}
-		let uptime: string
-		if (system.info.u < 3600) {
-			uptime = secondsToString(system.info.u, "minute")
-		} else if (system.info.u < 360000) {
-			uptime = secondsToString(system.info.u, "hour")
-		} else {
-			uptime = secondsToString(system.info.u, "day")
-		}
-		return [
-			{ value: getHostDisplayValue(system), Icon: GlobeIcon },
-			{
-				value: system.info.h,
-				Icon: MonitorIcon,
-				label: "Hostname",
-				// hide if hostname is same as host or name
-				hide: system.info.h === system.host || system.info.h === system.name,
-			},
-			{ value: uptime, Icon: ClockArrowUp, label: t`Uptime`, hide: !system.info.u },
-			osInfo[system.info.os ?? Os.Linux],
-			{
-				value: `${system.info.m} (${system.info.c}c${system.info.t ? `/${system.info.t}t` : ""})`,
-				Icon: CpuIcon,
-				hide: !system.info.m,
-			},
-		] as {
-			value: string | number | undefined
-			label?: string
-			Icon: React.ElementType
-			hide?: boolean
-		}[]
-	}, [system, t])
-
 	/** Space for tooltip if more than 10 sensors and no containers table */
 	useEffect(() => {
 		const sensors = Object.keys(systemStats.at(-1)?.stats.t ?? {})
@@ -458,113 +409,11 @@ export default memo(function SystemDetail({ id }: { id: string }) {
 	const hasGpuPowerData = lastGpuVals.some((gpu) => gpu.p !== undefined || gpu.pp !== undefined)
 	const hasGpuEnginesData = lastGpuVals.some((gpu) => gpu.e !== undefined)
 
-	let translatedStatus: string = system.status
-	if (system.status === SystemStatus.Up) {
-		translatedStatus = t({ message: "Up", comment: "Context: System is up" })
-	} else if (system.status === SystemStatus.Down) {
-		translatedStatus = t({ message: "Down", comment: "Context: System is down" })
-	}
-
 	return (
 		<>
 			<div ref={chartWrapRef} className="grid gap-4 mb-14 overflow-x-clip">
 				{/* system info */}
-				<Card>
-					<div className="grid xl:flex gap-4 px-4 sm:px-6 pt-3 sm:pt-4 pb-5">
-						<div>
-							<h1 className="text-[1.6rem] font-semibold mb-1.5">{system.name}</h1>
-							<div className="flex flex-wrap items-center gap-3 gap-y-2 text-sm opacity-90">
-								<TooltipProvider>
-									<Tooltip>
-										<TooltipTrigger asChild>
-											<div className="capitalize flex gap-2 items-center">
-												<span className={cn("relative flex h-3 w-3")}>
-													{system.status === SystemStatus.Up && (
-														<span
-															className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"
-															style={{ animationDuration: "1.5s" }}
-														></span>
-													)}
-													<span
-														className={cn("relative inline-flex rounded-full h-3 w-3", {
-															"bg-green-500": system.status === SystemStatus.Up,
-															"bg-red-500": system.status === SystemStatus.Down,
-															"bg-primary/40": system.status === SystemStatus.Paused,
-															"bg-yellow-500": system.status === SystemStatus.Pending,
-														})}
-													></span>
-												</span>
-												{translatedStatus}
-											</div>
-										</TooltipTrigger>
-										{system.info.ct && (
-											<TooltipContent>
-												<div className="flex gap-1 items-center">
-													{system.info.ct === ConnectionType.WebSocket ? (
-														<WebSocketIcon className="size-4" />
-													) : (
-														<ChevronRightSquareIcon className="size-4" strokeWidth={2} />
-													)}
-													{connectionTypeLabels[system.info.ct as ConnectionType]}
-												</div>
-											</TooltipContent>
-										)}
-									</Tooltip>
-								</TooltipProvider>
-
-								{systemInfo.map(({ value, label, Icon, hide }) => {
-									if (hide || !value) {
-										return null
-									}
-									const content = (
-										<div className="flex gap-1.5 items-center">
-											<Icon className="h-4 w-4" /> {value}
-										</div>
-									)
-									return (
-										<div key={value} className="contents">
-											<Separator orientation="vertical" className="h-4 bg-primary/30" />
-											{label ? (
-												<TooltipProvider>
-													<Tooltip delayDuration={150}>
-														<TooltipTrigger asChild>{content}</TooltipTrigger>
-														<TooltipContent>{label}</TooltipContent>
-													</Tooltip>
-												</TooltipProvider>
-											) : (
-												content
-											)}
-										</div>
-									)
-								})}
-							</div>
-						</div>
-						<div className="xl:ms-auto flex items-center gap-2 max-sm:-mb-1">
-							<ChartTimeSelect className="w-full xl:w-40" agentVersion={chartData.agentVersion} />
-							<TooltipProvider delayDuration={100}>
-								<Tooltip>
-									<TooltipTrigger asChild>
-										<Button
-											aria-label={t`Toggle grid`}
-											variant="outline"
-											size="icon"
-											className="hidden xl:flex p-0 text-primary"
-											onClick={() => setGrid(!grid)}
-										>
-											{grid ? (
-												<LayoutGridIcon className="h-[1.2rem] w-[1.2rem] opacity-75" />
-											) : (
-												<Rows className="h-[1.3rem] w-[1.3rem] opacity-75" />
-											)}
-										</Button>
-									</TooltipTrigger>
-									<TooltipContent>{t`Toggle grid`}</TooltipContent>
-								</Tooltip>
-							</TooltipProvider>
-						</div>
-					</div>
-				</Card>
-
+				<InfoBar system={system} chartData={chartData} grid={grid} setGrid={setGrid} details={details} />
 
 				{/* <Tabs defaultValue="overview" className="w-full">
 					<TabsList className="w-full h-11">
@@ -576,7 +425,6 @@ export default memo(function SystemDetail({ id }: { id: string }) {
 					</TabsContent>
 				</Tabs> */}
 
-
 				{/* main charts */}
 				<div className="grid xl:grid-cols-2 gap-4">
 					<ChartCard
@@ -612,7 +460,7 @@ export default memo(function SystemDetail({ id }: { id: string }) {
 						<ChartCard
 							empty={dataEmpty}
 							grid={grid}
-							title={dockerOrPodman(t`Docker CPU Usage`, system)}
+							title={dockerOrPodman(t`Docker CPU Usage`, isPodman)}
 							description={t`Average CPU utilization of containers`}
 							cornerEl={containerFilterBar}
 						>
@@ -639,8 +487,8 @@ export default memo(function SystemDetail({ id }: { id: string }) {
 						<ChartCard
 							empty={dataEmpty}
 							grid={grid}
-							title={dockerOrPodman(t`Docker Memory Usage`, system)}
-							description={dockerOrPodman(t`Memory usage of docker containers`, system)}
+							title={dockerOrPodman(t`Docker Memory Usage`, isPodman)}
+							description={dockerOrPodman(t`Memory usage of docker containers`, isPodman)}
 							cornerEl={containerFilterBar}
 						>
 							<ContainerChart
@@ -760,8 +608,8 @@ export default memo(function SystemDetail({ id }: { id: string }) {
 						<ChartCard
 							empty={dataEmpty}
 							grid={grid}
-							title={dockerOrPodman(t`Docker Network I/O`, system)}
-							description={dockerOrPodman(t`Network traffic of docker containers`, system)}
+							title={dockerOrPodman(t`Docker Network I/O`, isPodman)}
+							description={dockerOrPodman(t`Network traffic of docker containers`, isPodman)}
 							cornerEl={containerFilterBar}
 						>
 							<ContainerChart
@@ -800,10 +648,7 @@ export default memo(function SystemDetail({ id }: { id: string }) {
 
 					{/* Temperature chart */}
 					{systemStats.at(-1)?.stats.t && (
-						<div
-							ref={temperatureChartRef}
-							className={cn("odd:last-of-type:col-span-full", { "col-span-full": !grid })}
-						>
+						<div ref={temperatureChartRef} className={cn("odd:last-of-type:col-span-full", { "col-span-full": !grid })}>
 							<ChartCard
 								empty={dataEmpty}
 								grid={grid}
@@ -965,7 +810,9 @@ export default memo(function SystemDetail({ id }: { id: string }) {
 													label: t`Write`,
 													dataKey: ({ stats }) => {
 														if (showMax) {
-															return stats?.efs?.[extraFsName]?.wbm || (stats?.efs?.[extraFsName]?.wm ?? 0) * 1024 * 1024
+															return (
+																stats?.efs?.[extraFsName]?.wbm || (stats?.efs?.[extraFsName]?.wm ?? 0) * 1024 * 1024
+															)
 														}
 														return stats?.efs?.[extraFsName]?.wb || (stats?.efs?.[extraFsName]?.w ?? 0) * 1024 * 1024
 													},
@@ -1003,9 +850,7 @@ export default memo(function SystemDetail({ id }: { id: string }) {
 					</div>
 				)}
 
-				{compareSemVer(chartData.agentVersion, parseSemVer("0.15.0")) >= 0 && (
-					<LazySmartTable systemId={system.id} />
-				)}
+				{compareSemVer(chartData.agentVersion, parseSemVer("0.15.0")) >= 0 && <LazySmartTable systemId={system.id} />}
 
 				{containerData.length > 0 && compareSemVer(chartData.agentVersion, parseSemVer("0.14.0")) >= 0 && (
 					<LazyContainersTable systemId={system.id} />
@@ -1061,13 +906,10 @@ function FilterBar({ store = $containerFilter }: { store?: typeof $containerFilt
 		return () => clearTimeout(handle)
 	}, [inputValue, storeValue, store])
 
-	const handleChange = useCallback(
-		(e: React.ChangeEvent<HTMLInputElement>) => {
-			const value = e.target.value
-			setInputValue(value)
-		},
-		[]
-	)
+	const handleChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+		const value = e.target.value
+		setInputValue(value)
+	}, [])
 
 	const handleClear = useCallback(() => {
 		setInputValue("")
@@ -1194,4 +1036,4 @@ function LazySystemdTable({ systemId }: { systemId: string }) {
 			{isIntersecting && <SystemdTable systemId={systemId} />}
 		</div>
 	)
-}
+}

internal/site/src/components/routes/system/info-bar.tsx

@@ -0,0 +1,229 @@
+import { plural } from "@lingui/core/macro"
+import { useLingui } from "@lingui/react/macro"
+import {
+	AppleIcon,
+	ChevronRightSquareIcon,
+	ClockArrowUp,
+	CpuIcon,
+	GlobeIcon,
+	LayoutGridIcon,
+	MemoryStickIcon,
+	MonitorIcon,
+	Rows,
+} from "lucide-react"
+import { useMemo } from "react"
+import ChartTimeSelect from "@/components/charts/chart-time-select"
+import { Button } from "@/components/ui/button"
+import { Card } from "@/components/ui/card"
+import { FreeBsdIcon, TuxIcon, WebSocketIcon, WindowsIcon } from "@/components/ui/icons"
+import { Separator } from "@/components/ui/separator"
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
+import { ConnectionType, connectionTypeLabels, Os, SystemStatus } from "@/lib/enums"
+import { cn, formatBytes, getHostDisplayValue, secondsToString, toFixedFloat } from "@/lib/utils"
+import type { ChartData, SystemDetailsRecord, SystemRecord } from "@/types"
+
+export default function InfoBar({
+	system,
+	chartData,
+	grid,
+	setGrid,
+	details,
+}: {
+	system: SystemRecord
+	chartData: ChartData
+	grid: boolean
+	setGrid: (grid: boolean) => void
+	details: SystemDetailsRecord | null
+}) {
+	const { t } = useLingui()
+
+	// values for system info bar - use details with fallback to system.info
+	const systemInfo = useMemo(() => {
+		if (!system.info) {
+			return []
+		}
+
+		// Use details if available, otherwise fall back to system.info
+		const hostname = details?.hostname ?? system.info.h
+		const kernel = details?.kernel ?? system.info.k
+		const cores = details?.cores ?? system.info.c
+		const threads = details?.threads ?? system.info.t ?? 0
+		const cpuModel = details?.cpu ?? system.info.m
+		const os = details?.os ?? system.info.os ?? Os.Linux
+		const osName = details?.os_name
+		const arch = details?.arch
+		const memory = details?.memory
+
+		const osInfo = {
+			[Os.Linux]: {
+				Icon: TuxIcon,
+				// show kernel in tooltip if os name is available, otherwise show the kernel
+				value: osName || kernel,
+				label: osName ? kernel : undefined,
+			},
+			[Os.Darwin]: {
+				Icon: AppleIcon,
+				value: osName || `macOS ${kernel}`,
+			},
+			[Os.Windows]: {
+				Icon: WindowsIcon,
+				value: osName || kernel,
+				label: osName ? kernel : undefined,
+			},
+			[Os.FreeBSD]: {
+				Icon: FreeBsdIcon,
+				value: osName || kernel,
+				label: osName ? kernel : undefined,
+			},
+		}
+
+		let uptime: string
+		if (system.info.u < 3600) {
+			uptime = secondsToString(system.info.u, "minute")
+		} else if (system.info.u < 360000) {
+			uptime = secondsToString(system.info.u, "hour")
+		} else {
+			uptime = secondsToString(system.info.u, "day")
+		}
+		const info = [
+			{ value: getHostDisplayValue(system), Icon: GlobeIcon },
+			{
+				value: hostname,
+				Icon: MonitorIcon,
+				label: "Hostname",
+				// hide if hostname is same as host or name
+				hide: hostname === system.host || hostname === system.name,
+			},
+			{ value: uptime, Icon: ClockArrowUp, label: t`Uptime`, hide: !system.info.u },
+			osInfo[os],
+			{
+				value: cpuModel,
+				Icon: CpuIcon,
+				hide: !cpuModel,
+				label: `${plural(cores, { one: "# core", other: "# cores" })} / ${plural(threads, { one: "# thread", other: "# threads" })}${arch ? ` / ${arch}` : ""}`,
+			},
+		] as {
+			value: string | number | undefined
+			label?: string
+			Icon: React.ElementType
+			hide?: boolean
+		}[]
+
+		if (memory) {
+			const memValue = formatBytes(memory, false, undefined, false)
+			info.push({
+				value: `${toFixedFloat(memValue.value, memValue.value >= 10 ? 1 : 2)} ${memValue.unit}`,
+				Icon: MemoryStickIcon,
+				hide: !memory,
+				label: t`Memory`,
+			})
+		}
+
+		return info
+	}, [system, details, t])
+
+	let translatedStatus: string = system.status
+	if (system.status === SystemStatus.Up) {
+		translatedStatus = t({ message: "Up", comment: "Context: System is up" })
+	} else if (system.status === SystemStatus.Down) {
+		translatedStatus = t({ message: "Down", comment: "Context: System is down" })
+	}
+
+	return (
+		<Card>
+			<div className="grid xl:flex gap-4 px-4 sm:px-6 pt-3 sm:pt-4 pb-5">
+				<div>
+					<h1 className="text-[1.6rem] font-semibold mb-1.5">{system.name}</h1>
+					<div className="flex flex-wrap items-center gap-3 gap-y-2 text-sm opacity-90">
+						<TooltipProvider>
+							<Tooltip>
+								<TooltipTrigger asChild>
+									<div className="capitalize flex gap-2 items-center">
+										<span className={cn("relative flex h-3 w-3")}>
+											{system.status === SystemStatus.Up && (
+												<span
+													className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"
+													style={{ animationDuration: "1.5s" }}
+												></span>
+											)}
+											<span
+												className={cn("relative inline-flex rounded-full h-3 w-3", {
+													"bg-green-500": system.status === SystemStatus.Up,
+													"bg-red-500": system.status === SystemStatus.Down,
+													"bg-primary/40": system.status === SystemStatus.Paused,
+													"bg-yellow-500": system.status === SystemStatus.Pending,
+												})}
+											></span>
+										</span>
+										{translatedStatus}
+									</div>
+								</TooltipTrigger>
+								{system.info.ct && (
+									<TooltipContent>
+										<div className="flex gap-1 items-center">
+											{system.info.ct === ConnectionType.WebSocket ? (
+												<WebSocketIcon className="size-4" />
+											) : (
+												<ChevronRightSquareIcon className="size-4" strokeWidth={2} />
+											)}
+											{connectionTypeLabels[system.info.ct as ConnectionType]}
+										</div>
+									</TooltipContent>
+								)}
+							</Tooltip>
+						</TooltipProvider>
+
+						{systemInfo.map(({ value, label, Icon, hide }) => {
+							if (hide || !value) {
+								return null
+							}
+							const content = (
+								<div className="flex gap-1.5 items-center">
+									<Icon className="h-4 w-4" /> {value}
+								</div>
+							)
+							return (
+								<div key={value} className="contents">
+									<Separator orientation="vertical" className="h-4 bg-primary/30" />
+									{label ? (
+										<TooltipProvider>
+											<Tooltip delayDuration={150}>
+												<TooltipTrigger asChild>{content}</TooltipTrigger>
+												<TooltipContent>{label}</TooltipContent>
+											</Tooltip>
+										</TooltipProvider>
+									) : (
+										content
+									)}
+								</div>
+							)
+						})}
+					</div>
+				</div>
+				<div className="xl:ms-auto flex items-center gap-2 max-sm:-mb-1">
+					<ChartTimeSelect className="w-full xl:w-40" agentVersion={chartData.agentVersion} />
+					<TooltipProvider delayDuration={100}>
+						<Tooltip>
+							<TooltipTrigger asChild>
+								<Button
+									aria-label={t`Toggle grid`}
+									variant="outline"
+									size="icon"
+									className="hidden xl:flex p-0 text-primary"
+									onClick={() => setGrid(!grid)}
+								>
+									{grid ? (
+										<LayoutGridIcon className="h-[1.2rem] w-[1.2rem] opacity-75" />
+									) : (
+										<Rows className="h-[1.3rem] w-[1.3rem] opacity-75" />
+									)}
+								</Button>
+							</TooltipTrigger>
+							<TooltipContent>{t`Toggle grid`}</TooltipContent>
+						</Tooltip>
+					</TooltipProvider>
+				</div>
+			</div>
+		</Card>
+	)
+}

internal/site/src/types.d.ts

@@ -380,6 +380,19 @@ export interface SmartAttribute {
 	wf?: string
 }
 
+export interface SystemDetailsRecord extends RecordModel {
+	system: string
+	hostname: string
+	kernel: string
+	cores: number
+	threads: number
+	cpu: string
+	os: Os
+	os_name: string
+	memory: number
+	podman: boolean
+}
+
 export interface SmartDeviceRecord extends RecordModel {
 	id: string
 	system: string