From 48ee66e74476429dcd778fe87c9661b0c4bf5637 Mon Sep 17 00:00:00 2001
From: ZGaetano <zgaetano@wilddragon.net>
Date: Fri, 22 May 2026 10:55:18 -0400
Subject: [PATCH] fix: SDI crash, monitors polling, home RAM fields, editor IN
 DEV splash, timecode, create recorder API: screens-home.jsx

---
 services/web-ui/public/screens-home.jsx | 29 ++++++++++++++++---------
 1 file changed, 19 insertions(+), 10 deletions(-)

diff --git a/services/web-ui/public/screens-home.jsx b/services/web-ui/public/screens-home.jsx
index 41ee679..2f8347b 100644
--- a/services/web-ui/public/screens-home.jsx
+++ b/services/web-ui/public/screens-home.jsx
@@ -8,6 +8,8 @@ function Home({ navigate }) {
   const failedJobs    = JOBS.filter(j => j.status === 'failed').length;
   const recentAssets  = [...ASSETS].sort((a, b) => new Date(b.created_at) - new Date(a.created_at)).slice(0, 6);
 
+  const nodesOnline = NODES.filter(n => n.status === 'online' || n.online === true).length;
+
   const spark = (n, base = 10) => Array.from({ length: 13 }, (_, i) => base + Math.round(Math.sin(i * 0.7 + n) * base * 0.3));
 
   return (
@@ -42,7 +44,7 @@ function Home({ navigate }) {
         </div>
         <div className="stat-card">
           <div className="label"><Icon name="hdd" size={12} /> Cluster nodes</div>
-          <div className="value">{NODES.filter(n => n.online).length}<span style={{ color: 'var(--text-3)', fontWeight: 400, fontSize: 16 }}> / {NODES.length} online</span></div>
+          <div className="value">{nodesOnline}<span style={{ color: 'var(--text-3)', fontWeight: 400, fontSize: 16 }}> / {NODES.length} online</span></div>
           <div className="delta">Last heartbeat &lt;30s</div>
           <Sparkline data={spark(4, 4)} color="#F5A623" />
         </div>
@@ -101,15 +103,22 @@ function Home({ navigate }) {
           <div className="panel" style={{ padding: 4 }}>
             {NODES.length === 0
               ? <div style={{ padding: '16px 12px', color: 'var(--text-3)', fontSize: 12.5 }}>No nodes found.</div>
-              : NODES.slice(0, 4).map(n => (
-                <div key={n.id} style={{ padding: '10px 12px', display: 'flex', alignItems: 'center', gap: 8, borderBottom: '1px solid var(--border)' }}>
-                  <StatusDot status={n.online ? 'online' : 'offline'} />
-                  <span style={{ fontSize: 12.5, fontWeight: 500 }}>{n.hostname}</span>
-                  <span style={{ flex: 1 }} />
-                  {n.cpu_usage != null && <span className="mono" style={{ fontSize: 11, color: 'var(--text-3)' }}>CPU {n.cpu_usage}%</span>}
-                  {n.mem_used_mb != null && <span className="mono" style={{ fontSize: 11, color: 'var(--text-3)' }}>{Math.round(n.mem_used_mb / 1024)}GB RAM</span>}
-                </div>
-              ))}
+              : NODES.slice(0, 4).map(n => {
+                  const nodeId = n.id || n.hostname || n.name || 'node';
+                  const isOnline = n.status === 'online' || n.online === true;
+                  const cpuPct = n.cpu_percent ?? n.cpu ?? n.cpu_usage ?? null;
+                  const memRaw = n.memory_used_gb ?? n.mem ?? (n.mem_used_mb != null ? n.mem_used_mb / 1024 : null);
+                  const memGb = memRaw != null ? Number(memRaw) : null;
+                  return (
+                    <div key={nodeId} style={{ padding: '10px 12px', display: 'flex', alignItems: 'center', gap: 8, borderBottom: '1px solid var(--border)' }}>
+                      <StatusDot status={isOnline ? 'online' : 'offline'} />
+                      <span style={{ fontSize: 12.5, fontWeight: 500 }}>{nodeId}</span>
+                      <span style={{ flex: 1 }} />
+                      {cpuPct != null && <span className="mono" style={{ fontSize: 11, color: 'var(--text-3)' }}>CPU {Math.round(cpuPct)}%</span>}
+                      {memGb != null && <span className="mono" style={{ fontSize: 11, color: 'var(--text-3)' }}>{memGb < 1 ? Math.round(memGb * 1024) + 'MB' : memGb.toFixed(1) + 'GB'} RAM</span>}
+                    </div>
+                  );
+                })}
           </div>
         </div>
       </div>