From 04e25b6b7d7815e71d3effb185360ada398b611d Mon Sep 17 00:00:00 2001
From: arkon <arkon.85@hotmail.com>
Date: Sun, 25 Jan 2026 18:11:14 +0100
Subject: [PATCH] ui: separate Subagents panel from Monitor panel

- Move subagents view into its own independent panel
- Position subagents panel to the left of monitor panel
- Add collapsible/closeable behavior for subagents panel
- Add responsive stacking on small screens
- Simplify monitor panel (now just Screen Sessions + Background Tasks)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 src/web/public/index.html | 28 ++++++++------
 src/web/public/styles.css | 81 ++++++++++++++++++++++++++++++++++-----
 2 files changed, 89 insertions(+), 20 deletions(-)

diff --git a/src/web/public/index.html b/src/web/public/index.html
index 5bd3156a..7cbc9cb0 100644
--- a/src/web/public/index.html
+++ b/src/web/public/index.html
@@ -241,15 +241,10 @@
       </div>
     </div>
 
-    <!-- Monitor Panel (combined Process Monitor + Background Tasks + Subagents) -->
+    <!-- Monitor Panel (Screen Sessions + Background Tasks) -->
     <div class="monitor-panel" id="monitorPanel">
       <div class="monitor-panel-header" id="monitorPanelHeader">
-        <div class="monitor-tabs">
-          <button class="monitor-tab active" data-tab="monitor" onclick="app.switchMonitorTab('monitor')">Monitor</button>
-          <button class="monitor-tab" data-tab="subagents" onclick="app.switchMonitorTab('subagents')" id="subagentsTabBtn" style="display: none;">
-            Subagents <span id="subagentCountBadge" class="monitor-tab-badge"></span>
-          </button>
-        </div>
+        <div class="monitor-panel-title">Monitor</div>
         <div class="monitor-panel-actions">
           <button class="btn-toolbar btn-sm btn-danger" onclick="app.killAllSessions()" title="Kill all sessions and their screen processes">Kill All</button>
           <button class="btn-icon-sm" onclick="app.reconcileScreens()" title="Refresh screens">&#x21BB;</button>
@@ -259,8 +254,7 @@
         </div>
       </div>
       <div class="monitor-resize-handle" id="monitorResizeHandle"></div>
-      <!-- Monitor Tab Content -->
-      <div class="monitor-panel-body monitor-tab-content active" id="monitorTabContent">
+      <div class="monitor-panel-body" id="monitorTabContent">
         <div class="monitor-section">
           <div class="monitor-section-header">
             <span>Screen Sessions</span>
@@ -278,8 +272,20 @@
           </div>
         </div>
       </div>
-      <!-- Subagents Tab Content -->
-      <div class="monitor-panel-body monitor-tab-content" id="subagentsTabContent" style="display: none;">
+    </div>
+
+    <!-- Subagents Panel (separate from Monitor) -->
+    <div class="subagents-panel" id="subagentsPanel">
+      <div class="subagents-panel-header">
+        <div class="subagents-panel-title">
+          Subagents <span id="subagentCountBadge" class="subagent-badge"></span>
+        </div>
+        <div class="subagents-panel-actions">
+          <button class="btn-icon-sm" onclick="app.toggleSubagentsPanel()" title="Toggle panel" id="subagentsToggleBtn">&#x25B2;</button>
+          <button class="btn-icon-sm" onclick="app.closeSubagentsPanel()" title="Close">&times;</button>
+        </div>
+      </div>
+      <div class="subagents-panel-body" id="subagentsTabContent">
         <div class="subagent-container">
           <div class="subagent-list" id="subagentList">
             <div class="subagent-empty">No background agents detected</div>
diff --git a/src/web/public/styles.css b/src/web/public/styles.css
index c64bc949..183fe184 100644
--- a/src/web/public/styles.css
+++ b/src/web/public/styles.css
@@ -2859,15 +2859,6 @@ kbd {
   transform: translateY(0);
 }
 
-/* Wider panel when subagents tab is active */
-.monitor-panel.subagents-active {
-  width: 700px;
-}
-
-.monitor-panel.detached.subagents-active {
-  width: 800px;
-}
-
 /* Detached floating state */
 .monitor-panel.detached {
   bottom: auto;
@@ -3208,6 +3199,78 @@ kbd {
   }
 }
 
+/* ========== Separate Subagents Panel ========== */
+.subagents-panel {
+  position: fixed;
+  bottom: var(--toolbar-height);
+  right: 400px; /* Position to the left of monitor panel */
+  width: 500px;
+  max-width: calc(100vw - 420px);
+  max-height: 50vh;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-bottom: none;
+  border-radius: 8px 8px 0 0;
+  z-index: 90;
+  transform: translateY(calc(100% - 36px)); /* Collapsed by default, show header */
+  transition: transform 0.2s ease;
+  display: flex;
+  flex-direction: column;
+}
+
+.subagents-panel.open {
+  transform: translateY(0);
+}
+
+.subagents-panel.hidden {
+  display: none;
+}
+
+.subagents-panel-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.4rem 1rem;
+  border-bottom: 1px solid var(--border);
+  flex-shrink: 0;
+}
+
+.subagents-panel-title {
+  font-weight: 600;
+  font-size: 0.8rem;
+  color: var(--text);
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.subagents-panel-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.subagents-panel-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 0.5rem;
+}
+
+/* Adjust monitor panel position when subagents panel is visible */
+.subagents-panel:not(.hidden) ~ .monitor-panel {
+  /* Monitor stays in place */
+}
+
+/* Responsive: stack panels on small screens */
+@media (max-width: 900px) {
+  .subagents-panel {
+    right: 0.5rem;
+    width: calc(100vw - 1rem);
+    max-width: calc(100vw - 1rem);
+    bottom: calc(var(--toolbar-height) + 280px); /* Stack above monitor */
+  }
+}
+
 /* Subagent container (list + detail) */
 .subagent-container {
   display: flex;