From ea9bd091c33c16b6863628d8d6cb923b2c3f878e Mon Sep 17 00:00:00 2001 From: "Rodrigo Rodriguez (Pragmatismo)" Date: Fri, 2 Jan 2026 13:23:12 -0300 Subject: [PATCH] feat: Improve task UI layout - narrower task list, maximize Progress Log, fix Terminal at bottom, add auto-scroll --- ui/suite/tasks/autotask.css | 27 +++++++++-- ui/suite/tasks/taskmd.css | 90 ++++++++++++++++++++++++++++--------- ui/suite/tasks/tasks.js | 25 +++++++++++ 3 files changed, 117 insertions(+), 25 deletions(-) diff --git a/ui/suite/tasks/autotask.css b/ui/suite/tasks/autotask.css index 15af326..1038b5a 100644 --- a/ui/suite/tasks/autotask.css +++ b/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; } } diff --git a/ui/suite/tasks/taskmd.css b/ui/suite/tasks/taskmd.css index 51f19d4..2d54e01 100644 --- a/ui/suite/tasks/taskmd.css +++ b/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; - min-height: 100px; - max-height: 40%; + flex: 1 1 auto; + min-height: 200px; 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; - min-height: 150px; + flex: 0 0 auto; + 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; - font-size: 11px; + padding: 10px 20px; + 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; - line-height: 1.7; + font-size: 12px; + 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 */ diff --git a/ui/suite/tasks/tasks.js b/ui/suite/tasks/tasks.js index dc8b23b..25c4d09 100644 --- a/ui/suite/tasks/tasks.js +++ b/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");