add dedicated S.M.A.R.T. page with persistent device storage

- Add /smart route to view SMART data across all systems
- Store SMART devices in new smart_devices collection
- Auto-fetch SMART data when system first comes online
- Add refresh/delete actions per device with realtime updates
- Add navbar and command palette entries

internal/hub/hub.go

@@ -268,8 +268,8 @@ func (h *Hub) registerApiRoutes(se *core.ServeEvent) error {
 	// update / delete user alerts
 	apiAuth.POST("/user-alerts", alerts.UpsertUserAlerts)
 	apiAuth.DELETE("/user-alerts", alerts.DeleteUserAlerts)
-	// get SMART data
+	// refresh SMART devices for a system
-	apiAuth.GET("/smart", h.getSmartData)
+	apiAuth.POST("/smart/refresh", h.refreshSmartData)
 	// get systemd service details
 	apiAuth.GET("/systemd/info", h.getSystemdInfo)
 	// /containers routes
@@ -365,22 +365,25 @@ func (h *Hub) getSystemdInfo(e *core.RequestEvent) error {
 	return e.JSON(http.StatusOK, map[string]any{"details": details})
 }
 
-// getSmartData handles GET /api/beszel/smart requests
+// refreshSmartData handles POST /api/beszel/smart/refresh requests
-func (h *Hub) getSmartData(e *core.RequestEvent) error {
+// Fetches fresh SMART data from the agent and updates the collection
+func (h *Hub) refreshSmartData(e *core.RequestEvent) error {
 	systemID := e.Request.URL.Query().Get("system")
 	if systemID == "" {
 		return e.JSON(http.StatusBadRequest, map[string]string{"error": "system parameter is required"})
 	}
+
 	system, err := h.sm.GetSystem(systemID)
 	if err != nil {
 		return e.JSON(http.StatusNotFound, map[string]string{"error": "system not found"})
 	}
-	data, err := system.FetchSmartDataFromAgent()
+
-	if err != nil {
+	// Fetch and save SMART devices
-		return e.JSON(http.StatusNotFound, map[string]string{"error": err.Error()})
+	if err := system.FetchAndSaveSmartDevices(); err != nil {
+		return e.JSON(http.StatusInternalServerError, map[string]string{"error": err.Error()})
 	}
-	e.Response.Header().Set("Cache-Control", "public, max-age=60")
+
-	return e.JSON(http.StatusOK, data)
+	return e.JSON(http.StatusOK, map[string]string{"status": "ok"})
 }
 
 // generates key pair if it doesn't exist and returns signer

internal/hub/systems/system.go

@@ -9,6 +9,7 @@ import (
 	"math/rand"
 	"net"
 	"strings"
+	"sync"
 	"time"
 
 	"github.com/henrygd/beszel/internal/common"
@@ -40,6 +41,7 @@ type System struct {
 	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
 }
 
 func (sm *SystemManager) NewSystem(systemId string) *System {
@@ -191,6 +193,13 @@ 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
 }
 
@@ -208,7 +217,7 @@ func createSystemdStatsRecords(app core.App, data []*systemd.Service, systemId s
 	for i, service := range data {
 		suffix := fmt.Sprintf("%d", i)
 		valueStrings = append(valueStrings, fmt.Sprintf("({:id%[1]s}, {:system}, {:name%[1]s}, {:state%[1]s}, {:sub%[1]s}, {:cpu%[1]s}, {:cpuPeak%[1]s}, {:memory%[1]s}, {:memPeak%[1]s}, {:updated})", suffix))
-		params["id"+suffix] = getSystemdServiceId(systemId, service.Name)
+		params["id"+suffix] = makeStableHashId(systemId, service.Name)
 		params["name"+suffix] = service.Name
 		params["state"+suffix] = service.State
 		params["sub"+suffix] = service.Sub
@@ -225,13 +234,6 @@ func createSystemdStatsRecords(app core.App, data []*systemd.Service, systemId s
 	return err
 }
 
-// getSystemdServiceId generates a deterministic unique id for a systemd service
-func getSystemdServiceId(systemId string, serviceName string) string {
-	hash := fnv.New32a()
-	hash.Write([]byte(systemId + serviceName))
-	return fmt.Sprintf("%x", hash.Sum32())
-}
-
 // createContainerRecords creates container records
 func createContainerRecords(app core.App, data []*container.Stats, systemId string) error {
 	if len(data) == 0 {
@@ -435,43 +437,12 @@ func (sys *System) FetchSystemdInfoFromAgent(serviceName string) (systemd.Servic
 	return result, err
 }
 
-// FetchSmartDataFromAgent fetches SMART data from the agent
+func makeStableHashId(strings ...string) string {
-func (sys *System) FetchSmartDataFromAgent() (map[string]any, error) {
+	hash := fnv.New32a()
-	// fetch via websocket
+	for _, str := range strings {
-	if sys.WsConn != nil && sys.WsConn.IsConnected() {
+		hash.Write([]byte(str))
-		ctx, cancel := context.WithTimeout(context.Background(), 5*time.Second)
-		defer cancel()
-		return sys.WsConn.RequestSmartData(ctx)
 	}
-	// fetch via SSH
+	return fmt.Sprintf("%x", hash.Sum32())
-	var result map[string]any
-	err := sys.runSSHOperation(5*time.Second, 1, func(session *ssh.Session) (bool, error) {
-		stdout, err := session.StdoutPipe()
-		if err != nil {
-			return false, err
-		}
-		stdin, stdinErr := session.StdinPipe()
-		if stdinErr != nil {
-			return false, stdinErr
-		}
-		if err := session.Shell(); err != nil {
-			return false, err
-		}
-		req := common.HubRequest[any]{Action: common.GetSmartData}
-		_ = cbor.NewEncoder(stdin).Encode(req)
-		_ = stdin.Close()
-		var resp common.AgentResponse
-		if err := cbor.NewDecoder(stdout).Decode(&resp); err != nil {
-			return false, err
-		}
-		// Convert to generic map for JSON response
-		result = make(map[string]any, len(resp.SmartData))
-		for k, v := range resp.SmartData {
-			result[k] = v
-		}
-		return false, nil
-	})
-	return result, err
 }
 
 // fetchDataViaSSH handles fetching data using SSH.

internal/hub/systems/system_smart.go

@@ -0,0 +1,132 @@
+package systems
+
+import (
+	"context"
+	"database/sql"
+	"errors"
+	"strings"
+	"time"
+
+	"github.com/fxamacker/cbor/v2"
+	"github.com/henrygd/beszel/internal/common"
+	"github.com/henrygd/beszel/internal/entities/smart"
+	"github.com/pocketbase/pocketbase/core"
+	"golang.org/x/crypto/ssh"
+)
+
+// FetchSmartDataFromAgent fetches SMART data from the agent
+func (sys *System) FetchSmartDataFromAgent() (map[string]smart.SmartData, error) {
+	// fetch via websocket
+	if sys.WsConn != nil && sys.WsConn.IsConnected() {
+		ctx, cancel := context.WithTimeout(context.Background(), 5*time.Second)
+		defer cancel()
+		return sys.WsConn.RequestSmartData(ctx)
+	}
+	// fetch via SSH
+	var result map[string]smart.SmartData
+	err := sys.runSSHOperation(5*time.Second, 1, func(session *ssh.Session) (bool, error) {
+		stdout, err := session.StdoutPipe()
+		if err != nil {
+			return false, err
+		}
+		stdin, stdinErr := session.StdinPipe()
+		if stdinErr != nil {
+			return false, stdinErr
+		}
+		if err := session.Shell(); err != nil {
+			return false, err
+		}
+		req := common.HubRequest[any]{Action: common.GetSmartData}
+		_ = cbor.NewEncoder(stdin).Encode(req)
+		_ = stdin.Close()
+		var resp common.AgentResponse
+		if err := cbor.NewDecoder(stdout).Decode(&resp); err != nil {
+			return false, err
+		}
+		result = resp.SmartData
+		return false, nil
+	})
+	return result, err
+}
+
+// FetchAndSaveSmartDevices fetches SMART data from the agent and saves it to the database
+func (sys *System) FetchAndSaveSmartDevices() error {
+	smartData, err := sys.FetchSmartDataFromAgent()
+	if err != nil || len(smartData) == 0 {
+		return err
+	}
+	return sys.saveSmartDevices(smartData)
+}
+
+// saveSmartDevices saves SMART device data to the smart_devices collection
+func (sys *System) saveSmartDevices(smartData map[string]smart.SmartData) error {
+	if len(smartData) == 0 {
+		return nil
+	}
+
+	hub := sys.manager.hub
+	collection, err := hub.FindCachedCollectionByNameOrId("smart_devices")
+	if err != nil {
+		return err
+	}
+
+	for deviceKey, device := range smartData {
+		if err := sys.upsertSmartDeviceRecord(collection, deviceKey, device); err != nil {
+			return err
+		}
+	}
+
+	return nil
+}
+
+func (sys *System) upsertSmartDeviceRecord(collection *core.Collection, deviceKey string, device smart.SmartData) error {
+	hub := sys.manager.hub
+	recordID := makeStableHashId(sys.Id, deviceKey)
+
+	record, err := hub.FindRecordById(collection, recordID)
+	if err != nil {
+		if !errors.Is(err, sql.ErrNoRows) {
+			return err
+		}
+		record = core.NewRecord(collection)
+		record.Set("id", recordID)
+	}
+
+	name := device.DiskName
+	if name == "" {
+		name = deviceKey
+	}
+
+	powerOnHours, powerCycles := extractPowerMetrics(device.Attributes)
+	record.Set("system", sys.Id)
+	record.Set("name", name)
+	record.Set("model", device.ModelName)
+	record.Set("state", device.SmartStatus)
+	record.Set("capacity", device.Capacity)
+	record.Set("temp", device.Temperature)
+	record.Set("firmware", device.FirmwareVersion)
+	record.Set("serial", device.SerialNumber)
+	record.Set("type", device.DiskType)
+	record.Set("hours", powerOnHours)
+	record.Set("cycles", powerCycles)
+	record.Set("attributes", device.Attributes)
+
+	return hub.SaveNoValidate(record)
+}
+
+// extractPowerMetrics extracts power on hours and power cycles from SMART attributes
+func extractPowerMetrics(attributes []*smart.SmartAttribute) (powerOnHours, powerCycles uint64) {
+	for _, attr := range attributes {
+		nameLower := strings.ToLower(attr.Name)
+		if powerOnHours == 0 && (strings.Contains(nameLower, "poweronhours") || strings.Contains(nameLower, "power_on_hours")) {
+			powerOnHours = attr.RawValue
+		}
+		if powerCycles == 0 && ((strings.Contains(nameLower, "power") && strings.Contains(nameLower, "cycle")) || strings.Contains(nameLower, "startstopcycles")) {
+			powerCycles = attr.RawValue
+		}
+		if powerOnHours > 0 && powerCycles > 0 {
+			break
+		}
+	}
+	return
+}

internal/hub/systems/system_systemd_test.go

@@ -14,9 +14,9 @@ func TestGetSystemdServiceId(t *testing.T) {
 		serviceName := "nginx.service"
 
 		// Call multiple times and ensure same result
-		id1 := getSystemdServiceId(systemId, serviceName)
+		id1 := makeStableHashId(systemId, serviceName)
-		id2 := getSystemdServiceId(systemId, serviceName)
+		id2 := makeStableHashId(systemId, serviceName)
-		id3 := getSystemdServiceId(systemId, serviceName)
+		id3 := makeStableHashId(systemId, serviceName)
 
 		assert.Equal(t, id1, id2)
 		assert.Equal(t, id2, id3)
@@ -29,10 +29,10 @@ func TestGetSystemdServiceId(t *testing.T) {
 		serviceName1 := "nginx.service"
 		serviceName2 := "apache.service"
 
-		id1 := getSystemdServiceId(systemId1, serviceName1)
+		id1 := makeStableHashId(systemId1, serviceName1)
-		id2 := getSystemdServiceId(systemId2, serviceName1)
+		id2 := makeStableHashId(systemId2, serviceName1)
-		id3 := getSystemdServiceId(systemId1, serviceName2)
+		id3 := makeStableHashId(systemId1, serviceName2)
-		id4 := getSystemdServiceId(systemId2, serviceName2)
+		id4 := makeStableHashId(systemId2, serviceName2)
 
 		// All IDs should be different
 		assert.NotEqual(t, id1, id2)
@@ -56,14 +56,14 @@ func TestGetSystemdServiceId(t *testing.T) {
 		}
 
 		for _, tc := range testCases {
-			id := getSystemdServiceId(tc.systemId, tc.serviceName)
+			id := makeStableHashId(tc.systemId, tc.serviceName)
 			// FNV-32 produces 8 hex characters
 			assert.Len(t, id, 8, "ID should be 8 characters for systemId='%s', serviceName='%s'", tc.systemId, tc.serviceName)
 		}
 	})
 
 	t.Run("hexadecimal output", func(t *testing.T) {
-		id := getSystemdServiceId("test-system", "test-service")
+		id := makeStableHashId("test-system", "test-service")
 		assert.NotEmpty(t, id)
 
 		// Should only contain hexadecimal characters

internal/hub/ws/handlers.go

@@ -6,6 +6,7 @@ import (
 
 	"github.com/fxamacker/cbor/v2"
 	"github.com/henrygd/beszel/internal/common"
+	"github.com/henrygd/beszel/internal/entities/smart"
 	"github.com/henrygd/beszel/internal/entities/system"
 	"github.com/henrygd/beszel/internal/entities/systemd"
 	"github.com/lxzan/gws"
@@ -155,7 +156,7 @@ func (h *systemdInfoHandler) Handle(agentResponse common.AgentResponse) error {
 ////////////////////////////////////////////////////////////////////////////
 
 // RequestSmartData requests SMART data via WebSocket.
-func (ws *WsConn) RequestSmartData(ctx context.Context) (map[string]any, error) {
+func (ws *WsConn) RequestSmartData(ctx context.Context) (map[string]smart.SmartData, error) {
 	if !ws.IsConnected() {
 		return nil, gws.ErrConnClosed
 	}
@@ -163,7 +164,7 @@ func (ws *WsConn) RequestSmartData(ctx context.Context) (map[string]any, error)
 	if err != nil {
 		return nil, err
 	}
-	var result map[string]any
+	var result map[string]smart.SmartData
 	handler := ResponseHandler(&smartDataHandler{result: &result})
 	if err := ws.handleAgentRequest(req, handler); err != nil {
 		return nil, err
@@ -174,19 +175,14 @@ func (ws *WsConn) RequestSmartData(ctx context.Context) (map[string]any, error)
 // smartDataHandler parses SMART data map from AgentResponse
 type smartDataHandler struct {
 	BaseHandler
-	result *map[string]any
+	result *map[string]smart.SmartData
 }
 
 func (h *smartDataHandler) Handle(agentResponse common.AgentResponse) error {
 	if agentResponse.SmartData == nil {
 		return errors.New("no SMART data in response")
 	}
-	// convert to map[string]any for transport convenience in hub layer
+	*h.result = agentResponse.SmartData
-	out := make(map[string]any, len(agentResponse.SmartData))
-	for k, v := range agentResponse.SmartData {
-		out[k] = v
-	}
-	*h.result = out
 	return nil
 }
 

internal/migrations/0_collections_snapshot_0_16_2.go

@@ -1243,6 +1243,201 @@ func init() {
 		"type": "base",
 		"updateRule": "@request.auth.id != \"\" && user.id = @request.auth.id",
 		"viewRule": "@request.auth.id != \"\" && user.id = @request.auth.id"
+	},
+	{
+		"createRule": null,
+		"deleteRule": "@request.auth.id != \"\" && system.users.id ?= @request.auth.id",
+		"fields": [
+			{
+				"autogeneratePattern": "[a-z0-9]{10}",
+				"hidden": false,
+				"id": "text3208210256",
+				"max": 10,
+				"min": 10,
+				"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": "text1579384326",
+				"max": 0,
+				"min": 0,
+				"name": "name",
+				"pattern": "",
+				"presentable": false,
+				"primaryKey": false,
+				"required": false,
+				"system": false,
+				"type": "text"
+			},
+			{
+				"autogeneratePattern": "",
+				"hidden": false,
+				"id": "text3616895705",
+				"max": 0,
+				"min": 0,
+				"name": "model",
+				"pattern": "",
+				"presentable": false,
+				"primaryKey": false,
+				"required": false,
+				"system": false,
+				"type": "text"
+			},
+			{
+				"autogeneratePattern": "",
+				"hidden": false,
+				"id": "text2744374011",
+				"max": 0,
+				"min": 0,
+				"name": "state",
+				"pattern": "",
+				"presentable": false,
+				"primaryKey": false,
+				"required": false,
+				"system": false,
+				"type": "text"
+			},
+			{
+				"hidden": false,
+				"id": "number3051925876",
+				"max": null,
+				"min": null,
+				"name": "capacity",
+				"onlyInt": false,
+				"presentable": false,
+				"required": false,
+				"system": false,
+				"type": "number"
+			},
+			{
+				"hidden": false,
+				"id": "number190023114",
+				"max": null,
+				"min": null,
+				"name": "temp",
+				"onlyInt": false,
+				"presentable": false,
+				"required": false,
+				"system": false,
+				"type": "number"
+			},
+			{
+				"autogeneratePattern": "",
+				"hidden": false,
+				"id": "text3589068740",
+				"max": 0,
+				"min": 0,
+				"name": "firmware",
+				"pattern": "",
+				"presentable": false,
+				"primaryKey": false,
+				"required": false,
+				"system": false,
+				"type": "text"
+			},
+			{
+				"autogeneratePattern": "",
+				"hidden": false,
+				"id": "text3547646428",
+				"max": 0,
+				"min": 0,
+				"name": "serial",
+				"pattern": "",
+				"presentable": false,
+				"primaryKey": false,
+				"required": false,
+				"system": false,
+				"type": "text"
+			},
+			{
+				"autogeneratePattern": "",
+				"hidden": false,
+				"id": "text2363381545",
+				"max": 0,
+				"min": 0,
+				"name": "type",
+				"pattern": "",
+				"presentable": false,
+				"primaryKey": false,
+				"required": false,
+				"system": false,
+				"type": "text"
+			},
+			{
+				"hidden": false,
+				"id": "number1234567890",
+				"max": null,
+				"min": null,
+				"name": "hours",
+				"onlyInt": true,
+				"presentable": false,
+				"required": false,
+				"system": false,
+				"type": "number"
+			},
+			{
+				"hidden": false,
+				"id": "number0987654321",
+				"max": null,
+				"min": null,
+				"name": "cycles",
+				"onlyInt": true,
+				"presentable": false,
+				"required": false,
+				"system": false,
+				"type": "number"
+			},
+			{
+				"hidden": false,
+				"id": "json832282224",
+				"maxSize": 0,
+				"name": "attributes",
+				"presentable": false,
+				"required": false,
+				"system": false,
+				"type": "json"
+			},
+			{
+				"hidden": false,
+				"id": "autodate3332085495",
+				"name": "updated",
+				"onCreate": true,
+				"onUpdate": true,
+				"presentable": false,
+				"system": false,
+				"type": "autodate"
+			}
+		],
+		"id": "pbc_2571630677",
+		"indexes": [
+			"CREATE INDEX ` + "`" + `idx_DZ9yhvgl44` + "`" + ` ON ` + "`" + `smart_devices` + "`" + ` (` + "`" + `system` + "`" + `)"
+		],
+		"listRule": "@request.auth.id != \"\" && system.users.id ?= @request.auth.id",
+		"name": "smart_devices",
+		"system": false,
+		"type": "base",
+		"updateRule": null,
+		"viewRule": "@request.auth.id != \"\" && system.users.id ?= @request.auth.id"
 	}
 ]`
 

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

@@ -8,10 +8,11 @@ import {
 	ContainerIcon,
 	DatabaseBackupIcon,
 	FingerprintIcon,
-	LayoutDashboard,
+	HardDriveIcon,
 	LogsIcon,
 	MailIcon,
 	Server,
+	ServerIcon,
 	SettingsIcon,
 	UsersIcon,
 } from "lucide-react"
@@ -81,15 +82,15 @@ export default memo(function CommandPalette({ open, setOpen }: { open: boolean;
 					)}
 					<CommandGroup heading={t`Pages / Settings`}>
 						<CommandItem
-							keywords={["home", t`All Systems`]}
+							keywords={["home"]}
 							onSelect={() => {
 								navigate(basePath)
 								setOpen(false)
 							}}
 						>
-							<LayoutDashboard className="me-2 size-4" />
+							<ServerIcon className="me-2 size-4" />
 							<span>
-								<Trans>Dashboard</Trans>
+								<Trans>All Systems</Trans>
 							</span>
 							<CommandShortcut>
 								<Trans>Page</Trans>
@@ -109,6 +110,18 @@ export default memo(function CommandPalette({ open, setOpen }: { open: boolean;
 								<Trans>Page</Trans>
 							</CommandShortcut>
 						</CommandItem>
+						<CommandItem
+							onSelect={() => {
+								navigate(getPagePath($router, "smart"))
+								setOpen(false)
+							}}
+						>
+							<HardDriveIcon className="me-2 size-4" />
+							<span>S.M.A.R.T.</span>
+							<CommandShortcut>
+								<Trans>Page</Trans>
+							</CommandShortcut>
+						</CommandItem>
 						<CommandItem
 							onSelect={() => {
 								navigate(getPagePath($router, "settings", { name: "general" }))

internal/site/src/components/containers-table/containers-table.tsx

@@ -26,7 +26,7 @@ import { Sheet, SheetTitle, SheetHeader, SheetContent, SheetDescription } from "
 import { Dialog, DialogContent, DialogTitle } from "../ui/dialog"
 import { Button } from "@/components/ui/button"
 import { $allSystemsById } from "@/lib/stores"
-import { MaximizeIcon, RefreshCwIcon, XIcon } from "lucide-react"
+import { LoaderCircleIcon, MaximizeIcon, RefreshCwIcon, XIcon } from "lucide-react"
 import { Separator } from "../ui/separator"
 import { $router, Link } from "../router"
 import { listenKeys } from "nanostores"
@@ -36,7 +36,7 @@ const syntaxTheme = "github-dark-dimmed"
 
 export default function ContainersTable({ systemId }: { systemId?: string }) {
 	const loadTime = Date.now()
-	const [data, setData] = useState<ContainerRecord[]>([])
+	const [data, setData] = useState<ContainerRecord[] | undefined>(undefined)
 	const [sorting, setSorting] = useBrowserStorage<SortingState>(
 		`sort-c-${systemId ? 1 : 0}`,
 		[{ id: systemId ? "name" : "system", desc: false }],
@@ -67,7 +67,7 @@ export default function ContainersTable({ systemId }: { systemId?: string }) {
 									newItems.push(item)
 								}
 							}
-							for (const item of curItems) {
+							for (const item of curItems ?? []) {
 								if (!containerIds.has(item.id) && lastUpdated - item.updated < 70_000) {
 									newItems.push(item)
 								}
@@ -97,7 +97,7 @@ export default function ContainersTable({ systemId }: { systemId?: string }) {
 	}, [])
 
 	const table = useReactTable({
-		data,
+		data: data ?? [],
 		columns: containerChartCols.filter((col) => (systemId ? col.id !== "system" : true)),
 		getCoreRowModel: getCoreRowModel(),
 		getSortedRowModel: getSortedRowModel(),
@@ -174,7 +174,7 @@ export default function ContainersTable({ systemId }: { systemId?: string }) {
 				</div>
 			</CardHeader>
 			<div className="rounded-md">
-				<AllContainersTable table={table} rows={rows} colLength={visibleColumns.length} />
+				<AllContainersTable table={table} rows={rows} colLength={visibleColumns.length} data={data} />
 			</div>
 		</Card>
 	)
@@ -184,10 +184,12 @@ const AllContainersTable = memo(function AllContainersTable({
 	table,
 	rows,
 	colLength,
+	data,
 }: {
 	table: TableType<ContainerRecord>
 	rows: Row<ContainerRecord>[]
 	colLength: number
+	data: ContainerRecord[] | undefined
 }) {
 	// The virtualizer will need a reference to the scrollable container element
 	const scrollRef = useRef<HTMLDivElement>(null)
@@ -231,7 +233,11 @@ const AllContainersTable = memo(function AllContainersTable({
 						) : (
 							<TableRow>
 								<TableCell colSpan={colLength} className="h-37 text-center pointer-events-none">
+									{data ? (
 										<Trans>No results.</Trans>
+									) : (
+										<LoaderCircleIcon className="animate-spin size-10 opacity-60 mx-auto" />
+									)}
 								</TableCell>
 							</TableRow>
 						)}

internal/site/src/components/navbar.tsx

@@ -3,6 +3,7 @@ import { getPagePath } from "@nanostores/router"
 import {
 	ContainerIcon,
 	DatabaseBackupIcon,
+	HardDriveIcon,
 	LogOutIcon,
 	LogsIcon,
 	SearchIcon,
@@ -29,6 +30,7 @@ import { LangToggle } from "./lang-toggle"
 import { Logo } from "./logo"
 import { ModeToggle } from "./mode-toggle"
 import { $router, basePath, Link, prependBasePath } from "./router"
+import { t } from "@lingui/core/macro"
 
 const CommandPalette = lazy(() => import("./command-palette"))
 
@@ -55,6 +57,13 @@ export default function Navbar() {
 				>
 					<ContainerIcon className="h-[1.2rem] w-[1.2rem]" strokeWidth={1.5} />
 				</Link>
+				<Link
+					href={getPagePath($router, "smart")}
+					className={cn("hidden md:grid", buttonVariants({ variant: "ghost", size: "icon" }))}
+					aria-label="S.M.A.R.T."
+				>
+					<HardDriveIcon className="h-[1.2rem] w-[1.2rem]" strokeWidth={1.5} />
+				</Link>
 				<LangToggle />
 				<ModeToggle />
 				<Link

internal/site/src/components/router.tsx

@@ -3,6 +3,7 @@ import { createRouter } from "@nanostores/router"
 const routes = {
 	home: "/",
 	containers: "/containers",
+	smart: "/smart",
 	system: `/system/:id`,
 	settings: `/settings/:name?`,
 	forgot_password: `/forgot-password`,

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

@@ -21,7 +21,7 @@ export default function SettingsProfilePage({ userSettings }: { userSettings: Us
 	const [isLoading, setIsLoading] = useState(false)
 	const { i18n } = useLingui()
 	const currentUserSettings = useStore($userSettings)
-	const layoutWidth = currentUserSettings.layoutWidth ?? 1480
+	const layoutWidth = currentUserSettings.layoutWidth ?? 1500
 
 	async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
 		e.preventDefault()

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

@@ -0,0 +1,20 @@
+import { useEffect } from "react"
+import SmartTable from "@/components/routes/system/smart-table"
+import { ActiveAlerts } from "@/components/active-alerts"
+import { FooterRepoLink } from "@/components/footer-repo-link"
+
+export default function Smart() {
+	useEffect(() => {
+		document.title = `S.M.A.R.T. / Beszel`
+	}, [])
+
+	return (
+		<>
+			<div className="grid gap-4">
+				<ActiveAlerts />
+				<SmartTable />
+			</div>
+			<FooterRepoLink />
+		</>
+	)
+}

internal/site/src/components/routes/system/smart-table.tsx

@@ -1,37 +1,64 @@
-import * as React from "react"
 import { t } from "@lingui/core/macro"
 import {
-   ColumnDef,
+	type ColumnDef,
-   ColumnFiltersState,
+	type ColumnFiltersState,
-   Column,
+	type Column,
+	type SortingState,
 	flexRender,
 	getCoreRowModel,
 	getFilteredRowModel,
 	getSortedRowModel,
-   SortingState,
 	useReactTable,
 } from "@tanstack/react-table"
-import { Activity, Box, Clock, HardDrive, HashIcon, CpuIcon, BinaryIcon, RotateCwIcon, LoaderCircleIcon, CheckCircle2Icon, XCircleIcon, ArrowLeftRightIcon } from "lucide-react"
+import {
+	Activity,
+	Box,
+	Clock,
+	HardDrive,
+	BinaryIcon,
+	RotateCwIcon,
+	LoaderCircleIcon,
+	CheckCircle2Icon,
+	XCircleIcon,
+	ArrowLeftRightIcon,
+	MoreHorizontalIcon,
+	RefreshCwIcon,
+	ServerIcon,
+	Trash2Icon,
+	XIcon,
+} from "lucide-react"
 import { Card, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
 import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from "@/components/ui/sheet"
 import { Input } from "@/components/ui/input"
-import {
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
-   Table,
-   TableBody,
-   TableCell,
-   TableHead,
-   TableHeader,
-   TableRow,
-} from "@/components/ui/table"
 import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
 import { pb } from "@/lib/api"
-import { SmartData, SmartAttribute } from "@/types"
+import type { SmartDeviceRecord, SmartAttribute } from "@/types"
-import { formatBytes, toFixedFloat, formatTemperature, cn, secondsToString } from "@/lib/utils"
+import {
+	formatBytes,
+	toFixedFloat,
+	formatTemperature,
+	cn,
+	secondsToString,
+	hourWithSeconds,
+	formatShortDate,
+} from "@/lib/utils"
 import { Trans } from "@lingui/react/macro"
+import { useStore } from "@nanostores/react"
+import { $allSystemsById } from "@/lib/stores"
 import { ThermometerIcon } from "@/components/ui/icons"
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
 import { Separator } from "@/components/ui/separator"
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuSeparator,
+	DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { useCallback, useMemo, useEffect, useState } from "react"
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"
 
 // Column definition for S.M.A.R.T. attributes table
 export const smartColumns: ColumnDef<SmartAttribute>[] = [
@@ -66,19 +93,19 @@ export const smartColumns: ColumnDef<SmartAttribute>[] = [
 	},
 ]
 
-
-
 export type DiskInfo = {
+	id: string
+	system: string
 	device: string
 	model: string
-   serialNumber: string
-   firmwareVersion: string
 	capacity: string
 	status: string
 	temperature: number
 	deviceType: string
 	powerOnHours?: number
 	powerCycles?: number
+	attributes?: SmartAttribute[]
+	updated: string
 }
 
 // Function to format capacity display
@@ -87,38 +114,51 @@ function formatCapacity(bytes: number): string {
 	return `${toFixedFloat(value, value >= 10 ? 1 : 2)} ${unit}`
 }
 
-// Function to convert SmartData to DiskInfo
+// Function to convert SmartDeviceRecord to DiskInfo
-function convertSmartDataToDiskInfo(smartDataRecord: Record<string, SmartData>): DiskInfo[] {
+function convertSmartDeviceRecordToDiskInfo(records: SmartDeviceRecord[]): DiskInfo[] {
 	const unknown = "Unknown"
-   return Object.entries(smartDataRecord).map(([key, smartData]) => ({
+	return records.map((record) => ({
-      device: smartData.dn || key,
+		id: record.id,
-      model: smartData.mn || unknown,
+		system: record.system,
-      serialNumber: smartData.sn || unknown,
+		device: record.name || unknown,
-      firmwareVersion: smartData.fv || unknown,
+		model: record.model || unknown,
-      capacity: smartData.c ? formatCapacity(smartData.c) : unknown,
+		serialNumber: record.serial || unknown,
-      status: smartData.s || unknown,
+		firmwareVersion: record.firmware || unknown,
-      temperature: smartData.t || 0,
+		capacity: record.capacity ? formatCapacity(record.capacity) : unknown,
-      deviceType: smartData.dt || unknown,
+		status: record.state || unknown,
-      // These fields need to be extracted from SmartAttribute if available
+		temperature: record.temp || 0,
-      powerOnHours: smartData.a?.find(attr => {
+		deviceType: record.type || unknown,
-         const name = attr.n.toLowerCase();
+		attributes: record.attributes,
-         return name.includes("poweronhours") || name.includes("power_on_hours");
+		updated: record.updated,
-      })?.rv,
+		powerOnHours: record.hours,
-      powerCycles: smartData.a?.find(attr => {
+		powerCycles: record.cycles,
-         const name = attr.n.toLowerCase();
-         return (name.includes("power") && name.includes("cycle")) || name.includes("startstopcycles");
-      })?.rv,
 	}))
 }
 
+const SMART_DEVICE_FIELDS = "id,system,name,model,state,capacity,temp,type,hours,cycles,updated"
 
 export const columns: ColumnDef<DiskInfo>[] = [
+	{
+		id: "system",
+		accessorFn: (record) => record.system,
+		sortingFn: (a, b) => {
+			const allSystems = $allSystemsById.get()
+			const systemNameA = allSystems[a.original.system]?.name ?? ""
+			const systemNameB = allSystems[b.original.system]?.name ?? ""
+			return systemNameA.localeCompare(systemNameB)
+		},
+		header: ({ column }) => <HeaderButton column={column} name={t`System`} Icon={ServerIcon} />,
+		cell: ({ getValue }) => {
+			const allSystems = useStore($allSystemsById)
+			return <span className="ms-1.5 xl:w-30 block truncate">{allSystems[getValue() as string]?.name ?? ""}</span>
+		},
+	},
 	{
 		accessorKey: "device",
 		sortingFn: (a, b) => a.original.device.localeCompare(b.original.device),
 		header: ({ column }) => <HeaderButton column={column} name={t`Device`} Icon={HardDrive} />,
 		cell: ({ row }) => (
-         <div className="font-medium max-w-50 truncate ms-1.5" title={row.getValue("device")}>
+			<div className="font-medium max-w-40 truncate ms-1.5" title={row.getValue("device")}>
 				{row.getValue("device")}
 			</div>
 		),
@@ -128,7 +168,7 @@ export const columns: ColumnDef<DiskInfo>[] = [
 		sortingFn: (a, b) => a.original.model.localeCompare(b.original.model),
 		header: ({ column }) => <HeaderButton column={column} name={t`Model`} Icon={Box} />,
 		cell: ({ row }) => (
-         <div className="max-w-50 truncate ms-1.5" title={row.getValue("model")}>
+			<div className="max-w-48 truncate ms-1.5" title={row.getValue("model")}>
 				{row.getValue("model")}
 			</div>
 		),
@@ -136,18 +176,7 @@ export const columns: ColumnDef<DiskInfo>[] = [
 	{
 		accessorKey: "capacity",
 		header: ({ column }) => <HeaderButton column={column} name={t`Capacity`} Icon={BinaryIcon} />,
-      cell: ({ getValue }) => (
+		cell: ({ getValue }) => <span className="ms-1.5">{getValue() as string}</span>,
-         <span className="ms-1.5">{getValue() as string}</span>
-      ),
-   },
-   {
-      accessorKey: "temperature",
-      invertSorting: true,
-      header: ({ column }) => <HeaderButton column={column} name={t`Temp`} Icon={ThermometerIcon} />,
-      cell: ({ getValue }) => {
-         const { value, unit } = formatTemperature(getValue() as number)
-         return <span className="ms-1.5">{`${value} ${unit}`}</span>
-      },
 	},
 	{
 		accessorKey: "status",
@@ -156,11 +185,7 @@ export const columns: ColumnDef<DiskInfo>[] = [
 			const status = getValue() as string
 			return (
 				<div className="ms-1.5">
-               <Badge
+					<Badge variant={status === "PASSED" ? "success" : status === "FAILED" ? "danger" : "warning"}>{status}</Badge>
-                  variant={status === "PASSED" ? "success" : status === "FAILED" ? "danger" : "warning"}
-               >
-                  {status}
-               </Badge>
 				</div>
 			)
 		},
@@ -180,15 +205,13 @@ export const columns: ColumnDef<DiskInfo>[] = [
 	{
 		accessorKey: "powerOnHours",
 		invertSorting: true,
-      header: ({ column }) => <HeaderButton column={column} name={t({ message: "Power On", comment: "Power On Time" })} Icon={Clock} />,
+		header: ({ column }) => (
+			<HeaderButton column={column} name={t({ message: "Power On", comment: "Power On Time" })} Icon={Clock} />
+		),
 		cell: ({ getValue }) => {
 			const hours = (getValue() ?? 0) as number
 			if (!hours && hours !== 0) {
-            return (
+				return <div className="text-sm text-muted-foreground ms-1.5">N/A</div>
-               <div className="text-sm text-muted-foreground ms-1.5">
-                  N/A
-               </div>
-            )
 			}
 			const seconds = hours * 3600
 			return (
@@ -202,34 +225,50 @@ export const columns: ColumnDef<DiskInfo>[] = [
 	{
 		accessorKey: "powerCycles",
 		invertSorting: true,
-      header: ({ column }) => <HeaderButton column={column} name={t({ message: "Cycles", comment: "Power Cycles" })} Icon={RotateCwIcon} />,
+		header: ({ column }) => (
+			<HeaderButton column={column} name={t({ message: "Cycles", comment: "Power Cycles" })} Icon={RotateCwIcon} />
+		),
 		cell: ({ getValue }) => {
 			const cycles = getValue() as number | undefined
 			if (!cycles && cycles !== 0) {
-            return (
+				return <div className="text-muted-foreground ms-1.5">N/A</div>
-               <div className="text-muted-foreground ms-1.5">
-                  N/A
-               </div>
-            )
 			}
 			return <span className="ms-1.5">{cycles}</span>
 		},
 	},
 	{
-      accessorKey: "serialNumber",
+		accessorKey: "temperature",
-      sortingFn: (a, b) => a.original.serialNumber.localeCompare(b.original.serialNumber),
+		invertSorting: true,
-      header: ({ column }) => <HeaderButton column={column} name={t`Serial Number`} Icon={HashIcon} />,
+		header: ({ column }) => <HeaderButton column={column} name={t`Temp`} Icon={ThermometerIcon} />,
-      cell: ({ getValue }) => (
+		cell: ({ getValue }) => {
-         <span className="ms-1.5">{getValue() as string}</span>
+			const { value, unit } = formatTemperature(getValue() as number)
-      ),
+			return <span className="ms-1.5">{`${value} ${unit}`}</span>
 		},
+	},
+	// {
+	// 	accessorKey: "serialNumber",
+	// 	sortingFn: (a, b) => a.original.serialNumber.localeCompare(b.original.serialNumber),
+	// 	header: ({ column }) => <HeaderButton column={column} name={t`Serial Number`} Icon={HashIcon} />,
+	// 	cell: ({ getValue }) => <span className="ms-1.5">{getValue() as string}</span>,
+	// },
+	// {
+	// 	accessorKey: "firmwareVersion",
+	// 	sortingFn: (a, b) => a.original.firmwareVersion.localeCompare(b.original.firmwareVersion),
+	// 	header: ({ column }) => <HeaderButton column={column} name={t`Firmware`} Icon={CpuIcon} />,
+	// 	cell: ({ getValue }) => <span className="ms-1.5">{getValue() as string}</span>,
+	// },
 	{
-      accessorKey: "firmwareVersion",
+		id: "updated",
-      sortingFn: (a, b) => a.original.firmwareVersion.localeCompare(b.original.firmwareVersion),
+		invertSorting: true,
-      header: ({ column }) => <HeaderButton column={column} name={t`Firmware`} Icon={CpuIcon} />,
+		accessorFn: (record) => record.updated,
-      cell: ({ getValue }) => (
+		header: ({ column }) => <HeaderButton column={column} name={t`Updated`} Icon={Clock} />,
-         <span className="ms-1.5">{getValue() as string}</span>
+		cell: ({ getValue }) => {
-      ),
+			const timestamp = getValue() as string
+			// if today, use hourWithSeconds, otherwise use formatShortDate
+			const formatter =
+				new Date(timestamp).toDateString() === new Date().toDateString() ? hourWithSeconds : formatShortDate
+			return <span className="ms-1.5 tabular-nums">{formatter(timestamp)}</span>
+		},
 	},
 ]
 
@@ -237,7 +276,10 @@ function HeaderButton({ column, name, Icon }: { column: Column<DiskInfo>; name:
 	const isSorted = column.getIsSorted()
 	return (
 		<Button
-         className={cn("h-9 px-3 flex items-center gap-2 duration-50", isSorted && "bg-accent/70 light:bg-accent text-accent-foreground/90")}
+			className={cn(
+				"h-9 px-3 flex items-center gap-2 duration-50",
+				isSorted && "bg-accent/70 light:bg-accent text-accent-foreground/90"
+			)}
 			variant="ghost"
 			onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
 		>
@@ -247,39 +289,193 @@ function HeaderButton({ column, name, Icon }: { column: Column<DiskInfo>; name:
 	)
 }
 
-export default function DisksTable({ systemId }: { systemId: string }) {
+export default function DisksTable({ systemId }: { systemId?: string }) {
-   const [sorting, setSorting] = React.useState<SortingState>([{ id: "device", desc: false }])
+	const [sorting, setSorting] = useState<SortingState>([{ id: systemId ? "device" : "system", desc: false }])
-   const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([])
+	const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([])
-   const [rowSelection, setRowSelection] = React.useState({})
+	const [rowSelection, setRowSelection] = useState({})
-   const [smartData, setSmartData] = React.useState<Record<string, SmartData> | undefined>(undefined)
+	const [smartDevices, setSmartDevices] = useState<SmartDeviceRecord[] | undefined>(undefined)
-   const [activeDisk, setActiveDisk] = React.useState<DiskInfo | null>(null)
+	const [activeDiskId, setActiveDiskId] = useState<string | null>(null)
-   const [sheetOpen, setSheetOpen] = React.useState(false)
+	const [sheetOpen, setSheetOpen] = useState(false)
+	const [rowActionState, setRowActionState] = useState<{ type: "refresh" | "delete"; id: string } | null>(null)
+	const [globalFilter, setGlobalFilter] = useState("")
 
 	const openSheet = (disk: DiskInfo) => {
-      setActiveDisk(disk)
+		setActiveDiskId(disk.id)
 		setSheetOpen(true)
 	}
 
-   // Fetch smart data when component mounts or systemId changes
+	// Fetch smart devices from collection (without attributes to save bandwidth)
-   React.useEffect(() => {
+	const fetchSmartDevices = useCallback(() => {
-      if (systemId) {
+		pb.collection<SmartDeviceRecord>("smart_devices")
-         pb.send<Record<string, SmartData>>("/api/beszel/smart", { query: { system: systemId } })
+			.getFullList({
-            .then((data) => {
+				filter: systemId ? pb.filter("system = {:system}", { system: systemId }) : undefined,
-               setSmartData(data)
+				fields: SMART_DEVICE_FIELDS,
 			})
-            .catch(() => setSmartData({}))
+			.then((records) => {
+				setSmartDevices(records)
+			})
+			.catch(() => setSmartDevices([]))
+	}, [systemId])
+
+	// Fetch smart devices when component mounts or systemId changes
+	useEffect(() => {
+		fetchSmartDevices()
+	}, [fetchSmartDevices])
+
+	// Subscribe to live updates so rows add/remove without manual refresh/filtering
+	useEffect(() => {
+		let unsubscribe: (() => void) | undefined
+		const pbOptions = systemId
+			? { fields: SMART_DEVICE_FIELDS, filter: pb.filter("system = {:system}", { system: systemId }) }
+			: { fields: SMART_DEVICE_FIELDS }
+
+		;(async () => {
+			try {
+				unsubscribe = await pb.collection("smart_devices").subscribe(
+					"*",
+					(event) => {
+						const record = event.record as SmartDeviceRecord
+						setSmartDevices((currentDevices) => {
+							const devices = currentDevices ?? []
+							const matchesSystemScope = !systemId || record.system === systemId
+
+							if (event.action === "delete") {
+								return devices.filter((device) => device.id !== record.id)
+							}
+
+							if (!matchesSystemScope) {
+								// Record moved out of scope; ensure it disappears locally.
+								return devices.filter((device) => device.id !== record.id)
+							}
+
+							const existingIndex = devices.findIndex((device) => device.id === record.id)
+							if (existingIndex === -1) {
+								return [record, ...devices]
+							}
+
+							const next = [...devices]
+							next[existingIndex] = record
+							return next
+						})
+					},
+					pbOptions
+				)
+			} catch (error) {
+				console.error("Failed to subscribe to SMART device updates:", error)
+			}
+		})()
+
+		return () => {
+			unsubscribe?.()
 		}
 	}, [systemId])
 
-   // Convert SmartData to DiskInfo, if no data use empty array
+	const handleRowRefresh = useCallback(
-   const diskData = React.useMemo(() => {
+		async (disk: DiskInfo) => {
-      return smartData ? convertSmartDataToDiskInfo(smartData) : []
+			if (!disk.system) return
-   }, [smartData])
+			setRowActionState({ type: "refresh", id: disk.id })
+			try {
+				await pb.send("/api/beszel/smart/refresh", {
+					method: "POST",
+					query: { system: disk.system },
+				})
+			} catch (error) {
+				console.error("Failed to refresh SMART device:", error)
+			} finally {
+				setRowActionState((state) => (state?.id === disk.id ? null : state))
+			}
+		},
+		[fetchSmartDevices]
+	)
 
+	const handleDeleteDevice = useCallback(async (disk: DiskInfo) => {
+		setRowActionState({ type: "delete", id: disk.id })
+		try {
+			await pb.collection("smart_devices").delete(disk.id)
+			// setSmartDevices((current) => current?.filter((device) => device.id !== disk.id))
+		} catch (error) {
+			console.error("Failed to delete SMART device:", error)
+		} finally {
+			setRowActionState((state) => (state?.id === disk.id ? null : state))
+		}
+	}, [])
+
+	const actionColumn = useMemo<ColumnDef<DiskInfo>>(
+		() => ({
+			id: "actions",
+			enableSorting: false,
+			header: () => (
+				<span className="sr-only">
+					<Trans>Actions</Trans>
+				</span>
+			),
+			cell: ({ row }) => {
+				const disk = row.original
+				const isRowRefreshing = rowActionState?.id === disk.id && rowActionState.type === "refresh"
+				const isRowDeleting = rowActionState?.id === disk.id && rowActionState.type === "delete"
+
+				return (
+					<div className="flex justify-end">
+						<DropdownMenu>
+							<DropdownMenuTrigger asChild>
+								<Button
+									variant="ghost"
+									size="icon"
+									className="size-8"
+									onClick={(event) => event.stopPropagation()}
+									onMouseDown={(event) => event.stopPropagation()}
+								>
+									<span className="sr-only">
+										<Trans>Open menu</Trans>
+									</span>
+									<MoreHorizontalIcon className="size-4" />
+								</Button>
+							</DropdownMenuTrigger>
+							<DropdownMenuContent align="end" onClick={(event) => event.stopPropagation()}>
+								<DropdownMenuItem
+									onClick={(event) => {
+										event.stopPropagation()
+										handleRowRefresh(disk)
+									}}
+									disabled={isRowRefreshing || isRowDeleting}
+								>
+									<RefreshCwIcon className={cn("me-2.5 size-4", isRowRefreshing && "animate-spin")} />
+									<Trans>Refresh</Trans>
+								</DropdownMenuItem>
+								<DropdownMenuSeparator />
+								<DropdownMenuItem
+									onClick={(event) => {
+										event.stopPropagation()
+										handleDeleteDevice(disk)
+									}}
+									disabled={isRowDeleting}
+								>
+									<Trash2Icon className="me-2.5 size-4" />
+									<Trans>Delete</Trans>
+								</DropdownMenuItem>
+							</DropdownMenuContent>
+						</DropdownMenu>
+					</div>
+				)
+			},
+		}),
+		[handleRowRefresh, handleDeleteDevice, rowActionState]
+	)
+
+	// Filter columns based on whether systemId is provided
+	const tableColumns = useMemo(() => {
+		const baseColumns = systemId ? columns.filter((col) => col.id !== "system") : columns
+		return [...baseColumns, actionColumn]
+	}, [systemId, actionColumn])
+
+	// Convert SmartDeviceRecord to DiskInfo
+	const diskData = useMemo(() => {
+		return smartDevices ? convertSmartDeviceRecordToDiskInfo(smartDevices) : []
+	}, [smartDevices])
 
 	const table = useReactTable({
 		data: diskData,
-      columns: columns,
+		columns: tableColumns,
 		onSortingChange: setSorting,
 		onColumnFiltersChange: setColumnFilters,
 		getCoreRowModel: getCoreRowModel(),
@@ -290,10 +486,26 @@ export default function DisksTable({ systemId }: { systemId: string }) {
 			sorting,
 			columnFilters,
 			rowSelection,
+			globalFilter,
+		},
+		onGlobalFilterChange: setGlobalFilter,
+		globalFilterFn: (row, _columnId, filterValue) => {
+			const disk = row.original
+			const systemName = $allSystemsById.get()[disk.system]?.name ?? ""
+			const device = disk.device ?? ""
+			const model = disk.model ?? ""
+			const status = disk.status ?? ""
+			const type = disk.deviceType ?? ""
+			const searchString = `${systemName} ${device} ${model} ${status} ${type}`.toLowerCase()
+			return (filterValue as string)
+				.toLowerCase()
+				.split(" ")
+				.every((term) => searchString.includes(term))
 		},
 	})
 
-   if (!diskData.length && !columnFilters.length) {
+	// Hide the table on system pages if there's no data, but always show on global page
+	if (systemId && !diskData.length && !columnFilters.length) {
 		return null
 	}
 
@@ -303,21 +515,31 @@ export default function DisksTable({ systemId }: { systemId: string }) {
 				<CardHeader className="p-0 mb-4">
 					<div className="grid md:flex gap-5 w-full items-end">
 						<div className="px-2 sm:px-1">
-                     <CardTitle className="mb-2">
+							<CardTitle className="mb-2">S.M.A.R.T.</CardTitle>
-                        S.M.A.R.T.
-                     </CardTitle>
 							<CardDescription className="flex">
 								<Trans>Click on a device to view more information.</Trans>
 							</CardDescription>
 						</div>
+						<div className="relative ms-auto w-full max-w-full md:w-64">
 							<Input
 								placeholder={t`Filter...`}
-                     value={(table.getColumn("device")?.getFilterValue() as string) ?? ""}
+								value={globalFilter}
-                     onChange={(event) =>
+								onChange={(event) => setGlobalFilter(event.target.value)}
-                        table.getColumn("device")?.setFilterValue(event.target.value)
+								className="px-4 w-full max-w-full md:w-64"
-                     }
-                     className="ms-auto px-4 w-full max-w-full md:w-64"
 							/>
+							{globalFilter && (
+								<Button
+									type="button"
+									variant="ghost"
+									size="icon"
+									aria-label={t`Clear`}
+									className="absolute right-1 top-1/2 -translate-y-1/2 h-7 w-7 text-muted-foreground"
+									onClick={() => setGlobalFilter("")}
+								>
+									<XIcon className="h-4 w-4" />
+								</Button>
+							)}
+						</div>
 					</div>
 				</CardHeader>
 				<div className="rounded-md border text-nowrap">
@@ -328,12 +550,7 @@ export default function DisksTable({ systemId }: { systemId: string }) {
 									{headerGroup.headers.map((header) => {
 										return (
 											<TableHead key={header.id} className="px-2">
-                                    {header.isPlaceholder
+												{header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
-                                       ? null
-                                       : flexRender(
-                                          header.column.columnDef.header,
-                                          header.getContext()
-                                       )}
 											</TableHead>
 										)
 									})}
@@ -351,22 +568,19 @@ export default function DisksTable({ systemId }: { systemId: string }) {
 									>
 										{row.getVisibleCells().map((cell) => (
 											<TableCell key={cell.id} className="md:ps-5">
-                                    {flexRender(
+												{flexRender(cell.column.columnDef.cell, cell.getContext())}
-                                       cell.column.columnDef.cell,
-                                       cell.getContext()
-                                    )}
 											</TableCell>
 										))}
 									</TableRow>
 								))
 							) : (
 								<TableRow>
-                           <TableCell
+									<TableCell colSpan={tableColumns.length} className="h-24 text-center">
-                              colSpan={columns.length}
+										{smartDevices ? (
-                              className="h-24 text-center"
+											t`No results.`
-                           >
+										) : (
-                              {smartData ? t`No results.` : <LoaderCircleIcon className="animate-spin size-10 opacity-60 mx-auto" />}
+											<LoaderCircleIcon className="animate-spin size-10 opacity-60 mx-auto" />
-
+										)}
 									</TableCell>
 								</TableRow>
 							)}
@@ -374,28 +588,53 @@ export default function DisksTable({ systemId }: { systemId: string }) {
 					</Table>
 				</div>
 			</Card>
-         <DiskSheet disk={activeDisk} smartData={smartData?.[activeDisk?.serialNumber ?? ""]} open={sheetOpen} onOpenChange={setSheetOpen} />
+			<DiskSheet diskId={activeDiskId} open={sheetOpen} onOpenChange={setSheetOpen} />
 		</div>
 	)
 }
 
-function DiskSheet({ disk, smartData, open, onOpenChange }: { disk: DiskInfo | null; smartData?: SmartData; open: boolean; onOpenChange: (open: boolean) => void }) {
+function DiskSheet({
-   if (!disk) return null
+	diskId,
+	open,
+	onOpenChange,
+}: {
+	diskId: string | null
+	open: boolean
+	onOpenChange: (open: boolean) => void
+}) {
+	const [disk, setDisk] = useState<SmartDeviceRecord | null>(null)
+	const [isLoading, setIsLoading] = useState(false)
 
-   const smartAttributes = smartData?.a || []
+	// Fetch full device record (including attributes) when sheet opens
+	useEffect(() => {
+		if (!diskId) {
+			setDisk(null)
+			return
+		}
+		// Only fetch when opening, not when closing (keeps data visible during close animation)
+		if (!open) return
+		setIsLoading(true)
+		pb.collection<SmartDeviceRecord>("smart_devices")
+			.getOne(diskId)
+			.then(setDisk)
+			.catch(() => setDisk(null))
+			.finally(() => setIsLoading(false))
+	}, [open, diskId])
+
+	const smartAttributes = disk?.attributes || []
 
 	// Find all attributes where when failed is not empty
-   const failedAttributes = smartAttributes.filter(attr => attr.wf && attr.wf.trim() !== '')
+	const failedAttributes = smartAttributes.filter((attr) => attr.wf && attr.wf.trim() !== "")
 
 	// Filter columns to only show those that have values in at least one row
-   const visibleColumns = React.useMemo(() => {
+	const visibleColumns = useMemo(() => {
-      return smartColumns.filter(column => {
+		return smartColumns.filter((column) => {
-         const accessorKey = (column as any).accessorKey as keyof SmartAttribute
+			const accessorKey = "accessorKey" in column ? (column.accessorKey as keyof SmartAttribute | undefined) : undefined
 			if (!accessorKey) {
 				return true
 			}
 			// Check if any row has a non-empty value for this column
-         return smartAttributes.some(attr => {
+			return smartAttributes.some((attr) => {
 				return attr[accessorKey] !== undefined
 			})
 		})
@@ -407,27 +646,60 @@ function DiskSheet({ disk, smartData, open, onOpenChange }: { disk: DiskInfo | n
 		getCoreRowModel: getCoreRowModel(),
 	})
 
+	const unknown = "Unknown"
+	const deviceName = disk?.name || unknown
+	const model = disk?.model || unknown
+	const capacity = disk?.capacity ? formatCapacity(disk.capacity) : unknown
+	const serialNumber = disk?.serial || unknown
+	const firmwareVersion = disk?.firmware || unknown
+	const status = disk?.state || unknown
+
 	return (
 		<Sheet open={open} onOpenChange={onOpenChange}>
 			<SheetContent className="w-full sm:max-w-220 gap-0">
 				<SheetHeader className="mb-0 border-b">
-               <SheetTitle><Trans>S.M.A.R.T. Details</Trans> - {disk.device}</SheetTitle>
+					<SheetTitle>
+						<Trans>S.M.A.R.T. Details</Trans> - {deviceName}
+					</SheetTitle>
 					<SheetDescription className="flex flex-wrap items-center gap-x-2 gap-y-1">
-                  {disk.model} <Separator orientation="vertical" className="h-2.5 bg-muted-foreground opacity-70" />
+						{model}
-                  {disk.serialNumber}
+						<Separator orientation="vertical" className="h-2.5 bg-muted-foreground opacity-70" />
+						{capacity}
+						<Separator orientation="vertical" className="h-2.5 bg-muted-foreground opacity-70" />
+						<Tooltip>
+							<TooltipTrigger asChild>
+								<span>{serialNumber}</span>
+							</TooltipTrigger>
+							<TooltipContent>
+								<Trans>Serial Number</Trans>
+							</TooltipContent>
+						</Tooltip>
+						<Separator orientation="vertical" className="h-2.5 bg-muted-foreground opacity-70" />
+						<Tooltip>
+							<TooltipTrigger asChild>
+								<span>{firmwareVersion}</span>
+							</TooltipTrigger>
+							<TooltipContent>
+								<Trans>Firmware Version</Trans>
+							</TooltipContent>
+						</Tooltip>
 					</SheetDescription>
 				</SheetHeader>
 				<div className="flex-1 overflow-auto p-4 flex flex-col gap-4">
-               <Alert className="pb-3">
+					{isLoading ? (
-                  {smartData?.s === "PASSED" ? (
+						<div className="flex justify-center py-8">
-                     <CheckCircle2Icon className="size-4" />
+							<LoaderCircleIcon className="animate-spin size-10 opacity-60" />
+						</div>
 					) : (
-                     <XCircleIcon className="size-4" />
+						<>
-                  )}
+							<Alert className="pb-3">
-                  <AlertTitle><Trans>S.M.A.R.T. Self-Test</Trans>: {smartData?.s}</AlertTitle>
+								{status === "PASSED" ? <CheckCircle2Icon className="size-4" /> : <XCircleIcon className="size-4" />}
+								<AlertTitle>
+									<Trans>S.M.A.R.T. Self-Test</Trans>: {status}
+								</AlertTitle>
 								{failedAttributes.length > 0 && (
 									<AlertDescription>
-                        <Trans>Failed Attributes:</Trans> {failedAttributes.map(attr => attr.n).join(", ")}
+										<Trans>Failed Attributes:</Trans> {failedAttributes.map((attr) => attr.n).join(", ")}
 									</AlertDescription>
 								)}
 							</Alert>
@@ -441,10 +713,7 @@ function DiskSheet({ disk, smartData, open, onOpenChange }: { disk: DiskInfo | n
 														<TableHead key={header.id}>
 															{header.isPlaceholder
 																? null
-                                          : flexRender(
+																: flexRender(header.column.columnDef.header, header.getContext())}
-                                             header.column.columnDef.header,
-                                             header.getContext()
-                                          )}
 														</TableHead>
 													))}
 												</TableRow>
@@ -453,23 +722,17 @@ function DiskSheet({ disk, smartData, open, onOpenChange }: { disk: DiskInfo | n
 										<TableBody>
 											{table.getRowModel().rows.map((row) => {
 												// Check if the attribute is failed
-                              const isFailedAttribute = row.original.wf && row.original.wf.trim() !== '';
+												const isFailedAttribute = row.original.wf && row.original.wf.trim() !== ""
 
 												return (
-                                 <TableRow
+													<TableRow key={row.id} className={isFailedAttribute ? "text-red-600 dark:text-red-400" : ""}>
-                                    key={row.id}
-                                    className={isFailedAttribute ? "text-red-600 dark:text-red-400" : ""}
-                                 >
 														{row.getVisibleCells().map((cell) => (
 															<TableCell key={cell.id}>
-                                          {flexRender(
+																{flexRender(cell.column.columnDef.cell, cell.getContext())}
-                                             cell.column.columnDef.cell,
-                                             cell.getContext()
-                                          )}
 															</TableCell>
 														))}
 													</TableRow>
-                              );
+												)
 											})}
 										</TableBody>
 									</Table>
@@ -479,6 +742,8 @@ function DiskSheet({ disk, smartData, open, onOpenChange }: { disk: DiskInfo | n
 									<Trans>No S.M.A.R.T. attributes available for this device.</Trans>
 								</div>
 							)}
+						</>
+					)}
 				</div>
 			</SheetContent>
 		</Sheet>

internal/site/src/index.css

@@ -34,7 +34,7 @@
 	--table-header: hsl(225, 6%, 97%);
 	--chart-saturation: 65%;
 	--chart-lightness: 50%;
-	--container: 1480px;
+	--container: 1500px;
 }
 
 .dark {
@@ -117,7 +117,6 @@
 }
 
 @layer utilities {
-
 	/* Fonts */
 	@supports (font-variation-settings: normal) {
 		:root {

internal/site/src/main.tsx

@@ -20,6 +20,7 @@ import * as systemsManager from "@/lib/systemsManager.ts"
 const LoginPage = lazy(() => import("@/components/login/login.tsx"))
 const Home = lazy(() => import("@/components/routes/home.tsx"))
 const Containers = lazy(() => import("@/components/routes/containers.tsx"))
+const Smart = lazy(() => import("@/components/routes/smart.tsx"))
 const SystemDetail = lazy(() => import("@/components/routes/system.tsx"))
 const CopyToClipboardDialog = lazy(() => import("@/components/copy-to-clipboard.tsx"))
 
@@ -62,6 +63,8 @@ const App = memo(() => {
 		return <SystemDetail id={page.params.id} />
 	} else if (page.route === "containers") {
 		return <Containers />
+	} else if (page.route === "smart") {
+		return <Smart />
 	} else if (page.route === "settings") {
 		return <Settings />
 	}
@@ -97,7 +100,7 @@ const Layout = () => {
 					<LoginPage />
 				</Suspense>
 			) : (
-				<div style={{"--container": `${userSettings.layoutWidth ?? 1480}px`} as React.CSSProperties}>
+				<div style={{ "--container": `${userSettings.layoutWidth ?? 1500}px` } as React.CSSProperties}>
 					<div className="container">
 						<Navbar />
 					</div>

internal/site/src/types.d.ts

@@ -377,6 +377,23 @@ export interface SmartAttribute {
 	wf?: string
 }
 
+export interface SmartDeviceRecord extends RecordModel {
+	id: string
+	system: string
+	name: string
+	model: string
+	state: string
+	capacity: number
+	temp: number
+	firmware: string
+	serial: string
+	type: string
+	hours: number
+	cycles: number
+	attributes: SmartAttribute[]
+	updated: string
+}
+
 export interface SystemdRecord extends RecordModel {
 	system: string
 	name: string