process groups and steps css polish
remove leftover user status label
3clyp50 committed
Jan 2, 2026 at 17:09 UTC
b0d83a439dca00c2c2f334c8266f4543ae512f4d
5 files changed
+58
-128
webui/components/messages/process-group/process-group-store.js
-3
@@ -95,7 +95,6 @@ const model = {
95
'warning': 'warning',
96
'error': 'error',
97
'util': 'memory',
98
- 'user': 'person',
98
'done': 'done_all'
99
};
100
return icons[type] || 'circle';
@@ -117,7 +116,6 @@ const model = {
116
'warning': 'WRN',
117
'error': 'ERR',
118
'util': 'UTL',
120
- 'user': 'USR',
119
'done': 'END'
120
};
121
return codes[type] || type?.toUpperCase()?.slice(0, 4) || 'GEN';
@@ -139,7 +137,6 @@ const model = {
137
'warning': 'status-wrn',
138
'error': 'status-err',
139
'util': 'status-utl',
142
- 'user': 'status-usr',
140
'done': 'status-end'
141
};
142
return colors[type] || 'status-gen';
webui/components/messages/process-group/process-group.css
+52
-66
@@ -90,7 +90,6 @@
90
font-size: var(--font-size-smaller);
91
font-weight: 500;
92
color: var(--color-text);
93
- opacity: 0.9;
93
white-space: nowrap;
94
overflow: hidden;
95
text-overflow: ellipsis;
@@ -265,12 +264,7 @@
264
display: none;
265
}
266
268
-/* END status with checkmark icon - use ::before only */
269
-.status-end::before {
270
- content: "✓";
271
- margin-right: 2px;
272
- font-weight: bold;
273
-}
267
+/* END status with checkmark icon (icon added via JS, no ::before needed) */
268
269
/* Completed process group styling */
270
.process-group-completed {
@@ -300,7 +294,12 @@
294
font-size: 0.65rem;
295
font-family: var(--font-family-code);
296
color: var(--color-text);
303
- opacity: 0.6;
297
+ opacity: 0.8;
298
+}
299
+
300
+.process-group-header .group-metrics .material-symbols-outlined {
301
+ font-size: 0.75rem;
302
+ opacity: 0.7;
303
}
304
305
.process-group-header .group-metrics span[class^="metric-"] {
@@ -309,10 +308,6 @@
308
gap: 2px;
309
}
310
312
-.process-group-header .group-metrics .metric-value {
313
- opacity: 0.8;
314
-}
315
-
311
/* Legacy timestamp/duration (for backwards compatibility) */
312
.process-group-header .group-timestamp {
313
font-size: 0.65rem;
@@ -422,7 +417,6 @@
417
flex: 1;
418
font-size: 0.75rem;
419
color: var(--color-text);
425
- opacity: 0.85;
420
white-space: nowrap;
421
overflow: hidden;
422
text-overflow: ellipsis;
@@ -459,6 +453,23 @@
453
opacity: 0;
454
transition: grid-template-rows 0.2s ease-out, opacity 0.15s ease-out;
455
overflow: hidden;
456
+ -webkit-overflow-scrolling: touch; /* smooth scrolling on iOS */
457
+ scroll-behavior: smooth;
458
+ scrollbar-width: none; /* Firefox */
459
+ -ms-overflow-style: none; /* IE/Edge */
460
+ overscroll-behavior: contain; /* avoid scroll chaining */
461
+}
462
+ /* Hide scrollbar for Chrome/Safari/Webkit */
463
+.process-step-detail::-webkit-scrollbar {
464
+ display: none;
465
+ width: 0;
466
+ height: 0;
467
+}
468
+
469
+.process-step-detail-content::-webkit-scrollbar {
470
+ display: none;
471
+ width: 0;
472
+ height: 0;
473
}
474
475
.process-step-detail > .process-step-detail-content {
@@ -480,6 +491,11 @@
491
line-height: 1.5;
492
max-height: 300px;
493
overflow-y: auto;
494
+ -webkit-overflow-scrolling: touch; /* smooth scrolling on iOS */
495
+ scroll-behavior: smooth;
496
+ scrollbar-width: none; /* Firefox */
497
+ -ms-overflow-style: none; /* IE/Edge */
498
+ overscroll-behavior: contain; /* avoid scroll chaining */
499
}
500
501
.process-step-detail-content pre {
@@ -502,6 +518,7 @@
518
.process-step-detail-content .step-kvp {
519
display: flex;
520
gap: var(--spacing-xs);
521
+ align-items: flex-start;
522
}
523
524
.process-step-detail-content .step-kvp-key {
@@ -510,6 +527,8 @@
527
opacity: 0.8;
528
display: flex;
529
align-items: center;
530
+ flex-shrink: 0;
531
+ min-width: fit-content;
532
}
533
534
.process-step-detail-content .step-kvp-key .material-symbols-outlined {
@@ -521,7 +540,9 @@
540
color: var(--color-text);
541
opacity: 0.75;
542
word-break: break-word;
543
+ white-space: pre-wrap;
544
font-size: 0.7rem;
545
+ line-height: 1.5;
546
}
547
548
/* Thoughts styling - single icon with plain text */
@@ -542,7 +563,7 @@
563
.process-step-detail-content .thought-text {
564
font-size: 0.72rem;
565
color: var(--color-text);
545
- opacity: 0.8;
566
+ opacity: 0.65;
567
line-height: 1.5;
568
white-space: pre-wrap;
569
word-break: break-word;
@@ -625,24 +646,6 @@
646
font-size: 0.72rem;
647
}
648
628
-.process-step-detail-content .terminal-cmd {
629
- display: flex;
630
- align-items: baseline;
631
- gap: 4px;
632
- color: var(--color-text);
633
- opacity: 0.9;
634
-}
635
-
636
-.process-step-detail-content .terminal-prompt {
637
- color: #7ee787;
638
- font-weight: 600;
639
-}
640
-
641
-.process-step-detail-content .terminal-code {
642
- color: var(--color-text);
643
- opacity: 0.85;
644
-}
645
-
649
.process-step-detail-content .terminal-output {
650
margin: var(--spacing-xs) 0 0 0;
651
padding: var(--spacing-xs);
@@ -653,64 +656,47 @@
656
word-break: break-word;
657
max-height: 200px;
658
overflow-y: auto;
659
+ -webkit-overflow-scrolling: touch; /* smooth scrolling on iOS */
660
+ scroll-behavior: smooth;
661
+ scrollbar-width: none; /* Firefox */
662
+ -ms-overflow-style: none; /* IE/Edge */
663
+ overscroll-behavior: contain; /* avoid scroll chaining */
664
}
665
658
-/* Light mode terminal */
659
-.light-mode .process-step-detail-content .terminal-prompt {
660
- color: #1a7f37;
666
+.process-step-detail-content .terminal-output::-webkit-scrollbar {
667
+ display: none;
668
+ width: 0;
669
+ height: 0;
670
}
671
672
+
673
+ }
674
+ #chat-input::-webkit-scrollbar { width: 6px; height: 6px; }
675
+ #chat-input::-webkit-scrollbar-track { background: transparent; margin: 4px 0; border-radius: 6px; }
676
+ #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; }
677
+ #chat-input::-webkit-scrollbar-thumb:hover { background-color: rgba(155,155,155,0.7); }
678
+
679
+/* Light mode terminal */
680
.light-mode .process-step-detail-content .terminal-output {
681
background: rgba(0, 0, 0, 0.05);
682
color: #24292f;
683
}
684
685
/* Light mode adjustments */
669
-.light-mode .process-group {
670
- background: rgba(0, 0, 0, 0.03);
671
- border: none;
672
-}
673
-
674
-.light-mode .process-group.embedded {
675
- background: rgba(0, 0, 0, 0.04);
676
- border-bottom-color: rgba(0, 0, 0, 0.08);
677
-}
678
-
679
-.light-mode .message-container.has-process-group {
680
- background: var(--color-panel);
681
- border-color: rgba(0, 0, 0, 0.08);
682
-}
683
-
684
-.light-mode .process-group:hover {
685
- border-color: rgba(0, 0, 0, 0.12);
686
-}
687
-
686
.light-mode .process-group.expanded .process-group-content {
687
border-top-color: rgba(0, 0, 0, 0.06);
688
}
689
692
-.light-mode .process-step:hover {
693
- background-color: rgba(0, 0, 0, 0.02);
694
-}
695
-
690
.light-mode .process-step-detail-content {
691
background-color: transparent;
692
}
693
700
-.light-mode .process-group-header .step-count {
701
- background-color: rgba(0, 0, 0, 0.06);
702
-}
703
-
694
/* Light mode text colors for process group */
695
.light-mode .process-group-header .group-title,
696
.light-mode .process-step-header .step-title {
697
color: var(--color-text);
698
}
699
710
-.light-mode .process-group-header .group-metrics {
711
- color: var(--color-text);
712
-}
713
-
700
/* Light mode status badge adjustments for better contrast */
701
.light-mode .status-gen {
702
background-color: rgba(14, 165, 233, 0.12);
webui/components/sidebar/left-sidebar.html
+4
@@ -168,6 +168,10 @@
168
cursor: pointer;
169
}
170
171
+ .light-mode #left-panel {
172
+ box-shadow: 1px 0 10px rgba(0, 0, 0, 0.1);
173
+ }
174
+
175
@media (max-width: 768px) {
176
#left-panel {
177
position: fixed;
webui/css/messages.css
-54
@@ -485,56 +485,6 @@
485
border-bottom: none;
486
}
487
488
-.light-mode .message-default {
489
- background-color: transparent;
490
- color: #1a242f;
491
-}
492
-
493
-.light-mode .message-agent {
494
- background-color: transparent;
495
- color: #356ca3;
496
-}
497
-
498
-.light-mode .message-agent-response {
499
- background-color: transparent;
500
- color: #188216;
501
-}
502
-
503
-.light-mode .message-agent-delegation {
504
- background-color: transparent;
505
- color: #12685e;
506
-}
507
-
508
-.light-mode .message-tool {
509
- background-color: transparent;
510
- color: #1c3c88;
511
-}
512
-
513
-.light-mode .message-code-exe {
514
- background-color: transparent;
515
- color: #6c43b0;
516
-}
517
-
518
-.light-mode .message-browser {
519
- background-color: transparent;
520
- color: #6c43b0;
521
-}
522
-
523
-.light-mode .message-info {
524
- background-color: transparent;
525
- color: #3f3f3f;
526
-}
527
-
528
-.light-mode .message-util {
529
- background-color: transparent;
530
- color: #5b5540;
531
-}
532
-
533
-.light-mode .message-warning {
534
- background-color: transparent;
535
- color: #8f4800;
536
-}
537
-
488
.light-mode .message-error {
489
background-color: rgba(220, 60, 60, 0.15);
490
border: 1px solid rgba(180, 40, 40, 0.4);
@@ -542,11 +492,7 @@
492
}
493
494
.light-mode .message-user {
545
- background-color: var(--color-panel);
495
color: #4e4e4e;
547
- border-radius: var(--border-radius);
548
- box-shadow: inset 0 2rem 2rem -2rem rgba(0, 0, 0, 0.15),
549
- inset 0 -2rem 2rem -2rem rgba(0, 0, 0, 0.05);
496
}
497
498
/* Markdown in messages */
webui/index.css
+2
-5
@@ -23,7 +23,7 @@
23
--color-input-focus-dark: #101010;
24
25
/* Light mode */
26
- --color-background-light: #dbdbdb;
26
+ --color-background-light: #f6f6f6;
27
--color-text-light: #333333;
28
--color-primary-light: #384653;
29
--color-secondary-light: #e8eaf6;
@@ -126,7 +126,7 @@ body,
126
.switch-label {
127
-webkit-transition: background-color 0.3s, color 0.3s, border-color 0.3s;
128
transition: background-color 0.3s, color 0.3s, border-color 0.3s;
129
- color: var(--color-text);
129
+ color: var(--color-text) !important;
130
}
131
132
img {
@@ -196,11 +196,8 @@ div#right-panel::-webkit-scrollbar-thumb:hover {
196
197
#time-date {
198
color: var(--color-text);
199
- font-size: 1.5rem;
200
- font-weight: 500;
199
text-align: right;
200
line-height: 1.2;
203
- font-family: var(--font-family-code);
201
}
202
203
#user-date {