From b0d83a439dca00c2c2f334c8266f4543ae512f4d Mon Sep 17 00:00:00 2001
From: 3clyp50 <real.eclypso@gmail.com>
Date: Fri, 2 Jan 2026 17:09:27 +0100
Subject: [PATCH] process groups and steps css polish

remove leftover user status label
---
 .../process-group/process-group-store.js      |   3 -
 .../messages/process-group/process-group.css  | 120 ++++++++----------
 webui/components/sidebar/left-sidebar.html    |   4 +
 webui/css/messages.css                        |  54 --------
 webui/index.css                               |   7 +-
 5 files changed, 59 insertions(+), 129 deletions(-)

diff --git a/webui/components/messages/process-group/process-group-store.js b/webui/components/messages/process-group/process-group-store.js
index 64e446c77..ef71b4106 100644
--- a/webui/components/messages/process-group/process-group-store.js
+++ b/webui/components/messages/process-group/process-group-store.js
@@ -95,7 +95,6 @@ const model = {
       'warning': 'warning',
       'error': 'error',
       'util': 'memory',
-      'user': 'person',
       'done': 'done_all'
     };
     return icons[type] || 'circle';
@@ -117,7 +116,6 @@ const model = {
       'warning': 'WRN',
       'error': 'ERR',
       'util': 'UTL',
-      'user': 'USR',
       'done': 'END'
     };
     return codes[type] || type?.toUpperCase()?.slice(0, 4) || 'GEN';
@@ -139,7 +137,6 @@ const model = {
       'warning': 'status-wrn',
       'error': 'status-err',
       'util': 'status-utl',
-      'user': 'status-usr',
       'done': 'status-end'
     };
     return colors[type] || 'status-gen';
diff --git a/webui/components/messages/process-group/process-group.css b/webui/components/messages/process-group/process-group.css
index 0aa0d87c2..29049137a 100644
--- a/webui/components/messages/process-group/process-group.css
+++ b/webui/components/messages/process-group/process-group.css
@@ -90,7 +90,6 @@
   font-size: var(--font-size-smaller);
   font-weight: 500;
   color: var(--color-text);
-  opacity: 0.9;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -265,12 +264,7 @@
   display: none;
 }
 
-/* END status with checkmark icon - use ::before only */
-.status-end::before {
-  content: "✓";
-  margin-right: 2px;
-  font-weight: bold;
-}
+/* END status with checkmark icon (icon added via JS, no ::before needed) */
 
 /* Completed process group styling */
 .process-group-completed {
@@ -300,7 +294,12 @@
   font-size: 0.65rem;
   font-family: var(--font-family-code);
   color: var(--color-text);
-  opacity: 0.6;
+  opacity: 0.8;
+}
+
+.process-group-header .group-metrics .material-symbols-outlined {
+  font-size: 0.75rem;
+  opacity: 0.7;
 }
 
 .process-group-header .group-metrics span[class^="metric-"] {
@@ -309,10 +308,6 @@
   gap: 2px;
 }
 
