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

@@ -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')) {
+    if (contentDiv && (!contentDiv.innerHTML || contentDiv.innerHTML.includes('status-loading'))) {
-      panel.innerHTML = '<p class="status-error">Failed to load status.</p>';
+      contentDiv.innerHTML = '<p class="status-error">Failed to load status: ' + err.message + '</p>';
     }
   }
 }

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 {