From f5ece0d41063ad1f0b554f496249f4507e358df9 Mon Sep 17 00:00:00 2001
From: "Rodrigo Rodriguez (Pragmatismo)" <me@rodrigorodriguez.com>
Date: Thu, 1 Jan 2026 10:36:50 -0300
Subject: [PATCH] Fix progress UI pixel-perfect: remove View Details, section
 dot on right, proper item layout

- Remove View Details links completely
- Add tree-section-dot on right side of section rows
- Child rows use tree-item-dot on left
- Duration aligned to right with margin-left: auto
- Proper padding and spacing to match design
- Update both taskmd.css and theme-sentient.css
---
 ui/suite/css/theme-sentient.css | 58 +++++++++++++++--------
 ui/suite/tasks/taskmd.css       | 81 ++++++++++++++++++++++-----------
 ui/suite/tasks/tasks.js         |  5 +-
 3 files changed, 96 insertions(+), 48 deletions(-)

diff --git a/ui/suite/css/theme-sentient.css b/ui/suite/css/theme-sentient.css
index 6704f34..970c656 100644
--- a/ui/suite/css/theme-sentient.css
+++ b/ui/suite/css/theme-sentient.css
@@ -1718,6 +1718,7 @@
 
 /* Section/Child name */
 [data-theme="sentient"] .tree-name {
+    flex: 1;
     font-size: 14px;
     font-weight: 500;
     color: var(--text);
@@ -1728,18 +1729,31 @@
     color: var(--text-secondary);
 }
 
-/* View Details link */
-[data-theme="sentient"] .tree-view-details {
-    font-size: 12px;
-    color: var(--text-tertiary);
-    margin-left: 12px;
-    margin-right: auto;
-    cursor: pointer;
-    transition: color 0.15s;
+/* Section dot indicator on right side */
+[data-theme="sentient"] .tree-section-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    flex-shrink: 0;
+    background: var(--text-muted);
 }
 
-[data-theme="sentient"] .tree-view-details:hover {
-    color: var(--accent);
+[data-theme="sentient"] .tree-section-dot.completed {
+    background: var(--accent);
+}
+
+[data-theme="sentient"] .tree-section-dot.running {
+    background: var(--accent);
+    box-shadow: 0 0 8px var(--accent-glow);
+    animation: sentient-dot-pulse 1.5s ease-in-out infinite;
+}
+
+[data-theme="sentient"] .tree-section-dot.pending {
+    background: var(--text-muted);
+}
+
+[data-theme="sentient"] .tree-section-dot.failed {
+    background: var(--error);
 }
 
 /* Step badge - green pill */
@@ -1750,6 +1764,7 @@
     border-radius: 4px;
     font-size: 11px;
     font-weight: 600;
+    margin-left: auto;
     margin-right: 12px;
     white-space: nowrap;
 }
@@ -1764,8 +1779,9 @@
 [data-theme="sentient"] .tree-status {
     font-size: 12px;
     color: var(--text-tertiary);
-    min-width: 80px;
+    min-width: 70px;
     text-align: right;
+    margin-right: 12px;
 }
 
 [data-theme="sentient"] .tree-status.completed {
@@ -1799,18 +1815,21 @@
     border-bottom: none;
 }
 
