feat: Improve task UI layout - narrower task list, maximize Progress Log, fix Terminal at bottom, add auto-scroll

ui/suite/tasks/autotask.css

@@ -363,7 +363,7 @@
 
 .main-content {
     display: grid;
-    grid-template-columns: 400px 1fr;
+    grid-template-columns: 320px 1fr;
     flex: 1;
     overflow: hidden;
 }
@@ -376,7 +376,28 @@
     background: var(--sentient-bg-secondary);
     border-right: 1px solid var(--sentient-border);
     overflow-y: auto;
-    padding: 16px;
+    overflow-x: hidden;
+    padding: 12px;
+    max-height: 100%;
+    scrollbar-width: thin;
+    scrollbar-color: var(--sentient-border) transparent;
+}
+
+.intent-list-panel::-webkit-scrollbar {
+    width: 6px;
+}
+
+.intent-list-panel::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+.intent-list-panel::-webkit-scrollbar-thumb {
+    background: var(--sentient-border);
+    border-radius: 3px;
+}
+
+.intent-list-panel::-webkit-scrollbar-thumb:hover {
+    background: var(--sentient-border-light);
 }
 
 .intent-list {
@@ -1620,7 +1641,7 @@
 
 @media (max-width: 1200px) {
     .main-content {
-        grid-template-columns: 350px 1fr;
+        grid-template-columns: 280px 1fr;
     }
 }
 

ui/suite/tasks/taskmd.css

@@ -13,6 +13,24 @@
     overflow: hidden;
 }
 
