streamline status badges; polish chat-history css
3clyp50 committed
Jan 4, 2026 at 06:46 UTC
74595c6e8d5b3803563cf656543b084d6ab89acd
5 files changed
+128
-198
webui/components/messages/process-group/process-group-store.js
+11
-23
@@ -115,28 +115,6 @@ const model = {
115
this._persist();
116
},
117
118
- // Fallback icon for step type when backend doesn't provide one (Material Symbols)
119
- // Maps backend log types to appropriate icons
120
- getStepIcon(type) {
121
- const icons = {
122
- 'agent': 'network_intelligence',
123
- 'response': 'chat',
124
- 'tool': 'construction',
125
- 'mcp': 'api',
126
- 'subagent': 'communication',
127
- 'code_exe': 'terminal',
128
- 'browser': 'captive_portal',
129
- 'progress': 'timer',
130
- 'info': 'info',
131
- 'hint': 'lightbulb',
132
- 'warning': 'warning',
133
- 'error': 'error',
134
- 'util': 'memory',
135
- 'done': 'done_all'
136
- };
137
- return icons[type] || 'circle';
138
- },
139
-
118
// Status code (3-4 letter) for backend log types
119
// Looks up tool name first (specific), then falls back to type (generic)
120
getStepCode(type, toolName = null) {
@@ -151,7 +129,17 @@ const model = {
129
},
130
131
// CSS color class for backend log types
154
- getStatusColorClass(type) {
132
+ // Looks up tool name first (specific), then falls back to type (generic)
133
+ getStatusColorClass(type, toolName = null) {
134
+ // Specific tool name mappings for 'tool' steps
135
+ if (type === 'tool' && toolName) {
136
+ // call_subordinate gets teal (SUB color)
137
+ if (toolName === 'call_subordinate') {
138
+ return 'status-sub';
139
+ }
140
+ // Add other specific tool mappings here if needed in the future
141
+ }
142
+
143
const colors = {
144
'agent': 'status-gen',
145
'response': 'status-end',
webui/components/messages/process-group/process-group.css
+95
-121
@@ -90,6 +90,7 @@
90
font-size: var(--font-size-smaller);
91
font-weight: 500;
92
color: var(--color-text);
93
+ opacity: 0.9;
94
white-space: nowrap;
95
overflow: hidden;
96
text-overflow: ellipsis;
@@ -140,103 +141,90 @@
141
}
142
143
/* Status colors - mapped from backend types via store */
144
+/* Each status defines --step-accent for cascading to internal icons */
145
146
/* GEN - agent type (blue/cyan) */
147
.status-gen {
146
- background-color: rgba(56, 189, 248, 0.15);
147
- color: #38bdf8;
148
- border: 1px solid rgba(56, 189, 248, 0.3);
148
+ --step-accent: #38bdf8;
149
+ color: var(--step-accent);
150
}
151
152
/* END - response/done type (green) */
153
.status-end {
153
- background-color: rgba(34, 197, 94, 0.15);
154
- color: #22c55e;
155
- border: 1px solid rgba(34, 197, 94, 0.3);
154
+ --step-accent: #22c55e;
155
+ color: var(--step-accent);
156
}
157
158
/* USE - tool usage (amber/yellow) */
159
.status-tool {
160
- background-color: rgba(251, 191, 36, 0.15);
161
- color: #fbbf24;
162
- border: 1px solid rgba(251, 191, 36, 0.3);
160
+ --step-accent: #fbbf24;
161
+ color: var(--step-accent);
162
}
163
164
/* MCP - mcp type (amber/yellow) */
165
.status-mcp {
167
- background-color: rgba(251, 191, 36, 0.15);
168
- color: #fbbf24;
169
- border: 1px solid rgba(251, 191, 36, 0.3);
166
+ --step-accent: #fbbf24;
167
+ color: var(--step-accent);
168
}
169
170
/* SUB - subagent type (teal) */
171
.status-sub {
174
- background-color: rgba(20, 184, 166, 0.15);
175
- color: #14b8a6;
176
- border: 1px solid rgba(20, 184, 166, 0.3);
172
+ --step-accent: #14b8a6;
173
+ color: var(--step-accent);
174
}
175
176
/* EXE - code_exe type (magenta/purple) */
177
.status-exe {
181
- background-color: rgba(186, 104, 200, 0.15);
182
- color: #ba68c8;
183
- border: 1px solid rgba(186, 104, 200, 0.3);
178
+ --step-accent: #ba68c8;
179
+ color: var(--step-accent);
180
}
181
182
/* BRW - browser type (indigo) */
183
.status-brw {
188
- background-color: rgba(129, 140, 248, 0.15);
189
- color: #818cf8;
190
- border: 1px solid rgba(129, 140, 248, 0.3);
184
+ --step-accent: #818cf8;
185
+ color: var(--step-accent);
186
}
187
188
/* WAIT - progress type (slate) */
189
.status-wait {
195
- background-color: rgba(148, 163, 184, 0.15);
196
- color: #94a3b8;
197
- border: 1px solid rgba(148, 163, 184, 0.3);
190
+ --step-accent: #94a3b8;
191
+ color: var(--step-accent);
192
}
193
194
/* INF - info type (gray) */
195
.status-inf {
202
- background-color: rgba(148, 163, 184, 0.15);
203
- color: #94a3b8;
204
- border: 1px solid rgba(148, 163, 184, 0.3);
196
+ --step-accent: #94a3b8;
197
+ color: var(--step-accent);
198
}
199
200
/* HNT - hint type (yellow-green) */
201
.status-hnt {
209
- background-color: rgba(163, 230, 53, 0.15);
210
- color: #a3e635;
211
- border: 1px solid rgba(163, 230, 53, 0.3);
202
+ --step-accent: #a3e635;
203
+ color: var(--step-accent);
204
}
205
206
/* WRN - warning type (orange) */
207
.status-wrn {
216
- background-color: rgba(249, 115, 22, 0.15);
217
- color: #f97316;
218
- border: 1px solid rgba(249, 115, 22, 0.3);
208
+ --step-accent: #f97316;
209
+ color: var(--step-accent);
210
}
211
212
/* ERR - error type (red) */
213
.status-err {
223
- background-color: rgba(239, 68, 68, 0.15);
224
- color: #ef4444;
225
- border: 1px solid rgba(239, 68, 68, 0.3);
214
+ --step-accent: #ef4444;
215
+ color: var(--step-accent);
216
}
217
218
/* UTL - util type (gray-blue) */
219
.status-utl {
230
- background-color: rgba(100, 116, 139, 0.15);
231
- color: #64748b;
232
- border: 1px solid rgba(100, 116, 139, 0.3);
220
+ --step-accent: #64748b;
221
+ color: var(--step-accent);
222
}
223
224
/* USR - user type (sky) */
225
.status-usr {
237
- background-color: rgba(56, 189, 248, 0.15);
238
- color: #38bdf8;
239
- border: 1px solid rgba(56, 189, 248, 0.3);
226
+ --step-accent: #38bdf8;
227
+ color: var(--step-accent);
228
}
229
230
/* Animated spinner for active status (CSS-only, no Material Icons) */
@@ -367,11 +355,14 @@
355
.process-step {
356
display: flex;
357
flex-direction: column;
370
- padding: 1px var(--spacing-xs);
371
- border-radius: 4px;
358
+ padding: 4px 0;
359
transition: background-color 0.15s ease;
360
}
361
362
+.step-expanded {
363
+ padding: var(--spacing-xs) 0;
364
+}
365
+
366
/* Utility/Info/Hint steps have subtle background tint */
367
.process-step[data-type="util"],
368
.process-step[data-type="info"],
@@ -415,7 +406,7 @@
406
/* Step title */
407
.process-step-header .step-title {
408
flex: 1;
418
- font-size: 0.75rem;
409
+ font-size: 0.8rem;
410
color: var(--color-text);
411
white-space: nowrap;
412
overflow: hidden;
@@ -480,12 +471,13 @@
471
grid-template-rows: 1fr;
472
opacity: 1;
473
overflow: visible;
474
+ margin-top: var(--spacing-xs);
475
}
476
477
.process-step-detail-content {
478
padding: var(--spacing-xs) 0;
479
margin-top: var(--spacing-xxs);
488
- margin-left: 20px; /* Align with icon */
480
+ margin-left: 28px; /* Align with icon */
481
background-color: transparent;
482
font-size: 0.7rem;
483
line-height: 1.5;
@@ -508,40 +500,38 @@
500
opacity: 0.8;
501
}
502
511
-/* KVPs in step detail */
503
+/* KVPs in step detail - CSS Grid for aligned columns */
504
.process-step-detail-content .step-kvps {
513
- display: flex;
514
- flex-direction: column;
515
- gap: var(--spacing-sm);
505
+ display: grid;
506
+ grid-template-columns: auto 1fr;
507
+ gap: var(--spacing-xs) var(--spacing-sm);
508
+ align-items: start;
509
}
510
511
.process-step-detail-content .step-kvp {
519
- display: flex;
520
- gap: var(--spacing-xs);
521
- align-items: flex-start;
512
+ display: contents; /* Children participate in parent grid */
513
}
514
515
.process-step-detail-content .step-kvp-key {
525
- color: var(--color-primary);
516
+ color: var(--step-accent, var(--color-primary));
517
font-weight: 500;
518
opacity: 0.8;
519
display: flex;
520
align-items: center;
530
- flex-shrink: 0;
531
- min-width: fit-content;
521
+ justify-content: end;
522
}
523
524
.process-step-detail-content .step-kvp-key .material-symbols-outlined {
525
font-size: 0.9rem;
526
+ color: var(--step-accent, var(--color-primary)) !important;
527
}
528
529
.process-step-detail-content .step-kvp-value {
539
- flex: 1;
530
color: var(--color-text);
541
- opacity: 0.75;
531
+ opacity: 0.85;
532
word-break: break-word;
533
white-space: pre-wrap;
544
- font-size: 0.7rem;
534
+ font-size: 0.75rem;
535
line-height: 1.5;
536
}
537
@@ -549,19 +539,20 @@
539
.process-step-detail-content .step-thoughts {
540
display: flex;
541
align-items: flex-start;
552
- gap: 6px;
542
+ gap: var(--spacing-sm);
543
margin: var(--spacing-xs) 0;
544
}
545
546
.process-step-detail-content .thought-icon {
547
font-size: 0.85rem;
558
- color: #fbbf24;
548
+ color: var(--step-accent, #38bdf8);
549
flex-shrink: 0;
550
margin-top: 2px;
551
}
552
553
.process-step-detail-content .thought-text {
564
- font-size: 0.72rem;
554
+ font-size: 0.7rem;
555
+ font-weight: 300;
556
color: var(--color-text);
557
opacity: 0.65;
558
line-height: 1.5;
@@ -569,41 +560,37 @@
560
word-break: break-word;
561
}
562
572
-/* Light mode thoughts */
563
+/* Light mode thoughts - uses step accent if available */
564
.light-mode .process-step-detail-content .thought-icon {
574
- color: #b45309;
565
+ color: var(--step-accent, #b45309);
566
}
567
577
-/* Tool arguments structured display - clean label:value format without boxes */
568
+/* Tool arguments - CSS Grid for aligned columns */
569
.process-step-detail-content .step-tool-args {
579
- display: flex;
580
- flex-direction: column;
581
- gap: 4px;
570
+ display: grid;
571
+ grid-template-columns: auto 1fr;
572
+ gap: 4px 8px;
573
margin: var(--spacing-xs) 0;
583
- padding: 0;
584
- background: transparent;
585
- border-radius: 0;
586
- border-left: none;
574
+ align-items: baseline;
575
}
576
577
.process-step-detail-content .tool-arg-row {
590
- display: flex;
591
- gap: 8px;
592
- align-items: baseline;
578
+ display: contents; /* Children participate in parent grid */
579
}
580
581
.process-step-detail-content .tool-arg-label {
582
font-size: 0.68rem;
583
font-weight: 600;
598
- color: var(--color-primary);
599
- flex-shrink: 0;
584
+ color: var(--step-accent, var(--color-primary));
585
display: flex;
586
align-items: center;
587
+ justify-content: end;
588
}
589
590
.process-step-detail-content .tool-arg-label .material-symbols-outlined {
591
font-size: 0.9rem;
592
opacity: 0.85;
593
+ color: var(--step-accent, var(--color-primary));
594
}
595
596
.process-step-detail-content .tool-arg-value {
@@ -622,14 +609,14 @@
609
610
.process-step-detail-content .step-tool-header .tool-icon {
611
font-size: 0.85rem;
625
- color: var(--color-warning);
612
+ color: var(--step-accent, var(--color-warning));
613
opacity: 0.85;
614
}
615
616
.process-step-detail-content .step-tool-header .tool-label {
617
font-size: 0.68rem;
618
font-weight: 600;
632
- color: var(--color-warning);
619
+ color: var(--step-accent, var(--color-warning));
620
opacity: 0.85;
621
}
622
@@ -691,88 +678,75 @@
678
}
679
680
/* Light mode status badge adjustments for better contrast */
681
+/* Override --step-accent for cascading to internal icons */
682
.light-mode .status-gen {
695
- background-color: rgba(14, 165, 233, 0.12);
696
- color: #0284c7;
697
- border-color: rgba(14, 165, 233, 0.25);
683
+ --step-accent: #0284c7;
684
+ color: var(--step-accent);
685
}
686
687
.light-mode .status-end {
701
- background-color: rgba(22, 163, 74, 0.12);
702
- color: #15803d;
703
- border-color: rgba(22, 163, 74, 0.25);
688
+ --step-accent: #15803d;
689
+ color: var(--step-accent);
690
}
691
692
.light-mode .status-tool {
707
- background-color: rgba(217, 119, 6, 0.12);
708
- color: #b45309;
709
- border-color: rgba(217, 119, 6, 0.25);
693
+ --step-accent: #b45309;
694
+ color: var(--step-accent);
695
}
696
697
.light-mode .status-mcp {
713
- background-color: rgba(217, 119, 6, 0.12);
714
- color: #b45309;
715
- border-color: rgba(217, 119, 6, 0.25);
698
+ --step-accent: #b45309;
699
+ color: var(--step-accent);
700
}
701
702
.light-mode .status-sub {
719
- background-color: rgba(13, 148, 136, 0.12);
720
- color: #0f766e;
721
- border-color: rgba(13, 148, 136, 0.25);
703
+ --step-accent: #0f766e;
704
+ color: var(--step-accent);
705
}
706
707
.light-mode .status-exe {
725
- background-color: rgba(147, 51, 234, 0.12);
726
- color: #7c3aed;
727
- border-color: rgba(147, 51, 234, 0.25);
708
+ --step-accent: #7c3aed;
709
+ color: var(--step-accent);
710
}
711
712
.light-mode .status-brw {
731
- background-color: rgba(99, 102, 241, 0.12);
732
- color: #4f46e5;
733
- border-color: rgba(99, 102, 241, 0.25);
713
+ --step-accent: #4f46e5;
714
+ color: var(--step-accent);
715
}
716
717
.light-mode .status-wait {
737
- background-color: rgba(100, 116, 139, 0.12);
738
- color: #475569;
739
- border-color: rgba(100, 116, 139, 0.25);
718
+ --step-accent: #475569;
719
+ color: var(--step-accent);
720
}
721
722
.light-mode .status-inf {
743
- background-color: rgba(100, 116, 139, 0.12);
744
- color: #475569;
745
- border-color: rgba(100, 116, 139, 0.25);
723
+ --step-accent: #475569;
724
+ color: var(--step-accent);
725
}
726
727
.light-mode .status-hnt {
749
- background-color: rgba(132, 204, 22, 0.12);
750
- color: #65a30d;
751
- border-color: rgba(132, 204, 22, 0.25);
728
+ --step-accent: #65a30d;
729
+ color: var(--step-accent);
730
}
731
732
.light-mode .status-wrn {
755
- background-color: rgba(234, 88, 12, 0.12);
756
- color: #c2410c;
757
- border-color: rgba(234, 88, 12, 0.25);
733
+ --step-accent: #c2410c;
734
+ color: var(--step-accent);
735
}
736
737
.light-mode .status-err {
761
- background-color: rgba(220, 38, 38, 0.12);
762
- color: #b91c1c;
763
- border-color: rgba(220, 38, 38, 0.25);
738
+ --step-accent: #b91c1c;
739
+ color: var(--step-accent);
740
}
741
742
.light-mode .status-utl {
767
- background-color: rgba(71, 85, 105, 0.12);
768
- color: #334155;
769
- border-color: rgba(71, 85, 105, 0.25);
743
+ --step-accent: #334155;
744
+ color: var(--step-accent);
745
}
746
747
.light-mode .status-usr {
773
- background-color: rgba(14, 165, 233, 0.12);
774
- color: #0284c7;
775
- border-color: rgba(14, 165, 233, 0.25);
748
+ --step-accent: #0284c7;
749
+ color: var(--step-accent);
750
}
751
752
/* Animation for loading state */
webui/css/messages.css
+10
-20
@@ -9,7 +9,7 @@
9
overflow-y: scroll;
10
overflow-x: hidden;
11
scroll-behavior: auto !important; /* avoid infinite scrolling! */
12
- padding: var(--spacing-md) var(--spacing-sm) 0;
12
+ padding: var(--spacing-md) 10em 0 !important;
13
-webkit-transition: all 0.3s ease;
14
transition: all 0.3s ease;
15
scrollbar-width: thin;
@@ -79,6 +79,7 @@
79
80
.message-user {
81
text-align: end;
82
+ margin-bottom: var(--spacing-md);
83
}
84
85
.message-user > div {
@@ -152,6 +153,7 @@
153
.message-agent-response {
154
min-width: 255px;
155
background-color: transparent;
156
+ opacity: 0.85;
157
}
158
159
.message-agent-delegation {
@@ -438,6 +440,12 @@
440
}
441
442
/* Media Queries */
443
+@media (max-width: 1024px) {
444
+ #chat-history {
445
+ padding: var(--spacing-md) var(--spacing-sm) 0 !important;
446
+ }
447
+}
448
+
449
@media (max-width: 640px) {
450
/* New styles for mobile messages */
451
@@ -602,10 +610,9 @@
610
margin-top: 0.5em;
611
margin-bottom: 0.5em;
612
display: inline-grid;
605
- grid-template-columns: minmax(0, max-content);
613
+ grid-template-columns: minmax(0, 100%);
614
grid-auto-rows: auto;
615
max-width: 100%;
608
- width: fit-content;
616
gap: var(--spacing-xs);
617
}
618
@@ -622,23 +629,6 @@
629
margin-left: 2em;
630
}
631
625
-/* 1. FIRST child’s .message – clear ONLY bottom corners */
626
-.message-group > *:first-child:not(:last-child) > .message-user {
627
- border-bottom-left-radius: var(--spacing-xxs);
628
- border-bottom-right-radius: var(--spacing-xxs);
629
-}
630
-
631
-/* 2. MIDDLE children’s .message – clear ALL corners */
632
-.message-group > *:not(:first-child):not(:last-child) > .message-user {
633
- border-radius: var(--spacing-xxs);
634
-}
635
-
636
-/* 3. LAST child’s .message – clear ONLY top corners */
637
-.message-group > *:last-child:not(:first-child) > .message-user {
638
- border-top-left-radius: var(--spacing-xxs);
639
- border-top-right-radius: var(--spacing-xxs);
640
-}
641
-
632
.message-container {
633
animation: fadeIn 0.5s;
634
-webkit-animation: fadeIn 0.5s;
webui/index.css
-12
@@ -1299,47 +1299,35 @@ nav ul li a img {
1299
}
1300
1301
.scheduler-status-idle {
1302
- background-color: rgba(0, 100, 0, 0.2);
1302
color: #2a9d8f; /* Dark green that works with both light and dark themes */
1304
- border: 1px solid rgba(42, 157, 143, 0.3);
1303
}
1304
1305
.scheduler-status-running {
1308
- background-color: rgba(0, 60, 120, 0.2);
1306
color: #4361ee; /* Dark blue that works with both light and dark themes */
1310
- border: 1px solid rgba(67, 97, 238, 0.3);
1307
}
1308
1309
.scheduler-status-disabled {
1314
- background-color: rgba(70, 70, 70, 0.2);
1310
color: #6c757d; /* Dark grey that works with both light and dark themes */
1316
- border: 1px solid rgba(108, 117, 125, 0.3);
1311
}
1312
1313
.scheduler-status-error {
1320
- background-color: rgba(120, 0, 0, 0.2);
1314
color: #e63946; /* Dark red that works with both light and dark themes */
1322
- border: 1px solid rgba(230, 57, 70, 0.3);
1315
}
1316
1317
/* Light mode adjustments */
1318
.light-mode .scheduler-status-idle {
1327
- background-color: rgba(42, 157, 143, 0.1);
1319
color: #1a6f65; /* Darker green for light mode */
1320
}
1321
1322
.light-mode .scheduler-status-running {
1332
- background-color: rgba(67, 97, 238, 0.1);
1323
color: #2540b3; /* Darker blue for light mode */
1324
}
1325
1326
.light-mode .scheduler-status-disabled {
1337
- background-color: rgba(108, 117, 125, 0.1);
1327
color: #495057; /* Darker grey for light mode */
1328
}
1329
1330
.light-mode .scheduler-status-error {
1342
- background-color: rgba(230, 57, 70, 0.1);
1331
color: #c5283d; /* Darker red for light mode */
1332
}
1333
webui/js/messages.js
+12
-22
@@ -41,19 +41,11 @@ function resolveToolName(type, kvps, stepElement) {
41
}
42
43
/**
44
- * Update status badge text content while preserving the icon
44
+ * Update status badge text content
45
*/
46
function updateBadgeText(badge, newCode) {
47
if (!badge) return;
48
-
49
- // Find and update text node, or append new one
50
- for (const node of badge.childNodes) {
51
- if (node.nodeType === Node.TEXT_NODE && node.textContent.trim()) {
52
- node.textContent = newCode;
53
- return;
54
- }
55
- }
56
- badge.appendChild(document.createTextNode(newCode));
48
+ badge.textContent = newCode;
49
}
50
51
// Process types that should be grouped into collapsible sections
@@ -1179,7 +1171,7 @@ function createProcessGroup(id) {
1171
header.innerHTML = `
1172
<span class="expand-icon"></span>
1173
<span class="group-title">Processing...</span>
1182
- <span class="status-badge status-gen status-active group-status"><span class="badge-icon material-symbols-outlined">public</span>GEN</span>
1174
+ <span class="status-badge status-gen status-active group-status">GEN</span>
1175
<span class="group-metrics">
1176
<span class="metric-time" title="Start time"><span class="material-symbols-outlined">schedule</span><span class="metric-value">--:--</span></span>
1177
<span class="metric-steps" title="Steps"><span class="material-symbols-outlined">list_alt</span><span class="metric-value">0</span></span>
@@ -1284,15 +1276,15 @@ function addProcessStep(group, id, type, heading, content, kvps, timestamp = nul
1276
1277
// Status code and color class from store (maps backend types)
1278
const statusCode = processGroupStore.getStepCode(type, toolNameToUse);
1287
- const statusColorClass = processGroupStore.getStatusColorClass(type);
1279
+ const statusColorClass = processGroupStore.getStatusColorClass(type, toolNameToUse);
1280
1289
- // Icon extracted from heading (backend sends icon://xxx), fallback to type-based
1290
- const stepIcon = extractIconFromHeading(heading) || processGroupStore.getStepIcon(type);
1281
+ // Add status color class to step for cascading --step-accent to internal icons
1282
+ step.classList.add(statusColorClass);
1283
1284
const activeClass = isGroupCompleted ? "" : " status-active";
1285
stepHeader.innerHTML = `
1286
<span class="step-expand-icon"></span>
1295
- <span class="status-badge ${statusColorClass}${activeClass}"><span class="badge-icon material-symbols-outlined">${stepIcon}</span>${statusCode}</span>
1287
+ <span class="status-badge ${statusColorClass}${activeClass}">${statusCode}</span>
1288
<span class="step-title">${escapeHTML(title)}</span>
1289
`;
1290
@@ -1711,15 +1703,13 @@ function updateProcessGroupHeader(group) {
1703
const lastToolName = lastStep.getAttribute("data-tool-name");
1704
const lastTitle = lastStep.querySelector(".step-title")?.textContent || "";
1705
1714
- // Update status badge with icon (keep status-active during execution)
1706
+ // Update status badge (keep status-active during execution)
1707
if (statusEl) {
1708
// Status code and color class from store (maps backend types)
1709
const statusCode = processGroupStore.getStepCode(lastType, lastToolName);
1718
- const statusColorClass = processGroupStore.getStatusColorClass(lastType);
1719
- // Get icon from the last step's badge, fallback to type-based
1720
- const lastStepBadge = lastStep.querySelector(".badge-icon");
1721
- const badgeIcon = lastStepBadge?.textContent || processGroupStore.getStepIcon(lastType);
1722
- statusEl.innerHTML = `<span class="badge-icon material-symbols-outlined">${badgeIcon}</span>${statusCode}`;
1710
+ const statusColorClass = processGroupStore.getStatusColorClass(lastType, lastToolName);
1711
+
1712
+ statusEl.textContent = statusCode;
1713
statusEl.className = `status-badge ${statusColorClass} status-active group-status`;
1714
}
1715
@@ -1764,7 +1754,7 @@ function markProcessGroupComplete(group, responseTitle) {
1754
// Update status badge to END (remove status-active)
1755
const statusEl = group.querySelector(".group-status");
1756
if (statusEl) {
1767
- statusEl.innerHTML = '<span class="badge-icon material-symbols-outlined">check_circle</span>END';
1757
+ statusEl.innerHTML = '<span class="badge-icon material-symbols-outlined">check</span>END';
1758
statusEl.className = "status-badge status-end group-status"; // No status-active
1759
}
1760