-.process-group-header .group-metrics .metric-value {
-  opacity: 0.8;
-}
-
 /* Legacy timestamp/duration (for backwards compatibility) */
 .process-group-header .group-timestamp {
   font-size: 0.65rem;
@@ -422,7 +417,6 @@
   flex: 1;
   font-size: 0.75rem;
   color: var(--color-text);
-  opacity: 0.85;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -459,6 +453,23 @@
   opacity: 0;
   transition: grid-template-rows 0.2s ease-out, opacity 0.15s ease-out;
   overflow: hidden;
+  -webkit-overflow-scrolling: touch; /* smooth scrolling on iOS */
+  scroll-behavior: smooth;
+  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none; /* IE/Edge */
+  overscroll-behavior: contain; /* avoid scroll chaining */
+}
+  /* Hide scrollbar for Chrome/Safari/Webkit */
+.process-step-detail::-webkit-scrollbar {
+  display: none;
+  width: 0;
+  height: 0;
+}
+
+.process-step-detail-content::-webkit-scrollbar {
+  display: none;
+  width: 0;
+  height: 0;
 }
 
 .process-step-detail > .process-step-detail-content {
@@ -480,6 +491,11 @@
   line-height: 1.5;
   max-height: 300px;
   overflow-y: auto;
+  -webkit-overflow-scrolling: touch; /* smooth scrolling on iOS */
+  scroll-behavior: smooth;
+  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none; /* IE/Edge */
+  overscroll-behavior: contain; /* avoid scroll chaining */
 }
 
 .process-step-detail-content pre {
@@ -502,6 +518,7 @@
 .process-step-detail-content .step-kvp {
   display: flex;
   gap: var(--spacing-xs);
+  align-items: flex-start;
 }
 
 .process-step-detail-content .step-kvp-key {
@@ -510,6 +527,8 @@
   opacity: 0.8;
   display: flex;
   align-items: center;
+  flex-shrink: 0;
+  min-width: fit-content;
 }
 
 .process-step-detail-content .step-kvp-key .material-symbols-outlined {
@@ -521,7 +540,9 @@
   color: var(--color-text);
   opacity: 0.75;
   word-break: break-word;
+  white-space: pre-wrap;
   font-size: 0.7rem;
+  line-height: 1.5;
 }
 
 /* Thoughts styling - single icon with plain text */
@@ -542,7 +563,7 @@
 .process-step-detail-content .thought-text {
   font-size: 0.72rem;
   color: var(--color-text);
-  opacity: 0.8;
+  opacity: 0.65;
   line-height: 1.5;
   white-space: pre-wrap;
   word-break: break-word;
@@ -625,24 +646,6 @@
   font-size: 0.72rem;
 }
 
-.process-step-detail-content .terminal-cmd {
-  display: flex;
-  align-items: baseline;
-  gap: 4px;
-  color: var(--color-text);
-  opacity: 0.9;
-}
-
-.process-step-detail-content .terminal-prompt {
-  color: #7ee787;
-  font-weight: 600;
-}
-
-.process-step-detail-content .terminal-code {
-  color: var(--color-text);
-  opacity: 0.85;
-}
-
 .process-step-detail-content .terminal-output {
   margin: var(--spacing-xs) 0 0 0;
   padding: var(--spacing-xs);
@@ -653,64 +656,47 @@
   word-break: break-word;
   max-height: 200px;
   overflow-y: auto;
+  -webkit-overflow-scrolling: touch; /* smooth scrolling on iOS */
+  scroll-behavior: smooth;
+  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none; /* IE/Edge */
+  overscroll-behavior: contain; /* avoid scroll chaining */
 }
 
+.process-step-detail-content .terminal-output::-webkit-scrollbar {
+  display: none;
+  width: 0;
+  height: 0;
+}
+
+
+    }
+    #chat-input::-webkit-scrollbar { width: 6px; height: 6px; }
+    #chat-input::-webkit-scrollbar-track { background: transparent; margin: 4px 0; border-radius: 6px; }
+    #chat-input::-webkit-scrollbar-thumb { background-color: rgba(155,155,155,0.5); border-radius: 6px; -webkit-transition: background-color 0.2s ease; transition: background-color 0.2s ease; }
+    #chat-input::-webkit-scrollbar-thumb:hover { background-color: rgba(155,155,155,0.7); }
+
 /* Light mode terminal */
-.light-mode .process-step-detail-content .terminal-prompt {
-  color: #1a7f37;
-}
-
 .light-mode .process-step-detail-content .terminal-output {
   background: rgba(0, 0, 0, 0.05);
   color: #24292f;
 }
 
 /* Light mode adjustments */
-.light-mode .process-group {
-  background: rgba(0, 0, 0, 0.03);
-  border: none;
-}
-
-.light-mode .process-group.embedded {
-  background: rgba(0, 0, 0, 0.04);
-  border-bottom-color: rgba(0, 0, 0, 0.08);
-}
-
-.light-mode .message-container.has-process-group {
-  background: var(--color-panel);
-  border-color: rgba(0, 0, 0, 0.08);
-}
-
-.light-mode .process-group:hover {
-  border-color: rgba(0, 0, 0, 0.12);
-}
-
 .light-mode .process-group.expanded .process-group-content {
   border-top-color: rgba(0, 0, 0, 0.06);
 }
 