-/* Indent line */
-[data-theme="sentient"] .tree-indent {
-    width: 20px;
-    height: 1px;
-    background: var(--border);
+/* Child row with dot */
+[data-theme="sentient"] .tree-level-1 .tree-item-dot {
     margin-right: 12px;
 }
 
+[data-theme="sentient"] .tree-level-1 .tree-name {
+    font-size: 13px;
+    color: var(--text-secondary);
+}
+
 /* Tree items container */
 [data-theme="sentient"] .tree-items {
     display: none;
-    padding: 8px 0 16px 0;
+    padding: 12px 0 16px 0;
+    padding-left: 24px;
     background: var(--bg);
 }
 
@@ -1827,8 +1846,8 @@
 [data-theme="sentient"] .tree-item {
     display: flex;
     align-items: center;
-    padding: 10px 20px 10px 60px;
-    min-height: 36px;
+    padding: 8px 20px 8px 24px;
+    min-height: 32px;
 }
 
 [data-theme="sentient"] .tree-item.running {
@@ -1898,6 +1917,7 @@
 [data-theme="sentient"] .tree-item-duration {
     font-size: 12px;
     color: var(--text-muted);
+    margin-left: auto;
     margin-right: 8px;
     white-space: nowrap;
 }
diff --git a/ui/suite/tasks/taskmd.css b/ui/suite/tasks/taskmd.css
index 44c0066..1ac47bc 100644
--- a/ui/suite/tasks/taskmd.css
+++ b/ui/suite/tasks/taskmd.css
@@ -264,21 +264,8 @@
     color: var(--text-tertiary, #666);
 }
 
-/* View Details link */
-.tree-view-details {
-    font-size: 12px;
-    color: var(--text-tertiary, #666);
-    margin-left: 12px;
-    margin-right: auto;
-    cursor: pointer;
-    transition: color 0.15s;
-}
-
-.tree-view-details:hover {
-    color: var(--accent, #c5f82a);
-}
-
 .tree-name {
+    flex: 1;
     font-size: 14px;
     font-weight: 500;
     color: var(--text, #e0e0e0);
@@ -291,6 +278,7 @@
     border-radius: 4px;
     font-size: 11px;
     font-weight: 600;
+    margin-left: auto;
     margin-right: 12px;
     white-space: nowrap;
 }
@@ -304,8 +292,36 @@
 .tree-status {
     font-size: 12px;
     color: var(--text-tertiary, #666);
-    min-width: 80px;
+    min-width: 70px;
     text-align: right;
+    margin-right: 12px;
+}
+
+/* Section dot indicator on right side */
+.tree-section-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    flex-shrink: 0;
+    background: var(--text-muted, #333);
+}
+
+.tree-section-dot.completed {
+    background: var(--accent, #c5f82a);
+}
+
+.tree-section-dot.running {
+    background: var(--accent, #c5f82a);
+    box-shadow: 0 0 8px var(--accent-glow, rgba(197, 248, 42, 0.6));
+    animation: dot-pulse 1.5s ease-in-out infinite;
+}
+
+.tree-section-dot.pending {
+    background: var(--text-muted, #333);
+}
+
+.tree-section-dot.failed {
+    background: var(--error, #ef4444);
 }
 
 .tree-status.completed {
@@ -339,17 +355,11 @@
     border-bottom: none;
 }
 
-.tree-indent {
-    width: 20px;
-    height: 1px;
-    background: var(--border, #2a2a2a);
-    margin-right: 12px;
-}
-
 /* Tree Items (Level 2) - Individual items like files */
 .tree-items {
     display: none;
-    padding: 8px 0 16px 0;
+    padding: 12px 0 16px 0;
+    padding-left: 24px;
     background: var(--bg, #080808);
 }
 
@@ -359,7 +369,25 @@
 
 /* Section-level items */
 .tree-children > .tree-item {
-    padding-left: 40px;
+    padding-left: 24px;
+}
+
+/* Child row in tree-level-1 */
+.tree-level-1 {
+    display: flex;
+    align-items: center;
+    padding: 12px 20px 12px 24px;
+    background: transparent;
+    border-top: none;
+}
+
+.tree-level-1 .tree-item-dot {
+    margin-right: 12px;
+}
+
+.tree-level-1 .tree-name {
+    font-size: 13px;
+    color: var(--text-secondary, #ccc);
 }
 
 /* Item Dot Indicator - the colored dots */
@@ -415,6 +443,7 @@
 .tree-item-duration {
     font-size: 12px;
     color: var(--text-muted, #555);
+    margin-left: auto;
     margin-right: 8px;
     white-space: nowrap;
 }
@@ -442,8 +471,8 @@
 .tree-item {
     display: flex;
     align-items: center;
-    padding: 10px 20px 10px 60px;
-    min-height: 36px;
+    padding: 8px 20px 8px 24px;
+    min-height: 32px;
 }
 
 .tree-item.completed .tree-item-name {
diff --git a/ui/suite/tasks/tasks.js b/ui/suite/tasks/tasks.js
index 2e429e0..5bf1980 100644
--- a/ui/suite/tasks/tasks.js
+++ b/ui/suite/tasks/tasks.js
@@ -560,9 +560,9 @@ function buildProgressTreeHTML(manifest, totalSteps) {
       <div class="tree-section ${statusClass}${isRunning ? " expanded" : ""}" data-section-id="${section.id}">
         <div class="tree-row tree-level-0" onclick="this.parentElement.classList.toggle('expanded')">
           <span class="tree-name">${escapeHtml(section.name)}</span>
-          <span class="tree-view-details">View Details ›</span>
           <span class="tree-step-badge">Step ${globalCurrent}/${totalSteps}</span>
           <span class="tree-status ${statusClass}">${statusText}</span>
+          <span class="tree-section-dot ${statusClass}"></span>
         </div>
         <div class="tree-children">`;
 
@@ -574,9 +574,8 @@ function buildProgressTreeHTML(manifest, totalSteps) {
         html += `
           <div class="tree-child ${childStatus}${childIsRunning ? " expanded" : ""}" data-child-id="${child.id}">
             <div class="tree-row tree-level-1" onclick="this.parentElement.classList.toggle('expanded')">
-              <span class="tree-indent"></span>
+              <span class="tree-item-dot ${childStatus}"></span>
               <span class="tree-name">${escapeHtml(child.name)}</span>
-              <span class="tree-view-details">View Details ›</span>
               <span class="tree-step-badge">Step ${child.progress?.current || 0}/${child.progress?.total || 1}</span>
               <span class="tree-status ${childStatus}">${child.status || "Pending"}</span>
             </div>