feat:

--ADDED CPU,MEMORY and DISK METRICS

src/App.tsx

@@ -2,6 +2,7 @@ import { useEffect, useState } from 'react'
 import { Link, Navigate, Route, Routes, useMatch, useNavigate, useParams } from 'react-router-dom'
 import './App.css'
 import NodeConnections from './NodeConnections'
+import NodeHardware from './NodeHardware'
 
 const API_BASE_URL = import.meta.env.VITE_API_BASE_URL
 
@@ -379,7 +380,7 @@ function Workspace({ page: activePage }: { page: PageId | 'node-details' }) {
     if (activePage === 'clusters') {
       void loadClusters()
     }
-    if (activePage === 'nodes' || activePage === 'clusters') {
+    if (activePage === 'dashboard' || activePage === 'nodes' || activePage === 'clusters') {
       void loadNodeInterfaces()
     }
   }, [activePage])
@@ -654,14 +655,20 @@ function Workspace({ page: activePage }: { page: PageId | 'node-details' }) {
         )}
 
         {activePage === 'dashboard' && (
-          <section className="content-panel" id="dashboard">
+          <section className="content-panel hardware-dashboard" id="dashboard">
             <p className="eyebrow">Dashboard</p>
-            <h1>Welcome back</h1>
-            <p>
-              Your main workspace is ready. The left navigation can collapse
-              now, and more sections can be added to the nav list as the app
-              grows.
-            </p>
+            <h1>Hardware usage</h1>
+            <p>Live CPU, memory, and disk usage for each registered node.</p>
+            {(nodesStatus === 'idle' || nodesStatus === 'loading') && <p role="status">Loading nodes…</p>}
+            {nodesStatus === 'error' && <div>
+              <p className="status-message error" role="alert">{nodesError}</p>
+              <button className="secondary-button" onClick={() => void loadNodeInterfaces()}>Retry loading nodes</button>
+            </div>}
+            {nodesStatus === 'success' && (nodes.length === 0
+              ? <p>No registered nodes. Add a node from the Nodes page to monitor hardware usage.</p>
+              : <div className="hardware-nodes">
+                  {nodes.map((node) => <NodeHardware key={`${node.uuid}:${node.host}`} name={node.if_name} host={node.host} />)}
+                </div>)}
           </section>
         )}