-.light-mode .process-step:hover {
-  background-color: rgba(0, 0, 0, 0.02);
-}
-
 .light-mode .process-step-detail-content {
   background-color: transparent;
 }
 
-.light-mode .process-group-header .step-count {
-  background-color: rgba(0, 0, 0, 0.06);
-}
-
 /* Light mode text colors for process group */
 .light-mode .process-group-header .group-title,
 .light-mode .process-step-header .step-title {
   color: var(--color-text);
 }
 
-.light-mode .process-group-header .group-metrics {
-  color: var(--color-text);
-}
-
 /* Light mode status badge adjustments for better contrast */
 .light-mode .status-gen {
   background-color: rgba(14, 165, 233, 0.12);
diff --git a/webui/components/sidebar/left-sidebar.html b/webui/components/sidebar/left-sidebar.html
index 38290e0c4..f4d555d1d 100644
--- a/webui/components/sidebar/left-sidebar.html
+++ b/webui/components/sidebar/left-sidebar.html
@@ -168,6 +168,10 @@
       cursor: pointer;
     }
 
+    .light-mode #left-panel {
+      box-shadow: 1px 0 10px rgba(0, 0, 0, 0.1);
+    }
+
     @media (max-width: 768px) {
       #left-panel {
         position: fixed;
diff --git a/webui/css/messages.css b/webui/css/messages.css
index 2a1d64153..13926b522 100644
--- a/webui/css/messages.css
+++ b/webui/css/messages.css
@@ -485,56 +485,6 @@
   border-bottom: none;
 }
 
-.light-mode .message-default {
-  background-color: transparent;
-  color: #1a242f;
-}
-
-.light-mode .message-agent {
-  background-color: transparent;
-  color: #356ca3;
-}
-
-.light-mode .message-agent-response {
-  background-color: transparent;
-  color: #188216;
-}
-
-.light-mode .message-agent-delegation {
-  background-color: transparent;
-  color: #12685e;
-}
-
-.light-mode .message-tool {
-  background-color: transparent;
-  color: #1c3c88;
-}
-
-.light-mode .message-code-exe {
-  background-color: transparent;
-  color: #6c43b0;
-}
-
-.light-mode .message-browser {
-  background-color: transparent;
-  color: #6c43b0;
-}
-
-.light-mode .message-info {
-  background-color: transparent;
-  color: #3f3f3f;
-}
-
-.light-mode .message-util {
-  background-color: transparent;
-  color: #5b5540;
-}
-
-.light-mode .message-warning {
-  background-color: transparent;
-  color: #8f4800;
-}
-
 .light-mode .message-error {
   background-color: rgba(220, 60, 60, 0.15);
   border: 1px solid rgba(180, 40, 40, 0.4);
@@ -542,11 +492,7 @@
 }
 
 .light-mode .message-user {
-  background-color: var(--color-panel);
   color: #4e4e4e;
-  border-radius: var(--border-radius);
-  box-shadow: inset 0 2rem 2rem -2rem rgba(0, 0, 0, 0.15),
-    inset 0 -2rem 2rem -2rem rgba(0, 0, 0, 0.05);
 }
 
 /* Markdown in messages */
diff --git a/webui/index.css b/webui/index.css
index 3b58bac09..bcf1c6cac 100644
--- a/webui/index.css
+++ b/webui/index.css
@@ -23,7 +23,7 @@
   --color-input-focus-dark: #101010;
 
   /* Light mode */
-  --color-background-light: #dbdbdb;
+  --color-background-light: #f6f6f6;
   --color-text-light: #333333;
   --color-primary-light: #384653;
   --color-secondary-light: #e8eaf6;
@@ -126,7 +126,7 @@ body,
 .switch-label {
   -webkit-transition: background-color 0.3s, color 0.3s, border-color 0.3s;
   transition: background-color 0.3s, color 0.3s, border-color 0.3s;
-  color: var(--color-text);
+  color: var(--color-text) !important;
 }
 
 img {
@@ -196,11 +196,8 @@ div#right-panel::-webkit-scrollbar-thumb:hover {
 
 #time-date {
   color: var(--color-text);
-  font-size: 1.5rem;
-  font-weight: 500;
   text-align: right;
   line-height: 1.2;
-  font-family: var(--font-family-code);
 }
 
 #user-date {