From 580c9072d48c773485a841eb2056d31d3ea4394d Mon Sep 17 00:00:00 2001
From: "Rodrigo Rodriguez (Pragmatismo)" <me@rodrigorodriguez.com>
Date: Fri, 2 Jan 2026 15:25:42 -0300
Subject: [PATCH] feat: Add draggable splitter between panels, uniform
 scrollbar styles (primary color)

---
 ui/suite/tasks/taskmd.css | 35 ++++++++++++-----
 ui/suite/tasks/tasks.css  | 83 +++++++++++++++++++++++++++++++++------
 ui/suite/tasks/tasks.html | 42 +++++++++++++++++++-
 3 files changed, 136 insertions(+), 24 deletions(-)

diff --git a/ui/suite/tasks/taskmd.css b/ui/suite/tasks/taskmd.css
index b1955ea..016067b 100644
--- a/ui/suite/tasks/taskmd.css
+++ b/ui/suite/tasks/taskmd.css
@@ -266,29 +266,26 @@
     overflow-y: scroll !important;
     overflow-x: hidden !important;
     scroll-behavior: smooth;
-    scrollbar-width: auto;
+    scrollbar-width: thin;
     scrollbar-color: var(--primary, #c5f82a) var(--surface, #1a1a1a);
 }
 
 .taskmd-progress-content::-webkit-scrollbar {
-    width: 14px;
+    width: 8px;
 }
 
 .taskmd-progress-content::-webkit-scrollbar-track {
     background: var(--surface, #1a1a1a);
-    border-radius: 7px;
-    margin: 4px 0;
 }
 
 .taskmd-progress-content::-webkit-scrollbar-thumb {
-    background: var(--border-light, #3a3a3a);
-    border-radius: 7px;
-    border: 3px solid var(--surface, #1a1a1a);
-    min-height: 40px;
+    background: var(--primary, #c5f82a);
+    border-radius: 4px;
+    border: 2px solid var(--surface, #1a1a1a);
 }
 
 .taskmd-progress-content::-webkit-scrollbar-thumb:hover {
-    background: var(--primary, #c5f82a);
+    background: var(--primary-hover, #d4ff4a);
 }
 
 .taskmd-tree {
@@ -684,7 +681,25 @@
     overflow-x: hidden;
     min-height: 0;
     scrollbar-width: thin;
-    scrollbar-color: var(--border, #2a2a2a) transparent;
+    scrollbar-color: var(--primary, #c5f82a) var(--surface, #1a1a1a);
+}
+
+.taskmd-terminal-output::-webkit-scrollbar {
+    width: 8px;
+}
+
+.taskmd-terminal-output::-webkit-scrollbar-track {
+    background: var(--surface, #1a1a1a);
+}
+
+.taskmd-terminal-output::-webkit-scrollbar-thumb {
+    background: var(--primary, #c5f82a);
+    border-radius: 4px;
+    border: 2px solid var(--surface, #1a1a1a);
+}
+
+.taskmd-terminal-output::-webkit-scrollbar-thumb:hover {
+    background: var(--primary-hover, #d4ff4a);
 }
 
 /* Markdown content in terminal */
diff --git a/ui/suite/tasks/tasks.css b/ui/suite/tasks/tasks.css
index 30beb2e..0b1cf0b 100644
--- a/ui/suite/tasks/tasks.css
+++ b/ui/suite/tasks/tasks.css
@@ -295,7 +295,7 @@ body:has(.tasks-app) {
 
 .tasks-main {
     display: grid;
-    grid-template-columns: 320px 1fr;
+    grid-template-columns: 320px 6px 1fr;
     flex: 1;
     overflow: hidden !important;
     height: 100%;
@@ -303,6 +303,35 @@ body:has(.tasks-app) {
     min-height: 0;
 }
 
+/* Splitter between panels */
+.tasks-splitter {
+    width: 6px;
+    background: var(--border, #2a2a2a);
+    cursor: col-resize;
+    transition: background 0.2s;
+    position: relative;
+}
+
+.tasks-splitter:hover {
+    background: var(--primary, #c5f82a);
+}
+
+.tasks-splitter::after {
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 2px;
+    height: 40px;
+    background: var(--text-tertiary, #666);
+    border-radius: 1px;
+}
+
+.tasks-splitter:hover::after {
+    background: var(--bg, #0a0a0a);
+}
+
 /* =============================================================================
    LEFT PANEL - TASK CARDS LIST
    ============================================================================= */
@@ -322,31 +351,59 @@ body:has(.tasks-app) {
     overflow-y: scroll;
     overflow-x: hidden;
     padding: 16px;
-    padding-right: 8px;
+    padding-right: 4px;
     display: flex;
     flex-direction: column;
     gap: 12px;
-    scrollbar-width: auto;
-    scrollbar-color: var(--border-light, #3a3a3a) var(--surface, #1a1a1a);
 }
 
-.tasks-list-scroll::-webkit-scrollbar {
-    width: 10px;
+/* ============================================ */
+/* UNIFORM SCROLLBAR STYLES - ALL SCROLLBARS   */
+/* ============================================ */
+
+/* Firefox scrollbar */
+.tasks-list-scroll,
+.taskmd-progress-content,
+.taskmd-terminal-output,
+.task-detail-panel,
+#task-detail-content {
+    scrollbar-width: thin;
+    scrollbar-color: var(--primary, #c5f82a) var(--surface, #1a1a1a);
 }
 
-.tasks-list-scroll::-webkit-scrollbar-track {
+/* Webkit scrollbar - uniform style */
+.tasks-list-scroll::-webkit-scrollbar,
+.taskmd-progress-content::-webkit-scrollbar,
+.taskmd-terminal-output::-webkit-scrollbar,
+.task-detail-panel::-webkit-scrollbar,
+#task-detail-content::-webkit-scrollbar {
+    width: 8px;
+}
+
+.tasks-list-scroll::-webkit-scrollbar-track,
+.taskmd-progress-content::-webkit-scrollbar-track,
+.taskmd-terminal-output::-webkit-scrollbar-track,
+.task-detail-panel::-webkit-scrollbar-track,
+#task-detail-content::-webkit-scrollbar-track {
     background: var(--surface, #1a1a1a);
-    border-radius: 5px;
 }
 
-.tasks-list-scroll::-webkit-scrollbar-thumb {
-    background: var(--border-light, #3a3a3a);
-    border-radius: 5px;
+.tasks-list-scroll::-webkit-scrollbar-thumb,
+.taskmd-progress-content::-webkit-scrollbar-thumb,
+.taskmd-terminal-output::-webkit-scrollbar-thumb,
+.task-detail-panel::-webkit-scrollbar-thumb,
+#task-detail-content::-webkit-scrollbar-thumb {
+    background: var(--primary, #c5f82a);
+    border-radius: 4px;
     border: 2px solid var(--surface, #1a1a1a);
 }
 
-.tasks-list-scroll::-webkit-scrollbar-thumb:hover {
-    background: var(--primary, #c5f82a);
+.tasks-list-scroll::-webkit-scrollbar-thumb:hover,
+.taskmd-progress-content::-webkit-scrollbar-thumb:hover,
+.taskmd-terminal-output::-webkit-scrollbar-thumb:hover,
+.task-detail-panel::-webkit-scrollbar-thumb:hover,
+#task-detail-content::-webkit-scrollbar-thumb:hover {
+    background: var(--primary-hover, #d4ff4a);
 }
 
 /* =============================================================================
diff --git a/ui/suite/tasks/tasks.html b/ui/suite/tasks/tasks.html
index 3f7a04a..c9fee0b 100644
--- a/ui/suite/tasks/tasks.html
+++ b/ui/suite/tasks/tasks.html
@@ -116,7 +116,7 @@
         <div id="intent-result-hidden" style="display: none"></div>
     </div>
 
-    <!-- Main Two-Column Layout -->
+    <!-- Main Two-Column Layout with Splitter -->
     <main class="tasks-main">
         <!-- Left Panel: Task Cards List -->
         <section class="tasks-list-panel">
@@ -135,6 +135,9 @@
             </div>
         </section>
 
+        <!-- Splitter -->
+        <div class="tasks-splitter" id="tasks-splitter"></div>
+
         <!-- Right Panel: Task Detail -->
         <aside class="task-detail-panel" id="task-detail-panel">
             <!-- Detail content loaded dynamically -->
@@ -558,6 +561,43 @@
         if (dot) dot.classList.remove("completed", "error");
     }
 
+    // Splitter drag functionality
+    (function initSplitter() {
+        const splitter = document.getElementById("tasks-splitter");
+        const main = document.querySelector(".tasks-main");
+        const leftPanel = document.querySelector(".tasks-list-panel");
+
+        if (!splitter || !main || !leftPanel) return;
+
+        let isDragging = false;
+        let startX, startWidth;
+
+        splitter.addEventListener("mousedown", function (e) {
+            isDragging = true;
+            startX = e.clientX;
+            startWidth = leftPanel.offsetWidth;
+            document.body.style.cursor = "col-resize";
+            document.body.style.userSelect = "none";
+            e.preventDefault();
+        });
+
+        document.addEventListener("mousemove", function (e) {
+            if (!isDragging) return;
+
+            const diff = e.clientX - startX;
+            const newWidth = Math.max(200, Math.min(600, startWidth + diff));
+            main.style.gridTemplateColumns = `${newWidth}px 6px 1fr`;
+        });
+
+        document.addEventListener("mouseup", function () {
+            if (isDragging) {
+                isDragging = false;
+                document.body.style.cursor = "";
+                document.body.style.userSelect = "";
+            }
+        });
+    })();
+
     // Listen for HTMX events to refresh stats
     document.body.addEventListener("htmx:afterSwap", function (e) {
         if (e.detail.target.id === "task-list") {