+/* Scrollbar styling for detail panel */
+.task-detail-panel::-webkit-scrollbar {
+    width: 6px;
+}
+
+.task-detail-panel::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+.task-detail-panel::-webkit-scrollbar-thumb {
+    background: var(--border, #2a2a2a);
+    border-radius: 3px;
+}
+
+.task-detail-panel::-webkit-scrollbar-thumb:hover {
+    background: var(--border-light, #3a3a3a);
+}
+
 /* Main Container */
 .task-detail-rich {
     display: flex;
@@ -33,10 +51,11 @@
     overflow-x: hidden;
 }
 
-/* Header */
+/* Header - compact */
 .taskmd-header {
-    padding: 20px 24px;
+    padding: 12px 20px;
     border-bottom: 1px solid var(--border, #1a1a1a);
+    flex-shrink: 0;
 }
 
 .taskmd-url {
@@ -58,10 +77,10 @@
 }
 
 .taskmd-title {
-    font-size: 24px;
+    font-size: 18px;
     font-weight: 500;
     color: var(--text, #fff);
-    margin: 0 0 12px 0;
+    margin: 0 0 8px 0;
 }
 
 .taskmd-status-badge {
@@ -105,38 +124,41 @@
     flex-shrink: 0;
 }
 
-/* Progress log section - scrollable */
+/* Progress log section - takes maximum space, scrollable */
 .taskmd-section-progress {
-    flex: 0 1 auto;
+    flex: 1 1 auto;
-    min-height: 100px;
+    min-height: 200px;
-    max-height: 40%;
     display: flex;
     flex-direction: column;
     overflow: hidden;
 }
 
-/* Terminal section - takes remaining space */
+/* Terminal section - fixed at bottom, smaller */
 .taskmd-section-terminal {
-    flex: 1 1 auto;
+    flex: 0 0 auto;
-    min-height: 150px;
+    height: 140px;
+    min-height: 120px;
+    max-height: 180px;
     display: flex;
     flex-direction: column;
     overflow: hidden;
+    border-top: 1px solid var(--border, #1a1a1a);
 }
 
 .taskmd-section-header {
-    padding: 16px 24px;
+    padding: 10px 20px;
-    font-size: 11px;
+    font-size: 10px;
     font-weight: 600;
     letter-spacing: 1.5px;
     color: var(--text-tertiary, #666);
     text-transform: uppercase;
     background: var(--bg-secondary, #0d0d0d);
+    flex-shrink: 0;
 }
 
-/* STATUS Section */
+/* STATUS Section - more compact */
 .taskmd-status-content {
-    padding: 16px 24px;
+    padding: 10px 20px;
     background: var(--surface, #111);
 }
 
@@ -230,14 +252,33 @@
     margin-left: 12px;
 }
 
-/* PROGRESS LOG Section */
+/* PROGRESS LOG Section - maximized with auto-scroll */
 .taskmd-progress-content {
     background: var(--bg, #0a0a0a);
     flex: 1 1 auto;
     min-height: 0;
-    max-height: 100%;
     overflow-y: auto;
     overflow-x: hidden;
+    scroll-behavior: smooth;
+    scrollbar-width: thin;
+    scrollbar-color: var(--border, #2a2a2a) transparent;
+}
+
+.taskmd-progress-content::-webkit-scrollbar {
+    width: 6px;
+}
+
+.taskmd-progress-content::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+.taskmd-progress-content::-webkit-scrollbar-thumb {
+    background: var(--border, #2a2a2a);
+    border-radius: 3px;
+}
+
+.taskmd-progress-content::-webkit-scrollbar-thumb:hover {
+    background: var(--border-light, #3a3a3a);
 }
 
 .taskmd-tree {
@@ -543,10 +584,12 @@
 
 /* TERMINAL Section */
 .taskmd-terminal {
-    flex: 1 1 auto;
+    flex: 0 0 auto;
     display: flex;
     flex-direction: column;
+    height: 140px;
     min-height: 120px;
+    max-height: 180px;
     overflow: hidden;
 }
 
@@ -554,9 +597,10 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 14px 24px;
+    padding: 8px 16px;
     background: var(--bg-secondary, #0d0d0d);
     border-bottom: 1px solid var(--border, #1a1a1a);
+    flex-shrink: 0;
 }
 
 .taskmd-terminal-title {
@@ -602,15 +646,17 @@
 
 .taskmd-terminal-output {
     flex: 1 1 auto;
-    padding: 16px 24px;
+    padding: 8px 16px;
     background: var(--bg, #0a0a0a);
     font-family: "JetBrains Mono", "Fira Code", monospace;
-    font-size: 13px;
+    font-size: 12px;
-    line-height: 1.7;
+    line-height: 1.5;
     color: var(--text-secondary, #888);
     overflow-y: auto;
     overflow-x: hidden;
     min-height: 0;
+    scrollbar-width: thin;
+    scrollbar-color: var(--border, #2a2a2a) transparent;
 }
 
 /* Markdown content in terminal */

ui/suite/tasks/tasks.js

@@ -839,11 +839,15 @@ function renderManifestProgress(
         itemCount,
         "items",
       );
+      // Auto-scroll to running item
+      scrollToRunningItem(progressLog);
     } else {
       // Incremental update - only update what changed (no flicker)
       console.log("[Manifest] Updating tree in place");
       updateProgressTreeInPlace(tree, manifest, totalSteps);
       console.log("[Manifest] Tree updated successfully");
+      // Auto-scroll to running item
+      scrollToRunningItem(progressLog);
     }
   } catch (treeError) {
     console.error(
@@ -858,6 +862,27 @@ function renderManifestProgress(
   updateTerminalStats(taskId, manifest);
 }
 
+// Auto-scroll progress log to show the currently running item
+function scrollToRunningItem(progressLog) {
+  if (!progressLog) return;
+
+  // Find the running item (highest priority) or running section
+  const runningItem = progressLog.querySelector(".tree-item.running");
+  const runningSection = progressLog.querySelector(".tree-section.running");
+  const runningChild = progressLog.querySelector(".tree-child.running");
+
+  const targetElement = runningItem || runningChild || runningSection;
+
+  if (targetElement) {
+    // Scroll the target into view within the progress log container
+    targetElement.scrollIntoView({
+      behavior: "smooth",
+      block: "center",
+      inline: "nearest",
+    });
+  }
+}
+
 // Update STATUS section from task_progress messages
 function updateStatusFromProgress(message, step) {
   const statusContent = document.querySelector(".taskmd-status-content");