fix: hide Background Tasks section in Monitor panel when empty

Instead of showing "No background tasks" message, the section is now
completely hidden when there are no tasks, making the UI cleaner.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

src/web/public/app.js

@@ -1383,13 +1383,19 @@ class ClaudemanApp {
     const session = this.sessions.get(this.activeSessionId);
     const body = document.getElementById('backgroundTasksBody');
     const stats = document.getElementById('taskPanelStats');
+    const section = document.getElementById('backgroundTasksSection');
 
     if (!session || !session.taskTree || session.taskTree.length === 0) {
-      body.innerHTML = '<div class="task-empty">No background tasks</div>';
+      // Hide the entire section when there are no background tasks
+      if (section) section.style.display = 'none';
+      body.innerHTML = '';
       stats.textContent = '0 tasks';
       return;
     }
 
+    // Show the section when there are tasks
+    if (section) section.style.display = '';
+
     const taskStats = session.taskStats || { running: 0, completed: 0, failed: 0, total: 0 };
     stats.textContent = `${taskStats.running} running, ${taskStats.completed} done`;
 

src/web/public/index.html

@@ -148,13 +148,12 @@
             <div class="monitor-empty">No screen sessions</div>
           </div>
         </div>
-        <div class="monitor-section">
+        <div class="monitor-section" id="backgroundTasksSection" style="display: none;">
           <div class="monitor-section-header">
             <span>Background Tasks</span>
             <span class="task-stats" id="taskPanelStats">0 running</span>
           </div>
           <div class="monitor-section-body" id="backgroundTasksBody">
-            <div class="monitor-empty">No background tasks</div>
           </div>
         </div>
       </div>