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/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;