From d3483f3be7cd8c28a8d54fd37925960fc45ee60a Mon Sep 17 00:00:00 2001
From: Gronod <gordon@i3omb.com>
Date: Tue, 19 May 2026 22:30:54 +0100
Subject: [PATCH] debug(ui): Add visible styling and debug logging for status
 panel

Added debug logging to trace status panel rendering:
- Log when refresh starts
- Log when data is received
- Log errors with details

Also added visible dashed border and background to #status-content
to make it obvious when the div is present but empty.
---
 public/app.js    | 10 +++++++---
 public/style.css |  7 ++++++-
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/public/app.js b/public/app.js
index ed8bbc8..0477ada 100644
--- a/public/app.js
+++ b/public/app.js
@@ -801,16 +801,20 @@ function closeStatusPanel() {
 
 async function refreshStatusPanel() {
   const panel = document.getElementById('status-panel');
+  const contentDiv = document.getElementById('status-content');
   if (!panel || panel.style.display === 'none') return;
+  console.log('[Status] Refreshing status panel...');
   try {
     const res = await fetch('/api/dashboard/status');
-    if (!res.ok) throw new Error('Failed to fetch status');
+    if (!res.ok) throw new Error('Failed to fetch status: ' + res.status);
     const data = await res.json();
+    console.log('[Status] Got status data, rendering...');
     renderStatusPanel(data, panel);
   } catch (err) {
+    console.error('[Status] Error fetching status:', err);
     // Don't overwrite panel on transient error during auto-refresh
-    if (!panel.innerHTML || panel.innerHTML.includes('status-loading')) {
-      panel.innerHTML = '<p class="status-error">Failed to load status.</p>';
+    if (contentDiv && (!contentDiv.innerHTML || contentDiv.innerHTML.includes('status-loading'))) {
+      contentDiv.innerHTML = '<p class="status-error">Failed to load status: ' + err.message + '</p>';
     }
   }
 }
diff --git a/public/style.css b/public/style.css
index 2b72394..26cfd4f 100644
--- a/public/style.css
+++ b/public/style.css
@@ -1233,7 +1233,12 @@ body {
 }
 
 #status-content {
-  min-height: 100px;
+  min-height: 150px;
+  border: 1px dashed var(--border);
+  border-radius: 8px;
+  background: var(--background);
+  padding: 10px;
+  margin-bottom: 16px;
 }
 
 .status-loading {